@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|VT323|Roboto:400,500|Ubuntu+Mono');

html,body{
	height: 100%;
}

body {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	background-color: #020202;
}


/* GENERAL CLASSES */
.abs{
	position: absolute !important;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.pointer{
	cursor: pointer;
}

.arrow{
	cursor: default;
}

.grey-out{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 5;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 1;
	transition: all 700ms linear;
}

.untangle .grey-out{
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.grey-out.login{
	background-color: rgba(7, 24, 41, 0.5);
} 

#stage {
	width: 100%;
	height: 100%;
	/*max-width:1920px;
	max-height: 1080px;
	min-width: 1260px;
	min-height: 600px;*/
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-size: cover;
	overflow: hidden;
	background-position: 50% 50%;
}

#modal{
	display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}

.modal-content{
	background-color: #fefefe;
    margin: 4% auto;
    padding: 20px 25px;
    border: 1px solid #888;
    width: 50%;
    max-width: 650px;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	color: #222222;	
}

.modal-content h1{
	margin-top: 0;
}

.modal-content img{
	width: 100%;
	max-width: 400px;
}

.modal-content p{
	text-align: justify;
}

.modal-content p:last-of-type{
	margin-bottom: 2px;
}

/* The Close Button */
.modal-content .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-content .close:hover,
.modal-content .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content img{
	display: block;
    margin: 0 auto 40px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* ENDING */

.vignette {
  	box-shadow: 0 0 200px 100px rgba(0,0,0,1) inset;
  	z-index: 10;
  	width: 100vw;
  	height: 100vh;
  	position: absolute;
}

.ending{
	background-color: black;
}

.ending #index{
	padding: 0;
}

.ending > div > span{
	height: 100%;
	background-size: cover;
	background-position: center center;
	width: 100%;
	opacity: 0;
	transition: opacity 5s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transform: scale(1.05) translateY(-15px);
}

.ending > div > span.active{
	opacity: 1;
	transform: scale(1);
}

.ending button{
	z-index: 11; 
	bottom: 9.69%;
	display: none;
    border-width: 3px;
    border-color: #3e3e3e;
    border-style: solid;
    background-color: #2d2d2d;
    width: 152px;
    height: 30px;
    color: #b9b9b9;
    font-family: inherit;
    font-size: 0.75em;
    outline: none;
    -webkit-transition: color 800ms ease, border-color 800ms ease;
    -ms-transition: color 800ms ease, border-color 800ms ease;
    transition: color 800ms ease, border-color 800ms ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.ending button:hover{
	color: white;
	border-color: #6b6b6b;
}

.ending p:last-of-type {
	bottom: 16%;
	color: grey;
	font-size: 0.9em;
	z-index: 12;
	margin: 0;
	text-align: center;
	display: none;
}

.ending p:first-of-type {
	bottom: 25px;
	left: 25px;
	color: grey;
	font-size: 0.8em;
	z-index: 12;
	margin: 0;
	text-align: left;
}

.ending h1{
	top: 30px;
	color: #616161;
	z-index: 12;
	font-weight: 300;
	font-size: 1.3em;
}

.police-lights{
	z-index: 10;
  	width: 100vw;
  	height: 100vh;
  	position: absolute;
  	animation: police 800ms infinite;
  	background: linear-gradient(270deg, #940a0a, #0a3b94);
	background-size: 400% 400%;
	opacity: 0.2;
	-webkit-animation: police 2.5s ease infinite;
	-moz-animation: police 2.5s ease infinite;
	animation: police 2.5s ease infinite;
}

@-webkit-keyframes police {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes police {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes police { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.hidden{
	display: none;
	opacity: 0;
}

/* INDEX */
#stage.index{
	background-color: #111111;
	/*color: #848484;*/
	color: white;
}

#index{
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 25px;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	-webkit-backdrop-filter: blur(0.5px);
	backdrop-filter: blur(0.5px);
}

[id*="slide"] {
	display: none;
	zoom: 130%;
}

[id*="slide"] h1{
	font-weight: 400;
	opacity: 0.5;
	font-size: 1em;
	padding-bottom: 18px;
}

[id*="slide"] button{
	float: right;
    border-width: 3px;
    border-color: #3e3e3e;
    border-style: solid;
    background-color: #2d2d2d;
    width: 90px;
    height: 30px;
    color: #848484;
    font-family: inherit;
    font-size: 0.8em;
    outline: none;
  	-webkit-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    transition: all 800ms ease;
}

[id*="slide"] button:hover{
	color: white;
	border-color: #6b6b6b;
}

#slide1 {
	zoom: 100%;
	width: calc(80% - 50px);
	text-align: center;
	position: absolute;
}

#slide1 h1{
	font-size: 2em;
	padding: 0;
}

#slide1 img{
	width: 100px;
	padding-bottom: 15px;
	opacity: 0.5;
}

#slide1 img:first-of-type{
	padding-right: 40px;
}

#slide2 span{
	font-size: 0.65em;
	color: #545454;
	display: inline-block;
}

#slide3, #slide4{
	width: 550px
}

[id*="slide"] .line{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin-bottom: 55px;
	opacity: 0;
}

[id*="slide"] .line:last-of-type{
	margin-bottom: 0;
}

[id*="slide"] .line h1{
	font-size: 1em;
    padding: 0 15px;
}

[id*="slide"] .line img{
	width: 80px;
	float: left;
}

[id*="slide"] .line.active{
	opacity: 1;
	transform: scale(1.2);
	color: #ff1313;
	transition: all 10s ease-out;
}

#particles-js {
    z-index: -1;
    height: 100vh;
    width: 100vw;
}

#vol-setup{
	width: 400px;
}

#skip{
	bottom: 25px;
	right: 25px;
	font-size: 80%;
	color: grey;
	transition: all 300ms linear;
	text-decoration: none;
	opacity: 0.5;
}

#skip:hover{
	opacity: 0.8;
}

.space-below{
	margin-bottom: 6px;
}

.space-below strong{
	color: #dadada;
}

/* INTRO */
#intro, #references{
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 25px;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	opacity: 0;
}

#stage.intro{
	background-image: url('assets/images/grain.gif');
	background-repeat: repeat;
	background-size: 100px 100px;
	font-family: 'Ubuntu Mono', monospace;
}

#boot-sequence{
	top: 30px;
	left: 40px;
	color: #36d018;
	width: 40%;
	font-size: 1em;
	z-index: 10;
}

