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

html,body {
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}
html {
	background-color:white;
	overflow: hidden;
	overflow-y:visible;
	height: 100%;
}
body {
	min-height: 100%;
	overflow: hidden;
}
header {
	position: fixed;
	left: 0; top: 0;
	z-index: 200;
}
header section[data-label="header"]          {z-index: 500;}
header section[data-label="menu-show"]       {z-index: 400;}
header section[data-label="menu-hide"]       {z-index: 700;}
header section[data-label="menu"]            {z-index: 600;}
header section[data-label="menu-background"] {z-index: 300;}

header section[data-label="header"] {
	position: fixed;
	width: 100%;
	left: 50%;
	top: 0;
	pointer-events: none;
	transform: translateX(-50%);
}
header section[data-label="menu-background"],
header section[data-label="menu"] {
	position: fixed;
	left: 50%;
	top: 0;
	width: 100%;
	height: auto;
	transform: translateX(-50%);
}









/* MOBILE */

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

		header section[data-label="menu"] {
			transition:transform 0.3s ease;
		}
		header section[data-label="menu-show"],
		header section[data-label="menu-hide"] {
			position: fixed;
			left: 0;
			top: 0;
			width: 12.5%;
		}
		header section[data-label="menu-show"] a,
		header section[data-label="menu-hide"] a {
			display: block;
			float: right;
			height: 100%;
			aspect-ratio:1/1;
		}
		html[data-menu="0"] header section[data-label="menu"] { transform: translateX( -200vw); }
		html[data-menu="1"] header section[data-label="menu"] { transform: translateX(  -50%);}

		html                header section[data-label="menu-show"],
		html                header section[data-label="menu-hide"] { display: none; }
		html[data-menu="0"] header section[data-label="menu-show"],
		html[data-menu="1"] header section[data-label="menu-hide"] { display: block; }
	}

/* TABLET */

	@media screen and (min-width: 800px) and (max-width: 1199px) {

		header section[data-label="menu"] {
			transition:transform 0.3s ease;
		}
		header section[data-label="menu-show"],
		header section[data-label="menu-hide"] {
			position: fixed;
			left: 0;
			top: 0;
			width: 9%;
		}
		header section[data-label="menu-show"] a,
		header section[data-label="menu-hide"] a {
			display: block;
			float: right;
			height: 100%;
			aspect-ratio:1/1;
		}
		html[data-menu="0"] header section[data-label="menu"] { transform: translateX( -200vw); }
		html[data-menu="1"] header section[data-label="menu"] { transform: translateX(  -50%);}

		html                header section[data-label="menu-show"],
		html                header section[data-label="menu-hide"] { display: none; }
		html[data-menu="0"] header section[data-label="menu-show"],
		html[data-menu="1"] header section[data-label="menu-hide"] { display: block; }
	}


header nav ul {
	list-style: none;
	display: block;
	height: 100%;
}
header nav ul li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	height: 100%;
}
header nav ul li a {
	display: block;
	text-decoration: none;
	height: 100%;
}
header nav ul li:nth-child(1) a:before { width:10%; content:""; }
header nav ul li:nth-child(2) a:before { width:10%; content:""; }
header nav ul li:nth-child(3) a:before { width:10%; content:""; }
header nav ul li:nth-child(4) a:before { width:10%; content:""; }
header nav ul li:nth-child(5) a:before { width:10%; content:""; }
header nav ul li:nth-child(6) a:before { width:10%; content:""; }


section .hash-placeholder {
	outline: 1px dashed red;
	outline: none;
	position: absolute;
	width: 100%;
	height: 100px;
	top: -20vh;
}

/* MOBILE */	                        @media screen and (max-width:  799px) { section .hash-placeholder { top: -10vh;} }
/* TABLET */	@media screen and (min-width:  800px) and (max-width: 1199px) { section .hash-placeholder { top: -10vh; } }
/* DESKTOP */	                        @media screen and (min-width: 1200px) { section .hash-placeholder { top: -5vh; } }

footer {}
main {
	display: block;
	position: relative;
	left: 50%;
	transform:translateX(-50%);
	max-width: 1440px;
	min-height: 100vh;
}
main .preload-images {}
main .preload-images > img {
	position: absolute;
	width: 1px;
	height: 1px;
}
main .preload-images .mobile,
main .preload-images .desktop,
main .preload-images .desktop { display:none; }

@media screen                         and (min-width: 1200px) { main .preload-images .mobile  { display:block; } }
@media screen and (min-width:  800px) and (max-width: 1199px) { main .preload-images .tablet  { display:block; } }
@media screen                         and (max-width:  799px) { main .preload-images .desktop { display:block; } }

