/*
###########################################################
#
# Filename:			body.css
#
# Copyright:		S-Inside
# Project:			schilderhorst.nl
# Platform:			CSS
# Date created: 	02-02-2022 
#
    used colours for this website:
    #ff222a			red
	#333			grey
    #fff			white
#
###########################################################
*/

body {     
    margin: 0px;
    padding: 0px;
    background: #fff;
  	color: #333;
}

body,table,td,th,div,input,select,textarea,a,h1,h2,h3,h4,h5,h6,span {
	font-size: 1rem;
    font-family: "Questrial", sans-serif;
    font-weight: initial;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
}
h1 {
	font-size: 1.4rem;
	font-weight: bold;
	/*text-transform: uppercase;*/
}
h2 {
	font-size: 1.1rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #ff222a;
}
a {
	color: #ff222a;
}
a:visited {
	color: #c22f34;
}
main div.container {
	/* main div that contains all content */
	position: relative;
	width: 98%;
	min-height: 640px;
	margin: auto;
	padding-top: 20px;
}

header {
	position: relative;
	width: 90%;
	min-width: 980px;
	margin: auto;
	height: 240px;
}
header > .container {
	width: 980px;
	margin: auto;
	height: 200px;
	position: relative;
}
div.logo {
	position: relative;
	left: 0px;
	top: 6px;
	width: 500px;
}

div.slogan {
	position: absolute;
	right: 6px;
	top: 160px;
	/*width: 460px;*/
	height: 30px;
	font-weight: 600;
	z-index: 10;
}

div.photodesign {
	position: relative;
	top: 10px;
	margin: auto;
	width: 980px;
	height: 340px;
	background-repeat: no-repeat;
	background-position: center top;
}

div.inhoud, div.inhoud_smal, div.gallery {
	position: relative;
	padding-top: 20px;
	margin: auto;
	width: 980px;
	height: auto;
	overflow: auto;
	z-index: 10;
}

footer {
	position: relative;
	width: 90%;
	min-width: 980px;
	margin: auto;
	margin-top: 10px;
	height: 42px;
	box-shadow: 0px 8px 5px -5px #c6beb4;
	border-radius: 5px;
	background: #ff222a;
}
div.footer {
	position: relative;
	margin: auto;
	width: 980px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	color: #fff;
}
div.footer span {
	display: inline-block;
	margin: 0 20px;
}
div.footer span a {
	color: #fff !important;
}

div.copy {
	text-align: center;
	width: 400px;
	height: 20px;
	line-height: 20px;
	padding-top: 10px;
	margin: auto;
	font-size: 12px !important;
}

/* form items */
#foutmelding {
	display: none;
	font-size: 10pt;
	position: absolute;
	padding: 20px;
	top: 400px;
	left: 30%;
	width: 400px;
	/*height: 300px;*/
	z-index: 200;
	border: 2px solid #b9b1ab;
	background: #f1f1f1;
	color: #6c6c6c;
}

/*
select, textarea, input {
	width: 340px;
    height: 24px;
    border: 1px solid #ff222a;
	color: #ff222a; 
}
.textbox_pc {width: 60px;}
.textbox_klein {width: 270px;}
.textbox_groot {width: 400px;}
textarea.areabox {height: 80px;}
select.dropbox {width: 344px;}*/

.knop, .knop_klein {
	font-size: 14px;
	width: 160px;
	height: 32px;
	cursor: pointer;
  	border-top: 2px solid #ccc;
  	border-left: 2px solid #ccc;
  	border-right: 2px solid #555;
  	border-bottom: 2px solid #555;
  	background-color: #ff222a;
  	color: #ffffff;
}
.knop_klein {width: 80px;}

.kleintekst {
    font-size: 8pt;
    background: transparent;
    color: #000000;
}
/* end form items */

div.cms_form {
	width: 90%;
}

nav {
	position: relative;
	width: 90%;
	min-width: 980px;
	margin: auto;
	height: 42px;
	box-shadow: 0px 8px 5px -5px #c6beb4;
	border-radius: 5px;
	background: #ff222a;
	z-index: 2;
}

