html, body, div, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	border: 0;
}

h1, h2 ,h3{
	color: rgb(0,0,0);
	padding-top:.5vw;
	padding-bottom:.5vw;		
}

body {
	overflow-y: scroll;
	overflow-x: hidden;
	background: rgb(255,255,255); 
	color: rgb(0,0,0);
    font-family: 'Montserrat', sans-serif;
	caret-color: transparent;
}

A:link    {text-decoration: underline; font-weight: bold; color: rgb(0,0,0);}
A:visited {text-decoration: none;      font-weight: bold; color: rgb(0,0,0);}
A:active  {text-decoration: none;      font-weight: bold; color: rgb(0,0,0);}
A:hover   {text-decoration: overline;  font-weight: bold; color: rgb(0,0,0);}

.page_title{
	width:100%;
	height:100%;
	border:0px;
	background-color: rgb(255,255,255);
	text-transform:uppercase;
}


#polygon_gallery {
	padding: 1% 1%;
  	display: flex;
	flex-wrap: wrap;
	width: 80vw;
	margin: 0% auto;
	overflow: hidden;
	list-style-type: none;
}

.polygon_parent_layer{
    position: relative;
    text-align: center;
    width: 20%;
	overflow: hidden;
  	visibility: hidden;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;	
	-webkit-transform:  rotate(-120deg);
	   -moz-transform: rotate(-120deg);
	     -o-transform: rotate(-120deg);
		    transform: rotate(-120deg);
	transform-origin: 50% 50%;
			
    border: 5px solid transparent;			
}
		
.polygon_parent_layer::after {
    content: "";
    display: block;
}

.polygon_parent_layer img { 
	width:120%;
	margin-left: -10%;
	visibility: visible;

}
 
.polygon_child_layer {  	
	overflow: hidden;
  	visibility: hidden;
    width: 100%;
    height: 100%;
	-webkit-transform: rotate(60deg);
	   -moz-transform: rotate(60deg);
	     -o-transform: rotate(60deg);
		    transform: rotate(60deg);
	    transform-origin: 50% 50%;
}

.polygon_grandchild_layer { 
    width: 100%;
    height: 100%;
	overflow: hidden;
  	visibility: visible;
	-webkit-transform: rotate(60deg);
	   -moz-transform: rotate(60deg);
	     -o-transform: rotate(60deg);
		    transform: rotate(60deg);
	transform-origin: 50% 50%;

}

.polygon_description {
	width: 100%;
	height:100%;
	position: absolute;
		left:0%;
		top: 0%;
	font-weight: bold;
	font-size: 1.3em;
}

.polygon_thumb{
	width: 100%;
	height:100%;
	position: absolute;
		left:0%;
		top: 0%;	
     background-position: center center;
     background-repeat: no-repeat; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;	
	
}

.polygon_description p {
	width:98%;
	background-color:; 
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
		
	color: transparent; text-decoration:none;
	-webkit-transition: color 0.5s ease-in-out;
  	    -ms-transition: color 0.5s ease-in-out;	
  	     -o-transition: color 0.5s ease-in-out;	
  	        transition: color 0.5s ease-in-out;
}

.polygon_description:hover p {
	color: rgb(255,255,255); text-decoration:none;
}

#gallery_slider{
	z-index:1;	
    overflow:hidden;	
		backface-visibility: hidden;
}

#gallery_slider:before {
		backface-visibility: hidden;	

 	content: '';
    position: absolute;
		top: 0; 
		left: 0;
   	width: 250%; 
	height: 250%;
		   	background: rgba(0,0,0, 0.7);

	    

		
	-webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
		 -o-transform: translateY(-100%);
	        transform: translateY(-100%);
			
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
        -ms-transition: 	-ms-transform 0.5s ease-in-out;
         -o-transition: 	 -o-transform 0.5s ease-in-out;			
            transition: 	    transform 0.5s ease-in-out;		
		
}
 
#gallery_slider:hover:before {
		backface-visibility: hidden;
	
	-webkit-transform: translateY(-20%);
        -ms-transform: translateY(-20%);
         -o-transform: translateY(-20%);		
            transform: translateY(-20%);
			
}

.spin-create-event{
	-webkit-animation: spin 1s 1;
	animation: spin 1s 1;

}

