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


/* Fonts */
@font-face {
    font-family: 'UntitledSans';
    src:url("../assets/fonts/untitled-sans-web-medium.woff") format("woff"),
		url("../assets/fonts/untitled-sans-web-medium.woff2") format("woff2"),
		url("../assets/fonts/untitled-sans-web-medium.eot") format("eot");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UntitledSans';
    src:url("../assets/fonts/untitled-sans-web-regular.woff") format("woff"),
		url("../assets/fonts/untitled-sans-web-regular.woff2") format("woff2"),
		url("../assets/fonts/untitled-sans-web-regular.eot") format("eot");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'UntitledSerif';
    src:url("../assets/fonts/untitled-serif-web-medium.woff") format("woff"),
		url("../assets/fonts/untitled-serif-web-medium.woff2") format("woff2"),
		url("../assets/fonts/untitled-serif-web-medium.eot") format("eot");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UntitledSerif';
    src:url("../assets/fonts/untitled-serif-web-regular.woff") format("woff"),
		url("../assets/fonts/untitled-serif-web-regular.woff2") format("woff2"),
		url("../assets/fonts/untitled-serif-web-regular.eot") format("eot");
    font-weight: 400;
    font-style: normal;
}

/* 1 / Desktop / XL / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Variables */
:root{
	--black:  hsla(215,55%,14%,1.00);
	--white:  hsla(0,0%,100%,1.00);
	--grey95:  hsla(215,9%,95%,1.00);
	--grey90:  hsla(215,9%,90%,1.00);
	--grey80:  hsla(215,9%,80%,1.00);
	--grey70:  hsla(215,9%,70%,1.00);
	--grey60:  hsla(215,9%,60%,1.00);
	--grey40:  hsla(215,9%,40%,1.00);
	--grey20:  hsla(215,9%,20%,1.00);
	
	--BLU:   31px;                     /* Baseline Unit*/
	--FSRA:  (85 / 100);               /* Font Size Ratio | A */
	--FSRB:  (95 / 100);               /* Font Size Ratio | B */
	--FSRC:  (75 / 100);               /* Font Size Ratio | C */
	
	--LINE:  2px;      			 		/* Line Thickness */
		
	--ANIA: 0.2s;                      /* Animation speed | A */
	--ANIB: 0.4s;                      /* Animation speed | B */
	--ANIC: 0.6s;                      /* Animation speed | C */
	--ANID: 0.8s;                      /* Animation speed | D */
	--ANIE: 1.0s;                      /* Animation speed | E */
	
	--ANIV: 1.0s;                      /* Animation speed | Viewport Height */
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--white);
}

body, p {
	font-family: 'UntitledSerif', "Times New Roman", Times, Baskerville, Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: calc(var(--BLU)*var(--FSRA));
	line-height:    var(--BLU);
	color: var(--black);
	
	-webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
            hyphens: auto;
}

h1 {
	font-family: 'UntitledSerif', "Times New Roman", Times, Baskerville, Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size:  calc((var(--BLU)*4)*var(--FSRB));
	line-height: calc(var(--BLU)*4);
	
    margin-block-start: -.1em;
    margin-block-end: 0.18em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	
	-webkit-hyphens: none;
       -moz-hyphens: none;
        -ms-hyphens: none;
         -o-hyphens: none;
            hyphens: none;
}

h2 {
	font-family: 'UntitledSerif', "Times New Roman", Times, Baskerville, Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size:  calc((var(--BLU)*2)*var(--FSRB));
	line-height: calc(var(--BLU)*2);
	
	margin-block-start: 0.16em;
    margin-block-end: 0.48em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	
	-webkit-hyphens: none;
       -moz-hyphens: none;
        -ms-hyphens: none;
         -o-hyphens: none;
            hyphens: none;
}

h3 {
	font-family: 'UntitledSans', "Times New Roman", Times, Baskerville, Georgia, serif;
	font-style: normal;
	font-weight: 500;
	font-size:  calc((var(--BLU)*0.8)*var(--FSRC));
	line-height: calc(var(--BLU)*0.8);
	
    margin-block-start: 0em;
    margin-block-end: 0em;
	margin-inline-start: 0px;
    margin-inline-end: 0px;

	-webkit-hyphens: none;
       -moz-hyphens: none;
        -ms-hyphens: none;
         -o-hyphens: none;
            hyphens: none;
}

p {	
    margin-block-start: 0.23em;
    margin-block-end: 1.17em;
	margin-inline-start: 0px;
    margin-inline-end: 0px;
}

a:link, a:visited {
	text-decoration: underline;
	color: inherit;
}

a:hover, a:active {
	text-decoration: none;
	color: var(--grey60);
}

div {
	border: none;
	outline: none;
}

#headprot {
	position: absolute;
	top: calc((var(--BLU)*2.4) - (var(--vh, 1vh) * 100));
	left: 0;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	background: var(--white);
	z-index: 10;
	
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}


