/* theme colors EEE2DE EA906C B31312 2B2A4C*/
:root {
	--first-delay: 0.2s;
	--second-delay: 0.74s;
	--third-delay: 2.5s;
	--fourth-delay: 4s;
	--fifth-delay: 5s;
	--steps-delay: 0.5s;
	--slide-horz-offset: 100vw;
}

@keyframes slide-in-left {
  from {
    transform: translateX(calc(-1 * var(--slide-horz-offset)));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(var(--slide-horz-offset));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-in-bottom {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}

#contactSales{
  animation: slide-in-left 0.8s ease-in-out forwards;
	transform: translate(calc(-1 * var(--slide-horz-offset)), 0);
	animation-delay: calc( var(--fifth-delay) + calc( 5 * var(--steps-delay) ) );
}

.blankSpaceSep {
	height: 50px !important;
}

.left_title_page_h1 {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	margin: 0;
	padding: 0;
	/* stop text from touching left or right */
	/* computed minimum between 12em and 80% */
	font-size: 3em;
	font-weight: 600;
	/* title case */
	text-transform: capitalize;
	/* slide in from left */
	transform: translateX(calc(-1 * var(--slide-horz-offset)));
  animation: slide-in-left 0.8s ease-in-out forwards;
	animation-delay: var(--first-delay);
}

/* then the big arrow, but it has to be in the html file lol */

.right_title_page_h1 {
	position: relative;
	top: 0;
	right: 0;
	/* height: auto; */
	margin: 0;

	padding: 0;

	font-size: 3em;
	font-weight: 600;
	/* right justified text */
	text-align: right;
	text-transform: capitalize;
	transform: translateX(var(--slide-horz-offset));
  animation: slide-in-right 0.8s ease-in-out forwards;
	animation-delay: var(--second-delay);
}

.body_title_page {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	margin: 0;
	/* stop text from touching left or right */
	padding: 0;
	/* computed minimum between 12em and 80% */
	font-size: 1.5em;
	font-weight: 400;
	transform: translateY(100vh);
  animation: slide-in-bottom 0.8s ease-in-out forwards;
	animation-delay: var(--third-delay);
}

.steps_title_page {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	margin: 0;
	/* stop text from touching left or right */
	padding: 0;
	/* computed minimum between 12em and 80% */
	font-size: 1.2em;
	font-weight: 400;

	transform: translateY(100vh);
  animation: slide-in-bottom 0.8s ease-in-out forwards;
	animation-delay: var(--fourth-delay);
}

#step1 {
	transform: translateY(100vh);
  animation: slide-in-bottom 0.5s ease-in-out forwards;
	animation-delay: calc( var(--fifth-delay) + calc( 1 * var(--steps-delay) ) );
}
#step2 {
	transform: translateY(100vh);
	animation: slide-in-bottom 0.5s ease-in-out forwards;
	animation-delay: calc( var(--fifth-delay) + calc( 2 * var(--steps-delay) ) );
}
#step3 {
	transform: translateY(100vh);
	animation: slide-in-bottom 0.5s ease-in-out forwards;
	animation-delay: calc( var(--fifth-delay) + calc( 3 * var(--steps-delay) ) );
}
#stepthen {
	transform: translateY(100vh);
	animation: slide-in-bottom 0.5s ease-in-out forwards;
	animation-delay: calc( var(--fifth-delay) + calc( 4 * var(--steps-delay) ) );
}