/*Cuerpo*/
.botoncompra{
	outline: none;
	font-size:20px;
	border-radius:100%;
	display:inline-block;
	float:right;
	height:35px;
	width:35px;
	border:none;
	margin-left:60px;
	float:right;
	position:absolute;
	bottom:5px;
right:5px;}

.btn{
	outline: none;
	font-size:20px;
	border-radius:10%;
	height:35px;
	width:auto;
	border:none;
}
.combo{
	font-size:15px;
	border-radius:10%;
	display:inline-block;
	float:right;
	height:35px;
	width:auto;
	border:none;
	position:absolute;
	bottom:5px;
	right:50px;
}

.less{
	argin-top:10px;
	argin-bottom:10px;
	outline: none;
	font-size:20px;
	border-radius:100%;
	display:inline-block;
	float:right;
	height:35px;
	width:35px;
	border:none;
	margin:5px;
	float:right;
}

body{font-family: Arial, Helvetica, sans-serif;font-size: 10px; background-color:black; background-size:100% auto; height: 100%; width:99%;}
#contenedor{width:80%;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:40px; padding:15px; box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.5);background:white;border-radius:20px;}
h1,h2,header a{width:70%;}
h1,h2,h3,p{margin:0px;padding:0px;}
h1{font-size:36px;color:#F44}
h0{font-size:12px;color:#F44}
h3{font-size:20px;color:#F44}
h4{font-size:12px;color:#FF0000}
hs{font-size:12px;color:#FF0000; float:left;}
h2{font-size:12px;font-weight:normal;}
header a{text-decoration:none;color:black;margin-bottom:1px;}
article a{color:black;text-decoration:none;}
article{border-top:1px dashed rgb(170,70,200);padding-top:15px;padding-bottom:15px;}
article img{margin-right:10px;border:5px solid white;float:left;box-shadow:0px 10px 15px rgba(0,0,0,0.4);}
article{clear:both;}
footer{text-align:center;}
#BUSC{padding:6px;background-color: #353535;border-radius:10px;margin-left:auto;margin-right:auto;width:80%;}
#BB{font-size:12px;width:8%;color:#666666;}
#BB:hover{box-shadow: 0px 0px 2px 2px rgba(0,255,0,0.7);color:black;}
#BT{font-size:12px;width:30%;color:#666666;}
#BT:hover{box-shadow: 0px 0px 2px 2px rgba(0,255,0,0.7);color:black;}
#BCB{font-size:12px;width:20%;color:#666666;}
#BCB:hover{box-shadow: 0px 0px 2px 2px rgba(0,255,0,0.7);color:black;}
.icono{width:40px;height:40px;background:none;}
.counter{margin-left:20px;text-decoration:none;font-size:18px}
.counter:hover{text-decoration:underline;}
pb {color: #FFFFFF;}
.cant{
	font-size:25px;
}

/*Productos*/

.product-holder { margin: 0 0 50px 0 ;display: inline; float: left; padding: 0 2px; width: 200px;}
.product { position: relative; padding: 5px 0 0 6px;}
.product-bottom { height: 10px; line-height: 0; font-size: 0;}
.product img { display: block; width: 190px; height: 160px; border: solid 1px #bababa; }

.products .title { margin: 0 0 27px 16px; width: 100px; }
.products .title a.title-link { position: absolute; top: 15px; right: 2px; color: #00a7e7; text-decoration: underline; }
.products .title a.title-link:hover { text-decoration: none; }
.products .row { height: 100px; }
.products .active { background-position: 0 0; }

.product .desc { padding: 5px 2px 2px 5px; width: 185px; height: 98px; background-color: rgb(255,0,0);background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255,0,0)), color-stop(1, rgb(200,55,55)));}
.product .desc p { font-size:10px; font-weight: bold; color: #fff;}
.product .desc p.precio { color: #fff; font-size: 12px;}
.product .desc span.dollar { font-size: 12px;}
.product .desc strike { color: #595959; font-style: italic;}

/*Caja tooltip*/

.tooltip {
	position:relative; /* make span relative to anchor */
	text-decoration:none; /* no underline */
	cursor:pointer; /* make cursor point */
}
.tooltip span { /* main body of tooltip */
	z-index: 5000;
	position:absolute; /* AP it */
	bottom:0px; /* FADE IN/OUT BEGIN */
	left:0%; /* CENTER TOOLTIP */
	margin-left:0px; /* CENTER TOOLTIP */
	margin-top:-100px;
	width:200px; /* tootip width */
	height:auto;
	opacity:0; /* HIDE TOOLTIP in modern browsers */
	visibility:hidden; /* HIDE TOOLTIP in IE */
	padding:5px 5px; /* padding */
	color:#fff; /* text color */
	font:bold 75%/1.5 Arial, Helvetica, sans-serif; /* font */
	text-align:left; /* center text */
	pointer-events:none; /* no unintended tooltip popup for modern browsers */
	border-radius:6px; /* round corners */
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.6); /* text shadow */
	background:rgb(0,0,0); /* IE6/7/8 */
	background:rgba(0,0,0,.9); /* modern browsers */
	border:2px solid rgb(255,255,255); /* IE6/7/8 */
	border:2px solid rgba(255,255,255,.8); /* modern browsers */
	box-shadow:0px 2px 4px rgba(0,0,0,0.5); /* shadow */
	-webkit-transition:all 0.3s ease-in-out; /* animate tooltip */
	-moz-transition:all 0.3s ease-in-out; /* animate tooltip */
	-o-transition:all 0.3s ease-in-out; /* animate tooltip */
	-ms-transition:all 0.3s ease-in-out; /* animate tooltip */
	transition:all 0.3s ease-in-out; /* animate tooltip */
	font-size: 10px;
}
.tooltip span.dif { /* different width tooltip */
	width:190px; /* width */
	margin-left:-102px; /* center it */
}

.tooltip span:after { /* top triangle - the blue background */
	bottom:-10px; /* position top triangle */
	margin-left:-10px; /* center top triangle */
	border-width:10px; /* build top triangle */
	border-top:10px solid rgb(46,182,238); /* build top triangle IE6/7/8 */
	border-top:10px solid rgba(46,182,238,.8); /* build top triangle modern browsers */
}
.tooltip:hover span { /* reveal tooltip */
	opacity:1; /* REVEAL TOOLTIP in modern browsers */
	bottom:44px; /* FADE IN/OUT END */
	visibility:visible; /* REVEAL TOOLTIP in IE */
}
.tooltip span:hover {
	visibility:hidden; /* hide tooltip when moving from link to span in IE */
}

/*tabla*/

table {}

/*barra de menu*/
#cssmenu ul {
	margin: 0;
	padding: 10px;
	list-style-type: none;
	width: auto;
	position: relative;
	top: 0px;
	display: block;
	font-size: 18px;
	font-weight: bold;
	background: #000;
	border-bottom: 1px solid #353535;
	zoom: 1;
	border-radius:10px;
	box-shadow: 0px 0px 1px 1px rgba(255,0,0,0.9);
}
#cssmenu ul:before {
	content: '';
	display: block;
}
#cssmenu ul:after {
	content: '';
	display: table;
	clear: both;
}
#cssmenu li {
	background-color: #000;
	border: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0 4px;
}
#cssmenu li a{
	display: block;
	float: left;
	color: #777;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 20px 7px 20px;
	border-bottom: 3px solid transparent;
	text-align:center;
}
#cssmenu li a:hover, input[type=submit]:hover {
	color: #FFFFFF;
	border-bottom: 3px solid #FF0000;
}

/*logotipo (imagen)*/

.logo {
	WIDTH: 100PX;  
}

.product .desc a{
	display:inline-block;
float:right;}

.product .desc a img{
	display:inline-block;
	float:right;
	height:30px;
	width:30px;
	border:none;
	margin-left:60px;
	float:right;
	position:absolute;
	bottom:5px;
	right:5px;
}

a img:hover{
cursor:pointer;}

#detail {
	height:0px;
	width:0px;
	visibility: HIDDEN;
}

