:root{
		
		--rojo_os: #b21a26;
		--rojo_cl: #ff0100;
		--verde: #41b241;
	}

	*{ outline:none;}
	html{font-family:'Roboto', sans-serif; background:url(../imgs/fondos/fondo_limg.jpg) no-repeat center; background-attachment:fixed; background-size:cover; }
	body{ width:100%; height:100%; left:0; margin:0; background:#FFF; }

	h1{font-family:'Roboto', sans-serif; }
	fieldset{ border-radius:10px; border:1px solid #DDD;}
	legend{ border:1px solid #444; padding:20px 40px; border-radius:30px; font-weight:bold; background:white}
	
	header{ width:100%;}
	header img{ width:100%;}

	nav{ background:#EEE; padding: 10px 0; box-sizing:border-box}
	nav a{ padding:10px 0; display:inline-block; color:#666; font-size:0.9em}

	#div_search{ width:100%; margin:10px 0;}
	#div_search #logo img{ width:auto; height:100px}

	#div_search #search{text-align:center box-sizing:border-box; border:2px solid var(--rojo_cl); border-radius:60px; color:var(--rojo_cl); padding:20px; width:80%}
	#div_search #search #mas_buscado{ color:#777}
	#div_search #search #mas_buscado a{ color:#777; margin:0 10px}

	#div_search #contact h5{ color:#777; margin:0}
	#div_search #contact h2{ color:#111; font-weight:normal}
	#div_search #contact i{  margin:0 20px; color:black}

	#nav { width:100%; background:linear-gradient(to left, #DDD 0%, #FFF 90%);}
	#nav > li:first-child{ background:linear-gradient(to right, var(--rojo_os)  0%, var(--rojo_cl) 98%);}
	#nav > li:first-child a{ color:white}
	#nav li { list-style: none; padding: 8px 0; position: relative;}
	#nav a { display: block; padding: 8px 20px;}

	#nav ul li:hover a, 
	#nav li:hover li a { border: none; color: #333; box-shadow: none;}
	#nav ul a:hover {background:linear-gradient(to right, var(--rojo_os) 0%, var(--rojo_cl) 98%); color:white !important}
	#nav li:hover > ul { display: block;}
	
	#nav ul { background: #FFF; border-radius:0 0 10px 10px; display: none; left:0; margin: 0; padding: 0;	position: absolute; top: 45px; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0, .3); z-index:1}
	#nav ul li { float: none; margin: 0; padding: 0;}
	#nav ul a { font-weight: normal;}
	#nav ul ul { left: 90%; top: -3px; position:absolute;}


	#header_2{ display:none; width:100%; background:white}
	#header_2 .w70 img{ width:50%; height: auto;}
	#header_2 #search{ margin-bottom: 10px;}
	#header_2 #search input {font-size:0.6rem; padding:5px; text-align: center;}
	
	
	#cont_1{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:50px 0}
	#cont_1 > div{box-shadow:0 2px 5px rgba(0,0,0,0.15)}

	#cont2 #busca_productos input[type=radio] + label{ border:1px solid #999; color:#999; padding:15px 20px; width:200px; border-radius:30px; margin-left:2px; background:none; font-size:0.9em}
	#cont2 #busca_productos input[type=radio]:checked + label{ background:linear-gradient(to right, var(--rojo_os)  0%, var(--rojo_cl) 98%); color:white; border:1px solid var(--rojo_os); box-shadow:0 1px 3px #555}
	
	#super_deal{ padding:30px; box-sizing:border-box; border-radius:10px; background:white; border:3px solid #DDD; border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) 1; margin-right:20px;  }
	#super_deal img{ width:80%; height:auto}
	#countdown{ width:100%; display:flex}
	#countdown > div{ width:25%; margin:0 2px }
	#countdown > div .time{ border-radius:3px; padding:5px; background:#666; color:white}

	.cont_general{ margin:0 15%}
	.banner_division{ width:100%; height:300px;}
	
	.div_categorias{ border:1px solid #F3F3F3; box-shadow:0 0 5px rgba(0,0,0,0.3)}
	.div_categorias > div{ box-sizing:border-box; padding:20px 40px;}
	.div_categorias > div img{ width:200px; height:200px }
	.div_categorias .par{ background:#F3F3F3}
	.div_categorias .imagen_producto{ width:100%; height:auto}
	
	.title_cat{font-family:'Montserrat', sans-serif;  color:#09589a}
	.comprar{ background:#09589a; color:white; border-radius:0; padding:10px 20px; margin-top:10px; display:inline-block }
	
	.menu { padding:0; display:flex; justify-content:space-between}
	.menu > li { width:25%; list-style:none; font-size:14px}
	.menu > li > a{ color:#333 }

	#div_filtros{ color:#8C8C8C}
	#div_filtros > div{ background:#F3F3F3; border-radius:10px; margin:10px 0; padding:10px; border:1px solid #f3f4f1}
	#div_filtros h4{ color:#1d54f1}
	
	#resultados_busqueda{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin:50px 0}
	#div_detalle{ background:white; box-sizing:border-box; margin:20px 0; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
	

	.div_w40{ background:#FFF; box-sizing:border-box; width:100%;  transition: all 0.2s ease-out; box-shadow:0px 2px 4px 1px rgba(0,0,0,0.2); padding: 16px; border-radius: 7px;}
	.div_w40:hover{ cursor:pointer; box-shadow:0px 2px 4px 1px rgba(201, 2, 2, 0.7); transition: all 0.2s ease-in  }
	
	.div_w40 .img_marca{position:absolute; top:0}
	.div_w40 .img_marca img{  width:50px; height:30px; left:0; padding:0 5px; background:#FFF; border-radius:0 0 5px 0}

	.div_w40 .img_producto{ position:relative;}
	.div_w40 .img_producto > img{ width:90%; height:150px;  display:inline-block; box-sizing:border-box; object-fit: contain; image-rendering: -webkit-optimize-contrast pixelated;}
	.div_w40 .img_producto > label{ position:absolute; right:0; top:0; border-radius:0 0 0 10px; padding:5px 20px; z-index:1}

	.div_w40 h6{font-size: 11px; color: #808080}
	.div_w40 p{ text-transform:uppercase; font-weight:bold; color:#333; min-height:40px}
	.div_w40 h3{ font-family:'Roboto', sans-serif; font-size: 16px; text-align:right; font-weight:bold; color:var(--verde)}
	.div_w40 .agotado{ position:absolute; top:35%; text-align:center; background:#8C8C8C; color:white; width:90%; left:5%; padding:10px; box-sizing:border-box; border-radius:3px}
	
	#detalle_producto{ margin:2% 0; padding:1% 2%; font-family: 'Roboto', sans-serif; border-radius:10px}
	#detalle_producto #div_imagenes > div{ width:100%; padding:5px; border:1px solid #DDD; border-radius:5px; box-sizing:border-box;}
	#detalle_producto #div_imagenes img{ width:100%; height:100px; object-fit:contain }
	#detalle_producto h1 { color:gray; font-size:4rem; color:var(--verde)}
	#detalle_producto h3{color:var(--rojo_cl)}

	#img_principal{ width:auto; height:300px; padding:2%; margin:0 1%; border-radius:5px; object-fit:contain}
	

	button{background:#2aaaf4; color:white; box-shadow:0 2px 2px rgba(0,0,0,0.5) }
	.button_comprar{ width:auto; color:white; border-radius:50px; margin:0; color:gray; box-shadow:0 0 5px rgba(0,0,0,0.3); background:#FFF; text-transform:capitalize}
	.button_comprar:hover{ background:var(--rojo_cl); color:white}
	.input_comprar{ background:#EEE; border-radius: 100px; border: none; width: 60px; padding: 12px 8px; text-align: center; font-family: 'Roboto', sans-serif; color: gray; box-shadow: unset; transition: 0.25s;}
	.input_comprar:focus{ outline: none; box-shadow: 0 0 2px 2px var(--ui-shadow-blue);}

	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button {  opacity: 1; }

	#div_contact{ margin:40px 0; gap:10px}
	#div_contact iframe{ width:100% !important; width:auto;}
	
	#footer{ background:#0257a7; padding:30px 0 }
	#footer > div{ justify-content:center}

	#footer_blue{ display:grid; grid-template-columns:repeat(4, 1fr);}
	#footer_blue .w25{ width:100%; text-align:center; color:white; border-right:1px solid #DDD;}
	#footer_blue .w25:last-child{ border-right:none}

	#footer2{padding:30px 0; color:#AAA}
	#footer3{ border-top:1px solid #AAA; padding:20px 0}
	
	#direcciones input[type=radio] + label{background:linear-gradient(to top, #AAA 0%,#DDD 100%); color:#555}	
	#direcciones input[type=radio]:checked + label{background:linear-gradient(to top, #2AAAF4 0%,#00CFF7 76%,#57efff 98%);}

	#contenedor_promociones > div{ width:23%; display:inline-block; margin:10px;} 
	#contenedor_promociones > div h2{ text-align:left } 

	.div_oferta{ background:#f8f8f8; border-radius:10px;padding:20px 40px; box-sizing:border-box; }
	.div_oferta h3{ text-align:left}
	.div_oferta h5{ color:#ff4d4f;}
	.div_oferta p{ font-size:0.8em; text-align:left}
	.div_oferta img{ width:90%;}

	.label_of1{ color:#777;  text-decoration:line-through; font-size:1em;}
	.label_of2{ color:#ff4d4f !important; font-size:1.2em;}

	#busca_productos input[type=checkbox] + label{ display:block}

	.fieldset{ background:white}
	#contenedor fieldset{ background:#FFF}
	
	.precios{ border:1px solid #AAA; color:#00A}
	
	
	.button_car{ display:flex; background: linear-gradient(to right, #bf6ef6 0%,#57efff 76%,#57efff 98%); color:white; border:1px solid rgba(0,0,0,0); padding:5px 40px 5px 5px; border-radius:25px; width:50%}
	.button_car input{ width:80px; border-radius:20px; padding:10px}
	.button_car .add{ display:block; width:100%; height:100%; color:white}
	.button_car .add i{ float:right}
	
	#detalle_compra tr td{ padding:20px; border-box:box-sizing; border-bottom:1px solid #DDD; font-size:1.3em}
	#detalle_compra tr strong{ color:#444}
	
	
	.caracteristicas{ padding:0; color:#777}
	.caracteristicas li{ margin:20px 0; text-align:justify}

	.modifica_cantidad{ width:100px}
	.eliminar{ width:30px; height:30px; padding:0;}
	.eliminar_carrito{ width:25px; height:25px; padding:0}
	.cantidad{ width:60px; }
	
	.cont_checkbox{ width:100%; max-height:300px; overflow:auto}
	
	#ofertas_home > div{ background:#EEE;}
	 
	#producto_agregado{ width:100%; background:#FFF; border-radius:20px; padding:20px; box-sizing:border-box}

	#fondo_cuenta{ background:url(../imgs/fondos/fondo_limg.jpg) no-repeat center; background-attachment:fixed; background-size:cover; }

	#menu_cuenta { margin:20px 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
	#menu_cuenta >a{ box-sizing:border-box; border:1px solid #DDD; border-radius:10px; padding:20px 0}
	#menu_cuenta >a img{ width:90%; height:auto;}
	#menu_cuenta >a p{ color:#444}

	.articulos{}
	.articulos > div{ box-sizing:border-box; margin:10px 0; padding:20px;}
	.articulos > div:nth-child(odd){background:white}
	.articulos > div:nth-child(even){background:#F3F3F3}

	.div_w50 div{ width:25%}
	.nota{ color:red}
	.imagen{ padding:10px; border:1px solid #DDD; border-radius:5px}

	.input > input{ font-size:1.5rem}
	.input > i{ background:#006BBD; font-size:1.5rem}

	#historial_busqueda{ width:100%; overflow:auto; margin:20px 0; padding:20px 0}
	#historial_busqueda > div{ width:200px; margin:0 10px; background:#FFF; border-radius:5px; padding:10px; position:relative;}
	#historial_busqueda > div  img{ height:150px; width:100%;}
	#historial_busqueda > div .fast_view{ position:absolute; top:0; right:0; border-radius:0 5px 0 5px; padding:5px; background:white}
	#historial_busqueda > div p{ font-size:0.6em } 

	#detalle_compra{ padding:3% 0}
	#detalle_compra > .w20{ background:#EEEEEE;}
	#detalle_compra table{ margin:20px 0}
	#detalle_compra table tr{ background:none;}
	#detalle_compra table th{ background:none; color:#000}

	#pago_exitoso{ background:#02c952; border-radius:10px; padding:2%; margin:1%; box-sizing:border-box; text-align:center; color:white}

	.b_orange{ background: linear-gradient(to bottom, #ffa84c 0%, #ff7b0d 100%); color:#FFF; font-family:sans-serif; font-weight:bold; letter-spacing:1px; padding:10px 40px;}
	
	#fondo{ z-index:10}
	#contenedor{ z-index:11}	
	#cart_count{ background:red; position:absolute; top:0px; border-radius:50%;}
	
	#contact_icons a{ font-size:4rem; color:var(--rojo_os); margin:0 20px }
	
	.div_division{text-align:center;}
	.div_division img{ border:5px solid var(--rojo_cl); height:150px; width:150px; object-fit:contain; transition:all 0.3s linear}
	.div_division img:hover{ transform:scale(1.15); box-shadow:0 0 15px var(--rojo_cl); transition:all 0.3s linear}
	.div_division h3{ color:var(--rojo_cl)}
	
	.title{ text-transform:uppercase; color:#343434; font-weight:bold; text-align:center}
	.img_carrito{ object-fit:contain; background:#FFF}

	hr{	height: 4px; width: 70px; text-align: center; position: relative;	background: var(--rojo_cl); margin: 0 auto;	margin-bottom: 0px;	margin-bottom: 60px; border: none;}