@media (min-width: 1100px){
    
}

@media (min-width: 960px) and (max-width: 1099px){
    #contenedor_principal .container{
        width: 100% !important;
    }

    #contenedor_principal .container > .row > .col-4{
        width: 30% !important;
        max-width: 30% !important;
        flex: initial !important;
    }
    #contenedor_principal .container > .row > .col-8{
        width: 70% !important;
        max-width: 70% !important;
        flex: initial !important;
    }
    #formulario-container{
        padding-left: 20px;
    }

    /**************VISTA DASHBOARD***************/
    .container-graficas{
        width: 100% !important;
        padding: 10px;
        margin: 0px auto;
    }
    
}

@media (min-width: 768px) and (max-width: 959px){
    /***************VISTA 1*********************/
    .calculadora-banner-h1{
        font-size: 70px;
        line-height: 65px;
        width: 80% !important;
        margin-bottom: 10px !important;
    }

    /*********SLIDER 2**********/
    .calculadora-banner-information{
        width: 70%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin-left: 30%;
        padding: 30px;
        background-color: #f7f7f7;
    }
    .calculadora-banner-h4{
        font-size: 27px;
        line-height: 30px;
    }

    .calculadora-banner-information li{
        font-size: 15px;
    }

    .calculadora-banner-buttons{
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
    }
    .btn-banner-regresar{
        width: 220px;
        height: 50px;
    
        font-size: 19px;
    }
    
    .btn-banner-empecemos{
        width: 220px;
        height: 50px;
    
        font-size: 19px;
    }

    .container-body-h2{
        font-size: 40px;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }
    .container-body-text{
        width: 70% !important;
        font-size: 20px;
    }
    .btn-verde-principal-2{
        width: 350px;
        height: 50px;
    }

    /**********************VISTA 2***********************/
    #contenedor_principal .container{
        width: 100% !important;
    }

    #contenedor_principal .container > .row > .col-4{
        width: 20% !important;
        max-width: 20% !important;
        flex: initial !important;
    }
    #contenedor_principal .container > .row > .col-8{
        width: 80% !important;
        max-width: 80% !important;
        flex: initial !important;
    }
    #formulario-container{
        padding-left: 15px;
    }
    .formulario-container-title{
        font-size: 30px;
    }
    .formulario-container-introtext{
        font-size: 16px;
        width: 80% !important;
        margin-bottom: 30px !important;
    }

    #logo-pasos-container{
        width: 100%;
    }
    .logo-calculadora-title{
        font-size: 13px;
    }
    .logo-calculadora-wrap{
        padding:10px !important;
    }
    .pasos-wrap{
        padding:10px !important;
    }
    .pasos-cont{
        width: 100%;
    }
    .paso-text{
        font-size: 17px;
        padding-left: 40px;
    }

    #formulario-vistas{
        width: 600px;
    }
    #formulario-vistas-wrap{
        width: 600px;
        width: calc(600px * 3);
        width: -moz-calc(600px * 3);
    }
    .formulario-vista{
        width: 600px;
    }
    .formulario-cont{
        width: 280px;
        padding: 0px;
        padding-left: 10px;
    }
    .form-group-radio-text{
        font-size: 13px;
    }

    /*****VISTAS****/
    .vista_actual_1{
        left: 0px !important;
        left: calc(0px - (600px * 1)) !important;
        left: -moz-calc(0px - (600px * 1)) !important;
    }
    .vista_actual_2{
        left: 0px !important;
        left: calc(0px - (600px * 2)) !important;
        left: -moz-calc(0px - (600px * 2)) !important;
    }
    .vista_actual_3{
        left: 0px !important;
        left: calc(0px - (600px * 3)) !important;
        left: -moz-calc(0px - (600px * 3)) !important;
    }

    /**************VISTA DASHBOARD***************/
    .container-graficas{
        width: 100% !important;
        padding: 10px;
        margin: 0px auto;
    }
    .container-graficas-col-1,.container-graficas-col-2,.container-graficas-col-3{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
    }
    .container-graficas-col-5{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
        margin-bottom: 10px;
    }
    .container-graficas-col-4{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
    }
    .graphic-render-indicadores-col{
        width: 50%;
        height: 180px;
    }

}