#boot-sequence .pre-written{
	line-height: 22px;
	white-space: pre;
	display: none;
}

#boot-sequence .pre-written.active{
	display: block;
}

#header{
	text-align: center;
	width: calc(75% - 50px);
}

#show-logo{
	width: 100%;
}

#subtitle{
	color: #e9362d;
	margin-top: 20px;
	margin-bottom: 30px;
}

#playButton{
  	border-width: 5px;
  	border-color: #6a1e1e;
  	border-style: solid;
  	background-color: #1f0808;
  	width: 200px;
  	height: 54px;
  	margin: 0 auto;
  	color: #e90f0d;
  	font-family: inherit;
  	font-size: 1.2em;
  	outline: none;
  	-webkit-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    transition: all 250ms ease;
    opacity: 0;
}

#playButton:hover{
	background-color: #8e2a2a;
	font-size: 1.3em;
	color: #fff; 
}

.flare{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.2;
	filter: grayscale(0.8);
}

.footer{
	bottom: 10px;
	color: #7c7c7c;
	font-size: 0.8em;
	width: calc(100% - 50px);
	z-index: 10;
}

.footer p{
	display: inline-block;
}

.footer p:nth-of-type(2n){
	float: right;
}

.footer a{
	color: inherit;
	text-decoration: none;
}

.footer a:hover{
	color: #cacaca;
}

/* REFERENCES */
#references{
	opacity: 1;
	font-size: 80%;
	overflow-y: scroll;
	color: grey;
	text-transform: lowercase;
	font-weight: 300;
	padding-top: 60px;
    align-items: flex-start;
}

#references .left{
	text-align: left;
    width: 90%;
    margin: 0 auto;
}

#references img{
	width: 300px;
}

#references h1{
	font-size: 120%;
	color: #4977e8;
}

#references h2{
	font-size: 100%;
	color: #23bb1c;
}

#references ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: 20px;
	display: inline-block;
}

#references h2 + ul {
	width: calc(60% - 100px);
	margin-right: 100px; 
}

#references ul li{
	margin-bottom: 10px;
}

#references ul li::before{
	content: '>';
	margin-right: 10px;
}

#references ul li a{
	text-decoration: none;
	color: inherit;
	transition: all 200ms linear;
}

#references ul li a:hover{
	color: #dcdcdc;
}

/* LOGIN SCREEN */
#login-overlay{
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/images/grain.gif');
	background-repeat: repeat;
	background-size: 100px 100px;
	z-index: 110;
}

#login{
	z-index: 15;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

#login > div{
	width: 200px;
	margin-bottom: 15px;
}

#other-user{
	border-radius: 50%;
	display: block;
	margin: 0 auto 20px;
	width: 100%;
}

#login-bar{
	display: flex;
}

#login input{
	width: calc(100% - 2*10px - 32px); /*Width minus padding aand border*/
    background-color: white;
    height: 13px;
    border: 2px solid #4d7796;
    border-right: none;
    padding: 8px;
    color: #585858;
    font-family: 'Open Sans', sans-serif;
}

#login-submit{
	background-image: url('assets/images/icons/back-arrow.svg');
	background-repeat: no-repeat;
	background-size: 70%;
    background-position: center;
    /*To spin back arrow around */
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
	background-color: #336891;
	border: 2px solid #4d7796;
	border-right: none;
	width: 32px;
	height: 29px;
	display: inline-block;
	transition: all 350ms cubic-bezier(.21,.61,.35,1);
}

#login-submit:focus {
    outline-offset: -2px;
    outline: -webkit-focus-ring-color auto 5px;
    background-color: #1e4b6d;
}

#login-submit:hover {
	background-color: #1e4b6d;
}

/* DEKSTOP*/
.default-bg{
	background-image: url('assets/images/wallpapers/ecorp-default.jpg');
	background-position: 90% 50% !important; 
}

#stage.fsoc{
	background-image: url('assets/images/wallpapers/fsociety.jpg');
}

#desktop{
	overflow: hidden;
	top: -10px;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(100% - 14px);
}

/* ICONS */
.desktop-icon{
	z-index: 1;
	font-size: .7em;
	color: white;
	line-height: 1.3;
	padding: 6px 1px 6px;
	text-align: center;
	text-shadow: #000 0 1px 2px;
	width: 88px;
	margin: 25px;
}

.desktop-icon img{
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 5px;
	-webkit-transition: background-color 250ms ease;
    -ms-transition: background-color 250ms ease;
    transition: background-color 250ms ease; 
}

.desktop-icon.active{
	border-color: grey;
	border-width: 1px; 
	border-style: dotted;
	background-color: rgba(24, 96, 160, 0.5);
	padding: 5px 0px 5px; /* To offset extra pixel from border */
}

.fsoc .desktop-icon.active{
	background-color: rgba(216, 216, 216, 0.2);
}

#recycle-bin{
	top: calc(0*120px);
	left:0;
}

#e-net{
	top: calc(1*120px);
	left:0;
}

#e-mail{
	top: calc(2*120px);
	left:0;
}

#docs{
	top: calc(3*120px);
	left:0;
}

#personalise{
	top: calc(4*120px);
	left:0;
}

#snake{
	top: calc(0*120px);
	left: calc(1*115px);
}

/* FSOC ICONS */
#terminal{
	top: calc(0*120px);
	left:0;
}

#fsoc-docs{
	top: calc(1*120px);
	left:0;
}


/* TASKBAR */
#taskbar{
	width: 100%;
	height: 40px;
	background-color: #101010;
	z-index: 100;
	position: absolute;
	bottom: 0;
}

#start{
	bottom: 0;
	left: 0;
	width: 48px;
	height: 40px;
	background-image: url("assets/images/icons/ecorp.svg");
	background-repeat: no-repeat;
	background-size: 22px 20px;
	background-position: center center;
	-webkit-transition: background-color 250ms ease;
    -ms-transition: background-color 250ms ease;
    transition: background-color 250ms ease; 
}

.fsoc #start{
	background-image: url("assets/images/icons/blume.svg");
	background-size: 25px 25px;
}

#start.active{
	background-color: rgba(24, 96, 160, 0.5);
}

#start:hover{
	background-color: rgba(24, 96, 160, 0.5);
}

.fsoc #start.active{
	background-color: rgba(216, 216, 216, 0.5);
}

.fsoc #start:hover{
	background-color: rgba(216, 216, 216, 0.5);
}

