body
{
    min-width:100vw;
    max-width:100vw;
    width:100vw;
    min-height:100vh;
    max-height:100vh;
    height:100vh;
    padding:0;
    margin: 0 auto;
    cursor:none;
}

.pres-title {
    margin: 10% 10% 0;
    border: solid 1px;
    border-radius: 40%;
    background-color: #6dd5ed;
    font-size: 2em;
}

.printer
{
	position:absolute;
    width:15vh;
    height:15vh;
    background: url("print-512.png") no-repeat center;
    background-size: contain;
    z-index:100;
    text-align: center;
    vertical-align:middle;
    top:1vh;
    right:1vh;
    cursor:pointer;
    display:none;
}
#printCaption
{
	display:none;
}
#body
{
    min-width:100vw;
    max-width:100vw;
    width:100vw;
    min-height:100vh;
    max-height:100vh;
    height:100vh;
    padding:0;
    margin: 0 auto;
    background: url('coralReef.jpg') no-repeat center;
    background-size:cover;
    background-color: #0077be;
    cursor:none;
}
#semi
{
    background-color:rgba(125,125,125,0.5);
    margin:0;
    height:100%;
    width:100%;
}
.playerOpen
{
    background: url("Turtle Open.png") no-repeat center;
}
.playerClosed
{
    background: url("Turtle Closed.png") no-repeat center;
}
#sharkRotator
{
    height:100%;
    width:100%;
}
#sharkMover
{
    border-radius:50%;
    position:absolute;
    top: 5vh;
    left: 5vw;
    height: 10vh;
    width: 10vw;
    z-index:10;
	-webkit-transition-duration:1.5s;
	-moz-transition-duration:1.5s;
	-o-transition-duration:1.5s;
	-ms-transition-duration:1.5s;
	transition-duration:1.5s;
}
#shark
{
    width:100%;
    height:100%;
    background-size: contain;
    cursor:pointer;
}
.sharkOpen
{
    background: url("shark Open.png") no-repeat center;
}
.sharkClosed
{
    background: url("shark Closed.png") no-repeat center;
}
#startGame
{
    width:50%;
    font-family: 'Roboto', sans-serif;
    border-radius: 40%;
    cursor:pointer;
	-webkit-transition-duration:2s;
	-moz-transition-duration:2s;
	-ms-transition-duration:2s;
	-o-transition-duration:2s;
	transition-duration:2s;
    font-size:2em;
    background-color: #FC466B;
}
#startGame:hover 
{
    background-color: #6dd5ed;
}
#howToBG
{
    cursor:auto;
    position:absolute;
    z-index:20;
    bottom:0;
    left:0;
    height:100vh;
    width:100vw;
    margin:0 auto;
    display:block;
    background-color:#000000;
    opacity:1;
    text-align:center;
    overflow: hidden;

}

#howTo
{
    display:block;
    position:absolute;
    z-index:20;
    width:50vw;
    height:90vh;
    max-height:90vh;
    margin:0 auto;
    display:block;
    left:25vw;
    top:5vh;

    background: #FC466B;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #6dd5ed, #FC466B);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #6dd5ed, #FC466B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    opacity:1;
    text-align:center;
    border-radius: 5vh;
    overflow: hidden;
}
a
{
    text-decoration:none;
    color:red;
}
h1
{
    font-family: 'Roboto', sans-serif;
}
h2
{
    font-family: 'Roboto', sans-serif;
}
p
{
    font-family: 'Roboto', sans-serif;
}
li
{
    font-family: 'Roboto', sans-serif;
    
}
.colList
{
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    -o-columns: 2;
    columns: 2;
    list-style-type:none;
    overflow:hidden;
    padding:0;
}
.lifesaver
{
    position:absolute;
    width:25vh;
    height:25vh;
    background: url("lifeSaver.png") no-repeat center;
    background-size: cover;
    z-index:11;
    text-align: center;
    vertical-align:middle;
    font-size:1.5em;
}
.lifesaver div
{
    font-family: 'Roboto', sans-serif;
    color: black;
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    height:inherit;
    width:inherit;
}

.circle {
    background: #ddd;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin: 20%;
    background-color: rgba(0, 255, 255, 0.5)
}

#ring_zack-light
{
    left:45vw;
    top:2vh;

}
#ring_knox
{
    top:42.5vh;
    left:2vw;
}
#ring_game-plan
{
    top:42.5vh;
    right:2vw;
}
#ring_thank-you
{
    bottom:2vh;
    right:2vw;
}
#ring_datathon
{
    bottom:2vh;
    left:2vw;
}
#ring_neuro-circuit
{
    top:25vh;
    left:25vw;
}
#ring_confound
{
    top:25vh;
    right:25vw;
}
.bubbles
{
    display:none;
    position:absolute;
    -webkit-transition-duration:5s;
    -moz-transition-duration:5s;
    -ms-transition-duration:5s;
	-o-transition-duration:5s;
	transition-duration:5s;
    z-index:11;
    height:3vh;
    width:3vh;
    background: url("bubble.png") no-repeat center;
    background-size: contain;
}
.detail
{
    position:absolute;
    z-index:12;
    top:5vh;
    height:90vh;
    max-height:90vh;
    width:90vw;
    max-width:90vw;
    margin:0 auto;
    display:none;
    left:5vw;
    background: url("beach.jpg") no-repeat bottom;
    background-color: #EED6AF;
    background-size: cover;
    opacity:1;
    text-align:center;
    border-radius: 5vh;
    cursor:initial;
}
.detailContent
{
    width: 90%;
    margin: 10px auto;
    padding: 0;
    height: 92%;
    /*overflow-x: scroll;*/
    /*overflow-y: scroll;*/
}

