.animate {
  -webkit-transition: all 200ms ease;
       -moz-transition: all 200ms ease;
         -o-transition: all 200ms ease;
            transition: all 200ms ease;
}
.animate500 {
  -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;
}
/*MENU*/
.menu *, .menu>ul>li:after {
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
       -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
         -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);  
}

.menu>ul>li { position: relative;  }
.menu>ul>li a { position: relative; z-index: 1; }
.menu>ul>li:after { content: ' '; left: 50%; width: 0px; height: 5px; position: absolute; z-index: 0;  background-color: #3282bd;; bottom: 0px;  } 
.menu>ul>li:hover:after{ width: 100%; left: 0;  }
.menu>ul>li:hover a,
.menu>ul>li a.menu_active  { color: #3282bd; opacity: 1;  }

/*
  3D rollovers styles
  Homepage: http://github.com/codepo8/3Drollovers
  Copyright (c) 2011 Christian Heilmann
  Code licensed under the BSD License:
  http://wait-till-i.com/license.txt

*/
 
.box.rollover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2
} 
.front {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  
  background-size: cover; background-position: center;
}
.back {
  z-index: 1;
  position: absolute; 
  background-size: cover;
  background-position: right top; 
  background-position: center; 
  width: 100%;
  height: 100%;
  left: 0;

  background-color: #e0e0e0
}
 
 /*
.rollover:hover .back, 
.rollover:focus .back {
  z-index: 2;
  
} 
 
.rollover:hover .front, 
.rollover:focus .front {
  z-index: 1;
  
}  
*/
.fade .rollover .front {
  opacity: 1;
  
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
        
}
.flip  .front {
  opacity: 1;
 
}

.flip  .front:hover {
  opacity: 1; 
} 

.flip  .banner.front:hover {
  opacity: 1;
  background-size: 120%; 
}


.fade .rollover .back {
  opacity: 1;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {
  opacity: 1;
}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {
  opacity: 1;
}

.flip .rollover {
  -webkit-perspective: 1500px;
     -moz-perspective: 1500px;
      -ms-perspective: 1500px;
       -o-perspective: 1500px;
          perspective: 1500px;
}
.flip .cube {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(5px) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(5px) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(5px) rotateZ(0);
       -o-transform: rotateX(0) rotateY(5px) rotateZ(0);
          transform: rotateX(0) rotateY(5px) rotateZ(0);
  -webkit-transition: 0.9s;
     -moz-transition: 0.9s;
      -ms-transition: 0.9s;
       -o-transition: 0.9s;
          transition: 0.9s;
}
/*.flip .cube>div { position: absolute; width: 100%; height: 100%; left: 0;  } */
 
.flip .front {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}

/*
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
*/
.up .front {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.up .back {
  -webkit-transform: rotateX(180deg) translate3d(0,0,1px);
     -moz-transform: rotateX(180deg) translate3d(0,0,1px);
      -ms-transform: rotateX(180deg) translate3d(0,0,1px);
       -o-transform: rotateX(180deg) translate3d(0,0,1px);
          transform: rotateX(180deg) translate3d(0,0,1px);
}
.up .rollover:hover .cube, 
.up .rollover:focus .cube {
  -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
  
.box .front {
  -webkit-transform: translate3d(0,0,1px) scale(1,1) ;
     -moz-transform: translate3d(0,0,1px) scale(1,1) ;
      -ms-transform: translate3d(0,0,1px) scale(1,1) ;
       -o-transform: translate3d(0,0,1px) scale(1,1) ;
          transform: translate3d(0,0,1px) scale(1,1) ;
}
.box .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,1px)  scale(1,1);
     -moz-transform: rotateY(180deg) translate3d(0,0,1px)  scale(1,1);
      -ms-transform: rotateY(180deg) translate3d(0,0,1px)  scale(1,1);
       -o-transform: rotateY(180deg) translate3d(0,0,1px)  scale(1,1);
          transform: rotateY(180deg) translate3d(0,0,1px)  scale(1,1);
}  


  
.hideback .front, .hideback .back {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.nananana .rollover {
  -webkit-perspective: 1500px;
     -moz-perspective: 1500px;
      -ms-perspective: 1500px;
       -o-perspective: 1500px;
          perspective: 1500px;
          
}
.nananana .rollover:hover .front,  
.nananana .rollover:focus .front {
  background: transparent;
  z-index: 10;
  -webkit-animation: batman 1s 2 alternate linear;
     -moz-animation: batman 1s 2 alternate linear;
      -ms-animation: batman 1s 2 alternate linear;
       -o-animation: batman 1s 2 alternate linear;
       animation: batman 1s 2 alternate linear;
}
@-moz-keyframes batman {
  0% { -moz-transform: scale(1,1) rotateZ(0); }
  100% { 
    -moz-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-webkit-keyframes batman {
  0% { -webkit-transform: scale(1,1) rotateZ(0); }
  100% { 
    -webkit-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-ms-keyframes batman {
  0% { -ms-transform: scale(1,1) rotateZ(0); }
  100% { 
    -ms-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@-o-keyframes batman {
  0% { -o-transform: scale(1,1) rotateZ(0); }
  100% { 
    -o-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@keyframes batman {
  0% { transform: scale(1,1) rotateZ(0); }
  100% { 
    transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}

/*


.front {  
  
  -webkit-transition: 0.9s;
     -moz-transition: 0.9s;
      -ms-transition: 0.9s;
       -o-transition: 0.9s;
          transition: 0.9s;
}

.front:hover { 
  background-size: 700px;
}*/