/*INDICE CSS

Línea
17 // Banner principal
476 // PopUp
534 // Bienvenida
657 // Historia
891 // Misión / Visión
968 // Nuestras áreas
1390 // Preguntas frecuentes
1615 // Contáctenos
1896 // Menú
2189 // Botón orden de trabajo

*/


/*CSS Banner principal  */



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

   .caratula {

	width: 100%;
	background-image: url("../images/caratula02.png");
	background-repeat: no-repeat;
	background-position: center;

	}
	
	div.ContenedorSaludo
{
	position: relative;
	
}
	
	div.Saludo{
		padding-top: 20px;

	  
	}
	
	.pantalla
{
	
	display: none;
	
}	
	
	
	.contenedorsol {

	   visibility: hidden;
	}
	
	.contenedorJoya{

	   visibility: hidden;
	}

	.contenedorTw {

	   visibility: hidden;
	}
	
	
	.contenedorMaceta {

	   visibility: hidden;
	}
	
	.Chispas {

	   visibility: hidden;
	}
	
	.contenedorCarpeta {

	   visibility: hidden;
	}
	
	.contenedorLibro {

	   visibility: hidden;
	}
	
	.contenedorDesplegable {

	   visibility: hidden;
	}
	
	.contenedorIpad {

	   visibility: hidden;
	}
	
	.elemento01  {

	   visibility: hidden;
	}
	
	.elemento02  {

	   visibility: hidden;
	}
	
	.elemento03  {

	   visibility: hidden;
	}
	
	.elemento04  {

	   visibility: hidden;
	}
	
	
	}




div.contenedorTw
{
	width:40px;
	height:33px;
	position: absolute;
	bottom: 595px;
	left: 125px;
	right: 0;
	
	
	
}



div.contenedorJoya
{
	width:45px;
	height:45px;
	position: absolute;
	bottom: 252px;
	left: 465px;
	right: 0;
	
	
	
}


div.Joya {
	
    background-image:url("../images/joya.gif");
	background-size: 45px;
	width: 45px;
	height: 45px;
	
	
	
}


div.Tw {
	
    background-image:url("../images/twitter.gif");
	background-size: 40px;
	width: 40px;
	height: 33px;
	
	/*
-webkit-animation:vuelo 20s linear infinite;
	*/
}


div.contenedorMaceta
{
	width:114px;
	height:182px;
	position: absolute;
	bottom: 10px;
	left: 5px;
	right: 0;
	
	
	
}


div.libro {
	
    background-image:url("../images/libro.png");
	width: 56px;
	height: 68px;

}

div.contenedorLibro
{
	width: 56px;
	height: 68px;
	position: absolute;
	bottom: 92px;
	left: 300px;
	
-webkit-animation:LibroMov 10s linear infinite;	
	
}


div.Estampado {
	
    background-image:url("../images/estampado.png");
	width: 45px;
	height: 24px;


}



div.contenedorEstampado
{
	width: 45px;
	height: 24px;
	position: absolute;
	bottom: 288px;
	left: 707px;
	

	
}





div.Ipad {
	
    background-image:url("../images/iPad.gif");
	background-size: 55px;
	width: 55px;
	height: 72px;

}

div.contenedorIpad
{
	width: 55px;
	height: 72px;
	position: absolute;
	bottom: 600px;
	left: 740px;
	

	
}


div.Desplegable {
	
    background-image:url("../images/desplegable.png");
	width: 84px;
	height: 63px;

}

div.contenedorDesplegable
{
	width: 84px;
	height: 63px;
	position: absolute;
	bottom: 92px;
	left: 300px;
	
-webkit-animation:DesplegableMov 10s linear infinite;	
	
}


div.Carpeta {
	
    background-image:url("../images/carpeta.png");
	width: 92px;
	height: 68px;

}

div.contenedorCarpeta
{
	width: 92px;
	height: 68px;
	position: absolute;
	bottom: 92px;
	left: 300px;
	
-webkit-animation:CarpetaMov 10s linear infinite;	
	
}



