@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);


* {
    box-sizing: border-box;
   
   
  }
  body{
    background-color: rgb(51, 45, 45);
  }
  html {
    overflow-x: hidden;
  }
  

  .header-heading{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 50px !important;
  }

@media only screen and (max-width:399px){
  
  .header-heading{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px !important;
  }
}


  body {
    margin: 0;
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-size: 12pt;
    font-weight: 400;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Bebas Neue", cursive;
  }
  
  a {
    text-decoration: none;
    transition: all 0.5s ease-in-out;
  }
  
  a:hover {
    transition: all 0.5s ease-in-out;
  }
  
  .we-are-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    height: 900px;
  }
  
  @media screen and (max-width: 860px) {
    .we-are-block {
      height: 2200px;
    }
  }
  
  @media screen and (max-width: 500px) {
    .we-are-block {
      height: 2300px;
    }
  }
  .link{
    color: black !important;
  }
  .link:hover{
     border-bottom: 2px solid rgb(218, 181, 112) !important;
    transition: 0.5s !important;
  }
  .dropdown:hover>.dropdown-menu {
    display: block;
  }
  
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }
  
 /* navbar */
 .sticky {
  position: fixed;
  top: 20px;
  width: 100%;
}

.content {
  padding: 16px;
}

.sticky + .content {
  padding-top: 60px;
}
#navbar{
  z-index: 100;
  padding: 0px;
  text-align: center;
 
}



  /* new section */
@keyframes slide {
from{background-position:0 0}
to{background-position:1920px 0}
}
@-webkit-keyframes slide {
from{background-position:0 0}
to{background-position:1920px 0}
}
.service-block-one a {text-decoration:none}
    
