@charset "utf-8";
/* CSS Document */




#header {
	height: 140px;
	width: 100%;
	position: fixed;
	background-color: #f5dc4c;
	z-index: +100;
	background-size: cover;
}

#main {
	height: 1200px;
	width: 100%;
	position: relative;
	background-color: rgba(0,153,102,1);
	padding: 15px 0px;
}



body {
	margin: 0; webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; background-repeat:no-repeat; background-position:center; background-color:#f6dc4e;
}



#logo {
	position: absolute;
	height: 110px;
	width: 110px;
	left: 55px;
	top: 8px; border:1px solid transparent;
}


#logo img {
	height: 90px;
	width: 90px; border:1px solid transparent; border-radius:70px 70px 70px 70px; box-shadow:0px 2px 2px 2px rgba(14,30,249,1),0px -2px 2px 2px rgba(14,30,249,1);
	
}


#menu {
	width: 80%;
	position: relative;
	float: right;
	top: 30px;
}
#header #menu ul li {
	list-style-type: none;
	display: inline;
	font-family: oswald;
	font-size: 30px;
	color: rgba(255,255,0,1);
	margin-left: 50px; /****distanza tra una scritta e l'altra ****/
}
#header #menu ul li a {
	text-decoration: none;
	color: rgba(255,255,255,1);  /****qui cambi il colore scritta del menu ****/
}
#header #menu ul li a:hover {
	color: rgba(255,0,0,1);
	cursor: pointer;
}


#message {
	position: relative;
	height: 80px;
	width: 100%;
	padding: 10px 0px;
	font-family: oswald;
	font-size: 24px;
	text-align: center;
	color: rgba(204,204,204,1);
	background-color: rgba(102,102,102,1);
	clear: both;
	top: 50px;
	line-height: 80px;
}

/************** Questa è la classe per fare ingrandire le immagini tipo zoom ******************/
img.iclass{
transition: all 250ms ease-in-out;

-webkit-transition: all 450ms ease-in-out;
-o-transition:all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;	
}

img.iclass:hover{
transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-moz-transform:	scale(1.1,1.1);
opacity: 0.8;
}

/************** header e logo elastico******************/

#header.large{
height: 140px;	
	
	
}
#header.small{
	height: 90px;
	background-color: rgba(51,51,51,0.5);
	
}


#logo.large img{
width: 110px;
height: 110px;	
	
	
}

#logo.small img{
width: 70px;
height: 70px; box-shadow:0px 1px 1px 1px rgba(0,255,0,1),0px -1px 1px 1px rgba(0,255,0,1);	
	
	
}

/************ transition header + logo *************/

#header,img{
transition: all 1s;
-webkit-transition: all 1s;
-o-transition:all 1s;
-ms-transition: all 1s;
-moz-transition: all 1s;		
	
}

/************ Queste 2 classi sono per la pagina php quando si paga *************/

#paga{ width:750px; height:550px; border:1px solid white; margin-left:auto; margin-right:auto; margin-top:180px; border-radius:20px 20px 20px 20px;}

#contenitoretotalepaga{ widows:100%; height:900px;}


.testograzie {font-family:Arial, Helvetica, sans-serif; font-size:28px; color:white;}

.testograzie p { margin:0px 30px 0px 30px;}




.audio{ width:240px; height:35px;}



#item {
	position: relative;
	height: 277px;
	width: 265px;
	float: left;
	border: 1px solid transparent; border-radius:10px 10px 10px 10px;
	left: 10px; 
}


#item img {
	height: 229px;
	width: 239px;
	position: relative;
	background-color: rgba(0,0,0,1);
	border: 1px solid transparent; margin-left:1px; 
	
}




#item p {
	font-family: oswald;
	font-size: 30px;
	color: rgba(102,255,0,1);
	text-align: justify;
}




/********questo è il div contenitore per i due blocchi prodotti e quello per il banner adsense nella slide 2 *******/
#contenitorediscografia { position:relative; width:1220px; height:920px; margin-left:auto; margin-right:auto; border:1px solid transperent; top:-80px;
}

/**** div della prima fila di prodotti ****/
#contenitoreCd1 { position:relative; width:1120px; height:300px; border:1px solid transparent; margin-left:auto; margin-right:auto;
}

