.headline {
	display: grid;
	grid-template-columns: subgrid;
	align-items: center;
	
	height: 100svh;
}

	.gwr {
		position: absolute;
		right: 0.5em;
		top: 30%;
		transform: translateY(-50%);
		
		width: 4em;
	}

	.headline:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 15;
		
		content: "";
		background-color: #fff;
		
		transition: height 1.3s cubic-bezier(0, 0.807, 0.922, 0.928);
	}

.headline__image {
	height: 100%;
	position: relative;
	overflow: hidden;
	grid-column: 1 / -1;
	grid-row: 1;
}

.headline__image:after {
	position: absolute;
	inset: 0;
	
	content: "";
	background-color: var(--color__navy2);
	opacity: 50%;
	/* mix-blend-mode: multiply; */
}

.headline__image img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	
	transform-origin: center 30%;
	transform: scale(1.3) translateY(5%);
	transition: transform 2.5s cubic-bezier(0, 0.807, 0.922, 0.928); 
}

.headline--loaded .headline__image img {
	transform: scale(1) translateY(0);
}
	
.headline--loaded:after {
	height: 0;
}

.headline__info {
	--flow-space: 2rem;
	
	grid-column: var(--wrapper__gridOffset);
	grid-row: 1;
	z-index: 10;
}

@media (max-width: 480px) {
	
	.lang_en .headline__info {
		padding-right: 4em;
	}
}

.headline__info p {
	max-width: 20ch;
	font-size: var(--size8);
	font-weight: 600;
	color: #fff;
}



.countdownWrap {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	padding: 0.3em;
	
	background-color: rgba(251, 176, 59, 0.8);
	color: #fff;
	font-size: var(--size3);
	text-align: center;
	
	background: linear-gradient(65deg, #FBB03B, #298ba8, #023247);
	background-size: 400% 400%;
	animation: gradient 6s ease infinite;
}

.countdownWrap > p {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}



.more {
	margin-top: 2em;
	color: #fff;
	font-size: var(--size0);
}
	
	.more:hover {
		color: var(--color__yellow);
	}

	.more .icon {
		transform: rotate(90deg);
		font-size: var(--size2);
	}


.layout1 {
	
}

.layout1__left, 
.layout2__left {
	margin-bottom: var(--wrapper__paddingLarge);
}

.layout2__left a {
	color: #000;
}

	.layout2__left a:hover {
		color: var(--color__yellow);
	}

.layout1__left > p {
	font-size: var(--size2);
}

.zgodba {
	--flow-space: 1.5em;
}

.zgodba .layout1__right em {
	font-size: var(--size2);
	font-weight: 600;
	text-decoration: none;
}

.zgodba .layout1__right img {
	max-width: 15em;
}

.btnPopup {
	display: flex;
}

#btnSimptomi {
	justify-content: flex-start;
}


.izziv {
	min-height: 100svh;
	grid-column: 1 / -1; 
	position: relative;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
} 

	.izziv .btnPopup {
		position: absolute;
		right: 2em;
		bottom: 2em;
		z-index: 20;
		font-size: var(--size1);
	}

	.izziv__intro {
		margin-top: 1em;
		font-size: var(--size3);
	}
	
	.izziv__content {
		margin-top: 2em;
	}
	
	.izziv__content u {
		color: var(--color__yellow);
		font-size: var(--size1);
		text-decoration: none;
	}
	
	.izziv__content strong {
		font-size: var(--size1);
	}
	
	.izziv__content em {
		display: block;
		font-size: var(--size-1);
		line-height: 1.4;
	}

.izziv__inner {
	z-index: 5;
	padding: var(--wrapper__padding);
}

.izziv__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
}

	.izziv__bg:after {
		position: absolute;
		inset: 0;
		z-index: 1;
		
		content: "";
		opacity: 0.5;
		background-color: var(--color__navy2);
	}

.izziv__bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--wrapper__padding);
	width: 95%;
	
	color: #fff;
	background-color: var(--color__navy);
}

	dialog ul {
		margin-left: 2em;
	}

	dialog::backdrop {
		background-color: rgba(2, 50, 71, 0.6);
	}
	
	dialog button {
		position: absolute;
		top: var(--wrapper__padding);
		right: var(--wrapper__padding);
	}
	
	dialog h3 {
		width: calc(100% - 3em);
	}
	
	dialog h3 em {
		font-weight: 400;
		color: var(--color__yellow);
	}

.misija .layout1__left > a {
	display: inline-block;
	max-width: 12em;
}


.vsiZaDih {
	min-height: 100svh;
	display: grid;
	grid-template-columns: subgrid;
}

	.vsiZaDih__bg {
		position: relative;
		grid-column: 1 / -1;
		grid-row: 1;
	}
	
	.vsiZaDih__bg:after {
		position: absolute;
		inset: 0;
		
		content: "";
		background-color: var(--color__navy2);
		opacity: 50%;
	}

		.vsiZaDih img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}