#start-menu{
	bottom: -325px;
	height: 325px;
	width: 391.12px;
	z-index: 90;
	background-color: rgba(28,28,28,0.75);
	-webkit-backdrop-filter: blur(3.5px);
	backdrop-filter: blur(3.5px);
	transition: all 450ms cubic-bezier(.21,.61,.35,1);
	color: white;
}

.fsoc #start-menu{
	background-color: rgba(56,56,56,0.75);
}

.login #start-menu{
	height: 200px; 
	bottom: -210px;
}

#start-menu.active{
	bottom: 40px;
}

#start-menu .details{
	margin: 15px 25px 25px 25px;
	width: calc(100% - 50px);
	text-align: right;
}

#start-menu .name{
	padding-top: 12px;
	margin: 0;
}

.fsoc #start-menu .name{
	padding-top: 34px;
	text-align: left;
	padding-left: 10px;
}


#start-menu .job{
	margin: 0;
	font-weight: normal;
	font-style: italic;
	font-size: 1em;
	padding-bottom: 5px;
}

#start-menu .email{
	margin: 0;
	font-weight: normal;
	font-size: 0.7em;
}

#start-menu .profile-pic{
	top: 5px;
	left: 0;
	width: 115px;
	height: 115px;
	border-radius: 50%;
}

.fsoc #start-menu .profile-pic{
	left: 225px;

}

.player{
	bottom: 0;
	left: 15px;
	width: calc(100% - 30px);
	height: 45px;
	margin: 0 auto;
	position: relative;
}

.player img{
	width: 24px;
	height: 24px;
	top: -10px;
}

#player-1{
	bottom: 80px;
}

#player-2{

}

.vol-text {
	font-size: .9em;
	bottom: 72px;
	left: 10px;
	color: #61b0f4;
}

.fsoc .vol-text{
	color: #afafaf;
}

.vol-left{
	left: 23px;
}

.vol-right{
	right: 23px;
}

.volume {
	left: 20%;
	margin: 0 auto;
	height: 5px;
	width: 60%;
	background: #717171;
	border-radius: 15px;
}

.volume .ui-slider-range-min {
	height: 5px;
	width: 80%;
	position: absolute;
	background: #347fc1;
	border: none;
	border-radius: 10px;
  	outline: none;
}
	
.volume .ui-slider-handle {
	width: 20px;
  	height: 20px;
	border-radius: 20px;
  	background: #FFF;
  	position: absolute;
  	margin-left: -8px;
  	margin-top: -8px;
  	cursor: pointer;
  	outline: none;
}

#cortana{
	bottom: 0;
	left: 48px;
	width: 345px;
	height: 40px;
	background-color: #404040;
	background-image: url('assets/images/icons/cortana.svg');
	background-size: 26px 24px;
	background-position: 7px center;
	background-repeat: no-repeat;
}

#objective-text{
	top: 10px;
	left: 42px;
	font-size: 0.875em;
	color: #a0a0a0;
}

#date-time{
	bottom: 0;
	right: 54px;
	height: 40px;
	font-size: .7em;
	color: #e0e0e0;
	line-height: 1.3;
	text-align: center;
}

#date-time span{
	display: block;
}

#time{
	margin-top: 5px;
	margin-bottom: 2px;
}

.login #date-time{
	bottom: 0;
	right: 12px;
}

#messages-icon{
	bottom: 0;
	right: 0;
	width: 48px;
	height: 40px;
	background-image: url("assets/images/icons/messages.svg");
	background-repeat: no-repeat;
	background-size: 20px 21px;
	background-position: center center;
	-webkit-transition: background-color 250ms ease;
    -ms-transition: background-color 250ms ease;
    transition: background-color 250ms ease; 
}

#messages-icon.active{
	background-color: rgba(24, 96, 160, 0.5);
}

#messages-icon:hover{
	background-color: rgba(24, 96, 160, 0.5);
}

.fsoc #messages-icon.active{
	background-color: rgba(216, 216, 216, 0.5);
}

.fsoc #messages-icon:hover{
	background-color: rgba(216, 216, 216, 0.5);
}

#notification-icon {
	border: 1px solid #323332; 
	border-radius: 50%;
	background-color: rgba(37,37,37,0.75);
	height: 15px;
	width: 15px;
	display: block;
	bottom: 5px;
	right: 7px;
	display: none;
}

#notification-icon.active{
	display: block;
}

#notification-icon span{
	color: white;
	font-size: 0.6em;
	padding: 0;
	margin: 0.5px 0.4px 0 0;
	text-align: center;
}

/* ACTION CENTER */
#action-center{
	width: 328px;
	height: 100%;
	z-index: 89;
	right: -330px;
	background-color: rgba(28,28,28,0.75);
	border-left: 1.5px solid #313131;
	-webkit-backdrop-filter: blur(3.5px);
	backdrop-filter: blur(3.5px);
	transition: all 350ms cubic-bezier(.21,.61,.35,1);
	color: white;
}

.fsoc #action-center{
	background-color: rgba(16,16,16,0.75);
}

#action-center.active{
	right: 0;
}

#action-title{
	top:20px;
	left: 20px;
}

#msg-box{
	overflow-y:auto; 
    overflow-x:hidden; 
    max-height:50%;
    width:80%;
    background-color: rgba(73,73,73,0.5);
    top: 60px;
    left: 32px;
}

/* MESSAGE BOX USED AT END OF GAME */

#msg-window-container{
	width: 100%;
	height: 100%;
	z-index: 89;
    transition: all 350ms cubic-bezier(.21,.61,.35,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#msg-window{
	width: calc(530px);
	height: calc(480px);
	background-color: white;
	margin-bottom: 40px;
	-webkit-box-shadow: 17px 24px 8px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 17px 24px 8px 0px rgba(31,31,31,0.5);
	box-shadow: 15px 17px 12px 0px rgba(31,31,31,0.5);
	position: relative;
	display: none;
}

#composer{
	background-color: rgb(246,246,246);
	border: 1px solid rgb(222,222,222);
	width: calc(100% - 2*1px - 2*20px);
	padding: 10px 20px;
	min-height: calc(45px - 2*10px);
	bottom: 0;
	display: flex;
    align-items: center;
}

#composer div:first-of-type{
	min-height: 20px;
	width: calc(100% - 57px - 2*10px);
	border-radius: 10px;
	padding: 0 10px;
	background: white;
    border: 1px solid rgb(222,222,222);
    display: inline-block;
}

