* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin:  0;
	font-family: 'Open Sans', sans-serif;
	color: #333;
	scroll-behavior: smooth;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 4rem;
	background: #333;
	z-index: 1;
}

header nav {
	pointer-events: auto;
	position: fixed;
	bottom: 4rem;
	left: 0;
	text-align: left;
	perspective: 600px;
}

header nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	transform-style: preserve-3d;
}

header nav li {
	transform: rotateY(-90deg);
	transform-origin: 0 0 0;
	position: relative;
	transform-style: preserve-3d;
	margin: 0.25rem 0;
	font-size: 1.25rem;
}

header nav li a {
	display: block;
	color: #fff;
	background-color: #333;
	padding: 0.75rem 1rem 0.5rem 1.5rem;
	transform: translateX(-0.5rem);
}

header nav li.current-menu-item a,
header nav li a.active,
header nav li a:focus,
header nav li a:active,
header nav li a:hover {
	color: #fff;
	background-color: #d07;
	transform: translateX(0);
	-webkit-animation: color-change-2x 20s linear infinite alternate both;
	        animation: color-change-2x 20s linear infinite alternate both;
}

section {
	position: relative;
	display:         flex;
	width:           100vw;
	height:          100vh;
	align-items:     center;
	align-content:   center;
	justify-content: center;
	text-align:      center;
	background:      #fff;
	z-index: 0;
	border: 1rem solid #333;
}

#scene-1 {
	border: none;
	background-image: radial-gradient(ellipse,#ccc,#333);
	z-index: 3;
}

#scene-1 > div {
	position:         fixed;
	top:              50%;
	left:             50%;
	transform:        translate(-50%, -50%);
	width:            auto;
	padding:          0;
}

#scene-1 > div > div {
	display:     flex;
	flex-flow:   column;
	align-items: flex-start;
}
		
#scene-1 svg {
	display: block;
	width:   144px;
	height:  auto;
}
		
h1, h2, h3, h4, h5, h6 {
	margin:      -1px 0 -9px;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 200;
	font-size:   3.2rem;
	line-height: 1;
	opacity: 1;
}
		
p {
	margin: 0;
}

#scene-4 {
	height: 50vh;
	background: #333;
	color: #fff;
}

a {
	color: #333;
	text-decoration: none;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	transition: all 0.25s ease;
}

a:focus,
a:active,
a:hover,
a.active {
	color: #d07;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-7-22 17:45:15
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */
@-webkit-keyframes color-change-2x {
  0% {
    background: #d07;
  }
  100% {
    background: #a771c1;
  }
}
@keyframes color-change-2x {
  0% {
    background: #d07;
  }
  100% {
    background: #a771c1;
  }
}