/* SETUP */

:root{
	--color-bg-light: #d8e9f6;
	--color-bg-light2: #f0f7ff;
	--color-bg-dark: #322c49;
	--color-bg-dark2: #42334e;
	--color-glass-light: #fff;
	--color-glass-light2: #e7f5ff;
	--color-glass-dark: #082141;
	--color-glass-dark2: #1e3340;
	--color-text-light: #e7edf2;
	--color-text-light2: #b8c2cc;
	--color-text-dark: #434249;
	--color-text-dark2: #8a8293;
	--color-accent-light: #ea8cd9;
	--color-accent-dark: #9e1e73;

	--padding-small: 4px;
	--padding-medium: 8px;
	--padding-large: 16px;

	--transition-time: 0.4s;
	--transition-timing: ease-in-out;

	--roundness: 32px;
	--blur-light: 2px;
	--blur-medium: 5px;
	--blur-high: 10px;
	--shadow-glass-pane: 
		1px 1px 30px rgba(0,0,0,0.25),
		inset 0px 0px 3px var(--glass-edge)
	;
	
	--utility-accent: var(--color-accent-light);
	--bg-gradient: linear-gradient(225deg, rgba(240,247,255,1) 0%, rgba(216,233,246,1) 15%, rgba(216,233,246,1) 50%, rgba(216,233,246,0) 100%);
	--glass-gradient: linear-gradient(45deg, rgba(231,245,255,0.5) 15%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.25) 55%, rgba(231,245,255,0.5) 75%);
	--glass-edge: rgba(255, 255, 255, 0.66);
	--glass-edge-higlight: 1px solid rgba(255,255,255,0.25);
	--text-color: var(--color-text-dark);
	--text-color-alternate: var(--color-text-dark2);
	--text-link-color: var(--color-text-light);
	--text-link-bg: var(--color-text-dark2);
	--imgBg: var(--color-bg-light);
	--img-shadow: 1px 1px 15px rgba(0,0,0,0.25);
}

@media (prefers-color-scheme: dark) {
	:root{
		--utility-accent: var(--color-accent-dark);
		--bg-gradient: linear-gradient(225deg, rgba(66,51,78,1) 0%, rgba(50,44,73,1) 15%, rgba(50,44,73,1) 50%, rgba(50,44,73,0) 100%);
		--glass-gradient: linear-gradient(45deg, rgba(30,51,64,0.5) 15%, rgba(8,33,65,0.25) 30%, rgba(8,33,65,0.25) 50%, rgba(30,51,64,0.5) 75%);
		/*--glass-edge: rgba(8, 33, 65, 0.66);*/
		--glass-edge-higlight: 1px solid rgba(0,0,0,0.25);
		--text-color: var(--color-text-light);
		--text-color-alternate: var(--color-text-light2);
		--text-link-color: var(--color-text-dark);
		--text-link-bg: var(--color-text-light2);
		--imgBg: var(--color-bg-dark);
	}
}

*,*:before,*:after{
	box-sizing: border-box;
}

@media screen and (min-width: 768px){
	:root{
		--padding-small: 8px;
		--padding-medium: 16px;
		--padding-large: 32px;

		--roundness: 64px;

		--bg-gradient: linear-gradient(90deg, rgba(240,247,255,1) 0%, rgba(216,233,246,1) 15%, rgba(216,233,246,1) 50%, rgba(216,233,246,0) 100%);
	}

	@media (prefers-color-scheme: dark) {
		:root{
			--bg-gradient: linear-gradient(90deg, rgba(66,51,78,1) 0%, rgba(50,44,73,1) 15%, rgba(50,44,73,1) 50%, rgba(50,44,73,0) 100%);
		}
	}

}

@media screen and (min-width: 1280px){
	:root{
		--padding-small: 16px;
		--padding-medium: 32px;
		--padding-large: 64px;
	}
}

/* DEBUG */

