@font-face	{
	font-family: bebasneue;
    src: url(BebasNeue.otf);
    font-weight: bold;
}

html	{
	width: 100vw;
	height: 100vh;
}

body	{
	background-color: #e3e3e3;
	width: 100vw;
	height: 100vh;
	font-family: bebasneue;
	font-size: 7vh;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#wrapperHome	{
	overflow: hidden;
}

#logo	{
	width: 25vw;
	height: 25vh;
	float: left;
	padding: 0px;
	margin: 0px;
}

.home	{
	width: 25vw;
	height: 20vh;
	max-height: 25vh;
	display: block;
	margin: auto;
	transform: scale(1);
	transition: 0.2s ease;
}

.home:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

.homeButton	{
	width: 25vw;
	height: auto;
	max-height: 25vh;
	float: left;
	padding: 0px;
	margin: auto;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
}

#pageTitle	{
	width: 50vw;
	height: 25vh;
	padding: 0px;
	margin: 0px;
	float: left;
}

#pageTitle p	{
	text-align: center;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#menuButton	{
	height: 25vh;
	width: 25vw;
	padding: 0px;
	margin: 0px;
	float: left;
	position: relative;
  	display: inline-block;
}

.mobileMenuArrow	{
	display: none;
}

.dropbtn	{
	height: 25vh;
	width: 25vw;
	padding: 0px;
	margin: 0px;
	position: relative;
	font-family: bebasneue;
	font-size: 7vh;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	border: none;
	transition: 0.2s ease;
	background-color: transparent;
}

.dropbtn:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(227, 227, 227, .9);
  width: 25vw;
  box-shadow: -8px -5px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {
	display: block;
}

#overMij:hover, #portfolio:hover, #contact:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

#overMij, #portfolio, #contact	{
	transition: 0.2s ease;
}

.menuArrow	{
	float: left;
	height: 20vh;
	width: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#overMij, #portfolio, #contact	{
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
}

#overMij a, #portfolio a, #contact a	{
	margin: 0 auto;
	padding: 0px;
}

.overMij, .portfolio, .contact	{
	float: left;
	position: relative;
	text-align: center;
	height: 25vh;
	width: auto;
	display: none;
	margin: 0px;
	padding: 0px;
}

.overMij p, .portfolio p, .contact p	{
	display: inline;
	padding: 0px;
	margin: 0px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	float: left;
}

#actionBlock	{
	float: left;
	width: 25vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;
}

.actionOverMij	{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	height: 75vh;
	width: 25vw;
	display: block;
	transition: 0.2s ease;
}

.actionOverMij p	{
	text-decoration: none;
	color: black;
	outline: none;
	text-align: center;
	margin: 0px;
	padding-top: 15vh;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

.actionOverMij:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

.actionArrow	{
	width: 15vw;
	height: auto;
	display: block;
	margin-top: 2vh;
	margin-left: auto;
	margin-right: auto;
}

#homePhoto	{
	margin: 0px;
	padding: 0px;
	float: left;
	height: 75vh;
	width: 75vw;
}

.homePhoto	{
	width: 75vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;
	object-fit: cover;
}

#mobilePersonalPhoto	{
	display: none;
}

.photoOverMij	{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	height: 75vh;
	width: 25vw;
	display: block;
	transition: 0.2s ease;
}

#personalPhoto	{
	float: left;
	width: 50vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;

}

.persPhoto	{
	float: left;
	width: 50vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;
	object-fit: cover;
}

#aboutMe	{
	height: 75vh;
	width: 50vw;
	float: left;
	margin: 0px;
	padding: 0px;
	overflow: scroll;
}

#aboutMe p	{
	font-size: 3vh;
	text-align: center;
	letter-spacing: 1px;
	padding-top: 3vh;
	padding-left: 5vw;
	padding-right: 5vw;
}

#categorie	{
	display: none;
}

#photoSlide, #naturePhoto, #buildingPhoto, #portraitPhoto	{
	height: 75vh;
	width: 75vw;
	float: left;
	margin: 0px;
	padding: 0px;
	overflow: scroll;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

#photoNav	{
	height: 75vh;
	width: 25vw;
	float: left;
	margin: 0px;
	padding: 0px;
	z-index: 0;
}

