@charset "UTF-8";

/*  
Theme Name: BS Energias Renováveis
Theme URI: http://www.bsenergias.com.br
Description: Tema para a BS Energias Renováveis
Author: Marcos Lunardelli.
Author URI: http://www.marcoslunardelli.com.br
Version: 1.0

 * Estilo CSS Site BS Energias Renováveis
 * http://creativecommons.org/licenses/by-nc-nd/4.0/
 */

:root {
	--branco: #ffffff;
	--creme: #EBE6DF;
	--amarelo: #E3E829;
	--cinza: #2E2E2C;
	--grafite: #1f1f1f;
}


::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--creme); 
}
::-webkit-scrollbar-thumb {
	background: var(--grafite); 
}
::-webkit-scrollbar-thumb:hover {
	background: var(--amarelo); 
}

::selection { 
	color: var(--cinza);
	background: var(--creme)
}
::-moz-selection {
	color: var(--cinza);
	background: var(--creme)
}

* {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 15px;
	box-sizing: border-box;
}

body {
	width: 100vw;
	overflow-x: hidden;
	background: var(--cinza);
}

header {
	width: 100%;
	padding: 30px 0;
	position: absolute;
	top: 0px;
	z-index: 99999;
	background-color: transparent;
}

header.fixo {
	position: fixed;
	z-index: 99999;
	background-color: var(--grafite);
}
	header.logado {
		top: 30px;
	}
	
	header.fixo div a img.logo {
		max-width: 100%;
	}

	header nav.desktop ul {
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

				
.e_menu {
	width: 100%;
	height: 100px;
	clear: both;
}
#banner_home {
	width: 100vw;
	padding: 0px;
	margin: 0px;
	position: relative;
	background-color: var(--cinza);
}
	#banner_home .bg_video {
		width: 100vw;
		height: 620px;
		position: relative;
		overflow: hidden;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		#banner_home .bg_video video {
			object-fit: cover;
			width: 100vw;
			height: 100%;
			position: absolute;
			top: 0px; left: 0px;
			z-index: 0;
		}

section#servicos {
	width: 100vw;
	position: relative;
	margin: 0px;
	padding: 0px;
	background-image: url(img/bg_malha.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}
	section#servicos .bg_engenheiros {
		position:absolute;
		bottom: 0px;
		right: 5%;
		width: 35%;
	}
	section#servicos .bg_malha {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px; left: 0px;
		background-image: url(img/bg_malha_amarela.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-color: transparent;
		mix-blend-mode: darken;
	}
	.eng_col {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	  }
	  
		.col_3 {
			flex: 1 0 33.33%;
			max-width: 33.33%;
			padding: 10px;
		}
	.lista_servicos p {
		color: var(--cinza);
		font-size: 15px;
		line-height: 15px;
		font-weight: 400;
		text-align: left;
		text-transform: uppercase;
		padding-bottom: 20px;
	}

#depoimentos, #depoimentos li {list-style: none;}
#depoimentos {
	width: 100%;
}
	
#navegacao_depoimento {
	width: 100%;
}

	.slick-dots { display: none !important; opacity: 0; }
	.slick-arrow {
		display: inline-block;
		border: none;
		background-color: transparent;
		cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		filter: brightness(10);
	}
		.slick-arrow:not(.slick-disabled):hover {
			filter: brightness(1);
			opacity: 1;
		}
					
		.slick-prev {
			margin-right: 10px;
		}
		.slick-next {
	
		}  
		
		.slick-disabled { cursor: not-allowed; opacity: 0.6; filter: brightness(10); }

/* FORMULARIO */

::placeholder,
:-ms-input-placeholder, :-ms-input-placeholder,
::-ms-input-placeholder, ::-ms-input-placeholder {
	color: var(--creme);
	-webkit-text-fill-color: var(--creme);
	opacity: 1;
}

::placeholder {
	color: var(--creme);
	opacity: 1;
}

input, textarea {
    background-color: var(--grafite);
    -webkit-appearance: none;
    border-radius: 0;
}

