@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;900&display=swap');

*{
	margin:0;
	padding:0;
	font-family: 'Poppins', sans-serif;
	list-style:none;
	box-sizing: border-box;
	text-decoration:none;
	scroll-behavior: smooth;
}

:root {
    --green: #46ceac;
    --greeb_h: #35ba9b;
    --greeb_l: #61ddbc;
    --blue: #4fc0e8;
    --blue_h: #3aadd9;
    --blue_l: #66d4f1;
    --yellow: #fdcd56;
    --yellow_h: #f5b945;
    --yellow_l: #fbd277;
    --red: #eb5463;
    --red_h: #d94452;
    --red_l: #f76c82;
    --black: #000;
    --black_h: #333;
    --black_l: #666;
	--gradient-blue: linear-gradient(to right, #17EAD9 0%, #6078EA 50%, #17EAD9 100%);
	--body: #f7f7f7;
	--rosa:#e91e63;
}

body{
	background:#f8f8f8;
}

header{
	position:fixed;
	max-width:100%;
	width:100%;
	top:0;
	left:0;
	width:100%;
	padding:12px 100px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:#fff;
	border-bottom:1px solid rgba(0,0,0,0.05);
	z-index:1000;
	transition:0.5s;
}

header .logo{
	position:relative;
	display:inline-block;
}

header .logo img{
	object-fit: cover;
	width:80px;
}

 .titulo{
	color:#069;
	font-size:1.4rem;
	text-align:center;
}

.menuToggle{
	position:relative;
	width:30px;
	height: 30px;
	background-image:url(../imagens/chale-brumadinho/open.png);
	background-size:30px;
	background-repeat:no-repeat;
	background-position: center;
	cursor:pointer;
}

.menuToggle.active{
	background-image:url(../imagens/chale-brumadinho/close.png);
	background-size:25px;
	background-repeat:no-repeat;
	background-position: center;
	cursor:pointer;
}

.navigation{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	height:100%;
	justify-content:center;
	align-items: center;
	flex-direction:column;
	background:#fff;
	z-index:999;
	transition:0.25s;
	opacity:0;
	visibility: hidden;
}

.navigation.active{
	opacity: 1;
	visibility: visible;
}

.navigation li{
	list-style:none;
	margin:10px 0;
}

.navigation li a{
	color:#333;
	font-size:1.3em;
	letter-spacing: 4px;
	display:inline-block;
	font-weight: 400;
	text-transform: uppercase
}

.navigation li a:hover{
	text-decoration:underline;
}

@media(max-width:600px){
	header{
		padding:12px 50px;
	}
	header .logo{
		display:none;
	}

	header .titulo{
		font-size:1rem;
	}

}

/* SLIDER */
.emp_slider{
	display:flex;
	flex-basis:100%;
	width:100%;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction: row;
	margin-bottom:20px;
}

.emp_slider_master{
	max-width:100%;
	width:100%;
	object-fit: cover;
	outline:none;
	box-sizing:border-box;
	display:flex;
	flex-basis:100%;
	align-items:center;
}

.carousel{
  background:#fff;
}

.carousel img{
  width:100%;	
  object-fit:cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  height:600px;
  min-height:600px;	
}

.flickity-prev-next-button {
  width: 30px !important;
  height: 30px !important;
  border-radius: 5px !important;
}

.flickity-page-dots {
  bottom: 10px !important;
}
/* white circles */
.flickity-page-dots .dot {
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 2px solid !important;
  color:#ccc;
	
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: #ccc !important;
}

@media(max-width:768px){
  .carousel img {
	width:100%; 
	max-height:300px !important;  
    height: 300px !important;
	object-fit: cover;  
  }
}

@media(max-width:450px){
  .carousel img {
	width:100%; 
	max-height:300px !important;  
    height: 300px !important;
	object-fit: fill;  
  }
}

/*** ABOUT  ***/
.about{
	display:flex;
	max-width:100%;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	padding:50px 50px 0px 50px;
}

.studio_info{
	display:flex;
	flex-basis:45%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

.info_{
	width:90%;
	background: #fff;
	padding:30px;
}

.info_ h1{
	flex-basis:100%;
	font-size:2.2em;
	color:#069;
	text-align:center;
	margin-bottom:10px;
}

.info_ .subtitulo{
	flex-basis:100%;
	font-size:1.4em;
	color:#2196f3;
	text-align:center;
	margin-bottom:10px;
}

.info_ p{
	line-height: 24px;
	color:#666;
 }

.face_man{
	display:flex;
	flex-wrap:wrap;
	flex-basis:45%;
	align-items:center;
}

.face_man img{
	width:100%;
	object-fit: cover;
}

@media(max-width:1030px){
	.about{
	justify-content:center;
	padding:50px 50px 0px 50px;
}
	
	.studio_info{
	display:flex;
	flex-basis:100% !important;
	width:100%;	
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
}
	
.info_{
	max-width:90%;
	width:90% ;
	background: #fff;
	padding:30px;
	margin-bottom:20px;
}
	
.info_ h1{
	flex-basis:100%;
	font-size:1.6em;
}	
	
	.face_man{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;	
	align-items:flex-end;	
	flex-basis:100%;		
}
	
	.face_man img{
		max-width:85%;
		width:85%;
	}
}

@media(max-width:991px){
	.face_man img{
	width:90%;
	object-fit: cover;
}
}
	
	@media(max-width:600px){
	.info_{
	max-width:100%;
	width:100% !important;
	background: #fff;
	padding:30px 20px;
	margin-bottom:20px;
}		
		
	.info_ .subtitulo{
	font-size:1.1em;
}	
		
	.info_ p{
	line-height: 30px;
	color:#666;
	font-size:0.9em;	
	}
		
	.face_man{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	flex-basis:100%;
	align-items:center;
}

.face_man img{
	max-width:80%;
	width:80%;
	margin:0 auto;
}
}	
	
/**  VILLE VÍDEO  ***/
.ville_video{
	display:flex;
	flex-wrap:wrap;
	flex-basis:100%;
	justify-content:center;
	align-items:center;
	background:#fff;
	padding:50px;
}

.video{
	display:flex;
	flex-basis:100%;
	justify-content:center;
	align-items:center;
}


@media(max-width:991px){
	.ville_video{
	padding:50px;	
	}
	
	.video iframe{
	width:100%;	
	max-height:400px;	
}
}

@media(max-width:600px){
	.ville_video{	
	padding:50px 25px;
	margin-bottom:50px;		
	}
	
	.video iframe{
	max-height:400px;
	height:350px;	
}
}

/*** TABELA ****/
.tabela{
	display:flex;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	padding:70px 50px;
}

.tabela h1{
	flex-basis:100%;
	font-size:2em;
	color:#069;
	text-align:center;
	margin-bottom:30px;
}

.tabela p{
	flex-basis:100%;
	font-size:1.1em;
	line-height: 28px;
	color:#666;
	text-align:center;
	margin-bottom:30px;
}

.tabela button{
	padding:20px 12px;
	background:#069;
	border:0;
	border-radius:4px;
	min-width:300px;
	cursor:pointer;
	margin-bottom:30px;
}

.tabela button:hover{
	background:#2196f3;;
}

.tabela button a {
	color:#fff;
	font-size:1em;
}

@media(max-width:800px){
	.tabela{
	padding:30px 50px;
}
	
	.tabela h1{
	flex-basis:100%;
	font-size:1.6em;
	color:#4D5E3E;
	text-align:center;
	margin-bottom:30px;
}	
}

/******  PROJETO    ***/
.projeto{
	display:flex;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	padding:50px;
	background: #069;
}

.projeto h1{
	flex-basis:100%;
	font-size:2em;
	text-align:center;
	margin-bottom:30px;
	color:#fff;
}

.projeto_info{
	display:flex;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

.projeto_info p{
	flex-basis:100%;
	font-size:1em;
	line-height: 28px;
	color:#fff;
	text-align:left;
	margin-bottom:20px;
}

.projeto_info span{
	font-weight: bold;
	font-size:1.4em;
}

@media(max-width:800px){
	
	.projeto{
	display:flex;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	background:#069;
}
	
	.projeto h1{
	font-size:1.6em;
}
	
	.projeto_info p{
		font-size:0.9em;
	}
}

/**************  GALERIA DE FOTOS  ************/
.galeria{
	padding:20px;
	display:flex;
	flex-basis:100%;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	margin:40px auto;
}

.galeria h1{
	flex-basis:100%;
	font-size:2.2em;
	color:#069;
	text-align:center;
	margin-bottom:10px;
}

.galeria ul{
	display:flex;
	flex-basis:100%;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:40px;
}

.galeria .opcoes{
	display:flex;
	flex-basis:100%;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
}

.galeria ul li{
	display:flex;
	list-style:none;
	background:#eee;
	padding:12px 20px;
	margin:5px;
	cursor:pointer;
}

.galeria ul li.active{
	background:#069;
	color:#fff;
}

.product{
	display:flex;
	flex-basis:100%;
	overflow: hidden;
	justify-content:center;
	align-items:center;
	flex-wrap: wrap;
}

.product .itemBox{
	position:relative;
	width:300px;
	height:300px;
	margin:5px;
	display:block;
}

.product .itemBox.hide{
	display:none;
}

.product .itemBox img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border:3px solid #fff;
}

@media(max-width:700px){
	.galeria h1{
	flex-basis:100%;
	font-size:1.6em;
}
}

/*******  Contato   ***********/
.contato{
	display:flex;
	flex-wrap:wrap;
	flex-basis:100%;
	justify-content:flex-start;
	align-items:center;
	padding:70px 50px;
	background:#069;
}

.contato_item{
	display:flex;
	flex-basis:45%;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
}

.contato_item h1{
	flex-basis:100%;
	font-size:1.2em;
	color:#FFF;
	font-weight: bold;
	margin-bottom: 10px;
}

.contato_item p{
	flex-basis:94%;
	color:#FFF;
	margin-bottom:20px;
	font-size:0.98em;
}

.contato_form{
	width:100%;
	padding:60px 40px;
	background:#fff;
}

.contato_form h2{
	font-size:30px;
	color:#333;
	font-weight:500;
	font-size:1.2em;
}

.contato_form .inputBox{
	position:relative;
	width:100%;
	margin-top:10px;
}

.inputBox input, .inputBox textarea{
	width:100%;
	padding:5px 0;
	border:none;
	resize: none;
	outline: none;
	border-bottom:1px solid #069;
	font-size:0.85em;
	margin-bottom:10px;
}

.inputBox span{
	position:absolute;
	left:0;
	padding:5px 0;
	font-size:16px;
	margin:2px 0;
	pointer-events: none;
	transition:0.5s;
	color:#666;
}

.inputBox input:focus ~ span,
.inputBox input:valid ~ span,
.inputBox textarea:focus ~ span,
.inputBox textarea:valid ~ span
{
	color:#e91e63;
	font-size:12px;
	transform:translateY(-20px);
}

.inputBox input[type="submit"]{
	width:140px;
	color:#fff;
	border:none;
	padding:8px;
	font-size:1em;
	background:#069;
	margin-top:10px;
	cursor:pointer;
}
 
.inputBox input[type="submit"]:hover{
	background:#2196f3;
}

/************ RESPONSIVO   ***************/
@media(max-width:991px){
	.contato_item{
	display:flex;
	flex-basis:90%;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
	margin-bottom:50px;
	}
	
	.contato_opacity{
		padding:50px;
	}
	
	.contato_container{
		flex-direction:column;
	}
	
	.contato_info{
		width:100%;
		margin-bottom: 40px;
	}
	
	.contato_form{
		width:90%;
	}
}

@media(max-width:600px){
	.carousel img{
		max-width:500px;
		height:400px;
		width:100%;
		object-fit: cover;
	}

	.product .itemBox{
		position:relative;
		width:320px !important;
		height:300px;
		margin:5px;
		display:block;
	}

	.product .itemBox img{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		object-fit: cover;
		border:3px solid #fff;
	}

	.contato{
	display:flex;
	flex-wrap:wrap;
	flex-basis:100%;
	justify-content:flex-start;
	align-items:center;
	padding:40px 20px;
}
	
	.contato_form{
		width:100%;
	}
}

/******* RODAPÉ  *******/
.rodape{
	display:flex;
	flex-basis:100%;
	justify-content:center;
	align-items:center;
	background:#f7f7f7;
	padding:20px;
}

.rodape span{
	font-size:0.6em;
	color:#000;
}

.rodape p{
	margin-left:5px;
	color:#000;
	text-align:center;
	font-size:0.7em;
}

/*************   ALERTAS      ******************/
.green{
	background: #46ceac !important;
}

.info{
	background: #2196f3 !important;
}


.alert_box{
	width:320px;
	max-width:90%;
	padding-top:15px;
	padding-right:15px;
	z-index:100;
	display:flex;
	align-items:center;
	justify-content:center;
}

#alert{
	background:blue;
	padding:14px;
	border-radius: 4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	cursor:pointer;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin-right:5px;
	margin-top:5px;
	overflow:hidden;
	border-left:3px solid rgba(0,0,0,0.5);
	opacity:90%;
}

#alert i{
	color:#fff;
	margin-right:10px;
}

#alert p{
	color:#fff;
	font-size:0.8em;	
}

.alert_timer{
}

.mostra_alerta{
	margin-bottom:20px;
	display:flex;
	flex-wrap:wrap;
	flex-basis:100%;
}