*, *:before, *:after {
  box-sizing: border-box;
}

html {
	background-color: transparent;
	color: #FFF;
	font-size: 12pt;
	font-family: Lato, sans-serif;
}
body {
	width: 960px;
	margin: auto;
    background: -moz-linear-gradient(180deg, rgba(4,1,33,1) 20%, rgba(0,34,83,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(4,1,33,1) 20%, rgba(0,34,83,1) 100%);
background: linear-gradient(180deg, rgba(4,1,33,1) 20%, rgba(0,34,83,1) 100%);
    
}
button#full-screen-button {
    display:flex;
    padding:5px 100px;
    margin: 5px auto 0;
    font-weight:bold;
    font-size:16px;
    border-radius:4px;
    background:rgba(0,0,0,.5);
    align-items: center;
    color:rgba(255,255,255,.8);
    border-color:rgba(255,255,255,.1);
    transition:all ease-in-out .5s;
}


button#full-screen-button:hover {
    border-color:rgba(255,255,255,.8);
    background:rgba(0,0,0,.8);
    color:rgba(255,255,255,.9);
}
button#full-screen-button .material-icons {
    line-height: 100%;
    margin-left:2px;
}
#trademark-symbol {
    font-size:30px;
    position:absolute;
    top:65px; right:150px;
    color:#99c;
    
    
}
#SENTINEL {
	min-width: 960px;
	min-height: 540px;
	width: 960px;
	height: 540px;
	background-color: #024;
	background-image: url( 'img/backdrop.png' );
}
.sentinel-container {
    padding:20px;
    height:540px;
    width:960px;
    display:flex;
    flex-flow:column;
}
#SENTINEL button {
	display: block;
	margin: auto;
	font-size: 1.5em;
    order:2;
}

#SENTINEL #title  {
	background-image: url(splash/title.png);
	height: 195px;
	width: 330px;
	background-repeat: no-repeat;
    background-size:cover;
	margin: 0 auto;
	position: relative;
	}   
  #SENTINEL #title_es {
	background-image: url(splash/title-es.png);
	height: 195px;
	width: 346px;
	background-repeat: no-repeat;
    background-size:cover;
	margin: 0 auto;
	position: relative;
	}    
#SENTINEL #title span,
#SENTINEL #title_es span{
	position: absolute;
        left: -999em;
}

#SENTINEL .instructions-container {
    order:3;
}

#SENTINEL .instructions-container h2 {
margin:1px;
    font-size:18px;
}
#SENTINEL .instructions-text-container {
    display:flex;
    flex-flow: column;
}
#SENTINEL .instructions-text-container  p {
    font-size:14px;
    line-height:20px;
    margin-top:5px;
    margin-bottom:10px;
}

#GAME {
	position: absolute;
	min-width: 960px;
	min-height: 540px;
	width: 960px;
	height: 540px;
	background-image: url( 'img/backdrop.png' );
	outline: none;
    transition: all ease-out .3s;
	overflow: hidden;
}
#FULLSCREEN-TARGET {
   transition: all ease-out .3s; 
}
#GAME * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.highlight-focus {
    border:1px solid #ff0 !important;
}

.tab-button {
	display: grid;
	justify-items: center;
	align-items: center;
	background-color: #222;
	border: 2px solid transparent;
	color: #eee;
	cursor: pointer;
	border-radius: 1em;
}

.tab-button:hover:not(.inactive) {
    box-shadow:rgba(0,157,255,.8) 0 0 20px;
}

.tab-button.inactive {
	opacity: 0.25;
	cursor: default;
}

.tab-button-highlight-focus,
.tab-content-highlight-focus {
    border:2px solid #ff0 !important;
    background-color:rgba(255,255,0,.2 ) !important;
    color: #000;
}

.credits-panel {
	position: absolute;
	left: 30px;
	top: 124px;
	width: 900px;
	height: 292px;
	display: grid;
	border: 3px solid #999;
	background-color: #eee;
	color: #222;
	padding: 1em;
	align-items: center;
	justify-items: center;
}

