@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Red Hat Display', sans-serif;
}
.sup, .inf{
    width: 100%;
    height: 50vh;
    background: #e6e6e6;
}
.sup img.logo{
    width: 10%;
    position: absolute;
    left: 3%;
    top: -1px;
}
.inf{
    background: linear-gradient(to bottom, #00215F, #00599B);
}
.container{
    width: 75%;
    padding: 10px;
    background: #fff;
    border-radius: 7px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 3px 0px 20px #ebebeb;
}
.container .block{
    display: flex;
    flex-direction: row;
}
.container .block .form-cot,
.container .block .info{
    width: 100%;
    padding: 5px;
}
.container .block .form-cot form{
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, #00215F, #00599B);
    border-radius: 7px;
}
.container .block .form-cot form .inputbox{
    width: 100%;
}
.container .block .form-cot form .inputbox.doble{
    width: 49%;
    float: left;
}
.container .block .form-cot form .inputbox:nth-child(1),
.container .block .form-cot form .inputbox:nth-child(3){
    margin-right: 2%;
}
.container .block .form-cot form .inputbox:nth-child(3) div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.container .block .form-cot form .inputbox p{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.container .block .form-cot form .inputbox input,
.container .block .form-cot form .inputbox select{
    width: 100%;
    margin: 10px 0 5px 0;
    outline: none;
    padding: 5px 10px;
    border-radius: 4px;
    border: none;
    font-size: 15px;
    color: #00215F;
}
.container .block .form-cot form .inputbox input[type="range"]{
    width: 90%;
    padding: 0;
}
.container .block .form-cot form .inputbox span{
    color: #fff;
    font-size: 12px;
}
.container .block .form-cot form .cuota{
    text-align: center;
    color: #fff;
    margin: 15px 0 0 50%;
    width: 70%;
    transform: translateX(-50%);
}
.container .block .form-cot form .cuota h2{
    text-transform: uppercase;
    font-size: 32px;
}
.container .block .form-cot form .cuota h3{
    font-size: 26px;
    border-bottom: 1px solid #fff;
}
.container .block .form-cot form .discleimers{
    color: #fff;
    margin-top: 20px;
}
.container .block .form-cot form .discleimers h5{
    font-size: 14px;
}
.container .block .form-cot form .discleimers ul{
    margin-left: 15px;
}
.container .block .form-cot form .discleimers ul li{
    font-size: 10px;
}
.container .block .info .convenio,
.container .block .info .planillero,
.container .block .form-cot .inputbox #garantia_mayores,
.container .block .form-cot .inputbox #garantia_menores,
.container .block .form-cot .inputbox #garantia_comerciantes,
.container .block .form-cot .inputbox #garantia_profesionales,
.container .block .form-cot .inputbox #garantia_juridicas,
.container .block .form-cot .inputbox #garantia_vehiculos,
.container .block .form-cot .inputbox #garantia_municipalidad,
.container .block .form-cot .inputbox #garantia_segundo,
.container .block .form-cot .inputbox #garantia_tercer,
.container .block .info .mayores,
.container .block .info .menores,
.container .block .info .comerciante,
.container .block .info .profesionales,
.container .block .info .juridica,
.container .block .info .vehiculos,
.container .block .info .municipalidades,
.container .block .info .segundo,
.container .block .info .tercero{
    display: none;
}
.container .block .info .links span{
    font-size: 9px;
    text-transform: uppercase;
    color: #EE2624;
    font-weight: 700;
    border-left: 1px solid #EE2624;
    padding: 0 7px;
    letter-spacing: 0.3px;
}
.container .block .info .links span:first-child{
    border: none;
}
.container .block .info h1{
    text-transform: uppercase;
    color: #00215F;
    margin-top: 10px;
}
.container .block .info p{
    color: #00215F;
    font-size: 13px;
    margin-bottom: 20px;
}
.container .block .info h6{
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 4px;
    background: #00215F;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.container .block .info img{
    margin-top: 20px;
    width: 100%;
    border-radius: 5px;

}
.container .block .info .menu{
    display: flex;
}
.container .block .info .menu a{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 5px;
    padding: 0;
    background: none;
    color: #00215F;
    text-align: center;
    width: 20%;
    text-decoration: none;
}
.container .block .info .menu a img{
    width: 50px;
    margin-top: 10px;
}

/* MODAL */
#modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 15px;
    width: 50%;
    border: none;
}
#modal::backdrop{
    background: rgba(0,0,0,0.75);
}
#modal form{
    width: 100%;
    color: #00215F;
}
#modal form div.inputbox{
    width: 50%;
    float: left;
}
#modal form h1{
    font-size: 1em;
    cursor: pointer;
    text-align: right;
}
#modal form h2{
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5em;
}
#modal form div.inputbox label{
    font-size: 16px;
    letter-spacing: 0.5px;
}
#modal form div.inputbox input,
#modal form div.inputbox select{
    width: 98%;
    padding: 7px 10px;
    outline: none;
    font-size: 14px;
    margin: 3px 0 10px 0;
    border: none;
    background: #e3e3e3;
}
#modal form input[type="submit"]{
    background: #00215F;
    color: #fff;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    margin: 5px 0 0 0;
    border-radius: 5px;
}

