#everything {
	
}

#popup { z-index: 60;}

#abrir_menu { z-index: 50;}
#menu_mobile { z-index: 51;}
#header { z-index: 50;}

#middle { z-index: 40;}
#footer { z-index: 20;}

/*------------------------------------*/

#header {
	position: fixed;
	left: 0px;
	top: 0px;

	width: 100vw;

	font-size: 0px;
	line-height: 0px;

	text-align: right;

	background-color: #a5a2a2;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);

	transition-property: background;
	transition-duration: 0.5s;
}

	#logo {
		opacity: 1;
		width: 253px;
		max-width: 100%;
		height: auto;
		float: left;
		margin-left: 10px;
		
		transition-property: opacity;
		transition-duration: 0.5s;
	}

	/*--------------*/

	#menu {
		width: auto;
		margin: 0px;
		padding-left: 20px;
		padding-right: 35px;
	}
		
		#menu li {
			display: inline-block;
			vertical-align: top;
			width: auto;
			margin: auto;
		}

			#menu li a {
				display: block;
	
				padding: 5px;
				padding-top: 35px;
				padding-bottom: 34px;
								
				color: #3a393c;
				font-size: 16px;
				line-height: 1em;

				font-family: 'Oswald';
				font-weight: 300;
			}

			#menu li a:hover {
				color: #000;
			}

			#menu .rede-social, 
			#menu .rede-social a {
				width: 40px;
				background-position: center center;
				background-size: 20px;
			}

			#menu .rede-social.facebook { background-image: url(../images/facebook-preto.png);}
			#menu .rede-social.twitter { background-image: url(../images/twitter-preto.png);}
			#menu .rede-social.instagram { background-image: url(../images/instagram-preto.png);}
			#menu .rede-social.pinterest { background-image: url(../images/pinterest-preto.png);}
			#menu .rede-social.youtube { background-image: url(../images/youtube-preto.png);}

	/*--------------*/

	#abrir_menu {
		display: none;
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		padding: 10px;
		font-size: 20px;
		line-height: 1em;
		color: #fff;
		font-weight: 900;
		text-align: center;
		background-color: #363233;
	}

	#abrir_menu:before {
		display: inline-block;
		vertical-align: top;
		width: 31px;
		height: 20px;
		margin-right: 15px;

		content: '';

		background-image: url(../images/menu-mobile.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
	}

	#abrir_menu.fixo {
		position: fixed;
		top: 0px;
		bottom: auto;
		box-shadow: 0px 2px 19px rgba(0, 0, 0, 0.25);
	}

/*------------------------------------*/

.home #header.topo {
	background-color: rgba(0, 0, 0, 0.3);
}

	.home #header.topo #logo {
		opacity: 0;
	}

	.home #header.topo #menu li a {
		color: #fff;
	}


	.home #menu .rede-social a {
		opacity: 0;
		transition-property: opacity;
		transition-duration: 0.5s;
	}

	.home #header.topo #menu .rede-social a {
		opacity: 1;
	}

	.home #menu .rede-social.facebook a { background-image: url(../images/facebook-branco.png);}
	.home #menu .rede-social.twitter a { background-image: url(../images/twitter-branco.png);}
	.home #menu .rede-social.instagram a { background-image: url(../images/instagram-branco.png);}
	.home #menu .rede-social.pinterest a { background-image: url(../images/pinterest-branco.png);}
	.home #menu .rede-social.youtube a { background-image: url(../images/youtube-branco.png);}

/*------------------------------------*/

#menu_mobile {
	display: none;
	position: fixed;
	right: 0px;
	top: 0px;

	width: 0px;
	height: 100vh;
	overflow: hidden;
	text-align: left;

	transition-property: width;
	transition-duration: 0.5s;
}

#menu_mobile.aberto {
	width: 200px;
}
	#menu_mobile .conteudo {
		width: 200px;
		height: 100vh;
	}

	#menu_mobile a {
		display: block;
		padding: 10px 10px 10px 15px;
		color: #bbb;
		font-size: 14px;
		line-height: 1em;
	}

	#menu_mobile .fechar {
		border-left: solid 1px #363233;
		text-align: center;
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		background-color: #5f5b5c;
	}
	#menu_mobile .fechar:before {
		display: inline-block;
		vertical-align: top;
		width: 14px;
		height: 14px;		
		margin-right: 7px;
		margin-top: 3px;

		content: '';

		background-image: url(../images/menu-fechar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center center;
	}

	#menu_mobile ul {
		list-style: none;
		
		margin: 0px;
		
		width: 100%;
		height: calc(100% - 34px);
		border-left: solid 1px #363233;
	
		overflow-x: hidden;
		overflow-y: auto;

		background-color: #fff;
	}
		#menu_mobile li {
			border-bottom: solid 1px #e2e2e2;
			margin: 0px;
		}
		#menu_mobile li:last-child {
			border-bottom: none;
		}

		#menu_mobile a {
			font-family: 'Roboto';
			font-weight: 300;
			color: #022a40;
		}

		#menu_mobile li ul {
			border: none;
		}
		
		#menu_mobile li ul li {
			border-bottom: none;
		}

			#menu_mobile li ul a {
				padding-left: 25px;
			}
		
			#menu_mobile li ul a:before {
				content: '- ';
			}

/*------------------------------------*/

#middle {
	width: 100vw;
	min-height: calc(100vh - 85px);
}

/*------------------------------------*/

