/*Estilo hotsite Desenrola v1.0*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

.lp-desenrola {width:100%; font-family: 'Lato', sans-serif; text-align: center; color: #0033C6; font-size: 20px; z-index: 2; position: relative; background-color: #fff;}
.lp-desenrola h1 {text-align: left; font-size: 27px; color: #fff;}
.lp-desenrola h2 {font-size: 26px; color: #fff; font-weight: bolder;}
.lp-desenrola h3 {font-size: 30px; color: #fff; font-weight: bolder; margin-bottom: 25px;}
.lp-desenrola h4 {font-size: 30px; color: #07143B; font-weight: bolder; margin-bottom: 25px;}
.lp-desenrola .container-content {width:1200px; margin: 0 auto;}
.lp-desenrola p {color: #fff; font-size: 16px; line-height: 26px;}
.btn a {background-color: #fff; color: #07143B; font-size: 16px; font-weight: bolder; border-radius: 10px; padding: 10px 30px; text-transform: uppercase;}
.btn2 a {background-color: #E71A3B; color: #fff; font-size: 16px; font-weight: bolder; border-radius: 10px; padding: 10px 30px; text-transform: uppercase;}
.btn a:hover, .btn2 a:hover {opacity: 80%;}

section.lp-hero {border-bottom: 12px solid #E61B3B;}
section.lp-hero .container-content {width: 100%;}
section.lp-hero img {width: 100%;}

.lp-faixa {background-color: #07143C; }
.lp-faixa .container-content {height: 100px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.lp-faixa .btn {padding: 0 20px;}

.lp-container .container-content {height: 250px; display: flex; align-items: center; text-align: left; justify-content: space-between;}
.lp-container.first {height: 250px; background-image: linear-gradient(to left, #1F36C0 0%, #1F36C0 50%, #F0EFEA 50%, #F0EFEA 100%);}
.lp-container.second {background-image: linear-gradient(to left, #F0EFEA 0%, #F0EFEA 50%, #1F36C0 50%, #1F36C0 100%);}
.lp-container .container-content .cont {width: 45%;}
.lp-container .container-content .cont p {padding-top: 10px;}
.lp-container .container-content .cont.txt h2 {color: #1F36C0!important;}
.lp-container .container-content .cont.txt p {color: #1F36C0!important;}

.lp-middle .container-content {height: 500px; display: flex; align-items: center;}
.lp-middle .container-content h2 {color: #1F36C0; text-align: left; padding: 50px 0 20px 0;}
.lp-middle .container-content h2:first-child {padding-top: 0!important;}
.lp-middle .container-content p {color: #1F36C0; text-align: left;}

.lp-footer {padding: 60px 0;}


    /*----------- ACCORDION ----------------*/

.lp-desenrola section.lp-fac {background-color: #07143B;}
.lp-desenrola section.lp-fac .container-content {width: 1000px; padding-top: 80px;}
.lp-desenrola section.lp-fac .fac {width: 100%; margin: 0 auto; margin-top: 50px; padding-bottom: 60px; border-radius: 60px;}
.lp-desenrola section.lp-fac .accordion {margin-top: 10px; border-radius: 60px; background-color: #F0EFEA; color: #2F2E2E;cursor: pointer; padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 0.8em;transition: 0.4s;}
.lp-desenrola section.lp-fac .accordion:hover {background-color: #213FB6; color: #fff;}
.lp-desenrola section.lp-fac p {color: #fff!important; text-align: left; font-size: 0.9em; margin: 30px 0;}
.lp-desenrola section.lp-fac .active, .hotsite-area-8 .accordion:hover {background-color: #213FB6; color: #fff;}
.lp-desenrola section.lp-fac .accordion:after {content: '\002B'; font-weight: bold; float: right; margin-left: 5px; }
.lp-desenrola section.lp-fac .active:after {content: "\2212"; }
.lp-desenrola section.lp-fac .panel {font-size: 0.9em; color:#777777; padding: 0 18px; max-height: 0; overflow: hidden;transition: max-height 0.2s ease-out;}


/* Styles mobile */
@media screen and (max-width: 768px) {
.lp-desenrola h1 {font-size: 20px; text-align: center;}
.lp-desenrola h2 {font-size: 22px;}
.lp-desenrola h3 {font-size: 26px;}
.lp-desenrola h4 {font-size: 24px;}
.lp-desenrola p {font-size: 16px;  color: #fff;}

section.lp-hero img {width: 100%;}

.lp-desenrola .container-content {width: 100%; padding: 0 20px;}

.lp-faixa .container-content {height: auto; display: block; padding: 60px 20px;}
.lp-faixa .btn {margin-top: 30px;}

.lp-container .container-content {flex-wrap: wrap; align-items: center;}
.lp-container.first {height: 500px; background-image: linear-gradient(to bottom, #F0EFEA 0%, #F0EFEA 50%, #1F36C0 50%, #1F36C0 100%);}
.lp-container.second {height: 500px; background-image: linear-gradient(to bottom, #F0EFEA 0%, #F0EFEA 50%, #1F36C0 50%, #1F36C0 100%);}
.lp-container .container-content .cont {width: 100%; height: 250px; padding-top: 30px;}
.lp-container .container-content .cont.mob h2{color: #1F36C0;}
.lp-container .container-content .cont.mob p {color: #1F36C0;}
.lp-container .container-content .cont.txt.mob h2 {color: #fff!important;}
.lp-container .container-content .cont.txt.mob p {color: #fff!important;}

.lp-middle .container-content {padding: 0 0 50px 0; height: auto; background: linear-gradient(0deg, #f5f4f1, #f5f4f1, #fff) no-repeat; display: block;}
.lp-middle .container-content .cont {padding: 0 20px!important;}
.lp-middle .container-content img {width: 100%;}
.lp-middle .container-content h2:first-child {padding-top: 30px!important;}

.lp-desenrola section.lp-fac .container-content {width: 100%;}
.lp-desenrola section.lp-fac .accordion {font-size: 0.7em;}

.lp-footer {padding: 60px 20px;}
}



