/* TÍTULOS: font-family: 'Signika', sans-serif; */
/* GENERAL: font-family: 'Quicksand', sans-serif; */

/* ........................................ SIEMPRE ........................................ */

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height: 100%;
    background-color: #FCF4EB;
}

html{
    scroll-behavior: smooth;
}

img{
    width: 100%;
}

.imgw1{
    width: 50px;
}

.imgw2{ /* index header */
    width: 80%;
}

.imgw3{ /* usuario + carrito */
    width: 25px;
}

.imgw4{
    width: 150px;
}

.imgw5{ /* ficha producto estrellas */
    width: 85px;
}

.imgw6{
    width: 10px;
}

.imgw7{ /* logo header */
    width: 110px;
    margin-left: -23px;
}

.imgw8{ /* logo nosotros */
    width: 250px;
}

.imgw9{ /* logo footer */
    width: 110px;
    margin-left: -25px;
}

.imgw10{
    width: 15px;
}

.hamb{
    display: none;
    cursor: pointer;
    position: absolute;
    top: 50px;
    left: 60px;
    width: 30px;
    height: 30px;
}

.mxw{
    max-width: 1200px;
    margin: 0px auto;
}

.mxw2{ /* tienda */
    max-width: 1200px;
    margin: 0px auto;
}

.mxw3{ /* carrito - tabla */
    max-width: 1200px;
    margin: 0px auto 40px;
}

.ocultar{
    display: none;
}

.ocultar860-1{
    display: block;
}

.ocultar640-1{
    display: block;
}

.ocultar640-2{
    display: none;
}

.ocultar425-1{
    display: block;
}

.ocultar425-2{
    display: none;
}


/* ........................................ SECCIONES ........................................ */

.barra{
    background-color: #B9A185;
    padding: 3px 84px;
}

#idioma:hover{
    font-weight: bold;
}

#nosotros{
	background-image: url(imagenes/otras/nosotros1-1.jpg);
	background-repeat: no-repeat; /* esto y todo lo siguiente no hacen falta si la imagen es pequeña porque por defecto se repetirá ocupando toda la pantalla */
	background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    position: relative;
    padding: 50px 160px 70px;
}

#leermas:hover{
    color: #B9A185;
}

#valoraciones:hover{
    color: #000000;
}

.bgtxt1{
    background-color: rgba(54, 54, 54, 0.40);
    padding: 2px 6px;
}

.bgtxt2{ /* oscuro */
    background-color: #DFC6AA;
    padding: 5px 10px;
    margin: 0px auto;
}

.bgtxt3{ /* claro */
    background-color: #FCF4EB;
    padding: 5px 10px;
    width: 200px;
}

.bgprod{ /* bg productos */
    background-color: #ffffff;
    border: 1px solid #E6E6E6;
    border-radius: 15px;
    padding: 10px 20px;
    width: 23%;
    margin-bottom: 20px;
}

.bgprod2{ /* bg productos tienda */
    background-color: #ffffff;
    border: 1px solid #E6E6E6;
    border-radius: 15px;
    padding: 10px 20px;
    width: 31%;
    margin-bottom: 20px;
}

.bg1{
    background-color: #B9A185;
    padding: 3px 0px;
}

.bg2{ /* ficha - -1+ */
    border: 0.5px solid rgba(54, 54, 54, 0.49);
    padding: 5px;
    margin-top: -10px;
}

.altfija1{
    height: 85px;   
}

.altmax1{ /* foto cesta */
    max-height: 660px;
    width: 100%;
}

.w1{ /* index - sec blog + insta */
    width: 80%;
    margin: 0px auto;
}

.w2{ /* index - noticia blog */
    width: 30%;
}

.w3{ /* ficha producto - valoraciones */
    width: 45%;
}

.w4{ /* tienda - orden destacados */
    width: 100%;
}

.bgbuscarpor{
    background-color: #DFC6AA;
    padding: 15px 5px 5px 15px;
    margin-bottom: 25px;
}

