html, body, #desarrollo { /*Css Generales */
    width:100%; 
	font-family:montserrat,Arial,calibri,Helvetica,sans-serif; 
	font-size:18px; 	
} 



html { bORDER: 0PX SOLID GRAY; }


body{
	position: relative;
	margin:0px;
	padding:0px;
    overflow: hidden;
	background-size:cover;
	color: black;
	 /* overflow: SCROLL;
    overflow-x: hidden;*/
}

#popup {
      position: fixed;
    z-index: 100;
    background: rgba(250,250,250,0.95);
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-animation-name: opaco;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;

}	

#imagenes {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 800px;
    height: 50%;
    padding: 50px;
	transition-property: all;
      transition-duration: 0.5s, 0.5s, 0.5s;
      transition-timing-function: linear, linear;
      transition-delay: 0s ,0.5s, 0.5s;
}

#imagenes img {
    max-width: 90%;
    max-height: 90%;
    margin: 5px;
    transition-property: all;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, linear;
    transition-delay: 0s ,0.5s, 0.5s;
	
      background: black;
    float: left;
    margin: 5px;
    padding: 5px;
    height: 30px;
}
	
@media only screen and (min-width :0px) and (max-width :900px){	

#imagenes {    width: 80%;    padding: 0px;    min-height: 60%;    /* height: auto; */} 
#imagenes img {    width: 90%;    height: auto;    margin: 5%; } 

}

#encabezado span:hover img.evento_click:hover, .evento_click, .evento_click:hover div, .blog:hover  span , .blog, #encabezado a, #encabezado a:hover, .transparente_blanco:hover , .transparente_azul:hover h1, .transparente_azul, .blog_n3, .blog_n3:hover span a:after, .blog_n3 span a:after ,.blog_n3:hover span a , .blog_n3 span a  .blog_n3 div:hover, #pie_de_pagina a, #pie_de_pagina a:hover, .contenedor_2 div div:hover span, .contenedor_11:hover span, .contenedor_12:hover span, .contenedor_13:hover span, #redes_sociales_right a:hover img,#menu_movil div:hover span li, #menu_vertical_desplegable:hover div, .lista_productos li:hover, #slides:hover a, #slides:hover .icon-large, .boton:hover, .seccion_1_menu a:hover,/* .blog_n3 :hover span,  #encabezado a:hover , */ #menu_vertical_desplegable li:hover, #menu_vertical_desplegable li:hover ul, .blog_n3_compra span, .blog_n3_compra div:after , .blog_n3_compra div:before, .blog_n3_compra:hover span, .blog_n3_compra:hover div:after , .blog_n3_compra:hover div:before {
      transition-property: all;
      transition-duration: 0.5s, 0.5s, 0.5s;
      transition-timing-function: linear, linear;
      transition-delay: 0s ,0.5s, 0.5s;}

#encabezado a, #encabezado a:hover {	  
	  transition-property: all;
      transition-duration: 0.5s, 0.5s, 0.5s;
      transition-timing-function: linear, linear;
      transition-delay: 0s ,0s, 0s;}

#blog {visibility:hidden;}	

#login {
	display: block;
    visibility: hidden;
	overflow:auto;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.8);
	}
	
.eliminar {
    position: relative;
    width: 100px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;}
.eliminar img{width:100%; height:auto;}	
.eliminar p, .cerrar {
    position: absolute;
    z-index: 1000;
    top: -20px;
    right: 0px;
    background: red;
    padding: 5px;
    z-index: 1000;
    color: white;
    font-size: 20;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    text-align: center;	
	}
	
	#div_adjunto {
    border: none;}
/**

	Tabla de colores y/o referencias 

	rgb(4,140,256) = azul claro <Parecido al logo>







*/


/*Fuentes */



a { text-decoration:none; color:rgb(0,0,0);}

a img{border:0px;}

h1,h2,h3 {  font-weight:700; font-family:montserrat, arial, calibri;  margin: 20px;  color: rgb(47,47,47);}

h1 {
    display: block;
    /* FLOAT: LEFT; */
    margin: 10px;
    WIDTH: 100%;
    z-index: 0px;
    font-size: 40px;
    line-height: 60px;
   
    padding: 10px;
   }
   


   

@media only screen and (min-width :0px) and (max-width :300px){ h1 {
    font-size: 30px;
    line-height: 40px;
    width: 100%;}}
@media only screen and (min-width :301px) and (max-width :400px){ h1 {
    font-size: 35px;
    line-height: 50px;
    width: 100%;}}
	
h2 { display:block;  font-size:30px; }
h2 a {margin:10px;}
h2 span {font-size:0.5em;}
h3 {font-size:30px;}

p {  font-size: 18px;
    line-height: 1.5em;
    letter-spacing: -1px;
    word-spacing: 0.25em;
    margin: 20px;
	width:95%;
    font-family:montserrat,arial;	
   }
 
@media only screen and (min-width :301px) and (max-width :400px){ p { width:90%}}
  
#encabezado,#menu_movil   {
    position: fixed;
    background: white;
    background-size: 100% 100%;
    border-bottom: 2px solid rgb(220,220,220);
    }
	
#encabezado {    Position: absolute;
    width: 100%;
    height: 70px;
    margin-top: 0px;
   /* background-image: url(../interfaz/encabezadofondo.png); */ 
    background-size:auto 100%;
    background-position:left top;
	background-repeat:no-repeat;
    z-index: 2;
}
#encabezado a  {
    width: auto;
    height: 60px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    line-height: 45px;
    margin: 5px;
    margin-top: 50px;
    padding: 5px;
    margin-top: -35px;
    padding-left: 5px;
    padding-right: 5px;
    color: gray;
    font-size: 12px;
    font-weight: 100;
    font-size: 13px;
    /* background: red; */
	
    }
	
 #encabezado tex  {
    background: black;
    color: white;
    position: relative;
    width: auto;
    /* background: red; */
    /* border: 1px solid red; */
    height: 40px;
    float: left;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 40px;
    font-size: 12px;} 
	
	
#encabezado a+a {      border-bottom: 0px solid rgb(174,61,202);
    border-radius: 0;
    }	
	
#encabezado a > span {display:none; visibility:hidden;
    display: none;
    visibility: hidden;
    /* z-index: -1000; */
    position: absolute;
    width: auto;
    min-width: 150px;
    min-height: 150px;
    height: auto;
    margin-top: 20px;
    color: white;
    text-align: left;
    padding: 10px;
    font-size: 12px;
    margin-left: -10px;
    background: #2b2b5d;}	
#encabezado a:hover > span {display:block; visibility:visible; }
#encabezado a:hover > span li{
    display: block;
    width: 100%;
    border-bottom: 1px white solid;
    min-height: 40px;
    line-height: 40px;
    height: auto;
    cursor: pointer; }
#encabezado a > span li:hover{background:rgba(0,0,0,0.2);}	
	
	
	
	
#encabezado a b{display:block;  transform:skew(0deg);}
#encabezado a img {
    margin-top: 20px;
    z-index: 500;
    height: 90px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    }
#encabezado img { position:abosulte; z-index:0; float:left; left:0px; height:0px; width:50%; height:auto;  }
#encabezado div {Position:absolute;  height:40px; font-size:12px; }
/*#encabezado div li{padding-left:10px; color:white; padding-right:10px; margin-top:10px; } borro porque se piza menu desplegable*/

#encabezado form {
    width: 50%;
    max-width: 250px;
    float: left;
    /* top: -50px; */
    margin-top: 5px;}

#encabezado input[type="text"]  {
    width: 80%;
    height: 30px;
    background: rgb(220,220,220);
    border: 0px;
    padding: 5px;}
#encabezado input[type="submit"]{
    width: 20%;
    height: 30px;
    background-image: url(../interfaz/iconos/lupa.png);
    border: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(0,0,0);
    float: right;
    color: transparent;}


.margin-top_f50 { margin-top:60px !important }


.encabezado > .link {float:right;  color: white;  margin-top:30px;       border: 0px solid rgb(255,238,170); border-radius: 10px; margin-top:30px;}
.encabezado > .linkLI {float:right;  color: white;  margin-top:30px;   background: rgb(0,120,250);    border: 0px solid rgb(255,238,170); border-radius: 10px; margin-top:30px;}	
/*#encabezado div li{padding-left:10px; color:white; padding-right:10px; margin-top:10px; } borro porque se piza menu desplegable*/

/* lo remplazo por la clace boton_a  

#encabezado a:hover {background:white; color:rgb(1,126,240); border-bottom:10px solid rgb(1,126,240); }  

*/

.encabezado {    z-index: 500;    height: 100%;    left: 0px;    right: 0px;    margin-top: 0px;    margin: auto;  }  

.encabezado_d {   
    visibility: visible;
    display: block;
    margin-top: 70px;
    background: rgb(97,97,97);
    width: 100%;
    /* top: 80px; */
    height: 40px !important;}
	
.encabezado_d a{
    height: 30px !important;
    line-height: 30px !important;
    margin-top: 0px !important;
    color: white !important;
    float: left;}
	
.encabezado_d div >.redes_sociales {
    float: left;
    margin: 0px !important;
    float: right;
    margin-top: -15px !important;
}
  
 datos {
    width: auto;
    min-width: 150px;
    float: right;
    /* background: red; */
    height: auto;
    padding: 5px;
    margin: 5px;
    margin-top: -35px;
    border: 1px solid rgb(147,147,147);

}

#menu_movil datos li{font-size:12px;}
#menu_movil datos { margin-top: 10px;}

.datos li{ margin:10px; color:white;}

@media only screen and (min-width :0px) and (max-width : 815px){#menu_movil datos { visibility:hidden; display:none;}}

 
  

.div_pie {min-height:300px; width:33% !important; background:white; border-bottom:1px solid gray;}
.div_pie div{    width: 80% !important;
    margin-left: 10%;
    text-align: center !important;}
	
.div_pie h1 {font-size:32px !important;   margin: 0px !important;  margin-top: 60px !important;}	
.div_pie p, .div_pie h1, .div_pie a {text-align:center !important;}	

.div_pie+.div_pie {background:rgb(47,47,47) !important; color:white !important;}
.div_pie+.div_pie h1, .div_pie+.div_pie p{color:white !important;}
.div_pie+.div_pie+.div_pie {background:white !important; color:rgb(47,47,47) !important; }
.div_pie+.div_pie+.div_pie h1, .div_pie+.div_pie+.div_pie p{color:rgb(47,47,47) !important;}

@media only screen and (min-width :0px) and (max-width : 900px)
{
.div_pie {width:100% !important;}

}

#pie_de_pagina {
    width: 100%;
    background: rgb(240,240,240);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    /* border-top: 1px solid gray;*/
	}
	
#pie_de_pagina a img{  
    Position: relative;
    max-width: 80%;
    top: 0px;
    margin-top: 0px;
    z-index: 2;
    margin-left: 10%;
    margin-right: 10%;}
	
#pie_de_pagina a {
    color: rgb(211,174,85);
    /* width: 50%; */
    /* font-size: 30px; */
    padding: 10px;
    text-align: center;
    width: 100%;
    display: none;}
#pie_de_pagina li a {padding:0px; margin:0px;}

#pie_de_pagina h1 { width: 100%;
    text-align: center;
    margin: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 35px;}
	
