/*******************************************************************************
Add your styles here
 *******************************************************************************/

/*********************************
******** Clases generales ********
**********************************/
.azul{
    color: #365D81;
}
.barro{
    color: #BA623C;
}
.marfil{
    color: rgba(215,211,197,1);
}
.bg-azul{
    background-color: #365D81;
}
.bg-barro{
    background-color: #BA623C;
}
.bg-marfil{
    background-color: rgba(215,211,197,1);
}
.img-fluid{
    max-width: 100%;
    height: auto;
    width:100%;
}
.text-uppercase{
    text-transform: uppercase;
}
.titulo{
    font-size: 16pt;
    font-family:'gotham';
}
.desplegado{
    font-size: 16pt;
    font-family:'gotham';
    color: #BA623C;
}
.textos{
    font-size: 13pt;
    font-family:'gotham';
    color: #365D81;
}
.correo{
    font-size: 13pt;
    font-family:'gotham';
    color: #365D81;
}
.correo:hover{
    color: #365D81;
}
.info-imagen{
    font-size: 16pt;
    font-family:'gotham';
    color: white;
}
.bold{
    font-weight: bold;
}
p{
    font-size: 13pt;
}
.text-left{
    text-align: left !important;
}


.logo-holder {
    margin: 0px 20px 0px 44px;
}

.whatsapp{
    bottom: 90px;
}

 header{
    background-color: #365D81;
 }
 footer{
    background-color: #BA623C;
 }
 .footer-social li a span {
    color: white;
}
.logo-uribe{
    width:175px;
}
.nav-button span {
    background-color: rgba(215,211,197,1);
}
.nav-inner {
    background-color: rgba(215,211,197,1);
}
.nav-inner nav li a {
    color: #BA623C;
    font-weight: normal;
    font-size: 16pt;
}
.nav-inner nav li a.active:hover {
    color: #365D81;
}
.nav-inner.vismen {
    left: 0;
}
.nav-button {
    position: absolute;
    top: 38px;
    right: 50px;
    z-index: 21;
    width: 27px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
} 
.wh-info-box::before {
    background-color: rgba(186,98,60,.5);
}
.wh-info-box a {
    font-size: 16pt;
    color: white;
    font-family: 'gotham';
    font-weight: bold;
}
.wh-info-box-inner {
    color: white;
}
.wh-info-box span {
    font-size: 16pt;
    font-family: 'gotham';
    font-weight: normal;
}
.footer-social li a i {
    color: #fff;
}
.redes{
    border-radius: 20px;
    border: 1px solid white;
    padding: 5px 7px;
    margin-left: 25px;
}

.nav-inner nav li ul li a {
    color: #BA623C;
    font-size: 16pt;

} 

.uribe-img{
    min-width: 300px;
    padding-left:0;
}

.enter-wrap-holder {
    top: 28%;
    padding-left: 0px !important;
}

@media(min-width:992px){   
    .uribe-img{
        min-width: 500px;
        padding-left:0;
        margin-bottom: 200px;
        margin-top: 130px;
    }
    .enter-wrap-holder {
        top: 50%;
        padding-left: 50px;
    }
}

/*********************************
********  Quienes somos   ********
*********************************/
.grid-filosofia{
    background-color:#365D81;
}
.nosotros-3 {
    padding:35px 30px 35px 30px; 
}
.filosofia-one {
    padding:30px; 
}
@media(min-width:1200px){   
    .grid-nosotros {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        grid-column-gap:0px;
        background-color: rgba(215,211,197,1);
    }
    .nosotros-2 {
        grid-column: 1/2;
        grid-row: 1;
    }
    .nosotros-3 {
        grid-column: 2/2;
        grid-row: 1;
        padding:0px 30px;    
    } 
    .grid-filosofia{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background-color:#365D81;
        color: #fff;
        align-items: center;
    }
    .filosofia-one {
        grid-column: 1/2;
        grid-row: 1; 
        padding:0px 52px;
    }
    .filosofia-two {
        grid-column: 2/2;
        grid-row: 1 
    }
}

.img-filos{
    max-width: 100%;
    height: 60%;
    width: 100%;    
}

/*********************************
********  Servicios   ********
*********************************/
.px-30{
    padding: 0 30px;
}