.slogan {
	grid-column: 2 / -2;
	grid-row: 1;
	
	
	z-index: 10;
	align-self: center;
	
	font-size: var(--size8);
	font-weight: 600;
	color: #fff;
}

.layout2__right {
	position: relative;
	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
	grid-column: 1 / -1;
	aspect-ratio: 1;
	margin-top: 1em;
	padding: var(--wrapper__padding);
	
	background-color: var(--color__yellow);
	color: #fff;
}

a.layout2__right {
	text-decoration: none;
	transition: background-color .3s;
}	

	a.layout2__right:hover {
		background-color: var(--color__navy);
	}

.layout2__right span {
	max-width: 10em;
	font-size: var(--size4);
	font-weight: 600;
	color: #fff;
}	

.sodelujte {
	padding-bottom: 0;
}

.sodelujte .layout2__left p em {
	display: block;
	font-size: var(--size-1);
}

.sodelujte .layout2__right a em {
	font-weight: 400;
}	

.layout2__right .icon {
	position: absolute;
	right: 2.5rem;
	bottom: 2.5rem;
	
	font-size: 4em;
	transform: rotate(-45deg);
	transition: color .3s;
}	

.layout3 {
	--flow-space: 0.5em;
}

#simptomi[aria-hidden="true"] {
	display: none;
}

.simptomi__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}


.simptomi article {
	text-align: center;
}

.simptomi article h3 {
	font-weight: 400;
	font-size: var(--size0);
	text-transform: uppercase;
	line-height: 1.2;
}

#live {
}

.live .sm {
	flex-wrap: wrap;
}

.live .sm a {
	background-color: var(--color__yellow);
}

	.live .sm a:hover {
		background-color: var(--color__navy);
		color: #fff;
	}
	
	
.live ul {
	margin-left: 2em;
}

.live ul li::marker {
	color: var(--color__yellow);
}

.live ul strong {
	color: var(--color__yellow);
}

.live__tracker iframe {
	position: relative;
	z-index: 10;
	
	margin-top: calc(var(--wrapper__padding) * 2);
	width: 100%;
	aspect-ratio: 2 / 3;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}








.progressWrap {
	margin-top: 2em;
}

.progressWrap--low h3 {
	text-align: right;
}

.progress {
	display: flex;
	align-items:baseline;
	gap: 1em;
	width: 100%;
	margin-top: 1em;
}

	

.progress__label {
	font-size: var(--size3);
	font-weight: 700;
}

	.progress__label small {
		font-size: var(--size-2);
		font-weight: 400; 
	}

.progress__bar {
	position: relative;
	flex: 1 0 auto;
}

	.progress__bar:before {
		position: absolute;
		bottom: 0;
		left: 0;
		
		width: 100%;
		height: 1em;
		z-index: 1;
		
		background-color: rgba(255, 255, 255, 0.2);
		content: "";
	}
	
	.progress__bar:after {
		position: absolute;
		bottom: 0;
		left: 0;
		
		width: var(--progress, 0);
		height: 1em;
		z-index: 2;
		
		background-color: var(--color__yellow);
		opacity: 0.8;
		content: "";
	}

.progress__boat {
	position: absolute;
	bottom: 0;
	left: var(--progress, 0);
	
	width: 2em;
	z-index: 3;
	margin-left: -1em;
	margin-bottom: -0.5em;
}

.progress__miles {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-0.3em);
	
	font-weight: 600;
	font-size: var(--size-1);
	color: var(--color__yellow);
}






@media (min-width: 48em) {
	dialog {
		max-width: 70ch;
		padding: var(--wrapper__paddingLarge);
	}
	
	.layout1__right,  
	.layout1__left, 
	.layout2__left {
		grid-column-start: 4;
	}
	
	.headline .pretitle, 
	.layout3 .pretitle, 
	.layout2 .pretitle, 
	.layout1 .pretitle {
		margin-left: calc((var(--pretitle__length) + 1rem) * -1);
	}
	
	#simptomi {
		padding-top: 1em;
	}
	
	.simptomi__list {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.izziv {
		display: grid;
		grid-template-columns: subgrid;
		align-items: center;
	}
	
	.izziv__inner {
		padding: 0;
		grid-column: 7 / span 5;
	}
	
	
	.headline__info {
		grid-column: 4 / -3;
	}
	
	.slogan {
		grid-column: 4 / var(--wrapper__gridOffsetRight);
	}
	
	
	.layout2__right a {
		font-size: var(--size7);
	}	
	
	.live__tracker iframe {
		aspect-ratio: 16 / 7;
	}
}

