@import url('body.css');
@import url('content.css');
@import url('menu-responsive.css');

/**/
#container{ width: auto; margin-right: auto; margin-left: auto; text-align: left; }
#content{ float:left; width:100%;}
#top{float:left; width:100%;  }
#nav{float:left; width:100%;}
#slide{float:left; width:100%; background-color: #f2f2f2; height:540px; overflow:hidden;}
#footer{float:left; width:100%; padding:30px; box-sizing:border-box; background-color:#1e5c64; color:#fff;  background-image:url(../img/whitenoise-50x25-2.png); background-repeat:repeat;  }


/*INTERNAS*/
#slide_interno{ float:left; width:100%; background-color: #007c8d; height:240px;  color:#fff; background-image:url(../img/HOME/Fondonuestraempresa.png); background-repeat:repeat; background-size:cover; }

#slide_interno h1 {
    color: #FFF;
    text-transform: uppercase;
    line-height: 250px;
    text-align: center;
	
}

.module_top {
    background-color: #a5c4c9;
    float: left;
    width: 100%;
    line-height: 50px;
	
}

/*CENTER*/
.center{ max-width: 1100px; width:100%; margin-right: auto; margin-left: auto; }
.center2{ max-width: 1380px; width:100%; margin-right: auto; margin-left: auto; }
@media only screen and (max-width: 1200px) {
	.center{ max-width: auto; width:96%; margin-right: auto; margin-left: auto; padding:0% 2%; box-sizing:border-box; }
	.center2{ max-width: auto; width:96%; margin-right: auto; margin-left: auto; padding:0% 2%; box-sizing:border-box; }
	#slide{ height:380px;}
	#owl-main .item img { height: 380px !important; width: auto;}
}