.buscarpor{
    list-style-type: circle;
    margin-left: 20px;
}

.buscarpor li{
    margin-bottom: 4px;
}

.buscarpor a{
    color: #363636;
}

.buscarpor li:hover{
    font-weight: 700;
}

ul.breadcrumb{
    padding-right: 16px;
    list-style: none;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #363636;
}

ul.breadcrumb li{
    display: inline;
}

ul.breadcrumb li+li:before{
    padding: 8px;
    content: "/\00a0"; /* "/" también vale */
}

ul.breadcrumb li a{
    color: #B9A185;
    text-decoration: none;
}

ul.breadcrumb li a:hover{
    text-decoration: underline;
}

.paginacion{ /* tienda - paginacion */
    margin-top: 20px;
    text-align: center;
}

.paginacion a{ /* tienda - paginacion */
    padding: 2px 5px;
    text-decoration: none;
    color: #363636;
}

.paginacion span{ /* tienda - paginacion */
    padding: 2px 5px;
    background-color: #B9A185;
    color: #FCF4EB;
}

.paginacion a:hover{
    font-weight: 700;
}

footer{
    background-color: #DFC6AA;
    padding-top: 20px;
}

footer p{
    font-size: 14px;
}

footer ul{
    list-style-type: circle;
    margin-left: 18px;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #363636;
}


/* ........................................ HOVER (productos + instagram) ........................................ */

.contenido{
    position: relative;
}

.imagen{ /* ig */
    width: 150px;
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
    margin: 0px auto;
}

.imagen2{ /* producto */
    width: 150px;
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
    margin: 0px auto;
}