/* Arrow icon */
.arrow {
	width:  calc(var(--BLU)*2);
	height: calc(var(--BLU)*2);
	border-radius: 100%;
	background-position: 0 0;
	
	transition-property: background-position;
	transition-duration: var(--ANIA);
	transition-timing-function: ease-in-out;
}

.arrow.black {
	background: url("../assets/graphics/arrow_b.svg");
	background-repeat: no-repeat;
	background-size: cover;
	border-style: solid;
	border-width: calc(var(--LINE));
	border-color: var(--black);
}

.arrow.white {
	background: url("../assets/graphics/arrow_w.svg");
	background-repeat: no-repeat;
	background-size: cover;
	border-style: solid;
	border-width: calc(var(--LINE));
	border-color: var(--white);
}

.arrow.n {
	transform: rotate(0deg);
}

.arrow.ne {
	transform: rotate(45deg);
}

.arrow.e {
	transform: rotate(90deg);
}

.arrow.se {
	transform: rotate(135deg);
}

.arrow.s {
	transform: rotate(180deg);
}

.arrow.sw {
	transform: rotate(225deg);
}

.arrow.w {
	transform: rotate(270deg);
}

.arrow.nw {
	transform: rotate(315deg);
}

:hover > .arrow {
	background-position: 0px calc(0px - (var(--BLU)*0.1));
}


/* Navigation */
#navcont {
	width: calc(100% - var(--BLU));
	height: calc(var(--BLU)*1.4);
	padding: calc(var(--BLU)/2);
	top: 0px;
	z-index: 20;
	background: var(--white);
}

.pagetype_home > #navcont {
	position: sticky;
	position: -webkit-sticky;
	margin-top: calc(var(--vh, 1vh) * 100);
	
}

.pagetype_norm > #navcont {
	position: fixed;
	margin-top: 0;
}

#navcont > .navlogo,
#navcont > .navlink {
	position: absolute;
	height: calc(100% - var(--BLU));
}

#navcont > .navlogo {
	left: calc(var(--BLU)/2);
	width: calc(var(--BLU) * 11);
	background: url("../assets/graphics/GLG-Logo-B-black-RGB.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

#navcont > .navlogo > img {
	height: 100%;
}

#navcont > .navlink {
	right: calc(var(--BLU)/2);
	margin-top: 0.25em;
}

#navcont > .navlink > a{
	position: relative;
	display: inline-block;
	font-family: 'UntitledSans', "Times New Roman", Times, Baskerville, Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size:  calc((var(--BLU)*1)*var(--FSRC));
	line-height: calc(var(--BLU)*1);
	padding-left: calc(var(--BLU)*1);
}

#navcont > .navlink > a:link,
#navcont > .navlink > a:visited {
	text-decoration: none;
}

#navcont > .navlink > a:hover,
#navcont > .navlink > a:active {
	color: var(--black);
}

#navcont > .navlink > a > div {
	position: absolute;
	width: calc(var(--LINE));
	top: calc(0px - (var(--BLU)/1.3));
	background: var(--black);
	left: calc((50% + (var(--BLU)/2)) - var(--LINE));
	height: 0px;

	transition-property: height;
	transition-duration: var(--ANIA);
	transition-timing-function: ease-in-out;
}

#navcont > .navlink > a:hover > div {
	height: calc(var(--BLU)/2);
}

.subnavi {
	position: sticky;
	position: -webkit-sticky;
    width: calc(100% - (var(--BLU)*0.5));
    min-height: var(--BLU);
    top: calc(var(--BLU)*2.3);
	margin-top: calc(0px - (var(--BLU)*0.5));
    background: var(--grey95);
    z-index: 100;
	padding-top: calc(var(--BLU)*0.5);
	padding-left: calc(var(--BLU)*0.5);
	padding-bottom: calc(var(--BLU)*0.5);
	
	font-family: 'UntitledSans', "Times New Roman", Times, Baskerville, Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: calc((var(--BLU)*1)*var(--FSRC));
    line-height: calc(var(--BLU)*1);
	
	-webkit-hyphens: none;
       -moz-hyphens: none;
        -ms-hyphens: none;
         -o-hyphens: none;
            hyphens: none;
}

.subnavi a {
	text-decoration: none;
	padding-right: calc(var(--BLU)*1);
}
	
.ausstanch {
	position: relative;
    width: 100%;
    height: calc(var(--BLU)*2.3);
    margin-top: calc(0px - (var(--BLU)*2.3));
	pointer-events: none;
}


/* Header Image */
#headcont {
	position: absolute;
	display: block;
	width: 100%;
	height: calc(var(--vh, 1vh) * 300);
	top: 0;
	left: 0;
	z-index: 10;
	background: var(--white);
	
}

#headcont.ausst {
	background: var(--grey95);
}

#headcont > div {
	position: sticky;
	position: -webkit-sticky;
	width: 100%;
	height: calc(100%/3);
	top: 0;
	z-index: -10;
}

