@charset "utf-8";
/* CSS Document */

/*colores
verde rgb(156, 186, 59)

*/
*{
	margin:0;
}

.contenedor_rotador{
	margin:0 auto;
	width:100%;	
	height:600px;
	position:relative; /* este relative es para los botones*/	
	
	/*max-width:1024px;*/
	/*height:100%;*/
	
}

.rotador{
	width:100%;
	height:600px;
	overflow:hidden;
	margin:10px 0;
	
}

.grupo_rotador{
	width:100%;
	height:600px;
	position:relative; /*muy importante colocar esto porque si no el texto rotador con position absolute no funciona*/
	
}

/* para ampliar las iagenes*/
.grupo_rotador img{
	width:100%;
	height:auto;
}

.logo{
    position:fixed;
    left:30px;
    top:30px;
    width:200px; 
	height:60px;
	z-index:206;
	
/*	background:rgba(0, 0, 0,0.1);
	padding:0 5px;
	border-radius: 20px;*/	
}

.logo2{
    position:fixed;
    left:30px;
    top:30px;
    width:200px; 
	height:80px;
	z-index:206;	
}

.contenedor_nosotros{
	width:100%;
	height:800px;
	position:relative; 
	background-color:#FFF;
}

@font-face {
    font-family:bebas;
    src: url(../fonts/bebas.ttf);
}
.titulonosotros{
	width:100%;
	height:25%;
	line-height:240px;
	color:#000;
	font-size:56px;
	text-align:center;
	background-color:#FFF;
	font-family: 'bebas';	
}
.textonosotros{
	margin:0 auto;
	width:60%;
	height:468px;
	text-align:justify;
	font-size:24px;
	background-color:#FFF;	
}

.contenedor_lineas{
	width:100%;
	/*width:869px;*/
	margin:0 auto;
	height:600px;
	position:relative;
	/*background-color:rgb(156, 186, 59); */
}

.caja{
	background-color:rgba(0, 0, 0,0.7);	
	width:100%;
	height:100%;
}
.caja:hover {
	background-color:rgba(0, 0, 0,0.0);	
}

.caja1{
	background-image:url(../imgs/segmento1.jpg) ;	
	float:left;
	width:20%;
	height:100%;
	cursor:pointer;	
	/*opacity: 0.3;*/
	/*filter: Alpha(opacity=30);*/ /* IE8 and earlier */
	transition: 0.5s;
	background-size:cover;
	
	position:relative;
}
/*.caja1:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}*/

.caja2{
	background-image:url(../imgs/segmento2.jpg);
	float:left;
	width:20%;
	height:100%;
	cursor:pointer;
	/*opacity: 0.3;
	filter: Alpha(opacity=30);*/ /* IE8 and earlier */
	transition: 0.5s;
	background-size:cover;
	position:relative;
}
.caja2:hover {
    /*opacity: 1.0;
    filter: alpha(opacity=100);*/ /* For IE8 and earlier */
}

.caja3{
	background-image:url(../imgs/segmento3.jpg);
	float:left;
	width:20%;
	height:100%;
	cursor:pointer;		
	/*opacity: 0.3;
	filter: Alpha(opacity=30);*/ /* IE8 and earlier */
	transition: 0.5s;
	/*background-size:contain;*/
	background-size:cover;
	position:relative;
}
.caja3:hover {
    /*opacity: 1.0;
    filter: alpha(opacity=100);*/ /* For IE8 and earlier */
}

.caja4{
	background-image:url(../imgs/segmento4.jpg);	
	float:left;
	width:20%;
	height:100%;
	cursor:pointer;
	/*opacity: 0.3;
	filter: Alpha(opacity=30);*/ /* IE8 and earlier */
	transition: 0.5s;
	background-size:cover;
	position:relative;
}
.caja4:hover {
    /*opacity: 1.0;
    filter: alpha(opacity=100);*/ /* For IE8 and earlier */
}

.caja5{
	background-image:url(../imgs/segmento5.jpg);	
	float:left;
	width:20%;
	height:100%;
	cursor:pointer;
	/*opacity: 0.3;
	filter: Alpha(opacity=30);*/ /* IE8 and earlier */
	transition: 0.5s;
	/*background-size:contain;*/
	background-size:cover;
	position:relative;
	
}
.caja5:hover {
    /*opacity: 1.0;
    filter: alpha(opacity=100);*/ /* For IE8 and earlier */
}

.textocaja{
	background-color:rgba(0, 0, 0,0.5);
	margin:0 auto;
	width:100%;
	height:12%;
	position:absolute;
	top:30%;	
	text-align:center;
	/*line-height:20%;*/
	padding:10% 0 0 0;
	color:#FFF;
	z-index:300;
}

.titulotextocaja{
	font-weight:bolder;
	font-size:24px;
}

.contenidotextocaja{
	/*padding:16px 0 0 0;*/
}

.cuadrofacebook{
	position:fixed;
	padding:14px;
	right:10px;
	top:280px;
	width:25px;
	height:25px;
	background-color:rgb(156, 186, 59);
	z-index:201;
	border-radius: 20px;
	/*box-shadow: 0px 0px 20px #000; */
	box-shadow: 0 0 9px 0px black;
}
.cuadroinstagram{
	position:fixed;
	padding:14px;
	right:10px;
	top:270px;
	width:25px;
	height:25px;
	background-color:rgb(156, 186, 59);
	z-index:201;
	border-radius: 20px;
	/*box-shadow: 0px 0px 20px #000;*/ /*#888888;*/
	 box-shadow: 0 0 9px 0px black;
}
.cuadrotwitter{
	position:fixed;
	padding:14px;
	right:10px;
	top:400px;
	width:25px;
	height:25px;
	background-color:rgb(156, 186, 59);
	z-index:201;
	border-radius: 20px;
	/*box-shadow: 0px 0px 20px #000;*//*#fff #888888 */
	 box-shadow: 0 0 9px 0px black;
}

