/* ------------------------------ */
/* ------------------------------ */

/*
 *
 * vsSlider CSS (C) Visualsoft UK Ltd
 *
 * Please do not change any of this without consulting Tim (tim.spratt@visualsoft.co.uk)
 *
 *
 */

/* ------------------------------ */
/* ------------------------------ */



/* General styling */

.main-slider {
  width: 100%;
  min-width: 990px;
  overflow: hidden;
  position: absolute;
  height: 530px;
  float: left;
  z-index: 2;
}

.portfolio-slider {
  width: 100%;
  min-width: 1200px;
  overflow: hidden;
  position: absolute;
  height: 730px;
  float: left;
  z-index: 2;
}

.slider-buffer {
  height: 530px;
}

.slider-buffer-2 {
  height: 730px;
}

.vs-slider {
  position: absolute;
  width: 100%;
  min-width: 520px;
  margin: 0 auto;
  left: 50%;
  overflow: hidden;
  bottom: 0;
  background: #000;
  -webkit-transition: background-position 1.4s ease-in-out 0.3s;
  -moz-transition: background-position 1.4s ease-in-out 0.3s;
  -o-transition: background-position 1.4s ease-in-out 0.3s;
  -ms-transition: background-position 1.4s ease-in-out 0.3s;
  transition: background-position 1.4s ease-in-out 0.3s;
}

.vs-slider img {
  /*-webkit-backface-visibility: hidden;*/
}

.vs-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.vs-slide.vs-slide-hide {
  left: 100%;
}

.vs-slide img {
  display: block;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.vs-slide-current {
  z-index: 1000;
}


/*.vs-dots {
  width: 100%;
  position: absolute;
  text-align: center;
  left: 0;
  bottom: 20px;
  z-index: 2000;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.vs-dots span {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border: 3px transparent solid;
  border-radius: 50%;
  margin: 3px;
  cursor: pointer;
}

.vs-dots span:after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px rgba(34, 34, 34, 0.4);
}

.vs-dots span:hover:after {
  background: #d6041d;
}

.vs-dots span.vs-dots-current {
  border: 3px #fff solid;
  box-shadow: 0 1px rgba(34, 34, 34, 0.4);
}

.vs-dots span.vs-dots-current:after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  background: #d6041d;
}*/


.vs-arrows {
  -moz-user-select: none;
  -webkit-user-select: none;
}

.vs-arrows span {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 4%;
  background: rgba(34, 34, 34, 0.4);
  cursor: pointer;
  z-index: 2000;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in-out 0.2s, background 0.2s ease-in-out 0s;
  -moz-transition: opacity 0.4s ease-in-out 0.2s, background 0.2s ease-in-out 0s;
  -o-transition: opacity 0.4s ease-in-out 0.2s, background 0.2s ease-in-out 0s;
  -ms-transition: opacity 0.4s ease-in-out 0.2s, background 0.2s ease-in-out 0s;
  transition: opacity 0.4s ease-in-out 0.2s, background 0.2s ease-in-out 0s;
}

.main-slider:hover .vs-arrows span, .portfolio-slider:hover .vs-arrows span {
  opacity: 1;
}

.vs-arrows span:hover {
  background: rgba(34, 34, 34, 0.85);
}

.vs-arrows span:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 21px;
  margin: -11px 0 0 -10px;
  top: 50%;
  left: 50%;
  background: transparent url(../images/vs-slider-arrows.png) no-repeat top left;
}

.vs-arrows span.vs-arrows-next:after {
  background-position: top right;
}

.vs-arrows span.vs-arrows-prev:hover:after {
  /*background-position: bottom left;*/
}

.vs-arrows span.vs-arrows-next:hover:after {
  /*background-position: bottom right;*/
}

.vs-arrows span.vs-arrows-prev {
  left: 0;
}

.vs-arrows span.vs-arrows-next {
  right: 0;
}

/* ------------------------------ */
/* ------------------------------ */



/* Element styling */