.fixed-info-container {
    padding: 15px 0px 30px 0px;
}
.fixed-info-container h3 {
    margin-bottom: 0px !important;
}

@media(min-width:1200px){
    .px-50{
        padding: 0 50px !important;
    }
}

.info-servicios{
    font-size: 13pt;
    color: #365D81;
    font-family:'gotham';
}
.tooltip-info{
    font-size: 16pt;
}
.nav-inner nav li {
    text-align: left;
}
.grid-servicios{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.item-1{
    grid-column: 1;
    grid-row: 1; 
}
.item-2{
    grid-column: 2;
    grid-row: 1; 
}
.item-3{
    grid-column: 3;
    grid-row: 1; 
}
.item-4{
    grid-column: 4;
    grid-row: 2; 
}


.filter-nvis-column .gallery-filters, .filter-vis-column .gallery-filters {
    transform: translateY(0%);
    margin-bottom: 0px;
}

@media(min-width:1200px){
    .filter-nvis-column .gallery-filters, .filter-vis-column .gallery-filters {
        transform: translateY(-50%);
        margin-bottom: 70px;
    }
}


/*Proyectos*/
.fixed-info-container {
    background: rgba(215,211,197,1);
}
.filter-nvis-column .gallery-filters a.gallery-filter-active, .filter-vis-column .gallery-filters a.gallery-filter-active {
    color: rgba(186,98,60,.6);
    font-size: 16pt;
    font-family: 'gotham';
}
.filter-nvis-column .gallery-filters a, .filter-vis-column .gallery-filters a {
    color: #BA623C;
    font-weight: normal;
    font-size: 16pt;
    font-family: 'gotham';
}
.policy-box{
    color: white;
}

/*Proyecto tamarindo*/
.fixed-info-container h3, .fixed-info-container h4, .fw-info-container h3, .fw-info-container h4{
    font-size: 16pt;
    color: #365D81; 
    font-family:'gotham';  
}
.tamarindo{
    font-size:16pt;
    font-family:'gotham';
}
.zoomimage,
.tooltip-info,
.show-info span,
.show-info:hover span:hover{
    background-color: #BA623C !important;
}

.seccion{
    text-transform: uppercase;
    font-size: 20pt;
    font-family:'gotham';
    font-weight: normal !important;
    color:#BA623C !important;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 10px;
}

.fixed-info-container h3, .fixed-info-container h4, .fw-info-container h3, .fw-info-container h4 {
    margin-top: 0px;
    margin-bottom: 70px;
    font-weight: normal;
}
.gallery-horizontal-holder .customNavigation a {
    background: #BA623C;
    color: white;
} 
.fa {
    margin-left: 0px;
}

.owl-carousel .owl-item{
    margin-right: 0 !important;
}

.nicescroll-cursors{
    background-color: #d7d3c5 !important;            
}
#ascrail2001{
    background: #d7d3c5 none repeat scroll 0% 0% !important;
    opacity: 1;
    left: 0 !important;
}


/**********************
*****  SERVICIOS ******
***********************/
body{
    background-color: #d7d3c5 !important;
}

.card-header:first-child {
    border-radius: 0 !important;
    text-align: left;
}
.card-body{
    padding:0;
}
.card-header {
    padding: 0 !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
    border-bottom: transparent !important;
}
.card{
    background-color: #d7d3c5;
    border: 1px solid #d7d3c5;
}
.btn{
    margin: 0 !important;
    border: 1px solid #d7d3c5;
    padding-left: 0 !important;
}
@media(min-width:1200px){
    .pl-48{
        padding-left: 48px !important;
    }
    .px-48{
        padding-left: 48px;
        padding-right: 48px;
    }
}

.nav-inner {
    width: 380px;
}
.nav-inner nav li a.active {
    color: #BA623C;
} 

  
/**********************
*****  CONTACTO ******
***********************/
.pr-24{
    padding-right: 24px;
}

.dec-text {
  margin-bottom: 0 !important;
}
input[type="button"],
button {
  background: none;
  border: 0;
  font: inherit;
  line-height: normal;
  overflow: visible;
  outline: none;
  padding: 0;
  -webkit-user-select: none; 
  -webkit-appearance: button; 
  -moz-user-select: none;
  -ms-user-select: none;
}
button:focus {
    outline: 1px solid transparent !important;
}
.pl-33 {
  padding-left: 33px !important;
}
.ml-33 {
  margin-left: 33px !important;
}
.pb-110{
    padding-bottom: 170px;
}
@media(min-width:1200px){
    .height-aviso{
        height: 1200px !important;
    }
}

