div{
	/* border: 1px solid red; */
	box-sizing: border-box;
}

.roboto{font-family: 'Roboto';}

.fs-15{font-size: max(0.7812vw, 12px);}
.fs-18{font-size: max(0.9375vw, 16px);}
.fs-20{font-size: max(1.04vw, 18px);}
.fs-25{font-size: max(1.30vw, 20px);}
.fs-30{font-size: max(1.56vw, 25px);}
.fs-35{font-size: max(1.82vw, 25px);}
.fs-40{font-size: max(2.08vw, 25px);}
.fs-45{font-size: max(2.34vw, 25px);}
.fs-50{font-size: max(2.60vw, 45px);}
.fs-55{font-size: max(2.86vw, 50px);}
.fs-60{font-size: max(3.13vw, 50px);}
.fs-65{font-size: max(3.39vw, 50px);}
.fs-70{font-size: max(3.65vw, 50px);}
.fs-75{font-size: max(3.91vw, 50px);}
.fs-80{font-size: max(4.17vw, 35px);}
.fs-85{font-size: max(4.43vw, 35px);}
.fs-90{font-size: max(4.69vw, 35px);}
.fs-95{font-size: max(4.95vw, 35px);}
.fs-100{font-size: max(5.21vw, 40px);}
.fs-105{font-size: max(5.47vw, 40px);}
.fs-110{font-size: max(5.73vw, 40px);}
.fs-115{font-size: max(5.99vw, 50px);}
.fs-120{font-size: max(6.25vw, 50px);}
.fs-125{font-size: max(6.51vw, 50px);}
.fs-130{font-size: max(6.77vw, 50px);}

.fw-100, .fw-thin {font-weight: 100;}
.fw-200, .fw-extra-light {font-weight: 200;}
.fw-300, .fw-light {font-weight: 300;}
.fw-400, .fw-regular {font-weight: 400;}
.fw-500, .fw-medium {font-weight: 500;}
.fw-600, .fw-semi-bold {font-weight: 600;}
.fw-700, .fw-bold, .bold {font-weight: 700;}
.fw-800, .fw-extra-bold {font-weight: 800;}
.fw-900, .fw-black {font-weight: 900;}

.block{display: block;}
.tac{text-align: center;}
.mt-0{margin-top: 0;}
.mb-0{margin-bottom: 0;}
.mb-60{margin-bottom: 60px;}
.ml-10{margin-left: 10px;}
.pr-20{padding-right: 20px;}
.sub{text-decoration: underline;}

html, body{margin: 0; padding: 0; background-color: black;}
*{font-family: 'Roboto';}


.show {
  opacity: 1;
  visibility: visible;
  margin: 10px 0;
}

.hidden {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.main-container{width: 80vw; margin: 0 auto;}

section{
	padding: 50px 0 100px;
	overflow: hidden;
	transition: opacity 0.8s ease-in-out, max-height 0.8s ease-in-out, padding 0.8s ease-in-out, margin 0.8s ease-in-out;
}

.bg-black{
	background-color: black;
}

.bg-black, .bg-black * {
	color: white;
}

ul{
	list-style: none;
	padding: 0;
}

a{
	text-decoration: none;
}


/* MENU */
	.menu {background-color: white;}

	menu{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
		margin: 0;
	}

	@media screen and (max-width: 770px) {
		menu{gap: 40px;}
		.menu div:nth-child(2){
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

	}

	@media screen and (max-width: 700px) {
		menu {
			flex-direction: column;
			gap: 15px 0;
		}
		.menu div:nth-child(2){flex-direction: row;}
	}

	.logo{
		background-image: url(./img/logo/logo_decorbook_preto.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 360px;
		height: 72px;
	}

	@media screen and (max-width: 400px) {
		.logo{
			width: 330px;
			height: 66px;
		}
	}

	.button{
		transition: all ease 0.3s;
		border: 1px solid white;
		border-radius: 5px;
		padding: 12px 24px;
		font-weight: 700;
		font-size: 18px;
		color: black;
		display: inline-block;
	}

	.button-black{
		display: inline-block;
		transition: all ease 0.3s;
		border: 1px solid black;
		background-color: black;
		border-radius: 5px;
		padding: 12px 24px;
		color: white;
		font-weight: 700;
		font-size: 18px;
	}

	.button:hover, .button-black:hover{
		background-color: rgba(127, 127, 127, 0.6);
		border-color: transparent;
		color: white;
		transform: scale(1.02);
	}

/* PERFIL */

	#perfil #perfil_escolha li{
		background-color: rgba(127, 127, 127, 0.6);
		padding: 20px;
		margin: 15px 0;
		transition: all ease 0.5s;
	}

	#perfil #perfil_escolha li *{
		transition: all ease 0.5s;
	}

	#perfil #perfil_escolha li:hover{
		background-color: white;
		transform: scale(1.05);
	}

	#perfil #perfil_escolha li:hover *{
		color: rgba(127, 127, 127, 1);
	}

	#perfil #perfil_escolha .perfil_titulo{
		margin: 0 0 10px 0;
		font-weight: 700;
	}

	#perfil #perfil_escolha .descricao p{
		font-weight: 400;
	}

	#perfil #perfil_escolha .descricao p{
		margin: 7px 0;
	}

	#perfil #perfil_escolha .descricao p:nth-child(1){
		margin-top: 0;
	}

