@font-face {
	 font-family:"TitleText";
	 /*src:url(../fonts/Sequi/Sequi_regular.otf);*/
	}

	H2{
		font-family:"Times New Roman",Georgia,Serif;
	}

	#loadingBoard
	{
		position: absolute;
		top: 45%; width: 10%;
		left: 45%;
		color: #111;
		padding: 5px;
		font-family: Monospace;
		font-size: 13px;
		/*text-align: center;*/
		vertical-align:text-middle;
		z-index:200;
		margin: 0%;
		/*display:none;*/
		overflow:auto;
	}

	.fadeout
	{
		opacity:0;
		transition: opacity 0.2s linear;
		-moz-transition: opacity 0.2s linear;
		-o-transition: opacity 0.2s linear;
		-webkit-transition: opacity 0.2s linear;
	}


	#info {
		position: absolute;
		top: 10%; width: 80%;
		height:80%; left: 10%;
		color: #010101;
		padding: 5px;
		font-family: Monospace;
		font-size: 13px;
		/*text-align: center;*/
		vertical-align:text-middle;
		z-index:200;
		margin: 0%;
		/*display:none;*/
		overflow:auto;
	}

	#backHtmlButton
	{
		position:fixed;
		top:10px;
		left:10px;
		width:40px;
		border-radius: 20px;
		border: solid 1px #000000;
	}

	#backHtmlButton:hover
	{
		top:8px;
		left:8px;
		width:44px;
		border-radius: 22px;
	}

	#infoSmall 
	{
		position: absolute;
		left:15%;
		top: 30%; width: 70%;
		height:40%;
		color: #010101;
		padding: 5px;
		font-family: Monospace;
		font-size: 13px;
		text-align: center;
		z-index:200;
		display:none;
		overflow:auto;
	}

	#circle 
	{
		position:absolute;
		left:5px;
		bottom:5px;
		width:70px;
		height:70px;
		border-radius:35px;
		font-size:20px;
		color:#000;
		line-height:100px;
		text-align:center;
		background:#f9dfcb;
		display:none;
	}

	#roundCorner
	{
		position: absolute;
		left: 30%; width: 40%;
		top: 20%; height:60%;
		color: #010101;
		background-color: rgba(250, 250, 250, 0.8);
		font-family: Monospace;
		border: solid 1px #000000;
		text-align: center;
		vertical-align: middle;
		padding: 5px;
		z-index:200;
		display:none;
		overflow:auto;
		border-radius: 20px;
	}

	#backButtonsContainer
	{
		position:absolute;
		bottom:5px;
		height:110px;
		width:50%;
		z-index:500;
	}

	.BackCircle
	{
		bottom:0px;
		position:absolute;
		width:70px;
		height:70px;
		background-color: #f0f0f0;
		-moz-border-radius: 35px;
		-webkit-border-radius: 35px;
		border-radius:35px;
		font-size:16px;
		border: solid 1px #000000;
		color:#000;
		line-height:70px;
		text-align:center;
		/*display:none;*/
	}
@media screen and (min-width: 768px)
{
	.BackCircleLeft
	{
		bottom:-10px;
		position:absolute;
		width:80px;
		height:80px;
		border-radius:40px;
		border: solid 1px #000000;
		font-size:100px;
		color:#000;
		line-height:70px;
		text-align:center;
		background:#f0f0f0;
	}
}

@media screen and (max-width: 768px)
{
	.BackCircleLeft
	{
		bottom:-5px;
		position:absolute;
		width:40px;
		height:40px;
		border-radius:20px;
		border: solid 1px #000000;
		font-size:100px;
		color:#000;
		line-height:35px;
		text-align:center;
		background:#f0f0f0;
	}
}

	.BackCircle:hover 
	{
	 cursor:pointer;
	}

	.BackCircleLeft:hover 
	{
	 cursor:pointer;
	}

	i:hover {
	 cursor:pointer;
	}

	.soundCanvas
	{
		position:absolute;
		z-index:-100;
		display:none;
	}

	#circle:hover{
	cursor:pointer;	
	}

/*	#contactButton
	{
		position:absolute;
		right:6%;
		bottom:1%;
		width:5%;
		display:none;
		border-radius:50%;
		opacity: 0.7;
	}*/

	#contactButton
	{
		position:absolute;
		right:1%;
		bottom:1%;
		width:5%;
		display:none;
		border-radius:50%;
		opacity: 0.7;
	}

	#contactButton:hover,
	#githubButton:hover
	{
		-moz-box-shadow: 0px 4px 4px #000;
		-webkit-box-shadow: 0px 4px 4px #000;
		box-shadow: 0px 4px 4px #000;
	}

	#sm2-container{
		position:absolute;
		top:-500;
		left:-500;
	}

	a:link {color:#303000;text-decoration: none}      /* unvisited link */
	a:visited {color:#303000;text-decoration: none}  /* visited link */
	a:hover {color:#606060; text-decoration:none;}  /* mouse over link */
	a:active {color:#606060; text-decoration:none;}  /* selected link */