#composer #text{
	font-size: 0.7em;
	display: inline-block;
	padding: 5px 2px;
}

#composer #text:after {
  visibility: visible;
  content: '';
  background-color: #000000;
  display: inline-block;
  position: relative;
  width: 1px;
  height: 1em;
  top: 1px;
  margin-left: 3px;
  -webkit-animation: 0.5s flicker alternate infinite;
    animation: 0.5s flicker alternate infinite;
}

@-webkit-keyframes flicker{
	0%{opacity: 0}
	100%{opacity: 1}
}

@keyframes flicker{
	0%{opacity: 0}
	100%{opacity: 1}
}

#composer #send{
	color: rgb(1,130,252);
    font-size: 0.7em;
    display: inline-block;
    height: 100%;
    margin-left: 20px;
    margin-top: 2px;
}

#waiting{
	transform: scale(-0.5,0.5);
    width: 600px;
	display: inline-block;
}

/* From https://codepen.io/samuelkraft/pen/Farhl */
.typing-indicator {
  background-color: #E6E7ED;
  float: left;
  will-change: transform;
  width: auto;
  border-radius: 50px;
  padding: 20px;
  display: table;
  margin: 0 auto;
  position: relative;
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}
.typing-indicator::before, .typing-indicator::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #E6E7ED;
}
.typing-indicator::after {
  height: 10px;
  width: 10px;
  left: -10px;
  bottom: -10px;
}
.typing-indicator span {
  height: 15px;
  width: 15px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink-msg infinite 0.3333s;
          animation: 1s blink-msg infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink-msg infinite 0.6666s;
          animation: 1s blink-msg infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink-msg infinite 0.9999s;
          animation: 1s blink-msg infinite 0.9999s;
}

@-webkit-keyframes blink-msg {
  50% {
    opacity: 1;
  }
}

@keyframes blink-msgs {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

#imessage{
	padding: 20px 30px;
    padding-top: 30px;
    height: calc(100% - 45px - 65px + 13px);
    font-size: 0.75em;
    overflow: hidden;
    display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
}

#upload{
    margin-top: 60px;
    display: none;
}

#upload img{
	width: 24px;
    margin-left: 10px;
    margin-top: -2px;
    float: right;
}

#upload button{
	margin-left: 7px;
	float: right;
	background-color: white;
	font-family: "Helvetica Neue", 'Open Sans', sans-serif;
	font-size: 1em;
	border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-style: solid;
    border-width: 1px;
	border-radius: 5px;
	padding: 1px 7px 2px;
	height: 24px;
}


/* From https://codepen.io/swards/pen/gxQmbj */
.imessages {
  font-family: "Helvetica Neue", 'Open Sans', sans-serif;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.imessage {
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.yours {
  align-items: flex-start;
}

.yours .imessage {
  margin-right: 25%;
  background-color: #eee;
  position: relative;
}

.mine {
  align-items: flex-end;
}

.mine .imessage {
  color: white;
  margin-left: 25%;
  background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
  position: relative;
}

#inventory-title{
	bottom: 200px;
	right: 30px;
	color: #61b0f4;
}

.fsoc #inventory-title{
	color: #afafaf;
}

#inventory{
	width: 80%;
    height: 125px;
    bottom: 0;
    margin-bottom: 60px;
    right: 32px;
    overflow-y: auto;
    overflow-x: hidden;
}

.inventory-box{
	width: 74px;
    height: 56px;
    background-color: rgba(73,73,73,0.5);
    border: 1px solid grey;
    display: inline-block;
}

.inv{
	width: 100%;
	height: 100%;
	display: block;
	background-size: 85% 85%;
    background-repeat: no-repeat;
    background-position: center;
}

.inv.draggable{
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* TOOL TIP FOR INVENTORY */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


#action-center h1{
	font-weight: 600;
	font-size: 0.95em;
	margin: 0;
}

#action-center h2{
	margin: 2px 0;
    font-size: 50%;
    opacity: 0.5;
    font-weight: 300;
}

#action-center p{
	font-size: 0.7em;
	padding: 5px 0 10px;
	margin: 0;
	line-height: 1.5;
	font-weight: 300;
}

.msg{
	min-height: 62px;
	width: 90%;
	margin: 6.5px auto;
}

#action-center .msg:not(:last-of-type)::after{
	content:' ';
    display:block;
    border-bottom: 1px solid #777677;
}

#action-center br, .notification br{
	padding-bottom: 5px;
}

/* NOTIFICATION */
.notification{
	color: white;
	font-size: 70%;
	width: 360px;
	min-height: 100px;
	background-color: #1f1f1f;
	right: -362px;
	bottom: 60px;
	transition: all 350ms cubic-bezier(.21,.61,.35,1);
	border: 1.5px solid #313131;
	border-right: none;
	z-index: 6;
}

#action-center strong, .notification strong{
	color: #3f9ee4;
}

.notification p{
	font-weight: 300;
}

.notification h3{
	font-size: 70%;
    opacity: 0.5;
    font-weight: 300;
    left: 140px;
    top: 15px;
}

.notification .close{
  	right: 15px;
	top: 15px;
  	opacity: 0.3;
  	color: white;
  	font-size: 17px;
  	transition: 1s all ease;
}

.notification .close.active{
	animation: becomeRed 3s;
	animation-fill-mode: forwards;
}

/* Animation to change close icons red while being held down */
@-webkit-keyframes becomeRed{
	0% {
		color: white;
		opacity: 0.3;
		transform: scale(1);
	}
	100%{
		color: #e74c3c;
		opacity: 1;
		transform: scale(1.2);
	}
}

@keyframes becomeRed{
	0% {
		color: white;
		opacity: 0.3;
		transform: scale(1);
	}
	100%{
		color: #e74c3c;
		opacity: 1;
		transform: scale(1.2);
	}
}

.notification.active{
	right: 0;
}

/* APPS */
#recycle-app{
	top: 10%;
	left: 10%;
}

#docs-app{
	top: 20%;
	left: 15%;
}

#terminal-app{
	top: 25%;
	left: 20%;
	width: 580px;
}

.window-top{
	z-index: 10 !important;
}

.small-app{
	width: 530px;
	height: 348px;
	background-color: white;
	-webkit-box-shadow: 17px 24px 8px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 17px 24px 8px 0px rgba(31,31,31,0.5);
	box-shadow: 15px 17px 12px 0px rgba(31,31,31,0.5);
	z-index: 3;
	display: none;
}