#pie_de_pagina h1 a img{ 
    Position: relative;
    max-width: 250px;
    top: 0px;
    margin-top: 0px;
    z-index: 2;
    margin-left: 10%;
    padding: 20px;
    margin-right: 10%;
    background: rgb(255,255,255,0.9);}
	
#pie_de_pagina span {width: 58%;    margin: auto;    display: block;}	


#pie_de_pagina div div {margin-top:10px; width:100%; float:left; }
#pie_de_pagina div > .left {width: calc((100%/5) - 10px);
    margin: 5px;
    background: rgba(0,0,0,0.1);
    min-height: 280px;
    padding-top: 30px;
Display:none; Visibility:hidden;	
}
	
@media only screen and (min-width : 1280px) and (max-width : 1690px)/*@media (max-width:1690px)*/{#pie_de_pagina div > .left  { width:calc((100% / 3) - 10px) !important;  }}
@media only screen and (min-width : 1282px) and (max-width : 1401px)/*@media (max-width:1690px)*/{#pie_de_pagina div > .left { width: calc((100% / 3) - 10px) !important; }}
@media only screen and (min-width : 1026px) and (max-width : 1281px)/*@media (max-width:1281px)*/{#pie_de_pagina div > .left  { width:calc((100% / 3) - 10px)!important; } }
@media only screen and (min-width : 901px) and (max-width : 1025px)/*@media (max-width:1025px)*/{#pie_de_pagina div > .left  { width: calc((100% / 2) - 10px) !important; } }
@media only screen and (min-width : 551px) and (max-width :900px){#pie_de_pagina div > .left  { width: calc((100% / 2) - 10px)  !important; } }



	
#pie_de_pagina div div li {
    width: 100%;
    /* height: 120px; */
    float: left;
    list-style: violet;
    line-height: 18px;
    color: white;
    font-size: 13px;
    text-align: center;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    /* margin-left: 20px; */
    /* font-style: italic; */
    font-family: montserrat,'Rubik', sans-serif;} 
#pie_de_pagina div div li p {color:white; margin-left:0px !important;}	
	

#pie_de_pagina h1, #pie_de_pagina p {color: black;
    text-align: left;
    font-size: 15px;
    margin: 5px;}
#pie_de_pagina h2 {color:red;}


/*.pie_de_pagina div {height:215px; }*/



@media only screen and (min-width :0px) and (max-width : 1300px){#pie_de_pagina div div {margin-top:10px; width:100%;} }	

	
.boton_contacto {
    font-weight: 700;
    color: white !important;
}	



.pie_de_pagina  {display:block; visibility:visible; }

.ancho_fijo_auto_pie {width:100% ; left:0px; right:0px; margin:auto; z-index:50;}
.ancla {   position: absolute;    margin-top: -200px;}

.datos_pie { 
    float: right;
    /* height: 100%; */
    width: 100%;
    /* margin-top: 4%; */
    background: rgb(81,131,207);
    color: white;
    font-size: 18px;
    text-align: left;}

.datos_pie div a img {width:80%; margin:10%; background:white; max-width:250px;}
	
.datos_pie div {    
	display: block;
    width: 25%;
    float: left;
    margin-top: 0;
    margin: 2%;
    MIN-WIDTH: 250PX;}	
	
.datos_pie li{    width: auto;
    padding: 5px;
    /* padding-left: 20px; */
    margin: 20px;
    font-weight: 700;
    color: white;}
	
	
.datos_pie span{
    width: 100%;
    padding: 20px;
    padding-left: 50px;
    text-align: center; }

.datos_pie p, .datos_pie h1, .datos_pie h2 {color:white;}




#menu_movil {z-index:100;  width:100%; height:70px;  } 
#menu_movil {display:none; visibility:hidden; }

#menu_movil a {color:white; padding:2px;}
#menu_movil img {Position:absolute; width:80%; height:100px; z-index:0; left:0px; top:0px; float:left;  z-index:5;}
#menu_movil a img {Position:relative; height:45px; z-index:2; left:10px; top:15px; float:left;  width:auto; z-index:5;}
#menu_movil a h1 {margin-left:90px; margin-top:25px; width:auto;}

	@media only screen and (min-width : 200px) and (max-width :320px) 
	{

 #menu_movil a img {
    Position: relative;
    height: 50px;
    z-index: 2;
    left: 10px;
    top: 10px;
    float: left;
    width: calc(80% - 40px) !important;
    z-index: 5;
 object-fit: contain;}}

	
#menu_movil div img {
    position: relative;
    BACKGROUND: rgb(0,90,0);
    width: 40px;
    height: auto;
    /* top: 0px; */
    /* bottom: 0px; */
    /* left: 0px; */
    /* right: 0px; */
    margin: 5px;
    z-index: 5;
    /* border: 1px solid rgb(254,215,0); */
    border-radius: 10px;}

#menu_movil span{

position:absolute; display: block;
right:0x; top:67px; z-index:2;
height:0px; width:65%;      
padding:8px; padding-bottom:0px; margin:0px;  
font-size:15px; text-align: center;  color:white;

}



#menu_movil center img{width:40px;}

#menu_movil span li{
display:hidden; visibility:hidden; list-style:none;
position:relative;
width:95%; height:0px;  
right:0px;  
background:rgba(167, 197,181, 0.9); 
float:right;  margin:0px; margin-top:5px; font-size:18px; color:white; 
border-bottom:1px solid white;  line-height:50px;
				}
#menu_movil span li ul{ display:none; visibility:hidden;}
#menu_movil span li ul li{ background:rgb(180,150,120);}				
				
				
				
#menu_movil span li a{ display:block; margin-top:10px; margin-right:10px;}
#menu_movil div {
    float: right;
    width: 50px;
    height: 50px;
    /* background: white; */
    margin: 10px;
    margin-left: 0px;
    font-size: 20px; }


#menu_movil div:hover span li{height:70px;  display:block; visibility:visible; right:75%;  }

#menu_movil div:focus {display:none; visibility:hidden;}


#sub_menu  {
    position: fixed;
    display: block;
    right: -100%;
    top: 90px;
    z-index: 100;
    height: 90%;
    width: 75%;
    max-width: 300px;
    overflow: auto;
    padding: 8px;
    padding-bottom: 0px;
    margin: 0px;
    font-size: 15px;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.8);
    overflow: auto;
    overflow-x: hidden;
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 1s, 1s, 1s;
    -webkit-transform-style: all;
}

#sub_menu li { 
    min-height: 60px;
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 0.5s, 0.5s, 0.5s;
    -webkit-transform-style: all;
    list-style: none;
    position: relative;
    width: 100%;
    min-height: 40px;
    min-height: 60px;
    float: left;
    /* background: white; */
    /* float: right; */
    margin: 1%;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    color: white;
    border-bottom: 1px solid red;
    line-height: 50px;
    margin-left: 1% !important;
    margin-top: 1% !important;
    text-transform: uppercase;
	}
#sub_menu span{ 
    float: right;
    height: 50px;
    width: 50px;
    margin: 5px;
    color: white;
    /* border: 1px solid white; */
    /* border-bottom: 2px solid rgb(155,155,155); */
    border-radius: 50px;
    margin-bottom: 10px;}
#sub_menu span img{   
    float: left;
    width: 40px;
    /* margin: -20px; */
    /* margin-top: -20px; */}

	
#sub_menu li a{   
    max-width: 90%;
    float: left;
    line-height: 20px;
    text-align: left;
    padding: 10px;
    margin: 10px;
	color:white;
	}
#sub_menu li span{ float:left; height:50px; width:50px; background:none; border:none; }
#sub_menu li span img{    
    height: 15px;
    height: 15px;
    width: 15px;
    margin: 15px;
    top: 10px;
    right: 0px;
    position: absolute;}

#sub_menu form {
    width: 100%;
    float: right;
    /* top: -50px; */
    /* margin-top: -30px; */}

	
#sub_menu input[type="text"]  {
    width: 80%;
    height: 50px;
    background: rgb(220,220,220);
    border: 0px;}
	
#sub_menu input[type="submit"]{
    width: 20%;
    height: 50px;
    background-image: url(../interfaz/iconos/lupa.png);
    border: 0px;
    background-size: cover;
    background-position: center;}

	
#sub_menu2, #sub_menu3, #sub_menu4, #sub_menu5  {

    height: auto;
    position: relative;
    display: none;
    right: 0x;
    /* top: 67px; */
    z-index: 2;
    /* height: 100%; */
    width: 100%;
    /* padding: 8px; */
    padding-bottom: 0px;
    margin: 0px;
    font-size: 15px;
    text-align: center;
    color: white;
    background:none;
    overflow: auto;
    overflow-x: hidden;}

#sub_menu2 li, #sub_menu3 li, #sub_menu4 li , #sub_menu5 li{       list-style: none;
    position: relative;
    width: 100%;
    height: 70px;
    float: left;
    background: rgb(220,220,220);
    float: left;
    margin: 0%;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 18px;
    color: black;
      border-bottom: 2px solid white;
    line-height: 50px;}
	
#sub_menu2 li a:hover {color:red; }	
	
.seccion_autoc_menu{clear:both; width:100%; height:130px;}	

#sub_menu_ingreso, #sub_menu_ingreso_datos   {
	position: absolute;
    display: block;
    right:-100%;
    top: 90px;
    z-index: 2;
    height:auto;	
    min-height: 550px;
	max-height:70%;
    width: 75%;
    max-width: 300px;
    overflow: auto;
    padding: 8px;
    padding-bottom: 0px;
    margin: 0px;
    font-size: 15px;
    text-align: center;
    color: white;
    background:white;
    overflow: auto;
    overflow-x: hidden;
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 1s, 1s, 1s;
    -webkit-transform-style: all;
	border-radius:25px;
	box-shadow:0px 0px 50px rgba(0,0,0,0.56);)
}
@media only screen and (min-height :0px) and (max-height :540px) 
	{
#sub_menu_ingreso, #sub_menu_ingreso_datos   {   min-height: 80%;    max-height: 80%; } }



#sub_menu_ingreso_datos  br+span {     height: 60% !important;
    max-height: 40% !important;    overflow: auto !important;    top: 160px;    background: none !important; }
	
@media only screen and (min-height :0px) and (min-height :540px) {
#sub_menu_ingreso_datos  br+span {   
    height: auto !important;
    max-height: 300px !important;
    overflow: hidden !important;
    top: 160px;
    background: none !important; } }
	
	

#sub_menu_ingreso  a , #sub_menu_ingreso_datos  a{WIDTH: 25PX;    height: 25px;    border-radius: 40px;    BACKGROUND: RGBA(200,0,104,0.5);    margin-top: 0px;}
#sub_menu_ingreso  a img, #sub_menu_ingreso_datos a img{    height: 25px;    width: auto;}
	
	

#sub_menu_ingreso  H1, #sub_menu_ingreso  H2 {    color: rgb(174,61,202);
    font-size: 25px;
    text-align: left;
    margin-left: 0px;
    WIDTH: 100%;
    padding: 0px;
    FLOAT: LEFT;
    TEXT-ALIGN: CENTER;
    line-height: 0px;
	}
#sub_menu_ingreso p {    color: darkgrey;
    display: block;
    float: left;
    text-align: center;
    font-weight: 100;
    width: 85%;}	
