@charset "UTF-8";
/* CSS Document */

:root {
	--farbe_akzent_1: linear-gradient(127deg, #2259b7 0%, #dd2544 100%);	
	--easing: 0.4s cubic-bezier(0.480, 0.030, 0.155, 0.990); 
}

.hover-caption {
    position: absolute;
    text-align: center;
    font-size: 14px;
    top: 50%;
    width: 100%;
    padding: 0 10px;
    margin: 0;
    z-index: 14;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.sc-hover {
	color: white;
}

.sc-hover a {
	cursor: pointer;
}

.sc-hover::before {
	-webkit-transition: transform var(--easing);
    transition: transform var(--easing);
}

.sc-hover.video::before {
	filter: brightness(1);
	background-size: 100% 100%;
	display: inline-block;
    content: '';
	background-image: url("../media/img/play-w.svg");
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 1;
    top: 50%;
    left: 50%;
    opacity: .85;
	-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0);
    transform: translateX(-50%) translateY(-50%) rotateZ(0);
	-webkit-transition: all var(--easing);
    transition: all var(--easing);
}

.sc-hover.more::before {
	filter: brightness(1);
	background-size: 100% 100%;
	display: inline-block;
    content: '';
	background-image: url("../media/img/play-w.svg");
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 1;
    top: 50%;
    left: 50%;
    opacity: .85;
	-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0);
    transform: translateX(-50%) translateY(-50%) rotateZ(0);
	-webkit-transition: all var(--easing);
    transition: all var(--easing);
}

.sc-hover .hover-caption h1 {
	transform: translateX(-20px);
	opacity: 0;
	-webkit-transition: all var(--easing);
    transition: all var(--easing);
	margin-bottom: 20px;
	color: white;
	margin: 0;
}

.sc-hover .hover-caption p {
	transform: translateX(20px);
	opacity: 0;
	-webkit-transition: all var(--easing);
    transition: all var(--easing);
	color: white;
	margin: 0;
}

.sc-hover .sc-devider {
	content: '';
	position: relative;
	left: 50%;
	width: 0px;
	height: 2px;
	background-color: white;
	opacity: 0;
	margin: 15px 0;
	-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
	-webkit-transition: all var(--easing);
    transition: all var(--easing);
}

.sc-grid-img {
	height: 100%;
	width: 100%;
	background-image: url("../media/img/header_1.jpeg");
	background-size: cover;
	background-position: center;
}

.hover-img {
	-webkit-transition: all var(--easing);
    transition: all var(--easing);	
}

.hover-img::after {
	position: absolute;	
	content: '';
	height: 100%;
	width: 100%;
	opacity: 0;
	background-image:-webkit-var(--farbe_akzent_1);
	background-image:-o-var(--farbe_akzent_1);
	background-image:var(--farbe_akzent_1);
	-webkit-transition: all var(--easing);
    transition: all var(--easing);		
}

.sc-hover:hover::before {
	-webkit-transform: translateX(-50%) translateY(50%);
    transform: translateX(-50%) translateY(50%);
    opacity: .8;
	cursor: pointer;	
}

.sc-hover::before:hover {
	transform:  scale(1.2);
}

.sc-hover:hover .hover-img {
	transform: scale(1.03);
}

.sc-hover:hover .hover-img::after {
	opacity: 0.7;
}

.sc-hover:hover .hover-img {
	cursor: pointer;	
}

.sc-hover:hover .hover-caption {
	cursor: pointer;	
}

.sc-hover:hover .hover-caption h1 {
	transform: translateX(0);
	opacity: 1;
}

.sc-hover:hover .sc-devider {
	width: 100px;
	opacity: 1;
}

.sc-hover:hover .hover-caption p {
	transform: translateX(0);
	opacity: 1;
}

.sc-item .more {
	height: 70px;
	width: 70px;
	background-image:-webkit-var(--farbe_akzent_1);
	background-image:-o-var(--farbe_akzent_1);
	background-image:var(--farbe_akzent_1);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-align: center;
	font-size: 47px;
	color: white;
}

.sc-item .title {
	width: 100%;
	height: 20%;
	position: absolute;
	bottom: 0;
	background-color: #444;
	
}

.sc-item .title h4 {
	color: white;
}

.sc-item .title p {
	color: white;
}

.sc-video.fas {
	width: 100%;
	height: 100%;
}

.sc-video.fas::before {
	color: white;
	position: absolute;
    font-size: 4rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 4;
	opacity: .7;
}

.sc-video.fas:hover::before {
	transform: translate(-50%, 60%) rotateZ(180deg);
	opacity: 1;
}