/* CSS Document */

/*Grid Layout starts*/
#holder {
	font-family: 'Saira Extra Condensed', sans-serif;
	text-align: center;
	display: inline-block;
	width: 100vw;
	height: 90vw;
	overflow: hidden;
}
#holder p {
	font-size: 2.5vw;
	margin: 1vw;
	line-height: 120%;
	color: #fff;
}
#holder a {
	font-size: 2.5vw;
	color: white;
	text-decoration: none;
}
#holder a:hover {
	font-size: 2.5vw;
	color: white;
	text-decoration: underline;
}
.grid{
  display:grid;
  width: 100vw;
  grid-template-columns: repeat(auto-fill, 10vw);
  grid-auto-rows: 11.547vw;
}
#grid1 {
  position: absolute;
  transform-origin: 0 0;
  transform: skewY(-30deg);
}

#grid2 {
  position: absolute;
  transform-origin: 100% 0;
  transform: skewY(30deg);
}

#grid3 {
  position: absolute;
  width: 600vw;
  transform-origin: 500vw 0;
  transform: translatex(-500vw) rotatez(-60deg) skewY(30deg);
}

#grid1>div{
  border: #222 1px solid;
}

#grid2>div{
  border: #222 1px solid;
}

#grid3>div{
  border: #222 1px solid;
}

/*GRID 1 - rechts*/
#grid1 > div:nth-child(1){
  grid-column: 2;  
  grid-row: 2;  
  border: purple 2vw solid;  
}
#grid1 > div:nth-child(2){
  grid-column: 2;  
  grid-row: 3;  
background-color: purple;
background-image: url(../images/weten-1.jpg);
}
#grid1 > div:nth-child(3){
  grid-column: 4;  
  grid-row: 3;  
background-color: purple;
}
#grid1 > div:nth-child(4){
  grid-column: 3;  
  grid-row: 4;  
  background-color: purple;  
background-image: url(../images/weten-3.jpg);
}
#grid1 > div:nth-child(5){
  grid-column: 6;  
  grid-row: 4;  
background-color: seagreen;
}
#grid1 > div:nth-child(6){
  grid-column: 5;  
  grid-row: 5;  
  background-color: seagreen;  
background-image: url(../images/regelen-2.jpg);
}
#grid1 > div:nth-child(7){
  grid-column: 6;  
  grid-row: 5;  
  background-color: seagreen;  
background-image: url(../images/regelen-4.jpg);
}
#grid1 > div:nth-child(8){
  grid-column: 8;  
  grid-row: 5;  
  background-color: darkred;  
}
#grid1 > div:nth-child(9){
  grid-column: 8;  
  grid-row: 6;  
  border: darkred 2vw solid;  
}

/*GRID 2 - links voor*/
#grid2 > div:nth-child(1){
  grid-column: 3;  
  grid-row: 6;  
  border: purple 2vw solid;  
}
#grid2 > div:nth-child(2){
  grid-column: 3;  
  grid-row: 5;  
background-color: purple;
background-image: url(../images/weten-2.jpg);
}
#grid2 > div:nth-child(3){
  grid-column: 5;  
  grid-row: 4;  
background-color: purple;
background-image: url(../images/regelen-1.jpg);
}
#grid2 > div:nth-child(4){
  grid-column: 7;  
  grid-row: 3;  
background-color: purple;
background-image: url(../images/bedenken-1.jpg);
}
#grid2 > div:nth-child(5){
  grid-column: 4;  
  grid-row: 6;  
background-color: seagreen;
background-image: url(../images/regelen-3.jpg);
}
#grid2 > div:nth-child(6){
  grid-column: 1;  
  grid-row: 6;  
background-color: purple;
background-image: url(../images/weten-5.jpg);
}
#grid2 > div:nth-child(7){
  grid-column: 7;  
  grid-row: 4;  
background-color: darkred;
background-image: url(../images/bedenken-2.jpg);
}
#grid2 > div:nth-child(8){
  grid-column: 8;  
  grid-row: 5;  
background-color: darkred;
background-image: url(../images/bedenken-2.jpg);
}
#grid2 > div:nth-child(9){
  grid-column: 9;  
  grid-row: 3;  
background-color: darkred;
background-image: url(../images/bedenken-5.jpg);
}

/*GRID 3 - boven*/
#grid3 > div:nth-child(1){
  grid-column: 49;  
  grid-row: 4;  
background-color: purple;
background-image: url(../images/weten-4.jpg);
}
/*WETEN img*/
#grid3 > div:nth-child(2){
  grid-column: 52;  
  grid-row: 2;  
background-color: purple;
background-image: url(../images/weten-5.jpg);
}
#grid3 > div:nth-child(3){
  grid-column: 51;  
  grid-row: 4;  
  border: seagreen 2vw solid;  
}
#grid3 > div:nth-child(4){
  grid-column: 54;  
  grid-row: 4;  
  border: darkred 2vw solid;  
}
#grid3 > div:nth-child(5){
  grid-column: 51;  
  grid-row: 6;  
  border: seagreen 2vw solid;  
}
#grid3 > div:nth-child(6){
  grid-column: 54;  
  grid-row: 6;  
background-color: darkred;
background-image: url(../images/bedenken-1.jpg);
}
#grid3 > div:nth-child(7){
  grid-column: 52;  
  grid-row: 7;  
background-color: darkred;
background-image: url(../images/bedenken-4.jpg);
}
#grid3 > div:nth-child(8){
  grid-column: 50;  
  grid-row: 9;  
}
#grid3 > div:nth-child(9){
  grid-column: 49;  
  grid-row: 10;  
}