#shape-container {
	width: 100%;
	-webkit-perspective: 750;
}

#shape {
	position: relative;
	top: 20px;
	margin: 0 auto;
	width: 250px; height: 250px;
	-webkit-animation: spin 20s infinite linear;
	-webkit-transform-style: preserve-3d;
	
}


#shape > div {
	border: 1px solid rgb(255, 255, 255);
	position: absolute;
	width: 250px; height: 250px;

	-webkit-border-radius: 4px;
	-webkit-transition: -webkit-transform 2s;
}

#shape > div svg {
	width: 50%; 
	height: 50%;
	margin: 4em;
}

/* This is where the 3D magic happens */
@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0) rotateX(0); }
	to   { -webkit-transform: rotateY(-360deg) rotateX(360deg); }
}

/* 3D positioning for each of the images/links */
.one { -webkit-transform: rotateX(90deg) translateZ(125px); }
.two { -webkit-transform: translateZ(125px); }
.three { -webkit-transform: rotateY(90deg) translateZ(125px); }
.four { -webkit-transform: rotateY(180deg) translateZ(125px); }
.five { -webkit-transform: rotateY(-90deg) translateZ(125px); }
.six { -webkit-transform: rotateX(-90deg) translateZ(125px); }

/*Face colors*/ 
.one, .two, .three, .four, .five, .six {
	background: rgba(252, 252, 252, 0.493);
}

/*Image Logo accueil*/
#pictureLogo {
	display: none;
}

@media screen and (max-width: 767px) {
	#shape-container {
		display: none;
	}
	#video-intro {
		display: none;
	}
	#pictureLogo {
		display: flex;
		width: 100%;
	}
	
}