/* 2014 - bywerner.com */
html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, tt, var,
u, center, ol, ul, li
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
sup {
	margin: 0;
	padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}
a:active, a:focus {
	border: 0;
}
p {
	line-height: 1.5em;
}
/* touch devices */
.hover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;        
}


/* magic :) */

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

body {
	text-rendering: optimizelegibility;
	
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	
	-moz-tap-highlight-color:rgba(0,0,0,0); 
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;
	
	-ms-tap-highlight-color:rgba(0,0,0,0); 
	-ms-text-size-adjust: none;
	-ms-font-smoothing: antialiased;

	height: 100%;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	font-family: 'Titillium Web', sans-serif;
	overflow: auto;

	background: #ffffff;
}

/* navigation */
.menu {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;

	box-shadow: 0px 2px 5px #cdcdcd;

	top: 0;
    left: 0;
	z-index: 6;
	position: relative;
}

.menu, #start img {
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

/* logo*/
.logo {
	display: block;
	padding: 10px 0px 5px 5px;
}

/* navigation */
.navigation {
	display: none;
}
	.navigation li {
		display: inline-block;
		float: left;
	}
	.navigation li a {
		display: block;
		line-height: 32px;
		height: 32px;

		font-size: 15px;
		font-weight: 600;
		color: #202020;
		padding: 0px 6px 0px 6px;
	}

.navbutton {
	cursor: pointer;
}

/* subnavigation */
.subnavigation {
	display: none;
	margin: 20px auto 0px auto;
}
	.subnavigation ul {
		box-shadow: 0px 1px 3px #cdcdcd;
	}
	.subnavigation ul li {
		display: inline-block;
		float: left;
	}
	.subnavigation ul li a {
		padding: 6px 15px 6px 15px;
		background: #8f8f8f;
		color: #ffffff;
		font-weight: 600;
	}
		.subnavigation ul li a i {
			padding: 0px 5px 0px 5px;
		}
		.subnavigation ul li a:hover {
			background: #9c9b9b;
		}
	.subnavigation ul li:first-child a {
		border-radius: 2px 0px 0px 2px;
	}
	.subnavigation ul li:last-child a {
		border-radius: 0px 2px 2px 0px;
	}


/* content */

h1 {
	font: 36px;
	font-weight: 700;
	margin: 0;
	padding: 0;
	border: 0;
}
h2 {
	font: 24px;
	margin: 0;
	padding: 0;
	border: 0;
}
h3 {
	font: 22px!important;
	font-weight: 600;
	line-height: 38px;
}
/* placer */

.placer {
	margin: 0 auto;
	max-width: 1000px;

	padding: 0px 10px 0px 10px;
}

/* sections */
section {
	display: table;
	/*width: 100%;
	height: 100%;*/
	width: 100%;
	background: #f5f5f5;
}

.view {
	margin: 80px 0px 0px 0px;
}

	#start {
		height: 100%;
/*		background: url('../img/background_start.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;*/
	}
		#start .placer {
			position: relative;
			margin-top: 40%;
			text-align: center;
			display: block;
		}
		#start .startlogo {
			width: 95%;
			display: block;
			margin: 0 auto;
		}
		#start p {
			color: #ffffff;
			font-weight: 600;
			font-size: 18px;
			text-shadow: 1px 2px 2px #333;
		}
		#start h1 {
			color: #ffffff;
			text-shadow: 1px 2px 2px #333;
			letter-spacing: -2px;
			font-size: 36px;
			font-weight: 300;
		}
		#start h2 {
			color: #ffffff;
			font-weight: 300;
			text-shadow: 1px 2px 2px #333;
			letter-spacing: -1px;
		}
		#start .button {
			display: table;
			margin: 20px auto;
			padding: 10px 15px 10px 15px;
			font-weight: 600;
			color: #414141;
			background: #ffffff;
			border-radius: 4px;
			line-height: 20px;
			box-shadow: 0px 2px 2px #888;
		}
			#start .button i {
				color: #333;
				font-size: 16px;
				padding: 5px 5px 0px 0px;
				display: inline-block;
			}
	#intro {
		height: 100%;
	}
		#intro .circles {
			display: block;
			width: 180px;
			margin: 80px auto 0 auto;
		}
		#intro .circles .circle {
			display: block;

			height: 180px;
			width: 180px;
			background-size: 180px;

		}
			#intro .orange {
				background: url('../img/circle_orange.png') center center no-repeat;
			}
			#intro .text {
				display: none;
				height: 32px;
				line-height: 32px;
				font-size: 16px;
				font-weight: 600;
			}
			#intro .green {
				background: url('../img/circle_green.png') center center no-repeat;
			}
			#intro .blue {
				background: url('../img/circle_blue.png') center center no-repeat;
			}
		#intro .circles a {
			display: block;
			font-weight: 600;
			color: #ffffff;
			font-size: 16px;
			height: 180px;
			width: 180px;
			line-height: 180px;
			text-align: center;
		}

	/* sections header */
	header {
		display: block;
		height: 100px;
		line-height: 100px;
		color: #ffffff;
		background: #f55d27 url('../img/background_header_symbol.png') right center no-repeat;
		background-size: 80%;
	}
		header h1 {
			font: 24px;
		}

	article {
		clear: all;
		display: block;
		background: #ffffff;
		padding: 0px 0px 10px 0px;
		box-shadow: 0px 2px 3px #cdcdcd;
	}
		article .content {
			float: none;
			width: 100%;
			margin: 20px 0px 20px 0px;
		}
		article .contact {
			display: none;
		}
		article .leftimg {
			clear: both;
		}
			article .leftimg img {
				width: 150px;
			}
		article .content h3 {
			margin: 15px 0 5px 0;
			padding: 0;
			line-height: 20px;
		}
	#foraeldre {
		background: #f5f5f5;
	}
		#foraeldre header {
			background: #eb5d2a url('../img/background_header_symbol.png') right center no-repeat;
			background-size: 80%;
		}

	#bopaels {
		background: #f5f5f5;
	}
		#bopaels header {
			background: #99cc33 url('../img/background_header_symbol.png') right center no-repeat;
			background-size: 80%;
		}
	#samvaer {
		background: #f5f5f5;
	}
		#samvaer header {
			background: #3399cc url('../img/background_header_symbol.png') right center no-repeat;
			background-size: 80%;
		}
	#profil {
		background: #f5f5f5;
	}
		#profil header {
			background: #262930 url('../img/background_header_symbol.png') right center no-repeat;
			background-size: 80%;
		}
	#kontakt {
        height: 100%;
        background: #1b1b1b;
	}
		#kontakt .map {
			position: relative;
	        overflow: hidden;
	        height: 50%;
		}
		@-moz-document url-prefix() {
		    #kontakt .map {
		        height: 400px;
		    }
		}
		#kontakt .map iframe {
        position: relative;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 0;
    }

