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

#Animations

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


html:not(.no-cssanimations){
    .cl-animate-on-visible{

        &:not(.reveal-right):not(.reveal-left):not(.reveal-top):not(.reveal-bottom):not(.start_animation){
            opacity: 0;
            -webkit-animation-duration: 0.6s;
            -moz-animation-duration: 0.6s;
            -o-animation-duration: 0.6s;
            animation-duration: 0.6s;
            -webkit-perspective: 1000;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        &.start_animation{
            &.top-t-bottom{
                -webkit-animation-name: anim_ttb;
                -moz-animation-name: anim_ttb;
                -o-animation-name: anim_ttb;
                animation-name: anim_ttb;
                opacity: 1;
            }

            &.bottom-t-top{
                -webkit-animation-name: anim_btt;
                -moz-animation-name: anim_btt;
                -o-animation-name: anim_btt;
                animation-name: anim_btt;
                opacity: 1;
            }

            &.left-t-right {
                -webkit-animation-name: anim_ltr;
                -moz-animation-name: anim_ltr;
                -o-animation-name: anim_ltr;
                animation-name: anim_ltr;
                opacity: 1;
            }

            &.right-t-left {
                -webkit-animation-name: anim_rtl;
                -moz-animation-name: anim_rtl;
                -o-animation-name: anim_rtl;
                animation-name: anim_rtl;
                opacity: 1;
            }

            &.zoom-in {
                -webkit-animation-name: zoom-in;
                -moz-animation-name: zoom-in;
                -o-animation-name: zoom-in;
                animation-name: zoom-in;
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            &.zoom-out {
                -webkit-animation-name: zoom-out;
                -moz-animation-name: zoom-out;
                -o-animation-name: zoom-out;
                animation-name: zoom-out;
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }

            &.zoom-reverse {
                -webkit-animation-name: zoom-reverse;
                -moz-animation-name: zoom-reverse;
                -o-animation-name: zoom-reverse;
                animation-name: zoom-reverse;
                -webkit-animation-duration: 0.3s;
                -moz-animation-duration: 0.3s;
                -o-animation-duration: 0.3s;
                animation-duration: 0.3s;
                -webkit-transform: scale(0.5);
                -moz-transform: scale(0.5);
                -o-transform: scale(0.5);
                -ms-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0;
            }

            &.alpha-anim {
                -webkit-animation-name: alpha-in;
                -moz-animation-name: alpha-in;
                -o-animation-name: alpha-in;
                animation-name: alpha-in;
                opacity: 1;
            }

            &.flip-in {
                -webkit-animation-name: flip-in;
                -moz-animation-name: flip-in;
                -o-animation-name: flip-in;
                animation-name: flip-in;
                opacity: 1;
            }
        }

        &.reveal-left{
            overflow: hidden;
            -webkit-clip-path: polygon(0 0,0 0,0 100%,0 100%);
            clip-path: polygon(0 0,0 0,0 100%,0 100%);
            opacity: 0;
            transition: opacity 1.3s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.3s ease 167ms;
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.3s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
            
            &.start_animation{
                opacity: 1;
                -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
                clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            }
        
        }

        &.reveal-top{
            overflow: hidden;
            -webkit-clip-path: polygon(0 0,100% 0,100% 0,0 0);
            clip-path: polygon(0 0,100% 0,100% 0,0 0);
        
            opacity: 0;
            transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms;
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
  
            &.start_animation{
                opacity: 1; 
                -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
                clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            }
        
        }

        &.reveal-bottom{
            overflow: hidden;
            -webkit-clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
            clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
            
            opacity: 0;
            transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms;
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
 
            &.start_animation{
                opacity: 1; 
                -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
                clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            }
        
        }

        &.reveal-right{
            overflow: hidden;
            -webkit-clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
            clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
            opacity: 0;
            transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms;
            transition: clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(0.778,0.128,0.15,0.84);
  
            &.start_animation{
                opacity: 1;
                -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
                clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            }
        
        }


        &[data-speed="100"]{
            -webkit-animation-duration: 0.1s;
            -moz-animation-duration: 0.1s;
            -o-animation-duration: 0.1s;
            animation-duration: 0.1s;
        }

        &[data-speed="200"]{
            -webkit-animation-duration: 0.2s;
            -moz-animation-duration: 0.2s;
            -o-animation-duration: 0.2s;
            animation-duration: 0.2s;
        }

        &[data-speed="300"]{
            -webkit-animation-duration: 0.3s;
            -moz-animation-duration: 0.3s;
            -o-animation-duration: 0.3s;
            animation-duration: 0.3s;
        }

        &[data-speed="400"]{
            -webkit-animation-duration: 0.4s;
            -moz-animation-duration: 0.4s;
            -o-animation-duration: 0.4s;
            animation-duration: 0.4s;
        }

        &[data-speed="500"]{
            -webkit-animation-duration: 0.5s;
            -moz-animation-duration: 0.5s;
            -o-animation-duration: 0.5s;
            animation-duration: 0.5s;
        }

        &[data-speed="600"]{
            -webkit-animation-duration: 0.6s;
            -moz-animation-duration: 0.6s;
            -o-animation-duration: 0.6s;
            animation-duration: 0.6s;
        }

        &[data-speed="700"]{
            -webkit-animation-duration: 0.7s;
            -moz-animation-duration: 0.7s;
            -o-animation-duration: 0.7s;
            animation-duration: 0.7s;
        }

        &[data-speed="800"]{
            -webkit-animation-duration: 0.8s;
            -moz-animation-duration: 0.8s;
            -o-animation-duration: 0.8s;
            animation-duration: 0.8s;
        }

        &[data-speed="900"]{
            -webkit-animation-duration: 0.9s;
            -moz-animation-duration: 0.9s;
            -o-animation-duration: 0.9s;
            animation-duration: 0.9s;
        }

        &[data-speed="1000"]{
            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
            -o-animation-duration: 1s;
            animation-duration: 1s;
        }

    }
}

  /* Top to bottom keyframes */
  @-webkit-keyframes anim_ttb {
    0% {
      -webkit-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-moz-keyframes anim_ttb {
    0% {
      -moz-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-o-keyframes anim_ttb {
    0% {
      -o-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes anim_ttb {
    0% {
      transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  /* Bottom to top keyframes */
  @-webkit-keyframes anim_btt {
    0% {
      -webkit-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-moz-keyframes anim_btt {
    0% {
      -moz-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-o-keyframes anim_btt {
    0% {
      -o-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes anim_btt {
    0% {
      transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  /* Left to right keyframes */
  @-webkit-keyframes anim_ltr {
    0% {
      -webkit-transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-moz-keyframes anim_ltr {
    0% {
      -moz-transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
    100% {
      -moz-transform: translate3d(0, 0);
      opacity: 1;
    }
  }
  @-o-keyframes anim_ltr {
    0% {
      -o-transform: translate3d(-100px, 0);
      opacity: 0;
    }
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes anim_ltr {
    0% {
      transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  /* Right to left keyframes */
  @-webkit-keyframes anim_rtl {
    0% {
      -webkit-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-moz-keyframes anim_rtl {
    0% {
      -moz-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-o-keyframes anim_rtl {
    0% {
      -o-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes anim_rtl {
    0% {
      transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  /* Appear from center in keyframes */
  @-webkit-keyframes zoom-in {
    0% {
      -webkit-transform: scale(0.5);
      opacity: 0.1;
    }
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @-moz-keyframes zoom-in {
    0% {
      -moz-transform: scale(0.5);
      opacity: 0.1;
    }
    100% {
      -moz-transform: scale(1);
      opacity: 1;
    }
  }
  @-o-keyframes zoom-in {
    0% {
      -o-transform: scale(0.5);
      opacity: 0.1;
    }
    100% {
      -o-transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes zoom-in {
    0% {
      transform: scale(0.5);
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  /* Appear from center out keyframes */
  @-webkit-keyframes zoom-out {
    0% {
      -webkit-transform: scale(1.5);
      opacity: 0.1;
    }
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @-moz-keyframes zoom-out {
    0% {
      -moz-transform: scale(1.5);
      opacity: 0.1;
    }
    100% {
      -moz-transform: scale(1);
      opacity: 1;
    }
  }
  @-o-keyframes zoom-out {
    0% {
      -o-transform: scale(1.5);
      opacity: 0.1;
    }
    100% {
      -o-transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes zoom-out {
    0% {
      transform: scale(1.5);
      opacity: 0.1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  /* Disappear from center keyframes */
  @-webkit-keyframes zoom-reverse {
    0% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(0.5);
      opacity: 0;
    }
  }
  @-moz-keyframes zoom-reverse {
    0% {
      -moz-transform: scale(1);
      opacity: 1;
    }
    100% {
      -moz-transform: scale(0.5);
      opacity: 0;
    }
  }
  @-o-keyframes zoom-reverse {
    0% {
      -o-transform: scale(1);
      opacity: 1;
    }
    100% {
      -o-transform: scale(0.5);
      opacity: 0;
    }
  }
  @keyframes zoom-reverse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
  }
  /* Alpha keyframes */
  @-webkit-keyframes alpha-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes alpha-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-o-keyframes alpha-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes alpha-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  /* Flip-in keyframes */
  @-webkit-keyframes flip-in {
    0% {
      opacity: 0;
      -webkit-transform: rotateX(-45deg) translateY(120px);
    }
    100% {
      -webkit-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  @-moz-keyframes flip-in {
    0% {
      opacity: 0;
      -moz-webkit-transform: rotateX(-45deg) translateY(120px);
    }
    100% {
      -moz-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  @-o-keyframes flip-in {
    0% {
      opacity: 0;
      -o-transform: rotateX(-45deg) translateY(120px);
    }
    100% {
      -o-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  @keyframes flip-in {
    0% {
      opacity: 0;
      transform: rotateX(-45deg) translateY(120px);
    }
    100% { 
      transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  
  /* reveal Right */
  @-webkit-keyframes reveal-right {
    0% {
      -webkit-transform: translateX(-90%);
      
    }
    100% {
      -webkit-transform: translate(0px, 0px);
      
    }
  }
  @-moz-keyframes reveal-right {
    0% {
      -moz-transform: translateX(-90%);
     
    }
    100% {
      -moz-transform: translate(0px, 0px);
    }
  }
  @-o-keyframes reveal-right {
    0% {
      -o-transform: translateX(-90%);
    }
    100% {
      -o-transform: translate(0px, 0px);
    }
  }
  @keyframes reveal-right {
    0% {
      transform: translateX(-90%);
    }
    100% { 
      transform: translate(0px, 0px);
    }
  }
      
  
  /* End Animations */


  /* Loading Effect */
  /* MD preloader */
.cl-md-loading{
    width: 90px;
    margin: 0 auto;
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -45px;
    margin-top: -45px;
}
.md-preloader {
    font-size: 0;
    display: inline-block;
    -webkit-animation: outer 6600ms linear infinite;
    animation: outer 6600ms linear infinite;
    width:48px;
    height:48px;
}

.md-preloader svg {
    -webkit-animation: inner 1320ms linear infinite;
    animation: inner 1320ms linear infinite
}

.md-preloader svg circle {
    fill: none;
    stroke: #222;
    stroke-linecap: square;
    -webkit-animation: arc 1320ms cubic-bezier(.8, 0, .4, .8) infinite;
    animation: arc 1320ms cubic-bezier(.8, 0, .4, .8) infinite
}

@-webkit-keyframes outer {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes outer {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes inner {
    0% {
        -webkit-transform: rotate(-100.8deg);
        transform: rotate(-100.8deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes inner {
    0% {
        -webkit-transform: rotate(-100.8deg);
        transform: rotate(-100.8deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@-webkit-keyframes arc {
    0% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: 0
    }
    40% {
        stroke-dasharray: 151.55042961px, 210.48670779px;
        stroke-dashoffset: 0
    }
    100% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: -151.55042961px
    }
}

@keyframes arc {
    0% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: 0
    }
    40% {
        stroke-dasharray: 151.55042961px, 210.48670779px;
        stroke-dashoffset: 0
    }
    100% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: -151.55042961px
    }
}

.alpha-in{
  -webkit-animation-name: alpha-in;
  animation-name: alpha-in;
}