/* ACOES */
	
	#acoes{
		position: relative;
	}

	#acoes .grid-container-one{
		display: grid;

		grid-template-columns: repeat(24, 1fr);
		grid-template-rows: repeat(1, 1fr);
	}
	
	#acoes ul{
		font-size: max(1.56vw, 25px);
		padding: 20px 0 20px 50px;

		grid-column: 1 / 18; grid-row: 1 / 2;

		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 30px;
	}

	#acoes ul li {
		box-sizing: border-box;
		position: relative;
		margin-bottom: 20px;
		width: 45%;
		max-width: 600px;
		min-width: 320px;
	}

	#acoes ul li .number{
		border-color: transparent;
		background-color: rgba(255,255,255,0.2);
		border-radius: 0;
		display: inline-block;

		position: absolute;
		left: -50px;

		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 30px;
	}

	#acoes .grid-container-one .bg-img{
		grid-column: 18 / 24; grid-row: 1 / 2;
		background-image: url(./img/b1.jpeg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen and (max-width: 700px) {
			#acoes ul{grid-column: 1 / 24; grid-row: 1 / 2;}
			#acoes .grid-container-one .bg-img{display: none};
	}

/* ORIENTACAO */

	#orientacao .instrucao1{
		border: 1px solid white;
		width: 292px;
		height: 631px;
		background-image: url(./img/instrucoes/home_menu_esquerdo.PNG);
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#orientacao .div-flex-one{
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	#orientacao .div-flex-one ul{
		margin-top: 0;
	}

	#orientacao .div-flex-one ul li{
		margin: 0 0 10px 0;
	}

	#orientacao .div-flex-two{
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	#orientacao .instrucao2{
		border: 1px solid white;
		width: 309px;
		height: 319px;
		background-image: url(./img/instrucoes/home_menu_direito.jpeg);
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#orientacao .div-flex-two ul{
		width: 309px;
	}

	#orientacao .div-flex-two ul li {
		box-sizing: border-box;
		position: relative;
		margin-bottom: 20px;
		width: 45%;
		max-width: 600px;
		min-width: 320px;
	}


	#orientacao .div-flex-two ul li .number{
		border-color: transparent;
		background-color: rgba(255,255,255,0.2);
		border-radius: 0;
		display: inline-block;

		position: absolute;
		left: -50px;

		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 30px;
	}

	#orientacao .instrucao3{
		border: 1px solid white;
		width: 309px;
		height: 319px;
		background-image: url(./img/instrucoes/perfil_menu_esquerdo.PNG);
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen and (max-width: 750px) {
		#orientacao .instrucao1{
			display: none;
		}
	}

/* DADOS */

	#dados	.main-container{
		text-align: center;
	}

	#dados	.main-container > span:nth-child(2){
		margin-bottom: 20px;
	}

	#dados	form{
		margin-top: 30px;
		display: flex;
		flex-direction: column;
		gap: 15px;
		max-width: 500px;
		margin: 0 auto;
	}

	#dados	form input{
		padding: 12px;
		background: rgba(226, 226, 226, 0.8);
		border: 1px solid rgba(127, 127, 127, 1);
		border-radius: 5px;
		font-size: 18px;
		color: white;
	}

	#dados	form input:focus{
		background: rgba(255, 255, 255, 1);
		color: black;
	}

	#dados	form input[type=submit]{
		background: rgba(127, 127, 127, 1);
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-weight: bold;
		transition: all ease 0.5s;
	}

	#dados	form input[type=submit]:hover{
		background: rgb(56, 56, 56);
		transform: scale(1.05);
	}



			.botoes-navegacao {
				position: fixed;
				left: 0;
				width: 100%;
				z-index: 100;
				display: flex;
				justify-content: space-between;
				background: white;
				padding: 10px 20px;

				bottom: 0%;
			}

			.botao-voltar,
			.botao-acancar {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background-color: #333;
				color: white;
				border: none;
				padding: 10px 18px;
				border-radius: 6px;
				cursor: pointer;
				transition: background-color 0.3s;
			}

			.botao-voltar:hover,
			.botao-acancar:hover {
				background-color: black;
			}

			.botao-voltar .icone,
			.botao-acancar .icone {
				stroke: white;
			}