footer {
	display: table;
	width: 100%;
	background: #1b1b1b;
	color: #fff;
}
	footer a {
		color: inherit;
	}
	footer a:hover {
		text-decoration: underline;
	}
	footer .footercontent {
		display: table;
		width: 100%;
		background: #222;
		height: auto;

		padding: 40px 0px 40px 0px;
	}
		footer .footercontent .adress {
			display: block;
			margin: 0 auto;
			width: 200px;
		}
		footer .footercontent .reviews {
			display: none;
		}
		footer .footercontent .sitemap {
			display: none;
			clear: both;
		}
		footer .footercontent .sitemap h3 {
			font-weight: 600;
		}
			footer .footercontent .sitemap ul li {
				display: inline-block;
				float : left;
			}
				footer .footercontent .sitemap ul li a {
					padding: 0px 5px;
					color: #a7a7a7;
				}
	footer .footerdisclaimer {
		display: block;
		width: 100%;
		height: 50px;
		background: #1b1b1b;
		color: #4c4c4c;
		line-height: 50px;
	}
		footer .footerdisclaimer a.footercookie {
			color: inherit;
			float: left;
			padding: 0px 0px 0px 10px;
		}
		footer .footerdisclaimer .footercopy {
			float: right;
			padding: 10px 10px 0px 0px;
			line-height: 25px;
		}
		footer .byw {
			color: #2b2b2b;
			font-size: 10px;
			font-weight: 300;
			text-align: right;
			display: block;
		}

#retshjaelp {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 20;

	font-size: 12px;
	max-width: 400px;
	padding: 10px;

	background: #ffffff;
	color: #000000;
	box-shadow: 1px 1px 3px #c1c1c1;
	border-radius: 3px;
	opacity: .5;
	cursor: pointer;
}
	#retshjaelp a {
		color: #f95e26;
	}
	#retshjaelp:hover {
		opacity: 1;
	}
	#retshjaelp h2 {
		font-size: 13px;
	}
	#retshjaelp p {

	}
/* flex */

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

.menu {
	display: block;
	width: 100%;
	min-height: 80px;
	background: #fff;

	box-shadow: 0px 2px 5px #cdcdcd;

	top: 0;
    left: 0;
	z-index: 1;
}
.logomob {
	display: none;
}
.logo {
	display: inline-block;
	float: left;

	padding: 25px 0px 0px 5px;
}
.navigation {
	display: inline-block; /* hides on loads */
	float: right;
	margin: 25px 5px 5px 0px;
}
	.navigation li {
		display: inline-block;
		float: left;
	}
	.navigation li a {
		display: block;
		font-size: 16px;
	}

	.button {
		display: none;
	}

/* subnavigation */
.subnavigation {
	display: table;
}

 /* content */

 .view {
	margin: 60px 0px 0px 0px;
}

/* start */
#start .placer {
	position: relative;
	margin-top: 25%;
}
	#start .startlogo {
		width: 90%;
		display: block;
	}

