/*
	Resets
========================================================================== */
body {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	background: #FFF;
}

body.space {
	padding-top: 120px;
}

a {
	text-decoration: none;
}

a:hover {
	color: #0D5727;
}

ul, ol {
	list-style: outside none;
	padding: 0;
}

p {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: #838383;
	line-height: 24px;
	font-weight: 400;
	margin-bottom: 0;
}

p strong {
	font-weight: 700;
}

/*
	Estilo Gerais
========================================================================== */
.transition {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.bg-verde-kmb {
	background-color: #0D5727;
}

.kmb-main-color {
	color: #0D5727;
}

.kmb-main2-color {
	color: #2CB455
}

.kmb-second-color {
	color: #C18F1F;
}

/* .bg-repeat-kmb {
	width: 100%;
	height: 15px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14.48" height="14.457" viewBox="0 0 14.48 14.457"><path d="M0,0H14.48L7.208,14.457Z" fill="%23ffec96"/><path d="M0,0H8.89L4.426,8.876Z" transform="translate(2.795)" fill="%23c18f1f"/></svg>');
	background-repeat: repeat-x;
	background-color: transparent;
} */

.bg-repeat-kmb:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 15px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14.48" height="14.457" viewBox="0 0 14.48 14.457"><path d="M0,0H14.48L7.208,14.457Z" fill="%23ffec96"/><path d="M0,0H8.89L4.426,8.876Z" transform="translate(2.795)" fill="%23c18f1f"/></svg>');
	background-repeat: repeat-x;
	background-color: transparent;
  }

.bg-repeat-kmb.up:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.48' height='14.457' viewBox='0 0 14.48 14.457'%3E%3Cg id='Group_479' transform='translate(-65.52 -3775.345)'%3E%3Cpath id='Path_9224' d='M0,0H14.48L7.208,14.457Z' transform='translate(80 3789.802) rotate(180)' fill='%23ffec96' /%3E%3Cpath id='Path_9225' d='M0,0H8.89L4.426,8.876Z' transform='translate(77.205 3789.802) rotate(180)' fill='%23c18f1f' /%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-color: transparent;
  }
  

/*
	Captcha
========================================================================== */
.grecaptcha-badge {
	z-index: 1;
}

/*
	Estilos da LGPD
========================================================================== */
.lgpd {
	background: #05387E;
	padding: 10px;
	overflow: hidden;
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 200;
	color: #FFF;
	display: none !important;
}

.lgpd.esconde {
	display: none;
}

.lgpd .aviso {
	float: left;
	font-size: 14px;
}

.lgpd .aviso a {
	color: #FFF;
}

.lgpd .aviso a:hover {
	color: #408421
}

.lgpd .fechar-aviso {
	float: right;
}

.lgpd .fechar-aviso .close-lgpd {
	color: #FFF;
	font-weight: 900;
	font-size: 20px;
}

.lgpd .fechar-aviso .close-lgpd:hover {
	color: #408421;
}

/*
	Header top
========================================================================== */
header .header-top-area {
	background-color: #2CB455;
}

.header-top-area a {
	color: #FFF;
	font-size: 12px;
	font-style: italic;
	vertical-align: middle;
}

.header-top-area a .icon {
	display: inline-block;
	vertical-align: middle;
}

.header-top-area a svg {
	fill: #FFF;
	display: inline-block;
	vertical-align: middle;
}

.header-top-area a:hover {
	color: #0D5727;
}

.header-top-area a:hover svg {
	fill: #0D5727 !important;
}

/*
	Main Header 
========================================================================== */
header .main-header {
	position: relative;
	width: 100%;
	background-color: #0D5727;
}

header .main-header.fixed {
	top: 0px;
	position: fixed;
	z-index: 10;
}

.main-header .menu-area {
	background: #0D5727;
}

.menu-area .menu {

}

@media only screen and (max-width: 992px) {
	.main-header .menu-area {
		overflow: auto;
	}
}

.menu-area .menu li {
	padding-top: 40px;
}

.menu-area .menu li a {
	color: #FFF;
	text-transform: uppercase;
	position: relative;
}

.menu-area .menu li a:hover {
	color: #C18F1F;
}

