@import url('../css/fonts.css');

*{
    margin: 0;
    padding: 0;
}

html{
    width: 100%;
    height: 100%;
}

#nosotros{
    position: relative;
    background: url("../img/nosotrosFondo01.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10em 0;
    overflow: hidden;
}

#nosotros h2{
    color: #fdb71e;
    font-family: 'EsphimereSemiBold';
    font-size: 4em;    
}
/**************Quienes somos?***************/
#somos{
    position: relative;
    padding: 9em 0;
    overflow: hidden;
    text-align: center;
}
#somos h3{
    color: #fdb71e;
    font-family: 'EsphimereSemiBold';
    font-size: 3em;
    margin-bottom: 1em;
}
.somos-text p{
    color: #006ed1;
    font-size: 20px;
}

/*****************Nuestros valores********************/
#valores{
    position: relative;
    overflow: hidden;
}
.valores-tittle{
    width: 84%;
    height: 110px;
    background: #fdb71e;
    position: relative;
    z-index: -3;
    border-radius: 0 8px 8px 0;
    margin-bottom: 110px;
}
.valores-tittle h3{
    color: #ffffff;
    font-family: 'EsphimereSemiBold';
    font-size: 2.7em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6%;
}
.valores-content{
    position: relative;
    margin: 0;
    margin-bottom: 150px;
    width: 100%;
}
.valor-publicidad,.valor-etica,.valor-mejora,.valor-equipo,.valor-vocacion{
    position: relative;
    height: 100%;
    width: 20%;
}
#valores img{
    width: 100%;
    height: auto;
}

.valor-image{
    overflow: hidden;
}

.valor-image img{
    transition: 1s;
    width: 100%;
}

.valor-texts{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #ffffff;
    transition: .5s;
    opacity: 1;
}
.valor-texts h4{
    font-family: 'EsphimereSemiBold';
    font-size: 2.5em;
}
/*********************************************/
@media screen and (min-width:1800px){
    .valores-tittle h3{
        left: 390px!important;
    }  
}
@media screen and (min-width:1500px){    
    .valores-tittle h3{
        left: 17%;
    }  
}
@media screen and (max-width:1500px){
    #valores img {
        width: max-content;
        position: relative;
        float: right;
    }
}
@media screen and (max-width:1199px){
    /************Nuestros valores**************************/
    .valor-texts h4{
        font-family: 'EsphimereSemiBold';
        font-size: 2em;
    }
}
@media screen and (max-width:991px){
    .somos-text p {
        font-size: 18px;
    }
    .somos-text p:nth-child(1) {
        width: 90%;
    }
    .somos-text p:nth-child(2) {
        width: 95%;
    }
    /*****************Nuestros valores********************/
    .valor-publicidad, .valor-etica, .valor-mejora{
        width: 33.3%;
    }
    .valor-equipo, .valor-vocacion {
        width: 33.3%;
        left: 16.65%;
    }
}
@media screen and (max-width: 767px){
    #somos h3 {
        font-size: 2.5em;
    }
    .somos-text p {
        font-size: 16px;
    }
    /*****************Nuestros valores********************/
    .valores-tittle {
        height: 90px;
        width: 75%;
    }
    .valores-tittle h3 {
        font-size: 2em;
    }
}
@media screen and (max-width:575px){
    .somos-text p {
        font-size: 14px;
    }
    /*****************Nuestros valores********************/    
    .valor-publicidad, .valor-etica, .valor-mejora,.valor-equipo{
        width: 50%;
    }
    .valor-equipo{
        left: inherit;
    }
    .valor-vocacion {
        width: 50%;
        left: 25%;
    }

    .valores-content :nth-child(1) {order: 1;}
    .valores-content :nth-child(2) {order: 2;}
    .valores-content :nth-child(3) {order: 4;}
    .valores-content :nth-child(4) {order: 3;}
    .valores-content :nth-child(5) {order: 5;}
}
@media screen and (max-width:500px){
    /*****************Nuestros valores********************/
    #valores img {
        width: 100%;
        float: none;
    }
    .valores-content {
        margin-bottom: 30px;
    }
    .valor-publicidad, .valor-etica, .valor-mejora,.valor-equipo,.valor-vocacion{
        width: 100%;
    }
    .valor-vocacion {
        left: inherit;
    }

    .valores-content :nth-child(1) {order: 1;}
    .valores-content :nth-child(2) {order: 2;}
    .valores-content :nth-child(3) {order: 3;}
    .valores-content :nth-child(4) {order: 4;}
    .valores-content :nth-child(5) {order: 5;}
}
@media screen and (max-width:400px){
    #somos h3 {
        font-size: 2em;
    }
    .somos-text p:nth-child(1), .somos-text p:nth-child(2) {
        width: 100%;
    }
    /*****************Nuestros valores********************/
    .valores-tittle h3 {
        font-size: 1.6em;
    }
}