@font-face {
  font-family: 'Montserrat-Bold';
  src: /*url('assets/Comfortaa-Regular.woff') format('woff'), *//* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  url('/public/frontent/fonts/Montserrat-Bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 
@font-face {
  font-family: 'Montserrat-Regular';
  src: /*url('assets/Comfortaa-Regular.woff') format('woff'), *//* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  url('/public/frontent/fonts/Montserrat-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
  font-family: 'Comfortaa';
  src: /*url('assets/Comfortaa-Regular.woff') format('woff'), *//* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  url('/public/frontent/fonts/Comfortaa-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 
body, html {
  height: 100%;
}
a {
  text-decoration: none;
}
.navbar-fixed-top {
  background-color: #fff !important;
  border-bottom: 1px solid #c3c3c3 !important;
}
#header svg {
  height: 20px !important;
}
.slick-list,.slick-slider,.slick-track{position:relative;display:block}
.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
/*.slick-slide{margin:2px 5px 0px 5px}*/
.slick-slider{
  box-sizing:border-box;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -khtml-user-select:none;
  -ms-touch-action:pan-y;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent}
  .slick-list{overflow:hidden;margin:0;padding:0}
  .slick-list:focus{outline:0}
  .slick-list.dragging{cursor:pointer;cursor:hand}
  .slick-slider .slick-list,.slick-slider .slick-track{
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
    .slick-track{top:0;left:0}
    .slick-track:after,.slick-track:before{display:table;content:''}
    .slick-track:after{clear:both}
    
    .slick-slide.slick-loading img{display:none}
    .slick-slide.dragging img{pointer-events:none}
    .slick-initialized .slick-slide{display:block}
    .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
    .slick-arrow.slick-hidden{display:none}

    @media (min-width: 769px) {
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: 15px;
      }
      .parallax{
        height: 825px;
        /*background-position: bottom !important;*/
      }
      .parallax1 {
        height: 800px;
      }
      .parallax2 {
       height: 850px;
     }
     .parallax3 {
      height: 800px;
    }
    .parallax4 {
      height: 600px;
    }
    .explore-text {
      font-size: 100%;
    }
    #website-logo {
      width: 130px;
    }
    #main-block {
      margin-top: 150px;
    }
    .wrapper-box {
      width: 80%;
    }
    .box-content {
      height: 150px;
    }
    #word-area-header {
      font-size: 190%;
      margin-top: -10px;
    }
    #word-area-text {
     font-size: 340%;
   }
   #get-started-btn {
    margin-top: 25px;
  }
  #service-header-text {
    font-size: 40px;
    font-family: 'Comfortaa',sans-serif !important;
  }
  nav.nav-tools.nav-tools-show {
    display: inline-flex;
    opacity: 1;
  }
  nav.nav-tools .nav-tool-1 {
    height: 100%;
    width: 100%;
    background-position: bottom;
    background-size: 100%,cover;
  }
  nav.nav-tools .nav-tool-2 {
    height: 100%;
    width: 100%;
    background-position: bottom;
    background-size: 100%,cover;
  }
  nav.nav-tools .nav-tool-3 {
    height: 100%;
    width: 100%;
    background-position: bottom;
    background-size: 100%,cover;
  }
  nav.nav-tools .nav-tools-close {
    top: 20px;
    left: 30px;
    text-indent: 25px;
    font-size: 16px;
  }
  #testimonial-div {
    margin-top: 50px;
  }
  #partners-div {margin-top: 95px;}
  .slick-slide{display:none;float:left;height:90px !important;min-height:1px;width: 100px !important;}
    [dir=rtl] .slick-slide{float:right;width:100px !important;height: 50px !important;}
    .slick-slide img{height:90px;display:block;-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%)}
}

