html, body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    .menu {
        width: 100%;
        /*max-width: 1366px;*/
    }
    .menu-container{
        font-family: RobotoN, serif; 
        height:69px;
        background-color:rgb(68,112,230);
    }
    .menu-logo{
        float:left; 
        width: 13%; 
        height: 100%; 
        text-align: center;
    }
    .menu-logo > div{
        position: relative; 
        left:50%; 
        top:50%;
        transform: translate(-50%,-50%);
    }
    .menu-link1{
        float:left; 
        width: 30%; 
        height:100%; 
        /*text-align: center;*/
    }
    .menu-link1 > div{
        position: relative; 
        left:50%; 
        top:50%;
        transform: translate(-50%,-50%);
    }
    .menu-link1 > div > a{
        color:white; 
        text-decoration: none;
        /*background-color:rgb(247,243,237);
        border-radius: 25px;
        padding:10px; */
    }
    .menu-link1 > div > a:hover{
        /*background-color:rgb(192,43,89); */
        color:rgb(48, 88, 197);
        text-decoration: none;
        /*border-radius: 25px;
        padding:10px;*/
    }
    .menu-link2{
        float:left; 
        width: 25%; 
        height:100%; 
        text-align: center;
    }
    .menu-link2 > div{
        position: relative; 
        left:50%; 
        top:50%;
        transform: translate(-50%,-50%);
    }
    .menu-link2 > div > a{
        color:rgb(68,112,230); 
        text-decoration: none;
        background-color:rgb(247,243,237); 
        border-radius: 25px;
        padding:10px;
    }
    .menu-link2 > div > a:hover{
        background-color:rgb(68,112,230);
        color:white;
        text-decoration: none;
        border-radius: 25px;
        padding:10px;
    }
    .menu-link3{
        float:left; 
        width: 25%; 
        height:100%; 
        text-align: center;
    }
    .menu-link3 > div{
        position: relative; 
        left:50%; 
        top:50%;
        transform: translate(-50%,-50%);
    }
    .menu-link3 > div > a{
        color:rgb(249,178,66); 
        text-decoration: none;
        background-color:rgb(247,243,237); 
        border-radius: 25px;
        padding:10px;
    }
    .menu-link3 > div > a:hover{
        background-color:rgb(249,178,66); 
        color:white;
        text-decoration: none;
        border-radius: 25px;
        padding:10px;
    }
    .menu-button > a{
        color:white;
    }
    .menu-button > a:hover{
        background-color:rgb(68,112,230) !important;
    }
    .menu-button > a:visited {
        background-color:rgb(68,112,230) !important;
    }
    /* mouse over link */
    .menu-button > a:hover {
        background-color:rgb(68,112,230) !important;
    }
      /* selected link */
    .menu-button > a:active {
        background-color:rgb(68,112,230) !important;
    }
    .menu-sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background-color: white;
    }
    .bloque1-offset-top{
        margin-top:69px;
    }



.bloque5 {
    position: relative; 
    width: 100%;
    /*max-width: 1366px;*/
}


.containerIntro {
    width: 100%;
    max-width: 1366px;
}

.flex-container {
    display: flex;
    justify-content: center;
}

.mobile-tablet {
    display: none;
}

.pc {
    display: block;
}
.aire{
    height: calc((100vh * 0.17) - 69px);
}
.bl1-left-col{
    width:54%; 
    /*max-width: 746px; */
}
.bl1-left-col-container{
    position: relative; 
    height: 100%; 
    font-family: RobotoL, serif; 
    font-size: 17px; 
    line-height: 1.7; 
    color: rgb(59, 59, 122);
}
.bl1-left-col-container > div{
    padding-left:11%; 
}
.bl1-right-col{
    width:46%; 
    /*max-width: 620px;*/
}
.bl1-right-col-container{
    position: relative; 
    height: 100%;
}
.bl1-right-col-container > div{
    position: absolute; 
    width: 577px; 
    height: 440px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    /*background: url('../../imagenes/ficha2/ficha2_ilus1completa.png') no-repeat;*/
}
.bl1-titulo {
    position: relative;
    width: 100%;
    font-family: Sifon, serif;
    font-size: 50px;
    line-height: 1.3;
    color: rgb(255, 116, 107);
    
}

.bl1-subtitulo {
    position: relative;
    font-family: RobotoM, sans-serif;
    font-size: 47px;
    line-height: 1.3;
    color: rgb(68, 112, 230);
    padding-bottom: 60px;
    
}

.bl1-descripcion {
    position: relative;
    width: 350px;
    left: 14%;
    padding-top: 17%;
    padding-top: 2%;
    font-family: RobotoL, serif;
    font-size: 20px;
    line-height: 1.4;
    color: rgb(59, 59, 122);
}
.bl1-letraU{
    float: left;
    padding-top: 5px;
    padding-right: 7px;
}
.bl1-planta-izq{
    position: absolute;
    left:3%;
    top:45%;
}
.bl1-calendario{
    position: absolute;
    left:20%;
    top:11%;
}
.bl1-celular{
    position: absolute;
    left:55%;
    top:35%;
}
.bl1-planta-der{
    position: absolute;
    left:65%;
    top:60%;
}
.bl1-globo-corte{
    position: absolute;
    left:7%;
    top:22%;
}
.bl1-globo-pesos{
    position: absolute;
    left:55%;
    top:4%;
}
.bl1-globo-fecha-limite{
    position: absolute;
    left:29%;
    top:55%;
}
.bl1-tarjeta{
    position: absolute;
    left:22%;
    top:70%;
}