.vs-slide .vs-layer-1,
.vs-slide .vs-layer-2,
.vs-slide .vs-layer-3,
.vs-slide .vs-layer-4,
.vs-slide .vs-background {
  position: absolute;
  float: left;
}

.vs-slide .vs-background {
  z-index: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-background img {
  min-height: 530px;
  min-width: 100%;
}

.vs-slide .vs-layer-1 {
  z-index: 1;
  bottom: 0;
  right: 12%;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-layer-2 {
  z-index: 2;
  bottom: 0;
  right: 12%;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-layer-3 {
  z-index: 3;
  bottom: 0;
  right: 12%;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-layer-4 {
  z-index: 4;
  bottom: 4.5%;
  right: 14.5%;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-call-to-action {
  display: block;
  height: 120px;
  width: 175px;
  overflow: hidden;
  -webkit-transform: translateZ(0);
}

.vs-slide .vs-call-to-action img {
  position: relative;
}

.vs-slide .vs-call-to-action span {
  position: relative;
  margin: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 90px;
  overflow: hidden;
  z-index: 1;
}

.vs-slide .vs-call-to-action span.default {
  opacity: 1;
  top: 0;
  height: 30px;
  z-index: 2;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.vs-slide .vs-call-to-action:hover span.default {
  opacity: 0;
}

.vs-slide .vs-call-to-action span.default img {
  top: -90px;
}

.vs-slide .vs-call-to-action span.hover {
  opacity: 0;
  top: -30px;
  height: 30px;
  z-index: 3;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.vs-slide .vs-call-to-action:hover span.hover {
  opacity: 1;
}

.vs-slide .vs-call-to-action span.hover img {
  top: -210px;
}

.vs-slide .vs-client-logo {
  position: relative;
  width: 215px;
  height: 95px;
  background: rgba(34, 34, 34, 0.85);
}

.vs-slide .vs-client-logo img {
  position: relative;
  top: 18px;
  margin: 0 auto;
}

.vs-slide .vs-link {
  position: relative;
  display: block;
  top: 5px;
  width: 200px;
  height: 70px;
  padding: 0 15px 0 0;
  text-align: center;
  background: rgba(34, 34, 34, 0.85) url(../images/small_arrow.png) right center no-repeat;
  text-decoration: none;
  -webkit-transition: background 0.2s ease-in-out 0s;
  -moz-transition: background 0.2s ease-in-out 0s;
  -ms-transition: background 0.2s ease-in-out 0s;
  -o-transition: background 0.2s ease-in-out 0s;
  transition: background 0.2s ease-in-out 0s;
  font-family: 'Roboto Condensed', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
  line-height: 67px;
}

.vs-slide .vs-link:hover {
  background-color: #d6041d;
}

/* ------------------------------ */
/* ------------------------------ */



/* Animations */

.vs-slide-start .anim-1 {
  -webkit-animation: fadeIn-1 0.6s ease-in-out 0s both;
  -moz-animation: fadeIn-1 0.6s ease-in-out 0s both;
  -ms-animation: fadeIn-1 0.6s ease-in-out 0s both;
  -o-animation: fadeIn-1 0.6s ease-in-out 0s both;
  animation: fadeIn-1 0.6s ease-in-out 0s both;
}

.vs-slide-start .anim-2 {
  -webkit-animation: fromRightAnim-2 2.5s ease-in-out 0.5s both;
  -moz-animation: fromRightAnim-2 2.5s ease-in-out 0.5s both;
  -ms-animation: fromRightAnim-2 2.5s ease-in-out 0.5s both;
  -o-animation: fromRightAnim-2 2.5s ease-in-out 0.5s both;
  animation: fromRightAnim-2 2.5s ease-in-out 0.5s both;
}

.vs-slide-start .anim-3 {
  -webkit-animation: fromRightAnim-3 2.5s ease-in-out 0.2s both;
  -moz-animation: fromRightAnim-3 2.5s ease-in-out 0.2s both;
  -ms-animation: fromRightAnim-3 2.5s ease-in-out 0.2s both;
  -o-animation: fromRightAnim-3 2.5s ease-in-out 0.2s both;
  animation: fromRightAnim-3 2.5s ease-in-out 0.2s both;
}

.vs-slide-start .anim-4 {
  -webkit-animation: fromBottomAnim-4 2.2s ease-in-out 0.8s both;
  -moz-animation: fromBottomAnim-4 2.2s ease-in-out 0.8s both;
  -ms-animation: fromBottomAnim-4 2.2s ease-in-out 0.8s both;
  -o-animation: fromBottomAnim-4 2.2s ease-in-out 0.8s both;
  animation: fromBottomAnim-4 2.2s ease-in-out 0.8s both;
}

.vs-slide-start .anim-5 {
  -webkit-animation: fadeIn 1.2s ease-in-out 3s both;
  -moz-animation: fadeIn 1.2s ease-in-out 3s both;
  -ms-animation: fadeIn 1.2s ease-in-out 3s both;
  -o-animation: fadeIn 1.2s ease-in-out 3s both;
  animation: fadeIn 1.2s ease-in-out 3s both;
}



@-webkit-keyframes fromBottomAnim-4 {
  0% {bottom: -100%; opacity: 0; -webkit-transform: scale(1.1);}
  85% {bottom: 1.5%; opacity: 1; -webkit-transform: scale(1.02);}
  100% {bottom: 0; opacity: 1; -webkit-transform: scale(1);}
}

@-moz-keyframes fromBottomAnim-4 {
  0% {bottom: -100%; opacity: 0; -moz-transform: scale(1.1);}
  85% {bottom: 1.5%; opacity: 1; -moz-transform: scale(1.02);}
  100% {bottom: 0; opacity: 1; -moz-transform: scale(1);}
}

@-ms-keyframes fromBottomAnim-4 {
  0% {bottom: -100%; opacity: 0; -ms-transform: scale(1.1);}
  85% {bottom: 1.5%; opacity: 1; -ms-transform: scale(1.02);}
  100% {bottom: 0; opacity: 1; -ms-transform: scale(1);}
}

@-o-keyframes fromBottomAnim-4 {
  0% {bottom: -100%; opacity: 0; -o-transform: scale(1.1);}
  85% {bottom: 1.5%; opacity: 1; -o-transform: scale(1.02);}
  100% {bottom: 0; opacity: 1; -o-transform: scale(1);}
}

@keyframes fromBottomAnim-4 {
  0% {bottom: -100%; opacity: 0; transform: scale(1.1);}
  85% {bottom: 1.5%; opacity: 1; transform: scale(1.02);}
  100% {bottom: 0; opacity: 1; transform: scale(1);}
}



@-webkit-keyframes toBottomAnim-4 {
  0% {bottom: 0; opacity: 1; -webkit-transform: scale(1);}
  15% {bottom: 1.5%; opacity: 1; -webkit-transform: scale(1.02);}
  100% {bottom: -100%; opacity: 0; -webkit-transform: scale(1.1);}
}

@-moz-keyframes toBottomAnim-4 {
  0% {bottom: 0; opacity: 1; -moz-transform: scale(1);}
  15% {bottom: 1.5%; opacity: 1; -moz-transform: scale(1.02);}
  100% {bottom: -100%; opacity: 0; -moz-transform: scale(1.1);}
}

@-ms-keyframes toBottomAnim-4 {
  0% {bottom: 0; opacity: 1; -ms-transform: scale(1);}
  15% {bottom: 1.5%; opacity: 1; -ms-transform: scale(1.02);}
  100% {bottom: -100%; opacity: 0; -ms-transform: scale(1.1);}
}

@-o-keyframes toBottomAnim-4 {
  0% {bottom: 0; opacity: 1; -o-transform: scale(1);}
  15% {bottom: 1.5%; opacity: 1; -o-transform: scale(1.02);}
  100% {bottom: -100%; opacity: 0; -o-transform: scale(1.1);}
}

@keyframes toBottomAnim-4 {
  0% {bottom: 0; opacity: 1; transform: scale(1);}
  15% {bottom: 1.5%; opacity: 1; transform: scale(1.02);}
  100% {bottom: -100%; opacity: 0; transform: scale(1.1);}
}



@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-ms-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 fadeIn-1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes fadeIn-1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-ms-keyframes fadeIn-1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes fadeIn-1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn-1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}



@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-ms-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}



.vs-slide-fromleft .anim-1 {
  -webkit-animation: fromLeftAnim-1 1.5s ease-in-out 1.2s both;
  -moz-animation: fromLeftAnim-1 1.5s ease-in-out 1.2s both;
  -ms-animation: fromLeftAnim-1 1.5s ease-in-out 1.2s both;
  -o-animation: fromLeftAnim-1 1.5s ease-in-out 1.2s both;
  animation: fromLeftAnim-1 1.5s ease-in-out 1.2s both;
}

.vs-slide-fromleft .anim-2 {
  -webkit-animation: fromLeftAnim-2 2.5s ease-in-out 2s both;
  -moz-animation: fromLeftAnim-2 2.5s ease-in-out 2s both;
  -ms-animation: fromLeftAnim-2 2.5s ease-in-out 2s both;
  -o-animation: fromLeftAnim-2 2.5s ease-in-out 2s both;
  animation: fromLeftAnim-2 2.5s ease-in-out 2s both;
}

.vs-slide-fromleft .anim-3 {
  -webkit-animation: fromLeftAnim-3 2.5s ease-in-out 2.2s both;
  -moz-animation: fromLeftAnim-3 2.5s ease-in-out 2.2s both;
  -ms-animation: fromLeftAnim-3 2.5s ease-in-out 2.2s both;
  -o-animation: fromLeftAnim-3 2.5s ease-in-out 2.2s both;
  animation: fromLeftAnim-3 2.5s ease-in-out 2.2s both;
}

.vs-slide-fromleft .anim-4 {
  -webkit-animation: fromBottomAnim-4 2.2s ease-in-out 3s both;
  -moz-animation: fromBottomAnim-4 2.2s ease-in-out 3s both;
  -ms-animation: fromBottomAnim-4 2.2s ease-in-out 3s both;
  -o-animation: fromBottomAnim-4 2.2s ease-in-out 3s both;
  animation: fromBottomAnim-4 2.2s ease-in-out 3s both;
}

.vs-slide-fromleft .anim-5 {
  -webkit-animation: fadeIn 1.2s ease-in-out 4.2s both;
  -moz-animation: fadeIn 1.2s ease-in-out 4.2s both;
  -ms-animation: fadeIn 1.2s ease-in-out 4.2s both;
  -o-animation: fadeIn 1.2s ease-in-out 4.2s both;
  animation: fadeIn 1.2s ease-in-out 4.2s both;
}



.vs-slide-fromleft .alt-anim-1 {
  -webkit-animation: fromLeftAnim-1 1s ease-in-out 0s both;
  -moz-animation: fromLeftAnim-1 1s ease-in-out 0s both;
  -ms-animation: fromLeftAnim-1 1s ease-in-out 0s both;
  -o-animation: fromLeftAnim-1 1s ease-in-out 0s both;
  animation: fromLeftAnim-1 1s ease-in-out 0s both;
}



@-webkit-keyframes fromLeftAnim-1 {
  0% {left: -100%;}
  100% {left: 0%;}
}

@-moz-keyframes fromLeftAnim-1 {
  0% {left: -100%;}
  100% {left: 0%;}
}

@-ms-keyframes fromLeftAnim-1 {
  0% {left: -100%;}
  100% {left: 0%;}
}

@-o-keyframes fromLeftAnim-1 {
  0% {left: -100%;}
  100% {left: 0%;}
}

@keyframes fromLeftAnim-1 {
  0% {left: -100%;}
  100% {left: 0%;}
}



@-webkit-keyframes fromLeftAnim-2 {
  0% {right: 100%; opacity: 0;}
  70% {right: 8%;}
  100% {right: 12%; opacity: 1;}
}

@-moz-keyframes fromLeftAnim-2 {
  0% {right: 100%;/* opacity: 0;*/}
  70% {right: 8%;}
  100% {right: 12%; opacity: 1;}
}

@-ms-keyframes fromLeftAnim-2 {
  0% {right: 100%; opacity: 0;}
  70% {right: 8%;}
  100% {right: 12%; opacity: 1;}
}

@-o-keyframes fromLeftAnim-2 {
  0% {right: 100%; opacity: 0;}
  70% {right: 6%;}
  100% {right: 12%; opacity: 1;}
}

@keyframes fromLeftAnim-2 {
  0% {right: 100%; opacity: 0;}
  70% {right: 8%;}
  100% {right: 12%; opacity: 1;}
}



@-webkit-keyframes fromLeftAnim-3 {
  0% {right: 100%; opacity: 0;}
  70% {right: 10.5%;}
  100% {right: 12%; opacity: 1;}
}

@-moz-keyframes fromLeftAnim-3 {
  0% {right: 100%; opacity: 0;}
  70% {right: 10.5%;}
  100% {right: 12%; opacity: 1;}
}

@-ms-keyframes fromLeftAnim-3 {
  0% {right: 100%; opacity: 0;}
  70% {right: 10.5%;}
  100% {right: 12%; opacity: 1;}
}

@-o-keyframes fromLeftAnim-3 {
  0% {right: 100%; opacity: 0;}
  70% {right: 10.5%;}
  100% {right: 12%; opacity: 1;}
}

@keyframes fromLeftAnim-3 {
  0% {right: 100%; opacity: 0;}
  70% {right: 10.5%;}
  100% {right: 12%; opacity: 1;}
}



.vs-slide-fromright .anim-1 {
  -webkit-animation: fromRightAnim-1 1.5s ease-in-out 1.2s both;
  -moz-animation: fromRightAnim-1 1.5s ease-in-out 1.2s both;
  -ms-animation: fromRightAnim-1 1.5s ease-in-out 1.2s both;
  -o-animation: fromRightAnim-1 1.5s ease-in-out 1.2s both;
  animation: fromRightAnim-1 1.5s ease-in-out 1.2s both;
}

.vs-slide-fromright .anim-2 {
  -webkit-animation: fromRightAnim-2 2s ease-in-out 2s both;
  -moz-animation: fromRightAnim-2 2s ease-in-out 2s both;
  -ms-animation: fromRightAnim-2 2s ease-in-out 2s both;
  -o-animation: fromRightAnim-2 2s ease-in-out 2s both;
  animation: fromRightAnim-2 2s ease-in-out 2s both;
}

.vs-slide-fromright .anim-3 {
  -webkit-animation: fromRightAnim-3 2s ease-in-out 1.8s both;
  -moz-animation: fromRightAnim-3 2s ease-in-out 1.8s both;
  -ms-animation: fromRightAnim-3 2s ease-in-out 1.8s both;
  -o-animation: fromRightAnim-3 2s ease-in-out 1.8s both;
  animation: fromRightAnim-3 2s ease-in-out 1.8s both;
}

.vs-slide-fromright .anim-4 {
  -webkit-animation: fromBottomAnim-4 1.8s ease-in-out 2.1s both;
  -moz-animation: fromBottomAnim-4 1.8s ease-in-out 2.1s both;
  -ms-animation: fromBottomAnim-4 1.8s ease-in-out 2.1s both;
  -o-animation: fromBottomAnim-4 1.8s ease-in-out 2.1s both;
  animation: fromBottomAnim-4 1.8s ease-in-out 2.1s both;
}

.vs-slide-fromright .anim-5 {
  -webkit-animation: fadeIn 1.2s ease-in-out 4s both;
  -moz-animation: fadeIn 1.2s ease-in-out 4s both;
  -ms-animation: fadeIn 1.2s ease-in-out 4s both;
  -o-animation: fadeIn 1.2s ease-in-out 4s both;
  animation: fadeIn 1.2s ease-in-out 4s both;
}



.vs-slide-fromright .alt-anim-1 {
  -webkit-animation: fromRightAnim-1 1s ease-in-out 0s both;
  -moz-animation: fromRightAnim-1 1s ease-in-out 0s both;
  -ms-animation: fromRightAnim-1 1s ease-in-out 0s both;
  -o-animation: fromRightAnim-1 1s ease-in-out 0s both;
  animation: fromRightAnim-1 1s ease-in-out 0s both;
}



@-webkit-keyframes fromRightAnim-1 {
  0% {left: 100%;}
  100% {left: 0%;}
}

@-moz-keyframes fromRightAnim-1 {
  0% {left: 100%;}
  100% {left: 0%;}
}

@-ms-keyframes fromRightAnim-1 {
  0% {left: 100%;}
  100% {left: 0%;}
}

@-o-keyframes fromRightAnim-1 {
  0% {left: 100%;}
  100% {left: 0%;}
}

@keyframes fromRightAnim-1 {
  0% {left: 100%;}
  100% {left: 0%;}
}



@-webkit-keyframes fromRightAnim-2 {
  0% {right: -100%; opacity: 0;}
  80% {right: 13%;}
  100% {right: 12%; opacity: 1;}
}

@-moz-keyframes fromRightAnim-2 {
  0% {right: -100%; opacity: 0;}
  80% {right: 13%;}
  100% {right: 12%; opacity: 1;}
}

@-ms-keyframes fromRightAnim-2 {
  0% {right: -100%; opacity: 0;}
  80% {right: 13%;}
  100% {right: 12%; opacity: 1;}
}

@-o-keyframes fromRightAnim-2 {
  0% {right: -100%; opacity: 0;}
  80% {right: 13%;}
  100% {right: 12%; opacity: 1;}
}

@keyframes fromRightAnim-2 {
  0% {right: -100%; opacity: 0;}
  80% {right: 13%;}
  100% {right: 12%; opacity: 1;}
}



@-webkit-keyframes fromRightAnim-3 {
  0% {right: -100%; opacity: 0;}
  70% {right: 16%;}
  100% {right: 12%; opacity: 1;}
}

@-moz-keyframes fromRightAnim-3 {
  0% {right: -100%; opacity: 0;}
  70% {right: 16%;}
  100% {right: 12%; opacity: 1;}
}

@-ms-keyframes fromRightAnim-3 {
  0% {right: -100%; opacity: 0;}
  70% {right: 16%;}
  100% {right: 12%; opacity: 1;}
}

@-o-keyframes fromRightAnim-3 {
  0% {right: -100%; opacity: 0;}
  70% {right: 16%;}
  100% {right: 12%; opacity: 1;}
}

@keyframes fromRightAnim-3 {
  0% {right: -100%; opacity: 0;}
  70% {right: 16%;}
  100% {right: 12%; opacity: 1;}
}



.vs-slide-toleft .anim-1 {
  -webkit-animation: toLeftAnim-1 1.5s ease-in-out 1.2s both;
  -moz-animation: toLeftAnim-1 1.5s ease-in-out 1.2s both;
  -ms-animation: toLeftAnim-1 1.5s ease-in-out 1.2s both;
  -o-animation: toLeftAnim-1 1.5s ease-in-out 1.2s both;
  animation: toLeftAnim-1 1.5s ease-in-out 1.2s both;
}

.vs-slide-toleft .anim-2 {
  -webkit-animation: toLeftAnim-2 1.8s ease-in-out 0.5s both;
  -moz-animation: toLeftAnim-2 1.8s ease-in-out 0.5s both;
  -ms-animation: toLeftAnim-2 1.8s ease-in-out 0.5s both;
  -o-animation: toLeftAnim-2 1.8s ease-in-out 0.5s both;
  animation: toLeftAnim-2 1.8s ease-in-out 0.5s both;
}

.vs-slide-toleft .anim-3 {
  -webkit-animation: toLeftAnim-3 1.5s ease-in-out 0.65s both;
  -moz-animation: toLeftAnim-3 1.5s ease-in-out 0.65s both;
  -ms-animation: toLeftAnim-3 1.5s ease-in-out 0.65s both;
  -o-animation: toLeftAnim-3 1.5s ease-in-out 0.65s both;
  animation: toLeftAnim-3 1.5s ease-in-out 0.65s both;
}

.vs-slide-toleft .anim-4 {
  -webkit-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -moz-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -ms-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -o-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  animation: toBottomAnim-4 1.5s ease-in-out 0s both;
}

.vs-slide-toleft .anim-5 {
  -webkit-animation: fadeOut 1s ease-in-out 0s both;
  -moz-animation: fadeOut 1s ease-in-out 0s both;
  -ms-animation: fadeOut 1s ease-in-out 0s both;
  -o-animation: fadeOut 1s ease-in-out 0s both;
  animation: fadeOut 1s ease-in-out 0s both;
}



.vs-slide-toleft .alt-anim-1 {
  -webkit-animation: toLeftAnim-1 1s ease-in-out 0s both;
  -moz-animation: toLeftAnim-1 1s ease-in-out 0s both;
  -ms-animation: toLeftAnim-1 1s ease-in-out 0s both;
  -o-animation: toLeftAnim-1 1s ease-in-out 0s both;
  animation: toLeftAnim-1 1s ease-in-out 0s both;
}



@-webkit-keyframes toLeftAnim-1 {
  0% {left: 0%;}
  100% {left: -100%;}
}

@-moz-keyframes toLeftAnim-1 {
  0% {left: 0%;}
  100% {left: -100%;}
}

@-ms-keyframes toLeftAnim-1 {
  0% {left: 0%;}
  100% {left: -100%;}
}

@-o-keyframes toLeftAnim-1 {
  0% {left: 0%;}
  100% {left: -100%;}
}

@keyframes toLeftAnim-1 {
  0% {left: 0%;}
  100% {left: -100%;}
}



@-webkit-keyframes toLeftAnim-2 {
  0% {right: 12%;}
  32% {right: 8%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-moz-keyframes toLeftAnim-2 {
  0% {right: 12%;}
  32% {right: 8%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-ms-keyframes toLeftAnim-2 {
  0% {right: 12%;}
  32% {right: 8%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-o-keyframes toLeftAnim-2 {
  0% {right: 12%;}
  32% {right: 8%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@keyframes toLeftAnim-2 {
  0% {right: 12%;}
  32% {right: 8%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}



@-webkit-keyframes toLeftAnim-3 {
  0% {right: 12%;}
  30% {right: 9%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-moz-keyframes toLeftAnim-3 {
  0% {right: 12%;}
  30% {right: 9%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-ms-keyframes toLeftAnim-3 {
  0% {right: 12%;}
  30% {right: 9%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@-o-keyframes toLeftAnim-3 {
  0% {right: 12%;}
  30% {right: 9%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}

@keyframes toLeftAnim-3 {
  0% {right: 12%;}
  30% {right: 9%; opacity: 1;}
  100% {right: 100%; opacity: 0;}
}



.vs-slide-toright .anim-1 {
  -webkit-animation: toRightAnim-1 1.5s ease-in-out 1.2s both;
  -moz-animation: toRightAnim-1 1.5s ease-in-out 1.2s both;
  -ms-animation: toRightAnim-1 1.5s ease-in-out 1.2s both;
  -o-animation: toRightAnim-1 1.5s ease-in-out 1.2s both;
  animation: toRightAnim-1 1.5s ease-in-out 1.2s both;
}

.vs-slide-toright .anim-2 {
  -webkit-animation: toRightAnim-2 1.5s ease-in-out 0.7s both;
  -moz-animation: toRightAnim-2 1.5s ease-in-out 0.7s both;
  -ms-animation: toRightAnim-2 1.5s ease-in-out 0.7s both;
  -o-animation: toRightAnim-2 1.5s ease-in-out 0.7s both;
  animation: toRightAnim-2 1.5s ease-in-out 0.7s both;
}

.vs-slide-toright .anim-3 {
  -webkit-animation: toRightAnim-3 1.8s ease-in-out 0.3s both;
  -moz-animation: toRightAnim-3 1.8s ease-in-out 0.3s both;
  -ms-animation: toRightAnim-3 1.8s ease-in-out 0.3s both;
  -o-animation: toRightAnim-3 1.8s ease-in-out 0.3s both;
  animation: toRightAnim-3 1.8s ease-in-out 0.3s both;
}

.vs-slide-toright .anim-4 {
  -webkit-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -moz-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -ms-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  -o-animation: toBottomAnim-4 1.5s ease-in-out 0s both;
  animation: toBottomAnim-4 1.5s ease-in-out 0s both;
}

.vs-slide-toright .anim-5 {
  -webkit-animation: fadeOut 1s ease-in-out 0.1s both;
  -moz-animation: fadeOut 1s ease-in-out 0.1s both;
  -ms-animation: fadeOut 1s ease-in-out 0.1s both;
  -o-animation: fadeOut 1s ease-in-out 0.1s both;
  animation: fadeOut 1s ease-in-out 0.1s both;
}



.vs-slide-toright .alt-anim-1 {
  -webkit-animation: toRightAnim-1 1s ease-in-out 0s both;
  -moz-animation: toRightAnim-1 1s ease-in-out 0s both;
  -ms-animation: toRightAnim-1 1s ease-in-out 0s both;
  -o-animation: toRightAnim-1 1s ease-in-out 0s both;
  animation: toRightAnim-1 1s ease-in-out 0s both;
}



@-webkit-keyframes toRightAnim-1 {
  0% {left: 0%;}
  100% {left: 100%;}
}

@-moz-keyframes toRightAnim-1 {
  0% {left: 0%;}
  100% {left: 100%;}
}

@-ms-keyframes toRightAnim-1 {
  0% {left: 0%;}
  100% {left: 100%;}
}

@-o-keyframes toRightAnim-1 {
  0% {left: 0%;}
  100% {left: 100%;}
}

@keyframes toRightAnim-1 {
  0% {left: 0%;}
  100% {left: 100%;}
}



@-webkit-keyframes toRightAnim-2 {
  0% {right: 12%;}
  15% {right: 13.2%;}
  60% {opacity: 0.6;}
  100% {right: -100%; opacity: 0;}
}

@-moz-keyframes toRightAnim-2 {
  0% {right: 12%;}
  15% {right: 13.2%;}
  60% {opacity: 0.6;}
  100% {right: -100%; opacity: 0;}
}

@-ms-keyframes toRightAnim-2 {
  0% {right: 12%;}
  15% {right: 13.2%;}
  60% {opacity: 0.6;}
  100% {right: -100%; opacity: 0;}
}

@-o-keyframes toRightAnim-2 {
  0% {right: 12%;}
  15% {right: 13.2%;}
  60% {opacity: 0.6;}
  100% {right: -100%; opacity: 0;}
}

@keyframes toRightAnim-2 {
  0% {right: 12%;}
  15% {right: 13.2%;}
  60% {opacity: 0.6;}
  100% {right: -100%; opacity: 0;}
}



@-webkit-keyframes toRightAnim-3 {
  0% {right: 12%;}
  40% {right: 16%;}
  60% {opacity: 0.7;}
  100% {right: -100%; opacity: 0;}
}

@-moz-keyframes toRightAnim-3 {
  0% {right: 12%;}
  40% {right: 16%;}
  60% {opacity: 0.7;}
  100% {right: -100%; opacity: 0;}
}

@-ms-keyframes toRightAnim-3 {
  0% {right: 12%;}
  40% {right: 16%;}
  60% {opacity: 0.7;}
  100% {right: -100%; opacity: 0;}
}

@-o-keyframes toRightAnim-3 {
  0% {right: 12%;}
  40% {right: 16%;}
  60% {opacity: 0.7;}
  100% {right: -100%; opacity: 0;}
}

@keyframes toRightAnim-3 {
  0% {right: 12%;}
  40% {right: 16%;}
  60% {opacity: 0.7;}
  100% {right: -100%; opacity: 0;}
}