#footer {
	width: 100vw;
	background-color: #c7c7c7;
}

	#footer address {
		z-index: 4;
		font-size: 0px;
		line-height: 0px;
		text-align: right;
	}

		#footer address > * {
			width: auto;

			font-size: 14px;
			line-height: 1.3em;
			color: #323232;
		}

		/*-----------------------------*/

		#footer .creditos {
			float: left;
			padding-top: 20px;
			font-size: 12px;
			line-height: 1.3em;
			text-align: left;
		}

		#footer .contato {
			padding-left: 20px;
			padding-top: 20px;
		}	

			#footer .telefone, 
			#formulario_de_contato .telefone {
				width: auto;
				font-family: 'Oswald';
				font-weight: 300;
				font-size: 20px;
				line-height: 1em;
			}			
				
				#footer .telefone img, 
				#formulario_de_contato .telefone img {
					width: 20px;
					margin-right: 5px;
					margin-top: 1px;
				}

		/*-----------------------------*/

		#footer .links-sociais {
			width: auto;
		}

/*------------------------------------*/

#slider {
    padding: 0px;
}

	#slider_content {
		height: 100%;
	}

		#slider .slide {
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;

			width: 100%;
			height: 100%;
			text-align: center;
		}

			#slider .slide .photo {
				width: 100%;
				height: 100%;
			}

				#slider .slide .photo img {
					width: auto;
					min-width: 100%;
					height: 100%;
				}

			#slider .slide .texto {
				position: absolute;
				top: 0px;
				left: 0px;

				width: 100%;
				height: 100%;
				padding-top: 170px;
				text-align: center;
			}

				#slider .slide .texto .conteudo {
					width: auto;
					padding: 20px;
					border-radius: 50px;
					color: #fff;
					font-size: 20px;
					line-height: 1em;
					font-family: 'gotham-rnd-medium';
					background-color: rgba(0, 0, 0, 0.5);
				}

					#slider .slide .texto .conteudo .titulo {
						font-size: 40px;
						line-height: 1.3em;
						font-family: 'gotham-rnd-bold';
					}


	#titulo {
		z-index: 250;
		width: 680px;
		height: 98px;
	}

		#titulo img {
			width: 100%;
		}

/*------------------------------------*/

	#slider .botoes {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 200;

		width: 100%;
		height: 100%;

		line-height: 0px;
		text-align: center;
	}

		#slider .chevron1, 
		#slider .chevron2 {
			cursor: pointer;
			position: absolute;
			top: 0px;
			bottom: 0px;
			width: 46px;
			height: 50px;
			margin: auto;
		}

		#slider .chevron1 {
			left: 20px;
			background-image: url(../images/chevron-slide1.png);
		}

		#slider .chevron2 {
			right: 20px;
			background-image: url(../images/chevron-slide2.png);
		}

/*------------------------------------*/

#institucional {

}

/*------------------------------------*/

#projetos, 
#projeto {

}

/*------------------------------------*/

#portfolio { }

	#portfolio .barra-rolante {
		margin-bottom: 20px;
	}

	#portfolio .photo {
		height: auto;
	}

	#portfolio .conteudo {
		text-align: center;
		font-family: 'garamond';
	}

	#portfolio .conteudo *[style*="font-size"] {
		line-height: 1.3em;
	}

	#portfolio blockquote {
		padding: 0px;
		border: none;
		background-color: transparent;
		font-style: italic;
	}

/*------------------------------------*/

#formulario_de_contato { }

	#formulario_de_contato form {
		width: 350px;

		font-size: 14px;
		line-height: 1.3em;
	}

	#formulario_de_contato .frase {
		width: 400px;

		font-size: 28px;
		line-height: 1.3em;
		text-align: justify;

		font-family: 'garamond';

		font-weight: bold;
		font-style: italic;
	}

	/*----------------*/

	#formulario_de_contato .informacoes {
		width: 170px;
		padding-top: 30px;
		text-align: right;

		font-size: 14px;
		line-height: 1.3em
	}

		#formulario_de_contato .titulo {
			margin-bottom: 5px;

			font-size: 16px;
			line-height: 1.3em;
			color: #000;
			text-transform: uppercase;
		}

		#formulario_de_contato .telefones {
			margin-bottom: 20px;
		}

			#formulario_de_contato .telefone img {
				margin-left: 0px;
				margin-right: 5px;
			}

		#formulario_de_contato .emails {
			margin-bottom: 20px;
		}

		#formulario_de_contato .links-sociais img {
			opacity: 0.5;
			width: 20px;
			margin-left: 10px;
		}

/*-------*/



/*------------------------------------*/

#login { }

	#login form {
		width: 400px;
		max-width: calc(100% - 40px);
		height: 155px;
	}

		#login form input {
			min-width: 0px;
			width: 100%;
		}

		#login form a {
			display: block;
			text-align: center;
			text-decoration: underline;
			font-style: italic;
		}

/*------------------------------------*/

#recuperar_senha, 
#resetar_senha {
	
}

/*------------------------------------*/

#menu_cliente {
	text-align: right;
}
	#menu_cliente a {
		text-decoration: underline;
	}

/*------------------------------------*/

#institucional {
	font-family: 'garamond';
	font-size: 28px;
	line-height: 1.5em;
}

	#institucional h1, 
	#institucional h2, 
	#institucional h3 {
		font-family: 'garamond';
	}

	#institucional p, 
	#institucional span {
		font-size: inherit;
	}

	#institucional .max-width {
		text-align: right;
	}

		#institucional .texto {
			text-align: left;
		}

		#institucional.com-foto .texto {
			width: calc(100% - 470px);
			margin-right: 20px;
		}

		#institucional .foto {
			width: 450px;
			height: auto;
		}
			#institucional .foto img {
				width: 100%;
			}