.detailScroller
{
	position:relative;
	bottom:0;
	height:5vh;
	background-color:yellow;
	width:5vh;
	background: url("arrow-down.png") no-repeat center;
	margin:0 auto;
	border: thick solid white;
	border-radius:50%;
	display:none;
}

/*iframe {*/
/*    position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:2;*/
/*    width: 1920px;*/
/*    height: 1080px;*/
/*    left: 412px;*/
/*    top: 131px;*/
/*}*/

  .returnToSea
{
    /*min-width: 5vh;*/
    width:auto;
    float: right;
    display: block;
    text-align: right;
    right: 0vh;
    position: relative;
    top: 5vh;
    font-size:1.5em;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -ms-transition-duration:1s;
	-o-transition-duration:1s;
	transition-duration:1s;
    padding:1vh;
    border-radius:2.5vh;
}

#githubProfile
{
    text-align:center;
}
.avatar
{
    display:block;
    width:10vw;
    height:10vw;
    margin:0 auto;
    background: url('avatar.jpg') no-repeat center;
    background-size:cover;
    border-radius:50%;
}
#mobileAvatar
{
	display:none;
}
#printAvatar
{
	display:none;
}
#playerMover
{
    border-radius:50%;
    position:absolute;
    top: 45vh;
    left: 45vw;
    height: 10vh;
    width: 10vw;
    z-index:10;
    -webkit-transition-duration:0s;
    -moz-transition-duration:0s;
    -ms-transition-duration:0s;
	-o-transition-duration:0s;
	transition-duration:0s;
}
#playerRotator
{
    height:100%;
    width:100%;
}
#player
{
    width:100%;
    height:100%;
    background-size: contain;
}
.mover
{
    position:absolute;
    z-index:9;
    height:7vh;
    width:7vh;
    display:none;
	-webkit-transition-duration:5s;
	-moz-transition-duration:0s;
	-ms-transition-duration:0s;
	-o-transition-duration:5s;
	transition-duration:5s;
}
.rotator
{
    height:100%;
    width:100%;
}
.jellyfish
{
    height:100%;
    width:100%;
    background: url("jellyfish.png") no-repeat center;
    background-size: contain;
}
#mobileTitle
{
	display:none;
	margin:0 auto;
	text-align:center;
}
#printTitle
{
	display:none;
}
.iframedReplacer
{
	display:none;
}
#snackbarContainer
{
	display:none;
	width:100vw;
	min-width:100vw;
	max-width:100vw;
	margin:0;
	padding:0;
	position:fixed;
	z-index: 30; /* Add a z-index if needed */
	bottom: 30px; /* 30px from the bottom */
}
#snackbar
{
	padding-top:10px;
	padding-bottom:10px;
    display:block; /* Hidden by default. Visible on click */
    width:50%;
    max-width: 50%; /* Set a default minimum width */
	margin:0 auto;
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
}
@media only screen and (max-width: 850px){
	.colList
	{
		-webkit-columns: 1;
		-moz-columns: 1;
		-ms-columns: 1;
		-o-columns: 1;
	    columns: 1;
	}
	.lifesaver
	{
	    position:absolute;
	    width:15vh;
	    height:15vh;
	    background-size: cover;
	    z-index:11;
	    text-align: center;
	    vertical-align:middle;
	    font-size:1em;
	}
}
@media only screen and (max-width: 500px){
	#assets
	{
		display:none;
	}
    body
    {
	    min-height:100vh;
	    max-height:none;
	    height:auto;
	    padding:0;
	    margin: 0 auto;
	    background-repeat-y:repeat;
	    background-position:top;
	    background-color: #0077be;
	    cursor:auto;
    }
    #body
    {
	    min-height:100vh;
	    max-height:none;
	    height:auto;
	    padding:0;
	    margin: 0 auto;
	    background-repeat-y:repeat;
	    background-position:top;
	    background-color: #0077be;
	    cursor:auto;
    }
    #snackbar
    {
    	width:100%;
    	max-width:100%;
    }
    #howToBG
    {
    	display:none;
    }
    #mobileAvatar
    {
    	display:block;
    	width:50vw;
    	height:50vw;
    	
    }
    #lifesaverContainer
    {
    	display:none;
    }
    .detail
    {
    	display:block;
    	position:initial;
    }
    #mobileTitle
    {
    	display:block;
    }
    #playerMover
    {
    	display:none;
    }
    #sharkMover
    {
    	display:none;
    }
    .returnToSea
    {
    	display:none;
    }
    .detail
    {
    	height:auto;
    	max-height:none;
    }
    .detailContent
    {
    	height:auto;
    	max-height:none;
    	overflow-x:initial;
    }
    .iframedContent
    {
    	display:none;
    }
    .iframedReplacer
    {
    	display:block;
    	word-wrap:break-word;
    }
    .printer
	{
		position:unset;
		margin:0 auto;
	    width:7vh;
	    height:5vh;
	    background-size: contain;
	    z-index:100;
	    text-align: center;
	    vertical-align:middle;
	    cursor:pointer;
	    display:block;
	}
	#printCaption
	{
		display:block;
	}
}