@charset "utf-8"; 
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite ancho máximo, por lo que el ancho predeterminado es 100%. */
.ie6 img {
	width:100%;
}
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Diseño Mobile: 480px y menos. */
#header{
    width: 100%;
    position: fixed;
    height: 50px;
    background: #fff;
    display: flex;
    z-index: 4;
    border-bottom: 1px solid #222;
    background-image: url(../img/backbolita2.png);
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}
#check{
    display: none;
    flex: 1;
}
#hul{
    font-size: 22px;
    padding: 12px;
    z-index: 3;
}
#menuUp{
    width: 100%;
    text-align: center;
    z-index: 4;
    position: absolute;
    top: 50px;
    transform: translateX(-100%);
    transition: all 0.3s;
}/*
#check:checked ~ #menuUp{
    transform: translateX(0%);
} 
#check:checked ~ #header #hul{
    background: rgba(53,63,82);
    color: #fff;
}*/
#menuUp ul{
    padding: 10px;
    background: rgba(53,63,82);
}
#menuUp ul a{
    color: #fff;
    text-decoration: none;
    font-size: 17px;
}
.downOpen ul{
    display: none;
}
#menuUp ul li{
    padding: 10px;
}
#menuLogo{
    height: 100%;
    flex: 1;
}
#menuLogo img{
    position: absolute;
    width: 125px;
    left: 50%;
    transform: translateX(-50%);
}
#menuDown{
}
#buscadorDown{
    width: 100%;
    position: absolute;
    top: 50px;
    background: rgba(53,63,82);
    padding: 10px;
    text-align: center;
    height: 50px;
    z-index: 2;
    left: 0;
    transform: translateX(-100%);
    transition: all 0.3s;
}
/*- carrito -*/
#menuCarrito{
    position: relative;
}
#menuCB{
    background: red;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    font-size: 13px;
    color: #fff;
    padding: 0;
    line-height: 12.5px;
    display: inline-block;
    transform: translateY(-10px) translateX(-10px);
}
/*-  -*/
#menuDown input{
    padding: 5px;
    width: 70%;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.5);
    position: absolute;
    left: 15%;
    top: 60px;
    z-index: 3;
    font-size: 16px;
    transform: translateX(-150%);
    transition: all 0.3s;
}
#hol{
    display: block;
}
#holp{
    display: none;
}
#btnbs{
    display: none;
}
.menuBorde{
    background: rgba(255,255,255,0.2);
    height: 1px;
    margin: 5px 0;
}
#menuDown span{
    font-size: 21.5px;
    position: absolute;
    right: 0px;
    padding: 11.5px;
    z-index: 3;
}
#menuDown label{
    position: relative;
}

#check2{
    display: none;
}/*
#check2:checked ~ #menuDown div{
    transform: translateX(0%);
}
#check2:checked ~ #menuDown span{
    background: rgba(53,63,82);
    color: #fff;
    padding: 12px;
    transition: all 0.3s; 
}         
#check2:checked ~ #menuDown input{
    transform: translateX(0%);
}     */
#nav2{
    display: none;
}             
#nav{
    padding-top: 50px;
    position: fixed;
    background: #222;
    overflow: auto;
    white-space: nowrap;
    z-index: 3; 
    width: 100%;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}
#nav img{
    width: 22px;
    height: 22px;
}     
#nav a{
    display: inline-block;
    color: rgb(167,204,0);
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
}
#menuHead{
    background: rgb(53,63,82);
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    position: fixed;
    justify-content: center;
    transform: translateX(-100%);
    transition: all 0.3s;
}    
#menuHead li{
    width: 250px;
}
.only_pc{
    display: none;
} 
#smCarrito{
    margin-right: 54px;
    width: 50px;
    text-align: center;
    font-size: 23px;
    padding: 12px 5px;
    position: relative;
    color: #333;
} 
#menuCB_sm{
    position: absolute;
    background: red;
    width: 15px;
    height: 15px;
    top: 6px;
    left: 30px;
    border-radius: 15px;
    font-size: 12px;
    color: #fff;
    padding: 0;
    line-height: 10px;
    display: block;
}
/*-- cookies --*/
#cookies{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    transform: translateY(0);
    transition: all 0.3s;
    z-index: 8;
}   
#cookies p{
    color: #fff;
    font-size: 13px;
    padding: 0 15px;
    line-height: 30px;
}
#cookies p a{
    color:green;
}
#cookies div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    width: 100%;
    margin-top: 7px;
}
#cookies div button{
    background: rgb(53,63,82); 
    color: rgb(167,204,0);
    font-size: 13px;
    border: none;
    padding: 10px 15px;
    margin: 0 15px;
}
#cookies div button:hover{
    color: #fff; 
}
/* Diseño Tablet: 481px a 768px. Hereda estilos de diseño mobile. */
@media only screen and (min-width: 481px) {}