.menu-bar{
	background-color: #02599e;
	border: 1px solid rgba(10, 60, 101, 0.4);
	top: 0;
	left: 0;
	height: 32px; 
	width: calc(100% - 1px); /*Remove border width */
	color: white;	
	overflow: hidden;
}

.fsoc .menu-bar{
	background-color: #484848;
	border: 1px solid rgba(113, 113, 113, 0.4);
}

 .menu-bar h1 {
	font-size: 0.75em;
	margin:0;
	font-weight: normal;
	left: 12px;
	top: 7.5px;
	display: inline-block;
	transition: left 450ms cubic-bezier(.21,.61,.35,1);
	font-family: 'Open Sans', sans-serif !important;
}

.menu-bar h1.bottom{
	left: 58px;
}

.menu-bar .close{
	width: 13px;
  	height: 13px;
	margin:0;
	right: 12px;
	top: 9px;
	display: inline-block;
}

.menu-bar .back{
	width: 22.5px;
  	height: 17px;
  	top: -1px;
    left: -1px;
	margin:0;
	padding: 8px 12px;
	background-color: #0a3c65;
	transition: all 350ms cubic-bezier(.21,.61,.35,1);
	display: none;
}

.menu-bar .back.bottom{
	left: -40px;
}

.fsoc .menu-bar .back{
	background-color: #6f6f6f;
}

.inner{
	width: calc(100%  - 1px); /* - border weight */
	height: calc(100%  - 35px); /*- border weight - title bar height */
	bottom: 0;
	border: 1px solid #777677;
	overflow-y:auto; 
    overflow-x:hidden; 
}

.inner .bottom{
	display: none;
}

.small-app-icon{
	font-size: .6em;
	color: black;
	padding: 6px 1px 6px;
	text-align: center;
	width: 88px;
	height: 55px;
	margin: 18.5px 33.5px 37px;
}

.small-app-icon img{
	display: block;
	height: 100%;
	width: auto;
	margin: 0 auto 10px;
	-webkit-transition: background-color 250ms ease;
    -ms-transition: background-color 250ms ease;
    transition: background-color 250ms ease; 
    -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
			drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
			drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
			drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
			drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
			drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
			drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
}

.small-app-icon span{
	margin-left: -5%;
    margin-right: -5%;
    text-align: center;
}

.small-app-icon:nth-of-type(1n) {
	left: calc(0*124px);	
}

.small-app-icon:nth-of-type(2n) {
	left: calc(1*124px);
}

.small-app-icon:nth-of-type(3n) {
	left: calc(2*124px);
}

.small-app-icon:nth-of-type(4n) {
    left: calc(3*124px);
}

.small-app-icon:nth-of-type(5n) {
    top: calc(1*95px);
    left: calc(0*124px);
}

.small-app-icon:nth-of-type(6n) {
    top: calc(1*95px);
    left: calc(1*124px);
}

.small-app-icon:nth-of-type(7n) {
    top: calc(1*95px);
 	left: calc(2*124px);
}

.small-app-icon:nth-of-type(8n) {
    top: calc(1*95px);
    left: calc(3*124px);
}

.small-app-icon:nth-of-type(9n) {
    top: calc(2*95px);
    left: calc(0*124px);
}

.small-app-icon:nth-of-type(10n) {
    top: calc(2*95px);
    left: calc(1*124px);
}

.small-app-icon:nth-of-type(11n) {
    top: calc(2*95px);
 	left: calc(2*124px);
}

.small-app-icon:nth-of-type(12n) {
    top: calc(2*95px);
    left: calc(3*124px);
}


/* TERMINAL */
#terminal-app .inner{
	width: calc(100%  - 21px); /* - border weight */
	height: calc(100%  - 55px); /*- border weight - title bar height */
	background-color: black;
	padding: 10px;
 	color: #CCCCCC;
 	font-family: 'Ubuntu Mono', monospace;
 	font-size: 0.7em;
 	/*outline: none;*/
}

.console-container{
	width: 100%;
	height: 100%;
}

.console .line{
	min-height: 15px;
	position: relative;
}

.console .line.tall{
	line-height: 15px;
	padding-bottom: 15px;
	white-space: pre;
}

.console .line.pre-written{
	line-height: 15px;
	padding-bottom: 5px;
	white-space: pre;
}

.console .prefix-1{
	color: #49fa4f;
}

.console .prefix-2{
	color: #4f88f5;
}

.console .muted{
	color: #616161 !important;
}

.console .prefix-2:after {
    content: ' ';
}

.console .cursor {
    -webkit-animation: 0.5s blink alternate infinite;
    animation: 0.5s blink alternate infinite;
}

/*Makes the cursor look like its blinking */

@-webkit-keyframes blink{
	0% {
		background: white;
	}
	100%{
		background: transparent;
	}
}

@keyframes blink{
	0% {
		background: white;
	}
	100%{
		background: transparent;
	}
}

.console #console-content input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateX(-5000px);
    -ms-transform: translateX(-5000px);
    transform: translateX(-5000px);
}

.console-text{
	word-wrap: break-word;
}

/* PERSONALISE */
#wallpapers{
	/*width: 100%;*/
	top: calc(34px + 10px);
	bottom: calc(40px + 10px);
	left: 10px;
	right: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.grid {
  	display: flex;
  	justify-content: space-between;
  	width: 100%;
}

.grid .col {
  padding: 10px;
  width: 32%;
}

.col img{
	width: 100%;
	height: auto;
}

.grid .col:hover{
	background-color: #1a689e;
}

.col img:hover {
	opacity: 0.8;
	-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
}

.grid .col.active{
	background-color: #61a3d0;
}

.col.active img {
	opacity: 0.8;
	-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
}

/* BIG APP */

.big-app{
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
}

.file{
	width: 100%;
	top: calc(34px + 15px);
	bottom: calc(40px + 65px);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
			drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
			drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
			drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
			drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
			drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
			drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
}

 #file, #zoom {
	height: 100%;
    width: auto;
    max-width: 95%;
    margin: 0 auto;
    object-fit: contain;
    display: block;
}

#help-text { 
	bottom: 50px;
	left: 20px;
	font-size: 0.7em;
	display: none;
}

#playPause{
	width: 15%;
	height: 15%;
	top: calc(50% - 7.5% - 30px);
	left: calc(50% - 7.5%);
	z-index: 15;
	/*-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);*/
	border-radius: 50%;
	display: none;
}

