/*
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
-------------------------------------------------------------- */
/*extra small*/
/*background-colors*/
/*witte achtegrond*/
.bg-color-wh
{
	background-color:#FFF;
}

/*water blauwe kleur*/
.bg-color-one
{
	background-color:#0f70b7;
}

.bg-color-two
{
	background-color:#dff4f2;
}

.bg-color-three
{
	background-color:#0f70b7;
}


/*tekst*/
footer a,
p
{
	font-size:19px;
}

/*links*/
a{text-decoration:none;}

a:hover{text-decoration:underline;}

/*custom font*/
@font-face {
  font-family: Bernado;
  src: url(fonts/BernardoModacontrast.ttf);
}

/*heading font*/
h1,
h2
{
	font-family: Bernado, sans-serif;
	font-weight:400;
	font-size:45px;
}



/*witte tekst voor blauwe achtergrond*/
.bg-color-one p,
.bg-color-one h1,
.bg-color-one h2,
.bg-color-one h3,
.bg-color-one h4,
.bg-color-one h5
{
	color:#545454;
}


/*h2 specifieke blokken aanpassingen*/
.con-double-tekst h2,
.con-fifty-right h2,
.con-mid-tekst h2,
.con-fifty-left h2
{
	display:inline-block;

}

/*h2 decoratie lijn*/
.con-double-tekst h2::after,
.con-fifty-right h2::after,
.con-mid-tekst h2::after,
.con-fifty-left h2::after
{
	content:"";
	/*border-bottom:2px solid #b2b2b2;*/
	border-bottom:2px solid #0f70b7;
	height:10px;
	width:100%;
	display:block;
}

/*bootstrap alt*/
.row
{
	width:100%;
	margin-left:0px;
	margin-right:0px;
}
	
.container-fluid
{
	padding:0px;
}
/*HEADER*/
/**/
header
{
	display:flex;
	position:fixed;
	z-index:1000;
}


/*header main menu*/
header #menu
{
	height:100vh;
	width:80vw;
	overflow-x:hidden;
	overflow-y:scroll;
	padding-bottom:80px;
	align-items: center;
    justify-content: center;
	border-right:solid #0f70b7 2px;
	transition:none!important;
}

/*menu links*/
#menu a{
	max-width:100%;
	height:auto;
	margin:2px auto 0px auto;
	color:#545454;
	text-transform:uppercase;
	text-decoration:none;
	font-size:18px;
	display:flex;
	align-items: center;
}

/*midden zetten menu items*/
#menu-hoofd-menu
{
	padding-left:10%;
	padding-right:10%;
}

/*veranderingen hoofdmenu onderdelen*/
#menu-hoofd-menu li
{
	position:relative;
}

/*hover effect*/
#menu-hoofd-menu li a::after
{
	content:"";
	position:absolute;
	width:1px;
	height:2px;
	opacity:0;
	bottom:3px;
	background-color:#0f70b7;
}

@keyframes underline 
{
	0%{width:0%;}
	100%{width:90%;}
}

#menu-hoofd-menu li:hover a::after
{
	animation:underline;
	animation-duration:0.5s;
	animation-fill-mode:both;
	opacity:1;
	animation-delay:0.2s;
}

/*logo in de header*/
#menu a img
{
	max-width:120px;
	height:auto;
	margin:0px auto 0px auto;

}

/*Toggle knop voor de header*/
#menu-toggle
{
	height:50px!important;
	width:50px!important;
	z-index:1100;
	/*background-image:url("https://www.surprisingglass.nl/wp-content/uploads/2021/09/burger-icon-blauw.jpg");*/
	background-size:cover;
	border-right:1px solid #0f70b7;
	border-bottom:1px solid #0f70b7;
}

.toggle-line
{
	display:inline-block;
	height:2.5em;
	width:2.5em;
	vertical-align:middle;
}

.toggle-line span
{
	display:grid;
	margin:11px 4px;
	width:100%;
	border-bottom:2px solid #0f70b7;
}

header #menu::-webkit-scrollbar
{
	width:5px;
	padding-right:7px;
}

