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

* { margin:0; padding:0; border:0; }

html {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	color:black;
}

body {
	background-color:#F6F6F6;
	width:100%;
	min-height:100%;
}


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

aside {
	background-color:black;
	position:fixed;
	min-height:100%;
	padding-left:30px;
	padding-right:30px;
	padding-top:25px;;
	width:280px;
	box-sizing:border-box;
}

header { width:150px; height:150px; margin:20px auto 30px auto; }

header a img { width:100%; }

nav a img { width:100%; }

	a.svg {
	  position: relative;
	  display:inline-block;
	  float:left;
	}
	
	a.svg:after {
	  content: ""; 
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left:0;
	}

aside h1 { color:white; font-size:1.2em; margin-bottom:35px; }

aside a {
	font-family:"Times New Roman"; 
	font-size:1.4em;
	font-weight:400; 
	font-style:oblique; 
	text-decoration:none; 
	color:white; 
	-webkit-transition: color 0.15s; /* For Safari 3.1 to 6.0 */
	transition: color 0.15s;
	text-align:center;
	letter-spacing:2px;
}

aside p { float:none; }

	aside a:hover { color:#9E9E9E; }


/* MENU */
hr { height:1px; width:100%; background-color:#ffffff; opacity:0.2; margin: 18px 0 18px 0; }

ul { list-style:none; }

footer { position:absolute; bottom:20px; width:100%; left:0;  }

	/* CIRKEL I FOOTER */ 
	footer div { 
		width:3px; 
		height:4px; 
		border-radius:30px; 
		background-color:rgba(0,0,0,0);
		border:2px solid #d33592;
		margin: 10px auto;
	}
	
	footer p { color:#B1B1B1; text-align:center; letter-spacing:0.5px; font-size:0.7em; font-weight:200; float:none;}


.icons { width:16px; height:16px; margin-right:10px; opacity:0.4; float:left; }

nav { display:none; }

#burgerikon {display:none; }
	

	
/*CONTENT -----------------------------------------------------------------------------------------------*/

main {
	position:absolute;
	left:280px;
}

section {
	position:relative;
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
	width:86%;
}


/*CASE IMAGE HOVER TEXT OVERLAY ----------------------------------------------------------------------*/

main > h1 { display:none; }
main > img { display:none; }



article {
	width:28.5%;
	margin:2%;
	position:relative;	
	float:left;
}

	article img { width:100%; box-shadow:0 3px 3px 0 #C9C9C9; }
	article:nth-child(-n+3) { margin-top:5%; }
	
	article:hover .text { opacity:1; }
	
.text { 
	position:absolute; 
	width:100%; 
	opacity:0; 	
	top:0;
	-webkit-transition:0.3s; /* For Safari 3.1 to 6.0 */
	transition:0.3s;
	background:rgba(0, 0, 0, 0.90);
	height:99%;
}

main section article div h1 { font-size:1.4em; color:#ffffff; margin-top:30%; }

.case_pil { 
	height:24px;
	width:100%;
	margin-top:10px;
}


/* SINGLE CASE ------------------------------------------------------------------------------------------*/

/*Tilbage knap*/
#tilbage { float:left; margin-top:2%; padding-left:2%; width:100px; }

	.tilbage_text { color:#838383; text-decoration:none; margin-top:-3px; float:left; }

/*Næste case knap*/
#naeste { float:right; margin-top:2%; padding-right:2%; width:100px; }

	.naeste_text { color:#838383; text-decoration:none; margin-top:-3px; float:left; width:73px; }

	.naeste_pil { 	
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
		transform: rotate(180deg);
		width:16px; 
		height:16px; 
		margin-left:10px; 
		opacity:0.4; 
		float:right;
	 }

.detalje { 
	width:300px;
	height:auto;
	position:relative;
	margin-top:0.7%;
}
	.ende { margin: 5% 0 5% 0; }
	
	.forside { padding:0 18% 0 18%;  }
	
	.om_os { margin-bottom:5%; } 
 
 main section div { text-align:center; float:left; width:100%; }
	
.stort_billede { 
	width:96%;
	max-height:100%;
	position:relative;
	box-shadow:0 3px 3px 0 #C9C9C9;
	margin:2%
}

.lille_billede {
	width:45.6%;
	max-height:100%;
	position:relative;
	box-shadow:0 3px 3px 0 #C9C9C9;
	margin:2%;
}


/* REFERENCE UNDER CASE */
#reference {
	width:70%;
	position:relative;
	margin:5% auto 0 auto;
	text-align:center;
	padding:4%;
	float:none;
}

	#reference::after {
	  content: "";
	  background: url(../img/quote.png);
	  background-repeat:no-repeat;
	  opacity: 0.15;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  position: absolute;
	  z-index: -1;   
	}

	section h3 span { 
		color:#838383; 
		font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
		font-style:normal;
		font-weight:500;
		font-size:0.8em;
	}


/* Knap til ALLE cases */
#knap { 
	text-align:center;
	margin:5% auto 4% auto;
	width:275px;
	padding:16px 0 16px 0;
	border:3px solid black;
	border-radius:40px;
	-webkit-transition:0.2s; /* For Safari 3.1 to 6.0 */
	transition:0.2s;
	float:none;
} 

	#knap:hover {
		color:white;
		background:black;
	}

/* Styling på knappens a */
.knap {
	font-weight:bold;
	font-size:1em;
	text-decoration:none;
	color:black;
}

.billedtekster { 
	margin:-6% 0 0 4%; 
	z-index:100; 
	position:relative;
	font-style:italic;
}

	
/*OM OS SIDE------------------------------------------------------------------------------------------------*/

main section > section {
	position:relative;
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

main section > section article {
	position:relative;	
	float:left;
}

.round { border-radius:300px; }

#l { 
	width: 60%;
	margin: 0 0 0 17%;
	padding: 5%;

}

main section section article figure figcaption {
	float:left;
	margin: 5%;
	width: 45%;
}

main section section article figure figcaption h1 { 
	font-size:1.2em; 
	text-align:left;
	margin:0 0 0 2%;
}

main section section article figure figcaption h2 { 
	font-size:1em; 
	letter-spacing:1px;
	line-height:normal;
	text-align:left;
	margin:0 0 10px 2%;
}

.deler { margin:10px 0 30px 0; }
		
		
main section section article figure img { width:40%; float:left; }

main section section article figure figcaption p { width: 100%; }

main section section article figure figcaption hr { background-color:black; }

/* Vi tilbyder */
#vi_tilbyder { float:left; }

#vi_tilbyder article { width:22.6%; margin:0 3% 0 0; float:left;}

	#vi_tilbyder article:last-child { margin:0 0 0 0; }
	
#vi_tilbyder article img { width:35px; height:35px; border-radius:100px; float:left; margin-bottom:5px; }

#vi_tilbyder h3 { 
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:bold;
	float:left; 
	margin:8px 0 0 10px;
}

#vi_tilbyder p { float:left; }

#vi_tilbyder a { color:#838383; font-weight:bold; }

.deler { background:black; opacity:0.2; margin:0 0 40px 0; float:left; }

iframe { margin:20px 0 20px 0; box-shadow:0 3px 3px 0 #C9C9C9; }

iframe + p { margin:0 0 0 0; line-hight:1em; }

.pil_eksempel { 
	width:16px; 
	height:16px; 
	margin:4px 0 35px 5px; 
	opacity:0.4; 
	float:left; 
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}


/*REFERENCER -----------------------------------------------------------------------------------------------*/

main section > figure {
	width:93%;
	margin:2%;
	float:left;
	border:1px solid #D8D8D8;
	padding:2%;
}

.top_nul { margin-top:0; }

main section > figure img {
	width:15%;
	margin:1% 2% 2% 2%;
    box-shadow:0 3px 3px 0 #C9C9C9;
}

main section > figure figcaption {
	width:80%;
	float:right;
}

main section > figure figcaption p {
	font-family:"Times New Roman"; 
	font-weight:400; 
	font-style:oblique;
}

main section > figure figcaption p span {
	color:#838383; 
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:500;
}

.referencer_a {
    color: #838383;
    font-weight: bold;
	text-decoration:none;
	font-size: 0.8em;
	float:left;
}

.referencer_link { margin:10px 0 0 2%;}

.pil_reference { 
	width:16px; 
	height:16px; 
	margin:0 0 10px 6px; 
	opacity:0.4; 
	float:left; 
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
 
}

/*FONTS ------------------------------------------------------------------------------------------------*/

/*CASE OVERSKRIFT*/
h1 { font-size:2em; text-align:center; }

/*TROMPET*/
h2 { 	
	font-family:"Times New Roman"; 
	font-size:1.3em;
	font-weight:400; 
	font-style:oblique; 
	line-height:40px;
	letter-spacing:3px;
	margin:-0.5% 0 2% 0;
	text-align:center; }

/*REFENRECE*/
h3 { font-family:"Times New Roman"; font-weight:400; font-style:oblique; }

p { font-size: 0.8em; line-height:1.5em; margin:1% 2% 1% 2%; float:left; }

	
p a, figcaption a { 
	color:#E6007E; 
	-webkit-transition: color 0.15s; /* For Safari 3.1 to 6.0 */
	transition: color 0.15s;
	
	
}

p a:hover { 	
	opacity:0.6;
}

	
/* RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE */
/* RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE */
/* RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE */


@media screen and (max-width: 1000px) {
	
	aside {
		width:180px;
		padding-left:20px;
		padding-right:20px;
	}
	
	header { width:120px; height:120px; margin:10px auto 30px auto; }
	
	aside h1 { color:white; font-size:1em; margin-bottom:30px; font-weight:500; line-height:22px; }


	/*CONTENT -----------------------------------------------------------------------------------------------*/
	
	main {
		position:absolute;
		left:180px;
	}
	
	section {
		position:relative;
		box-sizing:border-box;
		margin-left:auto;
		margin-right:auto;
		width:90%;
	}
	
	
	/*ALLE CASES -------------------------------------------------------------------------------------------*/
	
	main section article div h1 { font-size:1.2em; }
	
	/*SINGLE CASE -------------------------------------------------------------------------------------------*/

	h1 { font-size:1.5em; }
	
	.detalje {
		width: 240px;
		height: auto;
	}
	
	 main section div { margin-bottom:3%; }
	 
	/* OM OS ------------------------------------------------------------------------------------------------*/
	
	#vi_tilbyder article { width:23%; margin:0 2.66% 0 0; float:left;}
	
		#vi_tilbyder article:last-child { width:23%; margin:0 0 0 0; float:left;}
	
}

@media screen and (max-width: 871px) {
	
	
	/*ALLE CASES -------------------------------------------------------------------------------------------*/
	
	main section article div h1 { font-size:1.4em; }
	
	article { width:45%; }
	
		article:nth-child(-n+3) { margin-top:2%; }
		article:nth-child(-n+2) { margin-top:5%; }
	
	/*SINGLE CASE -------------------------------------------------------------------------------------------*/
	
	.lille_billede { width:96%; }
	
	#reference { width:100%; }
	
	h2 { line-height:30px; }
	
	.billedtekster { 
	margin:-8% 0 0 4%; 
	}


	/*OM OS -------------------------------------------------------------------------------------------------*/
	
	main section > section article {
		position:relative;	
		float:left;
		width:30%;
	}
	
		#l { margin:30px 14% 0 13%; }
		#p { margin:30px 0 0 0; }
		
		
	.deler { margin-top:15px; }

	/* Vi tilbyder */
	
	#vi_tilbyder article { width:47%; margin:0 6% 0 0; }
	
		#vi_tilbyder article:nth-child(even) { margin:0; width:47%; }
			
}

@media screen and (max-width: 640px) {
	/*MOBIL MENU ----------------------------------------------------------------------------------------------*/
	
	aside { display:none; }
	
	nav { display:block; }
	
	main > h1 { display:block; font-size:1.2em; width:86%; margin:3% auto 1% auto; }
	
	main { left:0; top:50px; position:relative; }	
	
	main > img { width:86%; display:block; box-shadow:0 3px 3px 0 #C9C9C9; margin:0 auto 5% auto; }
		
	.menu {
		overflow-x:hidden;
		position:relative;
		left:0;
	}
	
	.menu-open { left:160px; }
	
	.menu-open .menu-side { left:0; }
	
	.menu-side, .menu {
		-webkit-transition: left 0.2s ease;
		-moz-transition: left 0.2s ease;
		transition: left 0.2s ease;
	}
	
	.menu-side {
		position:fixed;
		background:black;
		color:white;
		top:0;
		left:-160px;
		width:100px;
		height:100%;
		padding:30px;
	}
	
	.menu-side a { 
		font-family:"Times New Roman"; 
		font-size:1em;
		font-weight:400; 
		font-style:oblique; 
		text-decoration:none; 
		color:white; 
		letter-spacing:1px;
	} 
	
	.menu-side a:first-child { margin-bottom:25px;}
	
	.menu-side ul { list-style:none; }
	.menu-side li { text-align:center; }
	
	#burgerikon {
		display:block;
		background-color:#000000;
		position:absolute;
		width:100px;
		height:35px;
		border-radius:0 0 20px 0;
	}
	
	#burgerikon img {
		width:25px;
		height:25px;
		float:left;
		margin:4px 0 0 3px;
	}
	
	#burgerikon h1 { 
		color:white; 
		text-align:left; 
		float:left; 
		font-size:1em;
		letter-spacing:1px;
		margin:7px 0 0 10px;
	}
	
	/*SINGLE CASE -----------------------------------------------------------------------------------------*/
	
	#reference { width:90%; }
	
	#naeste { margin-top:0; margin-bottom:20px; }
	#tilbage { margin-top:0; margin-bottom:20px;}
	
	.stort_billede { margin-top:8% }
	
	.billedtekster { 
	margin:-9.5% 0 0 4%; 
	}

	
	/*OM OS ----------------------------------------------------------------------------------------------*/

	

	/*REFERENCER -----------------------------------------------------------------------------------------------*/
	


}