/*=============================================
MENU MOBILE
=============================================*/

nav.navbar { display: none; position: fixed; z-index: 9999; overflow-x: hidden; overflow-y: scroll;
background-color:rgba(0,0,0,0.9); width: 100%; height: 100%;  }

nav.navbar li { border-bottom: 1px solid #333; }
nav.navbar li:first-child  { border-bottom: 0px; padding-top: 20px; padding-left: 15px; padding-bottom: 10px; }
nav.navbar li a { color: #eee; }
nav.navbar .btn-cerrar { text-align: right; padding: 20px 20px 10px 10px; color: #fff; }
nav.navbar .btn-cerrar i { font-size: 30px; color: #fff;  }

nav.navbar .input-group .form-control { width: 250px !important; }
nav.navbar .input-group .btn-default { border-radius: 0px; }



/*=============================================
TOP
=============================================*/

#top ul{
	padding-top:8px;
}

#top ul li{
	display:inline;
	line-height:30px;
	margin:0px 5px;
	color:white;
}

.social ul li a i{
	font-size:18px;
	margin:0 1px;
}
.social ul li a i:hover{ color: #000; }

.registro ul{
	text-align: right;
	font-size:12px;
}

/*=============================================
HEADER
=============================================*/

header #btnCategorias{
	margin:20px 0;
}

header #btnCategorias p{
	line-height:40px;
	margin-bottom:0px;
}

header #btnCategorias p span{
	cursor: pointer;
}

header #buscador{
	margin:40px 0 0;
}

header #buscador input{
	padding:19px;
	border-radius:0;
}

header #buscador button{
	padding:9px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito{
	margin:20px 0;
}

header #carrito 	{ text-align: center;  }
dl { margin:0 !important; padding-right: 10px; }
dd, dt 	{ display:inline-table;  }
dd { margin-left: 10px;  }
header dd a { height: 26px; display: inline-block; }
dd a:hover { color:#000; font-weight: bold; }

header .container { position: relative; }
header .iconos-cabezote { margin-top: 15px; }
header .iconos-cabezote li { padding:0; margin: 0px; display: inline-table; }
header .iconos-cabezote li a { padding:10px 10px; }
header .iconos-cabezote li a:hover { color: #000; }
header .iconos-cabezote li a i { font-size: 22px; }


header #carrito button{
	padding:9px 15px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito p{
	padding:2px;
	padding-left:60px;
	border:1px solid #aaa;
	font-size:12px;
}

header #categorias{
	display:none;
	margin-top:-10px;
	position: relative;
	padding-bottom:20px;
}

header #categorias h4{
	margin-top:20px;
	margin-bottom:-10px;
}

header #categorias hr{
	border:1px solid rgba(255,255,255,.3);
}


.btn-carrito  .fa-shopping-cart { font-size: 26px; height: 48px; }

/*=============================================
MENU
=============================================*/

