@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* ---------- Body ----------*/

body {
	margin: 0;
}

/* ---------- Containers ----------*/

.container {
	padding: 2.5vh calc(.5vw + 10px);
	height: 95vh;
	width: calc(99vw - 20px);
	float: right;
}

.spacer {
	display: block;
	height: 12.5vh;
	min-width: 312px;
	margin-bottom: 1.25vh;
}

.spacer:last-child{
	margin-bottom: 0;
}

.spacer-1 {
	width: 100%;
}

.spacer-2 {
	width: 76.67%;
}

.spacer-3 {
	width: 65.56%;
}

.spacer-4 {
	width: 58.15%;
}

.spacer-5 {
	width: 52.60%;
}

.spacer-6 {
	width: 48.15%;
}

.spacer-7 {
	width: 44.44%;
}

/* ---------- Instructions ----------*/
.instructions {
	position: absolute;
	background-color: #e3e9f8;
	bottom: 2.5vh;
	right: calc(.5vw + 10px);
	width: 30vh;
	height: 8.5vh;
	padding: 2vh;
	opacity: 0;
	color: #060d16;
	font-family: "Montserrat";
	font-weight: 400;
	font-size: 2.5vh;
	line-height: 2.75vh;
	z-index: -100;
	-moz-animation: disapear 10s 1 linear;
	-webkit-animation: disapear 10s 1 linear;
	animation: disapear 10s 1 linear;
}