.insta{ /* instagram */
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.overlay{ /* productos */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(54, 54, 54, 0.40);
}

.ojo{
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.contenido:hover .imagen{
  opacity: 0.3;
}

.contenido:hover .insta{
  opacity: 1;
}

.contenido:hover .overlay{
  opacity: 1;
}


/* ........................................ NAV ........................................ */

nav{
    position: absolute;
    z-index: 100;
    top: 100px;
    left: 82px;
    background-color: #FCF4EB;
    padding: 2px;
    border-radius: 10px;
}

nav ul{
    list-style-type: none;
}

nav ul li{
    position: relative;
    margin-bottom: 3px;
}

nav ul li a{
    display: block;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-size: 17px;
    color: #363636;
    text-align: left;
}

nav ul li ul{
    display: none;
    list-style-type: circle;
    margin-left: 40px;
    background-color: #FCF4EB;
    border-radius: 10px;
    width: 235px;
}

nav ul li ul li a{
    font-size: 16px;
    color: #363636;
}

nav ul li:hover ul{
    display: block;
    z-index: 10;
}

nav ul li:hover .martop3{
    transform: rotate(180deg);
}

nav ul li a:hover{
    font-weight: bold;
    background-color: transparent;
}


/* ........................................ MENÚ TIENDA ........................................ */

div.menutienda {
  background-color: #B9A185;
  overflow: auto;
  white-space: nowrap;
}

div.menutienda a {
  display: inline-block;
  color: #FCF4EB;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.menutienda a:hover {
  background-color: #c9b59e;
}

.quitarscroll {
  background-color: #eee;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.quitarscroll::-webkit-scrollbar {
    display: none;
}


/* ........................................ TEXTOS ........................................ */

h1{
    font-family: 'Signika', sans-serif;
    font-size: 20px;
    color: #363636;
}

h2{
    font-family: 'Signika', sans-serif;
    font-size: 47px;
    font-weight: 600;
    color: #363636;
    text-transform: capitalize;
}

h3{
    font-family: 'Signika', sans-serif;
    font-size: 23px;
    font-weight: bold;
    color: #363636;
    text-transform: capitalize;
}

p{
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #363636;
}

a{
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
}

.negrita{
    font-weight: bold;
}

.pblanco{
    color: #FCF4EB;
}

.psombra{
    text-shadow: 2px 2px 6px #000000;
}

.grande1{
    font-size: 80px;
}

.pequeno{
    font-size: 14px;
}

.mayus{
    text-transform: uppercase;
}

.p1{ /* index - header */
    font-family: 'Signika', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: #FCF4EB;
    text-shadow: 2px 2px 6px #000000;
}

.p2{ /* index - header */
    font-family: 'Quicksand', sans-serif;
    font-size: 35px;
    color: #FCF4EB;
    text-shadow: 2px 2px 6px #000000;
}

.pprod1{ /* título */
    font-family: 'Signika', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #363636;
}

.pprod2{ /* marca */
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #363636;
}

.pprod3{ /* precio */
    font-family: 'Signika', sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #4B8156;
    margin-bottom: 15px;
}

.pprod4{ /* valoraciones */
    font-family: 'Signika', sans-serif;
    font-size: 15px;
    font-weight: 100;
    color: #979797;
    margin-bottom: 10px;
    display: block;
}

.pprod5{ /* precio tachado */
    font-family: 'Signika', sans-serif;
    font-size: 18px;
    font-weight: 100;
    text-decoration: line-through;
    color: #D66060;
    margin-bottom: -10px;
}


.info{ /* index - textos newsletter */
    background-color: #B9A185;
    color: #FCF4EB;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
}

/* ........................................ MÁRGENES ........................................ */

.medio{
    text-align: center;
    margin: 0px auto;
}

.der{ /* solo newsletter footer */
    text-align: right;
}

.izq{ /* index - blog textos */
    text-align: left;
}

.marbot1{
    margin-bottom: 10px;
}

.marbot2{
    margin-bottom: 20px;
}

.marbot3{
    margin-bottom: 40px;
}

.marbot4{ /* solo para secciones */
    margin-bottom: 120px;
}

.marbot5{
    margin-bottom: 70px;
}

.martop1{
    margin-top: 20px;
}

.martop2{
    margin-top: 30px;
}

.martop3{ /* header ▼ */
    margin: 0px 0px 0px 4px;
    cursor: pointer;
}

.marle1{
    margin-left: 84px;
}

.marle2{ /* foto blog */
    margin-left: 15px;
}

.marri1{
    margin-right: 35px;
}

.marri2{
    margin-right: 10px;
}

.mar1{ /* ficha - -1+ */
    margin: -3px 5px 0px;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
}

.mar2{ /* carrito - -1+ */
    margin: -3px 5px 0px;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
}

.alineado-centro{ /* cuando usamos flex, a la caja */
	align-items: center;
}

.alineado-abajo{ /* cuando usamos flex, a la caja */
	align-items: baseline;
}


/* ........................................ RAYAS ........................................ */

.raya1{ /* index - nosotros */
    background-color: #FCF4EB;
    height: 1px;
    width: 300px;
    margin: 0px auto;
}

.raya2{ /* títulos */
    background-color: #363636;
    height: 1px;
    width: 37%;
}

.raya3{ /* instagram */
    background-color: #363636;
    height: 1px;
}


/* ........................................ FLEX & FLOAT ........................................ */

.fx{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fx-r{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.fx-l{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.fx-c{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

[class*="col-"]{
	float: left;
}

.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

.fl-r{
    float: right;
}

.fl-l{
    float: left;
}

.overfl{
    overflow: auto;
}

.fl-r2{ /* img blog noticia */
    float: right;
}

.cb{
    clear: both;
}


/* ........................................ MADRE & HIJA ........................................ */

.madre{
    position: relative;
}

.hija1{ /* index - textos header */
    position: absolute;
    top: 60px;
    left: 15px;
}

.hija2{ /* index - textos cesta */
    position: absolute;
    top: 120px;
    left: 84px;
    width: 50%;
}

.hija3{ /* index - fecha blog */
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #FCF4EB;
    padding: 5px;
}


/* ........................................ BOTONES ........................................ */

.boton1{ /* index - header + cesta del mes*/
    display: block;
    background-color: #FCF4EB;
    color: #363636;
    padding: 10px 12px;
    width: 300px;
    font-family: 'Signika', sans-serif;
    font-size: 25px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
}

.boton1 span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.boton1 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.boton1:hover span {
  padding-right: 25px;
}

.boton1:hover span:after {
  opacity: 1;
  right: 0;
}

.boton1:hover{
    background-color: #e0d1c0;
    color: #ffffff;
}

.boton2{ /* index - cesta */
    display: block;
    background-color: #FCF4EB;
    color: #363636;
    padding: 10px 12px;
    width: 200px;
    font-family: 'Signika', sans-serif;
    font-size: 25px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

.boton2:hover{
    background-color: #e0d1c0;
    color: #ffffff;
}

.boton3{ /* añadir producto */
    display: block;
    background-color: #B9A185;
    color: #FCF4EB;
    padding: 3px 5px;
    width: 150px;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    margin: 0px auto 5px;
}

.boton3:hover{
    background-color: #e0d1c0;
    color: #ffffff;
}

.boton4{ /* añadir producto */
    display: block;
    background-color: #363636;
    color: #FCF4EB;
    padding: 5px 5px;
    width: 220px;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
}

.boton4:hover{
    background-color: #535353;
}

.boton5{ /* tienda - ordenar por */
    display: block;
    background-color: #B9A185;
    color: #FCF4EB;
    padding: 5px 5px;
    width: 230px;
    height: 30px;
    text-align: center;
    border: none;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
}

.orden{ /* tienda - ordenar por */
  position: relative;
  display: inline-block;
}

.orden-contenido{ /* tienda - ordenar por */
  display: none;
  position: absolute;
  background-color: #FCF4EB;
  width: 230px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.orden-contenido a{ /* tienda - ordenar por */
  color: #363636;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.orden-contenido a:hover {background-color: #DFC6AA;}

.orden:hover .orden-contenido {display: block;}

.orden:hover .boton5 {background-color: #B9A185;}

.orden:hover .martop3 {transform: rotate(180deg);}


/* ........................................ FORMULARIOS ........................................ */

/* .......... SUSCRIBIRSE (footer) .......... */
#form-suscr{
    color: #363636;
}

#form-suscr legend{
    display: none;
}

#form-suscr fieldset{
    border: none;
    margin: 0px;
    padding: 0px;
}

#form-suscr label, #form-suscr input{
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

#form-suscr .campo{
    text-align: left;
    height: 30px;
    width: 250px;
    background-color: #FCF4EB;
    border: none;
    padding-left: 3px;
}

#form-suscr #acepto{
    width: 15px;
    height: 15px;
}

#form-suscr .boton1{
    cursor: pointer;
    display: inline-block;
    background-color: #B9A185;
    color: #363636;
    height: 30px;
    width: 120px;
    padding: 0px;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: none;
    border: none;
    margin-right: -4px;
}

#form-suscr .boton1:hover{
    background-color: #FCF4EB;
}


/* .......... CONTACTO .......... */

#form-contacto{
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
}

#form-contacto fieldset{
    border: none;
}

#form-contacto legend{
    display: none;
}

