html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */ 
}

header,nav,article,footer,section,hgroup,.hero {
	display: block;
	width: 100%;
}

body {
	font-size: 16px;
	text-align: justify;
}

.wrapper {
	margin: 0 auto;
	min-height: 100%;
	width: 100%;
}

img,iframe,table,object {
	max-width: 100%;
}

ul,li {
	padding: 0;
	margin: 0;
}







/*
------------------------
	NAV (desktop first)
------------------------
*/


header,
nav {
	position: static;
}

.toggleMenu {
	display: none;
}

nav ul,
nav li,
nav a {
	padding: 0;
	margin: 0;
}
	
nav {
	text-align: left;
}

nav > ul {
	float:right;
}

nav .container-fluid {
	z-index: 2;
}

nav h6 {
	margin: 0;
	padding: 0;
	line-height: 1em;
}

nav ul {
	list-style: none;
	*zoom: 1;
	z-index:1000;
	text-align: left;
}

nav ul:before,
nav ul:after {
	content: " "; 
	display: table; 
}

nav ul:after {
	clear: both;
}

nav ul ul {
	list-style: none;
	width: 14em;
}

nav ul a {
	*zoom: 1; /* ie7 */
}

nav ul li {
 	position: relative;
	z-index:50;
	*zoom: 1; /* ie7 */
}

nav ul ul li {
 	width: 100%;
}

nav ul > li {
	float: left;
}

/*

nav ul > li > .parent {
	background-image: url("downArrow.png");
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 1.5em;
	
}

*/

nav ul > li > a {
	display: block;
}

nav ul li ul {
	position: absolute;
	left: -9999px;
}

nav ul li ul li {
	position: relative;
}

nav ul li ul li:hover {
 	z-index:400; /* ie7 */
}

nav ul > li.hover > ul {
	left: 0;
}

nav ul li li.hover ul {
	left: 100%;
	top: 0;
}

nav ul li li a {
	display: block;
	/*position: relative;*/
	z-index:100;
}

nav ul li li li a {
	z-index:200;
	font-style: italic;
}




/* STYLE */	

nav ul ul {
	background: #f9f9f9;
}

nav ul#mainmekkemenu li {
	margin-right: 2em;
}

nav ul#mainmekkemenu > li:last-child {
	margin-right: 0;
}

nav a {
	border-top: transparent 7px solid;
	border-bottom_: transparent 1px solid;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	color: #aaa;
	padding: 2em 0 1em 0;
}


nav a:hover {
	color: #333333;

}

nav li:hover a {
	border-color: #333333;
	color: #333333;
	
}

nav li:hover ul a {
	color: #aaa;
}

nav li:hover ul a:hover {
	color: #333333;
}

nav ul ul a {
	padding: 0 0 1em 0;
	border: 0;
	letter-spacing: 0;
	text-transform: none;
}

nav ul ul li:last-child a {
	padding-bottom: 0;
}

nav .menu-selected a,
nav .menu-selected-parent > a,
nav .menu-selected a {
	color: #d0bd83;
	border-color: #d0bd83;
}

nav ul ul .menu-selected a {
	color: #d0bd83;
}

nav .menu-selected > a {
	font-weight: bold;
	}


/* mekke fixes */

ul#mainmekkemenu li ul {
	margin-left: 0 !important;
}




/* mekke hacks */

ul#mainmekkemenu, 
ul#mainmekkemenu li {
    padding:0; 
    margin:0;
    list-style: none;
}
ul#mainmekkemenu li ul {
    padding: 2em; 
    margin: 0;
    margin-left: 0;
}

div#social_wrap {
	display: none;
	position: relative;
	margin-bottom: 4em;
	top: 4em; /* same as bottom margin */
	padding-left: 2em;
	border-left: 5px solid #f5f2e9;
	width: 500px;
}

#socialTrigger{
	cursor: pointer !important;	
	display: block;
}

a#socialTrigger:focus{
	box-shadow: 0 0 0px rgba(0, 0, 0, 0);
	-webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0); 
	-moz-box-shadow: 0 0 0px rgba(0, 0, 0, 1); 
}



/*
------------------------
	text
------------------------
*/


h1 {
	font-size: 1.75em;
	font-weight: normal;
	}

h2 {
	font-size: 1.5em;
	font-weight: normal;}

h3 {
	font-size: 1em;
	text-transform: uppercase;}


h4 {
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
	}

h5 {
	font-size: 1em;
	font-weight: bold;
	}

h6 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	}

address {
	font-style: normal;
	}

