

.headlineDesktop {
	display: none !important;
}

.headlineMobile {
	min-height: calc(var(--vh, 1vh) * 100);
}

.headlineMobile .gridElements--naslovnica .gridElement {
	display: flex;
    justify-content: flex-end;
    align-items: flex-start;
	flex-direction: column;
}

@media (min-width: 65em) {
	
	.headlineDesktop {
		display: flex !important;
	}
	
	.headlineMobile {
		display: none !important;
	}
}

/*
.headline * {
	will-change: auto;
}
*/

.headline__outer:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10em;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.headline .ws__inner {
	pointer-events: none;
}
.headlinePart.headlinePart {
	pointer-events: all;
}

.headline__outer {
	border-top: 0 !important;
}

.headline {
	border-top: 0 !important;
	position: relative;
	--wrapper__headerOffset: 6em;
	
	min-height: 100vh;
	padding-bottom: var(--wrapper__padding);
	padding-top: var(--wrapper__headerOffset);
	
	background-color: var(--color__black);
	color: #fff;
	
	display: flex;
    align-items: stretch;
    justify-content: stretch;
	
	overflow: hidden;
}

.headline .title {
    display: inline-block;
	font-weight: var(--fontSemibold);
}

.headline .ws__inner {
	position: relative;
    width: 100%;
	z-index: 10;
}

.headlinePart__content {
	padding-bottom: 4em;
	color: #fff !important;
	display: block;
}

.headlinePart__title {
	position: relative;
    display: inline-block;
	opacity: 1;
	
	transition: opacity 0.4s;
}


.headlinePart__intro {
	position: absolute;
	top: 0;
	left: calc(100% + 7em);
	min-width: 21em;
	
	transform: translateX(-6em);
	opacity: 0;
	
	transition: opacity 0.4s, transform 0.4s;
}


.headline__outer--active .headlinePart__intro {
	transition: opacity 0.8s, transform 0.8s;
}

.headlinePart--2 .headlinePart__intro {
	transform: translateX(6em);
}

.headlinePart__intro .btn {
	margin-top: 1em;
	font-size: var(--size20);
}

.headlinePart__introText {
	font-size: var(--sizeBigger);
	line-height: var(--lineHeightTitles);
}


.headlineParts {
	position: relative;
	height: 100%;
    width: 100%;
	
	display: flex;
	justify-content: stretch;
    align-items: stretch;
}

.headlinePart {
	transition: left 0.8s;
}

.headlinePart.headlinePart--1 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
}

.headlinePart.headlinePart--2 {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 50%;
	padding-left: 4em;
}

.headlinePart.headlinePart--1 .headlinePart__content:after,
.headlinePart.headlinePart--2 .headlinePart__content:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 300%;
	z-index: -1;
}

.headlineImageParts {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.headlineImagePart {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	left: 0;
	height: 100%;
	
	background-size: cover;
	background-position: center;
	
	transition: width 0.8s, left 0.8s;
}

.headlineImagePart.headlineImagePart--2 {
	left: 50%;
}

.headlineImagePart:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%);
	opacity: 0.6;
	
	transition: background 0.4s, opacity 0.4s, height 0.4s;
}


.headlineImagePart:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color__black);
	opacity: 0;
	
	transition: background 0.4s, opacity 0.4s, height 0.4s;
}

.headlineImagePart--1 {
	border-right: 2px solid #000;
}

.headlineImagePart--2 {
	border-left: 2px solid #000;
}

.hoverActive--1 .headlinePart--1 .headlinePart__intro {
	opacity: 1;
	transform: translateX(0);
}

.hoverActive--1 .headlineImagePart--1 {
	width: calc(50% + 14em);
	z-index: 2;
}

.hoverActive--1 .headlinePart--2 {
	left: calc(50% + 14em);
	z-index: 2;
}

.hoverActive--1 .headlinePart--2 .headlinePart__title {
	opacity: 0.7;
}

.hoverActive--1 .headlineImagePart--2 {
	left: calc(50% + 14em);
	z-index: 2;
}

.hoverActive--1 .headlineImagePart--2:before {
	background-color: var(--color__black);
	opacity: 0.8;
	height: 100%;
}



.hoverActive--2 .headlinePart--2 .headlinePart__intro {
	opacity: 1;
	transform: translateX(0);
}

.hoverActive--2 .headlinePart--1 .headlinePart__title {
	opacity: 0.7;
}

.hoverActive--2 .headlineImagePart--1 {
	width: calc(50% - 14em);
	z-index: 2;
}

.hoverActive--2 .headlinePart--2 {
	left: calc(50% - 14em);
	z-index: 2;
}

.hoverActive--2 .headlineImagePart--2 {
	left: calc(50% - 14em);
	width: calc(50% + 14em);
	z-index: 2;
}

.hoverActive--2 .headlineImagePart--1:before {
	background-color: var(--color__black);
	opacity: 0.8;
	height: 100%;
}



.headline .scrollLine {
	transition-delay: 0.8s;
}

.headline.hoverActive--1 .scrollLine, 
.headline.hoverActive--2 .scrollLine {
	opacity: 0;
	transition-delay: 0s !important;
}

.headline__outer.headline__outer--active .scrollLine {
	opacity: 0;
	transition-delay: 0s !important;
	
}


@media (min-width: 65em) {
	
	.headlinePart__content {
		padding-bottom: 6em;
	}
	
	.ws.ws--slider-content {
		padding-bottom: 7em;
	}
}


.ws--slider-services {
	min-height: 100vh;
	
	display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}


.headlineDesktop--size1 {
	
}
.headlineDesktop--size1 .headlineImagePart {
	width: 100% !important;
}

.headlineDesktop--size1 .headlinePart--1 .headlinePart__intro {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.gridElements--size1 {
	min-height: 100% !important;
	height: 100% !important;
}

/* .gridElements--size1 .gridElement { */
	/* min-height: 100% !important; */
	/* height: 100% !important; */
/* } */

.gridElements--size1.gridElements--naslovnica {
	/* height: 100vh !important; */
	height: calc(var(--vh, 1vh) * 100) !important;
}

.gridElements--size1.gridElements--naslovnica .gridElement {
	height: 100% !important;
	height: calc(var(--vh, 1vh) * 100) !important;
}

