@media (max-width: 980px){

	/* header  */

	.top-border {
		top: 0;
		left: 0;
		height: 150px;
		width: 100vw;	
		z-index: 1;
		background-color: #FAF5F0;
	}
	.logo{
		background-color: #3B2F2F;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 250px;
		height: 140px;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: -150px;
	}
	.logo-text{
		color: #FAF5F0;
	}
	.logo-text:nth-child(1){
		transform: scaleX(1.27);
		font-size: 1.50em;
		z-index: 1001;
	}
	.logo-text:nth-child(2){
		transform: translateY(-35px);
		font-family: "Playfair Display", serif;
		font-style: italic;
		z-index: 1001;
	}
	
	.topnav {
		background-color: #3B2F2F;
		color: white;
		position: fixed;
		width: 40%;
		max-width: 250px;
		top: 0px;
		left: 0;
		z-index: 1000;
	}
	
	.topnav #myLinks {
	  display: none;
	}
	
	.topnav a {
	  color: white;
	  padding: 30px 30px;
	  text-decoration: none;
	  font-size: 40px;
	  display: block;
	}
	
	.topnav a.icon {
	  background: #3B2F2F;
	  color : #FAF5F0;
	  display: block;
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	
	.topnav a:hover {
	  background-color: #ddd;
	  color: black;
	}
	
	.topnav span.geenoptie{
		background-color: #3B2F2F;
		color: #3B2F2F;
	}
	.topnav span.geenoptie p{
		font-size: 1.25em;
		transform: scaleX(0.001);
	}
	
	.downloads{
		padding-top: 40px;
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 25%;
		margin-top: -170px;
		margin-left: 72.5vw;
		font-size: 50%;
	}
	
	
	.downloads a{
		border: 1px solid #FAF5F0;
		display: block;
		background-color: #3B2F2F;
		color: white;
		text-decoration: none;
		padding: 10px 8px;
		text-align: center;
		font-size: 1.2em;
	}
	
	.downloads a:hover{
		background: lightgray;
		color: #3B2F2F;
		border: 1px solid #3B2F2F;
		margin-top: -1px;
		margin-bottom: 1px;
	}
	
	/* footer */
	
	.decorationoff{
		text-decoration: none;
		color: #3B2F2F;
	}
	.icon-instagram{
		color: #d62976;
	}
	.icon-facebook{
		color: #1877F2;
	}
	.align-right{
		text-align: right;
	}
	
	.wrapper{
		display: grid;
		grid-template-columns: repeat(2, 125px) 2fr;
		grid-template-rows: 50px;
		align-items: center;
		font-size: 0.8em;
	}
	.line{
		margin-top: 150px;
		border-top: 1px solid gray;
	}
	footer{
		margin-bottom: 115px;
	}
	
	
	/* page inhoud */
	
	html{
		font-size: 150%;
	}
	body{
		font-family: system-ui, sans-serif;
		background: #FAF5F0;
		color: #3B2F2F;
		padding: 0;
		margin: 0;
	}
	header{
		position: fixed;
		top: 0;
		z-index: 2000;
	}
	main{
		text-align: center;
		padding-top: 175px;
	}
	
	.pagina-titel{
		font-size: 2.25em; 
		font-weight: 650;
	}
	.centered{
		text-align: center;
	}
	.margin{
		margin-top: 50px;
		margin-left: 100px;
		margin-right: 100px;
		margin-bottom: 35px;
		z-index: 1;
	}
	img{
		width: 80%;
		height: auto;
	}
		
	/* home page */
	
	html.home .pagina-titel{
		font-size: 1.4em; 
		font-weight: 650;
	}
	html.home .box{
		background-color: #3B2F2F;
		color: #FAF5F0;
		margin-top: -250px; 
		height: 1300px;
	}
	@media(max-width: 740px){
		html.home .box{
			background-color: #3B2F2F;
			color: #FAF5F0;
			margin-top: -250px; 
			height: 1555px;
		}
	}
	
	html.home .box-correction{
		transform: translateY(250px);
	}
	html.home .sub-titel{
		font-weight: 750; 
		margin-bottom: 50px; 
		font-size: 1.4em;
	}
	html.home .block-text{
		border-bottom: 2px solid gray;
	}
	html.home .text-titel{
		font-size: 1.2em;
		font-weight: 650;
		margin-bottom: 20px;
	}
	html.home .black-white{
		filter: brightness(100%) contrast(100%) saturate(0%);
	}
	html.home .foto-correction{
		margin-top: -225px;
	}

	/* about page */
	
	@media(max-width: 701px){
		html.about .box{
			background-color: #3B2F2F; 
			color: #FAF5F0; 
			height: 1800px;
			margin-top: -500px;
		}
	}
	@media(min-width: 700px){
		html.about .box{
			background-color: #3B2F2F; 
			color: #FAF5F0; 
			height: 1600px;
			margin-top: -500px;
		}
	}
	html.about .box-correction{
		transform: translateY(500px);
		z-index: 1000;
	}
	html.about .text-titel{
		font-weight: 500;
		text-align: left;
	}
	html.about .block-text{
		text-align: left;
		font-size: 0.8em
	}
	html.about .foto-correction{
		margin-top: -600px;
	}
	html.about footer.line{
		border-top: 1px solid gray;
		transform: translateY(-150px);
		margin-bottom: -35px;
	}
	html.about img:nth-of-type(2){
		width: 50%
	}
	
	/* services page */
	
	html.services .box{
		background-color: #3B2F2F; 
		color: #FAF5F0;
	}
	html.services .box-large{
		height: 1200px; 
		margin-top: -550px;
	}
	html.services .box-medium{
		height: 1000;
		margin-top: -500;
	}
	html.services .box-small{
		height: 700px; 
		margin-top: -390px;
	}
	html.services .box-correction-large{
		transform: translateY(550px);
		z-index: 1001;
	}
	html.services .box-correction-medium{
		transform: translateY(320px);
		z-index: 1001;
	}
	html.services .box-correction-small{
		transform: translateY(200px);
		z-index: 1001;
	}
	
	html.services .text-titel{
		font-weight: 500; 
		text-align: left;
	}
	html.services .block-text{
		font-size: 0.8em;
		text-align: left;
	}
	html.services .foto-correction{
		transform: translateY(-200px)
	}
	html.services footer.line{
		border-top: 1px solid gray;
		transform: translateY(-150px);
		margin-bottom: -35px;
	}
	
	/* gallery */
	
	html.gallery .box{
		background-color: #3B2F2F;
		color: #FAF5F0;
		margin-top: 100px; 
		padding-bottom: 20px;
		gap: 24px;
		margin-bottom: -150;
	}
	html.gallery .grid{
		padding-top: 50px;
		display: grid;
		grid-template-rows: 1fr;
		align-items: center;
	}
	html.gallery img{
		display: block;
		width: 100%;
		height: auto;
	}
	html.gallery figure{
		font-size: 0.5em;
	}
	html.gallery figcaption{
		padding-top: 20px;
	}
	
	/* contact */
	
	html.contact .info {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 50px);
		text-align: left;
	}
	html.contact .fuse{
		grid-column-start: 1;
		grid-column-end: 3;
	}
	html.contact .box{
		background-color: #3B2F2F; 
		color: #FAF5F0;
		margin-top: -800px; 
		height: 2400px;
	}
	html.contact .correction{ 
		margin-top: -1100px;
		z-index: 1001;
	}
	html.contact .sub-titel{
		color: white; 
		font-size: 1.75em; 
		font-weight: 600;
	}
	html.contact form{
		margin-top: 85px;
		align-items: left;
	}
	html.contact .naam{
		font-size: 1.2em;
		margin-bottom: 2px; 
		border-radius: 5px; 
		width: 339px
	}
	html.contact .form-block{
		font-size: 1.2em; 
		border-radius: 5px;
	}
	html.contact .verzend{
		font-size: 1.2em;
		margin-top: 2px;
		width: 150px;
		border-radius: 5px;
		background: #d0f7d0;
	}
	html.contact iframe{
		border: 0; 
		border-radius: 25px;
		width: 100%; 
		height: 50%;
	}
	html.contact .correction-info{
		transform: translate(0px, 850px);
		z-index: 1001;
	}
	html.contact .white-decoroff{
		text-decoration: none; 
		color: white;
	}
	html.contact .small-mobile-grid{
		display: flex;
		justify-content: left;
		flex-direction: column;
	}
	html.contact footer{
		margin-top: 130px;
	}
	html.contact .pagina-titel{
		color: black;
	}
	
}