header #menu::-webkit-scrollbar-track
{
	width:5px;
	background-color:#0f70b7;
}

header #menu::-webkit-scrollbar-thumb
{
	width:5px;
	background-color:#0f70b7;
}


/*FOOTER*/
footer
{
	min-height:100px;
	margin-top:75px;
}

/*footer div met border aan de zijkant*/
footer .row > div
{
	border-left:3px solid #FFF;
	margin-top:35px;
	margin-bottom:20px;
}

/*footer tekst*/
footer .row > div p,
footer .row > div a
{
	margin-bottom:4px;
	color:#FFF;
	word-break:break-word;
}

footer .row > div a
{
	color:#FFF;
	margin-bottom:4px;
	text-decoration:underline;
}

/*footer heading*/
footer .row > div h3
{
	font-size:25px;
	margin-bottom:20px;
	word-break:break-word;
	color:#FFF;
}

/*footer copyright onderaan*/
footer #copyright
{
	padding-bottom:1rem;
}


/*copyright aanpassingen div*/
footer #copyright > div
{
	width:100%;
	border:none;
	margin-top:0px;
	margin-bottom:0px;
	display:flex;
	justify-content:center;
}

/*copyright tekst aanpassingen*/
footer #copyright > div p
{
	font-size:19px;
	align-self:center;
	color:#FFF;
}

/*copyright get praut promotie logo*/
footer #copyright img
{
	height:auto;
	width:180px;
}

/*Google Maps voor footer aanpassingen*/
#footer-maps
{
	margin:0px 0px 5px 0px;
	padding:0px;
	width:100%;
	border-left:none;
}

#footer-maps iframe
{
	height:100%;
	width:100%;
}

/*BODY*/
	
/*header placement*/
#header-fill
{
	display:none;
}
	
/*content placement*/
#content-plm
{
	padding:0px;
}

/*HOME*/
/*home banner*/
#banner-home img
{
	height:auto;
	width:100%;
	object-fit:cover;
}


/*PAGINA's*/
/*witruimte boven titel*/
.page-template-default #content-plm{
	margin-top:125px;
}



/*ALGEMEENE ONDERDELEN*/

.afb-txt {
   width: 100%;
   text-align: center;
   font-size: 16px;
   color: #888;
}
	
/*button*/
/*veranderingen hoofdmenu onderdelen*/
.button-wrap
{
	position:relative;
}

/*hover effect*/
.button::after
{
	content:"";
	position:absolute;
	width:1px;
	height:2px;
	opacity:0;
	left:10px;
	bottom:13px;
	background-color:#FFF;
}

@keyframes button-underline 
{
	0%{width:0%;}
	100%{width:calc(100% - 20px);}
}