@media (min-width: 560px) and (max-width: 767px){
    /***************VISTA 1*********************/
    .calculadora-banner-cont{
        width: 560px;
        margin-left: 2%;
        margin-top: 50px;
    }
    .calculadora-banner-h1{
        font-size: 60px;
        line-height: 55px;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /*********SLIDER 2**********/
    .calculadora-banner-information{
        width: 90%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin-left: 10%;
        padding: 20px;
        background-color: #f7f7f7;
    }
    .calculadora-banner-h4{
        font-size: 27px;
        line-height: 30px;
    }

    .calculadora-banner-information li{
        font-size: 15px;
    }

    .calculadora-banner-buttons{
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
    }
    .btn-banner-regresar{
        width: 220px;
        height: 50px;

        font-size: 19px;
    }

    .btn-banner-empecemos{
        width: 220px;
        height: 50px;

        font-size: 19px;
    }

    .container-body-h2{
        font-size: 35px;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }
    .container-body-text{
        width: 70% !important;
        font-size: 20px;
    }
    .btn-verde-principal-2{
        width: 350px;
        height: 50px;
    }

    /**********************VISTA 2***********************/
    #contenedor_principal .container{
        width: 100% !important;
    }

    #contenedor_principal .container > .row > .col-4{
        width: 20% !important;
        max-width: 20% !important;
        flex: initial !important;
    }
    #contenedor_principal .container > .row > .col-8{
        width: 80% !important;
        max-width: 80% !important;
        flex: initial !important;
    }
    #formulario-container{
        padding-left: 10px;
    }
    .formulario-container-title{
        font-size: 25px;
        padding-left: 10px !important;
    }
    .formulario-container-introtext{
        font-size: 14px;
        width: 90% !important;
        margin-bottom: 30px !important;
        padding-left: 10px;
    }

    #logo-pasos-container{
        width: 100%;
    }
    .logo-calculadora-title{
        font-size: 12px;
    }
    .logo-calculadora-wrap{
        padding:10px !important;
    }
    .logo-calculadora-cont{
        width: 100%;
    }
    .pasos-wrap{
        padding:5px !important;
    }
    .pasos-cont{
        width: 100%;
    }
    .pasos-cont-line{
        left: 15px;
    }
    .paso-text{
        font-size: 15px;
        padding-left: 35px;
    }
    .paso-ball{
        width: 10px;
        height: 10px;
        left: 10px;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
    }
    .paso-actual .paso-ball::before{
        width: 20px;
        height: 20px;
        left: -5px;
        top: -5px;
    }
    .paso-actual .paso-ball::after{
        width: 10px;
        height: 10px;
        left: 0px;
        top: 0px;
    }


    #formulario-vistas{
        width: 400px;
    }
    #formulario-vistas-wrap{
        width: 400px;
        width: calc(400px * 3);
        width: -moz-calc(400px * 3);
    }
    .formulario-vista{
        width: 400px;
    }
    .formulario-cont{
        width: 250px;
        padding: 0px;
        padding-left: 10px;
    }
    
    .form-group-tooltip{
        width: 140px;
    }
    .form-group-label{
        font-size: 13px;
        line-height: 14px;
        margin-bottom: 5px;
    }
    #contenedor_principal .form-group-input{
        padding: 0px 7px !important;
    
        font-size: 16px !important;
    }
    .form-group-radio-cont{
        padding: 0px 5px;
    }
    .form-group-radio-text{
        font-family: 'FSJoey-Bold';
        font-size: 12px;
    }
    .form-group-radio-input-col-label{
        font-size: 15px;
    }

    .form-group-slider-col1{
        padding-right: 7px;
        padding-left: 7px;
    }
    .form-group-slider-col2{
        padding-right: 20px;
    }
    #contenedor_principal .form-group-slider-value{
        width: 70%;
    }
    #contenedor_principal .form-group-slider-value-percent{
        width: 30% !important;
        padding-left: 0px;
    }
    #contenedor_principal .form-group-slider-value,
    #contenedor_principal .form-group-slider-value-percent{
        font-size: 15px;
    }
    .btns-next-prev-cont{
        width: 90% !important;
    }
    .btn-cancelar{
        width: 100%;
    }
    .btn-continuar{
        width: 100%;
    }

    /*****VISTAS****/
    .vista_actual_1{
        left: 0px !important;
        left: calc(0px - (400px * 1)) !important;
        left: -moz-calc(0px - (400px * 1)) !important;
    }
    .vista_actual_2{
        left: 0px !important;
        left: calc(0px - (400px * 2)) !important;
        left: -moz-calc(0px - (400px * 2)) !important;
    }
    .vista_actual_3{
        left: 0px !important;
        left: calc(0px - (400px * 3)) !important;
        left: -moz-calc(0px - (400px * 3)) !important;
    }

    /**************VISTA DASHBOARD***************/
    #contenedor_graficas_render{
        padding: 0px;
    }
    .container-graficas{
        width: 100% !important;
        padding: 10px;
        margin: 0px auto;
    }
    .container-graficas-col-1,.container-graficas-col-2,.container-graficas-col-3{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
    }
    .container-graficas-col-5{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
        margin-bottom: 10px;
    }
    .container-graficas-col-4{
        width: 50% !important;
        max-width: 50% !important;
        flex: initial !important;
    }
    .graphic-render-indicadores-col{
        width: 50%;
        height: 200px;
    }
    #descargar_informe_btn,#simular_seguro_btn{
        width: 250px;
    }
    #volver_calculadora_btn{
        width: 250px;
    }
}

