body{
    font-size: 14px;
}
main{
    
}
.h-100vh{
    height: 100vh !important;
}
.h-85{
    height: 85%!important;
}
#sliderVideo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    /*width: 100%;*/
    height: auto;
    z-index: 1;
}
.hidden{
    display: none;
}
.pointer{
    cursor: pointer;
}
.cookie-consent{
    position: fixed;
    bottom: 0px;
    background: #FFF;
    width: 100%;
    z-index: 99999;
}
#aviso-legal li{
    padding: 8px 0px;
}
.labelOpt:hover{
    background: var(--color-whiteGrey);
}
.detail-arrow{
    position: absolute;
    height: 20vh;
    top: calc(50% - 10vh);
}
.detail-arrow-left{
    left: 0
}
.detail-arrow-right{
    right: 0
}
.section-main{
    height: 100vh;
    width: 100vw;
    top: 0px;
    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    z-index: 9999;
    margin-right: 0;
    margin-left: auto;
}
.section-main.toTop{
    top: -100%;
}
.section-main .section-overlay{
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
}
.section-main .section-overlay .section-options .section-options-link{
    opacity: .5;
}
.section-main .section-overlay .section-options .section-options-link p{
    opacity: 0;
}
.section-main .section-overlay .section-options .section-options-link:hover{
    opacity: 1;
}
.section-main .section-overlay .section-options .section-options-link:hover p{
    opacity: 1;
}
.section-content{
    height: calc(100vh - 106px);
}
.section-content.bottom-menu{
    height: calc(100vh - 150px);
}
.section-content .container{
    max-height: 100%;
    overflow: auto;
}
.section-prensa #content-load{
    overflow: hidden;
}
#login .section-overlay-white {
    background: rgba(255,255,255,.25) !important;
}
a:hover{
    text-decoration: none;
}
.load-section{
    min-height: calc(100vh - 106px);
}
#searchFormMenu .w-75{
    width: 70% !important;
    font-family: 'Gotham-Light', Arial, Helvetica, sans-serif;
}
/* HOME */
#home .carousel-caption{
    width: 100%;
    height: 100%;
    padding: 0;
    left: 0;
    top: 0;
    /*background: rgba(0,0,0,.3);*/
}
#home .carousel-caption .carousel-caption-text{
    position: absolute;
    width: 80%;
    bottom: 10%;
    left: 10%;
    padding-bottom: 0;
    /*background: rgba(118,39,52,.5);*/
    padding: 0px 0px 20px 0px;
}

/*#home .carousel-caption .carousel-caption-text::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    border-bottom: 7px solid var(--color-white);
}*/

#home .carousel .carousel-control-prev{
    width: 50px;
    left: 0;
    top: calc(50% - 100px);
    height: 200px;
    /*background-color: #762734;*/
}
#home .carousel .carousel-control-next{
    width: 50px;
    right: 0;
    top: calc(50% - 100px);
    height: 200px;
    /*background-color: #762734;*/
}
#home .carousel .carousel-indicators{
    margin-left: 10%;
    left: 0;
    right: auto;
}
#home .carousel .carousel-indicators li{
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
/* SECTIONS */
#productos-y-servicios{
    background: url(/img/productos-y-servicios/BGhome.jpg) no-repeat center;
    background-size: cover;
}

