﻿

  /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */
  /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */
  /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */
  /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */ /* EN PORTADA */


#portada
{
    width:100%;
    margin: 0 auto;  /*centramos todo el contenido */

}

#capa_conten_destacados_y_novedades   
{
    width:100%;
    max-width:1920px;
    margin: 0 auto;    /*centramos todo el contenido con como mucho 1920 px de ancho*/
}

#portada_capa_madre
{
    justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-flex-pack: center;
    visibility:hidden; 
    position:relative;
    background-color:#68131c;
    
}
#contenido_sliders_grandes
{
    position:relative; 
    max-width:1060px; 
    width:90%; 
}

#contenido_sliders_peques
{
    position:relative;
    max-width:431px;
    display:none;
 
}

.slider_portada_peque
{
    position:relative;
}

#contenido_sliders_grandes:hover #controles
{
    display:block;
}


#controles
{
    position:absolute; 
    top:3%;
    left:3%; 
    z-index:20;
    width:100%;
    display:none;

}

#controles img
{
    width:6%;
    min-width:32px;
}


#slider-prev
{
    z-index: 3;
}

#slider-prev img:active
{
    position:relative;
    left:-3px;
}

#slider-next img:active
{
    position:relative;
    left:3px;
}

#slider-next
{
    z-index: -3;
    margin-left:0.6%;
}


#tapa_defectos_pixel
{
   background-color: #c4bca7;
   position:relative;
   height:3px;
   top:-3px;
   display:none;
}


#capa_slide_aux
{
    padding:20px;
    position:absolute;
    margin:3%;
}

#capa_slide_manta
{
    z-index:1;
    position:absolute;
    top:0; bottom:0; right:0; left:0;
   
}

#capa_slide_texto
{
    z-index:2;
    position:relative;
}


#slide_texto
{
    font-size: 1.3rem;
    line-height: 1.4rem;
}

#slide_texto_cabecera
{
    font-size: 1.7rem;
}

 .linea
{
    margin-top:2px;
    height:4px;
    background-color: #68131c;
}



/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* DESCATADOS */
/* DESCATADOS */
/* DESCATADOS */
/* DESCATADOS */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.conten_destacados
{
    width:77%;
}


.botones_destacados
{
    display:none;
}




.conten_destacados .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px 0px 16px 16px; /* Chrome y Safari */
    -o-border-radius: 0px 0px 16px 16px; /* Opera */
    -moz-border-radius: 0px 0px 16px 16px;   /* Mozilla Firefox */
    -ms-border-radius: 0px 0px 16px 16px;  /* Internet Explorer */
    border-radius: 0px 0px 16px 16px; 
}

.conten_proximamente .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px;  /* Chrome y Safari */
    -o-border-radius:  0px; /* Opera */
    -moz-border-radius:  0px;   /* Mozilla Firefox */
    -ms-border-radius:  0px;  /* Internet Explorer */
    border-radius:  0px; 
}

.conten_ofertas .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px; /* Chrome y Safari */
    -o-border-radius:  0px;  /* Opera */
    -moz-border-radius:  0px;    /* Mozilla Firefox */
    -ms-border-radius:  0px;   /* Internet Explorer */
    border-radius:  0px; 
}


.cabecera_texto
{
    font-size:1.4rem;
    color:#850312;     
    padding:12px;
    font-weight:bold;
    margin-top:20px;
}



.fondo_destacados_a
{

 background-color:#aea68d;
 width:235px;              /* esta capa es la que define el ancho de cada item junto con el margin-right*/
  margin-right:1px;
}

.capa_caratula
{
    width: 180px;
    height: 180px;
    background-position:top;
    background-repeat: no-repeat;
    background-size: contain;
}


.fondo_destacados_b
{
 margin-right:1px;
 background-color:#68131c; 
 padding:22px; 
 padding-left:28px;
 padding-right:28px;
 height:110px;
 
}


