@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,700;0,900;1,200;1,400;1,500;1,700;1,900&family=Open+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap');

/* MAIN */
	* {
		scrollbar-color: #f0f0f0 white;
		-webkit-tap-highlight-color: transparent;
	}
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track {
		background-color: white;
	}
	::-webkit-scrollbar-thumb {
		background-color: #f0f0f0;
		border-radius: 4px;
	}

	html, body {
		font: normal 14px 'Open Sans';
		line-height: 1.4;
		color: #a0a0a0;
	}

	/* headers */
	h1 {
		font: bold 36px 'Montserrat';
	}
	h2 {
		font: bold 30px 'Montserrat';
	}
	h3 {
		font: bold 24px 'Montserrat';
	}
	h4 {
		font: bold 20px 'Montserrat';
	}
	h5 {
		font: bold 18px 'Montserrat';
	}
	h6 {
		font: bold 16px 'Montserrat';
	}

	h1, h2, h3, h4, h5, h6, p {
		width: 100%;
	}

	.header {
		font-size: 80px;
	}
	.subheader {
		text-transform: uppercase;
		font-size: 50px;
	}

	/* links */
	a {
		text-decoration: none;
		color: #4f87d0;
		font-weight: 600;
	}
	a.a-block {
		color: inherit;
	}