.natuurKnop, .gebouwKnop, .portretKnop	{
	background-color: transparent;
	border: none;
	outline: none;
	height: 25vh;
	width: 25vw;
	margin: 0px;
	padding: 0px;
	font-family: bebasneue;
	font-size: 7vh;
	float: left;
	cursor: pointer;
	transition: 0.2s ease;
}

.natuurKnop:hover, .gebouwKnop:hover, .portretKnop:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

.foto	{
	float: left;
	width: 25%;
	margin: 0px;
	padding: 0px;
	object-fit: contain;
	clip-path: inset(16.666666666666666% 0% 16.666666666666666% 0%);
	display: block;
	transition: 0.5s ease;
}

.foto:hover	{
	clip-path: inset(0% 0% 0% 0%);
	transition: 0.5s ease;
}


.pano2	{
	float: left;
	width: 50%;
	margin: 0px;
	padding: 0px;
	object-fit: scale-down;
	clip-path: inset(16.666666666666666% 0% 16.666666666666666% 0%);
	display: block;
	transition: 0.5s ease;
}

.pano	{
	float: left;
	width: 75%;
	margin: 0px;
	padding: 0px;
	object-fit: scale-down;
	clip-path: inset(16.666666666666666% 0% 16.666666666666666% 0%);
	display: block;
	transition: 0.5s ease;
}

.pano:hover, .pano4:hover, .pano2:hover	{
	clip-path: inset(0% 0% 0% 0%);
	transition: 0.5s ease;
}

.pano4	{
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	object-fit: contain;
	clip-path: inset(16.666666666666666% 0% 16.666666666666666% 0%);
	display: block;
	transition: 0.5s ease;
}

.pano4:hover	{
	clip-path: inset(0% 0% 0% 0%);
	transition: 0.5s ease;
}

#buildingPhoto, #portraitPhoto	{
	display: none;
}

#contactPhoto	{
	margin: 0px;
	padding: 0px;
	float: left;
	height: 75vh;
	width: 75vw;
}

.contactPhoto	{
	width: 75vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;
	object-fit: cover;
}

.igLogo	{
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1vh;
	width: auto;
	height: 20vh;
	display: block;
	transition: 0.2s ease
}

.mailLogo	{
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1vh;
	width: auto;
	height: 20vh;
	display: block;
	transition: 0.2s ease
}

.shopLogo	{
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1vh;
	width: auto;
	height: 20vh;
	display: block;
	transition: 0.2s ease
}

#contactBlock	{
	float: left;
	width: 25vw;
	height: 75vh;
	margin: 0px;
	padding: 0px;
}

#contactBlock p	{
	font-size: 3vh;
	text-decoration: none;
	color: black;
	text-align: center;
	outline: none;
	padding: 0px;
	margin: 0px;
	margin-top: 1vh;
}

