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

html, html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}

@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-100.woff2') format('woff2');
	font-weight: 100;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-200.woff2') format('woff2');
	font-weight: 200;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-300.woff2') format('woff2');
	font-weight: 300;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-400.woff2') format('woff2');
	font-weight: 400;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-500.woff2') format('woff2');
	font-weight: 500;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-600.woff2') format('woff2');
	font-weight: 600;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-700.woff2') format('woff2');
	font-weight: 800;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-800.woff2') format('woff2');
	font-weight: 800;
}
@font-face {
	font-family:heebo;
  	src: url('fonts/heebo-v21-latin-900.woff2') format('woff2');
	font-weight: 900;
}

html, body { 
	text-size-adjust:none;
    animation: fadeInAnimation ease-in-out .3s;
	animation-iteration-count: 1;
    animation-fill-mode: forwards;
	}
@keyframes fadeInAnimation {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* --------------------BACKGROUND ---------------*/

/*.backgroundimage{
	display:flex;
	width: auto;
	height: 100vh;
}
#baggrundtilforside{
	display: flex;
	width: auto;
	height: 100vh;
}*/
.backgroundimage { 
    z-index: -20;
    position: fixed;
	top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	background-position: bottom right;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment:scroll;
	opacity:80%;
}
#frontpagebackground{
	background-image: url(images/projekter/PenthouseAarhusOe3-WEBCO.jpg);
	background-position: bottom center;
}
#blackwood{
	background-image: url(images/background/blackwood.jpg);
}
#brick{
	background-image: url(images/background/brick.jpg);
}
#cartboard{
	background-image: url(images/background/cartboard.jpg);
}
#clover{
	background-image: url(images/background/clover.jpg);
}
#efeu{
	background-image: url(images/background/efeu.jpg);
}
#felt{
	background-image: url(images/background/felt.jpg);
}
#iron{
	background-image: url(images/background/iron.jpg);
}
#metallica{
	background-image: url(images/background/metallica.png);
}
#render{
	background-image: url(images/background/render.jpg);
}

/* -------------------HIDE ADDRESS BAR SCROLLER TIL SIDER DER IKKE SCROLLER-----------------------*/

.hideadressbar{
	position:inherit;
	height: 1000px;
	z-index: -10;
}


/*  -----------------------------INDHOLD----------------------------- */

@media (min-device-width:1200px) and (orientation:landscape){ /*placerer indhold pænt på store skærme*/
.outerwrap{
	position: relative;
	max-width: 1400px;
	margin: 0 auto 0 auto;
	z-index: 0;
}
}

/*---------FRONT PAGE ---------*/

#headlinefrontpage1, #headlinefrontpage2{
	visibility: hidden;
	position: absolute;
}

.frontpagetextwrap{
	display:flex;
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	z-index: -1;
}

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

#frontpagetext1, #frontpagetext2{
	color:white;
	font-family:heebo;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
	font-size: 18px;
	letter-spacing: 0.02rem;
	font-weight: 300;
	opacity: 0;
	animation: fadeInText ease-in 1.5s;
	animation-iteration-count: 1;
    animation-fill-mode: forwards;
	padding: 0 15px 0 15px;
}

#frontpagetext1{
	animation-delay: .5s;
	margin-bottom: 1rem;
}
#frontpagetext2{
	animation-delay: 2s;
}

@media (min-device-width:768px){ /* Øger tekststørrelsen ved stor skærm */
#frontpagetext1, #frontpagetext2{
	font-size: 30px;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
}
}
@media (orientation:landscape){
#frontpagetext1, #frontpagetext2{
	align-self: flex-end;
	text-align: right;
}
}
@media (orientation:portrait){
#frontpagetext1, #frontpagetext2{
	align-self: flex-start;
	text-align: left;
}
}


/*---------OTHER PAGES -----------------*/

:root{
	--contentmaxwidth: 960px;
	--contentmarginright: 0;
	--contentmarginleft: auto;
	--contentgeneralpadding: 8%;
}

.overall-content, .imagescroll{ /* ydre containere */
	max-width: var(--contentmaxwidth);
	margin-right: var(--contentmarginright);
	margin-left: var(--contentmarginleft);
}

/*----Projektsider----*/

#headlineprojectpage1{
	visibility: hidden;
	position: absolute;
}

.imagescroll{
	position:relative;
	padding: 9px 9px 0px 9px; /*afstand mellem projektbilleder og kant*/
	z-index: 1;
	font-size: 0; /*fjerner uønsket afstand mellem containere*/
}

.imagelandcsape, .imageportrait{
	margin-bottom: 9px; /*afstand vandret mellem projektbilleder*/
	position:relative;
	box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.6);
}

