/*
Theme Name: Get Praut
Theme URI: https://getpraut.nl/
Description: Get Praut - Thema
Author: Get Praut
Author URI: https://getpraut.nl/
Version: 1.0
*/

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption.alignnone{margin:0}
.wp-caption.alignleft{margin:0 15px 15px 0}
.wp-caption.alignright{margin:0 0 15px 15px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:100%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

/* Custom CSS
-------------------------------------------------------------- */



/*HEADER*/

header
{
	position:fixed;
	width:100%;
	z-index:100;
}

/*fillspace to prevent content from getting under the header when on top of page /
  witruimte om te voorkomen dat content onder de header valt*/
.h-whtsp
{
	height:60px;
}

/*NAVBAR*/
nav
{
	position:fixed;
	width:100%;
	background-color:black;
	z-index:1000;
}

nav.navbar
{
	position:relative;
	justify-content:space-between;
}

/*navbar logo*/
nav .navbar-brand img
{
	width:165px;
}

/*mobile menu / responsive menu / tablet menu*/
/*hamburger icon menu toggler / hamburger icoon menu toggler*/
nav .navbar-toggler-icon span
{
	display:grid;
	height:2px;
	margin:5px 2px;
	right:0px;
	border-radius:5px;
	background-color: red;
}

/*inside menu toggler / Binneste menu toggler*/
nav .collapse .toggle-inside .navbar-toggler-icon
{
	position: relative;
	display: flex;
    height: 30px; 
    width: 30px;  
    flex-direction: column;
    justify-content: center;
}


/*inside menu toggler close button objects / binneste menu toggler dichtdoen knop objecten*/
nav .collapse .toggle-inside .navbar-toggler-icon::before,
nav .collapse .toggle-inside .navbar-toggler-icon::after
{
	content: '';
	position: absolute;
	height: 2px;
    width: 100%;
    background-color: red;
}

/*rotate object to get the X shape / roteer object om de X vorm te krijgen*/
nav .collapse .toggle-inside .navbar-toggler-icon::before
{
	transform: rotate(45deg);
}

nav .collapse .toggle-inside .navbar-toggler-icon::after
{
	transform: rotate(-45deg);
}

/*inside toggler placement / binneste toggle plaatsing*/
nav .header-menu .header-collapse .toggle-inside
{
	position:absolute;
	top:20px;
	right:16px;
	z-index:1050;
}

/*the open menu area for mobiel. it's why it fills the whole screen / uitgeklapte menu mobiel. dit is waarom het de gehele scherm vult*/
nav .header-menu .header-collapse 
{
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	right:0;
	left:0;
	bottom:0;
	object-fit: fill;
	flex:1;
	background-color:black;
	z-index:1000;
}

/*turn off cluncky transition / zet onhandige transitie uit */
nav .header-menu .header-collapse.collapsing
{
	transition:none!important;
} 

/*menu items in het midden zetten en scroll mogelijk maken*/
nav .header-menu .collapse-screen
{
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	overflow-y:auto;
}

nav .header-menu .header-collapse .collapsed-nav-wrap
{
	width:100%;
	height:inherit;
}

/*place menu items in a smaller container so accedently pressing the sides won't klik you to a page./
  menu items in een kleiner formaat zodat je er niet random op klikt */
nav .header-menu .header-collapse #menu-hoofdmenu
{
	width:300px;
	padding:80px 0px 80px 0px;
	margin-left:auto;
	margin-right:auto;
}

/*menu items*/
nav .header-menu .header-collapse #menu-hoofdmenu li a
{
	color:red;
	font-family:"Open-Sans";
	text-transform:uppercase;
	text-align:center;
	letter-spacing:1px;
}

/*add effects when active / voeg effecten toe wanneer actief*/
nav .header-menu .header-collapse #menu-hoofdmenu li.active > a
{
	color:yellow;
}

/*add effects when hover / voeg effecten toe wanneer je met je muis over heen gaat*/
nav .header-menu .header-collapse #menu-hoofdmenu li a:hover
{
	color:lime;
}

/*the dropdown menu*/
nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu
{
	padding-top:0px;
	padding-bottom:0px;
	margin-left:13px;
	border:none;
	border-radius:0px;
}

/*dropdowm menu items anchor*/
nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a
{
	color:red;
}

/*add effects to dropdowm menu items when active / voeg effecten toe aan dropdown menu items */
nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active a,
nav .header-menu .header-collapse #menu-hoofdmenu.active a.dropdown-toggle
{
	color:lime;
}

/*add hover effect to dropdown menu item / voeg hover effecten toe aan dropdown menu items*/
nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a:hover
{
	background-color:pink;
}

/*large breakpoint / laptop / lg / min-width: 992px*/
@media only screen and (min-width: 992px)
{
	
	/*NAVBAR*/
	/*menu van mobiel naar desktop modus*/
	nav.navbar
	{
		flex-direction:row;
		padding:0px;
	}
	
	/*brand image wrap */
	nav .navbar-brand
	{
		padding-top:0px;
		padding-bottom:0px;
	}
	
	/*brand image width / logo breedte*/
	nav .navbar-brand img
	{
		width:477px;
	}
	
	/**/
	nav .header-menu .header-collapse 
	{
		background-color:transparent;
		position:relative;
		height:auto;
		width:auto;
		/*overflow:visible;*/
		top:0;
		right:0;
		bottom:0;
		left:0;
		z-index:1000;
	}
	
	/*turns off overflow so dropdowns work correctly / zet overflow uit zodat dropdowns correct werken*/
	nav .header-menu .collapse-screen
	{
		overflow:unset;
	}
	
	/*menu*/
	nav .header-menu .header-collapse #menu-hoofdmenu
	{
		position:relative;
		min-height:auto;
		width:100%;
		padding:0px;
		margin-top:0px;
		margin-right:10px;
		margin-bottom:0px;
		margin-left:auto;
	}
	
	/*menu items*/
	nav .header-menu .header-collapse #menu-hoofdmenu li
	{
	}
	
	/*add hover effects on menu item / voeg hover effecten toe aan menu item*/
	nav .header-menu .header-collapse #menu-hoofdmenu li:hover
	{
		background-color:black;
	}

	/*add effects to menu items anchors when active / voeg effecten toe menu item ankers wanneer actief*/
	nav .header-menu .header-collapse #menu-hoofdmenu li.active > a
	{
		border-bottom:2px solid red;
	}
	
	
	/*menu items anchors / menu item ankers*/
	nav .header-menu .header-collapse #menu-hoofdmenu li a
	{
		padding:12px 18px!important;
		margin-right:0px!important;
		margin-left:0px!important;
		font-size:16px;
	}

	/*add hover effect to menu item anchors / voeg hover effecten toe aan menu item ankers*/
	nav .header-menu .header-collapse #menu-hoofdmenu li a:hover
	{
		
	}

	/*add menu item decoration / voeg menu item decoraties toe*/
	nav .header-menu .header-collapse #menu-hoofdmenu li:before
	{
		content:"";
		position:absolute;
		width:calc(100% - 10px);
		bottom:0; 
		left:5px;
	}
	
	/*add effect on decoration on hover / voeg effecten toe aan menu item decoraties op hover*/
	nav .header-menu .header-collapse #menu-hoofdmenu li:hover:before
	{

	}
	
	/*add menu item decoration to active an element / voeg menu item decoraties toe aan een actieve element*/
	nav .header-menu .header-collapse #menu-hoofdmenu li.active:before
	{
		
	}
	
	/*dropdowns*/
	/*add effect to active menu dropdown toggler / voeg effecten toe aan een actieve menu dropdown toggler*/
	nav .header-menu .header-collapse #menu-hoofdmenu li.active a.dropdown-toggle
	{
		
	}
	
	/*dropdown menu*/
	nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu
	{
		
	}	
	
	/*dropdown menu item*/
	nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li
	{
		background-color:darkgrey;
	}
	
	/*add effects to active dropdown menu item / voeg effecten toe aan actieve dropdown menu items*/
	nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active a
	{
		
	}
	
	/*add hover effects to dropdown items / voegt hover effecten op dropdown items*/
	nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a:hover
	{
	}
	
	/*add decoration to a dropdown menu item / voegt decoraties toe aan dropdown menu item*/
	nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li:before
	{
		content:none;
	}
	
	/*add decoration to a dropdown menu item / voegt decoratie toe aan dropdown menu items*/
	nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active:before
	{
		content:none;
	}

}


/*extra large breakpoint / desktop / xl min-width: 1200px*/
@media only screen and (min-width: 1200px)
{
	
	/*places navbar more to the center*/
	nav.navbar
	{
		justify-content:center;
	}
}