@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* Screen reader only */

header {
	position:fixed;
	float:left;
	background-color:rgb(255,255,255);
	width:100%;
	height:120px;
	z-index:6;
}
.header_outer.scroll {
	height:120px;
}

.logo_header {
	float:none;
	width:230px;
	height:230px;
	top:0px;
	margin:0 auto;
	margin-top:-30px;
	background-image:url(../images/logo.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.logo_header.scroll {
	width:150px;
	height:150px;
}

.contact_buttons_outer {
	height:40px;
	float:right;
	margin-right:10px;
	margin-top:-180px;
}

.contact_buttons_outer.scroll {
	margin-top:-110px;
}
.contact_inner_outer {
	margin-left:40px;
	height:35px;
	float:left;
}

.contact_phone {
	float:left;
	width:30px;
	height:30px;
	background-image:url(../images/Phone.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.contact_email {
	float:left;
	width:30px;
	height:30px;
	background-image:url(../images/Email.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.contact_text {
	float:left;
	font-family: "Open+Sans", sans-serif;
	line-height:35px;
	font-size:17px;
	letter-spacing:1px;
	color:#1D3662;
	text-align:left;
	font-weight:700;
	padding-left:10px;
}
.contact_text:hover {
	color:#288EC6;
}



.sr-only {
	position: absolute;
	width: 60px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
	left: 11px;
	top: 4px;
}

/* Button styling */
.menu-toggle {
	position: absolute;
	display: inline-block;
	padding: 30px 40px;
	left: 30px;
	top:30px;
	background-image:url(../images/hamburger_menu.png);
	height: -10px;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background-image:url(../images/hamburger_menu_hover.png);
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
  position: absolute;
  display: none;
  top: 0;
  height: 100%;
  width:100%;
  overflow-y: scroll;
  overflow-x: visible;
  transition: left 0.3s ease,;
  z-index: 999;
  overflow-y: hidden;
}

.main-menu ul {
  float:left;
  list-style: none;
  padding: 2.5em 0 0;
  min-height: 100%;
  width: 100%;
  background: none;
  overflow-y: hidden;
  text-align:left;
  margin-left:50px;
  margin-top:50px;
  margin-right:50px;
}

.main-menu a {
  display: block;
  padding: .75em 15px;
  line-height: 30px;
  font-size: 20px;
  color:rgb(29,54,98);
  text-decoration: none;
}

.main-menu li:first-child a {
  margin-top: 50px;
}

.main-menu a:hover,
.main-menu a:focus {
  color:#288EC6;;
  text-decoration: none;
}

.main-menu .menu-close {
  position: absolute;
  display: inline-block;
  padding: 30px 40px;
  left: 30px;
  top: 30px;
  background-image:url(../images/kruis_menu.png);
}
.menu-close:hover {
  background-image:url(../images/kruis_menu_hover.png);
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 [aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  display: block;
  left: 0;
  outline: none;
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
  z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/* 
 We could us `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
  float:left;
  display: block;  
  left: 0;
  top: 0;
  width: 500px;
  height: 100%;
  z-index: 998;
  background-color:rgb(255,255,255);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: default;
  -webkit-box-shadow: 0px 0px 16px -5px #000000; 
  box-shadow: 0px 0px 16px -5px #000000;
}

@supports (position: fixed) {
  .main-menu,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop{
    position: fixed;
  }

/*
 Larger screen styling
 Horizontal menu
*/
@media (min-width: 4000px) {
  .menu-toggle,
  .main-menu .menu-close {
    display: none;
  }
  
  /* Undo positioning of off-canvas menu */
  .main-menu {
    position: relative;
		left: auto;
		top: auto;
		height: auto;
    display: block;
  }
  
  .main-menu ul {
    display: flex;
    
    /* Undo off-canvas styling */
    padding: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    height: auto;
    width: auto;
    background: none;
  }
  
  .main-menu a {
    color: #06c;
    border: 0 !important; /* Remove borders from off-canvas styling */
  }
  
  .main-menu a:hover,
  .main-menu a:focus {
    background: none; /* Remove background from off-canvas styling */
    color: #c00;
  }
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

header {
  padding: 20px;
  display: flex;
  align-items: baseline;
}

article {
  padding: 30px;
  max-width: 55em;
  font-size: 16px;
  line-height: 1.5em;
}

article h2 {
  font-weight: 500;
  font-size: 28px;
}

.logo {
  margin: 0 30px 0 10px;
  font-size: 1.5em;
}
@media screen and (max-width: 1100px) {
.contact_buttons_outer {
	height:100px;
	width:240px;
	float:right;
	margin-right:-20px;
	margin-top:-200px;
}
.contact_buttons_outer.scroll {
	margin-top:-120px;
}
.contact_inner_outer {
	margin-left:0px;
	height:50px;
	width:220px;
	float:left;
}
	
}