body {
background-color: #0e100b;
margin: 0em;
font-size: 1.5em;
}

h1   {color: f59c1e;}
p    {color: black;}

:root {	
  --ABlack: #0e100b;
  --AWhite: #dcf0e1;
  --AWhiteRGB: 255, 255, 255;
  
  --AGreen: #16fa4b;
  --BGreen: #3bd78f;  
  --BGreenRGB: 49,215,143;
  
  --CommandColor: #efdd15;
  --BCommandColor: #e3f429;
  --BCommandRGB: 227, 244, 41;
  
  
  
  --ResearchColor: #1666fa;
  --BResearchColor: #43b6ff;
  --BResearchRGB: 67, 182, 255;
  
  --SecurityColor: #fa1626;
  --BSecurityColor: #ff56a6;
  --BSecurityRGB: 255, 86, 166;
  
  --CompanyColor: #8116fa;
  --BCompanyColor: #9657ff;
  --BCompanyRGB: 150, 87, 255;
  
  --Ftype: 1.2em "Lucida Console", "Courier New", monospace;
  }


.main {
	
}



#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}


.videoposition {
}

input[type=text] {
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    background-color: var(--ABlack);
    color: var(--AGreen);
    font: var(--Ftype);
    cursor: pointer;
    box-shadow: 0 0 0 0.2em var(--AGreen), 0px 0px 0.5em -0.3em rgba(var(--BGreenRGB), .8);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0.4em;
    text-transform: uppercase;
	width: 4em;
	
}

.personnelBox {
    border: 0.01em solid var(--AGreen);
    background-color: var(--ABlack);
    color: var(--AWhite);
    font: var(--Ftype);
    margin: 0em;
    position: absolute;
	width: 60%;
	border-top-width: 2em;
	font-size: .9em;
	min-height: 55%;
	text-align: initial;
  line-height: 1.3em ;
}

.personnelHeader {	
    background-color: var(--AGreen);
    font: var(--Ftype);
    color: var(--ABlack);
	text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0em var(--ABlack);
	
    box-shadow: 0 0 0 0.2em var(--ABlack), 0px 0px 0.5em -0.3em rgba(var(--AWhiteRGB), .8);
}


.div-table {
  display: table;         
  width: 80%;         
  background-color: #eee;              
  border-spacing: .2em; /* cellspacing:poor IE support for  this */
  
  
    border: 0.01em solid var(--AGreen);
    background-color: var(--ABlack);
    color: var(--AWhite);
    font: var(--Ftype);
    margin: 0em;
    position: absolute;
	left: 10%;
	top: 20%;
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;     
  width: 25%;
  overflow: hidden;
  white-space: nowrap;
font-size: .9em;
    color: var(--AGreen);
}



