﻿* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.icon-menu:before {
    content: "\eaea";
}

#menuColorFondo
{
    position: fixed;
    width: 100%;
    height: 70px;
    z-index: 89;
    opacity: 1;
    top: 0px;
    margin-left: 0px;
    background-color: #c9c9c9;
    display: none;
}

#menuFondo
{
    position: fixed;
    float: left;
    width: 100%;
    text-align: right;
    z-index: 90;
    opacity: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    /*height: 30px;*/
}

.MenuFondoFijo
{
    position: fixed;
    width: 88%;
    text-align: right;
    z-index: 90;
    opacity: 1 !important;
    background-color: #ffffff;
    top: 0px !important;
    /*margin-left: 12%;    */
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}

#menuFondoInterior
{
    /*float: left; */
    background-color: #fff;
    width: 90%;
    /*max-width: 944px;
    min-width: 944px;*/
    /* text-align: right; */
    z-index: 10;
    height: 70px;
    /*margin-left: 10%; */
    /* top: 15px; */
    position: relative;
    oveflow: auto;
    display: flex;
    justify-content: center;
}

.logoEnMenu
{
    min-width: 155px !important;
    margin-top: -12px;
}

.RedesSocialesMenu
{
    position: relative;
    padding-top: 22px;
    margin-right: 20px;
}

.CapaParaCentrarMenu
{
    position: relative; 
}

.menuTexto
{
    vertical-align: middle;
    padding: 10px;
}

.menu_bar {
	display:none;
}
 
#menu 
{    
    text-align: center;
    color: #62626a;
    /* right: 0; */
    /* position: absolute; */
    font-size: 14px;
    font-family: JosefinSans-Light;
    font-weight: bold;
    position: relative;
    padding-top: 15px;
    margin-right: 20px;
}
 
#menu ul {
list-style-type: none;
}

#menu ul li {
    width: 110px;
    float: left;
    color: #62626a;
    background-color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}
 
#menu ul li.nivel1 ul.nivel2 li {
    color: #62626a;
    background-color: #c9c9c9;
    height: auto !important;
    top: 45px;
}



#menu ul li.nivel2,#menu ul.nivel3 li, #menu ul.nivel4 li
{
    background-color: #c9c9c9;
}

#menu ul li a {
display: block;
text-decoration: none;
color: #62626a;
padding: 0px;
position: relative;
}

#menu ul li.nivel1 { 
float: left;
}

#menu ul li.nivel2 { 
float: left;
background-color: #c9c9c9;
}

/* Esta clase es la que hace que se muestren las cosas y se oculten el nivel 1 de submenú */
#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{
    display: block;
    position: absolute;
    /*left: 108px;*/
    font-weight: bold;
}

/* Esta clase es la que hace que se muestren las cosas y se oculten el nivel 2 de submenú */
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
    display: block;
    position: absolute;
    left: 100px;
    top: 10px;
}

#menu ul.nivel2
{
    display: none;
    width: 145px;
    position: absolute;
    /*left: 108px!important;*/
    font-family: JosefinSans-Light !important;
    text-transform: lowercase;
}

#menu ul.nivel2 li
{
    /*border: 0px !important;*/
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#menu ul.nivel2 li a:hover
{
    background-color: #000000;
    color: White;
    border: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#menu a.nivel2 .menuTexto
{    
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* Dani nivel 4 */
/* Para ampliar niveles solo hay que copiar este apartado y incrementar en uno el número del nivel */

#menu ul li a.nivel4, #menu ul li a.nivel4ie {
color: #000000;
}

#menu ul li ul li ul li a {
width: 100px;
/*padding: 8px 0px;*/
border-top-color: transparent;
}

#menu ul li ul li ul li a:hover {
border-top-color: transparent;
position: relative;
color: Black;
}

#menu ul li ul li ul li ul li a.primera {
border-top-color: transparent;
}

