body {
	background-color: black;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: white;
	text-shadow: 2px 2px rgba(51, 64, 70, 0.75);
	font-size: 19px;
}

button {
	border: 3px white solid;
	background-color: rgba(255, 255, 255, 0.25);
	padding: 5px 25px;
	color: white;
	font-weight: bold;
	outline: none;
	margin: 20px;
	cursor: pointer;
	text-shadow: 2px 2px rgba(51, 64, 70, 0.7);
	box-shadow: 0px 0px 18px rgba(255, 255, 255, 0);
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-size: 19px;
}

button:hover {
	box-shadow: 0px 0px 18px rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0.5);
}

button.back, button.next {
	top: 50px;
	position: absolute!important;
	margin: 0;
	padding: 5px 10px;
}

button.back {
	left: 120px;
}

video {
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
}

#frame {
	width: 960px;
	height: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -300px 0 0 -480px;
	overflow: hidden;
	opacity: 0;
	font-weight: normal;
	-webkit-transition: opacity 0.5s ease-out 1s;
	transition: opacity 0.5s ease-out 1s;
}

#frame.show {
	opacity: 1;
}

/******************************* CONTENT STYLES *******************************/
a:link, a:visited {
	color: #334046;
}

a:active, a:hover {
	color: white;
}

h1 {
	text-align: center;
	font-size: 94px;
	margin: 30px;
}

h2 {
	text-align: center;
	font-size: 30px;
	margin: 0 30px;
}

h3 {
	font-style: italic;
	font-family: "OpenSans", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 25px;
	margin: 10px 0;
	text-align: center;
}

.description {
	background-color: rgba(255, 255, 255, 0.65);
	border: 2px solid white;
	color: #334046;
	text-shadow: none;
	border-radius: 5px;
	padding: 10px;
}

.dot {
	width: 8px;
	height: 8px;
	background-color: white;
	border-radius: 50%;
	display: inline-block;
	margin-bottom: 6px;
}

.dot.left {
	margin-right: 10px;
}

.dot.right {
	margin-left: 10px;
}

.error {
	color: white;
	font-style: italic;
	background-color: rgba(255, 0, 0, 0.4);
	padding: 5px 10px;
	border: 2px solid red;
	opacity: 0;
	top: 1000px;
	-webkit-transition: top 0ms linear 0.31s, opacity 0.3s ease-in;
	transition: top 0ms linear 0.31s, opacity 0.3s ease-in;
}

.error.show {
	display: inline-block;
	opacity: 1;
	-webkit-transition: top 0ms linear 0ms, opacity 0.3s ease-out 1ms;
	transition: top 0ms linear 0ms, opacity 0.3s ease-out 1ms;
}

.line {
	width: 100px;
	background-color: white;
	height: 2px;
	display: inline-block;
	margin-bottom: 9px;
}

.subtitle {
	text-align: center;
	font-style: italic;
	width: 65%;
	top: -10px;
	margin: 0 auto;
	font-size: 14px;
	position: relative;
}

#buttonHolder {
	width: 920px;
	height: 560px;
	z-index: 200;
	position: relative;
}

#buttonHolder.dim {
	z-index: 150;
}

#content {
	padding: 20px;
	margin-left: 0px;
	position: absolute;
	top: 0;
	width: 920px;
	height: 560px;
	z-index: 150;
}

#content.showInfo {
	z-index: 150;
}

#content * {
	position: relative;
}

#content h2:first-of-type {
	line-height: 57px;
	margin-top: -20px;
}

#frame.showLeftBar #content {
	width: 820px;
	padding-left: 120px;
	padding-bottom: 0px;
}

/************************** INFORMATION POPUP STYLES **************************/
#info {
	position: absolute;
	width: 820px;
	height: 560px;
	top: 0px;
	right: 0px;
	padding: 20px;
	z-index: 50;
	background-color: rgba(0, 0, 0, 0.45);
}

#info h2 {
	margin-top: -20px;
	position: relative;
	line-height: 57px;
}

#info hr {
	border-color: rgb(238, 238, 238);
	border-style: solid;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	margin: 0 0 0.8em 0;
}

#info img {
	position: absolute;
	top: -125%;
	margin-left: -122px;
	margin-top: -4px;
}

#info.layer {
	z-index: 150;
}

#info .description {
	position: absolute;
	top: 50%;
	left: 20px;
	right: 20px;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	overflow: hidden;
	padding: 0;
}

#info .description .text {
	background-color: rgba(255, 255, 255, 0.65);
	padding: 10px;
	position: relative;
}

#info .description .text h3 {
	font-weight: bold;
}

#info .description .text p {
	margin: 0.8em 0;
}