#form-contacto .recuadro{
    display: inline-block;
    background-color: #B9A185;
    color: #FCF4EB;
    padding: 5px;
    width: 120px;
    margin: 0px 10px 0px 0px;
    vertical-align: top;
}

#form-contacto .campo{
    height: 30px;
    width: 100%;
    padding: 2px;
    display: inline-block;
}

#form-contacto textarea{
    height: 100px;
    width: 100%;
    display: inline-block;
}

#form-contacto .boton-f3{
    cursor: pointer;
    display: block;
    background-color: #B9A185;
    color: #ffffff;
    padding: 3px;
    width: 100px;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    text-decoration: none;
    border: none;
    border-radius: 10px;
}

#form-contacto .boton-f3:hover{
    background-color: #DFC6AA;
}

#form-contacto .boton-f4{
    cursor: pointer;
    display: block;
    background-color: #B9A185;
    color: #ffffff;
    padding: 5px;
    width: 180px;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    text-decoration: none;
    border: none;
    border-radius: 10px;
}

#form-contacto .boton-f4:hover{
    background-color: #DFC6AA;
}


/* .......... ENTRAR AL GESTOR DE CONTENIDOS .......... */

#form-gestor{
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: #363636;
}

#form-gestor legend{
    display: none;
}

#form-gestor fieldset{
    border: none;
    margin: 0px;
    padding: 0px;
}

