.no-scroll
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*
	colors
*/

.bg-green-light
{
	background-color: var(--color-green-light);
	color: var(--color-white);
}
	.bg-green-light h2
	{
		color: var(--color-green-darkest);
	}

.bg-green-dark
{
	background-color: var(--color-green-dark);
	color: var(--color-white);
}

.bg-green-darkest
{
	background-color: var(--color-green-darkest);
	color: var(--color-white);
}

.bg-white
{
	background-color: var(--color-white);
	color: var(--color-green-darkest);
}

.bg-green-light .highlight
{
	color: var(--color-white);
}
.bg-green-dark .highlight
{
	color: var(--color-green-lightest);
}
.bg-green-darkest .highlight
{
	color: var(--color-green-lightest);
}
.bg-white .highlight
{
	color: var(--color-green-light);
}

/*
	buttons
*/

.btn
{
	color: var(--color-white);
	background-color: var(--color-green-dark);
	border-color: var(--color-green-dark);
	text-decoration: none;
	font-family: var(--font-family-body);
	cursor: pointer;
}
	.btn:hover
	{
		background: var(--color-green-light);
		color: var(--color-white);
		border-color: var(--color-green-light);
	}

.btn.green-light
{
	color: var(--color-white);
	background-color: var(--color-green-light);
}
	.btn.green-light:hover
	{
		color: var(--color-white);
		background-color: var(--color-green-dark);
	}

.btn.glass
{
	color: var(--color-white);
	background-color: rgba(255, 255, 255, .2);
}
	.btn.glass:hover
	{
		color: var(--color-white);
		background-color: rgba(255, 255, 255, .33);
	}

.btn-circle {
	display: flex;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 20px;
}

.btn-round {
	display: inline-flex;
	flex-basis: auto;
	align-items: center;
	height: 45px;
	width: fit-content;
	padding: 0 22px;
	border-radius: 23px;
	font-family: var(--font-family-body);
	font-size: .8em;
	letter-spacing: .5px;
	font-weight: bold;
	line-height: 1em;
	text-transform: uppercase;
	cursor: pointer;
}
.btn-round .icon {
	font-size: 1em;
	line-height: 1em;
}
.btn-round .text
{
	margin:0 10px;
}

.btn-round.darkest
{
	background-color: var(--color-green-darkest);
	border-color: var(--color-green-darkest);
	color: var(--color-white);
}
	.btn-round.darkest:hover
	{
		background-color: var(--color-green-dark);
		border-color: var(--color-green-dark);
	}

/*
	common styles
*/

#stage
{
	width: 100%;
	position: relative;
}
	#container
	{
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
	}
	.wrapper
	{
		padding: var(--content-padding);
	}
	.subtitle
	{
		font-family: var(--font-family-body);
		font-size: .8em;
		letter-spacing: .5px;
		font-weight: bold;
		line-height: 1em;
		text-transform: uppercase;
		margin-bottom: var(--content-gap);
	}
	.overlay
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
	}

/*
	nav
*/

#nav
{
	display: flex;
	width: 100%;
	height: 100px;
	background-color: var(--color-white);
	color: var(--color-green-light);
	align-items: center;
}
	#nav-logo
	{
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		#nav-logo svg
		{
			width: 70%;
		}
			#nav-logo path
			{
				fill: var(--color-green-light);
			}

/*
	sections
*/

section.hero
{
	width: 100%;
	min-height: 50vw;
	aspect-ratio: 2 / 1;
	position: relative;
}
	section.hero .front,
	.square.image .front
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;

		color: var(--color-white);

		display: flex;
		justify-content: center;
		align-items: center;
	}
	section.hero .front
	{
		align-items: center;
		justify-content: left;
		position: relative;
	}
		section.hero .front .wrapper
		{
			width: 100%;
    	max-width: 50vw;
		}
		section.hero .front h1
		{
			font-size: 3.2em;
		}
		section.hero .bg .image
		{
			background-image: url('../static/img/hero-bg-2.jpg');
		}

	section.hero .bg,
	.square.image .bg
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
		section.hero .bg .image,
		.square.image .bg .image
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;

			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
		}

section#content_logokimara
{
	background-color: var(--color-grey);
}

	#logo-grid
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
		#logo-grid .logo-item
		{
			width: 25vw;
			max-width: 180px;
			aspect-ratio: 1 / 1;
			background-size: 80%;
			background-color: var(--color-white);
			background-position: 50% 50%;
			background-repeat: no-repeat;
			margin: 10px;
		}

section.content-row
{
	display: flex;
}
	section.content-row:nth-child(odd)
	{
		flex-direction: row-reverse;
	}

div.square
{
	width: 50%;
	aspect-ratio: 1 / 1;
	position: relative;
}

