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

@font-face {
font-family: "Elephant";
src: url("Elephant.ttf") format("truetype");
}

body {
	margin:0;
	padding:0;
	margin-top:20px;
	color:#1a270c;
	
	
	/* font size rem for global styling 
	User's Font Size:
rem is useful for making your site more accessible because users can change the root font size (e.g., in browser settings) and your page will scale accordingly
	*/
}

#nav {
	width: 100%;
	text-align:center;
	margin:12px 0px;
}

ul {
/*	list-style-type:none;
	text-align:center;
		overflow:hidden;
	background-color:;*/
	
	margin:0;
	padding:0;
}

ul.title-image {	
	background-color: black;
}


li {
	display: inline;
	text-align: center;
}

li a {
	font-family: "Elephant";
	font-size:1.65em;
	display:inline-block;
	color:#82c341;
	color:#202020;
	text-align: center;
	padding: 16px;
	text-decoration: none;	
	transition: 0.5s;	
}

li a:hover {
	text-decoration:underline;	
	color:#1a270c;	
	color:#202020;
color:#82c341;	
}

a.footer-link {
	color:white;	
}

button {
	width:100%;
}

a.button , button { 
/*	font-family: "Elephant";*/
	font-family: 'Montserrat', sans-serif;
	/*font-size:1.35em;*/
	font-size:1.15em;
	font-size:1em;
	font-weight:;
	color:#FFF;
	text-decoration:none;
	display:block;
	border-radius: 4px;
	background-color:#000;
	padding:24px;
	padding:18px;			
	text-align:center;

	/* backup style */
	color:#1a270c;
	background-color:#a1a1a1;
	border: 2px solid #a1a1a1;
	color:white;

	background-color: #2C2C2C;
	border: 2px solid #2C2C2C;
	
	transition: 0.5s;	
	
	/*2025 stijl */
	border:4px solid black;
	background:white;
	color:black;
	font-family: "Elephant";
	font-size:1.4em;
	
	border:2px solid black;
	font-size:1.15em;
	padding:16px;
}

a.button {
	background-color:#77bd32;
	border: 2px solid #77bd32;
	
	/*2025 stijl */
	border:4px solid black;
	background:white;
	color:black;
	
	border:2px solid black;
}

a.button:hover, button:hover {
	cursor:pointer;
	text-decoration:none;
	color:#1a270c;
	color:white;

	background-color:black;
	border: 2px solid black;
	
	/*2025 stijl */
	border:4px solid #77bd32;
	background:white;
	color:#77bd32;
	
	border:2px solid #77bd32;
}

.title-image {
	position: relative;
	text-align: center;
	color: white;
}

.title-image img {
	width:100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px; /* height of container */
    object-fit: cover;
	opacity: 1;
}

.title-image-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project-thumbnail {
	height:280px;
	margin:0px 0px 48px 0px;
	display:inline-block;
	float:left;
	overflow:hidden;
	position:relative;
	
	/* 2025 */
	background-color: black;
}

.project-thumbnail img {
	width:100%;	
	transition: 0.5s all ease-in-out;
	
	/* 2025 */
	opacity:.8;
}

img.project-thumbnail {
	background:gray;
	height:140px;
	min-width:220px;
	margin:0px 12px 12px 0px;
	display:inline-block;
}

.project-thumbnail:hover img {
	transform:scale(1.2);
}

.images-box {
	max-width: 100%;
	padding:0% 3.5%;
    margin: 0 auto;
	font-size:1.4em;	
}

.project-detail {
	float:left;
	width:26%;
	display:inline-block;
	margin:0 auto;
	padding:7% 3.5%;
}

.project-image img{
	width:100%;
}

img.project-image {
	background:gray;
	height:440px;
	min-width:100%;
	max-width:720px;
	margin:0px 12px 12px 0px;
	display:inline-block;
}




/* TEXT */

h1 {
	font-family: "Elephant";
	font-size:5em;
	font-size:4em;
	text-align:center;
}