@media screen and (max-width: 1023px) {
	header, header > .container{
		height: auto;
		max-width: 100%;
		min-width: 100%;
		width: 100%;
	}
	footer, div.footer {
		max-width: 100%;
		min-width: 100%;
		width: 100%;
		height: 200px;
	}
	div.footer span {
		display: block;
		padding-top: 10px;
	}
	nav{
		left: auto;
		width: 100%;
		min-width: 300px;
		top: 20px;
	}
	div.nav_buttons {
		display: none !important;
	}
	div.slogan {
		display: none;
	}
	#menu1 {
		display: none;
	}
	div.logo {
		max-width: 100%;
		height: auto;
		margin: auto;
	}
	div.mobile_menu_container {
		position: absolute;
		top: -20px;
		left: 10px;
		width: 100%;
		height: 300px;
		z-index: 201;
	}
	div.mobile_menu_container div.mobile_menu_hamburger {
		display: block !important;
		height: 30px;
		line-height: 30px;
		color: #fff;
		position: absolute;
		top: 26px;
		right: 20px;
		width: 30px;
	}
	#menu_title {
		display: none;
	}
	div.mobile_menu_container div.mobile_menu {
		display: none;
		background: #fff;
		position: absolute;
		left: -20px;
		top: 60px;
		width: 100%;
		padding: 20px;
		z-index: 202;
		height: auto;
		overflow-y: scroll;
	}
	div.mobile_menu_container div.mobile_menu div.menuitem {
		padding: 4px;
		margin-top: 20px;
	}
	div.mobile_menu_container div.mobile_menu div.menuitem a {
		font-size: 20px !important;
		font-weight: bold;
		line-height: 24px;
		text-decoration: none;
		color: #000;
	}
	div.mobile_menu_container div.mobile_menu div.menuitem a.current {color: #000;}
	div.mobile_menu_container div.mobile_menu div.menuitem a.vacature {
		font-weight: 700;
		background-color: #000;
		color: #485769;
	}
	div.mobile_menu_container div.mobile_menu div.mobile_submenu div.submenuitem {
		font-size: 20px !important;
		font-weight: normal;
		line-height: 24px;
		width: 100%;
		margin: 0;
		padding: 4px;
	}
	
	main div.container div.content {
		max-width: 100%;
	}
	div.photodesign, div.gallery {
		max-width: 100%;
	}
	div.inhoud, div.inhoud_smal {
		padding: 10px;
		max-width: calc(100% - 20px);
	}
    /*.menubutton{
        cursor: pointer;
        right: 70px;
    } 
    div.headermenu{
        right: 0px;
    }*/
}

@media (max-width: 900px) {
	div.mapouter {
		width: 95%;
	}
	div.gmap_canvas iframe {
		width: 100vw !important;
	}
	p.empty_space_map {
		height: 0px;
	}
}

@media (min-width: 900px) {
	div.mapouter {
		float: right;
	}
	p.empty_space_map {
		height: 180px;
	}
}