a:hover {
    color: #fff;
    text-decoration: none;
    font-family:'gotham';

}

.gallery-filters a:hover,
.gallery-filters a.active { 
    color: #365D81;
} 
.active::after {
    content: "";
  }
.touch{
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}

@media(min-width:992px){
    .touch{
        -ms-touch-action: none !important;
        touch-action: none !important;
    }
    .nav-inner nav li a {
       /*  font-size: 20pt; */
       font-size: 16pt; 
    }   
    .nav-inner nav li a:hover{
        color: #365D81;
    }
    .filter-nvis-column .gallery-filters a, .filter-vis-column .gallery-filters a {
        font-size: 16pt;
        border-bottom: 2px solid transparent;
        padding: 8px 0;
        transition: .5s all ease;
    }
  
    .active::after{
        content: "";
    }
    .titulo{
        font-size: 20pt;
    }
    .desplegado{
        font-size: 20pt;
    }
    .textos{
        font-size: 13pt;;
    }
    p{
        font-size: 16pt;
    }
    .info-servicios{
        font-size: 16pt;
    }
    .wh-info-box span {
        font-size: 20pt;
    }
    .wh-info-box a {
        font-size: 20pt;
    }
    .fixed-info-container h3, .fixed-info-container h4, .fw-info-container h3, .fw-info-container h4{
        font-size: 20pt;  
    }
    .tamarindo{
        font-size:20pt;
    }
}

.grid-item-holder{
    margin: 4px;
}

.fixed-info-container {
    padding: 15px 0px 0px 0px;
}

/*Grid-1*/
.residencial-1, .residencial-2 {
    margin-bottom: 7px;
}

/*Grid-2*/
.grid-container-2 {
    display: block;
}

.two, .three, .four, .five, .six{    
    margin-bottom: 7px; 
    overflow: hidden; 
    position: relative;
    display: block; 
}  

.one .mascara, .two .mascara, .three .mascara, .four .mascara, .five .mascara, .six .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgba(186,98,60,.4);     
    opacity: 0;
    transition: all .4s ease;
}  
.one .mascara:hover, .two .mascara:hover, .three .mascara:hover, .four .mascara:hover, .five .mascara:hover, .six .mascara:hover{
   opacity: 1;  
    /* filter: brightness(0.7);  */
/*     filter: brightness(0) saturate(100%) invert(43%) sepia(16%) saturate(1918%) hue-rotate(333deg) brightness(97%) contrast(85%) !important; */
    background-size: cover; 
}  

/*IMAGENES EN ESCALA NORMAL*/
.one .mascara:hover{
    background-image: url("../images/inicio/1casa hupuri.png");
}  
.two .mascara:hover {
    background-image: url("../images/inicio/1casa hupuri.png");
}  
.three .mascara:hover{
    background-image: url("../images/inicio/1casa hupuri.png");
}  
.four .mascara:hover{
    background-image: url("../images/inicio/1casa hupuri.png");
}   
.five .mascara:hover{
    background-image: url("../images/inicio/1casa hupuri.png");
}   
.six .mascara:hover{
    background-image: url("../images/inicio/1casa hupuri.png");
}   

.one .mascara p, .two .mascara p, .three .mascara p, .four .mascara p,
.five .mascara p, .six .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.one img, .two img, .three img, .four img, .five img, .six img{
    height: 100%;
    object-fit: cover;
    transition: .5s all ease; 
}

/*Grid-3*/
.item1, .item2, .item3, .item4,.item5,.item6, .item7, .item8,.item9{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}
.item1 .mascara, .item2 .mascara, .item3 .mascara, .item4 .mascara,.item5 .mascara,
.item6 .mascara, .item7 .mascara, .item8 .mascara,.item9 .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgba(186,98,60,.4);    
    opacity: 0;
    transition: all .4s ease;
}
.item1 .mascara:hover, .item2 .mascara:hover, .item3 .mascara:hover, .item4 .mascara:hover,.item5 .mascara:hover,
.item6 .mascara:hover, .item7 .mascara:hover, .item8 .mascara:hover,.item9 .mascara:hover{
    opacity: 1;
    filter: brightness(0.7);
}
.item1 .mascara p, .item2 .mascara p, .item3 .mascara p, .item4 .mascara p,.item5 .mascara p,
.item6 .mascara p, .item7 .mascara p, .item8 .mascara p,.item9 .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.item1 img, .item2 img, .item3 img, .item4 img,.item5 img,
.item6 img, .item7 img, .item8 img,.item9 img{
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}