#form-gestor label, #form-gestor input{
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

#form-gestor .campo{
    text-align: left;
    height: 30px;
    width: 250px;
    background-color: #FCF4EB;
    border: none;
    padding-left: 3px;
}

#form-gestor #acepto{
    width: 15px;
    height: 15px;
}

#form-gestor .boton1{
    cursor: pointer;
    display: inline-block;
    background-color: #B9A185;
    color: #363636;
    height: 30px;
    width: 120px;
    padding: 0px;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: none;
    border: none;
    margin-right: -4px;
}

#form-gestor .boton1:hover{
    background-color: #DFC6AA;
}


/* ........................................ TABLAS ........................................ */

#tabla-carrito{
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    width: 100%;
}

#tabla-carrito caption{
    display: none;
}

#tabla-carrito th{
    background-color: #B9A185;
    color: #FCF4EB;
    padding: 10px;
}

#tabla-carrito td{
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #363636;
}

#tabla-carrito .borde-r{
    border-right: 1px solid #363636;
}

#tabla-carrito tfoot{
    background-color: #DFC6AA;
}


/* ........................................ ANIMACIONES ........................................ */

/* .....  ..... */
.animacion1{
	display: inline-block;
	cursor: pointer;
}

.animacion1:hover{
	animation-name: zoom;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	z-index: 50;
	position: relative;
}

@keyframes zoom{
	from{transform: scale(1);}
	to{transform: scale(1.1);}
}


/* ........................................ RESPONSIVE ........................................ */

@media screen and (max-width:1024px){ /* R1024 */
    .col-1024-1{width: 8.33%;}
    .col-1024-2{width: 16.66%;}
    .col-1024-3{width: 25%;}
    .col-1024-4{width: 33.33%;}
    .col-1024-5{width: 41.66%;}
    .col-1024-6{width: 50%;}
    .col-1024-7{width: 58.33%;}
    .col-1024-8{width: 66.66%;}
    .col-1024-9{width: 75%;}
    .col-1024-10{width: 83.33%;}
    .col-1024-11{width: 91.66%;}
    .col-1024-12{width: 100%;}

    .mxw{
        padding: 0px 80px;
        margin: 0px auto;
    }
    
    .mxw2{ /* tienda */
        padding: 0px 50px;
        margin: 0px auto;
    }
    
    .mxw3{
        padding: 0px 80px;
    }
    
    .ocultar1024-1{
        display: none;
    }

    /* .......... SECCIONES .......... */

    .barra{
        padding: 3px 30px;
    }

    .w1{ /* index - sec blog + insta */
        width: 100%;
    }

    .altfija1{
        height: 120px;
    }


    /* .......... NAV .......... */

    nav{
        top: 100px;
        left: 30px;
    }


    /* .......... TEXTOS .......... */

    .p1{ /* index - header */
        font-size: 35px;
    }

    .p2{ /* index - header */
        font-size: 30px;
    }


    /* .......... MARGENES .......... */

    .marle1{
        margin-left: 30px;
    }

    .marbot3{
        margin-bottom: 40px;
    }
    
    .marbot4{ /* solo para secciones */
        margin-bottom: 120px;
    }


    /* .......... HOVER .......... */

    .imagen{ /* ig */
        width: 100px;
    }

    .imagen2{ /* producto */
        width: 130px;
    }


    /* .......... RAYAS .......... */

    .raya2{ /* títulos */
        width: 33%;
    }


    /* .......... BOTONES .......... */

    .boton1{ /* index - header */
        padding: 10px 12px;
        width: 300px;
        font-size: 20px;
    }

    .boton2{ /* index - cesta */
        padding: 10px 12px;
        width: 200px;
        font-size: 20px;
    }

    .boton3{ /* añadir producto */
        padding: 3px 5px;
        width: 120px;
        font-size: 18px;
        margin: 0px auto 5px;
    }


    /* .......... MADRE & HIJA .......... */

    .hija1{ /* index - textos header */
        top: 35px;
    }

    .hija2{ /* index - textos cesta */
        top: 50px;
        left: 84px;
        width: 65%;
    }
}

