body{ font-family: 'gothamlightregular', sans-serif; background-color: #f1f1f1;}
body form *{ font-family: 'gothamlightregular', sans-serif; }

.container{ margin: 0 auto; width: 1160px; position: relative; }
a{ outline:none; }

.title{ float: left; width: 100%; padding: 30px 0; }
.title h2{ width: 100%; color: #333; font-family: 'Gotham-Bold'; text-transform: uppercase; font-weight: bold; font-size: 26px; text-align: center; }
.title p{ text-align: center; margin-top: 10px; font-size: 20px;  width: 80%; padding-left: 10%; line-height: 26px;  }

header{ float: left; width: 100%; background-color: #fff; z-index: 11000; position: relative;}
header.fixed{ position: fixed; }
header .logo{ float: left; padding: 10px 0;}
header .mobile-menu{ display: none; }
header nav{ float: right;  padding: 30px 0;}
header nav ul{ float: left; }
header nav ul li{ float: left; }
header nav ul li a{font-weight: 700; text-transform: uppercase; color: #000; font-size: 14px; display: block; text-decoration: none; padding: 16px 20px 12px;}
header nav ul.social li{ margin-right: 0; }
header nav ul.social li a{ padding-right: 0; padding-top: 8px; }

#banner.needSpace{ margin-top: 100px; }

#banner{ float: left; width: 100%; min-height: 500px; padding: 60px 0 0; background: #fff url('../images/destaque-principal-baby-alt.jpg') no-repeat right; background-size: cover; }
#banner form{ background: rgba(0,0,0,0.5); float: right; width: 400px; padding: 15px; position: relative; margin-top: 50px;   }
#banner form .loading{ display: none; z-index: 550000; position: absolute; width: 100%; top: 0; left: 0; height: 100%; background: rgba(0,0,0,0.5) url('../images/load.gif') center center no-repeat; }
#banner form h2{ font-size: 17px; letter-spacing: -1px; font-family: 'gothamlightregular'; text-transform: uppercase; line-height: 32px; color: #fff; font-weight: 800; }
#banner form h2 strong{ font-size: 17px; letter-spacing: -1px; font-family: 'Gotham-Bold'; }
#banner form p{ text-transform: uppercase; color: #fff400; font-size: 24px; margin: 0 0 15px 0; font-family: 'Gotham-Bold'; }

#banner form.success h2 strong{ font-size: 40px; }
#banner form.success p{ line-height: 22px; font-size: 18px; }

#banner form .group{ float: left; width: 100%; }
#banner form .group .photo{ width: 30%; float: left; margin-bottom: 13px; }
#banner form .group .photo img{ float: left; width: 100%; }
#banner form .group .fields{ width: 70%; float: left; padding-left: 3%; box-sizing: border-box; }

#banner form .field_100{ float: left; width: 100%; margin-bottom: 10px; }
#banner form .field_50{ float: left; width: 49%; margin-bottom: 10px; margin-right: 2%; }
#banner form .field_50.last{margin-right: 0px;}
#banner form input,
#banner form select{ font-size: 16px; border-radius: 1px; float: left; width: 100%; border:0; box-sizing: border-box; padding: 10px 10px; }
#banner form input:focus,
#banner form select:focus{ background-color: #f3e062; outline: none; }
#banner form input#photo{display: none;}
#banner form input.error,
#banner form select.error{ border:2px solid #d92235;  }
#banner form label.error{display: none!important;}
#banner form button{border-radius: 2px; box-shadow: 1px 2px 5px rgba(0,0,0, 0.1); cursor: pointer; width: 100%; background-color: #fff400; border: 0px; color: #333; font-size: 18px; text-transform: uppercase;font-family: 'gothamblackregular'; padding: 15px 0;  }
#banner form .back{  float: left; border-radius: 2px; box-shadow: 1px 2px 5px rgba(0,0,0, 0.1); cursor: pointer; width: 100%; background-color: #fff400; border: 0px; color: #333; font-size: 18px; text-transform: uppercase;font-family: 'gothamblackregular'; padding: 15px 0; margin-top: 30px; text-decoration: none; text-align: center;  }

#about{ float: left; width: 100%; padding: 0; background-color: #f4f09e; }
#about .title h2{ color: #333; }
#about article{ float: left; width: 100%; }
#about article .left{ width: 35%;  float: left;}
#about article .left img{ float: left; width: 100%; }
#about article .right{ width: 60%; float: left; box-sizing: border-box; padding: 40px 5% 40px; } 
#about article .right p{ font-weight: 500;  font-size: 18px; float: left; line-height: 22px;  margin-bottom: 20px;}
#about article .right h2{ width: 100%; color: #333; font-family: 'Gotham-Bold'; text-transform: uppercase; font-weight: bold; font-size: 26px; text-align: left; margin-bottom: 30px; }

#jobs{ float: left; width: 100%; background-color: #666; padding: 20px 0; }
#jobs .title h2{ color: #fff; }
#jobs article{ float: left; width: 32%; margin-right: 2%;  box-sizing: border-box; margin-bottom: 20px; }
#jobs article.last{ margin-right: 0; }
#jobs article img{ float: left; width: 100%; }

#partners{ float: left; width: 100%;  background-color: #fff; padding-bottom: 20px;}
#partners ul{ float: left; width: 100%; }
#partners ul li{ width: 10%; height: 116px; list-style: none; float: left;  background-image: url('../images/logospb/logos.jpg'); }
#partners ul li.avenida{ background-position: 0 0; }
#partners ul li.bradesco{ background-position: -116px 0; }
#partners ul li.caedu{ background-position: -232px 0; }
#partners ul li.carrefour{ background-position: -348px 0; }
#partners ul li.cea{ background-position: -464px 0; }
#partners ul li.ciahering{ background-position: -580px 0; }
#partners ul li.claro{ background-position: -696px 0; }
#partners ul li.dudalina{ background-position: -812px 0; }
#partners ul li.editoramol{ background-position: -928px 0; }
#partners ul li.editoraglobo{ background-position: -1044px 0; }
#partners ul li.fitmoda{ background-position: 0 -116px; }
#partners ul li.grendene{ background-position: -116px -116px; }
#partners ul li.itau{ background-position: -232px -116px; }
#partners ul li.klassipe{ background-position: -348px -116px; }
#partners ul li.lupo{ background-position: -464px -116px; }
#partners ul li.malwee{ background-position: -580px -116px; }
#partners ul li.marisol{ background-position: -696px -116px; }
#partners ul li.nestle{ background-position: -812px -116px; }
#partners ul li.pampers{ background-position: -928px -116px; }
#partners ul li.pampili{ background-position: -1044px -116px; }
#partners ul li.parmalat{ background-position: 0 -232px; }
#partners ul li.pernambucanas{ background-position: -116px -232px; }
#partners ul li.puket{ background-position: -232px -232px; }
#partners ul li.restoque{ background-position: -348px -232px; }
#partners ul li.riachuelo{ background-position: -464px -232px; }
#partners ul li.rihappy{ background-position: -580px -232px; }
#partners ul li.santander{ background-position: -696px -232px; }
#partners ul li.tng{ background-position: -812px -232px; }
#partners ul li.torratorra{ background-position: -928px -232px;; }
#partners ul li.trifil{ background-position: -1044px -232px;; }

#location{ float: left; width: 100%; padding: 5px 0; }
#location article{ float: left; width: 50%; }
#location article h3{ font-family: 'Gotham-Bold'; font-size: 20px; text-transform: uppercase;  width: 100%; float: left; text-align: center; }
#location article p{ font-size: 16px; margin: 10px 0; text-align: center; width: 100%; float: left;}
#location article .map{ width: 100%; float: left; margin: 20px 0; box-sizing: border-box; }
#location article .map img{ float: left; width: 100%; }
#location article:first-child{ padding-right: 20px; box-sizing: border-box; }
#location article:last-child{ padding-left: 20px; box-sizing: border-box; }

footer{ float: left; width: 100%; padding: 30px 0;  background-color: #f4f09e;}
footer p{ color: #333; text-align: center; }
footer p strong{ font-weight: bold; }


@media screen and (max-width: 1428px) {
	
}

@media screen and (max-width: 1159px) {
	.container{ float: left; width: 100%; padding: 0 1%; box-sizing: border-box; }
	
}

@media screen and (max-width: 1024px) {
	header nav ul{ margin-right: 10px; }
	header nav ul li a{ padding: 18px 10px 12px; font-size: 12px; }

	#banner form{ width: 400px; }
	#banner form .group .photo{ width: 33.5%; }
	#banner form .group .fields{ width: 66.5%; }
	#partners ul li{ width: 12.5%; }
}

@media screen and (max-width: 860px) {

	header .logo{ width: 160px; padding: 15px 0 15px 10px; }
	header .logo img{ float: left; width: 100%; }
	header nav ul li a{ padding: 18px 10px 12px; font-size: 12px; }	
	#partners ul li{ width: 16.66%; }
}

@media screen and (max-width: 768px) {

	header .mobile-menu{ z-index: 5500; display: block; text-indent: -99999px; width: 24px; height: 24px; position: absolute; right: 20px; top:15px;  background: url('../images/menu-dark.png') no-repeat;  }
	header .cta{ position: absolute; z-index: 5000; right: 0px; margin-right:60px; } 
	header nav{display: block; margin-right: -70%; position: fixed; width: 70%; height: 100%; background-color:#fff; z-index: 500; right: 0; top: 0px;  }
	header nav ul{ width: 100%;  margin-top: 60px; }
	header nav ul li{ width: 100%; }
	header nav ul li a{ padding: 15px 20px; font-size: 16px; width: 100%; box-sizing: border-box; }	
	
	header .logo{ width: 90px; }

	#banner form{ width: 100%; background-color: rgba(0,0,0, 0.5); box-sizing: border-box; }
	#partners ul li{ width: 16.66%; }

	#about article .left{ width: 100%;  float: left;}
	#about article .right{ float: left; width: 100%; }
}

@media screen and (max-width: 580px) {
	#about article{ width: 100%; margin-right: 0; margin-bottom: 15px; }
	#jobs article{ width: 50%; margin-right: 0!important; }

	#location article{ width: 100%; padding: 0!important; }
	#partners ul li{ width: 20%; }
}

@media screen and (max-width: 480px) {
	#partners ul li{ width: 25%; }
	header .logo{ width: 130px; padding: 20px 0 15px 20px; }

}

.fileupload-area{
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #fff url('../images/camera.png') center center no-repeat;
    text-align: center;
    font-size: 16px!important;
    padding: 30px 0px;
    height: 134px;
    box-sizing: border-box;
}

.fileupload-area.error{
	border:2px solid #d92235;
}

.fileupload-area .puthere{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 200;
}

.fileupload-area .puthere .image{
	position: absolute;
	top: 0;
	left: 0;
}

.fileupload-area .puthere:hover .removeImage{
	display: block;
}

.fileupload-area .puthere .removeImage{
	position: absolute;
	top: 5px;
	right: 5px;
	background: url('../images/remove.png') center center;
	width: 16px;
	height: 16px;
	z-index: 160;
	display: none;
}

.fileupload-area input{
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
     filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    font-size: 500px;
}