/*=============================================
TOP
=============================================*/
.cabecera{
	position: fixed;
	z-index: 3;
	background: white;
}

#top ul{
	margin:5px 0px;
}

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

.barraSuperior{
	background:#00072E;
}

.barraSuperior a{
	color:white;
}

/*=============================================
REDES SOCIALES
=============================================*/

.redSocial{
	width:30px;
	height:30px;
	text-align: center;
	line-height:30px;
	color: white;
}

.social i{
	font-size:20px;
	margin:0 1px;
	transition: all 0.5s ease-in-out;
	vertical-align: sub;
}

.social span{
	font-size: 13px;
}

.social li:hover i{
	transform: scale(1.2)rotate(360deg);
	color: #FF324D;
}

/*=============================================
HEADER
=============================================*/
#buscador{
	margin:5px;
}

#carrito{
	margin:5px 0px;
}
nav{
	padding:10px 0;
}

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

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

.btn-default:hover {
    color: #FF324D;
    background-color: #ffffff;
    border-color: #adadad;
}

nav #carrito button{
	padding:9px 5px;
	border:1px solid silver;
	width: 100%;
	border-radius: 30px;
}

.navbar-brand{
	padding: 5px 10px 5px 0px;
}

.nav>li>a {
    padding-left: 7px;
	padding-right: 7px;
}

.navbar-collapse{
	padding:0;
}

#logo {
	width:200px;
}

.dropdown-menu li a{
	padding:10px;
}

.active a{
	background-color: #FF324D !important;
	color: white !important;
	z-index: 0 !important;
}

.navbar-default .navbar-nav li a:hover{
	background-color: #FF324D !important;
	border-radius: 10px;
	color: white !important;
}

.navbar-nav{
	margin: 0px;
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
/*=============================================
MENU DE NAVEGACION
=============================================*/

.boton-menu:before {
	font-family: 'Font Awesome 5 Free';
	content: "\f0c9";
	font-weight: 900;
	color: #FF324D;
	font-size: 2rem;
}

.icono-cerrar:before {
	content: "\f00d";
	position: relative;
	left: .2rem;
}

.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 17px;
	color: black;
	border-radius: 10px;
	text-align: center;
}

.navbar-nav>li{
	padding:5px;
}

/* #categorias{
	width: 1700px;
	left: -550px;
} */

.dropdown:hover .dropdown-menu{
	display: block;
}

.espacio{
	padding-top:6%;
}
@media (max-width:2000px){

	#categorias {
		width: 1860px;
		left: -535px;
	}

}

@media (max-width:1600px){

	.dropdown:hover .dropdown-menu{
		display: block;
	}

	.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 17px;
	color: black;
	border-radius: 10px;
	text-align: center;
	}

	#categorias{
		width: 1560px;
    	left: -740px;
	}

	.navbar-nav>li{
		padding:5px;
	}

	.espacio{
	padding-top:7%;
	}

}

@media (max-width:1450px){

	.dropdown:hover .dropdown-menu{
		display: block;
	}

	.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 17px;
	color: black;
	border-radius: 10px;
	text-align: center;
	}

	#categorias{
		width: 1400px;
    	left: -515px;
	}

	.navbar-nav>li{
		padding:5px;
	}

	.espacio{
	padding-top:8%;
	}

}

@media (max-width:1280px){

	#logo {
		width:150px;
	}

	.dropdown:hover .dropdown-menu{
		display: block;
	}

	.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 15px;
	color: black;
	border-radius: 10px;
	text-align: center;
	}

	#categorias{
		width: 1150px;
    	left: -570px;
	}

	.navbar-default div{
		padding: 0px;
	}

	.navbar-nav>li>a{
		padding:5px;
	}

	.navbar-nav>li{
		padding:2px;
	}

	.navbar-nav{
		margin: 6px 0px;
	}

	.espacio{
	padding-top:8%;
	}

}

@media (max-width:1000px){

	.dropdown:hover .dropdown-menu{
		display: block;
	}

	.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 10px;
	color: black;
	border-radius: 10px;
	text-align: center;
	}

	#categorias{
		width: 950px;
    	left: -557px;
	}
	.social{
		text-align: center;
	}

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

@media (max-width:768px){

	.espacio{
	padding-top:26%;
	}

	#top ul{
		text-align: center;
	}

	.navbar-default .navbar-nav li a{
	font-weight: bold;
	font-size: 12px;
	color: black;
	border-radius: 10px;
	text-align: center;
	}

	.container{
		width: 100%;
		padding:0px;
		margin:0px;
	}
	
}

@media (max-width:450px){

	#categorias{
		width: auto;
    	left: auto;
	}

	.espacio{
	padding-top:52%;
	}

	.navbar-nav li {
		padding: 0px;
	}

	.navbar-nav .open .dropdown-menu>li>a {
		line-height: 15px;
	}

}

@media (max-width:375px){

	.espacio{

		padding-top:60%;
	}

}