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

*{outline: none;box-sizing: border-box;font-family: 'Open Sans', sans-serif;}
input, select{font-family: 'Open Sans', sans-serif;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    /*font-size: 100%;*/
    /*font: inherit;*/
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{text-decoration: none;}
button{cursor: pointer;font-size: 1em;}
img{max-width: 100%;}

.container{display: block;width: 100%;float: left;}
.content{display: flex;flex-direction: column;width: 500px;max-width: 96%;margin: 0 auto;}
.bg_home{background: transparent url("./background-1.png") center center no-repeat;background-size: cover;min-height: 100vh;}

.main_header{margin: 10% 0;}
.main_header img{width: 80px;}

.main_info{line-height: 1.4em;margin-bottom: 20%;}
.main_info h1{margin-bottom: 15px;font-weight: 300;color: #fff;}
.main_info p{font-size: .9em;color: rgba(255,255,255,.8);}
.main_info p b{font-weight: 700;color: #fff;}

.main_form{margin-bottom: 10%;}
.form_home label{display: flex;flex-direction: column;width: 100%;margin-bottom: 40px;background: rgba(255,255,255,.85);border-radius: 4px;padding: 5px;}
.form_home label span{margin-bottom: 3px;font-size: .7em;color: #3a3a3a;font-weight: 700;}
.form_home label select, .main_form label input{width: 100%;height: 40px;background: transparent;border: none;}
.form_home label input{letter-spacing: 1.1em;font-weight: 700;font-size: 1.3em;}
.form_home label input::placeholder{letter-spacing: initial;font-weight: 300;font-size: .9em;}
.form_home button{display: flex;align-items: center;justify-content: center;border-radius: 35px;border: none;background: #ff0000;font-weight: 600;color: #fff;width: 100%;height: 45px;}
.form_home button:hover{background: #ce0000;transition: .3s ease-in-out;}

.styled {display: flex;align-items: center;justify-content: center;border-radius: 35px;border: none;background: #ff0000;font-weight: 600;color: #fff;width: 100%;height: 45px;}
.styled:hover{background: #ce0000;transition: .3s ease-in-out;}



.dt_header{background: #ff0000;padding: 15px 0;}
.dt_header .content{justify-content: space-between;flex-direction: row;align-items: center;}
.dt_header .content img:first-child{width: 115px;height: auto;}
.dt_header .content img:last-child{width: 22px;height: auto;}

.dt_info{line-height: 1.4em;margin-bottom: 10%;background: #f9f9f9;padding: 10% 0 20px 0;box-shadow: 0 1px 5px 1px rgba(0,0,0,.1)}
.dt_info h1{margin-bottom: 15px;font-weight: 300;color: #ff0000;}
.dt_info p{font-size: .9em;color: #6a6a6a;}
.dt_info p b{font-weight: 700;}

.dt_form{margin-bottom: 10%;}
.dt_form label{margin-bottom: 40px;display: flex;flex-direction: column;width: 100%;}
.dt_form label span{margin-bottom: 5px;font-size: .7em;color: #999;}
.dt_form label input{border: 1px solid #ccc;border-radius: 4px;box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 1px rgba(0,0,0, .1);height: 40px;letter-spacing: initial;padding: 0 10px;font-size: 1em;font-weight: 400;}
.dt_form label input::placeholder{font-size: .9em;}
.dt_form label small{margin-top: 5px;font-size: .8em;color: #ff000090;line-height: 1.4em;}

.block_firma1{display: flex;flex-direction:column;margin-bottom: 40px;}
.block_firma1 span{margin-bottom: 30px;font-size: .9em;color: #ff0000;text-align: center;font-weight: 700;}
.block_firma1 .boxes{display: flex;justify-content: space-between;}
.block_firma1 input{height: 40px;border-radius: 4px;border: 1px solid #ccc;width: 10%;text-align: center;font-weight: 700;font-size: 1.5em;}
.block_firma1 input.transparent{background: transparent;border-color: transparent;}

.aviso_firma2{display: flex;justify-content: center;align-items: center;padding: 5px;border: 1px solid #900;background: #ff000030;border-radius: 4px;margin-bottom: 40px;color: #900;font-size: .85em;line-height: 1.4em;font-weight: 600;}
.aviso_firma2 img{width: 32px;margin-right: 5px;}

.final_check{display: block;margin: 0 auto;}

.select_value{display: flex;margin-bottom: 30px;width: 100%;}
.select_value .boxes{display: flex;justify-content: space-between;font-weight: 600;color: #fff;background-color: #f1f1f1;padding: 10px;border-radius: 5px;width: 100%;box-shadow: 0 1px 3px rgba(0,0,0,.6);}
.select_value .boxes label{width: 33%;display: flex;align-items: center;justify-content: center;color: #3a3a3a;flex-direction: row;background: transparent;margin-bottom: 0;}
.select_value .boxes label input{margin-right: 10px;border: none;box-shadow: none;height: 25px;}
.select_value .boxes label p{font-size: .9em;}

.loader,
.loader:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
}
.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    /*text-indent: -9em;*/
    border-top: 0.4em solid rgba(255, 0, 0, 0.2);
    border-right: 0.4em solid rgba(255, 0, 0, 0.2);
    border-bottom: 0.4em solid rgba(255, 0, 0, 0.2);
    border-left: 0.4em solid #ff0000;
    -webkit-transform: translateZ(8);
    -ms-transform: translateZ(8);
    transform: translateZ(8);
    -webkit-animation: load8 0.5s infinite ease-in-out;
    animation: load8 0.5s infinite ease-in-out;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media only screen and (min-width: 800px){
    .main_header{margin: 20px 0;}
    .main_info{margin-bottom: 40px;}
    .dt_info{margin-bottom: 30px;padding: 20px 0 20px 0;}
    /*.bg_home{background: transparent url("../images/background-1.png") center center no-repeat;background-size: cover;min-height: 100vh;}*/
    .bg_home{background: url("./background.jpg") center center no-repeat;background-size: cover;}
}