/*
	We divide the game UI up into a grid of 8x6 cells
	that we can accurately position things into that
	(roughly) correspond to 100px x 100px cells.  You can
	adjust this for whatever your game's dimensions are.
	
	You can inject DOM elements into this div to place them
	on the display.  It is recommended to style their
	position here with grid-column-start/end and
	grid-row-start/end to position them.
*/
#GAME-UI {
	position: absolute;
	display: grid;
	grid-template-columns: 1fr 1fr 540px;
	grid-template-rows: 1fr;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#GAME-UI > div {
	padding: 1em;
}

/*
	Injecting a SCREEN-OVERLAY into GAME-UI covers the
	screen with a darkening effect.  This is useful for
	blacking out background content while a modal dialog
	is in place.
	
	If you change the number of columns and rows above,
	you will need to adjust the grid-*-start/end values
	below.
*/

.SCREEN-OVERLAY {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 540px;
	grid-column-start: 1;
	grid-column-end: 9;
	grid-row-start: 1;
	grid-row-end: 7;
/*	background-color: rgba(0,0,0,0.8);*/
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	grid-template-rows: 1fr 4fr 1fr;
/*    clip-path: url(#clipping);*/
}

.SCREEN-OVERLAY .hole {
    height:200px;
    width:200px;
    border-radius:100px;
    background-color:transparent;
    position:absolute;
    left:10px;
    top:100px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
}
/*
	Injecting a DIALOG into a SCREEN-OVERLAY will place it
	on top of the darkened backdrop.
*/

/*
.DIALOG {
	border: 3px solid #666;
	background-color: #222;
	color: #eee;
	padding: 1em 2em;
	z-index: 10;
	border-radius: 1em;
}
*/
#creature-tooltip.tooltip {
    left:210px;
    top:220px;
}
#stepper-tooltip.tooltip {
    left:200px;
    bottom:100px;
}

#graph-tooltip.tooltip {
    left:400px;
    }
#dropdown-tooltip.tooltip {
    top:50px;
    left:600px;
    }

.DIALOG h1 {
	margin-top: 0em;
}

.DIALOG .options {
	margin-top: 2em;
	margin-bottom: 1em;
}

.DIALOG .option,
.button-outline-green {
    background: transparent;
	font-size: 1.3em;
	padding: 0.25em 0.5em;
	border: 2px solid #22FF89;
    color: #22FF89;
	border-radius: 4px;
	text-align: center;
    margin:auto;
    display:block;
    width:auto;
    max-width:90%;
    transition:all ease-out .5s;
}



.DIALOG .option.highlighted,
.button-outline-green.tab-button-highlighted-focus {
	border: 2px solid #00FF89;
	color: #00FF89;
}

.DIALOG .option.highlighted:hover,
.button-outline-green.tab-button:hover {
    background-color:#222127;
    transform:scale(1.05);
    border: 2px solid #00FF89 !important;
    box-shadow:rgba(0,255,100,.5) 0 0 20px;
}

.DIALOG .option.highlighted:active,
.button-outline-green:active { 
    transform:scale(.9);
    border: 2px solid #00FF89;
    box-shadow:rgba(0,255,100,.9) 0 0 20px;
    
}


.tooltip,
.DIALOG {
	justify-self: center;
	align-self: center;
    max-width:200px; 
    padding:10px 20px;
    color:#48FFFF;
    background-color:#222127;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid #E626FF;box-shadow:0 1px 8px rgba(0,196,255,.83);
}

#controller-help.tooltip {
    max-width:400px;
}

.tooltip .arrow {
    position:absolute;
    overflow:hidden;
}

.tooltip .arrow::after {
    content:'';
    position:absolute;
    background-color:#222127;
    border:1px solid #E626FF;
    box-shadow:0 1px 8px rgba(0,196,255,.83);
    width:12px;
    height:12px;    
}

.tooltip .bottom.arrow {
    top:calc(100% - .2px);
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
}

.tooltip .bottom.arrow::after {
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
}


.tooltip .right.arrow {
    top:50%;
    left:calc(100% - .2px);
    margin-top:-12px;
    width:12px;
    height:24px;
}

.tooltip .right.arrow::after {
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
}

.tooltip .left.arrow {
    top:50%;
    right:calc(100% - .2px);
    margin-top:-12px;
    width:12px;
    height:24px;
}

.tooltip .left.arrow::after {
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
}


.tooltip .top.arrow {
    bottom:calc(100% - .2px);
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
}

