#sec-jobs{
	padding: 32px 16px;
	text-align: center;
	overflow: hidden;
}

	#sec-jobs h2{
		margin-bottom: 16px;
		color: #23CC50;
		font-size: 32px;
		font-weight: 600;
	}

	#sec-jobs > p{
		margin-bottom: 16px;
		color: #9DCCAA;
		font-size: 16px;
		font-weight: 500;
	}

	#wr-co-jobs{
	}

	.co-job{
		display: none;
		width: 256px;
		/*margin: 0px auto;*/

		opacity: 0.2;
		transform: scale(0.9);
		transform-origin: bottom;
		transition: all 0.2s ease-in;

		cursor: pointer;
	}
		#co-job--active{
			display: block;
			margin: 0px auto;
			opacity: 1;
			transform: none;
		}
		.co-job img{
			display: block;
			width: 100%;
			height: 304px;
			object-fit: cover;
		}

		.wr-job-content{
			padding: 16px 8px 0px;
			background: #B2F9FE;

			transition: all 0.2s ease-in;
		}
			.wr-job-content h3{
				margin-bottom: 8px;
				color: #0A6066;
				font-size: 20px;
				font-weight: 600;
				text-align: center;
			}

			.co-job-controller{
				position: relative;
				width: 100%;
				height: 24px;
				background-image: url("../media/svg/deco-job-controller.svg");
				background-repeat: no-repeat;
			}

				.wr-job-controller-content{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
				}
					.wr-job-controller-content p{
						width: 50%;
						font-size: 12px;
						font-weight: 700;
						letter-spacing: 0.15em;
						text-align: center;
					}

				.co-job-controller button{
					position: absolute;
						left: 53%;
						top: 2px;
						transform: rotate(45deg) translate(-50%, 50%);
					width: 40px;
					height: 40px;
					border: 2px solid #0A6066;
					box-sizing: border-box;
					background-color: #19EFFE;
					background-repeat: no-repeat;
					background-position: center center;
					box-shadow: 0px 5px 10px 0px rgba(0,0,0, .15);
				}
					.co-job-controller button svg{
						fill: #0A6066;
						transition: all 0.2s ease-in;
					}


	.wr-job-nav{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 32px;
	}
		.wr-job-nav button{
			display: block;
			width: 60px;
			height: 60px;
			border: 2px solid #16CCD9;
			border-radius: 100px;
			background: #fff;
				transition: all 0.2s ease-in;
		}
			.wr-job-nav button svg{
				display: block;
				margin: 0px auto;
			}





/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[Job Component - Tree-structural Pseudo-classes]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/




/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[Job Component Buttons - User Action Pseudo-classes]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
.co-job--after{

}
	.wr-job-content h3{
		color: #0D4D1E;
	}
	.co-job--after button{
		background: #23CC50;
		border-color: #0D4D1E;
	}
		.co-job--after button svg{
			transform: rotate(-180deg);
			fill: #0D4D1E;
			transition: all 0.2s ease-in;
		}
	.co-job--after .wr-job-content{
		background: #93BF9F;
	}
	.co-job--after .co-job-controller{
		background-image: url("../media/svg/deco-job-controller--active.svg")
	}






/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[Job Controller Content - Tree-structural Pseudo-classes]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
.wr-job-controller-content p:first-of-type{
	color: #0A6066;
	padding-right: 4px;
}
.wr-job-controller-content p:last-of-type{
	flex-shrink: 0;
	color: #0D4D1E;
}





/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[Job Component Navigation Button - Tree-structural Pseudo-classes]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
.wr-job-nav button:first-child{
	margin-right: 32px;
}
.wr-job-nav button:last-child svg{
	transform: rotate(-180deg);
}