.animated{
    opacity: 0;
    -moz-transition: all 500ms linear;
   -webkit-transition: all 500ms linear;
   -o-transition: all 500ms linear;
   transition: all 500ms linear;
}

.boxes.animated:hover{
    -ms-transform: scale(1.02, 1.02); /* IE 9 */
    -webkit-transform: scale(1.02, 1.02); /* Safari */
    transform: scale(1.02, 1.02);
    box-shadow: 1px 5px 18px rgba(0,0,0,0.25) 
}

.animateLeft{
  opacity: 0;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
.animateRight{
  opacity: 0;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);    
    
}

.animateLeftY{
  opacity: 0;
  transition-delay: 1.2s;    
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}
.animateRightY{
  opacity: 0;
  transition-delay: 1.2s;    
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);    
    
}

.animateUp{
  opacity: 0;
  -moz-transition: all 700ms linear;
  -webkit-transition: all 700ms linear;
  -o-transition: all 700ms linear;
  transition: all 700ms linear;    
  -moz-transform: translate3d(0px, 80px, 0px);
  -webkit-transform: translate3d(0px, 80px, 0px);
  -o-transform: translate(0px, 80px);
  -ms-transform: translate(0px, 80px);
  transform: translate3d(0px, 80px, 0px);     
}

.animateDown{
  opacity: 0;
  -moz-transition: all 1200ms linear;
  -webkit-transition: all 1200ms linear;
  -o-transition: all 1200ms linear;
  transition: all 1200ms linear;
  transition-delay: 1.5s;
  -moz-transform: translate3d(0px, -50px, 0px);
  -webkit-transform: translate3d(0px, -50px, 0px);
  -o-transform: translate(0px, -50px);
  -ms-transform: translate(0px, -50px);
  transform: translate3d(0px, -50px, 0px);     
}

.slideInRight {
      opacity: 1;
      -moz-transform: translate3d(0px, 0px, 0px);
      -webkit-transform: translate3d(0px, 0px, 0px);
      -o-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate3d(0px, 0px, 0px);    
    /*-webkit-animation: slideIn 2s linear;
    animation: slideIn 2s linear;
    opacity: 1;
    */
}
.slideInLeft {
      opacity: 1;
      -moz-transform: translate3d(0px, 0px, 0px);
      -webkit-transform: translate3d(0px, 0px, 0px);
      -o-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate3d(0px, 0px, 0px);
    /*-webkit-animation: slideleft 2s linear;
    animation: slideleft 2s linear;
    opacity: 1;
    */
}

.upDown {
      opacity: 1;
      -moz-transform: translate3d(0px, 0px, 0px);
      -webkit-transform: translate3d(0px, 0px, 0px);
      -o-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate3d(0px, 0px, 0px);
    /*-webkit-animation: slideleft 2s linear;
    animation: slideleft 2s linear;
    opacity: 1;
    */
}
.popIn{
    -webkit-animation: intro 2s ease-in .5s;
    animation: intro 2s ease-in .5s;
    opacity: 1;
}


header.animateDown{
    -moz-transition: all 700ms linear;
    -webkit-transition: all 700ms linear;
    -o-transition: all 700ms linear;
    transition: all 700ms linear;
    transition-delay: .5s;
}


.fallDown{ 
    animation-name: dropdown;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-duration: 1.5s;
}

