/* Job Block
/*------------------------------------------------------------*/
:root {
	--company: rgba(51, 51, 51, .75);
	--postdate: rgba(51, 51, 51, .4);
	--info: var(--company);

	--btn-save: rgba(0, 0, 0, 0.3);
	--btn-save-hover: rgba(0, 0, 0, 0.5);
	--btn-saved: #FDD000;
}

/* Job Block
/*------------------------------------------------------------*/
.job {
	width: 100%;
	background-color: var(--block-bg);
	font-weight: 600;
	color: var(--text);
	padding: 15px;
	position: relative;
	top: 0;
	transition: top .2s ease-in-out;
}

.job:hover {
	top: -5px;
}

.job__logo img {
	height: 42px;
	border: 6px solid white;
	border-radius: 8px;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
	margin-bottom: 12px;
	display: block;
}

.job__company {
	font-size: 14px;
	color: var(--company);
}

.job__title {
	font-size: 16px;
}

.job .job__title {
	height: 44px;
	max-height: 44px;
	margin: 8px 0;
}

.job__postdate {
	font-size: 13px;
	color: var(--postdate);
}

.job__info {
	font-size: 14px;
	font-weight: normal;
	color: var(--info);
}

.job .btn--save {
	z-index: 3;
}


/* Experience Icon */
.icon--exp {
	width: auto;
	height: 18px;
	font-size: 10px;
	font-weight: 600;
	background-color: var(--company);
	color: #FFF;
	padding: 1px 4px;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 4px;
}


/* Save Job Button */
.btn--save {
	font-size: 24px;
	color: var(--btn-save);
	position: absolute;
	top: 10px;
	right: 10px;
	transition: color .2s ease-in-out;
}

.btn--save:hover {
	color: var(--btn-save-hover);
}

.btn--saved, .btn--saved:focus, .btn--saved:hover {
	color: var(--btn-saved);
}




/* Job Listing
/*------------------------------------------------------------*/
.joblist .job {
	margin-bottom: 15px;
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.joblist .job {
		margin-bottom: 30px;
	}

	.job__title {
		font-size: 18px;
	}

	.job .job__title {
		height: 54px;
		max-height: 54px;
	}
}