:root {
	--color-blue-dark: #024EA0;
	--color-blue-mid: #4EC0E3;
	--color-blue-light: #BCE7F2;
}

* {
	box-sizing: border-box;
}
html {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	overscroll-behavior: none;
}

*:not(input) {
	user-select: none;
}

body {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	position: relative;
	font-family: 'WWF';
	font-size: 17px;
	color: var(--color-dark-grey);
	overscroll-behavior: none;
}
html.no-scroll,
body.no-scroll {
	overflow: hidden;
}

html.-popup-opened,
body.-popup-opened {
	position: fixed;
    overflow-y: scroll;
	width: 100%;
	height: 100%;
}

img {
	max-width: 100%;
	vertical-align: middle;
	display: inline-block;
}

h1, h2, h3, h4, h5,
h1 a, h2 a, h3 a, h4 a, h5 a {
	font-family: 'WWF';
	line-height: 0.8;
	color: var(--color-blue-dark);
	font-weight: normal;
	margin: 0px;
	hyphens: none;
	text-wrap: balance;
}
h1 {
	font-size: 50px;
	letter-spacing: 3px;
}
h2 {
	font-size: 40px;
	letter-spacing: 3px;
}
h3 {
	font-size: 30px;
	letter-spacing: 1px;
}
h4{
	font-size: 25px;
}
h5{
	font-size: 22px;
}

p {
	color: var(--color-blue-dark);
	font-family: 'WWF';
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 15px;
	margin-top: 0px;
	line-height: 1.3;
}
p:last-child,
p:last-of-type {
	margin-bottom: 0px;
}

a {
	text-decoration: none;
	font-family: 'WWF';
	color: var(--color-blue-dark);
}
a.underlined_link {
	text-decoration: underline;
}

input {
	font-family: 'WWF';
	font-size: 17px;
}
::placeholder {
	color: var(--color-blue-dark);
	opacity: 0.5;
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: var(--color-blue-dark);
	opacity: 0.5;
}

label {
	font-family: 'WWF';
}

:focus {
	outline: none;
}

pre {
	display: block;
	clear: both;
	text-wrap: wrap;
}

.flex_wrap {
	width: 100%;
	height: 0px;
}
.flex_expand {
	flex: 1 1;
}
.ratio-16x9,
img.ratio-16x9 {
	visibility: hidden;
	opacity: 0;
	height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
	width: auto;
}

/* SCROLLBAR */
/* width */
body ::-webkit-scrollbar {
	width: 5px;
}

/* Track */
body ::-webkit-scrollbar-track {
	background: var(--color-blue-mid);
}

/* Handle */
body ::-webkit-scrollbar-thumb {
	background: var(--color-blue-dark);
	border-radius: 0px;
	cursor: pointer;
}

/* Handle on hover */
body ::-webkit-scrollbar-thumb:hover {
	background: var(--color-blue-mid);
}

/* LAYOUT */
.preloader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-color: var(--color-blue-light);
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.preloader.-hide {
    opacity: 0 !important;
	visibility: hidden !important;
}

