body {
  background-image: url("adventure-calm-clouds-414171.jpg");
  font-family:"verdana";
  width:75%;
  height:75%;
  background-color: black;
  

  
}
.cirkels{
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(3, 3fr); 
	grid-gap:1 em;
	padding-left: 6vw;
	padding-top: 10vh;
   
}
h1{
	color:white;
	padding-left:22vw;
	font-size:2.7vw;
	text-align: center;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	opacity: 0;
	width:100%;
}
#webshop:hover{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	opacity: 0;
	width:100%;
}
#reportage:hover{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
#winkels img{
	width:80vw;

}
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
body {
	background-image: url("adventure-calm-clouds-414171.jpg");
	font-family:"verdana";
  width:75%;
  height:75%;
  background-color: black;
  
}
.cirkels{
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(3, 3fr); 
	grid-gap:1 em;
	padding-left: 8vw;
	padding-top: 10vh;
   
}
h1{
	color:white;
	padding-left:22vw;
	font-size:2.7vw;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	opacity: 0;
	width:100%;
}
#webshop:hover{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	opacity: 0;
	width:100%;
}
#reportage:hover{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
#winkels img{
	
	margin-top:1vh;	
	width:80vw;
}

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
body {
	
	background-image: url("adventure-calm-clouds-414171.jpg");
	font-family:"verdana";
  width:75%;
  height:75%;
  background-color: black;
  
}
.cirkels{
	
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(3, 3fr); 
	grid-gap:1 em;
	padding-left: 8vw;
	padding-top: 10vh;
   
}
h1{
	color:white;
	padding-left:22vw;
	font-size:2.7vw;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	
	width:27vw;
	height:50vh;
	background-image: url("webshopsmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	
	opacity: 0;
	width:100%;
}
#webshop:hover{
	
	width:27vw;
	height:50vh;
	background-image: url("webshopsmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	
	opacity: 0;
	width:100%;
}
#reportage:hover{
	
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
.footer {
	
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
#winkels img{
	
	margin-top:1vh;	
	width:80vw;
}
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
body {
	
	background-image: url("adventure-calm-clouds-414171.jpg");
	background-size:400vh;
	background-repeat: no-repeat;
	font-family:"verdana";
	width:120vw;
	height:120vh;
  
}
.cirkels{
	
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(1, 3fr); 
	grid-gap:1em;
	padding-left: 35vw;
	padding-top: 1vh;
   
}
h1{
	color:white;
	font-size:4.55vw;
	width:95vw;
		height:10vh;
	text-align:center;
	margin-left:-9vw;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	
	width:52vw;
	height:40vh;
	background-image: url("webshopsmall.png");
	text-align:center;
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	
	opacity: 0;
	width:100%;
}
#webshop:hover{
	
	width:52vw;
	height:40vh;
	background-image: url("webshopsmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	
	width:52vw;
	height:40vh;
	background-image: url("herstellingensmall.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	
	width:52vw;
	height:40vh;
	background-image: url("herstellingensmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	
	width:52vw;
	height:60vh;
	background-image: url("fotoreportagesmall.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	
	opacity: 0;
	width:100%;
}
#reportage:hover{
	
	width:52vw;
	height:60vh;
	background-image: url("fotoreportagesmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
.footer {
	
  position:absolute;
  width: 15vw;
  height: 20vh;
}
#winkels img{
	
	width:115vw;
	margin-top:50vh;	
	margin-left:5vw;
}
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
body {
	
  background-image: url("adventure-calm-clouds-414171.jpg");
  font-family:"verdana";
  width:100%;
  height:100%;
  
}
.cirkels{
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(3, 3fr); 
	grid-gap:1 em;
	padding-left: 8vw;
	padding-top: 10vh;
   
}
h1{
	color:white;
	padding-left:22vw;
	font-size:2.7vw;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	opacity: 0;
	width:100%;
}
#webshop:hover{
	width:27vw;
	height:50vh;
	background-image: url("webshopsmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	width:27vw;
	height:50vh;
	background-image: url("herstellingensmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmall2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	opacity: 0;
	width:100%;
}
#reportage:hover{
	width:27vw;
	height:50vh;
	background-image: url("fotoreportagesmallhover2.png");
	background-size:100%;
	background-repeat: no-repeat;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
#winkels img{
	width:80vw;
	margin-top:1vh;	
}
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
	body {
  background-image: url("adventure-calm-clouds-414171.jpg");
  font-family:"verdana";
  width:100%;
  height:100%;
  
}
.cirkels{
	width: 90vw;
	display: grid;
	grid-template-columns: repeat(1, 3fr); 
	grid-gap:1em;
	padding-left: 35vw;
	padding-top: 1vh;
   
}
h1{
	color:white;
	font-size:10vw;
	width:95vw;
	text-align:center;
	margin-left:-9vw;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #9c1818;
}

#webshop{
	width:52vw;
	height:30vh;
	background-image: url("webshopsmall.png");
	text-align:center;
	background-size:100%;
	background-repeat: no-repeat;
}
#webshop img{
	opacity: 0;
	width:100%;
}
#webshop:hover{
	width:52vw;
	height:30vh;
	background-image: url("webshopsmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen{
	width:52vw;
	height:30vh;
	background-image: url("herstellingensmall.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#herstellingen img{
	opacity: 0;
	width:100%;
}
#herstellingen:hover{
	width:52vw;
	height:30vh;
	background-image: url("herstellingensmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage{
	width:52vw;
	height:30vh;
	background-image: url("fotoreportagesmall.png");
	background-size:100%;
	background-repeat: no-repeat;
}
#reportage img{
	opacity: 0;
	width:100%;
}
#reportage:hover{
	width:52vw;
	height:30vh;
	background-image: url("fotoreportagesmallhover.png");
	background-size:100%;
	background-repeat: no-repeat;
}
.footer {

  width: 100%;
  text-align: center;
}
#winkels img{
	width:115vw;
	margin-top:0vh;	
}
  

  
}