/*   
Theme Name: XtraSoon
Theme URI: 
Description: This theme is for XtraSoon
Author: Maaike IJpenberg van ontwerp-mij.nu
Author URI: http://www.ontwerp-mij.nu
Version: 1.0

License: Maaike IJpenberg
License URI: http://www.ontwerp-mij.nu
Tags: ...
Text Domain: ...

*/




/* secure html5 elements in unsupported browsers */
header, section, footer, aside, nav, main, article, figure {
    display: block;
} 




* { margin: 0; padding: 0; }
.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none
}

/* =Reset default browser CSS.
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	padding: 0;
}
body{
	background-color: #EDEDED;
}
html, body, div{
	-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6, p, body{
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	 font-family: "Poppins", sans-serif;
}
p, body{
	font-weight: 200;
	font-style: normal;
	color: #00527D;
}
h1, h2, h3, h4, h5, h6, .title{
	color: #0F90C0;
	font-weight: 400;
	margin-bottom: 35px;
}
p{
	margin-bottom: 15px;
}
.red{
	color: #E53052;
}
p em{
}
strong{
	font-weight: 300;
}
ol, ul, li {
	list-style: none;
}
a img {
	border: none;
}
a, a:link, a:visited{
	text-decoration: none;
	color: #00527D;
}
a:hover, a:active{
	text-decoration: none;
}


/* apply a natural box layout model to all elements, but allowing components to change */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}


/* =Reset default browser CSS.
-------------------------------------------------------------- */

/* all display sizes*/
html,body, #wrapper{
}
html, body{
	height: 100%;
}

#wrapper{
	background-color: #FFF;
	margin: 0 auto;
	min-height: 100%;
	padding-bottom: 20px;
}
header{
	position: fixed;
	top:0;
 	z-index: 10;
	background-color: #fff;
}

.title, #textholder{
}

.links img{
	width: 100%;
	height: auto;
}

/* nav */

#nav > a{
	display: none ;
}
#nav{
}
#nav > a
{
	position: absolute;
	top:0;
	right: 0;
	width: auto;
	z-index: 9999;
}
#nav .showmenu, #nav .hidemenu{

}
#nav .showmenu > img, #nav .hidemenu > img{
	width: auto;
}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type{
	display: block;
	
}
 /* first level */
#nav {
	
}
#nav > ul{
	display: none;
	height: 100vh;
	
}
#nav > #contact{
	display: none;
}

#nav:target > ul{
	display: block;
	padding-top: 150px;
	position: absolute;
	right: 0;
	top: 0;
	background-color: #00527D;
	text-align: right;
}
#nav:target > #contact{
	display: block;
	position: absolute;
	right: 0;
	top: 350px;
	text-align: right;
}
#nav > ul > li, #contact p{
	width: 100%;
	float: none;
	padding: 4px 30px;
	list-style: none;
	margin: 0;
}
#nav > ul > li a, #contact p, #contact p a{ 
	color: #0F90C0;
	font-weight: 300;
}
#nav > ul > li.current-menu-item a{ 
	color: #E53052;
	font-weight: 400;
}
#nav > ul > li:last-of-type{
	border-bottom: none;
}


/* einde nav */		


/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}




/* END all display sizes*/

/* mobile */
@media screen and (max-width: 900px){
#wrapper{
	padding: px;
}

header{
	margin: 0 auto;
	width: 100%;
}	
main{
	padding-top: 100px;
}
#site-logo img{
}

h1{
	font-size: 16px;
	margin-bottom: 10px;
}
h2{
	font-size: 14px;
	margin-bottom: 10px;
	color: #00527D;
}
p{
	font-size: 14px;
	line-height: 1.3em;
}
#textholder{
	padding: 0 20px;
}
#logo{
	width: 82px;
	margin: 0 20px;
}
	#logo img{
	height: 64px;
}
#nav img{
	height: 64px;
	padding-right: 20px;
}
header img{
	padding-top: 10px;
}	
.werkervaring{
	display: block;
		clear: right;
	}
	
}

/* desktop */
@media screen and (min-width: 901px){
#wrapper{
	width: 80%;
	max-width: 1100px;
}
	header{
	margin: 0 auto;
	width: 80%;
	max-width: 1100px;
}

main{
	padding-top: 130px;
}
#logo{
	width: 82px;
	margin: 0 auto;
}
	#logo img{
	height: 84px;
}
#nav img{
	height: 84px;
	padding-right: 30px;
}
header img{
	padding-top: 20px;
}

h1{
	font-size: 17px;
	margin-bottom: 20px;
}
h2{
	font-size: 15px;
	margin-bottom: 10px;
	color: #00527D;
}
p{
	font-size: 15px;
	line-height: 1.4em;
}
#textholder{
	padding: 0 30px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
		
.links{
	float: left;
	width: calc(50% + 10px);
	overflow: auto;
	padding-right: 20px;
}
#rechts{
	float: right;
	width: calc(50% - 30px);
}
	.werkervaring{
		display: inline-block; 
		width: 115px;
	}	
/*	.inspring{
		padding-left: 115px;
	}*/

}