@-webkit-keyframes DesplegableMov
{
	0% {transform: translate(385px,0px)} 
	19% {transform: translate(385px,0px); opacity: 1} 
	20% {transform: translate(385px,0px); opacity: 0}
	29% {transform: translate(30px,0px); opacity: 0}
	30% {transform: translate(30px,0px); opacity: 1}
	50% {transform: translate(30px,0px)}
	60% {transform: translate(210px,0px)}
	80% {transform: translate(210px,0px)}
	90% {transform: translate(385px,0px)}
	100% {transform: translate(385px,0px)}
	
}




@-webkit-keyframes CarpetaMov
{
	0% {transform: translate(210px,0px)}
	20% {transform: translate(210px,0px)}
	30% {transform: translate(385px,0px)}
	50% {transform: translate(385px,0px); opacity: 1}
	51% {transform: translate(385px,0px); opacity: 0}
	59% {transform: translate(10px,0px); opacity: 0}
	60% {transform: translate(10px,0px); opacity: 1}
	80% {transform: translate(10px,0px); opacity: 1}
	89% {transform: translate(210px,0px); opacity: 1}
	100% {transform: translate(210px,0px)}

}



@-webkit-keyframes LibroMov
{
	0% {transform: translate(30px,0px); opacity: 1} 
	20% {transform: translate(30px,0px)} 
	30% {transform: translate(220px,0px)}
	50% {transform: translate(220px,0px)}
	60% {transform: translate(400px,0px)}
	80% {transform: translate(400px,0px); opacity: 1}
	81% {transform: translate(400px,0px); opacity: 0}
	90% {transform: translate(30px,0px); opacity: 0}
	91% {transform: translate(30px,0px); opacity: 1}
	100% {transform: translate(30px, 0px); opacity: 1} /*el valor negativo cambia la orientación*/
}




div.Maceta {
	
    background-image:url("../images/maceta.gif");
	background-size: 114px;
	width: 114px;
	height: 182px;
	
	/*
-webkit-animation:vuelo 20s linear infinite;
	*/
}

div.Chispas {
	
    background-image:url("../images/chispas.gif");
	background-size: 68px;
	width: 68px;
	height: 56px;
	
	/*
-webkit-animation:vuelo 20s linear infinite;
	*/
}


div.contenedorChispas
{
	width:68px;
	height:56px;
	position: absolute;
	bottom: 305px;
	left: 550px;
	right: 0;
	
	
	
}





div.contenedorDiamante
{
	width:68px;
	height:69px;
	position: absolute;
	bottom: 589px;
	left: 120px;
	right: 0;
	
	
	
}


div.Diamante {
	
    background-image:url("../images/diamante.png");
	width: 68px;
	height: 69px;
	
	/*
-webkit-animation:vuelo 20s linear infinite;
	*/
}





@-webkit-keyframes vuelo
{
	0% {transform: translate(-500px,200px)} /*ltor: left to right*/
	15% {transform: translate(5px,-5px)}
	85% {transform: translate(5px,-5px)}
	
	100% {transform: translate(1200px, -350px)} /*el valor negativo cambia la orientación*/
}


div.contenedorsol
{
	width:94px;
	height:94px;
	position: absolute;
	bottom: 515px;
	left: 570px;
	right: 0;
	
	
	
}

/*nube2*/


div.sol {
	
    background-image:url("../images/sol.png");
	width: 94px;
	height: 94px;
	
	
	-webkit-animation:rotarAnim 30s linear infinite;
	
}


@-webkit-keyframes rotarAnim
{
	from {transform: rotate(0);}
	to 		{transform: rotate(360deg);} /*el valor negativo cambia la orientación*/
}





/*CSS POPup  */



.popup{
    background-color: #ffffff;
    width: 300px;
    padding: 10px 10px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    display: none; 
    text-align: center;
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 25px;
    color: #2E3B6E;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
}
.popup h2{
  margin-top: -20px;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}
.popup a{
    display: block;
    width: 150px;
    position: relative;
    margin: 10px auto;
    text-align: center;
    background-color: #0f72e5;
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 0;
}








/*CSS Bienvenida  */



.active.elemento01
{
	animation: saludo¡ 0.5s ease-in-out 1;

	
}

.active.elemento01:hover
{

	opacity: 0.5;

	
}



