/*
Theme Name: Friends & Customers
Theme URI: http://www.friendscustomers.com
Version: nov/2017
Author: Bravo Interativa
Author URI: http://www.bravo.st
*/

/*------------------------*/

body {background:#fdb813; font-family:'Oswald', sans-serif; font-size:16px; color:#000;}
a {text-decoration:none; color:#000;}
strong {font-weight:bold;}
em {font-style:italic;}
p {line-height:25px; margin-bottom:20px; font-weight:500; color:#fff; letter-spacing:1px; font-size:18px;}
h2 {font-size:65px; color:#fff; text-transform:uppercase; font-weight:700; display:block; position:relative; margin-bottom:30px; position:relative;}
h2:before {content:''; display:block; position:absolute; height:4px; width:100%; top:-50px; left:0; background:#6a4d08;}

::-webkit-input-placeholder {color:#000;}
:-moz-placeholder {color:#000;}
::-moz-placeholder {color:#000;}
:-ms-input-placeholder {color:#000;}


/*------------------------*/

/* DESKTOP */
@media screen and (min-width:1366px) {

	header {position:fixed; left:0; top:50%; margin-top:-140px; z-index:1000;}
	header .logo {display:block;}
	header .logo-m {display:none;}
	header .logo a {display:block; width:86px; height:78px; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url(images/logo-stick.png); text-indent:-9999px; top:50%; position:absolute; margin-top:-40px; left:0;}
	header nav .toggle-menu {display:none;}
	header nav  {}
	header nav ul {margin-left:120px;}
	header nav ul li {display:block;}
	header nav ul li a {color:#fff; padding:6px 20px 6px 0; font-size:28px; font-weight:600; text-transform:uppercase; letter-spacing:2px; display:block; transition:0.4s; text-shadow:1px 1px 3px #000;}
	header nav ul li a:hover {color:#b88a2b;}
	header nav ul li a.active {color:#b88a2b;}
}


/* MOBILE */
@media screen and (max-width:1365px) {

	header {display:block; position:relative;}
	header .logo {display:none;}
	header .logo-m {background:url(images/logo-m.png); width:200px; height:90px; background-position:center; background-size:contain; position:absolute; top:30px; left:0; right:0; margin:0 auto; background-repeat:no-repeat;}

	header nav .toggle-menu {background:#b88a2b; display:block; cursor:pointer; left:0; top:50%; position:fixed; width:70px; height:70px; z-index:1000; margin-top:-35px; transition:0.4s; padding:20px;}
	header nav.active .toggle-menu {left:300px;}

	header nav .toggle-menu span {width:100%; height:3px; background:#6a4d08; display:block; margin-bottom:5px; margin-top:5px; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -ms-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;}
	header nav.active .toggle-menu span.tm1 {margin-top:14px; margin-bottom:0; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
	header nav.active .toggle-menu span.tm2 {margin-top:-3px; margin-bottom:0; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
	header nav.active .toggle-menu span.tm3 {display:none;}
	
	header nav ul {margin-left:0!important; background-color:rgba(106,77,8,0.95); position:fixed; width:300px; left:-300px; top:0; bottom:0; padding:0; z-index:999; transition:0.4s; display:flex; flex-direction:column; justify-content:center; border-right:5px solid #b88a2b;}
	header nav ul li {width:100%; display:block; float:none;}
	header nav ul li a {padding:5px 20px!important; font-size:23px!important; color:#fff; display:block; width:100%; text-align:right; position:relative;}

	header nav.active ul {opacity:1; left:0;}
}

/*------------------------*/

#home {}
	#home.banner {height:100vh; background-size:cover; background-position:center; background-repeat:no-repeat;}
	#home .barra {background:rgba(253,184,19,0.6); height:130px; position:absolute; bottom:0; left:0; right:0;}
	#home .barra .logotipo {background:url(images/logo.png)center no-repeat; background-size:contain; width:600px; height:130px; margin:-20px auto 0 auto;}
	#home .barra .logotipo.espanhol {background:url(images/logo-es.png)center no-repeat; background-size:contain; width:600px; height:130px; margin:-20px auto 0 auto;}
	#home .barra .logotipo.ingles {background:url(images/logo-en.png)center no-repeat; background-size:contain; width:600px; height:130px; margin:-20px auto 0 auto;}

	#home .linguagem {color:#fff; font-size:13px; font-weight:300; text-transform:uppercase; letter-spacing:1px; position:absolute; top:15px; right:15px;}
	#home .linguagem span {display:inline-block;}
	#home .linguagem a {display:inline-block; color:#fff; padding:5px;}
	#home .linguagem a.active {border:1px solid #fff;}

/*------------------------*/

	.conteudo {padding-right:90px;}

/*------------------------*/
	
#posicionamento {background:url(images/img-posicionamento.png)bottom left no-repeat,url(images/bg-page.png); padding:150px 0;}

/*------------------------*/

#consultoria {padding:150px 0;}
	#consultoria h3 {font-size:27px; font-weight:700; color:#6a4d08; margin-bottom:25px;}
	#consultoria .item {}
	#consultoria .item h3 {font-size:19px; font-weight:500; line-height:22px; min-height:50px; padding-top:30px; /*border-top:3px solid #e0a312;*/}
	#consultoria .item p {font-weight:400; letter-spacing:0;}
	#consultoria .item .icone {width:50px; height:50px; margin-right:5px;}
	#consultoria .item .etapas {margin-bottom:20px;}

	#consultoria .item span.ico {width:50px; height:50px; display:block; float:left; margin-right:10px; background-size:contain; background-repeat:no-repeat; background-position:center;}
	#consultoria .item span.ico.ico-1 {background-image:url(images/ico-1.png);}
	#consultoria .item span.ico.ico-2 {background-image:url(images/ico-2.png);}
	#consultoria .item span.ico.ico-3 {background-image:url(images/ico-3.png);}
	#consultoria .item span.ico.ico-4 {background-image:url(images/ico-4.png);}
	#consultoria .item span.ico.ico-5 {background-image:url(images/ico-5.png);}
	#consultoria .item span.ico.ico-6 {background-image:url(images/ico-6.png);}
	#consultoria .item span.ico.ico-7 {background-image:url(images/ico-7.png);}
	#consultoria .item span.ico.ico-8 {background-image:url(images/ico-8.png);}
	#consultoria .item span.ico.ico-9 {background-image:url(images/ico-9.png);}
	#consultoria .item span.ico.ico-10 {background-image:url(images/ico-10.png);}
	#consultoria .item span.ico.ico-11 {background-image:url(images/ico-11.png);}
	#consultoria .item span.ico.ico-12 {background-image:url(images/ico-12.png);}
	#consultoria .item span.ico.ico-13 {background-image:url(images/ico-13.png);}
	#consultoria .item span.ico.ico-14 {background-image:url(images/ico-14.png);}
	#consultoria .item span.ico.ico-15 {background-image:url(images/ico-15.png);}
	
	#consultoria .consul {text-align:right;}

/*------------------------*/

#palestras {padding:150px 0; background:url(images/bg-page.png),#6a4d08;}
	#palestras h2:before {background:#fdb813;}
	#palestras h3 {font-size:27px; font-weight:700; color:#fff; margin-bottom:15px; text-transform:uppercase;}
	#palestras li {color:#fff; line-height:26px; font-size:18px; font-weight:300; letter-spacing:1px; margin-bottom:10px;}

/*------------------------*/

#clientes {padding:150px 0;}
	#clientes h2 {text-align:right;}
	#clientes a {width:100%; display:block; background-size:contain; background-repeat:no-repeat; background-position:center; padding:20px; background-origin:content-box; height:145px; background-color:#f7b414; border-left:2px solid #fdb813; margin-bottom:2px; transition:0.4s;}
	#clientes a:hover {background-color:#efae13;}

/*------------------------*/

.etapas {margin-bottom:80px;}
	.etapas .icone {width:100px; height:100px; background-size:contain; background-repeat:no-repeat; background-position:center; display:inline-block; margin-right:10px; position:relative;}
	.etapas .icone.pros {background-image:url(images/ico-pros.png);}
	.etapas .icone.ativ {background-image:url(images/ico-ativ.png);}
	.etapas .icone.manu {background-image:url(images/ico-manu.png);}
	.etapas .icone.rete {background-image:url(images/ico-rete.png);}
	.etapas .icone span {position:absolute; display:block; bottom:-30px; left:0; right:0; text-align:center; font-weight:500; text-transform:uppercase; color:#fff; font-size:18px;}

/*------------------------*/

#contato {padding:150px 0; background:#6a4d08; text-align:right;}
	#contato h2:before {background:#fdb813;}
	#contato h3 {font-size:27px; font-weight:700; color:#fff; margin-bottom:25px; line-height:35px; letter-spacing:1px;}
	#contato a {display:block; font-size:23px; font-weight:500; color:#fff; line-height:28px; letter-spacing:1px;}
	#contato address {font-size:23px; font-weight:500; color:#fff; line-height:28px; letter-spacing:1px; margin-top:25px;}
	
	#contato .social {float:right; margin-top:25px;}
	#contato .social a {display:inline-block; width:40px; height:40px; background-size:40px; background-position:center; background-repeat:no-repeat; transition:0.4s;}
	#contato .social a:hover {opacity:0.7;}
	#contato .social a.face {background-image:url(images/facebook.png);}
	#contato .social a.linkedin {background-image:url(images/linkedin.png);}

/*------------------------*/

#trabalhe-conosco {padding:150px 0; background:url(images/bg-page.png);}
	#trabalhe-conosco h2 {text-align:right; margin-bottom:80px;}

/*------------------------*/

footer {position:relative;}
	footer #bravo {position:absolute; bottom:20px; right:20px; font-size:8px; text-transform:uppercase; color:#555; font-family:tahoma, arial, sans-serif;}
	footer #bravo a {color:#555;} #bravo a:hover {color:#000;}

/*------------------------*/

.form {}
.form .form-group {margin:0 0 20px 0;}
.form label {font-weight:bold; display:block; text-align:right; padding:0 15px 0 0; color:#6a4d08; text-transform:uppercase;}
.form input, .form select, .form textarea {width:100%; background:rgba(255,255,255,0.5); padding:12px; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0;}
.form select {font-size:initial; font-family:inherit; background:url(images/seta.png)center right no-repeat, rgba(255,255,255,0.5); border:none; background-origin:content-box;}
.form option {background:#dda110; color:#fff;}
.form textarea {height:140px; resize:none;}
.form button {background:#6a4d08; color:#fff; border:0; padding:9px; cursor:pointer; font-family:'Oswald', sans-serif; width:100%; text-transform:uppercase; font-size:20px;}
.form .alert-success {display:none; margin-top:20px; clear:both; padding:20px; background-color:#9C9; text-align:center; margin-bottom:20px; color:#333;}
.form .alert-fail {display:none; margin-top:20px; clear:both; padding:20px; background-color:#c44; text-align:center; margin-bottom:20px; color:#fff;}

/*------------------------*/

.swiper-home {height:400px;}

	.banners .buttons {cursor:pointer; width:40px; height:40px; position:absolute; top:50%; margin-top:-15px; z-index:10; text-indent:-9999px; background:#333;} 
	.banners .buttons:active {margin-top:-14px;} 

.swiper-button-next, .swiper-button-prev {position:absolute; top:50%; width:40px; height:40px; margin-top:-15px; z-index:10; cursor:pointer; background-image:none; background-color:#ccc; background-position:center; background-repeat:no-repeat;}
.swiper-button-next {right:20px; left:auto; }
.swiper-button-next:active {right:19px; left:auto; }
.swiper-button-prev {left:20px; right:auto;}
.swiper-button-prev:active {left:21px; right:auto;}
	
.swiper-pagination-bullet {display:inline-block; cursor:pointer; width:10px; height:10px; margin:0; text-indent:-9999px; margin:4px; border-radius:0;}
.swiper-pagination-bullet-active {background-color:#be3941;}