@charset "utf-8";
/* CSS Document */

/* FONTS */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic&subset=latin,latin-ext);

/* =reset 
*****************************************************/
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, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0px; padding:0px;}

/***100%height***/
#Form1 { height:100%; }
html,body { margin:0;padding:0;height: 100%;  }
html.overflow  { overflow:hidden; } 
/******/
	/* helpers */	
	.cf:before,.cf:after { content: " "; display: table; }
	.cf:after { clear: both; }
	.cf { *zoom: 1; }		
	.clear { clear:both; }
	.text-center { text-align:center; }
	.text-right { text-align:right; }
	.image { background-repeat:no-repeat; background-size:cover }
	.image.contain { background-size:contain }
	
	* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline:0;  }
	*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

	/*** standaard ***/	
	img, fieldset { border:0px; }
	img { max-width:100% }
	p { margin: 10px 0 10px 0; }
	h1, h2, h3, h4, h5,  .title { font-family: 'Roboto', serif;  color:inherit; margin-bottom:5px; color:#000105; }	
	h1, .title { font-size:63px; line-height:68px; font-weight:300;  }	
	h2 { font-size:23px; line-height:28px; font-weight:400 }
	h3 { font-size:14px; line-height:18px; }
	h4 { font-size:12px; line-height:16px;  }
	h5 { font-size:16px; line-height:20px; font-weight:700;  }
	h6 { font-size:16px; line-height:20px; font-weight:500;  }
	.title { }
	ol, ul  { margin-left:20px; }			
	hr { border:none; background:#ccc; height:1px; }
	q, blockquote  { display:block; margin:20px 0 20px 20px; border-left:solid 1px #26348b; padding:10px 15px; color:#26348b; font-size:20px; line-height:26px; }
	blockquote { color:#000105; }
	
	/* input */
	input[type=text], textarea { width:250px; background:#e4e5e5; font-size:12px; color:#7A7B7E; border:none; font-family: Arial, Helvetica, sans-serif; height:30px; line-height:30px; padding:0 10px; margin-top:10px; display:inline-block; }
	textarea { resize:none; height:140px !important; }		
	
	/* button */
	input[type=submit], input[type=button]  { border:none; text-align:left;  display:inline-block; padding:8px 33px 8px 10px; cursor:pointer; text-decoration:none; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; font-size:14px; background-color:#D90023; color:#fff; background-image:url(images/2015/double_arrow_white.png); background-repeat:no-repeat; background-position:right center; margin-top:10px }	
	input[type=submit]:hover, input[type=button]:hover { background-color:#ba0220; }
		
	/* placeholder */	
	::-webkit-input-placeholder {  color:#7A7B7E;  }
	:-moz-placeholder { color:#7A7B7E; }
	::-moz-placeholder { color:#7A7B7E;  }
	:-ms-input-placeholder { color:#7A7B7E; }
	
	/***site links***/				
	a { text-decoration: underline; color:#26348b;  -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out ; transition:color 0.3s ease-in-out, background 0.3s ease-in-out;  }
	a:hover { text-decoration:none;}
	a:focus {}
			
	/* = grid
	*************************************************/
	.row { margin:0 -20px; }
	.row:before,.row:after {content: " "; display: table; }
	.row:after {clear: both;}
	.row {*zoom: 1;}	
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; padding-right: 20px; padding-left: 20px; }
	.col-12 { width: 100%; }
	.col-11 { width: 91.66666667%; }
	.col-10 { width: 83.33333333%; }
	.col-9 { width: 75%; }
	.col-8 { width: 66.66666667%; }
	.col-7 { width: 58.33333333%; }
	.col-6 { width: 50%; }
	.col-5 { width: 41.66666667%; }
	.col-4 { width: 33.33333333%; }
	.col-3 { width: 25%; }
	.col-2 { width: 16.66666667%; }
	.col-1 { width: 8.33333333%; }
		
/* =body
*****************************************************/
body { font-family: 'Roboto', sans-serif; font-size:14px; line-height:24px; color:#000105; font-weight:400; }

	/* wrapper */
	#wrapper { min-height: 100%; height: auto !important; height: 100%; position:relative }
	#wrapper:after { content:""; height:105px; display:block }
	
	#featured-image { position:fixed; top:0; left:0; width:50%; height:100%; background-size:cover; background-repeat: no-repeat; }
	
	.indentation { border-left:10px solid #26348b; background:#fff; padding:10px 30px; position:relative; z-index:100; margin-left:-130px; }
	
	/* =HEADER
	*****************************************************/	
	#logo { margin-bottom:50px; float:left; }
	#logo a { display: block; width: 150px; height: 115px; background:url(../images/logo.svg) no-repeat; background-size:150px 115px; }
	
	#breadcrumbs { margin-bottom:10px; font-style:italic; }
	#breadcrumbs a { text-decoration:none;  }
	#breadcrumbs a:hover { text-decoration:underline; }
	#breadcrumbs b { color:#26348b }
	#breadcrumbs a:before, #breadcrumbs b:before { content:"\00BB"; display:inline-block; margin:0 5px 0 2px; }
	#breadcrumbs b:first-child:before, #breadcrumbs a:first-child:before { display:none; }
	
	#menu-trigger { background:url(../images/menu.svg) right center no-repeat; display:none; height:54px; line-height:54px; background-size:35px 35px;  cursor:pointer; color:#26348b; font-size:18px; text-transform:uppercase; padding-right:45px; }
	
	#mainmenu { position:fixed; top:20px; left:20px; background:#26348b; background:rgba(38,52,139,0.89); padding: 25px 0; list-style:none; margin:0; width:190px; z-index:500 }
	#mainmenu a { color:#fff; display:block; padding:7px 30px; line-height:22px; text-decoration:none; }
	#mainmenu a:hover, #mainmenu li.active > a { text-decoration:underline; }	
	#mainmenu ul { list-style:none; margin:0 }
	#mainmenu ul a { padding-left:48px; position:relative; }
	#mainmenu ul a:before { content:"\00BB"; position:absolute; top:50%; left:32px; margin-top:-13px }
	
	#cart { float:right; text-transform:uppercase; margin-right:10px; padding-right:60px; background:url(../images/cart.svg) right top no-repeat; background-size:50px 50px; line-height:54px; text-decoration:none; font-size:18px;  z-index:600 }
	
	/* facebook */
	#facebook { float:right; display:inline-block; width:36px; height:36px; margin:10px 0; background:url(../images/facebook.png) no-repeat; background-size:cover }
	
	/* google */
	#google { float:right; display:inline-block; width:36px; height:36px; margin:10px 5px;  background:url(../images/google.png) no-repeat; background-size:cover  }
	
	/* =CONTENT
	*****************************************************/	
	#container { width:50%; float:right; padding:30px; }
	
	#content { padding-right:100px; margin:20px 0 50px 0; }
	
	/* =FOOTER
	*****************************************************/	
	#footer { height:105px; margin-top:-105px; width:50%; float:right; color:#656565; font-size:10px; line-height:15px; }
	#footer .indentation { padding:10px 20px 10px 140px; background:#e8e8e8; border-color:#656565; }
	#footer a { color:#656565; text-decoration:none; }
	#footer a:hover { text-decoration:underline; }
	
	/* ===================== Media Query ====================== */
	/* =TABLET
	*****************************************************/
	
		@media only screen  and (max-width : 970px) { 	
			h1, .title { font-size:43px; line-height:48px; }
			
			#content { padding-right:0; }
			
			#container {  width:60% }
			#featured-image { width:40% }
		}
		
		@media only screen  and (max-width : 768px) { 	
			#wrapper {   }
			#wrapper:after { display:none; }
		
			#featured-image { width:100%; }
			#container { width:100%; background:rgba(255,255,255,0.85);  position:relative; z-index:500; float:none; }
			
			.indentation { background:none; margin:0; }
			
			#mainmenu { display:none; }
			
			#content { margin:20px 0 20px 0 }
			
			#menu-trigger { display:block; }
			
			#menu-nav { margin-right:20px; float:right; position:relative; }
			#mainmenu { position:absolute; top:100%; left:auto; right:0; z-index:1000 }
			
			#footer { margin-top:0; height:auto; background:rgba(255,255,255,0.85);  width:100%; padding:30px; float:none; position:relative; z-index:500 }		
			#footer .indentation { padding:10px 20px 10px 30px }
		}
		
	/* =MOBILE
	*****************************************************/
	@media only screen  and (max-width : 640px) { 	
		h1, .title { font-size:30px; line-height:34px; }
	
		q { font-size:16px; line-height:22px; }
	
		#menu-trigger, #cart { text-indent:-99990px }
		#cart {  padding-right: 0;  }
		#menu-nav { margin-right:5px }
		#mainmenu { left:auto; right:0;  }
	}