body{
	background: #000;
	color: #FFF;
	background-image: url('../img/fundo-home.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}
	body.page-galery{background-image: none;}

.content-general{
	display: block;
	position: relative;
	width: 100vw;
	height: 100vh;
}


.menu{
	position: relative;
	width: 100%;
	z-index: 50;
}

	.menu-left{
		display: block;
		width: 17vw;
		height: 100vh;	
		background: #3C1541;
		position: absolute;
		left:45px;
		top: 0;
		padding-top: 75px;

		-webkit-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		   -moz-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			-ms-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			 -o-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
				transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);	
	}
	.menu-top{
		background: #3C1541;
		padding: 20px 45px;
		position: absolute;
		width: 100%;
		left: 0;
		top:-90px;

		-webkit-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		   -moz-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			-ms-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			 -o-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
				transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);			
	}
		.menu-top .title{
			font-size: 16px;
			color: #FFF;
			margin: 0;
			padding: 0;
			display: inline-block;
		}
			.menu-top .title .fe{
				color: #E5BEE9;
				display: inline-block;
				padding-right: 10px;
			}

		.menu-top ul{
			margin: 0;
			padding: 0;
			list-style: none;
			float: right;			
		}
			.menu-top ul li{display: inline-block;}
			.menu-top ul a,
			.menu-top ul a:hover{
				display: block;
				width: 35px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				cursor: pointer;
				font-size: 16px;
				position: relative;
			}
			.menu-top ul li.change-grid, 
			.menu-top ul li.change-line{display: none;}

			.menu-top ul li.active a::before{
				content: '';
				display: block;
				position: absolute;
				left: 5%;
				bottom: 0;
				width: 90%;
				height: 2px;
				background: #E5BEE9;
			}

			.navegation,
			.navegation:hover{
				display: block;
				cursor: pointer;
				position: absolute;
				right: 10px;
				top: 10px;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 25px;
				color: #E5BEE9 !important;
				cursor: pointer;
				text-decoration: none;
			}

			#menu{
				margin: 0;
				padding: 20px;
			}
				#menu li{
					display: block;
					border-bottom: 1px solid #4F2C54;
				}
				#menu a{
					display: block;
					padding: 10px;
					font-size: 16px;
					position: relative;
					color: #FFF;
					text-decoration: none;
					overflow: hidden;
					cursor: pointer;

					-webkit-transition: all 0.2s ease-in-out;
					   -moz-transition: all 0.2s ease-in-out;
						-ms-transition: all 0.2s ease-in-out;
						 -o-transition: all 0.2s ease-in-out;
							transition: all 0.2s ease-in-out;
				}
					#menu a::before{
						content: "\e912";
						font-family: 'Feather' !important;
						color: #E5BEE9;
						font-size: 25px;
						display: block;
						position: absolute;
						left: -35px;
						top: 9px;
						width: 30px;
						height: 30px;
						line-height: 30px;

						-webkit-transition: all 0.2s ease-in-out;
						   -moz-transition: all 0.2s ease-in-out;
							-ms-transition: all 0.2s ease-in-out;
							 -o-transition: all 0.2s ease-in-out;
								transition: all 0.2s ease-in-out;
					}
				#menu a:hover,
				#menu a.active{
					text-decoration: none;
					padding-left: 35px;
				}
					#menu a:hover::before,
					#menu a.active::before{left: 0;}


	body.menu-close .menu-left{left: -350px;}
	body.menu-close .menu-top{top: 0;}


.logo-home,.logo-home:hover{
	background: #000;
	display: block;
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 150px;
	-webkit-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
	   -moz-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		-ms-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		 -o-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);	
}

/*conteudo do site*/
.content-site{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 73vw;

	-webkit-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
	   -moz-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		-ms-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
		 -o-transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
			transition: all 0.9s cubic-bezier(0.12, 1.01, 0.68, 1);
}
	.menu-close .content-site{
		width: 100vw;
		padding-left: 45px;
		padding-right: 45px;
	}

