@import url("reset.css");
@import url("fonts.css");

/**
	Projeto - Projeto (CLIENTE) v: 0.1
	Developer(s):
		+ Fernando Basilio (fernando.basilio@rede106.com)
*/

/* ELEMENTOS ------------------------------------------------------------------------------ */
*{
	font-family: "Trebuchet MS";
}
html, body {
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS";
	font-size: 12px;
	background: #3b3533;
/*	overflow: hidden;*/
}

h1, h2, h3, h4, h5 { font-size: 12px; font-weight: normal; font-family: "Trebuchet MS" }

a{
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}

a:hover{
	color: #e81332;
}

li { list-style: none; }

input, textarea, select{
	font-family: Helvetica, Arial;
	font-size: 9px;
	padding: 2px;
	border: none;
}

textarea{
	overflow: auto;	
}

button{
	border: 0;
	font-size: 11px;
	cursor: pointer;
}

p{
	float: left;
	width: 100%;
	padding: 0;
	margin: 0px 0 10px 0;
	line-height: 18px;
}

/* ESTRUTURA ------------------------------------------------------------------------------ */
header{
	width: 100%;
	min-width: 1000px;
	height: 26px;
	background: url(../img/bg_nav.png);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	/*display: none;*/
}

header .content_header{
	margin: 0 auto;
	width: 1000px;
	height: 26px;
}

header h1,
header h1 a{
	float: left;
	width: 99px;
	height: 26px;
	background: url(../img/img_logo.png) no-repeat center;
	text-indent: -9999px;
}

header h1{ margin-left: 10px; }

header h3{
	float: left;
	color: lime;
	margin: 7px 0 0 40px;
	display: none;
}

header nav{
	float: right;
	margin: 8px 10px 0 0;
	font-size: 10px;
}

header nav ul{
	float: left;
}

header nav ul li{
	float: left;
	display: inline;
	margin: 0 10px;
	background-attachment: fixed;
	font-family: 'GothamBook';
	font-size: 11px;
}

header nav ul li a.selected{
	color: #e81332;
	border-bottom: 2px solid #e81332;	
}

#container{
	width: 100%;
	min-width: 1000px;
	height: 100%;
	min-height: 625px;
	margin: 0 auto;
/*	border: 1px inset red;*/
/*	text-indent: -9999px;*/
}

#container section{
	float: left;
	width: 100%;
	min-width: 1000px;
	min-height: 585px;
	height: 100%;
}

#container section article{
	width: 1000px;
	height: 100%;
	min-height: 625px;
	margin: 0 auto;
	display: table;
	/*	position: fixed;
	top: 50px;
	left: 0;*/
}


/* home ------------------------------------------------------------------------------ */
#container section#home{
	/*background: #f9f9f9 url(../img/vira-lata.jpg) no-repeat center;*/
	background: #e81332;
}

#container section#home article{ position: relative; }

#container section#home h2{
	float: right;
	width: 240px;
	height: 310px;
	background: url(../img/slogan1.png) no-repeat;
	text-indent: -9999px;
/*	margin: 255px 20px 0 0;*/
	position: absolute;
	bottom: 100px;
	right: 20px;

}

#container section#home h2.slogan1{ background: url(../img/slogan1.png) no-repeat; }
#container section#home h2.slogan2{ background: url(../img/slogan2.png) no-repeat; }
#container section#home h2.slogan3{ background: url(../img/slogan3.png) no-repeat; }
#container section#home h2.slogan4{ background: url(../img/slogan4.png) no-repeat; }
#container section#home h2.slogan5{ background: url(../img/slogan5.png) no-repeat; }


/* agencia ------------------------------------------------------------------------------ */
#container section#agencia{
	/*background: url(../img/img2.jpg) no-repeat center;
	background-attachment: fixed;*/
	background: #fff;
}

#container section#agencia .text{
	float: left;
	width: 1000px;
	height: 550px;
	padding-left: 10px;
	font-size: 12px;
	color: #039ad1;
	font-family: 'GothamBook';
	position: relative;
}

#container section#agencia h2,
#container section#agencia h3{
	float: left;
	width: 490px;
	font-family: 'GothamExtraLight';
	font-size: 24px;
	color: #039ad1;
	margin: 20px 0 25px 0;
}

#container section#agencia h2{ font-family: 'GothamExtraLight'; text-transform: uppercase; width: 100%; }
#container section#agencia h3{ font-family: 'GothamBold'; }

#container section#agencia .text .desc_underdog{
	float: left;
	width: 450px;
	height: 500px;
	background: #fff;
	position: absolute;
	top: 69px;
	left: 10px;
	display: none;
}

#container section#agencia .text h4,
#container section#agencia .text .desc_underdog .btn_fechar{
	font-family: 'GothamBook';
	font-size: 16px;
	color: #039ad1;
	text-transform: uppercase;
}

#container section#agencia .text h4{
	float: left;
	width: 450px;
	margin: 0 0 25px 0;
	text-align:center;
}


#container section#agencia .text .desc_underdog .btn_fechar{
	width: 20px;
	height: 20px;
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
}

#container section#agencia .dogs{
	float: left;
	width: 475px;
	height: 540px;
	background: url(../img/bg_underdogs2.jpg) no-repeat 0 bottom; 
	text-indent:-9999px;
}

#container section#agencia .content_text{
	float:left;
	width:475px;
	margin-top:30px;
}

#container section#agencia .content_text p{
	line-height:24px;	
	text-align:justify;
}

#container section#agencia .content_text .img_assinatura{
	float:right;
	margin:10px 0 0 0;
}

#container section#agencia ul{
	float: left;
	width: 490px;
}

#container section#agencia ul li,
#container section#agencia ul li a{
	float: left;
	width: 100px;
	height: 115px;
	display: inline;
	text-indent: -9999px;
	cursor: default;
}

#container section#agencia ul li{ margin-right: 23px; }
#container section#agencia ul li.last{ margin-right: 0; }

#container section#agencia ul li a.thumb_carolina_gimenes{ background: url(../img/thumb_carolina_gimenes.jpg) no-repeat; }
#container section#agencia ul li a.thumb_fernanda_flandoli{ background: url(../img/thumb_fernanda_flandoli.jpg) no-repeat; }
#container section#agencia ul li a.thumb_ricardo_makul{ background: url(../img/thumb_ricardo_makul.jpg) no-repeat; }
#container section#agencia ul li a.thumb_sergio_magalhaes{ background: url(../img/thumb_sergio_magalhaes.jpg) no-repeat; }

#container section#agencia ul li a.on{ background-position: 0 -115px; }



/* underdogs ------------------------------------------------------------------------------ */
#container section#underdogs{
	/*background: url(../img/img2.jpg) no-repeat center;
	background-attachment: fixed;*/
	background: #fff;
}

#container section#underdogs .text{
	float: left;
	width: 450px;
	/*height: 550px;*/
	padding-left: 10px;
	font-size: 12px;
	color: #3b3533;
	font-family: 'GothamBook';
	position: relative;
}

#container section#underdogs h2,
#container section#underdogs h3{
	float: left;
	width: 490px;
	font-family: 'GothamExtraLight';
	font-size: 24px;
	color: #e81332;
	margin: 20px 0 25px 0;
}

#container section#underdogs h2{ font-family: 'GothamExtraLight'; text-transform: uppercase; width: 310px; }
#container section#underdogs h3{ font-family: 'GothamBold'; }

#container section#underdogs .text .desc_underdog{
	float: left;
	width: 450px;
	height: 500px;
	background: #fff;
	position: absolute;
	top: 69px;
	left: 10px;
	display: none;
}

#container section#underdogs .text h4,
#container section#underdogs .text .desc_underdog .btn_fechar{
	font-family: 'GothamBook';
	font-size: 16px;
	color: #e81332;
	text-transform: uppercase;
}

#container section#underdogs .text h4{
	float: left;
	width: 450px;
	margin: 0 0 25px 0;
}


#container section#underdogs .text .desc_underdog .btn_fechar{
	width: 20px;
	height: 20px;
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
}

#container section#underdogs nav{
	float: right;
	width: 490px;
	height: 446px;
	background: url(../img/bg_underdogs.png) no-repeat 0 bottom; 
	margin: 20px 200px 0 0;
}

#container section#underdogs ul{
	float: left;
	width: 490px;
}

