@keyframes fadein { /* flame pulses */
  0%   { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeout { /* flame pulses */
  0%   { opacity:1; }
  100% { opacity:0; }
}

.animate-fadein {
  animation: fadein 0.3s forwards;
}
.animate-fadeout {
  animation: fadeout 0.3s forwards;
}

@-webkit-keyframes slidein { /* flame pulses */
    0%   {right:-40% }
    100% { right:0%; }
}
@keyframes slidein { /* flame pulses */
    0%   {right:-40% }
    100% { right:0%; }
}
@-webkit-keyframes slideout { /* flame pulses */
    0%   { right:0%; }
    100% { right:-40%; }
}
@keyframes slideout { /* flame pulses */
    0%   { right:0%; }
    100% { right:-40%; }
}


@-webkit-keyframes reverse-slidein { /* flame pulses */
    0%   {left:-40% }
    100% { left:0%; }
}
@keyframes reverse-slidein { /* flame pulses */
    0%   {left:-40% }
    100% { left:0%; }
}
@-webkit-keyframes reverse-slideout { /* flame pulses */
    0%   { left:0%; }
    100% { left:-40%; }
}
@keyframes reverse-slideout { /* flame pulses */
    0%   { left:0%; }
    100% { left:-40%; }
}

@keyframes zoomspark {
    0% { width: auto }
    100% {width: 0 }
}

@-webkit-keyframes zoomspark {
    0% { width: auto }
    100% {width: 0 }
}


.animate-slidein {
    -webkit-animation: slidein 0.6s forwards;
    animation: slidein 0.6s forwards;
}
.animate-slideout {
    -webkit-animation: slideout 0.8s forwards;
    animation: slideout 0.8s forwards;
}


.animate-reverse-slidein {
    -webkit-animation: reverse-slidein 0.6s forwards;
    animation: reverse-slidein 0.6s forwards;
}
.animate-reverse-slideout {
    -webkit-animation: reverse-slideout 0.8s forwards;
    animation: reverse-slideout 0.8s forwards;
}




.ripple {

  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .3s, opacity 0.3s;
}
.ripple:active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

/*******  multiscroll portrait animations **********/
@-webkit-keyframes leftSwipe {
    0% {
        opacity:0;
        right: -150%;
    }
    100% {
        opacity:1;
        right: 0%;
    }
}

@keyframes leftSwipe {
    0% {
        opacity:0;
        right: -150%;
    }
    100% {
        opacity:1;
        right: 0%;
    }
}

@-webkit-keyframes rightSwipe {
    0% {
        left: -150%;
    }
    100% {
        left: 0%;
    }
}

@keyframes rightSwipe {
    0% {
        left: -150%;
    }
    100% {
        left: 0%;
    }
}

@-webkit-keyframes buttonleftSwipe {
    0% {
       transform:translateX(0);
    }
    100% {
        transform:translateX(-100px);
    }
}

@keyframes buttonleftSwipe {
    0% {
        transform:translateX(0);
    }
    100% {
        transform:translateX(-100px);
    }
}

.leftSwipe {
    -webkit-animation: leftSwipe 1s ease;
    animation: leftSwipe 1s ease;
}

.rightSwipe {
    -webkit-animation: rightSwipe 1s ease;
    animation: rightSwipe 1s ease;
}
.buttonleftSwipe {
    -webkit-animation: buttonleftSwipe 1s ease;
    animation: buttonleftSwipe 1s ease;
}

a.scroll {
    height: 50px;
    width: 30px;
    border: 3px solid rgba(225, 225, 225,1);
    display: block;
    margin: 10px auto;
}


a.mobile {
    border-radius: 7px;
}


a.scroll .indicator,
a.mobile .indicator::after {
    text-align: center;
    width: 0;
    margin: auto;
    position: relative;
    display: block;
}



a.mobile .indicator {
    height: 0;
    top: 35px;
    border: 4px solid rgba(225, 225, 225,1);
    border-radius: 15px;
    animation: mobileScrollAction 2s 1s ease-in-out infinite;
}





@keyframes desktopScrollAction {
    0% {
        top: 5px;
    }
    50% {
        top: 15px;
    }
    100% {
        top: 5px;
    }
}

@keyframes mobileScrollAction {
    0% {
        opacity: 0;
        top: 35px;
    }
    25% {
        opacity: 1;
        top: 35px;
    }
    75% {
        opacity: 1;
        top: 15px;
    }
    100% {
        opacity: 0;
        top: 15px;
    }
}

@keyframes laptopScrollAction {
    0% {
        opacity: 0;
        top: 10px;
    }
    25% {
        opacity: 1;
        top: 10px;
    }
    75% {
        opacity: 1;
        top: 30px;
    }
    100% {
        opacity: 0;
        top: 30px;
    }
}
@keyframes slidein { /* flame pulses */
    0% {
        right: -90%
    }
    100% {
        right: 0%;
    }
}
@keyframes slideout { /* flame pulses */
    0% {
        right: 0%;
    }
    100% {
        right: -90%;
    }
}