/* Esta clase es la que hace que se muestren las cosas y se oculten el nivel 3 de submenú */
#menu ul li ul li ul li a:hover ul.nivel4, #menu ul li ul li ul li:hover ul.nivel4 {
display: block;
position: absolute;
left: 100px!important;
left: 100px;
top: 10px!important;
color: Black;
height: 33px !important;
    
}
 
.capillaCarrito
{
    width: 12%; 
}

.capaCarritoYNumero
{
    margin-top: 10px;
    text-align: center;
}

#BannerHorizontalInicio {
    display: block;
}

#BannerHorizontalInicioResponsive {
    display: none;
}

.OpcionVisible {
    display: block !important;
    background-color: Red;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
 
@media screen and (max-width: 1024px) {
	body {
		padding-top:80px;
	}
	
	.logoEnMenu
	{
	    display: none !important;
	}
	
	#Logo
	{
	    display: none;
	}
	
	#Buscador
	{
	    /*display: none;*/
	}
	
	#menuColorFondo
    { 
    }
    
    #menuFondo
    {
        float: none;
        margin: 0;
        top: 0 !important;
        opacity: 1 !important;
        width: 100%;
    }
    
    .menuTexto {
        padding: 20px;        
    }
    
    #menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2
    {
        display: none;
        position: relative;
    }
    
    #TituloTransporte {
    top: 90px;
    }
    
    #TituloTransporteInicio {
        position: relative;
        width: 100%;
        overflow: auto;
        text-align: center;
        display: block;
    }
    
    .TituloGastosEnvio {
        position: relative;
        float: inherit;
        margin-right: 0px;
        width: 100%;
        text-align: center;
    }
    
    .TituloEnvioGratis {
        position: relative;
        clear: both;
        float: inherit;
        margin-left: 0px;
        width: 100%;
        text-align: center;
    }
    
    #ContenidoGeneralCatalogo 
    {
        margin-top:29px !important;
    }
    
    #menuFondoInterior
    {
        width: 100%;
        margin-left: 0px;
    }
    
    .MenuFondoFijo
    {
        position: fixed !important;
        width: 100%;
        z-index: 90;
        opacity: 1;
        background-color: #ffffff;
        top: 0px !important;
        margin-left: 0;    
        transition: 0.5s ease;
        -moz-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
    }
    
	.menu_bar {
		display:block;
		width:100%;
		position: fixed;
		top:0;
		height: 90px;
		left:0;
	}
	
	.ImagenLogo
	{
	    float: left;
	    height: 73px !important;
	}
 
	.menu_bar .bt-menu {
		display: block;
		padding: 20px;
		color: #333;
		overflow: hidden;
		font-size: 25px;
		font-weight: bold;
		text-decoration: none;
	}
	
	.menu_bar .bt-menu-logo 
	{
	    float: left;		
		padding: 10px;
		color: #333;
		overflow: hidden;
		font-size: 25px;
		font-weight: bold;
		text-decoration: none;
	}
 
	.menu_bar span {
		float: right;
        font-size: 30px;
        margin-top: 20px;
	}
 
	#menu {
		width: 35%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
		overflow: scroll;
		top: 90px;
	}
	
	#menu ul
	{
	    background-color: #fff;
	}
 
	#menu ul li {
		display: block;
		border-bottom:1px solid rgba(0,0,0,0.4);
		width: 100%;
		height: inherit;
	}
 
	#menu ul li a {
		display: block;		
	}
 
	#menu ul li:hover .nivel1 {
		display: none;
	}
 
	#menu ul li .nivel1 {
		width: 100%;
		position: relative;
	}
 
	#menu ul li .nivel1 li a {
		margin-left:20px;
	}
	
	#menu ul li .nivel2 
	{
	    display: none;
	    position: relative;
	    left: 0px;
	    width: 100%;
	}
	
	#menu ul li:hover .nivel2 
	{
	    display:none;
        position: relative;
        left: 0px;
        width: 100%;
    }
	
	#menu ul li .nivel2 li a
	{
	    width: 100%;
	}
	
	#menu ul li .nivel2 li .nivel3
	{
	    display: none;
	    position: relative;
	    left: 0px;
	    width: 100%;
	}
	
	#menu ul li .nivel2 li:hover .nivel3
	{
	    display: none;
	    position: relative;
	    left: 0px;
	    width: 100%;
	}
	
	#menu ul li .nivel2 li .nivel3 li, #menu ul li .nivel2 li .nivel3 li a
	{
	    width: 100%;
	}
 
	#menu ul li .caret {
		float: right;
	}
	
	#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3
	{
	    left: 0px !important;
	    top: 0px !important;   
	}
	
	.ImagenBannerInicio {
        width: 100%;
        height: auto;
}

    .capillaCarrito
    {
        position: fixed;
        right: 0px;
        top: 0px;
        width: 58px;
        z-index: 20;
        height: 42px;
    }
    
    /*#carritoCesta
    {
        position: fixed !important;
        top: 0px !important;
        right: 18px !important;
    }*/
    
    #carritoCapa
    {
        display: none !important;
    }
    
    #MensajeProductoAnyadido
    {
        display: block;
    }