.flyInLeft{
    float: left;
    animation-name: flyInLeft;
    animation-delay: .5s;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
.flyInRight{
    float: right;
    animation-name: flyInRight;
    animation-delay: .5s;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;    
}

.downUp{
    animation-name: downUp;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;    
}



/* keyframes */

@-webkit-keyframes slideIn{
    0%{
        -webkit-transform: translate(100%, 0%);
        -moz-transform: translate(100%, 0%);
        -ms-transform: translate(100%, 0%);
        -o-transform: translate(100%, 0%);
        transform: translate(100%, 0%);
        opacity: 0;
    }
    20%{
        -webkit-transform: translate(80%, 0%);
        -moz-transform: translate(80%, 0%);
        -ms-transform: translate(80%, 0%);
        -o-transform: translate(80%, 0%);
        transform: translate(80%, 0%);
        opacity: 0.2;
    }
    40%{
        -webkit-transform: translate(60%, 0%);
        -moz-transform: translate(60%, 0%);
        -ms-transform: translate(60%, 0%);
        -o-transform: translate(60%, 0%);
        transform: translate(60%, 0%);
        opacity: 0.4;
    }
    60%{
        -webkit-transform: translate(40%, 0%);
        -moz-transform: translate(40%, 0%);
        -ms-transform: translate(40%, 0%);
        -o-transform: translate(40%, 0%);
        transform: translate(40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translate(20%, 0%);
        -moz-transform: translate(20%, 0%);
        -ms-transform: translate(20%, 0%);
        -o-transform: translate(20%, 0%);
        transform: translate(20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@keyframes slideIn{
    0%{
        -webkit-transform: translate(100%, 0%);
        -moz-transform: translate(100%, 0%);
        -ms-transform: translate(100%, 0%);
        -o-transform: translate(100%, 0%);
        transform: translate(100%, 0%);
        opacity: 0;
    }
    20%{
        -webkit-transform: translate(80%, 0%);
        -moz-transform: translate(80%, 0%);
        -ms-transform: translate(80%, 0%);
        -o-transform: translate(80%, 0%);
        transform: translate(80%, 0%);
        opacity: 0.2;
    }
    40%{
        -webkit-transform: translate(60%, 0%);
        -moz-transform: translate(60%, 0%);
        -ms-transform: translate(60%, 0%);
        -o-transform: translate(60%, 0%);
        transform: translate(60%, 0%);
        opacity: 0.4;
    }
    60%{
        -webkit-transform: translate(40%, 0%);
        -moz-transform: translate(40%, 0%);
        -ms-transform: translate(40%, 0%);
        -o-transform: translate(40%, 0%);
        transform: translate(40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translate(20%, 0%);
        -moz-transform: translate(20%, 0%);
        -ms-transform: translate(20%, 0%);
        -o-transform: translate(20%, 0%);
        transform: translate(20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideleft{
    0%{
        -webkit-transform: translate(-100%, 0%);
        -moz-transform: translate(-100%, 0%);
        -ms-transform: translate(-100%, 0%);
        -o-transform: translate(-100%, 0%);
        transform: translate(-100%, 0%);
        opacity: 0;
    }
    20%{
        -webkit-transform: translate(-80%, 0%);
        -moz-transform: translate(-80%, 0%);
        -ms-transform: translate(-80%, 0%);
        -o-transform: translate(-80%, 0%);
        transform: translate(-80%, 0%);
        opacity: 0.2;
    }
    40%{
        -webkit-transform: translate(-60%, 0%);
        -moz-transform: translate(-60%, 0%);
        -ms-transform: translate(-60%, 0%);
        -o-transform: translate(-60%, 0%);
        transform: translate(-60%, 0%);
        opacity: 0.4;
    }
    60%{
        -webkit-transform: translate(-40%, 0%);
        -moz-transform: translate(-40%, 0%);
        -ms-transform: translate(-40%, 0%);
        -o-transform: translate(-40%, 0%);
        transform: translate(-40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translate(-20%, 0%);
        -moz-transform: translate(-20%, 0%);
        -ms-transform: translate(-20%, 0%);
        -o-transform: translate(-20%, 0%);
        transform: translate(-20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@keyframes slideleft{
    0%{
        -webkit-transform: translate(-100%, 0%);
        -moz-transform: translate(-100%, 0%);
        -ms-transform: translate(-100%, 0%);
        -o-transform: translate(-100%, 0%);
        transform: translate(-100%, 0%);
        opacity: 0;
    }
    20%{
        -webkit-transform: translate(-80%, 0%);
        -moz-transform: translate(-80%, 0%);
        -ms-transform: translate(-80%, 0%);
        -o-transform: translate(-80%, 0%);
        transform: translate(-80%, 0%);
        opacity: 0.2;
    }
    40%{
        -webkit-transform: translate(-60%, 0%);
        -moz-transform: translate(-60%, 0%);
        -ms-transform: translate(-60%, 0%);
        -o-transform: translate(-60%, 0%);
        transform: translate(-60%, 0%);
        opacity: 0.4;
    }
    60%{
        -webkit-transform: translate(-40%, 0%);
        -moz-transform: translate(-40%, 0%);
        -ms-transform: translate(-40%, 0%);
        -o-transform: translate(-40%, 0%);
        transform: translate(-40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translate(-20%, 0%);
        -moz-transform: translate(-20%, 0%);
        -ms-transform: translate(-20%, 0%);
        -o-transform: translate(-20%, 0%);
        transform: translate(-20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}


@-webkit-keyframes intro{
    0%{
        -webkit-transform: translateY(-100%, 0%);
        -moz-transform: translateY(-100%, 0%);
        -ms-transform: translateY(-100%, 0%);
        -o-transform: translateY(-100%, 0%);
        transform: translateY(-100%, 0%);
        opacity: 0;
    }
    25%{
        -webkit-transform: translateY(-80%, 0%);
        -moz-transform: translateY(-80%, 0%);
        -ms-transform: translateY(-80%, 0%);
        -o-transform: translateY(-80%, 0%);
        transform: translateY(-80%, 0%);
        opacity: 0.2;
    }
    50%{
        -webkit-transform: translateY(-60%, 0%);
        -moz-transform: translateY(-60%, 0%);
        -ms-transform: translateY(-60%, 0%);
        -o-transform: translateY(-60%, 0%);
        transform: translateY(-60%, 0%);
        opacity: 0.4;
    }
    75%{
        -webkit-transform: translateY(-40%, 0%);
        -moz-transform: translateY(-40%, 0%);
        -ms-transform: translateY(-40%, 0%);
        -o-transform: translateY(-40%, 0%);
        transform: translateY(-40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translateY(20%, 0%);
        -moz-transform: translateY(20%, 0%);
        -ms-transform: translateY(20%, 0%);
        -o-transform: translateY(20%, 0%);
        transform: translateY(20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translateY(0%, 0%);
        -moz-transform: translateY(0%, 0%);
        -ms-transform: translateY(0%, 0%);
        -o-transform: translateY(0%, 0%);
        transform: translateY(0%, 0%);
        opacity: 1;
    }
}

@keyframes intro{
    0%{
        -webkit-transform: translateY(-100%, 0%);
        -moz-transform: translateY(-100%, 0%);
        -ms-transform: translateY(-100%, 0%);
        -o-transform: translateY(-100%, 0%);
        transform: translateY(-100%, 0%);
        opacity: 0;
    }
    25%{
        -webkit-transform: translateY(-80%, 0%);
        -moz-transform: translateY(-80%, 0%);
        -ms-transform: translateY(-80%, 0%);
        -o-transform: translateY(-80%, 0%);
        transform: translateY(-80%, 0%);
        opacity: 0.2;
    }
    50%{
        -webkit-transform: translateY(-60%, 0%);
        -moz-transform: translateY(-60%, 0%);
        -ms-transform: translateY(-60%, 0%);
        -o-transform: translateY(-60%, 0%);
        transform: translateY(-60%, 0%);
        opacity: 0.4;
    }
    75%{
        -webkit-transform: translateY(-40%, 0%);
        -moz-transform: translateY(-40%, 0%);
        -ms-transform: translateY(-40%, 0%);
        -o-transform: translateY(-40%, 0%);
        transform: translateY(-40%, 0%);
        opacity: 0.6;
    }
    80%{
        -webkit-transform: translateY(20%, 0%);
        -moz-transform: translateY(20%, 0%);
        -ms-transform: translateY(20%, 0%);
        -o-transform: translateY(20%, 0%);
        transform: translateY(20%, 0%);
        opacity: 0.8;
    }
    100%{
        -webkit-transform: translateY(0%, 0%);
        -moz-transform: translateY(0%, 0%);
        -ms-transform: translateY(0%, 0%);
        -o-transform: translateY(0%, 0%);
        transform: translateY(0%, 0%);
        opacity: 1;
    }
}

@-webkit-keyframes rotateLoader{
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
  
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@keyframes rotateLoader{
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
 
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes breeze{
    0%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 0.9;
    }
    30%{
        -webkit-transform: translate(0.125%, 0%);
        -moz-transform: translate(0.125%, 0%);
        -ms-transform: translate(0.125%, 0%);
        -o-transform: translate(0.125%, 0%);
        transform: translate(0.125%, 0%);
        opacity: 1;
    }
    60%{
         -webkit-transform: translate(-0.125%, 0%);
        -moz-transform: translate(-0.125%, 0%);
        -ms-transform: translate(-0.125%, 0%);
        -o-transform: translate(-0.125%, 0%);
        transform: translate(-0.125%, 0%);
        opacity: 0.9;
    }

    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

@keyframes breeze{
    0%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 0.9;
    }
    30%{
        -webkit-transform: translate(0.125%, 0%);
        -moz-transform: translate(0.125%, 0%);
        -ms-transform: translate(0.125%, 0%);
        -o-transform: translate(0.125%, 0%);
        transform: translate(0.125%, 0%);
        opacity: 1;
    }
    60%{
         -webkit-transform: translate(-0.125%, 0%);
        -moz-transform: translate(-0.125%, 0%);
        -ms-transform: translate(-0.125%, 0%);
        -o-transform: translate(-0.125%, 0%);
        transform: translate(-0.125%, 0%);
        opacity: 0.9;
    }

    100%{
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

/*@-webkit-keyframes glideRotateIn{
    0%{
        -webkit-transform:rotate3d(-2, 5, 5, -180deg);
        -moz-transform: rotate3d(-2, 5, 5, -180deg);
        -ms-transform: rotate3d(-2, 5, 5, -180deg);
        -o-transform: rotate3d(-2, 5, 5, -180deg);
        transform: rotate3d(-2, 5, 5, -180deg);
    }
  
    100%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes glideRotateIn{
    0%{
        -webkit-transform:rotate3d(-2, 5, 5, -180deg);
        -moz-transform: rotate3d(-2, 5, 5, -180deg);
        -ms-transform: rotate3d(-2, 5, 5, -180deg);
        -o-transform: rotate3d(-2, 5, 5, -180deg);
        transform: rotate3d(-2, 5, 5, -180deg);
    }
  
    100%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

*/

@-webkit-keyframes glideRotateIn{
    0%{
        -webkit-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -moz-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -ms-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -o-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    }
  
    25%{
        -webkit-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -moz-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -ms-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -o-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
    }
    75%{
        -webkit-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -moz-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -ms-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -o-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
    }
    100%{
        -webkit-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -o-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }     
}

@keyframes glideRotateIn{
    0%{
        -webkit-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -moz-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -ms-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        -o-transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        transform: translate(75%, -120%) translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    }
  
    25%{
        -webkit-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -moz-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -ms-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        -o-transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
        transform: translate(45%, -49%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(50deg);
    }
 
    75%{
        -webkit-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -moz-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -ms-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        -o-transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
        transform: translate(0%, 0%) translate3d(50px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(25deg);
    }
    100%{
        -webkit-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -o-transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }     
}

@-webkit-keyframes glideRotateOut{
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
  
    100%{
        -webkit-transform: rotate3d(-1, -3, 5, -270deg);
        -moz-transform: rotate3d(-1, -3, 5, -270deg);
        -ms-transform: rotate3d(-1, -3, 5, -270deg);
        -o-transform: rotate3d(-1, -3, 5, -270deg);
        transform: rotate3d(-1, -3, 5, -270deg);
    }
}

@keyframes glideRotateOut{
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
  
    100%{
        -webkit-transform: rotate3d(-1, -3, 5, -270deg);
        -moz-transform: rotate3d(-1, -3, 5, -270deg);
        -ms-transform: rotate3d(-1, -3, 5, -270deg);
        -o-transform: rotate3d(-1, -3, 5, -270deg);
        transform: rotate3d(-1, -3, 5, -270deg);
    }
}


@-webkit-keyframes spinner {
    0% { 
       -webkit-transform: rotate3d(1, 1, 1, 0deg);
       -ms-transform: rotate3d(1, 1, 1, 0deg);
       -o-transform: rotate3d(1, 1, 1, 0deg);
       transform: rotate3d(1, 1, 1, 0deg);
    }
    50% { 
       -webkit-transform: rotate3d(1, 1, 1, 180deg);
       -ms-transform: rotate3d(1, 1, 1, 180deg);
       -o-transform: rotate3d(1, 1, 1, 180deg);
       transform: rotate3d(1, 1, 1, 180deg);
    }
    100% { 
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
       -ms-transform: rotate3d(1, 1, 1, 360deg);
       -o-transform: rotate3d(1, 1, 1, 360deg);
       transform: rotate3d(1, 1, 1, 360deg);
    }
}

@keyframes spinner {
    0% { 
       -webkit-transform: rotate3d(1, 1, 1, 0deg);
       -ms-transform: rotate3d(1, 1, 1, 0deg);
       -o-transform: rotate3d(1, 1, 1, 0deg);
       transform: rotate3d(1, 1, 1, 0deg);
    }
    50% { 
       -webkit-transform: rotate3d(1, 1, 1, 180deg);
       -ms-transform: rotate3d(1, 1, 1, 180deg);
       -o-transform: rotate3d(1, 1, 1, 180deg);
       transform: rotate3d(1, 1, 1, 180deg);
    }
    100% { 
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
       -ms-transform: rotate3d(1, 1, 1, 360deg);
       -o-transform: rotate3d(1, 1, 1, 360deg);
       transform: rotate3d(1, 1, 1, 360deg);
    }
}

/* setting some animation presets for the site template */
@keyframes dropdown{
    0%{ opacity: 0; margin-top: -50px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-moz-keyframes dropdown{
    0%{ opacity: 0; margin-top: -50px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes dropdown{
    0%{ opacity: 0; margin-top: -50px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-ms-keyframes dropdown{
    0%{ opacity: 0; margin-top: -50px;}
    100%{opacity: 1; margin-top: 0px;}
}

@keyframes flyInLeft{
    0%{opacity: 0; margin-left: -100px;}
    100%{opacity: 1; margin-left: 0px;}
}

@-webkit-keyframes flyInLeft{
    0%{opacity: 0; margin-left: -100px;}
    100%{opacity: 1; margin-left: 0px;}
}

@-moz-keyframes flyInLeft{
    0%{opacity: 0; margin-left: -100px;}
    100%{opacity: 1; margin-left: 0px;}
}

@-ms-keyframes flyInLeft{
    0%{opacity: 0; margin-left: -100px;}
    100%{opacity: 1; margin-left: 0px;}
}


@keyframes flyInRight{
    0%{opacity: 0; margin-right: -100px;}
    100%{opacity: 1; margin-right: 0px;}
}

@-webkit-keyframes flyInRight{
    0%{opacity: 0; margin-right: -100px;}
    100%{opacity: 1; margin-right: 0px;}
}

@-moz-keyframes flyInRight{
    0%{opacity: 0; margin-right: -100px;}
    100%{opacity: 1; margin-right: 0px;}
}

@-ms-keyframes flyInRight{
    0%{opacity: 0; margin-right: -100px;}
    100%{opacity: 1; margin-right: 0px;}
}


@keyframes downUp{
    0%{opacity: 0; margin-top: 350px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes downUp{
    0%{opacity: 0; margin-top: 350px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-moz-keyframes downUp{
    0%{opacity: 0; margin-top: 350px;}
    100%{opacity: 1; margin-top: 0px;}
}

@-ms-keyframes downUp{
    0%{opacity: 0; margin-top: 350px;}
    100%{opacity: 1; margin-top: 0px;}
}


@keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: .5;}
}

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

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

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