#sub_menu_ingreso  H2 { font-size:20px;}
	
	#sub_menu_ingreso input[type="submit"] { 
    width: 95%;
    height: 50px;
    float: left;
    padding: 5px;
    min-height: 40px;
    border: none;
    color: white;
    background: rgb(174,61,202);
    font-size: 18px;
    min-height: 40px;
    border-radius: 5px 5px 5px 5px;
    /* margin-left: 10%; */
    padding: 10px;
    text-align: center;
    display: block;
    text-transform: capitalize;
	
	}
	
	#sub_menu_ingreso input[type="text"] {   
    width: 100%;
    font-size: 14px;
    text-decoration: oblique;
    text-transform: capitalize;
    HEIGHT: 50PX;
    PADDING: 5px;
    /* margin: 1%; */
    border: 0px;
    /* background: rgb(255,255,252); */
    border: 2px solid rgb(220,220,220);}


	
	
#sub_menu_ingreso_datos  H1  {    
	color: rgb(174,61,202);
    font-size: 20px;
    text-align: left;
    margin-left: 0px;
    WIDTH: 100%;
    padding: 0px;
    FLOAT: LEFT;
    TEXT-ALIGN: CENTER;
    line-height: 0px;
    font-weight: 700;
    text-transform: uppercase; margin-top:40px;
	}
	
	#sub_menu_ingreso_datos  H2 {    color: rgb(174,61,202);
    color: rgb(174,61,202);
    font-size: 15px;
    text-align: left;
    margin-left: 0px;
    WIDTH: 100%;
    padding: 0px;
    FLOAT: LEFT;
    TEXT-ALIGN: CENTER;
    line-height: 0px;
    font-weight: 300;
    text-transform: uppercase;
	}

#sub_menu_ingreso_datos  H2 { font-size:16px;}
	
	
#sub_menu_ingreso_datos div {    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 1000;
    margin-top: -18px;
    left: -8px;
    background-size: cover;
    border-radius: 130px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#sub_menu_ingreso_datos p {text-align: left;
    font-size: 18px;
    background: 1px solid rgb(220, 220,220 );
    color: rgb(100, 100,100 );
    /* height: 55px; */
    /* margin: 12px; */}	

#sub_menu_ingreso_datos p b{font-size:12px;}
	
#sub_menu_ingreso_datos p img {float: left;
    /* border-bottom: 1px solid rgb(220, 220,220 ); */
    color: rgb(220, 220,220 );
    width: 50px;
    margin-right: 5px;
	}
	
#sub_menu_ingreso_datos span{
	background: rgb(230,230,230) !important;
    display: block;
    width: 110%;
    height: 80px;
    margin: 0px;
    margin-left: -10px;
    /* margin-top: -15px; */
    bottom: 0px;
    /* margin-bottom: -50px; */
    position: absolute;
    overflow: hidden;}

	
	#sub_menu_ingreso_datos input[type="submit"] {
    width: 48%;
    height: 100px;
    float: left;
    padding: 5px;
    min-height: 40px;
    border: none;
    color: gray;
    background: no-repeat;
    font-size: 18px;
    min-height: 40px;
    border-radius: 5px 5px 5px 5px;
    /* margin-left: 10%; */
    padding: 10px;
    text-align: center;
    display: block;
    text-transform: capitalize;
	}	
	
	
.seccion_autoc_menu{clear:both; width:100%; height:130px;}	



#redes_sociales {height:auto;}

#redes_sociales a img{     height: 40px;
    width: auto;
    margin-bottom: 15px;
    margin: 0px;
    margin-top: 10px;
     left: 0px;}
#redes_sociales li { width:auto; margin-bottom: 15px; float:left;}
#redes_sociales p{ font-size: 25px;
    color: white;
    line-height: 1em;
    letter-spacing: -1px;
    word-spacing: 0.25em;}
	
#redes_sociales_pie a img{ height:40px; width:auto; margin-bottom: 15px; padding:0px; }
#redes_sociales_pie p{display:block; width:auto; padding:5px; margin:5px; float:left; font-size: 18px;
    line-height: 1em;
    letter-spacing: -1px;
    word-spacing: 0.25em;}
	
#redes_sociales_right {	float: right;}
#redes_sociales_right, #redes_sociales_left {     
    /* height: 45px; */
    margin-right: 20px;
    margin-top: 5px;}	



#redes_sociales_left {    float: left;
    MARGIN: 20PX;
    width: 95%;
    background: rgb(110,163,46);}	


#redes_sociales_left a, #redes_sociales_right li { 
	display: block;
    width: auto;
    float: left;
    line-height: 30px;
    color: gray;
    height: 40px;
    text-align: center;
    margin-top: 0px;
    margin: 2px;
    padding: 2px 10px 0px 10px;
    border-left: 5px solid white;
    width: auto;
    /* list-style: circle; */
    /* border-left: 1px solid gray; */
    /* background: rgba(0,0,0,0.1); */
}	
#redes_sociales_right li img{ display:none; visibility:hidden;} 


#redes_sociales_right a { 
       display: block;
    width: auto;
    float: RIGHT;
    line-height: 30px;
    color: gray;
    height: 40px;
    text-align: center;
    margin-top: 0px;
    margin: 2px;
    padding: 2px 20px 0px 20px;
    width: auto;
    /* border-left: 1px solid gray; */
    /* background: rgba(0,0,0,0.1); */
	}


#redes_sociales_right a, #redes_sociales_left a {padding:0px;}
#redes_sociales_right a img, #redes_sociales_left a img{margin:0px;}

#redes_sociales_right a img { float: right;
    height: 20px;
    width: auto;
    margin-top: 8px;
    padding: 0px;}
#redes_sociales_left li a img{     float: left;
    height: 35px;
    width: auto;
    margin-top: 0px;
    padding: 0px;
    margin-top: -10px;
    padding: -10px;
    top: 0px;
}
#redes_sociales_right a:hover img, #redes_sociales_left a:hover img{ margin-top:-5px; border-bottom:5px solid rgb(0,0,0);}


#redes_sociales_left li {    width: auto;
    float: left;
    margin: 20px;
    color: white;
    margin-left: 0px;}
#redes_sociales_left li img {    z-index: 0;
    float: left;
    left: 0px;
    height: 0px;
    height: 60px;
    margin-right: 0px;
    margin-right: 5px;
    margin-top: -20px;
    /* height: auto; */}





#redes_sociales_right p{    font-size: 18px;
    line-height: 1em;
    letter-spacing: -1px;
    word-spacing: 0.25em;}
	
		

.redes_sociales {
    width: auto !important;
    float: left;
    margin: 10px !important;}

.redes_sociales a {
    display: block !important;
    width: auto;
    float: right;
    /* margin: 0px !important; */
    padding: 0px !important;
    margin-left: 0px !important;
    background: none !important;
    margin-right: 0px !important;
    margin-top: 10px !important;
}

.redes_sociales a img{ 
    width: 30px !important;
    height: auto !important;
    margin: 5px !important;
    margin-top: 10px !important;
    float: right;
    /* background: none !important; */}
	
	
.encabezado > .redes_sociales a {margin-top:-20px !important;}


.iconos {
    /* font-size: 15px; */
    line-height: 50px;
    min-height: 40px;
    /* margin-top: 0px; */
    margin-bottom: 10px;}
.iconos img{
    background: rgb(240,240,240);
    padding: 10px;
    width: 30px;
    border-radius: 25px;
    object-fit: scale-down;
    height: 30px;
    background-size: 50%;
    margin-right: 20px;
    margin-top: px;
    /* position: absolute; */
    float: left;}	
	
.lista_productos ul {Background:black; border:2px solid white; height:50px; margin-bottom:-10px;}
.lista_productos li {Background:red; border:1px solid white; height:40px; list-style:none; }
.lista_productos li, .lista_productos ul { color:white; font-size:20px;   font-style:bold;
									  letter-spacing: -1px; word-spacing:0.25em;}

								  
.lista_productos li:hover {Background:black; color:red; }

.menu_fondo{background:rgb(226,184,156);}

.menu_listado_horizontal h2 {display:BLOCK; float:left;  color: rgb(255,153,48);    padding: 0px;    margin: 8px;}
.menu_listado_horizontal li {    width: auto;
    height: auto;
    font-size: 13px;
    text-transform: uppercase;
    color: white;
    padding: 15px;
    margin: 5px;
    float: left;
    border: 1px solid rgb(220,220,220);
    background:black;
    border-radius: 5px;}	


	
									  
#desarrollo {
    background: black;
    padding-top: 10px;
    text-align: center;
    height: 50px;
    color: white;
    /* position: absolute; */}
#desarrollo a {color: white;    display: block;}
#desarrollo img{
    color: white;
    padding: 0px;
    height: 30px;} 


#menu_producto {
    position: relative;
    width: 80px;
    /* background: red; */
    /* border: 1px solid red; */
    height: 40px;
    float: left;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
   }



#menu_producto span{
    display: none;
    visibility: hidden;
    /* z-index: -1000; */
    position: absolute;
    width: auto;
    min-width: 130px;
    min-height: 150px;
    height: auto;
    margin-top: 40px;
    color: white;
    text-align: left;
    padding: 10px;
    font-size: 12px;
    margin-left: -10px;
    background: rgb(47,47,47);
    border-radius: 5px;}
	
	
	
#menu_producto:hover span, #menu_producto span li:hover list {display:block; visibility:visible;}

#menu_producto span li {
    height: 30px;
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid white;
    font-size: 14px;
	cursor:hand;}

, #menu_producto span li list{
    height: auto;
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid white;
    font-size: 14px;
	cursor:hand;}

#menu_producto span li list{
    display: none;
    visibility: hidden;
    /* z-index: -1000; */
    position: absolute;
    /* height: 200px; */
    width: 100px;
    min-width: 50px;
    /* height: 20px; */
    margin-top: -30px;
    argin-left: 130px;
    left: 140px;
    color: white;
    text-align: left;
    font-size: 12px;
    margin-left: -10px;
    background: rgb(97,97,97);}	

#menu_producto span li list a{ 
    display: block;
    position: relative;
    min-width: 100%;
    height: 31px !important;
    /* top: -30px; */
    margin-left: 0px!important;
    /* left: 140px; */
    padding: 0px;
    padding-left: 15px !important;
    color: white;
    text-align: left;
    /* padding: 0px; */
    font-size: 12px;
    margin-left: -10px;
    margin-top: -1px !important;
    background: rgb(97,97,97);
    /* border-bottom: 1px solid white; */
    border-top: 1px solid white;
    padding: 0px;
    margin: 0px;
    /* margin-top: -1px !important; */
    text-transform: capitalize;
}

#menu_producto span li list a:hover {background:rgb(47,47,47);}		


#menu_producto span li:hover {background:rgb(97,97,97);}
/* menu vertical listas */

/* menu vertical listas - DESPLEGABLE HACIA LA DERECHA */




#menu_vertical_desplegable_menu {
/* background: rgb(255,255,255);
    border-bottom: 2px solid rgb(250,209,46);*/
    color: rgb(47,47,47); 
     position: relative;
    float: right;
    width: auto;
    height: 80px;
    padding: 0;
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    /* border: 0; */
    text-align: left;
	 display: block;
    font-size: 18px;	
	text-transform: uppercase; /*Texto en mayuscula*/
    color: rgb(47,47,47);
    margin-top: 28px;
	margin-left:5px;
	margin-right:5px;
      padding: 0px;
}