.tooltip .top.arrow::after {
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    }

.help .tooltip {
    animation: slide-up .5s ease-out;
}

.help .overlay {
    animation:fade-in .5s ease-out;
}

@keyframes slide-up {
    from {transform:translate(0, 30px);}
    to {transform:translate(0,0);}
}

@keyframes fade-in {
    from {opacity:0;}
    to {opacity:.7;}    
}

/*STEPPER*/

.stepper {    
    position: absolute; 
    background-color: rgba(50,50,50,.4); 
    border: 1px solid rgba(250,250,250,.3); 
    border-radius: 2px; 
    width: 76px; 
    display: grid; 
    grid-template-columns: 22px 31px 22px; 
    grid-template-rows: 18px 22px 14px; 
    padding: 0px; 
    grid-column-gap: 0px; 
    grid-row-gap: 0px; 
    font-size: 10px; 
}
.fingers-stepper {
    grid-template-columns: 74px;
}
.stepper-title {
    font-size:11px;
    border-bottom: 1px solid rgba(250,250,250,.3);  
    padding-bottom: 2px; 
    text-align: center; 
    align-self: center; 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    text-transform:uppercase;
    letter-spacing: 1.5;
    zbackground-color: #222; 
}
.stepper-value {
    align-self: stretch; 
    border-left: 1px solid rgba(250,250,250,.3);  
    border-right: 1px solid rgba(250,250,250,.3);  
    font-weight: bold; 
    font-size: 14px; 
    line-height:1;
    text-align: center; 
    padding-top: 4px; 
    background-color: black; 
}

.down-stepper, 
.up-stepper {
    width: 22px; 
    height: 22px; 
    align-self: middle; 
    display: grid; 
    font-size: 15px; 
    color: #00ff9d; 
    font-weight: bold; 
    line-height:20px;
    cursor:pointer;
}

.down-stepper:hover, 
.up-stepper:hover {
background-color:rgba(250,250,250,.1);
}

.down-stepper:active, 
.up-stepper:active {
background-color:rgba(250,250,250,.2);
    color:#fff;
}

.stepper-note {
    border-top: 1px solid rgba(250,250,250,.3);
    padding-top: 2px; 
    text-align: center; 
    align-self: center; 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    font-size: 8px;
}
.screen-reader-only,
.speak-only {
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(1px 1px 1px 1px); // IE 6 and 7
	clip: rect(1px,1px,1px,1px);
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	overflow: hidden !important;
}

/*
	During development, this styling allows you
	to see what the screen reader will be speaking.
	For production, you can turn it off by just setting
	it to .screen-reader-only.
*/

#EMCEE {
	border: 1px solid #012;
	background-color: #012;
	color: #369;
/*	padding: 1em;*/
}


#add-creature-button {
    position: absolute; 
    left: 0px; 
    width: 268px; 
    top: 70px; 
    height: 268px; 
/*    border-radius: 134px; */
    border: 1px solid transparent;
    cursor:pointer;
    transition: transform .4s ease-out;
            
}

#add-creature-button:hover {
    transform: scale3d(1.05,1.05,1.05);
}

#add-creature-button:active {
 transform: scale3d(.97,.97,.97);
}   

#trash {
    position:absolute;
    height:36px;
    width:36px;
    left: 10px;
    top: 55px; 
    cursor: pointer; 
	border: 1px solid transparent; 
	border-radius: 0; 
}

#help {
	position: absolute; 
	right: 42px; 
    top: 8px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
	border: 1px solid transparent; 
	border-radius: 0; 
}

#audio {    
	position: absolute; 
	right: 8px; 
    top: 8px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
	border: 1px solid transparent; 
	border-radius: 0; 
    z-index:2;
}

#return {
    position:absolute;
    left:10px;
    top:10px;
    z-index:1;
}

#credits-title {
    position:absolute;
    width:100%;
    text-align:center;
    font-family:Oswald;
    color:rgba(0,255,100,1);
    text-transform:uppercase;
    letter-spacing: 1;
    text-shadow:rgba(0,255,100,.5) 1px 1px 10px;
    transition:all ease-out .5s;
}

#credits-title:hover {
    color:rgba(0,255,100,.0);
    text-shadow:rgba(0,255,100,1) 1px 1px 10px;
    transform:scale(1.1) translate(0, -5px);
}

