/* structure */
	#logo {
	  align-items: center;
	  min-height: 100vh;
	}

	.logoContainer {
		width: 50vh;
		transform: rotateX(90deg) rotateY(10deg) rotateZ(0deg);
		-webkit-transform:  rotateX(90deg) rotateY(10deg) rotateZ(0deg);
	}

/* title */
	.logoTitle {
		top: 45%;
		left: 50%;
	    fill: white;
	}

	.infographik { font-size: 12px; }

	.animLogoTitle { animation: animateLogoTitle 4s forwards; }
	@keyframes animateLogoTitle {
	  75% {
			transform: scale(1); opacity: 1;
			-webkit-transform:  scale(1); opacity: 1;
		}
	  100% {
  			transform: scale(10); opacity: 0;
  			-webkit-transform: scale(10); opacity: 0;
  		}
	}

	.animLogo { animation: animateLogo 2.5s ease-in-out forwards ; }
	@keyframes animateLogo {
	    0% {
	    	transform: rotateX(90deg) rotateY(10deg) rotateZ(0deg);
	    	-webkit-transform: rotateX(90deg) rotateY(10deg) rotateZ(0deg);
	    }
	    100% {
	    	transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	    	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	    }
	}

/* hexagons */
	.hexagon {
		width: 75%;
		height: 65%;
		margin: 50%;
	}

	#logoWiredTop, #logoWiredBottom {
	    fill: none;
	    stroke-width: 2;
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
	}

	#logoWiredTop { stroke: white; }
	#logoWiredBottom { stroke: grey; }

/* sides */
	.side {
		opacity: .25;
		height: 10%;
	    margin-top: 50%;
	    overflow: hidden;
	}

	.side1 {
		transform: translateY(-500%) translateX(12%) rotateX(-90deg) rotateY(120deg);
		-webkit-transform: translateY(-500%) translateX(12%) rotateX(-90deg) rotateY(120deg);
	}
	.side2{ transform: translateY(-166%) translateX(45%) rotateX(-90deg) rotateY(60deg);
		-webkit-transform: translateY(-166%) translateX(45%) rotateX(-90deg) rotateY(60deg);
	}
	.side4{ transform: translateY(386%) translateX(-13%) rotateX(-90deg) rotateY(-60deg);
		-webkit-transform: translateY(386%) translateX(-13%) rotateX(-90deg) rotateY(-60deg);
	}
	.side5{ transform: translateY(60%) translateX(-45%) rotateX(90deg) rotateY(-60deg) rotateZ(180deg);
		-webkit-transform: translateY(60%) translateX(-45%) rotateX(90deg) rotateY(-60deg) rotateZ(180deg);
	}

	.inSide {
		width: 150%;
		right: -150%;
		border-top: 5px solid white;
		border-bottom: 5px solid white;
	}

	/* animations  */
	.polygonSideAnim { animation: 3s animatePolySideStroke ease-in forwards; }
	@keyframes animatePolySideStroke {
	  to { stroke-dashoffset: 0; }
	}

	.animSides { animation: animateSides 2s ease-in-out forwards ; }
	@keyframes animateSides {
	    0% { right: -150%; }
	    100% { right: 150%; }
	}