b,em,strong {
	font-weight: 400;
}




/*
------------------------
	forms
------------------------
*/

textarea, input[type=text] {
	background: #f7f4ec;
	padding: .5em;
	border: 0;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
textarea:focus, input[type=text]:focus {
  box-shadow: 0 0 5px #d0bd83;
  margin: 5px 1px 3px 0px;
  border: 1px solid #d0bd83;
}

form {
}

a.btn {
	display: block;
	display: inline-block;
	width: auto;
	color: white;
	text-decoration: none;
	transition: all .25s;
}

input[type=submit],
.btn {
	background: black;
	color: white;
	font-size: inherit;
	border: 0;
	padding: .5em;
	cursor: pointer;
	font-weight: bold;
	
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

input[type=submit]:hover,
a.btn:hover {
	background: #d0bd83;
}



/*
------------------------
	sections
------------------------
*/

hgroup {
	border-bottom: 1px solid transparent;
}

header h1,
header h2 {
	padding: 0;
	margin: 0;
	font-weight: 300;
}

header h1 {
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: 1.25em;
	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

header h2 {
	font-size: 1em;
	margin-top: .5em;
	font-style: italic;
}

header img {
	max-width: 350px;
}

.hero {
	height: 250px;
	background-position: center center;
	background-size: cover;
}

article {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

footer {
	text-align: center;
	color: #666;
}

footer svg {
	display: block;
	margin: 0 auto 1em;
	fill: #999;
	transition: all .25s;
}

footer a {
	color: #aaa;
	text-decoration: none;
}

footer a:hover {
	color: black;
}

footer a:hover svg {
	fill: black;
}

.stilling {
	box-shadow: 0 0 10px #ddd; 
	padding: 2em;
	margin-top: 2em;
}

.box {
	box-shadow: 0 0 10px #ddd; 
	padding: 2em 2em 4em 2em;
}



/*
------------------------
	spacing
------------------------
*/

	
.container {
	padding: .5em 1em;
}

header {
	padding-top: 0em;
}

hgroup {
	padding-bottom: 1.5em;
}

footer {
	padding-bottom: 1.5em;
	padding-top: 3em;
}

article {
	padding-top: 3em;
	padding-bottom: 4em;
}

nav {
	margin-top: 0;
}



/*
------------------------
	small
------------------------
*/

@media (min-width:480px) {

	
	.container {
		padding: 1em 2em;
	}

	hgroup {
		padding-bottom: 2em;
	}

	footer {
		padding-bottom: 2em;
	}
	
}


/*
------------------------
	medium
------------------------
*/

@media (min-width:768px) {
	
	
	body {
		font-size: 18px;
	}
	
	header {
		padding: 0;
	}
	

}












@media (min-width:768px) and (max-width: 1199px) {
	
	nav a {
		padding: .5em 0 1em 0;
		border-top: 0px;
		}
	
	nav > ul {
		float: none;
	}
	
	header,
	header .container {
		padding-bottom: 0;
	}

	header {
		border-top: 7px solid #d0bd83;
	}

}




/*
------------------------
	medium2
------------------------
*/

@media (min-width:900px) {
	
	.container {
		padding: 1em 4em;
	}

}




/*
------------------------
	desktop
------------------------
*/

@media (min-width:1200px) {
	
	

	body {
		font-size: 16px;
	}
	
	hgroup {
		padding: 0;
	}

	header {
		padding-bottom: 2em;
	}
	
	header:after {
		content: '.';
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
	}

	
	footer {
		padding-bottom: 5em;
	}

	.container {
		padding: 1em 6em;
	}
	
	nav {
		padding-top: 0;
	}
	hgroup {
		width: 33%;
		float: left;
	}
	
}


/*
------------------------
	desktop big
------------------------
*/

@media (min-width:1400px) {


	body {
		font-size: 16px;
	}
	
	nav {
		width: 63%;
		float: right;
	}

hgroup {
	margin-top: 7px;
}


}



/*
------------------------
	desktop huge
------------------------
*/

@media (min-width:1600px) {


	body {
		font-size: 18px;
	}
	
	header {
		padding-top: 0;
	}
	
	.hero {
		height: 300px;
	}

}












/*
------------------------
	look & feel
------------------------
*/


body {
	font-family: 'Open Sans',Arial, sans-serif;
	font-weight: 300;
	
	color: #222;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	padding: 0;
	background: #f1eee6;
	background: #f5f2e9;
	background: #f7f4ec;
	
	
}

header {
	background: white;
}

article {
	background: white;
}

.wrapper {
	border-top: 0 solid #666;
}

.container {
	max-width: 70em;
	max-width: 1600px;
	margin: 0 auto;
}

header {
}

header .container {
	padding-top: 0;
}

article .container {
}

hgroup {
	padding-top: 2em;
}

footer .container {
	opacity: .8;
}






/*
------------------------
	text and links
------------------------
*/

h1,h2,h3,h4,h5,h6,ul,ol {
	text-align: left;
}

ol,article ul {
	padding-left: 1.5em;
	margin: 0;
}

h3,h4,h5,h6 {
	margin-bottom: 0;Â 
}

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

p {
	margin: 0;
}

h1,h2,h3,a {
	color: #d0bd83;
}

h2 {
	color: #808080;
}

h1,h2 {
	font-weight: 300;
}

nav a,
a {
	transition: color .25s, border-color .25s;
}

a:hover {
	color: black;
}

footer a {
	color: inherit;
}

img { border: 0 none; } a[href$=jpg], a[href$=jpeg], a[href$=JPG], a[href$=jpe], a[href$=png], a[href$=gif] { text-decoration: none; border: 0 none; }

hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid gray;
	}





/*
------------------------
	small only
------------------------
*/


@media (max-width:480px) {
	
	.wrapper {
		border: 0;
	}

}

	
@media (max-width:768px) {
	
}

	
	hgroup img {
		padding-right: 2em;
	}







@media (max-width:767px){
	
	/* top nav 
	------------------------------------------------------------------------ */
	
	
	
	header,
	hgroup {
		padding: 0;
	}
	
	header .container {
		padding: 0 1em;
	}
	
	hgroup {
		padding-top: .5em;
	
	}
	
	nav > ul#mainmekkemenu {
	
		margin-top: 1em;
	}
	
	header {
		padding-top: .5em;
		padding-bottom: .5em;
	}
	
	hgroup img {
		width: 80%;
		padding-right: 0;
	}
	
	
	nav {
		text-align: center;
	}
	
		nav img {
			max-width: 100%;
			max-height: 3em;
			margin: 0 auto;
		}
		
		nav ul {
			position: static;
		}
	
	nav > ul {
		float:none;
	}
		
		nav ul a {
			padding-top: .5em;
			padding-bottom: .75em;
		}
		
		nav a {
			border: 0;
		}
		
		nav h6 {
			position: absolute;
			top: 1.25em;
			right: 1.25em;
		}
		
		.toggleMenu {
			display: block;
			width: 2em;
			height: 2.5em;
			padding-top: 1em;
			padding-right:1em;
			padding-left: 0;
			padding-bottom: .5em;
			background: url(menu.png) no-repeat right;
			background-size: auto 100%;
			font-weight: normal;
			text-transform: uppercase;
			letter-spacing: .1em;
			text-indent: -9999px;
		}
		
		.mobile-site-logo {
			padding-top: .2em;
			padding-bottom: .5em;
		}
		
		.mobile-site-title {
			display: block;
			padding-top: .2em;
			padding-bottom: .6em;
		}
		
		.active {
			display: block;
		}
		
		nav ul > li > .parent {
			background-position: 95% 50%;
		}
	
		
		nav ul li li .parent {
			background-image: url(downArrow.png);
			background-repeat: no-repeat;
			background-position: 95% 50%;
		}
		
		nav ul ul {
			display: block;
			width: 100%;
			border-top: 1px solid rgba(255,255,255,.5);
			border-bottom: 1px solid rgba(255,255,255,.5);
		}
		
		nav ul ul ul {
			border-top: 1px solid rgba(255,255,255,.25);
			border-bottom: 1px solid rgba(255,255,255,.25);
		}
		
		nav ul ul ul ul {
			border-top: 1px solid rgba(255,255,255,.1);
			border-bottom: 1px solid rgba(255,255,255,.1);
		}
		
		nav ul li,
		nav ul a {
			display: block;
			width: 100%;
		}
		
		nav ul > li.hover > ul , nav ul li li.hover ul {
			position: static;
		}

} 



/* changes */

.blackbox {
	background: #494949; 
	color: white; 
	padding: 2em 2em 2em 2em;
	margin-bottom: 1em;
}

@media all and (max-width: 768px) {
	.blackbox {
		margin-top: 2em;
	}
}

.blackbox a:hover {
	color: white;
}

.hero {
    background-size: auto 100% !important;
    background-repeat: no-repeat;
    background-color: white !important;
}