@charset "utf-8";
/*
@import "ui.base.css";
@import "ui.theme.css";
*/


* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body {
	width:100%;
	height:100%;
	animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */

} /* just to be sure these are full screen*/

canvas { 
	display:block;
	
	/*border: 1px solid #00FF0D;*/

} /* To remove the scrollbars */

#canvas {

/*border: 4px solid  #FF9600;*/
    
}   






/*

.disable-dbl-tap-zoom {
  touch-action: manipulation;
  user-select: none;
}


*/


/* visualizzazione normale senza il controllo dell'orientamento */
  #turn { 
	  position: relative;
	  display:none; }

	body{
		background-color: #cce6f7;
	}

/*
  #container { 
	  position: relative;
	  display:block; }

*/





/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
/*
@media only screen and (orientation: landscape) {
  #turn { 
	  position: relative;
	  display:block; }
  #container { 
	  position: relative;
	  display:none; 
	}
	
	
	
		body{
		//background-color: #000000;
	}	
}
 */


/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
/*
@media only screen and (orientation: portrait) {
  #turn { 
	  position: relative;
	  display:none; }
  #container { 
	  position: relative;
	  display:block; }
	
	body{
		background-color: #680B0B;
	}
	
}
*/

#spinner{
	margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	width: 5rem;
	height: 5rem;
	background-color: #DBD0F2;
	
	
    
  }

  .home {
	
	border: 0;
	width: 3rem;
	height: 3rem;
	background: #001C55;
	color:#CD1432; 
	text-align: center;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
  }


@keyframes fadein {
	0%    { opacity: 0; }
	50%   { opacity: 0; }	
	100%  { opacity: 1; }
  }
  @-moz-keyframes fadein { /* Firefox */
	0%    { opacity: 0; }
	50%   { opacity: 0; }	
	100%  { opacity: 1; }
  }
  @-webkit-keyframes fadein { /* Safari and Chrome */
	0%    { opacity: 0; }
	50%   { opacity: 0; }	
	100%  { opacity: 1; }
  }
  @-o-keyframes fadein { /* Opera */
	0%    { opacity: 0; }
	50%   { opacity: 0; }	
	100%  { opacity: 1; }
  }

  @keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}