.debugBG{
	background: #eee url('data:image/svg+xml,\
   <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"         fill-opacity=".25" >\
            <rect x="200" width="200" height="200" />\
            <rect y="200" width="200" height="200" />\
            </svg>');
background-size: 30px 30px;
background-attachment: fixed;
}

/* TYPOGRAPHY */

@font-face {
  font-family: customFont;
  src: url(BioRhyme-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: customFont;
  src: url(BioRhyme-ExtraBold.ttf);
  font-weight: bold;
}

html{
	font-size: 14px;
	font-family: customFont, sans-serif;
	color: var(--text-color);
}

h1{
	margin: 0 0 2rem 0;
	font-size: 2rem;
	line-height: 1.75rem;
	color: var(--text-color-alternate);
	font-weight: bold;
	text-transform: uppercase;
}

h2,h3{
	margin: 2rem 0 1rem 0;
	font-size: 1.25rem;
	font-weight: normal;
}

h3{
	font-weight: normal;
}

h4,h5,h6{
	margin: 1rem 0;
	font-size: 1.1rem;
	font-weight: 
}

h5{
	font-weight: normal;
}

h6{
	font-size: 1rem;
}

h1~h2,h2~h2,h3~h2,h4~h2,h5~h2,h6~h2,
h1~h3,h2~h3,h3~h3,h4~h3,h5~h3,h6~h3,
h1~h4,h2~h4,h3~h4,h4~h4,h5~h4,h6~h4,
h1~h5,h2~h5,h3~h5,h4~h5,h5~h5,h6~h5,
h1~h6,h2~h6,h3~h6,h4~h6,h5~h6,h6~h6{
	margin-top: 1rem;
}

h2:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{
	margin-top: 0;
}

p{
	margin: 1rem 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

p:first-of-type{
	margin-top: 0;
}

a, a:visited{
	display: inline-block;
	background-color: var(--text-link-bg);
	color: var(--text-link-color);
	padding: 0 4px;
	border-radius: 3px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color var(--transition-time) var(--transition-timing);
}

a:focus{
	outline: 4px solid var(--utility-accent);
}

a:hover{
	background-color: var(--utility-accent);
}

@media screen and (min-width: 768px){
	html{
		font-size: 19px;
	}
}

@media screen and (min-width: 1280px){
	html{
		font-size: 22px;
	}
}

/* LAYOUT */

body{
	background-color: var(--text-link-color);
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

body.inactive{
	overflow: hidden;
}

.backgroundImageOverlay{
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	animation-name: bgReveal;
	animation-fill-mode: forwards;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-delay: 1s;
}

@keyframes bgReveal{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.bgGradient{
	background: var(--bg-gradient);
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
}

header{
	width: 100%;
	height: 96px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
}

header > a:first-of-type{
	width: 300px;
	max-width: 50vw;
	height: 100%;
}

header ul{
	list-style-type: none;
	margin: 0;
	z-index: 1000;
}

header nav:first-of-type{
	flex-grow: 1;
}

.headerNavigation{
	display: none;
	justify-content: flex-start;
	align-items: center;
	height: 64px;
	padding: 8px 32px;
}

.headerNavigation > li{
	margin-right: 16px;
}

.headerNavigation .menu-item-has-children{
	position: relative;
}

.headerNavigation .menu-item-has-children:not(:hover):after{
	content: "";
	display: block;
	position: absolute;
	height: 0;
	width: 0;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--text-color);
}

.headerNavigation li a{
	background-color: transparent;
	color: var(--text-color);
	transition: color var(--transition-time) var(--transition-timing), background-color var(--transition-time) var(--transition-timing);
	border-radius: 8px;
	padding: 4px 16px;
}

.headerNavigation li a:hover{
	background-color: var(--utility-accent);
	color: var(--text-link-color);
	cursor: pointer;
}

.headerNavigation .sub-menu{
	transform-origin: top center;
	transform: translate(-50%, 0) scale(0, 0);
	position: absolute;
	top: 100%;
	left: 50%;
	width: 400px;
	transition: transform var(--transition-time) var(--transition-timing);
	text-align: center;
}

.headerNavigation .menu-item-has-children:hover > .sub-menu{
	display: block;
	transform: translate(-50%, 0) scale(1, 1);
}

.mobileNavigation{
	width: calc(100% - 32px);
	height: calc(100vh - 112px);
	position: fixed;
	top: 96px;
	left: calc(100% + 64px);
	overflow: auto;
	transition: left var(--transition-time) var(--transition-timing);
}

.mobileNavigation.active{
	left: 32px;
}

.mobileNavigation li a{
	width: 100%;
	padding: 4px 16px;
	border: 2px solid var(--text-color);
	border-radius: 4px;
	margin-bottom: 4px;
	background-color: transparent;
	color: var(--text-color);
	font-weight: normal;
}

.mobileNavigation .sub-menu {
	padding-left: 16px;
}

#mobileMenuToggle{
	display: block;
	width: 54px;
	height: 54px;
	margin: 6px;
	border: 2px solid var(--text-color);
	border-radius: 4px;
	background-color: transparent; 
	position: relative;
}

#mobileMenuToggle span{
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--text-color);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform var(--transition-time) var(--transition-timing), top var(--transition-time) var(--transition-timing);
}