/*Grid-4*/
.uno{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}    
.dos{ 
    overflow: hidden;
    position: relative;
    display: block; 
    margin-bottom: 7px;
}
.tres{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}
.uno .mascara, .dos .mascara, .tres .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgba(186,98,60,.4);
    opacity: 0;
    transition: all .4s ease;
}
.uno .mascara:hover, .dos .mascara:hover, .tres .mascara:hover{
    opacity: 1;
    filter: brightness(0.7);
}
.uno .mascara p, .dos .mascara p, .tres .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.uno img, .dos img, .tres img{
    height: 100%;
    object-fit: cover;
    transition: .5s all ease; 
}    
.uno:hover img, .dos:hover img, .tres:hover img{
    transform: scale(1.2);
}

/*Grid-5*/
.item-one{
    overflow: hidden;
     position: relative;
    display: block;
    margin-bottom: 7px;
}    
.item-two{  
    overflow: hidden; 
     position: relative;
    display: block;
    margin-bottom: 7px;
}
.item-three{
    overflow: hidden; 
     position: relative;
    display: block; 
    margin-bottom: 7px;
}
.item-four{
    overflow: hidden;  
     position: relative;
    display: block; 
    margin-bottom: 7px;
}
.item-five{
    overflow: hidden;
     position: relative;
    display: block;
    margin-bottom: 7px;
}
.item-six{
    overflow: hidden; 
     position: relative;
    display: block;
    margin-bottom: 7px;
}
.item-one .mascara, .item-two .mascara, .item-three .mascara, .item-four .mascara, .item-five .mascara, .item-six .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgba(186,98,60,.4);
    opacity: 0;
    transition: all .4s ease;
}

.item-one .mascara:hover, .item-two .mascara:hover, .item-three .mascara:hover, .item-four .mascara:hover, .item-five .mascara:hover, .item-six .mascara:hover{
    opacity: 1;
}

.item-one .mascara p,  .item-two .mascara p, .item-three .mascara p, .item-four .mascara p, .item-five .mascara p, .item-six .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.item-one img, .item-two img, .item-three img, .item-four img,
.item-five img, .item-six img{
    height: 100%;
    object-fit: cover;
    transition: .5s all ease; 
}
.item-one:hover img, .item-two:hover img, .item-three:hover img, .item-four:hover img,
.item-five:hover img, .item-six:hover img{
    transform: scale(1.2);
}

.horizontal_item {
    margin-top: 7px;
}

.grid-container-2, .grid-container-3, .grid-container-4, .grid-container-5{
    display: block;
}

@media(min-width: 768px){
    .pb-proyectos{
        padding-bottom: 60px !important;
    }
    .fixed-info-container {
        padding: 15px 0px 30px 0px;
    }    
}
 