/* intro */
#intro .circles {
	display: block;
	width: auto;
	margin: 0 auto;
	text-align: center;
	min-height: 650px;
}

		#intro .circles .circle {
			display: block;

			height: 283px;
			width: 283px;
			line-height: 283px;
			background-size: 283px;

			-webkit-animation-duration: 0.4s; 
		    animation-duration: 0.4s; 
		    -webkit-animation-fill-mode: both; 
		    animation-fill-mode: both; 
		    -webkit-animation-timing-function: ease-in; 
		    animation-timing-function: ease-in; 
		}
			@-webkit-keyframes circle { 
			    0% { -webkit-transform: scale(1); } 
			    50% { -webkit-transform: scale(1.1); } 
			    100% { -webkit-transform: scale(1); } 
			} 
			@keyframes circle { 
			    0% { transform: scale(1); } 
			    50% { transform: scale(1.1); } 
			    100% { transform: scale(1); } 
			} 
		#intro .circles .circle:hover {
			-webkit-animation-name: circle; 
   			animation-name: circle; 
		}


			#intro .orange {
				background: url('../img/circle_orange.png') center center no-repeat;
				margin: 0 auto;
			}
			#intro .text {
				display: block;
				line-height: 40px;
			}
			#intro .green {
				background: url('../img/circle_green.png') center center no-repeat;
				float: left;
				margin-left: 20%;
				margin-right: 10px;
			}
			#intro .blue {
				background: url('../img/circle_blue.png') center center no-repeat;
				float: left;
				margin-left: 10px;
			}
		#intro .circles a {
			display: block;
			font-weight: 600;
			color: #ffffff;
			font-size: 24px;
			height: 283px;
			width: 283px;
			line-height: 283px;
		}


/* sections header */
header {
	display: block;
	height: 120px;
	line-height: 120px;
	color: #ffffff;
}

article {
	display: block;

}
	article .content {
		float: left;
		width: 70%;
		color: #333333;
	}

	article .contact {
		display: table;
		width: 22%;
		float: right;
		position: relative;

		/*border: 1px solid aqua;*/

		margin: 380px 0 20px 0;
	}
		article .contact h3 {
			margin: 0;
		}

	article .leftimg {
		clear: none;
		display: table;
		width: 22%;
		float: right;
		position: relative;
		text-align: center;
		margin: 35px 0 0 0;
	}


/* contact box globals */
#bopaels .contact, #bopaels .leftimg {
	float: left;
}

/* forældre */
#foraeldre {
	
}
	#foraeldre header {
		background: #eb5d2a url('../img/background_header_symbol.png') 60% center no-repeat;
		background-size: normal;
	}
		#foraeldre article .placer {
			background: url('../img/background_article_foraelder.png') right top no-repeat;
		}
		#foraeldre article .content {
			float: left;
		}
/* bopæls */
#bopaels {
	
}
	#bopaels header {
		background: #99cc33 url('../img/background_header_symbol.png') 60% center no-repeat;
		background-size: normal;
	}
		#bopaels article .placer {
			background: url('../img/background_article_bopaels.png') left top no-repeat;
		}
		#bopaels article .content {
			float: right;
		}
/* samvær */
#samvaer {
	
}
	#samvaer header {
		background: #3399cc url('../img/background_header_symbol.png') 60% center no-repeat;
		background-size: normal;
	}
		#samvaer article .placer {
			background: url('../img/background_article_samvaer.png') right top no-repeat;
		}
		#samvaer article .content {
			float: left;
		}

/* profil */
#profil {
}
	#profil {
		background: #f5f5f5;
	}
		#profil header {
			background: #262930 url('../img/background_header_symbol.png') 60% center no-repeat;
			background-size: normal;
		}
		#profil article {

		}
		#profil article .placer {
			background: url('../img/background_article_profil.png') right top no-repeat;
			min-height: 400px;
		}
		#profil article .content {
			float: left;
		}
			#profil article .content img {
				width: 200px;
				margin: 0.5em 2em 0 1em;
				float: left;
			}

/* resultater */
#resultater {
	
}
	#resultater header {
		background: #eb5d2a url('../img/background_header_symbol.png') 60% center no-repeat;
		background-size: normal;
	}
		#resultater article .placer {
			background: url('../img/background_article_resultater.png') left top no-repeat;
		}
		#resultater article .content {
			float: right;
		}
/* kontakt */

footer .footercontent {
	display: table;
	width: 100%;
}

footer .footercontent .adress {
	display: inline-block;
	float: left;
	width: 20%;
}
footer .footercontent .reviews {
	display: inline-block;
	float: left;
	width: 55%;
}
footer .footercontent .sitemap {
	clear: none;
	display: inline-block;
	float: right;
	width: 20%;
}
footer .footercontent .sitemap h3 {
	font-weight: 600;
}
	footer .footercontent .sitemap ul li {
		display: block;
		float: none;
	}
		footer .footercontent .sitemap ul li a {
			padding: 0px 5px;
			color: #a7a7a7;
		}

}