#mobileMenuToggle span:first-child{
	top: calc(50% - 12px);
}

#mobileMenuToggle span:last-child{
	top: calc(50% + 12px);
}

#mobileMenuToggle:hover{
	cursor: pointer;
}

#mobileMenuToggle.active span{
	top: 50%;
	transform: translate(-50%, -50%) scale(0, 1);
}

#mobileMenuToggle.active span:first-child{
	transform: translate(-50%, -50%) rotate(45deg);
}

#mobileMenuToggle.active span:last-child{
	transform: translate(-50%, -50%) rotate(-45deg);
}

.pageContainer{
	width: 100%;
	min-height: calc(100vh - 96px - 32px);
	padding: var(--padding-large);
}

.titleContainer{
	padding: 48px 0 32px 0 !important;
	text-align: center;
	position: relative;
	margin-top: 64px;
	margin-bottom: 16px;
}

.titleContainerTypes{
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.titleContainerTypes a{
	display: flex;
	position: relative;
	width: 48px;
	height: 48px;
	padding: 10px;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: var(--imgBg);
	box-shadow: var(--shadow-glass-pane);
	border: var(--glass-edge-higlight);
	margin: 0 8px;
}

.titleContainerTypes a:hover{
	outline: 2px solid var(--utility-accent);
}

.titleContainerTypes a span{
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--text-color);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.titleContainerTypes a div{
	display: none;
	position: absolute;
	top: 50%;
	left: 100%;
	background-color: var(--text-color);
	color: var(--imgBg);
	white-space: nowrap;
	font-size: 0.6rem;
	font-weight: normal;
	z-index: 100;
	padding: 4px 16px;
	transform: translate(12px, -50%);
}

.titleContainerTypes a div:before{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: var(--text-color);
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}

.titleContainerTypes a:hover div{
	display: block;
}


.titleContainer h1, .titleContainer h2{
	margin: 0;
}

.titleContainer h2{
	margin-bottom: 32px;
}

.clientContainer{
	background: var(--imgBg);
	border-radius: var(--roundness);
	box-shadow: var(--shadow-glass-pane);
	border: var(--glass-edge-higlight);
	margin: 0 8px;
}

.clientContainer:empty{
	display: none;
}

content{
	display: block;
}

section{
	max-width: 100%;
	display: block;
}

.pageContent{
	max-width: 100%;
}

.fullscreenViewer{
	position: fixed;
	background-color: rgba(from var(--imgBg) r g b / 0.85 );
	-webkit-backdrop-filter: blur(var(--blur-high));
	backdrop-filter: blur(var(--blur-high));
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10000;
}

.fullscreenViewer:not(.active){
	display: none;
}

.fullscreenViewerImageContainer{
	flex-grow: 2;
	padding: 32px 4px;
	max-height: calc(100vh - 128px);
	max-width: 100%;
}

.fullscreenViewerImageContainer img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#fullscreenViewerCaption{
	text-align: center;
}