.input:-webkit-autofill, .textarea:-webkit-autofill,
.input:-webkit-autofill:hover, .textarea:-webkit-autofill:hover,
.input:-webkit-autofill:focus, .textarea:-webkit-autofill:focus,
.input:-webkit-autofill:active, .textarea:-webkit-autofill:active,
.input:-internal-autofill-selected, .textarea:-internal-autofill-selected,
input:-webkit-autofill, textarea:-webkit-autofill,
input:-webkit-autofill:hover, textarea:-webkit-autofill:hover,
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus,
input:-webkit-autofill:active, textarea:-webkit-autofill:active,
input:-internal-autofill-selected, textarea:-internal-autofill-selected {
	outline: none;
	font-size: 16px;
	padding: 15px 0;
	border: none;
	border-bottom: 1px solid var(--creme);
	background-color: var(--cinza) !important;
	width: 100%;
	color: var(--creme);
	box-shadow: 0px !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--cinza) inset !important;
	-webkit-text-fill-color: var(--creme);
}

.input, .input:focus {
	-webkit-appearance: none;
	outline: none;
	font-size: 16px;
	padding: 15px 0;
	border: none;
	border-bottom: 1px solid var(--creme);
	background-color: var(--cinza);
	width: 100%;
	max-width:100%
	color: var(--creme);
	box-shadow: 0px;
	-webkit-text-fill-color: var(--creme);
	transition: background-color 5000s ease-in-out 0s;
}
.input:-webkit-autofill, .textarea:-webkit-autofill,
.input:-webkit-autofill:hover, .textarea:-webkit-autofill:hover,
.input:-webkit-autofill:focus, .textarea:-webkit-autofill:focus,
.input:-webkit-autofill:active, .textarea:-webkit-autofill:active,
.input:-internal-autofill-selected, .textarea:-internal-autofill-selected {
	background-color: var(--cinza) !important;
	-webkit-text-fill-color: var(--creme);
	-webkit-box-shadow: 0 0 0px 1000px var(--cinza) inset;
	-webkit-appearance: none;
	transition: background-color 5000s ease-in-out 0s;
}

.textarea, .textarea:focus {
	-webkit-appearance: none;
	width: 100%;
	max-width:100%
	height: 100px;
	min-height: 60px;
	max-height: 150px;
	resize: vertical;
	outline: none;
	font-size: 16px;
	padding: 15px 0;
	border: none;
	border-bottom: 1px solid var(--creme);
	background-color: var(--cinza);
	color: var(--creme);
	box-shadow: 0px;
	-webkit-text-fill-color: var(--creme);
	transition: background-color 5000s ease-in-out 0s;
}