#home{
	padding-top: 100px;
}
#galery{padding-top: 60px;}
#about{
	height: 40vw;
	padding-bottom: 20px;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 30px 20px 0 0;
}
	#about::-webkit-scrollbar {
		width: 10px;
	}
	#about::-webkit-scrollbar-track {
	  background: #f1f1f1; 
	}
	#about::-webkit-scrollbar-thumb {
	  background: #888; 
	}
	#about::-webkit-scrollbar-thumb:hover {
	  background: #555; 
	}

	#about .img-about{
		float: right;
		margin: 0 60px 0 0
	}

	#about h1{
		font-size: 25px;
		margin: 0 0 30px 0;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		display: inline-block;
		min-width: 350px;

	}
	#about p{margin: 20px 0 30px 0; }

	#about .separador{margin-bottom: 20px;}

	#about a,
	#about a:hover{color: #FFF;}

	#about .choice-idioma{
		display: block;
		margin:0 0 20px 0;
		padding: 0;
		list-style: none;
	}
		#about .choice-idioma li{
			display: inline-block;
			margin-right: 10px;
			cursor: pointer;
		}
		#about .choice-idioma li img{
			filter: gray;
			-webkit-filter: grayscale(1);
			filter: grayscale(1);

			-webkit-transition: all 0.2s ease-in-out;
			   -moz-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
				 -o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;			
		}
		#about .choice-idioma li:hover img,
		#about .choice-idioma li.active img{
			-webkit-filter: grayscale(0);
			filter: none;			
		}

	@media (min-width: 1200px){
		#about .col-xl-2{
			-ms-flex: 0 0 10.666667%;
			flex: 0 0 10.666667%;
			max-width: 10.666667%;
		}
	}


/*SLIDE GENERAL*/
.slide{
	position: relative;
	vertical-align: top;
}
	.itens-slide{
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-y: hidden;
		overflow-x: hidden;
		white-space: nowrap;
		
		transition: all 0.2s;
		transform: scale(0.99);
				
	}
		.itens-slide.active{transform: scale(1);}
			.itens-slide.active,
			.itens-slide.active a{
				cursor: -webkit-grabbing;
				cursor: grabbing;				
			}

		.itens-slide li{
			vertical-align: top;
			display: inline-block;
		}
		.itens-slide a,
		.itens-slide a:hover{
			display: block;
			padding: 10px;
		}
		.itens-slide img{
			display: block;
			/*border: 5px solid #3D3D3D;*/
		}

	/*HOME GALERY*/
	#home .itens-slide a{
		/*border: 8px solid #FFF;
		box-shadow: 2px 3px 2px rgba(0,0,0,0.2);*/
		padding: 0;
		margin: 8px;
	}
	#home .itens-slide img{
		/*border: 20px outset #424242;*/
		height: 340px;
	}

	.slide .control{
		display: block;
		width: 65px;
		height: 65px;
		text-align: center;
		line-height: 65px;
		color: #FFF;
		font-size: 40px;
		font-weight: 300;
		text-decoration: none;
		position: absolute;
		bottom: -70px;
		cursor: pointer;
	}
		.slide .ctr-left{right: 85px;}
		.slide .ctr-right{right: 15px;}


/*PAGE GALERY*/
.page-galery{}
	.page-galery .itens-slide img{height: 60vh;}
	.page-galery .itens-slide a,
	.page-galery .itens-slide a:hover{
		color: #FFF;
		text-decoration: none;
	}
	.page-galery .itens-slide span{
		display: block;
		padding: 10px 0;
		font-size: 13px;
		white-space: initial;
		max-width: 350px;
	}
		.page-galery .itens-grid span{max-width: 200px;}
	.page-galery .slide .control{bottom: -90px}
	.page-galery .slide .ctr-right{right: 200px;}
	.page-galery .slide .ctr-left{right: 260px;}

	.page-galery .menu-top ul li.change-grid, 
	.page-galery .menu-top ul li.change-line{display: inline-block;}


	/*GRID*/
	.itens-grid{}
		.itens-grid .itens-slide img,
		.page-galery .itens-grid .itens-slide img{height: 210px;}