@keyframes saludo¡{
	from {transform: translate(-200px,0); opacity: 0}
	to 		{transform: translate(0,0); opacity: 1}
		}
	
	

.active.elemento02 {
	animation: saludoH 0.5s ease-in-out 1;
	}

.active.elemento02:hover
{

	opacity: 0.5;

	
}
	
	@keyframes saludoH{
	from {transform: translate(0,200px); opacity: 0}
	to 		{transform: translate(0,0); opacity: 1}
		}
	
	

	
.active.elemento03 {
	animation: saludoA 0.5s ease-in-out 1;
	}

.active.elemento03:hover
{

	opacity: 0.5;

	
}




@media screen and (min-width: 960px) {

   
	div.Saludo {
	display: none;
	
}


div.ContenedorSaludo
{
	display: none;
}
	
	}
	



.recuadro-caratula{  
	max-width: 960px;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	border: 2px;
	/*border-style: dashed;*/
	position: relative;
		}



	
	@keyframes saludoA{
	from {transform: translate(200px,0); opacity: 0}
	to 		{transform: translate(0,0); opacity: 1}
		}
	




#productos li{
	float: left;
	list-style: none;
	text-align: center;
	width: 220px;
	margin-top: 30px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: gray;
	font-size: 16px;
	max-height: 990px;
}

.puntos{
	background-image: url("../images/background.png");
	margin-left: auto;
	margin-right: auto;
}


/* CSS.  NUESTRA HISTORIA*/






@-webkit-keyframes Planta02
{
	0% {transform: translate(0,70px)} 
	100% {transform: translate(0,0)}
	
}

@-webkit-keyframes Planta03
{
	0% {transform: translate(0,134px)} 
	100% {transform: translate(0,0)}
	
}

@-webkit-keyframes Planta04
{
	0% {transform: translate(0,173px)} 
	100% {transform: translate(0,0)}
	
}

div.contenedorPlanta01

{
	width:19px;
	height:50px;
	bottom: 343px;
	left: 45px;
	position: absolute;
	right: 0;
	
	
}


div.planta01 {
	
    background-image:url("../images/planta01.png");
	background-size: 19px;
	width: 19px;
	height: 46px;
	transform: translate(0,150px);
	
	
}

div.planta01.active {

	transform: translate(0,0px);
	
}



div.contenedorPlanta02

{
	width:61px;
	height:70px;
	bottom: 347px;
	left: 300px;
	position: absolute;
	right: 0;
	
	
}


div.planta02 {
	
    background-image:url("../images/planta02.png");
	background-size: 61px;
	width: 61px;
	height: 69px;
	transform: translate(0,150px);
	
}

div.planta02.active {

	transform: translate(0,0px);
	
}



div.contenedorPlanta03

{
	width:94px;
	height:134px;
	bottom: 347px;
	left: 570px;
	position: absolute;
	right: 0;
	
	
}


div.planta03 {
	
    background-image:url("../images/planta03.png");
	background-size: 94px;
	width: 94px;
	height: 134px;
	transform: translate(0,150px);
	
}

div.planta03.active {

	transform: translate(0,0px);
	
}

div.contenedorPlanta04

{
	width:105px;
	height:173px;
	bottom: 347px;
	left: 845px;
	position: absolute;
	right: 0;
}


div.planta04 {
	
    background-image:url("../images/planta04.png");
	background-size: 105px;
	width: 105px;
	height: 173px;
	transform: translate(0,170px);

}

div.planta04.active {

	transform: translate(0,0px);
	
}


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


	
	.contenedorPlanta01 {
		display: none;

	}
	
	.contenedorPlanta02{

	   display: none;
	}
	
	.contenedorPlanta03{

	   display: none;
	}
	
	.contenedorPlanta04{

	   display: none;
	}
	
	.historiaCrece{

	  display: none;
	}
	
}



table.historia {
  max-width: 960px;
  border-collapse: collapse;
  margin: 0;
	margin-left: auto;
	margin-right: auto;
  width: 100%;
  table-layout: fixed;
}

table.historia td {
	background-color: white;
  	padding-left: 0.9em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	vertical-align: top;
	border-right: solid;
	border-right-width: 0.5px;
	border-right-color: #ddd;
	border-bottom: none;
}