.bt_form {
	border: none;
	padding: 15px 30px;
	background: var(--amarelo);
	font-weight:700;
	font-size: 16px;
	color: var(--cinza);
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
	.bt_form:hover {
		background: var(--creme);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border: 0px;
	margin: 0px;
	margin-top: 20px;
	padding: 0px;
	padding-left: 10px;
	float: left;
	position: relative;
}
.wpcf7 form.sent .wpcf7-response-output {
	border: none;
	margin: 20px 0px 0px -5px;
    display: inline-block;
    width: 100%;
    position: relative;
}
.wpcf7-not-valid-tip { position: relative; text-align: left; }
.wpcf7-spinner {
	display: inline !important;
	margin: 0px !important;
    position: relative !important;
    left: -30px;
    filter: brightness(0);
}

div.typed span:not(.ti-cursor) {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

div.typed span.ti-cursor {
	font-size: 60px !important;
	line-height: 60px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	color: var(--amarelo) !important;
}

#rodape {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: center center;
	background-image: url(img/bg_malha_2.jpg);
	background-color: transparent;
}
	.tel_whatsapp img, .tel_whatsapp div {
		display: inline-block;
	}
		.tel_whatsapp img {
			margin-right: 10px;
			position: relative;
			top: -10px;
		}


	div.p p {
		color: var(--cinza);
		font-weight: bold;
		font-size: 16px;
	}
	.mrg_right { margin-right: 10px; }
	.mrg_right20 { margin-right: 20px; }

		

	.hamburger {
		display: inline-block;
		cursor: pointer;
	}
	  
		.bar1, .bar2, .bar3 {
			width: 35px;
			height: 5px;
			background-color: var(--branco);
			margin: 6px 0;
			transition: 0.4s;
		}

		a.toggle_menu:hover .hamburger .bar1, a.toggle_menu:hover .hamburger .bar2, a.toggle_menu:hover .hamburger .bar3 {
			background-color: var(--amarelo);
		}
		
		/* Rotate bar1 */
		.change .bar1 {
			transform: rotate(-45deg) translate(-9px, 6px);
		}
		
		/* Fade out bar2 */
		.change .bar2 {
			opacity: 0;
		}
		
		/* Rotate bar3 */
		.change .bar3 {
			transform: rotate(45deg) translate(-8px, -8px);
		}
			.change .bar1, .change .bar2, .change .bar3 {
				background-color: var(--amarelo);
			}
	  

a:focus  { outline: 0px; }

.ff_light { font-weight: 300 }
.ff_regular { font-weight: 400 }
.ff_medium { font-weight: 500 }
.ff_bold { font-weight: 700 }

.fs_8 { font-size: 8px }
.fs_10 { font-size: 10px }
.fs_12 { font-size: 12px }
.fs_14 { font-size: 14px }
.fs_15 { font-size: 15px }
.fs_16 { font-size: 16px }
.fs_18 { font-size: 18px }
.fs_20 { font-size: 20px }
.fs_25 { font-size: 25px }
.fs_30 { font-size: 30px }
.fs_35 { font-size: 35px }
.fs_40 { font-size: 40px }
.fs_45 { font-size: 45px }
.fs_60 { font-size: 60px }
.fs_100 { font-size: 100px }

.lh_10 { line-height: 10px }
.lh_14 { line-height: 14px }
.lh_18 { line-height: 18px }
.lh_40 { line-height: 40px }
.lh_45 { line-height: 45px }
.lh_60 { line-height: 60px }
.lh_70 { line-height: 70px }

.tc_amarelo { color: var(--amarelo) }
.tc_cinza { color: var(--cinza) }
.tc_branco { color: var(--branco) }
.tc_creme { color: var(--creme) }

.ta_right { text-align: right }
.ta_center { text-align: center }
.ta_left { text-align: left }
.ta_justify { text-align: justify }

.uppercase {text-transform: uppercase}
.italic { font-style: italic}

.bg_branco { background-color: var(--branco) }
.bg_creme { background-color: var(--creme) }
.bg_amarelo { background-color: var(--amarelo) }
.bg_cinza { background-color: var(--cinza) }

.v_hidden { visibility: hidden }

.p_relative { position: relative }
.p_absolute { position: absolute }

.fl_left { float: left }
.fl_right { float: right }

.d_inline_block { display: inline-block }
.d_inline { display: inline }
.d_block { display: block; }
.d_flex { display: flex }

.justify_end { justify-content: flex-end }

.mrg_left_auto { margin-left: auto;}
.mrg_right_0 { margin-right: 0px}

.mrg_negativa_20 {
	position: relative;
	top: -20px;
}

.pdg_right_10p { padding-right: 10% }
.pdg_right_5p { padding-right: 5% }

.pdg_left_10p { padding-left: 10% }
.pdg_left_5p { padding-left: 5% }


.largura_total { width: 100%; display: block }

.duas_colunas {
	-webkit-columns: 2;
  	-moz-columns: 2;
	columns: 2;
 	-webkit-column-gap: 10%;
 	-moz-column-gap: 10%;
 	column-gap: 10%;
}
.duas_colunas p {
	line-height: 20px;
	padding-bottom: 20px;
	-webkit-column-break-inside: avoid; /* Chrome, Safari */
  	page-break-inside: avoid; /* Firefox */
  	break-inside: avoid-column; /* IE, Edge */
}

.pagina-fluida {
	width: 100%;
}
.clear {
	clear: both;
}
.e_1 {
	width: 100%;
	height: 1px;
	clear: both;
}
.e_5 {
	width: 100%;
	height: 5px;
	clear: both;
}
.e_10 {
	width: 100%;
	height: 10px;
	clear: both;
}
.e_20 {
	width: 100%;
	height: 20px;
	clear: both;
}
.e_30 {
	width: 100%;
	height: 30px;
	clear: both;
}
.e_40 {
	width: 100%;
	height: 40px;
	clear: both;
}
.e_50 {
	width: 100%;
	height: 50px;
	clear: both;
}
.e_80 {
	width: 100%;
	height: 80px;
	clear: both;
}
.e_100 {
	width: 100%;
	height: 100px;
	clear: both;
}
.e_150 {
	width: 100%;
	height: 150px;
	clear: both;
}
.e_200 {
	width: 100%;
	height: 200px;
	clear: both;
}
.e_300 {
	width: 100%;
	height: 300px;
	clear: both;
}

.sm2x {
	margin-left: -20px;
    margin-right: -20px;
}




/* MENU */

@media (max-width:1049px) {
	header {
		position: relative;
		z-index: 999999;
		background: var(--grafite); 
	}

	div#menu_mobile {
		display: block;
		float: right;
	}
		nav.desktop {
			display: none;
		}
		.celular {
			display: block;
		}
		.desktop {
			display: none;
		}
		nav.mobile {
			width: 100%;
			display: none;
		}
			nav.mobile ul {
				width: 100%;
				padding-top: 20px;
			}
				nav.mobile ul li {
					width: 100%;
					height: 50px;
					display:table;
					text-align: center;
				}
				nav.mobile ul li:hover, nav.mobile ul li.current_page_item {
					color: var(--branco);
					background: var(--grafite);
				}
					nav.mobile ul li a {
						text-align: center;
						text-decoration: none;
						font-weight: 700;
						font-size: 18px;
						color: var(--creme);
						text-transform: uppercase;
						display: table-cell;
						vertical-align: middle;
						width: 100%;
						height: 100%;
					}
					nav.mobile ul li a:hover, nav.mobile ul li:hover a, nav.mobile ul li.current-menu-item a {
						color: var(--amarelo);
					}

			.eng_form_busca {
				position: relative;
				bottom: 0px;
				right: 0px;
			}

			.e_menu {
				height: 0px;
			}

			/* AJUSTES MOBILE */
			.fs_20 { font-size: 18px }
			.fs_25 { font-size: 22px }
			.fs_30 { font-size: 25px }
			.fs_35 { font-size: 30px }
			.fs_40, .fs_45 { font-size: 35px }
			.fs_60 { font-size: 40px }
			.fs_100 { font-size: 70px }

			.lh_10 { line-height: 10px }
			.lh_40, .lh_45 { line-height: 35px }
			.lh_60 { line-height: 40px }
			.lh_70 { line-height: 70px }

			.e_100 { height: 60px; }

			header.logado { top: 0px; }

			.ta_left, .ta_right { text-align: center; }

			.wpcf7-response-output { text-align: center; width: 100%; }

			.tel_whatsapp {padding-top: 40px;}

			.mrg_right_0 { margin-right: auto }

			.bt_form {
				padding: 15px 40px;
			}
			.duas_colunas {
				-webkit-columns: 1;
  				-moz-columns: 1;
				columns: 1;
 				-webkit-column-gap: 0px;
 				-moz-column-gap: 0px;
 				column-gap: 0px;
			}
			.eng_col {
				display: block;
				width: 100%;
			  }
			  
				.col_3 {
					width: 100%;
					max-width:100%;
					padding: 0 0 40px 0;
					text-align: center;
				}
			.pdg_right_10p { padding-right: 0px;}
			.pdg_right_5p { padding-right: 0px;}
			.pdg_left_5p { padding-left: 0px;}
			.pdg_left_10p { padding-left: 0px;}
			
			section#servicos .bg_engenheiros {
				position:relative;
				bottom: auto;
				right: auto;
				width: 100%;
			}
			.logo_depo {
				width:100%;
				max-width:100%;
				height: auto !important;
			}
				
				

}

