body {margin:0;font-family: 'Open Sans', sans-serif; text-align: center; color: #666; }
.containerHeader {padding:0 20px}
.container {max-width: 980px; margin: 0 auto; padding: 0 20px}
* {box-sizing: border-box;}

header {padding: 22px 0; background-color: #333; width: 100%; height: 90px;}
.logo {width: 140px; float: left}
.redes {float: right; padding-top: 7px}
.redes a {color: #ddd; margin-left: 5px; text-decoration: none;}
.redes a:hover {color: #aaa}
.redes .fab {font-size: 24px;}
.redes .btnContacto {display: none; margin-right: 12px;font-size: 14px;}

h1, h2 {text-transform: uppercase; color: #000; margin-top: 0}
h2 {letter-spacing: 1px}
.bajada {max-width: 490px; margin: 0 auto 50px; font-size: 16px; color: #444}


/* slide marcas */
.marcas { margin: 80px 0 80px;}
.owl-marcas .owl-item img {width: 70%;}
.owl-marcas .owl-stage-outer {padding-left: 15px;}


/* contacto */
.contentForm {}
.formContacto {max-width: 880px; margin: 40px auto; }
.formContacto p {margin-bottom: 5px; text-align: left}
.formTexto, .formConsulta {width: 100%; font-family: 'Open Sans', sans-serif; border: 0; border-bottom: 1px solid #333; font-size: 20px; padding: 10px;  border-radius: 3px}
.formTexto {height: 40px}
.formConsulta {height: 200px;  }
.btnForm {font-family: 'Open Sans', sans-serif; height: 40px; padding: 0 20px; margin-top: 15px; border-radius: 3px; font-size: 16px; background-color: #FFF; border: 2px solid #000 }
.btnForm:hover {background-color: #eee}
.enviada {margin: 80px 0 0}
.confirma p {font-size: 28px; margin: 20px 0; color: #bbb}
.volver {font-size: 16px; color: #666; text-decoration: none}
.volver:hover {color: #999}
footer {font-size: 14px; color: #fff; background-color: #333; padding: 30px 0; margin-top: 80px}
@media (min-width: 780px) {.redes .btnContacto {display: inline-block;}}
@media (min-width: 900px)  {}


/* ventana modal */
.overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 9999;}
.modal {box-shadow: 0 0 12px 0 #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:600px;}
.ocultaOverlay {display: none;}
#btnCerrar {width: 44px; height: 44px;line-height: 44px; color: #fff; background-color: #000; position: absolute; right: 0;top: 0; text-decoration: none; text-align: center;
    opacity: 0.65; font-style: normal; font-weight: bold; font-size: 28px; font-family: Arial, Baskerville, monospace;}
#btnCerrar:hover {opacity: 1}
.bannerWapp img {width: 100%; height: auto; display: block; }
@media screen and (max-width: 600px) {.modal {width: 100%}}


/* botón whatsapp */
.txtModal {position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding-bottom: 10px}
.link-wame {display: inline-block; background-color: #2abd2a; color: #fff; font-size: 20px; font-weight: bold; padding: 0 20px; line-height: 40px; border-radius: 20px; text-decoration: none; box-shadow: 0px 0px 6px 0px #0000009c; white-space: nowrap;}
.wappFix .link-wame {position: fixed; bottom: 20px; right: 20px; left:auto; transform: translateX(0); z-index: 999; width: 200px;}
.bannerWapp .link-wame {}
.link-wame:hover {background-color: #44bd44;}
.link-wame i {margin-right: 5px; font-size: 1.2em}
.consulta {color: #000; font-size: 1rem; max-width: 280px; line-height: 1.7rem; margin: 0 auto 5px}
@media (min-width: 460px) {.consulta{font-size: 1.2rem; line-height: 2rem; max-width: 350px; margin: 0 auto 20px} .txtModal{padding-bottom: 20px}}

/* carousel de reels */
.reels {padding: 5px; background-color: #d7d7d7}
.reels .owl-item {padding: 5px;}
.reels img {}
.reel-popup {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.reel-popup video {width: 400px; height: 717px}
.owl-reels .owl-dots .owl-dot span {background: #ffffff;}

/* sección h1 */
.content-H1 {padding: 80px 0 80px; background-color: #d7d7d7}
@media screen and (max-width: 768px) {.content-H1 {padding: 30px 20px;}}

/* foto y texto */
.row {display: flex; min-height: 400px}
.col {width: 50%; display: flex;align-items: center; background-color: #fff}
.colfoto1 {background-image: url(../img/fondo.jpg); background-size: cover; background-attachment: fixed}
.text-left {text-align: left; padding: 20px 20px 20px 40px }
.text-right {text-align: right; padding: 20px 40px 20px 20px; display: flex; justify-content: flex-end;}
.logo-pic {width: 60px; opacity: .2}

.colfoto2 {background-image: url(../img/calle50.jpg); background-size: cover; }
.colfoto3 {background-image: url(../img/calle12.jpg); background-size: cover; }
@media screen and (max-width: 768px) {.row {flex-wrap: wrap;} .col {width: 100%} .colfoto1 {order: 2; height: 300px} .colfoto3 {order: 2; height: 300px} .colfoto2 {height: 300px} .text-right, .text-left {justify-content: center; text-align: center; padding:40px 10px 20px}}


/* sucursales */
.sucursales {background-color: #d7d7d7; padding: 80px 0 80px}
.sucursal {width: 100%}
.sucursal img {width: 95%; border: 8px solid #eee}
.direccion {margin-bottom: 10px; font-size: 20px; color: #000}
.direccion::after {content: ''; display: block; width: 150px; height: 2px; background-color: #ccc; margin: 5px 0;}
.text-right .direccion::after {margin: 5px 0 0 auto}
.horario {margin: 0 0 30px; font-size: 15px; line-height: 26px}
strong {color: #000}
.tels {text-decoration: none; color: #000}
@media screen and (max-width: 768px) {.direccion::after {margin: 5px auto 0!important} .sucursales {background-color: #ffffff; padding: 60px 0 0;}}