/** main banner **/

.main-banner {
	height: 318px;
	display: flex;
	align-items: center;
}

.main-banner .page-title {
	margin-right: 66px;
	border: 2px solid #dcc182;
	padding: 5px;
}

.main-banner .page-title > * {
	padding: 10px 38px;
	border: 1px solid #dcc182;
}

/** main banner **/

/** page description **/

.page-description {
	margin: 37px auto 32px;
}

/** page description **/

/** to jobs link **/

.to-jobs-link {
	display: flex;
	justify-content: center;
}

.to-jobs-link a {
	border: 2px solid #220000;
	padding: 5px;
}

.to-jobs-link a span {
	display: block;
	padding: 10px 175px;
	background-color: #220000;
}

/** to jobs link **/

/** main video **/

.main-video {
	display: grid;
	height: 895px;
	margin-top: 55px;
	grid-template-columns: 1fr auto 1fr;
}

.main-video .play-icon {
	grid-column: 2 / 3;
	grid-row: 1 / -1;
	align-self: center;
	display: grid;
}

.main-video .play-icon img,
.main-video .play-icon .loader {
	grid-column: 1/-1;
	grid-row: 1/-1;
}

.main-video .play-icon .loader {
	border: 3.5px solid #fff;
	border-right-color: #dcc182;
	border-radius: 100%;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	animation: loader-spin 1s linear infinite;
	display: none;
}

@keyframes loader-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.main-video .thumbnail,
.main-video .iframe-wrapper {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.main-video .iframe-wrapper {
	display: none;
	z-index: 1;
}

/** main video **/

/** three recommendations **/

.three-recommendations {
	margin-top: 97px;
	display: flex;
}

.three-recommendations .single-recommendation {
	flex-basis: 33.333333%;
}

.three-recommendations .single-recommendation .top {
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-column-gap: 25px;
}

.three-recommendations .single-recommendation .top .avatar {
	height: 70px;
	grid-column: 1 / 2;
}

.three-recommendations .single-recommendation .top .recommendation {
	grid-column: 2 / 3;
	align-self: center;
}

.three-recommendations .single-recommendation .bottom {
	display: flex;
	flex-direction: row-reverse;
}

.three-recommendations .line {
	flex-basis: 2px;
	margin: 0 43px;
}

/** three recommendations **/

/** jobs required **/

.jobs-required {
	padding-top: 130px;
}

.jobs-required ul {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	grid-gap: 43px 13px;
	margin-top: 37px;
}

.jobs-required ul li {
	border: 1px solid #dcc182;
}

.jobs-required ul li .thumbnail {
	height: 235px;
}

.jobs-required ul li .name {
	padding: 17px 23px;
}

/** jobs required **/

@media (max-width: 1365px) {
	
	/** main banner **/
	
	.main-banner {
		height: 220px;
	}
	
	.main-banner .page-title {
		margin-right: 49px;
	}
	
	/** main banner **/
	
	/** main video **/
	
	.main-video {
		height: 638px;
	}
	
	.main-video .play-icon img {
		max-width: 80px;
	}
	
	/** main video **/
	
}

@media (max-width: 1023px) {
	
	/** main video **/
	
	.main-video {
		height: 61.389vw;
	}
	
	/** main video **/
	
	/** three recommendations **/
	
	.three-recommendations {
		flex-direction: column;
		align-items: center;
		margin-top: 60px;
	}
	
	.three-recommendations .single-recommendation,
	.three-recommendations .line {
		width: 360px;
	}
	
	.three-recommendations .line {
		margin: 20px 0;
	}
	
	/** three recommendations **/
	
	/** jobs required **/
	
	.jobs-required {
		padding-top: 68px;
	}
	
	/** jobs required **/
	
}

@media (max-width: 800px) {
	
	/** to jobs link **/
	
	.to-jobs-link a {
		width: 800px;
		text-align: center;
	}
	
	.to-jobs-link a span {
		padding: 10px 0;
	}
	
	/** to jobs link **/
	
	/** jobs required **/
	
	.jobs-required ul li .thumbnail {
		height: 25vw;
	}
	
	/** jobs required **/
	
}

@media (max-width: 500px) {
	
	/** three recommendations **/
	
	.three-recommendations .single-recommendation,
	.three-recommendations .line {
		width: 100%;
	}
	
	/** three recommendations **/
	
	/** jobs required **/
	
	.jobs-required ul {
		grid-template-columns: 1fr;
		grid-row-gap: 15px;
	}
	
	.jobs-required ul li .thumbnail {
		height: 185px;
	}
	
	/** jobs required **/
	
}

/*

@media only all and ( max-width: 1000px ) {
	.main-banner .page-title > *{    padding: 10px 18px;}
	.to-jobs-link a{max-width:100%;}
	.to-jobs-link a span{padding: 10px 30px;     font-size: .9em;}
	.main-video {    height: 225px;}
	.main-video .play-icon img, .main-video .play-icon .loader{width:80px; height:80px;}
	
	.jobs-required ul{    grid-template-columns: repeat( 1, 1fr );}
	
.three-recommendations{    display: flex;   flex-wrap: wrap; flex-basis:100%;}
	.three-recommendations .single-recommendation{display: flex;   flex-wrap: wrap; flex-basis:100%;    padding: 20px 15px; border-bottom: 1px solid #a68b23;}	
	.three-recommendations .single-recommendation:last-child{border:none;}
	.three-recommendations .single-recommendation .top .recommendation{    grid-column: 2 / 2; text-align: justify;}
	.three-recommendations .single-recommendation .bottom{    display: flex;  flex-direction: column;    flex-basis: 100%;     text-align: left;}
		
.line-headline:before,
	.line-headline:after {    flex-basis: 23px;}
	.line-headline span{font-size:0.8em;}
}*/