@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    /*margin: 25px 0;*/
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
  .parallax{
    height: 550px;
    background-position: center !important;
  }
  .parallax1 {
    height: 100%;
  }
  .parallax2 {
   height: 100%;
 }
 .parallax3 {
  height: 100%;
}
.parallax4 {
  height: 450px;
}
#main-block {
  margin-top: 55px;
}
.explore-text {
  font-size: 12px;
}
#website-logo {
  width: 100px;
}
.wrapper-box {
  width: 90%;
}
.box-content {
  height: 110px;
}
#word-area-header {
  font-size: 160%;
  margin-top: -5px;
}
#word-area-text {
 font-size: 250%;
}
#get-started-btn {
  margin-top: 20px;
}
#service-header-text {
  font-size: 30px;
  font-family: 'Comfortaa',sans-serif !important;
}
nav.nav-tools.nav-tools-show {
  display: block;
  opacity: 1;
}
nav.nav-tools .nav-tool-1 {
  height: 33.3333%;
  width: 100%;
  
  background-size: 33%,cover;
}
nav.nav-tools .nav-tool-2 {
  height: 33.3333%;
  width: 100%;
  
  background-size: 33%,cover;
}
nav.nav-tools .nav-tool-3 {
  height: 33.3333%;
  width: 100%;
  
  background-size: 33%,cover;
}
nav.nav-tools .nav-tools-close {
  top: 5px;
  right: 15px;
  text-indent: 25px;
  font-size: 12px;
}
#testimonial-div {
  margin-top: 10px;
}
#partners-div {margin-top: 5px;}
.slick-slide{display:none;float:left;height:50px !important;min-height:1px;width: 60px !important;}
    [dir=rtl] .slick-slide{float:right;width:60px !important;height: 50px !important;}
    .slick-slide img{height:50px;display:block;-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%)}
}
/*@media screen and (min-width: 481px) {
  .parallax1 {
    background-image: url('/public/frontent/images/smallcard.png');
  }
  .parallax2 {
    background-image: url('/public/frontent/images/small_auto.jpg');
  }
  .parallax3 {
    background-image: url('/public/frontent/images/small_phone.png');
  }
  .parallax4 {
   background-image: url('/public/frontent/images/testimonial/testimonials.png');
 }
}*/
@media screen and (max-width: 480px) {
    /*.logo {
        font-size: 150px;
        }*/
        .parallax{
          height: 560px;
          background-position: center !important;
        }

        .box-content {
          height: 60px;
        }
        #word-area-header {
          font-size: 1em;
          margin-top: 0;
        }
        #word-area-text {
         font-size: 1.2em;
       }
       #get-started-btn {
        margin-top: 10px;
      }
      #service-header-text {
        font-size: 25px;
        font-family: 'Comfortaa',sans-serif !important;
      }
      #partners-div {margin-top: 45px;}
    }

    footer a:hover {
      color: #fff !important;
      text-decoration: none !important;
    }
    .list-inline>li {
      display: inline-block;
      padding-right: 15px;
      padding-left: 0px; 
    }
    footer svg {
      width: 25px;
    }
    svg {
      /*max-height: 150px;*/
      width: 50px;

    }
    #explore-img {
      width: 15px; 
      margin-bottom: -5px;
    }
    .explore-text {
      font-family: 'Comfortaa',sans-serif !important;
    }
    .navbar {
      padding-top: 15px;
      /*padding-bottom: 15px;*/
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 12px;
      letter-spacing: 5px;
    }
    .navbar-default {
      background-color: transparent;
    }
    .navbar-toggle {
      position: relative;
      float: left;
      padding: 9px 10px;
      margin-top: 8px;
      margin-left: 15px;
      margin-bottom: 8px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }

    .navbar-default .navbar-toggle .icon-bar {
      background-color: #fff;
    }
    .navbar-default .navbar-brand {
      color: #fff;
    }

    .navbar-nav  li a {
      color: #fff !important;
    }
    .navbar-nav  li a:hover {
      color: #1abc9c !important;
    }
    /*h1 {
      color: #40A7F5;
      }*/
      .parallax {
        /* The image used */
        background-image: url('/public/frontent/images/bg_new.jpg');

        /* Full height */
        background-position: center center;
        color: #fff;
        width: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;

        background-repeat: no-repeat;
        background-size: cover;
      }
      .parallax1 { 
        width: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: 25% 70% !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #fff;
      }
      #service-div p {
        font-family: 'Comfortaa',sans-serif !important;
        color: #919aaf;

      }
      .parallax1 p {
        font-family: 'Montserrat-Regular',sans-serif !important;
        text-align: left;
      }
      .parallax2 { 
        width: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center center !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #0f1626; 
      }
      #auto-div p {
        font-family: 'Comfortaa',sans-serif !important;
        color: #919aaf;
      }
      .parallax2 p {
        color: #f6f6f6;
        font-family: 'Montserrat-Regular',sans-serif !important;
        text-align: right;
      }
      .parallax3 { 
        width: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center center !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #fff;
      }
      #phone-div p {
        font-family: 'Comfortaa',sans-serif !important;
        color: #919aaf;
      }
      .parallax3 p {
        font-family: 'Montserrat-Regular',sans-serif !important;
        text-align: left;
      }
      .parallax4 { 
        width: 100%;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center center !important;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #f6f4f4;
      }
      #testimonial-div section p {
        font-family: 'Montserrat-Regular',sans-serif !important;
      }
      .parallax5 {
        /*height: 100%; */
        width: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #0f1626;
      }
      .btn {
        display: inline-block;
        position: relative;
        margin: 1em;
        padding: 0.67em;
        border: 2px solid #FFF;
        overflow: hidden;
        text-decoration: none;
        font-size: 1em;
        outline: none;
        color: #FFF;
      }

      .btn span {
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
      }

      .btn:before,
      .btn:after {
        content: '';
        position: absolute;
        top: 0.67em;
        left: 0;
        width: 100%;
        text-align: center;
        opacity: 0;
        -webkit-transition: .4s,opacity .6s;
        -moz-transition: .4s,opacity .6s;
        -o-transition: .4s,opacity .6s;
        transition: .4s,opacity .6s;
      }

      /* :before */
      .btn:before {
        content: attr(data-hover);
        -webkit-transform: translate(-150%, 0);
        -moz-transform: translate(-150%, 0);
        -ms-transform: translate(-150%, 0);
        -o-transform: translate(-150%, 0);
        transform: translate(-150%, 0);
      }

      /* :after */
      .btn:after {
        content: attr(data-active);
        -webkit-transform: translate(150%, 0);
        -moz-transform: translate(150%, 0);
        -ms-transform: translate(150%, 0);
        -o-transform: translate(150%, 0);
        transform: translate(150%, 0);
      }
      .btn:hover span,
      .btn:active span {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -moz-transform: scale(0.3);
        -ms-transform: scale(0.3);
        -o-transform: scale(0.3);
        transform: scale(0.3);
      }
      .btn:hover:before,
      .btn:active:after {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition-delay: .4s;
        -moz-transition-delay: .4s;
        -o-transition-delay: .4s;
        transition-delay: .4s;
      }
      blockquote {
        margin: 0;
        padding: 6px 16px;
        border: none;
        quotes: "\201C" "\201D";
        display: inline-block;
        position: relative;
      }

      blockquote:before { 
        content: open-quote;
        font-weight: bold;
        position:absolute;
        top:0;
        left: 0;
      } 
      blockquote:after { 
        content: close-quote;
        font-weight: bold;
        position:absolute;
        bottom: 10px; right: 0;
      }
      .blinking-cursor {
        /*font-weight: 100;*/
        /*font-size: 30px;*/
        color: #fff !important;
        -webkit-animation: .5s blink step-end infinite;
        -moz-animation: .5s blink step-end infinite;
        -ms-animation: .5s blink step-end infinite;
        -o-animation: .5s blink step-end infinite;
        animation: .5s blink step-end infinite;
      }

      .box {
       padding: 10px;
       margin: 0;
       text-align: center;
     }
     .box-child {
      /*border:1px solid #ddd;*/
      border-radius: 10px;
    }
    .subheader {
      color: #2aa9d9;;
      font-weight: 700;
      font-size: 20px;
      font-family: 'Montserrat-Bold',sans-serif !important;
    }
    .subheader-img {
      width: 30px;
      margin: 10px 0px;
    }
    @keyframes "blink" {
      from, to {
        color: transparent;
      }
      50% {
        color: #fff;
      }
    }

    @-moz-keyframes blink {
      from, to {
        color: transparent;
      }
      50% {
        color: #fff;
      }
    }

    @-webkit-keyframes "blink" {
      from, to {
        color: transparent;
      }
      50% {
        color: #fff;
      }
    }

    @-ms-keyframes "blink" {
      from, to {
        color: transparent;
      }
      50% {
        color: #fff;
      }
    }

    @-o-keyframes "blink" {
      from, to {
        color: transparent;
      }
      50% {
        color: #fff;
      }
    }


    .slideanim {visibility:hidden;}
    .slideanim1 {visibility:hidden;}
    .slideanim2 {visibility:hidden;}
    .slidetop {
      animation-name: slidetop;
      -webkit-animation-name: slidetop;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
    }
    @-webkit-keyframes slidetop {
      0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
      } 
      100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
      }
    }
    .slidedown {
      animation-name: slidedown;
      -webkit-animation-name: slidedown;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
    }
    @-webkit-keyframes slidedown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-70%);
      } 
      100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
      }
    }

    .slideleft {
      animation-name: slideleft;
      -webkit-animation-name: slideleft;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
    }
    @keyframes slideleft {
      0% {
        opacity: 0;
        transform: translateX(70%);
      } 
      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    @-webkit-keyframes slideleft {
      0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
      } 
      100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
      }
    }

    .slideright {
      animation-name: slideright;
      -webkit-animation-name: slideright;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
    }
    @keyframes slideright {
      0% {
        opacity: 0;
        transform: translateX(-70%);
      } 
      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    @-webkit-keyframes slideright {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-70%);
      } 
      100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
      }
    }


    @keyframes slidetop {
      0% {
        opacity: 0;
        transform: translateY(70%);
      } 
      100% {
        opacity: 1;
        transform: translateY(0%);
      }
    }




    .side-border { float:left; height:10px; border-bottom: solid #fff 2px; }
    .side-border.l { float:left; }
    .side-border.r { float:left;  }
    .border-text { float:left; height:35px; margin-bottom:15px; text-align:center; }
    .box-content { 
     border-left: solid #fff 2px;
     border-right: solid #fff 2px;
     border-bottom: solid #fff 2px;
     margin-top: 10px; 
   }

   .animation-element {
    position: relative;
    /*width: 30%;*/
    margin: 0% 1.33 2.66% 1.33%;
    /*float: left;*/
  }
  /*3 grid layout*/

/*.animation-element:nth-of-type(3n-2) {
  width: 31.5%;
  margin: 0% 1.375% 2.75% 0%;
  clear: left;
}

.animation-element:nth-of-type(3n-1) {
  width: 31.5%;
  margin: 0% 1.375% 2.75% 1.375%;
}

.animation-element:nth-of-type(3n-0) {
  width: 31.5%;
  margin: 0% 0% 2.75% 1.375%;
  clear: right;
  }*/
  /*bounce up animation for the subject*/

  .bounce-up div {
    opacity: 0;
    -moz-transition: all 1000ms ease-out;
    -webkit-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out;
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .bounce-up.in-view div {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
  }
  .cf:before,
  .cf:after {
    content: " ";
    display: table;
  }

  .cf:after {
    clear: both;
  }

  nav.nav-tools {
    display: none;
    background-color: #31356f;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    opacity: 0;
    z-index: 9999998;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: opacity .5s ease-in-out;
  }
  nav.nav-tools.nav-tools-show {
    top: 0px;
  }
  nav.nav-tools .nav-tool-1 {
    transition-delay: .3s;
    background-color: #479de1;
    /*background-image:  linear-gradient(45deg, #a4c360 0%, #46ca8a 100%);*/
    background-image: url(/public/frontent/images/popularity.png),linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  }
  nav.nav-tools .nav-tool-1:hover {
    background-color: #479de1;
    background-position: center 60%;
  }
  nav.nav-tools .nav-tool-1:hover > .vertical-center {
    -webkit-transform: translateY(-80%);
    -o-transform: translateY(-80%);
    transform: translateY(-80%);
  }
  nav.nav-tools .nav-tool-1:active {
    transition: .3s;
    background-position: top;
  }
  nav.nav-tools .nav-tool-2 {
    transition-delay: .3s;
    background-color: #ed8d4b;
    /*background-image:  linear-gradient(45deg, #a4c360 0%, #46ca8a 100%);*/
    background-image: url(/public/frontent/images/profile.png),linear-gradient(135deg, #9be15d 0%, #00e3ae 100%);
  }
  nav.nav-tools .nav-tool-2:hover {
    background-color: #ed8d4b;
    background-position: center 60%;
  }
  nav.nav-tools .nav-tool-2:hover > .vertical-center {
    -webkit-transform: translateY(-80%);
    -o-transform: translateY(-80%);
    transform: translateY(-80%);
  }
  nav.nav-tools .nav-tool-2:active {
    transition: .3s;
    background-position: top;
  }
  nav.nav-tools .nav-tool-3 {
    transition-delay: .3s;
    background-color: #a4c360;
    /*background-image:  linear-gradient(45deg, #a4c360 0%, #46ca8a 100%);*/
    background-image: url(/public/frontent/images/influencer.png),linear-gradient(135deg, #ff5858 0%, #f09819 100%);
  }
  nav.nav-tools .nav-tool-3:hover {
    background-color: #a4c360;
    background-position: center 60%;
  }
  nav.nav-tools .nav-tool-3:hover > .vertical-center {
    -webkit-transform: translateY(-80%);
    -o-transform: translateY(-80%);
    transform: translateY(-80%);
  }
  nav.nav-tools .nav-tool-3:active {
    transition: .3s;
    background-position: top;
  }
  .vertical-center {
    transition: 2s;
    position: relative;
    top: 46%;
    padding: 10%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    /*background-image: linear-gradient(45deg, #a4c360 0%, #46ca8a 100%);*/
  }
  .vertical-center h3 {
    font-family: 'Comfortaa',sans-serif !important;
    letter-spacing: 2px;
  }
  .vertical-center p {
    font-family: 'Montserrat-Bold',sans-serif !important;
    letter-spacing: 1px;
  }
  .vertical-center svg {
    height: 50px;
  }

/*nav.nav-tools .vertical-center {
    top: 46%;
    padding: 10%;
    }*/
/*.vertical-center:focus, .vertical-center:hover {
    
    top: 40%;
    padding: 10%;
    -webkit-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    }*/
    nav.nav-tools .nav-tools-close:hover, nav.nav-tools .nav-tools-close:active, nav.nav-tools .nav-tools-close:focus {
      opacity: 1;
      text-decoration: none;
    }
    nav.nav-tools .nav-tools-close {
      position: absolute;

      display: block;
      background-image: url(/public/frontent/images/cancel.svg);
      background-image: none,url(/public/frontent/images/cancel.svg);
      background-repeat: no-repeat;
      background-position: 0;
      background-size: 20px;
      width: auto;
      height: 32px;
      overflow: hidden;
      line-height: 32px;
      outline: none;

      color: white;

      font-weight: bold;
      color: #fff;
      opacity: .5;
      z-index: 9999999;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    nav.nav-tools [class^="nav-tool-"] {
      background-repeat: no-repeat;
      margin: 0;
      padding: 20px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      float: left;
      animation: dropIn .4s ease;
      animation-fill-mode: both;
      -webkit-transition: all 3s ease;
      -moz-transition: all 3s ease;
      transition: all 3s ease
    }
    @keyframes dropIn {
      from {
        opacity: 0;
        transform: rotateY(-90deg) rotateZ(-10deg) translateY(-25%)
      }

      to {
        opacity: 1;
        transform: rotateY(0deg) rotateZ(0deg) translateY(0px)
      }
    }