@media(min-width: 1037px) {  
    .nav-inner {
        bottom: 75px;
        width: 350px;
    }

    .fixed-info-container {
        width: 350px;
      }
    .vis-info {
        padding-left: 350px !important;
    }

    /*Grid-1*/
    .grid {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
    }
    .residencial-1 {
        grid-row: 1;
        overflow: hidden; 
    }
    .residencial-2 {
        grid-row: 2;
        padding:4px 0px 0px 0px;  
        overflow: hidden;   
    } 
    .residencial-1>img, .residencial-2>img {
        height: 370px;
        object-fit: cover;
        transition: .5s all ease; 
    }    
    .residencial-1>img:hover, .residencial-2>img:hover {
        transform: scale(1.2);
    }    
   
    .escenografia{
        height: 800px;
    }

    /*Grid-2*/
    .grid-container-2 {
        display: grid;
        grid-column-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 247px);
    }
    .one{
        grid-column: 1/4;
        grid-row: 1/3;   
        margin-top: 7px;   
    }  
   
    .two{
        grid-column: 4/5;
        grid-row: 1/1;   
        margin-top: 7px;
    }    
    .three{
        grid-column: 4/4;
        grid-row: 2/4; 
    }   
    .three> img{
        height: 100%;
        margin-bottom: 0px;
    }
    .four{
        grid-row: 3/3;  
        grid-column: 1/2;
    }
    .five{
        grid-row: 3/3; 
        grid-column: 2/3; 
    }
    .six{
        grid-row: 3/3;  
        grid-column: 3/3;
    }

    /*Grid-3*/
    .grid-container-3 {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px);
    }
    .item1 {
        grid-column: 1 / span 2;
        grid-row: 1/3;        
    }   
    .item1, .item2, .item3 {margin-top: 7px;
    }   
    .item1, .item2, .item3, .item4,.item5,.item6, .item7, .item8,.item9{
        margin-bottom: 7px;
    }   
   
    /*Grid-4*/    
    .grid-container-4 {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px);
    }
    .uno{
        grid-row: 1;
        overflow: hidden;
        margin-top: 7px;
    }    
    .dos{
        grid-row: 2;  
        overflow: hidden;
    }
    .tres{
        grid-row: 3;
        overflow: hidden;
    }    
  
    /*Grid-5*/
    .grid-container-5 {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px);
    }
    .item-one{
        grid-column: 1 / span 2;
        grid-row: 1/span 2;
        margin-top: 7px;
    }    
    .item-two{
        grid-column: 1 / 2;
        grid-row: 3;  
    }
    .item-three{
        grid-column: 2 / 3;
        grid-row: 3; 
    }
    .item-four{
        grid-column: 3 / 4;
        grid-row: 1; 
        margin-top: 7px;
    }
    .item-five{
        grid-column: 4 / 5;
        grid-row: 1; 
        margin-top: 7px;
    }
    .item-six{
        grid-column: 3 / 5;
        grid-row: 2/4; 
    }    

    /*Grid-1*/
    .residencial-1, .residencial-2 {
        margin-bottom: 0px;
    }

    /*Grid-2*/
    .one, .two, .three, .four{
        margin-bottom: 7px;       
    }

    /*Grid-3*/
    .item1, .item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9{
        margin-bottom: 0px;
    } 

    /*Grid-4*/
    .uno, .dos, .tres{
        margin-bottom: 0px;
    }
   
    /*Grid-5*/
    .item-one, .item-two, .item-three, .item-four, .item-five, .item-six{
        margin-bottom: 0px;
    } 
    .filter-nvis-column .gallery-filters, .filter-vis-column .gallery-filters {
        transform: translateY(-50%);
    }
    .content{
        padding-bottom: 76px;
    }
    footer#grid-2, footer#grid-3, footer#grid-4, footer#grid-5{
        height: 76px !important;
    }
}

@media(min-width: 992px){
    .corazon{
        height: 270px !important;
    } 
    
}

@media(min-width: 1200px){
    .fixed-info-container {
        width: 300px !important;
    }
    .vis-info {
        padding-left: 350px !important;
    }
    #tamarindo.fixed-info-container {
        width: 350px !important;
    }
    footer#footer-tamarindo{
        bottom: -4px;
        height: 70px;
    }
    .horizontal_item {
        margin-right: 7px;
    }
    footer#grid-2, footer#grid-3, footer#grid-4, footer#grid-5{
        height: 77px !important;
    }
}

@media(min-width: 1400px){
    .fixed-info-container {
        width: 300px !important;
    }
    .vis-info {
        padding-left: 350px !important;
    }
    #tamarindo.fixed-info-container {
        width: 350px !important;
    }
    #footer-tamarindo{
        bottom: -6px;
    }
    .horizontal_item {
        margin-right: 7px;
    }
    .content{
        padding-bottom: 74px;
    }
    header.grid-ejemplos{
        height: 10vh;
    }
    
    footer#grid-2, footer#grid-3, footer#grid-4, footer#grid-5{
        height: 8.5vh !important;
    }
}

@media(min-width: 1600px){
    .content{
        padding-bottom: 78px;
    }
}

