/* estilos generales */

/* navbar */
.navbar-brand img {
    width: 8.5rem;
    margin-left: 2rem;
}

.navbar-brand {
    padding-left: 7rem
}

.nav-item {
    padding-right: 7rem
}

.navbar-brand:hover {
    cursor: pointer;
}

.navbar {
    background-color: #1A2A40;
    font-family: "Roboto",
        sans-serif;
}

.botonCierre {
    background-color: inherit;
    border: none;
}

.iconoCierre {
    color: #fff;
    font-size: 1.3rem;
}

@media screen and (max-width: 991.5px) {
    .desaparecer {
        display: none;
    }

    .navbar-brand {
     
       padding-left: 0;
       padding-right: 0;
    }
     .navbar-brand img{
         margin-left: 0.8rem;
     }
    .nav-item {
        padding-right: 0rem
    }
}

.nav-link {
    color: #fff;
    font-size: 1.1rem;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.603);
}

.nav-link:visited {
    color: rgba(255, 255, 255, 0.603);
}

/*offcanvas*/
.offcanvas {
    background-color: #1A2A40;
}

.bi-three-dots-vertical {
    color: #fff;
}

.nav-boton {
    color: #fff;
    border: none;
}

.nav-boton i {
    font-size: 2.3rem;
}



/* hero */
.hero {
    background-image: url('../assets/hero.webp');
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-container {
    display: block;
    text-align: end;
}

.hero-container img {
    width: 22rem;
}

.hero-container h1 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 300;
    font-family: "Sanchez",
        serif;
    font-weight: 400;
    font-style: normal;

}

@media screen and (max-width: 450px) {
    .hero-container img {
        width: 18rem;
    }

    .hero {
        height: 90vh;
    }
}



/* carousel */
.carousel-inner {
    margin: 0 auto;
    padding: 0;
    width: 88vw;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.carousel-container {
    background: #1A2A40;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #1A2A40, #96A9B6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #1A2A40, #96A9B6);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding-bottom: 5rem;
    padding-top: 5rem;
}

.carousel-indicators button.active {
    background-color: #fff !important;
    border: none !important;
    width: 16px !important;
    height: 16px !important;
}

.carousel-indicators button {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50%;
    border: 2px solid #fff !important;
    background-color: inherit !important;
    margin-bottom: 2rem;
    transition: background-color .6s ease;

}

.carousel-control-prev-icon {
    background-image: url("../assets/flecha-izquierdaBC1.png");
    width: 4rem;
    height: 4rem;
}

.carousel-control-next-icon {
    background-image: url("../assets/flecha-derechaBC1.png");
    width: 4rem;
    height: 4rem;
}



.carousel-control-next,
.carousel-control-prev {
    margin: 5rem 7rem;
    z-index: 100;
    align-items: flex-end;
    opacity: 1;
}


.logo-carousel {
    position: absolute;
    right: 50px;
    top: 70px;
    width: 5rem;
    height: 5rem;
    z-index: 1000;
    box-sizing: content-box;
}

.logo-carousel img {
    width: 100%;
    height: 100%;
}

.texto-carousel {
    background: #48738E;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #1C2F45, #48738E);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #48738E, #1C2F45);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    width: 23%;
    height: 100%;
    margin: 0;
}

.pantalla {
    background-color: rgba(8, 8, 8, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
}

.video-carousel {
    position: relative;
    height: 90vh;
    width: 90vw;
    min-width: 500px;
    overflow: hidden;
}

.texto-carousel h4 {
    margin: 0;
    white-space: nowrap;
    color: #fff;
    font-weight: 100;
    font-family: "Urbanist",
        serif;
    font-size: 1.4rem;
    padding-left: 3.5rem;
    padding-bottom: 1.5rem;
    padding-top: 4rem;

}

.texto-carousel h3 {
    white-space: nowrap;
    color: #fff;
    font-size: 8rem;
    font-family: "Prata",
        serif;
    font-weight: 600;
    font-style: normal;
    padding-left: 3.5rem;
    letter-spacing: 3px;
    margin: 0;
}

@media (max-width: 1388px) {
.texto-carousel h3 {
     white-space: no;}
}


.video-carousel video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
@media (min-width: 360px) and (max-width: 464px) {
    .carousel-inner {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        display: none;
    }

    .video-carousel {
        min-width: 700px;
        height: 600px;
    }


    .video-carousel video {
        width: 160vw;
        overflow: hidden;
    }

    .texto-carousel {
        padding: 2rem 0rem;
        width: 22vw;
    }

    .texto-carousel h3 {
        font-size: 2.9rem;
        white-space: normal;
        padding-left: 1.5rem;
    }

    .texto-carousel h4 {
        padding-left: 1.5rem;
        font-size: 1.2rem;
        }

    .logo-carousel {
        right: 40px;
        top: 50px;
        height: 4rem;
        width: 4rem;
    }

}

@media (min-width: 464px) and (max-width: 520px) {
    .carousel-inner {
        width: 100vw;
        min-width: none;
        margin: 0;
        padding: 0;
    }

    
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        display: none;
    }

    .video-carousel {
        min-width: 700px;
        height: 600px;
    }


    .video-carousel video {
        width: 160vw;
        overflow: hidden;
    }

    .texto-carousel {
        padding: 2rem 0rem;
        width: 22vw;
    }

    .texto-carousel h3 {
        font-size: 4rem;
        white-space: normal;
        padding-left: 1.5rem;

    }

    .texto-carousel h4 {
        padding-left: 1rem;

    }

    .logo-carousel {
        right: 50px;
        top: 70px;
        height: 4rem;
        width: 4rem;
    }

}

@media (min-width: 520px) and (max-width: 768px) {
   

    .carousel-inner {
        width: 100vw;
        margin: 0 auto;
      
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        display: none;
    }

    .video-carousel {
        min-width: none;
        width: 100%;
        height: 600px;
    }


    .video-carousel video {
        width: 160vw;
       
        overflow: hidden;
    }

    .texto-carousel {
        padding: 2rem 0rem;
    }

    .texto-carousel h3 {
        font-size: 4.5rem;
        white-space: normal;
        padding-left: 1.5rem;

    }

    .texto-carousel h4 {
        padding-left: 1.5rem;
        padding-top: 1rem;

    }

    .logo-carousel {
       right: 50px;
       top: 70px;
        height: 4rem;
        width: 4rem;
    }
}

@media (max-width: 769px) {

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 3rem;
        height: 3rem;
    }

    .carousel-control-next,
    .carousel-control-prev {
        margin: 4.5rem 6.5rem;
    }
}

