/* font imports */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

@font-face {
	font-family: the-soul-of-vodka;
	src: url(../fonts/the-soul-of-vodka.ttf);
	font-weight: regular;
}


/* General
--
Common to both teacher portal and the game. keep this section clean

*/

* {
  margin: 0;
  padding: 0;
}



html {
  font-size: 62.5%; /* resets font-size 1em = 10px on default browser settings */
  font-family: 'Open Sans', sans-serif;
	background: black;
}

h1, h2, h3 {
	font-family: the-soul-of-vodka;
	color: #fff;
	text-transform: uppercase;
	font-weight: normal;
}
  h1 {font-size: 3.6rem;} /* rems for scaling base font size and the design will stay the same so if browser scaling is applied everything will look consistent */
  h2 {font-size: 2.8rem;}
  h3 {font-size: 2.4rem;}


h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
  color: #fff;
}
	h4 {font-size: 2.0rem;}
	h5 {font-size: 1.8rem;}
	h6 {font-size: 1.6rem;}

div, p, input, span, a {
  font-size: 1.6rem;
  font-family: 'Open Sans', sans-serif;
  color: #434343;
}

p.bold {
	font-weight: bold;
}

a {
  color: #fff;
  font-weight: 300;
  text-decoration: underline;
}

a:hover {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}


/* Forms */

.form-group{
	display: block;
	margin-top: 1.2rem;
	position: relative;
	font-size: 1.4em;
}

input[type=text], input[type=password], input[type=email] {
	border: none;
	background-color: transparent;
}

/* input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
	outline: none;
	border: solid 1px #F5540E !important;
} */

label {
  font-weight: 600;
  color: #434343;
  margin-bottom: 0.4em;
  display: inline;
	margin-right: 1rem;
}



/* input[type=text],
input[type=password],
input[type=email] {
	width: 100%;
	height: 4rem;
  border-radius: 0.3rem;
	box-sizing: border-box;
	background: rgba(234,230,215,0.67);
	border: solid 1px rgba(234,230,215,1);
	padding: 0.8em 1em;
	transition: all 300ms ease;
} */



/* CLIENT SIDE VALIDATION */

/* input[type=text].has-error,
input[type=password].has-error,
input[type=email].has-error {
	background: rgba(208, 2, 27, 0.15);
	border: solid 1px rgba(208, 2, 27, 0.3);
} */

.has-error:after {
  display: block;
  content: "";
  position: absolute;
	background: #E28216;
}

.help-block {
	display:flex;
	height: auto;
	overflow: hidden;
	margin-top: 0.2rem;
}

.help-block.ng-inactive{
	display:none;
}


.help-block p {
	font-size: 1.4rem !important;
	color: #D0021B !important;
}

.help-block img{
	display: block;
	width: 1.4rem;
	height: 1.4rem;
	display: inline;
	vertical-align: baseline;
	margin-top: 0.3rem;
	margin-right: 0.6rem;
}

.validation-component {
	display: flex;
	color: #D0021B;
	font-size: 1.4rem;
	padding: 0.8rem;
	border-radius: 0.2em;
	background: rgb(249, 218, 222);
	border: solid 1px #d0021b;
	opacity: 1;

}

.validation-component[class*="-remove"] {
  transition: all 0.5s ease;
  opacity: 0;
  transform: translate(-50%, -2rem);
}


.validation-component img{
	width: 1.4rem;
	height: 1.4rem;
	display: inline;
	vertical-align: middle;
	margin-right: 1rem;
	margin-top: 0.4rem;
}


.unityContainer {
	min-width: 1072px;
}
canvas#canvas {
	background: black; /* this sets the loading color of unity games background */
}


.flex-container{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: center;
	align-items: flex-start;
	min-width: 1072px;
	max-width: 1440px;
	margin: auto;
	height: 100%;
}



#intro-video {
  width: 100%;
  height: 100%;
  position: absolute;
	background-color: black;
}

#introVideo {
  width: 100%;
  height: 100%;
  position: absolute;
}

.button-bar{
	right: 2.4rem;
	top: 1.2rem;
	position: absolute;
}

#skip-video {

}

#playFS {

}


button.ng-hide {
	opacity: 0;
	transform: translateY(-2rem);
}
button.ng-hide-add,
button.ng-hide-remove {
  transition: all linear 0.2s;
}


