:root {
    --blue: #212e5c;
    --gold: #eebc3d;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .container {
       width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
       width: 1170px;
    }
}
@media (min-width: 1400px) {
    .container {
       width: 1400px;
    }
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
}
body {
    min-height: 100%;
    height: 100%;
    margin: 0;
}
h1,h2,h3,h4,h5,h6{
    margin:0;
}
p {
    margin: 0;
    font-size: 1.2em;
    font-weight: 500;
}
select:focus,
input:focus{
    outline:none;
}
.none{
    display: none;
}
.show{
    display: flex;
}
#header{
    padding: 15px 0;
}
#banner{
    position: relative;
}
#banner .container{
    display: flex;
    flex-wrap: wrap;
}
#banner .container > div{
    width: 50%;
}
#banner .container .left{
    padding-top: 30px;
}
#banner .container .left h1{
    color:var(--blue);
    font-weight: 800;
    font-size: 5em;
    margin-bottom: 30px;
}
#banner .container .left h1 span{
    color:#527dbe;
}
#banner .container .left p{
    font-size: 1.5em;
    margin-bottom: 30px;
}
#banner .container .left a{
    background:var(--blue);
    color:#fff;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 600;
    display: inline-flex;
    padding: 13px 38px;
    border-radius: 35px;
}

