/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	div.headerjobtitle{float:left; font-size:16px; font-weight:700; width:240px; margin:12px 0px 0px 30px; line-height:1.1em;}
	
	div.imgbox{position:relative; float:left; width:33.33%;}
	div.imgbox img {width:100%; height:calc(100% * 0.75)}
	
	a.imgoverlay{color:#FFF; text-decoration:none; position: absolute; padding:35px; top:0px; left:0px; width:100%; height:100%; display: flex; justify-content: center;align-items: center; background-color:rgba(0,0,0,0.6);transition: background-color 0.25s ease-out;}
	a.imgoverlay:hover{background-color:rgba(0,0,0,0.8);transition: background-color 0.25s ease-out;}
	a.imgoverlay span.title{font-size:24px; font-weight:600; width:100%; display:block;text-align:center; line-height:1.2em;margin:0px 0px 0px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlay:hover span.title{margin:0px 0px 20px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlay span.description{ font-size:18px;font-weight:400;width:100%; display:block;text-align:center; margin:10px 0px 0px 0px;}

	span.imglinkanimate{position:relative;text-decoration:none;}
	span.imglinkanimate:after{content: ''; transform: scaleX(0); transform-origin: center center;  position: absolute; width: 100%; height: 2px;bottom: -10px;left: 0;background-color: #FFFFFF;transition: transform 0.25s ease-out;}
	a.imgoverlay:hover span.imglinkanimate:after{transform: scaleX(1);transform-origin: center center;}

	a.imgoverlayon{background-color:rgba(0,0,0,0.6) !important;transition: background-color 0.25s ease-out;}
	a.imgoverlayon span.title{margin:0px 0px 20px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlayon span.imglinkanimate:after{transform: scaleX(1);transform-origin: center center;}

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.headerjobtitle{display:none;}

	div.imgbox{position:relative; float:left; width:100%;}
	div.imgbox img {width:100%; height:calc(100% * 0.75)}
	
	a.imgoverlay{color:#FFF; text-decoration:none; position: absolute; padding:35px; top:0px; left:0px; width:100%; height:100%; display: flex; justify-content: center;align-items: center; background-color:rgba(0,0,0,0.6);transition: background-color 0.25s ease-out;}
	a.imgoverlay:hover{background-color:rgba(0,0,0,0.8);transition: background-color 0.25s ease-out;}
	a.imgoverlay span.title{font-size:22px; font-weight:600; width:100%; display:block;text-align:center; line-height:1.2em;margin:0px 0px 0px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlay:hover span.title{margin:0px 0px 20px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlay span.description{ font-size:16px;font-weight:400;width:100%; display:block;text-align:center; margin:10px 0px 0px 0px;}

	span.imglinkanimate{position:relative;text-decoration:none;}
	span.imglinkanimate:after{content: ''; transform: scaleX(0); transform-origin: center center;  position: absolute; width: 100%; height: 2px;bottom: -10px;left: 0;background-color: #FFFFFF;transition: transform 0.25s ease-out;}
	a.imgoverlay:hover span.imglinkanimate:after{transform: scaleX(1);transform-origin: center center;}

	a.imgoverlayon{background-color:rgba(0,0,0,0.6) !important;transition: background-color 0.25s ease-out;}
	a.imgoverlayon span.title{margin:0px 0px 20px 0px;transition: margin 0.25s ease-out; }
	a.imgoverlayon span.imglinkanimate:after{transform: scaleX(1);transform-origin: center center;}

}

/* ==========================================================================
   Share CSS
   ========================================================================== */