@-webkit-keyframes spin {
  from {
    transform: rotateY( 90deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes spin {
  from {
    transform: rotateY( 90deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}


@media (min-width:1201px) {
  	#polygon_gallery{
		font-size: large;
   	}
  	.polygon_parent_layer{		
    	width: 20%; 
				margin-top: -5.4vw;	
	}
	  	.polygon_parent_layer:nth-child(9n+6){
		    	margin-left:10%;  
	}
	.polygon_parent_layer:nth-child(-n+5){
		margin-top: -0.7vw;	
	}
}

@media (min-width:1601px) {
  	#polygon_gallery{
		font-size: x-large;
   	}
}

@media (max-width: 1200px) and (min-width:901px) {
  	#polygon_gallery{
		font-size: medium;
  	}
  	.polygon_parent_layer{
		width: 25%; 
		margin-top: -6.5vw;
  	}
  	.polygon_parent_layer:nth-child(7n+5){ 
		margin-left:12.5%;  
	}
	.polygon_parent_layer:nth-child(-n+4){
		margin-top: -0.7vw;	
	}
}

@media (max-width: 900px) and (min-width:601px) { 
  	.polygon_parent_layer{
		width: 33.333%; 
		margin-top: -8.8vw;
  	}
  	.polygon_parent_layer:nth-child(5n+4){
		margin-left:16.666%;
	}
	.polygon_parent_layer:nth-child(-n+3){
		margin-top: -0.7vw;	
	}
}

@media (max-width: 600px) { 
  	.polygon_parent_layer{
		width: 50%; 
		margin-top: -13.3vw;
  	}
  	.polygon_parent_layer:nth-child(3n+3){     
		margin-left:25%;  
	}
	.polygon_parent_layer:nth-child(-n+2){
		margin-top: -0.7vw;	
	}
}

@media (max-width: 400px) {
	#polygon_gallery {
		font-size: 13px;
	}
}

#gallery .overlay { 
	position:fixed; overflow:hidden; left:0; top:0; z-index:9998; 
	text-align:center; 

	background:rgba(255,255,255, 0.9);
}

#gallery .overlay div {  
	position:absolute; bottom:2px; left:2px; right:2px;
}

#gallery .overlay div p { 
	font-size:1em; text-align:center; max-width:100%; padding:0.5em 1em; 
	background: rgba(0,0,0, 1); border-radius:0em ;
	color: rgb(255,255,255);
}
#gallery .overlay div a { 
	display:inline; color: rgb(255,255,255); text-decoration:underline; 
}
#gallery .overlay div a:hover { 
	display:inline; color: rgb(255,255,255); text-decoration:overline; 
}
#gallery .overlay img { 
	max-width:100%; 
	max-height:100%; 
	position:absolute;
	z-index:-2;	
	opacity:0; 
	float:none; 
	margin:0; 
	top:50%; 
	left:50%;  
	background: rgb(255,255,255);
	-webkit-transform:translate(-50%,-50%); 
	    -ms-transform:translate(-50%,-50%); 
	        transform:translate(-50%,-50%); 
	-moz-box-sizing:border-box; 
	     box-sizing:border-box; 
	 -webkit-transition:opacity .5s linear; 
	         transition:opacity .5s linear
}
#gallery .overlay:target { 
	width:auto; height:auto; bottom:0; right:0;
}
#gallery .overlay:target img { 
	opacity:1 
}


.close svg, .prev svg, .next svg{
	transition: all .2s ease-in-out;
}

@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.play svg{
  opacity: 0.8;
  filter: alpha(opacity=80);	
}

.play svg, .close svg, .next svg, .prev svg{

  
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.play svg:hover, .close svg:hover, .next svg:hover, .prev svg:hover {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

#gallery .prev, #gallery .next { 
	color:transparent; 
	position:absolute; 
	display:inline-block; top:0; right:0; 
	width:25%; 
	height:100%; 
	text-decoration:none;
	z-index:-1;
}

#gallery .prev { 
	left:0;
}

#gallery .next { 
	right:0;
}	