#info .description #background {
	position: absolute;
	top: -125%;
	margin-left: -122px;
	margin-top: -4px;
}

#info #x {
	position: absolute;
	top: 2px;
	right: 5px;
	cursor: pointer;
}

/*************************** KINETIC CANVAS STYLES ****************************/
#ANIMATION, #SHAPES {
	z-index: 100;
}

#BLUR_BACKGROUND, #HIDDEN_BACKGROUND, #PARALLAX {
	z-index: 0;
}

#BLUR_BACKGROUND, #HIDDEN_BACKGROUND {
	right: 960px;
}

#kineticCanvas {
	position: absolute;
	top: 0;
	right: 0;
	font-family: "Karla", Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
}

/********************* LEFT NAVIGATION BAR STYLES *************************/
button:disabled, button:disabled:hover, #leftBar.dim button:not(#infoLeft) {
	cursor: default;
	background-color: rgba(211, 211, 211, 0.5);
	box-shadow: none;
	border-color: rgba(255, 255, 255, 0.5)!important;
	background-blend-mode: screen;
	color: rgba(255, 255, 255, 0.6);
	text-shadow: none;
}

#frame.showLeftBar #leftBar {
	display: block!important;
}

#leftBar {
	background-color: rgba(255, 255, 255, 0.15);
	width: 100px;
	height: 600px;
	position: absolute;
	top: 0;
	left: -100px;
	z-index: 200;
}

#leftBar.dim {
	z-index: 175;
}

#leftBar button {
	width: 50px;
	height:	50px;
	margin: 40px 25px 2px;
	padding: 7px;
	border-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 26px 26px;
	border-color: rgba(255, 255, 255, 0.8);
}

#leftBar.dim button:not(#infoLeft) + .buttonText, #leftBar button:disabled + .buttonText {
	color: rgba(255, 255, 255, 0.6);
}

#leftBar button#collegeLeft.showShape {
	background-image: url("../img/shapes/collegeOutlineLeft.png");
}

#leftBar button#majorLeft.showShape  {
	background-image: url("../img/shapes/majorOutlineLeft.png");
}

#leftBar button#immersionLeft.showShape  {
	background-image: url("../img/shapes/immersionOutlineLeft.png");
}

#leftBar button#infoLeft {
	margin-top: 100px;
	background-image: url("../img/shapes/information.png");
}

#leftBar .buttonText {
	display: inline-block;
	text-align: center;
	width: 100%;
	font-size: 16px;
}

#leftBar #logo {
	width: 100%;
	height: 57px;
	background-color: #F36E21;
}

#leftBar #logo img {
	width: 94px;
	margin: 0 3px;
}

/****************************** CSS3 Animations  ******************************/
button {
	-webkit-transition: box-shadow 0.2s, background-color 0.2s;
	transition: box-shadow 0.2s, background-color 0.2s;
}

button.next {
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: border-color, background-color, background-blend-mode;
	-webkit-transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	transition-property: border-color, background-color, background-blend-mode;
	transition-duration: 0.5s;
}

#content, #buttonHolder, #SHAPES {
	-ms-transition: opacity 0.6s ease-in, -ms-transform 0.6s ease-in;
	-webkit-transition: opacity 0.6s ease-in, -webkit-transform 0.6s ease-in;
	transition: opacity 0.6s ease-in, transform 0.6s ease-in;
}

#content.doneAnim, #buttonHolder.doneAnim {
	height: auto;
}

#content.farOff, #buttonHolder.farOff, #SHAPES.farOff {
	-ms-transform: scale(0.85);
	-webkit-transform: scale(0.85);
	transform: scale(0.85);
	opacity: 0;
}

#content.near, #buttonHolder.near, #SHAPES.near {
	-ms-transform: scale(1.25);
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
	opacity: 0;
}

#content.show, #buttonHolder.show, #SHAPES.show {
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

#content.reset, #buttonHolder.reset, #SHAPES.reset {
	-webkit-transition: 0s!important;
	transition: 0s!important;
}

#content.waitLeftBar, #buttonHolder.waitLeftBar, #SHAPES.waitLeftBar {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

#leftBar {
	-webkit-transition: left 0.6s ease-in;
	transition: left 0.6s ease-in;
}

#frame.showLeftBar #leftBar {
	left: 0px;
}

#info {
	-webkit-transition: opacity 1s ease-in;
	transition: opacity 1s ease-in;
	opacity: 0;
}

#info.show {
	opacity: 1;
}

#leftBar.showInfo button:not(#infoLeft) {
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: border-color, background-color, background-blend-mode;
	-webkit-transition-duration: 1s;
	transition-timing-function: ease-in-out;
	transition-property: border-color, background-color, background-blend-mode;
	transition-duration: 1s;
}