/* TEMP FOR AUDIO BUTTON */
.end-audio {
	position: absolute;
	right: 0;
	top: 0;
}

canvas {
	z-index: 999;
}

html, body {
	height: 100%;
}

body {
  margin: auto;
  font-family: Inconsolata, monospace;
  color: #b0dedf;
  background: #111;
  word-wrap: break-word;
  background-color: black;
  background-image: radial-gradient(
    rgba(0, 30, 0, 0.75), black 120%
  );
  height: 100vh;
  text-shadow: 0 0 3px #C8C8C8;
}

/*Scan lines*/
body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

button {
	cursor: pointer;
	color: #e4ffeb;
	background: #129637;
	font-weight: bold;
	border: none;
	text-transform: uppercase;
}

.left {
	float: left;
}

.right {
	float: right;
}

.letsgo {
	text-align: center;
	margin-top: 250px;
}

.letsgo button {
	padding: 5px 20px;
	font-size: 1.25em;
}

.trans-button {
	text-align: center;
}

.letsgo button, .trans-button button {
    background: #00a100;
    border: none;
    color: #aeffae;
}

.container {
	display: flex;
	flex-direction: column;
 	height: 100%;
	min-height: 100%;
}

.container > div {
	display: flex;
}

.section-title {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0;	
}

.stage, .controls, .transmission {
	opacity: 0;
}

.stage {
	background: #000;
	background-size: cover;
	flex-basis: auto;
	flex: 1.5;
	position: relative;
}

.stage-overlay {
	background: url("assets/images/monitor-static.gif") bottom center no-repeat fixed;
	background-size: cover;
	position: absolute;
	opacity: 0.5;
	width: 100%;
	height: 100%;
}

.stage p {
	color: white;
	background: rgba(191,0,0,0.5);
	text-shadow: none;
	font-weight: bold;
}

.stage p, .trans-title {

	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 5px;
	margin: 0;
	z-index: 999;

}

#stage-mission {
	width: 100%;
}

.stage-overlay img {
	margin: 45px 25px;
}

.laundry-video, .act-video {
	position: absolute;
}

.controls-container {
	flex: 1;
	flex-direction: column;
}

.controls {
	background: #1f1f1f;
	flex: 2;
	position: relative;
}

.controls-descr {
	color: green;
	text-align: center;
	margin: 20px 0 0 0;
	text-shadow: none;	
	position: relative;
}

.controls-descr p {
	margin: 0;
}

.roundabout {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.roundcell {
	width: 100px;
	height: 100px;
}

.mapReply {
	color: white;
	opacity: 0;
	padding: 10px;
	text-shadow: none;
	margin: 10px 0 0 0;
}

.controls-buttons-container {
	text-align: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 10px;
}

.controls-buttons-container button {
    flex: 1;
    padding: 10px 0;
    margin: 10px 20px;
    flex-basis: 35%
}

#act-email-form {
	display: none;
	text-align: center;
	margin-top: 20px;
}

#act-email-form label {
    padding: 0 8px;
}

#act-email-form input {
	margin-top: 10px;
}

.emailSubmit {
	background: green;
	border: none;
	padding: 10px 20px;
	color: white;
}

.has-error {
	background: red;
}

.help-block {
	color: #ff5a5a;
	width: 100%;
	text-shadow: none;
	font-weight: bold;
	display: block;
}

/* Intention/Influence Controller  */

.int-container {
	display: none;
	flex-direction: row;
	flex-wrap: none;
	margin: 10px;
	position: absolute;
	bottom: 0;
}

.int-top-container {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: no-wrap;
	height: 100%;
	margin: 20px 10px 0;
}

.int-choice {
	display: flex;
	flex: 1;
	/* max-width:35%; */
}

.int-choice img {
    max-width: 100%;
}

.int-box-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 2;
	font-size: 8px;
	margin: 10px;
}

.int-code {
    display: flex;
	top: 15px;
	padding: 0;
	position: absolute;    
}

.int-code p {

}

.int-boxes {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	/* margin-top: -20px; */
	margin-top: 10px;
}

.int-box {
	display: flex;
	flex: 1 0 13%;
	background: #46c268;
	/* 	max-width: 50%;	 */
	margin: 3px;
	font-size: 1.5em;
	height: 30%;
	font-color: #c8ffd7;
	justify-content:center;
	width: 100%;
	border-left: #46c268 4px solid;
	border-right: #46c268 4px solid;
	border-bottom: #46c268 6px solid;
	box-sizing: border-box;
/* 	height: 30%; */
	
}

.box-selected {
	background: #c8ffd7;
	color: #46c268;
	
	
}

.int-box span {
	height: 100%;
    text-align: center;
    vertical-align: middle;

/*     line-height: 100%; */
    
/*     line-height: 1.5; */
}

.int-psi, .int-phi {
    display: flex;
    flex: 1;
    border-left: 2px #2f7442 solid;
    border-right: 2px #2f7442 solid;
    border-bottom: 2px #2f7442 solid;
    margin: 15px 10px;
    position: relative;
    line-height: 0.25em;
    font-size: 1em;
}

.int-psi span, .int-phi span {
	margin: 0 auto;
}

.int-bar, .inf-bar {
    background: #46c268;
    width: 50%;
    height: 70%;
    position: absolute;
}

.int-bottom {
	display: flex;
	flex: 1;
/* 	background: url(assets/images/intcon.gif); */
	width: 100%;
}

.int-bottom img {
	width: 100%;
}

.transmission {
	flex: 1;
	position: relative;
  background-color: black;
  background-image: radial-gradient(
    rgba(0, 30, 0, 0.75), black 120%
  );
}

.trans-title {
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	position: absolute;
}

.trans-incoming {
	display: none;
	animation: blinking 1s infinite;
	color: #00a100;
}

.trans-button {
	display: none;
	animation: blinking 1s infinite;
    position: relative;
}

.trans-button button {
	padding: 1em 2.5em;
	bottom: 20px;
	margin-top: 35px;
}

.gl {
	text-align: center;
	margin-top: 50px;
}

/********** ANIMATIONS */
@keyframes blinking {
	from {opacity: 1;}
	to {opacity: 0.5;}
}

@keyframes mapcheck {
	from {opacity: 1;}
	to {opacity: 0;}
}

/********** MOBILE */

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) {

    .container {
    	flex-direction: row;
    }

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
    .container {
    	flex-direction: column;
    }

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .container {
    	flex-direction: row;
    }

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    .container {
    	flex-direction: row;
    }

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 480px) {
  
    .container {
    	flex-direction: column;
    }

    .laundry-video {
        margin-left: -200px;
    }
  
}