*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
/*Variables*/
:root{
    /*Banner*/
    --titles-font-family: 'Fredoka One', sans-serif ;
    --height-banner: 60vw;
    --forma-del-banner: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0% 0);
    --banner-title-margin-top: 12vw;
    --banner-fontsize-h4:4vw;
    --banner-fontsize-h1:7vw;
    --titles-banner-height:20vw;
    --titles-baner-width:55%;

    /*Historia*/
    --font-family-normal: 'Segoe UI' , sans-serif;

}

/*Mobile first*/
main{
    margin-top:-10vw;
    overflow: hidden;
   
}

.banner-principal{
    display: flex;
    height: auto;
    margin-top: 10vh;
   
}
.contenedor-banner{
    width: 100vw;
    min-height: var(--height-banner);
    background-image:url(../recursos/banner-nosotros.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    clip-path: var(--forma-del-banner);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--titles-font-family);
   
}

.contenedor-banner:before{
    content: "";
    width: 100%;
    height: var(--height-banner);
    background: linear-gradient( rgb(195,34,13), rgb(253,232,15));
    opacity: .5;
    position: absolute;
    z-index: -2;
} 



.banner-titulos{
    display: flex;
    color: white;
    flex-direction: column;
    align-items: center;
    margin-top: var(--banner-title-margin-top);
    height: var(--titles-banner-height);
    width: var(--titles-baner-width);
   
}


.banner-titulos h4{
    font-size: var(--banner-fontsize-h4);
}

.banner-titulos h1{
    font-size: var(--banner-fontsize-h1);
}

/*Historia de la empresa*/

