@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,latin-ext);

/* CSS Document */

/* COMPANY COLOR
	BLÅ= #5D7EA7  
	GRÅ= #9D9C9C */


*, *::before, *::after {margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*CLEAR HACK*/ 
.group::after {
  content: "";
  display: table;
  clear: both;
}

/*JUSTIFY GRID*/ 
.justify {	
	font-size: 0px;
	text-align: justify;
	}
	
.justify::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.justify > * {	
	font-size: 1rem;
	text-align: left;
	}

/*col-*/
.justify [class*='col-'] {
    display: inline-block;
	vertical-align: top;
}

.justify .col-33 {
  width: 33.33%;
  }
  
.justify .col-66 {
  width: 66.66%;
  }

.justify .col-87 {
  width: 87.5%;
  }

.justify .col-50 {
  width: 50%;
}

.justify .col-25 {
  width: 25%;
}

.justify .col-12 {
  width: 12.5%;
}

.justify .col-10 {
  width: 10%;
}

.justify .col-90 {
  width: 90%;
}

.justify .col-20 {
  width: 20%;
}

.justify .col-80 {
  width: 80%;
}

.justify .col-70 {
  width: 70%;
}

.justify .col-30 {
  width: 30%;
}

/*WRAP*/
.wrapper {
	width: 95%;
	max-width: 1024px;
	margin: 0 auto;
	}

html {
	position: relative;
    min-height: 100%;
	
	font: 300 14px/1.428 'Roboto', Helvetica, sans-serif;
	color:#323232;
	background-color:white;
	}

body {
	margin: 0 0 160px; /* = footer height */
}
	
/* HEADER */
header {height: auto; padding:1em 0 10em 0; background: #f2f2f2;}

header #logo,
header #content {display: inline-block; vertical-align: bottom;}
header #logo {width: 70%;}
header #content{width: 30%;}


header #logo img {width: 300px;}

header #content p {font-size: 2rem !important; color: #5D7EA7; line-height: 1.2; text-align: right;}
header #content a {border: none;}


/* GALLERY */
#gallery {}

#gallery figure {position: relative;}
#gallery figure figcaption {
	width: 80%;
	height: 60%;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	overflow: visible;
	margin: auto;
	color: white;
	text-align: center;
	background-color: rgba(93, 126, 167, 0.3);
	font-size: 2rem;
}

#gallery figure figcaption h1 {font-size: 3rem; margin: 0;}
#gallery figure figcaption p {font-size: 2rem; margin: 0;}


#gallery img {display: block; width: 100%;}

/* NAV */
nav[role="navigation"] {width: 100%;}
nav[role="navigation"] ul {float: right; margin: 0; margin-right: 1em;}
nav[role="navigation"] li {display: inline-block; border-right: 2px solid white; background: #f2f2f2;}
nav[role="navigation"] a {	
	display: block;
	width: 80px;
	padding: 5px 0;
	font-size: .9rem;
	text-align: center;
	border: none;
	text-transform: uppercase;
	letter-spacing: .4pt;
	}
nav[role="navigation"] a:hover,
nav[role="navigation"] li.active a {
	background: #5D7FA7;
	color: white;
	transition: all .2s;
	border: none;
	}

/* CONTENT */

main[role="main"] {margin-top: -130px; padding-bottom: 3rem;}
article .item-page {padding: 1em 3em 1em 0em;}
article p {margin: 1em 0;}

/* ASIDE */
aside[role="complementary"] .rsform {
	background: #5D7EA7;
	padding: 1.5em 2em 1.5em 2em;
	}

aside .referencer {margin: 0; padding: 2em 1em 0 1em; }
aside .referencer > p {font-size: 1rem; text-align: right;}

/*rsform (overwrites)*/
aside .rsform {}
.rsform #tak p {display: block; font-size: 2rem; text-align: center; color: white;}
.rsform #tak i {display: block; margin-top: 10%; font-size: 6em; text-align: center; color: white;}
.rsform .formResponsive {margin: 0;}
.rsform .formResponsive .formHorizontal .rsform-block {margin-bottom: 0;}
.rsform .formResponsive .formHorizontal .formControlLabel {display: none;}
.rsform .formResponsive .formHorizontal .formControls {margin: 0;}
.rsform .formResponsive .formHorizontal p.formDescription {display: none;}
.rsform .formResponsive .formBody {position: relative;}
.rsform .formValidation {position: absolute; right: 6px; top: 3px;}
.rsform .formResponsive .formError {
	color: #b94a48;
	padding-left: 0;
	vertical-align: initial;
	font-size: 18px;
	font-weight: normal;
	margin: 0;
	height: auto;
	display: block;
	line-height: 1;
}

.rsform .formResponsive .formHorizontal .rsform-block-intro {font-size: 2rem; text-align: left; color: white; line-height: 1.3; margin-bottom: .5em;}

.rsform .formResponsive select, 
.rsform .formResponsive textarea, 
.rsform .formResponsive input[type="text"], 
.rsform .formResponsive input[type="password"] {
	width: 100%;
	height: auto;
	border-radius: 0;
	border: 0;
	padding: 8px 10px;
	text-transform: none;
	font-size: .9rem;
	line-height: 1;
}
.rsform .formResponsive textarea {min-height: 200px;}
.rsform .formResponsive input[type="submit"] { 
	float: right;
	width: 40%;
	margin-top: .8em;
	padding: 6px 10px 6px;
	border: none;
	border-radius: 0;
	background: white;
	color: black;
	text-shadow: none !important;
	text-transform: none;
	line-height: 1;
	outline: none;
	}
.rsform .formResponsive input[type="submit"]:hover,
.rsform .formResponsive input[type="submit"]:focus,
.rsform .formResponsive input[type="submit"]:active {background: white; color: black;}

/* FOOTER */
footer {
	position: absolute;
    left: 0;
    bottom: 0;
    min-height: 160px; /* = body bottom-margin */
    width: 100%;
    background: #5D7EA7 url(http://www.mvsregnskab.dk/templates/medesign/img/tastetur_footer.png) no-repeat center center;
	background-size: cover;
	padding: 2em;
}

footer .wrapper {position: relative; width: 100%;}

footer p {font-size: .9rem; line-height: 1.4;}

footer #profile,
footer #content {display: inline-block; vertical-align: middle;}

footer #profile img {
	display: block;
	width: 125px;
	border-radius: 50%;
}
footer #profile {padding-right: 2em;}
footer #content {color: white;}

footer #sm {
	position: absolute;
	right: 0; top: 20px;
	color: white;
	font-size: 2rem;
}