/*#proyectos-realizados{
    background: url(/img/proyectos-realizados/BGhome.jpg) no-repeat center;
    background-size: cover;
}
#proyectos-realizados-section{
    background: url(/img/proyectos-realizados/BGsection.jpg);
}*/
/*#prensa{
    background: url(/img/prensa/BGhome.jpg) no-repeat center;
    background-size: cover;
}*/
#pena-a-medida{
    background: url(/img/pena-a-medida/BGhome.jpg) no-repeat center;
    background-size: cover;
}
/*#tienda{
    background: url(/img/tienda/BGhome.jpg) no-repeat bottom  center;
    background-size: cover;
    transition: all .5s;
    -webkit-transition: all .5s;
}
#tienda.tendencias{
    background: url(/img/tienda/BGtendencias.jpg) no-repeat bottom center;
    background-size: cover;
}
#tienda.disenadores{
    background: url(/img/tienda/BGdisenadores.jpg) no-repeat bottom  center;
    background-size: cover;
}
#tienda.indigo{
    background: url(/img/tienda/BGindigo.jpg) no-repeat bottom  center;
    background-size: cover;
}
#tienda.antiqua{
    background: url(/img/tienda/BGantiqua.jpg) no-repeat bottom  center;
    background-size: cover;
}
#tienda.francesa{
    background: url(/img/tienda/BGfrances.jpg) no-repeat bottom  center;
    background-size: cover;
}
#tienda.tapices{
    background: url(/img/tienda/BGtapices.jpg) no-repeat bottom  center;
    background-size: cover;
}*/
.col-productos{
    flex: 0 0 14.25% !important;
    max-width: 14.25% !important;
}
.quienes-somos-home{
    background: url(/img/quienes-somos/BG001.jpg) no-repeat bottom right;
    background-size: cover;
}
.nuestra-filosofia-home{
    background: url(/img/quienes-somos/nuestra-filosofia.jpg) no-repeat bottom center;
    background-size: cover;
}

.mosaico-colecciones{
    height: calc(50vh - 30px);
    width: 100%;
    position: relative;
    margin-bottom: 7px;
    margin-top: 7px;
}
.hoteles{
    background: url(/img/proyectos-realizados/hoteles/opcion-4.jpg) no-repeat bottom center;
    background-size: cover;
}
.instituciones{
    background: url(/img/proyectos-realizados/instituciones/opcion-3.jpg) no-repeat bottom center;
    background-size: cover;
}
.residencial{
    background: url(/img/proyectos-realizados/residencial/portada-residencial.jpg) no-repeat bottom center;
    background-size: cover;
}
.yates{
    background: url(/img/proyectos-realizados/yates/portada-yates.jpg) no-repeat bottom center;
    background-size: cover;
}


.tendencias{
    background: url(/img/tienda/BGtendencias.jpg) no-repeat bottom center;
    background-size: cover;
}
.disenadores{
    background: url(/img/tienda/BGdisenadores.jpg) no-repeat bottom  center;
    background-size: cover;
}
.indigo{
    background: url(/img/tienda/BGindigo.jpg) no-repeat bottom  center;
    background-size: cover;
}
.antiqua{
    background: url(/img/tienda/BGantiqua.jpg) no-repeat bottom  center;
    background-size: cover;
}
.francesa{
    background: url(/img/tienda/BGfrances.jpg) no-repeat bottom  center;
    background-size: cover;
}
.tapices{
    background: url(/img/tienda/BGtapices.jpg) no-repeat bottom  center;
    background-size: cover;
}

.over{
    filter: brightness(0.7);
}



.mosaico-title{
    background-color: #c75858;
    display: flex;
    align-items: center;
    padding: 30px;
}

.mosaico-over{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    opacity: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    
}

.mosaico-over::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 0%;
    background-color: #c75858;
    mix-blend-mode: multiply;
    filter: contrast(1.4);
    left: 0;
    transition: all 0.5s;
}

.mosaico-over div{
    position: relative;
    opacity: 0;
    transition: all 0.5s;
}

.mosaico-over .num-col{
    color: var(--color-lightGrey);
}

.num-col{
    color: var(--color-lightGrey);
}

.mosaico-over .name-col{
    color: var(--color-white);
}

.over-hover:hover .mosaico-over::before{
    height: 100%;
    
}

.over-hover:hover .mosaico-over div{
    opacity: 1;
}

/* mosaico proyectos */
.mosaico-proyectos{
    height: calc(50vh - 15px);
    width: 100%;
    position: relative;
    margin-bottom: 7px;
    margin-top: 7px;
}

.regresar-gall{
    padding: 15px 10px;

}

.gall-side{
    overflow-y: scroll;
    max-height: 80vh;
}