h2 {
	font-family: "Elephant";	
	color:#1a270c;	
	color:#202020;
	
	/* 2025 */
	color: #2C2C2C;
	font-size:2.1em;
	font-size:1.8em;
	/*opacity:.3;*/
	
/*	text-align:center;*/
	margin:0px 0px 24px 0px;
	padding:0;
	margin-top:24px;
}

.text-box {
	max-width: 750px;
/*    padding: 12px;*/
	padding:48px;
    margin: 0 auto;
	font-size:1.4em;
	font-size:1.5em;
}

p {
	margin:0;
	padding:0;
}

p, p.tagline {
	font-size:1em;
	font-family: 'Neucha', cursive;
	font-family: 'Montserrat', sans-serif;
	color:#1a270c;	
	line-height:1.45;

/* margin fix */
/*	margin:0;*/
	margin:32px 0px;
	padding:0;
}

p.tagline {
	font-size:1.4em;	
	text-align:center;
/*	    padding: 24px;	*/
}

.bold {
	font-weight:900;
	opacity:.66;
}

p.detail {
	margin:32px 0px 0px 0px;	
	margin:12px 0px 0px 0px;	
}

p.contact {
	margin:0;
	margin-top:24px;
}

p.label-categorie{
/*	font-weight:600;*/	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width:100%;
}

p.label-categorie-midden{
/*	font-weight:600;*/	
	font-family: "Elephant";
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width:100%;
	text-align:center;
	padding:8px 16px;
	color:white;
	position: absolute;
	bottom: 64px;
	left: 20%;

	font-size:1.75em;
	width:420px;
	height:60px;
	border:4px solid white;
	font-size:1.6em;
	
	border:2px solid white;
	border-radius:4px;
}

p.label-categorie-project{
	font-family: "Elephant";
	white-space: collapse;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width:100%;
	text-align:center;
	padding:8px 16px;
	color:white;
	position: absolute;
	bottom: 32px;
	left: 20%;

	font-size:1.75em;
	width:420px;
	height:120px;
	border:2px solid white;
	font-size:1.6em;
	border-radius:4px;
}

.achtergrond-categorie{
	bottom: 98px;
	padding:8px 20px;
	left: 20%;
	position: absolute;
	width:420px;
	height:60px;
	background: black;
	opacity:.33;
	opacity:;
	border-radius:4px;
}

.achtergrond-categorie-project{
	bottom: 66px;
	padding:8px 20px;
	left: 20%;
	position: absolute;
	width:420px;
	height:120px;
	background: black;
	opacity:.33;
	opacity:.33;
}

p.label-categorie, p.label-detail {
	padding:4px 12px;
	
	padding:8px 16px;
	color:white;
	position: absolute;
	bottom: -32px;
	left: 0px;
	background:#77bd32;
	background: black;
	font-size:1.1em;
}

p.label-detail {
	background:#202020;
/*	width:14px;
	text-align:center;	*/
	font-size:.9em;
}

.image-number {
	display:inline-block;
	background:#77bd32;
	background:#202020;
	color:white;
	padding:4px 12px;
	margin:0;
	width:14px;
	font-size:1.1em;
	text-align:center;
}



/* FORMS */

form {
	margin:24px 0px 0px 0px;	
}

label {
	font-family: 'Montserrat', sans-serif;		
}

input[type=text], input, textarea {
	width:100%;		
    padding: 16px 20px;
	padding: 8px 12px;
	
    margin: 8px 0px 32px 0px;
    box-sizing: border-box;
	background-color:#F9F9F9;
	border:2px solid #ebebeb;
	font-size:1.1em;
	font-family: 'Montserrat', sans-serif;	
	color:#82c341;
	-webkit-transition: 0.5s;	
	transition: 0.5s;
	outline: none;
	border-radius: 4px;	
	line-height:1.45;
	
	/*2025 */
	color:black;
	border:4px solid #ebebeb;
	
	border:2px solid #e8e8e8;
}