.capa_contenedora_destacados
{
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-flex-pack: center;

}



#capa_conten_destacados_y_novedades
{
    margin-top: 8px;
    flex-direction:column;  
   -webkit-flex-direction: column; 
   -moz-flex-direction:column;
   -ms-flex-direction:column;

}


#capa_conten_destacados
{
    visibility:hidden;
    flex:none;
}

#capa_conten_novedades
{
    flex:none;
}


.slide_destacados
{
 /* background-color:red; */
}

.botones_destacados
{
    align-self: center;-webkit-align-self:center;-ms-flex-item-align: center;-moz-align-self: center;
}

.botones_destacados img
{
    width:52px;
}

.prev
{
    position:relative;
    left:16px;
    z-index:10;
}

.next
{
    position:relative;
    right:24px;
    z-index:10;
}

.next:active
{ 
    right:21px;
}

.prev:active
{ 
    left:13px;
}


.conten_texto_dest
{

}

.precio_dest
{
    font-size:1.2rem;
    color:#e9e99c;

}


.agotado
{
    font-size:1.2rem;
    color:brown;
    font-weight:bold;
    text-align:center;
    margin-top:10px;
}

.reservalo
{
    margin-top:2px;
    color:#c4bca7;
    font-size:1rem;
    font-weight:bolder;
    text-align:center;
}

.titulo_dest
{
    font-size:1.2rem;
}

.logo_oferta_capa
{

    position:absolute;
    text-align:center;
    left:0px; 
    right:14px;  /* tanto como el margin entre elemento y elemento del slider*/ 
    display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flexbox; 
    flex-direction:row;  -webkit-flex-direction: row; -moz-flex-direction:row;-ms-flex-direction:row;
    justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-flex-pack: center;
  
}

.logo_oferta
{
    position:relative;
    top:-54px;
}


.desde
{
    margin-right:4px;
}

.disabled    /* esta es la clase que define el bxslider a los controles cuando se llega al tope o se esta en el principio*/
{
    opacity: 0.5;
}

.proximamente
{
    color:#e7e89a;
    font-size:1.2rem;
    margin-bottom:2px;
    text-align:center;
    position:relative;
    top:0px;
}




.flecha_pixel
{
    margin-left:3px;
    position:relative;
    top:1px;
}

.boton_mas_lista
{
    font-size:1.3rem;
   
    color:#e9e99c;
    position:relative;
    background-color:#594113;
    width:100%;
    padding:24px;
    -webkit-border-radius: 0px 0px 12px 12px; /* Chrome y Safari */
    -o-border-radius:  0px 0px 12px 12px;  /* Opera */
    -moz-border-radius:  0px 0px 12px 12px;    /* Mozilla Firefox */
    -ms-border-radius:  0px 0px 12px 12px;   /* Internet Explorer */
    border-radius:  0px 0px 12px 12px; 
    margin:0 auto;
    margin-top:0px;
}

#boton_mas_ofertas
{
    color:#f8f8e0;
    background-color:#a81a19;
}

#boton_mas_ofertas:hover
{
    background-color:#c40200;
}


.boton_mas_lista:hover
{
    background-color:#6c5214;
}


#texto_ultimas_prereservas
{
    color:#634103;
}


/* NOVEDADES */ /* NOVEDADES */ /* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES */
/* NOVEDADES */ /* NOVEDADES */ /* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES
/* NOVEDADES */ /* NOVEDADES */ /* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES */
/* NOVEDADES */ /* NOVEDADES */ /* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES *//* NOVEDADES */

#mas_novedades
{
    font-size:1.3rem;
    font-weight:bold;
    color:darkred;
    padding:4px;
    padding-top:20px;
    cursor:pointer;
    text-align:center;
}

#mas_novedades:hover
{
    color:white;
}

#solo_videojuegos
{
    cursor:pointer;
    background-repeat:no-repeat; 
    background-position:center;
    background-image:url('graficos/icono_mando_b.png');
}