@media (min-width: 766px) and (max-width: 813px) {
    .carousel-inner {
        width: 100vw;
    }

    .video-carousel {
        min-width: 100%;
        height: 600px;
    }

    .video-carousel video {
        width: 160vw;
        overflow: hidden;
    }

    .texto-carousel h4 {
        padding-top: 1rem;
        padding-left: 2.3rem;
    }

    .texto-carousel h3 {
        font-size: 6rem;
        white-space: normal;
        padding-left: 2.3rem;
    }

    .logo-carousel {
       right: 50px;
       top: 70px;
        height: 4rem;
        width: 4rem;
    }

    .carousel-control-next,
    .carousel-control-prev {
        margin: 4.5rem 50px;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 3rem;
        height: 3rem;
    }

    .texto-carousel {
        padding-top: 1rem 0;
    }   
}

@media (min-width: 813px) and (max-width: 992px) {
    .carousel-inner {
        width: 80vw;
        margin: 0 auto;
        padding: 0 auto;
        height: 100%;
    }

    .texto-carousel h4 {
        padding-top: 1rem;
        padding-left: 2.2rem;
    }

    .texto-carousel h3 {
        font-size: 5.7rem;
        white-space: normal;
        padding-left: 2.2rem;
    }

    .logo-carousel {
        right: 50px;
        top: 70px;
        height: 4rem;
        width: 4rem;
    }

    .carousel-control-next,
    .carousel-control-prev {
        margin: 4.5rem 100px;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 992px) and (max-width: 1045px) {
    .texto-carousel h4 {
        padding-top: 2rem;
    }

    .texto-carousel h3 {
        font-size: 7rem;
       white-space: normal;
    }

    .logo-carousel {
        right: 50px;
        top: 70px;
        height: 4rem;
        width: 4rem;
    }
      .carousel-control-next,
      .carousel-control-prev {
          margin: 4.5rem 80px;
      }

}

@media (min-width: 1045px) and (max-width: 1118px) {
    .texto-carousel {
        padding-top: 2.5rem;
    }

    .texto-carousel h3 {
        font-size: 6.5rem;
        white-space: nowrap;
    }

    .logo-carousel {
       right: 50px;
       top: 70px;
        height: 4rem;
        width: 4rem;
    }
     .carousel-control-next,
     .carousel-control-prev {
         margin: 4.5rem 65px;
     }
}

@media (min-width: 1119px) and (max-width: 1210px) {
    .texto-carousel h3 {
        font-size: 6.9rem;
        white-space: nowrap;
    }

    .logo-carousel {
        right: 50px;
        top: 70px;
        height: 4rem;
        width: 4rem;
    }
     .carousel-control-next,
     .carousel-control-prev {
         margin: 4.5rem 80px;
     }

}
@media (min-width: 1210px) {
    .texto-carousel h3 {
        font-size: 7.5rem;
        white-space: nowrap;
    }

    .carousel-control-next,
    .carousel-control-prev {
        margin: 4.5rem 70px;
    }
}

@media (min-width: 1317px) {
    .carousel-control-next,
    .carousel-control-prev {
        margin: 6rem 80px;
    }
}

@media (min-width: 1560px) {

    .carousel-control-next,
    .carousel-control-prev {
        margin: 6rem 220px;
    }
}



/* banner */
.banner {
    padding: 1.7rem 0;
    background-color: #45718C;
    color: #fff;
}

.banner h3 {
    font-weight: 400;
    font-size: 2.4rem;
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: normal;
}


@media (max-width: 500px) {
    .banner h3 {
        font-size: 1.6rem;
    }
}



/* footer */
footer {
    padding: 5rem 0 2rem;
    background-color: #1A2A40;
    color: #fff;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 700px;
    background-color: #45718C;
    z-index: 10;
    
}

.div-footer {
    min-width: 360px;
    min-height: 400px;
    height: 80vh;
    width: 550px;
    padding-right: 5rem;
    margin-right: 3rem;

}

.div-footer-img {
    min-width: 360px;
    position: relative;
    z-index: 999999999 !important;
    left: 50px;
    width: 550px;
    height: 80vh;    
}



.background-footer {
    position: absolute;
    background-color: #45718C;
    width: 300px;
    height: 80vh;
    z-index: 1;
}

.img-banner {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    object-position: right 0;


}


hr {
    width: 50px;
    height: 6px;
    align-self: flex-start;
    margin: 1rem 0 1.6rem 3.5rem;
    opacity: 30;
    background-color: rgba(255, 255, 255, .55);
    border: none;
}

.footer-title {
    align-self: flex-start;
    margin-left: 3.5rem;
    padding-bottom: 1rem;
}

.footer-title h4 {
    margin: 2px 0;
    font-weight: 400;
    font-size: 1.7rem;
    text-align: left;
    font-family: "Prata",
        serif;
    font-weight: 400;
}

.footer-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    padding: 0;
}