/* CONTAINERS / BOXES */
	.container {
		max-width: 1080px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.container-center {
		align-items: center;
	}
	.container-fullscreen {
		min-height: 100vh;
	}

	.box-12, .box-6, .box-4, .box-3, .box-2, .box-1 {
		position: relative;
		float: left;
		box-sizing: border-box;
		display: flex;
	}
	.box-12 {
		width: 8.333%;
	}
	.box-6 {
		width: 16.666%;
	}
	.box-4 {
		width: 25%;
	}
	.box-3 {
		width: 33.333%;
	}
	.box-2 {
		width: 50%;
	}
	.box-1 {
		width: 100%;
	}
	.pad-large {
		padding: 80px 100px;
	}
	.pad-medium {
		padding: 40px 50px;
	}
	.pad-small {
		padding: 15px 20px;
	}
	.pad-v-large {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.pad-v-medium {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.pad-v-small {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.pad-h-large {
		padding-left: 100px;
		padding-right: 100px;
	}
	.pad-h-medium {
		padding-left: 50px;
		padding-right: 50px;
	}
	.pad-h-small {
		padding-left: 15px;
		padding-right: 15px;
	}
	.center-content {
		justify-content: center;
		align-items: center;
	}
	.fill-content > * {
		flex-grow: 1;
	}

	@media only screen and (max-width:980px) {
		.header {
			font-size: 60px;
		}
		.subheader {
			font-size: 50px;
		}
		.box-12 {
			width: 16.666%;
		}
		.box-6 {
			width: 33.333%;
		}
		.box-4 {
			width: 50%;
		}
		.box-3, .box-2, .box-1 {
			width: 100%;
		}
		.swap-on-mobile .box-2:last-child {
			order: -1;
		}
	}

	@media only screen and (max-width:768px) {
		.header {
			font-size: 40px;
		}
		.subheader {
			font-size: 35px;
		}
		.box-12 {
			width: 25%;
		}
		.box-6 {
			width: 50%;
		}
		.box-4, .box-3, .box-2, .box-1 {
			width: 100%;
		}
		.pad-large {
			padding: 60px 80px;
		}
		.pad-medium {
			padding: 30px 40px;
		}
		.pad-small {
			padding: 10px 15px;
		}
	}

/* EFFECTS */
	.effect-lift {
		transition: all 0.5s ease-out;/*cubic-bezier(0,0,0,1);*/
		box-shadow: 0 0 0 transparent;
		transform: translate(0,0);
	}
	.effect-lift.effect-lift-filter {
		box-shadow: none;
		filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	}
	.effect-lift.effect-lift-text {
		box-shadow: none;
		text-shadow: 0 0 0 transparent;
	}
	.browser-firefox .effect-lift {
		/* firefox has best rendering */
		box-shadow: none;
		text-shadow: none;
		filter: drop-shadow(0 0 0 #d0d0d0) drop-shadow(0 0 0 transparent);
	}
	.effect-lift.effect-enabled,
	.effect-lift.effect-on-hover:hover,
	.effect-hover-target:hover .effect-lift.effect-on-hover {
		transform: translate(-2px,-4px);
		box-shadow: 2px 4px 6px rgba(0,0,0,0.5);
	}
	.effect-lift.effect-lift-filter.effect-enabled,
	.effect-lift.effect-lift-filter.effect-on-hover:hover,
	.effect-hover-target:hover .effect-lift.effect-lift-filter.effect-on-hover {
		box-shadow: none;
		filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
	}
	.effect-lift.effect-lift-text.effect-enabled,
	.effect-lift.effect-lift-text.effect-on-hover:hover,
	.effect-hover-target:hover .effect-lift.effect-lift-text.effect-on-hover {
		box-shadow: none;
		text-shadow: 2px 4px 6px rgba(0,0,0,0.5);
	}
	.browser-firefox .effect-lift.effect-enabled,
	.browser-firefox .effect-lift.effect-on-hover:hover,
	.browser-firefox .effect-hover-target:hover .effect-lift.effect-on-hover {
		/* firefox has best rendering */
		box-shadow: none;
		text-shadow: none;
		filter: drop-shadow(2px 4px 1px #d0d0d0) drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
	}

	h1.effect-lift,
	h2.effect-lift,
	h3.effect-lift,
	h4.effect-lift,
	h5.effect-lift,
	h6.effect-lift,
	p.effect-lift {
		color: white;
	}

	.effect-fade {
		opacity: 0;
		transition: all 0.5s ease-out;
	}
	.effect-fade.effect-enabled,
	.effect-fade.effect-on-hover:hover,
	.effect-hover-target:hover .effect-fade.effect-on-hover {
		opacity: 1;
	}

/* TEXT ALIGN */
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}
	.text-justify, .text-justify-center, .text-justify-right {
		text-align: justify;
	}
	.text-justify-center {
		text-align-last: center;
	}
	.text-justify-right {
		text-align-last: right;
	}

/* HEADER */
	header {
		display: flex;
	}
	header .navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	header .nav-logo,
	header .nav-mobile-button,
	header .nav-mobile-close {
		width: 40px;
		height: 40px;
	}
	header .nav-menu {
		display: flex;
		align-items: center;
	}
	header .navigation a {
		display: block;
		padding: 10px 12px;
		transition: all 0.3s ease;
		color: #d0d0d0;
		font: 500 14px 'Montserrat';
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	header .navigation .nav-logo {
		padding: 0;
		color: #d0d0d0;
	}
	header .navigation .nav-logo svg {
		display: block;
	}
	header .navigation:hover a {
		color: #b0b0b0;
	}
	header .navigation a:hover {
		color: #333333;
	}
	header .navigation .nav-logo:hover {
		color: #333333;
	}
	header .navigation .nav-mobile-button,
	header .navigation .nav-mobile-close {
		display: none;
	}

	@media only screen and (max-width:980px) {
		header .navigation .nav-logo,
		header .navigation:hover .nav-logo {
			position: relative;
			color: #d0d0d0;
			transform-origin: left top;
			z-index: 11;
		}
		header .nav-menu {
			position: fixed;
			z-index: 10;
			width: 100vw;
			height: 100vh;
			top: 0;
			left: 100vw;
			box-sizing: border-box;
			padding: 100px 20px 40px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overflow-y: auto;
			opacity: 0;
			background-color: white;
			transition: opacity 0.3s ease-out 0s, left 0s linear 0.3s;
		}
		header .navigation .nav-mobile-button,
		header .navigation .nav-mobile-close,
		header .navigation:hover .nav-mobile-button,
		header .navigation:hover .nav-mobile-close {
			display: block;
			color: #d0d0d0;
		}
		header .nav-menu .nav-mobile-close {
			position: absolute;
			color: #b0b0b0 !important;
			top: 10px;
			right: 15px;
		}
		header .nav-menu:target {
			transition: opacity 0.3s ease-out;
			opacity: 1;
			left: 0;
		}
		html.mobile-menu header .navigation .nav-logo {
			transform: scale(2);
			color: #b0b0b0;
		}
		header .nav-menu a {
			color: #b0b0b0;
			font-size: 28px;
			padding: 15px 10px;
		}
		header .nav-menu .nav-mobile-close {
			padding: 10px 12px;
		}
		html.mobile-menu {
			overflow: hidden;
		}
	}

/* FOOTER */
	footer {
		overflow: hidden;
		text-transform: uppercase;
		font: 500 16px 'Montserrat';
		letter-spacing: 0.1em;
		color: #c0c0c0;
	}

/* POPUPS */
	@keyframes popup-veil {
		0% {
			background-color: transparent;
		}
		100% {
			background-color: rgba(0,0,0,0.5);
		}
	}
	@keyframes popup-popup {
		0% {
			opacity: 0;
			transform: scale(0.8);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		z-index: 100;
	}
	.popup-veil {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: auto;
		animation-name: popup-veil;
		animation-duration: 0.5s;
		animation-timing-function: ease-out;
		animation-play-state: running;
		animation-fill-mode: forwards;
		transition: opacity 0.5s ease;
	}
	.popup-container .popup {
		margin: 40px 80px;
		background-color: white;
		border-radius: 5px;
		padding: 10px;
		box-shadow: 0 3px 10px black;
		animation-name: popup-popup;
		animation-duration: 0.5s;
		animation-timing-function: ease-out;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}
	html.disable-scroll {
		overflow: hidden;
	}

/* PAGE ITEMS */
	.pageitem {
		cursor: pointer;
		text-align: center;
		transition: all 0.5s ease-out;
		padding: 30px;
		border-radius: 20px 2px 20px 2px;
		margin: auto;
	}
	.pageitem:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 10px rgba(0,0,0,0.4);
	}
	.pageitem .pageitem-image {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
	}
	.pageitem .pageitem-image img {
		display: block;
		width: 100%;
	}
	.pageitem .pageitem-title {
		font: 600 26px 'Montserrat';
		margin: 20px 0 6px;
	}
	.pageitem .pageitem-description {
		margin: 10px 0;
	}

	.pageitem-buttons {
		margin-top: 20px;
	}
	.pageitem-buttons .button {
		display: inline-block;
		margin: 0 4px;
		padding: 10px 25px;
		text-align: center;
		min-width: 80px;
		border-radius: 6px;
		background-color: #2ea8e3;
		color: white;
		cursor: pointer;
	}
	.pageitem-buttons .button:hover {
		background-color: #4fbaee;
	}
	.pageitem-buttons .button:active {
		background-color: #3787ae;
	}

/* DARK MODE */

	@media only screen and (prefers-color-scheme: dark) {
		/* General */
		* {
			scrollbar-color: #202020 #303030;
		}
		body {
			background-color: #303030;
			color: #707070;
		}

		/* Header */
		header .navigation .nav-logo,
		header .navigation a {
			color: #404040;
		}
		header .navigation .nav-logo:hover {
			color: white;
		}

		header .navigation:hover a {
			color: #707070;
		}

		/* Lift effect */
		h1.effect-lift, h2.effect-lift, h3.effect-lift, h4.effect-lift, h5.effect-lift, h6.effect-lift, p.effect-lift {
			color: #383838;
		}

		/* Popups */
		.popup-container .popup {
			background-color: #303030;
		}

		.popup-design .wrapper .title {
			color: #606060;
		}

		/* Footer */
		footer {
			color: #505050;
		}
	}
	@media only screen and (max-width:980px) and (prefers-color-scheme: dark) {
		/* Mobile menu */
		header .nav-menu {
			background-color: #303030;
		}

		header .navigation .nav-logo,
		header .navigation .nav-mobile-button,
		header .navigation .nav-mobile-close,
		header .navigation:hover .nav-logo,
		header .navigation:hover .nav-mobile-button,
		header .navigation:hover .nav-mobile-close {
			color: #404040;
		}

		header .nav-menu a {
			color: #707070;
		}
	}