.video-open
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
	.video-open--icon
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: var(--color-green-light);
		font-size: 1.5em;
		margin-bottom: 20px;
		cursor: pointer;

		position: relative;
		z-index: 1;
	}
	.video-open--glow.green-glow
	{
		width: 150px;
		height: 150px;
		transform: translate(0, -25px);
		left: auto;
	}
	.video-open:hover .video-open--icon
	{
		background-color: var(--color-green-dark);
	}

section#content_cta
{
	background-color: var(--color-white);
}
	section#content_cta .full
	{
		width: 100%;
		text-align: center;
	}
	section#content_cta #cta-qrcode
	{
		display: inline-block;
		width: 200px;
		height: 200px;
		background: url('../static/img/ohjaus_qr_code.png') no-repeat 50% 50%;
		background-size: contain;
		display: none;
	}

/*
	language dropdown ui
*/

#lang-change
{
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	bottom: 80px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: calc(var(--content-gap) + 2px);
}

.lang-ui
{
	display: inline-flex;
	flex-direction: column;
	min-width: 240px;
}
	.lang-ui--header
	{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		padding: calc(var(--content-gap) / 2);
		background-color: var(--color-green-light);
		color: var(--color-white);

		font-size: .8em;
		letter-spacing: .5px;
		font-weight: bold;
		line-height: 1em;
		text-transform: uppercase;

		border-top-left-radius: var(--content-gap);
		border-top-right-radius: var(--content-gap);
	}
	.lang-ui--dropdown
	{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		padding: calc(var(--content-gap) / 2);
		border-bottom-left-radius: var(--content-gap);
		border-bottom-right-radius: var(--content-gap);
		background-color: var(--color-white);
	}
		.lang-ui--dropdown select
		{
			border: 0;
			font-family: var(--font-family-body);
			font-size: 1em;
			min-width: 190px;
		}
	
/*
	footer
*/

footer
{
	color: var(--color-green-dark);
	font-size: .8em;
}
	footer .wrapper
	{
		min-height: 260px;
		display: flex;
		align-items: center;
		justify-content: start;
	}
	footer  a
	{
		color: var(--color-green-dark);
	}
	footer .s-logo
	{
		margin-right: var(--content-gap);
	}
		footer .s-logo path
		{
			fill: var(--color-green-dark);
		}
	footer .disclaimer
	{
		display: flex;
		margin-left: auto;
	}
		footer .disclaimer-icon
		{
			margin-right: 10px;
		}
			footer .disclaimer-icon path
			{
				fill: var(--color-green-dark);
			}
/*
	video player
*/

#stage-video
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 88;
	background: var(--color-green-darkest);
	display: none;
}
	#stage-video .video-close
	{
		position: absolute;
		bottom: calc(var(--content-gap) * 3);
		left: calc(var(--content-gap) * 3);
		width: 50px;
		height: 50px;
		z-index: 9;
	}

	#videoplayer
	{
		display: flex;
    justify-content: center;
    align-items: center;
		width: 100%;
    height: 100%;
		overflow: hidden;
		position: relative;
	}
			#videoplayer video
			{
				position: absolute;
			}

	#video-ui
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
	}
		#video-ui--time
		{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;

			color: var(--color-white);
			bottom: 0;
			left: 0;
			width: 100%;
		}
			#video-time
			{
				width: 140px;
				font-size: .8em;
				line-height: 1em;
				display: none;
			}
			#video-progress
			{
				position: relative;
				width: 100%;
				height: 6px;
			}
				#video-progress--bar
				{
					position: absolute;
					z-index: 1;
					width: 100px;
					height: 100%;
					background-color: var(--color-green-light);
				}
				#video-progress--bg
				{
					position: absolute;
					z-index: 0;
					width: 100%;
					height: 100%;
				}

	#video-title
	{
		position: absolute;
		transform: translateX(-50%);
		width: 260px;
		max-width: calc(100vw - 100px);
		color: var(--color-white);
		text-align: center !important;
		line-height: 1.3em;
		margin-top: -15px;
	}
	#video-modal-toggle
	{
		position: absolute;
		z-index: 5;
		top: 50%;
		left: 75%;
		direction: ltr !important;
	}
		#video-modal-toggle .green-light
		{
			position: relative;
			z-index: 1;
			width: 60px;
			height: 60px;
			transform: translate(-50%, -50%);
		}
		.green-glow
		{
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			transform: translate(-50%, -50%);
			width: 125px;
			height: 125px;
			border-radius: 50%;
			background-color: var(--color-green-lightest);
			opacity: .25;
		}

	#video-modal
	{
		position: absolute;
		z-index: 6;
		top: 50%;
		right: var(--content-gap);
		transform: translateY(-50%);
		width: 640px;
		height: auto;
		max-width: 50%;
		max-height: calc( 100vh - calc(var(--content-gap) * 2) );
		padding: var(--content-gap);
		border-radius: var(--content-gap);

		display: none;
	}
			#video-modal-close
			{
				position: absolute;
				top: 10px;
				right: 10px;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;

				cursor: pointer;
			}
				#video-modal-close:hover
				{
					background-color: var(--color-green-dark);
				}

	.video-ai-disclaimer
	{
		position: absolute;
		top: var(--content-gap);
		right: var(--content-gap);
		width: auto;
		text-align: right;
		color: var(--color-white);
		opacity: .5;
		font-size: .8em;
	}