.wrapper-menu { display: block; background-color: #618037; width: 100% }
.wrapper-menu .menu { display: block; width: 100%; display: flex; justify-content: center; padding:0; margin:0; }
.wrapper-menu .menu li { list-style: none; align-items: center; position: relative; }
.wrapper-menu .menu li a { float: left; font:bold 18px Arial,Helvetica Neue,Helvetica,sans-serif;
padding: 15px 25px; color: #fff; text-transform: uppercase;  } 
.wrapper-menu .menu li a:hover { background-color: #789b41;  }

.wrapper-menu .menu li ul { visibility: hidden; position: absolute; top: 51px;
    z-index: 99; width:940px ;  left: -85px; background-color: #fff; padding:10px; border:1px solid #ddd }

.wrapper-menu .menu li ul.menu-mupa { visibility: hidden; position: absolute; top: 51px;
    z-index: 99; width:220px ;  left: 0px; background-color: #fff; padding:0px; }

.wrapper-menu .menu li ul li { width: 24.4% !important; float: left; min-height: 39px; /*
margin-left: 1px; margin-right: 1px;*/ }
.wrapper-menu .menu li ul.menu-mupa li { width: 100% !important; max-height: auto !important; min-height: auto !important; margin: 0px; }

.wrapper-menu li:hover ul li a { color: #888; padding: 2px 2px; text-transform: none !important;
font:bold 16px Arial,Helvetica Neue,Helvetica,sans-serif; width: 100%; overflow-x: hidden; overflow-y:
 auto; margin:0; background: none !important; }

.wrapper-menu .menu li ul li a { display: block !important; width: 100% !important; }
.wrapper-menu .menu li ul.menu-mupa li a { padding: 10px; border-bottom: 1px solid #ddd; }
.wrapper-menu .menu li ul li .subcategoria { width: 100%; display: none; min-height: 115px;  }
.wrapper-menu .menu li ul li .subcategoria  a { width: 100% !important; display: block !important;  }

.wrapper-menu ul li:hover ul, .wrapper-menu ul li:hover ul.menu-mupa  { visibility: visible }
.wrapper-menu li:hover ul li { position: relative; list-style: none; width: 100%; }

.wrapper-menu li:hover ul li a:hover { color: #333; }

.wrapper-menu .menu .categoria a { height: 40px !important;  overflow: hidden !important; background-color:#789f3b !important; color:#fff; padding:10px 5px; font-size: 15px; text-align: center; }
.wrapper-menu .menu .categoria a:hover { color: #fff; background-color: #6e8a45 !important; }

.wrapper-menu .menu .categoria-eco a { background-color:#493723 !important; }
.wrapper-menu .menu .categoria-eco a:hover { background-color: #382612 !important; }

.wrapper-menu .menu .categoria-infantil a { background-color:#c77c00 !important; }
.wrapper-menu .menu .categoria-infantil a:hover { background-color: #a76900 !important; }

.wrapper-menu .menu .categoria-prosalud a { background-color:#629bc1 !important; }
.wrapper-menu .menu .categoria-prosalud a:hover { background-color: #4079a0 !important; }

.wrapper-menu .menu .categoria-canchas a { background-color:#ba633d !important; }
.wrapper-menu .menu .categoria-canchas a:hover { background-color: #a9411b !important; }

.wrapper-menu .menu .categoria-mascotas a { background-color:#837f76 !important; }
.wrapper-menu .menu .categoria-mascotas a:hover { background-color: #615c54 !important; }

.wrapper-menu .menu .categoria-residuos a { background-color:#7f2929 !important; }
.wrapper-menu .menu .categoria-residuos a:hover { background-color: #5d0707 !important; }

.wrapper-menu .menu .categoria-ejercitadores a { background-color:#d7cbae !important; }
.wrapper-menu .menu .categoria-ejercitadores a:hover { background-color: #b5a99d !important; }

.wrapper-menu .menu .categoria-movilidad a { background-color:#23383f  !important; }
.wrapper-menu .menu .categoria-movilidad a:hover { background-color: #01161d  !important; }

.wrapper-menu .menu .categoria-paneles a { background-color:#5F798A  !important; }
.wrapper-menu .menu .categoria-paneles a:hover { background-color: #3d5769  !important; }



/*=============================================
VENTANAS MODALES
=============================================*/

.modalTitulo{
	padding:5px 0px;
}

.modalTitulo h3{
	text-align:center;
	margin-top:-5px;
	padding:15px 0px;
	border-radius:5px 5px 0px 0px;
}

.modalFormulario .close{
	position:absolute;
	right:27px;
	top:15px;
	color:white;
}

.modalFormulario .facebook, .modalFormulario .google{
	cursor:pointer;
}

.modalFormulario .facebook p{
	background:#46639f;
}

.modalFormulario .google p{
	background:#d6513e;
}

.modalFormulario .facebook p, .modalFormulario .google p{
	color:white;
	text-align:center;
	line-height:40px;
	padding:8px;
	font-size:18px;
	margin-top:10px;
	margin-bottom:20px;
}

.modalFormulario p i{
	margin-left:-25px;
	margin-right:25px;
	font-size:25px;	
}

.modalFormulario form{
	padding:20px;
}

.modalFormulario form hr{
	border:1px solid #eee;
}

.modalFormulario form input[type="text"], .modalFormulario form input[type="email"], .modalFormulario form input[type="password"]{
	padding:25px;
}
.modalFormulario form input[type="submit"]{
	padding:15px;
}

.modalFormulario form .checkBox{
	margin-top:10px;
}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:20px 60px;
		padding-left:0px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:25px 60px;
		padding-left:0px;
	}

	header #carrito{
		padding-left:70px;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}

}


/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:20px 0px;
	}

	/*header #carrito{ padding-left:55px; }*/

	header #carrito p{
		display:none;
	}

	.modalFormulario .facebook p{
		margin-right:-15px;
	}
	.navbar li { width: 100%; }
	.navbar ul { width: 100%; }
}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:767px){

	/*=============================================
	TOP
	=============================================*/

	#top ul{
		text-align: center;
	}

	#top #registro{
		border-top:1px solid #222;
	}
	
	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:10px;
		padding-bottom:10px; max-width: 200px;
	}

	header #categorias{
		margin-bottom:10px;
	}

	header #buscador{
		margin-bottom:10px;
	}

	header #carrito{
		margin:0px;
	}

	.modalFormulario .google p{
		margin-top:-15px;
	}
	
}

@media (max-width:767px){
	header #logotipo img{
		max-width: 160px;
	}	
}