body, html
{
	margin: 0;
	height: 90%;
    min-width:250px;
	overflow: hidden;

    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#page-wrapper 
{
    position: absolute;
    top: 60px;

    height: calc(100% - 60px);
    width: 100%;
}

#canvas-container #canvas
{
	margin-top: 0;
    position: relative;
    top: 20px;
}

#glass
{
	position: fixed;
	top: 0;
	
	height: 100%;
	width: 100%;
	
	z-index: 100;
	
	background-color:black;
	opacity: 0.5;
	
	display: none;
}

#loading-section
{
	position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
	z-index:101;
}

#loading-section .loading-text
{
	color: white;
    position: relative;
    top: 20%;
    left: 40%;
	font-size: 1.6em;
}

#loading-section.removed
{
	display:none;
}

#loading-section .loading-bar
{
	position: absolute;
    background-color: #6a8892;
    height: 5%;
    width: 60%;
    margin: 0 auto;
    top: 25%;
    left: 20%;
    border-radius: 15px;
    overflow: hidden;
}

#loading-section .loading-bar .progress
{
	background: #A50000;
    height: 100%;
	width: 0;
}

#animation_container
{
	height: 100%;
	width: 100%;
}

#canvas-container
{
	width:74%;
	float:left;
	height: 100%;
}


#canvas
{
	display: block;
	background-color:white;
}

#glass.active
{
	display: inherit;
}

.debug-container
{
	position: fixed;
	top: 0;
	left: 0;
    display: none;
}


@media (max-width: 800px)
{
	#canvas-container
	{
		width: 100%;
		float: initial;
		height: 100%;
	}

	#page-wrapper 
	{
		position: absolute;
		top: 8px;

		width: 100%;
	}

    #animation_container 
	{
        height: calc(100% - 50px);
		top: 30px;
		position: relative;
    }
}

@media (max-width: 500px)
{
	#loading-section .loading-text
	{
		font-size: 1em;
		top: 10%;
	}

	#loading-section .loading-bar
	{
		top: 15%;
	}

	#page-wrapper {
		top: 40px;
		height: calc(100% - 90px);
        background-color: #fff;
	}

	#animation_container
	{
		height: 100%;
        top: 0px;
	}
}

@media (min-width: 768px)
{
    #loading-section .loading-text
    {
        left: 43%;
    }
}

@media (min-width: 1024px)
{
    #loading-section .loading-text
    {
        left: 46%;
    }

    #loading-section .loading-bar 
    {
        width: 40%;
        top: 25%;
        left: 30%;
    }
}

@media (min-width: 1367px)
{
    #loading-section .loading-text
    {
        left: 47.5%;
    }

    #loading-section .loading-bar 
    {
        width: 20%;
        top: 25%;
        left: 40%;
    }

    #canvas-container #canvas
	{
		top: 0px;
	}
}

@media (min-width: 801px) 
{
	#canvas-container #canvas 
	{
		top: 0px;
	}
}