@media (min-width: 70em) {
	.gwr {
		top: 50%;
		right: var(--wrapper__padding);
		width: 6em;
	}
	
	.headline__info {
		grid-column: 5 / -4;
	}
	
	.layout1__left, 
	.layout2__left {
		margin-bottom: 0;
		grid-column-end: 8;
		padding-right: var(--wrapper__paddingLarge);
	}
	
	.layout1__right {
		grid-column-start: 8;
		grid-column-end: var(--wrapper__gridOffsetRight);
	}
	
	.sodelujte {
		margin-top: 0;
		padding: 0;
	}
	
	.layout2 {
		align-items: center;
	}
	
	.layout2__left {
		padding-top: calc(var(--wrapper__paddingLarge) * 2);
		padding-bottom: calc(var(--wrapper__paddingLarge) * 2);
	}
	
	.layout2__right {
		aspect-ratio: unset;
		margin-top: 0;
		grid-column-start: 8;
		grid-column-end: -1;
		align-self: stretch;
		padding-left: var(--wrapper__paddingLarge);
	}
	
	.layout3 {
		--flow-space: 0;
	}
	
	.layout3 .izziv:first-child {
		grid-column-end: 9;
	}
	
	.layout3 .izziv:last-child {
		grid-column-start: 9;
	}

	.izziv {
		align-items: start;
		padding-top: calc(var(--wrapper__paddingLarge) * 2);
		padding-bottom: calc(var(--wrapper__paddingLarge) * 2);
	}
	
	.layout3 .izziv:first-child .izziv__inner {
		grid-column-start: 4;
		grid-column-end: 8;
	}
	
	.layout3 .izziv:last-child .izziv__inner {
		grid-column-start: 2;
		grid-column-end: -2;
	}
	
	.simptomi__list {
		grid-template-columns: repeat(6, 1fr);
		font-size:
	}
	
	.simptomi article {
		font-size: var(--size-1);
	}
	
	.slogan {
		grid-column: 5 / span 4;
	}
	
	#story, 
	#preberi-zgodbo {
		align-items: start;
	}
	
	#story .layout1__left, 
	#preberi-zgodbo .layout1__left  {
		position: sticky;
		top: var(--wrapper__paddingLarge);
	}
	
	
	.progress {
		gap: 2em; 
	}
	
	.progress__boat {		
		width: 3em;
		margin-left: -1.5em;
	}
}

@media (min-width: 90em) {
	.izziv {
		min-height: 80svh;
	}
	
	.zgodba .layout1__left img {
		margin-top: 4em;
		width: 250%;
		margin-left: -120%;
		max-width: none;
	}
	
	.layout3 .izziv:first-child .izziv__inner {
		grid-column-start: 5;
	}
	
	.layout3 .izziv:last-child .izziv__inner {
		grid-column-start: 2;
		grid-column-end: -3;
	}
	
	.layout1__left, 
	.layout2__left {
		grid-column-start: 5;
		grid-column-end: 7;
		padding-right: 0;
	}
	
	.layout1__right {
		grid-column-end: -4;
	}
	
	.layout2__right .icon {
		font-size: 8em;
	}	
	
	.slogan {
		grid-column: 7 / span 3;
	}
}

@media (min-width: 110em) {
	.layout3 .izziv:first-child .izziv__inner {
		grid-column-start: 6;
	}
	
	.layout3 .izziv:last-child .izziv__inner {
		grid-column-start: 2;
		grid-column-end: -4;
	}
}



.spremljajVZivo {
	position: absolute;
	bottom: 5em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	min-width: 90%;
	
    align-items: center;
    justify-content: center;
	
	display: none;
}


.spremljajVZivo a {
    position: relative;
    padding: 0.6em 2.5em 0.6em 1em;
    background-color: var(--color__turkiz);
    font-weight: 600;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.spremljajVZivo a:after {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    border-radius: 50%;
    background-color: #ED2939;
    animation: liveResults 1.4s cubic-bezier(1, -1, 0, 2) infinite;
}

@media (max-width: 70em) {
	
	.spremljajVZivo {
		display: flex;
	}
}

.newsGrid {
	border-bottom: 1px solid var(--color__yellow);
}

@media (max-width: 480px) {
	
	.newsGrid {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}


.newsGrid__intro a {
	/*
	text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color__yellow);
    transition: text-decoration-color .3s;
	*/
	
    line-height: 1.4;
    color: #000;
    text-underline-offset: 0.15em;
}

.newsGrid__intro a:hover {
	color: var(--color__yellow);
}

.miniGall {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--wrapper__gridGap);
	margin-top: 1em;
	margin-bottom: 1em;
}

.miniGall__img {
	max-width: 8em;
}

.miniGall__img--last {
	position: relative;
}

.miniGall__img--last span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	font-weight: 600;
}

.miniGall__img--video {
	
	
}