body{
	overflow			: hidden;
	margin				: 0px;
	padding				: 0px;
	height				: 100%;
	width				: 100%;			
}

.page {
	margin-top		: 0px;
	margin-left		: 0px;
	margin-bottom	: 0px;
	margin-right	: 0px;
	background-color: #505851;
}

/*Container*/
#container {
	width				: 100%;
	height				: 768px;
}

/*Generale flipbook*/
#flipbook {
	margin				: 0 auto;
}

#flipbook .page{
	width				: 800px;
	height				: 600px;
	background-color	: white;
	background-repeat	: no-repeat;
	background-size		: 100% 100%;
}

#flipbook .page{
	-webkit-box-shadow	:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow		:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow		:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow		:0 0 20px rgba(0,0,0,0.2);
	box-shadow			:0 0 20px rgba(0,0,0,0.2);
}

 /*Tabs*/
#flipbook .tabs{
	width				: 800px;
	height				: 22px;
	top					: 605px;
	position			: relative;
}

#flipbook .tabs > div{
	width				: 390px;
	height				: 22px;
	float				: left;
}

#flipbook .tabs .left{
	font-family 		: Verdana, Arial;
	font-size   		: 12px;
	text-align			: left;
	font-weight			: bold;
	color				: #ffffff;
	margin-left			: 10px;
	display				: inline-block;
}


#flipbook .tabs .right{
	font-family 		: Verdana, Arial;
	font-size   		: 12px;
	font-weight			: bold;
	text-align			: right;
	color				: #ffffff;
	margin-right		: 10px;
}

/*Audio Player*/
.playerAudio {
	font-family 		: Verdana, Arial;
	font-size   		: 12px;
	width				: 180px;
	height				: 25px;
	text-align			: left;
	color				: #ffffff;
	background-color	: #000000;
	display				: inline-block;
	align-items			: right;
	border				: 1px solid rgb(204, 204, 204);
	border-radius		: 25px;
}

#controlAudio {
	margin-top			: 5px;
	margin-left			: 8px;
	text-align			: left;
	cursor				: pointer;
}

#volumeMute {
	margin-top			: 5px;
	margin-left			: 5px;
	text-align			: left;
	cursor				: pointer;
}

.controlAudio {
	margin-top			: 5px;
	margin-left			: 5px;
	text-align			: left;
	display				: inline-block;
}

.sliderLayout {
	margin-top			: 5px;
	margin-left			: 5px;
	-webkit-appearance	: none;
	width				: 80px;
	height				: 5px;
	border-radius		: 5px;
	background			: #d3d3d3;
	outline				: none;
	opacity				: 0.7;
	-webkit-transition	: .2s;
	transition			: opacity .2s;
  }

.sliderLayout::-webkit-slider-thumb {
	-webkit-appearance	: none;
	appearance			: none;
	width				: 10px;
	height				: 10px;
	background			: #4CAF50;
	cursor				: pointer;
  }
  
  .sliderLayout::-moz-range-thumb {
	width				: 10px;
	height				: 10px;
	background			: #4CAF50;
	cursor				: pointer;
  }

  .equaliser {
	margin-top			: 5px;
	margin-left			: 2px;
	text-align			: left;
	display				: inline-block;
	pointer-events		: none;
}

.equaliser > ul { 
	padding-inline-start: 0px;
}

/*Fine audio*/

.titolo {
	text-align			: center;
	color				: #ffffff;
	font-family 		: Brush Script MT;
	font-size   		: 48px;
	width				: 100%;
	height				: 100px;
	left				: 0px;
}

/* Buttom Menu*/
.btn {
	background-color	: #000000; /* Blue background */
	color				: white; /* White text */
	padding				: 5px 8px; /* Some padding */
	font-family 		: Verdana, Arial;
	font-size   		: 12px;
	cursor				: pointer; /* Mouse pointer on hover */
	border				: none;
  }
  
  /* Darker background on mouse-over */
  .btn:hover {
	color				: #eeff00; /* Blue background */
  }

  /*link*/
a:link {
	text-decoration		: none;
	color       		: #ffffff;
  }
  
a:visited {
	text-decoration		: none;
	color       		: #ffffff;
}
  
a:hover {
	text-decoration		: none;
	color       		: #eeff00;
}
  
a:active {
	text-decoration		: none;
	color       		: #ffffff;
}

.menuButton {
	text-align			: center;
	top					: -28px;
	position			: absolute;
	z-index				: 100;
	width				: 100%;
}

#audioPlayer {
	text-align			: center;
	top					: 605px;
	position			: absolute;
	z-index				: 100;
	width				: 100%;
}

#credits {
	width				: 380px;
	height				: 580px;
	z-index				: 1000;
	color				: #ffffff;
	border				: 1px solid #ffffff;
	background-color	: #838383;
	top					: 10px;
	left				: 10px;
	position			: absolute;
	text-align			: center;
	font-family 		: Verdana, Arial;
	font-size   		: 12px;
}

/*Loader*/
#loader {
	font-size			: 10px;
	margin				: -75px 0 0 -75px;
	width				: 11em;
	height				: 11em;
	border-radius		: 50%;
	background			: #ffffff;
	background			: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background			: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background			: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background			: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background			: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	position			: absolute;
	left				: 50%;
	top					: 50%;
	z-index				: 1;
	-webkit-animation	: load3 1.4s infinite linear;
	animation			: load3 1.4s infinite linear;
	-webkit-transform	: translateZ(0);
	-ms-transform		: translateZ(0);
	transform			: translateZ(0);
  }

#loader:before {
	width				: 50%;
	height				: 50%;
	background			: #ffffff;
	border-radius		: 100% 0 0 0;
	position			: absolute;
	top					: 0;
	left				: 0;
	content				: '';
}
#loader:after {
	background			: #505851;
	width				: 75%;
	height				: 75%;
	border-radius		: 50%;
	content				: '';
	margin				: auto;
	position			: absolute;
	top					: 0;
	left				: 0;
	bottom				: 0;
	right				: 0;
}

@-webkit-keyframes load3 {
	0% {
		-webkit-transform	: rotate(0deg);
		transform			: rotate(0deg);
	}
	100% {
		-webkit-transform	: rotate(360deg);
		transform			: rotate(360deg);
	}
}
@keyframes load3 {
	0% {
		-webkit-transform	: rotate(0deg);
		transform			: rotate(0deg);
	}
	100% {
		-webkit-transform	: rotate(360deg);
		transform			: rotate(360deg);
	}
}