input #car   {
	background:url(../img/myc.png);
	background-repeat: no-repeat;
	border: 0;
	float:left;
	width:20px;
	height:40px;
	text-indent:-999px
}

.i{font-size:12px;}

	table {FONT-SIZE:16PX;}
		tr {FONT-SIZE:16PX;}
			td {FONT-SIZE:16PX;}

/*Movil<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/


@media screen and (min-device-width:100px) and (max-device-width:768px){
	.tooltip span{display:none;}
	.tooltip:hover span{display:block;}
	section {width:100%;display:flex;}
	.tooltip:hover span{visibility:hidden;}
	.tooltip span:hover {visibility:hidden;}
	
	body{font-size: 14px;}
	#contenedor{width:90%;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px; padding:5px;border-radius:10px;}
	h1,h2,header a{width:90%;}
	h1,h2,h3,p{margin:0px;padding:0px;}
	h1{font-size:36px;}
	h0{font-size:14px;}
	h3{font-size:22px;}
	h4{font-size:16PX;}
	hs{font-size:16PX; float:left;}
	h2{font-size:16PX;font-weight:normal;}
	.icono{margin-left:25px;margin-right:25px;width:80px;height:80px;}
	.cant{font-size:55px;color:white;}
	
	.botoncompra{
		font-size:45px;
		width:80px;
		height:80px;
		margin-left:80px;
		position:absolute;
		bottom:15px;
	right:20px;}
	
	.btn{
		zoom:2;
	}
	.combo{
		font-size:45px;
		width:80px;
		height:80px;
		margin-left:80px;
		position:absolute;
		bottom:15px;
		right:140px;
	}
	
	#detail{
		outline: none;
		font-size:45px;
		border-radius:100%;
		display:inline-block;
		border:none;
		visibility:visible;
		font-size:45px;
		width:80px;
		height:80px;
		margin-left:80px;
		position:absolute;
		bottom:15px;
		left:10px;
	}
	
		.less{
		font-size:45px;
		width:80px;
		height:80px;
		margin-left:0px;}
	
	/*Productos*/
	
	.product-holder {font-size:30px;display:inline-block; float: right; padding: 0 2px; width: 100%;margin: 0 0 50px 0;}
	.product {font-size:30px; display:flex;position: relative; padding: 5px 0 0 6px; background-color:none;}
	.product-bottom { font-size:30px;height: 10px; line-height: 0; font-size: 0; background-color:none;}
	.product img { vertical-align:middle; display: block; width: 400px; height: auto;}
	
	.products .title {font-size:30px;margin: 0 0 5PX 5PX; width: 100px;}
	.products .title a.title-link { display:block;position: relative; top: 5PX; right: 2px; color: #00a7e7; text-decoration: underline; float: right;}
	.products .title a.title-link:hover { text-decoration: none;}
	.products .row{height: 300px;}
	
	.product .desc {font-size:30px; border-radius:0 0 40px 0; float:left;vertical-align:middle; position: absolute; display:inline-block;padding: 10px 5px 5px 10px; width: 45%; height: 96%;}
	.product .desc p { font-size:40px; font-weight: bold;}
	.product .desc p.precio {font-size: 35px;}
	.product .desc span.dollar { font-size: 35px;}
	.product .desc strike {font-style: italic;}
	
	#cssmenu ul {
		margin: 0;
		padding: 1px;
		list-style-type: none;
		width: auto;
		position: relative;
		top: 0px;
		display: block;
		font-size: 48px;
		font-weight: bold;
		border-bottom: 1px solid #353535;
		zoom: 1;
	}
	
	.logo {
		width:100px; 
	}
	
	.product .desc a{
		display:inline-block;
	float:right;}
	
	.product .desc a img{
		display:inline-block;
		float:right;
		height:80px;
		width:80px;
		border:none;
		margin-left:60px;
		float:right;
		position:absolute;
		bottom:15px;
		right:5px;
	}
	
	a img:hover{
	cursor:pointer;}
	
	.i{font-size:0px;}
	
	.counter{font-size:58px}
	
	table {FONT-SIZE:25PX;}
		table tr {FONT-SIZE:25PX;}
		table tr td {FONT-SIZE:25PX;}
}