/* Diseño Desktop: 769px a un maximo de 1600px. Hereda estilos de: Diseño mobile y tablet */
@media only screen and (min-width: 900px) {
    /*--- ultimos ---*/
    .only_pc{
        display: block;
    }
    .only_sm{
        display: none;
    }
    /*--- --*/
    #header{
        width: 100%;
        display: flex;
        position: fixed;
        text-align: center;
        height: 120px;
        background-color: #fff;
        background-image: url(../img/backbolita.png);
        background-size: 100%;
        background-position: right top;
        background-repeat: no-repeat;
        border: none;
        font-family: 'Playfair Display', serif; 
        font-weight: 600;
        z-index: 5;
    } 
    #menuUp{
        position: absolute;
        right: 0;
        margin-right: 7%;
        margin-top: 0;
        display: block;
        width: auto;
        transform: translateX(0%);
        top: 0px;
    }
    .ulDown{
        display: flex;
    }
    #menuUp ul{
        padding: 0px;
        background: transparent;
    }
    #menuUp ul a{
        color: #111;
        text-decoration: none;
        font-size: 18px;
        margin: 5px 5px;
        border-radius: 15px;
        transition: all 0.3s;
    }
    #menuUp ul a:hover{
        background: rgba(53,63,82,0.34);
        transition: all 0.3s;
    } 
    #menuUp ul span{
        display: inline;
    }
    /*- carrito -*/
    #menuCarrito{
        position: relative;
    }
    #menuCB{
        position: absolute;
        background: red;
        width: 16px;
        height: 16px;
        top: 2px;
        left: 24px;
        border-radius: 15px;
        font-size: 13px;
        color: #fff;
        padding: 0;
        padding-top: 1px;
        line-height: 10px;
        display: block;
        transform: translateX(0px) translateY(0px);
    } 
    /*-  -*/
    .menuBorde{
        display: none;
    }
    #menuUp ul li:hover{
    }
    #menuUp ul li{
        padding: 10px;
    }
    #menuLogo{
        flex: 1;
        padding: 0px;
    }
    #menuLogo img{
        width: 320px;
        height: auto;
        position: absolute;
        left: 250px;
    }
    #menuDown{
        flex: 1;
        margin-top: 60px;
        padding: 10px 10%;
        text-align: right;
    }
    #menuDown form{
        display: flex;
        justify-content: flex-end;
    }
    #buscadorDown{
        display: none;
    } 
    #menuDown input{
        border: 1px solid rgb(53,63,82);
        border-radius: 0;
        padding: 6px 12px;
        font-size: 16px;
        width: 390px;
        transform: translateX(35px);
        left: auto;
        position: static;
    }
    #menuDown input:focus{
        box-shadow: #333 7px 1.7px 5px;
    }
    #btnbs{
        display: none;
    }
    #hol{
        display: none;
    } 
    #holp{
        color: rgb(167,204,0);
        background: rgb(53,63,82);
        display: block;
        width: 40px;
        border-radius: 0 ;
        border: 1px solid rgba(0,0,0,0.5);
        z-index: 3;
    }
    #holp span{
        padding: 0;
        font-size: 19px;
        padding: 3px 6px 5px;
    }
    .downOpen{
        position: relative;
        top: 5px;
    }
    .downOpen ul{
        position: absolute;
        width: 100%;
        text-align: center;
        background: #fff;
        top: 40px;
        left: 0;
        display: none;
        z-index: 5;
    }
    .downOpen ul li{
        background: #fff;
    }
    .downOpen:hover ul{
        display: block;
        cursor: pointer;
    }
    #menuUp ul li ul li:hover{
        background: rgb(167,204,0);
    }
    #buscadorDown{
        display: none;
    }
    #hul{
        display: none;
    } 
    #nav{
        display: none;
        font-family: 'Poppins', sans-serif;
    }
    #nav2 p{
        display: none;
    }
    #nav2{
        width: 100%;
        padding: 0 5%;
        background-color: #222;
        display: block;
        font-family: 'Playfair Display', serif;
        font-weight: 600;
        position: fixed;
        margin-top: 120px;
        z-index: 4;
    }
    #nav2 ul{
        width: 100%;
        display: flex;
        top: 0;
    }
    #nav2 ul a{
        flex: auto;
        text-align: center;
        font-size: 17px;
        text-decoration: none;
    }
    #nav2 ul li:hover{
        background: rgba(0,0,0,0.3);
        color: #fff;
        cursor: pointer;
    }
    #nav2 ul li{
        padding: 12px 7px;
        color: rgb(167,204,0);
    }
    #nav2 ul a{
        color: rgb(167,204,0);
    }
    #nav2 ul li img{
        width: 22px;
        transform: translateX(-5px) translateY(-4px);
    }
    /*.headicon{
        width: 22px;
        height: 22px;
        transform: translateX(-5px) translateY(3px);
        display: inline-block;
    }
    #hfam{
        background-image: url("../img/logos/familia.png");
    }*/
    .downOpen2{
        position: relative;
        min-width: 160px;
        text-align: center;
    }
    .downOpen2 ol{
        position: absolute;
        z-index: 2;
        color: #333;
        top: 48px;
        left: 0;
        width: 100%;
        background: rgb(53,63,82);
        display: none;
        color: #fff;
        box-shadow: rgba(0,0,0,0.5) 0px 3px 5px;
    }
    .downOpen2 ol li:hover{
        background: rgba(0,0,0,0.3);
    }
    .downOpen2:hover ol{
        display: block;
    }
    /*-- cookies --*/
    #cookies{
        position: fixed;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,0.9);
        padding: 15px;
        display: flex;
        flex-wrap: nowrap;
        transform: translateY(0);
        transition: all 0.3s;
        z-index: 8;
    }   
    #cookies p{
        color: #fff;
        font-size: 15px;
        padding: 0 15px;
        line-height: 30px;
    }
    #cookies p a{
        color:green;
    }
    #cookies div{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 25px;
        width: 300px;
        margin-top: 0;
    }
    #cookies div button{
        background: rgb(53,63,82); 
        color: rgb(167,204,0);
        font-size: 15px;
        border: none;
        padding: 10px 15px;
        margin: 0 15px;
    }
    #cookies div button:hover{
        color: #fff; 
    }
}