#BannerHorizontalInicio {
    width: 1024px;
}

#BannerHorizontalInicioResponsive {
    display: none;
}

.AnyadirCarritoListadoInicio 
{
    display: block !important;
    opacity: 1 !important;
    left: 0px;
}

.CapaProductosDestacadosInicio {
    width: 100%;
}

.ElementoMenuFooter {
    margin-left: 90px;
}
    
    .ProductoDestacadoInicio {
        width: 50%;
        min-width: 230px !important;
        padding-right: 10%;
        padding-left: 10%;
        margin-bottom: 75px;
    }
    
    #ContenidoPaginaCatalogoDetalle {
    width: 100% !important;
        max-width: inherit;
    min-width: inherit;
    }
    
    .ctrFamilia_ProductoHorizontalCatalogo {
        margin-right: 0px;
        margin-left: 0px;
        width: 33%;
        min-width: 200px !important;
        margin-bottom: 75px;
        box-sizing: border-box;
        min-height: 307px;
        overflow: inherit;
    }
    
    .DescripcionProductoListado {
        width: 200px;
    }
    
    
    .DescripcionProductoListadoInicio {
        width: 200px;
    }
    
    
    .AnyadirCarritoListado
    {
        display: block !important;
        opacity: 1 !important;
        margin-top: 11px;
        border: 1px solid #98999b;
        padding-right: 3%;
        padding-left: 3%;
        padding-top: 9px;
        padding-bottom: 9px;
        background-color: #f5f5f5;
        position: absolute;
        z-index: 5;
        top: 10px;
        left: 0px;
        width: 200px;
        box-sizing: border-box;
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out;
        -moz-transition: opacity 0.2s ease-in-out;
        -o-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
    }
    
    .ctrFamilia_Producto_AnyadirCarritoLink, a.ctrFamilia_Producto_AnyadirCarritoLink {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .ctrFamilia_Producto_AnyadirCarritoLinkPack, a.ctrFamilia_Producto_AnyadirCarritoLinkPack {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .ImagenProductoMiniaturaPack {
        width: 25%;
        max-width: 25%;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        margin-right: 0px;
        box-sizing: border-box;
    }
        
    #SectionPacks {
    position: fixed;
    top: 120px;
    }
    
    .BtnAnyadirPack {
        float: inherit;
        /*width: 80%;*/
        min-width: 160px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 40px;
        clear: both;
    }
    
    .ctrFamilia_Producto_AnyadirCarritoLinkColorNegro {
    display: none;
    }
    
    #SectionContenidoPaginaContacto {
    
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 0px;
    }
    
    #ArticleContenidoPaginaContacto {
        width: 100%;
        min-width: 0px;
        clear: both;
        float: inherit;
        text-align: center;
        min-height: 0px;
    }
    
    #ArticleTituloSeccionContacto {
        width: 100%;
        margin-top: 33px;
        margin-bottom: 38px;
    }
    
    #ArticleTituloSeccionContacto ~ h3
    {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #ArticleContactoFormulario {
    float: inherit;
    width: 50%;
    }
    
    #ArticleContactoDatosEmpresa {
    float: inherit;
    width: 100%;
    }
    
    #ContenidoSuperiorProducto {
        padding-right: 10px;
        box-sizing: border-box;
    }
    
    .CapaImagenProductoDetalle {
        min-width: 53%;
    }
    
    .ImagenProductoDetalle {
        max-width: 100%;
        /* max-height: 450px; */
    }
    
    .ImagenProductoMiniaturaRelacionados 
    {
        width: 100%;
    }
    
    .ctrFamilia_ProductoHorizontal_Relacionados 
    {
        margin-left: 0px;
        padding-left: 7px;
        padding-right: 7px;
        width: 20%;
        box-sizing: border-box;
    }
       
    #makeMeScrollable 
    {
        width: 100% !important;
        height: auto !important;
    }
    
    div.scrollableArea 
    {
        width: 100% !important;
    }
    
    div.scrollWrapper 
    {
        overflow: inherit;
    }  
        
    .ScrollFlechaIzda 
    {
        display: none !important;
    }
    
    .ScrollFlechaDcha 
    {
        display: none !important;
    }
    
    .CapaCarritoRespionsive
    {
        position: fixed;
        width: 50px;
        top: 9px;
        right: 10px;
        z-index: 101;
    }
    
    #Buscador
    {
        height: auto;
    	width: auto;
    	min-width: 80px;
    }
    
    .CapaCarritoYNumero
    {
        margin-top: 0px;
        text-align: center;
        width: 50px;
        overflow: auto;
    }
    
    .maximo_Con_Carrito_Relacionados {
        width: 100% !Important;
    }
    
    #ContenidoPaginaMiCesta {
        width: 100%;
    }
    
    .ImagenTarjetaVisa {
        width: 65px;
    }
    
    .ImagenPaypal {
        width: 65px;
    }
}