#banner .container .right{
    text-align: right;
}
#banner .container .right img{
    max-width: 570px;
}
#simulador-credito{
    background:var(--blue);
    padding:60px 0;
}
#simulador-credito .container h2{
    text-align: center;
    color:#fff;
    font-size: 2em;
    margin-bottom: 15px;
}
#simulador-credito .container > p{
    text-align: center;
    color:var(--gold);
    margin-bottom: 15px;
}
#container-simulador{
   background:#fff; 
   border-radius: 20px;
   padding:10px 30px;
}
#container-simulador #top{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    justify-content: space-evenly;
}
#container-simulador .insitucion{
    text-align: center;
}
#container-simulador .insitucion > div{
    padding: 10px;
    border-radius: 100%;
    /*background: rgb(81,122,186);
    background: linear-gradient(90deg, rgba(81,122,186,1) 0%, rgba(37,53,101,1) 50%);*/
}
#container-simulador .insitucion img{
    max-width: 120px;
}
#container-simulador .insitucion a{
    display: inline-block;
    background:var(--blue);
    color:var(--gold);
    padding: 5px 23px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition:all 350ms ease-in;
}
#container-simulador .insitucion a:hover{
    opacity: 0.8;
}
#container-simulador h3{
    width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1.7em;
    color: var(--blue);
    text-align: center;
}
#container-simulador label{
    position: relative;
}
#container-simulador label:after{
    content:'';
    width: 18px;
    height: 18px;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAADJElEQVR4nO2ZS2sUQRDHBx8Hvfm6+PgUQVm1a1fxK/hCP4iaixdfFxEkJoZgRBSVhIjGEMJWr6sInrwoEURNzMYNmGS6iQEzmxxsqX2EmNnN9PT0zqywBXXa7e7fv7u6u7rGcdrWtrZFNjVwarPA9GHJWafgbEgifBIIUiCsVF1KhPHqb5fc7NGUuuxscpI2MQYHJMINiVCUHFQoR/ZDcnbdzWf2xw6+OMr2SA69gsNyaPB1Lip9dP/CE7tigZeYPic4iKjgfiHMFQhnmgau3ndslcj6bINLf2j1qHxmi1X4meGO7RJhtOnwvOZshMa0OPNxwsOqCCsrEUvY8IbeHREezicIr8hFNn3aCJ6ONYFsPnEBnLmL+czu8LPPoTdpeFkTgawrFDzdjjYuKYurUHJ5ap/+7FN60ALg8l8R17TgKcmq5CnJQ8u1jlCkpDFQQCWrbAFg7neXw6Hg8OGsU7dDb7JfLU3cMwbyJvuVN/UozCpc1FgBeKY7eM2WJvoM4O+vttcWgTAYvAII42HgV0V80xfhTT7wtfe0RLCPwSsQlCrnMmpl7o0PoCziy51g+MKTum2XZ1+X+96oLV2sOgKCz//c8cYivt5tDP/9YQP4V+U+de4DOwICRfSs+39alaYH68P/zCmZO6YVeroC9F9bDUX8Ub8/39KAR2147RDS2cT6Im6qUvF5XfjSzEhgzBtuYjYUrtONw6kufHHYAB7oGB2wepGZiCgVX5jB8/IeuBAogIpORgI0RFA40Z4w7X8e0wf1kjnOpm2L8ApPjcFlxQva1TyqmEUabJ0Ib+pxVHglEK5qwVt70FRFhErWuKUHTWUVoDvqwKabVfoEwG0nrC2MpXYKDnM2ACLOvmtcNxWcnU1agMvZSSeKUa0yudmH8KFT/+OF3iPHMvxLa0XecnGXs5HY4BGGp9+ltjk2jWbDysmkETbKdnl9rVGtshklR8FhNvKGDXXEIuuiCyYyPDKPZn3hLdvhxG10O1LFzDB3KgiEK/PZI3udpI2SLCo6Ud2GSh/08KCXHaUjVRcC4QP9RikxZZUt8Zm1bW1z/n/7C1tnNpkCUXXpAAAAAElFTkSuQmCC);
    background-size: cover;
    pointer-events: none;
    right: 0;

}
#container-simulador select{
    appearance: none;
    border:none;
    font-size: 1.2em;
    padding-right: 18px;
    border-bottom: 2px solid var(--gold);
}
#container-simulador .show p{
    margin-right: 10px;
    font-weight: 400;
}
#container-simulador .show label{
    margin-right: 10px;
}
#container-simulador #middle{

    flex-wrap: wrap;
    justify-content: space-between;
}
#container-simulador #middle .tipo-credito{
    width: calc(100% / 3 - 15px);
    margin-bottom: 25px;
    justify-content: center;
}
#container-simulador #middle .tipo-credito button{
    background: #ffffff;
    color: var(--blue);
    font-size: 1.3em;
    padding: 11px 24px;
    border-radius: 20px;
    width: 100%;
    max-width: 300px;
    font-weight: 800;
    border: solid 2px var(--gold);
    cursor:pointer;
    transition: all 350ms ease-in;
}
#container-simulador #middle .tipo-credito button:hover,
#container-simulador #middle .tipo-credito button.credito-selecionado{
    background: var(--blue);
    color: #fff;
    border: solid 2px var(--blue);
}
#container-simulador.creditos-container .insitucion img{
    max-width: 80px;
    filter: brightness(0%);
}
#form-comparador{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 30px 0;
}
.form-field{
    display: flex;
    flex-direction: column;
    width: calc(100% / 4 - 15px);
    margin-bottom: 15px;
    padding:0 15px;
}
.form-field label{
    margin-bottom: 15px;
    font-weight: 600;
    color:var(--blue);
}
.form-field label:after{
    display: none;
}
.form-field input,
.form-field select{
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 1.1em;
    border: none;
    border-bottom: solid 2px var(--gold);
    margin-top: auto;
}
#form-comparador #inputcontainer{
    width: 100%;
    max-width: 853px;
    display: flex;
    justify-content: flex-end;
}
#form-comparador #inputcontainer input{
    border: none;
    background:var(--blue);
    color:#fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    padding: 6px 25px;
    font-size: 1em;
    border-radius: 25px;

}
#container-respuesta {
    display: flex;
    flex-wrap: wrap;
    min-height: calc(100% - 222px);
}
#container-respuesta #sidebar{
    width: 100%;
    max-width: 350px;
    background: var(--blue);
    padding: 15px;
    color:#fff;
    display: flex;
    flex-direction: column;
}
#container-respuesta #sidebar h3{
    margin-bottom: 10px;
}
#container-respuesta #sidebar h2{
    align-self: center;
}
#container-respuesta #sidebar img{
    max-width: 150px;
    align-self: center;
}
#container-respuesta #sidebar #datos-asesor{
    display: flex;
    flex-direction: column;
}
#container-respuesta #sidebar #datos-asesor a{
    color:#fff;
    text-decoration: none;
    margin-bottom: 16px;
}
#container-respuesta #sidebar #datos-asesor a svg{
    fill:#fff;
}

#container-respuesta #info-respuesta{
    flex: 1 1 0;
    padding: 0 15px;
}
#container-respuesta #info-respuesta h2{
    text-align: center;
    color:var(--blue);
}
#respuestas{
    display: flex;
    flex-direction: column;
}
.respuesta{
    display: flex;
    justify-content: space-between;
    border: solid 2px var(--blue);
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
.respuesta .col{
    flex-basis: 25%;
    padding: 10px 0;
    position: relative;
}
.respuesta .col:first-child{
    display: flex;
}
.respuesta img{
    max-width: 170px;
    margin: auto;
    vertical-align: middle;
}
.respuesta .col:not(:last-child):after{
    content:'';
    position: absolute;
    top:0;
    right: 0;
    height: 100%;
    width: 2px;
    background:var(--blue);
}
.respuesta .col h3{
    margin-bottom: 10px;
}
.respuesta .col a{
    display: inline-block;
    background: var(--blue);
    color: var(--gold);
    padding: 3px 15px;
    border-radius: 20px;
    text-decoration: none;
}
#footer{
    padding: 20px;
    text-align: center;
}