#headcont > div > img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#headcont .intro.arrow {
	position: fixed;
    width: calc(var(--BLU)*2);
    height: calc(var(--BLU)*2);
    bottom: calc(0px + (var(--BLU)*5));
    left: calc(50% - (var(--BLU)*1));
}

#headcont .headtext {
	position: absolute;
	color: var(--white);
	text-align: center;
	width: 100%;
	top: calc(50% - (var(--BLU)));
	
	-webkit-transform: translate(0, -50%);
       -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
         -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
}

.pagetype_norm > #headcont .headtext {
	text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
}

.pagetype_home > #headcont .headtext .logo {
	position: absolute;
	width: calc(var(--BLU)*30);
	max-width: 90%;
	height: calc(var(--BLU)*19);
	left: 50%;
	top: 50%;
	background: url("../assets/graphics/GLG-Logo-E-black-RGB.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.pagetype_home > #headcont .headtext .arrow {
	position: absolute;
	margin-top: calc(var(--BLU)*7);
}

#headcont .headtext > h1 {
	margin-block-start: 0em;
    margin-block-end: 0.3em;
}

#headcont .headtext > h2 {
	margin-block-start: 0em;
    margin-block-end: 0em;
}

#headcont .headtext.ausst {
	max-width: calc(var(--BLU)*50);
	width: calc(100% - (var(--BLU)*2));
	padding-left: var(--BLU);
	padding-right: var(--BLU);
	color: var(--black);
	left: 50%;
	
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#headcont .headtext.ausst > h2 {
	line-height: calc(var(--BLU)*2.5);
    margin-block-end: var(--BLU);
}

#headcont a.headtext {
	text-decoration: none;
}

#headcont .headtext > .arrow {
	margin-left: calc(50% - (var(--BLU) + var(--LINE)));
}


/* Content Container */
#contcont {
	width: calc(100% - var(--BLU));
	min-height: calc(var(--vh, 1vh) * 100);
    height: auto;
	padding: 0;
	padding-top: calc(var(--BLU)*0.5);
	margin-bottom: calc((var(--vh, 1vh) * 100) - (var(--BLU)*2.4));
	z-index: 10;
	background: var(--white);
	
}

.pagetype_norm > #contcont {
	position: relative;
	display: table;
	margin-top: calc(var(--vh, 1vh) * 135);
	width: 100%;
	
}

.pagetype_home > #contcont {
	position: relative;
	overflow: hidden;
	padding: 0px;
	width: 100%;
}

#contanch {
	position: absolute;
	width: 100%;
	height: calc(var(--BLU)*2.4);
	top: calc(0px - (var(--BLU)*2.3));
}

#contanch.ausst {
    top: calc(var(--BLU));
}


/* Footer Container */
#footcont {
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
	z-index: 0;
	color: var(--black);
	text-align: center;
	letter-spacing: 0.02em;
	
}

#footcont > a:link,
#footcont > a:visited {
	text-decoration: none;
}

#footcont > a:hover,
#footcont > a:active {
	color: inherit;
}

#footcont > .insta {
	display: block;
	position: absolute;
	width: calc(var(--BLU)*1.5);
	height: calc(var(--BLU)*1.5);
	left: calc((100% - (var(--BLU)*1.5))/2);
	bottom: var(--BLU);
	
	background: url("../assets/graphics/instagram-icon.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/*
#footcont > .insta {
	display: block;
	position: absolute;
	bottom: var(--BLU);
	width: 100%;
}

#footcont > .insta > .line {
	position: absolute;
	width: calc(var(--LINE));
	height: 0px;
	top: calc(0px - var(--BLU));
	left: calc(50% - (var(--LINE)*0.5));
	background: var(--white);

	transition-property: height;
	transition-duration: var(--ANIA);
	transition-timing-function: ease-in-out;
}

#footcont > .insta:hover > .line {
	height: var(--BLU);
}
*/
#footcont > .site,
#footcont > .post,
#footcont > .kont {
	position: absolute;
	width: calc(100% / 3);
	float: left;
	top: calc(50% - (var(--BLU)*3.5));
}

#footcont > .post {
	left: calc((100% / 3)*1);
}

#footcont > .kont {
	left: calc((100% / 3)*2);
}

#footcont > div > a:link,
#footcont > div > a:visited {
	text-decoration: none;
}

#footcont > div > a:hover,
#footcont > div > a:active {
	color: inherit;
}

#footcont > div > h3 {
	letter-spacing: 0.05em;
}

#footcont > .legal {
	position: absolute;
	display: block;
	width: 100%;
	top: calc(var(--BLU)*2.4);
	letter-spacing: 0.05em;
}

#footcont > div > .line {
	position: absolute;
	width: calc(var(--LINE));
	height: 0px;
	left: calc(50% - (var(--LINE)/2));
	bottom: calc(0px - (var(--BLU)*1.25));
	background: var(--black);

	transition-property: height;
	transition-duration: var(--ANIA);
	transition-timing-function: ease-in-out;
}