.gallery .gallery_loadmore{width:300px;background:#000;color:#fff;border-radius:15px;text-align:center;padding:5px;border:1px solid #000;transition:all 0.2s ease-in-out;cursor:pointer;margin-top:1%;margin-left:auto;margin-right:auto;overflow:hidden}
.gallery .gallery_loadmore:hover{background:transparent;color:#000}
.gallery .gallery_loadmore:hover:before{color:#000 !important}
.gallery .gallery_loadmore.loading span{display:none}
.gallery .gallery_breadcrumbs{display:flex;flex-direction:row-reverse;justify-content:flex-end}
.gallery .gallery_breadcrumbs .gallery_breadcrumb{margin-right:10px;float:right;transition:all 0.2s ease-in-out;color:#333;padding-bottom:3px}
.gallery .gallery_breadcrumbs .gallery_breadcrumb a{border-bottom:1px solid transparent;padding-bottom:3px;transition:all 0.2s ease-in-out;text-decoration: none;}
a.gallery_back {text-decoration: none;}
.gallery .gallery_breadcrumbs .gallery_breadcrumb:hover{color:#000}
.gallery .gallery_breadcrumbs .gallery_breadcrumb:hover a{border-color:#000}
.gallery .gallery_breadcrumbs .gallery_breadcrumb:last-of-type:before{display:none}
.gallery .gallery_breadcrumbs .gallery_breadcrumb:before{content:"\f105";display:inline-block;font:normal normal normal 18px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all 0.2s ease-in-out;position:relative;top:1px;margin-right:5px}
.gallery .gallery_dir_description{width:100%;margin-top:2%;margin-bottom:3%;font-size:14px}
.gallery .gallery_button{position:relative;display:inline-block;transition:all 0.2s ease-in-out;border-bottom:1px solid;padding-bottom:3px;padding-right:5px;padding-left:5px}
.gallery .gallery_button .fa{font-size:19px;position:absolute;top:1px;left:5px;opacity:0;transition:all 0.2s ease-in-out}
.gallery .gallery_button:hover{background:transparent;color:#000;padding-left:20px}
.gallery .gallery_button:hover .fa{color:#000;opacity:1}.gallery .gallery_blocks{display:flex;flex-flow:wrap}
.gallery .gallery_blocks .gallery_dir{position:relative;width:24%;min-width:200px;overflow:hidden;margin-right:1%;margin-bottom:1%;transition:all 0.3s ease-in-out;z-index:10;cursor:pointer}
.gallery .gallery_blocks .gallery_dir:hover{transform:scale(1.1);z-index:15}
.gallery .gallery_blocks .gallery_dir:before{content:'';position:absolute;width:100%;height:100%;top:0px;left:0px;background:#000;opacity:0.5;color:#fff;text-align:center}
.gallery .gallery_blocks .gallery_dir .title_container{top:0px;left:0px;position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.gallery .gallery_blocks .gallery_dir .title_container .gallery_dir__title{color:#fff;font-size:22px;text-align:center}
.gallery .gallery_blocks .gallery_dir .img_container img{max-width:100%;display:block;height:300px;}
.gallery .gallery_images{display:flex;margin-top:1%;flex-flow:wrap}
.gallery .gallery_images .gallery_image{margin:0px;position:relative;max-width:32%;max-height:160px;overflow:hidden;margin-right:1%;margin-bottom:1%;transition:all 0.3s ease-in-out;z-index:10;cursor:pointer}
.gallery .gallery_images .gallery_image figcaption{display:none}
.gallery .gallery_images .gallery_image img{max-width:100%;display:block;max-height:110%;margin:auto;width:auto}
.gallery .gallery_images .gallery_image a{display:block;position:relative}
.gallery .gallery_images .gallery_image a:before{position:absolute;content:'';display:block;width:100%;height:100%;background:#000;opacity:0;z-index:10;transition:all 0.2s ease-in-out}
.gallery .gallery_images .gallery_image a:after{position:absolute;content:"\f065";display:inline-block;font:normal normal normal 20px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;opacity:0;z-index:15;transition:all 0.2s ease-in-out;margin-top:-50%;top:50%;left:0px;text-align:center;width:100%}
.gallery .gallery_images .gallery_image a:hover:before{opacity:0.7}
.gallery .gallery_images .gallery_image a:hover:after{margin-top:-10px;opacity:1}

@media screen and (max-width: 1023px){
	.gallery .gallery_images .gallery_image{min-width:49%;max-height:none}
	.gallery .gallery_blocks{margin-bottom:10%}
	.gallery .gallery_images .gallery_image a{width:100%}
	.gallery .gallery_blocks .gallery_dir{min-width:49%;max-height:none}
	.gallery .gallery_blocks .gallery_dir img{width:100%}
}
@media screen and (max-width: 700px){
	.gallery .gallery_images .gallery_image{min-width:100%}
	.gallery .gallery_blocks .gallery_dir{min-width:100%}
}
}