.container-historia-empresa{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-historia-titulo{
    font-family: var(--titles-font-family);
    width: 100%;
    height: 6vh;
    color: rgb(195,34,13);
    display: flex;
    justify-content: center;
    
}

.container-historia-titulo h2{
    font-size: 6vw;
}

.container-historia{
    display: flex;
    justify-content: center;
    width: 80%;
    font-family: var(--font-family-normal);
    color: gray;
    margin-bottom: 4vh;
}

/*Mision y vision*/
.container-vision-y-mision{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: auto;
    background-image: url(../recursos/bg-vision-y-vision.jpg);
    background-size: cover;
}

.target{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid;
    border-radius: 20px;
    background-color: rgb(128, 128, 128, .6);
    color: whitesmoke;
    margin: 3vh 0;
}

.target h4{
    font-family: var(--titles-font-family);
    color: rgb(253,232,15);
}
.target p{
    text-align: center;
    width: 85%;
}

/*Slider de marcas*/
.initial-title-nosotros{
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
}

.initial-title-nosotros h1{
    text-align: center;
    font-family:'Fredoka One', sans-serif ;
    color: rgb(195,34,13);
    font-size:6vw ;
    width: 90%;
    margin-top: 3vh;
}

.initial-title-nosotros h4{
    text-align: center;
    font-family: 'Quattrocento Sans';
    color: gray;
    font-size: 5vw;
    width: 70%;
    margin-bottom: 3vh;
}

.container-seccion-marcas{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider-marcas{
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-radius: 20px;
    margin: 8vw 0;
    width: 70vw;
    height: auto;
    overflow: hidden;
    
}
.slider-marcas .contendor{
    width: 100%;
    height: auto;   
}

.slider-marcas .slider{
    width: 2000px;
    height: 80px;

    background-image: url(../recursos/slider-marcas.png);
    background-size:cover;

    animation: slider 20s infinite linear;
}

@keyframes slider{
    to{
        background-position: 2000px;
    }
}

.contenedor-tiempo-mercado{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 8vh;
}

.contenedor-tiempo-mercado img{
    margin: 5vh 0;
    width: 30%;
}




/*----Diseño landscape y tablets---*/
@media screen and (min-width: 500px){

    :root{
        /*Banner*/
        --titles-font-family: 'Fredoka One', sans-serif ;
        --height-banner: 60vw;
        --forma-del-banner: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0% 0);
        --banner-title-margin-top: 12vw;
        --banner-fontsize-h4:4vw;
        --banner-fontsize-h1:7vw;
        --titles-banner-height:20vw;
        --titles-baner-width:55%;
    
        /*Historia*/
        --font-family-normal: 'Segoe UI' , sans-serif;

    }

    .banner-principal{
        margin-top: 0%;
    }

    .container-historia-empresa{
        height: auto;
    }
    
    .container-historia-titulo{
        width: 100%;
        height: auto;
        margin-bottom: 3vw;
        
    }

    .container-historia-titulo h2{
        font-size: 3vh;
    }
    
    .container-historia{
        height: auto;
    }

    /*Mision y vision*/
.container-vision-y-mision{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 60vw;
    background-image: url(../recursos/bg-vision-y-vision.jpg);
    background-size: cover;
    padding: 4vw 0;
}

.target{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid;
    border-radius: 20px;
    background-color: rgb(128, 128, 128, .6);
    color: whitesmoke;
}

.target h4{
    font-family: var(--titles-font-family);
    color: rgb(253,232,15);
    margin: 3vw 0;
}
.target p{
    text-align: center;
    width: 85%;
}

.initial-title-nosotros{
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
}

.initial-title-nosotros h1{
    text-align: center;
    font-family:'Fredoka One', sans-serif ;
    color: rgb(195,34,13);
    font-size:3vw ;
    width: 90%;
    margin-top: 3vh;
}

.initial-title-nosotros h4{
    text-align: center;
    font-family: 'Quattrocento Sans';
    color: gray;
    font-size: 2vw;
    width: 70%;
    margin-bottom: 3vh;
}

.contenedor-tiempo-mercado{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 4vh;
}

.contenedor-tiempo-mercado img{
    margin-top:4vh;
    width: 30%;
}


}

/*Diseño para pantalla de 1024px en adelante hasta 1900px */

@media screen and (min-width: 1024px) {
    
    

    .container-historia-empresa{
        height: auto;
        margin-top: -6vw;
        border: 1px;
    }
    
    .container-historia-titulo{
        width: 100%;
        height: auto;
        
        margin-bottom: 3vw;
        
    }

    .container-historia-titulo h2{
        font-size: 5vh;
    }
    
    .container-historia{
        height: auto;
        width: 55%;
        font-size: 3vh;
    }
    
    .container-vision-y-mision{
        flex-direction: row;  
        justify-content: space-around;  
        height: auto;
    }

    .target{
        width: 30%;
    }

    .target h4{
        font-family: var(--titles-font-family);
        font-size: 4vh;
    }
    
    .target p{
        text-align: center;
        width: 85%;
        font-size: 3vh;
    }

    .container-seccion-marcas{
        width:100%;
    }

    .container-seccion-marcas .initial-title h1{
        font-size: 3vh;
    }

    .container-seccion-marcas .initial-title h4{
        font-size: 4vh;
    }

}

@media screen and (min-width: 1024px) and (min-height: 1300px){
    .container-historia-titulo h2{
        font-size: 4vw;
    }

    .container-historia-empresa{
        margin: 4vh 0;
    }
    
    .container-historia{
        height: auto;
        width: 55%;
        font-size: 2vw;
    }

    .target{
        width: 40%;
    }

    .target h4{
        font-family: var(--titles-font-family);
        font-size: 3vw;
    }
    
    .target p{
        text-align: center;
        width: 85%;
        font-size: 2vw;
    }
}



@media screen and (min-width: 1024px){
   .container-vision-y-mision{
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
   } 

   .container-historia{
       width: 40%;
       margin-bottom: 15vh;
   }
}

@media screen and (min-width: 1800px) {
    
    :root{
        /*Banner*/
        --titles-font-family: 'Fredoka One', sans-serif ;
        --height-banner: 60vw;
        --forma-del-banner: polygon(50% 0%, 100% 0, 100% 35%, 50% 50%, 0 35%, 0% 0);
        --banner-title-margin-top: 12vw;
        --banner-fontsize-h4:2vw;
        --banner-fontsize-h1:4vw;
        --titles-banner-height:20vw;
        --titles-baner-width:55%;
    
        /*Historia*/
        --font-family-normal: 'Segoe UI' , sans-serif;

    }

    .container-historia-empresa{
        margin: 4vh 0;
    }
    
    

    .container-historia-empresa{
        height: auto;
        margin-top: -19vw;
        border: 1px;
    }
    
    .container-historia-titulo{
        width: 100%;
        height: auto;
        
        margin-bottom: 3vw;
        
    }

    .container-historia-titulo h2{
        font-size: 2vw;
    }
    
    .container-historia{
        height: auto;
        width: 35%;
        font-size: 1vw;
        margin-bottom: 8vw;
    }
    
    .container-vision-y-mision{
        flex-direction: row;  
        justify-content: center;  
        height: auto;
    }

    .target{
        width: 20%;
        margin: 2vw 4vw;
    }

    .target h4{
        font-family: var(--titles-font-family);

        font-size: 2vw;
    }
    
    .target p{
        text-align: center;
        width: 65%;
        font-size: 1vw;
    }

    .container-seccion-marcas{
        width:100%;
    }

    .container-seccion-marcas .initial-title h1{
        font-size: 3vw;
    }

    .container-seccion-marcas .initial-title h4{
        
        font-size: 2vw;
    }

    .slider-marcas{
        width: 50%;
    }
}