/* 1st section mousr weel animation css */
@-webkit-keyframes animate-out {
  from {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
            transform: rotateX(0deg) translateY(0px);
  }
  to {
    opacity: 0;
    -webkit-transform: rotateX(40deg) translateY(-300px);
            transform: rotateX(40deg) translateY(-300px);
  }
}
@keyframes animate-out {
  from {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
            transform: rotateX(0deg) translateY(0px);
  }
  to {
    opacity: 0;
    -webkit-transform: rotateX(40deg) translateY(-300px);
            transform: rotateX(40deg) translateY(-300px);
  }
}
@-webkit-keyframes animate-in {
  from {
    opacity: 0;
    -webkit-transform: rotateX(-20deg) translateY(200px);
            transform: rotateX(-20deg) translateY(200px);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateX(0) translateY(0);
            transform: rotateX(0) translateY(0);
  }
}
@keyframes animate-in {
  from {
    opacity: 0;
    -webkit-transform: rotateX(-20deg) translateY(200px);
            transform: rotateX(-20deg) translateY(200px);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateX(0) translateY(0);
            transform: rotateX(0) translateY(0);
  }
}


@-webkit-keyframes slider-text-fade {
  from {
    opacity: 0;
    -webkit-transform:rotateX(-6deg) translateY(50px); 
    -ms-transform:rotateX(-6deg) translateY(50px); 
    transform:rotateX(-6deg) translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform:rotateX(0) translateY(0px); 
    -ms-transform:rotateX(0) translateY(0px); 
    transform:rotateX(0) translateY(0px);
  }
}
@keyframes slider-text-fade {
  from {
    opacity: 0;
    -webkit-transform:rotateX(-6deg) translateY(50px); 
    -ms-transform:rotateX(-6deg) translateY(50px); 
    transform:rotateX(-6deg) translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform:rotateX(0) translateY(0px); 
    -ms-transform:rotateX(0) translateY(0px); 
    transform:rotateX(0) translateY(0px);
  }
}
@keyframes slider-text-fade-up {
  0% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px); 
    -ms-transform: rotateX(0deg) translateY(0px); 
    transform: rotateX(0deg) translateY(0px);
  }
  50% {
    opacity: 0;
    -webkit-transform:rotateX(6deg) translateY(-50px); 
    -ms-transform:rotateX(6deg) translateY(-50px); 
    transform:rotateX(6deg) translateY(-50px);
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    display: none;
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    display: block;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    display: none;
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    display: block;
  }
}

@-webkit-keyframes fade-arrow {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes fade-arrow {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(125px);
    -ms-transform: translateY(125px);
    transform: translateY(125px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes w_data {
  form {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-55px);
            transform: translateY(-55px);
  }
}
@keyframes w_data {
  form {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-55px);
            transform: translateY(-55px);
  }
}

@-webkit-keyframes highlights {
  form {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-84%);
              transform: translateY(-84%);
  }
}
@keyframes highlights {
  form {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-84%);
              transform: translateY(-84%);
  }
}
@-webkit-keyframes fill-img{
  0%{ 
      background-image: url('../images/gray-single.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
  100%{
      background-image: url('../images/gray-fill.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
}

@keyframes fill-img{
  0%{ 
      background-image: url('../images/gray-single.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
  100%{
      background-image: url('../images/gray-fill.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
}

@-webkit-keyframes fill-img-white{
  0%{ 
      background-image: url('../images/white_single.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
  100%{
      background-image: url('../images/white-dots.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
}

@keyframes fill-img-white{
  0%{ 
      background-image: url('../images/white_single.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
  100%{
      background-image: url('../images/white-dots.png');
      background-repeat: no-repeat;
      background-size:cover;
      height: 85px;
      width: 105px;
  }
}
@-webkit-keyframes arrow-gray{
  0%{ 
      background-image: url('../images/arrow-white.png');
      background-repeat: no-repeat;
  }
  100%{
      background-image: url('../images/arrow-gay.png');
      background-repeat: no-repeat;

  }
}
@keyframes arrow-gray{
  0%{ 
      background-image: url('../images/arrow-white.png');
      background-repeat: no-repeat; 
  }
  100%{
      background-image: url('../images/arrow-gay.png');
      background-repeat: no-repeat;

  }
}
@-webkit-keyframes arrow-white{
  0%{ 
      background-image: url('../images/arrow-gay.png');
      background-repeat: no-repeat;
  }
  100%{
      background-image: url('../images/arrow-white.png');
      background-repeat: no-repeat;

  }
}
@keyframes arrow-white{
  0%{ 
      background-image: url('../images/arrow-gay.png');
      background-repeat: no-repeat;
  }
  100%{
      background-image: url('../images/arrow-white.png');
      background-repeat: no-repeat;

  }
}