#menu_vertical_desplegable_menu li a {	margin-top: 5px;     } /*ingreso porque piza clase en encabezado*/


#menu_vertical_desplegable_menu h1 { 

    display: block;
    width: 80%;
    font-size: 18px;	
	text-transform: uppercase; /*Texto en mayuscula*/
    color: rgb(47,47,47);
    margin-top: 10px;
    float: left;
    padding: 0px;
	}
	
	
#menu_vertical_desplegable_menu img {   
 position: absolute;
    /* margin-right: -50px; */
     /* margin-right: -50px; */
    margin-left: 95%;
    margin-top: -30px;
    height: 30%;
    width: AUTO;
    /* float: right; */
	
    /* float: right; */}
#menu_vertical_desplegable_menu:hover img {margin-top:-25px;  }	
	

#menu_vertical_desplegable_menu ul, li {list-style: none; margin: 0; padding: 0; }

#menu_vertical_desplegable_menu ul {  position: relative;    z-index: 597;    float: left; }
#menu_vertical_desplegable_menu div {visibility:hidden; margin-top:0px;  display:none;	}
#menu_vertical_desplegable_menu:hover div {position:absolute; margin-top:-5px; z-index:500;  width:100%; visibility:visible;  display:block; }	
	




#menu_vertical_desplegable_menu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;  padding:0px; 
}

#menu_vertical_desplegable_menu ul li.hover,
#menu_vertical_desplegable_menu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; 
}

#menu_vertical_desplegable_menu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%; 
}

#menu_vertical_desplegable_menu ul ul li {
  float: none; 
}

#menu_vertical_desplegable_menu ul li:hover > ul {
  visibility: visible; 
  -webkit-animation-name:anima; /*Animacion*/
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   -webkit-animation-delay: 0s;
}

#menu_vertical_desplegable_menu ul ul {
  top: 0;
  left: 100%; 
}

#menu_vertical_desplegable_menu ul li {
  float: none; 
}



#menu_vertical_desplegable_menu span, #menu_vertical_desplegable_menu a {
     display: inline-block;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-size: 14px; */
    text-decoration: none;
}

#menu_vertical_desplegable_menu:after, #menu_vertical_desplegable_menu ul:after {
    content: '';
    display: block;
    clear: both; 
}

#menu_vertical_desplegable_menu ul, #menu_vertical_desplegable_menu li { /*Ancho total de Ul al div*/
    width:100%; 
}
#menu_vertical_desplegable_menu li { /*primer LI */
    background: rgb(225,225,225);
	border-bottom:1px solid white;
}
#menu_vertical_desplegable_menu li:hover { /*Hover primer LI */
    background:rgb(255,255,255);
	border-bottom:1px solid rgb(155,155,155);;	
}

#menu_vertical_desplegable_menu li:hover a {
    color:rgb(47,47,47);
}
#menu_vertical_desplegable_menu a { /*color de letra*/
    color:rgb(47,47,47);
    line-height: 160%;
   /* padding: 11px 28px 11px 28px;
    width: 144px;  Bloqueo por redes sociales*/ 
}
#menu_vertical_desplegable_menu ul ul li {/*segundo li*/
	color:white;
    background: #666666; 
	border-bottom: 1px solid white;
}
#menu_vertical_desplegable_menu ul ul li:hover { /*segundo li hover*/
    background: rgb(155,155,155);
	color:white;
}
#menu_vertical_desplegable_menu ul ul li:hover a {
    color: rgb(47,47,47); 
}
#menu_vertical_desplegable_menu ul ul li ul li {
    background:#b7b7b7; 
}
#menu_vertical_desplegable_menu ul ul li ul li:hover {
    background:#dddddd; 
}
#menu_vertical_desplegable_menu .has-sub {
    position: relative; 
}

#menu_vertical_desplegable_menu .has-sub:after, #menu_vertical_desplegable_menu .has-sub > ul > .has-sub:hover:after {
       content: '';
    display: block;
    width: 20%;
    height: 50%;
	background:none;
	color:white;
	font-size:40px;
	margin:3px;
    position: absolute;
	padding-top:15px;
	padding-left:15px;
    right: 0;
    top: 0;
}
#menu_vertical_desplegable_menu .has-sub > ul > .has-sub:after, #menu_vertical_desplegable_menu .has-sub:hover:after {
    background-image: url(right.png); 
}

#menu_vertical_desplegable_menu ul ul li ul li:after {display:none; visibility:hidden;} /*Bloqueo el ultimo After*/
#menu_vertical_desplegable_menu ul ul li ul li a {width:100%;}







/* menu vertical listas */



#menu_vertical_desplegable {
background: rgb(255,255,255);
    border-bottom: 2px solid rgb(250,209,46);
    color: rgb(47,47,47);
    position: relative;
    float: left;
    width: 89%;
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
    /* border: 0; */	
	    text-align: left;
}

#menu_vertical_desplegable ul li{     width: 92%;
    padding: 10px;
    margin: 0.1%;
    line-height: 10px;} 
#menu_vertical_desplegable li a {	margin-top: 5px;     } /*ingreso porque piza clase en encabezado*/


#menu_vertical_desplegable h1 { 

    display: block;
    width: 80%;
    font-size: 18px;	
	text-transform: uppercase; /*Texto en mayuscula*/
    color: rgb(47,47,47);
    margin-top: 10px;
    float: left;
    padding: 0px;}
#menu_vertical_desplegable h1 img {   
 position: absolute;
    /* margin-right: -50px; */
    margin-left: 87%;
    margin-top: -5px;
    height: 70%;
    width: AUTO;
	
    /* float: right; */}

#menu_vertical_desplegable ul, li {list-style: none; margin: 0; padding: 0; }

#menu_vertical_desplegable ul {  position: relative;    z-index: 597;    float: left; }
#menu_vertical_desplegable div {visibility:hidden; margin-top:0px;  display:none;	}
#menu_vertical_desplegable:hover div {position:absolute; margin-top:50px; z-index:500;  width:100%; visibility:visible;  display:block; }	





#menu_vertical_desplegable ul li.hover,
#menu_vertical_desplegable ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; 
}

#menu_vertical_desplegable ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%; 
}

#menu_vertical_desplegable ul ul li {
  float: none; 
}

#menu_vertical_desplegable ul li:hover > ul {
  visibility: visible; 
  -webkit-animation-name:anima; /*Animacion*/
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   -webkit-animation-delay: 0s;
}

#menu_vertical_desplegable ul ul {
  top: 0;
  left: 100%; 
}

#menu_vertical_desplegable ul li {
  float: none; 
}



#menu_vertical_desplegable span, #menu_vertical_desplegable a {
    display: inline-block;
    font-family:montserrat, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none; 
}

#menu_vertical_desplegable:after, #menu_vertical_desplegable ul:after {
    content: '';
    display: block;
    clear: both; 
}

#menu_vertical_desplegable ul, #menu_vertical_desplegable li { /*Ancho total de Ul al div*/
    width:100%; 
}
#menu_vertical_desplegable li { /*primer LI */
    background: rgb(225,225,225);
	border-bottom:1px solid white;
}
#menu_vertical_desplegable li:hover { /*Hover primer LI */
    background:rgb(255,255,255);
	border-bottom:1px solid rgb(155,155,155);;	
}

#menu_vertical_desplegable li:hover a {
    color:rgb(47,47,47);
}
#menu_vertical_desplegable a { /*color de letra*/
    color:rgb(47,47,47);
    line-height: 160%;
   /* padding: 11px 28px 11px 28px;
    width: 144px;  Bloqueo por redes sociales*/ 
}
#menu_vertical_desplegable ul ul li {/*segundo li*/
	color:white;
    background: #666666; 
	border-bottom: 1px solid white;
}
#menu_vertical_desplegable ul ul li:hover { /*segundo li hover*/
    background: rgb(155,155,155);
	color:white;
}
#menu_vertical_desplegable ul ul li:hover a {
    color: rgb(47,47,47); 
}
#menu_vertical_desplegable ul ul li ul li {
    background:#b7b7b7; 
}
#menu_vertical_desplegable ul ul li ul li:hover {
    background:#dddddd; 
}
#menu_vertical_desplegable .has-sub {
    position: relative; 
}

#menu_vertical_desplegable .has-sub:after, #menu_vertical_desplegable .has-sub > ul > .has-sub:hover:after {
       content: '';
    display: block;
    width: 20%;
    height: 50%;
	background:none;
	color:white;
	font-size:40px;
	margin:3px;
    position: absolute;
	padding-top:15px;
	padding-left:15px;
    right: 0;
    top: 0;
}
#menu_vertical_desplegable .has-sub > ul > .has-sub:after, #menu_vertical_desplegable .has-sub:hover:after {
    background-image: url(right.png); 
}

#menu_vertical_desplegable ul ul li ul li:after {display:none; visibility:hidden;} /*Bloqueo el ultimo After*/
#menu_vertical_desplegable ul ul li ul li a {width:100%;}



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

#contenedor {    width: 100%;
    height: 100%;
    top: 0px;
    overflow: SCROLL;
    overflow-x: hidden;
    position: relative;
    background-repeat: no-repeat;
	background:#fafafa;
    z-index: 1;
    background-size: cover;
    /* background-position: -50% center; */}

.seccion_auto {overflow:hidden; width:100%; margin:0px; 
	  background-size:cover ;
    background-repeat: no-repeat;
    background-position: center center;
	 /*  min-height: 100%;  aGREGUE EN JOSANA*/
	}

.seccion_autoc{    clear: both;
    width: 100%;
    height: 1px;
    color: white;
    width: 70%;
    margin: 0px !important;
    padding: 0px !important; }	

.absolute {position:absolute;}
.relative {position:relative;}
.center {left:44%; margin-left:auto; margin-right:auto;}

.left {float:left;} /*Actualizado*/
.right, .right_a  {float:right !important;}



.titulo {   height: auto !important;    min-height: 0px !important;    margin: 0px;    margin-bottom: -10px;}
.titulo hr {display:none; visibility:hidden;}




.diseno_formulario  {   
    position: relative;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    z-index: -2;}
	
	
.diseno_formulario, .diseno_2 {
	position: unset;
    min-height:40%;
    width: 100%;
    /* display: block; */
    top: 0px;
    z-index: 500;
	}
   
/*.diseno_1 {margin-top:100px;}*/

.diseno_1 {   
    position: relative;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    z-index: -2;
    min-height: 70%;
	} 
  
.diseno_1 div span {color:rgb(47,47,47); width:70%; margin:0%;}
.diseno_1 div span p{
    margin: 0px;
    margin-left: 20px; }

.diseno_1 div > .titulo {TEXT-ALIGN:CENTER; COLOR:orange; FONT-WEIGHT:700; /* padding:10px;  margin-top:50px;*/ }
  
  
.diseno_2 { position: unset; background-blend-mode: overlay; background-size:cover; background-position: center;  }
.diseno_2 div span {width:100%; margin:0%;}

