.job-listings{display: flex;}
.job-listings .quote-area{background-color: #f2f2f2; width: 50%; padding: 0px 100px; display: inline-block; padding-top: 60px;}
.job-listings .quote-area .quote-icon{width: 100%;}
.job-listings .quote-area .quote-icon .image-wrap{width: 200px;height: 200px;position: relative;left: -30px;}
.job-listings .quote-area .quote{margin: 20px 0px; margin-top: 0px;}
.job-listings .quote-area .source{font-weight: 700; margin-top: 20px; width: 100%;}
.job-listings .jobs{width: 50%;} 
.job-listings .jobs > .title{margin: 0px;padding: 50px;background: #008bb9;text-align: left;padding-left: 160px; color: white;}
.job-listings .jobs .job-list{}
.job-listings .jobs .job-list .job{}
.job-listings .jobs .job-list .job .title-area{cursor: pointer;display: flex; align-items: stretch; background: #2acbff;}
.job-listings .jobs .job-list .job:nth-of-type(2n) .title-area{background: #00a9df;}
.job-listings .jobs .job-list .job .title-area .arrow{background: #00a9df;width: 120px;color: white;display: flex;align-items: center;justify-content: center;}
.job-listings .jobs .job-list .job .title-area .arrow:before{content: ''; transition: all .5s; background-repeat: no-repeat;display: inline-block;background-image: url(/wp-content/themes/StratixCustom/images/jobArrow.svg);background-size: contain;background-position: center;height: 60px;width: 60px;}
.job-listings .jobs .job-list .job .title-area.active .arrow:before{transform: rotate(90deg);}
.job-listings .jobs .job-list .job:nth-of-type(2n) .title-area .arrow{background: #2acbff;}
.job-listings .jobs .job-list .job .title-area .title{color: white;max-width: 100%; width: calc(100% - 120px);text-align: left;margin: 0px;padding: 20px 0px;padding-left: 40px;}
.job-listings .jobs .job-list .job .content{padding: 0px 40px; height: 0px; overflow-y: auto; max-height: 1000px; transition: padding .7s;}
.job-listings .jobs .job-list .job .content.active{padding: 40px;}
.job-listings .jobs .job-list .job .content .description{}
.job-listings .jobs .job-list .job .content .btn{margin-top: 40px;}
.job-listings .no-jobs{text-align: center;color: grey;}

@media(max-width: 1920px){
	.job-listings .jobs .job-list .job .title-area .title{padding: 10px 0px; padding-left: 30px;}
	.job-listings .quote-area .quote-icon .image-wrap{width: 150px; height: 150px; left: -20px;}
	.job-listings .jobs > .title{padding: 30px; padding-left: 100px;}
	.job-listings .jobs .job-list .job .title-area .arrow{width: 70px;}
	.job-listings .jobs .job-list .job .title-area .title{width: calc(100% - 70px);}
	.job-listings .jobs .job-list .job .content{max-height: 700px;}
	.job-listings .jobs .job-list .job .title-area .arrow:before{width: 30px; height: 30px;}
}

@media(max-width: 1200px){
	.job-listings .quote-area{padding: 40px;}
	.job-listings .jobs > .title{padding-left: 90px;}
	.job-listings .jobs .job-list .job .title-area .title{padding-left: 20px;}
	.job-listings .quote-area .quote-icon .image-wrap{width: 100px; height: 100px; left: -10px;}
}

@media(max-width: 900px){
	.job-listings{flex-wrap: wrap;}
	.job-listings > section{width: 100% !important;}
	.job-listings .quote-area{order: 1;}
	.job-listings .jobs .job-list .job .title-area .title{max-width: 100%; width: calc(100% - 60px);}
	.job-listings .jobs .job-list .job .title-area .arrow{width: 60px;}
	.job-listings .jobs > .title{padding-left: 80px;}
}

@media(max-width: 400px){
	.job-listings .jobs .job-list .job .title-area .title{width: calc(100% - 50px);}
	.job-listings .jobs .job-list .job .title-area .arrow{width: 50px;}
	.job-listings .jobs > .title{padding-left: 30px;}
}