@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-UltraLight.woff2') format('woff2'),
        url('../font/Butler-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-Medium.woff2') format('woff2'),
        url('../font/Butler-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-Light.woff2') format('woff2'),
        url('../font/Butler-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-Black.woff2') format('woff2'),
        url('../font/Butler-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-Bold.woff2') format('woff2'),
        url('../font/Butler-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler-ExtraBold.woff2') format('woff2'),
        url('../font/Butler-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Butler';
    src: url('../font/Butler.woff2') format('woff2'),
        url('../font/Butler.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body{background: #00233A; position: static;}
header{position: absolute; width: 100%; display: inline-flex;}
header img{max-width: 205px; margin: 40px calc(50% + 65px) 0 ;}
h1{font-family: Butler, Arial, Helvetica, sans-serif; font-size: 64px; text-align: right; color: #fff; line-height: 77px; margin: 0; font-weight: 700;}
h2, h3, h4{font-family: 'Futura Bk BT', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 30px; color: #f36E24; line-height: 36px; font-weight: 400; margin-left: -5px;}
h3{font-size: 24px; margin-top: 25px;}
h4{font-size: 18px;}

p, a, li, a:visited, label{font-size: 1em; color: #fff; font-family: 'Futura Bk BT', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 400;}
a{text-decoration: underline;}
a:hover{color: #f36E24; transition: all .3s;}
blockquote {margin:30px 0 20px -5px;}
blockquote p{color: #00233A;}

input[type="text"], input[type="email"], button{background: #ffd5bb; box-shadow: #ff8c6b -5px 5px 0 0; border: 1px solid rgba(255,140,107,0); color: #666; font-family: 'Futura Bk BT', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 1em; height: 65px; text-align: center; box-sizing: border-box;}
a.btn,button {background: #f36E24; color: #fff !important; font-size: 1.25em; width: 100%; margin-top: 5px; text-decoration: none;}
a.btn:hover,button:hover{background: #ff8c6b; border: #f36E24; color: #00233A !important; transition: all .3s;}
button:disabled {background: #f36E24; border-color: #f36E24;}
input[type="checkbox"] {cursor: pointer; background: transparent; border: none; display: none; }
.termos{display: inline-flex;}
.termos-checkbox{width: fit-content;}
.termos-empty{width: 35px; height: 35px; background: #ffd5bb; box-shadow: #ff8c6b -5px 5px 0 0; display: block; border: 1px solid rgba(255,140,107,0);}
.termos-label{margin: 5px 0 0 15px;}
.termos-checked{font-size: 10px; max-width: 25px; margin: -28px 0 7px 5px; display: none;}

.termos-container{height: 55vh; overflow-y: scroll; overflow-x: hidden; padding-right: 15px;}
.termos-container ol{padding-left: 15px;}
.termos-container h2,
.termos-container h3, 
.termos-container h4{margin-left: 0; text-align: left;}
.termos-container p{text-align: justify;}

section{height: 100%; padding: 0 !important; display: flex; align-items: center;}
section:first-of-type{background: url(/img/background.webp) no-repeat; background-size: cover;}

.box{background: rgba(243, 110, 36, .5); padding: 150px 20px 150px 60px; width: 535px; margin-left: auto;}
.content{margin: 0 50px;}
.error, .required, #arquivo-input, .content h1, #loading{display: none;}
#loading img{max-width: 200px;}

@media screen and (max-width: 768px){
	header img{margin: 60px auto; align-self: center;}
	.content h1{font-size: 35px; line-height: 125%; display: inline-block; margin: 1em 0;}
	p, h1, h2 {text-align: center;}
	
	.box{display: none;}
	section{display: block;}
	section:first-of-type{height: 145px; background-position: center;}
    .termos-container{height: auto;padding-right: 0; margin: 0 -15px;}
    .termos-container ol{padding-left: 20px;}
    .termos-2 { text-align: center;}
    .termos-2 a.btn{width: 180px; margin: 10px 0 20px; }
}