@media screen and (max-width: 820px) {
	#SectionLineaMigas {
        margin-top: 20px;
        margin-left: 0px;
	}

    #CapaContenedorCabeceras
    {
    display: none;
    }
	
	#BannerHorizontalInicio {
        width: 100%;
        display: none;
    }

    #BannerHorizontalInicioResponsive {
        display: block;
        width: 100%;
    }
    
	.BannerInicioCapa {
        clear: both;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 10px;
	}
	
	.DesplegableAtributosProductosListadoInicio {
        margin-right: 30px;
	} 
	 
	 
	#menu {
		width: 80%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
		overflow: scroll;
		top: 90px;
	}	
	
	.ProductoDestacadoInicio {
        width: 50%;
    }
    
    .AnyadirCarritoListadoInicio {
        /*width: 70%; */       
        width: 200px !important;
    }
    
    .DesplegableAtributosProductosListadoInicio {
        /*margin-right: 50px;*/
        padding-top: 3px;
    }
	
	.CantidadTxtListado
{
    text-align: right;
    font-size: 11px;
    line-height: 19px;
    padding: 0px 3px 1px 0px;
    width: 25px;
}

#ArticleContactoFormulario {
    float: inherit;
    width: 90%;
    }
    
        
    .CapaImagenProductoDetalle {
        min-width: 100%;
        clear: both;
        padding-right: 80px;
    }
    
    .ImagenProductoDetalle {
        max-width: 80%;
        /* max-height: 450px; */
        max-height: inherit;
    }
    
    .InfoProducto {
        float: inherit;
        clear: both;
        margin-left: 0px;
        width: 100%;
        max-width: inherit;
    }
    
    
    
    .ctrFamilia_Listado {
    padding-left: 5px;
    padding-right: 5px;
    }
    
    #ImagenesProductoDetalle {
        width: 100%;
    }
    
    .ListadoImagenesMiniaturas {
       width: 25%;
    }
    
    #RedesSociales
    {
        text-align: center;
    }
    
    .ctrFamilia_ProductoHorizontal_Relacionados 
    {
        width: 25%;
    }
    
    .CapaContenedora1:first-child
    {
        width: 34%;
    }
    
    .CapaContenedora1
    {
        width: 33%;
    }
    
    #ArticuloMiCesta {
        margin-top: 20px;
    }
    
    .DatosCarrito {
        width: 100%;
    }
    
    .OrdenDatosCarrito
    {
        float: right !important;
    	margin-top: 25px;
    }
    
    #DatosCarrito {
        max-width: 300px;
    }