section {
	width: 100%;
	height: auto;
	position: relative;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

	section[data-label="menu"]             { }
	section[data-label="header"]           { }
	section[data-label="startpage"]        { }

	html                  header section[data-label="header"]          { transition:all 0.3s ease; }
	html                  header section[data-label="menu-background"] { transition:all 0.3s ease; }


/* DESKTOP */

	@media screen and (min-width: 1200px) {

		section[data-label="menu"]             { }
		section[data-label="menu"] nav {
			position: absolute;
			inset:0;
			text-align: center;
		}
		section[data-label="menu"] nav ul   {list-style: none;height: 100%;margin: 0;padding: 0;font-size: 0;line-height: 0;text-align: center;display: inline-block;width: 81%;}
		section[data-label="menu"] nav ul li { display:inline-block; list-style: none; height: 100%; margin: 0; padding: 0; }
		section[data-label="menu"] nav ul li a { display:block;  }

		section[data-label="menu"] nav ul li:nth-child(1) {width: calc(100% / 6 - 12%);background-color:rgba(255,0,0,0.5);}
		section[data-label="menu"] nav ul li:nth-child(2) {width: calc(100% / 6 - 1%);background-color:rgba(255,0,0,0.2);}
		section[data-label="menu"] nav ul li:nth-child(3) {width: calc(100% / 6 - 1%);background-color:rgba(0,255,195,0.2);}
		section[data-label="menu"] nav ul li:nth-child(4) {width: calc(100% / 6 + 10%);background-color:rgba(75,0,255,0.2);}
		section[data-label="menu"] nav ul li:nth-child(5) {width: calc(100% / 6 - 2%);background-color:rgba(103,255,0,0.2);}
		section[data-label="menu"] nav ul li:nth-child(6) {width: calc(100% / 6 - 6%);background-color:rgba(255,0,35,0.2);}
		section[data-label="menu"] nav ul li:nth-child(7) { width:  7%; background-color:rgba(0,30,255,0.20); }
		section[data-label="menu"] nav ul li:nth-child(8) { width:  7%; background-color:rgba(137,255,0,0.20); }
		section[data-label="menu"] nav ul li:nth-child(9) { width:  7%; background-color:rgba(255,243,0,0.20); }

		section[data-label="menu"] nav ul li {outline: 0px dotted red;ba;background-color: transparent!important;}

		.links {
			position: relative;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			width: 20%;
			top: 3svh;
			height: 51%;
			background-color: #56eeec5e;
			left: 50%;
			background-color: transparent;
			transform: translateX(-50%);
		}
		.links a {
			display: block;
			outline: 1px dashed red;
			outline: none;
			width:100%;
			height: 100%;
		}
		html[data-scroll="1"] header section[data-label="menu-background"] { background-image: none; }
		html[data-scroll="0"] header section[data-label="header"] {}
		html[data-scroll="1"] header section[data-label="header"] { background-image:none; background: linear-gradient(90deg, #f29002,#7d2128); height: 55px; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.54); }
	}

/* TABLET */

	@media screen and (min-width: 800px) and (max-width: 1199px) {
		section[data-label="menu"]             { }
		section[data-label="menu"] nav {
			position: absolute;
			inset:0;
			text-align: center;
		}
		section[data-label="menu"] nav ul    {
			position: relative;
			list-style: none;
			height: 54%;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			text-align: left;
			top: 9%;
			/* outline: 1px solid blue; */
			left: 10%;
			width: 45%;
		}
		section[data-label="menu"] nav ul li { 
			display:block;
			list-style: none;
			width: 100%;
			height: 4.4%;
			margin: 0;
			padding: 0;
		}
		section[data-label="menu"] nav ul li a { display:block;  }

		section[data-label="menu"] nav ul li:nth-child(1) {
			background-color:rgba(0,255,147,0.20);
			position: relative;
			left: 0;
			top:0;
			width: 100%;
		}
		section[data-label="menu"] nav ul li:nth-child(2) { background-color:rgba(255,0,0,0.1); }
		section[data-label="menu"] nav ul li:nth-child(3) { background-color:rgba(0,255,195,0.1); }
		section[data-label="menu"] nav ul li:nth-child(4) { background-color:rgba(75,0,255,0.1); }
		section[data-label="menu"] nav ul li:nth-child(5) { background-color:rgba(103,255,0,0.1); }
		section[data-label="menu"] nav ul li:nth-child(6) { background-color:rgba(255,0,35,0.1); }
		section[data-label="menu"] nav ul li:nth-child(7) { background-color:rgba(187,0,255,0.10); }
		section[data-label="menu"] nav ul li:nth-child(8) { background-color:rgba(0,171,255,0.10); }
		section[data-label="menu"] nav ul li:nth-child(9) { background-color:rgba(35,255,0,0.10); }

		section[data-label="menu"] nav ul li {
			outline: 1px dotted red;
			outline: 0;
			background-color: transparent!important;
			height: calc(100% / 5);
		}
		.links {
			position: relative;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			width: 36%;
			top: 3svh;
			height: 51%;
			background-color: #56eeec5e;
			left: 50%;
			background-color: transparent;
			transform: translateX(-50%);
		}
		.links a {
			display: block;
			outline: 1px dashed red;
			outline: none;
			width:100%;
			height: 100%;
		}
		html[data-scroll="0"] header section[data-label="menu-background"] {}
		html[data-scroll="1"] header section[data-label="menu-background"] { background-image:none; background: linear-gradient(90deg, #f29002,#7d2128); height: 12vw; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.54); }
	}

/* MOBILE */

	@media screen and (max-width: 799px) {
		section[data-label="header"]           {/* background-color: black; */}
		section[data-label="menu"] nav {
			position: absolute;
			inset:0;
		}
		section[data-label="menu"]             { }
		section[data-label="menu"] nav {
			position: absolute;
			inset:0;
		}
		section[data-label="menu"] nav ul    {
			position: relative;
			list-style: none;
			height: 43%;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			text-align: left;
			top: 6.7%;
			/* outline: 1px solid blue; */
		}
		section[data-label="menu"] nav ul li { 
			display:block;
			list-style: none;
			width: 100%;
			height: 4.4%;
			margin: 0;
			padding: 0;
		}
		section[data-label="menu"] nav ul li a { display:block;  }

		section[data-label="menu"] nav ul li:nth-child(1) {
			background-color:rgba(0,255,147,0.20);
			position: relative;
			left: 0;
			top:0;
			width: 100%;
		}
		section[data-label="menu"] nav ul li:nth-child(2) { background-color:rgba(255,0,0,0.1); }
		section[data-label="menu"] nav ul li:nth-child(3) { background-color:rgba(0,255,195,0.1); }
		section[data-label="menu"] nav ul li:nth-child(4) { background-color:rgba(75,0,255,0.1); }
		section[data-label="menu"] nav ul li:nth-child(5) { background-color:rgba(103,255,0,0.1); }
		section[data-label="menu"] nav ul li:nth-child(6) { background-color:rgba(255,0,35,0.1); }
		section[data-label="menu"] nav ul li:nth-child(7) { background-color:rgba(187,0,255,0.10); }
		section[data-label="menu"] nav ul li:nth-child(8) { background-color:rgba(0,171,255,0.10); }
		section[data-label="menu"] nav ul li:nth-child(9) { background-color:rgba(35,255,0,0.10); }

		section[data-label="menu"] nav ul li {
			outline: 1px dotted red;
			outline: 0;
			background-color: transparent!important;
			height: calc(100% / 5);
		}
		.links {
			position: relative;
			margin: 0;
			padding: 0;
			font-size: 0;
			line-height: 0;
			width: 80%;
			top: 5svh;
			height: 60%;
			background-color: #56eeec5e;
			left: 10%;
			background-color: transparent;
		}
		.links a {
			display: block;
			outline: 1px dashed red;
			outline: none;
			width:100%;
			height: 100%;
		}
		.links a[data-label="ins"] {}
		.links a[data-label="fcb"] {}
		.links a[data-label="web"] {}
		.links a[data-label="wsh"] {}
		
		html[data-scroll="0"] header section[data-label="menu-background"] {}
		html[data-scroll="1"] header section[data-label="menu-background"] { background-image:none; background: linear-gradient(90deg, #f29002,#7d2128); height: 12vw; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.54); }
	}


@media screen                        and (min-width: 1200px) {	/* DESKTOP */	}
@media screen and (min-width: 800px) and (max-width: 1199px) {	/* TABLET */	}
@media screen                        and (max-width: 799px) {	/* MOBILE */	}


/* DESKTOP */

	@media screen and (min-width: 1200px) {
		header section[data-label="header"] {max-width: 1440px;}
		header section[data-label="menu"] {max-width: 1440px;}
		header section[data-label="menu-background"] { max-width: 1440px; }
		header section[data-label="menu-background"]:before {
			display: block;
			z-index: -1;
			content:"";
			position: absolute;
			background-color: black;
			top: 0;
			bottom: 0;
			left: -100vw;
			right: -100vw;
			display: none;
		}
	}
	
/* TABLET */

	@media screen and (min-width: 800px) and (max-width: 1199px) {
		section[data-label="gallery"] .scroller {
			position: absolute;
			width: 100vw;
			top: 40%;
			overflow-x: auto;
			overscroll-behavior: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
		}
		section[data-label="gallery"] .scroller section[data-label="gallery-items"] {
			width: 300vw;
			scroll-snap-align: center;
			/* scroll-snap-stop: always; */
			/* overscroll-behavior-x: contain; */
			scroll-snap-stop: always;
		} 
	}

/* MOBILE */

	@media screen and (max-width: 799px) {
		section[data-label="gallery"] .scroller {
			position: absolute;
			width: 100vw;
			top: 40%;
			overflow-x: auto;
			overscroll-behavior: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
		}
		section[data-label="gallery"] .scroller section[data-label="gallery-items"] {
			width: 300vw;
			scroll-snap-align: center;
			/* scroll-snap-stop: always; */
			/* overscroll-behavior-x: contain; */
			scroll-snap-stop: always;
		} 
	}
	
	
	
section[data-label="startpage"]:before   {
	display: block;
	z-index: -1;
	content:"";
	position: absolute;
	background-color: transparent;
	top: 0; bottom: 0;
	left: -100vw;
	right: -100vw;
}