/* ------- STARTPAGE: CATEGORY IMAGES // Images in generell that have a ratio --------- */

.image-container {
	padding: 0;
	background: transparent;
	border-radius: 0.5rem;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
	/* box-shadow: 0 0 6px rgba(91, 101, 116, .4); */
}

.image-container img {
	position: absolute;
	top: 0;
	left: 0;
	/* border-radius: 0.5rem; */
	min-height: 100%;
	min-width: 100%;
	max-width: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
}

/* -- Image ratios, to be applied on the image container */

.department-image-startpage {
	/* ratio w336 h220 = 200/36 = 0.5962...*/
	padding-top: 59.52%;
}

.department-image-subpage {
	/* w792 h312 => 0.4382 */
	padding-top: 43.82%;
}

.embed-responsive-336by220:before {
	/* ratio w336 h220 = 220/336 = 0.5962...*/
	padding-top: 59.52%;
}

.embed-responsive-792by312:before {
	/* w792 h312 => 0.4382 */
	padding-top: 43.82%;
}

.embed-responsive-504by264:before{
	/* h264/w504 => 0.52380952381 */
	padding-top: 52.38%;
}

.embed-responsive-540by960:before{
	/* h960/w540 = 1.77777778 */
	padding-top: 177%;
}

.course-image-lightbox-ratio {
	/* h264/w504 => 0.52380952381 */
	padding-top: 52.38%;
}

.login-image {
	/* h960/w540 = 1.77777778 */
	padding-top: 177%;
}

/**
 * Lightbox: 512x148
 * --aspect-ratio: calc(148 / 512 *100%);
 */
.ratio-lightbox {
	--aspect-ratio: calc(148 / 512 * 100%);
}

.ratio {
	position: relative;
	overflow: hidden;
}

.ratio:before {
	content: '';
	/* display: block; */
	padding-top: var(--aspect-ratio);
}

/* -- Image Filter */

img.filter-grey {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	transition: filter .4s;
}

.card:hover img.filter-grey {
	-webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}