#solo_videojuegos:hover
{
    background-image:url("graficos/icono_mando_c.png");

}

#solo_figuras
{
    cursor:pointer;
    background-repeat:no-repeat; 
    background-position:center;
    background-image:url('graficos/icono_kirby_b.png');
}

#solo_figuras:hover
{
    background-image:url("graficos/icono_kirby_c.png");

}



#capa_conten_novedades
{
    display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flexbox; 
    justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-flex-pack: center;
}


#conten_novedades_madre
{
    background-color:none;
    padding:20px;
    border:5px solid #68131c;
    -webkit-border-radius: 20px 20px 20px 20px; /* Chrome y Safari */
    -o-border-radius: 20px 20px 20px 20px; /* Opera */
    -moz-border-radius:20px 20px 20px 20px; /* Mozilla Firefox */
    -ms-border-radius: 20px 20px 20px 20px; /* Internet Explorer */
    border-radius: 20px 20px 20px 20px;
}

#filtros
{
    padding-left:10px;
    height:74px;
    position:relative;
    top:-15px;
   
}


#filtros > div
{
    
     flex-direction:column;  -webkit-flex-direction: column;  -moz-flex-direction:column; -ms-flex-direction:column; 
     display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flexbox; 
    justify-content:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;-ms-flex-pack: end;
    align-items: center;-webkit-align-items:center;-ms-flex-align:center;-moz-align-items:center;
}


#linea_filtros
{
    
    color:darkred;
    padding-left:2px;
    padding-right:2px;
}


 /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////// MEDIA QUERYS /////////////////////////////////////////////////////////////// */

 

@media screen and (max-width: 480px)    /* moviles en landscape */
{

    #conten_novedades_madre
    {
        border-width:4px;
    }

    #mas_novedades
    {
        padding:10px;
        padding-top:24px;
    }

    #capa_madre_novedades
    {
      width:95%;
    }


    .cabecera_texto
{
    font-size:1.4rem;
    color:#850312;     
    padding:11px;
    font-weight:bold;
    margin-top:16px;
}


    .boton_mas_lista
    {
        -webkit-border-radius: 0px 0px 0px 12px; /* Chrome y Safari */
    -o-border-radius:  0px 0px 0px 12px;  /* Opera */
    -moz-border-radius:  0px 0px 0px 12px;    /* Mozilla Firefox */
    -ms-border-radius:  0px 0px 0px 12px;   /* Internet Explorer */
    border-radius:  0px 0px 0px 12px; 
    padding:20px;
    }

  
    #contenido_sliders_grandes:hover #controles
{
    display:none;
}

    .flecha_pixel
{
    margin-left:2px;
    position:relative;
    top:1px;
}

 .conten_destacados
{
 margin-left:10px;
}

    #capa_conten_destacados_y_novedades
    {
        margin-top:0px;
    }



    .titulo_dest
    {
        font-size: 1.1rem;
    }

    .precio_dest
    {
        font-size: 1.1rem;
    }

    .proximamente
    {
        font-size: 1.1rem;
    }



 .conten_destacados .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px 0px 0px 16px; /* Chrome y Safari */
    -o-border-radius: 0px 0px 0px 16px; /* Opera */
    -moz-border-radius: 0px 0px 0px 16px;   /* Mozilla Firefox */
    -ms-border-radius: 0px 0px 0px 16px;  /* Internet Explorer */
    border-radius: 0px 0px 0px 16px; 
}

 .conten_proximamente .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px;  /* Chrome y Safari */
    -o-border-radius:  0px; /* Opera */
    -moz-border-radius:  0px;   /* Mozilla Firefox */
    -ms-border-radius:  0px;  /* Internet Explorer */
    border-radius:  0px; 
}

