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

@import url(https://fonts.googleapis.com/css?family=Lato:600);

.rotating-text {
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: white;
  text-align: center;
  transform: translateX(-80px);
}
.rotating-text p {
  display: inline-flex;
  margin: 0;
  vertical-align: top;
}
.rotating-text p .word {
  position: absolute;
  display: flex;
  opacity: 0;
}
.rotating-text p .word .letter {
  transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
  transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
  transform: rotateX(-90deg);
}

.alizarin {
  color: #FFFFFF;
}

.wisteria {
  color: #FFFFFF;
}

.peter-river {
  color: #FFFFFF;
}

.emerald {
  color: #FFFFFF;
}

.sun-flower {
  color: #FFFFFF;
}


/*ScrollAnimation*/
.scrollanim {
  opacity: 0;
  transition: all .5s ease;
}
 
.scrollanim.show {
  opacity: 1;
  transform: none;
}
 
.scrollanim--up {
  transform: translate(0, 100px);
}






/*Neumophism*/

.neumorphism {
  background-color: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }

.card-w .card {
  display:block;
  flex-direction: column;
  align-items: center;
  padding: 60px 60px;
  border-radius: 30px;
  position: relative;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); }
  .card-w .card .card__text {
    text-align: center; }

/* inset */
.card.inset {
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF; }
  .card.inset i {
    text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00; }

.card.active {
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
  background: linear-gradient(318.32deg, rgba(163, 177, 198, 0.1) 0%, rgba(163, 177, 198, 0.1) 55%, rgba(163, 177, 198, 0.25) 100%); }