.bl2-left-col{
    width:50%; 
    /*max-width: 685px;*/
    padding-top: 45px;
}
.bl2-left-col-container{
    position: relative; 
    height:100%;
}
.bl2-left-col-container > div{
    position: absolute; 
    width: 597px; 
    height: 599px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    /*background: url('../../imagenes/ficha2/ficha2_ilus2_completa.png') no-repeat;*/
}
.bl2-right-col{
    width:50%; 
    /*max-width: 681px; */
    font-family: RobotoL, serif; 
    font-size: 17px; 
    line-height: 1.7; 
    color: rgb(59, 59, 122);
    padding-top: 45px;
}
.bl2-right-col > table{
    width: 81%;
}
.bl2-ilustracion-fondo{
    position: absolute;
    left:0%;
    top:0%;
}
.bl2-planta-izq{
    position: absolute;
    left:0%;
    top:37%;
}
.bl2-calendario{
    position: absolute;
    left:51%;
    top:45%;
}
.bl2-edocta{
    position: absolute;
    left:7%;
    top:1%;
}
.bl2-fecha-corte{
    position: absolute;
    left:30%;
    top:0%;
}
.bl2-fecha-pago{
    position: absolute;
    left:42%;
    top:8%;
}
.bl2-flecha{
    position: absolute;
    left:52%;
    top:32%;
}
.bl2-lapiz{
    position: absolute;
    left:32%;
    top:41%;
}
.bl3-left-col{
    width:50%; 
    /*max-width: 685px;*/
    font-family: RobotoL, serif; 
    font-size: 17px; 
    line-height: 1.7; 
    color: rgb(59, 59, 122);
}
.bl3-right-col{
    width:50%; 
    /*max-width: 681px; */
}
.bl3-right-col-container{
    position: relative; 
    height:100%;
    left: 20px;
}
.bl3-right-col-container > div{
    position: absolute; 
    left: 0%; 
    width: 579px; 
    height: 482px;
    /*background: url('../../imagenes/ficha2/ficha2_ilus3completa.png') no-repeat;*/
}

.bl3-container{
    position: relative;
    left: 11%; 
    width: 89%;
}
.bl3-ilustracion-fondo{
    position: absolute;
    left:0%;
    top:0%;
}
.bl3-calendario{
    position: absolute;
    left:10%;
    top:12%;
}
.bl3-fecha-corte{
    position: absolute;
    left:64%;
    top:0%;
}
.bl3-fecha-pago{
    position: absolute;
    left:57%;
    top:66%;
}
.bl3-tenis{
    position: absolute;
    left:2%;
    top:4%;
}
.bl3-plantas{
    position: absolute;
    left:5%;
    top:62%;
}
.bl3-row1{

}
.bl3-row1-title{
    height:41px; 
    width:250px; 
    background-color:rgb(68, 112, 230); 
    border-radius: 25px; 
    font-family: RobotoN, sans-serif; 
    font-size: 25px; 
    line-height: 1.2; 
    color:white;
}
.bl3-row1-title > span{
    position:relative; 
    left:30px; 
    top:5px;
}
.bl3-row1-descripcion{
    padding-left: 30px; 
}

.bl4-left-col{
    width:50%; 
    /*max-width: 685px;*/
    padding-top: 35px;
    padding-bottom:45px;
}
.bl4-right-col{
    width:50%; 
    /*max-width: 681px; */
    font-family: RobotoL, serif; 
    font-size: 17px; 
    line-height: 1.7; 
    color: rgb(59, 59, 122);
    padding-top: 60px;
}
.bl4-left-col-container{
    position: relative; 
    height:100%;
}
.bl4-left-col-container > div{
    position: relative;
    left: 50%;
    width: 412px;
    height: 425px;
    /*background: url(../../imagenes/ficha2/ficha2_ilus4_completa.png) no-repeat;*/
    top: 50%;
    transform: translate(-50%, -50%);
}
.bl4-row2{
    width: 81%;
}
.bl4-row2-title{
    height:41px; 
    width:250px; 
    background-color:rgb(68, 112, 230); 
    border-radius: 25px; 
    font-family: RobotoN, sans-serif; 
    font-size: 25px; 
    line-height: 1.2; 
    color:white;
}
.bl4-row2-title > span{
    position:relative; 
    left:30px; 
    top:5px;
}
.bl4-row2-descripcion{
    padding-left: 30px; 
}
.bl4-ilustracion-fondo{
    position: absolute;
    left:0%;
    top:0%;
}
.bl4-mano{
    position: absolute;
    left:17%;
    top:48%;
}
.bl4-tablet{
    position: absolute;
    left:32%;
    top:13%;
}
.bl4-globo{
    position: absolute;
    left:52%;
    top:21%;
}
.bl4-planta{
    position: absolute;
    left:50%;
    top:52%;
}

.bloque5 > div{
    width:100%; 
    height: 125px; 
    background-image: linear-gradient(to right, rgb(154,225,208) , rgb(227,255,238));
}