@charset "utf-8";
/* CSS Document */
html, body{overflow: hidden;}
body { margin:0; padding:0; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif }
#step1{ height:100%; width: 100%; position:absolute; }
image{ display:block}
section, .section{ display:block;}
.line-top{ background:#00b7eb; height:27%}
.line-middle{ background:#006eac; height:41%; text-align:center; display: flex;}
.line-middle img{ width:90%; max-width:709px; margin:auto; display:block; vertical-align: middle; }
.line-bottom{ background:#132d54; height:27%}
.line-bottom2{ background:#e62727; height:5%}
.left{ float:left; width:50%;}
#step2 { position:absolute; display:none; height:100%; overflow: hidden; opacity:0; width: 100% }
.ejecutivo{ height:100%; background:#282828 url(../images/ejecutivo.jpg) center  no-repeat; background-size:cover; position:relative}
.ernesto{ height:100%; background:url(../images/ernesto.jpg) center no-repeat; background-size:cover; position:relative }
.grey-bottom{ position:absolute; width:100%; padding:1% 3%; background:url(../images/fondo-grey.png?v=2) ; text-align:center; color:#fff; bottom:12.2%; font-size:1vw; box-sizing:border-box}
#header-step{ background:#006eac; position:absolute; top:2.7%; padding:15px 1%; box-sizing:border-box;  width:100%;   }
#header-step img { width: 100%; vertical-align: middle; height:auto;}
#header-step .left{width: 30%; vertical-align: middle; max-width: 187px; }
#header-step .right{ text-align:right; width: 70%; max-width: 320px; float:right}
.middle-text{ background: #fff; padding:3%; box-sizing: border-box; color:#132d54; text-align: center; font-size: 1vw; position: absolute; width: 40%; left:50%; margin-left:-20%; top:48% }
.middle-text span{ font-weight: bold;}
.btones{ text-align: center; position: absolute; color:#fff; bottom:-50px; width: 360px; left: 50%; margin-left: -180px; z-index: 99; cursor:pointer; -webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
    transition: all 0.5s; padding-bottom: 30px; padding-top:50px; box-sizing: border-box; max-width: 360px;}
.btones:hover{ bottom:0; -webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
    transition: all 0.5s; }
.btones .arrow{ position: absolute; top: -35px; width: 100%; font-size: 30px }
.btones:hover h2, .btones:hover h5{ display:block}
.bton-ejecutivo{ background: url("../images/fondo-bton-ejecutivo.png") no-repeat center top; background-size: 100%}
.bton-ernesto{ background: url("../images/fondo-bton-ernesto.png") no-repeat center top; background-size: 100%}
.btones h2{ font-size: 4vw; margin:0; padding: 0; font-weight: normal; display:none;}
.btones h5 { font-size: 1.15vw;  margin:0; padding: 0; font-weight: normal; display:none}
.white-back{ width: 100%; height: 100%; opacity: 0.45; background: #fff; position: absolute; left: 0; top: 0; display: none}



@media only screen and (max-width: 675px) {
.ejecutivo{ background:url(../images/ejecutivoM.jpg) 75%  no-repeat; background-size:cover; width: 49.6%; border-right:#fff 1px solid;}
.ernesto{background:url(../images/ernestoM.jpg) 40% no-repeat; background-size:cover; }
.grey-bottom { font-size: 14px; padding:15px 5px;}
.middle-text { width: 80%; margin-left: 0; left:10%; top: 54%; font-size: 15px}
.btones { width: 95%; margin-left: 0; left:2.5%; }
.btones h2{ font-size: 8vw;}
.btones h5{ font-size: 3.3vw;}
.btones.swipe{bottom:0; -webkit-transition: bottom 0.5s; /* For Safari 3.1 to 6.0 */
        transition: bottom 0.5s;  max-height: fit-content;}
}

@media only screen and (min-width: 375px)  and (max-width: 667px) and (orientation : landscape) {
    #header-step{  padding:0 1%;}
    #header-step img{ width: 90%;}

}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {

}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
    #header-step{ padding:0 1%;}
    #header-step img{ width: 90%;}
    .btones{ left:10%; margin-left: initial;}

}