/*LINKS*/
.links{ text-decoration:none; color:#09F;}
.links:hover{ text-decoration:underline;}


.insta{
	display: block;
    width: 30px;
    height: 30px;
    
    text-decoration: none;
    float: left;
    margin: 20px 2px;
	background-image:url(../ico_01.png); background-repeat:no-repeat; background-size:cover; 
	text-indent:-100px;
	overflow:hidden;
	
}
.face{
	display: block;
    width: 30px;
    height: 30px;
    
    text-decoration: none;
    float: left;
    margin: 20px 2px;
	background-image:url(../ico_02.png); background-repeat:no-repeat; background-size:cover; 
	text-indent:-100px;
	overflow:hidden;
	
}

/*TOP*/
.logo{ float: left; width: 100%; height: 80px; }
.logo a { display: block; text-indent: -100px; height: 60px; margin:10px 0px; overflow: hidden; background-image:url(../img/HOME/LogoPietra.png); background-repeat:no-repeat; background-size:contain; background-position:left center;}
.top_box1{float:left;  width:25%;}
.top_box2{float:left; width:65%;}
.top_box3{float:right; width:110px; padding-top:5px;}

@media only screen and (max-width: 780px) {
.top_box1{float:left;  width:100%;}
.top_box2{float:left; width:100%;}
.menu { padding-right: 0px;  width: 100%;}
.top_box3{display:none;}

}


/*CONTENT*/
.module1{float:left; width:100%; padding:0px 0px; background-color:#007c8d; color:#fff; }
.module2{float:left; width:100%; padding:50px 0px;  }
.module3{float:left; width:100%; padding:50px 0px; position:relative; z-index:0; color:#fff; }
.module3::after{
	content:"";
	display:block;
	background-color:#007c8d;
	height:430px;
	width:1100px;
	right:0px;
	top:0px;
	z-index:-1;
	margin-bottom:100px;
	    position: absolute;
	
}

.module3 h1, .module3 a { color:#FFF;}

.module4{float:left; width:100%; padding:0px 0px; margin-top:50px;}
.module5{float:left; width:100%;margin-top:50px;  background-color:#fff; color:#007c8d; }.module5 h1 { color:#FFF;}
.module6{float:left; width:100%; padding:50px 0px;}


@media only screen and (max-width: 780px) {
.module3{background-color:#007c8d; }
.module3::after{display:none; }
}




/*COLUMNAS*/
.data { width:100%;}
.col_20{ width:18%;}
.col_23{ width:23%;}
.col_25{ width:25%;}
.col_30{ width:28%;}
.col_40{ width:38%;}
.col_50{ width:48%;}
.col_60{ width:58%;}
.col_70{ width:68%;}
.right { float:right !important}
.left { float:left !important}

@media only screen and (max-width: 780px) {
.col_20{ width:100%; margin-bottom:25px;}
.col_23{ width:100%; margin-bottom:25px;}
.col_25{ width:100%; margin-bottom:25px;}
.col_30{ width:100%; margin-bottom:25px;}
.col_40{ width:100%; margin-bottom:25px;}
.col_50{ width:100%; margin-bottom:25px;}
.col_60{ width:100%; margin-bottom:25px;}
.col_70{ width:100%;}
}


.mb{ margin-bottom:50px;}
.mt{ margin-top:50px;}
.ml{ margin-left:50px;}
.ml5{ margin-left:200px;}
.mr{ margin-right:50px;}
.mb2{ margin-bottom:25px;}
.mt2{ margin-top:25px;}
.ml2{ margin-left:25px;}
.mr2{ margin-right:25px;}
.textcenter{ text-align:center; }
.full{width:100%;}
.imgform {width: 50%;margin-top: 20%;margin-left: 35%; }
h1 {    color: #007c8d;  letter-spacing: -2px;    font-weight: 500;}
h2 {    color: #000;  letter-spacing: -1px; font-weight: 500; font-size:20px; }

/* /////////   GRALS  //////// */

.title{float:left; width:100%;}
.data{float:left; width:100%;}


.insumos{ height:150px; text-align:center;}
.imgsimple{ height:150px; text-align:center;}
.enlace{ color: #007c8d;  letter-spacing: -1px; font-weight: 500; font-size:16px; text-decoration:underline; }
.white{color: #FFF;}


/* /////////   GRALS  //////// */


/*FOOTER*/
.footer_box{float:left; width:100%;}
.footer_box1{float:left; width:20%; padding-right:5%; }
.footer_box2{float:left; width:75%;}

/**/
.footer_box_col{float:left; width:20%;}
.footer_box3_title{ float: left; width: 100%; margin-bottom: 15px; font-weight: 600; font-size: 14px; text-align: justify;}
.footer_box3_data{float:left; width:100%;}


/* /////////   GRALS  //////// */

.title{float:left; width:100%;}
.data{float:left; width:100%;}
.flex{display: flex; justify-content:center; }
.data_25{float:left; width:23%; margin:1%;text-align: center;}
.data_30{float:left; width:25%; margin:1%; text-align:center;}
.data_30 strong {
    color: #007c8d; /* Puedes cambiar "blue" por el color que desees */
}

@media only screen and (max-width: 780px) {
	.flex{ display:block; }
	.data_25{float:left; width:100%; margin:1%; box-sizing:border-box; }
	.data_30{float:left; width:100%; margin:1%; text-align:center; box-sizing:border-box;}
	.insumos { width: 100%; height: auto; }
	.footer_box1{float:left; width:28%;}
	.footer_box2{float:right; width:66%; }
	.footer_box_col{float:left; width:48%; padding-left: 2%;}
	.ml2{ margin-left:0px;}
}




/* //////////   MENUS  //////// */

/*MENU VERTICAL*/
/*.menuv { }*/
.menuv ul, li { list-style-type: none; }
.menuv ul { margin: 0; padding: 0; }
/*.menuv li {  }*/
.menuv a { text-decoration: none; color: #FFF; display: block; padding: 3px 6px; width: 100%; font-size:12px; text-align: justify;}



/*MENU HORIZONTAL*/
/*.menuh { }*/
.menuh ul, li { list-style-type: none; }
.menuh ul { margin: 0; padding: 0; }
.menuh li { float: left; margin-right:1px; }
.menuh a { text-decoration: none; color: #000; display: block;  color: #FFF; padding: 3px 30px; text-align: center;  background-color: #007c8d; }
.menuh a#primero { border-left: 1px solid #ACCFE8; }
.menuh a:hover { background: #DBEBF6; }


/*MENU CENTRADO*/
/*#menuc { }*/
#menuc ul { list-style-type: none; margin: 0 auto; padding: 0; text-align: center; }
#menuc li { display: inline; padding: 5px; margin: 1px; }
/*#menuc a { }*/
#menuc a:hover { background: #DBEBF6; }




/**/

/*CONTACTO*/

#contact-area * { margin: 0; padding: 0; }
#contact-area p { font-size: 1.3em; margin-bottom: 15px; }
#contact-area { width: 100%; margin-top: 0px; }
#contact-area input, #contact-area textarea { padding: 1%; width: 100%; font-size: 12px; border: none; color: #000; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; height:30px; line-height:30px; -webkit-border-radius: 5px;    border-radius: 2px; box-sizing:border-box; opacity: 0.8; background-color: #F0F0F0;}
#contact-area textarea { height: 155px; line-height:20px;}
#contact-area textarea:focus, #contact-area input:focus { border: 1px solid #900; }
#contact-area input.submit-button { 
    width: 100px;
    float: right;
    /* line-height: 50px; */
    border: solid 2px #00000000;
    color: #ffffff;
    -webkit-border-radius: 2px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color:  #007c8d ;
    margin-top: 10px;
    height: 50px;
 }
#contact-area label { float: left; text-align: left; margin-right: 0px; width: 100%; padding: 5px 0px;  }


/**/
.slogan_main{ float:left; width:400px;  margin-top: 150px; margin-left: 200px; position: absolute; z-index:2; color:#fff; }
.slogan_main span{ float:left; width:100%; font-size:50px; line-height:50px; margin-bottom:20px; font-weight: 800; }
.slogan_main b{ float:left; width:100%; font-size:30px; line-height:30px; margin-bottom:20px; font-weight: 200; }
.slogan_main a {	
	float: left;
    width: 200px;
    margin-top: 20px;
    background-color: #007c8d;
    display: block;
    padding: 5px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
	font-size: 20px;
}


@media only screen and (max-width: 780px) {
.slogan_main{ float:left; width:99%;  margin-top: 50px; margin-left: 10px; position: absolute; z-index:2; color:#fff; }
.slogan_main span{ font-size:35px; line-height:35px; font-weight: 600; }


}
.spacer {
    height: 200px; /* o el valor que desees */
    width: 100%; /* Ajusta según sea necesario */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.product-section {
    display: flex;
    max-width: 800px;
    margin: 20px auto;
}

.product-image {
    flex: 1;
}

.product-image img {
    width: 100%;
    height: auto;
}

.product-description {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

.product-description h1 {
    color:  #007c8d;
    
}

.product-description h3 {
    color: #000000;
}

.product-description p {
    line-height: 1.5;
}



body {
    text-align: center; /* Centra el contenido del cuerpo de la página */
    background-color: #fff; /* Cambia el color de fondo del cuerpo */
    color: #333; /* Cambia el color del texto */
  }

  h2 {
    
    color: #007c8d;; /* Cambia el color del título */
    text-align: center;
  }

  button {
    background-color:  #007c8d;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin: 0 auto; /* Centra el botón horizontalmente */
    display: block; /* Asegura que el botón se comporte como un bloque para aplicar el margen auto correctamente */
  }

  button:hover {
    background-color: #64c1d2 /* Cambia el color de fondo al pasar el mouse sobre el botón */
  }