/*
Theme Name: 	Boreal Solar
Theme URI: 		https://techd.com.br/projetos/boreal-solar/
Description: 	Site criado do zero, projetado para ser eficiente com um Layout limpo, agradavel e ao mesmo tempo Bonito
Version: 		1.0
Author: 		Techd
Author URI: 	https://techd.com.br/
*/
@import url('../fonts/techd-icons/style.css');
@import url('default.css');
@import url('grafico.css');


body {font-family: 'Hind', Arial; font-size: 17px; color: #777777; overflow-y: auto; overflow-x: hidden; }

.btn-info {background: #00B2B9;}

.page-header {
	padding: 100px 0 30px;
	background-size: cover;
	background-position: top center;
	margin-bottom: 0;
}

.btn-transparent-black {
	padding: 10px 50px;
	color: #333333;
	border-radius: 100px;
	border: 1px solid #333333;
	font-weight: 600;
	font-size: 20px;
}
/* Topo - top header
==============================================*/
.topbar {font-size: 12px; line-height: 15px; background: #777777; color: #fff;}
.topbar .number {font-size: 15px;}
.topbar .topbar-contact {padding: 2px;}
.topbar .topbar-contact .fa {float: left; font-size: 30px; margin-right: 5px; margin-top: 2px;}
.topbar .btn {padding: 10px 20px; background: #4C4C4C; color: #fff; border: none;}

.affix .topbar  {display: none;}

.top-header .navbar-nav li a {padding: 10px 8px;}
.top-header .navbar-nav li.active a,
.top-header .navbar-nav li a:hover { background: transparent; border-bottom: 4px solid #DD683F; margin-bottom: -4px;}
.top-header .navbar-nav .btn {background: #FFEB00; color: #444444; font-weight: 600; border: none; border-radius: 50px; padding: 12px 11px; margin-left: 5px;}
.top-header .navbar-nav .btn:hover {background: #E9AA17; border:0;}

@media (min-width: 768px) {
	.top-header .navbar-toggle {border: 0;}
	.top-header .navbar-nav {margin-top: 25px;}
	.top-header .navbar-nav li a {color: #2B3D52;}
	.top-header .navbar-nav li a {font-size: 14px; color: #858585; text-transform: uppercase; padding-bottom: 30px;}
}
.navbar-brand>img {
	height: 70px;
}

@media (max-width: 768px) {
	.top-header .navbar-brand {padding: 0;}
	.top-header .navbar-brand>img {
		height: 45px;
	}
}
.site-hgroup {
	margin-bottom: 50px;
	font-weight: 300;
}
.site-hgroup .title {
	font-weight: 300;
}
.site-hgroup .title strong {
	color: #666666;
}

.main-carousel .item {
    background-size: cover;
    background-position: center center;
    min-height: 620px;
}

/* Sobre - home
==============================================*/
#sobre .btn-td {border-radius: 50px;}

/* Sobre - Page
==============================================*/
.sobre-objetivos {color: #333333;}

@media (min-width: 768px) {
	.sobre-objetivos {background-image: url('../images/sobre-objetivos.jpg');}
}

/* Nossos clientes - Page
==============================================*/
.nossos-clientes .item .item-box {
	border: 1px solid #DDDDDD;
	margin-bottom: 30px;
}
.nossos-clientes .item .item-box:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}
.nossos-clientes .item .item-box:hover {
	background: #fff;
	/* Firefox v3.5+ */
	-moz-box-shadow:5px 5px 11px rgba(0,0,0,0.29);
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-box-shadow:5px 5px 11px rgba(0,0,0,0.29);
	/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
	box-shadow:5px 5px 11px rgba(0,0,0,0.29);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#4a000000,Positive=true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#4a000000,Positive=true);
}
.nossos-clientes .item .media-body {
	font-size: 14px;
	color: #444444;
}

/* Banner - Main carousel
==============================================*/
.main-carousel .item .banner-box .title {font-size: 55px;}
.main-carousel .item .banner-box .title strong {color: #FFEA00;}
.main-carousel .item .banner-box .btn {background: #EC6617; font-size: 16px; font-weight: 300; padding: 15px 20px; border: 0; border-radius: 60px;}
.main-carousel .item .banner-box .btn .icon {font-size: 18px; margin-left: 10px;}

.icon-group {overflow: hidden; margin-bottom: 20px; color: #444444;}
.icon-group strong {color: #444444;}
.icon-group .icon-box {float: left; border: 1px solid transparent; padding: 6.5px; width: 120px; height: 120px; margin-right: 20px;}
.icon-group:hover .icon-box {border-color: #333333;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.icon-group .icon-box .icon {
	background-color: #F7D016; color: #333333; font-size: 50px; width: 105px; height: 105px;
	text-align: center; line-height: 100px;
}

.icon-group .icon-box,
.icon-group .icon-box .icon {border-radius: 500px; display: block;}

@media (min-width: 768px) {
	.services-col-2 .icon-group .icon-box {float: right; margin-left: 20px;}
	.services-col-2 .icon-group .media-body {text-align: right;}
	.services-col-2 {float: right;}
}

/* Comparação de conta
==============================================*/
.sumario-comparacao .icon-group .media-body {
    padding-top: 35px;
}
.sumario-comparacao-tooltip {
    border: 1px solid #ACAC9D;
    padding: 15px 30px;
    border-radius: 10px;
    position: relative;
    background: #F5F5F5;
    display: block;
    padding: 40px 20px 20px;
}
.sumario-comparacao-tooltip:before {
    content: "";
    display: block;
    width: 50px;
    height: 45px;
    background: url('../images/tooltip-top.png') left no-repeat;
    margin-top: -40px;
    position: absolute;
    top: 0;
    left: 40%;
}
.sumario-comparacao .indice {padding: 40px 0;}
.sumario-comparacao .indice label {margin: 15px; font-weight: 300; color: #878787;}
.sumario-comparacao .indice label strong {color: #333333;}
.sumario-comparacao .indice .badge {height: 20px; background: #DDDDDD; width: 35px; border-radius: 5px; vertical-align: middle; color: #878787;}
.sumario-comparacao .indice .badge.badge-yellow {background-color: #F9D100;}


/* Sumario
==============================================*/
.sumario-processo {font-size: 13px; margin-bottom: 20px;}
.sumario-processo .title {color: #444444;}
.sumario-processo .badge {
	float: left; width: 65px; height: 65px; border-radius: 200px;
	background: #FBD200;
	display: block;
	margin-right: 20px;
	margin-top: 15px;
}
.sumario-processo .badge.badge-convercao {
	background: #CC5750;
}
.sumario-processo .badge.badge-ultilizacao {
	background: #5685C5;
}
.sumario-processo .badge.badge-remuneracao {
	background: #8FB202;
}

/* Sumario
==============================================*/
.vantagens-badge {
	padding: 20px; display: table;
	vertical-align: middle; background: #F7D016;
	text-align: center; position: relative;
	font-size: 20px;
	margin: auto;
	color: #444444;
	margin-bottom: 30px;
}
.vantagens-badge span {display: table-cell; vertical-align: middle;}
.vantagens-badge:after {
	content: ""; display: block;
	border: 1px solid #444444;
	position: absolute; left: -2.5%; top:-2.5%;
	width: 105%;
    height: 105%;
}
@media (min-width: 768px) {
	.vantagens-badge {
		height: 250px; width: 250px;
		font-size: 30px;
		border-radius: 50%;
	}
	.vantagens-badge:after {border-radius: 50%;}
}

.grafico-vantagens {
	border: 1px solid #ACAC9D; padding: 15px 30px; border-radius: 10px; position: relative;
	background: #F5F5F5;
}
@media (min-width: 768px) {
	.grafico-vantagens:before {
		content: ""; display: block;
		width: 45px; height: 50px;
		background: url('../images/tooltip-vantagens.png') left;
		margin-left: -40px;
		position: absolute;
		top: 50%;
		left: 0;
	}
}

.grafico-horizontal .linha {padding-left: 100px; margin-bottom: 30px;}
.grafico-horizontal .linha .icon {width: 90px; line-height: 90px; color: #80A543; margin-left: -100px; font-size: 60px; text-align: center;}
.grafico-horizontal .coluna .number {color: #fff;}


/* Orçamento
==============================================*/
.form-orcamento .form-control {
	box-shadow: none;
	border-radius: 1px;
	background: #F8F7F3;
	resize: none;
	border: 0;
	height: 60px;
	border: 1px solid #CDCDCD;
}
.form-orcamento .btn {border-radius: 1px;}
.form-orcamento .btn.btn-warning {background-color: #EF6500;}

/* Saiba como gerar sua própria energia
==============================================*/
.step-boreal .icon-group .media-body {padding-top: 35px;}
.step-boreal .icon-group .icon-box .icon {position: relative;}
.step-boreal .icon-group .icon-box .icon:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 95%;
	margin-top: -20px;
	width: 0; height: 0;
	border-left: 20px solid #F5CF30;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
@media (min-width: 768px) {
	.step-boreal .icon-group .icon-box {
		width: 160px;
	    height: 160px;
	}
	.step-boreal .icon-group .icon-box .icon {
		width: 145px;
		height: 145px;
		line-height: 140px;
		font-size: 70px;
	}
}

/*
.btn.btn-energy {
	margin-top: 30px; 
	border-radius: 10px; 
	color: #7FA927; 
	border-color: #7FA927;
}*/


.btn.btn-energy {
	margin-top: 30px; 
	border-radius: 60px; 
	color: #ffffff; 
	border-color: #ffffff;
	background-color: #f05927;
	display: inline-block;
	border: 2px solid #ffffff;
	font-size: 16px;
	text-transform: uppercase;
	padding: 0.85714285714286em 2.5em;
	font-weight: bold;
	-webkit-transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
	-o-transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
	transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
	-webkit-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	position: relative;
	overflow: hidden;
}


.btn-energy .icon {
	font-size: 60px;
	vertical-align: middle;
	display: inline-block;
	margin-right: 30px;
}
.btn-energy span {display: inline-block; vertical-align: middle; text-align: left;}

@media (min-width: 768px) {
	#orcamento .btn {height: 70px;}
}


#gerar-energia .btn {max-width: 100%; white-space: initial; cursor: initial; }
#gerar-energia .btn:hover {
	margin-top: 30px;
    border-radius: 10px;
    color: #7FA927;
    border-color: #7FA927;
    background: transparent;
}
@media (max-width: 768px) {
	.btn-energy .icon {margin: 0 auto 15px;}
}
/* Rodape - Footer
==============================================*/

.footer label {color: #F26400; font-size: 14px; font-weight: 300; display: block;}

.footer .nav-footer {padding: 0;}
.footer .nav-footer li a {font-size: 14px; padding: 2px; color: #575859;}

.footer .social-links {list-style: none; padding: 0;}
.footer .social-links li {display: inline-block;}

.footer .social-circle li a {
	width: 50px; height: 50px;
	line-height:55px;
	font-size: 25px;
	background: #AAAAAA;
	color: #fff;
}
.footer .social-circle li a i {	color: #fff;}
.footer .footer-contact .title {color: #999999;}
.footer .footer-contact .subtitle {color: #ED6500;font-weight: 700;}