body{
        font-size: 18px;
        margin: 0px;
        padding: 0px;
    }

    :root {
        
        /* font */
        --font: 'open sans';

        /* font weight */
        --font-bold: 700;
        --font-semibold: 600;
        --font-medium: 500;
        --font-regular: 400;
        --font-extralight: 200;

        /* colores */
        --color-primary: #333333;
        --color-secondary: #003b5c; 
        --color-black: #000; 
        --color-darkgrey: #333;
        --color-white: #fff; 
        --color-tertiary: #888888;
        --color-lightgrey: #f0f0f0; 
        --color-success: #5cac20;
        --color-light-primary: #f0f0f0; 
        --color-light-secondary: #e6f7fa; 
        
    }
    *{
        box-sizing: border-box !important;
    }

    .btn{
        display: inline-block;
        font-weight: var(--font-semibold);
        color: var(--color-white);
        font-size: 20px;
        padding: 5px 30px;
        /*border-radius: 25px;*/
        letter-spacing: 1px;
        cursor: pointer;
    }
    .btn-calculadora{
        display: inline-block;
        font-weight: 400;
        color: var(--color-white);
        font-size: 15px;
        padding: 5px 30px;
        /*border-radius: 25px;*/
        letter-spacing: 1px;
        margin: 0.5em 0em;
    }
    .btn:hover{
        background-color: var(--color-darkgrey);
    }
    .btn-mas{
        background-image: url('../img/ico-btn-mas.svg');
        background-position: 20px center;
        background-repeat: no-repeat;
        background-size: 15px;
        padding-left: 50px;
    }
    .btn-enviar{
        background-image: url('../img/ico-btn-enviar.svg');
        background-position: 10px center;
        background-repeat: no-repeat;
        background-size: 15px;
        padding-right: 25px;
    }
    .btn-llamame{
        padding: 6px 30px !important;
    }
    .btn-tel{
        background-image: url('../img/ico-btn-tel.svg');
        background-position: 10px center;
        background-repeat: no-repeat;
        background-size: 15px;
        padding-right: 25px;
    }
    .btn-primary{
        background-color: var(--color-primary);
        border: 3px solid var(--color-primary);
    }
    .btn-secondary{
        background-color: var(--color-secondary);
        border: 3px solid var(--color-secondary);
    }

    .select-css {
        display: block;
        background-color: var(--color-white);
        padding: 0.4em 0.625em;
        border: 1px solid var(--color-lightgrey);
        /*border-radius: 4px;*/
        font-size: 0.9em;
        color: var(--color-primary);
        width: 100%;
        max-width: 100%; /* useful when width is set to anything other than 100% */
        box-sizing: border-box;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');		
        background-repeat: no-repeat;
        background-position: 98% center;
        background-size: 10px;
    }
    /* Hide arrow icon in IE browsers */
    .select-css::-ms-expand {
        display: none;
    }
    /* Hover style */
    .select-css:hover {
        border-color: #888;
    }
    /* Focus style */
    .select-css:focus {
        outline: none;
    }
    
    /* Set options to normal weight */
    .select-css option {
        font-weight:normal;
    }
    
    /* Support for rtl text, explicit support for Arabic and Hebrew */
    *[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
        background-position: left .7em top 50%, 0 0;
        padding: .6em .8em .5em 1.4em;
    }
    
    /* Disabled styles */
    .select-css:disabled, .select-css[aria-disabled=true] {
        color: graytext;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
        linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    }
    
    .select-css:disabled:hover, .select-css[aria-disabled=true] {
        border-color: #aaa;
    }

    #calculadora-express{
        float: left;
        width: 100%;
        font-family: var(--font);
        font-weight: var(--font-extralight);
        background-color: #b1b1b1;
        padding: 1em 0em;
    }	
    #calculadora-express .datos{
        float: left;
        width: 100%;
    }
    #calculadora-express .datos .seccion{
        float: left;
        width: 100%;
        background-color: var(--color-primary);
        color: var(--color-white);
        padding: 0.5em 1.25em;
        font-weight: var(--font-bold);
        /*border-radius: 4px;*/
        margin-bottom: 5px;
    }


    .bloque{
        float: left;
        width: 100%;
        margin-bottom: 0.5em;
        padding: 1em 0em;

    }
    .bloque .campos{
        float: left;
        width: 100%;
        /*padding: 1.5em 0em;*/
        padding: 0em 0em;
    }
    .bloque .campos-titulares{
        padding: 0em 0em !important;
    }
    .bloque .campos-add{
        padding: 0em 0em !important;
    }
    .bloque .campos .caption{
        float: left;
        width: 100%;
        padding:  0em 1em;
        margin-bottom: 0.5em;
        border-bottom: 2px solid var(--color-secondary);
    }
    .bloque .campos .caption_link{
        float: left;
        width: 100%;
        padding:  0.2em 1em;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        border-top: 1px solid var(--color-secondary);
        border-bottom: 1px solid var(--color-secondary);
        cursor: pointer;
        font-weight: 400;
        font-size: 1.3em;
        color: var(--color-primary);
    }
    .bloque .campos .caption_link:hover{
        background-color: var(--color-white);
    }
    .bloque .campos .caption_link .txt{
        float: left;
        width: 100%;
        font-size: 0.6em;		
        padding:  0em 0em;
        text-align: center;
    }
    .bloque .campos .caption .txt{
        float: left;
        width: 100%;
        font-size: 0.6em;		
        padding:  0em 0em;
    }
    .bloque .campos .caption .action .titular-delete{
        float: right;
        width: 30px;
        height: 30px;
        background-image: url('../img/ico-titular-delete.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 30px;
        /*border-radius: 100%;*/
        border: 1px solid var(--color-lightgrey);
    }
    .bloque .campos .anadir{
        float: left;
        width: 100%;
        padding: 1em 0em;
        margin-top: 1em;
        border-top: 2px solid var(--color-secondary);
        background-image: url('../img/ico-titular-add.svg');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 23px;
        padding-left: 30px;
        color: var(--color-primary);
        font-weight: var(--font-medium);
        box-sizing: border-box;
        cursor: pointer;
    }
    .pad{
        padding: 0em 0em !important;
    }
    .bloque .campos .item{
        float: left;
        cursor: pointer;
    }
    .bloque .campos .item-100{
        width: 100%;
        padding:  0.3em 1.25em;
    }
    .bloque .campos .item-50{
        width: 50%;
        padding: 0.3em 1.25em;
    }
    .bloque .campos .item-33{
        width: 33%;
        padding: 0.3em 1.25em;
    }
    .bloque .campos .item-25{
        width: 25%;
        padding: 0.3em 1.25em;
    }
    .bloque .campos .item-20{
        width: 20%;
        padding: 0.3em 1.25em;
    }
    .bloque .campos .item-50-btn{
        width: 50%;
        padding: 0.3em 1.25em;
    }
    .bloque .campos .item .pregunta{
        float: left;
        width: 100%;
        font-size: 0.8em;
        color: var(--color-white);
        font-weight: var(--font-bold);
        text-align: left;
        margin-bottom: 0.3em;
    }
    .pregunta-top{
        text-align: center !important;
        font-size: 1em !important;
        margin-bottom: 20px !important;
    }
    .mb{
        margin-bottom: 0.2em;
    }
    .bloque .campos .item .respuestas{
        float: left;
        width: 100%;
    }
    .bloque .campos .item .respuestas .item{
        float: left;
        display: table;
        width: 50%;
        margin: 0.3em 0em;
        text-align: center;
        font-size: 0.8em;
        line-height: 1.1em;
        font-weight: var(--font-bold);
        height: 8.25em;
        vertical-align: middle;
    }
    .bloque .campos .item .respuestas .item-tipo-titular{
        height: 4.25em !important;
    }
    .bloque .campos .item .respuestas .item a{
        display: table-cell;
        width: 100%;
        vertical-align: middle;
        padding: 0.5em;
        color: var(--color-primary);
        background-color: var(--color-white);
        border: 1px solid #b1b1b1;
    }
    .bloque .campos .item .respuestas .item a:hover{
        border: 1px solid var(--color-secondary);
    }
    .bloque .campos .item .respuestas .item a.active{
        color: var(--color-white);
        background-color: var(--color-secondary);
        border: 3px solid var(--color-secondary);
    }
    .bloque .campos .item .respuestas .campo-form{
        width: 100%;
        background-color: var(--color-white);
        padding: 0.4em 0.625em;
        border: 1px solid var(--color-lightgrey);
        /*border-radius: 4px;*/
        font-size: 0.8em;
    }
    #calculadora-express .resul{	
        float: left;
        width: 100%;
    }
    #calculadora-express .resul .box{		
        float: left;
        width: 100%;
        background-color: var(--color-white);
        padding: 2.5em;
    }
    #calculadora-express .resul .box .txt{		
        float: left;
        width: 100%;
        color: var(--color-secondary);
        font-weight: var(--font-semibold);
    }
    #calculadora-express .resul .box .tardaras{		
        float: left;
        width: 100%;
        margin-top: 2em;
        background-image: url('../img/ico-tardaras-time.svg');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 0.875em;
        padding-left: 1.375em;
        font-size: 0.8em;
    }
    #calculadora-express .resul .como{		
        float: left;
        width: 100%;
        padding: 2.5em;
    }
    #calculadora-express .resul .como .txt{		
        float: left;
        width: 100%;
        color: var(--color-primary);
        font-weight: var(--font-semibold);
        margin-bottom: 1em;
    }
    #calculadora-express .resul .como p{
        float: left;
        width: 100%;
        font-size: 0.9em;		
    }


    #calculadora-express .resul_datos{	
        float: left;
        width: 96%;
        margin: 0px 2%;
    }
    #calculadora-express .resul_datos #id_eleccion2{
        display: none;
    }
    #calculadora-express .resul_datos #id_quiero, 
    #calculadora-express .resul_datos #id_eleccion1, 
    #calculadora-express .resul_datos #id_eleccion2, 
    #calculadora-express .resul_datos #id_comunidad_autonomoa, 
    #calculadora-express .resul_datos #id_importe_vivienda,
    #calculadora-express .resul_datos #id_aportacion,
    #calculadora-express .resul_datos #id_gastos_compra{
        opacity: 0.2;
    }

    #calculadora-express .resul_datos #id_quiero2, 
    #calculadora-express .resul_datos #id_importe_vivienda2{
        opacity: 0.2;
    }

    #calculadora-express .resul_datos #id_quiero3, 
    #calculadora-express .resul_datos #id_importe_vivienda3{
        opacity: 0.2;
    }

    #calculadora-express .resul_datos #id_calculos,
    #calculadora-express .resul_datos #id_titulares {
        display: none;
    }

    #calculadora-express .resul_datos #id_calculos2,
    #calculadora-express .resul_datos #id_titulares2 {
        display: none;
    }

    #calculadora-express .resul_datos #id_calculos3,
    #calculadora-express .resul_datos #id_titulares3 {
        display: none;
    }


    #calculadora-express .resul_datos .box{		
        float: left;
        width: 100%;
        background-color: var(--color-white);
        padding: 1.5em 2em;
    }	

    #calculadora-express .resul_datos .box #datos_resultado_parametros{
        float: left;
        width: 48%;
        margin-right: 2%;
        font-size: 14px !important;
        margin-top: 40px;
    }
    #calculadora-express .resul_datos .box #datos_resultado_cuotas{
        float: left;
        width: 48%;
        margin-left: 2%;
        margin-top: 40px;
    }
    #calculadora-express .resul_datos .box #datos_resultado_cuotas .btn{
        float: right;
        width: 100%;
        margin-top: 40px;
        text-decoration: none;
        box-sizing: border-box;
        text-align: center;
    }

    #calculadora-express .resul_datos .box .text-resultado{
        float: left;
        width: 100%;
        text-align: center;
    }
    #calculadora-express .resul_datos .box .text-resultado .tit{
        float: left;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        padding: 10px 0px;
        color: var(--color-primary);
    }
    #calculadora-express .resul_datos .box .text-resultado .abs{
        float: left;
        width: 100%;
        text-align: center;
        color: var(--color-black);
    }
    #calculadora-express .resul_datos .box .linea{	
        float: left;
        width: 100%;
        margin: 0.3em 0em;
        border-bottom: 1px solid var(--color-light-primary);
        padding-bottom: 0.5em;
    }
    #calculadora-express .resul_datos .box .linea .concepto{	
        float: left;
        width: 55%;
        text-align: left;
        color: var(--color-primary);
        font-weight: var(--font-regular);
    }
    #calculadora-express .resul_datos .box .linea .concepto_25{	
        float: left;
        width: 25%;
        text-align: left;
        color: var(--color-primary);
        font-weight: var(--font-regular);
    }
    #calculadora-express .resul_datos .box .linea .concepto_100{	
        float: left;
        width: 100%;
        text-align: left;
        color: var(--color-primary);
        font-weight: var(--font-regular);
    }
    #calculadora-express .resul_datos .box .linea .dato{	
        float: left;
        width: 45%;
        text-align: right;
        color: var(--color-secondary);
        font-weight: var(--font-regular);
    }
    #calculadora-express .resul_datos .box .linea .dato_75{	
        float: left;
        width: 75%;
        text-align: right;
        color: var(--color-secondary);
        font-weight: var(--font-regular);
    }
    #calculadora-express .resul_datos .box .linea .dato_100_text{	
        text-align: left !important;
        line-height: 20px;
        margin-top: 7px;
    }
    #calculadora-express .resul_datos .box .linea .dato_100{	
        float: left;
        width: 100%;
        text-align: right;
        color: var(--color-secondary);
        font-weight: var(--font-regular);
        text-align: center;
    }
    .text-regular{
        font-weight: var(--font-regular) !important;
    }
    #calculadora-express .resul_datos .box .linea .dato div, #calculadora-express .resul_datos .box .linea .dato span{
        display: inline;
    }
    #calculadora-express .resul_datos .box .linea .detalle .concepto, #calculadora-express .resul_datos .box .linea .detalle .dato{
        font-size: 0.8em !important;
        color: var(--color-darkgrey) !important;
    }
    #calculadora-express .resul_datos .box .linea .detalle .concepto{
        padding-left: 5% !important;
    }
    #calculadora-express .resul_datos .box .linea .detalle .dato div, #calculadora-express .resul_datos .box .linea .detalle .dato span{
        display: inline;
    }
    #calculadora-express .resul_datos .box .linea .detalle .concepto div, #calculadora-express .resul_datos .box .linea .detalle .concepto span{
        display: inline;
    }
    #calculadora-express .resul_datos .calculos .dato_calculo div, #calculadora-express .resul_datos .calculos .dato_calculo span{
        display: inline;
    }
    #calculadora-express .resul_datos .calculos{	
        float: left;
        width: 100%;
        background-color: var(--color-secondary);
        padding: 1.5em 2em;                
        color: var(--color-white);
    }
    #calculadora-express .resul_datos .calculos .concepto_calculo{	
        float: left;
        width: 55%;
        text-align: left;
        color: var(--color-white);
    }
    #calculadora-express .resul_datos .calculos .concepto_calculo_80{	
        width: 80% !important;
    }
    #calculadora-express .resul_datos .calculos .dato_calculo{	
        float: left;
        width: 45%;
        text-align: right;
        color: var(--color-white);
        font-weight: var(--font-bold);
    }
    #calculadora-express .resul_datos .calculos .dato_calculo_20{	
        width: 20% !important;
    }
    #pregunta_comunidad,
    #pregunta_eleccion1,
    #pregunta_eleccion2,
    #pregunta_numeros,
    #pregunta_siguiente{
        display: none;
        margin-top: 20px;
    }
    #titulares{
        display: none;
    }
    #resultado{
        display: none;
    }
    #msg_titulares, #msg_enviar{
        display: inline-block;
        width: 100%;
        padding: 0.5em 0em;
        color: #c00;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
    }
    #resultado_gracias{		
        float: left;
        width: 100%;
    }
    #resultado_gracias .tit{		
        float: left;
        width: 100%;
        font-size: 1.9em;
        line-height: 32px;
        text-align: justify;
        font-weight: var(--font-bold);
        color: var(--color-primary);
    }
    #resultado_gracias .tit2{		
        float: left;
        width: 100%;
        font-size: 1.6em;
        padding: 1em 0em;
        line-height: 30px;
        text-align: justify;
        font-weight: var(--font-semibold);
        color: var(--color-secondary);
    }
    #resultado_gracias .desc1{		
        float: left;
        width: 100%;
        text-align: justify;
        font-size: 1.2em;
        line-height: 28px;
        font-weight: var(--font-regular);
    }
    #resultado_gracias .desc2{		
        float: left;
        width: 100%;
        text-align: justify;
        padding: 1em 0em;
        margin-bottom: 1em;
        font-size: 0.8em;
        line-height: 1.5em;
    }
    form input,textarea{
        float: left;
        width: 100%;
        font-family: var(--font-bold);
        font-size: 0.9em;
        margin-top: 0.2em;
        padding: 0.5em 1em;
        box-sizing: border-box;
        background-color: var(--color-lightgrey);
        color: var(--color-primary);
        border: 0px;
        /*border-radius: 8px;*/
        outline: none;
    }