@media (min-width: 230px) and (max-width: 559px){
    /***************VISTA 1*********************/
    .calculadora-banner-cont{
        width: 90%;
        margin-left: 6%;
        margin-top: 50px;
    }
    .calculadora-banner-h1{
        font-size: 40px;
        line-height: 35px;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .calculadora-banner-text{
        font-size: 16px;
    }

    /*********SLIDER 2**********/
    .calculadora-banner-information{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin-left: 0%;
        padding: 15px;
        background-color: #f7f7f7;
    }
    .calculadora-banner-h4{
        font-size: 24px;
        line-height: 27px;
    }

    .calculadora-banner-information li{
        font-size: 14px;
    }
    .calculadora-banner-information li::after{
        width: 5px;
        height: 5px;
        top: 50%;
        top: calc(50% - 2.5px);
        top: -moz-calc(50% - 2.5px);
    }

    .calculadora-banner-buttons{
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 10px;
    }
    .calculadora-banner-buttons .col-6{
        width: 100% !important;
        max-width: 100% !important;
        flex: initial !important;
    }
    
    .btn-banner-regresar{
        width: 200px;
        height: 40px;
        font-size: 16px;
        float: none !important;
        margin-bottom: 15px;
        margin-right: auto !important;
        margin-left: auto !important;
        display: block;
        border: #83C623 solid 1px;
    }

    .btn-banner-empecemos{
        width: 200px;
        height: 40px;
        font-size: 16px;
        float: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        display: block;
    }

    .container-body-h2{
        font-size: 25px;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .container-body-text{
        width: 80% !important;
        font-size: 16px;
    }
    .btn-verde-principal-2{
        width: 250px;
        height: 50px;
    }

    /**************VISTA 2**************/
    .columna-1-resp{
        width: 100% !important;
        max-width: 100% !important;
        flex: initial !important;
    }
    .columna-2-resp{
        width: 100% !important;
        max-width: 100% !important;
        flex: initial !important;
    }
    #contenedor_principal .container{
        width: 100% !important;
    }

    .background-col-1{
        width: 100%;
        height: 100%;
        
        top: 0px;
        left: 0px;
        background: none;
    }

    #logo-pasos-container{
        width: 100%;
    }
    .logo-calculadora-wrap{
        /*float: left;*/
        width: 100px;
        padding:0px !important;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -30px;
    }
    .logo-calculadora-cont{
        padding: 0px 5px !important;
    }
    .logo-calculadora-title{
        font-size: 12px;
    }
    .pasos-wrap{
        /*float: left;*/
        width: 100%;
        /*width: calc(100% - 100px);
        width: -moz-calc(100% - 100px);*/
        padding:0px 5px !important;
        margin-top: 25px;
    }
    .pasos-cont{
        width: 100%;
        margin-top: -24px;
        height: 60px !important;
    }
    .pasos-cont-line{
        display: none;
    }
    .paso-cont{
        float: left;
        width: 25%;
    }
    .paso-ball{
        left: 7.5px;
    }
    .paso-text{
        font-size: 16px;
        padding-left: 35px;
    }

    /*****************/
    #formulario-container{
        padding: 0px 5px;
    }
    .formulario-container-title{
        font-size: 24px;
        margin-top: 10px !important;
        text-align: center;
    }
    
    .formulario-container-introtext{
        font-size: 16px;
        width: 100% !important;
        text-align: center;
    }

    #formulario-vistas{
        width: 100%;
    }
    #formulario-vistas-wrap{
        width: 100%;
        width: calc(100% * 3);
        width: -moz-calc(100% * 3);
    }
    .formulario-vista{
        margin: 0px;
        width: 33.333%;
    }
    .formulario-cont{
        width: 100%;
        width: calc(100% - 120px);
        width: -moz-calc(100% - 120px);
        padding: 0px;
        padding-left: 10px;
    }
    #contenedor_principal .form-group-input{
        padding: 0px 7px !important;
        font-size: 14px !important;
    }
    .form-group-input-cont::after{
        display: none !important;
    }
    .form-group-tooltip{
        position: absolute !important;
        width: 100px;
        padding: 5px;
    }
    .form-group-label{
        font-family: 'FSJoey-Bold';
        font-size: 13px;
        margin-bottom: 5px !important;
    }
    .form-group-radio-text{
        font-family: 'FSJoey-Bold';
        font-size: 13px;
    }
    .form-group-tooltip-top{
        top: 0px !important;
    }

    .btns-next-prev-cont{
        width: 100%;
    }
    .btns-next-prev-cont .col-6{
        width: 100% !important;
        max-width: 100% !important;
        flex: initial !important;
        margin-bottom: 15px !important;
    }

    .btn-cancelar{
        width: 200px;
        float: none !important;
    }
    .btn-continuar{
        width: 200px;
        float: none !important;
    }

    /*****VISTAS****/
    .vista_actual_1{
        left: 0px !important;
        left: calc(0px - (100% * 1)) !important;
        left: -moz-calc(0px - (100% * 1)) !important;
    }
    .vista_actual_2{
        left: 0px !important;
        left: calc(0px - (100% * 2)) !important;
        left: -moz-calc(0px - (100% * 2)) !important;
    }
    .vista_actual_3{
        left: 0px !important;
        left: calc(0px - (100% * 3)) !important;
        left: -moz-calc(0px - (100% * 3)) !important;
    }
    .form-group-slider{
        display: none !important;
    }
    .form-group-slider-responsive{
        display: block !important;
    }

    /**************VISTA DASHBOARD***************/
    #contenedor_graficas_render{
        padding: 0px;
    }
    .container-graficas{
        width: 100% !important;
        padding: 10px;
        margin: 0px auto;
    }
    .container-graficas-col-1,.container-graficas-col-2,.container-graficas-col-3{
        width: 300px !important;
        max-width: 300px !important;
        margin-left: auto;
        margin-right: auto;
        flex: initial !important;
        float: none !important;
        height: auto !important;
    }
    .container-graficas-col-5{
        width: 300px !important;
        max-width: 300px !important;
        margin-left: auto;
        margin-right: auto;
        flex: initial !important;
        float: none !important;
        margin-bottom: 15px;
    }
    .container-graficas-col-4{
        width: 95% !important;
        max-width: 95% !important;
        margin-left: 2.5%;
        flex: initial !important;
        float: none !important;
    }
    .graphic-render-indicadores-col{
        width: 50%;
        height: 200px;
    }
    #descargar_informe_btn,#simular_seguro_btn,
    #volver_calculadora_btn{
        width: 250px;
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    /***********************MODAL**************************/
    
    .calc-modal-content{
        width: 90%;
        padding: 10px;
    }
    
    #calculadora-mensaje-login{
        width: 90%;
        
        margin: 20px auto;
        background-size: 40px 40px;
        background-position: 10px center;
    }
    #calculadora-mensaje-login p{
        padding: 10px 0px;
        padding-left: 60px;
        padding-right: 10px;
        font-size: 15px;
    }
}

