/*
Theme Name: Doepar 
Text Domain: doepar
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries
	
	logoblauw oud: #3abad9
	ag blauw: #003f95
	geel: #fd0
	logowebblauw: #51c3f1

----------------------------------------------------------------------------- */

@font-face {font-family: 'CallunaSans-BoldItalic';src: url('webfonts/1FA741_0_0.eot');src: url('webfonts/1FA741_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_0_0.woff') format('woff'),url('webfonts/1FA741_0_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-BlackItalic';src: url('webfonts/1FA741_1_0.eot');src: url('webfonts/1FA741_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_1_0.woff') format('woff'),url('webfonts/1FA741_1_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Italic';src: url('webfonts/1FA741_2_0.eot');src: url('webfonts/1FA741_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_2_0.woff') format('woff'),url('webfonts/1FA741_2_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Bold';src: url('webfonts/1FA741_3_0.eot');src: url('webfonts/1FA741_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_3_0.woff') format('woff'),url('webfonts/1FA741_3_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Black';src: url('webfonts/1FA741_4_0.eot');src: url('webfonts/1FA741_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_4_0.woff') format('woff'),url('webfonts/1FA741_4_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Semibold';src: url('webfonts/1FA741_5_0.eot');src: url('webfonts/1FA741_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_5_0.woff') format('woff'),url('webfonts/1FA741_5_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Regular';src:	url('webfonts/1FA741_6_0.eot');src: url('webfonts/1FA741_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_6_0.woff') format('woff'),url('webfonts/1FA741_6_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-SemiboldItalic';src: url('webfonts/1FA741_7_0.eot');src: url('webfonts/1FA741_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_7_0.woff') format('woff'),url('webfonts/1FA741_7_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-LightItalic';src: url('webfonts/1FA741_8_0.eot');src: url('webfonts/1FA741_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_8_0.woff') format('woff'),url('webfonts/1FA741_8_0.ttf') format('truetype');}
@font-face {font-family: 'CallunaSans-Light';src: url('webfonts/1FA741_9_0.eot');src: url('webfonts/1FA741_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1FA741_9_0.woff') format('woff'),url('webfonts/1FA741_9_0.ttf') format('truetype');}


/* -------------------------------------------------------------------------- */

/*	1. Document Setup
/* -------------------------------------------------------------------------- */



html { margin-left: calc(100vw - 100%); }

body {
	background-color: #003f95;
	padding: 0;
	}
#header {
	padding: 20px 0 0;
	}
#logo-mobiel {
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	}
#logo-desktop {
	display: none;
	}
#main {
	background-color: #fff;
	padding: 20px;
	}
#footer {
	padding-right: 20px;
	padding-bottom: 20px;
	}

@media ( min-width: 550px ) {
	body {
		padding-left: 20px;
		padding-right: 40px;
		}
	#page {
		margin: 0 auto;
		max-width:800px;
		min-height: 100vh;
		display: grid;
		grid-template-columns: 183px calc(100% - 183px);
		grid-template-rows: calc(100% - 17rem) 17rem;
		grid-column-gap: 20px;
		}
	#header {
		grid-row: 1 / span 1;
		grid-column: 1 / span 1;
		padding: 20px 1px 0;
		}
	#logo-mobiel {
		display: none;
		}
	#logo-desktop {
		display: inherit;
		margin-bottom: 30px;
		}
	#main {
		grid-row: 1 / span 2;
		grid-column: 2 / span 1;
		background-image: url('img/zonnepaneel_630x180.jpg');
		background-position: 0 20px;
		background-repeat: no-repeat;
		padding: 283px 40px 0;
		box-shadow: 7px 0 7px rgba(0, 0, 0, 0.3);
		}
	#footer {
		grid-row: 2 / span 1;
		grid-column: 1 / span 1;
		padding: 20px 0 40px;
		}
	}



*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
	word-wrap: break-word;
}


/* Base Transitions -------------------------- */

html {
	scroll-behavior: smooth;
}
a {
	transition: all 0.15s linear;
}


/* Accessibility Settings -------------------- */

@media ( prefers-reduced-motion: reduce ) {

	* {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------- */

/*	2. Element Base
/* ---------------------------------------------*---------------------------- */


body {
	font-family: 'CallunaSans-Light';
	font-weight: normal; 
	font-style: normal; 
	text-align: left;
	font-size: 18px;
	line-height: 1.4em;
	}
p {
	margin-top: 2em;
	}

a {
	color: #003f95;
	}

#main a:hover,
#main a:focus {
	font-family: 'CallunaSans-Bold';
	}

/* Media ------------------------------------- */

figure {
	display: block;
	margin: 0;
}

iframe {
	display: block;
	max-width: 100%;
}

video {
	display: block;
}

svg,
img,
embed,
object {
	display: block;
	height: auto;
	max-width: 100%;
}


/* -------------------------------------------------------------------------- */

/*	3. Helper Classes
/* -------------------------------------------------------------------------- */


/*	4.	Site Header
/* -------------------------------------------------------------------------- */

/* Header Navigation ------------------------- */


#nav-1 {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	}
#nav-1 .sub-menu {
    display: none;
	}
.menu > li > a {
	font-size: 20px;
	padding: 2px 7px;
	color: #003f95;
	background-color: #51c3f1;
	line-height: 1.8em;
	letter-spacing:0.5px;
	}
li.current-menu-parent > a {
	background-color: #FFDD00;
	}
#nav-2 {
	background-color: #fff;
	padding: 10px;
	}
#nav-2 ul.menu > li > a {
	display: none;
	}
ul.sub-menu {
	padding: 10px 20px 10px 10px;
	background-color: #51c3f1;
	display: none;
	}
li.current-menu-parent ul.sub-menu {
	display: block;
	}
#nav-2 li.current-menu-parent ul.sub-menu > li > a {
	display: block;
	}

#nav-2 .sub-menu > li > a {
	font-size: 20px;
	line-height: 1.4em;
	}

.sub-menu a:hover,
.sub-menu .current-menu-item a  {
	font-family: 'CallunaSans-Bold';
	}

@media ( min-width: 550px ) {
	#nav-2 {
		display: none;
		}
	#nav-1 {
		position: relative;
		}
	.menu {
		position: absolute;
		right: -20px;
		}
	.menu > li{
		text-align: right;
		padding-right: 20px;
		}
	.menu li:hover {
		position: relative;    
		}
	#nav-1 li:hover ul.sub-menu {
		display: block;
		box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.2);
		position: absolute;
		left: 190px;
		top: 4px;
		white-space: nowrap;
		}
	.sub-menu li  {
		text-align: left;
		}
	.sub-menu a  {
		display: block;
		}
	p,
	.menu li a {
		font-size: 17px;
		}

	.sub-menu a:hover,
	.sub-menu .current-menu-item a  {
		font-family: 'CallunaSans-Bold';
		}

}


/*	5. Menu Modal
/*	6. Search Modal
/*	7. Templates
/*	8. Post: Archive
/*	9. Post: Single
/*	10. Blocks
/*	11. Entry Content
/*	12. Comments
/*	13. Site Pagination
/*	14. Error 404
/*	15.	Widgets

/* -------------------------------------------------------------------------- */
/*	16. Site Footer
/* -------------------------------------------------------------------------- */

#footer p {
	color: #51c3f1;
	text-align: right;
	margin-top: 1rem;
	line-height: 1.4rem;
	font-family: 'CallunaSans-Regular';
	}
#footer a {
	color: inherit;
	}
#footer a:hover{
	color: #fd0;
	}

/*	17. Media Queries
/* -------------------------------------------------------------------------- */