@media (orientation: landscape) {
	#gallery .overlay div { 
		  max-width:80%;
		  position:absolute; bottom:0.4em;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;

	}
	#gallery .overlay div p{ 
			
			
		/* height: 3.464101615137755em; */
		display: table-cell;
		vertical-align: middle;
		padding-left: 2em;
		padding-right: 2em;
		padding-top: 0.4em;	
		padding-bottom: 0.4em;		
	
						
		--A: 1em;	
		--B: 50%;	

	/*	
		clip-path: 
			polygon(
			  0% var(--B),                 	/* top left */
			  var(--A) 0%,                 	/* top left */
			  calc(100% - var(--A)) 0%,    	/* top right */ 
			  100% var(--B),               	/* top right */
			  100% calc(100% - var(--B)),  	/* bottom right */ 
			  calc(100% - var(--A)) 100%,  	/* bottom right */ 
			  var(--A) 100%,               	/* bottom left */
			  0% calc(100% - var(--B))    	/* bottom left */
			);
	*/		
			
	}		
	
	
	
	#gallery .overlay img { 
	max-height: 92vh; 
	top:47%; left:50%;  
	}

		
	#gallery .overlay:target { 
		padding-top:0.2em ;
	}

	#gallery .prev svg, #gallery .next svg {
		font-size: medium;
		width:3em; height:3em;
	}
		
	#gallery .prev svg { 
				 position:absolute;
		 bottom:0;		 
		 margin-bottom:1.2em;
		 left:1.2em;		 
	}

	#gallery .next svg { 
			
		 position:absolute;
		 bottom:0;		 
		 margin-bottom:1.2em;
		 right:1.2em;
	}

	#gallery .play { 
		position:absolute; z-index:1001; 
		font-size: medium;
		top:50%; left:50%; text-align: center;
		width:10em; height:10em; 
		/* margin-left equals half the width to place it in center */		
		margin-left:-5em; margin-top:-5em; 
		text-decoration:none;
	}

	#gallery .close svg { 
		position:absolute; z-index:1001; 
		font-size: medium;
		width:3em; height:3em; 
		top:1.2em;
		right:1.2em;
		margin-left:-1.5em;
		text-decoration:none;
	}
}

@media (orientation: portrait) {
	
	#gallery .close svg { 
		position:absolute; z-index:1001; 
		font-size: medium;
		width:3em; height:3em; 
		top:0;
		left:50%;
		margin-left:-1.5em;
		text-decoration:none;
	}

	#gallery .prev svg, #gallery .next svg {
		position:absolute; z-index:1001; 
		font-size: medium;
		width:3em; height:3em;
		top:0em;
	}
		
	#gallery .prev svg { 
		 left:.5em;		 
	}

	#gallery .next svg { 
		 right:.5em;
	}	
	
	#gallery .play { 
		position:absolute; z-index:1001; 
		font-size: medium;
		top:50%; left:50%; text-align: center;
		width:4em; height:4em; 
		/* margin-left equals half the width to place it in center */		
		margin-left:-2em; margin-top:-2em; 
		text-decoration:none;
	}

}

@media (max-width: 900px) {
	
	#gallery .overlay div { 
		  position:absolute; bottom:0.0em;
	}
	
	#gallery .overlay div p { 
		background: rgba(0,0,0, 0.6);
		padding-top: 0.0em;	
		padding-bottom: 0.0em;		
	}
	
	#gallery .play { 
		width:4em; height:4em; 
		margin-left:-2em; margin-top:-2em; 
	}
	
	.download_button_container{
		font-size: large;
	    width: 10em;
		height: 10em;
	}
}


		.download_button_container{
			font-size: large;
		    width: 16em;
			height: 16em;
		}

		.download_button{
			/*
			The four steps to centering horizontally and vertically with Flexbox are the following:
			    HTML, body, and parent container need to have a height of 100%
			    Set display to flex on parent container
			    Set align-items to center on parent container
			    Set justify-content to center on parent container
			*/
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

		    background:url(../data/www.spaceisgreen.nl-download-line.svg);
			  background-size: 200% 200%;

		    -webkit-animation:10s download-button-scroll infinite linear;
		       -moz-animation:10s download-button-scroll infinite linear;
		         -o-animation:10s download-button-scroll infinite linear;
		        -ms-animation:10s download-button-scroll infinite linear;
		            animation:10s download-button-scroll infinite linear;
		}

		.download_button:hover{
		    -webkit-animation:3s download-button-scroll infinite linear;
		       -moz-animation:3s download-button-scroll infinite linear;
		         -o-animation:3s download-button-scroll infinite linear;
		        -ms-animation:3s download-button-scroll infinite linear;
		            animation:3s download-button-scroll infinite linear;
		}

		.download_button img{
			width: 100%;
			height:100%;
		}

		/*background button scroll*/
	    @-webkit-keyframes download-button-scroll{
	    	100%{background-position:0px -100%;}
	    }
	    @-moz-keyframes download-button-scroll{
	    	100%{background-position:0px -100%;}
	    }
	    @-o-keyframes download-button-scroll{
	    	100%{background-position:0px -100%;}
	    }
	    @-ms-keyframes download-button-scroll{
	    	100%{background-position:0px -100%;}
	    }
	    @keyframes download-button-scroll{
	        100%{background-position:0px -100%;}
	    }