#play {
    position:absolute;
    left:calc(50% - 60px);
    bottom:30px;
    height:80px;
    width:120px;
    padding:10px 10px 10px 10px;
    z-index:10;
    font-size:36px;
    font-weight:bold;
    text-transform:uppercase;
/*    letter-spacing: 2;*/
    line-height:1;
    color:rgba(230,38,255, 1);
    transition:all ease-out .5s;
    box-shadow:0 1px 16px rgba(230,38,255, .8);
}

#play.tab-button {
   border: 2px solid rgba(230,38,255, 1);
    background:rgba(0,0,0,.1);
    border-radius:30px;
    display:flex;
    align-items:center;
    text-align: center;
    justify-content:center;    
}

#play.tab-button:hover{
    color:rgba(230,38,255, 1);
    background:rgba(0,0,0,.2);
   border: 2px solid rgba(230,38,255, 1) !important;
        box-shadow:0 1px 40px rgba(230,38,255, .9);
    transform:scale(1.02) translate(0, -4px);
}

#play.tab-button:active{
    transform:scale(.95);
}

#play.tab-button-highlighted-focus {
    background:rgba(0,0,0,.2) !important; 
}

#play .material-icons {
    font-size:60px;
    line-height:100%;
}


#credits {
    position:absolute;
    left:20px;
    bottom:20px;
    z-index:10;
}
#credits-next,
#rightArrow {
    position:absolute;
    right:10px;
    bottom:20px;
    z-index:1;
}

#credits-previous,
#leftArrow {
    position:absolute;
    left:10px;
    bottom:20px;
    z-index:1;
}

#return-to-main-menu {
    position:absolute;
    left:0;
    top:0;
}

#dismiss-help {
    position:absolute;
    right:42px;
    top:8px;
    height:36px;
    width:36px;
    border-radius:0;
    border:none;
    cursor:pointer; 
    z-index:11;        
} 


.ui-button-wide {
	width: 268px;
    height:36px;
    margin:0;
    padding:0;    
    transition:all .25s ease-out;
    cursor:pointer;
    border:1px solid transparent;
}

.ui-button-wide.arrow-button {
    background:transparent url('img/arrowDown.png') center center no-repeat;
    background-image:url('img/arrowDown.svg');
    border:none;
    background-size:45px auto;
}

.ui-button-wide.arrow-button.arrowUp {
    background-image:url('img/arrowUp.png');
    background-image:url('img/arrowUp.svg');
}

.ui-button-wide.arrow-button.arrowUp:hover {
    transform:translate( 0, 2px);
     -webkit-filter: drop-shadow(0px -1px 7px rgba(0,230,255,1) );
     filter: drop-shadow(0px -1px 7px rgba(0,230,255,1) );
}

.ui-button-wide.arrow-button.arrowDown:hover {
    transform:translate( 0, -2px);
       -webkit-filter: drop-shadow(0px 1px 7px rgba(0,230,255,1) );
     filter: drop-shadow(0px 1px 7px rgba(0,230,255,1) );
}

.ui-button-wide.arrow-button.arrowUp:active {
    transform:translate( 0, -5px);
}

.ui-button-wide.arrow-button.arrowDown:active {
    transform:translate( 0, 5px);
}

.ui-button.exit-button {
    background:transparent url('img/return-arrow.png') center center no-repeat;
    background-image:url('img/return-arrow.svg');
    width:34px;
    height:36px;
}

.ui-button.exit-button:hover {
     transform:translate( 2px, 0);
    color:#fff;
        box-shadow:rgba(0,157,255,.8) 0 0 20px;

}

.ui-button.exit-button:focus,
.ui-button.exit-button.tab-button-highlight-focus,
.next-button.tab-button-highlight-focus,
.prev-button.tab-button-highlight-focus
{
    color:#fff; 
}

.ui-button.exit-button:active {
     transform:translate( -2px, 0);
}


#return.ui-button.exit-button {
    width:auto;
    background-position:2px center;
    padding: 2px 2px 2px 36px;
    border:2px solid transparent;
    box-shadow:;
}

#return.ui-button.exit-button:hover {
    
}

