

.myNim {
  opacity: 0;
	position: relative;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeIn {
    0%   {opacity: 0}
    100% {opacity: 1}
  }
  @-moz-keyframes fadeIn {
    0%   {opacity: 0}
    100% {opacity: 1}
  }
  @-o-keyframes fadeIn {
    0%   {opacity: 0}
    100% {opacity: 1}
  }
  @keyframes fadeIn {
    0%   {opacity: 0}
    100% {opacity: 1}
  }
  
  @-webkit-keyframes phones {
    0%   {transform: translate(0, -20px); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
  }
  @-moz-keyframes phones {
    0%   {transform: translate(0, -20px); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
  }
  @-o-keyframes phones {
    0%   {transform: translate(0, -20px); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
  }
  @keyframes phones {
    0%   {transform: translate(0, -20px); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
  }
  
  @-webkit-keyframes info {
    0%   {top: -200px; opacity: 0}
    100% {top: -100px; opacity: 1}
  }
  @-moz-keyframes info {
    0%   {top: -200px; opacity: 0}
    100% {top: -100px; opacity: 1}
  }
  @-o-keyframes info {
    0%   {top: -200px; opacity: 0}
    100% {top: -100px; opacity: 1}
  }
  @keyframes info {
    0%   {top: -150px; opacity: 0}
    100% {top: -130px; opacity: 1}
  }
  
@media (min-width: 768px){
    .swiper-slide-active {
      animation: fadeIn 1s ease-in forwards
    }
}



  /* SLIDE 2 ANIMATION START */


  .swiper-slide-active .f-slide-2 .col-4:nth-child(1) {
    animation: fadeInDown 0.6s ease-in 0.3s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-4:nth-child(2) {
    animation: fadeInDown 0.6s ease-in 0.6s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-4:nth-child(3) {
    animation: fadeInDown 0.6s ease-in 0.9s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-4:nth-child(4) {
    animation: fadeInUp 0.6s ease-in 1.2s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-4:nth-child(5) {
    animation: fadeInUp 0.6s ease-in 1.5s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-4:nth-child(6) {
    animation: fadeInUp 0.6s ease-in 1.8s forwards;
  }


  .swiper-slide-active .f-slide-2 .col-md-12 h5 {
      animation: fadeInLeft 0.6s ease-in 2.1s forwards;
  }

  .swiper-slide-active .f-slide-2 .col-md-12 p {
    animation: fadeInRight 0.6s ease-in 2.4s forwards;
  }

/* SLIDE 2 ANIMATION END */


 /* SLIDE 3 ANIMATION START */

 .swiper-slide-active .f-slide-3 .col-md-7 .img-1 .col-6:nth-child(1) {
  animation: fadeInDown 0.6s ease-in-out 0.3s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-7 .img-1 .col-6:nth-child(2) {
  animation: fadeInDown 0.6s ease-in-out 0.6s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-7 .img-2 .col-6:nth-child(1) {
  animation: fadeInDown 0.6s ease-in-out 0.9s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-7 .img-2 .col-6:nth-child(2) {
  animation: fadeInDown 0.6s ease-in-out 1.2s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-5 .left img {
  animation: lightSpeedIn 0.6s ease-in-out 1.5s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-5 .left h4 {
  animation: lightSpeedIn 0.6s ease-in-out 1.8s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-5 .left p {
  animation: lightSpeedIn 0.6s ease-in-out 2.1s forwards;
}

.swiper-slide-active .f-slide-3 .col-md-5 .left .brick {
  animation: lightSpeedIn 0.6s ease-in-out 2.4s forwards;
}

 /* SLIDE 3 ANIMATION END */
  
  