@media(min-width: 1037px){
    .t-vazquez{
        top: 175px !important;
    }
    .t-alfa{
        top: 351px !important;
    }
}
@media(min-width: 1100px){
    .t-vazquez{
        top: 193px !important;
    }
    .t-alfa{
        top: 387px !important;
    }
}
@media(min-width: 1200px){
    .t-vazquez{
        top: 214px !important;
    }
    .t-alfa{
        top: 429px !important;
    }
}
@media(min-width: 1300px){
    .t-vazquez{
        top: 219px !important;
    }
    .t-alfa{
        top: 438px !important;
    }
}
@media(min-width: 1400px){
    .t-vazquez{
        top: 235px !important;
    }
    .t-alfa{
        top: 470px !important;
    }
}
@media(min-width: 1500px){
    .t-vazquez{
        top: 257px !important;
    }
    .t-alfa{
        top: 512px !important;
    }
}
@media(min-width: 1600px){
    .t-vazquez{
        top: 281px !important;
    }
    .t-alfa{
        top: 563px !important;
    }
}

footer{
    bottom: -1px;
}

.nicescroll-rails.nicescroll-rails-hr{
    background: transparent !important;
}

footer#footer-tamarindo{
    bottom: -6px !important;
}

.nicescroll-cursors {
    background-color: transparent !important;
}



.one .mascara:hover,.two .mascara:hover, .three .mascara:hover, .four .mascara:hover{
    background-size: cover;
    filter: brightness(0.7);
}

@media(min-height: 908px){
    .grid-container-2 {
         height: 100vh;
        grid-template-rows: max-content; 
    }
}
/* 
@media(min-height: 930px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 254px);
    }
}
@media(min-height: 940px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 257px);
    }
}
@media(min-height: 950px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 260px);
    }
}
@media(min-height: 960px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 264px);
    }
}
@media(min-height: 970px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 268px);
    }
}
@media(min-height: 980px){
    .grid-container-2 {
        grid-template-rows: repeat(3, 272px);
    }
}
 */

 /*Residencial*/
.resid1, .resid2, .resid3, .resid4,.resid5,.resid6, .resid7, .resid8,.resid9,.resid10{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}
.resid1 .mascara, .resid2 .mascara, .resid3 .mascara, .resid4 .mascara,.resid5 .mascara,
.resid6 .mascara, .resid7 .mascara, .resid8 .mascara,.resid9 .mascara, .resid10 .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-direction: column;
    overflow: hidden;
    background: rgba(186,98,60,.4);    
    opacity: 0;
    transition: all .4s ease;
}
.resid1 .mascara:hover, .resid2 .mascara:hover, .resid3 .mascara:hover, .resid4 .mascara:hover,.resid5 .mascara:hover,
.resid6 .mascara:hover, .resid7 .mascara:hover, .resid8 .mascara:hover,.resid9 .mascara:hover, .resid10 .mascara:hover{
    opacity: 1;
    filter: brightness(0.7);
}
.resid1 .mascara p, .resid2 .mascara p, .resid3 .mascara p, .resid4 .mascara p,.resid5 .mascara p,
.resid6 .mascara p, .resid7 .mascara p, .resid8 .mascara p,.resid9 .mascara p, .resid10 .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.resid1 img, .resid2 img, .resid3 img, .resid4 img,.resid5 img,
.resid6 img, .resid7 img, .resid8 img,.resid9 img, .resid10 img{
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

@media(min-width:1024px){
    .grid-residencial {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px);
    }
    .resid1 {
        grid-column: 1 / 2;
        grid-row: 1/3;        
    }   
    .resid10 {
        grid-column: 2 / 3;
        grid-row: 1/3;        
    } 
    .resid1, .resid2, .resid3, .resid10 {
        margin-top: 7px;
    }   
    .resid1, .resid2, .resid3, .resid4,.resid5,.resid6, .resid7, .resid8,.resid9, .resid10{
        margin-bottom: 0px;
    }  
}

