article h2 { font-family: inherit sans-serif; font-size: 34px; margin: 20px 0; line-height: 40px; color: #fff;}



.story { height: 768px; padding: 0; margin: 0; width: 100%; max-width: 1024px; position: relative; margin: 0 auto; border-top: 0px solid rgba(255,255,255,0.3); border-bottom: 0px solid rgba(0,0,0,0.4); box-shadow: 0 0 0px rgba(0,0,0,0.8);}

#first { background: url(../images/back1.png) 50% 0 no-repeat fixed; }
#second { background: url(../images/back22.png)50% 0 no-repeat fixed; }
#third { background: url(../images/backrifiuti.png)50% 0 no-repeat fixed; }
#four { background: url(../images/trasporti.png)50% 0 no-repeat fixed; }
#five { background: url(../images/energy.png) 50% 0 no-repeat fixed; }
#six { background: url(../images/farm.png) 50% 0 no-repeat fixed; }
#seven { background: url(../images/backghiaccio.png) 50% 0 no-repeat fixed; }
#eight{ background: url(../images/problema1.png) 50% 0 no-repeat fixed; }
#nine { background: url(../images/start.png)  bottom no-repeat fixed; }


/* evento*/
#first .fiore { background: url(../images/piantatop.png) 50% 100px no-repeat fixed;  padding: 0; margin: 0;  position: relative; margin: 0 auto; }
#first article { background: 100% 100px no-repeat fixed; color: #fff; padding: 40px 40px; margin: 190px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0 ; font-size: 14px }
#first article p,
#first article a { color: #fff; }
#first article a { text-decoration: underline; }
#first article a:hover { color: #fff; }



/* edifici e cittˆ*/

#second article { background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 150px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 10px; right: 0; left: 0; font-size: 14px   }
#second article p,
#second article a { color: #fff; }
#second article a { text-decoration: underline; }
#second article a:hover { color: #fff; }
#second .filo1 { background: url(../images/pianta2casa2.png) transparent 50% 100px no-repeat fixed; min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%; position: relative; margin: 0 auto; }
#C1 {position: absolute; z-index: 1950;top: 400px; left: 600px;}

/* rifiuti */

#third article { background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 75px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; right: 10px; left: -50px; font-size: 14px   }
#third article p,
#third article a { color: #fff; }
#third article a { text-decoration: underline; }
#third article a:hover { color: #fff; }
#third .filo2 { background: url(../images/piantarifiuti.png) transparent 50% 100px no-repeat fixed; min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%; position: relative; margin: 0 auto; }
#third .filo2 {background: url (../images/camioncino.png) transparent 50% 100px no-repeat fixed; min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%; position: relative; margin: 0 auto; }
#third .camioncino {background: url (../images/fabbricaverde.png) transparent 50% 100px no-repeat fixed; min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%; position: relative; margin: 0 auto; }

/* trasporti */

#four article { z-index: 3500; background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 60px 0 0 60%;  line-height: 1.5em; color: #fff; position: absolute; top: 0; font-size: 14px   }
#four article p,
#four article a { color: #5668b6; }
#four article a { text-decoration: underline; }
#four article a:hover { color: #fff; }
#four .filo3 { background: url(../images/6foglie.png) 100% 50% no-repeat fixed;  z-index: 2500;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }
#T1 {position: absolute; z-index: 1900; bottom: 0; left: 0;}


/* energia*/


#five article {  z-index: 3500; background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 50px 0 0 60%;  line-height: 1.5em; color: #fff; position: absolute; top: 0; font-size: 14px   }
#five article p,
#five article a { color: #004585; }
#five article a { text-decoration: underline; }
#five article a:hover { color: #fff; }
#five .filo4 { background: url(../images/4foglie.png) 100% 50% no-repeat fixed;  z-index: 2500;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }
#E3 {position: absolute; z-index: 1950; bottom: 0; left: 0;}

/* allevamento  */
#six article { z-index: 2100; background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 100px 0 0 60%;  line-height: 1.5em; color: #fff; position: absolute; top: -30px; right: 70px; left: -50px; font-size: 14px   }
#six article h2 {color: #fff;}
#six article p,
#six article a { color: #438904; }
#six article a { text-decoration: underline; }
#six article a:hover { color: #438904; }
#six .filo5 { background: url(../images/duefoglie.png) 100% 50% no-repeat fixed;  z-index: 2500;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }
#A3 {position: absolute; z-index: 1950; bottom: 0; left: 0;}




/* problema2*/

#seven article { z-index: 1990; background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 150px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; right: 40px; left: -50px; font-size: 14px   }
#seven article p,
#seven article a { color: #fff; }
#seven article a { text-decoration: underline; }
#seven article a:hover { color: #fff; }
#seven .filo6 { background: url(../images/punto3.png) 100% 50% no-repeat fixed;  z-index: 2000;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }
#G1 {width: 45%; position: absolute; z-index: 1950; top:110px; right: 50px; }


/* problema1*/

#eight article { z-index: 2100; background: 100% 100px no-repeat fixed; color: #fff; padding: 0px 50px; margin: 290px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; right: 40px; left: -50px; font-size: 14px   }
#eight article p,
#eight article a { color: #fff; }
#eight article a { text-decoration: underline; }
#eight article a:hover { color: #fff; }
#eight .filo7 { background: url(../images/punto2.png) 100% 50% no-repeat fixed;  z-index: 2000;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }

#P2 {width: 45%; position: absolute; z-index: 1950; top:260px; right: 50px; }
#P4 {position: absolute; z-index: 1950; top:130px; left: 200px; }


/* start*/

#nine article {  z-index: 2000;  color: #fff; padding: 0px 50px; margin: 170px 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 90px; right: 120px; left: -50px; font-size: 13px; }
#nine article p,
#nine article a { color: #fff; }
#nine article a { text-decoration: underline; }
#nine article a:hover { color: #fff; }
#nine .filo8 { background: url(../images/punto.png) 100% 50% no-repeat fixed;  z-index: 1999;min-height: 100%; padding: 0; margin: 0; width: 100%; max-width: 100%;  position: absolute; margin: 0 auto; bottom: 0; }
#S1 { width: 100%; position: absolute; z-index: 2000; bottom: 0px; left: 0px; }
#S2 {  width: 30%; position: absolute; z-index: 1990; top:150px; right: 150px; }

footer {
height: 100px;
width: 100%;
background: transparent;
position: fixed;
z-index: 5000;
bottom: 0;
left: 0;
}

#f1 {background: #00692a; width: 100%;height: 40px; z-index: 3001; position: absolute;bottom: 0; left: 0; text-align: center; color: #00451b; line-height: 40px;font-size: 100%;}
#f2 {height: 50px; width: 50px; position: absolute; z-index: 3002; bottom: 20px; left: 120px; }
#f3 {height: 250px; width: 128px; position: absolute; z-index: 3002; bottom: 10px; left: 15px;}
#f4 {height: 90px; width: 229px; position: absolute; z-index: 3002; bottom: 0; right: 15px;}