#footcont > div {
    pointer-events: none;
}

#footcont > div > a {
    pointer-events: auto;
}

#footcont > div:hover > .line {
	height: var(--BLU);
}

#footcont > img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Call To Action Container */
#ctacont {
	display: block;
    position: relative;
    float: left;
	width: 100%;
	padding-top:    calc(var(--BLU)*3.5);
	padding-bottom: calc(var(--BLU)*4);
	background: var(--white);
	text-align: center;
	z-index: 15;
	text-decoration: none;
}

#ctacont > .arrow {
	margin-left: calc(50% - (var(--BLU) + var(--LINE)));
	margin-bottom: var(--BLU);
}

#ctacont:hover {
	color: inherit;
}


/* Project Gallery */
#contcont > .projrow > .projcont {
	display: block;
	position: relative;
	float: left;
	vertical-align: top;
	width: calc((100% - (var(--BLU)*1.5))/2);
	margin-left: calc(var(--BLU)/2);
	padding-bottom: calc(var(--BLU)*2);
}

#contcont > .projrow {
    display: table;
	width: 100%;
}
#contcont > .projrow > a:link,
#contcont > .projrow > a:visited {
	text-decoration: none;
	color: inherit;
}

#contcont > .projrow > a:hover > img,
#contcont > .projrow > a:active > img {
	opacity: 0.9;
}

#contcont > .projrow > .projcont > img {
	width: 100%;
}

#contcont > .projrow > .projcont > .wrapper {
	width: 100%;
	height: auto;
	overflow: hidden;
}

#contcont > .projrow > .projcont > .wrapper > img {
	width: 100%;
	transform: scale(1.05);
	
	transition-property: transform;
	transition-duration: 2s;
	transition-timing-function: ease-in-out;
}

#contcont > .projrow > .projcont:hover > .wrapper > img {
	transform: scale(1.15);
	transition-duration: 10s;
	transition-timing-function: linear;
}

#contcont > .projrow > .projcont > p{
}

#contcont > .projrow > .projcont > p,
#contcont > .projrow > .projcont > h3 {
	margin: 0.2em;
	margin-left: 0px;
	padding-left: calc(var(--BLU)*0.2);
	
	transition-property: margin-left;
	transition-duration: var(--ANIB);
	transition-timing-function: ease-in-out;
}

#contcont > .projrow > .projcont:hover > p,
#contcont > .projrow > .projcont:hover > h3 {
	margin-left: calc(var(--BLU)*1.25);
}

#contcont > .projrow > .projcont > .line {
	position: absolute;
	width: 0px;
	height: calc(var(--LINE));
	background: var(--black);
	margin-top: calc(var(--BLU)*0.65);
	margin-left: calc(0px - (var(--BLU)*0.5));
	
	transition-property: width, margin-left;
	transition-duration: var(--ANIB);
	transition-timing-function: ease-in-out;
}

#contcont > .projrow > .projcont:hover > .line {
	width: var(--BLU);
	margin-left: 0px;
}


/* Project Text */
.textcont {
	width: 100%;
	min-height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*2.4));
	
}

.textcont > .projtext {
	padding: calc(var(--BLU)/2);
	width: calc(100% - var(--BLU));
	background: var(--white);
}

.textcont > .projtext.top {
	justify-content: space-around;
	align-items: flex-start;
	width: calc(100% - var(--BLU));
	top: 0px;
	min-height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*6.5));
	
}

.textcont > .projtext.top > .sticktop {
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--BLU)*3.2);
}

.textcont > .projtext.bot {
	width: calc(100% - var(--BLU));
	min-height: calc(var(--BLU)*1.6);
}

.textcont > .projtext.bot div {
	display: inline-block;
	padding-right: var(--BLU);
}

.textcont > .projtext p,
.textcont > .projtext h2 {
	max-width: calc(var(--BLU)*35);
}

.textcont > .projtext.bot p {
	margin: 0em;
}

.textcont > .projtext.bot h3 {
	margin: 0em;
}


/* Project Image */
#contcont > .projrow > img.half,
#contcont > .projrow > img.full {
	display: block;
	float: left;
	padding-top: calc(var(--BLU)*0.5);
	padding-left: calc(var(--BLU)*0.5);
	border: none;
}

#contcont > .projrow > img.half {
	width: calc((100% - (var(--BLU)*1.5))/2);
}

#contcont > .projrow > img.full {
	width: calc(100% - var(--BLU));
}

#contcont > .projrow > iframe {
	display: block;
	width: 100%;
	height: calc(((100vw - var(--BLU))/16)*9);
	padding-top: calc(var(--BLU)*0.5);
}


/* Info Container */
#infocont {
	width: calc(50% - var(--BLU));
	height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*3.4));
	margin-top: calc(var(--BLU)*2.4);
	padding: calc(var(--BLU)*0.5);
	background: var(--grey90);
	
}