#playPause.active{
	display: inline;
}

#playPause .pause{
	display: none;
}

#playPause circle{
	fill: rgba(93,93,93,0.7);
}

#file-viewer-bar{
	bottom: 55px;
	text-align: center;
	width: 100%;
	font-size: 0.8em;
}

#file-viewer-bar p{
	padding-bottom: 8px;
	margin: 0;
	display: inline-block;
}

.nav-arrow{
	width: 38px;
	height: 38px;
	/*top: calc(50% - 30px);*/
	bottom: -52px;
	display: none;
	z-index: 10;
}

#left-arrow{
	left: calc(50% - 150px);
}

#right-arrow{
	transform: rotate(180deg);
	right: calc(50% - 150px);
}

.nav-arrow circle{
	fill:#1E1E1E;
	transition: all 150ms cubic-bezier(.21,.61,.35,1);
}

.nav-arrow path{
	fill: white;
}

/* EMAIL */
.email-bar{
	top: 0;
	left: 0;
	width: calc(100% - 2*10px);
	height: 50px;
	background-color: rgb(33,33,39);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px; 	
}

.email .email-bar{
	top: 32px;
}

.email-bar h1{
	font-size: 1.2em;
	margin: 0;
	font-weight: 400;
	padding: 0;
	padding-left: 5px;
}

.email-bar h1:first-of-type:after{
	content: '| Inbox';
	padding-left: 5px;
	/*padding-right: 5px;*/
}

.email-bar .profile-pic{
	height: 85%;
	width: auto;
	border-radius: 50%;
	padding-right: 2px
}

#email-ui{
	width: 100%;
	height: calc(100% - 50px);
	left: 0;
	top: 50px
}

.email #email-ui{
	top: 82px;
	height: calc(100% - 122px);
}

.mail-col{
	float: left;
	background-color: white;
	height: 100%;
	overflow-y: auto;
}

.mail-col:after {
    content: "";
    display: table;
    clear: both;
}

.sidebar{
	background-color: rgb(244,244,244);
	width: calc(220px - 2*20px);
	height: calc(100% - 2*20px);
	border-right: 1px solid rgb(229, 227, 227);
	padding: 20px;
}

.sidebar ul{
	margin: 0;
	list-style-type: none;
	padding: 0;
	width: 100%;
}

.sidebar li{
	padding: 7px;
	color: #444444;
}

.sidebar li span{
	float: right;
	padding-right: 10px;
	color: rgb(23, 110, 198);
}

.sidebar li.active{
	font-weight: bold;
	background-color: rgb(223,235,246);
	color: #151515;
}

.sidebar li:hover:not(.active), .mail-item:hover:not(.active){
	background-color: rgb(234,234,234);
}

.mail-list{
	width: calc((100% - 222px)*2/5);
	min-width: 200px;
	border-right: 1px solid rgb(229, 227, 227);
}

.mail-item{
	width: calc(100% - 2*20px);
	height: 82px;
	margin-bottom: 10px;
	padding: 20px;
	font-size: 1.2em;
}

.mail-item h1{
	font-size: 100%;
	margin: 0;
	margin-bottom: 10px;
}

.sidebar i{
	padding-right: 5px;
	text-align: center;
	width: 25px;
}

.mail-item h2{
	font-size: 70%;
	margin: 0;
	margin-bottom: 8px;
	display: inline-block;
	float: left;
}

.mail-item h4{
	font-size: 50%;
	margin: 0;
	font-weight: 300;
	float: right;
	margin-top: 6px;
	display: inline-block;
}

.mail-item p{
	font-size: 60%;
	margin: 0;
	margin-bottom: 5px;
	font-weight: 300;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: inline-block;
	white-space: nowrap;
}

.mail-item a{
	pointer-events: none;
	color: inherit;
}

.mail-item.active{
	background-color: rgb(223,235,246);
}

.mail-window{
	width: calc((100% - 222px)*3/5);
	min-width: 200px;
}

#no-mail{
	display: flex;
	flex-direction: column;
	align-items: center;
  	justify-content: center;
  	text-align: center;
  	height: 100%;
  	color: #4c4c4c;
  	font-weight: 300;
}

#no-mail img{
	width: 125px;
	margin: 15px;
}

/* --- Email viewer --- */

#default-mail{
	display: none;
	padding: 30px 40px 30px 35px;
	font-size: 1.5em;
}

#default-mail h1{
	font-size: 100%;
	margin: 0;
}

#default-mail h2{
	font-size: 70%;
}

#default-mail h3{
	font-size: 60%;
	font-weight: 300;
}

#default-mail h4{
	font-size: 45%;
	font-weight: 300;
	margin: 0;
}

#default-mail p{
	font-size: 50%;
	line-height: 150%;
}

#default-mail .attachment{
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: start;
	border: 1px solid grey;
	width: 230px;
	height: 42px;
	text-align: left;
	padding: 0 12px;
	transition: all 200ms linear;
	margin-bottom: 10px;
}

#default-mail .break, .notification .break, #action-center .break, .ending .break{
	display: block;
	margin-bottom: 2px;
}

#default-mail .break.pad{
	padding-bottom: 10px;
}

#default-mail .attachment:hover{
	background-color: rgb(250,250,250);
}

.attachment img{
	display: none;
	width: 28px;
	height: 41px;
	padding-right: 10px;
}

#default-mail .attachment img{
	display: block;	
}

.mail-page{
	display: none;
}

.mail-page.active{
	display: block;
}

/* E-Net */
.enet{
	background-image: url('assets/images/wallpapers/personal-mail.svg');
	background-size: cover;
	background-position: center;
}

.enet-bar{
	top: 32px;
	left: 0;
	width: 100%;
	height: 34px;
	background-color: #dedede;
	border: 0.5px solid #c7c7c7;

}

.enet-bar .search{
	background-color: #f3f3f3;
	width: calc(100% - 50px - 120px);
	top: 6px;
	left: 120px;
	height: 20px;
	border: 0.2px solid #c7c7c7;
}

.enet-bar .backward{
	left: 12px;
	top: 8px;
	width: 18px;
	height: 17px;
}

.enet-bar .forward{
	left: 50px;
	top: 8px;
	width: 18px;
	height: 17px;
}

.enet-bar .reload{
	left: 88px;
	top: 7.5px;
	width: 18px;
	height: 18px;
}


.hamburger{
	right: 12px;
	top: 4.5px;
	width: 24px;
	height: 24px;
}