/* Concept*/
.conceptbody {
  margin-top:30px;
  display: -webkit-box;
  display: ;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 10opx;
}
.conceptbody .draw {
  position: relative;
  padding: 3px 20px;
  margin: 2px 0;
  color: transparent;
  font-size: 26px;
}
.conceptbody .draw.-small {
  padding: 2px 10px;
  font-size: 14px;
}
.conceptbody .draw:before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0%;
  right: 100%;
  background-color: #454545;
  content: '';
}
.conceptbody .draw.-do {
  -webkit-animation: show 2.5s forwards;
          animation: show 2.5s forwards;
}
.conceptbody .draw.-do:before {
  -webkit-animation: intro 2.5s ease-in-out;
          animation: intro 2.5s ease-in-out;
}
.conceptbody .draw.-wave:nth-child(1), .conceptbody .draw.-wave:nth-child(1)::before {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.conceptbody .draw.-wave:nth-child(2), .conceptbody .draw.-wave:nth-child(2)::before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.conceptbody .draw.-wave:nth-child(3), .conceptbody .draw.-wave:nth-child(3)::before {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.conceptbody .draw.-wave:nth-child(4), .conceptbody .draw.-wave:nth-child(4)::before {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.conceptbody .draw.-wave:nth-child(5), .conceptbody .draw.-wave:nth-child(5)::before {
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
}
.conceptbody .draw.-wave:nth-child(6), .conceptbody .draw.-wave:nth-child(6)::before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.conceptbody .draw.-wave:nth-child(7), .conceptbody .draw.-wave:nth-child(7)::before {
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s;
}
.conceptbody .draw.-wave:nth-child(8), .conceptbody .draw.-wave:nth-child(8)::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.conceptbody .draw[delay="0.1"], .conceptbody .draw[delay="0.1"]::before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.conceptbody .draw[delay="0.2"], .conceptbody .draw[delay="0.2"]::before {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.conceptbody .draw[delay="0.3"], .conceptbody .draw[delay="0.3"]::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.conceptbody .draw[delay="0.4"], .conceptbody .draw[delay="0.4"]::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.conceptbody .draw[delay="0.5"], .conceptbody .draw[delay="0.5"]::before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.conceptbody .draw[delay="0.6"], .conceptbody .draw[delay="0.6"]::before {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.conceptbody .draw[delay="0.7"], .conceptbody .draw[delay="0.7"]::before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.conceptbody .draw[delay="0.8"], .conceptbody .draw[delay="0.8"]::before {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.conceptbody .draw[delay="0.9"], .conceptbody .draw[delay="0.9"]::before {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.conceptbody .draw[delay="1"], .conceptbody .draw[delay="1"]::before {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.conceptbody .draw[delay="1.1"], .conceptbody .draw[delay="1.1"]::before {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.conceptbody .draw[delay="1.2"], .conceptbody .draw[delay="1.2"]::before {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
.conceptbody .draw[delay="1.3"], .conceptbody .draw[delay="1.3"]::before {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.conceptbody .draw[delay="1.4"], .conceptbody .draw[delay="1.4"]::before {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}
.conceptbody .draw[delay="1.5"], .conceptbody .draw[delay="1.5"]::before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.conceptbody .draw[delay="1.6"], .conceptbody .draw[delay="1.6"]::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
.conceptbody .draw[delay="1.7"], .conceptbody .draw[delay="1.7"]::before {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.conceptbody .draw[delay="1.8"], .conceptbody .draw[delay="1.8"]::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
.conceptbody .draw[delay="1.9"], .conceptbody .draw[delay="1.9"]::before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.conceptbody .draw[delay="2"], .conceptbody .draw[delay="2"]::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.conceptbody .draw[delay="2.1"], .conceptbody .draw[delay="2.1"]::before {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.conceptbody .draw[delay="2.2"], .conceptbody .draw[delay="2.2"]::before {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}
.conceptbody .draw[delay="2.3"], .conceptbody .draw[delay="2.3"]::before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.conceptbody .draw[delay="2.4"], .conceptbody .draw[delay="2.4"]::before {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}
.conceptbody .draw[delay="2.5"], .conceptbody .draw[delay="2.5"]::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.conceptbody .draw[delay="2.6"], .conceptbody .draw[delay="2.6"]::before {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}
.conceptbody .draw[delay="2.7"], .conceptbody .draw[delay="2.7"]::before {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.conceptbody .draw[delay="2.8"], .conceptbody .draw[delay="2.8"]::before {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}
.conceptbody .draw[delay="2.9"], .conceptbody .draw[delay="2.9"]::before {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
.conceptbody .draw[delay="3"], .conceptbody .draw[delay="3"]::before {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
@-webkit-keyframes intro {
  0% {
    left: 0%;
    right: 100%;
  }
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}
@keyframes intro {
  0% {
    left: 0%;
    right: 100%;
  }
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}
@-webkit-keyframes show {
  0%, 50% {
    color: transparent;
  }
  50.00001%, 100% {
    color: #454545;
  }
}
@keyframes show {
  0%, 50% {
    color: transparent;
  }
  50.00001%, 100% {
    color: #454545;
  }
}



@media (min-width: 321px) and (max-width: 768px){
}
.neumorphism {
  background-color: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }

.card-w .card {
  display:block;
  flex-direction: column;
  align-items: center;
  padding: 60px 60px;
  border-radius: 30px;
  position: relative;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); }
  .card-w .card .card__text {
    text-align: center; }

/* inset */
.card.inset {
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF; }
  .card.inset i {
    text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00; }

.card.active {
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
  background: linear-gradient(318.32deg, rgba(163, 177, 198, 0.1) 0%, rgba(163, 177, 198, 0.1) 55%, rgba(163, 177, 198, 0.25) 100%); }



@media (max-width: 320px){
}
.neumorphism {
  background-color: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }

.card-w .card {
  display:block;
  flex-direction: column;
  align-items: center;
  padding: 60px 60px;
  border-radius: 30px;
  position: relative;
  background: transparent;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2); }
  .card-w .card .card__text {
    text-align: center; }

/* inset */
.card.inset {
  box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF; }
  .card.inset i {
    text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00; }

.card.active {
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
  background: linear-gradient(318.32deg, rgba(163, 177, 198, 0.1) 0%, rgba(163, 177, 198, 0.1) 55%, rgba(163, 177, 198, 0.25) 100%); }


.draw      : Makes a block effect
   -wave   : Adds a .25s delay per line
   -small  : Small text
   -do     : Starts the animations when the page is ready, 
             equally you can add this when the element comes into view
   [delay] : Adds a custom delay in 0.1 increments up to 3s (editable in SCSS line 46)