.projectimage{
	position: relative;
	width:100%;
	object-fit: contain;
	border: 1px solid #787878;
	z-index: 1;
}

.projectlink{
	display:block;
	position: absolute;
	font-family:heebo;
	color:#FFFFFF;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	text-decoration: none;
	letter-spacing: 0.05rem;
	line-height: 0.5;
	width:100%;
	/*background: rgba(255,255,255,0.30);*/
	font-size: min(calc(75vw / 10), 4.5rem);
	font-weight: 800;
	bottom: 12px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	padding:var(--contentgeneralpadding);
	z-index: 2;
}

.projectlinksmall1{
	position: relative;
	font-size: min(calc(75vw / 13), 3.5rem); /*min(calc(75vw / 15), 3.3rem);*/
	font-weight: 400;
}
.projectlinksmall2{
	position: relative;
	font-size: min(calc(75vw / 30), 1.2rem);
	font-weight: 300;
	color:#FFFFFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}


@media (orientation:landscape){
	.projectlink{
		text-align: right;
}
}

@media (orientation:landscape) and (max-device-width:600px){
	.projectlinksmall2{
		font-size: min(10px);
}
}

@media (orientation:portrait) and (max-device-width:600px){
	.projectlinksmall2{
		font-size: min(12px);
}
}

@media (orientation:portrait){
	.projectlink{
		text-align: left;
		
}
}
/*----Portræt og "Om" tekst på siden Om LA------*/
.aboutwrap{
	display:flex;
	align-items:flex-start;
	justify-content: space-between;
	max-width: var(--contentmaxwidth);
	padding-top:var(--contentgeneralpadding);
	padding-bottom:var(--contentgeneralpadding);	
}

.portraitimage{
	max-width: 45%;
}

.abouttext{
	font-family:heebo;
	color:white;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	font-size: 1rem;
	font-weight: 200;
	letter-spacing: 0.05rem;
	padding-left: var(--contentgeneralpadding); /*sætter afstand til billede når text og billede er i row*/
}
#aboutsimon{
	border: none; /*override border på p tag*/
	padding-top: 0; /*override padding på p tag */	
}

@media (max-width:700px){ /* klemmer portræt ind på lodret linje ved smal viewport */
	.aboutwrap{
		flex-direction: column;
	}
	.abouttext{
		align-self: flex-end;
		padding-left: 0;
		padding-top:var(--contentgeneralpadding); /*sætter afstand til billede når text og billede er i row*/
}
.portraitimage{
	max-width: 100%;
}	
}


/*---------GENEREL TEXTSTYRING -----------------*/

.generaltext, .projecttext{
	font-family:heebo;
	color:white;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	font-size: 1rem;
	font-weight: 200;
	letter-spacing: 0.05rem;
}

.generaltext{
	padding:var(--contentgeneralpadding);
	margin-top:90px; /*Sætter overskriftens afstand til toppen af siden*/
}

@media (max-width:768px) and (orientation:landscape){
.generaltext, .projecttext{ /* sørger for tekst indryk på tablet og mobil i landscape */
	padding-left:20%;
}
}

@media (min-device-width: 1200px){
	.generaltext{
		margin-top: min(140px);
}
}

.projecttextbackground{
	position: relative;
	margin-bottom: 9px; /*afstand vandret mellem projektbilleder og tekstfelt*/
	/*border: 1px solid #787878;*/
	box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.6);
	z-index: 10;
	padding: var(--contentgeneralpadding);
	background-color: rgba(255,255,255,0.20);
}

.projectheadline{
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: solid grey 0.1px;
}

.projecttitlelarge{ /*span*/
	font-family:heebo;
	color:#FFFFFF;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	text-decoration: none;
	letter-spacing: 0.05rem;
	font-size: 3rem;
	font-weight: 800;
	line-height: 3rem;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	z-index: 2;
		
}
.projecttitlesmall{/*span*/
	line-height: 2.5rem;
	font-size: 2.3rem; /*min(calc(75vw / 15), 3.3rem);*/
	font-weight: 400;
}

@media (max-width: 600px){
	.projecttitlelarge{
		font-size: 2rem;
}
	.projecttitlesmall{
		font-size: 1.6rem;
		line-height: 1.5rem;
}
}

.borderline{/* horisontal linie */
	border-top: 0.01px solid #727272;
	border-bottom: none;
	
}
	