.enet-box{
	width: 100%;
	top: 67px;
	bottom: 40px;
}

/* Enet History */
.history{
	font-family: 'Roboto', 'Open Sans', sans-serif;
}

.history-bar{
	background-color: #3367d6;
	width: 100%;
	height: 16px;
	display: flex;
	color: white;
	justify-content: flex-start;
	align-items: center;
	padding: 20px;
}

.history-items{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: calc(100% - 30px - 26px - 60px);
	width: calc(100% - 2*40px);
	margin: 0 auto;
	padding: 30px 40px ;
	overflow-y: scroll;
}

.history-box{
	background-color: white;
  	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 5px 0px rgba(0, 0, 0, 0.26);
  	width: 60%;
  	margin-bottom: 20px;
}

.history-box .title{
	font-weight: 500;
	border-bottom: 1px solid rgb(219,219,219);
    border-radius: 2px 2px 0 0;
    display: block;
    height: 15px;
    padding: 20px;
}

.history-box ul{
	font-size: 80%;
	list-style-type: none;
	padding: 0px 20px;
}

.history-box li{
	margin: 20px 0;
	display: flex;
	align-items: center;
}

.history-box img{
	height: 14px;
	width: 14px;
	margin-right: 10px;
}

.history-box li span:first-of-type{
	margin-right: 50px;
	color: #717171;
}

/* Esmail Login */
.password-box {
  	background-color: white;
  	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 5px 0px rgba(0, 0, 0, 0.26);
  	width: 330px;
  	height: 370px;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -55%);
  	padding: 48px 40px;
  	font-family: 'Roboto', 'Open Sans', sans-serif;
  	color: #212121;
}

#recover-box{
	overflow-x: hidden;
}

.password-box img{
	height: 20px;
}

.password-box h1{
	padding-bottom: 0;
    padding-top: 12px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3333;
    margin-bottom: 0;
    margin-top: 0;
}

.password-box .subheading{
	font-size: 14px;
    font-weight: 400;
    line-height: 1.4286;
    padding-bottom: 3px;
    padding-top: 1px;
    margin-bottom: 0;
    margin-top: 0;
}

.password-box form{
	display: inline-block;
    font-size: 14px;
    padding: 24px 0 0;
    vertical-align: top;
    white-space: normal;
    width: 100%;
    position: relative;
}

.password-box input{
	color: #757575;
	font-family: 'Roboto', 'Open Sans', sans-serif;
	width: 100%;
	font-size: 0.7em;
	border: none;
	border-bottom: 1.5px solid #e7e7e7;
	margin-top: 26px;
	margin-bottom: 50px; 
	font-size: 14px;
	padding: 0;
	padding-bottom: 8px;
	transition: border 350ms cubic-bezier(.21,.61,.35,1);
}

.password-box input:focus{
	outline: none;
	border-bottom: 1.5px solid #4285f3;
	color: #212121;
}

.password-box ul{
	font-size: 0.8em;
	-webkit-padding-start: 35px;
}

.password-box li{
	margin-bottom: 16px;
}

.password-box #descript{
	left: 40px;
    bottom: 54px;
    font-size: 0.75em;
    color: #4680f0;
    padding: 14px 0;
}

.input{
	padding-bottom: 4px;
	width: 100%;
	transition: all 350ms cubic-bezier(.21,.61,.35,1);
}

.input p{
	margin: 0;
	margin-bottom: 10px;
	transition: all 250ms cubic-bezier(.21,.61,.35,1);
	cursor: text;
	z-index: 10;
}

.first-input{
	top: 26px;
}

.first-input.active{
	top: 8px;
	font-size: 0.75em;
	color: #4680f0;
}

.second-input{
	top: 131px;
}

.second-input.active{
	top: 112px;
	font-size: 0.75em;
	color: #4680f0;
}

/* Forgot password entry page */

#forgot{
	left: 40px;
	bottom: 54px;
	font-size: 0.8em;
	color: #4680f0;
	text-decoration: none;
	padding: 14px 0;
}

.password-box button{
	background-color: #4680f0;
	font-family: 'Roboto', 'Open Sans', sans-serif;
	font-weight: 500;
	font-size: 0.8em;
	border: none;
	width: 80px;
	height: 34px;
	border-radius: 3px;
	right: 40px;
	bottom: 58px;
	color: white;
	transition: all 300ms cubic-bezier(.21,.61,.35,1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.password-box button:focus{
	outline: none;
}

.password-box button:hover{
	background-color: #3051c1;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.password-box span{
	color: #606060;
	font-size: 0.75em;
	bottom: -30px;
	left: 0;
}

.password-box span img{
	width: 10px;
	height: auto;
	padding-bottom: 1.5px;
	margin-left: 2px;
}

.question{
	right: -400px;
}

.question.active{
	right: 0;
}

.question.answered{
	right: 400px;
}

/* MINI GAMES */
.game-stage{
	width: 100%;
	height: calc(100% - 55px);
	position: relative;
}

#game{
	top: calc(50% - 277.5px);
	left: calc(50% - 327.5px);
	background-color: white;
	width: 640px; 
	height: 480px;
	padding: 15px;
	z-index: 6;
}

#game a{
	color: #7a7a7a;
	position: absolute;
	bottom: -30px;
	left: 0;
	font-size: 0.85em;
	transition: all 200ms linear;
}

#game a:hover{
	color: #a5a5a5;
}

#game h1{
	font-size: 1.4em;
	text-align: center;
	margin: 0.2em 0 0.67em 0;
}

/* --- Victory or failure screens --- */

#win-screen, #fail-screen{
	width: 100%;
	height: 100%;
	z-index: 200;
	color: white;
  	align-items: center;
  	justify-content: center;
	display: none;
}

#win-screen > div:first-of-type , #fail-screen > div:first-of-type{
	width: 600px;
	text-align: center;
}

#win-screen.active, #fail-screen.active{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  	display: -ms-flexbox;      /* TWEENER - IE 10 */
  	display: -webkit-flex;     /* NEW - Chrome */
  	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#win-screen{
	background-color: rgba(39,174,96,0.75);;
}

#fail-screen{
	background-color: rgba(192,57,43,0.75);
}

#win-screen img, #fail-screen img{
	width: 200px;
}

#win-screen h1, #fail-screen h1{
	letter-spacing: 2px;
	font-size: 3em;
    margin-top: 0.4em;
}