#infocont .contact {
	width: 50%;
	float: left;
	padding-top: calc(var(--BLU)*2);
}

#infocont .contact a {
	text-decoration: none;
	display: block;
}

#infocont .contact a:hover {
	color: inherit;
}

#infocont .contact h3 {
	margin: 0;
}

#infocont .contact a h3 {
    margin-left: 0px;
	margin: 0;
	
    transition-property: margin-left;
    transition-duration: var(--ANIC);
    transition-timing-function: ease-in-out;
}

#infocont .contact a div{
	position: absolute;
    margin-left: calc(0px - (var(--BLU)*1));
    margin-top: calc(0px - 0.55em);
    width: 0;
    height: calc(var(--LINE));
    background: var(--black);
	
    transition-property: width, margin-left;
    transition-duration: var(--ANIC);
    transition-timing-function: ease-in-out;
}

#infocont .contact a:hover h3 {
    margin-left: calc(var(--BLU)*1.5);
}

#infocont .contact a:hover div{
    width: var(--BLU);
    margin-left: 0;
}

#infocont .contact .infoinsta span{
	width: calc(var(--BLU)*1.5);
	height: calc(var(--BLU)*0.5);
	background: url("../assets/graphics/instagram-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
	margin-bottom: calc(0px - (var(--BLU)*0.05));
}

#infocont span {
	display: inline-block;
	width: calc(var(--BLU)*1.5);
}

#infocont > .block {
	position: sticky;
	position: -webkit-sticky;
}

#infocont > .block.top {
	display: table;
	top: calc(var(--BLU)*3.2);
	padding-bottom: calc(var(--BLU)*5);
}

#infocont > .block.bot {
	width: 100%;
	min-height: calc(var(--BLU)*2);
	top: calc(100% - (var(--BLU)*2));
}

#infocont > .block.bot a p {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#infocont > .block.bot a {
	width: 50%;
	float: left;
	text-decoration: none;
}

#infocont > .block.bot a:hover {
	color: inherit;
}

#infocont > .block.bot a div {
	position: absolute;
	margin-top: calc(0px - (var(--BLU)*1.3));
	margin-left: calc(0px - (var(--BLU)));
	background: var(--black);
    width: 0;
    height: calc(var(--LINE));

    transition-property: width, margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

#infocont > .block.bot a:hover div {
	margin-left: 0;
    width: var(--BLU);
}

#infocont > .block.bot a p,
#infocont > .block.bot a h3 {
	margin-left: 0;
	margin: 0;

	transition-property: margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

#infocont > .block.bot a:hover p,
#infocont > .block.bot a:hover h3 {
	margin-left: calc(var(--BLU)*1.5);

}

#infocont > #headcont {
	width: unset;
    height: unset;
    margin-top: unset;
    padding: unset;
    background: unset;
}

#servcont {
	position: fixed;
	width: 50%;
	height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*2.4));
	top: calc(var(--BLU)*2.4);
	left: 50%;
	color: var(--white);
	text-align: center;
	
	
	
	background: var(--black);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	
}

#servcont .servtext {
	position: absolute;
    width: 100%;
    top: calc(50% - (var(--BLU)));
	
    -webkit-transform: translate(0, -50%);
       -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
         -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
}

#servcont .gotoimp {
	position: absolute;
    display: block;
    width: 100%;
    height: auto;
    bottom: 0;
    padding-bottom: var(--BLU);
}
#servcont .arrow {
	display: inline-block;
	margin-top: var(--BLU);
}

#servcont a {
	text-decoration: none;
}

#servcont a:hover {
	color: inherit;
}

#imprcont {
	position: relative;
	width: calc(50% - var(--BLU));
	height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*3.4));
	padding: calc(var(--BLU)*0.5);
	background: var(--white);
	
}

#imprcont #contanch {
	position: relative;
    height: 0;
}

#imprcont #contanch {
	position: relative;
    height: 0;
}

#imprcont a {
	text-decoration: none;
}

#imprcont a:hover {
	color: inherit;
}

#imprcont .column {
	width: 50%;
	float: left;
}

#imprcont .block.bot {
	width: calc(100% - var(--BLU));
	position: absolute;
	bottom: calc(var(--BLU)*0.5);
}

#imprcont p {
	margin: 0;
}

#imprcont h3 {
	margin: 0;
	margin-top: 3.15em;
}

#imprcont a > div {
	width: 0;
	height: var(--LINE);
	background: var(--black);
	position: absolute;
	margin-top: calc(0px - (var(--BLU)*0.5));
	margin-left: calc(0px - var(--BLU));

    transition-property: width, margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

#imprcont a:hover > div {
	width: var(--BLU);
	margin-left: 0;
}

#imprcont a > p {
	margin-left: 0;

	transition-property: width, margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

