@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

body {margin:120px 0px 0px 0px; background:rgba(255,255,255,1.00);}
h1{font-family: "Lilita One", sans-serif; font-size:2.2em; font-weight:400; color:rgba(3,19,38,1.00); line-height:110%;}
h2{font-family: "Lilita One", sans-serif; font-size:1.3em; font-weight:400; color:rgba(255,90,16,1.00); line-height:110%;}
h3{font-family:'Montserrat', sans-serif; font-size:1.0em; font-weight:200; color:rgba(3,19,38,1.00); line-height:110%;}
 p{font-family:'Montserrat', sans-serif; font-size:1.0em; font-weight:400; color:rgba(0,0,0,1.00);}
fieldset{font-family:'Montserrat', sans-serif; font-weight:300; color:#333;}
.pedido{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:400; color:#333;}
.promo{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:600; color:rgba(51,51,51,1.00); margin:0px;}
.price{font-family:'Montserrat', sans-serif; font-size:1.4em; font-weight:600; color:rgba(3,19,38,1.00);}
.desc{font-family:'Montserrat', sans-serif; font-size:1.0em; font-weight:400; color:rgba(0,0,0,1.00);}

table{overflow-x:auto; width:100%; max-width:980px;}
table thead th{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:400; color:#FFF; background-color:#333; text-align:center;}
table tr th{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:400; color:#FFF; background-color:#333; text-align:center; padding: 5px;}
table tr td{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:300; color:#333; padding: 3px; border:rgb(165,165,165) solid 1px;}
table tfoot td{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:400; color:#FFF; background-color:#333; text-align:center;}
tr:nth-child(even) {background:rgba(225,225,225,0.75);}
tr:nth-child(odd) {background:rgba(225,225,225,0.25);}

input, select,textarea{font-family:'Montserrat', sans-serif; font-size:12px;font-style:normal;color:#000;background:#F5F5F5;border-color:#c8deef;border-width:thin;padding:3px;}
input.buscar{background:#fff;border:none;}
input.agregar{font-family:'Montserrat', sans-serif; font-size:0.8em; font-style:normal; color:rgba(0,0,0,1.00); background:rgba(255,210,56,1.00); border-radius:7px; border:none; padding:5px 10px;; margin:5px; }
input.registro{font-family:'Montserrat', sans-serif;font-size:1.5em;font-style:normal;color:#fff;background:#333;border-radius:3px;padding:10px 15px;}

/*input.comprar{background: -moz-linear-gradient(center top , rgba(140, 37, 115, 0), rgb(80, 20, 65)) repeat scroll 0% 0% rgb(140, 37, 115);border-radius:7px;box-shadow: 0px 0px 0px 1px rgb(115, 30, 95) inset, 0px 2px 1px 0px rgba(255, 255, 255, 0.75) inset;color:#fff;font-family:'Montserrat', sans-serif;font-size:1.2em;font-style:normal;padding:5px;text-shadow:#000 1px 1px 1px;transition: background-color 0.2s ease-in-out 0s;}*/
input.comprar{background:#333; border-radius:7px; box-shadow: 0px 0px 0px 1px rgb(0, 0, 0) inset, 0px 2px 1px 0px rgba(255, 255, 255, 0.75) inset; color:#fff; font-family:'Montserrat', sans-serif; font-size:1.2em; font-style:normal; padding:5px; text-shadow:#000 1px 1px 1px; transition: background-color 0.2s ease-in-out 0s;}

a:link, a:active, a:visited{font-family:'Montserrat', sans-serif;font-size: 0.9em;color:#333;text-decoration:none;}
a:hover{font-family:'Montserrat', sans-serif;font-size: 0.9em;color: #333;text-decoration:none;}
a.footer:link, a.footer:active, a.footer:visited{font-family:'Montserrat', sans-serif; font-size: 0.9em; text-decoration:none; color:rgb(255,255,255); border-bottom:dotted 1px;}

.brand{border:rgba(0,0,0,0.2) solid 1px; display:block; float:left; height:100px; margin:5px 10px; width:160px; }
.brand:hover{border:rgba(0,0,0,0.5) solid 1px; box-shadow: rgba(255,90,16,0.50) 0px 0px 10px;}

.producto{font-family:'Montserrat', sans-serif; font-weight: 600; width:100%; max-width:170px; height:310px; float:left; padding:5px; margin:2px; text-decoration:none; border-radius:10px; border:rgba(200,200,200,1.00) solid 1px; background:#fff; font-size:0.9em; text-align:left;}

.botonmenu{padding:5px 10px; display:block; float:left;}
.botonmenu:hover{background:#333; color:#FFF;}

#menu{position:fixed; top:0; width:100%; background:rgba(255,90,16,1.00); padding:0px; z-index:1000;}
#breadcrum{width:99%; background:rgba(255,255,255,0.6); padding:5px; z-index:1000; text-align:left; margin-top:-30px; }
#logo{display:block; float:left; margin:5px 15px;}
#tools{float:right;}

#contenido{display:block;border-radius:10px;border:#fff solid 2px;background-image:url(images/producto_bkgd.png);padding:10px;margin:5px 5px 100px 5px;font-family:'Montserrat', sans-serif;font-size: 11px;color: #F68B1F;text-decoration:none;}
#promocion{display:block; background:rgb(255,255,255); border-radius:3px; color:#FFF; width:16%; min-width:155px; height:156px;float:right; padding:25px 10px; margin:5px; text-decoration:none; border:#333 solid 1px; font-size:1.4em;text-align:center;}
#footer{width:94%; min-height:30px; font-family:'Montserrat', sans-serif; font-size:1.0em; text-align:center; padding:30px 3%; background:rgba(3,19,38,1.00); margin-top:20px; }
#telefono{width:25%; float:left; text-align:left; margin:0px 10px; display: block; color: white;}
#whatsapp{display: none;}

/* MENU RESPONSIVO */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fafafa;
  width:100%;
}

ul.topnav li {float: left; padding:0px 5px;}

ul.topnav li a {
  display: inline-block;
  color: #000;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  transition: 0.5s;
  /*font-size: 17px;*/
}

ul.topnav li a:hover {background-color: #333; color:#FFF;}
ul.topnav li.icon {display: none;}



@media screen and (min-width:1070px) {
  #foto_prod{width:30%; max-width:300px; float:left; padding-top:10px;}
  #desc_prod{width:64%; max-width:500px; float:left; text-align:left; padding:0px 3%;}
}

@media screen and (max-width:1070px) {
  #tools{display:none;}
  #carrusel{display:none;}
  #foto_prod{width:30%; max-width:300px; float:left; padding-top:10px;}
  #desc_prod{width:30%; max-width:570px; float:left; text-align:left; padding:0px 3%;}
}

@media screen and (max-width:720px) {
  body{background:#FFF;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  
  .producto{display:block; width:50%; max-width:180px; height:320px; float:left; padding:2px; margin:2px; text-decoration:none; border-radius:3px; border:rgba(220,220,220,1.00) solid 1px; background:#fff; font-size:1.0em; text-align:center;}
  .desc{font-family:'Montserrat', sans-serif; font-size:0.9em; font-weight:400; color:rgba(65,65,65,1.00);}
  
  #tools{display:none;}
  #carrusel{display:none;}
  #promocion{width:42%;padding:1%;margin:1%;}
  #foto_prod{width:100%; max-width:580px; float:left; padding-top:0px;}
  #desc_prod{width:94%; max-width:580px; float:left; text-align:left; padding:0px 3%;}
}

@media screen and (max-width:720px) {
	
	#telefono{display: none;}
	#whatsapp{width:25%; float:left; text-align:left; margin:0px 10px; display: block;}

	
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

@media screen and (max-width:480px) {
	.brand{height:75px; margin:2px; width:120px; opacity:0.70;}
	.brand:hover{opacity:1.00; border:rgba(0,0,0,0.3) solid 1px;}
}