@media (min-width: 230px) and (max-width: 459px){
    #contenedor_principal{
        margin-top: 5px;
    }
    #container-header{
        height: 650px;
    }
    .container-header-wrap-image{
        height: 100%;
        background-size: auto 100%;
    }

    .paso-text{
        font-size: 14px;
        padding-left: 35px;
    }
    .paso-ball{
        width: 10px;
        height: 10px;
        left: 10px;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
    }
    .paso-actual .paso-ball::before{
        width: 20px;
        height: 20px;
        left: -5px;
        top: -5px;
    }
    .paso-actual .paso-ball::after{
        width: 10px;
        height: 10px;
        left: 0px;
        top: 0px;
    }

    #campo-6 .form-group-input-cont,
    #campo-6 .form-group-radio-cont{
        height: 80px;
    }
    #campo-6 .form-group-radio-cont{
        padding: 0px 5px;
    }
    #campo-6 .form-group-radio-input-col{
        width: 50%;
        height: 38px;
        float: left;
        height: 39px;
    }
    #campo-6 .form-group-radio-input-col-label{
        font-size: 15px;
    }
    .form-group-label{
        font-size: 13px;
        line-height: 12px;
        margin-bottom: 5px;
    }
}

@media (min-width: 230px) and (max-width: 359px){
    #container-header{
        height: 680px;
    }
    #calculadora-mensaje-login{
        width: 100%;
        
        margin: 20px auto;
        background-image: none !important;
    }
    #calculadora-mensaje-login p{
        padding: 10px 10px !important;
        font-size: 15px;
    }
}