#win-screen button, #fail-screen button{
	border-width: 5px;
    border-color: #3e3e3e;
    border-style: solid;
    background-color: #2d2d2d;
    width: 175px;
    height: 56px;
    color: #cccccc;
    font-family: inherit;
    font-size: 1.5em;
    outline: none;
    -webkit-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    transition: all 800ms ease;
    -webkit-box-shadow: 0px 5px 12px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 0px 5px 12px 0px rgba(31,31,31,0.5);
	box-shadow: 0px 5px 12px 0px rgba(31,31,31,0.5);
}

#win-screen button:hover, #fail-screen button:hover{
	color: white;
	border-color: #6b6b6b;
}

/* SNAKE GAME */

#snake-game-area{
	top: calc(50% - 325px);
	left: calc(50% - 225px);
	background-color: black;
	width: 450px; 
	height: 565px;
	padding: 15px;
	z-index: 6;
	color: white;
	font-family: 'Press Start 2P', cursive;
	border: 1px solid rgba(103,103,103,0.5);
	zoom: 90%;
}

.snake-title{
	font-size: 1.2em;
	text-align: center;
	transform: scaleY(1.2);
	padding-top: 25px; 
	padding-left: 15px;
}

.snake-title.active{
	margin: 40px 0 47px;
}

#snake-game-area h3{
	font-size: 1em;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 10px;
}

#snake-game-area h3 span{
	float: right;
	padding-right: 10px;
}

#snake-game{
    border: 1px solid #59925c;
    margin: 25px auto 0;
    display: block;
}

/* --- INTRO PAGE OF SNAKE --- */

.snake-intro p{
	font-size: 0.8em;
	text-align: center;
    line-height: 16px;
}

.snake-intro img:first-of-type{
	width: 39%;
	height: auto;
	margin: 25px auto 0;
	display: block;
}

.snake-intro img{
	width: 30%;
	height: 20%;
	margin: 23px 41px 8px;
	display: inline-block;
}

.snake-intro button{
	background-color: #4CAF50;
    border: none;
    color: white;
    padding: 0px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    -webkit-transition: all 350ms cubic-bezier(.21,.61,.35,1);
    transition: all 350ms cubic-bezier(.21,.61,.35,1);
    width: 180px;
    height: 65px;
    bottom: 30px;
    font-family: 'Press Start 2P', cursive;
    border: solid #91f191 2px;
}

.snake-intro button:first-of-type{
	left: 40px;
}

.snake-intro button:last-of-type{
	right: 40px;
}

.snake-intro button:hover {
    border: solid #91f191 5px;
}

/* HIGH SCORES */

.snake-high-score{
	padding: 0 10px;
}

.snake-high-score span{
	float: right;
}

.snake-high-score ol{
	margin: 45px auto 0 60px;
	width: 70%;
}

.snake-high-score li{
	font-size: 1.5em;
    margin-bottom: 75px;
}

.snake-high-score input{
	background: none;
    border: none;
    outline: none;
    font-family: 'Press Start 2P', cursive;
    color: white;
    font-size: 1em;
}

.snake-high-score p{
	font-size: 0.8em;
	line-height: 24px;
	margin-top: 32px;
	color: #29e0ff;
	display: none;
}

.snake-high-score p.active{
	display: block;
}

.snake-high-score li.active, .snake-high-score input.active{
	-webkit-animation: 3s rainbow infinite;
    animation: 3s rainbow  infinite;
}

@-webkit-keyframes rainbow{
	0% {
		color: rgb(255, 0, 0);
	}
	20% {
		color: rgb(255, 255, 0);
	}
	40%{
		color: rgb(0, 255, 0);
	}
	60%{
		color: rgb(0, 255, 255);
	}
	80%{
		color: rgb(255, 0, 255);
	}
	100% {
		color: rgb(255, 0, 0);
	}
}

@keyframes rainbow{
	0% {
		color: rgb(255, 0, 0);
	}
	20% {
		color: rgb(255, 255, 0);
	}
	40%{
		color: rgb(0, 255, 0);
	}
	60%{
		color: rgb(0, 255, 255);
	}
	80%{
		color: rgb(255, 0, 255);
	}
	100% {
		color: rgb(255, 0, 0);
	}
}

.snake, .snake-intro, .snake-high-score{
	display: none;
}

.snake.active, .snake-intro.active, .snake-high-score.active {
	display: block;
}


/* PUZZLE GAME */
ul.sortable {
	list-style: none;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
    height: 100%;
}

.sortable li {
  	background-color: grey;
  	display: inline-block;
  	height: calc(100% - 8px); /* Height - padding */
	width: calc((100% - 8px)/10);
	padding: 0;
	margin: 0;
  	padding: 0;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.sortable li.active{
	border-left: 1px white solid;
	border-right: 1px white solid;
}

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* UNTANGLE GAME */
.untangle#stage{
	background: #333333;
}

#untangle{
	background: #333333;
}

#countdown{
	background: none;
	width: calc(100% - 2*5px);
	height: calc(32px - 2*5px);
	color: white;
	padding: 5px;
	position: relative;
	outline: 1px solid rgba(214,214,214,0.46);
}

#countdown .countText{
	z-index: 100;
	text-shadow: #000000 1px 1px 3px, rgba(0,0,0,0.88) 1px 1px 2px;
}

#countdown .puzzleText{
	z-index: 100;
	text-shadow: #000000 1px 1px 3px, rgba(0,0,0,0.88) 1px 1px 2px;
	right: 10px;
	text-align: right;
}

#countdown .countBG {
	background: #27ae60;
	height: 32px;
	width: 100%;
	top: 0;
	left: 0;
	transition: width 300ms cubic-bezier(0.22, 0.61, 0.36, 1), background 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Media queries */ 

@media only screen and (min-height: 800px){
	#desktop{
		height: calc(100% - 30px);
	}
	#snake{
		top: calc(5*120px);
		left: 0;
	}
}

@media only screen and (min-height: 900px){
	body { 
		zoom:115%;
	}
	#game{
		top: calc(50% - 337.5px);
		left: calc(50% - 407.5px);
		width: 800px; 
		height: 600px;
	}

	.untangle #game{
		height: 585px;
	}

	#header{
		width: calc(65% - 50px);
	}

	#playButton, #login > div{
		margin-bottom: 50px;
	}

	#boot-sequence{
		top: 50px;
    	left: 50px;
	}

	#snake-game-area{
		top: calc(50% - 310px);
		zoom: 100%;
	}

	#msg-box{
		max-height: 65%;
	}

}