@charset "utf-8";
/* CSS Document */
* { padding: 0; box-sizing: border-box; font-family: 'corbel'}
@font-face { font-family: 'corbel'; src: url('../fonts/corbel.eot'); src: local(''), url('../fonts/corbel.woff') format('woff'), url('../fonts/corbel.ttf') format('truetype'), url('../fonts/corbel.svg') format('svg'); font-weight: normal; font-style: normal}
@font-face { font-family: 'corbel-bold'; src: url('../fonts/corbel-bold.eot'); src: local(''), url('../fonts/corbel-bold.woff') format('woff'), url('../fonts/corbel-bold.ttf') format('truetype'), url('../fonts/corbel-bold.svg') format('svg'); font-weight: normal; font-style: normal}
html { width: 100%; margin: 0px; padding:0px}
body {width: 100%; margin: 0px; padding:0px; background-color: #f1f1f1; font-family: 'corbel', Verdana, sans-serif}
.fondobody {background-color: #F1F1F1}
.bodyblanco {background-color: #ffffff}
#animate { position: absolute; top: 100px; left: 30px; width: 100px; height: 100px; animation: move 3s ease }
#animate2 { position: absolute; top: 100px; left: 30px; width: 100px; height: 100px; animation: rotate2 4s ease }
#animate3 { position: absolute; top: 80px; left: 300px; width: 100px; height: 100px; animation: rotate3 3s ease }
#animate_movil { position: absolute; top: 60px; left: 0px; width: 100px; height: 100px; animation: rotate4 4s ease }
#animate_movil img { left: 0px; width: 250px; height: auto}
@keyframes move { 0% { transform: translate(200px, 200px)} }	
@keyframes rotate2 { 0% { transform: rotate(-45deg)} }	
@keyframes rotate3 { 0% { transform: translate(-50px, -200px)} }	
@keyframes rotate4 { 0% { transform: rotate(-30deg)} }	
#contenedor { position: absolute; width: 100%; height: auto; z-index: 3; top: 0px; margin-right: auto; margin-left: auto; left: 0px; right: 0px}
header {position:fixed; width:100%; height:90px; background:#fff; z-index:12; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3)}
.miel {width: 0px; height: 0px; overflow: hidden}

/* menu */
header { height: 90px; background: #fff; color: #000; display: flex; justify-content: flex-end}
#btn-menu { display: none}
header label { font-size: 30px; cursor: pointer; display: none}
.menu ul { background: #fff; display: flex; list-style: none}
.menu ul ul { display: none}
.menu a { display: block; padding: 15px 20px; color: #000; text-decoration: none; line-height: 32px; font-weight: 700}
.menu a:hover { background: #fcbf1b}
.menu a i { margin-left: 10px}
.menu ul li:hover ul { transition: all 0.3s ease; display: block; position: absolute}
.submenu ul li a {padding: 4px 15px 4px 15px}
@media (max-width: 768px) {
  header label { display: block; padding-top: 16px; padding-right: 16px; transition: all 0.4s ease}
  .menu { position: absolute; top: 64px; left: 0; width: 70%; transform: translateX(-100%); transition: all 0.3s}
  .menu ul { flex-direction: column; display: block}
  .menu ul li:hover ul { display: none; position: static}
  .menu a i { position: absolute; right: 16px; line-height: 32px}
  #btn-menu:checked ~ .menu { transform: translateX(0%)}
}

.alignRight {text-align: right}
.caja_productos {vertical-align:top; padding:1%; width: 23%; float: left; text-align: center; margin-bottom: 30px; height: 450px; background-color: #eaeaea; margin: 1%}
.caja_productos:hover {background-color: #fff; box-shadow: 0px 0px 8px 3px #ccc; transition: all .4s ease}
.caja_productos h1 {margin:0px; text-align:left}
.caja_productos h2 {font-size:20px; margin:0px; text-align:left}
.caja_productos h3 {font-size:16px; margin:0px; text-align:left}

.caja_productos_detail {vertical-align:top; padding:1%; width: 100%; float: left; text-align: center; margin-top: 120px; margin-bottom: 20px; border: 1px #ccc}
.productos-foto {vertical-align:top; width:99%; position: relative}
.productos-foto img {max-width:100%; max-height:380px; width:auto; height:auto}
.img-contenedor {overflow:visible}
.productos-descripcion {vertical-align:top; width:99%; margin-left: 3%}
.productos-descripcion a:link, .productos-descripcion a:visited, .productos-descripcion a:active {color: #333 !important}
.productos-descripcion a:hover {color: #cc2121 !important; text-decoration: none}
.centro {text-align: center !important}
.preciosIncludes {font-size:16px !important}
.precios {font-size:14px !important}
.precio {font-size: 26px;font-weight: normal; font-style: normal}
h1 {font-size: 24px; margin-top: 15px; margin-bottom: 10px; text-align:left;font-weight: normal; font-style: normal}
h2 {font-size: 20px; margin-top: 10px; margin-bottom: 10px; text-align:left;font-weight: normal; font-style: normal}
h3 {font-size: 16px; margin-top: 15px; margin-bottom: 10px; text-align:left;font-weight: normal; font-style: normal}
.fondoBlanco {background-color: #fff !important}
.caja_contenido {text-align:center; border:0px; background-color: #fafafa}
.caja_contenido h1 {font-size:26px; margin:0px; text-align:left}
.caja_contenido td {padding:10px} 
#ficha-foto {vertical-align:top; float:left; width:50%; position: relative}
#ficha-foto img {width:98%; height:auto; max-width: 520px}
.imagenok {padding-bottom: 10px; margin: 3px; float:none}
.tablaPetita {width: 90%; max-width: 600px; height: auto}
#ficha-detalles {vertical-align:top; float: left; width:46%; margin-left: 2%; text-align:left}
#ficha-detalles p {text-align:left}
.euro {font-size:20px; text-decoration: none;font-weight: normal; font-style: normal}
.caja {padding: 1%; width:95%}
#contenedor2 {position: relative; max-width: 1400px; width:97%; height: auto; z-index: 3; top: 10px; margin-right: auto; margin-left: auto; left: 0px; padding: 1%}
.cajaDescripcion {border-top: 1px solid #ccc; width: 45%; text-align: left; height: auto; padding: 3%; float: left}
.cajaFormato {border-top: 1px solid #ccc; width: 45%; text-align: left; height: auto; padding: 3%; float: left}
.cajaTabla {border-top: 1px solid #ccc; width: 90%; text-align: left; height: auto; padding: 3%}

.cajaAddImagen {float: left; width: 15%; height: auto}
.cajaAddImagen img {width: 95%; height: auto}
.cajaAddTexto {float: left; width: 60%; height: auto}
.cajaAddTexto p {line-height: 110% !important}
.imagenHeader {width: 100%; height: auto}
.imagenHeader img {width: 100%; height: auto; overflow: hidden}
.tituloHeader { font-size:40px !important; font-weight: bold; color: #fff !important }
nav { float:right; margin-top: 0px}
.anchoTercio {width: 30% !important; margin-right: 1%}
.anchoMitad {width: 45% !important; margin-right: 1%}
.anchoQuinto {width: 18% !important; margin-right: 1%; text-align: left; z-index: 20}
.anchoQuinto h6 {font-size: 14px}
.anchoQuinto p {font-size: 13px}
.carrito {height: 30px; width: auto}
.max100px {max-width:100px}
.max200px {max-width:200px}
.max250px {max-width:250px}
.max300px {max-width:300px}
.max350px {max-width:350px}
.max400px {max-width:400px}
.max450px {max-width:450px}
.max500px {max-width:500px}
.max550px {max-width:550px}
.max600px {max-width:600px}
.max650px {max-width:650px}
.max700px {max-width:700px}
.max800px {max-width:800px}
.max900px {max-width:900px}
.max1000px {max-width:1000px}
.max1200px {max-width:1200px}
.max1400px {max-width:1400px}
.imgListado {margin: 15px}
.formulario {background-color: #ffffff}
.error {background-color: #cc2121; color: white}
.flota_right {float: right}
textarea {width: 95%; height: 250px}
.instagram {width: 80%; margin: auto}
.instagramTextArea {width: 95%; height: 250px}
.limpiar {clear: both}
.cookies {padding-left:5px;text-decoration:none;color:#ffffff}
.cerrarh {width:20px; margin-top: 2px; cursor:pointer; float: right}
.text_right {text-align: right}
.text_left {text-align: left !important}
.text_center {text-align: center}
.laboratoriosTexto {width: 67%; float: left; padding: 2%}
.laboratoriosImagenes {width: 27%; float: left; padding: 2%}
.laboratoriosImagenes img {width: 100%; height: auto}
.centrar {text-align: center}
.ecoembes {position: relative; width: 200px; height: auto; margin-left: 0; margin-right: 0; margin: auto; float: right}
#mapa {width:100%; height: 400px; border: 2px solid #ccc}
.campo_formulario { max-width: 600px; width:100%; background-color: rgba(250,250,250,1); color: #444;  border: 1px #999 solid; padding: 6px; border-radius: 3px }
.campo_formulario_buscar { width:60%; background-color: rgba(255,255,255,1); color: #444;  border: 1px #999 solid; padding: 6px; border-radius: 3px}

.fotoIndex {width: 18%; margin: 1%; float: left; height: auto; padding: 0px}
.fotoIndex:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3)}
.fotoIndex a {padding: 0px}
.fotoIndex img {width: 100%; height: auto}
.catalogo {max-width: 400px; width: 30%; height: auto; float: left; margin-right: 20px}
.catalogo:hover {opacity: .7}
.catalogoHome {max-width: 150px; width: 30%; height: auto; float: left; margin-left: 60px; margin-bottom: 200px}
.catalogoHome:hover {opacity: .7}


.calidad {width: 50%; max-width: 450px;  height: auto; margin-left: 40px; margin-bottom: 80px}

#cabecera {position:relative; width:100%; height:55px; max-width: 1400px;margin-left: auto; margin-right: auto}
.logoempresa {position:absolute; left: 30px; border:0px; height:auto; width:250px; float:left; margin-top:7px}
.logo {height:auto; width:100%}
.botonmenu { margin: 20px 10px 10px 20px; border:0px; height:0px; width:0px; float:right; cursor:pointer; z-index:200; visibility:hidden}

.bodyContacto {background-color: rgba(61,61,61,1); width: 95%}
.tituloSubMenu {font-size: 16px; color:#000000; font-weight: bold}
.opcionMenu {font-size: 16px; color:#000; margin-right: 10px; font-weight: bold}
.opcionMenu:hover {color:#fcbf1b; cursor: pointer}
.botoncerrar {float:right;color:#FBFBFB; margin: 2px; padding:0px}
.botoncerrar img { width:20px; height:auto; cursor:pointer}
.flotar { float: left}
.enana { font-size: 12px; margin-top: -20px; color: #888888}
.miel {width: 0px; height: 0px; overflow: hidden}
.width1000px {max-width: 1000px}
.width1200px {max-width: 1200px}
.width700px {max-width: 700px}
.cajaAnuncio {border: 1px solid #aaaaaa; padding: 10px}
.icono {width: 14px; height: auto}
.video_container {width: 95%; height: auto; float: left; margin: 1%; margin-left: 10%; max-width: 700px}
.video { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.items {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #fcbf1b !important; color: #fff !important; border: 1px solid #fcbf1b !important}
.items:hover {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #fff !important; color: #000 !important; border: 1px solid #fcbf1b !important}
.items2 { font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #82101b; color: #fff !important}
.items2:hover {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #fcbf1b; color: #fff !important}
.items3 {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px; margin: 2px; background-color: #fcbf1b; color: #fff !important}
.items3:hover { font-weight: bold; line-height: 26px; font-size: 16px; padding:10px; margin: 2px; background-color: #82101b; color: #fff !important}
#guasap a { position: fixed; z-index: 9999; right: -25px; float: right; bottom: 20px; margin-top: -25px; cursor: pointer; width: 180px; max-width: 250px; color: #fff !important; font-size: 16px; text-align: left; padding: 10px 10px 10px 5px; margin: 0 auto 0 auto; background: #20B038;transition: All 0.5s ease; text-decoration: none}	
#guasap a:hover { right: 0px; cursor:pointer; color: #666; text-align: center; text-decoration: none; background: #333}	
#guasap2 a {text-align: center; z-index: 9999; right: -25px; cursor: pointer; width: 180px; max-width: 250px; color: #fff !important; font-size: 16px; padding: 10px; margin: 0 auto 0 auto; background: #20B038; transition: All 0.5s ease; text-decoration: none}	
#guasap2 a:hover, #guasap2:hover { right: 0px; cursor:pointer; color: #666; text-align: center; background: rgba(0,130,251,1.00); text-decoration: none !important}	
#sms2 a {z-index: 9999; right: -25px; cursor: pointer; width: 180px; max-width: 250px; color: #fff !important; font-size: 16px; text-align: center; padding: 10px; margin: 0 auto 0 auto; background: rgba(0,130,251,1.00); transition: All 0.5s ease; text-decoration: none}	
#sms2 a:hover { right: 0px; cursor:pointer; color: #666; text-align: center; text-decoration: underline}	
#presupuesto {cursor:pointer; width:100px; height:45px; background-color: #fcbf1b; opacity:1; position:fixed; top: 70px; right: 0; z-index:2; transition: all .9s ease; text-align: center; font-size:16px; font-weight:bold; padding: 4px; color:#fff; text-decoration:none}
#cajacontacto { position:absolute; width:0px; background-color: rgba(61,61,61,1) ; height:2000px; max-width:480px; top: 55px; right: 0px; visibility:hidden; z-index:6; padding-top: 20px; transition: all 0.6s ease} 
#contactoiframe {border: 0px; width:95%; height:98%; padding: 0}
.redessociales { z-index: 8; width: 100%; height: 100px; margin-bottom: 20px}
.redessociales img { border-width:0px; height:auto; filter: grayscale(100%); opacity:1}
.redessociales img:hover { border-width:0px; height:auto; filter: grayscale(0%); opacity:1}
.redsociallogo {width: 35px; height: auto; opacity:1; border:0; margin-top: 80px}
.redsociallogo:hover {opacity:.8}
.pagos { z-index: 8; width: 100%; height: 200px}
.pagos img { border-width:0px; height:auto}
.pagos img:hover {opacity:.8}
.unpixel {width: 1px; height: 1px; overflow: hidden}
#viruta { z-index: 8; width: 90%; height: auto; max-width: 400px}
#viruta p img {width: 90%}
#principal { width:95%; height: auto;  margin-left:auto; margin-right:auto; position: relative; max-width: 1400px; top: 90px; margin-bottom: 180px}
#principal .numero {color: #666666; font-size: 16px; text-align: right; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: normal; font-style: normal}
.img650 { max-width: 650px; width: 100%; height: auto}
#principal h1 {	color: #404040; font-size: 30px; margin: 60px 10px 10px 0px; font-weight: 300; font-style: normal; line-height: 110%; text-align:center; margin-left: 10%; margin-right: 10%}
#principal h2 { color: #404040; font-size: 18px; font-weight: 400; font-style: normal; line-height: 110%; text-align: center; margin-left: 10%; margin-right: 10%}
#principal h3 { color: #555; font-size: 16px; line-height: 110%; margin-top: 15px; margin-bottom: 10px; font-weight: 400; text-align:center}
#principal h4 { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; text-align:center; margin-left: 10%; margin-right: 10%}
#principal h5 { color: #555; font-size: 16px; text-align: center; line-height: 150%; margin-top: 0px; margin-bottom: 0px; font-weight: 400; font-style: normal; padding: 0px 0px 0px 20px; margin-left: 10%; margin-right: 10%}
#principal h6 { color: #373126; font-size: x-small; text-align: right; font-weight: 400; font-style: normal;margin-left: 10%; margin-right: 10%}
#principal p { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; margin-left: 10%; margin-right: 10%}
#principal ul { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%}
#principal ol { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%}
#principal li { margin-left: 60px; padding: 0px; color: #444; font-size: 16px; text-align: left; line-height: 150%; white-space: normal}
/*#principal a:hover img { background-color: #fff !important; text-decoration:none; opacity:0.8}
*/
#principal a:link, #principal a:visited, #principal a:active { color: #fcbf1b; text-decoration: none; text-align: right; padding: 0px}
#principal a:hover { color: #000; text-decoration: undeline !important}

.divfotocentral { text-align:center}
.divfotocentral img { width: 100%; height:auto; margin-bottom: 20px}
.fototexto { margin-left: auto; margin-right: auto; margin-top: 20px;margin-bottom: 20px; border:0px; text-align: center; float: none; clear: both; width: 100%; height: auto}
.columnas2 { text-align: justify !important; column-count: 2; column-gap: 40px; margin-bottom: 30px}
.columnas3 { text-align: justify !important; column-count: 3; column-gap: 20px; margin-bottom: 30px}
.columnas4 { text-align: justify !important; column-count: 4; column-gap: 10px; margin-bottom: 30px}
.columnas2 p, .columnas3 p, .columnas4 p {margin-top: 0px !important}
.imagenesAnchas {width: 100%}
.portfolioimagen {width:75%; float:left; max-width:640px; margin-left: 2%}
.portfolioimagen img {width:100%; max-width:600px; height:auto}
.portfolioclear {clear:both; margin-bottom:40px}
.portfoliotexto {width:25%; float:left; text-align: left !important}
.portfoliotexto h2 {width:100%; max-width:340px; text-align: left !important; margin-bottom: 10px}
#masTrabajos { width: 100%; z-index: 60; margin-left:auto; margin-right:auto; max-width: 1400px; text-align:center; margin-bottom: 80px}
#masTrabajos h3 { color: #555; font-size: 22px; line-height: 110%; margin-top: 10px; margin-bottom: 10px; font-weight: 400}
#masTrabajos h5 { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal}
#masTrabajos p { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal}
#masTrabajos img {margin:5px; width:23%; height:auto}
#lateral { width: 100%; font-size: 16px; text-align:center; margin-bottom:60px}
#lateral h4 { color: #555; font-size: 16px; text-align: center; line-height: 150%; font-weight: normal}
#lateral ul { color: #769D00; font-size: 16px; text-align: center; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px}
#lateral li { margin: 0px; padding: 0px; color: #769D00; font-size: 16px; text-align: center; white-space: normal; font-weight: normal}
#lateral a:link, #lateral a:visited, #lateral a:active { color: #555555; text-decoration: none; text-align: center}
#lateral a:hover { text-decoration: underline; color: #000000}
#lateral a:hover img {	background-color: #fff !important; text-decoration:none; opacity:0.6}
#piedepagina { width:100%; margin-left:auto; margin-right:auto; height: auto; color: #000; font-size: 14px; text-align: center; clear: both; background-color: #fcbf1b; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3) inset}
#piedepagina img {margin-top: 20px; vertical-align: top}
#piedepagina p a:link, #piedepagina a:visited, #piedepagina a:active { color: #000; text-decoration: none; text-align: right; margin: 4px; padding: 4px; line-height: 160%}
#piedepagina p a:hover { text-decoration: none; color: #fff; margin: 4px; padding: 4px; line-height: 160%}
.pieInterior {width: 80%; margin-left:auto; margin-right:auto}

#formulario_contacto { color: #fff; font-size: 16px; margin-top: 0px; margin-left: 15px; font-weight: normal; font-style: normal}
#formulario_contacto a:link, #formulario_contacto a:visited, #formulario_contacto a:active { color: #fcbf1b; text-decoration: none; text-align: center}
#formulario_contacto a:hover { text-decoration: underline; color: #fff}
#formulario_contacto table { width:100%}
#formulario_contacto td {font-size:16px; vertical-align: top}
#formulario_contacto input {background-color: #ffffff; width:100%; font-size: 16px; padding: 4px; border: 0px solid #eee !important}
#formulario_contacto textarea {color: #222; border: 0px solid #eee; background-color: #ffffff; width:100%; height:300px; font-size: 16px; font-weight: normal; font-style: normal; font-family: 'corbel', Verdana, sans-serif}
.check { font-size: 22px; background-color: red !important; width: auto !important}
#slidescma {padding: 0px; margin: 0 px; width:98%; overflow:hidden; max-height: 315px; z-index:0}
#slidescma img {padding: 0px; float:none; margin: auto; width:100%}
#slidescma ul {margin:0; padding:0; list-style-type:none}
#slidescma li {margin:0; padding:0}
#sliderhome {float:left; text-align: left; height:auto;; width:50%; max-width:500px; margin-bottom:200px}
#textohome{float:right; text-align:right; width:100%; margin-bottom:200px}
#textohome h1 {text-align: right!important}
#barritaloca {position:fixed; left:0px; right:0px; bottom:0px; width:100%; min-height:50px; z-index: 99999; background: #444; color:#fafafa; display: block} 
#barrita_buscar {visibility: hidden; position: fixed; width: 600px; margin: auto; height: 60px}
.barrita_buscar_input {font-size:16px; width: 60%; padding:1px; border-radius:4px; background-color:#cccccc} 
.barritaloca_texto {position: relative; width:75%; text-align:center; float: left; top: 20px; padding-left: 1%}
.barritaloca_texto a {color: #fafafa}
.barritaloca_boton { position: relative; width:10%; margin-left:1%; text-align:center; float: left; top: 10px}
.barritaloca_ok { position: relative; padding:20px; text-decoration:none; background:#fcbf1b; color:#fff; top:15px; cursor:pointer}
.barritaloca_ok:hover { background:#ffffff; color:#cc2121; text-decoration: none !important; cursor:pointer}
.barritaloca_info {padding-left:5px; text-decoration:none; color:#ffffff}




.button, .button:visited, .button:active {display: inline-block; padding: 10px !important; text-decoration: none; border-top: 0px; border-left: 0px; border-right: 0px; position: relative; cursor:pointer; transition: all 0.3s ease; border-bottom: 1px solid rgba(0,0,0,0.25); top: 1px; text-align: center}
.uno.button, .uno.button:visited {font-size: 16px; font-weight: bold; background-color: #fff; color:#fcbf1b; border: 1px solid #fcbf1b; margin: 5px}
.uno.button:hover {font-weight: bold; background-color: #fcbf1b; color:#fff !important; border: 1px solid #fcbf1b; text-decoration: none}
.petit.button, .petit.button:visited {font-size: 12px; font-weight: bold; background-color: #fcbf1b; color:#ffffff; text-decoration: none; margin: 5px}
.petit.button:hover {font-size: 12px; font-weight: bold; background-color: rgba(0,130,251,1.00); text-decoration: none}
.dos.button, .dos.button:visited {font-size: 16px; font-weight: bold; background-color: #fff; color:#fcbf1b; border: 1px solid #fcbf1b; text-decoration: none; margin: 5px}
.dos.button:hover {font-size: 16px; font-weight: bold; background-color: #fcbf1b; color: #fff !important; border: 1px solid #fcbf1b; text-decoration: none}
.tres.button, .tres.button:visited {font-weight: bold; background-color: #fcbf1b !important; color:#fff !important; border: 1px solid #fcbf1b; text-decoration: none; margin: 5px}
.tres.button:hover {font-weight: bold; background-color: #fff !important; color:#fcbf1b !important; border: 1px solid #fcbf1b; text-decoration: none}
.boton_grande {padding: 30px 40px 30px 40px !important}
.boton_grande:hover {padding: 30px 40px 30px 40px !important}
.boton_petit {padding: 4px 4px 4px 4px !important}
.boton_petit:hover {padding: 4px 4px 4px 4px !important}
.botonEnviar {width: 96px !important; padding: 10px !important; border: 0px solid #fff !important}
.sombra { border: #ccc 0px solid; background: #FFFFFF}
#principalTpv { width:100%; margin-left:auto; margin-right:auto; top: 80px; position:relative; max-width: 1400px; margin-bottom:120px}
.tpvEntrada {padding: 4px; background-color: #fff; color: #333}
#miFrame { border: 0px solid #FF6699; width: 80%; height: 900px; margin-left: 5%}


.link { cursor: pointer; font-size: 15px; position: relative; white-space: nowrap; color: #333 !important; color: #000 !important}
.link:hover {color: #fcbf1b !important}
.link::before, .link::after { position: absolute; width: 100%; height: 3px; background: currentColor; top: 100%; left: 0; pointer-events: none}
.link::before { content: ''} 
.link--metis::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 0.4s}
.link--metis:hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1)}
#myBtn { display: none; position: fixed; bottom: 65px; right: 5px; z-index: 99; cursor: pointer; width: 80px; height: auto; transition: ease .4s all; opacity: .6}
#myBtn:hover { opacity: 1; transition: ease .4s all}
.logoCobre {width: 118px}
.logoAenor {width: 40px}
/* animaciones */
  /* fadeInUp */  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0,80px,0)}
    to { opacity: 1; transform: translate3d(0,0,0)}
  }
  @-webkit-keyframes fadeInUp {
    from { transform: translate3d(0,80px,0) }
    to {transform: translate3d(0,0,0);opacity: 1}
  }
  .fadeInUp {opacity: 0; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; animation-duration: 1s; animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both}  
  
   /* fadeInDown */  
  @-webkit-keyframes fadeInDown {
    from { opacity:0; -webkit-transform: translatey(-10px); -moz-transform: translatey(-10px); -o-transform: translatey(-10px); transform: translatey(-10px)}
    to { opacity:1; -webkit-transform: translatey(0); -moz-transform: translatey(0); -o-transform: translatey(0); transform: translatey(0)}
  }
  @-moz-keyframes fadeInDown {
    from { opacity:0; -webkit-transform: translatey(-10px); -moz-transform: translatey(-10px); -o-transform: translatey(-10px); transform: translatey(-10px)}
    to { opacity:1; -webkit-transform: translatey(0); -moz-transform: translatey(0); -o-transform: translatey(0); transform: translatey(0)}
  }
  @keyframes fadeInDown {
    from { opacity:0; -webkit-transform: translatey(-80px); -moz-transform: translatey(-80px); -o-transform: translatey(-80px); transform: translatey(-80px)}
    to { opacity:1; -webkit-transform: translatey(0); -moz-transform: translatey(0); -o-transform: translatey(0); transform: translatey(0)}
  }
  .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s}

  /* fadeInLeft */
  @-webkit-keyframes fadeInLeft {
    from { opacity:0; -webkit-transform: translatex(-100px); -moz-transform: translatex(-100px); -o-transform: translatex(-100px); transform: translatex(-100px)}
    to { opacity:1; -webkit-transform: translatex(0); -moz-transform: translatex(0); -o-transform: translatex(0); transform: translatex(0)}
  }
  @-moz-keyframes fadeInLeft {
    from { opacity:0; -webkit-transform: translatex(-100px); -moz-transform: translatex(-100px); -o-transform: translatex(-100px); transform: translatex(-100px)}
    to { opacity:1; -webkit-transform: translatex(0); -moz-transform: translatex(0); -o-transform: translatex(0); transform: translatex(0)}
  }
  @keyframes fadeInLeft {
    from { opacity:0; -webkit-transform: translatex(-100px); -moz-transform: translatex(-100px); -o-transform: translatex(-100px); transform: translatex(-100px)}
    to { opacity:1; -webkit-transform: translatex(0); -moz-transform: translatex(0); -o-transform: translatex(0); transform: translatex(0)}
  }
  .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s}
  .fadeInLeft2 { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s}

/* MEDIA QUERIES */
@media only screen and (max-width: 1100px) {
.botonmenu {margin: 10px; border:0px; height:30px; width:auto; float:right; cursor:pointer; z-index:200; visibility:visible}
#menuprincipal {position:absolute; top:76px; left:-300px; padding:2%; width: 400px; max-width: 96%; height:auto; background-color: rgba(0,0,0,1) ; z-index:10; visibility:hidden; overflow:visible; transition: all 0.6s ease}
#menuprincipal h2 { font-size:16px; height:auto}
.menu {float:none; margin-left:5px}
.submenu {height:0; position:relative; top:0px; left:0px; width:100%; visibility:hidden; padding: 2px; overflow:hidden}
.submenu li { margin-bottom:10px; height: auto; margin-top: 3px}
.submenu a {font-size:16px}	
.botoncerrar { visibility:hidden}
#barritaloca {height:90px; line-height:20px}
.flotar { float: none; width: 99% !important}
.portfolioimagen {width:95%; float:none; max-width:640px}
.portfoliotexto {width:85%; float:none; text-align: left !important}  
#masTrabajos img { width:150px; height:auto}	
.columnas2 { text-align: justify !important; column-count: 2; column-gap: 40px}
.columnas3 { text-align: justify !important; column-count: 2; column-gap: 20px}
.columnas4 { text-align: justify !important; column-count: 2; column-gap: 10px}
#animate img { width: 300px; height: auto}
#animate2 img { width: 600px; height: auto}
#animate3 img { width: 400px; height: auto}
.video_container {width: 95%; height: auto; float: left; margin: 1%; margin-left: 2%}
.anchoQuinto {width: 90% !important; margin-right: 1%} 
    #contenedor2 {width: 98%}
}
@media only screen and (max-width: 768px) {
.logoempresa { margin-left: 0px; border:0px; height:auto; width:145px; float:left; margin-top:12px}
#menuprincipal {position:absolute; top:76px; left:-300px; padding:2%; width: 400px; max-width: 96%; height:auto; background-color: rgba(0,0,0,1) ; z-index:10; visibility:hidden; overflow:visible; transition: all 0.6s ease}
#menuprincipal h2 { font-size:16px; height:auto}
.submenu li { margin-bottom:2px; height: auto; margin-top: 3px}
.submenu a {font-size: 16px}
#principal h1 {	font-size: 22px}
#principal .fototexto { float: none; width:100%; max-width: 95%}
#lateral {float: none}
#barritaloca {height:90px; line-height:17px}
#sliderhome {float:none; width:98%; height:auto; margin-bottom:20px}
#textohome {float:none; width:98%; margin-bottom:20px}
.flotar { float: none; width: 99% !important}
#presupuesto { top: 70px; position:absolute}
.portfolioimagen {width:95%; float:none; max-width:640px}
.portfoliotexto {width:85%; float:none; text-align: left !important}  
#masTrabajos img { width:150px; height:auto}
.columnas2 { text-align: justify !important; column-count: 1; column-gap: 40px}
.columnas3 { text-align: justify !important; column-count: 1; column-gap: 20px}
.columnas4 { text-align: justify !important; column-count: 1; column-gap: 10px}
#animate img { width: 200px; height: auto}
#animate2 img { width: 400px; height: auto; animation: rotate5 4s ease }
#animate3 img { width: 200px; height: auto}
#viruta { z-index: 8; width: 80%; height: auto}
.pagos a img {width: 90%}
    
.caja_productos {width: 98%}   
.productos-foto {float:none; width:100%; text-align:center} 
.productos-descripcion {float: none; width:98%}
.precio {font-size: 20px}
h1, .caja_contenido h1 {font-size: 20px}
#ficha-foto {float:none; width:95%; text-align:center}
#ficha-foto img {margin-bottom: 15px; width:98%}    
#ficha-detalles {float:none; width:100%; text-align:center}    
.euro {font-size: 16px; font-weight:bold}    
 #contenedor2 {width: 98%}   
    
    
    
    
    
}
@media (max-width: 480px){
.caja_productos {width: 98%}   
.preciosIncludes {font-size: 16px !important}  
h1, .caja_contenido h1 {font-size: 20px}   
#ficha-foto {float:none; width:95%; text-align:center}
#ficha-foto img {margin-bottom: 15px; width:98%}    
#ficha-detalles {float:none; width:100%; text-align:center}   
 #contenedor2 {width: 95%}   
}