header{
	height:3.5rem;
}
.bg-white-gray{
	background-color:#FFFAFA;
}

.container-responsivo{
	flex-wrap: nowrap;
} 
.grid-container {
	display: grid;
	height: 220px;
	grid-template-columns: repeat(2, 100px);
	grid-template-rows: repeat(2, 100px);
	gap: 10px;
}
.grid-item{
	aspect-ratio: 1 / 1;
}
.card-profile{
	background-color: #f5f5f5;
	border:solid 1px #c3c6ce;
	height: 350px;
}
.detail-topic{
	display: flex;
	flex-wrap: wrap;
	height: 55px;
	width:400px;
	border-bottom: solid 1px #c3c6ce;
	overflow: hidden;
	transition: height 1s ease-in-out;

}
.detail{
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}
.detail-topic:hover{
	height: 250px;
	flex-direction: column;
	opacity: 1;
}
.detail-topic:hover .detail{
	opacity: 1 !important; 
	transition: opacity 0.6s ease-in-out; 
}
.detail-topic h2{
	position:relative;
	top:1;
	display: inline;
	width: 100%;
	/*height: 10px;*/
	cursor:pointer;
	transition: flex-direction 0.6s ease-in;
}
#quemsou{
	height:350px;
}
.container-form{
	width: 600px;
	height:auto;
	background-color: #fffafa;
}
.card_comprimento{
	width: 250px;
}

@media only screen and (max-width: 700px){
	/*.detail-topic{
		margin-right: 70px;
	}*/
	#quemsou{
		height:550px;
	}
	#container-orcar{
		margin-top:25px;
	}
} 
@media only screen and (min-width:700px) and (max-width:900px){
	.flex-box-container{
		width: 400px !important;
		flex-direction:column;
		align-items:center;
		justify-content: center;
	}
	#container-grid{
		width: 500px;
	}
	.grid-container{]
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	.grid-tem{
		width:50px !important;
		height: 50px !important;
	}
	p{
		font-size: 15px;
	}
	h1{
		font-size: 30px;
	}
}