@media (min-width:1050px) {
	header {
		position: fixed;
		z-index: 9999999;
	}

	div#menu_mobile {
		display: none;
	}
	a.toggle_menu:link, a.toggle_menu:visited, a.toggle_menu:link b, a.toggle_menu:visited b  { color: var(--branco); }

	.celular {
		display: none;
	}
	.desktop {
		display: block;
	}
		#menu nav.mobile {
			display: none;
		}
		#menu nav.desktop {
			width: 100%;
		}
			#menu nav.desktop ul {
				margin: 10px 0 0 0;
				text-align: right
			}

				#menu nav.desktop ul li {
					display: inline-block;
					position: relative;
					-webkit-transition: all 0.2s ease-out;
					-moz-transition: all 0.2s ease-out;
					-ms-transition: all 0.2s ease-out;
					-o-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;
					border: 0px none;
					opacity: 1;
					margin: 0 40px;
				}

				#menu nav.desktop ul li:first-child {margin-left:0px;}
				#menu nav.desktop ul li:last-child {margin-right:0px;}

				#menu nav.desktop ul li a {
					width: 100%;
					height: 100%;
					font-weight: 500;
					font-size: 14px;
					color: var(--creme);
					text-align: center;
					text-decoration: none;
					text-transform: uppercase;
					display: block;
					-webkit-transition: all 0.2s ease-out;
					-moz-transition: all 0.2s ease-out;
					-ms-transition: all 0.2s ease-out;
					-o-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;
					opacity: 1;
					position: relative;
				}
					
					#menu nav.desktop ul li:not(.bt_borda) a::after {
						content: ' ';
						width: 30%;
						height: 2px;
						position: absolute;
						bottom: -11px;
						left: 0px;
						background-color: var(--creme);
						-webkit-transition: all 0.2s ease-out;
						-moz-transition: all 0.2s ease-out;
						-ms-transition: all 0.2s ease-out;
						-o-transition: all 0.2s ease-out;
						transition: all 0.2s ease-out;
					}
						#menu nav.desktop ul li a:hover::after, #menu nav.desktop ul li.current-menu-item a::after {
							width: 100%;
							background-color: var(--amarelo);
							-webkit-transition: all 0.2s ease-in;
							-moz-transition: all 0.2s ease-in;
							-ms-transition: all 0.2s ease-in;
							-o-transition: all 0.2s ease-in;
							transition: all 0.2s ease-in;
						}

					#menu nav.desktop ul li a:hover, #menu nav.desktop ul li.current-menu-item a, #menu nav.desktop ul li.ativo a, #menu nav.desktop ul li a.ativo {
						color: var(--amarelo);
						-webkit-transition: all 0.2s ease-in;
						-moz-transition: all 0.2s ease-in;
						-ms-transition: all 0.2s ease-in;
						-o-transition: all 0.2s ease-in;
						transition: all 0.2s ease-in;
					}

					#menu nav.desktop ul li.bt_borda a {
						position: relative;
						padding: 10px 15px;
						border: 1px solid var(--creme);
						background-color: transparent;
						-webkit-transition: all 0.2s ease-in-out;
						-moz-transition: all 0.2s ease-in-out;
						-ms-transition: all 0.2s ease-in-out;
						-o-transition: all 0.2s ease-in-out;
						transition: all 0.2s ease-in-out;
					}
						#menu nav.desktop ul li.bt_borda a:hover {
							border: 1px solid var(--amarelo);
							background-color: var(--amarelo);
							color: var(--cinza);
						}
						#menu nav.desktop ul li.bt_borda a::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 100%;
							background-color: var(--amarelo);
							-webkit-transition: all 0.2s ease-in-out;
							-moz-transition: all 0.2s ease-in-out;
							-ms-transition: all 0.2s ease-in-out;
							-o-transition: all 0.2s ease-in-out;
							transition: all 0.2s ease-in-out;
							z-index: -1;
						  }
						#menu nav.desktop ul li.bt_borda a:hover::before {
							width: 100%;
						}

}



@media (min-width: 1024px) and (max-width: 1029px) {
	nav.desktop ul li {
		padding: 0 8px;
	}
		nav.desktop ul li a {
			font-size: 14px;			
		}
}

@media (min-width: 1700px) {
	section#servicos .bg_engenheiros {
		right: 10%;
    	width: 30%;
	}
	.eng_col {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
		.col_3 {
			flex: 1 0 25%;
			max-width: 25%;
			margin: 0px;
		}
}

@media (max-width:400px) {

	/* AJUSTES MOBILE */
	.fs_20 { font-size: 16px }
	.fs_25 { font-size: 20px }
	.fs_30 { font-size: 22px }
	.fs_35 { font-size: 25px }
	.fs_40, .fs_45 { font-size: 30px }
	.fs_60 { font-size: 35px }
	.fs_100 { font-size: 60px }

	.lh_10 { line-height: 10px }
	.lh_40, .lh_45 { line-height: 30px }
	.lh_60 { line-height: 35px }
	.lh_70 { line-height: 60px }

	.e_100 { height: 50px; }
}

.anima, .anima img {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}