.loginText {
    color: var(--AGreen);
    font: var(--Ftype);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0.4em;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.keypad {
	position: absolute;
    left: 40%;
    top: 25%;
}

.inputpad {
	position: absolute;
	left: 650px;
	top: 40px;
	width: 350;
	height: 450;
}

.keypadbutton {
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    background-color: var(--ABlack);
    color: var(--AGreen);
    font: var(--Ftype);
    cursor: pointer;
    box-shadow: 0 0 0 0.2em var(--AGreen), 0px 0px 0.5em -0.3em rgba(var(--BGreenRGB), .8);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0.4em;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.keypadbutton:hover
{
  background-color: var(--AGreen);  
  color: var(--ABlack);
    text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0em var(--ABlack);
}


.keypadsubmit {
	color: #000;
    background-color: #329780;
  border: none;
  border-radius: 2em;
  font-size: 3em;
  margin: 0.1em;
}

.shipdeck {
    position: absolute;
    left: 37%;
    top: 20%;
}

.roomSubjectBox {
    border: 0.01em solid var(--AGreen);
    background-color: var(--AGreen);
    color: var(--ABlack);
    font: var(--Ftype);
	text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0em var(--ABlack);
    margin: 0em;
    position: absolute;
    text-transform: uppercase;
	width: 30%;
	height: 2em;
	text-align: center;
}

.roomInfoBox {
    border: 0.01em solid var(--AGreen);
    background-color: var(--ABlack);
    color: var(--AWhite);
    font: var(--Ftype);
    margin: 0em;
    position: absolute;
	width: 30%;
	font-size: .9em;
	min-height: 20%;
	text-align: initial;
  line-height: 1.3em ;
}

.login {
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    font: var(--Ftype);
    box-shadow: 0 0 0 0.2em var(--AGreen), 0px 0px 0.5em -0.3em rgba(var(--BGreenRGB), .8);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
	min-width: 30%;
    white-space: nowrap;
	padding: 0.2em;
  background-color: var(--AGreen);  
  color: var(--ABlack); 
	text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0em var(--ABlack);
}

.subjectBox {
    border: 0.01em solid var(--AWhite);
    background-color: var(--AGreen);
    color: var(--ABlack);
    font: var(--Ftype);
	text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0.01em var(--ABlack), 0 0 0em var(--ABlack);
    box-shadow: 0 0 0 0.2em var(--AWhite), 0px 0px 0.5em -0.3em rgba(var(--AWhiteRGB), .8);
    margin: 0em;
    position: absolute;
    text-transform: uppercase;
	width: 60%;
}
.contentBox {
    border: 0.01em solid var(--AGreen);
    background-color: var(--ABlack);
    color: var(--AWhite);
    font: var(--Ftype);
    margin: 0em;
    position: absolute;
	width: 60%;
	border-top-width: 2em;
	font-size: .9em;
	min-height: 55%;
	text-align: initial;
  line-height: 1.3em ;
}



.mailBox {
    border: 0.15em solid var(--AGreen);
    background-color: var(--ABlack);
    color: var(--AGreen);
    font: var(--Ftype);
    cursor: pointer;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
	font-size: .9em;
    width: 25%;
    height: 10%;
}

.mailBoxSelected {
    border: 0.15em solid var(--AWhite);
	
  border-left-width: 1em;
  
  border-right-width: 1em;
    background-color: var(--ABlack);
    color: var(--AWhite);
    font: var(--Ftype);
    cursor: pointer;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
	font-size: .9em;
    width: 25%;
    height: 10%;
}


.mailIcon{
	width: 5.5em;
	height: 5.5em;
  background: url(../images/mailIcon.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    color: var(--AGreen);
    font: var(--Ftype);
    cursor: pointer;
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    text-transform: uppercase;
}


.mailIcon:hover{
	
	
	width: 5.5em;
	height: 5.5em;
  background: url(../images/mailIconOver.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    font: var(--Ftype);
    cursor: pointer;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
  color: var(--ABlack);
    text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0em var(--ABlack);
}

.mailIconDown{
	
	width: 5.5em;
	height: 5.5em;
  background: url(../images/mailIconOver.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    font: var(--Ftype);
    cursor: pointer;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
  color: var(--ABlack);
    text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0em var(--ABlack);
}


.cronos{
	width: 50%;
	height: 8%;
  background: url(../images/Cronos.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    color: var(--AGreen);
    font: var(--Ftype);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.santiago{
	width: 50%;
	height: 8%;
  background: url(../images/Santiago.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    color: var(--AGreen);
    font: var(--Ftype);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.apc{
	width: 50%;
	height: 8%;
  background: url(../images/APC.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    color: var(--AGreen);
    font: var(--Ftype);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.weyland{
	width: 10em;
	height: 3em;
  background: url(../images/WeylandYutaniLogoGreen.png);
  
  background-repeat: no-repeat;
    background-size: contain;
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    color: var(--AGreen);
    font: var(--Ftype);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.alienButton1 {
    border: 0.15em solid var(--ABlack);
    border-radius: 0.01em;
    background-color: var(--ABlack);
    color: var(--AGreen);
    font: var(--Ftype);
    cursor: pointer;
    box-shadow: 0 0 0 0.2em var(--AGreen), 0px 0px 0.5em -0.3em rgba(var(--BGreenRGB), .8);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.mainWindowButton
{
    min-width: 25%;
    min-height: 50%;
}


.alienButton1:hover
{
  background-color: var(--AGreen);  
  color: var(--ABlack);
    text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0em var(--ABlack);
}

.alienButtonOn
{
  background-color: var(--AGreen);  
  color: var(--ABlack); 
    text-shadow: 0 0 0.1em var(--ABlack), 0 0 0px var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0.1em var(--ABlack), 0 0 0em var(--ABlack);
}

.mainWindow
{
	
  text-transform: uppercase;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
	width: 80%;
	height: 15%;	
    border-radius: 0.01em;
	background-color: var(--ABlack);  
}

.commandBoxShadow
{	
    box-shadow: 0 0 0 0.2em var(--CommandColor), 0px 0px 0.5em -0.3em rgba(var(--BCommandRGB), .8);
}

.securityBoxShadow
{	
    box-shadow: 0 0 0 0.2em var(--SecurityColor), 0px 0px 0.5em -0.3em rgba(var(--BSecurityRGB), .8);
}
.researchBoxShadow
{	
    box-shadow: 0 0 0 0.2em var(--ResearchColor), 0px 0px 0.5em -0.3em rgba(var(--BResearchRGB), .8);
}
.companyBoxShadow
{	
    box-shadow: 0 0 0 0.2em var(--CompanyColor), 0px 0px 0.5em -0.3em rgba(var(--BCompanyRGB), .8);
}
.normalBoxShadow
{	
    box-shadow: 0 0 0 0.2em var(--AGreen), 0px 0px 0.5em -0.3em rgba(var(--BGreenRGB), .8);
}


.windowHeader
{
  border-style: none;
  background-color: var(--ABlack);  
  font: var(--Ftype);  
  font-size: 1.5em;
  /*for centering within other elements*/
      margin: 0;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.commandFont
{
  text-transform: uppercase;
  color: var(--CommandColor);
    text-shadow: 0 0 0.1em var(--CommandColor), 0 0 0px var(--CommandColor), 0 0 0.1em var(--BCommandColor), 0 0 0.1em var(--BCommandColor), 0 0 0.1em var(--BCommandColor), 0 0 0em var(--BCommandColor);
}

.companyFont
{
  text-transform: uppercase;
  color: var(--CompanyColor);
    text-shadow: 0 0 0.1em var(--CompanyColor), 0 0 0px var(--CompanyColor), 0 0 0.1em var(--BCompanyColor), 0 0 0.1em var(--BCompanyColor), 0 0 0.1em var(--BCompanyColor), 0 0 0em var(--BCompanyColor);
}


.securityFont
{
  text-transform: uppercase;
  color: var(--SecurityColor);
    text-shadow: 0 0 0.1em var(--SecurityColor), 0 0 0px var(--SecurityColor), 0 0 0.1em var(--BSecurityColor), 0 0 0.1em var(--BSecurityColor), 0 0 0.1em var(--BSecurityColor), 0 0 0em var(--BSecurityColor);
}


.researchFont
{
  text-transform: uppercase;
  color: var(--ResearchColor);
    text-shadow: 0 0 0.1em var(--ResearchColor), 0 0 0px var(--ResearchColor), 0 0 0.1em var(--BResearchColor), 0 0 0.1em var(--BResearchColor), 0 0 0.1em var(--BResearchColor), 0 0 0em var(--BResearchColor);
}

.regularFont
{
  text-transform: uppercase;
  color: var(--AGreen);
    text-shadow: 0 0 0.1em var(--AGreen), 0 0 0px var(--AGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0.1em var(--BGreen), 0 0 0em var(--BGreen);
}


#crt:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% .15em;
    z-index: 2;
    pointer-events: none;
	
	filter: blur(0.03em);
}


.gridparent {
	position: absolute; 
	left: 400;
	top: 270;
}

.starchartparent {
	position: absolute; 
	left: 125;
	top: 70;
}

.gridbutton1 {
  position: absolute; 
  left: 19;
  top: 19;
}

.gridbutton2 {
	position: absolute;     
	left: 113;
    top: 19;
}

.gridbutton3 {
	position: absolute;     
	left: 207;
    top: 19;
}

.gridbutton4 {
	position: absolute;     
	left: 19;
    top: 113;
}

.gridbutton5 {
	position: absolute;     
	left: 113;
    top: 113;
}


.gridbutton6 {
	position: absolute;     
	left: 207;
    top: 113;
}


.gridbutton7 {
	position: absolute;     
	left: 19;
    top: 207;
}


.gridbutton8 {
	position: absolute;     
	left: 133;
    top: 207;
}


.gridbutton9 {
	position: absolute;     
	left: 207;
    top: 207;
}




.powergrid {
	position: absolute; 
}

.activatepower {
	position: absolute;
	left: 380;
	top: 540;
	color: #000;
    background-color: #329780;
  border: none;
  border-radius: 5px;
  font-size: 30px;
  margin: 3px;
}

.gridinstructions {
	position: absolute;
	left: 395;
	top: 220;
	color: #000;
    background-color: #329780;
  border: none;
  border-radius: 5px;
  font-size: 30px;
  margin: 3px;
}

.exitinstructions {
	position: absolute;
	left: 400;
	top: 550;
	color: #000;
    background-color: #329780;
  border: none;
  border-radius: 5px;
  font-size: 30px;
  margin: 3px;
}

.gridcontent {
    font-size: 0.6em;
    color: d2a919;
    text-align: justify;
    line-height: 1.5;
    font-weight: 600;
    width: 800;
    left: 100;
    position: relative;
}

.gridtext {
	display: flex;
}

.gridimage {
    height: auto; 
    width: auto; 
    max-width: 100px; 
    max-height: 100px;
  vertical-align: top;
}



.errorkeypad {
	position: absolute; 
	left: 400;
	top: 270;
}

.errorPosition {
  position: absolute;
  left: 150;
  top: 60;
}

.emergencyButton {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

.emergencyPosition {
  position: absolute;
  left: 110px;
  top: 465px;
}



.badgeButton {
  background-color: #ffd700;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 30px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing4 1500ms infinite;
  -moz-animation: glowing4 1500ms infinite;
  -o-animation: glowing4 1500ms infinite;
  animation: glowing4 1500ms infinite;
}


.unlockedDataButton {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing2 1500ms infinite;
  -moz-animation: glowing2 1500ms infinite;
  -o-animation: glowing2 1500ms infinite;
  animation: glowing2 1500ms infinite;
}

.unlockedInfoButton {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing3 1500ms infinite;
  -moz-animation: glowing3 1500ms infinite;
  -o-animation: glowing3 1500ms infinite;
  animation: glowing3 1500ms infinite;
}


.topSecretPosition{
  position: absolute;
  left: 110px;
  top: 400px;
}


.badge {
    height: auto;
    width: auto;
    max-width: 60px;
    max-height: 100px;
    vertical-align: middle;
}

.buchananLogPosition{
  position: absolute;
  left: 110px;
  top: 100px;
}

.holtzLogPosition{
  position: absolute;
  left: 110px;
  top: 200px;
}

.shimakiLogPosition{
  position: absolute;
  left: 110px;
  top: 300px;
}

.vargasLogPosition{
  position: absolute;
  left: 110px;
  top: 205px;
}


.enemyCounterIntelligencePosition{
  position: absolute;
  left: 635px;
  top: 300px;
}

.duplicationSchematicsPosition{
	position: absolute;
    left: 600;
    top: 200;
    height: 70;
}

.warningButton {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 60px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}





@-webkit-keyframes glowing2 {
  0% { background-color: #ae5e00; -webkit-box-shadow: 0 0 3px #ae5e00; }
  50% { background-color: #ff8a00; -webkit-box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ae5e00; -webkit-box-shadow: 0 0 3px #ae5e00; }
}

@-moz-keyframes glowing2 {
  0% { background-color: #ae5e00; -moz-box-shadow: 0 0 3px #ae5e00; }
  50% { background-color: #ff8a00; -moz-box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ae5e00; -moz-box-shadow: 0 0 3px #ae5e00; }
}

@-o-keyframes glowing2 {
  0% { background-color: #ae5e00; box-shadow: 0 0 3px #ae5e00; }
  50% { background-color: #ff8a00; box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ae5e00; box-shadow: 0 0 3px #ae5e00; }
}

@keyframes glowing2 {
  0% { background-color: #ae5e00; box-shadow: 0 0 3px #ae5e00; }
  50% { background-color: #ff8a00; box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ae5e00; box-shadow: 0 0 3px #ae5e00; }
}




@-webkit-keyframes glowing4 {
  0% { background-color: #ffd700; -webkit-box-shadow: 0 0 3px #ffd700; }
  50% { background-color: #ff8a00; -webkit-box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ffd700; -webkit-box-shadow: 0 0 3px #ffd700; }
}

@-moz-keyframes glowing4 {
  0% { background-color: #ffd700; -moz-box-shadow: 0 0 3px #ffd700; }
  50% { background-color: #ff8a00; -moz-box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ffd700; -moz-box-shadow: 0 0 3px #ffd700; }
}

@-o-keyframes glowing4 {
  0% { background-color: #ffd700; box-shadow: 0 0 3px #ffd700; }
  50% { background-color: #ff8a00; box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ffd700; box-shadow: 0 0 3px #ffd700; }
}

@keyframes glowing4 {
  0% { background-color: #ffd700; box-shadow: 0 0 3px #ffd700; }
  50% { background-color: #ff8a00; box-shadow: 0 0 40px #ff8a00; }
  100% { background-color: #ffd700; box-shadow: 0 0 3px #ffd700; }
}



@-webkit-keyframes glowing3 {
  0% { background-color: #002c9b; -webkit-box-shadow: 0 0 3px #002c9b; }
  50% { background-color: #0048ff; -webkit-box-shadow: 0 0 40px #0048ff; }
  100% { background-color: #002c9b; -webkit-box-shadow: 0 0 3px #002c9b; }
}

@-moz-keyframes glowing3 {
  0% { background-color: #002c9b; -moz-box-shadow: 0 0 3px #002c9b; }
  50% { background-color: #0048ff; -moz-box-shadow: 0 0 40px #0048ff; }
  100% { background-color: #002c9b; -moz-box-shadow: 0 0 3px #002c9b; }
}

@-o-keyframes glowing3 {
  0% { background-color: #002c9b; box-shadow: 0 0 3px #002c9b; }
  50% { background-color: #0048ff; box-shadow: 0 0 40px #0048ff; }
  100% { background-color: #002c9b; box-shadow: 0 0 3px #002c9b; }
}

@keyframes glowing3 {
  0% { background-color: #002c9b; box-shadow: 0 0 3px #002c9b; }
  50% { background-color: #0048ff; box-shadow: 0 0 40px #0048ff; }
  100% { background-color: #002c9b; box-shadow: 0 0 3px #002c9b; }
}




.greenbutton {


  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;


  position: absolute;
  width: 310px;
  height: 65px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #5f8638;
  border: none;
  border-radius: 15px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}


.greenbutton:active {
	color: #fff;
    background-color: #329780;
    -webkit-transform: translate(30em,0);
    -moz-transform: translate(30em,0);
    -o-transform: translate(30em,0);
    -ms-transform: translate(30em,0);
    transform: translate(3em,0);
}


.nextbutton {


  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;


	left: 425px;
	top: 550px;
	width: 100;
	height: 26;
	font-size: 23;
	text-transform: uppercase;
  position: absolute;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #5f8638;
  border: none;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}


.nextbutton:active {
	color: #fff;
    background-color: #329780;
    -webkit-transform: translate(20em,0);
    -moz-transform: translate(20em,0);
    -o-transform: translate(20em,0);
    -ms-transform: translate(20em,0);
    transform: translate(2em,0);
}

.prevbutton {


  -webkit-animation-name: prevPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;

	left: 130px;
	top: 550px;
	width: 100;
	height: 26;
	font-size: 23;
	text-transform: uppercase;
  position: absolute;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #386286;
  border: none;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}


.prevbutton:active {
	color: #fff;
    background-color: #5c6fcb;
    -webkit-transform: translate(-20em,0);
    -moz-transform: translate(-20em,0);
    -o-transform: translate(-20em,0);
    -ms-transform: translate(-20em,0);
    transform: translate(-2em,0);
}

@-webkit-keyframes prevPulse {
  from { background-color: #386286; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #52a1a8; -webkit-box-shadow: 0 0 35px #52a1a8; }
  to { background-color: #386286; -webkit-box-shadow: 0 0 9px #333; }
}
a.prev.button {
  -webkit-animation-name: prevPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}




.redbutton {


  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;


  position: absolute;
  width: 310px;
  height: 65px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #ffffff;
  background-color: #863847;
  border: none;
  border-radius: 15px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}


.red:active {
	color: #000;
    background-color: #97328c;
    -webkit-transform: translate(30em,0);
    -moz-transform: translate(30em,0);
    -o-transform: translate(30em,0);
    -ms-transform: translate(30em,0);
    transform: translate(3em,0);
}

.databutton {
	left: 240px;
	top: 450px;
	width: 200;
	height: 26;
	font-size: 23;
	text-transform: uppercase;
}


.gbmm1 {
  left: 310;
  top: 100px;
}

.gbmm2 {
  left: 260;
  top: 190px;
}

.gbmm3 {
  left: 210px;
  top: 280px;
}

.gbmm4 {
  left: 160;
  top: 370px;
}

.gbmm5 {
  left: 110;
  top: 460px;
}




.gbmm6 {
  left: 700px;
  top: 100px;
}

.gbmm7 {
  left: 650px;
  top: 190px;
}

.gbmm8 {
  left: 600px;
  top: 280px;
}

.gbmm9 {
  left: 550px;
  top: 370px;
}

.gbmm10 {
  left: 500px;
  top: 460px;
}




.submenu {
  width: 165px;
	font-size: 1.0em;
}

.gbsm1 {
  left: 100px;
  top: 100px;
}
.gbsm2 {
  left: 100px;
  top: 190px;
}
.gbsm3 {
  left: 100px;
  top: 280px;
}
.gbsm4 {
  left: 100px;
  top: 370px;
}
.gbsm5 {
  left: 100px;
  top: 460px;
}

.gbsm6 {
  left: 320px;
  top: 100px;
}
.gbsm7 {
  left: 320px;
  top: 190px;
}
.gbsm8 {
  left: 320px;
  top: 280px;
}
.gbsm9 {
  left: 320px;
  top: 370px;
}
.gbsm10 {
  left: 320px;
  top: 460px;
}



.gbsm11 {
  left: 540px;
  top: 100px;
}
.gbsm12 {
  left: 540px;
  top: 190px;
}
.gbsm13 {
  left: 540px;
  top: 280px;
}
.gbsm14 {
  left: 540px;
  top: 370px;
}
.gbsm15 {
  left: 540px;
  top: 460px;
}



.gbsm16 {
  left: 760px;
  top: 100px;
}
.gbsm17 {
  left: 760px;
  top: 190px;
}
.gbsm18 {
  left: 760px;
  top: 280px;
}
.gbsm19 {
  left: 760px;
  top: 370px;
}
.gbsm20 {
  left: 760px;
  top: 460px;
}

.mediumfont {
	font-size: 1.0em;
}
.smallfont {
	font-size: 0.75em;
}

.datatitle{
	position: absolute;
    left: 180px;
    top: 45px;
    font-size: 2.5em;
    font-weight: 800;
    color: d2a919;
}

.datacontent{
	position: absolute;
    left: 125px;
    top: 215px;
    width: 420px;
    font-size: 0.6em;
    color: d2a919;
    text-align: justify;
    line-height: 1.5;
    font-weight: 600;
}

.tablecontent {
  font-size: 0.9em;
  color: d2a919;
  text-align: left;
  line-height: 1.5;
  font-weight: 600;
}

.dataimage {
  position: absolute;
	left: 650px;
	top: 40px;
	width: 350;
	height: 450;
	font-size: 0.5em;
	color: d2a919;	
}

.dataimg {
	max-width:100%;
	max-height:100%;
}

.backbutton {
	left: 40px;
	top: 104px;
  border: 2px solid black;
  -webkit-animation-name: backPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;


  position: absolute;
  width: 80px;
  height: 19px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #dc6125;
  border: none;

}
.backbutton:active {
	color: #fff;
    background-color: #dc6125;
}

@-webkit-keyframes backPulse {
  from { background-color: #dc6125; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #e98c63; -webkit-box-shadow: 0 0 35px #e98c63; }
  to { background-color: #dc6125; -webkit-box-shadow: 0 0 9px #333; }
}
a.back.button {
  -webkit-animation-name: backPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}

.warningfont {
	font-color: ef433a;
}



@-webkit-keyframes greenPulse {
  from { background-color: #5f8638; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #7da852; -webkit-box-shadow: 0 0 35px #7da852; }
  to { background-color: #5f8638; -webkit-box-shadow: 0 0 9px #333; }
}
a.green.button {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes redPulse {
  from { background-color: #863849; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #a85256; -webkit-box-shadow: 0 0 35px #a85256; }
  to { background-color: #863849; -webkit-box-shadow: 0 0 9px #333; }
}
a.red.button {
  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}