/*=============================================
styles for the navigation of housekeeper layout
=============================================*/

.navigation {
	padding: 5px 10%;
	display: grid;
	grid-template-columns: 1fr 4fr;
}

.nav-logo {
	height: 75px;
	display: block;
	margin: 0 auto;
}

.nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	text-align: center;
}

.nav-links a {
	align-self: center;
	text-transform: uppercase;
	font-size: 1.5rem;
	font-family: "GothamRounded-Light", Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
	.navigation {
		grid-template-columns: 1fr;
		grid-row-gap: 20px;
	}

	.nav-links {
		grid-template-columns: 1fr;
		grid-row-gap: 20px;
	}
}

/*====================================
styles for interior of housekeeper page
=====================================*/

.job-listing {
	background: #f1f1f1;
	padding: 30px 10%;
}

.job-listing-container {
	background: #FFFFFF;
	padding: 20px 10%;
	border-radius: 4px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

.job-listing-container h1,
.job-listing-container h2 {
	position: relative;
	font-family: "GothamRounded-Light", Helvetica, Arial, sans-serif;
	color: #666666;
	text-transform: uppercase;
	text-align: center;
}

.job-listing-container h1 {
	font-size: 1.75rem;
}

.job-listing-container h2 {
	font-size: 1.5rem;
	margin-top: 40px;
	margin-bottom: 40px;
}

.job-listing-container h1:after,
.job-listing-container h2:after {
	position: absolute;
	content: "";
	height: 5px;
	width: 50px;
	background: #999999;
	bottom: -20px;
	left: 50%;
	margin-left: -25px;
}

.job-listing-container p,
.job-listing-container ul {
	color: #777777;
	font-size: 1.6rem;
	font-family: "GothamRounded-Light", Helvetica, Arial, sans-serif;
	line-height: 1.42;
}

.job-listing-container li {
	margin-bottom: 8px;
}

.job-listing-container p.lead {
	margin-top: 40px;
}

.apply-button {
	text-decoration: none;
	background: #e84c53;
	padding: 10px;
	color: #FFFFFF;
	border-radius: 4px;
}

.apply-button:hover {
	color: #FFFFFF;
	opacity: 0.9;
}

.job-listing-container p.heading-text {
	font-family: "GothamRounded-Book", Helvetica, Arial, sans-serif;
	font-size: 1.75rem;
}

.back-to-postings {
	text-align: center;
	margin-top: 20px;

}

.highlight-text {
	font-family: "GothamRounded-Bold", Helvetica, Arial, sans-serif;
	color: #555555;
}

/*=============================
styles for the posting pages
==============================*/

.posting-header {
	background: url("../img/postingsBckgrnd.svg") no-repeat center center fixed;
 	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 100px 10%;
}

.posting-header h1 {
	position: relative;
	color: #FFFFFF;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.42;
	padding: 20px;
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
}

.posting-header-icon {
	position: absolute;
	text-align: center;
	color: #ffffff;
	padding-top: 3px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	height: 40px;
	width: 40px;
	top: -20px;
	left: 50%;
	margin-left: -20px;
}

.postings {
	background: #F1F1F1;
	padding: 75px 0px;
	height: 100vh;
}

.posting-container {
	display: grid;
	padding: 0px 10%;
	grid-template-columns: 1fr;
	grid-row-gap: 20px;
}

.posting-categories {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr 1fr;
	padding: 0px 20px;
}

.posting {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr 1fr;
	background: #FFFFFF;
	border-radius: 4px;
	transition: all .2s ease;
	padding: 20px;
}

.posting:hover {
	transform: scale(1.1);
	box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.posting p,
.posting-categories p {
	margin-bottom: 0px;
}

.apply-paragraph {
	text-align: right;
}

.posting-categories p {
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.posting {
		grid-template-columns: 1fr;
		grid-row-gap: 10px;
	}

	.apply-paragraph {
		text-align: left;
		margin-top: 10px;
	}

	.posting-categories {
		display: none;
	}

	.posting-header {
		padding: 30px 10%;
	}

	.apply-button {
		font-size: 1.25rem;
	}

	.posting-header h1 {
		font-size: 2.25rem;
	}
}