@media screen and (max-width: 700px) {
  table.historia {
    border: 0;
  }

  
  table.historia tr {
    
    display: block;
	  border-right: none;
  }
  
  table.historia td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
	 border-right: none;
  }
}
	



/* CSS MISION Y VISION*/





@media screen and (max-width: 600px) {
  img.estrella {
    width: 80px;
  }
	img.estrella2 {
    width: 80px;
  }
	
	}

@media screen and (min-width: 601px) {
  img.estrella {
    width: 110px;
	  
  }
	
	img.estrella2 {
    width: 110px;
	  
  }
	}



@media screen and (max-width: 600px) {
  img.mision {
	  max-width: 400px;
	  width: 400px;

  }
	}

@media screen and (min-width: 601px) {
  img.mision {
    width: 500px;
  }
	}


	


.column1 {
	float: left;
	width: 20%;
	margin-top: 30px;
	
}

.column2 {
	float: left;
	width: 50%;
	background-color: white;
	margin-top: 30px;
}

.column3 {
	float: left;
	width: 20%;
	margin-top: 30px;
}


.row:after {
content: "";
display: table;
clear: both;
}



/*CSS NUESTRA AREAS  */


@media screen and (min-width: 960px) {

  table.area td.administrativos {
    width: 20%;
	 border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
	  
	  height: 480px;
	  background-image: url( "../images/area-1.png");
	  background-size: 202px;
	  background-repeat: no-repeat;
	  background-position: center;
	  vertical-align: top;
	  text-align: center;  
  }
	
	  table.area td.arte {
    width: 20%;
	border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
	  height: 480px;
		  background-position: center;
		  background-image: url( "../images/area-2.png");
		  background-size: 193px;
		  background-repeat: no-repeat;
		  vertical-align: top;
	  
  }
	
		  table.area td.produccion {
    width: 20%;
	border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
	  height: 480px;
		 background-image: url("../images/area-3.png");
			  background-size: 223px;
			  background-repeat: no-repeat;
			  background-position: center;
	  vertical-align: top;
			 
  }
	
	
			  table.area td.division {
    width: 2%;
	
	  
  }

	
}



.active.fade-left {
  animation: fade-left 1s ease-in;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.reveal
{
	opacity: 0;
	
}

.reveal.active
{
	opacity: 1;
	
}


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

  table.area td.administrativos {
    width: 80%;
	 border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
 height: 480px;
	  background-image: url("../images/area-1.png");
	  background-position: center;
		  ackground-attachment: fixed;
	  background-repeat: no-repeat;
	  vertical-align: top;
	 margin-left: auto;
	  margin-right: auto;
	 
	  
  }
	
	  table.area td.arte {
    width: 80%;
	border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
	  height: 480px;
		  background-image: url("../images/area-2.png");
		  background-position: center;
		  ackground-attachment: fixed;
		  background-repeat: no-repeat;
		  vertical-align: top;
		  margin-left: auto;
	  margin-right: auto;
	  
  }
	
		  table.area td.produccion {
    width: 80%;
	border-radius: 0 25px 25px 25px;
	box-shadow: 5px 5px 10px #dadada;
  background: white;
	  height: 480px;
		 background-image: url("../images/area-3.png");
			  background-position: center;
		  ackground-attachment: fixed;
			  background-repeat: no-repeat;
	  vertical-align: top;
			margin-left: auto;
	  margin-right: auto;
  }
	
	
			  table.area td.division {
    width: 2%;
				  height: 20px;
	
	  
  }

}









table.area {
  
  border-collapse: collapse;
  margin: 0;
	margin-left: auto;
	margin-right: auto;
  width: 100%;
  table-layout: fixed;
}




@media screen and (max-width: 959px) {
  table.area {
    border: 0;
  }

  
  table.area tr {
    
    display: block;
	  border-right: none;
  }
  
  table.area td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
	 border-right: none;
  }


}


@media screen and (min-width: 940px) {
  
#area1 {
  border-radius: 25px;
  background: white;
  width: 100%;
 height: 490px;
	box-shadow: 5px 5px 10px #dadada;
	padding-top: 10px;
}