@media only screen and (max-width: 1270px) {

    #calculadora-express .resul_datos .calculos{	
        padding: 1em 1em;                
    }
    #calculadora-express .resul_datos .box #datos_resultado_parametros{
        width: 96%;
        margin-left: 2%;
    }
    #calculadora-express .resul_datos .box #datos_resultado_cuotas{
        width: 100%;
        margin-right: 0px;
        margin-left: 0px;
        font-size: 14px !important;
    }
    #calculadora-express .resul_datos .calculos .concepto_calculo_80{	
        width: 60% !important;
    }
    #calculadora-express .resul_datos .calculos .dato_calculo_20{	
        width: 40% !important;
    }


}

@media only screen and (max-width: 1200px) {
    
    .bloque .campos .item-20{
        width: 33%;
        padding: 0.3em 1.25em;
    }

}

@media only screen and (max-width: 890px) {
    
    .bloque .campos .item-20{
        width: 50%;
        padding: 0.3em 1.25em;
    }

}

@media only screen and (max-width: 640px) {
    
    .bloque .campos .item-20, .bloque .campos .item-33{
        width: 100%;
        padding:  0.3em 1.25em;
    }

    .bloque .campos .item .respuestas .item{
        width: 50%;
        margin: 0.3em 0em;
        font-size: 13px;
        line-height: 13px;
        height: 50px;
    }

    #resultado{
        font-size: 13px !important;
    }
    
}

@media only screen and (max-width: 500px) {

    .bloque .campos .item .respuestas .item{
        width: 100%;
        margin: 2px 0px;
        font-size: 13px;
        line-height: 13px;
        height: 50px;
    }

}