@media screen and (max-width:860px){ /* R860 */
    .col-860-1{width: 8.33%;}
    .col-860-2{width: 16.66%;}
    .col-860-3{width: 25%;}
    .col-860-4{width: 33.33%;}
    .col-860-5{width: 41.66%;}
    .col-860-6{width: 50%;}
    .col-860-7{width: 58.33%;}
    .col-860-8{width: 66.66%;}
    .col-860-9{width: 75%;}
    .col-860-10{width: 83.33%;}
    .col-860-11{width: 91.66%;}
    .col-860-12{width: 100%;}
    
    .mxw3{
        padding: 0px 40px;
    }
    
    .ocultar860-1{
        display: none;
    }
    
    nav{
        display: block;
    }

    h1{
        display: block;
    }
    
    .imgw860-1{ /* ficha prod */
        width: 350px;
        margin-bottom: 40px;
    }

    /* .......... SECCIONES .......... */
    
    .bgprod{ /* bg productos */
        width: 31%;
    }
    
    .bgprod2{ /* bg productos tienda */
        width: 47%;
    }
    
    .w3{ /* ficha producto - valoraciones */
        width: 80%;
    }
    
    
    /* .......... TEXTOS .......... */

    .p1{ /* index - header */
        font-size: 25px;
    }

    .p2{ /* index - header */
        font-size: 20px;
    }


    /* .......... HOVER .......... */

    .imagen{
        width: 75px;
    }


    /* .......... RAYAS .......... */

    .raya2{ /* títulos */
        width: 24%;
    }


    /* .......... BOTONES .......... */

    .boton1{ /* index - header */
        padding: 10px 12px;
        width: 200px;
        font-size: 15px;
    }

    .boton2{ /* index - cesta */
        padding: 10px 12px;
        width: 200px;
        font-size: 15px;
    }


    /* .......... MADRE & HIJA .......... */

    .hija1{ /* index - textos header */
        top: 28px;
    }

    .hija2{ /* index - textos cesta */
        top: -10px;
        left: 60px;
        width: 80%;
    }
}

@media screen and (max-width:640px){ /* R640 */
    .col-640-1{width: 8.33%;}
    .col-640-2{width: 16.66%;}
    .col-640-3{width: 25%;}
    .col-640-4{width: 33.33%;}
    .col-640-5{width: 41.66%;}
    .col-640-6{width: 50%;}
    .col-640-7{width: 58.33%;}
    .col-640-8{width: 66.66%;}
    .col-640-9{width: 75%;}
    .col-640-10{width: 83.33%;}
    .col-640-11{width: 91.66%;}
    .col-640-12{width: 100%;}

    .mxw{
        padding: 0px 50px;
    }
    
    .mxw2{ /* tienda */
        padding: 0px 50px;
    }

    .mxw3{
        padding: 0px 10px;
    }
    
    .ocultar640-1{
        display: none;
    }

    .ocultar640-2{
        display: block;
    }

    .ocultar640-3{
        display: none;
    }


    /* .......... NAV .......... */
    
    nav{
        display: none;
        top: 80px;
        left: 30px;
    }

    .hamb{
        display: block;
        left: 30px;
    }
    
    
    /* .......... SECCIONES .......... */

    .der{ /* solo newsletter footer */
        text-align: left;
    }

    #nosotros{
        padding: 50px 60px 70px;
    }

    .bgtxt2{ /* oscuro */
        padding: 5px 10px;
        margin: 0px 15px;
    }
    
    .w2{ /* index - noticia blog */
        width: 47%;
    }
    
    .bgprod{ /* bg productos */
        width: 47%;
    }
    
    .cspan1{
        column-span: 1;
    }
    

    /* .......... TEXOS .......... */

    h2{
        font-size: 35px;
    }

    h3{
        font-size: 20px;
    }

    p{
        font-size: 15px;
    }

    .grande1{
        font-size: 65px;
    }


    /* .......... MARGENES .......... */

    .marbot4{ /* solo para secciones */
        margin-bottom: 80px;
    }

    .marbot640-1{
        margin-bottom: 15px;
    }


    /* .......... FLEX & FLOAT .......... */
    
    .fl-r2{ /* img blog noticia */
        float: none;
        width: 300px;
        margin: 0px auto 20px;
    }
    
    
    /* .......... MADRE & HIJA .......... */

    .hija2{ /* index - textos cesta */
        top: 10px;
        left: 30px;
        width: 90%;
    }
}

