@-webkit-keyframes scroll {
  0% {    -webkit-transform: translateY(0);  }
  50% {    -webkit-transform: translateY(10px);  }
  100% {    -webkit-transform: translateY(0);  }
}
@-moz-keyframes scroll {
  0% {    -moz-transform: translateY(0);  }
  50% {    -moz-transform: translateY(10px);  }
  100% {    -moz-transform: translateY(0);  }
}
@keyframes scroll {
  0% { -webkit-transform: translateY(0);  -moz-transform: translateY(0);
    -ms-transform: translateY(0);  -o-transform: translateY(0);  transform: translateY(0); }
  50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px);
    -ms-transform: translateY(10px); -o-transform: translateY(10px);  transform: translateY(10px);  }
  100% { -webkit-transform: translateY(0); -moz-transform: translateY(0);
    -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);  }
}

.center-it { z-index:100;  position: absolute;  bottom: 3%;  left: 50%;
  -webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}

.center-it .caption { font-size:11px; text-align:center; color:#fff; opacity:0.8;  margin-top: 7px;}

.mouse {  display: inline-block;  height: 44px; width: 28px; border-radius: 12px; 
border: 2px solid #fff; text-align: center; opacity:0.7}
.mouse:after {  display: inline-block; height: 8px; width: 8px; background-color: #fff; border-radius: 50%;
  content: "";  -webkit-animation: scroll 1.3s ease-out infinite forwards;
  -moz-animation: scroll 1.3s ease-out infinite forwards;  animation: scroll 1.3s ease-out infinite forwards;}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.center-it {display:none;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}