#container section#underdogs ul li,
#container section#underdogs ul li a{
	float: left;
	width: 100px;
	height: 115px;
	display: inline;
	text-indent: -9999px;
	cursor: default;
}

#container section#underdogs ul li{ margin-right: 23px; }
#container section#underdogs ul li.last{ margin-right: 0; }

#container section#underdogs ul li a.thumb_carolina_gimenes{ background: url(../img/thumb_carolina_gimenes.jpg) no-repeat; }
#container section#underdogs ul li a.thumb_fernanda_flandoli{ background: url(../img/thumb_fernanda_flandoli.jpg) no-repeat; }
#container section#underdogs ul li a.thumb_ricardo_makul{ background: url(../img/thumb_ricardo_makul.jpg) no-repeat; }
#container section#underdogs ul li a.thumb_sergio_magalhaes{ background: url(../img/thumb_sergio_magalhaes.jpg) no-repeat; }

#container section#underdogs ul li a.on{ background-position: 0 -115px; }




/* clientes ------------------------------------------------------------------------------ */
#container section#clientes{
	background: #fff;
}

#container section#clientes ul{
	width: 1000px;
	margin: 0px auto;
}

#container section#clientes ul li{
	float: left;
	display: inline;
	width: 200px;
	height: 120px;
	margin: 0; 
	text-indent: -99999px;
}

#container section#clientes h2{
	float: left;
	width: 980px;
	font-family: 'GothamExtraLight';
	font-size: 24px;
	text-transform: uppercase;
	color: #e81332;
	margin: 20px 0 0 10px;
}

#container section#clientes ul li.logo_afro_reggae{ background: #fff url(../img/logo_afro_reggae.png) no-repeat center; }
#container section#clientes ul li.logo_audi{ background: #fff url(../img/logo_audi.png) no-repeat center; }
#container section#clientes ul li.logo_blackberry{ background: #fff url(../img/logo_blackberry.png) no-repeat center; }
#container section#clientes ul li.logo_btg_pactual{ background: #fff url(../img/logo_btg_pactual.png) no-repeat center; }
#container section#clientes ul li.logo_cacau_show{ background: #fff url(../img/logo_cacau_show.png) no-repeat center; }
#container section#clientes ul li.logo_cidade_jardim{ background: #fff url(../img/logo_cidade_jardim.png) no-repeat center; }
#container section#clientes ul li.logo_fifa{ background: #fff url(../img/logo_fifa.png) no-repeat center; }
#container section#clientes ul li.logo_google{ background: #fff url(../img/logo_google.png) no-repeat center; }
#container section#clientes ul li.logo_ipanema{ background: #fff url(../img/logo_ipanema.png) no-repeat center; }
#container section#clientes ul li.logo_JHSF{ background: #fff url(../img/logo_JHSF.png) no-repeat center; }
#container section#clientes ul li.logo_meia_hora{ background: #fff url(../img/logo_meia_hora.png) no-repeat center; }
#container section#clientes ul li.logo_natura{ background: #fff url(../img/logo_natura.png) no-repeat center; }
#container section#clientes ul li.logo_o_dia{ background: #fff url(../img/logo_o_dia.png) no-repeat center; }
#container section#clientes ul li.logo_orkut{ background: #fff url(../img/logo_orkut.png) no-repeat center; }
#container section#clientes ul li.logo_PDG{ background: #fff url(../img/logo_PDG.png) no-repeat center; }
#container section#clientes ul li.logo_pepsico{ background: #fff url(../img/logo_pepsico.png) no-repeat center; }
#container section#clientes ul li.logo_pinheiro_neto{ background: #fff url(../img/logo_pinheiro_neto.png) no-repeat center; }
#container section#clientes ul li.logo_redbull{ background: #fff url(../img/logo_redbull.png) no-repeat center; }
#container section#clientes ul li.logo_reebok{ background: #fff url(../img/logo_reebok.png) no-repeat center; }
#container section#clientes ul li.logo_tam_viagens{ background: #fff url(../img/logo_tam_viagens.png) no-repeat center; }
#container section#clientes ul li.logo_valisere{ background: #fff url(../img/logo_valisere.png) no-repeat center; }
#container section#clientes ul li.logo_youtube{ background: #fff url(../img/logo_youtube.png) no-repeat center; }



/* contato ------------------------------------------------------------------------------ */
#container section#contato{
	background: #e81332;
}

#container section#contato h2{
	float: left;
	width: 980px;
	font-family: 'GothamExtraLight';
	font-size: 24px;
	text-transform: uppercase;
	color: #fff;
	margin: 20px 0 35px 10px;
}

#container section#contato h2 a{
	color: #fff;
	font-family: 'GothamBold';
	text-transform: lowercase;
}

#container section#contato h2 a:hover{
	color: #fff;
	text-decoration: underline;
}

#container section#contato .content_contato{
	width: 1000px;
	margin: 0 auto;
}

#container section#contato .content_contato article{
	float: left;
	width: 490px;
	margin: 0 0 0	 10px;
}

#container section#contato .content_contato article h3{
	font-family: 'GothamBook';
	font-size: 14px;
	line-height: 16px;
	color: #fff;
}

#container section#contato .content_contato article h3 strong{ font-family: 'GothamBold'; }

#container section#contato .content_contato .mapa{
	float: left;
	border: 1px solid #fff;
	width: 390px;
	height: 300px;
	margin: 15px 0 0 0;
}

/* portfolio ------------------------------------------------------------------------------ */
#container section#portfolio{
	background: #3b3533;
/*	background: url(../img/img2.jpg) no-repeat;
	background-attachment: fixed;*/
}

#container section#portfolio h2{
	float: left;
	width: 780px;
	font-family: 'GothamExtraLight';
	text-transform: uppercase;
	font-size: 24px;
	color: #fff;
	margin: 20px 0 35px 10px;
}

#container section#portfolio h2 span{
	color: #fff;
	font-family: 'GothamBold';
	text-transform: capitalize;
}

#container section#portfolio .content_portfolio{
	width: 1000px;
	margin: 0 auto;
}

#container section#portfolio{
	float: left;
	position: relative;
	display: table;
}

#container section#portfolio article{
	float: left;
	width: 780px;
	/*background: red;*/
}

#container section#portfolio article p{
	margin: 0;
	font-family: 'GothamBold';
	font-size: 12px;
	color: #fff;
}


#container section#portfolio .item_portfolio .load{
	width: 88px;
	height: 78px;
	margin: 280px 0 0 340px;
}

#container section#portfolio nav{
	float: right;
	width: 190px;
	position: relative;
	margin-top: 79px;
	top: 0;
	right: 0;
}

#container section#portfolio nav ul{
	float: left;
	width: 190px;
}

#container section#portfolio nav ul li{
	float: left;
	width: 190px;
	height: 130px;
	margin-bottom: 7px;
	position: relative;
	text-transform: uppercase;
}

#container section#portfolio nav ul li a small{
	position: absolute;
	right: 0;
	bottom: 10px;
	color: #fff;
	background: #3b3533;
	text-transform: uppercase;
	padding: 3px 3px 3px 8px;
	font-size: 10px;
	font-family: 'GothamLight';
	text-align: right;
	line-height: 12px;
}

#container section#portfolio nav ul li a span{
	position: absolute;
	left: 0;
	top: 0px;
	width: 190px;
	height: 130px;
	background: url(../img/mask_trabalhos.png);
}

#container section#portfolio nav ul li a:hover small,
#container section#portfolio nav ul li a.on small{
	background: #e81332;
	color: #3b3533;
}

#container section#portfolio nav ul li a.on span{
	display:none;
}

#mycarousel li.video{
	padding: 40px;
	width: 700px;
	height: 460px;
}

#mycarousel li.desc{
	background: #3b3533;
}

#mycarousel li.desc p,
#mycarousel li.desc h3{
	float: left;
	width: 500px;
	color: #fff;
	text-align: left;
	margin-left: 10px!important;
	margin-top: 10px!important;
}

#mycarousel li.desc h3{
	font-family: 'GothamBold';
	font-size: 15px;
}


.load{
	float: left;
	width: 32px;
	height: 32px;
	margin: -300px 0 0 370px;
}

.box_over{
	float: left;
	width: 780px;
	min-height: 625px;
	overflow: hidden;
}