.ui-button.close span {
    animation:rotate-360 .25s ease-out;
}


.ui-button {
    height:24px;
    width:24px;
    margin:6px;
    border-radius:5px;
    transition:all .25s ease-out;
    text-align:center;
    border:1px solid rgba(255,255,255,0);
    padding:0;
    display:grid;
    cursor:pointer;
    align-items:center;
    text-transform:uppercase;
}



.ui-button:hover {
    transform:scale(1.05);
} 
.ui-button:active {
    transform:scale(.95);
}
.ui-button.blue {
    background:rgba(72,255,255,1); /*#48ffff*/
    color: #222127;
    box-shadow:rgba(72,255,255,0) 0 0 20px;
}

.ui-button.blue:hover {
    background:rgba(0,255,255,.9); 
    box-shadow:rgba(0,255,255,.9) 0 0 20px;
    }

.ui-button.green {
    background:rgba(0,255,157);
    color:#222127;
    box-shadow:rgba(0,255,157,0) 0 0 20px;
}
.ui-button.green:hover {
    background:rgba(0,255,100);
    color:#222127;
    box-shadow:rgba(0,255,100,.9) 0 0 20px;
}

.ui-button .text-icon {
    margin:auto;
    font-size: 18px;
    font-weight:bold;
    display: inline-block;
    line-height: 24px;
}

.ui-button .material-icons {
    margin:0 -1px;
    line-height:22px
}

.ui-button.next-button,
.ui-button.prev-button
{
    background: url('mainmenu/chevron-right.png') right center no-repeat;
    height:60px;
    width:auto;
    padding:2px 24px 2px 2px;
    border:2px solid transparent;
}
.ui-button.next-button:hover,
.ui-button.prev-button:hover {
    box-shadow:rgba(0,157,255,.8) 0 0 20px;
}

.ui-button.prev-button {
    background-image: url('mainmenu/chevron-left.png');
    background-position:left center;
    padding:2px 2px 2px 24px;
}

#sound-button .ui-button {
    height:20px;
    width:20px;
    margin:6px;
}
#sound-button .ui-button .material-icons {
    width:18px;
    font-size:18px;
    line-height:18px;
}

#tag {
    transition:all ease-out .5s;
}

#tag:hover  {
    transform:scale(1.2);    
    -webkit-filter: drop-shadow(0px 0px 5px rgba(230,38,255, 1) );
     filter: drop-shadow(0px 0px 5px rgba(230,38,255, 1) );
}

#tag:active {
    transform:scale(.9);
}

@keyframes rotate-360 {
    from{
    transform:rotate(45deg);
    }
    to{
    transform:rotate(90deg);
        
    }
}
/*
	Always show the help screen information above everything
	else.
*/
#HELP-SCREEN-OVERLAY {
	z-index: 1000;
/*	background-image: url('img/help_overlay.png');*/
	background-repeat: no-repeat;
	background-position: center center;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
}

#CONTROLLER-HELP {
	width: 450px;
	position: absolute;
}

#cave-graph {
	position: absolute;
	right: 0px;
	bottom: 0px;
    border: 1px solid rgba(255,255,255,0); 
    border-top-color:rgba(255,255,255,.2); 
}

#cave-header {
    position: absolute; 
    width: 268px;
    height: 46px; 
    text-align:center;
    padding: 10px; 
border-bottom: 1px solid rgba(255,255,255,.2); 
			
}
#cave-name {
    font-family:Oswald;
    text-align:center;
    font-size:20px;
    color:rgba(27,197,255,1);
    line-height:26px;
    letter-spacing:1.2;
    text-shadow:0 0 5px rgba(27,197,255,.1);
    transition:all ease-out .5s;
}

#cave-name:hover {
    color:rgba(27,197,255,.0);
    transform:scale(1.1);
    text-shadow:0 0 5px rgba(27,197,255,1);
}


.data-table-header {
	position: absolute;
	left: 268px;
	left: 0px;
	top: 0px;
	width: 204px;
	height: 46px;
	display: grid;
	grid-template-columns: 2fr 3fr 3fr 2fr;
	grid-template-rows: 1fr 1fr;
	grid-column-spacing: 10px;
	align-items: center;
	justify-items: center;
	text-align: center;
	font-size: 16px;
    font-family:Oswald;
	background-color: rgba( 0, 0, 0, 0.45);
    border-bottom:1px solid rgba(255,255,255,.2);
}