footer #sm a {border: none;}

footer #sm .fa {vertical-align: baseline;}

/* STANDARD */
img, video {max-width: 100%; height: auto;}

hr {
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 9px 0;
}

h1 {font-size: 1.9rem; font-weight: 300; margin: .3em 0 0}
article h1:first-of-type {margin: 0 0 .4em 0;}
h2 {
	font-size: 1.5rem;
	font-weight: 300;
	margin: 0.3em 0 0 0;
}
h2+p, h1+p {margin-top: 0;}
h3 {font-size: 1.714rem;}
h4 {font-size: 1.286rem;}
h5 {font-size: 1rem;}
h6 {font-size: 0.8571rem;}
p, ul, li {font-size: 1.2rem; text-align: left; line-height: 1.5;}
b, strong {font-weight: 700;}
a {
	color: inherit;
	font:inherit;
	text-decoration: none;
	border-bottom: 1px solid #9D9C9C;
	transition: .1s border-bottom;
}
a:hover {border-bottom:3px solid #5D7EA7;}
ul {margin: .5em 0 .5em 19px;}
li {}

abbr[title], abbr[data-original-title] {cursor: help; border-bottom: 1px dotted inherit;}

blockquote {margin: 1em 0 0 0;}
blockquote p {
	font-size: 1rem;
	text-align: left;
	line-height: 1.6;
}

blockquote > *::before,
blockquote > *::after {position: relative; font-family: FontAwesome; color: #5D7EA7; font-size: .7em; }

blockquote > *::before {content: "\f10d";  top: -3px; margin-right: 5px;} 
blockquote > *::after {content: "\f10e"; bottom: -3px; margin-left: 5px;}

/* MEDIAQUERIES */

@media (max-width: 1024px){
	.rsform .formResponsive .formHorizontal .rsform-block-intro {font-size: 1.8rem;}
	}

@media (max-width: 960px){
	.wrapper {}
	header #logo, header #content {width: auto;}
	.justify .col-70,
	.justify .col-30 {width:100%;}
	article .item-page {padding-left: 0; padding-right: 0;}
	aside .rsform {
		width: 60%;
		float: left;
		}
	aside .referencer {
		margin: 0;
		width: 37%;
		float: right;
		}
	p {font-size: 1.4rem;}
	}

@media (max-width: 700px){
	.wrapper {width: 100%;}
	header {padding: 1em 0 9.3em 0;}
	header #logo, header #content {display: block; text-align: center !important;}
	header #content p {margin-top: 10px; padding: 5px 0; background: #5D7EA7; color:white; text-align: center;}
	header #logo img {display:block; margin: 0 auto;}
	aside .referencer,
	aside .rsform {float: none; width: 100%;}
	aside .referencer,
	article .item-page {padding: 2em;}
	p {font-size: 1.2rem;}
	nav[role="navigation"] {margin-bottom: 2em;}
	footer {padding: 2em}
}

/* SINGLE COL */

@media (max-width: 450px){
	body {margin: 0 0 380px;}
	
	header {padding: 1em 0 7.9em 0;}
	
	main[role="main"] {margin-top: -110px;}
	
	
	footer {min-height: 380px;}
	
	footer .wrapper {padding: 30px 0 0 0;}

	footer #profile,
	footer #content,
	footer #sm {display: block; width: 100%; padding: 0; margin-bottom: 25px;}

	footer #profile img {margin: 0 auto;}
	
	footer p {text-align: center;}
	
	footer #sm {
	position: static;
	color: white;
	font-size: 2rem;
	text-align: center;
	}
}