@media screen and (max-width:425px){ /* R425 */
    .col-425-1{width: 8.33%;}
    .col-425-2{width: 16.66%;}
    .col-425-3{width: 25%;}
    .col-425-4{width: 33.33%;}
    .col-425-5{width: 41.66%;}
    .col-425-6{width: 50%;}
    .col-425-7{width: 58.33%;}
    .col-425-8{width: 66.66%;}
    .col-425-9{width: 75%;}
    .col-425-10{width: 83.33%;}
    .col-425-11{width: 91.66%;}
    .col-425-12{width: 100%;}

    .mxw{
        padding: 0px 30px;
    }
    
    .mxw2{ /* tienda */
        padding: 0px 30px;
    }

    .mxw3{
        padding: 0px 10px;
    }
    
    .ocultar425-1{
        display: none;
    }

    .ocultar425-2{
        display: block;
    }

    .hamb{
        left: 17px;
    }
    
    
    /* .......... SECCIONES .......... */

    #nosotros{
        padding: 40px 30px 60px;
    }

    .altfija1{
        height: 80px;
    }
    
    .w2{ /* index - noticia blog */
        width: 100%;
    }
    
    .bgprod{ /* bg productos */
        width: 80%;
    }
    
    .bgprod2{ /* bg productos tienda */
        width: 80%;
    }
    
    .imgw860-1{ /* ficha prod */
        width: 200px;
    }


    /* .......... TEXTOS .......... */

    h2{
        font-size: 30px;
    }

    .grande1{
        font-size: 50px;
    }

    .p1{ /* index - header */
        font-size: 23px;
    }

    .p2{ /* index - header */
        font-size: 18px;
    }
    

    /* .......... MÁRGENES .......... */
    
    .mar2{ /* carrito - -1+ */
        margin: -3px 5px 0px;
        font-family: 'Quicksand', sans-serif;
        font-size: 15px;
    }
    
    /* .......... FLEX & FLOAT .......... */
    
    .fl-r2{ /* img blog noticia */
        width: 200px;
    }
    
    
    /* .......... TABLAS .......... */
    
    #tabla-carrito{
        font-size: 10px;
    }
    
    
    /* .......... RAYAS .......... */

    .raya1{ /* index - nosotros */
        width: auto;
    }


    /* .......... BOTONES .......... */

    .boton1{ /* index - header */
        padding: 8px 10px;
        width: 170px;
        font-size: 14px;
    }

    .boton2{ /* index - cesta */
        padding: 8px 10px;
        width: 150px;
        font-size: 14px;
    }


    /* .......... MADRE & HIJA .......... */

    .hija1{ /* index - textos header */
        top: 10px;
        left: 10px;
    }

    .hija2{ /* index - textos cesta */
        top: 0px;
        left: 10px;
        width: 95%;
    }
}

/* RESPONSIVE: 1024 - 860 - 640 - 425 */