header#header-site .logo img#logo_topo {
	max-height: 100px;
	width: 95px;
}

header#header-site.bg-menu,
body.sem_capa header#header-site {
	background-color: #3e3e3d;
}

img.logo {
	width: 190px;
	margin-left: 50px;
}

#section-servicos .card.card-servicos .card-body:before {
	background: linear-gradient(0deg, #3e3e3d, #3e3e3d, transparent);
}

body#page_home .card-body h5 {
	color: #fff !important;
}

/* Modulo Áreas Atuante */

.area-atuante {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.modulos {
	text-align: center;
	margin: 70px 0 0 0;
}

.modulos h3 {
	margin-top: 55px;
}

.modulos .img-fluid {
	width: 150px;
}

.borda {
	border: 3px solid #f89530;
	transform: rotate(45deg);
	border-radius: 10px;
	width: 140px;
	margin: auto;
}

.modulos .img-fluid {
	width: 150px;
	transform: rotate(-45deg);
	padding: 10px;
}

.back {
	background: #0303030a;
	margin: 30px;
	padding: 20px;
	border-radius: 10px;
	transition: 0.3s ease-in-out;
	border: 2px solid #f89530;
	width: calc(33.33% - 60px);
}

.back:hover {
	background: #f89530;
}

.botao a {
	background: #f89530;
	padding: 20px 60px 20px 60px;
	font-size: 30px;
	font-weight: 600;
	border-radius: 10px;
	transition: 0.3s ease-in-out;
	text-decoration: none;
}

.botao a:hover {
	background: #3e3e3d;
	color: #fff !important;
}

.chamada {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

#section-html-modulo_3 {
	background: url(/arquivos/electrician-changes-the-light-bulb-handyman-e1624859912632_1.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 1px;
}

.chamada h3 {
	color: #fff;
}

.section-capa h1 {
	color: #fff;
}

#footer {
	background-position: center;
}

a.btn.btn-slide.rounded-5.px-5.py-2 {
	background: #0fad39 !important;
}

.area-atuante a {
	background: #f89530;
	padding: 15px 60px 15px 60px;
	font-weight: 700;
	font-size: 23px;
	text-transform: uppercase;
	border-radius: 4px;
	transition: 0.3s ease-in-out;
	color: #fff !important;
	text-decoration: none;
}

.area-atuante a:hover {
	background: #3e3e3d;
}
header ul.navbar-nav .dropdown-item {
	white-space: normal;
}

header ul.navbar-nav .dropdown-menu li {
	border-bottom: 1px dashed #3333;
}

.botao {
	margin-top: 20px;
}

@media (max-width: 720px) {
	.back {
		padding: 20px;
		margin: 30px;
		width: 100%;
	}

	.borda {
		width: 100px;
	}
	img.logo {
		margin-left: unset;
	}
	.chamada {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.botao a {
		background: #f89530;
		padding: 10px 30px 10px 30px;
		font-size: 20px;
		font-weight: 600;
		border-radius: 10px;
		transition: 0.3s ease-in-out;
		text-decoration: none;
	}
}

#footer {
    background-size: cover;
}

#section-servicos .card.card-servicos .card-body:before {
	display: none;
}

#section-servicos h5 {
	color: #fff !important;
	visibility: visible !important;
	background: rgb(0 0 0 / 40%);
	margin: 0;
	padding: 20px 20px !important;
	text-align: center;
}

ul.social-icons.social-icons-medium {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 2rem;
	display: flex;
}

ul.social-icons.social-icons-medium a {
	color: var(--footer_color);
	transition: 0.2s ease-in-out;
}

ul.social-icons.social-icons-medium a:hover {
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

ul.social-icons.social-icons-medium .social-icons-instagram a:hover {
	background: linear-gradient(
		45deg,
		#f09433 0%,
		#e6683c 25%,
		#dc2743 50%,
		#cc2366 75%,
		#bc1888 100%
	);
}

ul.social-icons.social-icons-medium .social-icons-facebook a:hover {
	background: -webkit-linear-gradient(top, #3b5998, #2b4170);
}

ul.social-icons.social-icons-medium .social-icons-skype a:hover {
	background: #00aff0;
}

ul.social-icons.social-icons-medium .social-icons-twitter a:hover {
	background: #1d9bf0;
}

ul.social-icons.social-icons-medium .social-icons-youtube a:hover {
	background: #ff0000;
}

.back h3 {
    transition: .3s ease-in-out;
}


.back:hover h3 {
    color: #fff;
}

.back p {
    transition: .3s ease-in-out;
}

.back:hover p {
    color: #fff;
}


.modulos img.img-fluid-branco {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-45deg);
    padding: 10px;
    opacity: 0;
    transition: .3s ease-in-out;
}

.back:hover .modulos img.img-fluid-branco {
    opacity: 1;
    transition: .3s ease-in-out;
}

.back:hover .modulos img.img-fluid {
    opacity: 0;
}