.conten_ofertas .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px; /* Chrome y Safari */
    -o-border-radius:  0px;  /* Opera */
    -moz-border-radius:  0px;    /* Mozilla Firefox */
    -ms-border-radius:  0px;   /* Internet Explorer */
    border-radius:  0px; 
}



.fondo_destacados_a
{

 width:220px;              /* esta capa es la que define el ancho de cada item junto con el margin-right*/
  margin-right:1px;
}

.capa_caratula
{
    width: 170px;
    height: 170px;
}


.fondo_destacados_b
{
 padding:21px; 
 height:98px;
 
}



   #conten_novedades_madre
{
    padding:14px;
}


    .cabecera_texto
    {
        font-size:1.3rem;
    }

    .primera_cabecera
    {
        margin-top:8px;
    }


    .botones_destacados img
    {
        width: 50px;
    }

   .conten_destacados
    {
        width: 100%;
    }

    .next
    {
        right:64px;
        width:0px; 
    }

    .next:active
    {
       right: 60px;
    }

    .botones_destacados
    {
        display:block;
    }

    .prev
    {
        display: none;
    }

    #capa_slide_texto
    {
        display:none;
    }

    #capa_slide_manta
    {
        display:none;
    }


     #contenido_sliders_grandes
    {
        width: 100%;
    } 

    #controles
    {
        display:none;
    }
    

}

@media screen and (min-width: 481px) and ( max-width:767px)  /* Tabletas portrait */
{

         .cabecera_texto
{
    font-size:1.4rem;
    color:#850312;     
    padding:12px;
    font-weight:bold;
    margin-top:16px;
}


    .boton_mas_lista
    {
        -webkit-border-radius: 0px 0px 0px 12px; /* Chrome y Safari */
    -o-border-radius:  0px 0px 0px 12px;  /* Opera */
    -moz-border-radius:  0px 0px 0px 12px;    /* Mozilla Firefox */
    -ms-border-radius:  0px 0px 0px 12px;   /* Internet Explorer */
    border-radius:  0px 0px 0px 12px; 
    padding:20px;
    }

  
    #contenido_sliders_grandes:hover #controles
{
    display:none;
}

    .flecha_pixel
{
    
    margin-left:2px;
     position:relative;
    top:1px;
}

 .conten_destacados
{
 margin-left:10px;
}

    #capa_conten_destacados_y_novedades
    {
        margin-top:0px;
    }



    .titulo_dest
    {
        font-size: 1.1rem;
    }

    .precio_dest
    {
        font-size: 1.1rem;
    }

    .proximamente
    {
        font-size: 1.1rem;
    }



 .conten_destacados .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px 0px 0px 16px; /* Chrome y Safari */
    -o-border-radius: 0px 0px 0px 16px; /* Opera */
    -moz-border-radius: 0px 0px 0px 16px;   /* Mozilla Firefox */
    -ms-border-radius: 0px 0px 0px 16px;  /* Internet Explorer */
    border-radius: 0px 0px 0px 16px; 
}

 .conten_proximamente .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px;  /* Chrome y Safari */
    -o-border-radius:  0px; /* Opera */
    -moz-border-radius:  0px;   /* Mozilla Firefox */
    -ms-border-radius:  0px;  /* Internet Explorer */
    border-radius:  0px; 
}

.conten_ofertas .bx-viewport           /* capa que genera el slider-box*/
{
     -webkit-border-radius: 0px; /* Chrome y Safari */
    -o-border-radius:  0px;  /* Opera */
    -moz-border-radius:  0px;    /* Mozilla Firefox */
    -ms-border-radius:  0px;   /* Internet Explorer */
    border-radius:  0px; 
}



.fondo_destacados_a
{

 width:220px;              /* esta capa es la que define el ancho de cada item junto con el margin-right*/
  margin-right:1px;
}

.capa_caratula
{
    width: 170px;
    height: 170px;
}


