@import url("default.css");


.introRoatan{
    width: 90%;
    height: 300px;
    margin: 10px auto;
    background-image: url('../img/roatan/d1.jpg') ;
    background-size: cover;
    background-position:bottom;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-intro{
    width: 90%;
    height: auto;
    padding: 50px 20px;
    /* background-color: rgba(255, 255, 255, 0.795); */
    color: white;
    display: flex;
    justify-content: center;
}

.introRoatan h2{
    /* color: white; */
    font-family: var(--fuenteTitle);
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid white;
    display: inline-block;
    padding-bottom: 10px;
}

.introRoatan p{
    /* color: white; */
    font-size: 19px;
    font-family: var(--fuenteText);
    width: 90%;
}


.item-intro1{
    width: 100%;
    height: 250px;
}

.item-intro2{
    width: 100%;
    height: 300px;
}

.img-logo-roatan{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.section-roatan{
    width: 95%;
    height: auto;
    margin: auto;
    padding: 20px 0px;
}

.contenedor-grid-roa{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}


.grid-1{
    width: 100%;
    height: auto;
    display: none;
}

.contenedor-cuadros{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    /* background-color: azure; */
}

.square1{
    width: 100%;
    height: 280px;
    background-image: url('../img/img-gallery-017.jpeg');
    background-size: cover;
    margin: 10px 0;
}


.square2{
    width: 100%;
    height: 280px;
    margin: 10px 0;
    background-image: url('../img/img-gallery-012.jpeg');
    background-size: cover;
    
}

.p-square2{
    width: 90%;
    color: white;
    font-family: var(--fuenteTitle);
    font-size: 2.2rem;
    display: block;
}

.square3{
    width: 100%;
    height: 280px;
    margin: 10px 0;
    order: 3;
    background-image: url('../img/roa-background.jpg');
    background-size: cover;
    background-position: center;
}

.p-square3{
    color: #333;
    font-family: var(--fuenteTitle);
    font-size: 2.5rem;
    display: block;
    text-align: center;
  
}
.square4{
    width: 100%;
    height: 280px;
    margin: 10px 0;
    order: 2;
}

.grid-2{
    width: 100%;
    height: 400px;
    margin: auto;
    background-image: url("../img/roatan/gabby-roa.jpeg");
    background-size: cover;
}

.img-grid{
    width: 70%;
    height: auto;
    margin: auto;
    display: block;
}
/* ---------------------------------------------- */

.container-condos{
  width: 100%;
  height: auto;
  padding: 70px 0px;
}

.mini-title-condos{
    text-align: center;
    font-family: var(--fuenteTitle);
    /* color: var(--colorPrincipal); */
    color: gray;
    font-size: 1.5rem;
}

.title-condos{
    text-align: center;
    font-family: var(--fuenteTitle);
    color: var(--colorPrincipal);
    font-size: 2.4rem;
    padding: 10px 0px;
    margin: auto;
    display: block;
}

/* .span-color{
    color: var(--colorPrincipal);
} */
.title-saber{
    text-align: center;
    font-family: var(--fuenteTitle);
   color: #333;
    font-size: 2.4rem;
    padding: 10px 0px;
}
.content-houses{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 25px 0px;
}

.cont1-houses{
    width: 100%;
    height: auto;
    background-color: #fafafa;
    padding: 17px ;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subitem-condos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.subitem-cont1-houses{
    width: 50%;
}

.span-check{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

.span-check img{
  width: 20px;
  height: 20px;
}

.span-check p{
    margin-left: 10px;
    font-size: 17px;
    font-family: var(--fuenteAlt);
    color: #2d2d2d;
}

.btn-house{
    width: 200px;
    padding: 15px 35px;
    text-align: center;
    text-decoration: none;
    color: #2d2d2d;
    margin-top: 30px;
    font-family: var(--fuenteText);
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colorPrincipal);
    color: white;
}

.cont2-houses{
   width: 100%;
   height: auto;
}

.content-glide{
    width: 100%;
    height: auto;
}

.img-slide{
    width: 100%;
    height: auto;
}
/* ------------------------------------ */

.contenedor-actividades{
   width: 100%;
   height: auto;
   padding: 20px 0px;
}

.lifestyle-title{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lifestyle-line{
    width: 20%;
    border-bottom: 1px solid var(--colorPrincipal);
}

.lifestyle-h2{
    margin: 0px 10px;
    color: var(--colorPrincipal);
    font-size: 1.2rem;
    font-family: var(--fuenteTitle);
    text-transform: uppercase;
}


.content-slide-actividades{
    width: 90%;
    height: auto;
    margin: auto;
    padding: 20px 0px;
    position: relative;
}

#controls{
    width: 110%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    /* background-color: gray; */
}

.arrow-left,.arrow-right{
    width: 20px;
    height: 20px;
    cursor: pointer;
    filter: invert(100%) sepia(18%) saturate(7361%) hue-rotate(304deg) brightness(88%) contrast(63%);
}

.arrow-right{
    float: right;
}

.contenedor-datos{
    width: 100%;
    height: auto;
    padding: 30px 0px;
}

.content-slide-datos{
    width: 90%;
    height: auto;
    margin: auto;
    padding: 20px 0px;
    position: relative; 
}
/* ----------------------------- */

.sections-sponsors{
    width: 100%;
    height: auto;
    padding: 60px 0px;
}

.contenedor-sponsors{
    width: 90%;
    height: auto;
    margin: auto;
}


.sponsor{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 30px 0px;
    background-color: #fafafa;
    text-decoration: none;
}

.sponsor:hover > .cont1-sponsor .player-icon{
    transform: scale(1.1);
    transition: all .4s ease-in;
}

.cont1-sponsor{
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: bottom;
    pointer-events: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.player-icon{
    width: 130px;
    height: 130px;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(201deg) brightness(104%) contrast(103%);
    cursor: pointer;
    transition: all .4s ease-in;
}


/* .player-icon:hover{
   transform: scale(1.1);
   transition: all .4s ease-in;
} */

.cont2-sponsor{
    width: 100%;
    height: auto;
    padding: 20px 10px;
    pointer-events: none;
}

.article-sponsor{
  padding: 5px;  
}

.title-sponsor{
    font-size: 2rem;
    font-family: var(--fuenteTitle);
    color: #333;
}

.p-sponsors{
    font-family: var(--fuenteText);
    font-size: 19px;
    padding: 10px 0px;
    color: #333;
}

.rating{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: var(--fuenteText);
    color: gray;
    font-size: 1.3rem;
    padding-top: 20px;

}

.stars-icon{
    width: 85px;
    height: auto;
    margin-left: 10px;
}

.modal-video{
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.modal-video-active{
    display: flex;
}

.content-modal-video{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.video{
    width: 80%;
    margin: auto;
}
.close-modal{

    width: 55px;
    height: 55px;
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 101;
    padding-bottom: 10px;
    transition: all .4s ease-in-out;
    cursor: pointer;
}

.close-modal:hover{
    transform: scale(1.1);
    transition: all .4s ease-in-out;
}

/* ----------------------------- */

.section-bloque7{
    width: 100%;
    height: auto;
    padding: 50px 0px;
  }
  
  .content-bloque7{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  
  .contimg-bloque7{
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  
  .img-bloque7{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease-in-out;
    cursor: pointer;
  }
  
  .img-bloque7:hover{
    transform: scale(1.1);
    transition: all .5s ease-in-out;
  }


/* Media Querie Tablet */
@media screen and (min-width:700px){
    
     .introRoatan{
       /* background-image: url('../img/roatan/roatan-4197054_1920.jpg') ; */
       background-position: center;
     }

     .introRoatan h2{
        font-size: 3.5rem;
     }


    .contenedor-grid-roa{
        flex-direction: row;
     }

    .grid-1{
        width: 60%;
        display: block;
    }

    .contenedor-cuadros{
       flex-direction: row;
       justify-content: space-evenly;
    }

    .square1{
      width: 40%;
      height: 200px;
    }
    .square2{
        width: 40%;
        height: 200px;
    }
    .square3{
        width: 90%;
        order: 2;
        height: 200px;
      }
      

    /* --------------------------- */
    .grid-2{
        width: 40%;
        height: 450px;       
    }
    /* ---------------------------------- */
     .content-houses{
        flex-direction: row;
     }

     .cont1-houses{
        width: 50%;
        height: auto;
     }

     .cont2-houses{
        width: 50%;
     }
    /* --------------------------- */
    #controls{
      width: 107%;
    }

    .lifestyle-h2{
        font-size: 2.1rem;
    }

    /* ----------------------------------- */
    
    .sponsor{
        flex-direction: row;
        margin: 40px 0px;
    }
    .cont1-sponsor{
        width: 30%;
        height: 320px;
    }
    
    .cont2-sponsor{
        display: flex ;
        justify-content: center;
        align-items: center;
    }

    .p-sponsors{
        text-align: justify;
    }

    .article-sponsor{
        width: 90%;
        height: auto;
    }
    

    .video{
        width: 60%;
    }

    /* ---------------------------------- */
    /* Bloque 7 */

    .section-bloque7{
        padding: 55px 0px;
    }

    .content-bloque7{
        flex-direction: row;
    }

    .img-bloque7{
        width: 100%;
    }
    

    .img-bloque7{
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
}

/* Media Querie Tablet-desktop */
@media screen and (min-width:992px){
   .section-roatan{
    width: 90%;
    
   }

   .contenedor-grid-roa{
      flex-direction: row;
   }
/* ----------------------- */
  .square1{
    width: 45%;
    height: 280px;
  }
  .square2{
      width: 45%;
      height: 280px;
  }
  .square3{
      width: 93%;
      order: 2;
      height: 280px;
    }
   
    /* -------- */
   .grid-2{
    width: 40%;
    height: 600px;   
   } 
    /*------------------------------------------------  */

    .cont1-houses{
        width: 35%;
        height: auto;
     }

     .cont2-houses{
        width: 60%;
        margin-left: 15px;
     }
}

/* Media Querie desktop */
@media screen and (min-width:1200px){
    .square1{
        width: 40%;
        height: 280px;
      }
      .square2{
          width: 40%;
          height: 280px;
      }
      .square3{
          width: 88%;
          order: 2;
          height: 280px;
        }
        
        /* ---------------------- */

        /* ----------------------------------- */
    
    .sponsor{
        flex-direction: row;
    }
    .cont1-sponsor{
        width: 28%;
        height: 320px;
    }
    
    .cont2-sponsor{
        display: flex ;
        justify-content: center;
        align-items: center;
    }

    .article-sponsor{
        width: 90%;
        height: auto;
    }
    

    .video{
        width: 23%;
    }

    /* ---------------------------------- */
        /* --------------------------- */
        .section-bloque7{
            padding: 75px 0px;
        }

        .content-bloque7{
        flex-direction: row;
        }

        .img-bloque7{
        width: 100%;
        }
        

        .img-bloque7{
        width: 100%;
        height: 500px;
        object-fit: cover;
        }
}

/* Media Querie desktop large*/
@media screen and (min-width:1366px){
   
}