:root {
    --rhpromo4: calc((100vw - 595px - 10px * 4) / 4);
    --rhpromo3: calc((100vw - 100px - 10px * 3) / 3);
    --rhpromo2: calc((100vw  - 10px * 2) / 2);
    --rhcat1: calc((100vw - 40px));
    --rhcat2: calc((100vw - 40px) / 2);
    --rhcat3: calc((100vw - 40px) / 3);
    --rhcat4: calc((100vw - 160px) / 4);
    --rhprod1: calc((100vw - 350px) / 1);
    --rhprod1_1: calc((100vw - 200px) / 1);
    --rhprod1_2: calc((100vw) / 1);
    --rhprod2: calc((100vw - 350px) / 2);
    --rhprod3: calc((100vw - 450px) / 3);
    --rhprod4: calc((100vw - 450px) / 4);
}


/*IE10 viewport hack for Surface/desktop Windows 8 bug*/
@-ms-viewport     { width: device-width; }
@-o-viewport      { width: device-width; }
@viewport         { width: device-width; }

::-moz-selection {background: #b3d4fc; text-shadow: none; }
::selection {background: #b3d4fc; text-shadow: none; }

/**:focus {box-shadow: 0px 0px 2px 0px rgba(255,0,0,1)}*/

body,html{
  width:100%;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

html.size2, html.size2 body {font-size: 18px;}
html.size3, html.size3 body {font-size: 22px;}
html.contrast body {}

a{color:#000;}
a:hover {color: #0f171e;}
h2{font-size: 24px;}
strong {font-weight: 700;}

button.cc-nb-okagree, button.cc-nb-reject, button.cc-cp-foot-save {background-color:#0683c0 !important;}

.form-control + .input-group-addon:not(:first-child){border-left: 0;}
.input-group-addon:not(:first-child):not(:last-child){border-radius: 0;}
.input-group-addon:not(:last-child) {border-right: 0; }
.input-group-addon {padding: .5rem .75rem; white-space: nowrap; display: flex;
-ms-flex-align: center;
align-items: center;
vertical-align: middle; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #495057; text-align: center; background-color: #e9ecef; border: 1px solid rgba(0,0,0,.15); border-right-color: rgba(0, 0, 0, 0.15); border-right-style: solid; border-right-width: 1px; border-left-color: rgba(0, 0, 0, 0.15); border-left-style: solid; border-left-width: 1px; border-radius: .25rem; }

.cover{background-size: cover; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
.coveri{background-size: cover !important; background-position: center !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; }
.fixed {background-attachment: fixed !important;}
.auto {background-position: center !important; background-size: auto !important; -webkit-background-size: auto !important; -moz-background-size: auto !important; -o-background-size: auto !important; }
.mobile {background-size: contain; }
.hidden {display: none;}
.text-underlined {text-decoration: underline;}

.p-l-0 {padding-left:0; padding-right: 0}
.p-t-20 {padding-top: 20px;}
.p-20 {padding:20px;}
.m-t-20 {margin-top: 20px;}
.m-b-20 {margin-bottom: 20px;}

.btn {cursor: pointer;}
.btn:active{box-shadow:none;}
.btn-default {color: #fff; background-color: #0683c0; border-color: #0683c0; } 
.btn-default:hover {color: #fff; }
.btn-black {color: #fff; background-color: #1d1d1b; border-color: #7b7b7b; } 
.btn-black:hover {color: #fff; }
.btn-light {background-color: #fff !important;}
.btn-primary{background-color: #0683c0; border-color: #0683c0}
.btn-primary:hover{background-color: #0683c0;}
.btn-danger {color: #fff; background-color: #e31a1a; border-color: #e31a1a; } 
.btn-danger:hover {background-color: #bb1212; }

.bg-grey{background-color: #f6f6f6;}
.bg-yellow{background-color: #edf8fd;}
.bg-pink{background-color: #F0007E;}
.form-control {max-width: 100%;}

a.text-pink{color: #0683c0}

.grecaptcha-badge {display: none;}
.overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(16,16,16,0.35);}
.row {margin:0;}
.row.bt {margin:0 -10px;}
.error {color:red;}

.vertical-alignment-helper {display:table; height: 100%; width: 100%; pointer-events:none; } 
.vertical-align-center {display: table-cell; width: 680px; vertical-align: middle; pointer-events:none; } 
.modal-content {width:100%; height:inherit; margin: 0 auto; pointer-events:all; text-align: justify;} 
.modal-header {background-color: #0f171e; color: #fff; border: 1px solid #e5e5e5; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.modal .close{color: #fff; opacity: 1; cursor: pointer;}
.modal-content h2, .modal-content p{color: #000; text-shadow:none; }
.modal-content h2 {font-size: 18px; margin:0; font-weight: 700; padding-top: 10px; text-decoration: underline;}
.modal-content h3 {font-size: 16px; text-decoration: underline; margin: 10px 0;}
.modal-content p {margin: 10px 0; line-height: 25px;}
.modal-content img {max-width: 100%;}
.modal-content .row.p-pack {margin-bottom:5px;}
.modal-content .row.p-pack.last {margin-bottom:0;}
.modal-content .row.p-pack > div {padding: 0; background-color: #60a09d;}
.modal-content .row.p-pack > div p {color: #fff; margin-top: 0;}
#modal .sec-active {background-color:#fffaab; margin: 0 -10px; padding: 10px;}
.modal-content .form {padding:20px;}

.affix.fixed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}

.ic-search, .ic-user, .ic-cart, .ic-menu, .ic-phone, .ic-email, .ic-clock, .ic-fb, .ic-tw, .ic-yt, .ic-plus, .ic-minus{background: url(../img/sprites1.png) no-repeat; display: block; }
.ic-search{background-position: -115px -9px ; width: 29px; height: 30px; }
.ic-user{background-position: -80px -6px ; width: 29px; height: 31px; }
.ic-cart{background-position: -44px -7px ; width: 29px; height: 32px; }
.ic-menu{background-position: -5px -14px ; width: 29px; height: 22px; }
.ic-phone{background-position: -150px -12px ; width: 21px; height: 21px; }
.ic-email{background-position: -182px -17px ; width: 23px; height: 17px; }
.ic-clock{background-position: -212px -15px ; width: 21px; height: 21px; }
.ic-fb{background-position: -241px -9px ; width: 14px; height: 29px; }
.ic-tw{background-position: -265px -9px ; width: 35px; height: 29px; }
.ic-yt{background-position: -305px -11px ; width: 39px; height: 29px; }
.ic-plus{background-position: -351px -14px ; width: 22px; height: 22px; }
.ic-minus{background-position: -378px -14px ; width: 22px; height: 22px; }

#nav-icons {position: fixed; left:0; top:0; height: 100%; width: 125px; color: #fff; background-color: #0683c0; z-index: 9; text-align: center;}
	#nav-icons img {padding:10px 0; width: 100px;}
	#nav-icons ul {list-style:none; margin-top: 30vh; padding:0 48px;}
	#nav-icons ul li {margin-bottom: 35px; position: relative;}
  #nav-icons ul li span {
    position: absolute;
    top: 15px;
    right: -2px;
    text-align: center;
    background: #d80209;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
  }

#menu, #page {-webkit-transition: -webkit-transform .6s ease; transition: transform .6s ease;}

#menu {position: fixed; -webkit-transform: translateX(-190px); -ms-transform: translateX(-190px); transform: translateX(-190px); left: 0; top:0; width: 315px; height: 100%; max-height: 100vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background-color: #006ca0; color: #ffffff; display: flex; display: -webkit-flex; align-items: flex-start; z-index: 8;}
	body.open #menu {-webkit-transform: translateX(125px); -ms-transform: translateX(125px); transform: translateX(125px);}
	#menu ul{list-style: none; font-weight: 700; font-size: 20px; padding-top: 30px}
	#menu ul li {line-height: 1.2em; padding: 7px 0; position: relative;}
	#menu ul li a{-webkit-transition: color .2s ease; transition: color .2s ease;color: #ffffff;}
	#menu ul li a:hover{text-decoration: none; color:#f3e60f;}
	#menu ul li a.sub{position: absolute; right: 15px; top: 7px; cursor: pointer;}
	
	#menu ul li > ul {display: none; margin-top:5px;}
	
#acs {position: fixed; left: 20px; bottom: 20px; z-index: 9; cursor: pointer;}
#accessibility {display: none;}
#accessibility {position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #37572b; z-index: 9999; padding: 10px; font-size: 0.9rem; font-weight: 500}
#accessibility hr {margin:0.5rem 0}
#accessibility a {color:#000; text-decoration: underline;}

#page {position: relative; margin-left: 125px; }
	#page.menu-open{-webkit-transform: translateX(315px); -ms-transform: translateX(315px); transform: translateX(315px);}

.cuadro-info {overflow-y:auto}
.cuadro-info:focus {border:2px solid #0683c0}
.cuadro-info article {overflow:hidden; background-color: #f6f6f6; width:100%; min-height: calc(60vh - 40px); display: table; font-size: 20px; padding: 15px;}
.cuadro-info article .content{display: table-cell; vertical-align: middle;}
.cuadro-info article h1 {font-size: 1.8rem; font-weight: 700; text-align: center;}
.cuadro-info article h1 span {display: block; font-size: 1.2rem; font-weight: 300}

section {}
section > header, section > h2 {width: 100%; text-align: center; padding: 20px;}
section > header h1, section > h2 {font-weight: 700; font-size: 1.5rem; margin:0;}
section > header h2 {font-weight: 300; font-size: 1.2rem; margin-top:10px;}

#search-overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	top: 0;
	opacity: 0;
}
	#search-overlay .close {position: absolute; right: 60px; top: 30px;}
	#search-overlay .content {
		position: relative;
		overflow: hidden;
		top: 50%;
		width: 50%;
		margin: 0 auto;
		transform: translateY(-50%);
	}
	#search-overlay input {
		background: none;
		border-width: 0 0 1px 0;
		border-color: #fff;
		border-style: solid;
		width: 100%;
		height: 65px;
		padding: 0;
		margin: 0;
		display: block;
		font-size: 24px;
		line-height: 24px;
		font-family: "museo_sans500", sans-serif;
		letter-spacing: 0.5px;
		color: #fff;
		outline: none;
		-webkit-transition: border .2s ease;
		transition: border .2s ease;
	}
	#search-overlay a {position: absolute; right: 0; top:18px;}

#destacados {}
	#destacados article, #ofertas article {width: 20%; height: 300px; float: left; padding: 2.5px;}
	#destacados article.info, #ofertas article.info {position:relative; background-color: #edf8fd; padding: 20px;}
		#destacados article.info h1, #ofertas article.info h1 { font-weight: 700; font-size: 1.8rem;}
	#destacados .producto header, #ofertas .producto header{bottom: 20px;}
		#destacados .producto header h2, #ofertas .producto header h2{text-shadow: 0px 0px 5px #000; color: #fff;}
	
	#ofertas.ofertas2 article {width: 30%;height: 400px;}
	#ofertas article.info {color: #fff; background-color: #0683c0}
		#ofertas article.info a {color: #fff;}
		.producto .precio {position: absolute; right: 0; top: 0; background-color: #0683c0; color: #fff; padding: 10px 20px; z-index: 2; width: auto; height: auto;}

	.producto {position: relative; cursor: pointer;}
	.producto:hover header {background-color:#0683c0 !important}
	.producto:hover header a {color:#fff}
	.producto:hover img {transform: scale(1.1);}
	.producto header{position: relative; text-align: center; width: 100%; transition: background 0.2s linear}
	.producto header a{transition:color 0.2s linear}
	.producto header h2{ font-weight: 700; text-align: center; font-size: 20px; margin:0; }
	.producto > div{position: relative; overflow:hidden; width: 100%; height: 100%;}
	.producto img{z-index: 1; position: absolute; left: 0; top: 0; opacity: 0; transition: transform 0.2s linear}

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

a.info-link {position: absolute; right: 20px; bottom: 20px; font-weight: 700;}
a.info-link:hover {color:#000;}

#categorias .content {}
#categorias .producto {width: 25%; padding:2.5px; height: 350px; float: left; aspect-ratio:1/1}
	#categorias .producto header, #productos div.content article.producto header{background-color: #edf8fd; padding:5px;}
		#categorias .producto header h2{}

.step {text-align: center;}
.step h2 { font-weight: 700; font-size: 1.2rem;}
.step p {font-size: 18px; padding: 10px;}
.step-num{position: relative;}
.step-num span{
	position: relative;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin: 2rem auto;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
    color: #0f171e;
    background: #edf8fd;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.step-num .svg{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
}

#productos, #user-area {display: flex; display: -webkit-flex; position: relative;}
#productos .toggle{position: absolute; right: 5px; top: 0; display: none; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
#productos.open .toggle{
    transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
    -webkit-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
    -moz-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
    -o-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
    -ms-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
}
#productos div.menu {float: left; flex-basis: 300px; flex-shrink:0; background-color: #edf8fd; font-weight: 700; margin-right: 5px; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
	#productos div.menu h2 {font-size: 1.2rem; background-color: #d80209; color: #fff; margin-bottom: 0; padding:10px;}
	#productos div.menu h2 span {display: none;}

	#productos div.menu ul {list-style: none; padding:0;}
	#productos div.menu ul li {position: relative;}
		#productos div.menu ul li {position: relative; border-bottom: 1px #000 solid; padding: 10px;}
		#productos div.menu ul li:last-child {border: none;}
		#productos div.menu ul li.child {padding-left: 20px;}
		#productos div.menu ul li.active {background-color: #0683c0;}
		#productos div.menu ul li.active > a{color: #fff !important;}
		#productos div.menu ul li.active a:hover{color: #d80209;}
		#productos div.menu ul li a{-webkit-transition: color .2s ease; transition: color .2s ease;}
			#productos div.menu ul li a:hover{text-decoration: none; color:#d80209;}
	#productos div.menu .sub {
		position: absolute; right: 10px; top:10px; 
		display: block;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; line-height: 20px;
	}
	/* #productos div.menu .sub::after {content: "+";}
	#productos div.menu .sub.active::after {content: "-";}
	#productos div.menu .sub:hover {text-decoration: none;} */

	#productos div.menu ul.productos_menu {background-color: #f6f6f6;}
	#productos div.menu ul li.active ul.productos_menu {margin: 10px -10px -10px -10px;}
	#productos div.menu ul.productos_menu li{font-family: 'Source Sans Pro', sans-serif; font-weight: 300; padding:5px 10px; border-bottom: 1px silver solid;}
	#productos div.menu ul.productos_menu li.active{background-color: #0683c0;}
	#productos div.menu ul.productos_menu li a{color: #000;}
	#productos div.menu ul.productos_menu li a:hover{color: #d80209;}
	#productos div.menu ul.productos_menu li.active a{color: #fff;}

	#productos div.menu ul li > a img {float: right;}
	#productos div.menu ul li.active > a img {filter: brightness(0) invert(1);}
	
#productos > div.content {float: left; flex-grow: 1;}
#productos > div.content article.producto {float: left; height: 300px; width: 33.33%; padding: 2.5px; aspect-ratio: 1/1; display: flex; flex-direction: column;}
#productos > div.content article.producto > div{height: auto; flex: 1 1 auto; min-height: 0;}
#productos > div.content article.producto header{flex: 0 0 auto; z-index: 2;}
#productos > div.content article.producto header a{display: block;}

	#productos .opciones{float: left; flex-grow: 1; padding:20px; background-color: #f6f6f6; margin-right: 5px;}
	#productos .ficha-hidden {display: none;}
	#productos #presupuesto{float: left; flex-basis: 350px; flex-shrink:0; background-color: #edf8fd; position: relative;}
	#productos #presupuesto h2 {background-color: #0f171e; padding:10px; text-align: center; color: #fff; font-size: 1.5rem; margin:0;}
	#productos #presupuesto .container {padding:15px;}
	#productos .form-inline .form-group {margin-bottom: 15px;}
	#productos .form-inline .form-group label, .form-inline .form-group div {padding:0 !important; text-align: left; justify-content: left; -ms-flex-align: left; align-items: left; -ms-flex-pack: left;}
	#productos .form-inline .form-group label {margin-bottom: 5px; font-size: 0.9rem; font-weight:bold;}
	#productos .form-inline .form-group label img {margin-left:7px;cursor:pointer;}
	.opciones .clearfix {width: 100%;}

	.total { font-size: 2rem; color: #0f171e;font-weight:bold; }
	.entrega {cursor: pointer; padding:0 10px; margin-bottom: 10px;}
	.entrega .detalles{font-size: 0.8rem; padding: 10px}

#carousel {height: 60vh; }
#carousel .carousel-item, #carousel .carousel-inner {height: 100%;}
.carousel-control-next:focus, .carousel-control-prev:focus {background-color: #000;}
.img-fluid {width: 100%;}

#checkout {height: 100%;}
	#checkout .row {margin-left: -15px; margin-right: -15px;}
	#checkout .logo {margin:25px; margin-bottom: 50px;}
	#checkout .sep {width: 100%; border-bottom: 1px #e0e0e0 solid; margin-bottom: 20px; height: 1px;}
	#checkout h1 {font-size: 20px; color: #0f171e;}
	#checkout h2 {font-size: 18px; margin-bottom: 15px; margin-top: 10px;}
	#checkout .error {margin-bottom: 10px; display: block;}
	#resumen_pedido {background-color: #f6f6f6; border-left: 1px solid #e0e0e0;}
	#resumen_pedido .content {max-width: 500px; padding-top: 20px;}
	#resumen_pedido img {border: 1px solid #e0e0e0;}
	#resumen_pedido .image > div {position: relative;}
	#resumen_pedido .image span {position: absolute; right: 0; top: 0; font-size: 1.2rem; padding:5px 10px;}
	#resumen_pedido table tr {margin-bottom: 5px;}
	#resumen_pedido table td, #resumen_pedido table th {border: none; vertical-align: middle;}
	#resumen_pedido table td span{font-size: 14px;}
	#resumen_pedido table th {font-weight: 500;}
	#resumen_pedido .totales_carrito th {padding-left: 0;}
	
		#resumen_pedido .info-producto a.btn {padding:5px; font-size: 0.85rem; margin-top: 5px;}
		#resumen_pedido .info-producto span {color: #959595}
		#resumen_pedido .precio {color: #0f171e; font-weight: 700; font-size: 1.2rem;}
	
	#resumen_pedido .btn-qty {background-color: #0683c0; width: 26px; height: 26px; position: relative; display: block; float: left; margin-top: 6px; margin-right: 5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
	#resumen_pedido .btn-qty::before, #resumen_pedido .btn-qty::after{background-color: #fff; display: inline-block; content: ''; position: absolute;}
	#resumen_pedido .btn-qty::before {width: 14px; height: 2px; left: 6px; top:12px;}
	#resumen_pedido .more::after {width: 2px;height: 14px; top: 6px; left:12px;}

	#cupon{margin-right: 10px;}

	#form-registro{width: 100%;}
	h1.title{font-size: 24px; color: #0f171e; margin-bottom: 15px;}
	#ck_process {padding:20px;}
	#ck_process .row > div {padding: 0 10px; margin-bottom: 15px;}
	#ck_process .row > div.b-r {border-right: 1px silver solid;}
	#ck_process .datos_envio {padding:15px; background-color: #f6f6f6; font-size: 16px;}
	#ck_process .datos_envio p{margin-bottom: 0;}
	#ck_process .edit-address {float: right;}


.alt-table-responsive {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
}
.alt-table-responsive table tr .alt-nw {min-width: 150px;}

.totales_carrito{
    width:100%;
    max-width: 300px; 
    text-align:left;
}
.title_ficha{
    width: 100%;
    background-color: #0683c0;
    color: #FFF;
    margin: 20px 0;
}
	.title_ficha p{
	    padding: 5px;
	    margin: 0;
	}
	.title_ficha span {
	    background-color: #000;
	    width: 100%;
	    height: 100%;
	    position: relative;
	    font-weight: bold;
	    padding: 11px;
	    margin-right: 6px;
	}
#form_producto hr{
	width:100%;
	background-color: #E0F2FB;
}
.cuadro-select{border:2px solid #5d5d5d; padding: 18px 0 0; }
	.cuadro-select img{margin-bottom: 10px; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
	.cuadro-select p{background-color:#5d5d5d; color:#FFF; font-weight:bold; padding: 5px 0; margin-bottom: 0; }

.entrega.activo .cuadro-select{border:2px solid #0f171e; padding: 18px 0 0; }
	.entrega.activo .cuadro-select img{-webkit-filter: none; filter: none;; }
	.entrega.activo .cuadro-select p{background-color:#0f171e; }

#colores {width: 100%;}
.color {width: 80px; height: 120px; float: left; margin-right: 10px; margin-bottom: 10px; display: block; font-size: 0.75rem; cursor: pointer;}
.color span {border: 1px solid #000; display: block; width: 100%; height: 80px; position: relative;}
.color.sel span:after {content:"\2714"; position: absolute; right: 5px; top: 5px; padding: 0px 5px; background: #fff; color: green; font-size: 1rem; border: 1px solid silver;}
.color input {display: none;}

#user-area article {padding:20px; flex-grow: 1;}
#user-area .table {font-size: 14px;}
#user-area .table tr td{padding: 5px 10px}
#user-area .table {margin-bottom: 0; background-color: rgba(255, 255, 255, 0.5); border: #d5d5d5 solid 1px; color: #000;}
#user-area .table th{background-color: #1d1d1b; color: #fff;}
#user-area .table > tbody > tr > td {vertical-align: middle; }

#menu_user {background-color: #1d1d1b; flex-basis: 300px; flex-shrink: 0;}
  #menu_user ul{padding-left: 10px; }
    #menu_user ul li{margin: 12px 0; font-size: 18px; list-style: none; }
    #menu_user ul li a {padding:5px; color: #fff; width: 100%; display: block;}
    #menu_user ul li a.activo {background-color: #edf8fd; color: #000; font-weight: 700;}

#form-registro .row {margin-right: -15px; margin-left: -15px;}

#contacto {}
	#contacto > div {float: left; padding: 10px; width: 33.33%;}
	#contacto > div.form {padding: 15px;}
	#contacto > div#map {width: 66.66%; min-height: 500px; }

video {width: 100%;}

#product-info > div > div:first-child{height: 60vh; width: 60vh; max-width: 40vw; flex-grow: 0;}
#product-info > div > div:first-child #carousel {width: 60vh; max-width: 40vw;}
#product-info > div > div{flex-grow: 1; position: relative;}
.cuadro-info article .content > div {max-height: 50vh; overflow-y:scroll; }

#newsletter-promo {position: fixed; right: -320px; bottom: 0; width: 310px; background: #fff; border: 1px solid silver; padding: 15px; font-size: 0.85rem; line-height: 1.2em; z-index: 2;}
#newsletter-promo input {font-size: 14px; margin-bottom: 10px; z-index: 9;}
#newsletter-promo button {font-size: 16px;}
#newsletter-promo p {margin-bottom: 10px;}
#newsletter-promo img {width: 100%; margin-bottom: 5px;}
#newsletter-promo label {font-size: 12px; font-weight: 300;}
#newsletter-promo .close, #banner .close {position: absolute; top: 3px; right: 15px;}

#banner {position: fixed; right: -530px; bottom: 0; z-index: 9; background-color: #fff; width: 530px; max-width: 100%} 
#banner div.content {padding:20px; border:2px solid #0683c0; border-right: none; border-bottom: none; background-color: #fff;} 
#banner p.title {font-size: 1.4rem; color: #0683c0; text-center; font-weight: bold; margin-bottom: 0.5rem}

#financiado {margin:20px}
#financiado img {width: auto; height: 80px;}

#footer{}
	#footer > div {float: left; padding: 5px; width: 33.33%;}
	#footer > div > div {background-color: #dadada; padding: 25px 35px;}
	#footer p.title{ font-weight: 700; font-size: 1.2rem}
	#footer a:hover {text-decoration: none;}
	#footer span {display: inline-block; filter: brightness(0) saturate(100%) invert(29%) sepia(11%) saturate(7359%) hue-rotate(212deg) brightness(103%) contrast(87%);}
	#footer .newsletter input[type=text] {width: 250px;}
	#footer .form-inline label {display: block;}
	#footer div.d-flex {padding-bottom: 10px;}
	#footer div.d-flex > div:first-child {width: 50px; flex-basis: 50px}
	#footer .faldon {width: 100%; background-color: #1d1d1b; text-align: center; color: #fff; padding:20px; padding-bottom: 0;}
		#footer .faldon .autor, #footer .faldon .autor a{color: #adadad; font-size: 12px;}

@supports (display: grid) {
	#destacados, #ofertas {display: grid; grid-template-columns: 28% 18% 18% 18% 18%; grid-template-rows: var(--rhpromo4);; grid-column-gap: 5px; grid-row-gap: 5px;}
	#ofertas.ofertas2 {grid-template-columns: 40% 30% 30%; grid-template-rows: 400px;}

	#categorias .content {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 5px; grid-row-gap: 5px; }
	#productos div.content {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5px; grid-row-gap: 5px; }
	#destacados article, #ofertas article, #categorias .producto, #footer > div, #productos div.content article.producto, #contacto > div {width: auto !important; padding:0; height: auto !important; float: none;}
	#contacto {display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 5px; grid-row-gap: 5px;}
	#footer {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5px; grid-row-gap: 5px;}
	#footer > div {background-color: #dadada;}
	#footer .faldon {grid-column-start:1; grid-column-end:4;}
}

@media (max-width: 1750px){
  #productos div.content {grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1350px){
	.cuadro-info article{font-size: 18px;}
		.cuadro-info article .logo {width: 200px; height: auto;}

	#destacados article, #ofertas article {height: 300px; width: 33.33%;}
	#ofertas.ofertas2 article {width: 33.33%;}

	#categorias .producto {width: 33.33%;}

	@supports (display: grid) {
		#destacados, #ofertas {grid-template-columns: 1fr 1fr 1fr; grid-template-rows: var(--rhpromo3) var(--rhpromo3); }
		#destacados article.info, #ofertas article.info{grid-row-start: 1; grid-row-end: 3;}

		#ofertas.ofertas2 {grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 300px; }
		#ofertas.ofertas2 article.info{grid-row-start: 1; grid-row-end: 1;}

		#footer {grid-template-columns: 1fr 1fr;}
		#footer .newsletter {grid-column-start:1; grid-column-end:3;}
	}
		#destacados .producto header h2, #ofertas .producto header h2{font-size: 16px;}
}

@media (max-width: 1200px){
	#productos #presupuesto{flex-basis: 220px;}

	@supports (display: grid) {
		#productos div.content {grid-template-columns: 1fr 1fr;}
	}
}
@media (max-width: 1050px){
	#nav-icons {width: 80px;}
		#nav-icons img {width: 70px;}
		#nav-icons ul {padding:0 25px;}

	#menu {-webkit-transform: translateX(-235px); -ms-transform: translateX(-235px); transform: translateX(-235px);}
		body.open #menu {-webkit-transform: translateX(80px); -ms-transform: translateX(80px); transform: translateX(80px);}

	#page {margin-left: 80px; }

	.cuadro-info article{font-size: 16px; padding:10px;}
		.cuadro-info article .logo {width: 100px}

	#productos #presupuesto{display: none;}
	#productos .ficha-hidden {display: block;}
	#productos span.ficha-hidden {display: inline;}
	#productos .ficha-show {display: none;}

	#footer > div, #contacto > div {width: 50%;}

	#search-overlay .content{width: 70%;}

	#menu-productos {font-size: 0.9rem;}

	@supports (display: grid) {
		#categorias .content {grid-template-columns: 1fr 1fr 1fr; }
	}
}

@media (max-width: 850px){
	@supports (display: grid) {
		#footer {grid-template-columns: 1fr;}
		#footer > div {grid-column-start:1; grid-column-end:3;}
	}
}

@media (max-width: 780px){
}

@media (max-width: 790px){
	#nav-tienda, #menu ul{display: inline-block;}
	.step-num .svg{
	    display: none;
	}

	.cuadro-info article {position: relative;}

	#resumen_pedido {margin-bottom: 20px;}

	#product-info > div > div:first-child{height: 50vh; width: 100%; max-width: none; }
	#product-info > div > div:first-child #carousel {height: 50vh; width: 100%; max-width: none;}


	@supports (display: grid) {
		#productos div.content {grid-template-columns: 1fr; }
	}
}

@media (max-width: 720px){
	#nav-icons {width: 100%; height: 60px;}
		#nav-icons img {float: left; margin-left: 10px;}
		#nav-icons ul{margin-top: 15px; float: right; padding-left:0;}
			#nav-icons ul li{float: right; margin-bottom: 0; margin-left: 15px;}
			#nav-icons ul li:first-child{padding-top: 5px;}

	#menu {-webkit-transform: translateX(-315px); -ms-transform: translateX(-315px); transform: translateX(-315px);}
	#menu ul{padding-top:70px;}
		body.open #menu {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

	#page {margin-left: 0; margin-top: 60px; }

	#productos div.menu {flex-basis: 200px;}
	
	#destacados article {height: 300px; width: 50%;}
	#ofertas article {height: 300px; width: 50%;}
	#categorias .producto {height: 250px; width: 50%;}

	#carousel {height: 50vh; }

	/*#menu-productos div.content {display: block;float: none;}
	 #menu-productos div.content article.producto{width: 100% !important; height: 300px !important;}*/

	@supports (display: grid) {
		#destacados, #ofertas {grid-template-columns: 1fr 1fr; grid-template-rows: var(--rhpromo2) var(--rhpromo2) var(--rhpromo2);}
		#productos div.content {grid-auto-rows:var(--rhprod1_1);}

		#ofertas.ofertas2 {grid-template-columns: 1fr 1fr; grid-template-rows: 250px 250px; }
		#ofertas.ofertas2 article.info{grid-row-start: 1; grid-row-end:3;}

		#categorias .content {grid-template-columns: 1fr 1fr; grid-auto-rows:var(--rhcat2);}
		#footer > div > div {padding: 20px;}
	}


}

@media (max-width: 640px){
	#search-overlay .content{width: 90%;}
}

@media (max-width: 540px){
	#destacados article, #ofertas article {height: 250px; width: 100%;}

	#productos, #productos .toggle {display: block;}
	
	#productos, #productos .toggle {display: block;}
	#productos div.menu {width: 100%; height: 41px; overflow:hidden; float: none; margin-bottom: 5px;}
		#productos.open div.menu {margin-bottom: -11px;}
	#productos div.menu h2 span {display: inline-block;}


	#menu {height: 100vh; width: 100%; left: 0; position: fixed; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%);}
	body.open #menu {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
	#menu ul {padding-left: 10px}
	#page {margin-left: 0}

	#productos div.content {width: 100%;}

	#footer > div, #contacto > div {width: 100%;}

	#carousel {height: 40vh; }

	@supports (display: grid) {
		#footer, #contacto {grid-template-columns: 1fr;}
		#productos div.content {grid-template-columns: 1fr;  grid-auto-rows:var(--rhprod1_2);}
		#footer .newsletter {grid-column-start:1; grid-column-end:2;}
		#footer .faldon {grid-column-start:1; grid-column-end:2;}
	}
}

@media (max-width: 420px){
	#categorias .producto {width: 100%;}

	@supports (display: grid) {
		#destacados article.info, #ofertas article.info, #ofertas.ofertas2 article.info{grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; padding: 10px;}
		#destacados, #ofertas, #ofertas.ofertas2 {grid-template-columns: 50% 50%; }
	}

	a.info-link {right: 10px; bottom: 10px;}

	#categorias .content {grid-template-columns: 1fr; grid-auto-rows:var(--rhcat1);}
}

@media (max-width: 340px){
	@supports (display: grid) {
		#destacados, #ofertas {grid-template-columns: 100%; grid-template-rows: auto repeat(4,250px); }
		#destacados article.info, #ofertas article.info, #ofertas.ofertas2 article.info{grid-column-start: 1; grid-column-end: 2;}

		#ofertas.ofertas2 {grid-template-columns: 100%; grid-template-rows: auto repeat(2,250px); }
	}
}

@media (min-width: 680px){
	.modal-content {width:inherit;} 
}