#fullscreenViewerCaption > *{
	margin: 0;
	margin-bottom: 4px;
	font-size: 0.75rem;
}

.fullscreenViewerNavigation{
	position: absolute;
	width: 48px;
	height: 48px;
	border: 4px solid var(--text-color);
	border-radius: 4px;
	background-color: transparent;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.fullscreenViewerNavigation.inactive{
	display: none;
}

.fullscreenViewerNavigation > span{
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background-color: var(--text-color);
}

.fullscreenViewerNavigation:hover{
	border-color: var(--utility-accent);
	cursor: pointer;
}

.fullscreenViewerNavigation:hover > span{
	background-color: var(--utility-accent);
}

.fullscreenViewerNavigation:not(.close) > span{
	transform-origin: left center;
	width: 75%;
	top: 50%;
}

.fullscreenViewerNavigation.previous{
	transform: translateX(calc(-50% - 64px));
}

.fullscreenViewerNavigation.previous > span{
	left: 6px;
	transform: rotate(20deg);
}

.fullscreenViewerNavigation.previous > span:last-of-type{
	transform: rotate(-20deg);
}

.fullscreenViewerNavigation.next{
	transform: translateX(calc(-50% + 64px));
}

.fullscreenViewerNavigation.next > span{
	transform-origin: right center;
	left: initial;
	right: 6px;
	transform: rotate(20deg);
}

.fullscreenViewerNavigation.next > span:last-of-type{
	transform: rotate(-20deg);
}

.fullscreenViewerNavigation.close > span{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.fullscreenViewerNavigation.close > span:last-of-type{
	transform: translate(-50%, -50%) rotate(-45deg);
}

.frontpageContenContainer{
	margin-bottom: 32px;
}

.aboutContainer > div:first-of-type{
	margin-bottom: 32px;
	text-align: center;
}

.portraitContainer{
	border-radius: 8px;
	overflow: hidden;
	max-width: 900px;
}

.portraitContainer img{
	display: block;
}

footer{
	height: 32px;
	font-size: 0.68rem;
	padding: 0 16px;
}

footer > div{
	padding: 0px 4px 0 4px;
	border-radius: 4px;
	background-color: rgba(from var(--imgBg) r g b / 0.6);
	text-align: center;
}

@media screen and (min-width: 768px){
	.mobileNavigation, #mobileMenuToggle {
		display: none;
	}

	.headerNavigation{
		display: flex;
	}

	.pageContainer{
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: calc(100vh - 96px);
	}

	.titleContainer{
		flex-basis: 40%;
		max-width: 40%;
		padding: 48px 32px 32px 32px !important;
		z-index: 1000;
		transform: translateX(32px);
	}

	.titleContainer.alignStart{
		align-self: flex-start;
		margin-top: 25vh;
	}

	.titleContainerTypes a{
		width: 64px;
		height: 64px;
		padding: 14px;
	}

	.pageContent{
		flex-basis: 100%;
	}

	.contentcontainer{
		flex-basis: 60%;
		max-width: 60%;
	}

	.frontpageContenContainer{
		width: 100%;
		display: flex;
		align-items: center;
	}
}

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

	.aboutContainer{
		display: flex;
	}

	.aboutContainer > div:first-of-type{
		margin-bottom: 0;
		flex-basis: 40%;
		padding-right: 32px;
	}

	.aboutContainer > div:last-of-type{
		padding-top: 64px;
		flex-basis: 60%;
	}



	footer{
		position: fixed;
		bottom: 0;
		left: 0;
	}

	footer > div{
		background-color: transparent;
		opacity: 0.5;
	}
}

/* ELEMENTS */

img{
	max-width: 100%;
}

