@import url('reset.css');

body{ font-family:'Quicksand'; font-size:13px; }
object{display:none;}	
	a:link, a:active, a:visited{ outline:none; text-decoration:none; }
	input,select,textarea,button{ outline:none;}
	
	.centro{ margin:0 auto; width:960px;}
	.clear{ clear:both; }
	
	::selection {background:#111;color:#ffffff;}
	::-webkit-selection {background:#111;color:#ffffff;}
	::-moz-selection {background:#111;color:#ffffff;}

	/* MODAL */
	body.modalOn{ overflow-y: scroll; }	
	.ow1{ left:0; position:absolute; right:0; top:0; z-index:4000; display:none; height:100% !important; table-layout:fixed; width:100%; background-color:rgba(0,0,0,0.8); }
		body.modalOn .ow1{ display: table; }
	.ow2{ display:table-cell; text-align:center; vertical-align:middle; width:100%; }
	.ow3{ display:inline-block; margin:20px; text-align: left; }

	body.modalOn #wp{ position: fixed; width: 100%; }
	.dialog{ display:none; width:930px; height:520px; position:relative;  }
	.dialog .loading{ background:url(../img/91.gif) center center no-repeat; width:12%; height:18%; opacity:0.6; border-radius:8px; background-color:#FFF; position:absolute; top:42%; left:42%; z-index:15;}
	.dialog .show{ width:100%; height:100%; position:relative; z-index:20;}
	
	/*----**/

	#logoFloat{ background:url(../img/logo2.png) 0 top; width:123px; height:58px; position:fixed; top:3%; left:4%; z-index:100; cursor:pointer;}
	#logoFloat div{background:url(../img/logo2.png) 0 bottom; width:123px; height:58px; opacity:1; transition:all 0.7s ease;}
	.negativo #logoFloat div{ opacity:0; }
	#logoFloat.trava div{ opacity:0; }

	#menu{ position:fixed; font-weight:700; font-size:12px; text-transform:uppercase; right:4.5%; top:7%; z-index:100;}
		#menu li{ float:left; padding-left:30px;}
		#menu li a{ padding:10px; border:solid 1px transparent; color:#fff; transition:all 0.5s ease;}
		#menu li a:hover,#menu li a.ativo{ border-color:#fff; }
		#menu li.idioma{}
		#menu li:last-child{padding-left: 0px;}
		
		.negativo #menu li a{ padding:10px; border:solid 1px transparent; color:#000;}
		.negativo #menu li a:hover,.negativo #menu li a.ativo{ border-color:#000; }
		
	#home{ position:relative; width:100%; overflow:hidden; height:100%; }
		
		#logoHome{ width:240px; margin:0 auto; position:relative; z-index:10; }
		#home #slider{ position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; background-color:#000; }
		#home #slider.loading{ background-image:url(../img/92.gif); background-position:center 65%; background-repeat:no-repeat;}
		#home #slider.loading ul.esteira{ opacity:0; }
		#home #slider ul.esteira{ position:absolute; top:0; bottom:0; left:0; transition:left 0.7s ease-out 0.1s, opacity 0.4s ease 0.2s; }
		#home #slider ul.esteira li{ float:left; overflow:hidden;}
		#home #slider ul.esteira li img{ height:100%;}
		
		#slider .nav{ z-index:25; position:absolute; bottom:5%; width:100%; text-align:center; }
		#slider .nav ul li{ display: inline-block; height:13px; margin:7px; position:relative; width:14px;}
		#slider .nav ul li a{ cursor:pointer; display:block; height:100%; position:relative; text-decoration:none; width:100%; z-index:1; }
		#slider .nav ul li a span{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 50%; height: 8px; left: 2px; position: absolute; top: 2px; width: 8px; z-index: 1; }
		#slider .nav ul li a.active span{background-color:#FFF;}
		#slider .nav ul li a:hover span{ background-color:rgba(255, 255, 255, 0.5);}


	#projetos{}	
	
	#projetos .filtro{ text-transform:uppercase; font-size:11px; padding:2.5% 0 0;}
	#projetos .filtro ul{ text-align:center; }
	#projetos .filtro ul li{ display:inline-block; margin:0 1%;} 
	#projetos .filtro ul li a{ color:#000000; font-size:11px;}
	#projetos .filtro ul li a:hover,#projetos .filtro ul li a.ativo{ border-bottom:solid 1px #000000; padding-bottom:5px; }
	
	#projetos .busca{ overflow:hidden; }
	#projetos .busca form{ float:right;  margin:2.8% 10.2% 2.2% 0;}
	#projetos .busca form fieldset{}
	#projetos .busca form input{ background-color:#f7f7f7; text-transform:uppercase; border:none; height:30px; width:210px; padding:0 20px; font-size:10px; float:left; transition:all 0.5s ease; }
	#projetos .busca form input.idiomapt{}
	#projetos .busca form input.idiomaen{}
	#projetos .busca form input:focus{ background-color:#f1f1f1;}
	#projetos .busca form a{ float:left; background:url(../img/lupa.png) no-repeat; padding:1px; width:13px; height:13px; margin:10px 0 0 -25px; cursor:pointer;}
	
	#projetos .itens{ padding:0 8%; overflow:hidden; height:80.9%; }
	#projetos .itens.loading{ background:url(../img/91.gif) center 40% no-repeat; }
	#projetos .itens .container{ width:100%; height:100%;}
		#projetos .itens ul{ overflow:hidden; }
		#projetos .itens ul li{ float:left; width:33.333333%; position: relative;}
		#projetos .itens ul li a{ color:#000; display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
		#projetos .itens ul li a img{ width:100%; display: block; transition: all 0.5s ease; }
		#projetos .itens ul li a span{  float:left; }		
        		
    #projetos .itens ul li .textoProjeto{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
    #projetos .itens ul li .textoProjeto .tags{ position: absolute; top: 40px; left: 20px; display: block; color: #ffffff; font:600 12px 'Quicksand'; letter-spacing: 0.050em; text-shadow: 0px 2px 2px rgb(0 0 0 / 27%); transition: all 0.5s ease; opacity: 0; visibility:hidden;}
    #projetos .itens ul li .textoProjeto .titulo{ position: absolute; top: 70px; left: 20px; display: block; color: #ffffff; font: 600 25px 'Quicksand'; text-shadow: 0px 2px 2px rgb(0 0 0 / 27%); transition: all 0.5s ease; opacity: 0; visibility:hidden;}

    #projetos .itens ul li .tagsHoverPremio{ position: absolute; top: 20px; left: 20px; display: block; color: #ffffff; font:600 12px 'Quicksand'; letter-spacing: 0.050em; text-shadow: 0px 2px 2px rgb(0 0 0 / 27%); transition: all 0.5s ease; display: none;}
    #projetos .itens ul li .tituloHoverPremio{ position: absolute; top: 40px; left: 20px; display: block; color: #ffffff; font: 600 25px 'Quicksand'; text-shadow: 0px 2px 2px rgb(0 0 0 / 27%); transition: all 0.5s ease; display: none;}

    #projetos .itens ul li .premios{ position: absolute; bottom: 0px; left: 10px; width: max-content; opacity: 0; visibility: hidden; transition: all 0.5s ease; z-index: 10; max-width: 100%;}
    #projetos .itens ul li .premios .tituloPremio{ color: #ffffff; border-bottom: solid 1px #ffffff; padding-bottom: 1px; display: block; font: 600 13px 'Quicksand'; width: max-content; margin-left: 10px;} 
    #projetos .itens ul li .premios .itensPremios{width: max-content; clear: both; padding: 10px 0 10px 5px; overflow: hidden; float: left; max-width: 100%; }
    #projetos .itens ul li .premios .itensPremios div{ float: left; width: 20px; height: 20px; padding-right: 10px; background-repeat: no-repeat; background-position: center center; margin-bottom: 10px; }

    #projetos .itens ul li:hover .textoProjeto .tags{top: 20px; opacity: 1; visibility: visible;}
    #projetos .itens ul li:hover .textoProjeto .titulo{top: 40px; opacity: 1; visibility: visible;}
    #projetos .itens ul li:hover img{ filter: brightness(50%);}
    #projetos .itens ul li:hover .premios{opacity: 1; visibility: visible;}
    
    #projetos .itens ul li.hoverPremio .textoProjeto .tags{ display: none;}
    #projetos .itens ul li.hoverPremio .textoProjeto .titulo{ display: none;}
    
    #projetos .itens ul li.hoverPremio .tagsHoverPremio{ display: block;}
    #projetos .itens ul li.hoverPremio .tituloHoverPremio{ display: block;}

	#projetos .paginacao{ text-align:center; font-size:16px; padding:20px 0 42px 0;}  
	#projetos .paginacao div{display:inline-block; overflow:hidden;}
	#projetos .paginacao a{ color:#000; }
	#projetos .paginacao a:hover{ }
	#projetos .paginacao a.ativo{ font-weight:700;}
	
	#projetos .paginacao a.mais{ background:url(../img/next.gif) no-repeat; height: 27px; width: 28px; float:left;}
	#projetos .paginacao a.mais.prev{ background:url(../img/prev.gif) no-repeat;}
	
	#sobre{ background-color:#000; padding:6.3% 4.5% 0 4.5%;}
	#sobre .testa{ position:relative; margin-bottom:3%;}
	#sobre .testa img{ width:100%;}
	#sobre .testa .texto{ position:absolute; left:4%; top:20%; color:#fff; }
	#sobre .testa .texto h2{ font-size:14px; text-transform:uppercase; margin-bottom:2%;}
	#sobre .testa .texto p{ width:20%; text-transform:uppercase; font-size:0.9em; }
	
	#sobre .pessoas{}
	#sobre .pessoas .linha,#sobre .pessoas .linhaPar{ height:1px; background-color:#808080; clear:both;}
	#sobre .pessoas .linhaPar{ display:none; }
	
	#sobre .pessoas .pessoa{ float:left; width:30%; color:#fff; margin:4% 3% 4% 0;}
	#sobre .pessoas .pessoa .foto{ width:45%; height:100%; float:left; background-color:#c7c7c7; overflow:hidden;}
	#sobre .pessoas .pessoa .foto img{display:block; width:100%; }
	#sobre .pessoas .pessoa .foto .semfoto{width:222px; height:232px;}
	#sobre .pessoas .pessoa .txt{width:47%; margin-left:8%; float:right;}
	#sobre .pessoas .pessoa .txt h3{ font-size:14px; text-transform:uppercase; font-weight:700; margin-bottom:4%;}
	#sobre .pessoas .pessoa .txt p{font-size:11px; text-transform:uppercase;}
	
	
	
	#contato{ position:relative; overflow:hidden;}
	
	#contato .fundoBranco{padding: 7% 0 5% 0;height: max-content;overflow:hidden;background-color:#FFF;}
	#contato .fundoBranco .maps{ width:50%; float:left; }
	#contato .fundoBranco .alinhamento{ float:right;}
	#contato .fundoBranco .alinhamento address{ color:#000; font-weight:700; text-align:center; font-size:13px; line-height:17px; margin-top:4%;}
	#contato .fundoBranco .maps #map{ width:520px; height:370px; background-color:#c7c7c7; }
	
	#contato .fundoBranco .contatos{ width:50%; float:right;}
	#contato .fundoBranco .contatos ul{ margin-left:10%;}	
	#contato .fundoBranco .contatos ul li{ overflow:hidden; margin-bottom:4%;}
	#contato .fundoBranco .contatos ul li a{ color:#000; font-size:13px; font-weight:700; letter-spacing:1px; line-height:30px;}
	#contato .fundoBranco .contatos ul li a img{ float:left; margin-right:15px;}
	#contato .fundoBranco .contatos ul li a span{ float:left; border-bottom:solid 1px #000;}
	
	#contato .creditos{ color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;}
	#contato .creditos .copy{  float:left; margin:2.5% 0 0 4%; }
	#contato .creditos .ass{ float:right; margin:2.5% 4% 0 0;}
	#contato .creditos .ass a{ color:#fff;}
	
	#contato .creditos .homeBt{ margin:0 auto; color:#fff; font-weight:700; padding:2.5% 0 0 0;  text-transform:uppercase; font-size:12px; width:150px; }
	#contato .creditos .homeBt a{ color:#fff; padding-bottom:40px; background:url(../img/arrowup.gif) center bottom no-repeat;}
	
	#contato .bgcontato{ position:absolute; z-index:-1; width:100%; bottom:0%;}
	

@media only screen and (max-width: 1366px) {
	#contato .fundoBranco .maps #map{ height:300px;}
	
	#contato .fundoBranco .maps{ width:60%;  }
	#contato .fundoBranco .contatos{ width:40%; }
	
	#projetos .itens{ padding:0 2%;}
}

@media only screen and (max-width: 1100px) {
	#sobre .testa .texto p{width:40%; }	
	#sobre .pessoas .pessoa{width:45%;}
	
	#sobre .pessoas .linha.impar{display:none;}
	#sobre .pessoas .linhaPar{ display:block; }
	#sobre .pessoas .pessoa .txt p{ font-size:10px;}
	#sobre .testa .texto p{  font-size:11px;}
	
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	#sobre .testa .texto p{width:60%; font-size:12px;}
	#projetos .itens ul li{width:47%;}
	.dialog{ width:630px; height:360px;}
}

@media only screen and (max-width: 890px) {
	#projetos .itens{ padding:0 3% 0% 3%;}
	#contato .fundoBranco .maps{ width:50%;  }
	#contato .fundoBranco .contatos{ width:50%; }
	#contato .fundoBranco .maps #map{ height:275px; width:390px;}
}

@media only screen and (max-width: 750px) {
	#sobre .pessoas .linha,	#sobre .pessoas .linhaPar{ display:none; }
	#sobre .pessoas .pessoa{width:auto; float:none; overflow:hidden;}
	#sobre .testa .texto{ position:static; margin-top:4%; margin-bottom:5%; padding-bottom:15px; border-bottom:solid 1px #808080; }
	#sobre .testa .texto p{ width:auto;}
	#logoFloat{transform:scale(0.6); left:1%; top:1%;}
	#contato .bgcontato{ bottom:0%;}
	.dialog{ width:440px; height:240px;}
}

@media only screen and (max-width: 480px) {
	#projetos .itens{ padding:3%;}
	#projetos .itens ul li{width:auto; margin:0;}
	#logoFloat{display:none !important;}
	#logoHome{transform:scale(0.45);}
	#menu{right:15%;}
	#menu li{padding-left:20px;margin-bottom: 20px;}
	
	#contato{ height:auto !important; }
	#contato .bgcontato{ bottom:-5%;}
	#contato .fundoBranco{ height:auto;}
	#contato .fundoBranco .maps{ width:auto; float:none; }	
	#contato .fundoBranco .maps .alinhamento{ float:none;}
	#contato .fundoBranco .maps #map{height: 200px; margin: 0 auto; width: 360px;}
	#contato .fundoBranco .contatos{ width:auto; float:none; margin:40px 0;  }	
	
	#contato .creditos{ height:160px; text-align:center;}
	#contato .creditos .copy{ float:none; margin:10px 0;}
	#contato .creditos .ass{ float:none; margin:10px 0;}	
	
	.dialog{ width:270px; height:160px;}
}

@media only screen and (max-width: 420px) {
	#sobre .pessoas .pessoa .foto{ float:none; width:auto; }
	#sobre .pessoas .pessoa .txt{ float:none; width:auto; margin:5% 0 0 1%; }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}