.menu-area .menu li a .icon-hover {
	position: absolute;
	top: -35px;
	left: 50%;
	margin-left: -7px;
	opacity: 0;

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.menu-area .menu li a:hover .icon-hover {
	top: -20px;
	opacity: 1;
}


/*
	Header/Banner principal geral
========================================================================== */
.initial-area {
	position: relative;
	background-image: url('../images/bg-principal.jpg');
	background-size: 100%; 
	background-repeat: no-repeat; 
	background-position: top center;
	background-color: #EEEEEE;
}


/*
	AO VIVO
========================================================================== */
.aovivo-area {
	position: relative;
}

.aovivo-area .marca img {
	max-width: 170px;
}

.aovivo-area .link-tube {
	border: 1px solid #282828;
	width: 100%;
	display: inline-block;
}

.aovivo-area .link-tube:hover {
	background-color: #eee;
}

.aovivo-area .icon-vivo {
	display: inline-block;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	background-color: red;
	border-radius: 50%;
	animation: pulse 1s infinite alternate;
	margin-right: 5px;
	margin-bottom: 5px;
}
  
@keyframes pulse {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.aovivo-area .vivo-info {
	color: #282828;
}

.embed-area {
	background-color: #EEEEEE;
}

.embed-area .video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.embed-area .video-container iframe, 
.embed-area .video-container object, 
.embed-area .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/*
	Padrão de FORM
========================================================================== */
.form-element {
	position: relative;
}

.form-element .input {
	font-size: 16px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1px solid #838383;
	background: transparent;
}

.form-element .input.textarea {
	font-size: 16px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 100%;
	min-height: 300px;
	border: none;
	border-bottom: 1px solid #838383;
	background: transparent;
}

.form-file {
	font-size: 16px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 100%;
	border: 1px solid #838383;
	background: transparent;
}

.form-element .input:focus {
	outline: none;
	border-bottom: 1px solid #0D5727
}

.form-element label {
	color: #838383;
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.input:focus ~ label,
.input:valid ~ label,
.input:read-only ~ label {
	top: -20px;
	font-size: 14px;
	color: #0D5727;
}

.form-element .bar {
	position: relative;
	display: block;
	width: 10px;
}

.form-element .bar:before, .form-element .bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #0D5727;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.form-element .bar:before {
	left: 50%;
}

.form-element .bar:after {
	right: 50%;
}

.form-element .input:focus ~ .form-element .bar:before, .form-element .input:focus ~ .form-element .bar:after {
	width: 50%;
}

.form-element .highlight {
	position: absolute;
	height: 60%;
	width: 100%;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}

.form-element .input:focus ~ .highlight {
	animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
from {
	background: #408421;
}

to {
	width: 0;
	background: transparent;
}
}


.button-box {
	background: none;
	appearance: none;
	border: 2px solid #0D5727;
	border-radius: 0px;
}

.button-box:hover {
	background-color: #0D5727;
	color: #FFF;
}


/*
	Rodape
========================================================================== */
.footer-area {
	color: #FFF;
	background-color: #0D5727;
}

.footer-area .marca img {
	max-width: 220px;
}

.footer-area a {
	color: #FFF;
}

.footer-area a:hover {
	color: #C18F1F;
}

.footer-area a svg {
	fill: #2CB455
}

.footer-area a:hover svg {
	fill: #C18F1F !important;
}


.zap-fixed {
	position: fixed;
	bottom: 30px;
	right: 20px;
}

.zap-fixed:hover {
	animation: pulo 0.5s infinite alternate;
}
  
@keyframes pulo {
	0% {
		bottom: 30px;
	}
	100% {
		bottom: 40px;
	}
}


/**
 * Sincore 
 */
 .sincore {
	margin-bottom: 10px;
}

.sincore a .icon {
	display: inline-block;
	background-color: #FFF;
	width: 130px;
	text-align: right;
	text-indent: 30px;

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.sincore a .text {
	display: inline-block;
	width: 130px;
	background-color: #FFF;
	text-indent: -280px;
	overflow: hidden;
	vertical-align: middle;

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.sincore a:hover .text {
	text-indent: 0px;
}

.sincore a:hover .icon {
	width: 80px;
}