.pie{
	/*max-width: 1024px;*/
	margin:0 auto;
	background-color:rgb(0,0,0);
	width:100%;
	height:200px;
	/*text-align: center;*/
    /*padding: 45px 0 0 0;*/
	color:#FFF;
	position:relative;
}
.cajapie{
	width:33%;
	height:155px;
	float:left;	
	padding: 45px 0 0 0;
	text-align:left;
	border-left-color:#FFF;
	border-left-width:medium;
}


.logopie{
    position:absolute;
    left:30px;
    top:80px;
    width:200px; 
	height:80px;	
}

.logopie img{
	width:100px;
}

}

.derechos{
	width:175px;
	/*height:18px;*/
	background-color:#FFF;
	color:rgba(0,0,0,0.8);
	border-radius: 20px;
	text-align:center;
	cursor:pointer;
	transition: 0.5s;
}
.derechos:hover{
	background-color:rgb(156, 186, 59);
	color:#FFF;	
}



.limpiar{ clear:both; }

.invisible{ display:none;}


.pc{
	display:block;
}
/*.pc img{
	width:1024px;
	height:768px;	
	display:block;
	margin:0 auto;
	
}
*/
.celular{
	display:none;
}
.tableta{
	display:none;
}

/*boton del menu*/
.botomheader{
	/*background-color:#f9f6cb;*/
	background-color:rgb(156, 186, 59);
	color:#FFF;
    position:fixed;
    /*left:10px;*/
	right:10px;
    top:20px;
/*    width:50px; 
	height:50px;
*/	z-index:206;	
/*	padding:opx;
	margin:0px;
	border:0px;
*/	border-radius: 20px;
	/*text-align:center;*/
	/*padding:12px;*/
	padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
	width:auto;
}

/*codigo para los contenidos apilados desplegables*/
/*cuadro donde van enmarcado los paneles*/
.contenedorpanel{
	color:rgb(146,24,23);
	background-color:#FFF;
	text-align:center;
	padding:150px 100px;
	/*text-align:justify;*/
}

.flip {
    padding: 5px;
    text-align: center;
    background-color:rgb(156, 186, 59);
    border: solid 1px #FFF;
	color:#FFF;
	cursor:pointer;
	font-weight:bold;
}


.panel {
    padding: 20px ;
    display: none;
	/*text-align:justify;*/
	background-color:#FFF;
	color:#000;
}

.panel ul {
    list-style-image: url(../imgs/avatardisecopequeno.png);
	list-style-position:inside;
}


.borde{
	border-left:solid #000;
}


/*fin de contenidos desplegables*/

/*despliegue de menu al 100 % de la pantalla*/
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 215;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
/*fin de menu de pantalla completa*/




/*elementos usados para las paginas de productos*/
.portada{
	width:100%; 
	height:600px;
	margin:0 auto;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	overflow:hidden;
}

.texto_rotador{
	width:50%;
	padding:10px;
	background:rgba(0,0,0,.6); /* rgba es para usar una 4ta propiedada que es la opacidad */
	color:#FFFFFF;
	font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align:center;
	position:absolute; /* esta propiedad es indispensable para ubicar por top y left*/
	top:50%;  /* el area superior esta a la mitad de el cuadro */
	left:25%; /* el argen derecho queda al un cuarto de la pantalla*/
}
.texto_titulo_rotador{
	font-size:40px;	
	font-weight:bolder;
	/*text-align:center;*/
}

#paginacion{
	/* estos elementos son de tipo texto y se deben tratar como tal*/
	position:absolute;
	bottom:20px;
	width:100%;    /*para que se pueda centrar el texto en la caja porque la caja sin medida se ubica a la izq*/
	text-align:center; /* como son elementos de texto se centran en el div asi*/
	font:40px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
	z-index:101;
	cursor:pointer;	
}


.contenedor_productos{
	width:100%;
	height:200px;
	padding:25px 0 0 0;
	background-color:#FFF;
	/*margin:25px 0;*/	
}

.cuadro_productos_margen{
	width:30%;
	height:100%;
	background-color:#FFF;
	float:left;	
}
.cuadro_productos_foto{
	width:267px;
	height:200px;
	background-color:#FFF;
	float:left;
	border-style:solid;
	border-color:#FFF;
	cursor:pointer;	
	overflow:hidden;
	/*box-shadow: 0 0 9px 0px black;*/

}
<!--las fotos son de 267*200 px-->
.cuadro_productos_foto img{
	width:267px;
	height:200px;
}

.cuadro_productos_texto{
	width:30%;
	height:80px;
	background-color:#fff;
	/*background-color:rgb(156,186,54);*/
	color:#000;
	float:left;	
	padding: 50px 20px ;
	/*border-style:solid;*/
	/*border-color:rgb(156, 186, 59)*/;
	border-color:#FFF;
	margin-top:2px;
}

.separador{
	width:100%;
	height:25px;
	background:inherit;
}

.catalogo{
	width:100%;
	height:60px;
	line-height:60px;
	background-color:rgb(156, 186, 59);
	text-align:center;
	font-size:24px;
}

.boton_catalogo{
	border:2px solid #FFF;
	padding:5px 10px;
	border-radius: 20px;
	color:#FFF;
	text-shadow: 0px 0px 9px black;
    box-shadow: 0 0 9px 0px black;	
}

.boton_catalogo:hover{
	background-color:rgba(0,0,0,0.8);
	color:rgb(156, 186, 59);
}