#imprcont a:hover > p {
	margin-left: calc(var(--BLU)*1.5);
}


/* Ausstattung Container */
.contpart {
	width: 100%;
    height: calc((var(--vh, 1vh) * 100) - (var(--BLU)*2.3));
	border-bottom: solid 1px var(--black);
	
}

.contpart:last-of-type {
	border-bottom: none;
}

.contpart .column {
	position: relative;
	padding: calc(var(--BLU)*0.5);
	padding-top: calc(var(--BLU)*2);
	padding-bottom: calc(var(--BLU)*1);
	height: calc(100% - (var(--BLU)*3));
	width: calc(50% - (var(--BLU)*1));
	float: left;
}

.contpart .column a {
	text-decoration: none;
}

.contpart .column a:hover {
	color: inherit;
}

.contpart .column a p {
    margin: 0;
	padding-left: calc(var(--BLU)*0.1);
	
    transition-property: margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

.contpart .column a:hover p {
    margin-left: calc(0px + (var(--BLU)*1.5));
}

.contpart .column a > .line {
	position: absolute;
    margin-left: calc(0px - (var(--BLU)*1));
    margin-top: calc(0px - (var(--BLU)*0.5));
    width: 0;
    height: calc(var(--LINE));
    background: var(--black);
	
    transition-property: width, margin-left;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

.contpart .column a:hover > .line {
    margin-left: 0;
    width: var(--BLU);
}

.contpart .column .top {
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--BLU)*4.7);
	padding-bottom: calc(var(--BLU)*5);
}

.contpart .column .bot {
	position: absolute;
	width:  calc(100% - var(--BLU));
    bottom: calc(var(--BLU)*1);
}

.contpart .column .bot h2 {
	margin: 0;
	padding-bottom: calc(var(--BLU)*0.2);
}

.contpart .column .arrow {
    float: left;
    margin-right: var(--BLU);
	background: url("../assets/graphics/info_b.svg");
	background-repeat: no-repeat;
	background-size: cover;
	
    transition-property: margin-right, background-position;
    transition-duration: var(--ANIB);
    transition-timing-function: ease-in-out;
}

.contpart .column a:hover .arrow {
	background-position: 0px calc(0px - (var(--BLU)*0.1));
    margin-right: calc(var(--BLU)*1.5);
}


/* Image Gallery */
.contpart .column .gallery {
	overflow: hidden;
    width: 100%;
	height: 100%;
}

.contpart .column .flickity-viewport {
    height: 100% !important;
}

.contpart .column .flickity-page-dots {
	display: none;
}

.contpart .column .gallery-cell {
    position: absolute;
    width: 100%;
    height: 100%;
	background: var(--grey90);
}

.contpart .column .gallery-cell > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
	z-index: 10;
}

.contpart .column .gallery-cell > div {
	display: block;
    position: absolute;
    z-index: 20;
    background: var(--white);
    width: 100%;
    bottom: 0;
	padding-top: calc(var(--BLU)*0.5);
}

.contpart .column button {
	position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
    border: none;
	padding: 0;
	background: none;
}

.contpart .column button.previous {
	left: 0;
	cursor: w-resize;
}

.contpart .column button.next {
	right: 0;
	cursor: e-resize;
}

.contpart .column button > svg {
    display: none;
}