.gall-side::-webkit-scrollbar{
    display: none;
}

.gall-one{
    height: calc(100vh - 40px);
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
}

.gallery-side img{
    max-width: 100%;
}

.name-gall{
    line-height: 34px;
    margin-bottom: 30px;
}

.num-gall{
    margin-top: 30px;
    margin-bottom: 30px;
}

.reg-gall{
    position: absolute;
    bottom: 0;
    left: 200px;
}

/*¨*/

#contacto{
    
}
#login{
    background: url(/img/login/BGhome.jpg) no-repeat center;
    background-size: cover;
}



/* HOME BOTTOM MENU */
.home-bottom-menu{
    bottom: 0;
    left: 0;
    height: auto;
    border-bottom: 5px solid var(--color-white);
    z-index: 999;
}
.home-bottom-menu a{
    color: var(--color-greyt);
}
.home-bottom-menu li{
    transition: all .5s;
    -webkit-transition: all .5s;
}
.home-bottom-menu li.active, .home-bottom-menu li:hover{
    background: var(--color-white);
}
.home-bottom-menu li.active a, .home-bottom-menu li:hover a{
    color: #7f7f80;
}
/* CONTENT BOTTOM MENU */
.content-bottom-menu, .store-bottom-menu{
    bottom: 0;
    left: 0;
    height: auto;
    border-bottom: 5px solid var(--color-white);
    z-index: 99;
}
.content-bottom-menu a, .store-bottom-menu a{
    color: var(--color-white);
}
.content-bottom-menu li, .store-bottom-menu li{
    transition: all .5s;
    -webkit-transition: all .5s;
}
.content-bottom-menu li.active, .content-bottom-menu li:hover, .store-bottom-menu li.active, .store-bottom-menu li:hover{
    background: var(--color-lightGrey);
}
.content-bottom-menu li.active a, .content-bottom-menu li:hover a, .store-bottom-menu li.active a, .store-bottom-menu li:hover a{
    color: var(--color-white);
}
/* QUIENES SOMOS */
.quienes-somos{
    opacity: 0;
    transition: all 2s;
    -webkit-transition: all 2s;
    z-index:89;
}
.quienes-somos.active{
    opacity: 1;
    z-index: 90;
}

/*fondo para las secciones*/
.section-sec-back{
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

 .quienes-back{
    background-image: url(/img/quienes-somos/BG001.jpg);
}
 .filosofia-back{
    background-image: url(/img/quienes-somos/nuestra-filosofia.jpg);
}
 .proceso-back{
    background-image: url(/img/quienes-somos/proceso-de-fabricacion.jpg);
    background-position: 50%;
}
 .anudadas-back{
    background-image: url(/img/quienes-somos/BG003.jpg);
    background-position: 50%;
}
 .manual-back{
    background-image: url(/img/quienes-somos/tufting-manual.jpg);
}

.nav-quien{
    border-top: 1px solid var(--color-greyt);
}

.nav-quien .nav-item{
    min-width: 160px;
}

.contenedor-scroll{
    overflow-y: scroll;
    height: 55vh;
}

.contenedor-scroll::-webkit-scrollbar{
    width: 10px;
}

.contenedor-scroll::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(200,200,200,0.3);
}

/* SERVICIOS */
.restauracion-back{
    background-image: url(/img/quienes-somos/restauracion.jpg);
}

.limpieza-back{
    background-image: url(/img/quienes-somos/limpieza.jpg);
}

.instalaciones-back{
    background-image: url(/img/quienes-somos/Instalaciones.jpg);
}