.site_wrapper {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--color-blue-mid);
}
.header_container {
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 145px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px 25px;
}
.content_wrapper {
	position: relative;
	z-index: 1;
	flex: 2;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.content_screens {
	width: 100%;
	height: 100%;
	position: relative;
}
.content_screen {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.content_screen.-show {
	visibility: visible;
	opacity: 1;
}
.content_screen_inner {
	position: relative;
	width: 100%;
	height: 100%;
}

/* BUTTON */
.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
    padding: 11px 60px 20px;
    color: #fff;
    background-color: var(--color-blue-dark);
    text-align: center;
    font-size: 70px;
    line-height: 1;
    vertical-align: bottom;
	cursor: pointer;
	white-space: nowrap;
}
.button.-square {
	width: 72px;
	height: 72px;
	padding: 0px;
}

/* ICONS */
.icon {
	width: 45px;
	height: 45px;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.icon.-back {
	margin-top: -3px;
	background-image: url('../images/icon_back.svg');
}
.icon.-menu {
	background-image: url('../images/icon_menu.svg');
}
.icon.-play {
	background-image: url('../images/icon_play.svg');
}
.icon.-pause {
	background-image: url('../images/icon_pause.svg');
}
.icon.-enter-fullscreen {
	background-image: url('../images/expand-solid.svg');
}
.icon.-leave-fullscreen {
	background-image: url('../images/compress-solid.svg');
}


/* FRONT */
body.front .header_container {
	position: relative;
	z-index: 1;
	justify-content: flex-start;
	height: 265px;
	background-color: #fff;
	padding: 0px 50px;
	overflow: hidden;
}
body.front .content_wrapper {
	position: relative;
	z-index: 3;
}
.logo {
	width: 230px;
}
.drop_back {
	position: absolute;
	z-index: 2;
	top: 0px;
	right: -60px;
	height: 1080px;
	width: 630px;
	background-image: url('../images/frontpage_drop_back.svg');
	background-repeat: no-repeat;
}
.drop_front {
	position: absolute;
	z-index: 4;
	top: 0px;
	right: -60px;
	height: 1080px;
	width: 465px;
	background-image: url('../images/frontpage_drop_front.png');
	background-repeat: no-repeat;
}

.drop_muki {
	position: absolute;
	z-index: 2;
	bottom: -170px;
	left: 350px;
	height: 520px;
	width: 390px;
	background-image: url('../images/drop_muki.svg');
	background-repeat: no-repeat;
}
.front_buttons {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 25px;
}

/* PUZZLE */
body.puzzle .site_wrapper {
	background-color: var(--color-blue-light);
}
body.puzzle .content_screens {
	z-index: 2;
}
body.puzzle .content_screen_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.puzzle_mesh {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-image: url('../images/puzzle_mesh.svg');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: 62% 0%;
}

.timer_contaienr {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 145px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('../images/timer_bg.svg');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: 50% 0%;
}
.timer {
	font-size: 60px;
	color: var(--color-blue-dark);
}

.header_menus {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-top: 75px;
}
.header_menu_left,
.header_menu_right {
	display: flex;
	align-items: center;
	gap: 15px;
}
.header_menu_left {
	justify-content: flex-start;
}
.header_menu_right {
	justify-content: flex-end;
}
.hamburger_menu {
	position: relative;
}
.hamburger_menu_items {
	position: absolute;
	top: calc(100% + 15px);
	right: 0px;
	background-color: var(--color-blue-mid);
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 159px;
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transform-origin: right top;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.hamburger_menu_items.-show {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	visibility: visible;
	opacity: 1;
}
.hamburger_menu_item {
	width: 100%;
	color: var(--color-blue-dark);
	font-size: 45px;
	text-align: right;
	white-space: nowrap;
}


.puzzle_image_selector {
	max-width: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 50px;
}
.puzzle_image_choice {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(520px + 20px);
	height: calc(293px + 20px);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: 50% 50%;
	border: 10px solid var(--color-blue-dark);
	cursor: pointer;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.puzzle_image_choice span {
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #024ea0;
    transition: all 300ms ease-out;
}
.puzzle_image_choice.-selected span {
	top: calc(100% + 15px);
}
.puzzle_image_choice::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 3px solid var(--color-blue-dark);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.puzzle_image_choice.-selected::before {
	visibility: visible;
	opacity: 1;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
}
.puzzle_image_selector.-selected .puzzle_image_choice:not(.-selected) {
	filter: grayscale(100%);
}
.start_puzzle {
	position: absolute;
    bottom: 35px;
	margin-left: 17px;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.puzzle_image_selector.-selected + .start_puzzle {
	visibility: visible;
	opacity: 1;
}

.puzzle_difficulty_selector {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
}
.puzzle_difficulty_choice {
	width: 300px;
}

.puzzle_container {
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 1920px;
    height: 935px;
    margin-top: 140px;
}
.puzzle_border {
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 1200px;
    height: 705px;
    margin-top: 140px;
	pointer-events: none;
	border: 5px solid var(--color-blue-dark);
}
.jigsaw-completed-img {
	position: absolute;
	width: 1300px;
	height: 731px;
	background-size: cover;
	background-position: 50% 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
} 
.jigsaw-completed-img.-show {
	visibility: visible;
	opacity: 1;
}
.add_time_form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
	margin-bottom: 50px;
	margin-top: 135px;
}
.add_time_form.-hide {
	visibility: hidden;
	pointer-events: none;
}
.add_leaderboard_entry {
	width: 400px;
}
.add_time_form input {
	width: 625px;
	font-size: 70px;
    height: 100px;
    border: none;
    outline: none;
    padding: 0px 45px 17px;
	color: var(--color-blue-dark);
}

.leaderboard_outer {
	width: 1050px;
	height: 715px;
	border: 5px solid var(--color-blue-dark);
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.leaderboard_wrapper {
	width: 100%;
	height: 100%;
	overflow: auto;
}
.leaderboard {
	width: 100%;
    border-collapse: collapse;
	font-size: 39px;
	line-height: 1;
	color: var(--color-blue-dark);
}
.leaderboard tr {
	background-color: transparent;
	-webkit-transition: all 3000ms ease-out;
	-moz-transition: all 3000ms ease-out;
	-ms-transition: all 3000ms ease-out;
	-o-transition: all 3000ms ease-out;
	transition: all 3000ms ease-out;
}
.leaderboard tr td {
	padding: 5px 25px 17px 25px;
}
.leaderboard tr td:last-child {
	text-align: right;
}
.leaderboard tr:nth-child(odd) {
	background-color: rgb(78 192 227 / 25%);
}
.leaderboard tr.-highlight,
.leaderboard tr.-highlight:nth-child(odd) {
	background-color: rgb(182 193 18 / 25%);
}
.leaderboard_buttons {
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: absolute;
	left: calc(100% + 25px);
	bottom: 0px;
}

.content_screen[data-reference="puzzle-game"].-paused {
	opacity: 0.5;
	pointer-events: none;
}

.puzzle_video {
	margin-top: 140px;
	position: absolute;
	z-index: 50;
	width: 960px;
	height: 540px;
	display: flex;
	justify-content: center;
	align-items: center;
	
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 1000ms ease-out;
	-moz-transition: opacity 1000ms ease-out;
	-ms-transition: opacity 1000ms ease-out;
	-o-transition: opacity 1000ms ease-out;
	transition: opacity 1000ms ease-out;
}
.puzzle_video.-show {
	visibility: visible;
	opacity: 1;
}
.puzzle_video_inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.puzzle_video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 1000ms ease-out;
	-moz-transition: opacity 1000ms ease-out;
	-ms-transition: opacity 1000ms ease-out;
	-o-transition: opacity 1000ms ease-out;
	transition: opacity 1000ms ease-out;
}
.puzzle_video video.-show {
	visibility: visible;
	opacity: 1;
}
.puzzle_skip_video {
	position: absolute;
	left: calc(100% + 60px);
    bottom: -35px;
	font-size: 44px;
    padding: 11px 45px 15px;
}
.puzzle_index {
	margin-top: -40px;
	width: 230px;
	height: 129px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 0%;
}