.button:hover::after
{
	animation:button-underline;
	animation-duration:0.5s;
	animation-fill-mode:both;
	opacity:1;
	animation-delay:0.1s;
	
}`

.button-wrap
{	
	position:relative;
}

.button
{
	color:#FFF;
	font-size:22px;
	text-decoration:none;
	padding:15px 20px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	
	display:flex;
	align-items: center;
    justify-content: center;
}

.button:link
{

}

.button:active
{

}

.button:hover{
	text-decoration:none;
	color:#FFF;
}

.button:visited
{

}


/*formulieren*/
/*input*/
input[type=text],
input[type=email],
textarea
{
	width:320px;
	border:2px solid #0f70b7;
	border-radius:0px;
}

input[type="submit"]
{
	color:#FFF;
	background-color:#0f70b7;
	padding:15px 20px;
	border:none;
	border-radius:0px;
}


/*search form button*/
#searchsubmit{
	padding:1px 7px;
}

/**/
/*algemeene padding*/
.gen-pad
{
	padding:50px 0px 50px 0px;
}
	
/*center tekst*/
.con-center-tekst
{
	text-align:center;
}
	
/*tekst links afbeelding rechts*/
.con-fifty-left
{

}
	
.con-fifty-left .left
{
	padding-top:30px;
	padding-bottom:30px;
}
	
.con-fifty-left .left h2
{
	text-align:center;
}

/*image aanpassingen content*/	
.con-fifty-left .right img,
.con-fotos div img
{
	width:100%;
	height:auto;
	object-fit:contain;
}
	
/*afbeelding links tekst rechts*/
.con-fifty-right
{
}
	
.con-fifty-right .right
{
	padding-top:30px;
	padding-bottom:30px;
}
	
.con-fifty-right .right h2
{
	text-align:center;
}
	
.con-fifty-right .left img
{
	width:100%;
	height:auto;
	object-fit:contain;
}



/*tekst inhoud midden */
.con-mid
{
	text-align:center;
}
	
/*dubble tekst*/
.con-double-tekst div h2
{
	padding-left:15px;
}

/*recaptcha badge verwijderen*/
.grecaptcha-badge{visibility: hidden;}

/*small vanaf 576px */
@media only screen and (min-width: 576px)
{
	/*ALGEMEEN*/
	footer a,
	p
	{
		font-size:21px;
	}

	/*HEADER*/
	/*header main menu*/
	header #menu
	{
		width:340px;
	}
	
	/*FOOTER*/
	/*footer div met border aan de zijkant*/
	footer .row > div
	{
		border-left:3px solid #FFF;
		margin-top:75px;
		margin-bottom:55px;
	}
	/*FORMUIIEREN*/
	/*vorm input*/
	input[type=text],
	input[type=email],
	textarea
	{
		width:500px;
		border:2px solid #0f70b7;
	}
}

/*medium vanaf 768px tablets*/
@media only screen and (min-width: 768px)
{
	/*ALGEMEENE ONDERDELEN*/
	
	/*algemeene padding*/
	.gen-pad
	{
		padding:75px 0px 75px 0px;
	}
	
	
	/*tekst links afbeelding rechts*/
	.con-fifty-left .left
	{
		
	}
	

	/*afbeelding links tekst rechts*/
	.con-fifty-right .right
	{
		padding-left:40px;
	}
	

	/*HEADER*/
	/*menu*/
	#menu a
	{
		font-size:21px;
		
	}
	
	/*FOOTER*/
	footer #copyright > div
	{
		width:auto;
		display:flex;
		justify-content:center;
	}
	
	footer #copyright img
	{
		width:200px;
	}
	
}

/*large vanaf 992px desktops*/
@media only screen and (min-width: 992px)
{
	/*HEADER*/
	header
	{
		width:25%;
		display:flex;
		position:fixed;
		z-index:1000;
	}
	
	/*header main menu*/
	header #menu
	{
		display:block!important;
		width:100%;
		padding-bottom:0px;
		margin-bottom:40px;
	}
	
	/*menu links*/
	#menu a
	{
	margin:10px auto 0px auto;
	}
	
	/*logo in de header*/
	#menu a img
	{
		max-width:160px;
		height:auto;
		margin:10px auto 25px auto;

	}
	
	/*Toggle knop voor de header*/
	#menu-toggle
	{
		display:none;
	}
	
	/*FOOTER*/
	/*aanpassingen eerste div met inhoud footer*/
	footer .row > div:nth-child(1)
	{
		margin-left:5px;
		margin-right:-5px;
	}
	
	/*footer copyright's divs het inhoud in het midden zetten*/
	footer #copyright > div
	{
		justify-content:center;
	}
	
	
	/*BODY*/
	
	/*header placement voor desktop*/
	#header-fill
	{
		/*max-width:25%;*/
		display:block;
	}
	
	/*content placement (body en footer) voor desktop*/
	#content-plm
	{
		
	}
	/*HOME*/
	/*home banner*/
	#banner-home img
	{
		height:100vh;
		width:100%;
		object-fit:cover;
	}
	
}

/*extra large vanaf 1200px*/
@media only screen and (min-width: 1200px)
{
	/*tekst in het midden onderdeel*/	
	.con-mid-tekst .row div{
		max-width:1140px;
	}
	
	#footer-maps{
		width:25%;
	}
}

/* Extra large devices (extra large desktops, 1400px and up)*/
@media (min-width: 1400px) 
{
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		max-width:1140px;
	}
}