/*
	TOUCHSCREEN STYLES
*/

body.touchscreen #nav
{
	display: none;
}
body.touchscreen section.hero
{
	aspect-ratio: 1 / 1;
	max-height: 100vh;
}
body.touchscreen section.hero .bg .image
{
	background-image: url('../static/img/hero-bg-3.jpg');
}
body.touchscreen section.hero .overlay
{
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
body.touchscreen section.hero .front
{
	align-items: end;
	justify-content: center;
	text-align: center;
}
body.touchscreen section.hero .front .wrapper
{
	padding-bottom: calc(var(--content-gap) * 3);
}
body.touchscreen #logo-grid .logo-item
{
	max-width: 110px;
	background-size: 90%;
}
body.touchscreen #video-modal
{
	right: unset;
	left: 50%;
	transform: translate(-50%, 0%);
	top: unset;
	bottom: 250px;
	max-width: calc( 100vw - calc(var(--content-gap) * 2) );
}
body.touchscreen #video-modal-toggle
{
	top: unset;
	left: 50%;
	bottom: calc(200px + 10%);
}
body.touchscreen #video-modal-toggle .btn-circle
{
	width: 80px;
	height: 80px;
	font-size: 1.3em;
}
body.touchscreen #stage-video .video-close
{
	bottom: calc(var(--content-gap) * 3);
	left: calc(var(--content-gap) * 3);
	width: 80px;
	height: 80px;
	font-size: 1.3em;
}
body.touchscreen section#content_cta #cta-qrcode
{
	display: inline-block;
}
body.touchscreen section#content_cta #cta-button
{
	display: none;
}

@media only screen and (max-width: 960px) {

	section.content-row
	{
		flex-direction: column-reverse !important;
	}
	div.square
	{
		width: 100%;
		min-height: 360px;
		aspect-ratio: unset;
	}
	#lang-change
	{
		top: auto;
		bottom: 70px;
	}
	section.hero .front h1
	{
		font-size: 2.2em;
	}
	section.hero .front .wrapper
	{
		max-width: 760px
	}
	section.hero
	{
		aspect-ratio: unset;
		max-height: none;
	}
		section.hero .bg .image
		{
			background-image: url('../static/img/hero-bg-3.jpg');
		}
		section.hero .overlay
		{
			background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
		}
		section.hero .front
		{
			align-items: end;
			justify-content: center;
			text-align: center;
		}
		section.hero .front .wrapper
		{
			padding-top: 420px;
			padding-bottom: calc(var(--content-gap) * 3);
		}
	footer .wrapper
	{
		min-height: 0;
		padding-bottom: 200px;
	}

	#video-modal
	{
		right: unset;
		left: 50%;
		transform: translate(-50%, 0%);
		top: unset;
		bottom: 250px;
		max-width: calc( 100vw - calc(var(--content-gap) * 2) );
	}
	#video-modal-toggle
	{
		top: unset;
		left: 50%;
		bottom: calc(130px + 10%);
	}
}

@media only screen and (max-width: 640px) {

	#nav
	{
		height: 60px;
	}
		#nav-logo
		{
			width: 60px;
			height: 60px;
		}
	#stage-video .video-close
	{
		width: 45px;
		height: 45px;
	}
	.video-ai-disclaimer
	{
		height: 45px;
	}
			.video-disclaimer-text
			{
				font-size: .7em;
			}

	#video-modal
	{
		padding: var(--content-padding);
		border-radius: var(--content-padding);
		bottom: 170px;
	}
		#lang-change
		{
			bottom: 40px;
			border-radius: calc(var(--content-padding) + 2px);
			min-width: 0;
		}
		.lang-ui--header
		{
			height: 45px;
			padding: 0 var(--content-padding);
			
   	 	border-top-left-radius: var(--content-padding);
    	border-top-right-radius: var(--content-padding);
		}
		.lang-ui--dropdown
		{
			height: 45px;
			padding: 0 var(--content-padding);

			border-bottom-left-radius: var(--content-padding);
    	border-bottom-right-radius: var(--content-padding);
		}
		.lang-ui--dropdown select
		{
			min-width: 0;
		}
	footer .wrapper
	{
		min-height: 0;
		padding-bottom: 160px;
	}
}