/* 2 / Laptop / L / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 2000px) {
	:root{--BLU:   25px;}
}



/* 3 / Laptop / M / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 1200px) {
	:root{--BLU:   23px;}
	
	#infocont,
	#imprcont {
		width: calc(100% - var(--BLU));		
	}
	
	#servcont {
		display: none;
	}
	
	
}



/* 4 / Tablet / S / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (pointer:none), (pointer:coarse) and (orientation:landscape) {

}



/* 5 / Mobile / Both / XS / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (pointer:none), (pointer:coarse) {
	
	html {
		-webkit-text-size-adjust: none;
	}
	
	/* Root Changes */
	:root{
		--BLU:   20px;
		--LINE:  1.5px;      			 		/* Line Thickness */
	}
	
	/* Type Changes */
	h1 {
		font-size:  calc((var(--BLU)*2)*var(--FSRB));
		line-height: calc(var(--BLU)*2);

		margin-block-start: 0.16em;
		margin-block-end: 0.48em;
	}
	
	/* Orientation Change Transition */
					 #headcont,
					 #headcont > div,
					 #contcont,
	.pagetype_norm > #contcont,
	.pagetype_home > #contcont,
	.pagetype_home > #navcont {
		transition: var(--ANIV);
	}
	
	/* Hover Disables */
	#navcont > .navlink > a:hover > div {
		height: unset;
	}
	
	:hover > .arrow {
		background-position: unset;
	}

	#contcont > .projrow > .projcont:hover > p,
	#contcont > .projrow > .projcont:hover > h3 {
		margin-left: unset;
	}
	
	#contcont > .projrow > .projcont:hover > .line {
		width: unset;
		margin-left: unset;
	}
		
	#footcont > .legal {
		position: fixed;
		top: unset;
		bottom: calc(var(--BLU)*0.5);
	}
	
	#footcont > .insta {
		bottom: calc(var(--BLU)*2.5);
	}
	
	#footcont > div:hover > .line {
		height: unset;
	}
	
	#footcont > .insta:hover > .line {
		height: unset;
	}
	
	#imprcont a:hover > div {
		width: unset;
		margin-left: unset;
	}

	#imprcont a:hover > p {
		margin-left: unset;
	}
	
	#infocont .contact {
		width: 100%;
	}
	
	#infocont .contact:last-of-type {
		padding-top: calc(var(--BLU)*0.7);
	}
	
	#infocont .contact a:hover h3 {
		margin-left: unset;
	}

	#infocont .contact a:hover div{
		width: unset;
		margin-left: unset;
	}
	
	#infocont > .block.bot a:hover div {
		margin-left: unset;
		width: unset;
	}
		
	#infocont > .block.bot a:hover p,
	#infocont > .block.bot a:hover h3 {
		margin-left: unset;
	}
	
	.contpart .column a:hover > .line {
		margin-left: unset;
		width: unset;
	}

	.contpart .column a:hover > p {
		margin-left: unset;
	}	
	
	.contpart .column a:hover .arrow {
		background-position: unset;
		margin-right: calc(var(--BLU)*0.5);
	}
		
	
	/* Element Changes */
	html{
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent; /* For some Androids */		
	}

	.subnavi {
		display: none;
	}
	
	#navcont > .navlink > a {
		font-weight: 500;
		padding-left: calc(var(--BLU)*0.5);
	}	
		
	.pagetype_home > #contcont {
		position: relative;
		display: table;
		margin-top: calc(0px - (var(--BLU)*0.5));
		padding-top: calc(var(--BLU)*0.5);
	}
	
	.pagetype_home #contanch {
		top: calc(0px - (var(--BLU)*1.9));
		}
	
	.pagetype_home > #headcont .headtext .logo {
		position: absolute;
		width: calc(var(--BLU)*19);
		max-width: 90%;
		height: calc(var(--BLU)*12);
	}
	
	.pagetype_home > #headcont .headtext .arrow {
		margin-top: calc(var(--BLU)*5);
	}
	
	#contanch.ausst {
		top: calc(0px - (var(--BLU)*2.3));
	}
	
	.pagetype_norm > #contcont {
		margin-top: calc(var(--vh, 1vh) * 100);
		
	}
	
	#contcont {
		margin-bottom: calc((var(--vh, 1vh) * 100) + (var(--BLU)*0.5));
		
	}
	
	#navcont > .navlogo {
		width: calc(var(--BLU)*1.4);
		overflow: hidden;
		background-size: cover;
	}
		
	.arrow {
		width: calc(var(--BLU)*1.4);
		height: calc(var(--BLU)*1.4);
	}
	
	#ctacont {
		padding-top: calc(var(--BLU)*1.5);
		padding-bottom: calc(var(--BLU)*2);
	}
	
	#ctacont > .arrow {
		margin-bottom: calc(var(--BLU)*0.5);
		margin-left: calc(50% - ((var(--BLU)/1.4) + var(--LINE)));
	}
			
	#infocont {
		display: table;
		height: auto;
		padding-bottom: calc(var(--BLU)*1);
	}
	
	#imprcont .column {
		width: 100%;
	}
	
	#infocont > .block {
		position: unset;
	}
	
	#infocont > .block.top {
		padding-bottom: calc(var(--BLU)*10);
	}	
	
	#infocont > .block.bot {
		width: 100%;
		min-height: calc(var(--BLU)*4.5);
		top: unset;
	}
	
	#infocont > .block.bot a {
		width: 100%;
		padding-top: calc(var(--BLU)*0.5);
	}
	
	#imprcont {
		position: relative;
		display: table;
		height: auto;
	}
	
	#imprcont .block.top {
		display: inline-block;
		width: 100%;
		position: relative;
		bottom: unset;
		margin-bottom: calc(var(--BLU)*2);
	}
	
	#imprcont .block.top h2 {
		margin-block-start: 0em;
	}
	
	#imprcont .block.bot {
		display: table;
		width: 100%;
		position: relative;
		bottom: unset;
	}
	
	#headcont > div {
		height: calc(var(--vh, 1vh) * 100);
		
	}
		
	#headcont .headtext.ausst {
		max-width: calc(var(--BLU)*25);
		padding-top: calc(var(--BLU)*5);
	}
		
	#headcont .headtext.ausst > h2 {
		font-weight: 400;
		font-size: calc((var(--BLU)*1.5)*var(--FSRA));
		line-height: calc(var(--BLU)*1.5);
	}
	
	#headcont .headtext > .arrow {
		margin-left: calc(50% - ((var(--BLU)/1.4) + var(--LINE)));
	}
	
	#headcont .intro.arrow {
		bottom: calc(0px + (var(--BLU)*2));
	}
				
	#glg_light span {
		display: none;
	}
	
	#glg_light h2 {
		padding-bottom: calc(var(--BLU)*0.6);
	}
		
	.ausstanch {
		display: none;
	}
	
	.contpart {
		display: inline-block;
		width: 100%;
		height: unset;
		position: relative;
	}
	
	.contpart .column {
		position: unset;
		padding: unset;
		padding-top: unset;
		padding-bottom: unset;
		height: unset;
		width: 50%;
		float: left;
	}
	
	.contpart .column.l {
		padding: calc(var(--BLU)*0.5);
		width: calc(50% - var(--BLU));
		padding-top: unset;
	}
	
	.contpart .column.r {
		position: absolute;
		width: calc(50% - (var(--BLU)*0.5));
		padding-right: calc(var(--BLU)*0.5);
		padding-top: calc(var(--BLU)*0.5);
		padding-bottom: calc(var(--BLU)*0.5);
		height: calc(100% - var(--BLU));
		right: 0;
	}
	
	.contpart .column .arrow {
		width: calc((var(--BLU)*1.4) - var(--LINE));
		height: calc((var(--BLU)*1.4) - var(--LINE));
		margin-right: calc(var(--BLU)*0.5);
		margin-top: calc(0px - (var(--BLU)*0.3));
		border-width: var(--LINE);
	}
	
	.contpart .column .bot h2 {
		font-family: 'UntitledSans', "Times New Roman", Times, Baskerville, Georgia, serif;
		font-style: normal;
		font-weight: 400;
		font-size: calc((var(--BLU)*0.95)*var(--FSRA));
		line-height: calc(var(--BLU)*0.95);
	}
	
	.contpart .column {
		padding-top: calc(var(--BLU)*0.5);
		padding-botom: calc(var(--BLU)*0.5);
		margin: 0;
	}
	
	.contpart .column .top {
		position: relative;
		top: unset;
		padding-bottom: calc(var(--BLU)*5);
	}
	
	.contpart .column .bot {
		position: relative;
		width: calc(100% - var(--BLU));
		bottom: unset;
	}
					
	.contpart .column button {
		width:  calc(var(--BLU)*1.4);
		height: calc(var(--BLU)*1.4);
		margin: calc(var(--BLU)*0.5);
		border-radius: 100%;
		background: url("../assets/graphics/arrow_w.svg");
		background-repeat: no-repeat;
		background-size: cover;
		border-style: solid;
		border-width: calc(var(--LINE));
		border-color: var(--white);
		background-position: 0 0;
		top: calc(100% - (var(--BLU)*2.4));
	}
	
	.contpart .column button.previous {
		transform: rotate(270deg);
	}
	
	.contpart .column button.next {
		transform: rotate(90deg);
	}
	
	.textcont > .projtext.top {
		padding-bottom: calc(var(--BLU)*10);
	}
	
}



