/*
	********************************* CSS RESET ********************************* 
 	Segue un 'CSS RESET' per i diversi tag della pagina: alcuni browser renderizzano, altrimenti, spazi non voluti, come le famose strisce bianche al top della pagina
 	Si definiscono, con tale set di regole, alcune regole attinenti anche al tipo di font e altro
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
	font-weight: lighter; font-family: Myriad Pro, sans-serif; color: #474724;
    vertical-align: baseline;
    background: transparent;}

/*
 	Seguono le REGOLE SPECIFICHE
 */

html, body	{background-color: #fff; width: 100%; height: 100%;}

a		{text-decoration: none; position: static;}
	a:link		                {text-decoration: none; color: #474724;}
	a:active	                {text-decoration: none; color: #474724;}
	a:hover		                {text-decoration: none; color: #CCCC75; text-shadow: 0 0 3px #474724;}
	a:visited	                {text-decoration: none; color: #87874F;}

h1, h2, h3, h4, h5, h6  {margin-bottom: 10px; position: static;}
	
#firstHeader	{float: left; background-image: url(../img/sporth.svg); background-size: cover; background-repeat: no-repeat; top: 0; left: 0; margin: 0 50px 20px 0; width: 550px; height: 500px;}

	#firstHeader h1, h2, h3, h4, h5, h6	    {position: absolute;}
	#firstHeader h1, h2, h3, h4, h5, h6		{color: #fff;}
	#firstHeader h1							{transform: rotate(34deg); -webkit-transform: rotate(34deg); -moz-transform: rotate(34deg); -o-transform: rotate(34deg);
										/* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
										top: 35px; left: 30px;}
	nav					{}
    nav ul              {/*background-color: #d5d5d5;*/ list-style: none;}
        nav ul li           {/*background-color: rgb(139,69,19);*/}
        nav ul li a             {position: absolute;}
		.vociMenu				{transition: transform 1.5s ease-in .1s; -webkit-transition: -webkit-transform 1.5s ease-in .1s; -moz-transition: -moz-transform 1.5s ease-in .1s;
								-o-transition: -o-transform 1.5s ease-in .1s; -ms-transition: -ms-transform 1.5s ease-in .1s;}
		.vociMenu:hover			{text-shadow: 0 0 5px #474724;
								transition: transform 0.4s ease-out; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;
					 			-o-transition: -o-transform 0.4s ease-out; -ms-transition: -ms-transform 0.4s ease-out;}
		#home							{top: 253px; left: 300px; transform: rotate(53deg); -webkit-transform: rotate(53deg); -moz-transform: rotate(53deg); -o-transform: rotate(53deg);
										/* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 160%; color: #fff;}
		#norme							{top: 40px; left: 270px; transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg);
										filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 135%;}
			#norme:hover					{transform: translate(20px, 2px)rotate(9deg); -webkit-transform: translate(20px, 2px)rotate(9deg); -o-transform: translate(20px, 2px)rotate(9deg);
											 -ms-transform: translate(20px, 2px)rotate(9deg); -moz-transform: translate(20px, 2px)rotate(9deg);}
		#servizi						{top: 200px; left: 68px; transform: rotate(94deg); -webkit-transform: rotate(94deg); -moz-transform: rotate(94deg); -o-transform: rotate(94deg);
										 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 135%;}
			#servizi:hover					{transform: translate(0px, 20px)rotate(91deg); -webkit-transform: translate(0px, 20px)rotate(91deg); -o-transform: translate(0px, 20px)rotate(91deg);
											 -ms-transform: translate(0px, 20px)rotate(91deg); -moz-transform: translate(0px, 20px)rotate(91deg)}
		#contatti						{top: 290px; left: 200px; transform: rotate(83deg); -webkit-transform: rotate(83deg); -moz-transform: rotate(83deg); -o-transform: rotate(83deg);
										 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 135%;}
			#contatti:hover					{transform: translate(3px, 20px)rotate(80deg); -webkit-transform: translate(3px, 20px)rotate(80deg); -o-transform: translate(3px, 20px)rotate(80deg);
											 -ms-transform: translate(3px, 20px)rotate(80deg); -moz-transform: translate(3px, 20px)rotate(80deg);}			 
		#chi							{top: 360px; left: 285px; transform: rotate(99deg); -webkit-transform: rotate(99deg); -moz-transform: rotate(99deg); -o-transform: rotate(99deg);
										 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 135%;}
			#chi:hover						{transform: translate(-5px, 20px)rotate(106deg); -webkit-transform: translate(-5px, 20px)rotate(106deg); -o-transform: translate(-5px, 20px)rotate(106deg);
											 -ms-transform: translate(-5px, 20px)rotate(106deg); -moz-transform: translate(-5px, 20px)rotate(106deg);}
		#approfondimenti				{top: 149px; left: 343px; transform: rotate(59deg); -webkit-transform: rotate(59deg); -moz-transform: rotate(59deg); -o-transform: rotate(59deg);
										 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 105%;}
			#approfondimenti:hover			{transform: translate(11px, 16px)rotate(57deg); -webkit-transform: translate(11px, 16px)rotate(57deg); -o-transform: translate(11px, 16px)rotate(57deg);
											 -ms-transform: translate(11px, 16px)rotate(57deg); -moz-transform: translate(11px, 16px)rotate(57deg);}
		#altro							{top: 230px; left: 400px; transform: rotate(53deg); -webkit-transform: rotate(53deg); -moz-transform: rotate(53deg); -o-transform: rotate(53deg);
										 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); font-size: 105%;}
			#altro:hover					{transform: translate(15px, 17px)rotate(49deg); -webkit-transform: translate(15px, 17px)rotate(49deg); -o-transform: translate(15px, 17px)rotate(49deg);
											 -ms-transform: translate(15px, 17px)rotate(49deg); -moz-transform: translate(15px, 17px)rotate(49deg);}

#linkUtili	{float: right; width: auto; height: auto; padding: 25px; text-align: right; margin: 20px 0 30px 0; line-height: 1.5em;}	/* Fare caso a PADDING-TOP.... */
	/* ... Sulla questione PADDING-TOP: SE, invece di mettere padding-top, avessi demandato il distanziamento di article->div dal top ala sua proprietà MARGIN-TOP, mi si sarebbe spostato anche il box logo!
	 Cosa ovviamente non voluta né gradita... */
    #linkUtili h3       {margin-bottom: 20px; font-size: 180%; border-bottom: dotted 1px #474724;}
    #linkUtili a        {position: static; display: block;}
			
#content	{/*background-color: blue;*/ width: 100%; height: 100%; padding-top: 50px;}	/* Fare caso a PADDING-TOP.... */
	/* ... Sulla questione PADDING-TOP: SE, invece di mettere padding-top, avessi demandato il distanziamento di article->div dal top ala sua proprietà MARGIN-TOP, mi si sarebbe spostato anche il box logo!
	 Cosa ovviamente non voluta né gradita... */
    #content h1, h2, h3, h4, h5, h6          {position: static; color: #FFCA63;}
    #content p, a           {position: static;}
	#content div		    {/*background-color: azure;*/ margin: 0 50px 0 50px;}	/* QUINDI: lasciare a 0 il margin-top E aggiustare col PADDING-TOP di cui sopra! */
	
	.title			{/*background-color: violet;*/ font-size: 220%; margin-bottom: 40px; position: relative;}
		.title img		{/*background-color: cadetblue;*/ position: absolute; width: 310px; height: 140px; z-index: 1; top: -40px; left: 510px;}
		.title h2		{/*background-color: darkblue;*/ position: relative; z-index: 10;}

footer	{/*background-color: #CCFF66;*/ background-image: url(../img/footer.svg); background-size: contain; background-repeat: no-repeat; position: fixed; right: 0; bottom: -140px; width: 600px; height: 200px;
		transition: bottom 1.5s ease-in .1s; -webkit-transition: bottom 1.5s ease-in .1s; -moz-transition: bottom 1.5s ease-in .1s;
		-o-transition: bottom 1.5s ease-in .1s; -ms-transition: bottom 1.5s ease-in .1s; z-index: 10;}

	footer:hover	{bottom: 0px; transition: bottom 0.4s ease-out; -webkit-transition: bottom 0.4s ease-out; -moz-transition: bottom 0.4s ease-out;
					 -o-transition: bottom 0.4s ease-out; -ms-transition: bottom 0.4s ease-out;}
	footer p		{text-align: right; color: #fff; margin: 30px;}
	footer a		{position: static;}