html{height:100%;}
body{font-family: 'Montserrat', sans-serif;margin:0;padding:0;font-weight:300;height:100%;font-weight:300;font-display: swap;color:#787878;font-size:16px;
}
h1{font-weight:600;color:#0a2f60;font-size:2.5em;}
h1 b{font-size:30px;}
h2{color:#000;}
b{font-weight:600;}
/*.clear:before, .clear:after {content: " ";display: table;}
.clear:after {clear: both;}
.clear {*zoom: 1;}*/
#bco{background:none;height:0px;}
#divgral{width:100%;height:115px;position:fixed;z-index:9999;}

.contenidogral{max-width:1000px;margin:0 auto;overflow:hidden;}
.rsociales{background-color:#66c6eb;text-align: right;}
.rsociales a{color:#236ba7;text-align: right;text-decoration: none;    font-size: 20px;}
#blanco{width:100%;height:107px;}
a#pull {display: none;}
nav {height:115px;width: 100%;background:none;position: relative;border-bottom: solid 0px #DDD;}
#logo{width:125px;height:60px;border:blue solid 0px;margin:2px 1%;float:left;}
#logo img{max-width:200px;}
nav ul{padding: 0;float:right;margin:17px 0 0;min-width:40%;height: 40px;}
nav li {display:block;float: left;max-width:27%;}
nav a {color:#223251;display:block;text-align: center;text-decoration: none;text-transform: uppercase;border:none solid 2px;margin-right:2px;}
nav li a {border-right:0px solid #576979;font-size: 12px;padding:13px 11px;}
nav li:last-child a {border-right: 0;}
nav a:hover, nav a:active {background:none;color:#1880a7;}



#fb{width:30px;border:none !important;font-size:20px;}
#in{width:30px;border:none !important;font-size:20px;}
#ln{display:block;width:90%;margin:15px auto;}


.imgmax{max-width:100%;}
.topdiv{margin-top:15%;}
.topdivlabel{margin-top:5% !important;}

/*****GALERIA************/




/*********************************/
.hg{height:100%;}
.paddt{padding:20px 0;}
.paddp{padding:10px 0;}
.margintop{margin-top:100px;}
.noventa{width:90%;}
.der{float:right;}
.izq{float:left;}
.contenedor{width:85%;display:block;margin-top:20px;}
.gde{width:65%;}
.peq{width:35%;}
.mit{width:55%;}
.mit2{width:45%}
.img_med{width:60%;}
.full{width:100%;}
.centro{margin:0 auto;display:block;}
.txt{font-size:15px;text-align:justify;}
.mitad{width:48%;}
.txtcentro{text-align: center;}
.txtw{color:#FFF;font-size:27px;display:block;}
.txtb{color:#1a3c68;font-size:25px;display:block}
.txto{color:#fcb600;font-size:27px;font-weight:600;display:block;}
.txtmax{font-size:30px;}
.tres{width:33%;text-align:justify;font-size:12px;}
.seis{width:66%;text-align:justify;font-size:16px;}
.tres p{display:block;height: 90px;}
.tres img{display:block;margin:10px auto;background:#FFF;padding:30px;}
.seis img{display:inline-block;height:200px;float:left;margin-left: 30px;}
.seis strong{font-size:50px;line-height:200px;display:inline-block;floaT:left;margin-left: 30px;}

.tiendalinea .tres{width:33%;text-align:center;height:320px;font-size:12px;float:left;}
.tiendalinea .tres img{height:180px;width:auto;}

.siete{width:14.2%;text-align: center;height:160px;font-size:12px;text-transform:uppercase;color:#FFF;margin-top: 27px;}
.siete img{display:block;width:70px;margin:0 auto 30px;-webkit-transition:all .9s ease;
-moz-transition:all .9s ease;-o-transition:all .9s ease;-ms-transition:all .9s ease;}
.siete img:hover{width:89px;-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}

.hrl{border-bottom:#3e879a solid 3px;bordeR-top:0;
    border-left:0;border-right:0;width:auto;margin: 4px 0;}


.label h1{margin:0 auto;display:block;color:#FFF;}
.label2 h1{margin:0 auto;display:block;color:#FFF;}
.label3 h1{margin:0 auto;display:block;color:#FFF;}
.label4 h1{margin:0 auto;display:block;color:#FFF;}
.btncontacto{background-repeat: no-repeat;background-position: center;background-size: cover; width:100%;max-width:300px;display:block;border:#1a3c68 solid 1px;margin:10px auto;text-decoration: none;color:#FFF;height:50px;line-height:50px;font-size:25px}

.btncontacto:hover{display:block;border:#fff solid 1px;color:#1a3c68;}
.btn1{background:#b99b33;color:#FFF;text-align:center;display:block;width:150px;padding:5px 15px;text-decoration: none;float:right;}
.btn1:hover{background:#20a0df;}

.opciones{background:#000;color:#FFF;width:20%;margin-left:5%;display:block;text-decoration:none;floaT:left;text-align:center;padding:15px 0;}
.menuopc{width:100%;floaT:left;margin-top:13%;}
.opciones{background:#61dede;color:#FFF;}
.opciones:hover{background:#bc0807;}
.nosotrosdiv{display:none;}

.btncv{background:#206098;color:#FFF;text-align:center;width:200px;text-decoration:none;font-size:17px;padding:10px;}
.btncv:hover{color:#FFF;background:#1a91d9;}

#general{position:relative;width:100%;min-height:300px;overflow:hidden;}
#general .mitad{margin-top: 120px;}
#general img{max-width:100%;display:block;margin:0 auto;float:right;}

.msjban{width:30%;background:#FFF;padding:30px 25px;position:absolute;top:80px;text-align: right;}
.msjban h1{font-size:35px;color:#515151;display:block;float:right;}
.msjban b{color:#666;display:block;float:right;}
.msjban strong{color:#000;}
.msjban a{background:#f90;color:#fff;text-align: center;text-decoration: none;width:200px;padding:10px 0;display:block;margin:10px auto;float:right;}

#caracteristicas .contenidogral{background:#FFF;padding:30px 0;}
#casas img{width:100%;display:block;margin:0 auto;}
.casasm{background-color:#000;color:#FFF;overflow:hidden;padding:20px 0;}

#servicios h1{color:#000;}

#equipo{background:#FFF;padding:60px 0 30px}
#equipo h1{color:#2e8db0;}

#areas{background:#fff;}
#areajardin{width:100%;color:#FFF;height:50px;height:80%;}
#areajardin span{display:block;max-width:80%;width:100%;margin:0 auto;padding:10px;text-align:justify;color:#999}
#areajardin b{text-align: center !important;color:#515151}
#areajardin strong{text-align:right;font-size:30px;display:block;color:#515151;}
#areajardin h3{display:block;margin:20px auto;text-align: center !important;}
#areajardin img{display:block;margin:20px auto 0;text-align:centeR;}

#galeria img{width:24%;}

#agendar{color:#515151;text-align: center;}
#agendar i{font-size:35px;}
#agendar a{text-decoration:none;color:#FFF;text-align: center;background:#cc3166;width:200px;padding:10px 0;display:block;margin:0 auto;}

#trassen{width:100%;color:#515151;height:50px;height:60%;min-height:350px;}

.mostrar{
  display:block;
}

.body_ban img{width:100%;}

#contacto{min-height:70%;width:100%;color:#515151;display:block;margin:0 auto;overflow:hidden;padding:80px 0;top:100px;background-color:#FFF;}

#contacto h1{color:#000}
#contacto i{margin-right: 20px;
  color: #4c4b4b;
bordeR: #adadad solid 2px;
    padding: 15px;
    border-radius: 50%;}

#comunidad{color:#999;/*
background:linear-gradient(to right, #642447 11%, #79274e 45%,#a32d5b 85%, #c23265 100%);*/
}
#comunidad h1{color:#999;font-size:3em;font-weight:bold;line-height:40px;}

.casa1{width:25%;float:lefT;height:376px;}
.casa1 span{display:block;width:90%;margin:0 auto;text-align:right;}
.casa1 h1{color:#000;font-size:30px;}


.casa2{width:60%;floaT:left;}
.casa3{width:15%;float:left;position:relative;height:376px;}
.casa3 span{display:block;width:90%;margin:0 auto;text-align:left;}
.casa3 a{float:left;position:absolute;bottom:10px;text-decoration:none;color:#666;display:block;text-align:lefT;}

.casa11{width:25%;float:right;height:376px;}
.casa11 span{display:block;width:90%;margin:0 auto;text-align:left;}
.casa11 h1{color:#000;font-size:30px;}
.casa22{width:60%;floaT:right;}
.casa33{width:15%;float:left;position:relative;height:376px;}
.casa33 span{display:block;width:90%;margin:0 auto;text-align:right;}
.casa33 a{float:left;position:absolute;bottom:10px;text-decoration:none;color:#666;display:block;text-align:lefT;}

.cuatro{width:25%;height:560px;position:relative;font-size:14px;text-align:justify;color:#666}
.cuatro img{width:100%;}
.cuatro h3{color:#fff;font-size:18px;margin-top:-29px;line-height:17px;margin-bottom:29px;}
.cuatro span{width:90%;margin:0 auto;display:block;}

.txtseccion{float:left;margin-left:10px;max-width:80%;}

.ctc{    background: #69ccd3;
    padding: 24px 0;
    display: block;
    floaT: left;
    width: 100%;}

.ctcd{    background: #6dacde;
    padding: 24px 0;
    display: block;
    floaT: left;
    width: 100%;}


.btnw{background:#FFF; width:100%;max-width:200px;display:inline-block;border:#1a3c68 solid 1px;margin:10px auto;text-decoration: none;color:#1a3c68;height:40px;line-height:40px;font-size:23px}

.btnw:hover{display:inline-block;border:#fff solid 1px;color:#fff;background:#1a3c68;}


.contacto_op{margin:20px auto;width:100%;}
.contacto_op i{font-size:19px !important;}
.contacto_op img{float:left;margin-right:15px;}


table td{border:red solid 0px;padding:5px;}
table td .frm{display:block;margin:0 auto;width:100%;border:#20a0df solid 2px;height: 27px;font-size:13px;}
textarea{min-height:77px;}
.td1{width:100px;}
.td2{width:300px;}
.btn{    text-align: center;    width: 200px;    height: 30px;    border-radius:9px;    margin: 0 auto;    display: block;    background-color:#f84a4a;    color: #FFF;font-size: 15px; text-decoration:none;line-height:30px;
    }




/*****FOOTER****/
#footer{width:100%;margin:0 auto;padding:30px 0;background:#223252;color:#FFF;min-height:10px;overflow:hidden;}
#footer img{max-width:210px;margin:0 auto;display:block;width:90%;}
#footer b{font-size:16px;}
.btns{    font-size: 17px;
    background: #2dbdc8;
    color: #FFF;
    border: #FFF solid 2px;
    border-left: #FFF solid 1px;
    display: inline-block;
    margin-top: 0px;
    height: 30px;
    width: 15%;
    text-align: center;
    margin: 0;
    padding: 0;
    float:left;
  }
  .suscribirse{
    border: 2px solid #fff;
    border-right: #FFF solid 1px;
height: 24px;
displaY: block;
background:#2dbdc8;
color:#FFF;
width:75%;
margin:0;
padding:1px 5px;
float:left;

  }

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  opacity: 1; /* Firefox */
  font-size:10px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
  font-size:10px;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
  font-size:10px;
}

/****RESPONSIVE******/
@media only screen and (min-width : 1237px) {

    #divgral{width:100%;position:fixed;z-index:9999;}


    #banner{
   width:100%;
   margin:0 auto;
   min-height: 100%;
   overflow: hidden;
   padding:0px;
   background-image:url('../img/img_inicio.png');
    background-size:cover;background-repeat:no-repeat;
}




#investigadores{min-height:71%;width:100%;background-image:url('../img/img_investigadores.png');background-repeat: no-repeat;color:#FFF;display:block;margin:0 auto;overflow:hidden;padding:80px 0;top:100px;background-color: #d2d8da;background-size:cover;}

#empresas{min-height:71%;width:100%;background-image:url('../img/img_empresas.png');background-repeat: no-repeat;color:#FFF;display:block;margin:0 auto;overflow:hidden;padding:80px 0;top:100px;background-color: #d2d8da;background-size:cover;}


}





@media only screen and (max-width : 737px) {


#divgral{height:47px;}
#blanco{height:47px;}
#up{display:none;}
#logo{display:none;}
nav {border-bottom: 0;height: auto;position:fixed;}
nav ul {display: none;height: auto;width: 100%;z-index: 22;float:none;background:#000c21;margin:0;}
nav li {width: 50% !important;float: left;position: relative;height:44px;max-width:50% !important;}
nav a {text-align:center;width: 100%;text-indent: 25px;border-bottom:#1b3f72 solid 0px;}
nav a#pull {display: block;background-color: #0C2530;width: 100%;position: relative;height: 54px;padding: 4px 0;}
nav a#pull:after {content:"";background: url('../img/nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;
        position: absolute;right: 15px;top: 14px;}

nav a:hover, nav a:active {border:none;}
.rsociales a{color:#236ba7;text-align: right;text-decoration: none;font-size:25px !important;margin-right:10px;}
.slick-slide img {
    display: block;
    width: 100%;
}
.hg{height:auto;}
.body_ban span {
    top: 40% !important;
}
#tratamientos {
    width: 20% !important;
    floaT: lefT !important;
}
#trassen{    height: auto;
    min-height: 350px;
    overflow: hidden;}

.seis {
    width: 100% !important;
    height: 135px !important;
}
.seleccionado {
    background-image: url(../img/triangulos.png) !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}
.seis:hover{background-image:url('img/triangulos.png');background-position: center right !important;background-repeat:no-repeat;}

#info_tratamientos {
        font-size: 13px;background:#FFF;
}
#tratamientos h1{display:none !important;}

#op6{width: 100% !important;}

    #pr{  margin-top: 70px;}

    .secciones{
    width: 90%;
    margin: 20px auto;
        height:auto;
    min-height: 100px;
    padding: 15px 0;
    overflow: hidden;
    text-align: right;
    }
    .seccionesv{
    width: 90%;
    margin: 20px auto;
        height:auto;
    min-height: 100px;
    padding: 15px 0;
    overflow: hidden;
    text-align: right;
    }
.menuopc{margin-top: 23% !important;}
#nosotros1 .mitad{margin-top:40%;}
#nosotros2 .mitad{margin-top:40%;}
#nosotros3 .mitad{margin-top:40%;}
#nosotros4 .mitad{margin-top:40%;}
.tres{width:50%;float:left !important;}
.seis {width:50% !important;height:255px !important;float:left !important;}


.der{float:none;margin:0 auto;}
.izq{float:none;margin:0 auto;}
.contenedor{width:95%;display:block;margin-top:10px;}
.gde{width:100%;}
.peq{width:100%;}
.mit{width:100%;}
.mit2{width:100%}
.img_med{width:60%;}
.full{width:100%;}
.centro{margin:0 auto;display:block;}
.txt{font-size:17px;text-align:justify;}
.mitad{width:95%;padding:2px 2px;}

#contacto table{width:100%;margin:20px auto;display:block;border:none;float:none;}
#contacto iframe{width:90%;margin:0 auto;display:block;}
#nosotros{padding:8px 0;}
#servicios .contenedor{margin-top: 14px;}

table td{border:red solid 0px;padding:5px;}
table td .frm{display:block;float:left;margin:0 auto;width:98%;}
textarea{min-height:77px;}
.td1{width:80px;}
.td2{width:200px;}


.dwn{display:block;margin:0 auto;width:95%;min-height:20px;overflow: hidden;}
#firma{font-size:12px;color:#999;margin-top:9px;}

#foot{font-size:12px;color:#666;margin-top:5px;}
/*#fb{display:block;float:none;width:90%;min-height:50px;overflow: hidden;margin:0 auto;}*/
#line{width:100%;height:10px;display:block;background:#2E7192;}

.casa1{width:100%;float:none;height:auto;}
.casa1 span{display:block;width:90%;margin:0 auto;text-align:center;}
.casa1 h1{color:#000;font-size:30px;}

.casa2{width:100%;floaT:none;text-align: center;}
.casa3{width:100%;float:none;position:relative;height:97px;text-align: center;}
.casa3 span{display:block;width:90%;margin:0 auto;text-align:center;}
.casa3 a{float:none;position:relative;bottom:-10px;text-decoration:none;color:#666;display:block;text-align:center;}

.casa11{width:100%;float:none;height:auto;}
.casa11 span{display:block;width:90%;margin:0 auto;text-align:center;}
.casa11 h1{color:#000;font-size:30px;}
.casa22{width:100%;floaT:center;}
.casa33{width:100%;float:center;position:relative;height:97px;}
.casa33 span{display:block;width:90%;margin:0 auto;text-align:center;}
.casa33 a{float:none;position:relative;bottom:-10px;text-decoration:none;color:#666;display:block;text-align:center;}
.cuatro{width:50%;height:560px;position:relative;font-size:14px;text-align:justify;color:#666;float: left;}
.cuatro img{width:100%;}
.cuatro h3{color:#fff;font-size:18px;margin-top:-29px;line-height:17px;margin-bottom:29px;}
.cuatro span{width:90%;margin:0 auto;display:block;}

#areajardin strong {
    text-align: center;
    font-size: 30px;
    display: block;
    color: #515151;
}
.msjban {
    width: 75%;
    background: #ffffffd1;
    padding: 30px 25px;
    position: absolute;
    top: 60px;
    text-align: center;
    left: 8%;
}

.msjban h1 {float: none;}
.msjban b {float: none;}
.msjban a {float: none;}
#general{height:470px}
.msjban img{float: none;}

}

/*******ANIMATIONS*****************************/

/*animations*/

/******************
* Bounce in right *
*******************/


.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slow{
     -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slower{
     -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slowest{
     -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Added by Andy Meetan */
.delay-250 {
    -webkit-animation-delay:0.25s;
    -moz-animation-delay:0.25s;
    -o-animation-delay:0.25s;
    animation-delay:0.25s;
}
.delay-500 {
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}
.delay-750 {
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
    -o-animation-delay:0.75s;
    animation-delay:0.75s;
}
.delay-1000 {
    -webkit-animation-delay:1.0s;
    -moz-animation-delay:1.0s;
    -o-animation-delay:1.0s;
    animation-delay:1.0s;
}
.delay-1250 {
    -webkit-animation-delay:1.25s;
    -moz-animation-delay:1.25s;
    -o-animation-delay:1.25s;
    animation-delay:1.25s;
}
.delay-1500 {
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay:1.5s;
    animation-delay:1.5s;
}
.delay-1750 {
    -webkit-animation-delay:1.75s;
    -moz-animation-delay:1.75s;
    -o-animation-delay:1.75s;
    animation-delay:1.75s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-3000 {
    -webkit-animation-delay:3.0s;
    -moz-animation-delay:3.0s;
    -o-animation-delay:3.0s;
    animation-delay:3.0s;
}
.delay-3500 {
    -webkit-animation-delay:3.5s;
    -moz-animation-delay:3.5s;
    -o-animation-delay:3.5s;
    animation-delay:3.5s;
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{
    opacity:0;
}

.lightSpeedInRight, .lightSpeedInLeft{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
    }

    100% {
         -webkit-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

.bounceIn.go {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;

        -webkit-transform: translateX(400px);
    }
    60% {

        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
    opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;

        transform: translateX(400px);
    }
    60% {

        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
    opacity: 1;

        transform: translateX(0);
    }
}


.bounceInRight.go {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;

        -webkit-transform: translateX(-400px);
    }
    60% {

        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;

        transform: translateX(-400px);
    }
    60% {

        transform: translateX(30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        transform: translateX(0);
    }
}

.bounceInLeft.go {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;

        -webkit-transform: translateY(400px);
    }
    60% {

        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;

        transform: translateY(400px);
    }
    60% {

        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInUp.go {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;

        -webkit-transform: translateY(-400px);
    }
    60% {

        -webkit-transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;

        transform: translateY(-400px);
    }
    60% {

        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInDown.go {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}


/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
.fadeIn{
    opacity:0;
}
.fadeIn.go {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn {
    0% {
        -webkit-transform: scale(0.2);
        opacity:0;
    }
    50% {
        -webkit-transform: scale(1.2);

    }
    100% {
        -webkit-transform: scale(1);
        opacity:1;
    }
}
@keyframes growIn {
    0% {
        transform: scale(0.2);
        opacity:0;
    }
    50% {
        transform: scale(1.2);

    }
    100% {
        transform: scale(1);
        opacity:1;
    }
}
.growIn {

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn;
    animation-name: growIn;
}

/********
* Shake *
********/
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake.go {
    -webkit-animation-name: shake;
    animation-name: shake;
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
    0%, 100% {-webkit-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);}
}
@keyframes shakeUp {
    0%, 100% {transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
    20%, 40%, 60%, 80% {transform: translateY(10px);}
}
.shakeUp.go {
    -webkit-animation-name: shakeUp;
    animation-name: shakeUp;
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeft{
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
.fadeInLeft.go {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRight{
    opacity: 0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight.go {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp{
    opacity: 0;
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
}
.fadeInUp.go {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDown{
    opacity: 0;
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
}
.fadeInDown.go {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateIn.go {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpLeft.go {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownLeft.go {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpRight.go {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownRight.go {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn.go {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
.wiggle.go {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

/********
* swing *
*********/

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.swing.go {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

/*******
* tada *
********/

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}
@keyframes tada {
    0% {transform: scale(1);}
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}
.tada.go {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
.wobble.go {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

/********
* pulse *
*********/

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse.go {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
   0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInRight {
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInRight.go {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
   0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInLeft {
    0% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInLeft.go {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}


/*******
* Flip *
*******/
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}
.flip.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.flipInX.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.flipInY.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

/*****************
* Out animations *
*****************/


/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
    }
    25% {
        -webkit-transform: scale(.95);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(.3);
    }
}
.bounceOut.goAway {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes bounceOutUp {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.bounceOutUp.goAway {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes bounceOutDown {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.bounceOutDown.goAway {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}


/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.bounceOutLeft.goAway {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.bounceOutRight.goAway {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOut.goAway {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.fadeOutUp.goAway {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.fadeOutDown.goAway {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.fadeOutLeft.goAway {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.fadeOutRight.goAway {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.flipOutX.goAway {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
.flipOutY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@keyframes lightSpeedOutRight {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
.lightSpeedOutRight.goAway {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}


/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
@keyframes lightSpeedOutLeft {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
.lightSpeedOutLeft.goAway {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;

}

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        opacity: 0;
    }
}
@keyframes rotateOut {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0;
    }
}
.rotateOut.goAway {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}


/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -transform-origin: left bottom;
        -transform: rotate(-90deg);
        opacity: 0;
    }
}
.rotateOutUpLeft.goAway {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutDownLeft.goAway {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutUpRight.goAway {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}
.rollOut.goAway {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUpShort {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUpShort{
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
.fadeInUpShort.go {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDownShort {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDownShort{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
.fadeInDownShort.go {
    -webkit-animation-name: fadeInDownShort;
    animation-name: fadeInDownShort;
}

/*********************
* fadeInRightShort
*********************/
@-webkit-keyframes fadeInRightShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRightShort {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRightShort {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}
.fadeInRightShort.go {
    -webkit-animation-name: fadeInRightShort;
    animation-name: fadeInRightShort;
}

/*********************
* fadeInLeftShort
*********************/
@-webkit-keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeftShort {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
.fadeInLeftShort.go {
    -webkit-animation-name: fadeInLeftShort;
    animation-name: fadeInLeftShort;
}