@media screen and (max-width: 1440px){
    .container{
        width: 80%;
    }
    .sup img.logo{
        width: 15%;
    }
    #modal{
        width: 70%;
    }
}

@media screen and (max-width: 1024px){
    .container{
        width: 95%;
        padding: 5px;
    }
    .container .block .info .menu a{
        font-size: 13px;
    }
    .container .block .form-cot form .cuota h2{
        font-size: 28px;
    }
}

@media screen and (max-width: 768px){
    .container{
        width: 95%;
        padding: 10px;
    }
    .container .block{
        flex-direction: column-reverse;
    }
    .container .block .form-cot, .container .block .info{
        padding: 5px;
    }
    .container .block .info h1{
        font-size: 28px;
        text-align: center;
    }
    .container .block .info p{
        margin-bottom: 15px;
    }
    .container .block .info img{
        margin-top: 20px;
    }
    #modal{
        width: 80%;
    }
}

@media screen and (max-width: 425px){
    .sup img.logo{
        width: 25%;
    }
    .container{
        top: 10%;
        transform: translate(-50%, 0);
    }
    .container .block .info h1{
        font-size: 22px;
    }
    .container .block .info p{
        text-align: justify;
        font-size: 11px;
    }
    .container .block .info a{
        font-size: 11px;
        padding: 5px 10px;
    }
    .container .block .info .links span{
        font-size: 8px;
    }
    .container .block .form-cot form{
        padding: 10px;
    }
    .container .block .form-cot form .inputbox p{
        font-size: 13px;
    }
    .container .block .form-cot form .inputbox input, .container .block .form-cot form .inputbox select{
        font-size: 12px;
        padding: 5px 10px;
    }
    .container .block .form-cot form .cuota{
        width: 85%;
        margin: 5px 0 0 50%;
    }
    .container .block .form-cot form .inputbox input[type="range"]{
        width: 85%;
    }
    .container .block .form-cot form .cuota h2{
        font-size: 20px;
    }
    .container .block .form-cot form .cuota h3{
        font-size: 18px;
    }
    .container .block .info .links span{
        padding: 0 5px;
    }
    .container .block .info .menu a{
        font-size: 11px;
    }
    .container .block .info .menu a img{
        width: 35px;
    }
    .container .block .form-cot form .discleimers{
        margin-top: 10px;
        font-size: 9px;
    }
    #modal{
        width: 90%;
    }
    #modal form h2{
        font-size: 1.5em;
    }
    #modal form div.inputbox{
        float: none;
        width: 100%;
    }
    #modal form div.inputbox label{
        font-size: 13px;
    }
    #modal form div.inputbox input, #modal form div.inputbox select{
        font-size: 12px;
        padding: 5px 10px;
        margin: 2px 0 5px 0;
    }
    #modal form input[type="submit"]{
        padding: 5px 15px;
        font-size: 12px;
    }
}