/*
Zerotheme.com | Free Html5 Responsive Templates
Zerogrid - A Single Grid System for Responsive Design
Author: Kimmy
Version : 2.0
Author URI: http://www.zerotheme.com/
*/
/* -------------------------------------------- */
/* ------------------Grid System--------------- */ 

.zerogrid-header{ width: 1349px; position: relative; margin: 0 auto; padding: 0px;}
.zerogrid { margin: 0 auto;  width: 80% }
.zerogrid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/*.zerogrid .row{vertical-align:middle;height:100%;}*/


.zerogrid .row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.zerogrid .row:after{clear: both; }


.zerogrid .wrap-col{margin:10px;}

.zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-3, .zerogrid .col-4-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{float:left;}

.col-3-3, .col-4-4 {margin: 0 5%;}

.zerogrid .col-full{width:100%;}

 .col-1-2{width:50%;float:left;}


.zerogrid .col-1-3{width:33.33%;}
.zerogrid .col-2-3{width:66.66%;}

.col-1-4 { width: 25%; height: 336px; margin-top: 25px; }
.zerogrid .col-2-4{width:50%;}
.zerogrid .col-3-4{width:75%;}

.zerogrid .col-1-5{width:20%;}
.zerogrid .col-2-5{width:40%;}
.zerogrid .col-3-5{width:60%;}
.zerogrid .col-4-5{width:80%;}

.zerogrid .col-1-6{width:16.66%;}
.zerogrid .col-2-6{width:33.33%;}
.zerogrid .col-3-6{width:50%;}
.zerogrid .col-4-6{width:66.66%;}
.zerogrid .col-5-6{width:83.33%;}

.zerogrid .row .container {margin-top: 110px; padding: 0 0px;}

.ventanaScroll {display:none;}

.box {
display: inline-block;
float: none !important;
margin: 0 10px;
margin-bottom: 25px;
vertical-align: top;
cursor:pointer;
width:230px

}

.box h3 {
    display: inline-block;
    float: none;
    position: relative;
    width: auto;
    margin: 12px 0;
    color: rgb(64, 64, 64);
    background: none repeat scroll 0% 0% transparent;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
}

.box .cuerpo {    
	color: rgb(128, 128, 128);
    font-size: 14px;
    margin-bottom: 1.5em;
    margin: 0px;
    }



.pix {
    display: block;
    position: relative;
    width: 145px;
    height: 145px;
    margin: auto auto 20px;
    border: 10px solid rgb(236, 236, 236);
    border-radius: 50% 50% 50% 50%;
    transition: all 0.2s ease-in-out 0s;
}

    
    
.barraSlogan   { font-size: 14px; font-weight: bold; margin-top: 5px; margin-right: 29px; margin-left: 29px; float: left; vertical-align: middle }
	
	.sloganText     { color: #000; font-size: 30px; line-height: 30px; visibility: visible; padding: 20px; position: absolute; top: 6%; right: 6%; width: 40%; float: right; text-shadow: 2px 2px 4px #FFF }
.cuerpoHome { font-size: 96%; line-height: 138%; margin: 30px 30px 15px }

.ajusteDirBottom {margin-left:42px;}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.titularHome  { font-size: 134% }
	.cuerpoHome  { font-size: 81% ;line-height:138%;}

	.zerogrid .row .container {padding: 0 30px;}
}

/*se aplica en pantallas de ancho menor a 767px*/
@media only screen and (max-width: 767px) {
	.titularHome  { font-size: 134% }
	.cuerpoHome  { font-size: 81% ;line-height:138%;}
	.sloganText     {  top: 0; }
	.zerogrid{width:100%;}
	.centerText {text-align:center;}
}





@media only screen and (min-width: 620px) and (max-width: 767px) {
	.titularHome   { font-size: 111%; margin: 20px 20px 8px }
	.cuerpoHome   { font-size: 71%; line-height: 138%; margin: 0 20px 15px }
	.zerogrid{width:100%;}
}

/*@media only screen and (min-width: 480px) and (max-width: 619px) {
	.zerogrid{width:100%;}
	.zerogrid .col-1-3, .zerogrid .col-2-3{width:100%;}
	.zerogrid .col-1-4	{width:50%;}
	.zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{width:100%;}
}*/




Z.topHeader {
	width:100%;
}
 
Z.topHeader nav {
	width:90%;
	max-width:1000px;
	margin:20px auto;
	background:#024959;
}
 