.fondo_destacados_b
{
 padding:21px; 
 height:98px;
 
}



   #conten_novedades_madre
{
    padding:14px;
}


    .cabecera_texto
    {
        font-size:1.3rem;
    }

    .primera_cabecera
    {
        margin-top:8px;
    }


    .botones_destacados img
    {
        width: 50px;
    }

   .conten_destacados
    {
        width: 100%;
    }

    .next
    {
        right:64px;
        width:0px; 
    }

    .next:active
    {
       right: 60px;
    }

    .botones_destacados
    {
        display:block;
    }

    .prev
    {
        display: none;
    }

    #capa_slide_texto
    {
        display:none;
    }

    #capa_slide_manta
    {
        display:none;
    }


     #contenido_sliders_grandes
    {
        width: 100%;
    } 

    #controles
    {
        display:none;
    }


}

@media screen and (min-width: 768px) and ( max-width:979px) /* Tabletas en landscape */
{

    .capa_contenedora_destacados:hover .botones_destacados
{
    display:block;
}

      #capa_madre_novedades
    {
      width:80%;
    }

    .conten_destacados
    {
        width: 85%;
    }


    #slide_texto
    {
        font-size: 1.2rem;
        line-height: 1.3rem;
    }

    #slide_texto_cabecera
    {
        font-size: 1.6rem;
    }

}

@media screen and (min-width: 980px) and ( max-width:1340px) /* pcs escritorio medio / bajo */
{

    .capa_contenedora_destacados:hover .botones_destacados
{
    display:block;
}

     #capa_madre_novedades
    {
      width:60%;
    }

  .conten_destacados
{
    width:87%;
}

 

}

@media screen and (min-width: 1341px) and ( max-width:1700px) /* pcs HD  */
{

    .capa_contenedora_destacados:hover .botones_destacados
{
    display:block;
}

      #conten_novedades_madre
    {
        border-width:6px;
    }


    #capa_madre_novedades
    {
        width:initial;
        margin-right: 15%;
    }

    #capa_conten_novedades
    {
        display:block;
        -webkit-flex: 1 1 0%;
         -ms-flex: 1 1 0%;
        flex:1 1 0%;
    }

    #capa_conten_destacados
    {
      
        -webkit-flex: 1.8 1 0%;
        -ms-flex: 1.8 1 0%;
        flex: 1.8 1 0%;
    }

    .conten_destacados
    {
        width: 77%;
    }

     #capa_conten_destacados_y_novedades
    {
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
    }


    .linea
    {
        margin-top: -4px;
        height: 6px; 
    }


    #slide_texto
    {
        font-size: 1.2rem;
        line-height: 1.3rem;
    }

    #slide_texto_cabecera
    {
        font-size: 1.6rem;
    }

    #tapa_defectos_pixel
    {
        display:block;
    }

    #contenido_sliders_grandes
    {
        width: 65%;
    } 

    #contenido_sliders_peques
    {
        width: 26.5%;
        display:block;
    } 

}

@media screen and (min-width: 1700px) /* FULL HD */
{

    .capa_contenedora_destacados:hover .botones_destacados
{
    display:block;
}

    #capa_madre_novedades
    {
        width:initial;
        margin-right: 19%;
    }


    #conten_novedades_madre
    {
        border-width:6px;
    }

    #capa_conten_novedades
    {
        display:block;
        -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;
    }

     #capa_conten_destacados
    {
      
        -webkit-flex: 1.8 1 0%;
        -ms-flex: 1.8 1 0%;
        flex: 1.8 1 0%;
    }


    #capa_conten_destacados_y_novedades
    {
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
    }


    .linea
    {
        margin-top: 2px;
        height: 6px;
        
    }

     #contenido_sliders_grandes
    {
        width: 1060px;
    } 

    #contenido_sliders_peques
    {
        display:block;
        width:500px; /* lo pongo para forzar porque a veces no vuelve a su valor al empequeñecer y volver a agrandar la ventana, no es importante */
        
    }

}

           