#area2 {
  border-radius: 25px;
  background: white;
  width: 100%;
 height: 490px;
	box-shadow: 5px 5px 10px #dadada;
	padding-top: 10px;
}


#area3 {
  border-radius: 25px;
  background: white;
	width: 100%;
  height: 490px;
	box-shadow: 5px 5px 10px #dadada;
	padding-top: 10px;
}

}








@media screen and (max-width: 959px) {
 p.titulo-seccion {
    padding-top: 80px; 
	 font-size: 30px; 
	 text-align: center; 
	 font-family: 'Roboto', sans-serif; 
	 margin-top: 0px; 
	 margin-bottom: 10px; 
	 color: red; 

  }
}

@media screen and (min-width: 960px) {
 p.titulo-seccion {
    padding-top: 80px; 
	 font-size: 50px; 
	 text-align: center; 
	 font-family: 'Roboto', sans-serif; 
	 margin-top: 0px; 
	 margin-bottom: 10px; 
	 color: red; 
	 margin-left: 5%; 
	 margin-right: 5%; 
  }
}

@media screen and (min-width: 601px) {
 div.estrella {
    
  }
}

@media screen and (max-width: 600px) {
 div.estrella {
    width: 100%;
	 max-width: 120px;
	 visibility: hidden;
  }
}





.topnav {
  overflow: hidden;
  background-color: beige;
	width: 60px;

	
}

.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}



.topnav .icon {
  display: none;
	
	
}

.dropdown {
  float: left;
  overflow: hidden;
	
	
}

.dropdown .dropbtn {
  font-size: 16px;    
  border: none;
  outline: none;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 10px;
  background-color: inherit;
  font-family: Helvetica, Arial, "sans-serif";
	color: red;
	

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: beige;
	font-family: Helvetica, Arial, "sans-serif";
	animation-duration: 4s;
		
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
	
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
	font-size: 14px;
	
}

/*.topnav a:hover,*/ .dropdown:hover .dropbtn {
 
  color: orangered;
}

.dropdown-content a:hover {
 
  color: black;
	transition: 1s background-image ease-in-out;
background-image: linear-gradient(90deg, yellow, beige);
	
}

.dropdown:hover .dropdown-content {
  display: block;
}


/*


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
 background-color: #543E2E;
	opacity: 0.8;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

*/



/*CSS PREGUNTAS FRECUENTES  */

.pregunta{  
	max-width: 960px;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	
	/*border-style: dashed;*/
	position: relative;
		}

.preguntaContenedor {
            position: relative;
            overflow: hidden;
			max-width: 960px;
            height: 329px;
            margin: 20px auto;
            background-image: url("../images/preguntas.png");
			background-size: contain;
			background-repeat: no-repeat;
           /* border: 1px solid #ccc;  */
        }

.lupa {
            position: absolute;
			left: 430px;
			top: 130px;
            width: 98px;
            height: 140px;
           background-image: url("../images/lupa.png");
            transform: rotate(0deg);
    
            animation: 10s lupa-enfoque linear infinite;
          z-index: 2;
        }

 @keyframes lupa-enfoque {
            from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    		to   { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
        }


.signo {
           position: absolute;
            width: 103px;
            height: 148px;
			background-image: url("../images/signoPregunta.png");       
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
			background-size: 85%;
	background-repeat: no-repeat;
	
	-webkit-animation:reboteAnim 10s ease-in-out infinite alternate;
        }

.signo_1 {
            top: 130px;
            left: 55px;
        }

.signo2 {
           position: absolute;
    top: 0px;
            left: 525px;       
			width: 103px;
            height: 148px;
			background-image: url("../images/signoInvertido.png");       
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
			background-size: 85%;
	background-repeat: no-repeat;
	animation-delay: 0.5s;
	-webkit-animation:reboteAnim 10s ease-in-out infinite alternate;
        }


       .check {
           position: absolute;
    		top: 180px;
            left: 845px;       
			width: 103px;
            height: 148px;
			background-image: url("../images/check.png");       
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
			background-size: 85%;
	background-repeat: no-repeat;
	
		   
		 
      	animation: aparece 6s ease-in-out infinite;
		  /* animation: fadeIn 1s infinite alternate; -otra manera de difuminar-*/
		   
		   
        }

@keyframes fadeIn { 
  from { opacity: 0; } 
}
       
       @keyframes aparece {
           0%{transform: none; opacity: 0;}
		  10%{transform: none; opacity: 1;}
		   100%{transform: none; opacity: 1;}
    		
        }



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

  /* .caratula {

	width: 100%;
	background-image: url("../images/caratula02.png");
	background-repeat: no-repeat;
	background-position: center;

	}    */
	
	
	.lupa {

	   display: none;
		/*visibility: hidden esta función oculta el objeto pero no reinicia la animacion al agrandarse, además en la transición queda sobrepuesto */
	}

	.signo{

	   display: none;
	}
	
	
	.signo2 {

	   display: none;
	}
	
	.signo_1 {

	  display: none;
	}
	
	.check {

	   display: none;
	}
	
	

	
	}