@keyframes disapear {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes disapear {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes disapear {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* ---------- Blocks ----------*/

.block {
	overflow: hidden;
	height: 12.5vh;
	width: 100%;
	max-width: calc(44vw + 8.89px);
	min-width:312px;
	float: right;
	background-color: #e3e9f8;
}

.block.block-2, .block.block-6 {
	background-color: #060d16;
}

.block.block-4 {
	background-color:  #8b7fe6;
}

.block.block-7 {
	background-color:  #30d0ee;
}

/* ---------- Loader Bar ----------*/

.bar {
	height: 100%;
    width: 100%;
	background-image: linear-gradient(-45deg, #30d0ee 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #30d0ee 50%, #30d0ee 75%, rgba(255, 154, 26, 0) 75%);
	background-image: -webkit-linear-gradient(-45deg, #30d0ee 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #30d0ee 50%, #30d0ee 75%, rgba(255, 154, 26, 0) 75%);
	background-image: -moz-linear-gradient(-45deg, #30d0ee 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #30d0ee 50%, #30d0ee 75%, rgba(255, 154, 26, 0) 75%);
	background-size: calc(20vh + 5vw) calc(20vh + 5vw);
	-moz-animation: move-bar 2s linear infinite;
	-webkit-animation: move-bar 2s linear infinite;
	animation: move-bar 2s linear infinite;
}

/* Animation */

@keyframes move-bar {
    0%  {
		background-position: 0 0;
	}
    100% {
		background-position: calc(10vh + 2.5vw) calc(10vh + 2.5vw);
	}
}

@-webkit-keyframes move-bar {
    0%  {
		background-position: 0 0;
	}
    100% {
		background-position: calc(10vh + 2.5vw) calc(10vh + 2.5vw);
	}
}

@-moz-keyframes move-bar {
    0%  {
		background-position: 0 0;
	}
    100% {
		background-position: calc(10vh + 2.5vw) calc(10vh + 2.5vw);
	}
}

/* ---------- Apogee ----------*/

.apogee-container {
	position: relative;
	padding: 2.25vh;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.apogee-text, .letter-o {
	position: relative;
}

.apogee-text {
	height: 8vh;
	font-family: "Montserrat";
	font-weight: 700;
	line-height: 7vh;
	font-size: 7vh;
	letter-spacing: 4px;
	margin-top: .5vh;
}

.letter-o {
	width: 9vh;
	height:  8vh;
	display: flex;
	margin: 0 3px 0 -2px;
}

.placeholder-o {
	width: 9vh;
	height:  8vh;
}

.outer-o, .spacer-o {
	position: relative;
	overflow: visible;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-moz-transition: all 200ms ease;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
	-moz-animation: move-letter-o 1s ease infinite;
	-webkit-animation: move-letter-o 1s ease infinite;
	animation: move-letter-o 1s ease infinite;
}

.outer-o {
	background: #8b7fe6;
	animation-delay: 0;
}

.spacer-o {
	background: #30d0ee;
	animation-delay: 0.5s;
}

/* Animation */

@keyframes move-letter-o {
  0% {
    width: 0;
    height: 0;
    z-index: 1;
  }
  50% {
    width: 9vh;
    height: 9vh;
    z-index: 1;
  }
  100% {
    display: none;
  }
}

@-webkit-keyframes move-letter-o {
  0% {
    width: 0;
    height: 0;
    z-index: 1;
  }
  50% {
    width: 9vh;
    height: 9vh;
    z-index: 1;
  }
  100% {
    display: none;
  }
}

@-moz-keyframes move-letter-o {
  0% {
    width: 0;
    height: 0;
    z-index: 1;
  }
  50% {
    width: 9vh;
    height: 9vh;
    z-index: 1;
  }
  100% {
    display: none;
  }
}

/* ---------- Sand ----------*/

.sand-container {
	position: relative;
	top: calc(50% - 7vh);
	left: calc(50% - 7vh);
	height: 0;
	width: 0;
	overflow: visable;
}

.sand {
	-moz-animation: rotate-sand 8s ease infinite;
	-webkit-animation: rotate-sand 8s ease infinite;
	animation: rotate-sand 8s ease infinite;
	width: 0px;
	height: 0px;
	border: 7vh solid transparent;
	border-top-color: #e3e9f8;
	border-bottom-color: #8b7fe6;
}

.sand-inside {
	-moz-animation: falling-sand 8s ease-in infinite;
	-webkit-animation: falling-sand 8s ease-in infinite;
	animation: falling-sand 8s ease-in infinite;
	position: relative;
	width: 0px;
	height: 0px;
	border: 7vh solid transparent;
	border-top-color: #8b7fe6;
	border-bottom-color: #e3e9f8;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
  }
  
  .sand-line {
    -moz-animation: dripping-sand 8s ease-in infinite;
	-webkit-animation: dripping-sand 8s ease-in infinite;
	animation: dripping-sand 8s ease-in infinite;
	-moz-transform-origin: center top;
	-webkit-transform-origin: center top;
	transform-origin: center top;
	position: relative;
	left: -.25vh;
	border-left: .5vh dotted #8b7fe6;
	height: 0;
	width: 0;
	top: 0;
}

/* Animation */

@keyframes rotate-sand {
	0% {
		transform: rotate(0deg);
	}
	35% {
		transform: rotate(0deg);
	}
	49% {
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
	50% {
		transform: rotate(180deg);
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	85% {
		transform: rotate(180deg);
	}
	99% {
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	100% {
		transform: rotate(360deg);
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
}

@-webkit-keyframes rotate-sand {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	35% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	49% {
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	85% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	99% {
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
}

@-moz-keyframes rotate-sand {
	0% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	35% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	49% {
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
	50% {
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	85% {
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	99% {
		border-top-color: #8b7fe6;
		border-bottom-color: #e3e9f8;
	}
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
		border-top-color: #e3e9f8;
		border-bottom-color: #8b7fe6;
	}
}

@keyframes falling-sand {
  3% {
	  border-width: 7vh;
  }
  35% {
	  border-width: 0;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
  36% {
	  border-width: 0;
	  border-color: transparent;
  }
  37% {
	  border-width: 7vh;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  53% {
	  border-width: 7vh;
  }
  85% {
	  border-width: 0;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  86% {
	  border-width: 0;
	  border-color: transparent;
  }
  87% {
	  border-width: 7vh;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
}

@-webkit-keyframes falling-sand {
  3% {
	  border-width: 7vh;
  }
  35% {
	  border-width: 0;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
  36% {
	  border-width: 0;
	  border-color: transparent;
  }
  37% {
	  border-width: 7vh;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  53% {
	  border-width: 7vh;
  }
  85% {
	  border-width: 0;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  86% {
	  border-width: 0;
	  border-color: transparent;
  }
  87% {
	  border-width: 7vh;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
}

@-moz-keyframes falling-sand {
  3% {
	  border-width: 7vh;
  }
  35% {
	  border-width: 0;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
  36% {
	  border-width: 0;
	  border-color: transparent;
  }
  37% {
	  border-width: 7vh;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  53% {
	  border-width: 7vh;
  }
  85% {
	  border-width: 0;
	  border-top-color: #e3e9f8;
	  border-bottom-color: #8b7fe6;
  }
  86% {
	  border-width: 0;
	  border-color: transparent;
  }
  87% {
	  border-width: 7vh;
	  border-top-color: #8b7fe6;
	  border-bottom-color: #e3e9f8;
  }
}

@keyframes dripping-sand {
  0% {
	  height: 0;
	  transform: rotate(0deg);
  }
  3% {
    height: 7vh;
  }
  34% {
	  height: 0;
	  transform: rotate(0deg);
  }
  50% {
	  height: 0;
	  transform: rotate(180deg);
  }
  53% {
	  height: 7vh;
  } 
  84% {
	  height: 0;
	  top: 0;
	  transform: rotate(180deg);
  }
}

@-webkit-keyframes dripping-sand {
  0% {
	  height: 0;
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
  }
  3% {
    height: 7vh;
  }
  34% {
	  height: 0;
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
  }
  50% {
	  height: 0;
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
  }
  53% {
	  height: 7vh;
  } 
  84% {
	  height: 0;
	  top: 0;
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
  }
}

@-moz-keyframes dripping-sand {
  0% {
	  height: 0;
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
  }
  3% {
    height: 7vh;
  }
  34% {
	  height: 0;
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
  }
  50% {
	  height: 0;
	  -moz-transform: rotate(180deg);
	  transform: rotate(180deg);
  }
  53% {
	  height: 7vh;
  } 
  84% {
	  height: 0;
	  top: 0;
	  -moz-transform: rotate(180deg);
	  transform: rotate(180deg);
  }
}

/* ---------- Downloading Bar ----------*/

.download-border {
	position: relative;
	width: calc(100% - 6vh);
	height: 6.5vh;
	border: 1vh solid #060d16;
	top: 2vh;
	left: 2vh;
	
}

.download-line-container {
	position: relative;
	height: calc(100% - 2vh);
	width: calc(100% - 2vh);
	top: 1vh;
	left: 1vh;
	overflow: hidden;
	
}

.download-line {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #30d0ee;
	-moz-animation: slide 4s steps(20) infinite;
	-webkit-animation: slide 4s steps(20) infinite;
	animation: slide 4s steps(20) infinite;
}

/* Animation */

@keyframes slide {
	0% {
		left: -100%;
	}
	
	100% {
		left: 100%;
	}
}

@-webkit-keyframes slide {
	0% {
		left: -100%;
	}
	
	100% {
		left: 100%;
	}
}

@-moz-keyframes slide {
	0% {
		left: -100%;
	}
	
	100% {
		left: 100%;
	}
}

/* ---------- Spinner ----------*/

.spinner-container {
	position: relative;
	width: 7vh;
	height: 7vh;
	top: 2.75vh;
	left: calc(50% - 3.5vh);
}

.spinner {
	width: 4vh;
	height: 4vh;
	border: 1.5vh solid #e3e9f8;
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-animation: spin-spinner 4s infinite ease-in-out alternate;
	-webkit-animation: spin-spinner 4s infinite ease-in-out alternate;
	animation: spin-spinner 4s infinite ease-in-out alternate;
}

/* Animation */

@keyframes spin-spinner {
	50% {
		transform: rotate(-390deg);
	}
	100% {
		transform: rotate(30deg);
	}
}

@-webkit-keyframes spin-spinner {
	50% {
		-webkit-transform: rotate(-390deg);
		transform: rotate(-390deg);
	}
	100% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
	}
}

@-moz-keyframes spin-spinner {
	50% {
		-moz-transform: rotate(-390deg);
		transform: rotate(-390deg);
	}
	100% {
		-moz-transform: rotate(30deg);
		transform: rotate(30deg);
	}
}

/* ---------- Bounce ----------*/

.bounce-ground {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 8.5vh;
	margin-top: 2vh;
	border-bottom: 2vh solid #8b7fe6;
	overflow: hidden;
}
.bounce-small, .bounce-large {
	position: absolute;
	background: #e3e9f8;
	border-radius: 100%;
}

.bounce-small {
	height: 2vh;
	width: 2vh;
	-moz-animation: bounce-small-ball 1s ease-out infinite alternate;;
	-webkit-animation: bounce-small-ball 1s ease-out infinite alternate;;
	animation: bounce-small-ball 1s ease-out infinite alternate;;
	-moz-transform: translateY(225px);
	-webkit-transform: translateY(225px);
	transform: translateY(225px);
}

.bounce-large {
	height: 4vh;
	width: 4vh;
	-moz-animation: bounce-large-ball 1s ease-in infinite alternate;
	-webkit-animation: bounce-large-ball 1s ease-in infinite alternate;
	animation: bounce-large-ball 1s ease-in infinite alternate;
}

.bounce-large.ball-1, .bounce-small.ball-1, .bounce-large.ball-5, .bounce-small.ball-5 {
	-moz-animation-delay:  -0.2s;
	-webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.bounce-large.ball-3, .bounce-small.ball-3 {
	-moz-animation-delay: -0.4s;
	-webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.bounce-large.ball-7, .bounce-small.ball-7 {
	-moz-animation-delay: -0.6;
	-webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.bounce-large.ball-2, .bounce-small.ball-2 {
	-moz-animation-delay: -0.8;
	-webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.bounce-large.ball-6, .bounce-small.ball-6 {
	-moz-animation-delay: -1s;
	-webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.bounce-large.ball-1 {
	left: calc(6.25% - 2vh);
}

.bounce-small.ball-1 {
	left: calc(6.25% - 1vh);
}

.bounce-large.ball-2 {
	left: calc(18.75% - 2vh);
}

.bounce-small.ball-2 {
	left: calc(18.75% - 1vh);
}

.bounce-large.ball-3 {
	left: calc(31.25% - 2vh);
}

.bounce-small.ball-3 {
	left: calc(31.25% - 1vh);
}

.bounce-large.ball-4 {
	left: calc(43.75% - 2vh);
}

.bounce-small.ball-4 {
	left: calc(43.75% - 1vh);
}

.bounce-large.ball-5 {
	left: calc(56.25% - 2vh);
}

.bounce-small.ball-5 {
	left: calc(56.25% - 1vh);
}

.bounce-large.ball-6 {
	left: calc(68.75% - 2vh);
}

.bounce-small.ball-6 {
	left: calc(68.75% - 1vh);
}

.bounce-large.ball-7 {
	left: calc(81.25% - 2vh);
}

.bounce-small.ball-7 {
	left: calc(81.25% - 1vh);
}

.bounce-large.ball-8 {
	left: calc(93.25% - 2vh);
}

.bounce-small.ball-8 {
	left: calc(93.25% - 1vh);
}

/* Animation */

@keyframes bounce-large-ball {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(255px);
	}
}

@-webkit-keyframes bounce-large-ball {
	from {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	to {
		-webkit-transform: translateY(255px);
		transform: translateY(255px);
	}
}

@-moz-keyframes bounce-large-ball {
	from {
		-moz-transform: translateY(0px);
		transform: translateY(0px);
	}
	to {
		-moz-transform: translateY(255px);
		transform: translateY(255px);
	}
}

@keyframes bounce-small-ball {
	from {
		transform: translateY(225px);
	}
	to {
		transform: translateY(0px);
	}
}

@-webkit-keyframes bounce-small-ball {
	from {
		-webkit-transform: translateY(225px);
		transform: translateY(225px);
	}
	to {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

@-moz-keyframes bounce-small-ball {
	from {
		-moz-transform: translateY(225px);
		transform: translateY(225px);
	}
	to {
		-moz-transform: translateY(0px);
		transform: translateY(0px);
	}
}

/* ---------- Newtons Cradle ----------*/

.cradle-container {
	position: relative;
	height: 11.5vh;
	width: 21vh;
	top: -3vh;
	left: calc(50% - 10.5vh);
	
}

.cord{
	padding-top:9.5vh;
	width:3vh;
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	float:left;
}

.ball{
	background: #e3e9f8;
	width: 3vh;
	height: 3vh;
	border-radius: 50%;
}

.left-ball-swing {
	-moz-animation: leftBall 0.5s ease-in-out 0s infinite alternate;
	-webkit-animation: leftBall 0.5s ease-in-out 0s infinite alternate;
	animation: leftBall 0.5s ease-in-out 0s infinite alternate;
}
.right-ball-swing {
	-moz-animation: rightBall 0.5s ease-in-out 0s infinite alternate;
	-webkit-animation: rightBall 0.5s ease-in-out 0s infinite alternate;
	animation: rightBall 0.5s ease-in-out 0s infinite alternate;
}

@keyframes leftBall {
	0% {
		transform: rotate(0deg) translateY(0);
	}
	50% {
		transform: rotate(0deg) translateY(0);
	}
	100% {
		transform: rotate(50deg) translateY(-1.5vh);
	}
}

@-webkit-keyframes leftBall {
	0% {
		-webkit-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	50% {
		-webkit-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	100% {
		-webkit-transform: rotate(50deg) translateY(-1.5vh);
		transform: rotate(50deg) translateY(-1.5vh);
	}
}

@-moz-keyframes leftBall {
	0% {
		-moz-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	50% {
		-moz-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	100% {
		-moz-transform: rotate(50deg) translateY(-1.5vh);
		transform: rotate(50deg) translateY(-1.5vh);
	}
}

@keyframes rightBall {
	0% {
		transform: rotate(-50deg) translateY(-1.5vh);
	}
	50% {
		transform: rotate(0deg) translateY(0);
	}
	100% {
		transform: rotate(0deg) translateY(0) translateX(0px);
	}
}

@-webkit-keyframes rightBall {
	0% {
		-webkit-transform: rotate(-50deg) translateY(-1.5vh);
		transform: rotate(-50deg) translateY(-1.5vh);
	}
	50% {
		-webkit-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	100% {
		-webkit-transform: rotate(0deg) translateY(0) translateX(0px);
		transform: rotate(0deg) translateY(0) translateX(0px);
	}
}

@-moz-keyframes rightBall {
	0% {
		-moz-transform: rotate(-50deg) translateY(-1.5vh);
		transform: rotate(-50deg) translateY(-1.5vh);
	}
	50% {
		-moz-transform: rotate(0deg) translateY(0);
		transform: rotate(0deg) translateY(0);
	}
	100% {
		-moz-transform: rotate(0deg) translateY(0) translateX(0px);
		transform: rotate(0deg) translateY(0) translateX(0px);
	}
}