/*Hospitalidad*/
.hosp1, .hosp2, .hosp3, .hosp4,.hosp5{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}
.hosp1 .mascara, .hosp2 .mascara, .hosp3 .mascara, .hosp4 .mascara,.hosp5 .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-direction: column;
    overflow: hidden;
    background: rgba(186,98,60,.4);    
    opacity: 0;
    transition: all .4s ease;
}
.hosp1 .mascara:hover, .hosp2 .mascara:hover, .hosp3 .mascara:hover, .hosp4 .mascara:hover,.hosp5 .mascara:hover{
    opacity: 1;
    filter: brightness(0.7);
}
.hosp1 .mascara p, .hosp2 .mascara p, .hosp3 .mascara p, .hosp4 .mascara p,.hosp5 .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.hosp1 img, .hosp2 img, .hosp3 img, .hosp4 img,.hosp5 img{
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

@media(min-width:1024px){
    .grid-hospitalidad {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px);
    }
    .hosp1 {
        grid-column: 1 / 3;
        grid-row: 1/2;        
    }
    .hosp2 {
        grid-column: 1 / 3;
        grid-row: 2/4;        
    }
    .hosp3 {
        grid-column: 3 / 5;
        grid-row: 1/ 3;        
    }
    .hosp4 {
        grid-column: 3 / 4;
        grid-row: 3 / 4;        
    }
    .hosp5 {
        grid-column: 4 / 5;
        grid-row: 3 / 4;        
    }
    .hosp1, .hosp3 {
        margin-top: 7px;
    }   
    .hosp1, .hosp2, .hosp3, .hosp4, .hosp5{
        margin-bottom: 0px;
    }  
}

/*Escenografia*/
.escen1, .escen2, .escen3{
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 7px;
}
.escen1 .mascara, .escen2 .mascara, .escen3 .mascara{
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
    z-index:10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-direction: column;
    overflow: hidden;
    background: rgba(186,98,60,.4);    
    opacity: 0;
    transition: all .4s ease;
}
.escen1 .mascara:hover, .escen2 .mascara:hover, .escen3 .mascara:hover{
    opacity: 1;
    filter: brightness(0.7);
}
.escen1 .mascara p, .escen2 .mascara p, .escen3 .mascara p{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.escen1 img, .escen2 img, .escen3 img{
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}


@media(min-width:1024px){
    .grid-escenografia {
        display: grid;
        grid-column-gap:7px;
        grid-row-gap:7px;
        grid-template-columns: repeat(2, 1fr);
    }
    .escen1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;        
    }
    .escen2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;        
    }
    .escen3 {
        grid-column: 2 / 3;  
        grid-row: 1 / 3; 
    }
    .escen1, .escen3 {
        margin-top: 7px;
    }   
    .escen1, .escen2, .escen3{
        margin-bottom: 0px;
    }  
    .footer-secciones{
        height: 75px !important;
    }
}

.boton-espanol, .boton-ingles{
    font-size: 13px !important;
    color: #BA623C;
    font-weight: bold;
}
.boton-espanol.active, .boton-ingles.active,
.boton-espanol:hover, .boton-ingles:hover{
    border-bottom: 1px solid #BA623C;
    color: white;
}

@media(min-width:992px){
    .col-lg-landing{
        width: 20%;
    }
    .col-lg-landing .img1:hover{
        width: 20%;
    }
}

#contenedor-imagenes img {
    /*width: 200px; /* Ajusta el ancho según desees */
    /*height: 200px; /* Ajusta la altura según desees */
    position: absolute;
  }

  #contenedor-imagenes img:first-child {
      opacity: 1; /* Imagen 1 visible al inicio */
  }

  #contenedor-imagenes img:last-child {
      opacity: 0; /* Imagen 2 oculta al inicio */
      top: 0;
      left: 0;
  }

  #contenedor-imagenes:hover img:first-child {
      transition: opacity 0.5s ease; /* Animación de opacidad */
      opacity: 0; /* Imagen 1 se desvanece */
  }

  #contenedor-imagenes:hover img:last-child {
      transition: opacity 0.5s ease; /* Animación de opacidad */
      opacity: 1; /* Imagen 2 aparece */
  }

.imgWrapper .imgResponsiva{
    display: inline-block;
    width: 20%;
    max-width: 345px;
}
.imgResponsiva img{
    height: auto;
    width: 100%;
}