@keyframes slide {
from{background-position:0 0}
to{background-position:1920px 0}
}
@-webkit-keyframes slide {
from{background-position:0 0}
to{background-position:1920px 0}
}
.service-block-one .inner-box{position:relative;display:block;overflow:hidden;text-align:center;background:#353535;padding:50px 20px 36px}
.service-block-one .inner-box:before{position:absolute;content:'';width:100%;height:0;left:0;bottom:0;right:0;transition:all 500ms ease}
.service-block-one .inner-box:hover:before{height:100%;top:0}
.service-block-one .inner-box .icon-box{position:relative;display:inline-block;font-size:100px;line-height:100px;margin-bottom:8px;z-index:1;transition:all 500ms ease}
.service-block-one .inner-box .icon-box:before{position:absolute;content:'';background:#303030;width:72px;height:72px;border-radius:50%;left:-9px;top:-13px;z-index:-1;transition:all 500ms ease}
.service-block-one .inner-box:hover .icon-box:before{background:rgb(218, 181, 112)}
.service-block-one .inner-box:hover .icon-box{transform:rotateY(360deg);color:#fff}
.service-block-one .inner-box h3{position:relative;display:block;font-size:22px;line-height:30px;color:#fff;font-weight:800;margin-bottom:9px}
.service-block-one .inner-box h3 a{display:inline-block;color:#fff}
.service-block-one .inner-box p{position:relative;color:#fff;margin-bottom:33px}
.service-block-one .inner-box .theme-btn{padding:12px 25px}
.service-block-one .inner-box:hover .theme-btn{background:rgb(218, 181, 112)}
.service-section .sec-title{margin-bottom:70px}
.service-section .sec-title span{margin-bottom:21px}
.service-block-one .inner-box .icon-box{color:rgb(218, 181, 112)}
.service-block-one .inner-box:before{background:rgb(218, 181, 112)}
.theme-btn{position:relative;display:inline-block;font-size:15px;background:rgb(218, 181, 112);line-height:26px;font-weight:700;font-family:'Rubik',sans-serif;color:#fff!important;text-align:center;cursor:pointer;border-radius:5px;z-index:1;transition:all 500ms ease}
.theme-btn:before{position:absolute;content:'';background:#1c1d1f;width:100%;height:100%;border-radius:5px;z-index:-1;top:0;left:0;right:0;bottom:0;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.theme-btn:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition-timing-function:cubic-bezier(.52,1.64,.37,.66);transition-timing-function:cubic-bezier(.52,1.64,.37,.66)}
.theme-btn i{position:relative;top:2px;font-size:20px;margin-left:40px;}
@media(max-width:1024px) {
.service-block-one .inner-box{padding:30px}
.service-block-one{margin-bottom:15px}
.theme-btn{padding:10px 20px}
}


    /* footer */

    ul {
        margin: 0px;
        padding: 0px;
    }
    .footer-section {
      background: #151414;
      position: relative;
      
    }
    .footer-cta {
      border-bottom: 1px solid #373636;
    }
    .single-cta i {
      color: rgb(218, 181, 112);
      font-size: 30px;
      float: left;
      margin-top: 8px;
    }
    .cta-text {
      padding-left: 15px;
      display: inline-block;
    }
    .cta-text h4 {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .cta-text span {
      color: #757575;
      font-size: 15px;
    }
    .footer-content {
      position: relative;
      z-index: 2;
    }
    .footer-pattern img {
      position: absolute;
      top: 0;
      left: 0;
      height: 330px;
      background-size: cover;
      background-position: 100% 100%;
    }
    .footer-logo {
      margin-bottom: 30px;
    }
    .footer-logo img {
        max-width: 200px;
    }
    .footer-text p {
      margin-bottom: 14px;
      font-size: 14px;
          color: #7e7e7e;
      line-height: 28px;
    }
    .footer-social-icon span {
      color: #fff;
      display: block;
      font-size: 20px;
      font-weight: 700;
      font-family: 'Poppins', sans-serif;
      margin-bottom: 20px;
    }
    .footer-social-icon a {
      color: #fff;
      font-size: 16px;
      margin-right: 15px;
    }
    .footer-social-icon i {
      height: 40px;
      width: 40px;
      text-align: center;
      line-height: 38px;
      border-radius: 50%;
    }
    .facebook-bg{
      background: rgb(218, 181, 112);
    }
    .twitter-bg{
      background: rgb(218, 181, 112);
    }
    .google-bg{
      background: rgb(218, 181, 112);
    }
    .footer-widget-heading h3 {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 40px;
      position: relative;
    }
    .footer-widget-heading h3::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -15px;
      height: 2px;
      width: 50px;
      background: rgb(218, 181, 112);
    }
    .footer-widget ul li {
      display: inline-block;
      float: left;
      width: 50%;
      margin-bottom: 12px;
    }
    .footer-widget ul li a:hover{
      color: rgb(218, 181, 112);
    }
    .footer-widget ul li a {
      color: #878787;
      text-transform: capitalize;
    }
    .subscribe-form {
      position: relative;
      overflow: hidden;
    }
    .subscribe-form input {
      width: 100%;
      padding: 14px 28px;
      background: #2E2E2E;
      border: 1px solid #2E2E2E;
      color: #fff;
    }
    .subscribe-form button {
        position: absolute;
        right: 0;
        background: rgb(218, 181, 112);
        padding: 13px 20px;
        border: 1px solid rgb(218, 181, 112);
        top: 0;
    }
    .subscribe-form button i {
      color: #fff;
      font-size: 22px;
      transform: rotate(-6deg);
    }
    .copyright-area{
      background: #202020;
      padding: 25px 0;
    }
    .copyright-text p {
      margin: 0;
      font-size: 14px;
      color: #878787;
    }
    .copyright-text p a{
      color: rgb(218, 181, 112);
    }
    .footer-menu li {
      display: inline-block;
      margin-left: 20px;
    }
    .footer-menu li:hover a{
      color: rgb(218, 181, 112);
    }
    .footer-menu li a {
      font-size: 14px;
      color: #878787;
    }
    .service a:hover{
      background-color: rgb(218, 181, 112);
      color: white;
      transition: 0.5s;
    }
    .service{
      background-color: rgb(51, 45, 45) !important;
      
    }
    .service a {
      color: white !important;
    }
    .heading{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: bold;
    }
    
#bg-color{
  background-color: rgb(51, 45, 45);
  padding-top: 100px;
}

/* our team section */
#welcome-section{
  background-color: rgb(51, 45, 45);
  position: relative;
  padding-top: 90px;
}
#logowelcomesec{
  height: 200px;
  width: 300px;
  position: absolute;
  top:14%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#main-div{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
 
}
.box{
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: sliderrotate 20s linear infinite;;
}
@keyframes sliderrotate{
  0%{
      transform: perspective(1000px) rotateY(0deg);
  }
  100%{
      transform: perspective(1000px) rotateY(360deg);
  }
}
.box span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translatez(400px);
  -webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
  background-position: center;
}
.box span img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.team{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
  font-weight: bold;
}
/* our team section end */

/* introduction  */
figure.snip1203 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 310px;
  width: 100%;
  background: #000000;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1203 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1203 img {
  max-width: 100%;
}
figure.snip1203 div {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  opacity: 0;
  box-shadow: 0 0 30px #000;
}
figure.snip1203 div:before,
figure.snip1203 div:after {
  content: '';
  width: 75px;
  height: 75px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(45deg) translate(0px, 0px);
  transform: rotate(45deg) translate(0px, 0px);
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1203 i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 28px;
  color: #ffffff;
  width: 75px;
  height: 75px;
  line-height: 75px;
}
figure.snip1203 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1203:hover img,
figure.snip1203.hover img {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.snip1203:hover div,
figure.snip1203.hover div {
  opacity: 1;
}
figure.snip1203:hover div:after,
figure.snip1203.hover div:after,
figure.snip1203:hover div:before,
figure.snip1203.hover div:before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
figure.snip1203:hover div:before,
figure.snip1203.hover div:before {
  -webkit-transform: rotate(45deg) translate(-12px, 12px);
  transform: rotate(45deg) translate(-12px, 12px);
}
figure.snip1203:hover div:after,
figure.snip1203.hover div:after {
  -webkit-transform: rotate(45deg) translate(12px, -12px);
  transform: rotate(45deg) translate(12px, -12px);
}


 
@media screen and (max-width: 767px) {
.intro{
margin-left: 80px;
}
}
@media screen and (max-width: 685px) {
.intro{
margin-left: 80px;
}
}
@media screen and (max-width: 633px) {
.intro{
margin-left: 60px;
}
}
@media screen and (max-width: 541px) {
.intro{
margin-left: 80px !important;
}
}
@media screen and (max-width: 525px) {
  .intro{
  margin-left: 60px !important;
 }
}
@media screen and (max-width: 497px) {
.intro{
margin-left: 40px !important;
}
}
@media screen and (max-width: 367px) {
.intro{
margin-left: 30px !important;
}
}
@media screen and (max-width: 341px) {
.intro{
margin-left: 20px !important;
}
}
@media screen and (max-width: 327px) {
.intro{
margin-left: 10px !important;
}
}
@media screen and (max-width: 313px) {
.intro{
margin-left: 5px !important;
}
}
@media screen and (max-width: 309px) {
.intro{
margin: 0px !important;
}
}
/* @media screen and (max-width: 513px) {
.intro{
margin-left: 80px;
}
}
@media screen and (max-width: 455px) {
.intro{
margin-left: 60px;
}
}
@media screen and (max-width: 439px) {
.intro{
margin-left: 40px;
}
}
  @media screen and (max-width: 320px) {
 .intro{
margin-left: 35px;
}
   .serv{
    margin-left: 6px;
  }
 }
 @media screen and (max-width: 360px) {
  .intro{
 margin-left: 30px;
  }
 }
   @media screen and (max-width: 297px) {
  .intro{
 margin-left: 20px;
 }
 }
@media screen and (max-width: 291px) {
 .intro{
  margin-left: 10px;
 }
  }  */

/* introduction end */

/* clients */



/* about us */
#bg-color{
  background-color: rgb(51, 45, 45);
  padding-top: 100px;
}
.figure{
  overflow: hidden;
}
.image{
  transition: 0.6s ease-in-out;
  
}
.image:hover{
  transform: scale(1.1);
}
.heading{
  color: rgb(218, 181, 112) ;
}
.para{
  color: white;
}
@media only screen and (max-width:768px){
 .para{
     font-size: 11px;
 }
}
@media only screen and (max-width:296px){
#About{
  margin-left: 6px;
}
}
@media only screen and (max-width:291px){
  #About{
    margin-left: 5px;
  }
  }
 
/* logo */
.logo{
  height: 160px;
  width: 250px;
}

.navbar {
  background-color:rgba(255, 255, 255, 0.7) ;
}

.nav-link{
  color: white;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.3rem;
}
.center{
  text-align: justify;
  text-justify: inter-word;
}
@media only screen and (max-width:412px){
  .logo{
    height: 100px;
    width: 150px;
  }
  .ic{
    margin-right: 7px;
  }
}




/* services */


/* Included color classes.. 
	.red 
	.blue 
	.yellow
	.green
	.orange
	.navy 
*/
/* Icon set - http://ionicons.com */
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1205 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1205 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1205 img {
  max-width: 100%;
  vertical-align: top;
}
figure.snip1205 i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  font-size: 34px;
  color: #000000;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip1205 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1205.blue {
  background-color: #2472a4;
}
figure.snip1205.blue i {
  color: #20638f;
}
figure.snip1205.red {
  background-color: #ab3326;
}
figure.snip1205.red i {
  color: #962d22;
}
figure.snip1205.yellow {
  background-color: #e08e0b;
}
figure.snip1205.yellow i {
  color: #c87f0a;
}
figure.snip1205.green {
  background-color: #1e8449;
}
figure.snip1205.green i {
  color: #1e8449;
}
figure.snip1205.orange {
  background-color: #d67118;
}
figure.snip1205.orange i {
  color: #bf6516;
}
figure.snip1205.navy {
  background-color: #2b3c4e;
}
figure.snip1205.navy i {
  color: #222f3d;
}
figure.snip1205:hover img,
figure.snip1205.hover img {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.snip1205:hover i,
figure.snip1205.hover i {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}





h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    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
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -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
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.slide{
  text-align: center !important;
}

.dv{
  height: 125px !important;
  text-align: center !important;
}

@media only screen and (max-width:819px){
  .dv{
    height: 100px !important;
  }
}

@media only screen and (max-width:433px){
  .dv{
    height: 80px !important;
  }
}
@media only screen and (max-width:371px){
  .dv{
    height: 60px !important;
  }
}
@media only screen and (max-width:294px){
  .dv{
    height: 40px !important;
  }
}

@media screen and (max-width: 992px) {
  .urban{
 margin-right: 50px;
  }
   }
  
   .add{
     color: rgb(218, 181, 112) !important;
     font-size: 2.5rem !important;
   }
   .icon{
     color: rgb(218, 181, 112) !important;
     font-size: 2.5rem;
   }
   .content{
     font-size: 1.1rem !important;
   }
/* font family */
   .good{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }




  /* new footer */
  #cont{
   
    width: 100%;
    background-color: rgb(36, 36, 36);
    padding-top: 30px;
  }
  .span{
    font-size: 1.5rem;
    color: rgb(218, 181, 112);
    margin-right: 10px;
  }

 .center2
    {
   text-align: center !important;
 }
 .logo-2{
   height: 400px;
  width: 450px;
   margin-top: 100px;
   
 }
 @media only screen and (max-width:483px){
  .logo-2{
    height: 350px;
   width: 400px;
    margin-top: 100px;
    
  }
  .poly{
    font-size: 30px !important;
  }
 }
 @media only screen and (max-width:430px){
  .logo-2{
    height: 200px;
   width: 200px;
    margin-top: 100px;
    
  }
  .poly{
    font-size: 30px !important;
  }
 }
 @media only screen and (max-width:377px){
  .logo-2{
    height: 200px !important;
    width: 200px !important;
    margin-top: 100px;
    
  }
  .poly{
    font-size: 30px !important;
  }
 }
 @media only screen and (max-width:327px){
  .logo-2{
    height: 150px !important;
   width: 200px !important;
    margin-top: 100px;
    
  }
  .poly{
    font-size: 25px !important;
  }
 }
 #color{
  background-image: url("images/shutterstock_169664315.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center !important;
  height: 100vh;
  overflow: hidden;

 
  
 }
#color-2{
  background-color: rgba(141, 141, 141,0.7);
  height: 100vh;


}
 .animate {
  -webkit-animation-duration: 3.5s;
  animation-duration: 3.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.three {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/*=== Animations start here  ===*/
  
  /*==== FADE IN UP ===*/
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  /*=== FADE IN DOWN ===*/
  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  /*=== FADE IN LEFT ===*/
  @-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  
  /*==== FADE IN RIGHT ===*/
  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  
  /*=== FADE IN  ===*/
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
  /*=== FADE IN UP Big ===*/
  .fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
  }
  @-webkit-keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  /*=== FADE IN DOWN Big ===*/
  .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
  }
  @-webkit-keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  /*=== FADE IN LEFT Big ===*/
  .fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
  }
  @-webkit-keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  /*=== FADE IN RIGHT Big ===*/
  .fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
  }
  @-webkit-keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }