@charset "utf-8";

body { font: 100%/1.4 'KelsonSansRegular', sans-serif; background: #ececec url(../images/home.png); color: #000 }


		/* DEFAULT */
		body, div, table, td, tr, 
		ul, ol, li, dl, 
		h1, h2, h3, h4, h5, h6, p, 
		a, img a, a img, span, form, fieldset, input { padding: 0; margin: 0; border: none }
		ul, ol, li { list-style: none }
		img { max-width: 100%; height: auto; width: auto\9; /* < IE8 escala total */ }
		*a { zoom: 1 /* IE7 menulink */ } 
		a:link,
		a:hover,
		a:visited {color: #2e9acc }
		a:focus { outline: none }
		a:link, 
		a:visited, 
		a:hover, 
		a:active, 
		a:focus { text-decoration: none }
		.absolute { position: absolute; top: 0; left: 0; z-index: 100 }
		.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px }
		/* DEFAULT/ */
		


		
		/* ----------------------------------------------------------*/
		/* Voltar ao Topo -------------------------------------------*/
		/* ----------------------------------------------------------*/
		
		#toplink { display: none; position: fixed; right: 15px; top: 45% }
		#toplink, #toplink a { width: 60px; height: 60px; z-index: 50000 }
		#toplink a { display: block; background: url(../images/gotop.png) bottom }
		#toplink a:hover { background-position: top }
		
		/* ----------------------------------------------------------*/
		/* Voltar ao Topo/ ------------------------------------------*/
		/* ----------------------------------------------------------*/
			
		

/* -------------------------------------------------------------------------------------------- */
/* TOPO --------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

.top { 
	width: 100%; 
	min-width: 980px; 
	display: block; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 1000; 
	background: #ececec 
}
.top, .top ul.menu, .top ul.redes { height: 142px }

	/* logo */
	a.logo { width: 108px; height: 108px; margin: 17px 0 0 2%; background: url(../images/metafora_logo.png) bottom; display: block; float: left }
	a:hover.logo { background-position: top }


	/* Institucional/Redes */
	.top ul.menu, .top ul.menu li, 
	.top ul.menu li a, 
	.top ul.redes li, 
	.top ul.redes li a { display: block }
	
	.top ul.menu, .top ul.menu li, .top ul.menu li a { float: left; }
	
	.top ul.menu { width: auto; margin: 56px 2% 0 2%; height: 20px }
	.top ul.menu li.link { margin: 0 }
	.top ul.menu li.link a { 
		width: auto; 
		margin: 0 5px; 
		padding: 6px 10px;
		border-radius: 10px; 
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		font: 16px/18px 'KelsonSansRegular', sans-serif; 
		color: #484872; 
		text-align: center 
	 }
	.top ul.menu li.link a:hover { background: #ede672 }
	.top ul.menu li.link a.agenda { color: #a7a7b8; background: #ececec; cursor: default }
	
	.top ul.redes { margin: 50px 2% 0 0; float: right }
	.top ul.redes li { margin: 0 0 0 8px }
	.top ul.redes li, .top ul.redes li a { float: left }
	.top ul.redes li a { width: 35px; height: 36px; margin: 0; padding: 0; background-position: bottom }
	
	.top ul.redes li a.facebook { background: url(../images/redes_topo_facebook.png) bottom  }
	.top ul.redes li a.instagram {  background: url(../images/redes_topo_instagram.png) bottom }
	.top ul.redes li a.twitter {  background: url(../images/redes_topo_twitter.png) bottom }
	.top ul.redes li a.youtube {  background: url(../images/redes_topo_youtube.png) bottom }
	.top ul.redes li a.deezer {  background: url(../images/redes_topo_deezer.png) bottom }
	.top ul.redes li a.soundcloud {  background: url(../images/redes_topo_soundc.png) bottom }
	.top ul.redes li a.spotify {  background: url(../images/redes_topo_spotify.png) bottom }
	
	.top ul.redes li a:hover { background-position: top }


/* -------------------------------------------------------------------------------------------- */
/* TOPO /-------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------------------------- */
/* BASE --------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

.base { display: block; width: 100%; height: 100%; margin: 0 auto; padding: 142px 0 200px 0 }
.base .pagina, .base .slider { max-width: 1600px; min-width: 980px; width: 100%; display: block; margin: 80px auto 0 auto }
.base, .base .pagina, .base .slider { display: block }
	
	#home { width: 100%; height: 100%; background: #ffefca; padding: 142px 0 0 0 }
	#banda { background: #f3f3f3 }
	#discos { background: #ffefca }
	#imprensa{ background: #476997 }
	#contato { background: #f3f3f3 }
	#rodape { background: #e0e0e0; padding: 0 }
	
	.topo, 
	.topo-pagina { display: block; width: 100%; height: 136px; margin: 0 auto }

	h1 { font: 20px/130px 'KelsonSansRegular', sans-serif; width: 136px; height: 140px; display: block; margin: 0 auto; text-align: center}
	p { font: 16px/24px 'KelsonSansLight', sans-serif; text-align: justify; color: #484872; float: left }
	h1, p { display: block }

	.info { width:94%; margin: 0 3% }
	.box { display: block; float: left; margin: 100px 0 0 0 }
	.info, .box { display: block }
		
/* ---------------------------------------------------------------------------------------------- */
/* BASE /---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */






/* ---------------------------------------------------------------------------------------------- */
/* BANNER --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#home img { width: 100%; max-width: 1600px; min-width: 960px; height: 100%; margin: 0 auto; display: block }


/* ---------------------------------------------------------------------------------------------- */
/* BANNER /-------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */






/* ---------------------------------------------------------------------------------------------- */
/* A BANDA -------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#topo-banda { background:url(../images/adereco_pagina_banda.png) center no-repeat }
#topo-banda h1 { background: url(../images/titulo_banda.png) top no-repeat; color: #f5ee7f }


#info-depo ul, #info-depo ul li, #info-depo ul li, #info-depo ul li.depo span.depoimento, #info-depo ul li.depo span.depoimento li, 
#info-depo ul li.depo span.depoimento li p { display: block }

#info-depo ul { width: 100%; padding: 0; margin: 100px auto 80px auto }
#info-depo ul li.depo { width: 33%; height: 388px; float: left; background: url(../images/depoimento.png) center no-repeat  }
#info-depo ul li.meio { width: 34% }
#info-depo ul li.depo span.depoimento { width: 340px; height: 320px; background:url(../images/adereco_depoimento.png) top center no-repeat; margin: 68px auto 0 auto }
#info-depo ul li.depo span.depoimento p { width: 92%; margin: 60px 4% 0 4%; text-align: center; color: #52a6d1 }
#info-depo ul li.depo span.depoimento p.texto { height: 150px; font: 14px/20px 'KelsonSansLight', sans-serif }
#info-depo ul li.depo span.depoimento p.nome { height: 50px; margin: 30px 4% 0 4%; font: 12px/18px 'KelsonSansLight', sans-serif }




#box-banda { width: 46% }
#corte-banda { width: 8%; height: 600px; background: url(../images/adereco_banda.png) center no-repeat }

.sobre, .membros, .sobre h3, .membros h3,  .membros p, .sobre ul { margin: 0 auto; text-align: justify }
.sobre, .membros, .membros p, .membros p img, .membros ul, .acesse ul li, .sobre ul li a, .sobre h3, .membros h3 { display: block }

.sobre h3, .membros h3, .membros p { width: 100% } 

.sobre h3, .membros h3 { height: 70px; font: normal 30px/34px 'KelsonSansRegular', sans-serif; text-align: left; color: #484872; padding: 18px 0 0 0 }
.sobre p, .membros p { font: normal 17px/30px 'KelsonSansLight', sans-serif; color: #484872; float: none }
.membros p span.membro { font: normal 24px/30px 'KelsonSansRegular', sans-serif; color: #484872; padding: 0 0 20px 0 }

.membros p { padding: 0 0 50px 0 } 
.membros p img { float: left; margin: 0 30px 30px 0 } 

a.saiba-mais { 
	display: inline-block; 
	padding: 4px 10px; 
	font: normal 17px/19px 'KelsonSansLight', sans-serif; 
	color: #484872; 
	background: #ede672;
	border-radius: 8px; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
}
a.saiba-mais:hover { background: #fffaa7 }
 
/* ---------------------------------------------------------------------------------------------- */
/* A BANDA -------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */





 
/* ---------------------------------------------------------------------------------------------- */
/* DISCOS --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

#topo-discos { background:url(../images/adereco_pagina_discos.png) center no-repeat }
#topo-discos h1 { background: url(../images/titulo_discos.png) top no-repeat; color: #f5ee7f }


.capa-disco, .conteudo-disco, .conteudo-disco, .conteudo-disco .sub-base ul, 
.conteudo-disco .sub-base ul p, .conteudo-disco .sub-base ul li,
.capa-disco { float: left }

.capa-disco, .conteudo-disco, .capa-disco a.disco, .conteudo-disco h3, .conteudo-disco .sub-base, 
.conteudo-disco .sub-base ul, .conteudo-disco .sub-base ul p, 
.conteudo-disco .sub-base ul li, .conteudo-disco .sub-base ul li a { display: block }

.capa-disco { width: 26%; height: 235px; margin: 100px 0 40px 10% }

.capa-disco a.disco { width: 235px; height: 235px; margin: 0 auto }
.capa-disco a#capa-mundocolorido { background: url(../images/capa_mundocolorido.png) top }
.capa-disco a#capa-lambelambe { background: url(../images/capa_lambelambe.png) top }
.capa-disco a:hover#capa-mundocolorido,
.capa-disco a:hover#capa-lambelambe { background-position: bottom }

.conteudo-disco { width: 54%; margin: 100px 10% 40px 0; height: 235px }
.conteudo-disco h3 { font: normal 32px/34px 'KelsonSansRegular', sans-serif; text-align: left; padding: 20px 0 20px 0 }
#disco-mundocolorido h3 { color: #74c8eb }
#disco-lambelambe h3 { color: #ae88b5 }

.sub-base, .sub-base ul, .sub-base p { width: 100% }
.sub-base p { font: normal 16px/22px 'KelsonSansLight', sans-serif; text-align: left; }
.sub-base ul p { font: normal 22px/28px 'KelsonSansRegular', sans-serif; text-align: left; width: 60px; padding: 10px 0 0 0 }

.sub-base ul { margin: 0 0 20px }
.sub-base ul li { margin: 0 3px }
.sub-base ul li a { width: 50px; height: 50px; margin: 0 auto }

#disco-mundocolorido .sub-base ul li a.deezer { background: url(../images/stream_mundocolorido_deezer.png) top }
#disco-mundocolorido .sub-base ul li a.spotify { background: url(../images/stream_mundocolorido_spotify.png) top }
#disco-mundocolorido .sub-base ul li a.soundcloud  { background: url(../images/stream_mundocolorido_soundcloud.png) top }
#disco-mundocolorido .sub-base ul li a:hover  { background-position: bottom }

#disco-lambelambe .sub-base ul li a.deezer { background: url(../images/stream_lambelambe_deezer.png) top }
#disco-lambelambe .sub-base ul li a.spotify { background: url(../images/stream_lambelambe_spotify.png) top }
#disco-lambelambe .sub-base ul li a.soundcloud  { background: url(../images/stream_lambelambe_soundcloud.png) top }
#disco-lambelambe .sub-base ul li a:hover  { background-position: bottom }


#disco-mundocolorido .sub-base ul p, #disco-mundocolorido .sub-base p { color: #44a0c6 }
#disco-lambelambe .sub-base ul p, #disco-lambelambe .sub-base p { color: #8a5b93}





 
/* ---------------------------------------------------------------------------------------------- */
/* DISCOS /-------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
 
 
 
  
  
/* ---------------------------------------------------------------------------------------------- */
/* IMPRENSA ------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#topo-imprensa { background:url(../images/adereco_pagina_imprensa.png) center no-repeat }
#topo-imprensa h1 { background: url(../images/titulo_imprensa.png) top no-repeat; color: #476997 }

#menu-imprensa ul, #menu-imprensa ul li, #menu-imprensa ul li a, #menu-imprensa ul li a span.img, #menu-imprensa ul li a p { display: block }

#menu-imprensa ul { width: 100%; padding: 0; margin: 100px auto 0 }
#menu-imprensa ul li { width: 33%; float: left  }
#menu-imprensa ul li.meio { width: 34% }
#menu-imprensa ul li a { width: 304px; margin: 0 auto }
#menu-imprensa ul li a span.img { width: 304px; height: 337px }
#menu-imprensa ul li a p { 
	width: 304px; 
	height: 140px;
	margin: 40px 0 0 0; 
	text-align: center; 
	color: #fcff9f; 
	background: url(../images/linha_imprensa.png) no-repeat;
	font: 70px/144px 'KelsonSansLight', sans-serif;
	}
#menu-imprensa ul li a:hover p { color: #feffd5 }

	#menu-imprensa ul li a.fotos span.img { background: url(../images/imprensa_fotos.png) bottom }
	#menu-imprensa ul li a.clipping span.img { background: url(../images/imprensa_clipping.png) bottom }
	#menu-imprensa ul li a.portfolio span.img { background: url(../images/imprensa_portfolio.png) bottom }
	
	#menu-imprensa ul li a:hover span.img { background-position: top }

 
/* ---------------------------------------------------------------------------------------------- */
/* IMPRENSA ------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
 

 
 
/* ---------------------------------------------------------------------------------------------- */
/* CONTATO -------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


#topo-contato { background:url(../images/adereco_pagina_banda.png) center no-repeat }
#topo-contato h1 { background: url(../images/titulo_banda.png) top no-repeat; color: #f5ee7f }

#box-contato { width: 48% }
#corte-contato { width: 4%; height: 400px; background: url(../images/adereco_banda.png) center no-repeat }

.acesse, .contrate, .acesse h3, .contrate h3, .contrate p, .acesse ul { margin: 0 auto; text-align: center }
.acesse, .contrate, .contrate p, .acesse ul, .acesse ul li, .acesse ul li a, .acesse h3, .contrate h3 { display: block }

.acesse h3, .contrate h3 { width: 188px; height: 70px; background:url(../images/subtitulo_contato.png); font: normal 26px/66px 'KelsonSansLight', sans-serif; color: #484872 }

.contrate p, .acesse ul { 
	width: 400px; 
	height: 49px; 
	padding: 50px 0;
	margin: 50px auto 0 auto;
	background: url(../images/box-contato.png) no-repeat; 
	font: normal 18px/24px 'KelsonSansLight', sans-serif; 
	color: #484872; 
	float: none 
}
.acesse ul { height: 80px; padding: 35px 0 34px 0}
.acesse ul li { margin: 0 12px }
.acesse ul li a { width: 76px; height: 80px; margin: 0 auto }
.acesse ul li,
.acesse ul li a { float: left }

	.acesse ul li a.facebook { background: url(../images/redes_contato_facebook.png) bottom  }
	.acesse ul li a.instagram {  background: url(../images/redes_contato_instagram.png) bottom }
	.acesse ul li a.twitter {  background: url(../images/redes_contato_twitter.png) bottom }
	.acesse ul li a.youtube {  background: url(../images/redes_contato_youtube.png) bottom }
	
	.acesse ul li a:hover { background-position: top }


/* ---------------------------------------------------------------------------------------------- */
/* CONTATO /------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------------------- */
/* RODAPÉ --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
 
#assinatura { height: 40px; width: 100%; margin: 0 auto }
#assinatura p { font: 11px/13px 'KelsonSansLight', sans-serif; color: #8e8b8b; text-align: left; padding: 14px 0 0 12px; float: left }
a.preta-pretinha { width: 107px; height: 26px; display: block; float: right; background: url(../images/preta-pretinha.png) top; margin: 8px 12px 0 0 }
a:hover.preta-pretinha { background-position: bottom }

#assinatura, #assinatura p, a.preta-pretinha { display: block } 
 
/* ---------------------------------------------------------------------------------------------- */
/* RODAPÉ /-------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
 
 
 
 
 /* --------------------------------------------------------------------------------------------- */
 /* FONTES -------------------------------------------------------------------------------------- */
 /* --------------------------------------------------------------------------------------------- */
 

@font-face {
    font-family: 'KelsonSansBold';
    src: url('../fonts/kelson_sans_bold-webfont.eot');
    src: url('../fonts/kelson_sans_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kelson_sans_bold-webfont.woff2') format('woff2'),
         url('../fonts/kelson_sans_bold-webfont.woff') format('woff'),
         url('../fonts/kelson_sans_bold-webfont.ttf') format('truetype'),
         url('../fonts/kelson_sans_bold-webfont.svg#kelson_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'KelsonSansLight';
    src: url('../fonts/kelson_sans_light-webfont.eot');
    src: url('../fonts/kelson_sans_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kelson_sans_light-webfont.woff2') format('woff2'),
         url('../fonts/kelson_sans_light-webfont.woff') format('woff'),
         url('../fonts/kelson_sans_light-webfont.ttf') format('truetype'),
         url('../fonts/kelson_sans_light-webfont.svg#kelson_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'KelsonSansRegular';
    src: url('../fonts/kelson_sans_regular-webfont.eot');
    src: url('../fonts/kelson_sans_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kelson_sans_regular-webfont.woff2') format('woff2'),
         url('../fonts/kelson_sans_regular-webfont.woff') format('woff'),
         url('../fonts/kelson_sans_regular-webfont.ttf') format('truetype'),
         url('../fonts/kelson_sans_regular-webfont.svg#kelson_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}		
		

		
 /* --------------------------------------------------------------------------------------------- */
 /* FONTES /------------------------------------------------------------------------------------- */
 /* --------------------------------------------------------------------------------------------- */
 
 
 
.text-shadow { text-shadow: 
			  rgba(2,61,98,0) -1px 0, /* esquerdo azul */
			  rgba(1,42,68,0) 0 -1px, /* superior-out azul */
			  rgba(250,250,250,0) -1px -1px; /* inferior-in branco */
}