.footer-list li {
    width: 100%;
    margin: 1rem auto;
    padding: 1rem 4.5rem;
    list-style: none;
    font-size: 1.2rem;
    font-weight: 300;
    background-color: #1A2A40;
    font-family: "Roboto",
        sans-serif;
}

.footer-list li a {
    color: #fff;
    text-decoration: none;
}

.footer-list li span {
    padding-right: 2px;
}

.icono-instagram {
    width: 30px;
    height: 30px;
    margin-right: 0.8rem;
}

@media (min-width: 360px) and (max-width: 500px) {
    .div-footer{
        min-width: none;
    }
    .footer-container {
        width: 100vw;
        margin: 0;
        padding: 0;
        min-width: none;

    }

    .footer-container-img {
        width: 100vw;
        margin: 0;
        padding: 0;
        min-width: none;

    }

    .div-footer-img {
        min-width: none;
        right: 0;
        margin: 0;
        padding: 0;
        position: static;
          /* fallback for old browsers */
          background: -webkit-linear-gradient(to top, #1A2A40, #45718C);
          /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to bottom, #1A2A40, #45718C);
          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .img-banner {

        left: 0;
        margin: 0;
        padding: 0;
    }
      .background-footer {
          display: none;
      }

       .footer-list li {
         
          padding: 1rem 1.5rem ;
        
       }

}

@media (min-width: 500px) and (max-width: 824px) {
     .footer-list li {

         padding: 1rem 1.5rem;

     }

    .div-conteiner-ppal {

        margin: 0 auto;
        padding: 0;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;

    }

    .div-footer {
        text-align: center;
        height: 80vh;
        width: 70vw;
        min-width: none;
        margin: 0;
        padding: 0;
    }

    .background-footer {
        display: none;
    }


    .div-footer-img {
        min-width: none;
        position: static;
        z-index: 999999999 !important;
        margin: 0 auto;
        padding: 0;
        width: 70vw;
        height: 80vh;
        object-position: bottom 0;
        background: #1C2F45;
        background: #1A2A40;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to top, #1A2A40, #45718C);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #1A2A40, #45718C);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .footer-title {
        padding: 0 0 1.5rem;

    }

    .footer-title h4 {
        font-size: 1.5rem;
    }

  .footer-list li {
    
      padding: 1rem 1.2rem;
  }
  
}



@media (min-width: 824px) and (max-width: 925px) {
    .div-conteiner-ppal {
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .div-footer {
        min-width: none;
        min-height: 400px;
        height: 80vh;
        width: 300px;

        padding-right: 0px;
        margin-right: 0px;

    }

    .div-footer-img {
        min-width: none;
        position: relative;
        z-index: 999999999 !important;
        left: 0px;
        width: 300px;
        height: 80vh;
    }

    .footer-list li {
        padding: 1rem 1.2rem;
        
    }

}

@media (min-width: 925px) and (max-width: 1148px) {
    .div-footer {
        min-width: none;
        min-height: 400px;
        height: 80vh;
        width: 450px;
        padding-right: 20px;
        margin-right: 25px;

    }

    .div-footer-img {
        min-width: none;
        position: relative;
        z-index: 100 !important;
        left: 30px;
        width: 450px;
        height: 80vh;

    }

    .footer-list li {
        padding: 1rem 2rem;
        padding-left: 2.5rem;
    }

}


/* footer final */
.footer-container-final {
    padding: 3rem 0 0;
}

.footer-final h5 {
    font-size: 1rem;
    font-weight: 100;
}


/* pagina permiso precario */
.documento-pdf-container {
    background-color: #000;
}

.documento-pdf {
    width: 100vw;
    height: 700px;
}