/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-weight: normal;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* FIM DO RESET 


@media (max-width: 420px) {
	
	body{
		font-family:'museo_slab500';
		overflow:hidden;
		font-size:10px;
	}
	
	.ir{
			text-indent:-9999;
			overflow:hidden;
			display:none;
		}
		
		.logo-mobile{
			position:relative;
			background-image:url(../img/logo-mobile.png);
			width:231px;
			margin:1.5em auto;
			height:50px;
			display:block;
			background-repeat:no-repeat;
		}
				
		.nav-principal, .nav-interna{
			position:relative;
			width:100%;
		}
		
		.nav-principal ul li, , .nav-interna ul li{
			position:relative;
			text-align:center;
			height: 6.8em;
		}
		
		.nav-principal ul li a, .nav-interna ul li a{
			background:#FFCC00;
			border-bottom: 1px solid #CD9E20;
			border-top: 2px solid #FFE398;
			color: #000000;
			display: block;
			font-size: 1.8em;
			height: 2.5em;
			padding-top: 1.3em;
			text-align: center;
			text-decoration: none;
			width: 100%;
		}
		
		.nav-principal ul li a:hover, .nav-interna ul li a:hover{
			background:#e4a500;
			color:#000;
			border-top:2px solid #cd9e20;
			border-bottom:1px solid #ffe398#cd9e20;
		}
		
		.nav-exposicoes, .nav-editorial, .nav-identidade, .nav-curriculo{ display:block !important;}
		
		#carrossel-exposicao{display:none;}
		
		.exposicao{display:none;}
		
		
	}*/
	
	/*######## MIN 421px MAX 1439px########*/

	/*######## MIN 421px MAX 1439px########*/

	/*FONTS*/
	@font-face {
        font-family: 'museo_slab500';
        src: url('../font/Museo_Slab_500_2-webfont.eot');
        src: url('../font/Museo_Slab_500_2-webfont.eot?#iefix') format('embedded-opentype'),
             url('../font/Museo_Slab_500_2-webfont.woff') format('woff'),
             url('../font/Museo_Slab_500_2-webfont.ttf') format('truetype'),
             url('../font/Museo_Slab_500_2-webfont.svg#museo_slab500') format('svg');
        font-weight: normal;
        font-style: normal;

    }
    
    
    @font-face {
        font-family: 'MuseoSlab500Italic';
        src: url('../font/Museo_Slab_500italic-webfont.eot');
        src: url('../font/Museo_Slab_500italic-webfont.eot?#iefix') format('embedded-opentype'),
             url('../font/Museo_Slab_500italic-webfont.woff') format('woff'),
             url('../font/Museo_Slab_500italic-webfont.ttf') format('truetype'),
             url('../font/Museo_Slab_500italic-webfont.svg#MuseoSlab500Italic') format('svg');
        font-weight: normal;
        font-style: normal;

    }
	/*END FONTS*/
	