.menu_bar {
	display:none;
}
 
Z.topHeader nav ul {
	overflow:hidden;
	list-style:none;
}
 
Z.topHeader nav ul li {
	float:left;
}
 
Z.topHeader nav ul li a {
	color:#fff;
	padding:20px;
	display:block;
	text-decoration:none;
}
 
Z.topHeader nav ul li span {
	margin-right:10px;
}
 
Z.topHeader nav ul li a:hover {
	background:#037E8C;
}
 
Zsection {
	padding:20px;
}

.navMobile {display:none;}

.topHeader .logo   { margin-top:32px; width:220px; }

.topHeaderAdmin .logo {margin-top: 32px;width: 220px;}

.columnaCuerpo {margin-right:10px;margin-left:10px;	padding: 20px;}
.carruselInicio      { text-transform: capitalize }
.columnaCuerpo h2   { font-size: 34px; line-height: 38px; margin-top: 40px; margin-bottom: 0 }

.colContents {
padding: 10px;
min-height: 450px;
margin-top: 100px;
}



#menuvCards            { color: #000; margin: 30px 0 0 0; border-right: 0 solid #999 }
#menuvCards ul   { list-style-type: none; list-style-image: none; display: block; margin: 0; padding: 0 }

#menuvCards li             { font-size: 12px; line-height: 14px; background-color: #fff; text-align: center; cursor: pointer; list-style-type: none; list-style-image: none; margin: 3px 1px; padding: 4px 8px 8px; width: 31%; height: 100px; max-width: 100px; border: solid 1px #666; -moz-border-radius: 3px; -moz-box-sizing: border-box; -webkit-border-radius: 3px; -webkit-box-sizing: border-box; border-radius: 3px; box-sizing: border-box    ;text-decoration: none; text-transform: capitalize;  }





.hiddenDesktop {display:none;}