.igLogo:hover, .mailLogo:hover, .shopLogo:hover	{
	transform: scale(1.1);
	transition: 0.2s ease;
}

















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

	}
	
	html	{
		width: 100vw;
		height: 100vh;
	}

	body	{
		background-color: #e3e3e3;
		width: 100vw;
		height: 100vh;
		font-family: bebasneue;
		font-size: 4vh;
		margin: 0px;
		padding: 0px;
	}

	#wrapperHome	{
		overflow: hidden;
	}

	#logo	{
		width: 25vw;
		height: 25vh;
		float: left;
		background-color: transparent;
		padding: 0px;
		margin: 0px;
	}

	.homeButton	{
		width: 25vw;
		height: 25vh;
		float: left;
		padding: 0px;
		margin: 0px;
	}

	.homeButton:hover	{
		transform: scale(1);
	}

	#pageTitle	{
		width: 50vw;
		height: 25vh;
		background-color: transparent;
		padding: 0px;
		margin: 0px;
		float: left;
	}

	#pageTitle p	{
		text-align: center;
		margin: 0px;
		padding: 0px 3vw 0px 3vw;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		object-fit: scale-down;
	}

	#menuButton	{
		height: 25vh;
		width: 25vw;
		padding: 0px;
		margin: 0px;
		float: left;
		background-color: transparent;
		position: relative;
	  	display: inline-block;
	}

	.dropbtn	{
		height: 25vh;
		width: 25vw;
		padding: 0px;
		margin: 0px;
		position: relative;
		cursor: pointer;
		background-color: transparent;
		font-size: 4vh;
		outline: none;
		border: none;
		transition: 0.2s ease;
	}

	.dropbtn p	{
		display: none;
	}

	.dropbtn:hover	{
		transform: scale(1);
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  right: 0vw;
	  background-color: rgba(227, 227, 227, .9);
	  width: 100vw;
	  height: 75vh;
	  box-shadow: 0px -5px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	  vertical-align: middle;
	}

	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  vertical-align: middle;
	}

	.show {
		display: block;
	}

	#overMij:hover, #portfolio:hover, #contact:hover	{
		transform: scale(1);
	}

	.menuArrow	{
		display: none;
	}

	#overMij, #portfolio, #contact	{
		float: none;
		display: block;
		margin: 0px;
		padding: 0px;
		width: 30vw;
		height: 5vh;
	}

	#overMij a, #portfolio a, #contact a	{
		margin: 0px;
		padding: 0px;
	}

	.overMij, .portfolio, .contact	{
		display: block;
		text-align: center;
		height: 25vh;
		width: 100vw;
		display: none;
		margin: 0px;
		padding: 0px;
	}

	.overMij p, .portfolio p, .contact p	{
		display: block;
		padding: 0px;
		margin-left: 50%;
		margin-right: 50%;
		font-size: 6vh;
		transform: translateX(-50%);
	}

	#homePage	{
		width: 100vw;
		height: 75vh;
		float: left;
		display: block;
	}

	#actionBlock	{
		width: 100vw;
		height: 75vh;
		margin: 0px;
		padding: 0px;
		background-color: transparent;
		display: block;
		position: absolute;
	}

	.actionOverMij	{
		margin: 0px auto 0px auto;
		padding: 0;
		text-decoration: none;
		height: auto;
		width: 60vw;
		display: block;
		background-color: rgba(227, 227, 227, 0.6)
	}

	.actionOverMij p	{
		font-size: 7vh;
		text-align: center;
		padding: 2vh 0 0 0;
		margin: 15vh 0px 0px 0px;
	}

	.actionOverMij:hover	{
		transform:scale(1);
	}

	.actionArrow	{
		width: 45vw;
		height: auto;
		display: block;
		margin-top: 2vh;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 3vh;
	}

	#homePhoto	{
		margin: 0px;
		padding-top: 0px;
		float: right;
		height: 75vh;
		width: 100vw;
		position: absolute;
		z-index: -1;
	}

	.homePhoto	{
		width: 100vw;
		height: 75vh;
		margin: 0px;
		padding: 0px;
		object-fit: cover;
		opacity: 0.8;
	}

	.photoOverMij	{
		margin: 0px;
		padding: 0px;
		text-decoration: none;
		height: auto;
		width: 25vw;
		display: block;
		transition: 0.2s ease;
	}

	#personalPhoto	{
		float: left;
		width: 50vw;
		height: auto;
		margin: 0px;
		padding: 0px;
		background-color: transparent;
		display: none;
		position: relative;
	}

	.persPhoto	{
		display: inline-block;
		float: left;
		width: 50vw;
		height: auto;
		margin: 0px;
		padding: 0px;
		object-fit: cover;
	}

	.mobilePhotoOverMij	{
		margin: 0px;
		padding: 0px;
		text-decoration: none;
		height: auto;
		width: 25vw;
		display: inline-block;
		transition: 0.2s ease;
	}

	#mobilePersonalPhoto	{
		float: left;
		width: 50vw;
		height: auto;
		margin: 0 1vw 1vh 0;
		padding: 0px;
		background-color: transparent;
		display: block;
		position: relative;
	}

	.mobilePersPhoto	{
		display: inline-block;
		float: left;
		width: 50vw;
		height: auto;
		margin: 0px;
		padding: 0px;
		object-fit: cover;
	}

	#aboutMe	{
		height: 75vh;
		width: 100vw;
		float: left;
		margin: 0px;
		padding: 2vh 0 0 0;
		overflow: scroll;
	}

	#aboutMe p	{
		font-size: 2.5vh;
		text-align: center;
		padding-left: 2vw;
		padding-right: 2vw;
		padding-top: 0;
	}

	.wrapPort	{
		overflow: hidden;
	}

	#categorie	{
		height: 10vh;
		width: 100vw;
		padding: 0px;
		margin: 0px;
		float: left;
		background-color: transparent;
		position: relative;
	  	display: inline-block;
	}

	.catBtn	{
		height: 10vh;
		width: 100vw;
		padding: 0px;
		margin: 0px;
		position: relative;
		cursor: pointer;
		background-color: #d6d6d6;
		font-size: 4vh;
		font-family: bebasneue;
		outline: none;
		border: none;
	}

	.cat-content {
	 	display: none;
	 	position: absolute;
		background-color: rgba(227, 227, 227, .9);
		width: 100vw;
		height: 65vh;
		box-shadow: 0px -5px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		vertical-align: middle;
		overflow: hidden;
	}

	#photoSlide	{
		height: 75vh;
		width: 100vw;
		float: left;
		margin: 0px;
		padding: 0px 0px 10vh 0px;
		background-color: transparent;
		overflow: scroll;
	}

	::-webkit-scrollbar {
	    width: 0px;  /* remove scrollbar space */
	    background: transparent;  /* optional: just make scrollbar invisible */
	}

	#photoNav	{
		display: none;
	}

	.mobileNatuurKnop, .mobileGebouwKnop, .mobilePortretKnop	{
		background-color: transparent;
		border: none;
		outline: none;
		height: 15vh;
		width: 45vw;
		margin: 0px auto 0px auto;
		padding: 0px;
		font-family: bebasneue;
		font-size: 6vh;
		text-align: center;
		cursor: pointer;
		transition: 0.2s ease;
		display: block;
	}

	.catShow	{
		display: block;
		position: relative;
		z-index: 1;
	}

	.foto	{
		float: left;
		width: 50%;
		margin: 0px;
		padding: 0px;
		object-fit: contain;
		display: block;
		clip-path: inset(0% 0% 0% 0%);
	}

	.pano	{
		float: left;
		width: 100%;
		margin: 0px;
		padding: 0px;
		object-fit: contain;
		clip-path: inset(0% 0% 0% 0%);
		display: block;
	}

	.pano4	{
		float: left;
		width: 100%;
		margin: 0px;
		padding: 0px;
		object-fit: contain;
		clip-path: inset(0% 0% 0% 0%);
		display: block;
	}


	#buildingPhoto, #portraitPhoto	{
		display: none;
	}

	#naturePhoto, #buildingPhoto, #portraitPhoto	{
		width: 100vw;
		height: 75vh;
	}

	#contactPage	{
		width: 100vw;
		height: 75vh;
		float: left;
		display: block;
	}

	#contactBlock	{
		float: left;
		width: 100vw;
		height: 75vh;
		margin: 0px;
		padding: 0px;
		background-color: transparent;
		display: block;
		position: absolute;
	}

	#contactBlock p	{
		font-size: 4vh;
		text-decoration: none;
		color: black;
		text-align: center;
		outline: none;
		padding: 0px;
		margin: 0px;
		margin-top: 0;
	}

	#contactPhoto	{
		margin: 0px;
		padding: 0px;
		float: left;
		height: 75vh;
		width: 100vw;
		position: absolute;
		z-index: -1;
	}

	.contactPhoto	{
		width: 100vw;
		height: 75vh;
		margin: 0px;
		padding: 0px;
		object-fit: cover;
		opacity: 0.7;
	}

	.igLogo	{
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1vh;
		width: auto;
		height: 20vh;
		display: block;
		transition: 0.2s ease
	}

	.mailLogo	{
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1vh;
		width: auto;
		height: 20vh;
		display: block;
		transition: 0.2s ease
	}

	.shopLogo	{
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1vh;
		width: auto;
		height: 20vh;
		display: block;
		transition: 0.2s ease
	}

	.igLogo:hover, .mailLogo:hover, .shopLogo:hover	{
		transform: scale(1);
	}

}

@media only screen and (max-width: 1100px) and (min-width: 600px)	{
	.overMij, .portfolio, .contact	{
		width: 25vw;
		display: block;
	}

	.overMij p, .portfolio p, .contact p	{
		margin: 0 auto;
		width: 25vw;
		top: 50%;
		transform: translateY(-50%);
	}

	.overMij img, .portfolio img, .contact img	{
		display: none;
	}
}

@media only screen and (max-width: 400px)	{
	#contactBlock p	{
		font-size: 7vw;
	}
}