@charset "utf-8";
body, html {height: 100% !important;}
body {background: #FFF; 
	font: 300 1rem 'Montserrat', sans-serif;
	overflow-x: hidden;
}

:root {
  --cor-primaria: #825E3B;
  --cor-secundaria: #FEF497;
  --cor-default: #F7F7F8;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

h2 {
	color: #7C5937;
	font-size: calc(1.25rem + .9vw);
	padding-bottom: 2rem;
	text-align: center;
}
a {
	text-decoration: none;
}
a.navbar-brand {
	font-weight:bold;
}

.wrapper {
	padding: 3rem 0;
	width: 100%;
}

.bg-cor-primaria {
	background: #825E3B;
}

.btn-cor-primaria {
	background: var(--cor-primaria);
	border-color: var(--cor-primaria);
	color: #FFF;
}
.btn-cor-primaria:hover {
	background: #825E3B;
	border-color: #825E3B;
	color: #FFF;
}
.btn-success {
	background: #27D045;
	border-color: #27D045;
}

/* MODAL */

.wrapperal-content {
	background: none;
}
.wrapperal-content button {
	background: #FFF;
	border: 0;
	border-radius: 50px;
	margin-bottom: 3px;
	padding: 4px 9px;
}
.wrapperal-body img {
	box-shadow: 0 0 25px #000;
}
 
/* CTA */
.cta a {
	background: linear-gradient(to bottom,  #52ca5b 0%,#21aa34 100%);
	border-radius: 100px;
	box-shadow: 0 5px 0 #009136;
	display: block;
	transition: outline 0.1s linear;
	color: #FFF;
	font-size: 1.1rem;
	font-weight: bold;
	margin: 50px auto 0;
	padding: 1rem 5px;
	text-shadow: 1px 1px 0 #009136;
	text-transform: uppercase;
}
.cta a:hover {
	background: #009136;
	text-decoration: none;
}
.cta a span {
	color: #FBC92B;
	display: block;
}
.cta a img {
	margin-right: 3px;
	margin-top: -3px;
	width: 15px;
}

form .form-control {
	padding: 15px;
}
form button.btn {
	background: #FF4100;
	border-radius: 100px;
	box-shadow: 0 5px 0 #9B2800;
	color: #FFF;
	font-weight: bold;
	padding: 1rem 5px;
	width: 100%;
}
form button:hover {
	background: #C63300;
	color: #FFF;
}

form .fone {
	color: #FFF;
	font-size: 1.1rem;
	padding-top: 2rem;
	text-align: center;
}
form .fone p {
	font-weight: normal;
	position: relative;
}
form .fone p::before, form .fone p::after {
	background: #666;
	content: " ";
	display: block;
	height: 1px;
	left: 0;
	margin-top: 15px;
	position: absolute;
	width: 33%;
}
form .fone p::after {
	left: auto;
	margin-top: 0;
	right: 0;
	top: 15px;
}
form .fone a {
	border: 1px solid #FFF;
	border-radius: 50px;
	color: #FFF;
	display: inline-block;
	font-size: 1.3rem;
	padding: 10px;
	width: 75%;
}
form .fone a:hover {
	background: #FBC92B;
	border: 1px solid #FBC92B;
	color: #000;
}

@media (min-width: 1200px) {
	body {
		font-size: 1.2rem;
	}
	.wrapper {
	    padding: 5rem 0;
    }
	h2 {
		font-size: 2.5rem;
		padding-bottom: 3rem;
	}
	.cta a {
		display: inline-block;
		font-size: 1.5rem;
		margin: 0 auto 0;
		padding: 25px 50px;
 	}
} /* 1200px */
	
/*
|-------------------------------------
| NAV
|-------------------------------------
*/
::-webkit-scrollbar {
	height: 1px;
    width: 1px;
}
nav {
	color: #7C5937;
	padding: 15px 0;
	text-align: center;
}
nav .brand {
	margin: 0 auto;
	overflow: hidden;
}
nav .brand img {
	max-width: 200px;
}
nav .nav-top {
	position: relative;
	white-space: nowrap;
	width: 100%;
}
nav .nav-top ul {
	list-style: none;
	margin: 0;
}
nav .nav-top ul li {
	color: #fff;
	display: inline-block;
	margin: 0;
	padding-bottom: 1rem;
	text-align: left;
}
nav .nav-top ul li a {
	color: #7C5937;
	display: inline-block;
	font-size: 0.8rem;
	padding: 0 10px;
	text-transform: uppercase;
}
nav .nav-top ul li a:hover {
	text-decoration: underline;
}
nav .nav-top ul li svg {
	font-size: 0.8rem;
	margin-right: 3px;
}
nav .nav-top .fone {
	display: none;
	font-size: 0.8rem;
	overflow: hidden;
	padding-bottom: 5px;
	padding-top: 10px;
	position: relative;
	top: 6px;
}
nav .nav-top .fone a {
	color: #FBC92B;
}

nav .nav-top .fone svg {
	font-size: 1.1rem;
	padding-right: 10px;
}

nav .nav-top .user-tools {
	padding-bottom: 1rem;
	padding-top: 2rem;
	text-align: left;
}
nav .nav-top .user-tools a {
	font-size: 0.8rem;
}
nav .nav-top .user-tools a.btn-cor-primaria {
	background: transparent;
	color: var(--cor-primaria);
}
nav .nav-top .user-tools a.btn-cor-primaria:hover {
	background: var(--cor-primaria);
	color: #FFF;
}

nav .nav-top .navbar-toggler {
	position: absolute;
	right: 15px;
	top: 0;
	padding: 0;
	border: 0;
}
nav .nav-top .navbar-toggler svg {
	color: #666;
}
nav .nav-top .navbar-toggler .collapse ul.navbar-nav li {
	padding: 8px 0;
	text-align: left;
}

@media (min-width: 768px) {
	nav .brand img {
		max-width: 300px;
	}
} /* 768px */

@media (min-width: 1200px) {
	nav {
		text-align: left;
	}
	nav .brand {
		float: left;
		padding-bottom: 0;
		padding-top: 5px;
	}
	nav .nav-top ul {
		padding-left: 35px;
		padding-top: 13px;
	}
	nav .nav-top ul li {
		padding-right: 10px;
	}
	nav .nav-top ul li a, nav .nav-top .fone {
		font-size: 0.7rem;
	}
	nav .nav-top .fone {
		position: absolute;
		right: 15px;
		padding-top: 0;
	}
	nav .nav-top .user-tools {		
		padding: 0;
		position: absolute;
		right: 15px;
		top: 9px;
	}
	nav .nav-top .user-tools a {
		font-size: 1rem;
		padding: 3px 20px;
	}
} /* 1200px */

/*
|-------------------------------------
| HEADER
|-------------------------------------
*/
header {
	height: 100%;
}
.jumbotron {
	background: #7c5937 url(../../img/bg-login_m.jpg) no-repeat right top;
	background-size: cover;
	border: 0;
	border-radius: 0;
	color: #000;
	height: 100% !important;
	margin: 0;
	padding: 10rem 0;
	text-align: center;
}
.jumbotron .box {
	box-shadow: none;
	padding: 0;
}
.jumbotron h1 {
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 700;
}
.jumbotron h1 small {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 0 2rem;
}
.jumbotron .banner img {
	position: relative;
	z-index: 0;
}
.jumbotron p {
	font-size: 1.2rem;
 	margin-bottom: 0;
 	padding: 5px 0 5px 0;
 }
.jumbotron .destaque {
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 20px;
	padding: 2rem 0 0;
	text-align: center;
}
.jumbotron .destaque svg {
	display: block;
	font-size: 3rem;
	margin: 0 auto 10px; 
}

.jumbotron form {
	padding-top: 1.75rem;
}
.jumbotron form label.title {
	font-size: 1.2rem;
}
.jumbotron form p {
	margin-bottom: 1rem;
}

@media (min-width: 1200px) {
	.jumbotron {
		background: #FFF url(../../img/bn-home.jpg) no-repeat center top;
		background-size: 100% auto;
		padding: 7rem 0;
		text-align: left;
	}
	.jumbotron h1 {
 		font-size: 3rem;
 		padding-bottom: 3rem;
 		text-transform: none;
 	}
 	.jumbotron .destaque {
 		font-size: 1.5rem;
 		margin-bottom: 3rem;
 		padding: 0;
 		text-align: left;
 		width: 75%;
 	}
 	.jumbotron .destaque svg {
	display: block;
	margin: 0 auto 10px; 
}
} /* 1200px */

/*
|-------------------------------------
| MAIN
|-------------------------------------
*/
main {
	padding: 0;
}

/*
|-------------------------------------
| MÓDULOS
|-------------------------------------
*/

.wrapper-problemas ul {
	border: 0;
	border-radius: 15px;
	box-shadow: 0 -15px 20px #eee;
	list-style: none;
	padding: 30px;
}
.wrapper-problemas ul li {
	align-items: flex-start;
	display: flex;
	padding-bottom: 15px;
}
.wrapper-problemas ul li svg {
	color: #D1948C;
	margin-right: 10px;
}

/* Vantagens */
.wrapper-vantagens h2, .wrapper-sobre h2, .wrapper-clientes h2 {
	background: var(--cor-default);
	margin-bottom: 3rem;
	margin-left: -15px;
	margin-right: -15px;
	padding: 2.5rem 15px;
	position: relative;
}
.wrapper-vantagens h2::before, .wrapper-sobre h2::before, .wrapper-clientes h2::before {
  background: transparent;
  border: 0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  bottom: 10px;
  box-shadow: 0 0 30px #999;
  content: "";
  height: 25px;
  left: 50%;
  position: absolute;
  right: 0;
  transform: translateX(-50%);
  z-index: -1;
  width: 100%;
}
.wrapper-vantagens h3 {
	font-weight: 700;
	padding-bottom: 10px;
	text-align: center;
}
.wrapper-vantagens .i-container {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #000;
	border-radius: 50%;
	height: 80px;
	margin: 0 auto;
	margin-bottom: 25px;
	width: 80px;
}
.wrapper-vantagens .i-container svg {
	display: block;
	font-size: 2rem;
	line-height: 50px;
	margin: 0 auto;
}
.wrapper-vantagens p {
	padding-bottom: 30px;
	text-align: center;
}
.wrapper-vantagens .last-item p {
	margin-bottom: 0;
	padding-bottom: 0;
}

.wrapper-video {
	background: var(--cor-primaria);
}
.wrapper-video h2 {
	color: #FFF;
}
.wrapper-video video {
	width: 100%;
}
.wrapper-video iframe {
	height: 350px;
	width: 100%;
}

/* Planos */
.wrapper-planos {
	background: var(--cor-primaria);
}
.wrapper-planos h2 {
	color: #FFF;
}
.wrapper-planos .box {
	background: #FFF;
	border: 1px solid #EEE;
	border-radius: 15px;
	box-shadow: 0 15px 25px #4C2B0B;
	margin-bottom: 15px;
	padding: 20px;
	padding-bottom: 0;
}
.wrapper-planos .box h3 {
	background: #ccc;
	border-radius: 15px 15px 0 0;
	color: #FFF;
	font-size: 1.3rem;
	font-weight: bold;
	margin: -21px -21px 2.5rem;
	padding: 20px;
	position: relative;
	text-align: center;
}
.wrapper-planos .box h3::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #333 transparent transparent transparent;
}
.wrapper-planos .box-silver {
	border-color: #ABABAB;
}
.wrapper-planos .box-silver h3 {
	background: #ABABAB;
	text-shadow: 1px 1px 1px #7F7F7F;
}
.wrapper-planos .box-silver h3::before {
	border-color: #ABABAB transparent transparent transparent;
}
.wrapper-planos .box-gold {
	border-color: #F7B900;
}
.wrapper-planos .box-gold h3 {
	background: #F7B900;
	text-shadow: 1px 1px 1px #C29100;
}
.wrapper-planos .box-gold h3::before {
	border-color: #F7B900 transparent transparent transparent;
}
.wrapper-planos .box-diamond {
	border-color: #0B5ED7;
}
.wrapper-planos .box-diamond h3 {
	background: #0B5ED7;
	text-shadow: 1px 1px 1px #07449E;
}
.wrapper-planos .box-diamond h3::before {
	border-color: #0B5ED7 transparent transparent transparent;
}

.wrapper-planos .box ul {
	list-style: none;
	padding-left: 0;
}
.wrapper-planos .box ul li {
	align-items: flex-start;
	display: flex;
	padding-bottom: 2rem;
}
.wrapper-planos .box ul li svg.fa-check {
	color: #009136;
	margin-right: 10px;
}
.wrapper-planos .box ul li svg.fa-xmark {
	color: #F00;
	margin-right: 10px;
}

.wrapper-como-funciona {
	color: #FFF;
}
.wrapper-como-funciona h2 {
	padding-left: 0;
	padding-right: 0;
}
.wrapper-como-funciona h3 {
	font-weight: bold;
}
.wrapper-como-funciona div.w-100 {
	padding: 10px 0;
}

.wrapper-valor-inicial {
	background: #850113;
	color: #fff;
	font-size: 1.5rem;
	padding: 25px 15px;
	text-align: center;
}
.wrapper-valor-inicial h3, .wrapper-valor-inicial .valor {
	font-size: 1.55rem;
}
.wrapper-valor-inicial p {
	font-size: 1.2rem;
}
.wrapper-valor-inicial span.amarelo {
	font-weight: bold;
}

.wrapper-numeros {
	padding-bottom: 0;
}
.wrapper-numeros .box {
	border: 1px solid var(--cor-primaria);
	border-radius: 15px;
	box-shadow: 6px 6px 0 var(--cor-primaria); 
	color: var(--cor-primaria);
	margin-bottom: 20px;
	padding: 1.5rem 0;
	text-align: center;
}
.wrapper-numeros .box span {
	display: block;
	font-size: 1.75rem;
	font-weight: bold;
}

/* Clientes */
.wrapper-clientes {
	text-align: center;
}
 .wrapper-clientes ul {
 	list-style: none;
 	padding: 0;
 }
 .wrapper-clientes ul li {
 	display: inline-block;
 	margin-bottom: 5px;
 	width: 100%;
 }
 .wrapper-clientes ul li img {
 	max-width: 100%;
}

.wrapper-sobre {
	padding-top: 0; 
}
.wrapper-sobre img {
	display: block;
	margin: 0 auto;
	position: relative;
}

/* Contato */
.wrapper-contato {
	text-align: center;
}
.wrapper-contato h2 {
	background: var(--cor-secundaria);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 5px 10px #EEE;
	font-weight: bold;
	margin-bottom: 25px;
	padding: 20px;
	position: relative;
}
.wrapper-contato h2::before {
	left: 50%;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: var(--cor-secundaria) transparent transparent transparent;
	content: "";
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
}
.wrapper-contato .cta a {
	margin-top: 0;
}

@media (min-width: 1200px) {
	.wrapper-problemas ul {
		padding: 40px;
	}
	.wrapper-video iframe {
		height: 450px;
		margin: 0 auto;
	}
	.wrapper-vantagens {
		padding-top: 0;
	}
	.wrapper-vantagens h2, .wrapper-sobre h2, .wrapper-clientes h2 {
		margin-bottom: 4rem;
		margin-left: -12px;
		margin-right: -12px;
		padding: 2.5rem 7rem;
	}
    .wrapper-vantagens svg {
    	display: block;
    	font-size: 2rem;
    }
    .wrapper-vantagens .w-100 {
    	padding: 10px 0;
    }
    .wrapper-planos .box h3 {
    	padding: 20px;
    }
 	.wrapper-clientes h3 {
 		max-width: none;
 	}
 	.wrapper-clientes ul li {
 		width: 30%;
	}
	.wrapper-numeros .box {
		font-size: 1.5rem;
		margin-bottom: 0;
		padding: 75px 15px;
	}
	.wrapper-numeros .box span {
		font-size: 2.5rem;
		font-weight: bold;
	}
	.wrapper-contato h2 {
		margin-bottom: 40px;
		padding: 40px 25px;
	}
	.wrapper-contato h2::before {
		border-width: 15px 15px 0 15px;
	}
} /* 1200 */

/*
|------------------------------------
| FOOTER
|------------------------------------
*/
footer {
	background: var(--cor-primaria);
	color: #FFF;
	text-align: center;
}
footer .contato .fone {
	font-size: 1.5rem;
}
footer address {
	font-size: 0.65rem;
}
footer .copy {
	clear: both;
	font-size: 0.65rem;
	padding: 1rem 0;
}
footer a, footer a:hover {
	color: #FFF;
}
footer .social {
	padding-bottom: 20px;
}
footer .social a {
	display: inline-block;
	font-size: 1rem;
	margin-bottom: 10px;
}
footer .social a:hover {
	color: #9D9C9C;
	text-decoration: none;
}
footer a.desenvolvedor {
}

@media (min-width: 768px) {
	footer {
	    text-align: left;
    }
    footer .col-md-6 {
    	position: relative;
    }
    footer .contato .fone {
    	display: block;
    	font-size: 1rem;
    	padding-bottom: 10px;
    }
    footer address {
    	font-size: 0.85rem;
    	margin-bottom: 0;
    }
    footer .social {
    	padding-bottom: 0;
    }
    footer .copy {
    	padding: 0;
    }
    footer .brand {
    	text-align: right;
    }

} /* 768px */