.container .item {
    min-height: 320px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 800px) {
	
.zerogrid .row .container {padding: 0 30px;}

#wowslider-container1 
	
.ws-title          { display:none; }
.boxes   { cursor: pointer }
.hiddenDesktop {display:none;}
	h1 {
margin: 20px 0 !important;
font-size: 26px;
line-height: 33px;

}

.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

.focus h2 {
font-size: 29px;
line-height: 34px !important;}

.topHeader .logo   { margin:10px;width:150px; }

.slogan    {  font-size: 20px; }

.carruselInicio    { margin: 0; }
	.idiomas   { display:none; }
	.padding20   { display: inline-block; margin-top: 0px; margin-left: 0px; padding: 0; border: solid 0pt #ccc }

	nav {display:none;}

	
	.topHeader .navMobile  { background: #9bd4db; display: block; margin: 0; position: absolute; z-index: 10000; left: -100%; width: 100% }
 
 .topHeader            { height:53px;border-bottom: 1px solid #ccc;}
	.topHeader .navMobile ul li {
		display:block;
		float:none;
		border-bottom:1px solid rgba(255,255,255, .3);
	}
 
 
.topHeader .navMobile  { background: #333333; display: block; margin: 0; position: absolute; z-index: 10001; top: 77px; left: -100%; width: 100% }


.columnaCuerpo {padding:0;}
	.menus {margin: 0;}
.navMobile {
display: none;
}

nav {
display: none;
}


	.menu_bar  { width:30%; text-align: right; display: block; position: absolute; right: 10px; bottom: 22px; }
 
 .idiomas {padding:0}
 
	#wowslider-container1 .ws-title{
	
	bottom: 0px;
	left: 0px; 
	margin-right: 0px;
	padding:5px 5px;
	font-size: 12px;
	line-height: 13px;

}
	.barraSlogan {float: none;}
	.bottom .zerogrid .row {text-align:center;}
	.bottom ul  {  margin-left: -40px }
	.ajusteDirBottom {margin:0;}
	.titularHome { font-size: 196%; }
	.cuerpoHome  { font-size: 96% ;line-height:138%;margin-bottom:30px;}
	.hiddenPhone {display:none;}
	.menuArea {display:none;}
	.menu {display:none;}
	.cuerpo {text-align:left; font-size:14px;line-height:20px;}
	.rightCol {padding:0;margin: 20px;}
	#imagenes img {
float: left;
max-width: 100%;
max-height: 100%;
}
	.sloganText      { font-size: 16px; font-weight: bold; line-height: 16px; top: -10px }

	
	
	.webtitle {
color: #104400;
font-size: 160%;
letter-spacing: 1px;
text-align:center;
margin: 10px;

position: relative;
}
	.columnas {
   -moz-column-count: 1;
   -moz-column-gap: 2em;
   -moz-column-rule: 1px solid #ccf;
   -webkit-column-count: 1;
   -webkit-column-gap: 2em;
   -webkit-column-rule: 1px solid #ccf;
   
}

.margin0 ul {margin-left:-35px;}

	.ml { margin: 0 }
	.mr { margin: 0 }
	
	.zerogrid, .zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{
	width:50%;
	
	}
	
	.containerProdZZZ .col-1-2 {
	width:100%;
	}
	
	.container .item { 
	min-height: 352px;
	width:50%;
}
	
	
}


@media only screen and (min-width: 990px) {

.col-1-2{
    width: 50%;
}
	
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}


.topHeader {height:76px;}
.logo1 img {max-height: 45px;margin-left: 17px;margin-top: 5px;}
.topHeader .row {max-width:1200px;padding-top:10px;margin:0 auto;}

.reveal-modal  .cuerpo {color: #333;font-size: 15px;line-height: 21px;text-align: left;}
.ventanaScroll {padding-right: 10px;padding-left: 10px;}
	
.miniTicket {font-size: 14px;}

.main-prod {
padding: 0 35px;
}

.prodName a {text-decoration:none;}
.prodName h2 {color: #222;font-size: 18px;}

#imagenCarrito {max-width: 53px;}
.prodName {position:absolute;bottom:0;left:50%;max-width:170px;margin-left:-85px}
.cor {width:18px;position:absolute;bottom:0;left:50%;margin-left:-9px;margin-bottom:-9px;}


@media only screen and (max-width: 490px) {
 .col-1-2{width:100%;float:left;}
	
	.cor {bottom: 95px;}
.prodName {position:relative;bottom: -8px;
left: 0;
max-width: 100%;
margin-left: 0;
width: 100%;}
.logo1 img {margin-top: 0px;}
.main-prod {padding: 0px;}
.topHeader {height:62px;}
#pedidoTicket img{max-width:40px;}
.topHeader .row {padding-top:4px;}
.topHeader .navMobile {top: 62px;}
.bloquePrincipal {padding-top: 98px}
.reveal-modal .precio {font-size: 24px;margin-bottom: 20px;color:#000;}
.miniTicket {font-size: 12px;}
.logo1 img {max-height:32px;margin-left:4px;}
.menu_bar {bottom: 14px;}
#signo img {margin: 8px 0;width:10px;height:10px;}
.botoncomprar1 .boton1b {font-size:12px;max-width:100px}
.cantidad {font-size: 11px;width: 17px;padding: 5px;height:17px;
-webkit-appearance:none;
}
	.item {min-height:250px;}
	.logo1 {    margin-left: 10px;
    margin-top: 10px;}
#loginBar {margin-top: 1px;padding: 0;}
#banner2 img {max-width:60px;}
#banner2 {font-size:13px;}
#datos {margin-right:0px;}
td {font-size: 11px;}
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.thumbs img {
max-width: 48px;
max-height: 48px;
}
#imagenCarrito {margin-left:63px;max-width: 44px;}
.bolaProds1top {color: #000; margin-left: -28px; 
}
}

.zerogridL {
	display: flex;
    flex-direction: row;
    align-items:: center;
    position: relative;
    z-index: 9000;
    justify-content: flex-end;
    top: 4px;
    right: 150px;
    float: right;
}
.ws_images ul {
	padding:0;
	text-align: center;
	list-style: none;
}


@media only screen and (max-width: 400px) {
.col-1-4 { width: 25%; height: 300px; margin-top: 18px; }
	.col-3-3, .col-4-4 {
	float:left;
    margin: 0 4%;
}
	
	
.inputs, .inputsBox, .inputsBoxArea {

    max-width: 280px;}
    
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}

.main-prod {
padding: 0;
}
	
	
	.col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{
	width:100%;
	}
	
	
	.zerogrid .col-1-4 {
    width: 50%;
}
	.cuerpoBottom .zerogrid .col-1-4, .bottom .zerogrid .col-1-3 {
    width: 100%;
}
	
}
	




	
	