.diseno_2 div > .titulo {background: none;  }
.diseno_2 div > .titulo h1 {   text-align: center;
    color:none;
    /* padding: 10px; */
    padding: 0px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%; }
.diseno_2 div span p {float: left; }
.diseno_2 span  h1 {padding:5px; }

   
.diseno_3  { 
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position:center;
    MIN-HEIGHT: 500PX;
    z-index:0;}
	

	 
.diseno_3 div > .titulo {background: rgb(47,47,47);  }
.diseno_3 div > .titulo h1 {   text-align: center;
    color: white;
    /* padding: 10px; */
    padding: 0px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%; }

.diseno_3 div div span {
    display: block;
    width: 100%;
    BACKGROUND: rgba(153,0,0,0.7);
    margin-top: 80px;
    color: white !important; }
.diseno_3 span  h1 { padding:5px; }
.diseno_3 span p {}

.diseno_3 span div {
    float: left;
    width: 90%;
    /* margin: 5%; */
    margin-top: 0px;
    /* min-height: 350px; */
	}


	


@media only screen and (min-width :0px) and (max-width : 960px){.diseno_3 DIV div, .diseno_3 span div{width:90% !important;} }

@media only screen and (min-width :0px) and (max-width : 372px){.diseno_3 {   MARGIN-TOP: -20PX;}}
@media only screen and (min-width :373px) and (max-width : 440px){.diseno_3 {   MARGIN-TOP: -25PX;}}
@media only screen and (min-width :441px) and (max-width : 600px){.diseno_3 {   MARGIN-TOP: -30PX;}}
@media only screen and (min-width :601px) and (max-width : 790px){.diseno_3 {   MARGIN-TOP: -35PX;}}
@media only screen and (min-width :791px) and (max-width : 1320px){.diseno_3 {   MARGIN-TOP: -40PX;}}
.diseno_4 {
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: RIGHT TOP;
    MARGIN-TOP: -500PX;
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: RIGHT TOP;
        MARGIN-TOP: 0PX;
  
}
	
.diseno_4 span {
	 color:white;  width:100%;
     }
	 
.diseno_4 span iframe, .diseno_4 span blockquote  {width:28% !important; margin:2% !important; float:left; } 
	 
	 
.diseno_4 div > .titulo { }
.diseno_4 div > .titulo h1 {  
    text-align: left;
    color: gray;
    /* padding: 10px; */
    padding: 0px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%; }


.diseno_4 span  h1 {color: rgb(112,48,160); padding:5px; }
.diseno_4 span p {color: rgb(112,48,160);}
	
.diseno_4:after {    width: 100%;    height: 100px;    display: block;    content: "";} /*-------- Separacion en Rombo: altura bottom --------*/
	
@media only screen and (min-width :600px) and (max-width : 960px){.diseno_4 span iframe, .diseno_4 span blockquote {width:45% !important;} }	
@media only screen and (min-width :0px) and (max-width : 599px){.diseno_4 span iframe, .diseno_4 span blockquote, audio {width:90% !important;} }	

.diseno_5 {
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: RIGHT TOP;
        MIN-HEIGHT:500PX;
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: RIGHT TOP;
        MARGIN-TOP: 0PX;
}

	 
	 
.diseno_5 div > .titulo h1 { 
    text-align: left;
    color: gray;
    /* padding: 10px; */
    padding: 0px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%; }


.diseno_7{ /* CLASE DESIGNADA PARA MOSTRAR FORMULARIO DE CONTACTO */
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    MARGIN-TOP:0PX;
    MIN-HEIGHT:500PX;
    MARGIN-TOP: 0PX;
}
	 
	 
.diseno_7 div > .titulo h1 { text-align: center;    color:ORANGE;    /* padding: 10px; */    padding: 0px;    margin-top: 40px;    margin-bottom: 40px;    width: 90%; }
		
.diseno_7 div { margin-top: 50px;}
.diseno_7 div span div { background:white; margin:20px; padding:20px; margin-top: 50px;}

.diseno_7 div span div li {
    margin-top: 5px !important;
    font-size: 15px;    font-weight: 100;}
	
.diseno_7 div span div li b {    font-size: 16px;    color: rgb(42,86,127); }
		

.diseno_8 {
    position: RELATIVE;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    MARGIN-TOP:0PX;
    MIN-HEIGHT:500PX;
    MARGIN-TOP: 0PX;
}
		
.diseno_8 span div {color:orange;}	
	

.iframe_redes {
      position: relative;
    /* left: 0px; */
    float: left;
    width: 33.2%;
    height: auto;
    min-height: 700px;
    margin: 0px;}
.iframe_redes iframe,.iframe_redes blockquote, .iframe_redes a{
      width: 350px !important;
    max-width: 90% !important;
    margin: 5%;
    position: absolute !important;
    top: 50px;
    left: 0px;
    right: 0px;
    margin: auto !important;}

@media only screen and (min-width : 1280px) and (max-width : 1690px)/*@media (max-width:1690px)*/{.iframe_redes { width: 33.3%  !important;  }}
@media only screen and (min-width : 1282px) and (max-width : 1401px)/*@media (max-width:1690px)*/{.iframe_redes { width: 33.3%  !important; }}
@media only screen and (min-width : 1026px) and (max-width : 1281px)/*@media (max-width:1281px)*/{.iframe_redes { width: 33.3%  !important; } }
@media only screen and (min-width : 901px) and (max-width : 1025px)/*@media (max-width:1025px)*/{.iframe_redes { width: 33.3%  !important; } }
@media only screen and (min-width : 551px) and (max-width :900px){.iframe_redes{ width: 50%  !important; } }
@media only screen and (min-width :0px) and (max-width :550px){.iframe_redes { width:100% !important; } }


.diseno_formulario span {color:white;  width:70%; margin:5%; }
.diseno_formulario span {
    color: white;
    /* margin: 5%; */
    width: auto;
    /* margin-top: -1%; */
    margin-left: 1%;
    float: left; max-width: 45%;}  

.diseno_formulario span  h1, .diseno_formulario span  h2 {color:white; padding:5px; }

.diseno_formulario span  h2 { font-size: 50px;      margin-bottom: 0px;}
.diseno_formulario span  h1 {  font-size: 80px;   margin-top: 0px; }
.diseno_formulario span p {color:white;}
.diseno_formulario span li {color:rgb(112,48,160);}

@media only screen and (min-width :0px) and (max-width : 599px){.diseno_formulario span{width:90% !important; max-width:90%; margin:4%; } }	




 
.galeria {    position: relative;    overflow: hidden;   } 
.galeria img {   
    position: relative;
    margin-top: 0px;
    top: 0px;
    bottom: 0px;
    padding:0px;	
    display: inline;
    max-width: 100% !important;
    object-fit: contain !important;
    background-position: top !important;
    width: 100% !important;
    height: 500px !important;
    background: rgb(240,240,240);}
	
/*#galeria_departamento img {height: 300px !important;}*/
	
#galeria_12 {   
    position: absolute;
    overflow: hidden;
    MAX-HEIGHT: 100%;}

 
 
 .min-height_galeria {
    width: 100%;
    min-height: 70%;
    height: auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }

/*------------------------------- Formulario, input dentro de esta categoria 	------------------------------------------*/	

*::-webkit-input-placeholder {    /* Google Chrome y Safari */    color: gray;} *:-moz-placeholder {    /* Firefox anterior a 19 */    color:gray;}
*::-moz-placeholder {    /* Firefox 19 y superior */    color: gray;} *:-ms-input-placeholder {    /* Internet Explorer 10 y superior */    color:gray;}



.formulario_index {
    /* position: relative; */
    margin-top: 0px !important;
    margin-bottom: 50px;
    /* right: 10%; */
    z-index: 2000;
    height: auto;
    /* min-height: 800px; */
    width: 350px;
    width: 90%;
    /* float: left; */
    /* margin-right: 5%; */
    /* margin: 15px; */}
	
.formulario_index span{
    width: calc((100% / 2) - 2%) !important;
    float: left;
    margin: 1% !important;
}


.formulario_index_horizontal, .formulario_index_horizontal2   { width:100%; height: auto; width: 20%;}


.formulario_index form {
    width: 90%;
    height: auto;
  /*  min-height: 570px;*/
    padding: 5%;
    margin: 5%;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    border: 2px solid rgb(180,180,180);
    /* box-shadow: 0px 10px 30px rgb(180,180,180); */
}



.formulario_index form h1 {Color:black; 
    Color: black;
    font-size: 30px;
    padding: 0px;
    margin: 0px;}

.formulario_index form p{     /* color: rgb(174,61,202); */
    /* font-size: 25px; */
    text-align: left;
    margin-left: 0px; }
.formulario_index form p b{font-size:30px; }

.formulario_index form input[type="text"], .formulario_index form input[type="email"] { 
    width: 97.5%;
    font-size: 14px;
    text-decoration: oblique;
    HEIGHT: 40PX;
    PADDING: 5px;
    margin: 1%;
    border: 1px;
    background: NONE;
    border-bottom: 2px solid rgb(220,220,220);
    color: black;}
	
	
	
	
	
.formulario_index input[type="submit"], .formulario_index_horizontal input[type="submit"], .formulario_index_horizontal2 input[type="submit"] {     
    width: 83%;
    height: 8%;
    margin-left: 8%;
    margin-bottom: 20px;
    /* right: 0px; */
    /* margin: auto; */
    padding: 5px;
    min-height: 40px;
    border: none;
    color: white;
    background: black;
    font-size: 14px;
    min-height: 40px;
    border-radius: 5px 5px 5px 5px;
    /* margin-left: 10%; */
    padding: 10px;
    text-align: center;
    display: block;
    text-transform: capitalize;	
	}
	
 .formulario_index select , .formulario_index_horizontal select { 
    height: 50px;
    /* font-size: 20px; */
    float: left;
    margin-bottom: 10%;
    margin-left: 0px;
    padding: 5px;
    min-height: 40px;
    border: 0px;
    border-bottom: 2px solid rgb(220,220,220);
    /* color: rgb(200,200,200); */
    /* border-radius: 5PX; */
    background: none;
    color: GRAY;}
	
	
.formulario_index input[type="radio"] {HEIGHT: 30PX;
    WIDTH: 30PX;
    FLOAT: LEFT;}
	
.formulario_index_horizontal2 select, .formulario_index_horizontal select {width:100%; float:left;}	 .formulario_index select { width:100%; }


.formulario_index textarea { 
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    background: none;
    color: black;}
	
.formulario_index label  {
    width: 80%;
    margin: 1%;
    color: gray;
    font-size: 12px;
    height: 5px;
    display: block;
    float: left;
    line-height: 30px;
    font-weight: 700;}
.formulario_index_horizontal label, .formulario_index_horizontal2 label {    width: 23.5%;    margin: 1%;    color: rgb(211,174,85);    font-size: 12px;    display: block;    float: left; }	
.formulario_index_horizontal2 label h1{color:white;     text-transform: uppercase;    font-family:montserrat, sans-serif;    font-weight: 600;  font-family:montserrat, sans-serif; } 
.formulario_index_horizontal2 select {
    height: 50px;
    /* font-size: 20px; */
    float: left;
    /* margin-bottom: 10%; */
    margin-left: 0px;
    padding: 5px;
    min-height: 40px;
    border: 0px;
    border-bottom: 2px solid rgb(174,61,202);
    /* color: rgb(200,200,200); */
    border-radius: 5PX;
}

