.hexagon{
		position:relative;
		left:50vw;
		top:50vh;
		top:50svh;
		width:0px;
		height:0px;
		transform-origin: center;
		animation-iteration-count:1;
		animation-fill-mode: forwards;
		transition:all 1.5s ease;
	}
	
	.hexagon .bg{
		position: absolute;
		top:-1500px;
		left:-1500px;
		width:3000px;
		height:3000px;
		z-index: 0;
		opacity:1;
		transition:all 0.5s;
		//display: none;
		filter:brightness(80%);
        display: none;
	}
	.hexagon .bg svg{
		width:100%;
		height:100%;
	}
	.hexagon.on .bg{
		opacity:0;
	}
	
	.hex {
		position: absolute;		
		transform-origin: center;
		overflow:hidden;
		transition:opacity 0.5s, filter 0.5s, transform 0.5s;
		opacity:0.5;
		z-index: 10;
		cursor:pointer;
	}
    .hex.img {
		clip-path: url(#svgPath);
	}
	.hex .inner{
		position: absolute;
		top:0%;
		left:0%;
		width:100%;
		height:100%;
		z-index: 5;
	}
    .hex.img .inner{
        top:4%;
		left:4%;
		width:92%;
		height:92%;
        clip-path: url(#svgPath);
		overflow:hidden;
		background-position: center;
		background-size:cover;
    }
	.img.d_0 .inner{
		//filter:grayscale(100%);
		//mix-blend-mode: multiply;	
	}
	.hex.over{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		transform-origin: center;
		z-index: 200;
		pointer-events: none;
        transition:opacity 0.1s ease 0.5s;
	}
    .hexagon.on .over{
		opacity: 0;
        transition:opacity 0.5s ease 0s;
	}
    
	.hex.exhibitionx div{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hex .inner video{
		//pointer-events: none;	
	}
	.hex.d_0 > div{
		//transform:rotate(180deg);
	}
	.hex.d_1 > div{
		transform:rotate(60deg);
	}
	.hex.d_2 > div{
		transform:rotate(120deg);
	}
	.hex.d_3 > div{
		transform:rotate(180deg);
	}
	.hex.d_4 > div{
		transform:rotate(240deg);
	}
	.hex.d_5 > div{
		transform:rotate(300deg);
	}
	.hex.d_6 > div{
		transform:rotate(360deg);
	}
    
		/*
        @-moz-document url-prefix() {
 
			.img.d_1 .inner{
				transform:rotate(0deg);
			}
			.img.d_2 .inner{
				transform:rotate(0deg);
			}
			.img.d_3 .inner{
				transform:rotate(0deg);
			}
			.img.d_4 .inner{
				transform:rotate(0deg);
			}
			.img.d_5 .inner{
				transform:rotate(0deg);
			}
			.img.d_6 .inner{
				transform:rotate(0deg);
			}

		}
		*/
	.hex img, .hex video{
		position: relative;
		height:110%;
		top:-5%;
		left:-5%
	}	
	.hex.on{
		z-index: 400; 
		//filter:blur(20px);  
		//clip-path:none;
        opacity: 0;
        //transform: scale(150%) rotate(30deg);
		//transform: scale(150%) rotate(30deg);
 	}
	.hex.d_0.on{
		opacity: 0;	
	}
	.hex.show{
		opacity: 1;
	}
	.hex.on.show{
		opacity: 0;
	}
	.hex.show:hover{
		//opacity: 1;
	}
	.hex.off{
		opacity: 0;
	}
		
	.hex .play{
		width:60px;
		height:60px;
		margin-top:-30px;
		margin-left:-30px;
		position: absolute;
		top:50%;
		left:50%;
		border-radius:100%;
		opacity: 0;
		background-image:url(../img/icon_play.svg);
		background-size:40px;
		background-position: center;
		display: none;
	}
	.hex:hover .play{
		opacity: 1;	
		display: none;
	}
	.hex .title{
		position: absolute;
		display: block;
		width:100%;
		
		bottom:6.4%;
		left:0px;
		text-align: center;
		text-transform: uppercase;
		color:black !important;
		z-index:100;
	}
	.hex .title span{
		display:inline-block;
        width: 50%;
		height:1.5vw;
		padding:1px 12px;
		border-radius:2px;
		//border:1px solid black;
	}
    .hex.exhibition .title{
        display: none;
    }
    
	.spin{
		animation: spin-rr 36s linear infinite;
	}
        
	@keyframes spin-r {
		0% { transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}
	@keyframes spin-rr {
		0% { transform:rotate(0deg);}
		10% {transform:rotate(120deg);}
		30% {transform:rotate(120deg);}
		40% { transform:rotate(240deg);}
		60% {transform:rotate(240deg);}
		70% {transform:rotate(360deg);}
		100% {transform:rotate(360deg);}
	}
	@keyframes spin1 {
		0% { transform:rotate(0deg);}
		100% {transform:rotate(120deg);}
	}
	@keyframes spin2 {
		0% { transform:rotate(120deg);}
		100% {transform:rotate(240deg);}
	}
	@keyframes spin3 {
		0% { transform:rotate(240deg);}
		100% {transform:rotate(360deg);}
	}

	@media screen and (max-width: 800px) {

		.img .title{
			//bottom:6.5vw;
		}

	}