@charset "utf-8";
/* CSS Document */

/* --------------------------Animations-------------------------- */

.faded {
  position: relative;
  /*transform: translateY(15px);*/
  opacity: 0;
  transition: 2.7s all ease;
}

.faded.active {
  /*transform: translateY(0);*/
  opacity: 1;
}

@keyframes locimg {
  0% { transform: translate(100%); opacity: 1 }
  50% { transform: translate(-33%); opacity: 0.09 }
  100% { transform: translate(0%); opacity: 0 }
}
.loc-image.active::after {
	animation-name: locimg;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 3.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes leftimg {
  0% { transform: translate(0%); opacity: 0.26 }
  30% { transform: translate(-33%); opacity: 0.16 }
  100% { transform: translate(-100%); opacity: 0 }
}
.left-image.active::after {
	animation-name: leftimg;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


@keyframes rightimg {
  0% { transform: translate(0%); opacity: 0.21 }
  20% { transform: translate(33%); opacity: 0.13 }
  100% { transform: translate(100%); opacity: 0 }
}
.right-image.active::after {
	animation-name: rightimg;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.4s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes ah2 {
  0% { transform: translate(0em) }
  50% { transform: translate(0.06em) }
  100% { transform: translate(0em) }
}
.ah2 {
	animation-name: ah2;
  	animation-iteration-count: 1;
	animation-delay: 2s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
	animation-timing-function: ease-in-out;
 	animation-duration: 2.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


@keyframes fromleft {
  0% { transform: translate(-100%); opacity: 0.06 }
  20% { transform: translate(5%); opacity: 0.19 }
  100% { transform: translate(-3.3em); opacity: 1 }
}
@media (max-width: 768px) {
@keyframes fromleft {
  0% { transform: translate(-100%); opacity: 0.16 }
  20% { transform: translate(5%); opacity: 0.33 }
  100% { transform: translate(0%); opacity: 1 }
}
}
.fromleft.active {
	animation-name: fromleft;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 3.4s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


/*@keyframes splash {
  0% { transform: scale(0.05) }
  100% { transform: scale(1) }
}
.splash {
	animation-name: splash;
  	animation-iteration-count: 1;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
	animation-timing-function: ease-in;
 	animation-duration: 0.3s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}*/

/* --------------------------Hero SLogan-------------------------- */

@keyframes sl-1 {
  0% { transform: translate(-2em); opacity: 0; }
  30% { transform: translate(-.5em); opacity: 0.16; }
  100% { transform: translate(-.26em); opacity: 1; }
}
.sl-und-1 {
	animation-name: sl-1;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-2 {
  0% { transform: translate(-0.2em); opacity: 0; }
  50% { transform: translate(.4em); opacity: 0.33; }
  100% { transform: translate(0em); opacity: 1; }
}
.sl-und-2 {
	animation-name: sl-2;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 3.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-3 {
  0% { transform: translate(0.05em); opacity: 0; }
  50% { transform: translate(-.1em); opacity: 0.64; }
  100% { transform: translate(0em); opacity: 1; }
}
.sl-und-3 {
	animation-name: sl-2;
  	animation-iteration-count: 1;
	animation-delay: 1.2s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 3.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-4 {
  0% { transform: translate(0.05em); opacity: 0; }
  50% { transform: translate(-.1em); opacity: 0.39; }
  100% { transform: translate(0em); opacity: 1; }
}
.sl-und-4 {
	animation-name: sl-4;
  	animation-iteration-count: 1;
	animation-delay: 2s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


@keyframes sl-1a {
  0% { transform: translate(-0.26em); opacity: 1; }
  100% { transform: translate(-10em); opacity: 0; }
}
.sl-und-1.shrink {
	animation-name: sl-1a;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-2a {
  0% { transform: translate(0em); opacity: 1; }
  100% { transform: translate(-50em); opacity: 0; }
}
.sl-und-2.shrink {
	animation-name: sl-2a;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-3a {
  0% { transform: translate(0em); opacity: 1; }
  100% { transform: translate(15em); opacity: 0; }
}
.sl-und-3.shrink {
	animation-name: sl-3a;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-4a {
  0% { transform: translate(0em); opacity: 1; }
  100% { transform: translate(10em); opacity: 0; }
}
.sl-und-4.shrink {
	animation-name: sl-4a;
  	animation-iteration-count: 1;
	animation-delay: 0s;
 	animation-timing-function: cubic-bezier(.5, 0, 1, 1);
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}