.data-table {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	grid-template-rows: auto;
	color: #fff;
	width: 204px;
	height: 490px;
	padding: 0px 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-border: 1px solid #666;
}

.data-table-row {
	display: grid;
	align-self: stretch;
	grid-template-columns: 2fr 3fr 3fr 2fr;
	align-items: center;
	border: 2px solid transparent;
}
.axis-label {
    color:rgba(0,255,157,1);
}
.data-table .highlighted {
	background-color: rgba( 153, 204, 255, 0.2 ) !important;
	border: 2px solid #9cf;
	border-radius: 5px;
}

.data-table-row:nth-child( 2n+1 ) {
	background-color: rgba( 0, 0, 0, 0.2 );
}

.data-table-row:nth-child( 2n ) {
	background-color: rgba( 0, 0, 0, 0.1 );
}

.data-table > div {
	text-align: center;
}

.graph-area {
	position: relative;
}
.sorting-icon{
    font-size20px;
    transition:all ease-out .25s;
    color:rgba(255,255,255,.5);
}

.sorting-icon:hover:active,.sorting-icon:active {    
    transform:scale(.9) translate(0,3px);
    color:rgba(200,255,255,1);
}

.sorting-icon:hover {    
    transform:scale(1.1);
    
    color:rgba(200,255,255,.8);
}

.sorting-icon.sorted {
    transform:scale(1.5);
    color:rgba(255,255,255,1);

}

.sorting-icon.sorted:active {    
    transform:scale(1.2) translate(0,3px);
    color:rgba(200,255,255,1);
}

#graph-header {
    position: absolute; 
    right: 65px; 
    top: 0px; 
    width: 410px; 
    height: 48px; 
    display: grid; 
    grid-template-columns: 145px 100px 25px 100px; 
    grid-column-gap: 5px; 
    align-items: center; 
    justify-items: center; 
    padding: 14px 10px 8px 10px; 
    color: #1bc5ff; 
    font-style: italic; 
}

.x-axis-legend {
	position: absolute;
	border: 1px solid #0f0;
	bottom: 1em;
	left: 0%;
	width: 100%;
	text-align: center;
}
.y-axis-legend {
	position: absolute;
	transform-origin: 0% 0%;
	transform: rotate(90deg);
	border: 1px solid #0f0;
	top: 0%;
	left: 2em;
	width: 100%;
	text-align: center;
}

.overlay {
    background:no-repeat 0 0;
    position:absolute;
    top:0;
    left:0px;
    height:540px;
    width:960px;
    z-index:10;
/*    transition:all 1s ease-in;*/
    opacity:.7;
    background-color: rgba(0,0,0,.5);
    
}

#overlay-1.overlay  {
    background-color: rgba(0,0,0,.0);
    background-image:url('img/overlay1.png');
}
#overlay-2.overlay  {
    background-color: rgba(0,0,0,.0);
    background-image:url('img/overlay2.png');
}
#overlay-3.overlay  {
    background-color: rgba(0,0,0,.0);
    background-image:url('img/overlay3.png');
}
#overlay-4.overlay  {
    background-color: rgba(0,0,0,.0);
    background-image:url('img/overlay4.png');
}

 
#credits-box {
    position: absolute; 
	left: 30px; 
	top: 65px; 
	width: 900px; 
	height: 380px; 
	display: grid; 
	background-color: rgba(0,0,0,.4); 
    border-color:transparent;
	color: #fff; 
	align-items: center; 
	justify-items: center; 
    box-shadow: rgba(0,0,0,.8) 0 0 100px;
}

#credits-box dt {
    text-transform:uppercase;    
    font-weight:bold;
    font-size:12px;
    color:rgba(0,255,100,1);
}

#credits-box dd {
    margin:7px 0;
    line-height:1;
    font-size:15px;
}

.credits-role {
    font-size:13px;
}

.credits-role:before {
    content:'\A';
    white-space: pre;
}

#credits-statements p {
    font-size:15px;
}
#credit-logos {
    margin:10px 50px;
}
#credit-logos img {
/*
 width:90%;
height:auto;
    max-width:250px;
*/
}