/* === Import styles === */

	@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');

	@import url(../css/normalize.min.css);
	@import url(../css/fontawesome-all.css);

	@import url(../css/csm-boxstyles.css);
	@import url(../css/csm-colors.css);
	@import url(../css/csm-columns.css);
	@import url(../css/csm-forms.css);
	@import url(../css/csm-others.css);
	@import url(../css/csm-tables.css);
	@import url(../css/csm-texts.css);
	@import url(../css/csm-tools.css);

/* === Custom styles === */
	:root {
		--ff1: 'Verdana', 'Geneva', sans-serif;
		--ff2: 'Rajdhani', sans-serif;
	}

	.cookielaw { font-size: .85em; text-align: center; position: fixed; padding: 0.8em 1em; line-height: 1.5em; left: 0; right: 0; bottom: 0; z-index: 9000; }

	.ff-01 { font-family: var( --ff1 ) ; }
	.ff-02 { font-family: var( --ff2 ) ; }

	header { position: fixed; top: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; }
	header nav a, header nav a:hover { color: currentColor !important; text-decoration: none !important; display: block; }
	header .logo { display: block; }
	header .logo svg { height: 2em; }

	.scrolled { background-color: hsla(var(--c2-h), var(--c2-s), var(--c2-l), .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

	.oversizelogotype { position: fixed; inset: 0 0 -2.5em 0; background-repeat: no-repeat; background-image: url("../img/ocsofi-logotype.svg"); background-size: 103%; background-position: 0 bottom; opacity: .06; z-index: 0; pointer-events: none; }

	/* = HERO = */
		.hero-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; z-index: 2; }
		.hero-wrap .hero-video { width: 100%; height: 100%; object-fit: cover; }

		.pulse { animation: pulse 2s infinite linear; }
		@-webkit-keyframes pulse {
			0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75), 0 0 0 0 rgba(255, 255, 255, .75); }
			20% { box-shadow: 0 0 0 .75em rgba(255, 255, 255, 0), 0 0 0 .375em rgba(255, 255, 255, .375); }
			40% { box-shadow: 0 0 0 .75em rgba(255, 255, 255, 0), 0 0 0 .75em rgba(255, 255, 255, 0); }
			100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
		}

		.jump { animation: jump 2s infinite ease; animation-delay: 1s; }
		@-webkit-keyframes jump {
			0% { transform: translateY(0em); }
			10% { transform: translateY(-.15em); }
			20% { transform: translateY(.15em); }
			40% { transform: translateY(0em); }
			100% { transform: translateY(0em); }
		}

	/* = SECTIONS = */
		.pagesection:not(.hero-wrap) { display: flex; align-items: center; justify-content: center; padding: 5em 0; }
		.pagesection:not(.hero-wrap) .container { z-index: 1; }

	.mapcontrol { position: absolute; right: 1em; top: 1em; z-index: 1; }
	.mapcontrol span { display: inline-block; padding: .5em; cursor: pointer; vertical-align: middle; }
	.mapcontrol svg { width: 2em; }

	#bigmap svg:not(.mapcontrol svg) { max-height: 90vh; width: auto; margin: 0 auto; display: block; }

	@media ( max-width: 1023px ) {
		body:not(.navoff) { overflow: hidden; }
		header { flex-wrap: wrap; }

		header .logo .close { pointer-events: none; position: absolute; width: 0; height: 0; }
		header .logo .close.visib { pointer-events: auto; inset: 0; width: auto; height: auto; }

		header nav.off { opacity: 0; height: 0; overflow: hidden; }
		header nav { display: flex; align-items: flex-end; flex-direction: column; justify-content: center; width: 100%; opacity: 1; height: calc(100vh - 4em); transition: all 0.15s linear; }

		header nav ul { ma height: calc( 100vh - 4rem ); float: right }
		header nav ul li { display: block !important; float: none; text-align: right; font-size: 2em; margin: 5vh 0 !important; }

		header nav li a span { display: block; position: absolute; right: 0; bottom: -.5em; opacity: 0; transform: translate(100%, 0) scale(.1); width: 2em; height: .1em; background: currentColor; pointer-events: none; }
		header nav li a:hover span, header nav li a:focus span, header nav li a.active span { opacity: 1; transform: translate(0, 0) scale(1); }

		/* = CONTACT = */
			.mapwrap { order: -1; }

	}

	@media ( min-width: 1023px ) {
		header nav li a { margin: 0 0.75em; padding: .35em 0; }

		header nav li a span { display: block; position: absolute; left: 50%; bottom: .1em; opacity: 0; transform: translate(-50%, 20px) scale(.1); width: 2em; height: .1em; background: currentColor; pointer-events: none; }
		header nav li a:hover span, header nav li a:focus span, header nav li a.active span { opacity: 1; transform: translate(-50%, 0px) scale(1); }

	}