@media(min-width:1200px){
    /* .contenedor-imagenes {
        display: flex; 
        justify-content: space-around; 
        align-items: center; 
    }
    
    .imagen1, .imagen2, .imagen3, .imagen4, .imagen5 {
    flex: 1; 
    } */

    .imagen {
        position: absolute;
    }
    
    .caja{
        overflow-y: hidden;
    }
    
    #nosotros {
        left: -42%;
        clip-path: inset(0 60% 0 21%); /*Imagen recortada*/
        transition: all 1.5s ease;
    }

    #nosotros:hover {
        left:-35%;
        z-index: 10;
        overflow-y: hidden;
        transition: all 1.5s ease;
        overflow-y: hidden;
        clip-path: inset(0 0 0 0);  /*Imagen ampliada normal al poner el mouse sobre ella*/
    } 

    #hospitalidad {
        left: -28%;
        clip-path: inset(0 51% 0 30%);
        transition: all 1.5s ease;
    }
    #hospitalidad:hover {
        left: -23%;
        z-index: 1;
        overflow-y: hidden;
        clip-path: inset(0 0 0 0);
        overflow-y: hidden;
    }

    #residencial {
        left: -14%;
        clip-path: inset(0 50% 0 35.25%);
        transition: all 1.5s ease;
    }
    #residencial:hover {
        left: -23%;
        z-index: 1;
        overflow-y: hidden;
        clip-path: inset(0 0 0 0);
        overflow-y: hidden;
    }

    #escenografia {
        left: -6%; 
        clip-path: inset(0 15% 0 44.25%);
        transition: all 1.5s ease;
    }
    #escenografia:hover {
        left: -23%;
        z-index: 1;
        overflow-y: hidden;
        clip-path: inset(0 0 0 0);
        overflow-y: hidden;
    }

    #otros-servicios {
        left: 21%; 
        clip-path: inset(0 24% 0 40.65%);
        transition: all 1.5s ease;
    }
    #otros-servicios:hover {
        left: -23%;
        z-index: 1;
        overflow-y: hidden;
        clip-path: inset(0 0 0 0);
        overflow-y: hidden;
    }

    .texto-img{
        position: absolute; 
        text-transform: uppercase;
        color: white;
        top: 42%; 
        left: 50%; 
        transform: translate(-50%, -50%);
    }

    .image-container{
        position: relative;
    }
}
  
/*LANDING PAGE*/
.img-1{
    background-image:url('../images/landing/Grande/1.png');
}
.img-2{
    background-image:url('../images/landing/Grande/2.png');
}
.img-3{
    background-image:url('../images/landing/Grande/3.png'); 
}
.img-4{
    background-image:url('../images/landing/Grande/4.png');
}
.img-5{
    background-image:url('../images/landing/Grande/5.png');
}
figure {
    position: relative; /* Permite posicionar el elemento ficaption */
}
  
figcaption {
    position: absolute; 
    top: 0; 
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    color: white;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.3); 
    font-size: 16px;
    font-weight: bold;
}

@media(min-width:1200px){
    .container {
        position: relative;
        width: 100%; 
        height: 50rem;
        background-color:#d7d3c5;
    }
    .img {
        position: absolute;
        top: 0;
        left: 0;        
        width: 100%;
        height: 100%;
        background-repeat:no-repeat;
        background-size:cover;
        background-position:top;
        transition :all .5s; /*for smoothing effect*/
    }
    .img-1{
        background-image:url('../images/landing/Grande/1.png');
        clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%); 
    }
    .img-2{
        background-image:url('../images/landing/Grande/2.png') ;
        clip-path: polygon(20% 0, 40% 0, 40% 100%, 20% 100%);
    }
    .img-3{
        background-image:url('../images/landing/Grande/3.png') ; 
        clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
    }
    .img-4{
        background-image:url('../images/landing/Grande/4.png');
        clip-path: polygon(60% 0, 80% 0, 80% 100%, 60% 100%); 
    }
    .img-5{
        background-image:url('../images/landing/Grande/5.png');
        clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%); 
    }    
    .container:hover .img {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        z-index: 10;
    }
    .container .img:hover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        z-index: 10;
    } 
    .nosotros-desktop .img{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6); 
    }
    .nosotros-desktop p,
    .hospitalidad-desktop p,
    .residencial-desktop p,
    .escenografia-desktop p,
    .servicios-desktop p {
        position: absolute;   
        top: 50%;     
        transform: translate(-50%, -50%); 
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .nosotros-desktop p{
        left: 10%;
        
    }
    .nosotros-desktop:hover p{
        left: 50%;
        z-index:11;
        
    }
    .hospitalidad-desktop p{
        left: 30%;
    }
    .residencial-desktop p{
        left: 50%;
    }
    .escenografia-desktop p{
        left: 70%;
    }
    .servicios-desktop p{
        left: 90%;
    }
      
}