input[type=text]:focus, input:focus, textarea:focus {
	border:2px solid #82c341;
	
	border:4px solid #82c341;
	
	border:2px solid #82c341;
}

input[type=checkbox] {
	margin-left:8px;
}

input[type=checkbox]:hover {
	cursor:pointer;
}

input[type=submit] {
	font-size:1.0em;
	line-height:1em;
    padding: 16px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border:none;
}

.button button-primary {
	font-size:1.em;
	line-height:1.6em;
	}

input[type=submit]:hover {
	text-decoration:none;
	background-color:#82c341;
	cursor:pointer;
}



/* Footer */



footer {
	background-color:#202020;
	margin:0;
	padding:0;
	clear:both;
}

footer p, p.footer {
	color:white;
	font-size:.75em;
	text-align:center;
	margin:0;
}

footer a, a.footer, a.footer:visited {
	color:white;	
}

img {
	max-width:100%;	
}

img.title-image {
	opacity: 0.8;	
}


.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:130px;
}


@media only screen and (max-width: 960px) and (min-width:751px) {

.text-box {
	padding:48px;
}

h1 {
	font-size:3.5em;	
}

h2 {
	 font-size:1.6em;
}	

.title-image img {
	height:400px;
}
}

@media only screen and (max-width: 750px) and (min-width:601px) {

.text-box {
	padding:48px;
}

h1 {
	font-size:2.5em;
}

h2 {
	 font-size:1.3em;
}
	

.title-image img {
	height:300px;
}
	
input[type=text], input, textarea {
	width:100%;		
    padding: 16px 20px;
	

}
}

@media only screen and (max-width: 600px) {

.title-image-text {
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-20%, -50%);
}

h1 {
	font-size:2.4em;
}

h2 {
	font-size:1.5em;
/*	margin:0;*/
}

p.tagline {
	font-size:1.15em;
}

p.footer {font-size:.65em;}

p.line {
	font-size:1.15em;	
}

p.line, p {
	margin:;
	padding:0;
}

p.detail {
	margin:16px 0px;
	margin:16px 0px 8px 0px;
}

.text-box {
	/*2025*/
	padding:36px;
}

.title-image img {
	max-height:300px;
}

.project-thumbnail {
	min-width:100%;
	width:100%;
	height:180px;
}
	
.project-thumbnail img {
	min-width:500px;
	width:500px;
	margin:0;
}

.project-thumbnail:hover img {
	transform:scale(1);
}

.categorie-thumbnail {
	/*min-width:100%;
	width:100%;
	height:180px;*/
	
		float:left;
	width:93%;
	display:inline-block;
	margin:0 auto;
	padding:7% 3.5%;
}
	
.categorie-thumbnail img {
	min-width:500px;
	width:500px;
	margin:0;
}

.categorie-thumbnail:hover img {
	transform:scale(1);
}


p.label-categorie {bottom: 0px;margin:0;}
p.tagline {margin:0;}

.images-box {
	padding:3.5% 3.5%;
	padding:7% 3.5%;
}

.project-detail {
	float:left;
	width:93%;
	display:inline-block;
	margin:0 auto;
	padding:0% 3.5% 7% 3.5%;
	/*padding:3.5%;*/
}

input[type=text], input, textarea {
	width:100%;		
    padding: 16px 20px;
	
}


input[type=text], input, textarea {
	padding: 8px 12px;

}

p.label-categorie-midden{
	padding:8px 16px;
	bottom: 28px;
	left: 9%;
	width:70%;
	height:36px;
	font-size:1em;
	/* niet voor project pagina*/
}

p.label-categorie-project{
	bottom: 12px;
	left: 9%;
	font-size:1em;
	width:70%;
	height:72px;
}

.achtergrond-categorie{
	bottom: 62px;
	padding:8px 20px;
	left: 9%;
	width:70%;
	height:36px;
	/* niet voor project pagina*/
}

.achtergrond-categorie-project{
	bottom: 46px;
	padding:8px 18px;
	left: 9%;
	width:70%;
	height:72px;
}