/* adaptacion movil al final de la hoja */


/* Estilo de File */
.inputfile {
    width: 100%;
    height: 200px;
    opacity: 0;
    /* overflow: hidden; */
    position: relative;
    z-index: 1000;
    /* background: transparent; */
    /* border: 2px solid blue; */
}

.inputfile + label { max-width: 80%;
    height: 100px;
    font-size: 32px;
    font-weight: 700;
    text-overflow: ellipsis;
    background: rgba(100,100,100,0.1);
    color: white;
    margin: 5%;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* position: absolute; */
    margin-top: -150px;
    text-align: center;
    line-height: 80px;
    border: 3px dashed rgb(200,200,200);
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.iborrainputfile {
	font-size:32px; 
	font-weight:normal;
}


	
.oculto, .escondido_form {visibility:hidden; display:none;}
/* .oculto_movil se activa segun proporciones de Pantalla, ver @media */
.ver_movil {visibility:hidden; display:none;}
 
	


 input[type="radio"]:checked ~ .check { border: 5px solid #0DFF92;}
 input[type="radio"]:checked ~ .check::before{ background: #0DFF92;}
 input[type="radio"]:checked ~ label{ color: #0DFF92;}

 
/*---------------Clases por diseño ----------*/

.ancho_fijo{position: absolute;}
.ancho_fijo, .ancho_fijo_auto { width:80% ; left:0px; right:0px; margin:auto; z-index:50;}
.ancho_fijo_auto_pie {width:80% ; left:0px; right:0px; margin:auto; z-index:50;}

/*-------------------- GALERIA PARAMETROS SI MUESTRA O NO DESCRIPCION ---------------------*/

.galeria_sin_descripcion span {visibility:hidden; display:none; } /*oculto descripcion */


/*------------------glaeria_clientes------------------*/
.galeria_clientes {
    margin: 20px;
    POSITION: RELATIVE;
    HEIGHT: 200px !important;
    MIN-HEIGHT: 360PX;
    TEXT-ALIGN: LEFT;}
.galeria_clientes span{  
    visibility: visible;
    display: block;
    height: auto;
    /* overflow: auto; */
    text-overflow: ellipsis;
    /* POSITION: ABSOLUTE; */
    TOP: -20PX;
}
	
.galeria_clientes span h3 {    
    color: RGB(220,220,220) !important;
    text-align: LEFT;
    border-bottom: 1px solid ORANGE;
    /* padding: 10px; */
    padding-bottom: 10px;
    text-transform: uppercase;
    FONT-WEIGHT: 100;
    LEFT: 0PX;}	
	
.galeria_clientes span p {
    color: GRAY!important;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    TEXT-ALIGN: LEFT;}	
	
.galeria_clientes img {
    display: block !important;
    width: 80% !important;
    object-fit: contain !important;
    /* MARGIN: 15%; */
    TOP: 0PX;
    /* LEFT: 20PX; */}

	

	
@media only screen and (min-width :0px) and (max-width : 900px){.galeria_clientes {margin:10px;} .galeria_clientes span h3 {font-size:15px;} }	
@media only screen and (min-width :900px) and (max-width : 1300px){.galeria_clientes {margin:10px;} .galeria_clientes span h3 {font-size:18px;} }	
	
/*------------------glaeria_clientes------------------*/
.galeria_productos {
    margin: 19px;
    POSITION: RELATIVE;    
    HEIGHT: 500px !important;
    MIN-HEIGHT: 360PX !important;
    TEXT-ALIGN: LEFT;
    border: 1px solid rgb(220,220,220);
    border-radius: 100px;}
	
.galeria_productos span{
    visibility: visible;
    display: block;
    width: 100%;
    height: 41%;
    /* overflow: auto; */
    text-overflow: ellipsis;
    POSITION: absolute;
    bottom: 0;
    background: white;
    border-radius: 0px 0px 20px 20px;
}
	
.galeria_productos span h3 {
    color: gray;
    font-size: 20px;
    text-align: LEFT;
    /* border-bottom: 1px solid ORANGE; */
    /* padding: 10px; */
    padding-bottom: 10px;
    text-transform: uppercase;
    FONT-WEIGHT: 700;
    LEFT: 0PX;}	
	
.galeria_productos span p {
    color: GRAY!important;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    TEXT-ALIGN: LEFT;}	
	
.galeria_productos img {
    display: block !important;
    width: 100% !important;
    height: 60%;
    object-fit: cover;
    /* MARGIN: 15%; */
    TOP: 0PX;
    /* LEFT: 20PX; */
    background-position: top center;
    border-radius: 20px 20px 20px 20px;}

	

	
@media only screen and (min-width :0px) and (max-width : 900px){.galeria_productos {margin:10px;} .galeria_clientes span h3 {font-size:15px;} }	
@media only screen and (min-width :900px) and (max-width : 1300px){.galeria_productos {margin:10px;} .galeria_clientes span h3 {font-size:18px;} }	
	
/*----------------------Adaptacion movil para todas las galerias ----------------------*/



@media only screen and (max-width: 800px) and (min-width: 0px) { 
	/*.diseno_1 div div si no no funciona la galeria */ .diseno_2 div div, .diseno_3 div div, .diseno_4 div div, .diseno_6 div div, .diseno_7 div div, .diseno_7 div span, .diseno_8 div div {width: 95% !important; 
      margin-left: 2.5%;} 
	.galeria_clientes { MIN-HEIGHT: 180PX;} 	
	}
	
/*----------------------glaeria_principal texto flotante ----------------------*/	

.galeria_principal {position:relative; /* margin-top: 100px;*/ }
.galeria_principal span{
    visibility: visible;
    display: block;
    height: auto;
    /* overflow: auto; */
    text-overflow: ellipsis;
    position: absolute;
    top: 10%;
    left: 10%;
    /* background: red; */
    width: 650px !important;
    height: 150px !important;
    z-index: 1500;
    margin: 0px !important;
    text-align: left;  
	}
	
.galeria_principal span h3 {
    color: white !important;
    text-align: center;
    /* border-bottom: 1px solid white; */
    padding: 10px;
    padding-bottom: 10px;
    text-transform: inherit;
    FONT-WEIGHT: 600;
    /* height: 80px; */
    margin: 10px;
    text-align: left;
    font-size: 45px;
    font-style: italic}	
	
.galeria_principal span p {
    color: white !important;
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    margin: 10px;
    background: rgb(3,73,145);
    padding: 10px;}	

	
@media only screen and (min-width :0px) and (max-width : 354px)
{	
.galeria_principal {	 display: none;
    float: left;
    min-height: 1px;
    background: rgb(3,73,145); height: 450px; }
}	
@media only screen and (min-width :355px) and (max-width : 605px)
{	
.galeria_principal {	    display: none;
    float: left;
   /* height: 390px;*/
    min-height: 1px;
   /* background: rgb(3,73,145); */}
}	


/*------------------- botones ----------------------*/
.boton_whatssapp {
    width: 80%;
    height: auto;
    /* margin: auto; */
    background-color: #1ebea5;
    font-weight: 700;
    color: white;
    display: flow-root;
    padding: 10px;
    /* margin: 4%; */
    background-blend-mode: overlay;
    /* float: left; */
    /* height: 30px; */
    background-color: none;
    background-image: url(../interfaz/iconos/fondo-whatsapp.png);
    background-position: -0.5px center;
    background-size: cover;
    border-radius: 10px;
    position: relative;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
}

.boton_whatssapp:before {
    display: block;
    width: 60px;
    height: 60px;
    content: "";
    /* background: blue; */
    /* text-align: center; */
    margin: auto;
    margin-bottom: 10px;
    background-image: url(../interfaz/iconos/Whatsapp-Icon-Logo.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
	
.boton_2 {
    padding: 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    border-radius: 10px;}	
/*----------------------Articulos--------------------*/



pie_carro_n3 {Display:none; visibility:hidden; width:100%; height:70px; position:absolute; bottom:0px; left:0px; background:rgb(240,240,240);}


pie_carro_n3 a{
    position: relative !important;
    left: 0px !important;
    right: 100% !important;
    bottom: 0px !important;
    margin: 5px !important;
    width: 100px !important;
    height: 50px !important;
    background: rgb(87,166,149);
    color: white !important;
    border-radius: 5px !important;
    border: 2px double white !important;
}

pie_carro_n3 input{
    width: 100px;
    height: 80%;
    margin: 2.5%;
    float: right;
    text-align: center;
    font-size: 20px;
    color: gray;
}




.boton_carrito {
    /* position: absolute !important; */
    left: 75% !important;
    right: 80% !important;
    /* bottom: 5px !important; */
    width: 50px !important;
    height: 50px !important;
    background: rgb(87,166,149);
    color: white !important;
    border: 5px double white !important;
}

.boton_carrito_text {
    padding: 5px;
    height: 50px !important;
    display: block;
    width: 100% !important;
    border-radius: 50px;
    text-align: center;
line-height: 50px;}



/*----------------------Articulos--------------------*/




.blog { 
    width: calc((100% / 4) - 2% - 2px) !important;
    min-height: 720px;
    margin: 1%;
    margin-top: 80px;
    margin-bottom: 20px;
    float: left;
    position: relative;
    /* margin: 0%; */
    padding: 0px;
    background: white;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition-property: all;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, linear;
    transition-delay: 0s ,0s, 0s;
    border: 1px solid rgb(220,220,220);
    border-radius: 5px;
    overflow: auto;

	}




.blog:hover {   
    transform: scale(1.05);
    transition-property: all;
    transition: all .2s ease .2s;
    box-shadow: 0px 10px 10px rgb(220,220,220);
	 }

/*.blog_n3 span a:hover {   
    transform: scale(0.8);
    transition-property: all;
    transition: all .2s ease .2s;
    box-shadow: 0px 10px 10px rgb(220,220,220);
	 }	*/ 

.blog div {
    height: 65%;
    width: 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
	   }
	   
.blog div img {
    height: 350px;
    width: 100%;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
	   }	   
	   
	   
.blog h1, .blog p, .blog_n3_compra h1, .blog_n3_compra p  { margin-top:15%; width:90%; color:rgb(229,255,248); text-align:center; font-size:32px;}



.blog span {
    width: 98%;
    min-height: 360px;
    float: left;
    padding: 1%;
    /* margin: 0.5%; */
    /* font-size: 32px; */
    z-index: 500;
    bottom: 50px;
    left: 0px;
    /* color: red; */
    background: white;
    /* border-bottom: 3px solid rgb(51,156,255); */
    position: absolute;
    margin-bottom: 0px;
    overflow: hidden;}


.blog span h2, .blog_n3_compra span h2 {
    /*   font-family: 'Fjalla One', sans-serif; */
    color: rgb(55,113,200);
    /* padding-top: 20px; */
    /* padding-bottom: 15px; */
    Display: inline-block;
    font-size: 20px;
    /* width: 80%; */
    /* visibility: hidden; */
    /* position: absolute; */
    text-transform: uppercase;
    text-align: center;
    margin: 10px;
    margin-top: 5px;
    /* bottom: 0px; */
    /* text-decoration: underline; */
    /* text-decoration-style: initial; */
    /* border-bottom: double palevioletred; */
}	

.blog span h2 img, .blog span p img  {   float: left;
    display: block;
    position: relative;
    max-height: 40px;
    width: 40px;
    margin: 3px;
    margin-top: -5px;
    margin-left: 0px;
    /* background: red; */
    /* z-index: 1000; */}    
	
.blog span span p {
	font-size:18px; width:90%; margin-left:5%; padding:2px; 
	color:white; visibility:hidden; display:block;  
	position: absolute; margin-bottom:0px; bottom:0px; 
	}
	
	
.blog span p {     
    font-size: 15px;
    width: 90%;
    height: 55% !important;
    text-align: left;
    /* margin-left: 5%; */
    margin: 0px;
    padding-left: 10px;
    /* padding: 2px; */
    color: white;
    visibility: visibility;
    display: block;
    /* position: relative; */
    /* margin-bottom: 0px; */
    /* bottom: 0px; */
    color: gray;
    overflow: hidden;
    line-height: 25px;
    text-align: left;
    font-family: montserrat;
	}
	
.blog span h3 {
    text-align: left;
    font-weight: 100;
    
    margin: 20px;
    color: gray;
    font-size: 20px;
    margin-top: 40px;
}
	
.blog li {  /* list-style: none; */
    margin: 10;
    /* padding: 10; */
    font-size: 15px; }

 .blog a {    /* position: absolute; */
    width: 150px;
    height: 40px;
    /* padding: 10px; */
    font-size: 15px;
    position: absolute !important;
    display: block;
    /* line-height: 150%; */
    /* text-align: LEFT; */
    /* padding: 5px; */
    z-index: 500;
    LEFT: 0px;
    right: 20px;
    bottom: 20px;
    margin: auto;
    /* margin-left: 5%; */
    color: white;
    background: rgb(87,166,149);
    border: 5px double rgb(87,166,149);
    /* border-bottom: 0px; */
    border-radius: 10px 10px;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
}

.blog span a {position:relative;}
	   
.blog a img{width: 95%; margin: 2.5%;}	   
	   

.blog span span {          
	font-size: 22px;
    bottom: 0px;
    width: 60%;
    color: rgb(174,61,202);
    height: 50px;
    padding: 10px;
    font-size: 18px;
    position: absolute;
    text-align: left;
    padding: 5px;
    z-index: 500;
    left: 0px;
    bottom: -5px;
    margin: auto;
    margin-left: 5%;
    /* background: red; */}	
	
.blog span span b {  font-size:18px; margin-left:1%;}	

.blog tencab {
    display: block;
    width: auto;
    margin: 1%;
    padding: 5px;
    color: white;
    position: absolute;
    /* background: red; */
    top: 10px;
    right: 10px;
    z-index: 100;
    text-transform: capitalize;
}



.blog span p > .precio {
    /* position: absolute; */
    /* bottom: 20px; */
    /* left: 20px; */
    padding: 5px;
    /* height: 50px; */
    font-size: 16px;
    /* position: absolute !important; */
    z-index: 500;
    color: black;
    margin: auto;
    text-align: center;
    /* line-height: 50px; */
    /* font-weight: 700; */
}

.blog span >  .iconos img {
    background: none;
    padding: 10px;
    width: 30px;
    border-radius: 25px;
    object-fit: scale-down;
    height: 20px;
    background-size: 50%;
    margin-right: 0px;
    margin-top: px;
    /* position: absolute; */
    float: left !important;

}
.venta {background:rgba(250,0,0,0.5);}
.alquiler {background:rgba(0,250,0,0.5);}

.destacado {
    display: block;
    width: 200px !important;
    height: 40px;
    margin: 1%;
    padding: 5px;
    color: white;
    position: absolute;
    /* background: red; */
    line-height: 45px;
    top: 15px !important;
    left: -50px !important;
    right: none !important;
    z-index: 100;
    text-transform: capitalize;
    BACKGROUND: red;
    transform: rotate(-35deg);
    text-align: center;
}

@media only screen and (min-width : 1280px) and (max-width : 1690px)/*@media (max-width:1690px)*/{.blog { width:calc((100% / 4) - 2% - 2px) !important;  }}
@media only screen and (min-width : 1282px) and (max-width : 1401px)/*@media (max-width:1690px)*/{.blog { width: calc((100% / 3) - 2% - 2px) !important; }}
@media only screen and (min-width : 1026px) and (max-width : 1281px)/*@media (max-width:1281px)*/{.blog { width:calc((100% / 3) - 2% - 2px)!important; } }
@media only screen and (min-width : 901px) and (max-width : 1025px)/*@media (max-width:1025px)*/{.blog { width: calc((100% / 2) - 2% - 2px) !important; } }
@media only screen and (min-width : 551px) and (max-width :900px){.blog { width: calc((100% / 2) - 2% - 2px)  !important; } }
@media only screen and (min-width :0px) and (max-width :550px){.blog { width: 95% !important; } }





.e-commers > .blog {
    width: 98% !important;
    min-height: 80px;
    height: 80px;
    margin: 1%;
    margin-top: 10px;
    margin-bottom: 10px;
	}



.e-commers > .blog:hover {   
    transform: scale(1);
    transition-property: all;
    transition: all .2s ease .2s;
    box-shadow: 0px 10px 10px rgb(220,220,220);
	 }


.e-commers > .blog div {
    height: 100%;
	width:150px;
	Float:left;
    position: relative;
    margin-left: auto;
    margin-right: auto;
	   }
	   

	   
.blog h1, .blog p, .blog_n3_compra h1, .blog_n3_compra p  { margin-top:15%; width:90%; color:rgb(229,255,248); text-align:center; font-size:32px;}



.e-commers > .blog span {
    width: 80%;
    height: 180px;
    float: left;
    /* padding: 1%; */
    /* margin: 0.5%; */
    /* font-size: 32px; */
    z-index: 500;
    bottom: 0px;
    left: 0px;
    /* color: red; */
    /* background: rgba(0,0,0,0.2); */
    /* border-bottom: 3px solid rgb(51,156,255); */
    position: relative;
    margin-bottom: 0px;
    overflow: hidden;}

	
	
.e-commers > .blog span p {    
    float: left;
    font-size: 16px;
    width: auto;
    height: 80px !important;
    text-align: left;
    /* margin-left: 5%; */
    margin: 0px;
    padding-left: 10px;
    /* padding: 2px; */
    color: white;
    visibility: visibility;
    display: block;
    /* position: relative; */
    /* margin-bottom: 0px; */
    /* bottom: 0px; */
    color: gray;
    overflow: hidden;
    line-height: 80px;
    text-align: center;
	}
	
.e-commers > .blog span h3 {
    text-align: center;
    font-weight: 700;
    margin: 20;
    margin-top: 25;
    color: gray;
    float: right;
    display: block;
    width: auto;
}
	

	   
.e-commers > .blog > .eliminar {
    position: absolute !important;
    z-index: 1000;
    top: 5px;
    right: -95%;
    background: red;
    padding: 5px;
    z-index: 1000;
    color: white;
    font-size: 20;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    text-align: center;
    line-height: 20px;
    border-color: white;
	}
	   



@media only screen and (min-width : 1280px) and (max-width : 1690px)/*@media (max-width:1690px)*/{.e-commers >.blog { width:95%  !important;  }}
@media only screen and (min-width : 1282px) and (max-width : 1401px)/*@media (max-width:1690px)*/{.e-commers >.blog { width:95%  !important; }}
@media only screen and (min-width : 1026px) and (max-width : 1281px)/*@media (max-width:1281px)*/{.e-commers >.blog { width: 95%  !important; } }
@media only screen and (min-width : 901px) and (max-width : 1025px)/*@media (max-width:1025px)*/{.e-commers >.blog { width: 95%  !important; } }
@media only screen and (min-width : 551px) and (max-width :900px){.e-commers >.blog { width:95%  !important; } }
@media only screen and (min-width :0px) and (max-width :550px){.e-commers >.blog { width: 95% !important; } }


/* mod_no fecha que esta fuera del periodo de la semana*/
.mod_no {background:white; }

	
/* mod_si fecha que esta dentro de la semana*/
.mod_si {
    background: rgb(170,212,0);
    border: 1px solid rgb(170,212,0) !important;}

	
/* mod_adjunto si tiene adjunto*/
.mod_adjunto {background:rgb(47,47,47); background-image:url(../interfaz/iconos/I_adjunto.png); background-size:cover; background-position:center;    position: relative;
}

.mod_no:before, .mod_si:before,	.mod_adjunto:before{
    width: 180px;
    height: 50px;
    padding: 5px;
    color: white;
    font-size: 12px;
    background: rgb(47,47,47);
    top: 46px;
    visibility: hidden;
    display: block;
    position: absolute;
    z-index: 1000; 
    border-radius: 3px;
	}
	
.mod_no:before {
    content: "Este articulo fue actualizado hace mas de una semana";
   }
	


.mod_si:before {
    content: "Actualizado en la ultima semana";
   }
	

.mod_adjunto:before {
    content: "Este Articulo incluye adjunto";
   }	
	
	

.mod_no:after, .mod_si:after, .mod_adjunto:after  {
    content: "";
	visibility:hidden;
    top: 27px;
    position: absolute;
    z-index: 1000;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid rgb(47,47,47);
 }	
	
.mod_si:hover:before, .mod_si:hover:after, .mod_no:hover:before, .mod_no:hover:after, .mod_adjunto:hover:before, .mod_adjunto:hover:after {
    visibility: visible;}	

	
.archivo {
    position: relative;
    width: 20%;
    height: 30px !important;
    height: auto;
    /* Display: block; */
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;}
	
.archivo a  {color: white;
    font-size: 15px;
    display: block;
    width: 90%;
    margin: 5%;}
	
	
.archivo  img{ 
    width: 90%;
    height: auto;
    max-height: 90%;
    margin: 5%;
    object-fit: scale-down;}
	
.archivo p{
    width: auto;
    min-width: 180px;
	
    height: auto;
    padding: 20px;
    color: white;
    font-size: 15px;
    background: rgb(47,47,47);
    top: 60px;
    visibility: hidden;
    display: block;
    position: absolute;
    z-index: 1000;
    border-radius: 3px;
	}
	
.archivo p:after  {
    content: "";
    visibility: hidden;
    top: -20px;
    position: absolute;
    z-index: 1000;
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid rgb(47,47,47);
 }	
 
.archivo:hover p:after,.archivo:hover p   {
    visibility: visible;} 
	
/*.blog_n3 span span:after, .blog_n3_compra span span:after {    
    visibility: visible;
    content: 'hacer pedido ahora';
    text-transform: uppercase;
    height: auto;
    width: auto;
    float: left;
    font-size: 14px;
    padding: 10px;
    /* padding-left: 50px; 
    position: absolute;
    top: 28px;
    left: 0px;
    background: none;
    color:white;
    z-index: 0;}	

.blog_n3:hover span span:after{ color: rgb(255,153,48);	}
	
	*/
	

/*.blog_n3:hover span a {	left:-50%;}
	
	
.blog_n3:hover span a:after {
	
       visibility: visible;
    content: 'informacion';
    float: left;
    font-size: 22px;
    width: auto;
    height: auto;
    padding: 10px;
    padding-left: 50px;
    margin-top: -48px;
    margin-left: 10px;
    background: rgb(51,156,255);
    border: 1px solid gra;
    z-index: 0;}	*/
	
	
	
	/*Parametros para que vuelva a su posicion inicial */
.blog span h1 , .blog span, .blog span p	{transition-timing-function: linear, linear;
   transition-delay:0s;
   transition-duration: 0.5s, 0.5s, 0.5s;
   -webkit-transform-style: all;
   }
  .seccion_g3 > .blog_n3 {width:45% !important;} 

  /* 
.blog_n3 :hover span {
	  background:rgba(0,0,0,0.6);
	-webkit-transform-style: all;	  
	transition-timing-function: linear, linear;
     transition-delay:0s;
	transition-duration: 0.5s, 0.5s, 0.5s;
    } 
   
.blog_n3 :hover span  h1{ 
     visibility:visible; margin-bottom:30%; bottom:30%; 
	transition-timing-function: linear, linear;
     transition-delay:0,5s;
   transition-duration: 0.5s, 0.5s, 0.5s;
   -webkit-transform-style: all;   }
   
   
.blog_n3 :hover span p{
	visibility:visible;  margin-bottom:12%; bottom:15%; 
	transition-timing-function: linear, linear;
     transition-delay:0.4s;
   transition-duration: 0.5s, 0.5s, 0.5s;
   -webkit-transform-style: all;
    }*/

@media only screen and (min-width : 1280px) and (max-width : 1690px)/*@media (max-width:1690px)*/{.blog_n3 { width: 29%  !important;  }}
@media only screen and (min-width : 1282px) and (max-width : 1401px)/*@media (max-width:1690px)*/{.blog_n3 { width: 29%  !important; }}
@media only screen and (min-width : 1026px) and (max-width : 1281px)/*@media (max-width:1281px)*/{.blog_n3 { width: 29%  !important; } }
@media only screen and (min-width : 901px) and (max-width : 1025px)/*@media (max-width:1025px)*/{.blog_n3 { width: 29%  !important; } }
@media only screen and (min-width : 551px) and (max-width :900px){.blog_n3 { width: 45%  !important; } }
@media only screen and (min-width :0px) and (max-width :550px){.blog_n3 { width: 95% !important; } }



	
@media only screen and (min-width :0px) and (max-width:400px)
{		
	.boton_whatssapp {   
    width: 85%;
    margin: 0% !important;
    /* margin-left: 10% !important; */
    margin-right: 5% !important;
    margin-bottom: 5% !important;
    float: right;
    height: auto;}
	.formulario_index input[type="submit"] {width:90%; height: 40px;} 
	
	}

@media only screen and (min-width :0px) and (max-width : 800px)
{
	
	.ancho_fijo, .ancho_fijo_auto { width:90% }
	#menu_movil, .ver_movil  {visibility:visible; display:block; }
	.encabezado, #encabezado {visibility:hidden; display:none;}
	.oculto_movil {visibility:hidden; display:none;}
	

	
	 #desarrollo {height: auto; }
	#desarrollo a{color:white;}
	#desarrollo a b, #desarrollo  b{display:none; visibility:hidden;}
		

.datos_pie {width:100%; height:auto;}		
.as {width:100% !important;} /* utilizo para que la galeria Slick se optimize y no se achique las imagenes en el responsive solo en la que son varias imagene una al lado de la otra*/

.diseno_2 div div div {width:100% !important;}
.diseno_1 div div span, .diseno_2 div div span {width:100% !important;}
iframe div div div {width:none;}

.titulo h1 {font-size:25px;}


}

@media only screen and (min-width :0px) and (max-width : 550px)
{
	.diseno_formulario span  h1 {font-size:60px;}
	 .formulario_index, .formulario {    width: 80%;
    margin: 8%;  }
	
	.left, .right, .galeria, iframe {    width: 100% !important;
    margin-top: 10px;
}}
	
	
	 
	.datos_pie div {width:80% !important; margin:10%;}
	 .formulario {position:relative; margin-top:-180px !important; position: relative;
    MARGIN-BOTTOM: 150PX; }	
	.formulario input[type="text"], input[type="submit"], select {width:90%; height:50px; float:left;}
	.formulario textarea {width:90%; height:100px; }
}

@media only screen and (min-width : 551px) and (max-width :900px)
{
	 .formulario {position:relative; margin-top:-180px !important; }	
	 .formulario_index, .formulario {width:400px !important; }
	 .datos_pie div {    margin: 10%;    margin-top: 0px;}
	 .diseno_formulario span {width:80%; max-width:80%; margin-left: 10%;}
}	


@media only screen and (min-width : 551px) and (max-width :900px)
{
	
	
	.ancho_fijo {width:95%;}
	.encabezado {width:100%;}
	
	
	
	.ver_movil  {visibility:visible; display:block; }
	.encabezado, #encabezado, .triangulo_11, .triangulo_12 {visibility:hidden; display:none;}	
}

@media only screen and (min-width : 0px) and (max-width :1060px)
{

	#menu_movil{visibility:visible; display:block; }
}

@media only screen and (min-width : 901px) and (max-width : 1025px)
/*@media (max-width:1025px)*/{
		
	.oculto_movil {visibility:hidden; display:none;}
    .ver_movil  {visibility:visible; display:block; }
		

}


@media only screen and (min-width : 0px) and (max-width : 1180px){ .ancho_fijo{width:95%;} }





	
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{    
    font-size: 0;
    line-height: 0;
    position: absolute !important;
    top: 50% !important;
    display: block;
    width: 50px !important;
    height: 50px !important;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    /* color: transparent; */
    border: none;
    outline: none;
    background: black !important;
    z-index: 1000;
    border-radius: 80px;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: rgba(0,0,0,0.5);
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -0px !important;
}
[dir='rtl'] .slick-prev
{
    right: -0px !important;
    left: auto;
}
.slick-prev:before
{
    content: '<';
}
[dir='rtl'] .slick-prev:before
{
    content: '>';
}

.slick-next
{
    right: -0px !important;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -0px;
}
.slick-next:before
{
    content: '>';
}
[dir='rtl'] .slick-next:before
{
    content: '<';
}

.slick-slide
{
	height:auto !important;	
    /*margin-bottom: 30px;*/
}

/* Dots */
.slick-slider
{
	height:auto !important;	
    margin-bottom:0px !important;
}

.slick-dots
{
    
    position: absolute;
    bottom: 20px !important;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
    background: rgba(247,247,247,0.5);
    border-radius: 20px;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*CLASES VIEJAS*/

.margin-seccion1 {margin-top:100px;}

.margin_bottom  {margin-bottom:80px;}

.menu-horizontal {
    margin-top: -20px;
    height: auto;
    min-height: 50px;
    width: 100%;
    background: rgb(230,230,230);}


.menu-horizontal li {
    /* height: 30px; */
    width: auto;
    /* line-height: 30px; */
    /* border-bottom: 1px solid white; */
    font-size: 14px;
    cursor: hand;
    position: relative;
    display: table-cell;
}


.menu-horizontal li a {
    height: 50px;
    width: auto;
    line-height: 50px;
    text-transform: uppercase;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    margin: 1px;
    float: left;
    background: rgb(47,47,47);
    font-size: 15px;}

.menu-horizontal li ul {
    display: none;
    visibility: hidden;
    z-index: 1000;
    position: absolute;
    /* height: 200px; */
    width: 150px;
    min-width: 50px;
    margin-top: 50px;
    /* height: 20px; */
    /* margin-top: -30px; */
    margin-left: 1px;
    /* left: 140px; */
    color: white;
    text-align: left;
    font-size: 12px;
    /* margin-left: -10px; */
    background: rgb(97,97,97);
}


.menu-horizontal li ul a {
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-transform: uppercase;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    margin: 1px;
    float: left;
    background: rgb(97,97,97);
    font-size: 15px;
    margin-left: -20px;
    border-bottom: 1px solid white;
}
	
.menu-horizontal li:hover ul {display:block; visibility:visible;}



.menu-horizontal h2 {
    display: block;
    width: auto;
    color: white;
    float: left;
    margin: 10px; margin-right:20px;}
	
.menu-horizontal div:after{   content:''; clear: both;
    width: 100%;
    height: 1px;
    color: white;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important; }	

@media only screen and (min-width :0px) and (max-width : 900px) {

.menu-horizontal li {    display: block;    width: calc(90% - 30px);    margin: 10px;}
.menu-horizontal li a {width:calc(90% - 70px); display: content;}
.menu-horizontal li ul a {  width: 100%;    display: content;    background: rgb(97,97,97);    margin-left: 30px;}
.menu-horizontal li:hover ul {    display: contents;    visibility: visible; }
.menu-horizontal li:before {
    display: block;
    height: 50px;
    width: 50px;
    background: rgb(97,97,97);
    content: "+";
    text-align: center;
    font-size: 25px;
    float: left;
    /* margin-right: 20px; */
    color: white;
    line-height: 50px;
}}

.columna_1a {width:70%;}
.columna_3 {width:28%; 
    overflow: unset;}
.columna_2 {width:45%;}
.columna_4 {width:35%;}

.video {margin:20px;}

@media only screen and (min-width :0px) and (max-width : 900px)
{
.columna_1a, .columna_2, .columna_3 {width:100%;}
.columna_4 {width:100%;}
.video {margin:0px;}
.video iframe{width:90%;}
}

.transparente_blanco {background:#fafafa;}


.extras { background:rgb(245,245,245) !important; padding:10px;}
.extras p{text-align:right !important; margin:10px; Border-bottom:1px solid black !important; min-height:40px;}
.extras p b{display:block; float:left;}



.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

.boton_compra_whatsapp{  float:left;  display: block; background:var(--boton-whatsapp-background); color:var(--boton-ml-color);  padding:var(--main-padding-principal); margin:var(--main-margin-principal);}

.boton_compra_whatsapp_fijo { 
    display: none !important;
    visibility: hidden !important;
    position: fixed;
    bottom: 50px;
    right: 50px;
    float: right;
    z-index: 5000;
    padding: var(--main-padding-principal);
    margin: var(--main-margin-principal);
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 0.5s, 0.5s, 0.5s;
    -webkit-transform-style: all;
    cursor: pointer;
    width: auto !important;
    /*background: red;*/
    z-index: 100000;
	}

.boton_compra_whatsapp_fijo a{
    display: block !important;
    visibility: visible !important;
    background-color: none;
    color: var(--boton-ml-color);
    padding: calc(var(--main-padding-principal) / 2 );
    margin-left: var(--main-margin-principal);
    /* width: 120px; */
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 0.5s, 0.5s, 0.5s;
    --webkit-transform-style: all;
	}

.boton_compra_whatsapp_fijo img{ 
	float: right;
    	height: 50px;
	margin: 0px !important;
	}

.boton_compra_whatsapp_fijo:hover a {transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 0.5s, 0.5s, 0.5s;
    --webkit-transform-style: all;
	background: var(--boton-whatsapp-background);
	visibility:visible;	display:block; 
	
	} 


@media only screen and (min-width :0px) and (max-width : 890px)
{	
.boton_compra_whatsapp_fijo {
   	visibility:visible !important;
	display:block !important; }
}


.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}