﻿/* CSS */
/* Estilos especificos del web */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap&family=Open+Sans:wght@400;600;700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {display: block}
body {color:#343434;	font: 400 100% "Open Sans", sans-serif;	background:#fff;line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none}
table {border-collapse: collapse;border-spacing: 0}
p, li {margin:0px 0 10px; line-height:145%;list-style-type:none}
strong { font-weight:600}
a{color:#222;text-decoration:none}
a:link{color: #3F79DF}
a:active,a:focus,a:hover{color:#000; text-decoration:underline}
input[type=text]:focus{ outline:2px solid #0f5b3b}
noscript p{ clear:both; margin: 20px auto; width:95%; max-width:1200px; display:block; color:#000; clear:both}

/*-- Estilos para la Home --*/
#contenedor {width:100%}
#head { background:#fff; width:85%; margin:0px auto; text-align:center; position:relative}
h1 {margin:5px 0; float:left; vertical-align:middle;width:232px; text-align:left}
h1 img { display:inline; margin-right:15px; width:100%}
#head .horas { float:right; text-align:right; width:240px; margin-top:15px; text-align:left}
#head .horas img,#head .horas p { display:inline-block; vertical-align:middle; width:165px; color:#F88504; font-size:90%}
#head .horas p { margin:0}
#head .horas p strong { font-weight:600; color:#000; font-size:140%; display:block}
#head .horas img { width:59px!important; margin-right:10px}

.menu { width:100%; clear:both; background-color:#2b2b2b; text-align:left}
.menu ul{ width:85%; margin:0 auto; padding:10px 0}
.menu li {color:#fff;display:inline;margin:0;line-height:none;text-transform:uppercase; text-align:left!important; letter-spacing:0.05em}
.menu li a {padding:14px 15px; font-weight:600; font-size:85%; color:#fff; margin:0}
.menu li a:hover { background-color:#fff; text-decoration:none; color:#111}
.menu li.current {background-color:#fff; text-decoration:none; color:#111;padding:14px 20px; font-weight:600; font-size:85%}

#contenido { text-align: center}

/*--- CONTENIDO ---*/

.home { width:95%; margin:0 auto; text-align: center}
.home h2 { text-align:center;margin:60px 0 50px;font:700 180% Raleway, Segoe, "Segoe UI", sans-serif;display:block; color:#000}
.home h2 span{ width:60px; height:4px; background-color: #F56E06; margin:0 auto 20px; display:block}
.subTit { font-size:120%; font-weight:300; line-height:120%; margin:0 5%}
.destacados { width:90%; margin:0 auto 60px}

.destProd { width:18%; display:inline-block; margin:15px 0.5%; min-height:260px; padding:30px 1%; background-color:#f2f2f2; font-size:95%; vertical-align:top }
.destProd h3 { display:block; text-align:center; font-weight:bold;font-size:130%; color:#111; margin-bottom:20px} 
.destProd h3 a{ font-weight:bold;}
.destProd img { margin:10px auto 0px; display:block; width:100%; max-width:200px}
.destProd a{ color:#111;}

/*.cajaIzq,.cajaDcha { display:inline-block; width:47%; margin:50px 0 40px; vertical-align: top; font:400 100% Raleway, Segoe, "Segoe UI", sans-serif}
.cajaDcha a, .cajaIzq a{ color:#111;margin:0 0 8px 0; line-height:140% }
.cajaDcha a strong, .cajaIzq a strong{ color:#111;margin:0 0 8px 0;font-size:100%; display:block; font-weight:600 }
.cajaDcha a:hover, .cajaIzq a:hover{ text-decoration:underline}
.cajaDcha img,.cajaIzq img{ margin:0 0 8px 0}
.cajaIzq { margin-right:5%}
.cajaIzq h1, .menus h1{ font-size:300%; text-align:center; text-transform:uppercase; font-weight:700; color:#1b736a; line-height:80%}
.cajaIzq h1 span{display:none }
.cajaIzq h1 img, .menus h1 img{ display: block; margin:0 auto; width:100%; max-width:377px }
.cajaIzq p { line-height:160%}
.cajaDcha img,.cajaIzq img  { width:100%}*/


/* PAGINAS INTERIORES */
.interior { width:85%; margin:0 auto; text-align:center}
.titular h2 { text-align:center;margin:20px 0 60px;font:600 120% Raleway, Segoe, "Segoe UI", sans-serif;display:block; color:#000; line-height: 120%}
.titular h2 strong { font:700 200% Raleway, Segoe, "Segoe UI", sans-serif; color:#000; display:block; margin-bottom: 8px}
.titular h2 span{ width:60px; height:4px; background-color: #F56E06; margin:20px auto 0px; display:block}

#contenido .cabecera{ width:85%; margin:20px auto 0}
#contenido .cabecera img{ width:100%; border-top:1px solid #fff}
.aviso-legal {text-align:left!important;}
.aviso-legal h3 { color:#111; font-size:120%; margin:20px 0 10px; font-weight:600}
.aviso-legal p{font-size:95%; line-height:150%}

iframe { margin-top:20px}
.texto {width:100%; border-top:1px solid #ddd; padding-top:35px; margin-bottom:30px; text-align:left!important; color:#111111}
.txt {display:inline-block; vertical-align:middle;width:50%; margin-right:2%; text-align:left}
.txt li {display:inline-block; vertical-align:middle;width:50%; margin-right:2%} 

.colIzq {display:inline-block; vertical-align:middle;width:65%; margin-right:5%; text-align:left}
.colIzq ul{ margin:20px 0}
.colIzq ul li, .politica_calidad ul li, .colIzq2 ul li{ background: url(../img/check-box.png) left 5px no-repeat; padding-left:25px; line-height:150% }
.colIzq2 ol { margin:20px 0}
.colIzq2 ol li{ background: url(../img/ico-flecha-ver.gif) left 3px no-repeat; padding-left:20px; line-height:145%; margin-left:20px }

.colDcha { display:inline-block; width:30%; max-width:220px; vertical-align:top; text-align:left}
.colDcha img { display:block; margin-bottom:20px; width:100%; max-width:220px }
.colIzq  h3{font-size:140% ; line-height:140%; font-weight:600; text-transform:none; margin-bottom:15px}
.metaline { border:1px solid #ccc; padding:10px}

.servicio { display:inline-block; width:30%; max-width:180px; text-align:center; vertical-align:top; min-height:250px; font-size:90%; margin:10px 1%}
.servicio img{ width:100%; max-width:180px;}
.margenBot { margin-bottom:40px}

.politica_calidad { text-align:left; width:90%; margin:40px auto}
.politica_calidad h3{ text-align:center;margin:20px 0 40px;font:600 180% Raleway, Segoe, "Segoe UI", sans-serif;display:block; color:#000}
.politica_calidad h3 span{ width:60px; height:4px; background-color: #F56E06; margin:20px auto; display:block}
.politica_calidad div { text-align:center; margin-bottom:40px}
.politica_calidad div img, .txtPolit{ display:inline-block; width:60%; text-align:left; line-height:150%; vertical-align:middle}
.politica_calidad img{ max-width:220px!important}
.politica_calidad p a{ text-align:center; display:block; margin-top:30px }
.politica_calidad p a img{ display:inline; vertical-align:middle}
	
.submenu { display:inline-block; width:30%; max-width:250px; margin-right:5%; text-align:left}
.submenu li { font-size:110%; border-bottom:1px dashed #ccc; padding-bottom:8px; margin-bottom:8px; color:#f07e00}
.submenu li a { color:#333; font-size:90%}

.colIzq2 { width:60%; display:inline-block; vertical-align:top; text-align:left }
.colIzq2 h3{ border-left:8px solid #333; padding-left:10px; margin-bottom:20px;font:600 140% Raleway, Segoe, "Segoe UI", sans-serif; color:#333}
.colIzq2 h3 span{ font-size:80%; font-weight:400}
.colIzq2 h3.margen, .margen_li{ margin:40px 0}
.colIzq2 h4{ font:600 120% Raleway, Segoe, "Segoe UI", sans-serif; color:#333;margin:20px 0; background-color:#ddd; padding:8px}
.colIzq2 img{ width:100%; max-width:inherit}
table { margin:20px 0}
td,th { border:1px solid #ccc; padding:8px}
th { background-color:#ddd}

.margen_li li{ background:none!important; margin-bottom:20px}
.margen_li img, .margen_li span{ display:inline-block; width:40%;  vertical-align: middle; margin-right:10px; }

.texto p strong span{color:#b05c26; font:80% 'Trocchi', cursive; display:block; margin-top:5px}
.texto figure,.texto picture.picture, .texto .figure  { display:inline-block; vertical-align:middle; width:45%; padding:0; margin:0}
.texto figure img, .texto picture.picture img, .texto .figure img{ width:90%; max-width:600px}
.mov,#mov { display:none}

/* --  PIE  -- */
#pie{ width:100%; margin:20px auto;text-align:center;font-size:90%;background-color:#f6f6f4; position:relative }
.footer { margin:0 7% 20px; padding:30px 0 0; }
#pie img{ display:inline-block; vertical-align:middle; margin-right:5px; max-width:80px}
.pie-1,.pie-2,.pie-3,.pie-4{ display:inline-block; vertical-align:top; color:#222!important; width:24%}
address{font-style:normal; font-weight:400;line-height:140%}
.footer p strong, address strong{ color:#222; margin:0 0 10px; line-height:145%; font-weight:600; font-size:130%;display:block}
.pie-1 a { margin-top:8px; display:block; font-size:80%; font-weight:400}

.pieInf {  position:absolute; bottom:-50px; left:2%; width:96%; text-align:center}
.pieInf p {color:#444; margin:20px 0;font:400 90% Raleway, Segoe, "Segoe UI", sans-serif}

.contacto ul { border-bottom:1px solid #ddd; margin-top:20px; padding:30px 0}
.contacto li { display:inline-block; width:23%; vertical-align:top; font-size: 90%; line-height: 140%}
.contacto li img { display:block; margin:0 auto}
.contacto li strong { display:block; font-weight:600}

/* -- Formulario -- */
#formulario,.gracias{ padding:3%; border-radius:5px; margin:30px 0; text-align: left}
#formulario h3 { margin:0 0 25px!important; font-size:170%; font-weight:400; line-height:inherit}
#formulario hp3 { margin:0 0 25px!important}
.contenidoGen.contact #formulario{ margin-bottom:0px; padding:30px 10%; width:80%; text-align:left; border-radius:0}
label { display:block; line-height:140%}
input, textarea,select{font:100% Arial, Tahoma;border:1px solid #ccc;background-color:#fff;padding:5px 2%;color:#111;width:96%;margin-bottom:5px;outline:#0A57F3}
select{width:10%; display:inline-block}
textarea{min-height:180px;	margin-bottom:10px}
#formulario button { cursor:pointer; background: #222 none; margin:20px auto; border:none;padding:0; display: block; width: 270px; border-radius: 2px; color: #fff; font:500 110% Segoe, "Segoe UI", Arial; height:50px}
#formulario button:hover { background: #000 none}
.check {margin-right:5px;clear:both;width:15px;border-style:none;float:left;color:#ccc}
#formulario a {color:#666;	border-bottom:1px dotted #666}
#formulario a:hover {border-bottom:1px solid #666; text-decoration:none}
#formulario .datos input,#formulario .datos textarea{border-style:none;border:1px solid #eee; padding:5px;color:#333;font:95% Tahoma, "Trebuchet MS", Arial, Verdana;width:96%;background-color:#eee;margin:0 0 5px;list-style-type:none}
#formulario .datos textarea{height:180px;margin-bottom:10px}
.datos label { margin:10px 0 3px; font-size:90%}

@media only screen and (max-width: 1100px) {
.menu li a {padding:14px 16px; font-weight:600; font-size:80%}
#head { width:95%}
.destacados {width:100%}
.footer { margin:0 5% 20px }
.interior,#contenido .cabecera { width:90%}
}

@media only screen and (max-width: 950px) {
.with-sidebar .site-pusher {-webkit-transform: translateX(250px);transform: translateX(250px)}
.with-sidebar .site-cache {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6); z-index:9999}  
.site-pusher, .site-container {height: 100%}
.site-container { overflow: hidden}
.site-pusher {-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transform:translateX(0px);transform: translateX(0px)}
.site-content {position:absolute;top:136px;right:0;left:0;bottom:0;padding-top:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}
.header {position: static;height: auto}
.header_icon {position: absolute; top:15px; left:0px; z-index:999999;width:47px;height:45px;cursor: pointer; margin:12px 0 0 5px}
.header_icon:after{content:'';position:absolute;display:block;width:1.2rem;height:0;top:5px;left:14px;box-shadow:0 10px 0 1px #000, 0 18px 0 1px #000, 0 26px 0 1px #000}
.header_icon:hover {background-color:#eee; border-radius:25px}
#head {padding-bottom:0; width:100%;position:relative; border:1px solid #fff; height:80px}
h1 {margin-left:65px;float:left}

.menu {position: absolute;left: 0;top: 0;bottom: 0;background: #000 none; height:100%; width: 250px;-webkit-transform: translateX(-250px);transform: translateX(-250px)}
.menu ul{  margin:0; padding:0;padding-top:6px; text-align:left; width:100% }
.menu li {list-style-type:none;font:bold 90% Arial, Helvetica, sans-serif;border-bottom:1px solid #666;padding:10px 0;color:#fff;display:block;	text-transform:uppercase}
.menu li a {color:#fff; margin:0px 30px; padding:3px 9px; border:none}
.menu li:first-child {display:block}
.menu li a:hover { color:#000}
.menu li.current {padding:10px 0 10px 39px; margin:0; color:#fff; background-color:#666}

#contenido {max-width: inherit;_width:100%; padding:0}
.home { width:95%; margin:0 auto;}
.home h2 { margin:60px 5% 50px;font-size:150%}

.destProd { width:35%; min-height:260px; padding:30px 1%; font-size:95%;  }
.destProd.destProd24H { width:98%!important; display:block!important; margin:10px auto; min-height: inherit; padding:30px 1%; font-size:95%;  }
.destProd h3 { display:block; text-align:center; font-weight:bold;font-size:130%; color:#111; margin-bottom:20px} 
.destProd img { margin:10px auto 0px; display:block; width:100%; max-width:200px}

#pie{ margin:0 auto;font-size:100%}
.footer { padding:15px 0}
.pie-1,.pie-2,.pie-3,.pie-4{display:block;vertical-align:auto;width:90%;border-bottom:1px solid #ddd;margin:0 auto;font-size:90%;padding:10px 0}
.pie-2 { margin:8px auto}
.pie-4 { border-bottom:none; padding-bottom:0}
.pieInf { font-size:90%; bottom:-70px}
.pieInf p {color:#444; margin:20px 0;font:400 90% Raleway, Segoe, "Segoe UI", sans-serif}
.pieInf span{ display:block; margin-top:5px}
}
/* Mobile phones (Landscape) and Tablets (Portrait) */

@media only screen and (max-width: 650px) {
h1 { margin:10px auto!important; float:none}
h1 img { margin-left:15px}
#head { height: auto}
#head .horas { float:none; text-align:center; width:100%; margin:10px 0 0;padding:2px 0; border-top:1px solid #F88504; border-bottom:1px solid #F88504}
#head .horas img,#head .horas p { width:280px; font-size:80%; text-align:left}
#head .horas p strong { font-size:130%; display: inline; margin-left:5px}
#head .horas img { width:30px!important; margin-right:5px}

.home h2 { margin:40px 5% 20px;font-size:130%}
.destacados { width:95%; margin:0 auto 40px}
.destProd { width:95%; display:block; margin:15px auto; min-height: inherit; padding:10px 2% }
.destProd img { margin:10px auto 0px; width:90%}

.subTit { font-size:120%; margin:0 1%}
.cajaIzq,.cajaDcha { display:block; width:100%; margin:20px 0 20px}
.cajaIzq img,.cajaDcha img{ max-width:437px}
.interior h2{ font:600 150% Raleway, Segoe, "Segoe UI", sans-serif; line-height:100%; padding:20px 0 30px}
.col3{padding-top:0; width:95%; margin:0 auto}
.top{margin-top:0}

.interior { width:90%; position:relative}
.titular h2 { margin:0px 2% 0px;font-size:120%}
.titular h2 strong { font-size:150%;}
.titular h2 span{margin:20px auto 0px;}

.colIzq {display:block; width:100%; margin:10px auto}
.colIzq h3{font-size:110% ; line-height:130%;margin-bottom:15px}
.colIzq ul{ margin:20px 0}
.colDcha { display:block; width:100%; max-width: inherit; margin-top:30px}
.colDcha img { display:block; margin:0 auto 20px; max-width:220px }
.metaline { margin:0 auto 40px}

.servicio { display:inline-block; width:45%; max-width:180px; text-align:center; vertical-align:top; min-height: inherit; margin:10px 1%}
.servicio img{ width:100%; max-width:180px;}
.margenBot { margin-bottom:40px}

.politica_calidad { text-align:left; width:100%; margin:40px auto}
.politica_calidad h3{ margin:20px 0 20px;font-size:140%}
.politica_calidad h3 span{ width:60px; height:4px; background-color: #F56E06; margin:20px auto; display:block}
.politica_calidad div { text-align:center; margin-bottom:40px; }
.politica_calidad div img, .txtPolit{ display:block; width:100%;  }
.politica_calidad img{ max-width:150px!important; margin:0 auto 20px}

.colIzq2 { width:100%; display:block; margin:0 auto 40px }
.colIzq2 h3{ border-left:8px solid #333; padding-left:10px; margin-bottom:20px;font:600 140% Raleway, Segoe, "Segoe UI", sans-serif; color:#333}
.colIzq2 h3.margen{ margin:20px 0}
.submenu { display:block; width:100%; max-width: inherit; margin: 0 auto 20px; background-color:#eee; padding:10px;}
.submenu li { display:inline; font-size:90%; border-bottom: none; padding:0 8px 0 0; margin:0 2px 0; border-right:1px solid #999}
.submenu li a{ font-size:100%; }

.margen_li img, .margen_li span{ display:block; width:90%;  margin:10px 0; font-size:90%  }
.margen_li img { max-width:250px}

.txt {display:block; width:90%; margin:0 auto 20px}
.texto figure,.texto picture.picture, .texto .figure {display:block; width:95%; margin:0 auto}
.texto figure img, .texto picture.picture img, .texto .figure img{width:100%; max-width:600px}
.pieInf {font-size:90%; bottom:-80px}

}