.ImagenTarjetaVisa {
    width: 120px;
    float: left;
    margin-left: 10px;
}

.ImagenPaypal {
    width: 87px;
}
    
    .BtnAnyadirCarrito, a.BtnAnyadirCarrito:link, a.BtnAnyadirCarrito:visited, a.BtnAnyadirCarrito:active 
    {
        width: 80%;
    }
    
    .AgrupacionAtributos 
    {
        width: 180px;
        display: inline-block;
    }
    
    .Atributo2 
    {
        margin-top: 0px;
        margin-right: auto;
    }
    
    .UnidadesProductoDetalle 
    {
        margin-top: 0px;
        float: right;
    }
}

@media screen and (max-width: 700px) 
{
    .ctrFamilia_ProductoHorizontalCatalogo {
        margin-right: 0px;
        margin-left: 0px;
        width: 50%;
        min-width: 200px !important;
        margin-bottom: 75px;
        box-sizing: border-box;
        min-height: 307px;
        overflow: inherit;
    }
        
    .ctrFamilia_ProductoHorizontal_Relacionados 
    {
        margin-left: 0px;
        padding-left: 7px;
        padding-right: 7px;
        width: 33%;
        box-sizing: border-box;
    }
    
    .CapaContenedora1:first-child
    {
        width: 50%;
    }
    
    .CapaContenedora1
    {
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    .ctrFamilia_ProductoHorizontalCatalogo {
        width: 230px !important;
        padding-right: 0px; 
        padding-left: 0px;
        float: inherit;
    }
    
    .ImagenPack {
    max-height: 20px;
    }
    
    #ImagenesProductoDetalle {
        width: 100%;
    }
    
    .ListadoImagenesMiniaturas {
       width: 25%;
    }
    
    .CapaImagenProductoDetalle {
        padding-right: 0px;
    }
    
    .InfoProducto {
        margin-right: 0px;
    }
    
    #ContenidoSuperiorProducto {
        padding-right: 0px;
    }
    
    div.scrollableArea 
    {
        width: 100% !important;
    }
    
    .ProductoDestacadoInicio {
        width: 100%;
    }
    
    .TituloGastosEnvio {
        font-size: 11px;
    }
    
    .TituloEnvioGratis {
        font-size: 11px;
        padding-bottom: 0px;
    }
    
    .ctrFamilia_ProductoHorizontal_Relacionados 
    {
        width: 50%;
    }
    
    .CapaContenedora1:first-child
    {
        width: 100%;
    }
    
    .CapaContenedora1
    {
        width: 100%;
    }
    
    #ArticlePacks {
        min-height: 99px;
        padding-top: 5px;
        padding-bottom: 0px;
    }
    
    .ctrFamilia_Producto_AnyadirCarritoLink, a.ctrFamilia_Producto_AnyadirCarritoLink
    {
        padding: 7px 20px 7px 20px;
    }
    
    .ImagenEmpresasAsociadas 
    {
        max-width: 40px;
        margin-right: 7px;
    }
    
    .SimboloMenosListado 
    {
        min-width: 30px;
        padding: 1px 0px 3px 2px;
    }
    
    .SimboloMasListado 
    {
        min-width: 30px;
        padding: 3px 2px 1px 3px;
    }
    
    .Atributo2 {
        margin-right: 20px;
    }
    
}
   