header{max-width:100%; height:50px; background:#20338f; margin:0px auto; color:#fff; z-index:9999; font-family:'Open Sans'; font-size:13px; padding:0 20px; overflow:hidden;}
header > .top {max-width:1280px; margin:auto;}
header > .top > span{padding:15px 0;}
header > .top > span.left{float:left;}
header > .top > span.left > a{color:#fff; font-weight: 700}
header > .top > span.right {float:right;}
header > .top > span.right > p{float:left; margin-right: 5px;}
header > .top > span.right > img{float:left; margin-right:2px;}

.nave {margin:auto; max-width:1280px; position:relative; height:122px;}
.nave > img {float:left; margin-top:20px; margin-left:20px;}

.wrap {max-width:1280px; margin:auto; position:relative; padding:20px 20px 30px 20px; overflow: hidden; text-align: center; }
.wrap > h1 {text-align:center; font-size:26px;}
.wrap > h2 {text-align:center; font-size: 47px; font-weight: 600;  margin-top:-15px;}
.wrap > .line {width:65px; height:1px; background:#d6d6d6; margin:20px auto;}
.wrap > p {max-width:750px; text-align:left; margin:0px auto 20px auto; line-height:22px; letter-spacing:0.5px;color:#555555;}
.wrap > .vermas{background:#1b569f; padding:10px 20px; color:#fff; border-radius: 25px; font-size:13px; font-weight: 600; margin:0px auto; display: block; width:120px;}
.wrap > .vermas > a{color:#fff;}
.wrap > ul > li {width:calc(98%/2);}
.wrap > ul > li.left {float:left; text-align:left; margin-top:15px;}
.wrap > ul > li.left > p{width:44%; float:left; padding-top:15px; margin-right:2%;}
.wrap > ul > li.left > form{float:left;}
.wrap > ul > li.left > form {width:54%; float:left;}
.wrap > ul > li.left > form > input{padding:20px 10px; border:0px;  font-size:15px;}
.wrap > ul > li.left > form > input.mail_news { width:85%; float:left; margin:0px; padding:20px;}
.wrap > ul > li.left > form > input.send_message_news {width:15%; background:red; color:#FFF; cursor:pointer; margin:auto; display:block; }

.wrap > ul > li.right {float:right;}
.wrap > ul > li.right > div{float:right; text-align:right; margin-top:30px;}
.wrap > ul > li.right > div > p{float:left; margin-right:5px;}
.wrap > ul > li.right > div > a{float:left; margin-right:3px;  color:#fff;}


#productos {margin-top:30px;}
#productos2 {background:#fbfbfb;}
#productos-back {background:url('../img/back-productos-section.jpg') center center; padding:25px 0px;}
#news {background:#20338f; min-height:125px; color:#fff; font-size:17px;}

.line-descripcion{height:1px; max-width:750px; margin:20px auto; background:#f0f0f0;}

#suscripcion {width:100%; height:150px; background:#20338f; overflow: hidden;}
#suscripcion #sus  {max-width:1100px; overflow:hidden;  margin:55px auto;}
#suscripcion #sus > img {float:left; margin-right:15px; margin-top:8px;}
#suscripcion #sus > p {float:left; font-size:15px; color:#fff; letter-spacing:1px; margin-right:20px;  margin-top:11px;}
#suscripcion #sus > .suscribite {float:right; width:550px;}


form.suscri {display: block; margin-top: 0em;}

.suscri > input.susc {max-width:430px; padding:12px 12px; margin-top:0px!important; color:black; float:left; border:0px; background:#fff; font-family: 'Open Sans', sans-serif;}
.suscri > input.enviar {max-width:120px; padding:12px 12px; margin-top:0px!important; color:#fff; float:left; border:0px; background:red; font-weight: 600; font-family: 'Open Sans', sans-serif;}


#destacados {max-width:1280px; margin:20px auto; overflow:hidden; }
#destacados > li {width:calc(92%/4); float:left; background:#fff; border:1px solid #efefef; overflow:hidden; margin:0px 1%; text-align:center; padding:40px 0px;}
#destacados > li > h2{font-size:18px;}
#destacados > li > h1{font-size:13px; color:#838383;}
#destacados > li > img{width:100%;}
#destacados > li > .line-blue {width:65px; height:3px; background:#1c5aa8; margin:20px auto;}
#destacados > li > a {display:block;}
#destacados > li > a.vermas {padding:10px 20px; border:1px solid #dddddd; background:#e7e7e7; margin:20px 20px 30px 20px; border-radius: 5px; width: 100px; margin: auto; color:#4c4c4c; font-size:13px;}
#destacados > li:last-child {margin-right:0px}

.columnas{width:calc(92%/3)!important;}

ul.sucursales {max-width:1100px; margin:50px auto;}
ul.sucursales > li {width:calc(100%/3); float:left; text-align: center; font-size: 13px;}
ul.sucursales > li > h1 {font-size: 15px; font-weight: 700; margin-bottom:15px;}

.productos-title {height:50px; background:#fff; font-size:13px; font-weight:600; color:#838383;}
.productos-title > .left{float:left; margin:15px 0px 0px 15px;}
.productos-title > .left > p {float:left; }
.productos-title > .left > img {float:left; margin:5px 5px;}
.productos-title > .right{float:right; margin:15px 15px 0px 0px;}
.productos-title > .right > p{float:right;}
.productos-title > .right > img{float:right;  margin:5px 5px;} 

ul.descripcion-productos {max-width:1280px;background: #fff; overflow:hidden; margin-top:20px; padding:20px; color:#8c8c8c; text-align:left;}
ul.descripcion-productos > li{width:calc(100%/2); }
ul.descripcion-productos > li.left1{ float:left; width:50%; text-align: center;}
ul.descripcion-productos > li.right1{float:left;width:50%;  border-left:1px solid #dedede; padding-left:20px; min-height:540px;}
ul.descripcion-productos > li > img{width:80%;}
ul.descripcion-productos > li > h2{font-weight:600; color:#000; font-size:30px; margin:10px 0px 20px 0px;}
ul.descripcion-productos > li > .line{height:1px; background:#dedede; margin:20px 0px; width:100%;}
ul.descripcion-productos > li > p{font-size:13px;}
ul.descripcion-productos > li > a.consultar{padding:10px 20px; background:red; color:#fff; font-weight:700; font-size:13px; display:block; width:120px; margin-top:20px;}

ul.descripcion-qs {max-width:1280px;background: #fff; overflow:hidden; margin-top:20px; padding:20px; color:#8c8c8c; text-align:left;}
ul.descripcion-qs > li.left1{width:40%; float: left;}
ul.descripcion-qs > li.right1{width:60%; float: left;}
ul.descripcion-qs > li > h2{font-weight:600; color:#000; font-size:20px; margin:10px 0px 20px 0px;}
ul.descripcion-qs > li > p{font-size:15px; margin-bottom:10px;}
ul.descripcion-qs > li > img{width:95%;}

.white{color:#fff!important;}
.black{color:#000!important;}
.grey{background:#fbfbfb!important;}
.red{color:#ff0202!important;}
.blue{color:#2a3d98!important;}
.margin-bottom{margin-bottom:25px!important;}

.line-div{height:7px; max-width:650px; background:#a0a0a0; margin:30px auto; }
.leermas{display:block; width:150px; padding:10px 15px; border-radius: 5px; font-family:'Oswald'; font-weight: 600; background:#bb312c; color:#fff; font-size:14px; letter-spacing:1px; margin:30px auto; text-align:center;}
.back {background: #f0f0ef url('../img/pattern.png')!important;}


.slider {width: 90%; margin: 50px auto; }
.slick-slide {margin: 0px 20px; }
.slick-slide img {width: 100%; }
.slick-prev:before, .slick-next:before {color: black!important; }



#footer {width:100%; height:190px; background:#414f58; overflow: hidden; color:#fff;}
#footer ul#foot {max-width:1280px; margin: 45px auto 0px auto;}
#footer ul#foot li.left{float: left;}
#footer ul#foot li.left p, #footer ul#foot li.right p{margin-top:15px;}
#footer ul#foot li.left p > a, #footer ul#foot li.right p > a {color:#fff;}
#footer ul#foot li.left h3, #footer ul#foot li.right h3{font-size:17px;}
#footer ul#foot li.right{float: right; text-align:right;}


#copyright {width:100%; height:50px; background:#212a30; overflow: hidden;}
#copyright #copy {max-width:1280px; color:#fff; margin:15px auto 0px auto;}
#copyright #copy > img{float:left;}
#copyright #copy > p{float:right;}




table {width:100%; text-align: center; margin: 50px auto 10px auto;}
 tr > th {background:#f4f4f4; color:#9b9b9b; font-weight: bold}
table, th, td {border: 1px solid black;    border-collapse: collapse; border-color:#dedede; padding:2px; }

ul.descripcion{max-width:1280px; margin:0 auto; padding:20px 20px 0 20px;  overflow: hidden; margin-bottom:20px;}
ul.descripcion > li.left{width:47%; float:left;  overflow: hidden;}
ul.descripcion > li.left > img{width:100%;}
ul.descripcion > li.left > h1{font-size:15px;}
ul.descripcion > li.right{width:50%; float:right;  overflow: hidden;}
ul.descripcion > li.right h2:first-child  {margin:50px 0 15px 0;}


/* CONTACTO */

#message {max-width: 900px; margin: auto; height:auto; margin-bottom:35px; font-family: 'Open Sans', sans-serif; margin-top:30px; }

form.contacto > {display: block; margin-top: 0em; }
form.contacto > input {width:100%; margin-top:20px; font-size:13px;  color: #4d4d4d;  border: 1px solid #ccc; padding:20px 10px; display:block; font-family: 'Open Sans', sans-serif; background:#f2f2f2;}
form.contacto > input#nombre {width:49%;  float:left; margin:0 2% 20px 0;}
form.contacto > input#telefono {width:49%; float:left; margin:0 0 20px 0}
form.contacto > input:focus {color:#808080;}

form.contacto > textarea {width:900px; margin-top:20px;  font-size:13px;height:120px;  color: #4d4d4d;  border: 1px solid #ccc; padding:20px 10px; display:block; font-family: 'Open Sans', sans-serif; background:#f2f2f2;}
form.contacto > textarea:focus {color:#808080; }

form.contacto > input.send_message {width:120px;  background:black; color:#FFF; cursor:pointer; margin:0; font-size:13px; margin:auto; display:block; margin-top:20px; border:0px;}
form.contacto > input.send_message:hover {background:grey;}

ul#social {width:153px; margin:0 auto 30px auto; overflow: hidden;}
ul#social > li {float: left; margin-right: 5px}

/* CONTACTO */

#message {max-width: 900px; margin: auto; height:auto; margin-bottom:35px; font-family: 'Open Sans', sans-serif; margin-top:30px; }

form {display: block; margin-top: 0em; }
input {width:100%; margin-top:20px; font-size:13px;  color: #4d4d4d;  border: 1px solid #ccc; padding:20px 10px; display:block; font-family: 'Open Sans', sans-serif; background:#f2f2f2;}
input#nombre {width:49%;  float:left; margin:0 2% 20px 0;}
input#apellido {width:49%; float:left; margin:0 0 20px 0}
input:focus {color:#808080;}

textarea {width:900px; margin-top:20px;  font-size:13px;height:120px;  color: #4d4d4d;  border: 1px solid #ccc; padding:20px 10px; display:block; font-family: 'Open Sans', sans-serif; background:#f2f2f2;}
textarea:focus {color:#808080; }

input.send_message {width:120px;  background:red\; color:#FFF; cursor:pointer; margin:0; font-size:13px; margin:auto; display:block; margin-top:20px; border:0px;}
input.send_message:hover {background:grey;}

ul#social {width:153px; margin:0 auto 30px auto; overflow: hidden;}
ul#social > li {float: left; margin-right: 5px}


iframe{margin-bottom:-5px;}

.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}


.display2{display:none!important;}
/* RESPONSIVE
   ========================================================================= */
 

/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {



     .wrap > ul > li { width: 100%;}
     .wrap > ul > li.left, .wrap > ul > li.right {float: none;}
     .wrap > ul > li.left > p { width: auto; float: none; padding-top:5px; margin-right: 0px; text-align: center;}
     .wrap > ul > li.left > form {width: 70%; float: none; margin: 15px auto;}
     .wrap > ul > li.right > div {float:none; margin:auto; max-width: 500px; text-align:center;}

  }
 

@media (max-width: 1050px) {

.nave > img {width:40%; margin-top:30px;}

#footer1 > ul  {padding:0px 20px;}
#footer1 > ul > li {text-align:center; background: #eeeeee;}
#footer1 > ul > li > div {text-align:center; background: #fff;}
#footer1 > ul > li > img, #footer1 > ul > li > div {float:none;}

     }
/* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */


@media (max-width: 950px) {

  .nave > img {width:30%; margin-top:40px;}
#destacados > li{    width: calc(92%/2);}
textarea {width:100%; float:none; }
}





@media (max-width: 767px) {

.margin-top{margin-top:59px;position:relative;}

nav {margin: 0; background: none; display:none;}
.responsive-menu {text-align: right;}
.logo-mobile{display: block;}

header {display:none;}


ul#productos li{width:calc(94%/3);}
ul#productos li:nth-child(4){display: none;}

ul.descripcion > li.left{width:100%;}
ul.descripcion > li.right{width:100%;}


ul.descripcion-qs > li.left1{width:100%; float: left;}
ul.descripcion-qs > li.right1{width:100%; float: left;}

table { margin-top: 10px;}

#footer2 .left {display:none;}
#footer2 .right { width:100%; text-align: center!important; margin:0px auto;}
#footer2 .right p{text-align:center; float:none;}
.right{float:none;}

.demo-1 .container{ text-align:center;}
.demo-1 .sl-slide p {height:75px;}
.demo-1 .sl-slide a {    margin: auto; float:none;}
.demo-1 .sl-slide a.contactanos {margin: auto; margin-top:10px;} 

.display1{display:none!important;}
.display1{display:block!important;width:10%; margin-top:15px!important;}
#destacados > li{    width: calc(92%/2); margin-top: 10px;}

ul.descripcion-productos > li.left1{ width:100%;}
ul.descripcion-productos > li.right1{width:100%; border:0px; border-top:1px solid #d6d6d6;  padding-top:20px; text-align:center; min-height: 0px;}
ul.descripcion-productos > li > a.consultar{margin:15px auto;}


#footer1 > ul > li {width:100%;}


#message {width:100%; display:block;}

input {width:70%; margin:10px auto;}
input#nombre {width:70%; float:none;margin:10px auto;}
input#apellido {width:70%; float:none;margin:10px auto;}
input#telefono {width:70%; float:none;margin:10px auto;}
textarea {width:70%; float:none; margin:10px auto;}

}
 



/* Móviles en vertical
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {


ul#productos li{width:calc(94%/2);}
ul#productos li:nth-child(3){display: none;}
.display{display: block!important; float:right!important; margin-right:10px; z-index:9999;}


ul.sucursales > li {width:100%; padding:20px; border-bottom:1px solid black; text-align: center; font-size: 13px;}

#destacados > li{    width: 100%;}

#message {max-width:300px;margin:10px auto; display:block;}
input, input#nombre, input#apellido, input#telefono, textarea {width:100%; float:none; margin:10px auto;}

.header-section > h2 {padding-top: 60px; line-height: 45px;}
}