.kursiv{ /* span */
	font-style: italic;
}
.fed{ /* span */
	font-weight: 400;
}
.quote{ /* span */
	font-style: italic;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
}
.quotesubtext{ /* span - citat navn*/
	display: block;
	right:0;
	font-weight: 200;
	font-size: 0.7rem;
	/*line-height: 3;*/
	text-align: right;
}
.quotationlarge{ /* span */
	font-style: italic;
	font-weight: 600;
	font-size: 5rem;
	line-height: 0.001;
	vertical-align: -2rem;
}



	
h1{ 
	font-family:heebo;
	color:white;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.02rem;
	text-align: center;
	padding-bottom: var(--contentgeneralpadding); /* sætter afstand mellem overskrift og border ved tekst */	
}

p{
	border-top: solid #727272;
	border-top-width: 0.01px;
	border-bottom: solid #727272;
	border-bottom-width: 0.01px;
	padding-top: var(--contentgeneralpadding); /* sætter afstand mellem border og tekst */
	padding-bottom: var(--contentgeneralpadding); /* sætter afstand mellem border og tekst */
}

/* #textviden{ sidens textfarve, vælges afhængig af baggrunden på ID niveau
	color: black; 
}*/




/*-----DANSKE ARK LOGO PÅ SIDEN KONTAKT ------*/
.danskearklogoKONTAKT{
	width: 180px;
	margin-top: 10vh;
}



/* ------------------MENU ------------------------------------------- */

@media (max-device-width:600px), (max-device-height:600px){
	:root {
	--shortside: 3.5rem;
}
}
@media (min-device-width:600px), (min-device-height:600px){
	:root {
	--shortside: 4.0rem;
}
}
@media (min-device-width:768px), (min-device-height:768px){
	:root {
	--shortside: 4.5rem;
}
}
@media (min-device-width:992px), (min-device-height:992px){
	:root {
	--shortside: 5.0rem;
}
}
@media (min-device-width:1200px){
	:root {
	--shortside: 5.5rem;
}
}

:root {
	/*--menucolor: #1C3500;*/
	--longside: calc(var(--shortside) * 3.5);
	--droplength1: calc(var(--shortside) * 3.5);
	--droplength2: calc(var(--shortside) * 4.2);
}

.menu{
	position: relative;
	z-index: 99;
	width: 100%;
	height: 100%;
}

.menu-drop{ 
	position:fixed;
	background-image: linear-gradient(90deg, #AA1B1B, #A57305, #9B9B2C, #2D6324, #2B7F7F, #2C437A, #7F2B7F, #AA1B1B);
	background-size: 2000% 100%;
	animation: Menucolor 120s infinite;
	/*border: 0.05px solid #122200 ;*/
	box-shadow: -2px 8px 14px 0px rgba(0,0,0,0.6);
	transition: .6s ease-in-out;
	z-index: 1;
}

@keyframes Menucolor {
    0%{background-position:0% 0%}
    100%{background-position:100% 0%}
	/*0%{background-position:0% 0%}*/
}

.hamburger{
	width: calc(var(--shortside) / 3.5);
	top: calc(var(--shortside) / 9);
	opacity: 0.5;
}

.menu-drop:hover > .btn{ /* Indstiller styling af knapper når de ruller ud */
	visibility: visible;
	transition: .6s ease-in-out;
	transition-delay: .4s;
	opacity: 40%;
}

.btn{ /* styling af knapper i menuen */
	visibility: hidden;
	position:absolute;
	background:transparent; /* skal være transparent */
	color: white;
	opacity: 0%;
	font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
	font-size: 0.9rem;
	text-decoration: none;
	text-align: left;
	border: none;
	white-space: nowrap; 
	cursor: pointer;
	transition: .2s ease-in-out;
	z-index: 2;
}



/* Media query for skærm i landskab */

@media (orientation:landscape){
	
#menu-drop-portrait{
	display:none;
}
	
#menu-logo-lodret{ 
	position:absolute;
	width: calc(var(--shortside) / 1.2);
	left: calc(var(--shortside) / 12);
	bottom: calc(var(--shortside) / 5);
	transition: .6s ease-in-out;
	z-index: 3;
}
	
#hamburger-landscape{
	position: absolute;
	left: calc(var(--shortside) / 10);
}
	
.menu-drop{ /* selve fold ud menuen */
	width: var(--shortside); /* sætter bredden på fold ud menuen */
	height: var(--longside); /* sætter højden på fold ud menuen */
	left:5%; /* sætter foldud menuens sideverse placering ift baggrundsfeltet */
	top:0;
	border-bottom-right-radius: calc(var(--shortside) / 12);
	border-bottom-left-radius: calc(var(--shortside) / 12);
}
	
.menu-drop:hover{
	width: var(--droplength2); 
}
	
.menu-drop:not(:hover){ 
	width: var(--shortside);
	transition: .6s ease-in-out;
}

.luk:active > .menu-drop{
		width: var(--shortside);
	transition: .6s ease-in-out;
	}
	