.accordion {
    background-color: white;
  color: gray;
  cursor: pointer;
	font-family: 'Roboto', sans-serif;

	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  color: black;
}


.accordion:after {
  content: '\002B';
  color: red;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}










.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: justify;
    
}









/*CSS CONTACTENOS */




.figura{ 
	background-color: rgba(142, 139, 139, 0.6);
	clip-path: polygon(79% 20%, 10% 48%, 39% 56%, 45% 91%);
	width: 180px;
	height: 180px;
	top: 300px;
	position: absolute;
	filter: blur(5px);
}




.hoja { 
	
	box-shadow: 5px 5px 10px #e94442;
	width: 64px;
	height: 65px;
	top: -340px;
	left: 255px;
	
	
		}

.contactenos{  
	max-width: 100%;
	background-image: url("../images/contacto.png");
		}


.recuadro-contacto{  
	max-width: 960px;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	border: 2px;
	/*border-style: dashed;*/
	position: relative;
		}


/*nube1*/
div.contenedornube1
{
	width:274px;
	height:99px;
	position: relative;
	bottom: -5px;
	
}

/*nube1*/


div.nube1 {
	
    background-image:url("../images/nube-1.png");
	width: 274px;
	height: 99px;
	
	
	-webkit-animation:fondoAnim 100s linear infinite;
	
}


div.contenedornube2
{
	width:126px;
	height:63px;
	position: absolute;
	bottom: 740px;
	left: 150px;
	right: 0;
	
	
	
}

/*nube2*/


div.nube2 {
	
    background-image:url("../images/nube-2.png");
	width: 126px;
	height: 63px;
	
	
	-webkit-animation:fondoAnim 350s linear infinite;
	animation-direction: reverse;
	
}


@-webkit-keyframes fondoAnim
{
	
	0% {transform: translate(950px,0)} /*ltor: left to right*/
	
	100% {transform: translate(-300px,0)} /*el valor negativo cambia la orientación*/
}


.contenedoravioneta
{
	width: 90px;
	height: 62px;
	position:absolute;
	top: 250px;

	-webkit-animation:reboteAnim 2s ease-in-out infinite alternate;
	
}



div.avioneta {	
    background-image:url("../images/avioneta.png");
	width: 90px;
	height: 62px;
	
	-webkit-animation:ltorAnim 20s linear infinite;
	

}



@keyframes escale {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.3, 0.3);
  }
}




@-webkit-keyframes ltorAnim
{
	0% {transform: translate(-500px,200px)} /*ltor: left to right*/
	25% {transform: translate(50px,30px)}
	85% {transform: translate(50px,0px)}
	
	100% {transform: translate(1200px, -350px)} /*el valor negativo cambia la orientación*/
}



@-webkit-keyframes reboteAnim
{
	from {transform: translate(0,0);}
	to 		{transform: translate(0,30px);} /*el valor negativo cambia la orientación*/
}




.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: skew 3s infinite;
  transform: skew(20deg);
  animation-direction: alternate;
  opacity: .7;
}


@keyframes skew {
  0% {
    transform: skewX(20deg);
  }
  100% {
    transform: skewX(-20deg);
  }
}


div.cuadro {
  
width: 70%;
background-image: url("../images/cuadro.png");
box-shadow: 5px 5px 10px #ada8a8;
margin: 0 auto;
	
}



