:root {
	/* nonlinear animation curves for phase heights; Derived from outflow calculation of a 2D hourglass */
	--animationTypeDown: cubic-bezier(0.0, 0.0, 1.0, 0.44);
	--animationTypeUp: cubic-bezier(0.0, 0.56, 1.0, 1.00);
}

header {
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	font-family: "DIN Offc Pro", "Segoe UI", Arial, sans-serif;
}

#top {
	background: rgb(175,175,175);
	width: 100%;
	height: 100px;
	margin: 0px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h4 {
	position: absolute;
	bottom: 20px;
	left: 20px;
	margin: 0;
	font-weight: 200;
	opacity: .5;
	font-family: sans-serif;
	color: #000000;
}

h5 {
	position: absolute;
	bottom: 20px;
	right: 20px;
	margin: 0;
	opacity: .25;
}

body {
	background: #fff;
	margin: 0px;
	font-family: "DIN Offc Pro", "Segoe UI", Arial, sans-serif;
}

.content {
  width:100%;
  height:100%;
}

#contentFrame {
   background-color: white;
}


.createform {
  width:  500px;
  margin: auto;
  margin-top: 50px;
  padding: 10px;
  background-color: whitesmoke;

  border-radius:  15px;
  border-style:   solid;
  border-color:   grey;
  border-width:   5px;
}

#pbSpeed {
	visibility: hidden;
}
#pbSlow {
	visibility: hidden;
}

#ourglassContainer {
	width: 475px;
	height: 300px;
	margin-top: -410px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;

	padding: 0px;
	opacity: 0;
	background-color: whitesmoke;

	z-index: -1;
	animation-fill-mode: forwards;
}

@keyframes showOurglassContainer {
	from {opacity: 0; z-index: 10;}
	to {opacity: 100; z-index: 10;}
}


.phaseContainer {
	width: 475px;
	height: 50px;
	margin-top: -465px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;

	font-size: 2em;
	font-weight: bold;
	text-align: center;

	padding: 0px;
	opacity: 0;
	background-color: whitesmoke;
	animation: showPhase;

	z-index: -1;
}
@keyframes showPhase {
   	 0% {opacity:1; z-index: 10;}
	100% {opacity:1; z-index: 10;}
}


.triangle-up {
	position: absolute;
	width: 0;
	height: 0;
	top: 0px;
	left: 0px;

	opacity: 0;

	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 100px solid red;
	transform-origin: 50% 100%;

	animation: scaleUp;
	animation-timing-function: var(--animationTypeUp);
    animation-fill-mode: forwards;

}

@keyframes scaleUp {
	0% {transform: scale(0); opacity:1;}
	100% {opacity:1;}
}


 .triangle-down {
	position: absolute;
	width: 0;
 	height: 0;
 	top: 100px;
 	left: 0px;

	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 100px solid red;
	transform-origin: 50% 100%;

	animation: scaleDown 5s;
	animation-timing-function: var(--animationTypeDown);
	animation-fill-mode: forwards;
}

@keyframes scaleDown {
	0% {}
	100% {transform: scale(0);}
}


.line-down {
	position: absolute;
	height: 0px;
	width: 0px;
	left: 0px;
	top: 0px;

	opacity:0;

	animation: lineDown 20s linear;
	border-left: 1px dotted #ff9999; /* rot */
	/*animation-fill-mode: none;*/
}

@keyframes lineDown {
   	 0% {opacity:1;}
	100% {opacity:1;}
}


.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}