@media (max-width:1439px) {
		
	body{
		font-family:'museo_slab500' !important;
		font-weight: bold !important;
		overflow:auto !important;
		font-size:10px !important;
	}
    /* Center the slideshow */
	.branco{
		background-color:#fff !important;
	}
		
	#container {
		margin: 0 auto;
		overflow:hidden;
	}
		

	.container {
	    width: 100%;
		margin:0 auto;
			
	}

	.nav-principal{
		position:absolute;
		z-index:999;
		width:100%;
		height:100%;
	}

	.nav-principal ul li{
		position:absolute;
		z-index:999;
		text-align:center;
	}

	.nav-principal ul li a{
			text-decoration: none;
			display: block;
			width: 80px; height: 80px;
	}
	
	.nav-principal .nav-logo{ width: 369px; height: 80px; margin-top:60em; left:20%; display:none; background: url(../img/logo-branco-grande.png);background-repeat: no-repeat;}
	/*.nav-principal .nav-exposicoes{ width: 80px; height: 80px; margin-top:30em; right:80%; display:none; background: url(../img/btn-expo.png);background-repeat: no-repeat;}
	.nav-principal .nav-editorial{width: 80px; height: 80px; margin-top:57em; right:30%; display:none; background: url(../img/btn-edit.png);background-repeat: no-repeat;}
	.nav-principal .nav-identidade{width: 80px; height: 80px;margin-top:67em; right:60%; display:none; background: url(../img/btn-id.png);background-repeat: no-repeat;}*/
	.nav-principal .nav-portifolio{width: 80px; height: 80px;margin-top:10em; left:40%; display:none; background: url(../img/mobile-portifolio.png);background-repeat: no-repeat;background-size:contain;}
	.nav-principal .nav-curriculo{width: 80px; height: 80px;margin-top:40em; right:30%; display:none; background: url(../img/btn-janela.png);background-repeat: no-repeat;}	

	.nav-principal .nav-exposicoes a:hover{background: url(../img/btn-expo-hover.png);background-repeat: no-repeat;}
	.nav-principal .nav-editorial a:hover{background: url(../img/btn-edit-hover.png);background-repeat: no-repeat;}
	.nav-principal .nav-identidade a:hover{background: url(../img/btn-id-hover.png);background-repeat: no-repeat;}
	.nav-principal .nav-curriculo a:hover{background: url(../img/btn-janela-hover.png);background-repeat: no-repeat;}
	.nav-principal .nav-portifolio a:hover{background-image: url(../img/mobile-portifolio-preto.png);background-size:contain}

	/* EXPOSICAO */

	header{
		width: 92em;
		height: 5em;
		margin-top: 1%;
		margin-left: 13em;
	}

	.ir{
		text-indent:-9999em;
		overflow:hidden;
		display:none;
	}

	.logo{
		background-image:url(../img/logo.png);
		width: 231px;
		height: 50px;
		display:block;
		float:left;
		background-repeat:no-repeat;
	}

	body.laranja .logo{ 
		background-image:url(../img/logo-branco.png);
		width: 231px;
		height: 50px;
		display:inline-table;
		background-repeat:no-repeat;
	}
	
	#loader-bg .logo{
		background-image: url(../img/logo.jpg);
		width: 257px;
		height: 50px;
		position: absolute !important;
		left: 56.5em !important;
		top: 10em !important;
		margin: 3em 59em 0 0;
		background-repeat: no-repeat
	}	

	.logo-mobile{
		display:none;
	}

	.botao-pdf{
		width: 91px;
		height: 11px;
		background: url(../img/bot-pdf-branco.png);
		display: inline-table;
		margin: 20px 0 0 90px;
		vertical-align: top;
	}

	.botao-pdf-branco{
		display: inline-table;
		width: 101px;
		height: 11px;
		/*background: url(../img/bot-pdf.png);*/
		margin: 20px 0 0 85px;
		vertical-align: top;
		color: #000;
		font-size: 11px;
		font-family: 'museo_slab500';
		text-decoration: none;
		overflow: hidden;
		display: inline-block;
		text-transform: lowercase;
		font-weight: bold;
	}

	.nav-interna{
		display: inline-table;
		margin:20px 0 0 2.5em;
		vertical-align: top;
	}

	.nav-interna ul li{
		display:inline;
		margin: 0 0 0 3.5em;
	}

	.nav-interna ul li a{
		color: #000;
		font-size: 10px;
		font-family: 'museo_slab500';
		text-decoration: none;
		font-weight: bold;
		overflow: hidden;
		display: inline-block;
		text-transform: lowercase;
	}

	.nav-interna .nav-exposicoes a { height: 11px; width: 58px; background: url(../img/bot-exposicoes.png) no-repeat;}
	.nav-interna .nav-editorial a { height: 11px; width: 46px; background: url(../img/bot-editorial.png) no-repeat;}
	.nav-interna .nav-tudo a { height: 11px; width: 47px; background: url(../img/bot-portfolio.png) no-repeat;}
	.nav-interna .nav-identidade a { height: 11px; width: 92px; background: url(../img/bot-identidade-visual.png) no-repeat;}
	.nav-interna .nav-curriculo a { height: 11px; width: 39px; background: url(../img/bot-estudio.png) no-repeat;}
		
	.nav-interna ul li a:hover{
		opacity: 0.6;
	}
		
	.thumb{
		height: 100px;
	    width: 100px;
	    overflow: hidden;
	    position: relative;
	    float: left;
	    margin-right: 2em;
	    margin-bottom: 0.3em;
	    position: absolute;
	    z-index: 999;
	    transition: opacity 0ms 0ms linear;
	}

	.thumb:hover{
		/* IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";

		/* Netscape */
		-moz-opacity: 0.1;

		 /* Safari 1.x */
		-khtml-opacity: 0.1;

		/* Good browsers */
		opacity: 0.1;
		transition:	opacity 50ms 50ms linear;
	}

	.todos{
		width: calc(95% - 12.8em);
		height: 100%;
		margin-top: 5em;
		margin-left: 12.8em;
	}

	
	.trabalhos ul li{
		height: 140px;
		width: 120px;
		float: left;
		margin-right: 3em;
	}

	.trabalhos ul li p{ 
			font-size: 0.8em;
		    text-align: left;
		    line-height: 1.6em;
		    position: absolute;
		    width: 10em;
		    padding: 0.8em;
		    z-index: 1;
		}

	/*.restaurante{background-image: url(../img/restaurante-thumb.jpg);}
	.hogan{background-image: url(../img/hogan-thumb.jpg);}
	.bienal{background-image: url(../img/bienal-thumb.jpg);} 	
	.campos{background-image: url(../img/campos-thumb.jpg);} 
	.homemnu{background-image: url(../img/homemnu-thumb.jpg);}
	.escola{background-image: url(../img/escolaolhar-thumb.jpg);} 
	.experience{background-image: url(../img/experience-thumb.jpg);} 
	.gabinete{background-image: url(../img/gabinete-thumb.jpg);}  
	.juriti{background-image: url(../img/juriti-thumb.jpg);} 
	.tolstoi{background-image: url(../img/tolstoi-thumb.jpg);} 
	.oculum{background-image: url(../img/oculum-thumb.jpg);}
	.performance{background-image: url(../img/performance-thumb.jpg);}  
	.turista{background-image: url(../img/turista-thumb.jpg);}  
	.mais{background-image: url(../img/mais-thumb.jpg);} 
	.turistas{background-image: url(../img/turistas-thumb.jpg);} 
	.cunha{background-image: url(../img/cunha-thumb.jpg);} 
	.geraldo{background-image: url(../img/geraldo-thumb.jpg);} 
	.sophie{background-image: url(../img/sophie-thumb.jpg);}
	.itinerarios{background-image: url(../img/itinerarios-thumb.jpg);}
	.joseph{background-image: url(../img/joseph-thumb.jpg);}
	.limite{background-image: url(../img/limite-thumb.jpg);} 
	.lina{background-image: url(../img/lina-thumb.jpg);}  
	.pampulha{background-image: url(../img/pampulha-thumb.png);}
	.homemnu{background-image: url(../img/homemnu-thumb.jpg);}
	.caio{background-image: url(../img/caio-thumb.jpg);}
	.fono{background-image: url(../img/fono-thumb.jpg);}
	.ocupacao{background-image: url(../img/ocupacao-thumb.jpg);}
	.panoramas{background-image: url(../img/panoramas-thumb.jpg);}
	.renata-padovan{background-image: url(../img/renata-padovan-thumb.jpg);}
	.vaivem{background-image: url(../img/vaivem-thumb.jpg);}
	.rodrigo-braga{background-image: url(../img/rodrigo-braga-thumb.jpg);}
	.vi-historia{background-image: url(../img/vi-historia-thumb.jpg);}
	.primeira-vista{background-image: url(../img/primeira-vista-thumb.jpg);}
	.senac-taboao{background-image: url(../img/senac-taboao-thumb.jpg);}*/



	.exposicao{
		position:relative;
		width:90em;	
		height:10em;
		display:none;
	}

	.exposicao a:hover{
		background:#ffcc00;
	}
		
	.quadrado{
		position: absolute;
		width: 20.5em;
		min-height: 7em;
		background: #fff;
		z-index: 999;
		padding: 4em 1.5em 2.5em 1.5em;
		left: 11em;
		margin-top: 1.7em;
		font-size: 1.1em;
		line-height: 1.4em;
		overflow: hidden;
	}

	.quadrado h2{
		font-size: 1.3em;
		line-height: 1.2em;
		margin-bottom: 0.2em;
	}

	.quadrado div{
		display: none;
	}


	.quadrado span{
		position:relative;
		display:block;
		font-size: 1em;
	}

	.italic{
			font-family: 'Museo_Slab500';
			margin-bottom: 1em;
			display: block;
		}

	.descricao{
		margin-bottom: 20px;
	}

	#carrossel{
		width: 100%;
		height: 600px;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 10em;
	}

	#surface{
		position:absolute;
		/*width:450em !important;*/
		height:50em !important;
		left:20% !important;
	}

	#surface img{
		width: auto;
		height: 500px;
		margin-right: 3px;
		}
			
	.carrossel-controle{
		position: absolute;
		width: 100%;
	    height: 50em;
	}

	#left, #right, #proximo{
		position: absolute;
		height: 50em;
		width: 50%;			}
		
	#left{ display:none; left:0em; cursor: url(../img/arrow-left.png), auto;}	
	#right, #proximo{right:0; cursor: url(../img/arrow-right.png), auto;}
	#proximo{display: none;}

	.trabalhos-controle{
		position: absolute;
		bottom: 0;
		margin-top: 20px;
		width: 90%;
		height: 30px;
	}

	.trabalhos-controle ul li{
		display: inline-block;
	}

	.trabalhos-controle ul li a{
		text-decoration: none; 
		width: 13em;
	}

	.trabalhos-controle ul li a:hover{
		color: #000;
	}

	.texto-controle{
		margin-left: 10px;
		font-size: 12px;
		color: #666;
		position: absolute !important;
		top: 5px;
	}

	#mais{
		display: block;
		position: absolute;
		left: 15.5em;
		top: 0;
		color: #fff;
		font-weight: bold;
		padding: 3px 6px;
		font-size: 1.2em;
		background: #ffae00;
		cursor: pointer;
		display: block;
	}

	#mais:hover{opacity: 0.6;}	

	.bot-anterior{ top:0; display: block; width: 20px; height: 20px; background: url(../img/bot-anterior.png) no-repeat;}
	.bot-proximo{ margin-left:1em; width: 20px; height: 20px; background: url(../img/bot-proximo.png) no-repeat;}

	.bot-anterior:hover, .bot-proximo:hover{ opacity: 0.6;}

	#carla, #lia{
		position: absolute;
		width: 20%;
		height: 45%;
		background: #fff;
		padding: 2em 3em 2em 3em;
		line-height: 1.5em;
		font-size: 12px;
	}

	.laranja{
		background: #ffcc00 !important;
	}

	.quadrado-carla{
		width: 60px;
		height: 60px;
		margin-top: -30px;
		left: -50px;
		top: 50%;
		display: block;
		position: absolute;
		background: url(../img/quadrado-carla.png);
	}
	.quadrado-lia{
		width: 60px;
		height: 60px;
		left: 96%;
		top: 55px;
		display: block;
		position: absolute;
		background: url(../img/quadrado-lia.png);
	}

	.quadrado-estudio{
		width: 100px;
		height: 100px;
		margin-top: -60px;
		left: -87px;
		top: 50%;
		display: block;
		position: absolute;
		background: url(../img/estudio-branco.png);
		background-size: contain;
	}
	.quadrado-clientes{
		width: 100px;
		height: 100px;
		left: 96%;
		top: 75px;
		display: block;
		position: absolute;
		background: url(../img/clientes-branco.png);
		background-size: contain;
	}

	#carla{
		top: 35%;
		left: 15%;
	}

	#carla p, #lia p{
		height: 98%;
	}

	#lia{
		top:25%;
		right: 15%;
	}

	footer{
		text-align: right;
		position: absolute;
		right: 15%;
		bottom: 7%;
		z-index: 40;
	}

	.footer-home{ display: none;}


	.tag-preta{
		background: #000;
		color: #fff;
		margin-bottom: 3px;
		padding: 3px 2px;
		font-size: 12px;
		display: inline-block;
	}
	.tag-branco{
		background: #fff;
		color: #000;
		margin-bottom: 3px;
		padding: 3px 2px;
		font-size: 12px;
		display: inline-block;
	}

	.tag.maior{
		font-size: 14px;
	}

}