@media (min-width: 981px){

	/* header  */

	.top-border {
		top: 0;
		left: 0;
		height: 179px;
		width: 100vw;	
		z-index: 1;
		background-color: #FAF5F0;
	}

	.logo{
		z-index: 2;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%);
		background-color: #3B2F2F;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 250px;
		height: 125px;
		align-items: center;
		margin-top: -90px;
	}
	.logo-text{
		color: #FAF5F0;
	}
	.logo-text:nth-child(1){
		transform: scaleX(1.17);
		font-size: 1.50em;
		z-index: 1001;
	}
	.logo-text:nth-child(2){
		transform: translateY(-25px);
		font-family: "Playfair Display", serif;
		font-style: italic;
		z-index: 1001;
	}
	
	.topnav {
		background-color: tranparent;
		position: absolute;
		top: 130;
		border-top: 1px solid gray;
		border-bottom: 1px solid gray;
		width: 100vw;
	}
	
	.topnav #myLinks {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: 1fr;
	}
	
	.topnav a {
	  text-align: center;
	  color: black;
	  padding: 10px;
	  text-decoration: none;
	  font-size: 20px;
	  display: block;
	  transform: translateY(-2px)
	}
	
	.topnav a.icon {
	  background: tranparent;
	  color : #FAF5F0;
	  display: block;
	  position: absolute;
	  left: -1000;
	  top: -1000;
	}
	
	.topnav a:hover {
	  background-color: tranparent;
	  color: tranparent;
	}
	
	.topnav span.geenoptie{
		display: none;
	}
	
	.downloads{
		position: absolute;
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 250px;
		top: 5px;
		right: 50px;
		font-size: 0.70em;
	}
	
	.downloads a{
		border: 1px solid #FAF5F0;
		display: block;
		background-color: #3B2F2F;
		color: white;
		text-decoration: none;
		padding: 10px 8px;
		text-align: center;
		font-size: 1.2em;
	}
	
	.downloads a:hover{
		background: lightgray;
		color: #3B2F2F;
		border: 1px solid #3B2F2F;
		margin-top: -1px;
		margin-bottom: 1px;
	}
	
	/* footer */
	
	.decorationoff{
		text-decoration: none;
		color: #3B2F2F;
	}
	.icon-instagram{
		color: #d62976;
	}
	.icon-facebook{
		color: #1877F2;
	}
	.align-right{
		text-align: right;
	}
	
	.wrapper{
		display: grid;
		grid-template-columns: repeat(2, 200px) 2fr;
		grid-template-rows: 50px;
		align-items: center;
	}
	.line{
		margin-top: 150px;
		border-top: 1px solid gray;
	}
	footer{
		margin-bottom: 115px;
	}
	
	
	/* page inhoud */

	html{
		font-size: 1.50em;
	}
	body{
		font-family: system-ui, sans-serif;
		background: #FAF5F0;
		color: #3B2F2F;
		padding: 0;
		margin: 0;
	}
	header{
		position: fixed;
		top: 0;
		z-index: 2000;
	}
	main{
		text-align: center;
		padding-top: 250px;
	}
	
	.pagina-titel{
		font-size: 2.25em; 
		font-weight: 650;
	}
	.centered{
		text-align: center;
	}
	.margin{
		margin-top: 50px;
		margin-left: 200px;
		margin-right: 200px;
		margin-bottom: 35px;
		z-index: 1;
	}
	img{
		width: 75%;
		height: auto;
	}
		
	/* home page */
	
	
	html.home .box-correction{
		transform: translateY(300px);
	}
	html.home .sub-titel{
		font-weight: 750;
		margin-bottom: 50px;
		font-size: 1.7em;
	}
	html.home .block-text{
		border-right: 2px solid gray;
	}
	html.home .text-titel{
		font-size: 1.2em;
		font-weight: 650;
		margin-bottom: 20px;
	}
	html.home .black-white{
		filter: brightness(100%) contrast(100%) saturate(0%);
	}
	@media (max-width: 1400px){

		html.home .foto-correction{
			margin-top: -290px;
		}

		html.home .box{
			background-color: #3B2F2F;
			color: #FAF5F0;
			margin-top: -250px; 
			height: 1300px;
		}
	}
	@media (min-width: 1401px){

		html.home .foto-correction{
			margin-top: -150px;
		}

		html.home .box{
			background-color: #3B2F2F;
			color: #FAF5F0;
			margin-top: -250px; 
			height: 1000px;
		}
	}

	html.home .grid-pc{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		gap: 1em;
		margin: 0 auto;
		max-width: 70%;
	}
	html.home article{
		padding: 20px;
		min-width: 200px;
		max-width: 500px;
	}

	/* about page */
	
	html.about .box{
		background-color: #3B2F2F; 
		color: #FAF5F0; 
		height: 1900px;
		margin-top: -500px;
	}
	html.about .box-correction{
		transform: translateY(500px);
		z-index: 1000;
	}
	html.about .text-titel{
		font-size: 1.5em;
		font-weight: 500;
		text-align: left;
	}
	html.about .block-text{
		text-align: left;
		font-size: 1em
	}
	html.about .foto-correction{
		margin-top: -600px;
		margin-bottom: 25px;
	}
	html.about footer.line{
		border-top: 1px solid gray;
		transform: translateY(-150px);
		margin-bottom: -35px;
	}
	html.about img:nth-of-type(1){
		width: 40%;
	}
	html.about img:nth-of-type(2){
		width: 30%;
	}
	html.about article{
		font-size: 1.2em;
		min-width: 750px;
	}
	html.about .pc-centered{
		display: flex;
		justify-content: center;
	}
	
	/* services page */
	
	html.services img{
		width: 50%;
		margin-left: 200px;
	}
	html.services main{
		background-color: #3B2F2F; 
		color: #FAF5F0;
	}
	
	html.services .text-titel{
		font-weight: 500; 
		text-align: left;
	}
	html.services .block-text{
		font-size: 0.8em;
		text-align: left;
	}
	html.services footer.line{
		border-top: 1px solid gray;
		transform: translateY(-150px);
		margin-bottom: -35px;
	}
	html.services .grid-pc{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		padding-bottom: 60px;
	}
	html.services .grid-pc{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 20px;
	}
	html.services .item3{
		grid-column: 2;
		grid-row: 2;
	}
	html.services .item4{
		grid-column: 1;
		grid-row: 2;
	}
	html.services br{
		display: none;
	}
	html.services article{
		min-width: 250px;
	}
	
	/* gallery */
	
	html.gallery .box{
		background-color: #3B2F2F;
		color: #FAF5F0;
		margin-top: 100px; 
		gap: 24px;
		margin-bottom: -150;
		min-height: 1400px;
		padding-bottom: 20px;
	}
	html.gallery .grid{
		padding-top: 50px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
		margin: auto auto auto auto;
	}
	html.gallery img{
		display: block;
		width: 100%;
		height: auto;
	}
	html.gallery figure{
		font-size: 0.5em;
		min-width: 150px;
	}
	html.gallery figure.big{
		grid-column-start: 1;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	html.gallery figcaption{
		padding-top: 20px;
	}
	
	/* contact */
	
	html.contact .info {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 50px);
	}
	html.contact .sub-titel{
		color: white; 
		font-size: 1.75em; 
		font-weight: 600;
	}
	html.contact form{
		margin-top: 85px
	}
	html.contact .naam{
		font-size: 1.2em;
		margin-bottom: 2px; 
		border-radius: 5px; 
		width: 400px
	}
	html.contact .form-block{
		font-size: 1.2em; 
		border-radius: 5px;
	}
	html.contact .verzend{
		font-size: 1.2em; 
		margin-top: 2px; 
		width: 140px;
		border-radius: 5px;
		background: #d0f7d0;
	}
	html.contact textarea{
		max-width: 600px;
	}
	html.contact iframe{
		border: 0; 
		border-radius: 25px;
		width: 70%;
		height: 90%;
		min-width: 350px;
		margin-left: -40%;
	}
	html.contact .white-decoroff{
		text-decoration: none; 
		color: white;
		cursor: default;
	}
	html.contact .grid-contact-pc{
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 20px;
	}
	html.contact img{
		width: 50%;
		margin-left: 30%;
		min-width: 300px
	}
	html.contact main{
		background-color: #3B2F2F;
		color: #FAF5F0;
		margin-bottom: -150px;
		height: 60vw;
		min-height: 1250px
	}
	@media (max-width: 1200px){

		html.contact .pc-2{
			text-align: left;
			margin-left: -10%;
		}
	}
	@media (min-width: 1201px){

		html.contact .pc-2{
			text-align: left;
			margin-left: 20%;
		}
	}
	html.contact .pc-grid{
		display: grid;
		grid-template-columns: 1fr;
	}
}