@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');

*

{

    box-sizing: border-box;

}



body,
html

{

    padding: 0;

    margin: 0;

    height: 100%;

    width: 100%;

    background: #f1f1f1;

    font-family: 'Hind', sans-serif;

    /* 

    font-family: 'Open Sans', sans-serif;   

    */

}



h1, p 

{

    margin: 0;

    padding: 0;

}



.container-main

{

    max-width: 42vw;

    width: 100%;

    margin: 0 auto;

}



.container-main .img-bg

{

    background-image: url(../img/001.jpg);

    background-size: cover;

    height: 140px;

    border-radius: 10px;

}



.info

{

    padding: 20px 40px 20px 20px;

    border: 1px solid #ccc;

    border-radius: 10px;

    margin-top: 12px;

    border-top-width: 10px;

    border-top-color: #7f413f;

}

.info h1

{

    margin-bottom: 10px;

    letter-spacing: -.5px;

    font-weight: 400;

    font-size: 30px;

}



p 

{

    font-family: 'Open Sans', sans-serif;

    font-size: 14px;

    line-height: 28px;

}



.box

{

    border: 1px solid #ccc;

    padding: 20px;

    height: auto;

    border-radius: 10px;

    margin-top: 12px;

}



.box label

{

    display: block;

    margin-bottom: 20px;

}



.box input

{

    background: transparent;

    width: 50%;

    padding: 10px 0 10px 0;

    transition: all .3s;

    border: 0;

    border-bottom: 2px solid #ddd;

}

.box input:focus

{

    border-bottom: 2px solid #7f413f;

    width: 40%;

}



.box input[type="time"]

{

    width: 20%!important;

}


input.dateInput

{

    width: 24%;

}

:focus

{

    outline: 0;

}



.box small

{

    display: block;

    color: #aaaaaa;

    font-size: 12px;

}

.inputRadioSpan

{

    display: block;

}

input[class="inputRadio"]

{

    width: inherit;

}

input[class="inputRadio"]:focus{

    width: inherit;
}

.btnCad

{

    padding: 10px 20px;

    background: #7f413f;

    color: white;

    border: 0;

    border-radius: 5px;

    cursor: pointer;

    margin-top: 10px;

}

@media(max-width: 768px){
    .container-main

{

    max-width: 70vw;
    width: 100%;
    margin: 0 auto;

}

.container-main.info{
    margin-top: 10px;
}
}

@media(max-width: 435px){
    .container-main
{
    max-width: 90vw;
    width: 100%;
    margin: 0 auto;
}
.info h1 {
    font-size: 24px;
}

.box input

{
    width: 100%;
}

.box input:focus

{
    width: 80%;
}

input.dateInput,
input.dateInput:focus {
    width: 100%;
}

.box input[type="time"] {
    width: 100%!important;
}

input[class="inputRadio"]
 
{

    width: inherit;

}

input[class="inputRadio"]:focus{

    width: inherit;
}
}

@media(max-width: 375px){

.info h1 {
    font-size: 17px;
    text-align: center;
}

.info p{
    text-align: center;
    font-size: 13px;
}
}