/* 5 / Mobile / Portrait Only / XS / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (pointer:none), (pointer:coarse) and (orientation:portrait) {

	/* Root Changes */
	:root{--BLU:   21px;}
		
	#contcont > .projrow > .projcont {
		width: calc(100% - var(--BLU));
		padding-bottom: calc(var(--BLU)*1);
		text-align: center;
	}
	
	#headcont .headtext.ausst {
		padding-top: calc(var(--BLU)*2);
	}
	
	.pagetype_home > #headcont .headtext .logo {
		position: absolute;
		width: calc(var(--BLU)*10);
		max-width: 90%;
		height: calc(var(--BLU)*12);
		background: url("../assets/graphics/GLG-Logo-D-black-RGB.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;

	}
	
	.pagetype_home > #headcont .headtext .arrow {
		margin-top: calc(var(--BLU)*5);
	}
	
	#footcont > .site,
	#footcont > .post,
	#footcont > .kont {
		position: fixed;
		width: 100%;
		float: none;
		left: unset;
	}	
	
	#footcont > .site {
		top: unset;
		bottom: calc((var(--vh, 1vh) * 50) - (var(--BLU)*3));
		
	}	
	
	#footcont > .post {
		top: unset;
		bottom: calc((var(--vh, 1vh) * 50) + (var(--BLU)*1));
		
	}	
	
	#footcont > .kont {
		top: unset;
		bottom: calc((var(--vh, 1vh) * 50) + (var(--BLU)*6));
        padding-bottom: var(--BLU);
	}
		
	#contcont > .projrow > img.half {
		width: calc((100% - (var(--BLU)*1)));
	}
	
	.contpart .column.l {
		width: calc(100% - var(--BLU));
	}

	.contpart .column.r {
		position: relative;
		height: calc(100vw * 1.5);
		padding: calc(var(--BLU)*0.5);
		width: calc(100% - var(--BLU));
	}

}