@font-face {
    font-family: 'codexRegular';
    src: url('codex-webfont.eot');
    src: url('codex-webfont.eot?#iefix') format('embedded-opentype'),
         url('codex-webfont.woff') format('woff'),
         url('codex-webfont.ttf') format('truetype'),
         url('codex-webfont.svg#codexRegular') format('svg');
    font-weight: normal;
    font-style: normal;

	}
	
	@font-face {
		font-family: 'codexRegular';
		src: url('codex-webfont.eot');
		src: url('codex-webfont.eot?#iefix') format('embedded-opentype'),
			 url('codex-webfont.woff') format('woff'),
			 url('codex-webfont.ttf') format('truetype'),
			 url('codex-webfont.svg#codexRegular') format('svg');
		font-weight: normal;
		font-style: normal;
	
	}
	
	*{ 

		box-sizing: border-box; 

		margin: 0; 

		padding: 0 

	}

	body {

		color: #eee;

		overflow: hidden;

	}

	#viewport {

		-webkit-perspective: 1000; 

		-moz-perspective: 1000; 

		-o-perspective: 1000; 

		position: absolute;

		left: 0;

		top: 0;

		right: 0;

		bottom: 0;

		overflow: hidden;

		background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

		background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

		background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

		background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

		background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);



		background-image: -webkit-gradient(

			linear,

			left bottom,

			left top,

			color-stop(0.28, rgb(69,132,180)),

			color-stop(0.64, rgb(31,71,120))

		);
		
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F4778', endColorstr='#4584B4');

	}



	#world {

		position: absolute;

		left: 50%;

		top: 50%;

		margin-left: -256px;

		margin-top: -256px;

		height: 512px;

		width: 512px;

		//border: 1px solid rgb( 255, 0, 0 );

		-webkit-transform-style: preserve-3d;

		-moz-transform-style: preserve-3d;

		-o-transform-style: preserve-3d;

	}

	

	#world div {

		-webkit-transform-style: preserve-3d;

		-moz-transform-style: preserve-3d;	

		-o-transform-style: preserve-3d;	

	}

	

	.cloudBase {

		//border: 1px solid #ff00ff;

		position: absolute;

		left: 256px;

		top: 256px;

		width: 20px;

		height: 20px;

		margin-left: -10px;

		margin-top: -10px;

	}

	

	.cloudLayer {

		position: absolute;

		left: 50%;

		top: 50%;

		width: 256px;

		height: 256px;

		margin-left: -128px;

		margin-top: -128px;

		//border: 1px solid red;

		-webkit-transition: opacity .5s ease-out;

		-moz-transition: opacity .5s ease-out;

		-o-transition: opacity .5s ease-out;

	}

	

	#options {

		position: absolute;

		left: 0;

		top: 0;

		margin: 10px;

		padding: 20px;

		width: 400px;

		background-color: rgba( 0, 0, 0, .4 );

		border-radius: 5px;

	}

	

	#optionsContent{

		margin-top: 20px;

		-webkit-transition: all 1s ease-out;

		-o-transition: all 1s ease-out;

	}

	#tasanova {
		position:relative;
		line-height:140px;	
		text-align: center;
		margin-top: 300px;
	}

	h1{
		font-family: 'codexRegular', sans-serif;
		font-size: 140px;
		color: #C00;
		font-weight: normal;

	}
	

	h2{
		font-family: 'Lato', sans-serif;
		margin-bottom: 10px;
		text-shadow: .05em .05em .1em rgba( 69, 132, 180, 1 );
	}

	

	p{

		margin-bottom: 20px;

	}

	

	.actions{

		margin-bottom: 20px;

	}

	

	#textureList li{

		clear: both;

		list-style-type: none;

		position: relative;

		height: 35px;

		padding-top: 10px;

	}

	

	#textureList li span {

		text-transform: capitalize;

	}

	

	#textureList div{

		position: absolute;

		right: 0;

		top: 0;

	}

	

	#textureList li a{

		float: left;

	}

	

	h1 a {
		text-shadow: 0 0 .3em rgba( 22, 76, 117, 1 );
		border: none;
		color: white;
		text-decoration: none;
	}
	h1 a:hover {
		text-shadow: 0 0 .4em rgba( 22, 76, 117, 1 );
	}
	

	#textureControls {

		display: none;

	}

	

	#closeBtn {

		position: absolute; 

		right: 15px;

		top: 10px;

	}

	

	.presets{

	}

	

	.presets a{

		float: left;

	}

	

	.nope{

		text-decoration: line-through;

	}

	

	:-moz-full-screen #options{ display: none }

	:-webkit-full-screen #options{ display: none }

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
		h2 {
			font-size: 3em;
		}

}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) 
and (max-device-width : 480px) {
/* Styles */
		#tasanova {
			margin-top:	80px;
		}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
		#tasanova {
			margin-top:300px;
		}
}