@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap");

body,
html {
    height: 100%;
    width: 100%;
    font-family: "Montserrat";
}

::-webkit-scrollbar {
    display: none;
}

.icono_app {
    max-width: 80px !important;
    max-height: 80px !important;
}

/* Nav-Bar */
.navbar {
    background-color: #121212;
}
.nav-link {
    margin: 0px 10px 0px 10px;
}
.navbar-nav {
    align-items: center;
}
.nav-link:focus {
    color: #f6c824 !important;
}

.link-light-active {
    color: #f6c824 !important;
}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-link:hover {
    color: rgb(212, 212, 212) !important;
}

/* Banner Principal */

.cont-banner {
    padding: 7vh 10px 0vw;
    height: 99%;
}
.bg-image {
    background-image: url(./Recursos/Banner.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}
.banner {
    display: flex;
    justify-content: center;
    border-radius: 15px;
    height: 100%;
    width: 100%;
}

/* Texto del Banner */

.text-banner {
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: left;
}
.titulo-banner {
    font-size: 6vw;
    line-height: 0.9em;
    color: white;
}

.drop-banner {
    color: white;
    font-weight: bold;
    position: absolute;
    top: 90%;
    left: 50%;
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: left;
}
/* Contadores Inicio */

.cont-contadores {
    padding: 0.5% 10%;
}

.contadores {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.contador {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.numero {
    font-size: 6vh;
    font-weight: bold;
    color: #f6c824;
}

.nombre {
    font-size: 2em;
    font-weight: bold;
    max-width: 300px;
    text-align: center;
    line-height: 0.8em;
}

/* Pagina Texto */

.landing {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0% 10%;
}
.texto1 {
    display: flex;
    justify-content: space-between;
}

#imagenizq {
    max-width: 40vw;
    max-height: 40vw;
    border-radius: 15px;
    margin-top: 55px;
}

.texto2 {
    margin-top: 50px;
    display: flex;
    justify-content: start;
}

#rutasol {
    padding-left: 2%;
}

#img-carretera {
    max-width: 40vw;
    max-height: 40vw;
    border-radius: 15px;
    margin-top: 55px;
}

#parrafo {
    max-width: 36vw;
}

/* Galeria */

.titu-galeria {
    padding-left: 10vw;
    margin-top: 5vh;
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    width: 81vw;
    margin: 0vw 9vw 5vw 10vw;
}
.gale {
    width: 26.8vw;
    height: 26vw;
    object-fit: cover;
    margin: 0.1vw;
    border-radius: 5px;
}

/* Aliados */

.aliados {
    padding: 10vh;
    display: flex;
    justify-content: center;
}
.cont-aliados {
    background-color: #f6c824;
    height: 30vh;
    width: 85vw;
    border-radius: 15px;
}

/* Footer */
footer {
    margin-top: 10vh;
}
.cont-footer {
    background-color: #121212;
    padding: 4% 8%;
}

.foter {
    color: white;
    line-height: 1.2;
}

.copy {
    color: grey;
    font-size: smaller;
    display: flex;
    justify-content: center;
    padding: 4% 0% 0% 0%;
}

.container {
    height: 80vh;
    border-radius: 10px;
}

.cont-banners {
    padding: 7vh 10px 0vw !important;
    padding: 5px;
    height: 50%;
}
.bg-image-small {
    background-image: url(./Recursos/Banner\ small.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}
.banners {
    display: flex;
    justify-content: center;
    border-radius: 15px;
    height: 100%;
    width: 100%;
}

/* Texto del Banner */

.text-banners {
    color: white;
    font-weight: bold;
    position: absolute;
    top: 30%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: left;
}
.titulo-banners {
    font-size: 6vw;
    line-height: 0.9em;
    color: white;
}

.cont-access {
    height: 27vw;
    padding: 1vh 4vw;
}

.accesos-group {
    width: 100%;
    height: 27.5vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
}
.corpo {
    height: 13vw;
    width: 100%;
    margin-right: 1%;
    padding-bottom: 1vw;
    display: flex;
    flex-direction: column;
}

.apps {
    height: 13vw;
    width: 49%;
    padding-bottom: 1vw;
}

.access,
.nuestrasapps {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.nuestrasapps {
    height: 69%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.gestcorp {
    display: flex;
    background-color: #f0f3ff;
    min-height: 8vw;
    border-radius: 15px;
    padding: 4%;
    color: #354586;
    align-items: center;
}

.gesturn {
    display: flex;
    background-color: #fff8d7;
    /*width: 17vw;*/
    min-height: 8vw;
    border-radius: 15px;
    padding: 4%;
    color: #868245;
    align-items: center;
    font-size: 1em !important;
}

.gestcost {
    display: flex;
    background-color: #e9f6f6;
    /*width: 17vw;*/
    min-height: 8vw;
    border-radius: 15px;
    padding: 4%;
    color: #148686;
    align-items: center;
    font-size: 10px !important;
}
.webuweb {
    display: flex;
    background-color: hsl(0, 100%, 90%);
    /*width: 17vw;*/
    min-height: 8vw;
    border-radius: 15px;
    padding: 4%;
    color: #7a3434;
    align-items: center;
    font-size: 1em !important;
}

.webgt {
    display: flex;
    background-color: #d3d3d3;
    width: 18vw;
    height: 8vw;
    border-radius: 15px;
    padding: 2%;
    color: #494949;
    align-items: center;
    font-size: 1em !important;
}
#gestcorp-icon,
#gesturn-icon {
    width: 18%;
    margin-right: 2vw;
}
.app {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;*/
    background-color: #fafafa;
    color: #121212;
    width: 22%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    margin: 0 1vh;
}

.filapp {
    display: flex;
    width: 100%;
}

.logo-apps {
    height: 50%;
}
.logo-gt {
    width: 50%;
}

#titu-herramientas {
    color: #9c9c9c;
}
a {
    text-decoration: none !important;
}

.cont-condiciones {
    padding: 1vw 4vw;
    height: 40vh;
    background-color: #fff;
    margin-bottom: 8vw;
}

.condicioness {
    padding-left: 4vh;
}

.cont-info {
    /*height: 35vh;*/
    padding: 0vw 4vw;
}

.info {
    padding: 1vw;
    height: 50%;
}

.wrapper {
    display: flex;
    padding: 0.5vw;
    overflow-x: auto;
    /*max-height: 285px;*/
    flex-wrap: wrap;
}

.wrapper::-webkit-scrollbar {
    width: 0;
}

#pdfs {
    height: 260px;
    min-width: 180px;
    border-radius: 10px;
    margin: 10px;
}