.loader  {
	display: block;
	box-sizing:  border-box;
	position: absolute;
	color: white;
	font-size: 1.2rem;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);
	width: 24.5rem;
	height: 5.9rem;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
	z-index: 10;
}

.loader span {
	text-align: center;
	font-size: 1.4rem;
	display: block;
	color:white;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);

}
.loader span.load-progress {
	font-family: 'the-soul-of-vodka';
	margin-top: 0.4rem;
	font-size: 2rem;
	display: block;
	color:white;
	font-weight: bold;
}

.progress-bar {
	position: absolute;
	z-index: -1;
	background-image: url(../images/loader-empty.png);
	background-size: 24.5rem 5.9rem;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.progress-bar-load {
	position: absolute;
	left: 5.5rem;
	top:0.8rem;
	right: 5.5rem;
	bottom:0.8rem;
	background-image: linear-gradient(-180deg, #FAD961 0%, #FAC353 20%, #FFF1D6 30%, #F9B44A 34%, #F76B1C 100%);
	mix-blend-mode: hard-light;
	z-index:  -1;
}

#progressBarContainer-unity-load{
	left: 2.4rem;
	top: 0.4rem;
	/* transform: translate(2rem,0); */
	transition: all ease 0.5s;

}
#progressBarContainer-unity-load.ng-hide {
	transform: translate(0,-10rem);
}

#progressBarContainer-unity-load.ng-hide-add,
#progressBarContainer-unity-load.ng-hide-remove {
}



/* GRID LAYOUT
--
12 column grid layout wrapper - apply this to any layout, this is shared by both the game and teacher portal and works responsively

*/


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1.6em;
  grid-row-gap: 1.6em;
	min-width: 1072px;
	max-width: 1440px;
	margin: auto;
	height: 100%;
	grid-template-rows: min-content;
}

/* Grid items
--
The reason why we’re using a backslash \ in the class names .width-2\/12 is because the forward slash / needs to be escaped – you can use this class as <div class="width-2/12"> in the HTML
--
*/

.width-1\/12 {
  grid-column: span 1;
}

.width-2\/12 {
  grid-column: span 2;
}

.width-3\/12 {
  grid-column: span 3;
}

.width-4\/12 {
  grid-column: span 4;
}

.width-5\/12 {
  grid-column: span 5;
}

.width-6\/12 {
  grid-column: span 6;
}

.width-7\/12 {
  grid-column: span 7;
}

.width-8\/12 {
  grid-column: span 8;
}

.width-9\/12 {
  grid-column: span 9;
}

.width-10\/12 {
  grid-column: span 10;
}

.width-11\/12 {
  grid-column: span 11;
}

.width-12\/12 {
  grid-column: span 12;
}

/* Resposive Grid items
--
To create responsive grid items, we’re adding width classes wrapped in media queries. Again, the backslash \ before the @ is used to escape the @ sign – you can use those CSS classes inside your HTML like so: <div class="width-2/12@m">. The logic behind the @m suffix is to read it like: this item spans across 2 of a total of 12 columns at the medium breakpoint.

*/

/* medium device size */
@media (min-width: 48em) {

  .width-4\/12\@m {
    grid-column: span 6;
  }

  .width-6\/12\@m {
    grid-column: span 6;
  }

  .width-12\/12\@m {
    grid-column: span 12;
  }

}

#canvas, #unityContainer.clear {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}


#overlayDiv {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
}

.text-center {
	justify-content: center;
  }

.overlay::before {
	position: fixed;
	content: " ";
	display: block;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#leftButtons {
    position: absolute;
    z-index: 100;
    pointer-events: initial;
}

#rightButtons {
    position: absolute;
    right: 80px;
    top: 1.6rem;
    pointer-events: initial;
}



/* MODALS */

.modal {
  background: rgba(0,0,0,0.8);
  position: fixed;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  JUSTIFY-CONTENT: CENTER;
}

.modal-content {
	width: 48rem;
  z-index: 4;
  position: relative;
  padding: 9rem 5rem 8rem;
  box-sizing: border-box;
  text-align: center;
}


.modal.ng-hide {
  opacity: 0;
}

.modal.ng-hide-add,
.modal.ng-hide-remove {
  transition: all linear 0.2s;
}

.modal.ng-hide .modal-content{
  opacity: 0;
  transform: translateY(-2rem);
}

.modal.ng-hide-add .modal-content,
.modal.ng-hide-remove .modal-content {
  transition: all linear 0.2s;
}