table.contacto {
  
  border-collapse: collapse;
  margin: 0;
	margin-left: auto;
	margin-right: auto;
  width: 100%;
  table-layout: fixed;
}




@media screen and (max-width: 959px) {
  table.contacto {
    border: 0;
  }

  
  table.contacto tr {
    
    display: block;
	  border-right: none;
  }
  
  table.contacto td {
    border-bottom: 0px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
	 border-right: none;
  }


}



@media screen and (min-width: 960px) {

  table.contacto td.imagen-contacto {
    width: 60%;

	  vertical-align: top;
	}
	
	table.contacto td.info-contacto {
    width: 40%;

	  vertical-align: top;
	}
	
}

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

  table.contacto td.imagen-contacto {
    width: 100%;
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
}
	
	
	table.contacto td.info-contacto {
    width: 100%;


	
	  background-position: center;

	  background-repeat: no-repeat;
	  vertical-align: top;
}

}

/*menú*/


@media screen and (max-width: 700px) {
   body {
      padding: 0px 0 0 0;
      width: 100%
   }
}

a {
   color: inherit;
}

.menu-item,
.menu-open-button {
   background: #FFFFFF;
   border-radius: 100%;
   width: 50px;
   height: 50px;
   margin-left: 0px;
	margin-top: 20px;
   position: inherit;
   color: #000000;
   text-align: center;
   line-height: 40px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
   display: none;
}

.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}

.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0px;
   right: 0;
   width: 35px;
   height: 50px;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
}

/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
   background:#BEBABA;
   color: #000000;
}

.menu-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}

.menu-open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30);
}

.menu-open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, 70.99997px, 0);
   transform: translate3d(0.08361px, 70.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(0.08361px, 140.99997px, 0);
   transform: translate3d(0.08361px, 140.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(0.08361px, 210.99997px, 0);
   transform: translate3d(0.08361px, 210.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(0.08361px, 280.99997px, 0);
   transform: translate3d(0.08361px, 280.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(0.08361px, 350.99997px, 0);
   transform: translate3d(0.08361px, 350.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(0.08361px, 420.99997px, 0);
   transform: translate3d(0.08361px, 420.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(0.08361px, 700.99997px, 0);
   transform: translate3d(0.08361px, 700.99997px, 0);
}

.blue {
   background-color: #F7D8D7;
}

.blue:hover {
   color: #F7D8D7;
   text-shadow: none;
}

.green {
   background-color: #F68684;
}

.green:hover {
   color: #F68684;
   text-shadow: none;
}

.red {
   background-color: #F68684;
}

.red:hover {
   color: #F68684;
   text-shadow: none;
}

.purple {
   background-color: #F7D8D7;
}

.purple:hover {
   color: #F7D8D7;
   text-shadow: none;
}

.orange {
   background-color: #F6403C;
}

.orange:hover {
   color: #F6403C;
   text-shadow: none;
}

.lightblue {
   background-color: #F6403C;
}

.lightblue:hover {
   color: #F6403C;
}

.credit {
   margin: 24px 20px 120px 0;
   text-align: right;
   color: #EEEEEE;
}

.credit a {
   padding: 8px 0;
   color: #C49CDE;
   text-decoration: none;
   transition: all 0.3s ease 0s;
}

.credit a:hover {
   text-decoration: underline;
}

/* botón orden de trabajo */

.container {
  width: auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.btn {
  margin: 10px auto;
  border: none;
  padding: 10px 30px;
  font-size: 15px;
  position: relative;
box-shadow: 5px 5px 10px #ada8a8;
}
.btn::before {
  -webkit-transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  content: '';
  width: 50%;
  height: 100%;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
}
.btn .btn-text {
  color: white;
  mix-blend-mode: difference;
}
.btn:hover::before {
  background: black;
  width: 100%;
}
.btn.rounded {
  border-radius: 50px;
}
.btn.rounded .text-green {
  color: white;
  mix-blend-mode: difference;
}
.btn.rounded::before {
  border-radius: 50px;
  width: 25%;
  background: #F6403C;
}
.btn.rounded:hover::before {
  background: #F6403C;
  width: 100%;
}