img{
    height:auto;
    max-width:100%;
    width:auto;
}
body{
    background:#151A25;
}
.reset{
    margin:0;
    padding:0;
}
.flex{display:flex;}
.grid{display:grid;}
.link{
    color:#151A25;
    text-decoration:none;
}
.link:hover{
    color:#fff;
}
.body{
    color:#999;
    font-family:'Roboto', sans-serif;
    font-size:100%;
}
.contenedor{
    grid-template-columns:100%;
    grid-template-rows:repeat(5, auto);
    grid-template-areas:
        "cabezote"
        "banner"
        "conte"
        "pie"
        "izq"
        "der";        
    width:100vw;
}
.cabezote{
    align-items:flex-start;
    grid-area:cabezote;
    position:relative;
    justify-content:space-between;
}
.ancho100{
    width:100%;
}
.encabezado{
    position:relative;
}
.logo{
    width:65%;
    position:absolute;
    top:0;
    bottom:0;
    right:15px;
    left:0;
    margin:auto;
    padding:30px 0;
}
.dotaciones{
    position:absolute;
    color:#fff;
    font-weight:100;
    font-size:11px;
    text-align:right;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    padding:105px 62px 20px 10px;
}
.menu-ham{
    margin:8px 10px 10px 10px;
    right:0;
    width:10%;
    position:absolute;
}
.linea-ham{
    border:#333;
    border-top:1px solid #fff;
    margin-bottom:1px;
    border-radius:30%;
}
.menu{
    opacity:0.96;
    color:#151A25;
    left:0;
    right:0;
    font-size:14px;
    font-weight:300;
    position:absolute;
    padding:0;
    list-style:none;
    text-transform:uppercase;
    top:16%;
    display:none;
}
.menu-item{
    background:#fff;
    color:#151A25;
    border-bottom:1px solid #151A25;
    padding:6px 0;
    text-align:center;
}
.menu-item:hover{
    background:#151A25;
    color:#fff;    
}
.ejemenu{
    background:#151A25;
    color:#fff;
    list-style:none;
    padding:0;
    display:none;
    position:absolute;
    width:100%;
}
.ejeitem{
    text-align:center;
    padding:6px 0;
    border-top:1px solid #fff;;
    width:100%;
}
.ejeitem:hover{
    background:#fff;
    color:#151A25; 
}
.indumenu{
    background:#151A25;
    color:#fff;
    list-style:none;
    padding:0;
    display:none;
    position:absolute;
    width:100%;
}
.induitem{
    text-align:center;
    padding:6px 0;
    border-top:1px solid #fff;;
    width:100%;
}
.induitem:hover{
    background:#151A25;
    color:#fff; 
}
.sermenu{
    color:#151A25;
    list-style:none;
    padding:0;
    display:none;
    position:absolute;
    width:100;
}
.seritem{
    background:#fff;
    text-align:center;
    border-bottom:1px solid #151A25;
    width:100%;
}
.seritem:hover{
    background:#151A25;
    color:#fff; 
}
.mermenu{
    background:#151A25;
    color:#fff;
    list-style:none;
    padding:0;
    display:none;
    position:absolute;
    width:100%;
}
.meritem{
    text-align:center;
    padding:6px 0;
    border-top:1px solid #fff;;
    width:100%;
}
.meritem:hover{
    background:#fff;
    color:#151A25; 
}
.azul{
    color:#fff;
    right:100%;
    left:100%;
    padding:20px 25px;
}
.firma{
    width:70%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:8%;
}
.texto-azul{
    text-align:center;
    top:5%;
    font-size:13px;
    font-weight:100;
}
.mujer{
    width:100%;
    position:relative;
}
.productos{
    color:#F38634;
    position:absolute;
    font-size:26px;
    font-weight:300;
    right:5%;
    bottom:95%;
    top:3%;
}
.listado{
    color:#151A25;
    text-align:right;
    top:12%;
    right:5%;
    left:0;
    position:absolute;
    font-size:10px;
    font-weight:300;
    list-style:none;
}
.listado-item{
    padding:1px 0;
}
.pie{
    grid-area:pie;
    position:relative;
}
.texto-pie{
    color:#fff;
    font-weight:100;
    font-size:10px;
    padding:4px 0;
}
.col-izq{
    text-align:center;
    grid-area:izq;
    position:absolute;
    width:100%;
    padding:5px 0;
}
.col-der{
    text-align:center;
    grid-area:der;
    position:absolute;
    width:100%;
    padding:41px 0 0;
}
.contacto{
    color:#fff;
}
/*pagina ejecutivo mujer*/
.contenido{
    grid-template-columns:100%;
    grid-template-rows:repeat(10, auto);
    grid-template-areas:
        "cabeza"
        "sastre"
        "sasizq"
        "sasder"
        "blusa"
        "bluizq"
        "bluder"
        "zapato"
        "zapizq"
        "zapder"
        "pie"
        "pieizq"
        "pieder";        
    width:100vw;
}
.enlace{
    color:#fff;
    text-decoration:none;
}
.enlace:hover{
    color:#151A25;
}
.inicio{
    width:50%;
    top:5%;
    right:5%;
    position:absolute; 
    visibility:hidden;
}
.cabeza{
    align-items:flex-start;
    grid-area:cabeza;
    position:relative;
    justify-content:space-between;
}
.sastre{
    grid-area:sastre;
    padding:15px 0 5px 0px;
}
.blusa{
    grid-area:blusa;
    padding:5px 0 5px 0px;
}
.zapato{
    grid-area:zapato;
    padding:5px 0 5px 0px;
}
.ham-eje{
    margin:8px 10px 10px 10px;
    right:0;
    width:10%;
    position:absolute;
}
.ejeham{
    border:#333;
    border-top:2px solid #151A25;
    border-radius:30%;
}
.menueje{
    opacity:0.96;
    color:#fff;
    display:none;
    left:0;
    right:0;
    font-size:14px;
    font-weight:300;
    position:absolute;
    padding:0;
    list-style:none;
    text-transform:uppercase;
    top:16%;
}
.item-eje{
    background:#151A25;
    border-bottom:1px solid #fff;
    padding:8px 0;
    text-align:center;
}
.item-eje:hover{
    background:#fff;
    color:#151A25;   
}
.submenu{
    background:#fff;
    color:#151A25;
    list-style:none;
    padding:0;
    display:none;
    position:absolute;
    width:100%;
}
.subeje{
    color:#151A25;
    text-align:center;
    padding:8px 0;
    border-top:1px solid #151A25;
    width:100%;
}
.subeje:hover{
    background:#151A25;
    color:#fff;
}
.subindu{
    color:#151A25;
    text-align:center;
    padding:8px 0;
    border-top:1px solid #151A25;
    width:100%;
}
.subindu:hover{
    background:#151A25;
    color:#fff;
}
.subser{
    background:#151A25;
    text-align:center;
    border-bottom:1px solid #fff;
    width:100%;
}
.subser:hover{
    background:#fff;
    color:#151A25;
}
.submer{
    color:#151A25;
    text-align:center;
    padding:8px 0;
    border-top:1px solid #151A25;
    width:100%;
}
.submer:hover{
    background:#151A25;
    color:#fff;
}
.titulo-azul{
    font-size:18px;
    font-weight:300;
    position:absolute;
    margin:100px 10px 50px 190px;
    text-align:right;
    color:#151A25;
}
.subtitulo{
    text-align:center;
    font-size:22px;
    color:#fff;
    font-weight:100;
    margin:0 0 20px 0;
}
.margen{
    padding:0 25px 0 25px;
}
.imagen{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
.pieimagen{
    color:#fff;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    font-weight:100;
    font-size:12px;
    text-align:center;
}
.pieizq{
    text-align:center;
    grid-area:izq;
    position:absolute;
    width:100%;
    padding:8px 0;
}
.pieder{
    text-align:center;
    grid-area:der;
    position:absolute;
    width:100%;
    padding:40px 0 0;
}
/*pagina ejecutivo hombre*/
.titulo-blanco{
    font-size:18px;
    font-weight:300;
    position:absolute;
    margin:100px 10px 50px 0px;
    text-align:right;
    color:#151A25;
}
@media screen and (min-width:360px){
    .dotaciones{
        padding:110px 68px 20px 10px;
        font-size:11px;
    }
    .texto-pie{
        padding:5px 0;
    }
    .col-izq{
        padding:3px 0;
    }
    .col-der{
        padding:46px 0 0;
    }
    .titulo-azul{
        font-size:18px;
        margin:120px 10px 50px 220px;
    }
}
@media screen and (min-width:375px){
    .logo{
        padding:50px 0;
    }
    .firma{
        width:70%;
    }
    .dotaciones{
        padding:138px 72px 20px 10px;
        font-size:12px;
    }
    .productos{
        font-size:30px;
        top:4%;
    }
    .listado{
        top:14%;
        font-size:12px;
    }
    .listado-item{
        padding:0.4px;
    }
    .texto-pie{
        padding:6px 0;
    }
    .col-izq{
        padding:5px 0;
    }
    .col-der{
        padding:50px 0 0;
    }
    /*pagina ejecutivo mujer*/
    .titulo-azul{
        margin:122px 10px 50px 220px;
    }
    .pieizq{
        padding:14px 0;
    }
    .pieder{
        padding:48px 0 0;
    }
}
@media screen and (min-width:414px){
    .dotaciones{
        padding:148px 80px 20px 10px;
        font-size:14px;
    }
    .texto-pie{
    padding:7px 0;
    }
    .col-izq{
    padding:8px 0;
    }
    .col-der{
    padding:57px 0 0;
    }
    /*pagina ejecutivo mujer*/
    .titulo-azul{
        margin:140px 10px 50px 280px;
    }
    .pieizq{
        padding:15px 0;
    }
    .pieder{
        padding:55px 0 0;
    }    
}
@media screen and (min-width:768px){
    .contenedor{
        grid-template-columns:repeat(2, 50%);
        grid-template-rows:repeat(4,auto);
        grid-template-areas:
            "cabezote cabezote"
            "banner banner"
            "conte conte"
            "pie pie"
            "izq der";
    }
    .cabezote{
        flex-wrap:wrap;
    }
    .link{
        color:#151A25;
    }
    .logo{
        width:30%;
        position:absolute;
        top:2%;
        left:2%;
        margin:0;
        padding:0;  
    }
    .dotaciones{
        font-size:50px;
        text-align:center;
        padding:150px 160px;
    }
    .encabezado{
        position:relative;
    }
    .menu-ham{
        margin:25px 20px 20px 20px;
        right:0;
        width:6%;
        position:absolute;
    }
    .linea-ham{
        border:#333;
        border-top:1px solid #fff;
        margin-bottom:1px;
        border-radius:30%;
    }
    .menu{
        color:#151A25;
        top:-15px;
        left:75%;
        font-weight:300;
    }
    .menu-item{
        font-size:16px;
        padding:16px 0;
        text-align:center;
    }
    .ejemenu{
        font-size:16px;
        padding:0;
        display:none;
        position:absolute;
        width:100%;
    }
    .ejeitem{
        padding:16px 0;
    }
    .indumenu{
        font-size:16px;
        padding:0;
        display:none;
        position:absolute;
        width:100%;   
    }
    .induitem{
        padding:16px 0;
    }
    .seritem{
        background:none;
        color:#fff;
        position:relative;
        left:200%;
        top:40px;
        width:92px;
    }
    .seritem:hover{
        background:none;
    }
    .mermenu{
        font-size:16px;
        padding:0;
        display:none;
        position:absolute;
        width:100%;
    }
    .meritem{
        padding:16px 0;
    }
    .index{
        font-size:0;
        padding:0;
    }
    .banner{
        grid-area:banner;
    }
    .firma{
        width:50%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:30px;
        margin-top:20px;
    }
    .texto-azul{
        margin:20px 40px 30px;
        font-size:18px;
    }
    .conte{
        grid-area:conte;
    }
    .productos{
        color:#F38634;
        font-size:54px;
        right:6%;
        top:5%;
    }
    .listado{
        top:78px;
        font-size:20px;
        right:6%;
    }
    .listado-item{
        padding:3px;
    }
    .texto-pie{
        padding:6px 0;
        font-size:20px;
    }
    .col-izq{
        padding:30px 0;
    }
    .col-der{
        padding:100px 0 0;
    }
    /*pagina ejecutivo mujer*/
    .contenido{
    grid-template-columns:repeat(2, 50%);
    grid-template-areas:
        "cabeza cabeza"
        "sastre sastre"
        "sasder sasizq"
        "blusa blusa"
        "bluizq bluder"
        "zapato zapato"
        "zapizq zapder"
        "pie pie"
        "pieizq pieder"
    ;    
    width:100vw;
    }
    .enlace{
        color:#fff;
    }
    .inicio{
        width:28%;
        left:2%;
        top:2%;
        position:absolute;
        visibility:visible;
    }
    .ham-eje{
        margin:25px 20px 20px 20px;
        right:0;
        width:6%;
        position:absolute;
    }
    .ejeham{
        border-top:3px solid #151A25;
        margin-bottom:1px;
        border-radius:30%;
    }
    .menueje{
        color:#fff;
        top:-15px;
        left:75%;
        font-weight:300;
    }
    .item-eje{
        font-size:16px;
        padding:16px 0;
        text-align:center;
    }
    .submenu{
        font-size:16px;
        padding:0;
        position:absolute;
        width:100%;
    }
    .subeje{
        padding:16px 0;
    }
    .subeje:hover{
        background:#fff;
        color:#151A25; 
    }
    .subindu{
        padding:16px 0;
    }
    .subindu:hover{
        background:#fff;
        color:#151A25;
    }
    .subser{
        padding:16px 0;
    }
    .subser:hover{
        background:none;
    }
    .submer{
        padding:16px 0;
    }
    .submer:hover{
        background:#fff;
        color:#151A25;
    }
    .titulo-azul{
        font-size:36px;
        margin:280px 20px 50px 480px;
    }
    .sasizq{
        grid-area:sasizq;
        width:70%;
    }
    .sasder{
        grid-area:sasder;
        width:70%;
    }
    .bluizq{
        grid-area:bluizq;
        width:70%;
    }
    .bluder{
        grid-area:bluder;
        width:70%;
    }
    .zapder{
        grid-area:zapder;
        width:70%;
    }
    .zapizq{
        grid-area:zapizq;
        width:70%;
    }
    .subtitulo{
        font-size:40px;
        margin:0 0 30px 0;
    }
    .margen{
        padding:0;
    }
    .imagen{
        width:80%;
        margin-left:31%;
        margin-right:32%;
    }
    .pieimagen{
        font-size:15px;
    }
    .pieizq{
        padding:30px 0;
    }
    .pieder{
        padding:100px 0 0;
    }
    /*pagina ejecutivo hombre*/
    .titulo-blanco{
        font-size:36px;
        margin:320px 20px 50px 540px;
    }
}
@media screen and (min-width:1024px){
    .menu-ham{
        margin:40px 30px 20px 20px;
        width:6%;
    }
    .linea-ham{
        margin-bottom:10px;
        border-top:2px solid #fff;
    }
    .menu-item{
        font-size:20px;
        padding:20px 0;
    }
    .menu-item:hover{
        background:#151A25;
        color:#fff;    
    }
    .ejemenu{
        font-size:20px;
    }
    .ejeitem{
        padding:20px 0;
    }
    .indumenu{
        font-size:20px;
    }
    .induitem{
        padding:20px 0;
    }
    .seritem{
        padding:20px 0;
    }
    .mermenu{
        font-size:20px;
    }
    .meritem{
        padding:20px 0;
    }
    .dotaciones{
        font-size:60px;
        text-align:center;
        padding:200px 250px;
    }
    .firma{
        margin-left:auto;
        margin-right:auto;
        width:40%;
    }
    .texto-azul{
        font-size:22px;
        margin:40px 40px 40px;
    }
    .productos{
        font-size:75px;
        top:5%;
        right:6%;
    }
    .listado{
        top:120px;
        font-size:24px;
        right:6%;
    }
    .listado-item{
        padding:5px 0;
    }
    .texto-pie{
        font-size:22px;
        padding:8px 0;
    }
    .col-izq{
        padding:50px 0;
    }
    .col-der{
        padding:130px 0 0;
    }
    /*pagina ejecutivo*/
    .ham-eje{
        margin:40px 30px 20px 20px;
        width:6%;
    }
    .ejeham{
        margin-bottom:10px;
        border-top:2px solid #151A25;
    }
    .item-eje{
        font-size:20px;
        padding:20px 0;
    }
    .submenu{
        font-size:20px;
    }
    .subeje{
        padding:20px 0;
    }
    .subindu{
        padding:20px 0;
    }
    .subser{
        padding:20px 0;
    }
    .submer{
        padding:20px 0;
    }
    .titulo-azul{
        font-size:45px;
        margin:360px 30px 50px 630px;
    }
    .subtitulo{
        font-size:52px;
    }
    .pieimagen{
        font-size:16px;
        margin-bottom:30px;
    }
    .pieizq{
        padding:50px 0;
    }
    .pieder{
        padding:130px 0 0;
    }
}
@media screen and (min-width:1180px){
    .menu-item{
        padding:22px 0;
    }
    .ejeitem{
        padding:22px 0;
    }
    .induitem{
        padding:22px 0;
    }
    .meritem{
        padding:22px 0;
    }
    .dotaciones{
        font-size:70px;
        padding:250px 300px;
    }
    .productos{
        top:8%;
    }
    .listado{
        top:18%;
    }
    .listado-item{
        padding:8px 0;
    }
    .col-izq{
        padding:70px 0;
    }
    .col-der{
        padding:150px 0 0;
    }
    /*pagina ejecutivo*/
    .ham-eje{
        margin:50px 30px 20px 20px;
        width:5%;
    }
    .ejeham{
        border-top:2px solid #151A25;
        margin-bottom:10px;
        border-radius:30%;
    }
    .item-eje{
        font-size:20px;
        padding:24px 0;
    }
    .subeje{
        padding:24px 0;
    }
    .subindu{
        padding:24px 0;
    }
    .submer{
        padding:24px 0;
    }
    .titulo-azul{
        font-size:50px;
        margin:410px 30px 50px 750px;
    }
    .imagen{
        width:70%;
        margin-left:37%;
        margin-right:36%;
    }
    .subtitulo{
        font-size:52px;
    }
    .pieimagen{
        font-size:20px;
        margin-bottom:30px;
    }
    .pieizq{
        padding:70px 0;
    }
    .pieder{
        padding:150px 0 0;
    }
}

@media screen and (min-width:1280px){
    .menu-ham{
        margin:50px 30px 20px 20px;
        width:5%;
    }
    .linea-ham{
        border-top:2px solid #fff;
        margin-bottom:10px;
        border-radius:30%;
    }
    .menu-item{
        font-size:22px;
        padding:24px 0;
    }
    .ejemenu{
        font-size:22px;
    }
    .ejeitem{
        padding:24px 0;
    }
    .indumenu{
        font-size:22px;
    }
    .induitem{
        padding:24px 0;
    }
    .mermenu{
        font-size:22px;
    }
    .meritem{
        padding:24px 0;
    }
    .dotaciones{
        font-size:70px;
        text-align:center;
        padding:260px 350px;
    }
    .productos{
        top:12%;
        right:8%;
    }
    .listado{
        top:22%;
        font-size:24px;
        right:8%;
    }
    .listado-item{
        padding:7px 0;
    }
    .texto-pie{
        padding:10px 0;
    }
    .col-izq{
        padding:80px 0;
    }
    .col-der{
        padding:170px 0 0;
    }
    /*pagina ejecutivo*/
    .ham-eje{
        margin:50px 30px 20px 20px;
        width:5%;
    }
    .ejeham{
        border-top:2px solid #151A25;
        margin-bottom:10px;
        border-radius:30%;
    }
    .item-eje{
        font-size:22px;
        padding:26px 0;
    }
    .submenu{
        font-size:22px;
    }
    .subeje{
        padding:26px 0;
    }
    .subindu{
        padding:26px 0;
    }
    .submer{
        padding:26px 0;
    }
    .titulo-azul{
        font-size:60px;
        margin:420px 30px 50px 780px;
    }
    .subtitulo{
        font-size:62px;
    }
    .pieimagen{
        font-size:18px;
    }
    .pieizq{
        padding:80px 0;
    }
    .pieder{
        padding:170px 0 0;
    }
}
@media screen and (min-width:1440px){
    .logo{
        width:26%;
    }
    .menu-ham{
        margin:50px 30px 20px 20px;
    }
    .menu-item{
        font-size:22px;
        padding:26px 0;
    }
    .ejeitem{
        padding:26px 0;
    }
    .induitem{
        padding:26px 0;
    }
    .meritem{
        padding:26px 0;
    }
    .dotaciones{
        font-size:80px;
        text-align:center;
        padding:300px 400px;
    }
    .texto-azul{
        font-size:24px;
        margin:50px 60px 40px;
    }
    .productos{
        top:15%;
        right:8%;
    }
    .listado{
        top:24%;
        font-size:24px;
        right:8%;
    }
    .listado-item{
        padding:8px 0;
    }
    .texto-pie{
        font-size:24px
    }
    .col-izq{
        padding:100px 0;
    }
    .col-der{
        padding:190px 0 0;
    }
    /*pagina ejecutivo*/
    .inicio{
        width:26%;
    }
    .ham-eje{
        margin:50px 30px 20px 20px;
    }
    .item-eje{
        font-size:22px;
        padding:28px 0;
    }
    .subeje{
        padding:28px 0; 
    }
    .subindu{
        padding:28px 0; 
    }
    .submer{
        padding:28px 0; 
    }
    .titulo-azul{
        font-size:70px;
        margin:480px 40px 50px 860px;
    }
    .subtitulo{
        font-size:64px;
    }
    .pieimagen{
        font-size:22px;
        margin-bottom:40px;
    }
    .pieizq{
        padding:100px 0;
    }
    .pieder{
        padding:190px 0 0;
    }
}