/**** div della seconda fila di prodotti ****/
#contenitoreCd2 { position:relative; width:1120px; height:300px; border:1px solid transparent; margin-left:auto; margin-right:auto;
}



#itemsecriga {
	position: relative;
	height: 277px;
	width: 265px;
	border: 1px solid transparent;
	top: 10px; float:left;
	left: 10px; border-radius:10px 10px 10px 10px;
}





#itemsecriga img {
	height: 229px;
	width: 239px;
	position: relative;
	background-color: rgba(0,0,0,1);
	border: 1px solid transparent; margin-left:1px;
}





/****questo è il div che contiene il riquadrino sopra adsense nella slide 2 ***/
#itemsottosecondariga {
	position: relative;
	height: 50px;
	width: 291px;
	border: 1px solid transparent; border-radius: 3px 3px 3px 3px;
	top: 20px;
	background-color: #8e9295; margin-left:auto; margin-right:auto; opacity:0,7;
 
}

#itemsottosecondariga p {
	font-family: Lato;
	font-size: 16px;
	color: rgba(255,255,255,1);
	text-align: center; margin: 3px 3px 3px 3px; 
}

/****questo è il div che contiene il riquadro per adsense nella slide 2 ***/
#pubblicitàadsense1 { position:relative; width:100%; height:150px; border:1px solid transparent; margin-left:auto; margin-right:auto; top:50px;
}



/****questo è il div contenitore  dei due blocchi prodotti e quello per il banner adsense nella slide 4 ****/
#contenitorevideo { position: relative;
	width: 1220px;
	height: 920px;
	top:-80px;
	border: 1px solid transparent;
	margin-right: auto;
	margin-left: auto; 
}





/**** questo è il div contenitore  totale dei due blocchi prodotti e quello per il banner adsense nella slide 6 ****/
#contenitore {
	position: relative;
	width: 1120px;
	height: 920px;
	top: -85px;
	border: 1px solid transparent;
	margin-right: auto;
	margin-left: auto;

}






/**************Da qui in poi solo Footer ******************/





/**************Questo e' il riquadro che fa da contenitore tot ai due div info nel footer ******************/
#managment { height:380px; width:1020px; 
             border:1px solid transparent;
			  margin-left: auto; margin-right:auto;
}



/**************Questo è la descrizione info contatti nel footer ******************/
#dmppubblicità { height:300px; width:520px; float:left;
                   margin-top:40px; 
				   border:1px solid transparent;
				    margin-left:10px;
}
#dmppubblicità p {
	font-family: Lato;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color:white; text-align:left; margin:10px 10px 0px 10px;
}




/**************Questo è il contenitore che racchiude le 3 immagini dei social ******************/
#contenitoreiconesocial { position:relative;
                          width:450px; height:150px;
						   border:1px solid transparent;
						   float:left; margin-left:30px;
						   margin-top: 100px;

}


#itemfacebook {position:relative; height:120px; width:120px; border:1px solid transparent; top:20px; float:left; left:10px;
}
#itemfacebook img { position:relative; height:118px; width:118px;border-radius:20px 20px 20px 20px;
}


#itemtwitter { position:relative; height:120px; width:120px; border:1px solid transparent;float:left; 
top:20px; left:30px;
}
#itemtwitter img { position:relative; height:118px; width:118px;border-radius:20px 20px 20px 20px;
}


#iteminstg { position:relative; height:120px; width:120px; border:1px solid transparent;float:left; 
top:20px; left:50px; 
}

#iteminstg img { position:relative; height:118px; width:118px;border-radius:20px 20px 20px 20px;
}


#contenitoresocial p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 26px;
	font-style: normal;
	font-weight: normal;
	color: rgba(255,255,255,1); text-align:center;
}






#contatorevisite { position:relative; width:90px ; 
height:30px; border:1px solid blue; 
margin-left:auto; margin-right:auto; top:5px;
}


#pulsante { position: absolute; width:110px; height:25px; border:1px solid transparent; border-radius:3px 3px 3px 3px; z-index:+8;
 background-color: rgba(255,102,0,1); margin-top:-40px; margin-left:5px;
}
#pulsante p { font-family: Lato; font-size:18px; text-align: center; color:white; margin:0px 0px 0px 0px;}