@media (min-width: 1440px) {
		
		body{
		font-family:'museo_slab500';
		overflow:auto;
		font-size:10px;
		font-weight: bold;
		}
		
		#carregando{
			padding-left:13em;
		}
		
		.branco{
			background-color:#fff !important;
		}
		
		#container {
		  margin: 0 auto;
		  overflow:hidden;
		}
		
		.container {
			width: 100%;
		}
		
		.nav-principal{
			position:absolute;
			z-index:999;
			width: 100%;
			height: 100%;
		}
	
		.nav-principal ul li{
			position:absolute;
			z-index:999;
			text-align:center;
		}
	
		.nav-principal ul li a{
			text-decoration: none;
			display: block;
			width: 80px; height: 80px;
		}

		.versao-branca ul li a{
			color: #fff !important;
		}
		
		.nav-principal .nav-logo{ width: 369px; height: 80px; bottom:25em; left:25%; display:none; background: url(../img/logo-branco-grande.png);background-repeat: no-repeat;}
		.nav-principal .nav-exposicoes{ width: 80px; height: 80px; margin-top:30em; right:80%; display:none; background: url(../img/btn-expo.png);background-repeat: no-repeat;}
		.nav-principal .nav-editorial{width: 80px; height: 80px; margin-top:57em; right:30%; display:none; background: url(../img/btn-edit.png);background-repeat: no-repeat;}
		.nav-principal .nav-identidade{width: 80px; height: 80px;margin-top:67em; right:60%; display:none; background: url(../img/btn-id.png);background-repeat: no-repeat;}
		.nav-principal .nav-portifolio{width: 80px; height: 80px;margin-top:20em; left:40%; display:none; background: url(../img/mobile-portifolio.png);background-repeat: no-repeat;background-size:contain}
		.nav-principal .nav-curriculo{width: 80px; height: 80px;margin-top:40em; right:30%; display:none; background: url(../img/btn-janela.png);background-repeat: no-repeat;}	

		.nav-principal .nav-exposicoes a:hover{background: url(../img/btn-expo-hover.png);background-repeat: no-repeat;}
		
		.nav-principal .nav-editorial a:hover{background: url(../img/btn-edit-hover.png);background-repeat: no-repeat;}
		
		.nav-principal .nav-identidade a:hover{background: url(../img/btn-id-hover.png);background-repeat: no-repeat;}
		
		.nav-principal .nav-curriculo a:hover{background: url(../img/btn-janela-hover.png);background-repeat: no-repeat;}
		.nav-principal .nav-portifolio a:hover{background-image: url(../img/mobile-portifolio-preto.png);background-size:contain}
		
	
	
	/* EXPOSICAO */

		header{
			width: 92em;
			height: 5em;
			margin-top: 1% !important;
			margin-left: 13em !important;
		}
		
		.ir{
			text-indent:-9999em;
			overflow:hidden;
			display:none;
		}
		
		.logo{
			background-image:url(../img/logo.png);
			width: 231px;
			height: 50px;
			display:block;
			float:left;
			background-repeat:no-repeat;
		}

		body.laranja .logo{ 
			background-image:url(../img/logo-branco.png);
			width: 231px;
			height: 50px;
			display:inline-table;
			background-repeat:no-repeat;
		}

		.curriculo .logo{
			background-image:url(../img/logo.png);
			width:231px;
			height:50px;
			display:block;
			float:left;
			background-repeat:no-repeat;
		}

		#loader-bg .logo{
			background-image: url(../img/logo.jpg);
			width: 257px;
			height: 50px;
			position: absolute !important;
			left: 67em !important;
			top: 10em !important;
			margin: 6em 59em 0 0;
			background-repeat: no-repeat
		}
		
		.logo-mobile{
			display:none;
		}

		.botao-pdf{
			width: 91px;
			height: 11px;
			background: url(../img/bot-pdf-branco.png);
			display: inline-table;
			margin: 22px 0 0 90px;
			vertical-align: top;
		}

		.botao-pdf-branco{
			display: inline-table;
			width: 101px;
			height: 11px;
			/*background: url(../img/bot-pdf.png);*/
			margin: 22px 0 0 85px;
			vertical-align: top;
			color: #000;
			font-size: 11px;
			font-family: 'museo_slab500';
			text-decoration: none;
			overflow: hidden;
			display: inline-block;
			text-transform: lowercase;
			font-weight: bold;
		}
		
		.nav-interna{
			display: inline-table;
			vertical-align: top;
			margin:20px 0 0 2.5em;
		}
		
		.nav-interna ul li{
			display:inline;
			margin: 0 0 0 3.5em;
		}
		
		.nav-interna ul li a{
		    color: #000;
		    font-size: 11px;
		    font-family: 'museo_slab500';
		    text-decoration: none;
		    overflow: hidden;
		    display: inline-block;
		    text-transform: lowercase;
		    font-weight: bold;
		}
		
		.nav-interna ul li a:hover{
			opacity: 0.6;
		}

		.nav-interna .nav-exposicoes a {height: 9px; width: 58px; background: url(../img/bot-exposicoes.png);}
		.nav-interna .nav-editorial a {height: 9px; width: 46px; background: url(../img/bot-editorial.png);}
		.nav-interna .nav-tudo a {height: 11px; width: 47px; background: url(../img/bot-portfolio.png);}
		.nav-interna .nav-identidade a {height: 9px; width: 92px; background: url(../img/bot-identidade-visual.png);}
		.nav-interna .nav-curriculo a {height: 9px; width: 39px; background: url(../img/bot-estudio.png);}
		
		.thumb{
			height:100px;
			width:100px;
			overflow:hidden;
			position:relative;
			float:left;
			/*margin-right:0.5em; - texto embaixo */
			margin-right:2em; 
			margin-bottom: 0.3em;
			position: absolute;
			z-index: 999;
			transition: 
           		opacity 0ms 0ms linear;
		}

		.thumb:hover{
			  /* IE 8 */
			  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";

			  /* Netscape */
			  -moz-opacity: 0.1;

			  /* Safari 1.x */
			  -khtml-opacity: 0.1;

			  /* Good browsers */
			  opacity: 0.1;
			transition: 
           		opacity 50ms 50ms linear;
		}

		.trabalhos ul li:hover{
		
		}

		.todos{
			width: calc(95% - 12.8em);
			height: 100%;
			margin-top: 5em;
			margin-left: 12.8em;
		}

		
		.trabalhos ul li{
			height: 180px;
			width: 120px;
			float: left;
			margin-right: 3em;
		}

		/* opção texto embaixo
		.trabalhos ul li{
			height: 170px;
			width: 225px;
			float: left;
			margin-right: 3em;
		}*/

		.trabalhos ul li p{ 
			font-size: 0.8em;
			text-align: left;
			line-height: 1.6em;
			position: absolute;
			width: 10em;
			padding: 0.8em;
			z-index: 1;
		}

		/*.restaurante{background-image: url(../img/restaurante-thumb.jpg);}
		.hogan{background-image: url(../img/hogan-thumb.jpg);}
		.bienal{background-image: url(../img/bienal-thumb.jpg);} 	
		.campos{background-image: url(../img/campos-thumb.jpg);} 
		.homemnu{background-image: url(../img/homemnu-thumb.jpg);}
		.escola{background-image: url(../img/escolaolhar-thumb.jpg);} 
		.experience{background-image: url(../img/experience-thumb.jpg);} 
		.gabinete{background-image: url(../img/gabinete-thumb.jpg);}  
		.juriti{background-image: url(../img/juriti-thumb.jpg);} 
		.tolstoi{background-image: url(../img/tolstoi-thumb.jpg);} 
		.oculum{background-image: url(../img/oculum-thumb.jpg);}
		.performance{background-image: url(../img/performance-thumb.jpg);}  
		.turista{background-image: url(../img/turista-thumb.jpg);}  
		.mais{background-image: url(../img/mais-thumb.jpg);} 
		.turistas{background-image: url(../img/turistas-thumb.jpg);} 
		.cunha{background-image: url(../img/cunha-thumb.jpg);} 
		.geraldo{background-image: url(../img/geraldo-thumb.jpg);} 
		.sophie{background-image: url(../img/sophie-thumb.jpg);}
		.itinerarios{background-image: url(../img/itinerarios-thumb.jpg);}
		.joseph{background-image: url(../img/joseph-thumb.jpg);}
		.limite{background-image: url(../img/limite-thumb.jpg);} 
		.lina{background-image: url(../img/lina-thumb.jpg);}  
		.pampulha{background-image: url(../img/pampulha-thumb.png);}
		.homemnu{background-image: url(../img/homemnu-thumb.jpg);}
		.caio{background-image: url(../img/caio-thumb.jpg);}
		.fono{background-image: url(../img/fono-thumb.jpg);}
		.ocupacao{background-image: url(../img/ocupacao-thumb.jpg);}
		.panoramas{background-image: url(../img/panoramas-thumb.jpg);}
		.renata-padovan{background-image: url(../img/renata-padovan-thumb.jpg);}
		.vaivem{background-image: url(../img/vaivem-thumb.jpg);}
		.rodrigo-braga{background-image: url(../img/rodrigo-braga-thumb.jpg);}
		.vi-historia{background-image: url(../img/vi-historia-thumb.jpg);}
		.primeira-vista{background-image: url(../img/primeira-vista-thumb.jpg);}
		.senac-taboao{background-image: url(../img/senac-taboao-thumb.jpg);}*/


		.exposicao{
			position:relative;
			width:90em;
			height:10em;
			display:none;
		}
		
		.exposicao span{
			position:relative;
			display:block;
			margin-top:3em;
		}
		
		.exposicao a:hover{
			background:#ffcc00;
		}
		
		.quadrado{
			position: absolute;
			width: 17.5em;
			background: #fff;
			z-index: 999;
			padding: 4em 1.5em 2.5em 1em;
			left: 11em;
			margin-top: 0.2em;
			font-size: 1.1em;
			line-height: 1.4em;
			overflow: hidden;
		}

		.quadrado h2{
			font-size: 1.3em;
			line-height: 1.2em;
			margin-bottom: 0.1em;
		}

		.descricao{
			display: none;
			margin-bottom: 15px;
		}

		#mais{
			display: block;
			position: absolute;
			left: 16.5em;
			top: 0;
			color: #fff;
			font-weight: bold;
			padding: 1px 6px;
			background: #ffae00;
			cursor: pointer;
			content: '+';
		}

		#mais:hover{opacity:0.6;}
		
		.italic{
			font-family: 'Museo_Slab500';
			margin-bottom: 1em;
			display: block;
		}

		#carrossel{
			width: 100%;
			height: 600px;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 16.3em;
		}
		
		#surface{
			position:absolute;
			/*width:450em !important;*/
			height:50em !important;
			left:20% !important;
		}

		#surface img{
			width: auto;
		    margin-right: 3px;
		    height: 600px;
			}
	
		.carrossel-controle{
		    position: absolute;
		    width: 100%;
		    height: 50em;
		}
		#left, #right, #proximo{
		position: absolute;
		height: 50em;
		width: 50%;			}
		
		#left{ display:none; left:0em; cursor: url(../img/arrow-left.png), auto;}	
		#right, #proximo{right:0; cursor: url(../img/arrow-right.png), auto;}
		#proximo{display: none;}

	.trabalhos-controle{
		position: absolute;
		bottom: 0;
		margin-top: 20px;
		width: 90%;
		height: 30px;
	}

	.trabalhos-controle ul li{
		display: inline-block;
	}

	.trabalhos-controle ul li a{
		font-size: 1em;
		color: #fff;
		text-decoration: none;
	}

	.texto-controle{
		margin-left: 65px;
		font-size: 12px;
		color: #666;
	}

	.bot-anterior{ 
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		background: url(../img/bot-anterior.png) no-repeat;
	}
	.bot-proximo{
		position: absolute;
		top: 0;
		right: 14em;
		display: block;
		width: 20px;
		height: 20px;
		background: url(../img/bot-proximo.png) no-repeat;
	}
	.bot-anterior:hover, .bot-proximo:hover{ opacity: 0.6;}

		.voltar{
		display: block;
		margin: 8em 0 0 5em;
		font-size: 1.4em! important;
		color: #fff;
		text-decoration: none;
		font-family:'museo_slab500';
		}

		#carla, #lia{
			position: absolute;
			width: 25%;
			height: 30%;
			background: #fff;
			padding: 2em 3em 2em 3em;
			line-height: 1.5em;
			font-size: 12px;
		}

		.laranja{
			background: #ffcc00;
		}

		.quadrado-carla{
			width: 60px;
			height: 60px;
			margin-top: -30px;
			left: -50px;
			top: 50%;
			display: block;
			position: absolute;
			background: url(../img/quadrado-carla.png);
		}
		.quadrado-lia{
			width: 60px;
			height: 60px;
			left: 96%;
			top: 55px;
			display: block;
			position: absolute;
			background: url(../img/quadrado-lia.png);
		}

		.quadrado-estudio{
		width: 60px;
		height: 60px;
		margin-top: -30px;
		left: -50px;
		top: 50%;
		display: block;
		position: absolute;
		background: url(../img/estudio-branco.png);
		background-size: contain;
	}
	.quadrado-clientes{
		width: 60px;
		height: 60px;
		left: 98%;
		top: 55px;
		display: block;
		position: absolute;
		background: url(../img/clientes-branco.png);
		background-size: contain;
	}

		#carla{
			top: 45%;
			left: 15%;
		}

		#carla p, #lia p{
			height: 98%;
		}

		#lia{
			top:30%;
			right: 15%;
		}
		
		footer{
			text-align: right;
			position: absolute;
			right: 15%;
			bottom: 7%;
		}

		.footer-home{ display: none;}

		.tag-preta{
			background: #000;
			color: #fff;
			margin-bottom: 3px;
			padding: 3px 2px;
			font-size: 12px;
			display: inline-block;
		}
		.tag-branco{
			background: #fff;
			color: #000;
			margin-bottom: 3px;
			padding: 3px 2px;
			font-size: 12px;
			display: inline-block;
		}

		.tag.maior{
			font-size: 14px;
		}
		

}