body{
    font-family: 'Libre Franklin', sans-serif;
    color: #253948;
    overflow-x: hidden;
    font-size: 1.2vw;
}

html{
    scroll-behavior: smooth;
}

nav{
    background-color: rgba(241, 241, 241, 0.3);
}

.nav-img{
    width: 6vw;
}

.navbar-nav{
    padding-left: 2rem !important;
    padding-top: 2rem;
} 

nav a{
    color: #253948 !important;
    font-weight: 400 !important;
}
nav a:hover{
    font-weight: 600 !important;
}

nav a :visited{
    color: #B48500;
}

.img-idioma{
    width: 1.8vw;
}

.idioma{
    display: flex;
    flex-direction: row;

}

.español{
    padding-left: 0px !important;
}
.no-active{
    filter: grayscale(100%);
}

.no-active:hover{
    filter: grayscale(0%);
}

video{
    width: 100%;
}
section{
    padding: 5vw;
    border-bottom: solid 4px #B48500;
}
/* --------QUIENES SOMOS------- */


h2{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
}

.somos-text{
    margin-top: 5vw;
}

.imagotipo{
    margin-bottom: 3vw;
}

/* ---------FILOSOFÍA------- */

.tarjetas{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.tarjetas div{
    width: 10vw;
    text-align: center;
}

.tarjetas img{
    width: 4vw;
    margin-top: 3vw;
    margin-bottom: 1.5vw;
}

.titulo{
    font-weight: 700;
    font-size: 1.5vw;
}

/* ---------EQUIPO------- */
.equipo h2{
    margin-bottom: 3vw !important;
}

.tarjetas-equipo{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.tarjetas-equipo div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarjetas-equipo img{
  width: 1.5vw;
  margin-bottom: 1vw;
}

a{
    color: #253948;
    text-decoration: none;
    font-weight: 600;
}

a:hover{
    color: #B48500;
 
}

.julian_foto a, .josemanuel_foto a, .pedro_foto a{
    height: 18vw;
    width: 18vw;
}
.julian_foto{
    width: 18vw;
    height: 18vw;
    margin-bottom: 2vw;
    background-image: url(../img/Julian2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.julian_foto:hover{
    background-image: url(../img/Julian.jpg);
}

.josemanuel_foto{
    width: 18vw;
    height: 18vw;
    margin-bottom: 2vw;
    background-image: url(../img/Jose-Manuel.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.josemanuel_foto:hover{
    background-image: url(../img/Josemauel2.jpg);
}

.pedro_foto{
    width: 18vw;
    height: 18vw;
    margin-bottom: 2vw;
    background-image: url(../img/Pedro-Mora.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pedro_foto:hover{
    background-image: url(../img/Pedro2.jpg);
}

/* ---------PORTFOLIO------- */

.portfolio-mob{
    display: none;
}
.portfolio{
    color: #B48500;
}

.linea{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 3vw;
}

.linea div{
    width: 18vw;
    height: 12vw;
}

.aganova{
    background-image: url(../img/portfolio/aganova.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aganova:hover{
    background-image: url(../img/portfolio/aganoba2.svg);
    cursor: pointer;
}

.fugaqua{
    background-image: url(../img/portfolio/fugaqua.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fugaqua:hover{
    background-image: url(../img/portfolio/fugaqua2.svg);
    cursor: pointer;
}
.passnfly{
    background-image: url(../img/portfolio/passsfly.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.passnfly:hover{
    background-image: url(../img/portfolio/passnfly2.svg);
    cursor: pointer;
}
.talentclue{
    background-image: url(../img/portfolio/talentclue.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.talentclue:hover{
    background-image: url(../img/portfolio/talenclue2.svg);
    cursor: pointer;
}
.nootric{
    background-image: url(../img/portfolio/notric.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nootric:hover{
    background-image: url(../img/portfolio/nootric2.svg);
    cursor: pointer;
}
.sonosuite{
    background-image: url(../img/portfolio/sonosuite.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sonosuite:hover{
    background-image: url(../img/portfolio/sonosuite2.svg);
    cursor: pointer;
}

.wwm{
    background-image: url(../img/portfolio/wwm.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wwm:hover{
    background-image: url(../img/portfolio/wwm2.svg);
    cursor: pointer;
}
.global{
    background-image: url(../img/portfolio/global.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.global:hover{
    background-image: url(../img/portfolio/tgp_esp1\ .svg);
    cursor: pointer;
}
.supertech{
    background-image: url(../img/portfolio/supertech.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.supertech:hover{
    background-image: url(../img/portfolio/supertech2_2.svg);
    cursor: pointer;
}
.mox{
    background-image: url(../img/portfolio/mox.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mox:hover{
    background-image: url(../img/portfolio/mox_1.svg);
    cursor: pointer;
}
.repscan{
    background-image: url(../img/portfolio/repscan.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.repscan:hover{
    background-image: url(../img/portfolio/repscan2.svg);
    cursor: pointer;
}

.logistiko{
    background-image: url(../img/portfolio/logistiko\ .jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.logistiko:hover{
    background-image: url(../img/portfolio/logistiko_esp\ .svg);
    cursor: pointer;
}

/* ---------------PORTFOLIO EN INGLES------------ */



.aganova-ing:hover{
    background-image: url(../img/ingles/aganova_2.svg);
    cursor: pointer;
}


.fugaqua-ing:hover{
    background-image: url(../img/ingles/fugaqua_1.svg);
    cursor: pointer;
}

.passnfly-ing:hover{
    background-image: url(../img/ingles/pasnnfly.svg);
    cursor: pointer;
}
.talentclue-ing:hover{
    background-image: url(../img/ingles/talentclue_1.svg);
    cursor: pointer;
}
.nootric-ing:hover{
    background-image: url(../img/ingles/nootric.svg);
    cursor: pointer;
}
.sonosuite-ing:hover{
    background-image: url(../img/ingles/sonosuite_2.svg);
    cursor: pointer;
}

.wwm-ing:hover{
    background-image: url(../img/ingles/wwm_1.svg);
    cursor: pointer;
}
.global-ing:hover{
    background-image: url(../img/ingles/tgp_ing.closed\ .svg);
    cursor: pointer;
}
.supertech-ing:hover{
    background-image: url(../img/ingles/supertech_2.svg);
    cursor: pointer;
}
.mox-ing:hover{
    background-image: url(../img/ingles/mox_2.svg);
    cursor: pointer;
}
.repscan-ing:hover{
    background-image: url(../img/ingles/respcan.svg);
    cursor: pointer;
}
.logistiko-ing:hover{
    background-image: url(../img/ingles/logitiko_ing\ .svg);
    cursor: pointer;
}

footer{
    padding: 3vw;
    display: flex;
    justify-content: center;
}

footer img{
    width: 30vw;
}

/* -----------MEDIAQUERIES---------- */

@media (max-width: 768px) {
    body{
        font-size: 1.5vw;
    }
  
}


@media screen and (max-width: 425px) {
    body{
        font-size: 3.5vw;
        padding: 0px !important;
    }

    header{
        padding-top: 10vw;
    }

    nav{
        background-color: rgb(255, 255, 255);
    }
    .navbar-toggler{
        background-color:#f8f9fa!important;
        border: none !important;
    }

    .nav-img{
        width: 12vw;
    }

    .img-idioma{
        width: 4vw;
    }

    .español{
        margin-left: 10vw;
    }
    
    h2{
        margin-bottom: 5vw !important;
    }

    .titulo{
        font-size: 4vw;
    }

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

    .tarjetas img{
        width: 15vw;
    }
    .tarjetas div{
        width: 50vw;
    }

    .tarjetas-equipo{
        flex-direction: column;
        justify-content: center;
    }

    .julian_foto, .josemanuel_foto, .pedro_foto{
        height: 45vw;
        width: 45vw;
    }
    .tarjetas-equipo img{
        width: 5vw;
    }
    .julian_foto a, .josemanuel_foto a, .pedro_foto a {
        height: 45vw !important;
        width: 45vw !important;
    }
    .linea div {
        width: 24vw;
        height: 17vw;
    }
    .portfolio{
        display: none;
    }
    .portfolio-mob{
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 2vw;
    }
    .linea-mob{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 5vw;
        width: 95vw;
        height: 40vw;

    }
    .linea-mob div{
        width: 40vw;
        height: 20vw;
    }
    
    .linea-mob p{
        margin-top: 1vw;
        margin-bottom: 0px;
        font-size: 2.8vw;
        font-weight: 500;
        text-align: center;
    }
    .mob{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30vw;
    }

    .aganova-mob{
        background-image: url(../img/portfolio/aganova.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .fugaqua-mob{
        background-image: url(../img/portfolio/fugaqua.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: scale(1.1);
    }
    .passnfly-mob{
        background-image: url(../img/portfolio/passsfly.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .talentclue-mob{
        background-image: url(../img/portfolio/talentclue.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: scale(1.1);
    }
    .nootric-mob{
        background-image: url(../img/portfolio/notric.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sonosuite-mob{
        background-image: url(../img/portfolio/sonosuite.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .wwm-mob{
        background-image: url(../img/portfolio/wwm.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .global-mob{
        background-image: url(../img/portfolio/global.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .supertech-mob{
        background-image: url(../img/portfolio/supertech.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .logistiko-mob{
        background-image: url(../img/portfolio/logistiko\ .jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
   b{
    color: #B48500;
    font-weight: 700;
   }
    .mox-mob{
        background-image: url(../img/portfolio/mox.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .repscan-mob{
        background-image: url(../img/portfolio/repscan.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    footer img{
        width: 45vw;
    }
}

@media screen and (min-width: 2560px) {
    .navbar{
        width: 330px !important;
    }
}