._df_book-cover {
    background-color: transparent !important;
    box-shadow: none !important;
}

h4 {
    font-size: large !important;
}

#drop,
.drop-banner {
    height: 25px !important;
    width: 40px;
    justify-content: center;
}

.modal-lg {
    max-width: 90%;
}

.modal-dialog {
    max-height: 90vh;
}

.modal-img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Media Querys */

@media only screen and (max-width: 1000px) {
    .titulo-banner,
    .titulo-banners {
        font-size: 10vw !important ;
        line-height: 0.9em;
        color: white;
        transform: translate(0%, -50%) !important;
        display: flex;
        flex-direction: column;
    }

    .contadores {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .contador {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5vw;
    }

    .texto1 {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    .texto2 {
        margin-top: 50px;
        display: flex;
        flex-direction: column-reverse;
        width: 100% !important;
    }

    #parrafo {
        min-width: 80vw;
        margin: 0px;
    }

    #imagenizq,
    #img-carretera {
        max-width: 80vw;
        max-height: 80vw;
        border-radius: 15px;
        margin-top: 15px;
    }

    .titu-galeria {
        padding-left: 10vw;
        margin-top: 6vw;
    }
    .galeria {
        display: flex;
        flex-wrap: wrap;
        width: 81vw;
        margin: 0vw 9vw 5vw 10vw;
    }
    .gale {
        width: 40vw;
        height: 40vw;
        object-fit: cover;
        margin: 0.1vw;
        border-radius: 5px;
    }

    .aliados {
        padding: 5vh 0vh;
    }
    .cont-aliados {
        background-color: #f6c824;
        height: 20vh;
        width: 100vw;
        border-radius: 0px;
    }

    .cont-access {
        height: 65% !important;
        padding: 1vh 4vw;
    }

    .accesos-group {
        width: 100%;
        height: 100%;
        padding: 2vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .corpo {
        height: 35% !important;
        width: 100% !important;
        margin-right: 0% !important;
        margin-left: 0% !important;
    }
    .apps {
        height: 45% !important;
        width: 100% !important;
        margin-right: 0% !important;
        margin-left: 0% !important;
    }
    .app {
        /* height: 10vh !important;
        width: 42vw !important;
        margin-left: 0% !important;
        padding-bottom: 1vw;
        margin-top: 1vw !important;*/
    }
    .logo-apps {
        height: 45%;
    }
    .logo-gt {
        width: 15%;
    }

    .nuestrasapps,
    .access {
        height: 100% !important;
        width: 88vw !important;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .gestcorp {
        display: flex;
        background-color: #f0f3ff;
        /*height: 10vw !important;*/
        border-radius: 5px !important;
        padding: 4%;
        color: #354586;
        align-items: center;
    }

    .gesturn {
        display: flex;
        background-color: #fff8d7;
        /*width: 42vw !important;*/
        /*height: 10vw !important;*/
        border-radius: 5px !important;
        padding: 4%;
        color: #868245;
        align-items: center;
    }

    .gestcost {
        display: flex;
        background-color: #e9f6f6;
        /*width: 42vw;*/
        /*height: 10vw;*/
        border-radius: 5px;
        padding: 4%;
        color: #148686;
        align-items: center;
        font-size: 1em !important;
        margin-top: 1vh;
    }
    .webuweb {
        display: flex;
        background-color: hsl(0, 100%, 90%);
        /*width: 42vw;*/
        /*height: 10vw;*/
        border-radius: 5px;
        padding: 4%;
        color: #7a3434;
        align-items: center;
        font-size: 1em !important;
        margin-top: 1vh;
    }

    .webgt {
        display: flex;
        background-color: #fff5f7;
        width: 42vw;
        height: 10vw;
        border-radius: 5px;
        padding: 4%;
        color: #fc6078;
        align-items: flex-start;
        margin-top: 1vh;
    }

    h4 {
        font-size: medium !important;
    }
    .cont-condiciones {
        padding: 5vw 4vw;
        height: 80vh;
        margin-bottom: 30vh !important;
        margin-top: 0px !important;
    }

    .condicioness {
        padding-left: 1vh;
        margin-bottom: 40vh !important;
    }

    #drop,
    .drop-banner {
        height: 25px !important;
        width: 40px;
    }
}

/* Media Querys */

@media only screen and (max-width: 400px) {
    #drop,
    .drop-banner {
        height: 25px !important;
        width: 40px;
    }
    .titulo-banner,
    .titulo-banners {
        font-size: 10vw !important ;
        line-height: 0.9em;
        color: white;
        transform: translate(0%, -50%) !important;
        display: flex;
        flex-direction: column;
    }

    .contadores {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .contador {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5vw;
    }

    .texto1 {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    .texto2 {
        margin-top: 50px;
        display: flex;
        flex-direction: column-reverse;
        width: 100% !important;
    }

    #parrafo {
        min-width: 80vw;
        margin: 0px;
    }

    #imagenizq,
    #img-carretera {
        max-width: 80vw;
        max-height: 80vw;
        border-radius: 15px;
        margin-top: 15px;
    }

    .titu-galeria {
        padding-left: 10vw;
        margin-top: 6vw;
    }
    .galeria {
        display: flex;
        flex-wrap: wrap;
        width: 81vw;
        margin: 0vw 9vw 5vw 10vw;
    }
    .gale {
        width: 40vw;
        height: 40vw;
        object-fit: cover;
        margin: 0.1vw;
        border-radius: 5px;
    }

    .aliados {
        padding: 5vh 0vh;
    }
    .cont-aliados {
        background-color: #f6c824;
        height: 20vh;
        width: 100vw;
        border-radius: 0px;
    }
    .cont-access {
        height: 1000px !important;
        padding: 1vh 4vw;
    }
    .accesos-group {
        width: 100%;
        height: 75%;
        padding: 2vw;
        display: flex;
        flex-direction: column;
    }

    .corpo {
        height: 200px !important;
        width: 100% !important;
        margin-right: 0% !important;
        margin-left: 0% !important;
    }
    .apps {
        height: 30% !important;
        width: 100% !important;
        margin-right: 0% !important;
        margin-left: 0% !important;
    }

    .app {
        height: 10vh !important;
        width: 42vw !important;
        margin-left: 0% !important;
        padding-bottom: 1vw;
        margin-top: 6vw !important;
    }

    .logo-apps {
        height: 35%;
    }
    .logo-gt {
        width: 30%;
    }

    .access {
        height: 80% !important;
        width: 100% !important;
        display: flex;
        justify-content: flex-start;
    }

    .nuestrasapps {
        height: 100% !important;
        width: 88vw !important;
        display: flex;
        flex-wrap: wrap;
    }

    .gestcorp {
        display: flex;
        background-color: #f0f3ff;
        /*height: 24vw !important;*/
        border-radius: 5px !important;
        padding: 4%;
        /*margin: 1vh 0vh;*/
        color: #354586;
        align-items: center;
    }

    .gestcost {
        display: flex;
        background-color: #e9f6f6;
        /*width: 95%;*/
        /*height: 24vw;*/
        border-radius: 5px;
        padding: 4%;
        color: #148686;
        align-items: center;
        font-size: 1em !important;
        margin-top: 1vh;
    }
    .webuweb {
        display: flex;
        background-color: hsl(0, 100%, 90%);
        /*width: 95%;*/
        /*height: 24vw;*/
        border-radius: 5px;
        padding: 4%;
        color: #7a3434;
        align-items: center;
        font-size: 1em !important;
        margin-top: 1vh;
    }

    .webgt {
        display: flex;
        background-color: #fff5f7;
        width: 95%;
        height: 24vw;
        border-radius: 5px;
        padding: 4%;
        color: #fc6078;
        align-items: center;
        font-size: 1em !important;
        margin-top: 1vh;
    }

    .gesturn {
        display: flex;
        background-color: #fff8d7;
        /*width: 95% !important;*/
        /*height: 24vw !important;*/
        border-radius: 5px !important;
        padding: 4%;
        color: #868245;
        align-items: center;
    }

    h4 {
        font-size: medium !important;
    }

    .cont-condiciones {
        padding: 10vw 4vw;
        height: 170vh;
        margin-bottom: 1vw;
    }

    .condicioness {
        padding-left: 1vh;
        margin-bottom: 40vh !important;
    }
}