/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 5, 2015, 4:52:36 PM
    Author     : splendid
*/

@font-face {
	font-family: 'permanent_marker';
	src: url('../fonts/PermanentMarker-webfont.eot');
	src: url('../fonts/PermanentMarker-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/PermanentMarker-webfont.woff') format('woff'),
		 url('../fonts/PermanentMarker-webfont.ttf') format('truetype'),
		 url('../fonts/PermanentMarker-webfont.svg#permanent_markerregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Woodland-Bold';
	src: url('../fonts/Woodland-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Woodland-Bold.otf') format('opentype'),
		 url('../fonts/Woodland-Bold.woff') format('woff'),
		 url('../fonts/Woodland-Bold.ttf') format('truetype'),
		 url('../fonts/Woodland-Bold.svg#Woodland-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
}

html {
	width: 100%;
	height: 100%;
	background: #01161b;
}

body {
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: 'permanent_marker', Arial, sans-serif;
}

*,
*:hover {
	cursor: url(../images/intro/default-cursor.svg), url(../images/intro/default-cursor.svg), auto;
}

:focus {
	outline: none;
}

.canvas {
    position: relative;
    width: 100%;
	height: 860px;
	margin: 0 auto;
    overflow: hidden;
}

/* Prevent overscroll bounce on mobile while interacting with the game */
html, body {
    overscroll-behavior: none;
    touch-action: none;
}

.canvas-hidden {
	position: absolute;
	top: 0px;
	left: -1000px;
	right: -1000px;
}

.canvas-fixed {
	width: 1640px;
	margin: 0 auto;
}

.loading {
    width: 100%;
	height: 940px;
    margin: 0;
    padding: 0;
}

.loading-1 {
	background: url(../images/intro/screen-01.jpg) center top no-repeat;
}

.loading-2 {
	background: url(../images/intro/screen-03.jpg) center top no-repeat;
}

.logo {
    position: fixed;
    left: 50%;
	margin-left: -160px;
    top: 38px;
	width: 438px;
	z-index: 4;
}

.logo img {
	display: block;
	width: 100%;
	height: 100%;
}

.logo.screen1 {
}

.logo.screen2 {
}

.load-box {
    position: fixed;
    width: 470px;
    height: 53px;
	padding: 32px 45px 38px 24px;
    background: url(../images/intro/load-box.png) no-repeat;
    top: 65%;
	z-index: 199;
	text-align: center;
}

.load-box.screen1 {
    left: 50%;
	margin-left: -270px;
}

.load-box.screen2 {
    left: 50%;
	margin-left: -270px;
}

.logo,
.load-box {
	-webkit-transition: transform 800ms ease-in-out;
	-moz-transition: transform 800ms ease-in-out;
	-ms-transition: transform 800ms ease-in-out;
	-o-transition: transform 800ms ease-in-out;
	transition: transform 800ms ease-in-out;
}

.logo.inactive {
	-webkit-transform: translate3d(0,-800px,0);
	-moz-transform: translate3d(0,-800px,0);
	-ms-transform: translate3d(0,-800px,0);
	-o-transform: translate3d(0,-800px,0);
	transform: translate3d(0,-800px,0);
}

.load-box.inactive {
	-webkit-transform: translate3d(0,800px,0);
	-moz-transform: translate3d(0,800px,0);
	-ms-transform: translate3d(0,800px,0);
	-o-transform: translate3d(0,800px,0);
	transform: translate3d(0,800px,0);
}

.progress-clip {
	width: 470px;
	height: 53px;
	overflow: hidden;
}

.progress-container {
	width: 0px;
	height: 53px;
	background: url(../images/intro/load-progress.png) no-repeat;
	position: relative;
	overflow: visible;
}

.progress {
    position: absolute;
	top: 0px;
	right: -7px;
	width: 14px;
	height: 53px;
	background: url(../images/intro/load-highlight.png) no-repeat;
	z-index: 10;
}

.progress-percentage {
	position: absolute;
	top: 32px;
	left: 50%;
	margin-left: -20px;
    width: 40px;
    text-align: center;
	font-size: 22px;
	line-height: 53px;
	color: #1c4850;
}