/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
body{
font-size: 62.5%;
}
h1, h2, h3, h4, h5, h6, p, ul{
margin: 0;
padding: 0;
font-weight: normal;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
input[type="checkbox"] { -webkit-appearance: checkbox; }
input[type="radio"] { -webkit-appearance: radio; }
select { -webkit-appearance:textfield; }
/* ==========================================================================
ESTILOS GERAIS
========================================================================== */
.light{
font-family: 'Gentona';
font-weight: 300;
}
.book{
font-family: 'Gentona';
font-weight: 400;
}
.medium{
font-family: 'Gentona';
font-weight: 500;
}
.bold{
font-family: 'Gentona';
font-weight: bold;
}
body{
font-family: 'Gentona';
font-weight: 400;
}
header{
height: 695px;
background: rgba(0, 48, 82, 0.3);
padding: 0 !important;
z-index: 2;
}
header .ct-logo{
width: 320px;
height: 120px;
position: absolute;
top: 0;
left: 0;
background-size: 100% auto;
}
header .ct-logo img{
position: absolute;
top: 50%;
left: 64px;
transform: translateY(-50%);
width: 167px;
height: auto;
}
header .container{
position: relative;
width: 96%;
max-width: 1248px;
margin: 0 auto;
}
header .container:after{
display: none !important;
}
header .container .textos{
padding-top: 192px;
width: 468px;
}
header .container .textos h1{
font-size: 72px;
line-height: 75px;
color: #fff;
margin: 0 !important;
text-align: left !important;
}
header .container .textos h1 span{
color: #FFC82D;
}
header .container .textos h2{
font-size: 40px;
line-height: 48px;
color: #fff;
padding-top: 10px;
margin: 0 !important;
text-align: left !important;
}
header .container .textos h2 span{
color: #FFC82D;
}
header .container .textos img{
width: 334px;
margin-top: 64px;
}
header .img-campeao{
position: fixed;
right: 0;
top: 0;
width: 772px;
height: 772px;
z-index: 2;
}
header:before{
position: absolute;
left: auto;
right: 0;
top: 0;
width: 750px;
height: 782px;
background-size: 755px auto;
content: '';
}
header .img-campeao img{
width: 100%;
height: auto;
}
.formulario-texto{
position: relative;
display: block;
width: 100%;
padding-bottom: 96px;
background: rgba(0, 48, 82, 0.3);
}
.formulario-texto .container{
position: relative;
width: 96%;
max-width: 1248px;
margin: 0 auto;
}
.formulario-texto .container.interno{
width: 100%;
max-width: 100%;
}
.formulario-texto .container .formulario{
position: relative;
width: 560px;
padding: 48px 32px 48px 32px;
background: #fff;
border-radius: 5px;
margin: 0 !important;
}
#validation-summary{
display: none !important;
}
.formulario-texto .container .formulario iframe{
height: 850px;
}
.formulario-texto .container .formulario.interno{
padding-left: 0;
padding-right: 0;
}
.formulario-texto .container .formulario h2{
font-size: 24px;
line-height: 28px;
color: #003052;
}
.formulario-texto .container .formulario form{
width: 100%;
margin-top: 32px;
}
.formulario-texto .container .formulario .ct-campo{
position: relative;
width: 100%;
height: 56px;
margin-bottom: 16px;
}
.formulario-texto .container .formulario .ct-campo.menor{
width: calc(50% - 5px);
}
.formulario-texto .container .formulario .ct-campo .campo-texto{
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid #E4E4E4;
background-color: transparent;
font-size: 14px;
line-height: 14px;
padding: 0 15px;
color: #666;
outline: none !important;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .ct-campo.foco .campo-texto{
border: 1px solid #666;
}
.formulario-texto .container .formulario .ct-campo.error .campo-texto{
border: 1px solid #CF6679;
}
.formulario-texto .container .formulario .ct-campo label{
position: absolute;
font-size: 14px;
line-height: 14px;
color: #666;
top: 50%;
left: 10px;
padding: 0 5px;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .ct-campo.preenchido label{
font-size: 12px;
line-height: 16px;
letter-spacing: 0.03em;
transform: translateY(-36px);
z-index: 4;
}
.formulario-texto .container .formulario .ct-campo.preenchido label:before{
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
left: 0;
top:8px;
content: '';
}
.formulario-texto .container .formulario .ct-campo.foco label{
color: #666;
}
.formulario-texto .container .formulario .ct-campo.error label{
color: #CF6679;
}
.formulario-texto .container .formulario .ct-campo.preenchido label span{
position: relative;
z-index: 2;
}
.formulario-texto .container .formulario .ct-campo .ct-select{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #E4E4E4;
border-radius: 4px;
overflow: hidden;
}
.formulario-texto .container .formulario .ct-campo.error .ct-select{
border: 1px solid #CF6679;
}
.formulario-texto .container .formulario .ct-campo .ct-select:before{
position: absolute;
right: 0;
top: 0;
width: 54px;
height: 54px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
content: '';
}
.formulario-texto .container .formulario .ct-campo.error .ct-select:before{
background-color: #CF6679;
}
.formulario-texto .container .formulario .ct-campo .ct-select select{
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
border: none;
font-size: 14px;
line-height: 14px;
padding: 0 64px 0 15px;
cursor: pointer;
color: #666;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.formulario-texto .container .formulario .ct-campo .ct-select select option{
color: #666;
}
.formulario-texto .container .formulario .wrap-radio{
padding-top: 0;
margin-bottom: 15px;
padding-left: 0;
}
.formulario-texto .container .formulario .wrap-radio h3{
font-size: 14px;
line-height: 24px;
letter-spacing: 0.01em;
color: #666;
margin-bottom: 15px;
}
.formulario-texto .container .formulario .wrap-radio.error h3{
color: #CF6679;
}
.formulario-texto .container .formulario .wrap-radio label.label-radio{
display: inline-block;
position: relative;
padding-left: 24px;
margin-bottom: 16px;
height: 17px;
cursor: pointer;
font-size: 14px;
line-height: 21px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 110px;
}
/* Hide the browser's default checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark {
position: absolute;
top: 0;
left: 0;
height: 21px;
width: 21px;
border-radius: 5px;
background-color: transparent;
border: 1px solid #E4E4E4;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .wrap-radio.error label.label-radio .checkmark {
border: 1px solid #CF6679;
}
/* On mouse-over, add a grey background color */
.formulario-texto .container .formulario .wrap-radio label.label-radio:hover input ~ .checkmark {
border: 1px solid #E4E4E4;
}
/* When the checkbox is checked, add a blue background */
.formulario-texto .container .formulario .wrap-radio label.label-radio input:checked ~ .checkmark {
border: 1px solid #E4E4E4;
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 5px;
background-color: #FFC82D;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
/* Show the checkmark when checked */
.formulario-texto .container .formulario .wrap-radio label.label-radio input:checked ~ .checkmark:after {
transform: scale(1);
}
.formulario-texto .container .formulario .label-check{
margin-top: 36px;
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 3px;
height: 18px;
cursor: pointer;
font-size: 16px;
line-height: 18px;
letter-spacing: 0.01em;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.formulario-texto .container .formulario .label-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .label-check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
border-radius: 3px;
background-color: transparent;
border: 2px solid #666;
transition: all 0.3s ease-in-out;
}
/* On mouse-over, add a grey background color */
.formulario-texto .container .formulario .label-check:hover input ~ .checkmark {
border: 2px solid #FCB800;
}
/* When the checkbox is checked, add a blue background */
.formulario-texto .container .formulario .label-check input:checked ~ .checkmark {
border: 2px solid #FCB800;
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .label-check .checkmark:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
background-color: #FCB800;
transform: translateY(-50%) translateX(-50%) scale(0);
transition: all 0.3s ease-in-out;
}
/* Show the checkmark when checked */
.formulario-texto .container .formulario .label-check input:checked ~ .checkmark:after {
transform: translateY(-50%) translateX(-50%) scale(1);
}
.formulario-texto .container .formulario .aviso-check{
font-size: 14px;
line-height: 18px;
letter-spacing: 0.01em;
color: rgba(255,255,255,0.87);
padding-left: 30px;
text-align: left;
margin-top: 0;
}
.formulario-texto .container .formulario .bt-submit{
margin-top: 16px;
position: relative;
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro{
position: absolute;
width: 260px;
top: 25px;
right: 0;
display: block;
font-size: 14px;
line-height: 18px;
color: #CF6679;
text-align: center;
margin-top: 0;
opacity: 0;
text-align: right;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro.aberto{
opacity: 1;
}
.formulario-texto .wrapper-formulario .bt-enviar{
display: block;
width: 235px;
height: 64px;
background-color: #FFC82D;
border: none;
border-radius: 32px;
font-size: 16px;
line-height: 64px;
text-align: center;
color: #000;
cursor: pointer;
letter-spacing: 0;
transition: all 0.3s ease-in-out;
box-shadow: none !important;
font-weight: bold !important;
}
.formulario-texto .wrapper-formulario .bt-enviar:hover{
background-color: #E3A601;
color: #000;
}
.plataforma-az{
position: relative;
z-index: 3;
}
.plataforma-az:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 48, 82, 0.7);
mix-blend-mode: multiply;
content: '';
}
.plataforma-az .container{
position: relative;
width: 96%;
max-width: 1056px;
margin: 0 auto;
padding: 96px 0;
z-index: 4;
}
.plataforma-az .container h2{
font-size: 32px;
line-height: 36px;
color: #fff;
text-align: center;
padding-bottom: 64px;
}
.plataforma-az .container h2 b{
color: #FFC82D;
}
.plataforma-az .container .imagem-texto{
width: 100%;
}
.plataforma-az .container .imagem-texto img{
width: 480px;
height: auto;
}
.plataforma-az .container .imagem-texto p{
width: 480px;
font-size: 24px;
line-height: 36px;
color: #fff;
padding-top: 84px;
}
.plataforma-az .container .imagem-texto p b{
color: #FFC82D;
}
.diferenciais{
position: relative;
z-index: 3;
}
.diferenciais:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
content: '';
}
.diferenciais .container{
position: relative;
width: 96%;
max-width: 1344px;
margin: 0 auto;
padding: 96px 0;
z-index: 4;
}
.diferenciais .container h3{
font-size: 24px;
line-height: 36px;
color: #003052;
text-align: center;
padding-bottom: 64px;
}
.diferenciais .container ul{
position: relative;
display: flex;
width: 100%;
justify-content: center;
align-items: flex-start;
gap: 24px;
}
.diferenciais .container ul li{
display: inline-block;
width: 204px;
height: 244px;
background-color: #fff;
border-radius: 12px;
padding: 24px;
}
.diferenciais .container ul li img{
width: 120px;
height: auto;
display: block;
margin: 0 auto;
}
.diferenciais .container ul li p{
color: #003052;
text-align: center;
font-size: 16px;
line-height: 18px;
padding-top: 16px;
}
.cta-formulario{
position: relative;
width: 100%;
background: #fff;
z-index: 3;
padding: 96px 0;
}
.cta-formulario .container{
width: 100%;
}
.cta-formulario .container h3{
font-size: 32px;
line-height: 36px;
color: #003052;
text-align: center;
padding-bottom: 32px;
}
.cta-formulario .container a{
display: block;
width: 300px;
height: 64px;
text-align: center;
background-color: #FFC82D;
color: #000;
font-size: 16px;
line-height: 64px;
border-radius: 32px;
margin: 0 auto;
transition: all 0.3s ease-in-out;
}
.cta-formulario .container a:hover{
background-color: #E3A601;
}
footer{
position: relative;
z-index: 3;
}
footer:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 48, 82, 0.7);
mix-blend-mode: multiply;
content: '';
}
footer .logo-endereco{
position: relative;
z-index: 4;
padding: 96px 0;
}
footer .logo-endereco .container{
width: 96%;
max-width: 1248px;
margin: 0 auto;
}
footer .logo-endereco .container img{
width: 204px;
height: auto;
}
footer .logo-endereco .container .endereco{
width: 190px;
text-align: center;
padding-top: 16px;
margin-left: 256px;
}
footer .logo-endereco .container .endereco h3{
font-size: 20px;
line-height: 20px;
color: #FFC82D;
padding-bottom: 20px;
}
footer .logo-endereco .container .endereco p{
font-size: 16px;
line-height: 24px;
color: #fff;
}
footer .logo-endereco .container .endereco p a{
text-decoration: underline;
color: #fff;
}
footer .logo-endereco .container .endereco p a:hover{
text-decoration: none;
}
footer .copyright{
position: relative;
width: 100%;
height: auto;
padding: 32px 0;
background-color: #00253F;
z-index: 4;
}
footer .copyright .container{
display: flex;
width: 100%;
justify-content: center;
align-items: flex-start;
gap: 128px;
}
footer .copyright .container p{
font-size: 14px;
line-height: 36px;
color: #fff;
}
footer .copyright .container a{
font-size: 14px;
line-height: 36px;
color: #fff;
text-decoration: underline;
}
footer .copyright .container a:hover{
text-decoration: none;
}
.ct-retorno.sucesso{
text-align: center;
}
.ct-retorno.sucesso h1{
font-size: 32px;
line-height: 36px;
color: #FFC82D;
text-align: center;
margin: 0;
}
.ct-retorno.sucesso h2{
color: #003052;
text-align: center;
font-size: 16px;
line-height: 18px;
padding-top: 16px;
width: 300px;
}
.ct-retorno.sucesso p{
font-size: 14px;
line-height: 36px;
color: #003052;
}
.ct-retorno.sucesso a{
display: block;
width: 160px;
height: 40px;
text-align: center;
background-color: #FFC82D;
color: #000;
font-size: 16px;
line-height: 40px;
border-radius: 20px;
margin: 0 auto;
transition: all 0.3s ease-in-out;
}
.ct-retorno.sucesso a:hover{
color: #E3A601;
}
@media screen and (max-width: 1380px) {
header{
height: calc(695px * 0.8);
}
header .ct-logo{
width: calc(320px * 0.8);
height: calc(120px * 0.8);
}
header .ct-logo img{
left: calc(64px * 0.8);
width: calc(167px * 0.8);
}
header .container{
max-width: calc(1248px * 0.8);
}
header .container .textos{
padding-top: calc(192px * 0.8);
width: calc(468px * 0.8);
}
header .container .textos h1{
font-size: calc(72px * 0.8);
line-height: calc(75px * 0.8);
}
header .container .textos h2{
font-size: calc(40px * 0.8);
line-height: calc(48px * 0.8);
padding-top: calc(10px * 0.8);
}
header .container .textos img{
width: calc(334px * 0.8);
margin-top: calc(64px * 0.8);
}
header .img-campeao{
width: calc(772px * 0.8);
height: calc(772px * 0.8);
}
header:before{
width: calc(750px * 0.8);
height: calc(782px * 0.8);
background-size: calc(755px * 0.8) auto;
}
.formulario-texto{
padding-bottom: calc(96px * 0.8);
}
.formulario-texto .container{
max-width: calc(1248px * 0.8);
}
.formulario-texto .container .formulario{
width: calc(560px * 0.8);
padding: calc(48px * 0.8) calc(32px * 0.8) calc(48px * 0.8) calc(32px * 0.8);
}
.formulario-texto .container .formulario iframe{
height: 870px;
}
.formulario-texto .container .formulario h2{
font-size: calc(24px * 0.8);
line-height: calc(28px * 0.8);
}
.formulario-texto .container .formulario form{
margin-top: calc(32px * 0.8);
}
.formulario-texto .container .formulario .ct-campo{
height: calc(56px * 0.8);
margin-bottom: calc(16px * 0.8);
}
.formulario-texto .container .formulario .ct-campo .campo-texto{
font-size: calc(14px * 0.8);
line-height: calc(14px * 0.8);
padding: 0 calc(15px * 0.8);
}
.formulario-texto .container .formulario .ct-campo label{
font-size: calc(14px * 0.8);
line-height: calc(14px * 0.8);
left: calc(10px * 0.8);
padding: 0 calc(5px * 0.8);
}
.formulario-texto .container .formulario .ct-campo.preenchido label{
font-size: calc(12px * 0.8);
line-height: calc(16px * 0.8);
transform: translateY(calc(-36px * 0.8));
}
.formulario-texto .container .formulario .ct-campo.preenchido label:before{
height: calc(1px * 0.8);
top: calc(8px * 0.8);
}
.formulario-texto .container .formulario .ct-campo .ct-select:before{
width: calc(54px * 0.8);
height: calc(54px * 0.8);
}
.formulario-texto .container .formulario .ct-campo .ct-select select{
font-size: calc(14px * 0.8);
line-height: calc(14px * 0.8);
padding: 0 calc(54px * 0.8) 0 calc(15px * 0.8);
}
.formulario-texto .container .formulario .wrap-radio h3{
font-size: calc(14px * 0.8);
line-height: calc(24px * 0.8);
margin-bottom: calc(15px * 0.8);
}
.formulario-texto .container .formulario .wrap-radio label.label-radio{
padding-left: calc(24px * 0.8);
margin-bottom: calc(16px * 0.8);
height: calc(17px * 0.8);
font-size: calc(14px * 0.8);
line-height: calc(21px * 0.8);
margin-right: calc(110px * 0.8);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark {
height: calc(21px * 0.8);
width: calc(21px * 0.8);
}
.formulario-texto .container .formulario .label-check{
margin-top: calc(36px * 0.8);
padding-left: calc(30px * 0.8);
margin-bottom: calc(3px * 0.8);
height: calc(18px * 0.8);
font-size: calc(16px * 0.8);
line-height: calc(18px * 0.8);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .label-check .checkmark {
height: calc(18px * 0.8);
width: calc(18px * 0.8);
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .label-check .checkmark:after {
width: calc(8px * 0.8);
height: calc(8px * 0.8);
}
.formulario-texto .container .formulario .aviso-check{
font-size: calc(14px * 0.8);
line-height: calc(18px * 0.8);
padding-left: calc(30px * 0.8);
}
.formulario-texto .container .formulario .bt-submit{
margin-top: calc(16px * 0.8);
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro{
width: calc(260px * 0.8);
top: calc(25px * 0.8);
font-size: calc(14px * 0.8);
line-height: calc(18px * 0.8);
}
.formulario-texto .container .formulario .bt-submit button{
width: calc(235px * 0.8);
height: calc(64px * 0.8);
border-radius: calc(32px * 0.8);
font-size: calc(16px * 0.8);
line-height: calc(64px * 0.8);
}
.plataforma-az .container{
max-width: calc(1056px * 0.8);
padding: calc(96px * 0.8) 0;
}
.plataforma-az .container h2{
font-size: calc(32px * 0.8);
line-height: calc(36px * 0.8);
padding-bottom: calc(64px * 0.8);
}
.plataforma-az .container .imagem-texto img{
width: calc(480px * 0.8);
}
.plataforma-az .container .imagem-texto p{
width: calc(480px * 0.8);
font-size: calc(24px * 0.8);
line-height: calc(36px * 0.8);
padding-top: calc(84px * 0.8);
}
.diferenciais .container{
max-width: calc(1344px * 0.8);
padding: calc(96px * 0.8) 0;
}
.diferenciais .container h3{
font-size: calc(24px * 0.8);
line-height: calc(36px * 0.8);
padding-bottom: calc(64px * 0.8);
}
.diferenciais .container ul{
gap: calc(24px * 0.8);
}
.diferenciais .container ul li{
width: calc(204px * 0.8);
height: calc(244px * 0.8);
padding: calc(24px * 0.8);
}
.diferenciais .container ul li img{
width: calc(120px * 0.8);
}
.diferenciais .container ul li p{
font-size: calc(16px * 0.8);
line-height: calc(18px * 0.8);
padding-top: calc(16px * 0.8);
}
.cta-formulario{
padding: calc(96px * 0.8) 0;
}
.cta-formulario .container h3{
font-size: calc(32px * 0.8);
line-height: calc(36px * 0.8);
padding-bottom: calc(32px * 0.8);
}
.cta-formulario .container a{
width: calc(300px * 0.8);
height: calc(64px * 0.8);
font-size: calc(16px * 0.8);
line-height: calc(64px * 0.8);
border-radius: calc(32px * 0.8);
}
footer .logo-endereco{
padding: calc(96px * 0.8) 0;
}
footer .logo-endereco .container{
max-width: calc(1248px * 0.8);
}
footer .logo-endereco .container img{
width: calc(204px * 0.8);
}
footer .logo-endereco .container .endereco{
width: calc(190px * 0.8);
padding-top: calc(16px * 0.8);
margin-left: calc(256px * 0.8);
}
footer .logo-endereco .container .endereco h3{
font-size: calc(20px * 0.8);
line-height: calc(20px * 0.8);
padding-bottom: calc(20px * 0.8);
}
footer .logo-endereco .container .endereco p{
font-size: calc(16px * 0.8);
line-height: calc(24px * 0.8);
}
footer .copyright{
padding: calc(32px * 0.8) 0;
}
footer .copyright .container{
gap: calc(128px * 0.8);
}
footer .copyright .container p{
font-size: calc(14px * 0.8);
line-height: calc(36px * 0.8);
}
footer .copyright .container a{
font-size: calc(14px * 0.8);
line-height: calc(36px * 0.8);
}
}
@media screen and (max-width: 1140px) {
header{
height: calc(695px * 0.6);
}
header .ct-logo{
width: calc(320px * 0.6);
height: calc(120px * 0.6);
}
header .ct-logo img{
left: calc(64px * 0.6);
width: calc(167px * 0.6);
}
header .container{
max-width: calc(1248px * 0.6);
}
header .container .textos{
padding-top: calc(192px * 0.6);
width: calc(468px * 0.6);
}
header .container .textos h1{
font-size: calc(72px * 0.6);
line-height: calc(75px * 0.6);
}
header .container .textos h2{
font-size: calc(40px * 0.6);
line-height: calc(48px * 0.6);
padding-top: calc(10px * 0.6);
}
header .container .textos img{
width: calc(334px * 0.6);
margin-top: calc(64px * 0.6);
}
header .img-campeao{
width: calc(772px * 0.6);
height: calc(772px * 0.6);
}
header:before{
width: calc(750px * 0.6);
height: calc(782px * 0.6);
background-size: calc(755px * 0.6) auto;
}
.formulario-texto{
padding-bottom: calc(96px * 0.6);
}
.formulario-texto .container{
max-width: calc(1248px * 0.6);
}
.formulario-texto .container .formulario{
width: calc(560px * 0.6);
padding: calc(48px * 0.6) calc(32px * 0.6) calc(48px * 0.6) calc(32px * 0.6);
}
.formulario-texto .container .formulario iframe{
height: 980px;
}
.formulario-texto .container .formulario h2{
font-size: calc(24px * 0.6);
line-height: calc(28px * 0.6);
}
.formulario-texto .container .formulario form{
margin-top: calc(32px * 0.6);
}
.formulario-texto .container .formulario .ct-campo{
height: calc(56px * 0.6);
margin-bottom: calc(16px * 0.6);
}
.formulario-texto .container .formulario .ct-campo .campo-texto{
font-size: calc(14px * 0.6);
line-height: calc(14px * 0.6);
padding: 0 calc(15px * 0.6);
}
.formulario-texto .container .formulario .ct-campo label{
font-size: calc(14px * 0.6);
line-height: calc(14px * 0.6);
left: calc(10px * 0.6);
padding: 0 calc(5px * 0.6);
}
.formulario-texto .container .formulario .ct-campo.preenchido label{
font-size: calc(12px * 0.6);
line-height: calc(16px * 0.6);
transform: translateY(calc(-36px * 0.6));
}
.formulario-texto .container .formulario .ct-campo.preenchido label:before{
height: calc(1px * 0.6);
top: calc(8px * 0.6);
}
.formulario-texto .container .formulario .ct-campo .ct-select:before{
width: calc(54px * 0.6);
height: calc(54px * 0.6);
}
.formulario-texto .container .formulario .ct-campo .ct-select select{
font-size: calc(14px * 0.6);
line-height: calc(14px * 0.6);
padding: 0 calc(54px * 0.8) 0 calc(15px * 0.6);
}
.formulario-texto .container .formulario .wrap-radio h3{
font-size: calc(14px * 0.6);
line-height: calc(24px * 0.6);
margin-bottom: calc(15px * 0.6);
}
.formulario-texto .container .formulario .wrap-radio label.label-radio{
padding-left: calc(24px * 0.6);
margin-bottom: calc(16px * 0.6);
height: calc(17px * 0.6);
font-size: calc(14px * 0.6);
line-height: calc(21px * 0.6);
margin-right: calc(110px * 0.6);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark {
height: calc(21px * 0.6);
width: calc(21px * 0.6);
}
.formulario-texto .container .formulario .label-check{
margin-top: calc(36px * 0.6);
padding-left: calc(30px * 0.6);
margin-bottom: calc(3px * 0.6);
height: calc(18px * 0.6);
font-size: calc(16px * 0.6);
line-height: calc(18px * 0.6);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .label-check .checkmark {
height: calc(18px * 0.6);
width: calc(18px * 0.6);
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .label-check .checkmark:after {
width: calc(8px * 0.6);
height: calc(8px * 0.6);
}
.formulario-texto .container .formulario .aviso-check{
font-size: calc(14px * 0.6);
line-height: calc(18px * 0.6);
padding-left: calc(30px * 0.6);
}
.formulario-texto .container .formulario .bt-submit{
margin-top: calc(16px * 0.6);
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro{
width: calc(260px * 0.6);
top: calc(25px * 0.6);
font-size: calc(14px * 0.6);
line-height: calc(18px * 0.6);
}
.formulario-texto .container .formulario .bt-submit button{
width: calc(235px * 0.6);
height: calc(64px * 0.6);
border-radius: calc(32px * 0.6);
font-size: calc(16px * 0.6);
line-height: calc(64px * 0.6);
}
.plataforma-az .container{
max-width: calc(1056px * 0.6);
padding: calc(96px * 0.6) 0;
}
.plataforma-az .container h2{
font-size: calc(32px * 0.6);
line-height: calc(36px * 0.6);
padding-bottom: calc(64px * 0.6);
}
.plataforma-az .container .imagem-texto img{
width: calc(480px * 0.6);
}
.plataforma-az .container .imagem-texto p{
width: calc(480px * 0.6);
font-size: calc(24px * 0.6);
line-height: calc(36px * 0.6);
padding-top: calc(84px * 0.6);
}
.diferenciais .container{
max-width: calc(1344px * 0.6);
padding: calc(96px * 0.6) 0;
}
.diferenciais .container h3{
font-size: calc(24px * 0.6);
line-height: calc(36px * 0.6);
padding-bottom: calc(64px * 0.6);
}
.diferenciais .container ul{
gap: calc(24px * 0.6);
}
.diferenciais .container ul li{
width: calc(204px * 0.6);
height: calc(244px * 0.6);
padding: calc(24px * 0.6);
}
.diferenciais .container ul li img{
width: calc(120px * 0.6);
}
.diferenciais .container ul li p{
font-size: calc(16px * 0.6);
line-height: calc(18px * 0.6);
padding-top: calc(16px * 0.6);
}
.cta-formulario{
padding: calc(96px * 0.6) 0;
}
.cta-formulario .container h3{
font-size: calc(32px * 0.6);
line-height: calc(36px * 0.6);
padding-bottom: calc(32px * 0.6);
}
.cta-formulario .container a{
width: calc(300px * 0.6);
height: calc(64px * 0.6);
font-size: calc(16px * 0.6);
line-height: calc(64px * 0.6);
border-radius: calc(32px * 0.6);
}
footer .logo-endereco{
padding: calc(96px * 0.6) 0;
}
footer .logo-endereco .container{
max-width: calc(1248px * 0.6);
}
footer .logo-endereco .container img{
width: calc(204px * 0.6);
}
footer .logo-endereco .container .endereco{
width: calc(190px * 0.6);
padding-top: calc(16px * 0.6);
margin-left: calc(256px * 0.6);
}
footer .logo-endereco .container .endereco h3{
font-size: calc(20px * 0.6);
line-height: calc(20px * 0.6);
padding-bottom: calc(20px * 0.6);
}
footer .logo-endereco .container .endereco p{
font-size: calc(16px * 0.6);
line-height: calc(24px * 0.6);
}
footer .copyright{
padding: calc(32px * 0.6) 0;
}
footer .copyright .container{
gap: calc(128px * 0.6);
}
footer .copyright .container p{
font-size: calc(14px * 0.6);
line-height: calc(36px * 0.6);
}
footer .copyright .container a{
font-size: calc(14px * 0.6);
line-height: calc(36px * 0.6);
}
}
@media screen and (max-width: 850px) {
header{
height: calc(695px * 0.55);
}
header .ct-logo{
width: calc(320px * 0.55);
height: calc(120px * 0.55);
}
header .ct-logo img{
left: calc(64px * 0.55);
width: calc(167px * 0.55);
}
header .container{
max-width: calc(1248px * 0.55);
}
header .container .textos{
padding-top: calc(192px * 0.55);
width: calc(468px * 0.55);
}
header .container .textos h1{
font-size: calc(72px * 0.55);
line-height: calc(75px * 0.55);
}
header .container .textos h2{
font-size: calc(40px * 0.55);
line-height: calc(48px * 0.55);
padding-top: calc(10px * 0.55);
}
header .container .textos img{
width: calc(334px * 0.55);
margin-top: calc(64px * 0.55);
}
header .img-campeao{
width: calc(772px * 0.55);
height: calc(772px * 0.55);
}
header:before{
width: calc(750px * 0.55);
height: calc(782px * 0.55);
background-size: calc(755px * 0.55) auto;
}
.formulario-texto{
padding-bottom: calc(96px * 0.55);
}
.formulario-texto .container{
max-width: calc(1248px * 0.55);
}
.formulario-texto .container .formulario{
width: calc(560px * 0.55);
padding: calc(48px * 0.55) calc(32px * 0.55) calc(48px * 0.55) calc(32px * 0.55);
}
.formulario-texto .container .formulario iframe{
height: 1000px;
}
.formulario-texto .container .formulario h2{
font-size: calc(24px * 0.55);
line-height: calc(28px * 0.55);
}
.formulario-texto .container .formulario form{
margin-top: calc(32px * 0.55);
}
.formulario-texto .container .formulario .ct-campo{
height: calc(56px * 0.55);
margin-bottom: calc(16px * 0.55);
}
.formulario-texto .container .formulario .ct-campo .campo-texto{
font-size: calc(14px * 0.55);
line-height: calc(14px * 0.55);
padding: 0 calc(15px * 0.55);
}
.formulario-texto .container .formulario .ct-campo label{
font-size: calc(14px * 0.55);
line-height: calc(14px * 0.55);
left: calc(10px * 0.55);
padding: 0 calc(5px * 0.55);
}
.formulario-texto .container .formulario .ct-campo.preenchido label{
font-size: calc(12px * 0.55);
line-height: calc(16px * 0.55);
transform: translateY(calc(-36px * 0.55));
}
.formulario-texto .container .formulario .ct-campo.preenchido label:before{
height: calc(1px * 0.55);
top: calc(8px * 0.55);
}
.formulario-texto .container .formulario .ct-campo .ct-select:before{
width: calc(54px * 0.55);
height: calc(54px * 0.55);
}
.formulario-texto .container .formulario .ct-campo .ct-select select{
font-size: calc(14px * 0.55);
line-height: calc(14px * 0.55);
padding: 0 calc(54px * 0.8) 0 calc(15px * 0.55);
}
.formulario-texto .container .formulario .wrap-radio h3{
font-size: calc(14px * 0.55);
line-height: calc(24px * 0.55);
margin-bottom: calc(15px * 0.55);
}
.formulario-texto .container .formulario .wrap-radio label.label-radio{
padding-left: calc(24px * 0.55);
margin-bottom: calc(16px * 0.55);
height: calc(17px * 0.55);
font-size: calc(14px * 0.55);
line-height: calc(21px * 0.55);
margin-right: calc(110px * 0.55);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark {
height: calc(21px * 0.55);
width: calc(21px * 0.55);
}
.formulario-texto .container .formulario .label-check{
margin-top: calc(36px * 0.55);
padding-left: calc(30px * 0.55);
margin-bottom: calc(3px * 0.55);
height: calc(18px * 0.55);
font-size: calc(16px * 0.55);
line-height: calc(18px * 0.55);
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .label-check .checkmark {
height: calc(18px * 0.55);
width: calc(18px * 0.55);
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .label-check .checkmark:after {
width: calc(8px * 0.55);
height: calc(8px * 0.55);
}
.formulario-texto .container .formulario .aviso-check{
font-size: calc(14px * 0.55);
line-height: calc(18px * 0.55);
padding-left: calc(30px * 0.55);
}
.formulario-texto .container .formulario .bt-submit{
margin-top: calc(16px * 0.55);
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro{
width: calc(260px * 0.55);
top: calc(25px * 0.55);
font-size: calc(14px * 0.55);
line-height: calc(18px * 0.55);
}
.formulario-texto .container .formulario .bt-submit button{
width: calc(235px * 0.55);
height: calc(64px * 0.55);
border-radius: calc(32px * 0.55);
font-size: calc(16px * 0.55);
line-height: calc(64px * 0.55);
}
.plataforma-az .container{
max-width: calc(1056px * 0.55);
padding: calc(96px * 0.55) 0;
}
.plataforma-az .container h2{
font-size: calc(32px * 0.55);
line-height: calc(36px * 0.55);
padding-bottom: calc(64px * 0.55);
}
.plataforma-az .container .imagem-texto img{
width: calc(480px * 0.55);
}
.plataforma-az .container .imagem-texto p{
width: calc(480px * 0.55);
font-size: calc(24px * 0.55);
line-height: calc(36px * 0.55);
padding-top: calc(84px * 0.55);
}
.diferenciais .container{
max-width: calc(1344px * 0.55);
padding: calc(96px * 0.55) 0;
}
.diferenciais .container h3{
font-size: calc(24px * 0.55);
line-height: calc(36px * 0.55);
padding-bottom: calc(64px * 0.55);
}
.diferenciais .container ul{
gap: calc(24px * 0.55);
}
.diferenciais .container ul li{
width: calc(204px * 0.55);
height: calc(244px * 0.55);
padding: calc(24px * 0.55);
}
.diferenciais .container ul li img{
width: calc(120px * 0.55);
}
.diferenciais .container ul li p{
font-size: calc(16px * 0.55);
line-height: calc(18px * 0.55);
padding-top: calc(16px * 0.55);
}
.cta-formulario{
padding: calc(96px * 0.55) 0;
}
.cta-formulario .container h3{
font-size: calc(32px * 0.55);
line-height: calc(36px * 0.55);
padding-bottom: calc(32px * 0.55);
}
.cta-formulario .container a{
width: calc(300px * 0.55);
height: calc(64px * 0.55);
font-size: calc(16px * 0.55);
line-height: calc(64px * 0.55);
border-radius: calc(32px * 0.55);
}
footer .logo-endereco{
padding: calc(96px * 0.55) 0;
}
footer .logo-endereco .container{
max-width: calc(1248px * 0.55);
}
footer .logo-endereco .container img{
width: calc(204px * 0.55);
}
footer .logo-endereco .container .endereco{
width: calc(190px * 0.55);
padding-top: calc(16px * 0.55);
margin-left: calc(256px * 0.55);
}
footer .logo-endereco .container .endereco h3{
font-size: calc(20px * 0.55);
line-height: calc(20px * 0.55);
padding-bottom: calc(20px * 0.55);
}
footer .logo-endereco .container .endereco p{
font-size: calc(16px * 0.55);
line-height: calc(24px * 0.55);
}
footer .copyright{
padding: calc(32px * 0.55) 0;
}
footer .copyright .container{
gap: calc(128px * 0.55);
}
footer .copyright .container p{
font-size: calc(14px * 0.55);
line-height: calc(36px * 0.55);
}
footer .copyright .container a{
font-size: calc(14px * 0.55);
line-height: calc(36px * 0.55);
}
}
@media screen and (max-width: 760px) {
header{
height: 840px;
background: rgba(0, 48, 82, 0.3);
z-index: 2;
}
header .ct-logo{
width: 240px;
height: 90px;
position: absolute;
top: 0;
left: 0;
background-size: 100% auto;
}
header .ct-logo img{
position: absolute;
top: 50%;
left: 42px;
transform: translateY(-50%);
width: 115px;
height: auto;
}
header .container{
position: relative;
width: 96%;
max-width: 342px;
margin: 0 auto;
}
header .container .textos{
padding-top: 445px;
width: 100%;
}
header .container .textos h1{
font-size: 48px;
line-height: 52px;
color: #fff;
width: 100% !important;
}
header .container .textos h1 span{
color: #FFC82D;
}
header .container .textos h2{
font-size: 28px;
line-height: 38px;
color: #fff;
padding-top: 16px;
}
header .container .textos h2 span{
color: #FFC82D;
}
header .container .textos img{
width: 334px;
margin-top: 64px;
}
header .img-campeao{
position: absolute;
right: 0;
top: 90px;
width: 100%;
max-width: 390px;
height: 371px;
z-index: 2;
}
header:before{
position: absolute;
right: 0;
top: 0;
width: 100%;
max-width: 390px;
height: 402px;
background-size: 390px auto;
content: '';
transform: translateX(0);
}
header .img-campeao img{
width: 100%;
height: auto;
}
.formulario-texto{
position: relative;
display: block;
width: 100%;
padding-bottom: 96px;
background: rgba(0, 48, 82, 0.3);
}
.formulario-texto .container{
position: relative;
width: 96%;
max-width: 342px;
margin: 0 auto;
}
.formulario-texto .container .formulario{
position: relative;
width: 100%;
padding: 32px 16px 32px 16px;
background: #fff;
border-radius: 5px;
}
.formulario-texto .container .formulario iframe{
height: 940px;
}
.formulario-texto .container .formulario h2{
font-size: 20px;
line-height: 28px;
color: #003052;
}
.formulario-texto .container .formulario form{
width: 100%;
margin-top: 32px;
}
.formulario-texto .container .formulario .ct-campo{
position: relative;
width: 100%;
height: 56px;
margin-bottom: 16px;
}
.formulario-texto .container .formulario .ct-campo.menor{
width: calc(50% - 5px);
}
.formulario-texto .container .formulario .ct-campo .campo-texto{
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid #E4E4E4;
background-color: transparent;
font-size: 14px;
line-height: 14px;
padding: 0 15px;
color: #666;
outline: none !important;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .ct-campo.foco .campo-texto{
border: 1px solid #666;
}
.formulario-texto .container .formulario .ct-campo.error .campo-texto{
border: 1px solid #CF6679;
}
.formulario-texto .container .formulario .ct-campo label{
position: absolute;
font-size: 14px;
line-height: 14px;
color: #666;
top: 50%;
left: 10px;
padding: 0 5px;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .ct-campo.preenchido label{
font-size: 12px;
line-height: 16px;
letter-spacing: 0.03em;
transform: translateY(-36px);
z-index: 4;
}
.formulario-texto .container .formulario .ct-campo.preenchido label:before{
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
left: 0;
top:8px;
content: '';
}
.formulario-texto .container .formulario .ct-campo.foco label{
color: #666;
}
.formulario-texto .container .formulario .ct-campo.error label{
color: #CF6679;
}
.formulario-texto .container .formulario .ct-campo.preenchido label span{
position: relative;
z-index: 2;
}
.formulario-texto .container .formulario .ct-campo .ct-select{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #E4E4E4;
border-radius: 4px;
overflow: hidden;
}
.formulario-texto .container .formulario .ct-campo.error .ct-select{
border: 1px solid #CF6679;
}
.formulario-texto .container .formulario .ct-campo .ct-select:before{
position: absolute;
right: 0;
top: 0;
width: 54px;
height: 54px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
content: '';
}
.formulario-texto .container .formulario .ct-campo.error .ct-select:before{
background-color: #CF6679;
}
.formulario-texto .container .formulario .ct-campo .ct-select select{
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
border: none;
font-size: 14px;
line-height: 14px;
padding: 0 64px 0 15px;
cursor: pointer;
color: #666;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.formulario-texto .container .formulario .ct-campo .ct-select select option{
color: #666;
}
.formulario-texto .container .formulario .wrap-radio{
padding-top: 0;
margin-bottom: 15px;
}
.formulario-texto .container .formulario .wrap-radio h3{
font-size: 14px;
line-height: 24px;
letter-spacing: 0.01em;
color: #666;
margin-bottom: 15px;
}
.formulario-texto .container .formulario .wrap-radio.error h3{
color: #CF6679;
}
.formulario-texto .container .formulario .wrap-radio label.label-radio{
display: inline-block;
position: relative;
padding-left: 24px;
margin-bottom: 16px;
height: 17px;
cursor: pointer;
font-size: 14px;
line-height: 21px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 70px;
}
/* Hide the browser's default checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark {
position: absolute;
top: 0;
left: 0;
height: 21px;
width: 21px;
border-radius: 5px;
background-color: transparent;
border: 1px solid #E4E4E4;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .wrap-radio.error label.label-radio .checkmark {
border: 1px solid #CF6679;
}
/* On mouse-over, add a grey background color */
.formulario-texto .container .formulario .wrap-radio label.label-radio:hover input ~ .checkmark {
border: 1px solid #E4E4E4;
}
/* When the checkbox is checked, add a blue background */
.formulario-texto .container .formulario .wrap-radio label.label-radio input:checked ~ .checkmark {
border: 1px solid #E4E4E4;
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .wrap-radio label.label-radio .checkmark:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 5px;
background-color: #FFC82D;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
/* Show the checkmark when checked */
.formulario-texto .container .formulario .wrap-radio label.label-radio input:checked ~ .checkmark:after {
transform: scale(1);
}
.formulario-texto .container .formulario .label-check{
margin-top: 36px;
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 3px;
height: auto;
cursor: pointer;
font-size: 16px;
line-height: 18px;
letter-spacing: 0.01em;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.formulario-texto .container .formulario .label-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.formulario-texto .container .formulario .label-check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
border-radius: 3px;
background-color: transparent;
border: 2px solid #666;
transition: all 0.3s ease-in-out;
}
/* On mouse-over, add a grey background color */
.formulario-texto .container .formulario .label-check:hover input ~ .checkmark {
border: 2px solid #FCB800;
}
/* When the checkbox is checked, add a blue background */
.formulario-texto .container .formulario .label-check input:checked ~ .checkmark {
border: 2px solid #FCB800;
}
/* Create the checkmark/indicator (hidden when not checked) */
.formulario-texto .container .formulario .label-check .checkmark:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
background-color: #FCB800;
transform: translateY(-50%) translateX(-50%) scale(0);
transition: all 0.3s ease-in-out;
}
/* Show the checkmark when checked */
.formulario-texto .container .formulario .label-check input:checked ~ .checkmark:after {
transform: translateY(-50%) translateX(-50%) scale(1);
}
.formulario-texto .container .formulario .aviso-check{
font-size: 14px;
line-height: 18px;
letter-spacing: 0.01em;
color: rgba(255,255,255,0.87);
padding-left: 30px;
text-align: left;
margin-top: 0;
}
.formulario-texto .container .formulario .bt-submit{
margin-top: 16px;
position: relative;
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro{
position: absolute;
width: 260px;
top: 55px;
right: auto;
left: 50%;
transform: translateX(-50%);
display: block;
font-size: 14px;
line-height: 18px;
color: #CF6679;
text-align: center;
margin-top: 0;
opacity: 0;
text-align: center;
transition: all 0.3s ease-in-out;
}
.formulario-texto .container .formulario .bt-submit .mensagem-erro.aberto{
opacity: 1;
}
.formulario-texto .container .formulario .bt-submit button{
display: block;
width: 183px;
height: 50px;
background-color: #FFC82D;
border: none;
border-radius: 25px;
font-size: 16px;
line-height: 50px;
text-align: center;
color: #000;
cursor: pointer;
transition: all 0.3s ease-in-out;
margin: 0 auto;
}
.formulario-texto .container .formulario .bt-submit button:hover{
background-color: #FFC82D;
}
.plataforma-az{
position: relative;
z-index: 3;
}
.plataforma-az:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 48, 82, 0.7);
mix-blend-mode: multiply;
content: '';
}
.plataforma-az .container{
position: relative;
width: 96%;
max-width: 342px;
margin: 0 auto;
padding: 96px 0;
z-index: 4;
}
.plataforma-az .container h2{
font-size: 24px;
line-height: 28px;
color: #fff;
text-align: center;
padding-bottom: 54px;
}
.plataforma-az .container h2 b{
color: #FFC82D;
}
.plataforma-az .container .imagem-texto{
width: 100%;
}
.plataforma-az .container .imagem-texto img{
width: 100%;
height: auto;
}
.plataforma-az .container .imagem-texto p{
width: 100%;
font-size: 20px;
line-height: 28px;
color: #fff;
padding-top: 32px;
}
.plataforma-az .container .imagem-texto p b{
color: #FFC82D;
}
.diferenciais{
position: relative;
z-index: 3;
}
.diferenciais:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
content: '';
}
.diferenciais .container{
position: relative;
width: 96%;
max-width: 342px;
margin: 0 auto;
padding: 64px 0;
z-index: 4;
}
.diferenciais .container h3{
font-size: 20px;
line-height: 28px;
color: #003052;
text-align: center;
padding-bottom: 32px;
}
.diferenciais .container h3 br{
display: none;
}
.diferenciais .container ul{
position: relative;
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
.diferenciais .container ul li{
position: relative;
display: inline-block;
width: 100%;
height: 128px;
background-color: #fff;
border-radius: 12px;
padding: 24px;
}
.diferenciais .container ul li img{
position: absolute;
width: 96px;
height: auto;
display: block;
left: 16px;
top: 50%;
transform: translateY(-50%);
}
.diferenciais .container ul li p{
position: absolute;
width: 150px;
color: #003052;
text-align: left;
font-size: 16px;
line-height: 18px;
padding-top: 0;
left: 145px;
top: 50%;
transform: translateY(-50%);
}
.cta-formulario{
position: relative;
width: 100%;
background: #fff;
z-index: 3;
padding: 64px 0;
}
.cta-formulario .container{
width: 100%;
}
.cta-formulario .container h3{
width: 96%;
max-width: 342px;
margin: 0 auto;
font-size: 24px;
line-height: 28px;
color: #003052;
text-align: center;
padding-bottom: 32px;
}
.cta-formulario .container a{
display: block;
width: 300px;
height: 64px;
text-align: center;
background-color: #FFC82D;
color: #000;
font-size: 16px;
line-height: 64px;
border-radius: 32px;
margin: 0 auto;
transition: all 0.3s ease-in-out;
}
.cta-formulario .container a:hover{
background-color: #FFC82D;
}
footer{
position: relative;
z-index: 3;
}
footer:before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 48, 82, 0.7);
mix-blend-mode: multiply;
content: '';
}
footer .logo-endereco{
position: relative;
z-index: 4;
padding: 64px 0;
}
footer .logo-endereco .container{
width: 96%;
max-width: 204px;
margin: 0 auto;
}
footer .logo-endereco .container img{
float: none;
width: 204px;
height: auto;
margin: 0 auto;
}
footer .logo-endereco .container .endereco{
float: none;
width: 204px;
text-align: center;
padding-top: 16px;
margin-left: 0;
margin: 0 auto;
margin-top: 64px;
}
footer .logo-endereco .container .endereco h3{
font-size: 20px;
line-height: 20px;
color: #FFC82D;
padding-bottom: 20px;
}
footer .logo-endereco .container .endereco p{
font-size: 16px;
line-height: 24px;
color: #fff;
}
footer .logo-endereco .container .endereco p a{
text-decoration: underline;
color: #fff;
}
footer .logo-endereco .container .endereco p a:hover{
text-decoration: none;
}
footer .copyright{
position: relative;
width: 100%;
height: auto;
padding: 32px 0;
background-color: #00253F;
z-index: 4;
}
footer .copyright .container{
display: flex;
width: 96%;
max-width: 342px;
margin: 0 auto;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
footer .copyright .container p{
font-size: 14px;
line-height: 18px;
color: #fff;
}
footer .copyright .container a{
font-size: 14px;
line-height: 36px;
color: #fff;
text-decoration: underline;
}
footer .copyright .container a:hover{
text-decoration: none;
}
}
.popup-error,
.popup-success,
.popup-error-cpf {
background-color: #53565A;
color: white;
width: 85%;
margin: 0 auto;
border-radius: 4px;
padding: 5vw 8vw;
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
transition: 0.5s;
}
.popup-error h2,
.popup-success h2,
.popup-error-cpf h2 {
font-size: 80px;
font-weight: 400;
letter-spacing: 0;
line-height: 90px;
margin-bottom: 43px;
}
.popup-error p,
.popup-success p,
.popup-error-cpf p {
font-size: 22px;
margin-bottom: 35px;
font-size: 22px;
font-weight: 400;
letter-spacing: 0;
line-height: 28px;
}
.popup-error .blue-text,
.popup-success .blue-text,
.popup-error-cpf .blue-text {
color: #A1DBE8;
}
.popup-error button,
.popup-success button,
.popup-error-cpf button {
color: #53565A;
background-color: white;
border-radius: 25px;
border: 0;
padding: 15px 60px;
font-size: 20px;
font-weight: 600;
}
@media(max-width: 760px) {
.custom-lp header .container h1 {
margin-bottom: 55px;
}
.popup-error,
.popup-success,
.popup-error-cpf {
padding: 10vw 8vw;
width: 90%;
}
.popup-error h2,
.popup-success h2,
.popup-error-cpf h2 {
font-size: 50px;
}
.popup-error p,
.popup-success p,
.popup-error-cpf p {
font-size: 18px;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* Remove padding and margin into box account */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*Float Classes*/
.clearBoth{
clear: both;
}
.left{
float: left;
}
.right{
float: right;
}
/*Text Classes*/
.upper{
text-transform: uppercase;
}
.image{
text-indent: -9999px;
white-space: nowrap;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}