@charset "utf-8";

/**************************** RINES ****************************/
.rin-marco{
	position: relative;
	top: 0px;
	width: 250px;
	/*height: 333px;*/
	height: 360px;
	border: solid 1px #FF5E1F;
	border-radius: 10px;
	margin: 30px 12px;
	text-decoration: none;
	color: #000;
}
.rin-marco:hover{
	box-shadow: 0 0 9px rgba(0,0,0,.75);
	border: solid 1px #CCC;
}
.rin-marco img{
	position: relative;
	width: 188px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	top: 40px;
}
.marca{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 36px;
	height: 36px;
	background-image: url("../imagenes/logo-b.png");
	background-size: 35px;
	background-repeat: no-repeat;
	z-index: 1;
}
.data{
	position: relative;
	top: 41px;
	width: 100%;
	text-align: center;
}
.data p{
	text-transform: uppercase;
	font-size: 16px;
	margin: 10px 0;
}
.modelo-t{
	color: var(--cart);
	font-weight: 600;
	font-family: var(--rubik);
}
.letreros{
	position: absolute;
	right: 15px;
	top: 15px;
	width: 76px;
	color: #FFF;
	font-size: 11px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 500;
	z-index: 2;
}
.nuevo{
	position: relative;
	top: 0px;
	width: 76px;
	line-height: 19px;
	margin: 5px 0;
	background-color: #39B54A;
	z-index: 51;
	border-radius: 8px;
}
.promo{
	position: relative;
	top: 0px;
	width: 76px;
	line-height: 19px;
	margin: 5px 0;
	background-color: #FF5E1F;
	z-index: 52;
	border-radius: 8px;
}
/****************************  INFO DETALLE ****************************/
.info{
	width: 900px;
	/*height: 500px;*/
	display: flex;
	padding: 25px;
	box-sizing: border-box;
}
.info img{
	width: 450px;
	height: 100%;
}
.datos{
	position: relative;
	width: 375px;
	left: 25px;
	/*border: solid 1px #000;*/
}
.modelo{
	position: relative;
	top: 0px;
	width: 100%;
	text-align: center;
	font-size: 36px;
	color: var(--titulos);
	margin-bottom: 10px;
}
.tabla{
	display: flex;
	/*flex-wrap: wrap;
	flex-direction: column;
	align-content: space-between;*/
	width: 375px;
	/*height: 345px;*/
}
.data-c{
	left: 70px;
}
.tabla div{
	position: relative;
	text-transform: uppercase;
	font-size: 18px;
}
.tabla p>*:first-child{
	color: var(--ochenta);
}
.stock-d {
	color: var(--titulos) !important;
}
.cart-in-detail{
	position: relative;
	top: 15px;
	left: 0px;
	text-align: right;
}
.cart-btd{
	background-image: url("../imagenes/cartplus.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px;
}
.cart-txt{
	position: relative;
	width: 140px;
	height: 32px;
	font-size: 18px;
	color: var(--titulos);
	border: solid 1px #999;
	border-radius: 5px;
}
/**************************** RADIOS ****************************/
.container {
	position: relative;
  display: inline;
  cursor: pointer;
	margin: 25px;
}
.container input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmarkradio {
  position: absolute;
  height: 22px;
 	width: 22px;
  background-color: #DFDFDF;
  border-radius: 50%;
	box-shadow: 2px 2px 1px -1px #1A1A1A;
}
.checkmarkradio::after {
	position: relative;
	color: #a8a8a8;
	content: "●";
	font-size: 28px;
	display: block;
	text-align: center;
	top: -7px;
}
.container:hover input ~ .checkmarkradio::after {
  color: var(--ochenta);
}
.container input:checked ~ .checkmarkradio::after {
  color: var(--cart);
}

/**************************** Select /****************************/
.selects select{
	border: none;
	background-color:#DFDFDF;
	height: 30px;
	width: 150px;
	outline:none;
	display: inline-block;
	margin-right:23px;
	padding-bottom:0px;
	padding-top:0px;
	-webkit-appearance:none;
	font-size: 17px;
	border-radius: 5px;
}
.selects label {
	position:relative;
	font-size:16px;
	float: left;
	padding-right: 3px;
}
.selects label:after {
	overflow: hidden;
  content:'▼';
	width:30px;
	height:auto;
	text-align:center;
	line-height:30px;
  font-size:15px !important;
  color:#333;
  right:26px;
	top:0px;
  position:absolute;
  pointer-events:none;
	background-color:#DFDFDF;
	display:block;
	border-radius: 5px;
}
.selects input{
	height: 30px;
}
/**************************** text input /****************************/
.input-txt{
	position: relative;
	width: 300px;
	height: 32px;
	font-size: 16px;
	color: var(--titulos);
	border: solid 1px #999;
	border-radius: 5px;
	margin-bottom: 10px;
}
/**************************** MENU LATERAL ****************************/
.lateral ul, li{
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.lateral a{
	position: relative;
	color: #666;
	text-shadow: 1px 1px 0px #FFF;
	text-decoration: none;
	text-transform: uppercase;
	width: 210px;
	height: 50px;
	border-bottom: solid 1px #999;
	box-shadow: 0px 1px 0px #E6E6E6;
	display: block;
	text-align: left;
	line-height: 50px;
	box-sizing: border-box;
	padding-left: 30px;
}
.lateral a:hover{
	padding-left: 20px;
	background-color: #E6E6E6;
	border-left: solid 10px var(--brillante);
}
/**************************** DROPDOWN ****************************/

.dropdown{
	position: relative;
	display: inline-block;
	z-index: 4;
}
.dropdown:hover{
	z-index: 100;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: var(--uiadm);
	min-width: 100px;
	box-shadow: 0px 0px 5px 4px rgba(0,0,0,.5);
	padding: 12px 0px;
	border-radius: 10px;
}
.dropdown-content a{
	padding: 12px 16px;
	color: #000;
	text-decoration: none;
	display: block;
	/*border-bottom: solid 1px var(--brillante);*/
}
.dropdown-content a:hover{
	background-color: #8E8C8B;
	color: #FFF;
}
.dropdown:hover .dropdown-content{
	display: block;
}
/**************************** DETALLE ****************************/
.detalle-cart span, .detalle-cart p, .detalle-cart a{
	display: block;
}
.cantidades{
	position: relative;
	width: 100%;
	height: 51px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.metodos{
	position: relative;
	width: 100%;
	height: 126px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.direccion{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.direcciones-drop{
	width: 330px;
	font-size: 15px;
	text-transform: none;
	color: #4D4D4D;
	font-weight: normal;
}
.direcciones-drop div{
	padding: 10px 15px;
	display: flex;
}
.direcciones-drop div:not(:last-of-type){
	border-bottom: solid 1px #999;
	box-shadow: 0px 1px 0px #E6E6E6;;
}
.direcciones-drop input[type=radio]{
	margin-right: 10px; 
}
.botonp{
	position: relative;
	width: 145px;
	height: 35px;
	border-radius: 5px;
	border: none;
	background-color: var(--brillante);
	color: #FFF;
	font-size: 18px;
	text-transform: uppercase;
	margin: 9px;
	cursor: pointer;
	display: block;
}
.botonp:hover{
	background-color: var(--titulos);
}
.botonp:disabled {
	background-color: var(--ochenta);
}
.banca{
	position: relative;
	width: 100%;
	display: flex;
	margin-bottom: 20px;
}
.banca div{
	position: relative;
	width: 50%;
}
.pedir{
	position: relative;
	width: 100;
	text-align: center;
}
.clabe{
	font-size: 14px;
}
/**************************** PRODUCTO DETALLE ****************************/
.producto-detalle{
	position: relative;
	width: 680px;
	height: 200px;
	border: solid 1px var(--brillante);
	border-radius: 10px;
	margin-bottom: 10px;
	display: flex;
}
.producto-detalle img{
	position: relative;
	width: 180px;
	height: 180px;
	left: 5px;
	top: 5px;
}
.productos p{
	margin: 6px 0px;
}
.data-p, .precios-p{
	margin-left: 10px;
	padding: 25px;
	box-sizing: border-box;;
}
.data-p p:first-child{
	color: var(--brillante);
	font-weight: 500;
}
.data-p span, .precios-p span{
	color: #000;
}
.data-p p:nth-child(2){
	font-weight: 500;
}
.precios-p p:nth-child(3){
	font-weight: 500;
}
.precios-p p{
	margin: 18px 0px;
}
.spinner{
	width: 75px;
	height: 26px;
	border: solid 1px #999;
	border-radius: 5px;
}
.precios-p i{
	position: absolute;
	bottom: 15px;
	right: 15px;
}
.spinner input[type=button]{
	position: relative;
	top: 0px;
	width: 20px;
	border: 0px;
	height: 24px;
	background-color: #FFF;
	margin: 0px 1px;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
}
.spinner input[type=button]:hover{
	background-color: #EEE;
}
.spinner input[type=button]:active{
	background-color: var(--cart);
}
.spinner input[type=text]{
	width: 19px;
	height: 23px;
	border: none;
	text-align: center;
	font-size: 16px;
}
.row-detalle::after{
	content: url(../imagenes/arrow.svg);
	width: 15px;
	height: 16px;
	display: inline-block;
	top: -3px;
}
/****************************  FOOTER ****************************/
.footer li, ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.footer li{
	/*display: flex;*/
	margin-bottom: 30px;
}
.footer i{
	font-size: 18px;
	color: #FF5E1F;
	margin-right: 8px;
	line-height: 30px;
}
.footer a{
	text-decoration: none;
}
.f-titulo{
	margin-bottom: 25px;
	color: #FFF;
	font-size: 18px;
	border-left: solid 3px #ED1C24;
	padding-left: 10px;
}
/********************************************/
.center{
	text-align: center;
}
.initial{
	display: initial !important;
}
.upper {
  text-transform: uppercase;
}
.detalle-cart {
  position: absolute;
  right: 43px;
  top: 25px;
  width: 370px;
  height: 550px;
  border: solid 1px var(--brillante);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  color: var(--ochenta);
  font-weight: 500;
  font-size: 18px;
}
.msjtxt, .msjbad{
	position: relative;
	width: 90%;
	height: 50px;
	text-align: center;
	background-color: palegreen;
	border-radius: 10px;
	border: solid 1px mediumseagreen;
	line-height: 50px;
	color: darkcyan;
	display: inline-block;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
	display: block
}
.msjbad{
	background-color: lightcoral;
	border: solid 1px red;
	color: red
}
/**************************** PEDIDOS ****************************/
.pedido{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 195px;
	background-color: #CCC;
	border-radius: 10px;
	margin: 25px;
	text-transform: uppercase;
	font-size: 16px;
	color: #666;
}
.data-pedido p{
	margin: 0 0 10px 0;
}
.data-pedido{
	padding: 25px;
	box-sizing: border-box;
	border-right: solid 1px #999;
	box-shadow: 1px 0px 0px #E6E6E6;
}
.data-pedido:last-of-type{
	border: none;
	box-shadow: unset;
}
.data-pedido span{
	color: #000;
}
.data-print{
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 15px;
}
.data-trash{
	position: absolute;
	bottom: 0px;
	right: 0px;
	margin: 25px;
}
.data-pedido table{
	color: #000
}
.data-pedido td{
	padding-right: 15px; 
}
.data-monto{
	width: 250px;
}
/*****************************************************/
.datosg, .datosu {
  width: 451px;
  display: block;
  margin: 25px;
  padding: 25px;
  box-sizing: border-box;
}
.domicilios {
  position: absolute;
  width: 590px;
  display: block;
  right: 0px;
  top: 0px;
  margin: 25px;
  padding: 25px;
  box-sizing: border-box;
  height: auto;
}
.datosu {
  position: absolute;
  top: 250px;
  left: 0px;
}
.btn-d{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 170px;
	text-align: center;
}
.btn-d a{
	line-height: 35px;
	text-decoration: none;
}
.trash{
	font-size: 24px;
	color: var(--ochenta);
	margin: 25px;
	cursor: pointer;
}
.trashc{
	color: var(--ochenta);
	cursor: pointer;
}
.editar-u{
	position: absolute;
	right: 0px;
	bottom: 0px;
	margin: 25px;
	font-size: 24px;
	color:  var(--brillante);
	cursor: pointer;
}
.codigo{
	text-align: center;
	text-transform: uppercase;
}
.codigo span:first-child{
	color: var(--ochenta);
}