.siteLogo, .frontpageLogo{
	background-color: var(--text-color);
	-webkit-mask-size: contain;
  	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
  	mask-repeat: no-repeat;
  	-webkit-mask-position: center;
  	mask-position: center;
}

.siteLogo:visited{
	background-color: var(--text-color);
}

.siteLogo:hover{
	background-color: var(--utility-accent);
}

.siteLogo img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.frontpageLogo{
	width: 100%;
	height: 100vh;
	max-height: 256px;
	opacity: 0.5;
}

.glassPanel, .mobileNavigation, .headerNavigation .sub-menu{
	background: var(--glass-gradient);
	padding: var(--roundness);
	border-radius: var(--roundness);
	backdrop-filter: blur(var(--blur-medium));
	box-shadow: var(--shadow-glass-pane);
	border: var(--glass-edge-higlight);
}

.mobileNavigation{
	backdrop-filter: blur(var(--blur-high));
	border-radius: var(--roundness) 0 0 var(--roundness);
}

.headerNavigation .sub-menu{
	padding: 16px;
	border-radius: 16px;
}

#featureImg{
	text-align: center;
}

#featureImg img:hover{
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: var(--img-shadow);
}

.videoWrapper{
	width: 100%;
	height: 35vh;
}

.videoWrapper video{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.galleryContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 32px 0;
	padding-top: 32px;
	border-top: 1px solid rgba(128,128,128, 0.5);
}

.galleryContainer:first-child{
	padding-top: 0;
	border-top: 0;
}

.galleryContainer:empty{
	display: none;
}

.galleryImage{
	flex-basis: calc(50% - 16px);
	height: 150px;
	background-color: var(--imgBg);
	box-shadow: 1px 1px 15px rgba(0,0,0,0);
	overflow: hidden;
	border-radius: 8px;
	margin: 8px;
}

.galleryImage img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.galleryImage:hover{
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: var(--img-shadow);
}

.portfolioThumbContainer{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 120px;
	grid-gap: 32px;
}

.portfolioThumbContainer a{
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}

.portfolioThumbContainer a:hover{
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: var(--img-shadow);
	position: relative;
}

.portfolioThumbContainer a > span{
	opacity: 0;
	transform: translateY(100%);
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	font-size: 0.6rem;
	background-color: var(--text-color);
	padding: 4px;
	text-align: center;
}

.portfolioThumbContainer a:hover > span{
	animation-name: thumbTitleReveal;
	animation-delay: 0.2s;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.youtubeWrapper{
	display: flex;
    justify-content: center;
}

.youtubeWrapper iframe{
	aspect-ratio: 16 / 9;
	max-width: 100%;
}

@keyframes thumbTitleReveal{
	0%{opacity: 0;transform: translateY(100%);}
	100%{opacity: 1;transform: translateY(0%);}
}

.portfolioThumbContainer a > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media screen and (min-width: 480px){
	.galleryImage{
		flex-basis: calc(33% - 32px);
		height: 120px;
	}

	.portfolioThumbContainer{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (min-width: 768px){
	.galleryImage{
		flex-basis: calc(50% - 16px);
		height: 150px;
	}

	.frontpageLogo{
		width: auto;
		flex-basis: 40%;
		margin-right: 32px;
	}

	.portfolioThumbContainer{
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (min-width: 1024px){
	.galleryImage{
		flex-basis: calc(33% - 32px); 
		height: 140px;
	}

	.portfolioThumbContainer{
		grid-template-columns: repeat(5, 1fr);
	}
}

@media screen and (min-width: 1200px){
	.galleryImage{
		flex-basis: calc(25% - 48px);
		height: 100px;
	}

	.portfolioThumbContainer{
		grid-template-columns: repeat(7, 1fr);
	}
}

@media screen and (min-width: 1440px){
	.galleryImage{
		flex-basis: calc(25% - 64px);
		height: 140px;
	}

	.portfolioThumbContainer{
		grid-template-columns: repeat(9, 1fr);
	}
}