@charset "utf-8";

/*<div class="offer"><!--This is the <div> holding the "offer" class-->
						<div class="info"><!--This contains the small descriptive of the job-->
							<h3>Name of the offer</h3>
							<p>Location - Remote - Full-time</p>
						</div>
						<a href="#" title="To the LinkedIn page" class="CTA-light">APPLY</a><!--Find the href="#" and paste the link to the job offer inside the ""-->
					</div>*/

/*<h3>No job offers for this sector</h3><!--This is the line to copy if no job offers are available in the sector-->*/
#header a{
	color: var(--dark-blue);
}

/*Navigation bar for the job sectors*/
main ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 16px;
}
main ul li{
	margin-bottom: 16px;
}
/*Job sectors*/
.job-offers{
	position: relative;
	top: -160px;
}
main .row{
	flex-wrap: wrap;
	padding: 40px 40px 16px;
	background-color: white;
	box-shadow: var(--shadow);
	border-radius: 16px;
	margin-bottom: 40px;
}
main .row:last-child{
	margin-bottom: 0;
}
main .row h2{
	text-align: center;
	width: 100%;
	border-bottom: solid 1px var(--yellow);
	padding: 0 0 16px;
	margin: 0 0 40px;
}
.tables{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.offer{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}
.tables .info h3{
	text-align: left;
}
main .CTA-light{
	display: inline-block;
}
.tables h3{
	text-align: center;
	width: 100%;
	margin-bottom: 24px;
}

/*Responsive*/
@media screen and (max-width: 768px){
	.job-offers{
		top: -128px;
	}
}