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

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

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

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



@keyframes growleft-1 {
  0% { opacity: 0; width: 0 }
  10% { opacity: 1; width: 0 }
  100% { opacity: 1; width: 100% }
}
.plum-details.active::before, .plum-details.active::after, .grow-left.active {
	animation-name: growleft-1;
  	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-timing-function: ease-in;
 	animation-duration: .8s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes growleft-2 {
  0% { opacity: 0; width: 0 }
  10% { opacity: 1; width: 0 }
  100% { opacity: 1; width: 33% }
}
.grow-left-2.active {
	animation-name: growleft-2;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
	animation-timing-function: ease-in;
 	animation-duration: .8s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes growleft-3 {
  0% { opacity: 0; right: 100vw }
  10% { opacity: 1; right: 100vw }
  100% { opacity: 1; right: 31vw }
}
.home-form-1.active::before {
	animation-name: growleft-3;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
	animation-timing-function: ease-in;
 	animation-duration: 1.2s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

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

@keyframes leftimg {
  0% { transform: translateY(100%); opacity: 0.26 }
  30% { transform: translateY(33%); opacity: 0.39 }
  100% { transform: translateY(0%); opacity: 0 }
}
.leftimg.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: translateY(0%); opacity: 0.0 }
  20% { transform: translateY(33%); opacity: 0.33 }
  100% { transform: translateY(100%); opacity: 0 }
}
.rightimg.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(-2.4%); opacity: 0.16 }
  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: .8s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes inset-c {
  0% { clip-path: inset(0 0 100% 0) }
  100% { clip-path: inset(0 0%) }
}
.inset-c.active {
	animation-name: inset-c;
  	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: .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;
}*/
@keyframes complex-1 {
  0% { transform: translateY(0%); opacity: 0; filter: brightness(100%) }
  26% { transform: translateY(1.2%); opacity: 0.52; filter: brightness(52%) }
  52% { transform: translateY(-.8%); opacity: 0.76; filter: brightness(152%) }
  100% { transform: translateY(0%); opacity: 0; filter: brightness(100%) }
}
@keyframes complex-2 {
  0% { transform: translateY(0%) scale(1); opacity: 0; filter: brightness(100%) }
  26% { transform: translateY(-1.2%) scale(1.01); opacity: 0.39; filter: brightness(26%) }
  52% { transform: translateY(.8%) scale(1.02); opacity: 0.52; filter: brightness(164%) }
  100% { transform: translateY(0%) scale(1); opacity: 0; filter: brightness(100%) }
}
.comps-anim.active::before {
	animation-name: complex-1;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 2.7s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes attempt-r {
  0% { transform: translate(0%); opacity: .52; filter: blur(0px) }
  70% { transform: translate(-3%); opacity: 0.52; filter: blur(8px) }
  100% { transform: translate(-3%); opacity: 0; filter: blur(0) }
}
/*.attempt.active::before {
	animation-name: attempt-r;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 2.2s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}*/
@keyframes attempt-l {
  0% {} 
  100% { transform: translate(6%); opacity: 0; filter: blur(0) brightness(100%) }
}
.attempt.active::after {
	animation-name: attempt-l;
  	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;
}

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

@keyframes sl-1 {
  0% { transform: translateY(-.64em); opacity: 0; }
  70% { transform: translateY(.0em); opacity: 0.52; }
  100% { transform: translateY(0em); opacity: 1; }
}
@keyframes sl-1-mob {
  0% { transform: translateY(-.64em) translateX(-50%); opacity: 0; }
  70% { transform: translateY(.0em) translateX(-50%); opacity: 0.52; }
  100% { transform: translateY(0em) translateX(-50%); opacity: 1; }
}
.sl-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.2s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@media (max-width: 981px) {
.h2-big-forslogan.sl-1 {
	animation-name: sl-1-mob;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.2s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}	
}

@keyframes sl-2 {
  0% { transform: translateY(-.9em); opacity: 0; }
  70% { transform: translateY(.0em); opacity: 0.52; }
  100% { transform: translateY(0em); opacity: 1; }
}
.sl-2 {
	animation-name: sl-2;
  	animation-iteration-count: 1;
	animation-delay: 0.2s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: .6s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-3 {
  0% { transform: translateY(-.9em); opacity: 0; }
  60% { transform: translateY(.15em); opacity: 0.52; }
  100% { transform: translateY(0em); opacity: 1; }
}
.sl-3, .sl-3-body {
	animation-name: sl-3;
  	animation-iteration-count: 1;
	animation-delay: 0.4s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: .8s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes sl-4 {
  0% { transform: translate(0%); opacity: 0; }
  50% { transform: translate(-64%); opacity: 0.39; }
  100% { transform: translate(-50%); opacity: 1; }
}
@keyframes sl-4-mob {
  0% { transform: translate(-14%); opacity: 0; }
  50% { transform: translate(14%); opacity: 0.39; }
  100% { transform: translate(-0%); opacity: 1; }
}
.sl-und-4, .h3-slogan {
	animation-name: sl-4;
  	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;
}
@media (max-width: 981px) {
.sl-und-4, .h3-slogan {
	animation-name: sl-4-mob;
  	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-1a {
  0% { transform: translate(-0em); opacity: 1; }
  20% { transform: translate(-0em); opacity: .64; }
  100% { transform: translateY(-1em); opacity: 0; }
}
@keyframes sl-1a-mob {
  0% { transform: translateX(-50%); opacity: 1; }
  20% { transform: translateX(-50%); opacity: .64; }
  100% { transform: translateX(-50%) translateY(-1em); opacity: 0; }
}
body.shrink .sl-1 {
	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.5s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@media (max-width: 981px) {
body.shrink .h2-big-forslogan.sl-1 {
	animation-name: sl-1a-mob;
  	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.5s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}	
}

@keyframes sl-2a {
  0% { transform: translate(0em); opacity: 1; }
  20% { transform: translate(0em); opacity: .64; }
  100% { transform: translateY(-10em); opacity: 0; }
}
body.shrink .sl-2 {
	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: 2.1s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

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

@keyframes cookiebar {
  0% { transform: translateY(200%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.my-cookie-bar.cb-active {
	animation-name: cookiebar;
  	animation-iteration-count: 1;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.3s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes rollin {
	0% { transform: translate(-36%) rotate(-39deg); }
	50% { transform: translate(8%) rotate(12deg); }
	100% { transform: translate(0%) rotate(0deg); }
}
.circle-book.active, .circle.active {
	animation-name: rollin;
  	animation-iteration-count: 1;
	animation-delay: 0.0s;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0);
 	animation-duration: 1.6s;
	animation-direction: alternate-reverse;
	animation-direction: normal;
	animation-fill-mode: forwards;
}