.btn { /* styling af knapper i menuen */
	top: calc(var(--shortside) * 0.17);
	left: calc(var(--shortside) / 0.75); 
	width: 70%;
}

.menu-drop:hover > #btnL0{
	top: calc(var(--shortside) * 0.9); /* sætter afstanden for hvor på foldud menuen første knap lander */
}	
.menu-drop:hover > #btnL1{
	top: calc(var(--shortside) * 1.4); /* sætter afstanden for hvor på foldud menuen første knap lander */
}
.menu-drop:hover > #btnL2{
	top: calc(var(--shortside) * 1.9); /* sætter afstanden for hvor på foldud menuen anden knap lander */
}
.menu-drop:hover > #btnL3{
	top: calc(var(--shortside) * 2.4); /* sætter afstanden for hvor på foldud menuen tredje knap lander */
}
.menu-drop:hover > #btnL4{
	top: calc(var(--shortside) * 2.9); /* sætter afstanden for hvor på foldud menuen fjerde knap lander */
}
}



/* Media query for skærm i portræt */

@media (orientation:portrait){

#menu-drop-landscape{
	display:none;
}

#menu-logo-vandret{ /* logo */
	position:absolute;
	height: calc(var(--shortside) / 1.2);
	left:calc(var(--shortside) / 5);
	top:calc(var(--shortside) / 12);
	transition: .6s ease-in-out;
	z-index: 3;
}
	
#hamburger-portrait{
	position: absolute;
	left: calc(var(--shortside) / .325);
}
	
.menu-drop{ /* selve fold ud menuen */
	width: var(--longside); /* sætter bredden på fold ud menuen */
	height: var(shortside); /* sætter højden på fold ud menuen */
	top:5%;
	right: 0; /* sætter foldud menuens sideverse placering ift baggrundsfeltet */
	border-top-left-radius: calc(var(--shortside) / 12);
	border-bottom-left-radius: calc(var(--shortside) / 12);
}
	
.menu-drop:hover{
	height: var(--droplength2); 
}
	
.menu-drop:not(:hover) { 
	height: var(--shortside);
	transition: .6s ease-in-out;
}
	
.btn { /* styling af knapper i menuen */
	top: calc(var(--shortside) * 0.8); /*sænker menulinjernes animationsstart til under logoet */
	left: calc(var(--shortside) / 3.1);
	width: 100%;
}

.menu-drop:hover > #btnP0{
	top: calc(var(--shortside) * 1.2); /* sætter afstanden for hvor på foldud menuen første knap lander */
}	
.menu-drop:hover > #btnP1{
	top: calc(var(--shortside) * 1.8); /* sætter afstanden for hvor på foldud menuen første knap lander */
}
.menu-drop:hover > #btnP2{
	top: calc(var(--shortside) * 2.4); /* sætter afstanden for hvor på foldud menuen anden knap lander */
}
.menu-drop:hover > #btnP3{
	top: calc(var(--shortside) * 3.0); /* sætter afstanden for hvor på foldud menuen tredje knap lander */
}
.menu-drop:hover > #btnP4{
	top: calc(var(--shortside) * 3.6) /* sætter afstanden for hvor på foldud menuen fjerde knap lander */
}
}

/* ----------------------FOOTER -------------------------------------- */


.footer{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: var(--contentmaxwidth);
	margin-right: var(--contentmarginright);
	margin-left: var(--contentmarginleft);
	margin-bottom: 20px;
	z-index: -10;
}

.footertext{
	padding: 5% 0% 5% var(--contentgeneralpadding);
	line-height: 0.8rem;
	align-self:center;
	opacity: 70%;
	z-index: -10;
}
.danskearklogo{
	flex:0 1 180px;
	margin:0% 10% 0% 0%;
	align-self:center;
	z-index: -10;
}
#danskearklogohvidtext{
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: -10;
}
	
h6{
	font-family:heebo;
	color:white;
	font-smooth: antialiased;
    font-smooth: grayscale;
    text-rendering: optimizeLegibility;
  	font-size: 0.7rem;
	font-weight:200;
	letter-spacing: 0.06rem;
	line-height: 0.9rem;
	text-align: left;
	white-space: nowrap;
	z-index: -10;
}
.footertextbold{
	font-size: 0.8rem;
	font-weight: 600;
	z-index: -10;
}
@media (max-device-width:768px) and (orientation:landscape){
.footertext { /* sørger for tekst indryk på lille mobil i landscape */
	padding-left:20%;
}
}
@media (max-device-width:768px) and (orientation:portrait){
.danskearklogo { /* sørger for tekst indryk på lille mobil i landscape */
	margin:0% 10% 0% 10%;
}
}