.modal-buttons {
	display: inline-flex;
}

.modal button {
  margin:2.4rem 1rem 0;
}

.modal p,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6 {
  color: #434343 !important;
}

/* Realm header */

.realm-header {
	position:  absolute;
	background-image: url(../images/realm-header.png);
	background-size: contain;
	background-repeat: no-repeat;
	left: 50%;
	transform: translateX(-50%);
	width: 62.4rem;
	height: 10.4rem;
	margin: auto;
	color: white;
	text-transform: uppercase;
	z-index: 100;
	top: -400px;
	padding: 1rem 16.8rem;
	box-sizing:  border-box;
	transition: all 0.5s ease;
}

.realm-header #header-icon {
	background-image:;
	background-repeat: no-repeat;
	background-size: contain;
	width: 48px;
	height: 48px;
	top: 1.2rem;
	left: 8.8rem;
	position: absolute;
	/* transform: translateX(-50%); */
}


.realm-header h1 {
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.50);
  text-transform: uppercase;
  text-align: center;
  /* line-height: 3.2rem; */
  MARGIN-BOTTOM:  -1REM;
}
.realm-header h6 {
	color: white;
	text-align: center;
	text-transform: none;
	opacity: 0.7;
	font-weight: 400;
}

.header-on {
	transform: translate(-50%, 400px);
}

.background-blur {
  filter: blur(30px);
}



/* ILLUSTRATION ELEMENTS
--
Used to give the look and feel of science island,
--
*/

/* Resposive elements for general use  */

.wood {
  border-radius: 8px;
  box-shadow: inset 0px 4px 4px rgba(117, 100, 76, 0.25),
              inset 0px -2px 4px rgba(0, 0, 0, 0.5),
              inset 0px -20px 50px rgba(0, 0, 0, 0.5);
  background: #5F2D28 url(../images/backgrounds/seamless-wood.jpg) repeat left top;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}


.torn-page {
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3))
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
  ;
	background-image:url(../images/backgrounds/seamless-paper.jpg);
		background-repeat:repeat-y;
		background-size:100%;
	border-image: url(../images/backgrounds/9-slice-torn-page.png) 49% round;
	-webkit-border-image: url(../images/backgrounds/9-slice-torn-page.png) 49% round;
		border-image-width: 36PX;
		border-image-outset: 3PX;
}

.vacuum-tubes{
	position: absolute;
	z-index: -1;
	height: 25rem;
}

.vacuum-tube{
	background: no-repeat url(../images/illustration/vacuum-tube.png);
	height: 2.6rem;
	width: 21.7rem;
	background-size: contain;
	position: absolute;
	display: block;

}


/* ANIMATIONS */

/* Animation for swaping states  */

#overlay-content {
	position: absolute;
	width: 100%;
	overflow-x: hidden;
	padding: 5rem 0;
}

body {
	overflow-x: hidden;
	background-color: #000;
}

#overlay-content.ng-enter { /* start 'enter' transition on main view */
    transition: .5s ease;
    opacity: 0;
    transform: translate(0%, 5%);

}
#overlay-content.ng-enter-active { /* end 'enter' transition on main view */
    opacity: 1;
    transform: translate(0%, 0%);
}

#overlay-content.ng-leave { /* start 'leave' transition on main view */
    opacity: 1;
    transition: all .5s ease;
    transform: translate(0%, 0%);
}
#overlay-content.ng-leave-active { /* end 'leave' transition on main view */
    opacity: 0;
		transition: all 0.5s ease;
    transform: translate(0%, 5%);
}


/* SCROLLBAR STYLING */

/* webkit broswers, safari, chrome, opera  */


::-webkit-scrollbar {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #666;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999;
}
::-webkit-scrollbar-thumb:active {
  background: #666;
}
::-webkit-scrollbar-track {
  background: #333;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #333;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: #333;
}

.prevent-scroll {
	overflow: hidden;
}

@keyframes tut-highlight {
    0%   {filter: drop-shadow(0 0 5px #0085ff);}
    100%  {filter: drop-shadow(0 0 0.75rem #0085ff);transform:scale(1.2);}
}

@keyframes arrow-bob {
    0%   {transform:translate(1rem, 1rem);}
    100%  {transform:translate(3rem, 3rem);}
}

.display {
	display: block !important;
	opacity: 1;
}

#success-anim {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.5);
	transition: background-color 0.2s ease;
}

.scale-down {
	transform: scale(0,0);
}