/* PRODUCTOS */
.collectionDesc{
    height: 180px;
    overflow: auto;
}
.alfombras-back{
    background-image: url(/img/quienes-somos/BG001.jpg);
}
.alfombras-manuales-back{
    background-image: url(/img/quienes-somos/alfombras-manuales.jpg);
}
.proy-medida-back{
    background-image: url(/img/quienes-somos/proyecto-a-medida.jpg);
}
.contract-back{
    background-image: url(/img/quienes-somos/alfombras-tufting.jpg);
}
.heraldica-back{
    background-image: url(/img/quienes-somos/heraldica.jpg);
}
.repostero-back{
    background-image: url(/img/quienes-somos/BG005.jpg);
}
#productImage{
    height: auto;
}
.galleryThumb{
    width: 50px;
    height: 50px;
    float: left;
    margin: 10px 10px 0px 0px;
}
.mosaicLink .mosaicContainer{
    transition: all .5s;
}
.mosaicLink:hover .mosaicContainer{
    transform: scale(1.02);
    background: #f9f9f9;
}
.listaLink, .listaLink .img{
    transition: all .5s;
}
.listaLink:hover .img{
    transform: scale(1.02);
}
.listaLink:hover .listaLinkInner{
    background: #f9f9f9;
}

/* PROYECTOS Y SERVICIOS */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    /*width: 30%;*/
    /*height: 120px;*/
    cursor: pointer;
    float: left;
}
.grid-item .grid-item-content{
    border: 10px solid #666;
    opacity: .5;
    transform: scale(.95);
    transition: all .5s;
    -webkit-transition: all .5s;
}
.grid-item .grid-item-content:hover{
    transform: scale(1);
    opacity: 1;
}

.grid-item--width2 { width: 300px; }
.grid-item--width3 { width: 520px; }
.grid-item--width4 { width: 780px; }

.grid-item--height1 { height: 50px; }
.grid-item--height2 { height: 300px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.gallery-img-big{
    height: auto;
    width: 100%;
}
.gallery-bottom-menu{
    bottom: -45px;
    transition: all .5s;
    -webkit-transition: all .5s;
}
.gallery-bottom-menu:hover, .gallery-bottom-menu.active{
    bottom: 0;
}
.gallery-thumbnail img{
    height: 30px;
}
/* PRENSA */
.section-content{
    width: calc(100vw - 200px);
    height: auto !important;
}
/* COLECCIONES */
.mosaic{
    width: 180px;
    height: auto;
}
.mosaic img{
    width: 100%;
    height: auto;
}
.list-gde .img{
    width: 100%;
    height: 225px;
}
.list-chica .img{
    width: 100%;
}
/* CONTACTO */
.contact-input{
    border: none;
    color: var(--color-penaGris) !important;
    border-bottom: 1px solid var(--color-penaGris);
}
textarea.contact-input{
    height: 100px;
    max-height: 100px;
    max-width: 100%;
}
.contact-input:-ms-input-placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-penaGris);
    opacity: .5;
}
.contact-input::-ms-input-placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-penaGris);
    opacity: .5;
}
.contact-input::placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-penaGris);
    opacity: .5;
}
/* TIENDA */
.bajoPedido{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    left: -25px;
    text-align: center;
    width: 60% !important;
    top: 25px;
}
.bajoPedido.bajoPedidoGde{
    left: -50px;
}
.bajoPedido.bajoPedidoCh{
    left: -25px;
    width: 75% !important;
    top: 20px;
}
#colorOpt label{
    width: calc(100% / 6);
}
/* PERFIL */
.profileNav .nav-item:hover, .profileNav .nav-item.active{
    background:var(--color-grey);
}
.profileImgList{
    width: 100%;
}
#profileSideMenu .nav-item a:hover, #profileSideMenu .nav-item a.active{
    background: var(--color-penaGris);
}
.profile-overlay{
    width: 100%;
    height: 100%;
}
.profile-input{
    border: none;
    color: var(--color-penaGris) !important;
    border-bottom: 1px solid var(--color-penaGris);
}
textarea.profile-input{
    height: 100px;
    max-height: 100px;
    max-width: 100%;
}
.profile-input:-ms-input-placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-lightGrey);
    opacity: .5;
}
.profile-input::-ms-input-placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-lightGrey);
    opacity: .5;
}
.profile-input::placeholder{
    font-family: 'Gotham-Bold',Arial, Helvetica, sans-serif;
    color: var(--color-lightGrey);
    opacity: .5;
}
.subcoleccion-mosaic{
    height: 100px;
    width: 160px;
}
/* CHECKBOX */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    height: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: solid 1px var(--color-lightGrey);
  }
  
  /* On mouse-over, add a grey background color */
  .custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  /*.custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
  }*/
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .custom-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .custom-checkbox .checkmark:after {
    left: 8px;
    top: 3px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }


/* **** // CHECKBOX */
.mobile-show{
    display: none;
}
.mobile-hide{
    display: block;
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
	
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
   
}

@media (min-width: 768px) {
    .section-main{
        height: 100vh;
        width: calc(100vw - 200px);
        right: 0;
    }

    .catalogo-os{
        margin-left: 200px;
    }

    .home-bottom-menu{
        left: 200px;
        width: calc(100% - 200px);
    }

    .pro-serv{
        margin-bottom: 20px;
        margin-top: 70px;
    }

    .contain-gall{
        width: calc(100% - 200px);
        margin-right: 0;
    }

    .regresar-gall{
        /*writing-mode: vertical-lr;
        transform: rotate(180deg);*/
        background-color: var( --color-greyt );
        color: var(--color-white);
    }

}


/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    #home, #showroom{
        height: 100vh !important;
    }
    #sliderVideo{
        height: auto;
        width: 100% !important;
    }
    .mobile-show{
        display: block;
    }
    .mobile-hide{
        display: none;
    }
    #home .carousel .carousel-control-prev{
        
    }
    #home .carousel .carousel-control-next{
        right: 0%;
    }

    #home .carousel-caption .carousel-caption-text{
        width: 80%;
        left: 10%;
        top: 100px;
        bottom: auto;
    }
    .section-main{
        padding-top: 50px !important;
        height: auto;
        width: 100%;
    }
    .quienes-somos{
        padding-top: 100px;
        height: auto;
    }
    .contenedor-scroll{
        overflow: auto;
        height: auto;
        padding-bottom: 100px;
    }
    .nav-quien .nav-item{
        font-size: 10px;
        min-width: auto;
        text-align: center;
    }
    .mosaico-proyectos{
        height: 50vh;
    }
    .mosaico-over div{
        opacity: 1 !important;
    }
    #proyectos-realizados-section{
        padding-top: 100px !important;
    }
    #proyectos-realizados{
        height: auto;
        padding-top: 100px;
    }
    .section-main.toTop{
        top: -250%;
    }
    .section-prensa{
        width: 100%;
        padding-top: 100px !important;
    }
    .section-prensa .text-right{
        text-align: left !important;
    }
    .prensa-articulo{
        padding-top: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #ccc;
    }
    .section-prensa #content-load{
        margin: 0;
    }
    .catalogo-os{
        width: 100% !important;
        padding-top: 100px !important;
    }
    .collectionDesc{
        height: auto;
        /*display: none;*/
    }
    #mosaico-container{
        padding: 0 !important;
    }
    #mosaico-container .mosaic{
        width: 100%;
        float: left;
    }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {
    #sliderVideo{
        height: 100% !important;
        width: auto !important;
    }
    #products-filters{
        height: auto !important;
    }
	.brand-pena img{
        width: 70px;
    }
    #navbarSupportedContent{
        height: 100vh;
        padding-top: 15px;
    }
    .regresar-gall{
        background: var(--color-penaRed);
    }
    .gall-side{
        height: auto;
        max-height: 100%;
    }
    #gall-one-container{
        display: none;
    }
    #gall-side-container{
        padding-top: 0;
        display: block !important;
        height: auto !important;
    }
    button.favorites{
        position: absolute;
        right: 10px;
    }
    .reg-gall{
        position: fixed;
        right: 0;
        left: calc(100% - 112px);
    }
    .home-bottom-menu{
        width: 100%;
    }
    .contact-enviar-btn{
        margin: 15px 0px;
    }
    .mosaicContainer h2{
        font-size: 18px;
    }
    .mosaicContainer p{
        font-size: 10px;
    }
}