.icon { margin: 0 auto 3em; }
a.icon_link { color: #333; }
a.icon_link:hover { color: #666; }


/*--------------------------------------------------
icons
--------------------------------------------------*/
.icon, .border_icon { width: 96px; height: 96px; background: #272c31; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; overflow: hidden; position: relative; z-index: 2; }
.border_icon { background: #fff; border: 6px solid #272c31; width: 84px; height: 84px; }
.icon_360 { width: 96px; height: 96px; background: url(/img/360.png) no-repeat center center; }
.icon_costo_zero { width: 96px; height: 96px; background: url(/img/costo_zero.png) no-repeat center center; }
.icon_24h { width: 96px; height: 96px; background: url(/img/24hours.png) no-repeat center center; }
.icon_europe { width: 96px; height: 96px; background: url(/img/filodiretto.png) no-repeat center center; }
.confindustria { width: 96px; height: 96px; background: url(/img/confindustria.png) no-repeat center center; display: block; }
.obiettivi { width: 96px; height: 96px; background: url(/img/sign.png) no-repeat center center; display: block; }
.missionIco { width: 96px; height: 96px; background: url(/img/megaphone.png) no-repeat center center; display: block; }
.valori { width: 96px; height: 96px; background: url(/img/presentation.png) no-repeat center center; display: block; }


/*--------------------------------------------------
map icon
--------------------------------------------------*/
.icon_map .map { width: 48px; height: 33px; background: url(/img/map.png) no-repeat center center; position: absolute; z-index: 2; top: 25px; left: 18px; }
.icon_map:hover .map { -moz-animation: mappa 1.5s ease-in-out; -webkit-animation: mappa 1.5s ease-in-out; animation: mappa 1.5s ease-in-out; }

@-moz-keyframes mappa {
    0% { -moz-transform: rotate(-180deg); }
    20% { -moz-transform: rotate(-180deg); }
    20.1% { -moz-transform: rotate(0deg); }
    40% { -moz-transform: rotate(0deg); }
    40.1% { -moz-transform: rotate(-180deg); }
    60% { -moz-transform: rotate(-180deg); }
    60.1% { -moz-transform: rotate(0deg); }
    80% { -moz-transform: rotate(0deg); }
    80.1% { -moz-transform: rotate(-180deg); }
    100% { -moz-transform: rotate(-180deg); }
}

@-webkit-keyframes mappa {
    0% { -webkit-transform: rotate(-180deg); }
    20% { -webkit-transform: rotate(-180deg); }
    20.1% { -webkit-transform: rotate(0deg); }
    40% { -webkit-transform: rotate(0deg); }
    40.1% { -webkit-transform: rotate(-180deg); }
    60% { -webkit-transform: rotate(-180deg); }
    60.1% { -webkit-transform: rotate(0deg); }
    80% { -webkit-transform: rotate(0deg); }
    80.1% { -webkit-transform: rotate(-180deg); }
    100% { -webkit-transform: rotate(-180deg); }
}

@keyframes mappa {
    0% { transform: rotate(-180deg); }
    20% { transform: rotate(-180deg); }
    20.1% { transform: rotate(0deg); }
    40% { transform: rotate(0deg); }
    40.1% { transform: rotate(-180deg); }
    60% { transform: rotate(-180deg); }
    60.1% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    80.1% { transform: rotate(-180deg); }
    100% { transform: rotate(-180deg); }
}


/*--------------------------------------------------
cog icon
--------------------------------------------------*/
.icon_flagship .pini { width: 42px; height: 53px; background: url(/img/pin.png) no-repeat 0 0; position: absolute; z-index: 2; top: 23px; left: 29px; }
.icon_flagship:hover .pini { -moz-animation: pini 1.8s ease-in-out; -webkit-animation: pini 1.6s ease-in-out; animation: pini 1.8s ease-in-out; }

@-moz-keyframes pini {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@-webkit-keyframes pini {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@keyframes pini {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}



/*--------------------------------------------------
cog icon
--------------------------------------------------*/
.cog1, .cog2 { width: 36px; height: 36px; background: url(/img/cog.png) no-repeat 0 0; position: absolute; z-index: 2; top: 30px; left: 30px; }
.cog2 { top: -40px; left: 40px; }
.icon_cog:hover .cog1 { -moz-animation: cog1 1.8s linear; -webkit-animation: cog1 1.8s linear; animation: cog1 1.8s linear; }
.icon_cog:hover .cog2 { -moz-animation: cog2 1.8s linear; -webkit-animation: cog2 1.8s linear; animation: cog2 1.8s linear; }

@-moz-keyframes cog1 {
    10% { left: 22px; top: 44px; -moz-transform: rotate(0); }
    55% { -moz-transform: rotate(-180deg); }
    90% { left: 22px; top: 44px; -moz-transform: rotate(-300deg); }
    100% { top: 30px; left: 30px; -moz-transform: rotate(-360deg); }
}

@-moz-keyframes cog2 {
    10% { top: 16px; left: 40px; -moz-transform: rotate(0); }
    55% { -moz-transform: rotate(180deg); }
    90% { top: 16px; left: 40px; -moz-transform: rotate(300deg); }
    100% { left: 40px; top: -40px; -moz-transform: rotate(360deg); }
}

@-webkit-keyframes cog1 {
    10% { left: 22px; top: 44px; -webkit-transform: rotate(0); }
    55% { -webkit-transform: rotate(-180deg); }
    90% { left: 22px; top: 44px; -webkit-transform: rotate(-300deg); }
    100% { top: 30px; left: 30px; -webkit-transform: rotate(-360deg); }
}

@-webkit-keyframes cog2 {
    10% { top: 16px; left: 40px; -webkit-transform: rotate(0); }
    55% { -webkit-transform: rotate(180deg); }
    90% { top: 16px; left: 40px; -webkit-transform: rotate(300deg); }
    100% { left: 40px; top: -40px; -webkit-transform: rotate(360deg); }
}

@keyframes cog1 {
    10% { left: 22px; top: 44px; transform: rotate(0); }
    55% { transform: rotate(-180deg); }
    90% { left: 22px; top: 44px; transform: rotate(-300deg); }
    100% { top: 30px; left: 30px; transform: rotate(-360deg); }
}

@keyframes cog2 {
    10% { top: 16px; left: 40px; transform: rotate(0); }
    55% { transform: rotate(180deg); }
    90% { top: 16px; left: 40px; transform: rotate(300deg); }
    100% { left: 40px; top: -40px; transform: rotate(360deg); }
}


/*--------------------------------------------------
tools icon
--------------------------------------------------*/
.tool1, .tool2 { width: 42px; height: 43px; background: url(/img/chiave.png) no-repeat 0 0; position: absolute; z-index: 2; top: 25px; left: 26px; }
.tool2 { top: 27px; left: 26px; background: url(/img/cacciavite.png) no-repeat 0 0; }
.icon_tools:hover .tool1 { -moz-animation: tool1 1.8s ease-in-out; -webkit-animation: tool1 1.8s ease-in-out; animation: tool1 1.8s ease-in-out; }
.icon_tools:hover .tool2 { -moz-animation: tool2 1.8s ease-in-out; -webkit-animation: tool2 1.8s ease-in-out; animation: tool2 1.8s ease-in-out; }

@-moz-keyframes tool1 {

    20% { -moz-transform: rotate(-45deg); left: 10px; top: 25px; }
    50% { -moz-transform: rotate(-45deg); left: -50px; top: 25px; }
    56% { -moz-transform: rotate(-45deg); left: -50px; top: -50px; }
    57% { -moz-transform: rotate(-45deg); left: 100px; top: -50px; }
    58% { -moz-transform: rotate(-45deg); left: 100px; top: 25px; }
    90% { -moz-transform: rotate(-45deg); left: 26px; }
    100% { -moz-transform: rotate(0deg); }
}

@-moz-keyframes tool2 {
    20% { -moz-transform: rotate(45deg); left: 40px; top: 25px; }
    50% { -moz-transform: rotate(45deg); left: 100px; top: 27px; }
    56% { -moz-transform: rotate(45deg); left: 100px; top: -50px; }
    57% { -moz-transform: rotate(45deg); left: -50px; top: -50px; }
    58% { -moz-transform: rotate(45deg); left: -50px; top: 27px; }
    90% { -moz-transform: rotate(45deg); left: 26px; }
    100% { -moz-transform: rotate(0deg); }
}

@-webkit-keyframes tool1 {
    20% { -webkit-transform: rotate(-45deg); left: 10px; top: 25px; }
    50% { -webkit-transform: rotate(-45deg); left: -50px; top: 25px; }
    56% { -webkit-transform: rotate(-45deg); left: -50px; top: -50px; }
    57% { -webkit-transform: rotate(-45deg); left: 100px; top: -50px; }
    58% { -webkit-transform: rotate(-45deg); left: 100px; top: 25px; }
    90% { -webkit-transform: rotate(-45deg); left: 26px; }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes tool2 {
    20% { -webkit-transform: rotate(45deg); left: 40px; top: 25px; }
    50% { -webkit-transform: rotate(45deg); left: 100px; top: 27px; }
    56% { -webkit-transform: rotate(45deg); left: 100px; top: -50px; }
    57% { -webkit-transform: rotate(45deg); left: -50px; top: -50px; }
    58% { -webkit-transform: rotate(45deg); left: -50px; top: 27px; }
    90% { -webkit-transform: rotate(45deg); left: 26px; }
    100% { -webkit-transform: rotate(0deg); }
}

@keyframes tool1 {
    20% { transform: rotate(-45deg); left: 10px; top: 25px; }
    50% { transform: rotate(-45deg); left: -50px; top: 25px; }
    56% { transform: rotate(-45deg); left: -50px; top: -50px; }
    57% { transform: rotate(-45deg); left: 100px; top: -50px; }
    58% { transform: rotate(-45deg); left: 100px; top: 25px; }
    90% { transform: rotate(-45deg); left: 26px; }
    100% { transform: rotate(0deg); }
}

@keyframes tool2 {
    20% { transform: rotate(45deg); left: 40px; top: 25px; }
    50% { transform: rotate(45deg); left: 100px; top: 27px; }
    56% { transform: rotate(45deg); left: 100px; top: -50px; }
    57% { transform: rotate(45deg); left: -50px; top: -50px; }
    58% { transform: rotate(45deg); left: -50px; top: 27px; }
    90% { transform: rotate(45deg); left: 26px; }
    100% { transform: rotate(0deg); }
}


/*--------------------------------------------------
brush icon
--------------------------------------------------*/
.brush { width: 46px; height: 42px; background: url(/img/brush.png) no-repeat 0 0; position: absolute; z-index: 2; top: 25px; left: 27px; }
.icon_brush:hover .brush { -moz-animation: brush 1.8s ease-in-out; -webkit-animation: brush 1.8s ease-in-out; animation: brush 1.8s ease-in-out; }

@-moz-keyframes brush {
    20% { -moz-transform: rotate(0deg); left: 5px; top: 25px; }
    25% { -moz-transform: rotate(-10deg); }
    30% { -moz-transform: rotate(10deg); }
    35% { -moz-transform: rotate(-10deg); }
    40% { -moz-transform: rotate(10deg); }
    45% { -moz-transform: rotate(-10deg); }
    50% { -moz-transform: rotate(10deg); }
    55% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(10deg); }
    65% { -moz-transform: rotate(-10deg); }
    70% { -moz-transform: rotate(10deg); }
    75% { -moz-transform: rotate(-10deg); }
    80% { -moz-transform: rotate(10deg); left: 38px; }
    90% { -moz-transform: rotate(0deg); left: 27px; }
}

@-webkit-keyframes brush {
    20% { -webkit-transform: rotate(0deg); left: 5px; top: 25px; }
    25% { -webkit-transform: rotate(-10deg); }
    30% { -webkit-transform: rotate(10deg); }
    35% { -webkit-transform: rotate(-10deg); }
    40% { -webkit-transform: rotate(10deg); }
    45% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
    55% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(10deg); }
    65% { -webkit-transform: rotate(-10deg); }
    70% { -webkit-transform: rotate(10deg); }
    75% { -webkit-transform: rotate(-10deg); }
    80% { -webkit-transform: rotate(10deg); left: 38px; }
    90% { -webkit-transform: rotate(0deg); left: 27px; }
}

@keyframes brush {
    20% { transform: rotate(0deg); left: 5px; top: 25px; }
    25% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    35% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    45% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    55% { transform: rotate(-10deg); }
    60% { transform: rotate(10deg); }
    65% { transform: rotate(-10deg); }
    70% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); left: 38px; }
    90% { transform: rotate(0deg); left: 27px; }
}


/*--------------------------------------------------
bulb icon
--------------------------------------------------*/
.bulb1, .bulb2 { width: 23px; height: 37px; background: url(/img/bulb.png) no-repeat 0 0; position: absolute; z-index: 2; top: 30px; left: 36px; }
.bulb2 { width: 1px; height: 1px; background: url(/img/bulb_light.png) no-repeat 0 0; top: 19px; left: 25px; z-index: 3; }
.icon_bulb:hover .bulb2 { -moz-animation: bulb 2.1s ease-in-out; -webkit-animation: bulb 2.1s ease-in-out; animation: bulb 2.1s ease-in-out; }

@-moz-keyframes bulb {
    10% { width: 48px; height: 26px; top: 18px; left: 24px; }
    12% { width: 1px; height: 1px; top: 19px; left: 25px; }
    14% { width: 48px; height: 26px; top: 18px; left: 24px; }
    16% { width: 1px; height: 1px; top: 19px; left: 25px; }
    18% { width: 48px; height: 26px; top: 18px; left: 24px; }
    90% { width: 48px; height: 26px; top: 18px; left: 24px; }
    100% { width: 1px; height: 1px; top: 19px; left: 25px; }
}

@-webkit-keyframes bulb {
    10% { width: 48px; height: 26px; top: 18px; left: 24px; }
    12% { width: 1px; height: 1px; top: 19px; left: 25px; }
    14% { width: 48px; height: 26px; top: 18px; left: 24px; }
    16% { width: 1px; height: 1px; top: 19px; left: 25px; }
    18% { width: 48px; height: 26px; top: 18px; left: 24px; }
    90% { width: 48px; height: 26px; top: 18px; left: 24px; }
    100% { width: 1px; height: 1px; top: 19px; left: 25px; }
}

@keyframes bulb {
    10% { width: 48px; height: 26px; top: 18px; left: 24px; }
    12% { width: 1px; height: 1px; top: 19px; left: 25px; }
    14% { width: 48px; height: 26px; top: 18px; left: 24px; }
    16% { width: 1px; height: 1px; top: 19px; left: 25px; }
    18% { width: 48px; height: 26px; top: 18px; left: 24px; }
    90% { width: 48px; height: 26px; top: 18px; left: 24px; }
    100% { width: 1px; height: 1px; top: 19px; left: 25px; }
}


/*--------------------------------------------------
leaf icon
--------------------------------------------------*/
.leaf { width: 38px; height: 38px; left: 29px; top: 29px; background: url(/img/leaf.png) no-repeat 0 0; position: absolute; z-index: 2; }
.icon_leaf:hover .leaf { -moz-animation: leaf 1.5s ease-in-out; -webkit-animation: leaf 1.5s ease-in-out; animation: leaf 1.5s ease-in-out; }

@-moz-keyframes leaf {
    50% { left: 96px; top: -58px; -moz-transform: rotate(-120deg); }
    50.1% { left: -48px; top: -58px; -moz-transform: rotate(-120deg); }
    50.2% { left: -48px; top: 96px; -moz-transform: rotate(120deg); }
    100% { left: 29px; top: 29px; -moz-transform: rotate(0deg); }
}

@-webkit-keyframes leaf {
    50% { left: 96px; top: -58px; -webkit-transform: rotate(-120deg); }
    50.1% { left: -48px; top: -58px; -webkit-transform: rotate(-120deg); }
    50.2% { left: -48px; top: 96px; -webkit-transform: rotate(120deg); }
    100% { left: 29px; top: 29px; -webkit-transform: rotate(0deg); }
}

@keyframes leaf {
    50% { left: 96px; top: -58px; transform: rotate(-120deg); }
    50.1% { left: -48px; top: -58px; transform: rotate(-120deg); }
    50.2% { left: -48px; top: 96px; transform: rotate(120deg); }
    100% { left: 29px; top: 29px; transform: rotate(0deg); }
}


/*--------------------------------------------------
clock icon
--------------------------------------------------*/
.clock { width: 40px; height: 40px; left: 28px; top: 28px; background: url(/img/clock.png) no-repeat 0 0; position: absolute; z-index: 1; }
.clock1, .clock2 { width: 34px; height: 34px; left: 31px; top: 31px; background: url(/img/clock1.png) no-repeat 0 0; position: absolute; z-index: 2; }
.clock2 { background: url(/img/clock2.png) no-repeat 0 0; }
.icon_clock:hover .clock1 { -moz-animation: clock1 1.6s ease-in-out; -webkit-animation: clock1 1.6s ease-in-out; animation: clock1 1.6s ease-in-out; }
.icon_clock:hover .clock2 { -moz-animation: clock2 1.6s ease-in-out; -webkit-animation: clock2 1.6s ease-in-out; animation: clock2 1.6s ease-in-out; }

@-moz-keyframes clock1 {
    0% { -moz-transform: rotate(0deg); }
    70% { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(360deg); }
}

@-moz-keyframes clock2 {
    0% { -moz-transform: rotate(0deg); }
    70% { -moz-transform: rotate(30deg); }
    100% { -moz-transform: rotate(0deg); }
}

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

@-webkit-keyframes clock2 {
    0% { -webkit-transform: rotate(0deg); }
    70% { -webkit-transform: rotate(15deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@keyframes clock1 {
    0% { transform: rotate(0deg); }
    70% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

@keyframes clock2 {
    0% { transform: rotate(0deg); }
    70% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}


/*--------------------------------------------------
mail icon
--------------------------------------------------*/
.mail1, .mail2 { width: 40px; height: 24px; left: 22px; top: 33px; background: url(/img/mail1.png) no-repeat 0 0; position: absolute; z-index: 2; }
.mail2 { height: 19px; top: 29px; background: url(/img/mail2.png) no-repeat 0 0; z-index: 3; }
.icon_mail:hover .mail2 { -moz-animation: mail 1.5s ease-in-out; -webkit-animation: mail 1.5s ease-in-out; animation: mail 1.5s ease-in-out; }

@-moz-keyframes mail {
    15% { height: 0; -moz-transform: rotate(0deg); }
    15.1% { -moz-transform: rotate(180deg); top: 29px; }
    30% { height: 19px; -moz-transform: rotate(180deg); top: 10px; }
    70% { height: 19px; -moz-transform: rotate(180deg); top: 10px; }
    85% { height: 0px; -moz-transform: rotate(180deg); top: 29px; }
    85.1% { -moz-transform: rotate(0deg); height: 0; }
    100% { height: 19px; }
}

@-webkit-keyframes mail {
    15% { height: 0; -webkit-transform: rotate(0deg); }
    15.1% { -webkit-transform: rotate(180deg); top: 29px; }
    30% { height: 19px; -webkit-transform: rotate(180deg); top: 10px; }
    70% { height: 19px; -webkit-transform: rotate(180deg); top: 10px; }
    85% { height: 0px; -webkit-transform: rotate(180deg); top: 29px; }
    85.1% { -webkit-transform: rotate(0deg); height: 0; }
    100% { height: 19px; }
}

@keyframes mail {
    15% { height: 0; transform: rotate(0deg); }
    15.1% { transform: rotate(180deg); top: 29px; }
    30% { height: 19px; transform: rotate(180deg); top: 10px; }
    70% { height: 19px; transform: rotate(180deg); top: 10px; }
    85% { height: 0px; transform: rotate(180deg); top: 29px; }
    85.1% { transform: rotate(0deg); height: 0; }
    100% { height: 19px; }
}


/*--------------------------------------------------
doc icon
--------------------------------------------------*/
.doc1, .doc2 { width: 31px; height: 39px; left: 30px; top: 21px; background: url(/img/doc.png) no-repeat 0 0; position: absolute; z-index: 1; }
.doc2 { left: 27px; top: 24px; z-index: 2; }
.icon_doc:hover .doc1 { -moz-animation: doc1 1.2s ease-in-out; -webkit-animation: doc1 1.2s ease-in-out; animation: doc1 1.2s ease-in-out; }
.icon_doc:hover .doc2 { -moz-animation: doc2 1.2s ease-in-out; -webkit-animation: doc2 1.2s ease-in-out; animation: doc2 1.2s ease-in-out; }

@-moz-keyframes doc2 {
    30% { left: 17px; top: 34px; z-index: 2; -moz-transform: rotate(35); }
    40% { z-index: 1; -moz-transform: rotate(35); }
    100% { z-index: 1; left: 30px; top: 21px; -moz-transform: rotate(0); }
}

@-moz-keyframes doc1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 27px; top: 24px; }
}

@-webkit-keyframes doc2 {
    30% { left: 17px; top: 34px; z-index: 2; }
    40% { z-index: 1; }
    100% { z-index: 1; left: 30px; top: 21px; }
}

@-webkit-keyframes doc1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 27px; top: 24px; }
}

@keyframes doc2 {
    30% { left: 17px; top: 34px; z-index: 2; }
    40% { z-index: 1; }
    100% { z-index: 1; left: 30px; top: 21px; }
}

@keyframes doc1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 27px; top: 24px; }
}


/*--------------------------------------------------
docblack icon
--------------------------------------------------*/
.docblack1, .docblack2 { width: 31px; height: 39px; left: 36px; top: 27px; background: url(/img/docblack.png) no-repeat 0 0; position: absolute; z-index: 1; }
.docblack2 { left: 33px; top: 30px; z-index: 2; }
.icon_docblack:hover .docblack1 { -moz-animation: docblack1 1.2s ease-in-out; -webkit-animation: docblack1 1.2s ease-in-out; animation: docblack1 1.2s ease-in-out; }
.icon_docblack:hover .docblack2 { -moz-animation: docblack2 1.2s ease-in-out; -webkit-animation: docblack2 1.2s ease-in-out; animation: docblack2 1.2s ease-in-out; }

@-moz-keyframes docblack2 {
    30% { left: 23px; top: 40px; z-index: 2; -moz-transform: rotate(35); }
    40% { z-index: 1; -moz-transform: rotate(35); }
    100% { z-index: 1; left: 36px; top: 27px; -moz-transform: rotate(0); }
}

@-moz-keyframes docblack1 {
    30% { left: 46px; top: 17px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 33px; top: 30px; }
}

@-webkit-keyframes docblack2 {
    30% { left: 23px; top: 40px; z-index: 2; }
    40% { z-index: 1; }
    100% { z-index: 1; left: 36px; top: 27px; }
}

@-webkit-keyframes docblack1 {
    30% { left: 46px; top: 17px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 33px; top: 30px; }
}

@keyframes docblack2 {
    30% { left: 23px; top: 40px; z-index: 2; }
    40% { z-index: 1; }
    100% { z-index: 1; left: 36px; top: 27px; }
}

@keyframes docblack1 {
    30% { left: 46px; top: 17px; z-index: 1; }
    40% { z-index: 2; }
    100% { z-index: 2; left: 33px; top: 30px; }
}

/*--------------------------------------------------
scheda icon
--------------------------------------------------*/
.scheda1 { width: 32px; height: 39px; left: 27px; top: 22px; background: url(/img/scheda1.png) no-repeat 0 0; position: absolute; z-index: 1; }
.scheda2 { width: 26px; height: 33px; left: 30px; top: 100px; background: url(/img/scheda2.png) no-repeat 0 0; position: absolute; z-index: 2; }
.scheda3 { width: 18px; height: 12px; left: 34px; top: 17px; background: url(/img/scheda3.png) no-repeat 0 0; position: absolute; z-index: 3; }
.icon_scheda:hover .scheda3 { -moz-animation: scheda3 2s ease-in-out; -webkit-animation: scheda3 2s ease-in-out; animation: scheda3 2s ease-in-out; }
.icon_scheda:hover .scheda2 { -moz-animation: scheda2 2s ease-in-out; -webkit-animation: scheda2 2s ease-in-out; animation: scheda2 2s ease-in-out; }

@-moz-keyframes scheda3 {
    5% { top: 15px; }
    20% { top: 17px; }
    70% { top: 17px; }
    85% { top: 15px; }
    100% { top: 17px; }
}

@-moz-keyframes scheda2 {
    10% { top: 26px; }
    85% { top: 26px; }
    100% { top: 100px; }
}

@-webkit-keyframes scheda3 {
    5% { top: 15px; }
    20% { top: 17px; }
    70% { top: 17px; }
    85% { top: 15px; }
    100% { top: 17px; }
}

@-webkit-keyframes scheda2 {
    10% { top: 26px; }
    85% { top: 26px; }
    100% { top: 100px; }
}

@keyframes scheda3 {
    5% { top: 15px; }
    20% { top: 17px; }
    70% { top: 17px; }
    85% { top: 15px; }
    100% { top: 17px; }
}

@keyframes scheda2 {
    10% { top: 26px; }
    85% { top: 26px; }
    100% { top: 100px; }
}


/*--------------------------------------------------
sole icon
--------------------------------------------------*/
.sole { width: 44px; height: 45px; background: url(/img/sole.png) no-repeat 0 0; position: absolute; z-index: 2; top: 25px; left: 26px; }
.icon_sole:hover .sole { -moz-animation: sole 1.8s ease-in-out; -webkit-animation: sole 1.6s ease-in-out; animation: sole 1.8s ease-in-out; }

@-moz-keyframes sole {
    10% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(-360deg); }
}

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

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


/*--------------------------------------------------
tree icon
--------------------------------------------------*/
.tree1, .tree2 { width: 32px; height: 46px; left: 32px; top: 25px; background: url(/img/tree.png) no-repeat 0 0; position: absolute; z-index: 1; }
.icon_tree:hover .tree1 { -moz-animation: tree1 1.5s ease-in-out; -webkit-animation: tree1 1.5s ease-in-out; animation: tree1 1.5s ease-in-out; }
.icon_tree:hover .tree2 { -moz-animation: tree2 1.5s ease-in-out; -webkit-animation: tree2 1.5s ease-in-out; animation: tree2 1.5s ease-in-out; }

@-moz-keyframes tree2 {
    30% { left: 17px; top: 34px; z-index: 2; -moz-transform: rotate(35); }
    50% { z-index: 1; -moz-transform: rotate(35); }
    100% { z-index: 1; left: 30px; top: 21px; -moz-transform: rotate(0); }
}

@-moz-keyframes tree1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    50% { z-index: 2; }
    100% { z-index: 2; left: 32px; top: 25px; }
}

@-webkit-keyframes tree2 {
    30% { left: 17px; top: 34px; z-index: 2; }
    50% { z-index: 1; }
    100% { z-index: 1; left: 32px; top: 25px; }
}

@-webkit-keyframes tree1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    50% { z-index: 2; }
    100% { z-index: 2; left: 32px; top: 25px; }
}

@keyframes tree2 {
    30% { left: 17px; top: 34px; z-index: 2; }
    50% { z-index: 1; }
    100% { z-index: 1; left: 32px; top: 25px; }
}

@keyframes tree1 {
    30% { left: 40px; top: 11px; z-index: 1; }
    50% { z-index: 2; }
    100% { z-index: 2; left: 32px; top: 25px; }
}


/*--------------------------------------------------
factory icon
--------------------------------------------------*/
.factory1 { width: 38px; height: 30px; background: url(/img/factory1.png) no-repeat 0 0; position: absolute; z-index: 1; top: 39px; left: 29px; }
.factory2 { width: 34px; height: 14px; background: url(/img/factory2.png) no-repeat center 0; position: absolute; z-index: 2; top: 25px; left: 33px; border-radius: 10px; -webkit-border-radius: 10px; }
.icon_factory:hover .factory2 { -moz-animation: factory 1.4s ease-in-out; -webkit-animation: factory 1.4s ease-in-out; animation: factory 1.4s ease-in-out; }

@-moz-keyframes factory {
    0% { width: 34px; height: 14px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
    50% { width: 0; height: 0; top: 5px; left: 33px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    60.1% { width: 0; height: 0; top: 35px; left: 65px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    100% { width: 34px; height: 14px; top: 25px; left: 33px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
}

@-webkit-keyframes factory {
    0% { width: 34px; height: 14px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
    50% { width: 0; height: 0; top: 5px; left: 33px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    60.1% { width: 0; height: 0; top: 35px; left: 65px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    100% { width: 34px; height: 14px; top: 25px; left: 33px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
}

@keyframes factory {
    0% { width: 34px; height: 14px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
    50% { width: 0; height: 0; top: 5px; left: 33px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    60.1% { width: 0; height: 0; top: 35px; left: 65px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
    100% { width: 34px; height: 14px; top: 25px; left: 33px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
}




/*--------------------------------------------------
oil icon
--------------------------------------------------*/
.oil1 { width: 34px; height: 46px; background: url(/img/oil1.png) no-repeat 0 0; position: absolute; z-index: 1; top: 25px; left: 31px; }
.oil2 { width: 10px; height: 15px; background: url(/img/oil2.png) no-repeat 0 0; position: absolute; z-index: 2; top: 43px; left: 42px; }
.icon_oil:hover .oil2 { -moz-animation: oil 1.8s ease-in-out; -webkit-animation: oil 1.6s ease-in-out; animation: oil 1.8s ease-in-out; }

@-moz-keyframes oil {
    0% { top: 43px; }
    50% { top: 71px; }
    50.1% { top: 11px; }
    100% { top: 43px; }
}

@-webkit-keyframes oil {
    0% { top: 43px; }
    50% { top: 71px; }
    50.1% { top: 11px; }
    100% { top: 43px; }
}

@keyframes oil {
    0% { top: 43px; }
    50% { top: 71px; }
    50.1% { top: 11px; }
    100% { top: 43px; }
}


/*--------------------------------------------------
rivenditori
--------------------------------------------------*/
.rivenditori { width: 33px; height: 47px; background: url(/img/rivenditori.png) no-repeat 0 1px; position: absolute; z-index: 1; top: 21px; left: 25px; }
.icon_rivenditori:hover .rivenditori { -moz-animation: rivenditori 1.8s ease-in-out; -webkit-animation: rivenditori 1.6s ease-in-out; animation: rivenditori 1.8s ease-in-out; }

@-moz-keyframes rivenditori {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@-webkit-keyframes rivenditori {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@keyframes rivenditori {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

/*--------------------------------------------------
store
--------------------------------------------------*/
.store1 { width: 45px; height: 30px; background: url(/img/store1.png) no-repeat 0 0; position: absolute; z-index: 1; top: 37px; left: 19px; }
.store2 { width: 45px; height: 20px; background: url(/img/store2.png) no-repeat 0 1px; position: absolute; z-index: 1; top: 21px; left: 19px; }
.icon_store:hover .store2 { -moz-animation: store 1.8s ease-in-out; -webkit-animation: store 1.6s ease-in-out; animation: store 1.8s ease-in-out; }

@-moz-keyframes store {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@-webkit-keyframes store {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}

@keyframes store {
    0% { top: 21px; }
    10% { top: 12px; }
    20% { top: 21px; }
    30% { top: 16px; }
    45% { top: 21px; }
    55% { top: 18px; }
    70% { top: 21px; }
}


/*--------------------------------------------------
shelf
--------------------------------------------------*/
.shelf1 { width: 57px; height: 14px; background: url(/img/shelf1.png) no-repeat 0 0; position: absolute; z-index: 1; top: 54px; left: 20px; }
.shelf2 { width: 49px; height: 12px; background: url(/img/shelf2.png) no-repeat 0 0; position: absolute; z-index: 1; top: 37px; left: 24px; }
.shelf3 { width: 43px; height: 9px; background: url(/img/shelf3.png) no-repeat 0 0; position: absolute; z-index: 1; top: 23px; left: 28px; }
.icon_shelf:hover .shelf1 { -moz-animation: shelf1 1.8s ease-in-out; -webkit-animation: shelf1 1.6s ease-in-out; animation: shelf1 1.8s ease-in-out; }
.icon_shelf:hover .shelf2 { -moz-animation: shelf2 1.8s ease-in-out; -webkit-animation: shelf2 1.6s ease-in-out; animation: shelf2 1.8s ease-in-out; }
.icon_shelf:hover .shelf3 { -moz-animation: shelf3 1.8s ease-in-out; -webkit-animation: shelf3 1.6s ease-in-out; animation: shelf3 1.8s ease-in-out; }

@-moz-keyframes shelf1 {
    0% { left: 20px; }
    10% { left: 10px; }
    20% { left: 30px; }
    30% { left: 15px; }
    45% { left: 25px; }
    55% { left: 18px; }
    70% { left: 20px; }
}

@-webkit-keyframes shelf1 {
    0% { left: 20px; }
    10% { left: 10px; }
    20% { left: 30px; }
    30% { left: 15px; }
    45% { left: 25px; }
    55% { left: 18px; }
    70% { left: 20px; }
}

@keyframes shelf1 {
    0% { left: 20px; }
    10% { left: 10px; }
    20% { left: 30px; }
    30% { left: 15px; }
    45% { left: 25px; }
    55% { left: 18px; }
    70% { left: 20px; }
}

@-moz-keyframes shelf2 {
    0% { left: 20px; }
    10% { left: 10px; }
    20% { left: 30px; }
    30% { left: 15px; }
    45% { left: 25px; }
    55% { left: 18px; }
    70% { left: 20px; }
}

@-webkit-keyframes shelf2 {
    0% { left: 24px; }
    10% { left: 34px; }
    20% { left: 14px; }
    30% { left: 29px; }
    45% { left: 19px; }
    55% { left: 26px; }
    70% { left: 24px; }
}

@keyframes shelf2 {
    0% { left: 20px; }
    10% { left: 10px; }
    20% { left: 30px; }
    30% { left: 15px; }
    45% { left: 25px; }
    55% { left: 18px; }
    70% { left: 20px; }
}

@-moz-keyframes shelf3 {
    0% { left: 28px; }
    10% { left: 23px; }
    20% { left: 33px; }
    30% { left: 30px; }
    45% { left: 26px; }
    55% { left: 29px; }
    70% { left: 28px; }
}

@-webkit-keyframes shelf3 {
    0% { left: 28px; }
    10% { left: 23px; }
    20% { left: 33px; }
    30% { left: 30px; }
    45% { left: 26px; }
    55% { left: 29px; }
    70% { left: 28px; }
}

@keyframes shelf3 {
    0% { left: 28px; }
    10% { left: 23px; }
    20% { left: 33px; }
    30% { left: 30px; }
    45% { left: 26px; }
    55% { left: 29px; }
    70% { left: 28px; }
}


/*--------------------------------------------------
phone icon
--------------------------------------------------*/
.phone1 { position: absolute; z-index: 1; top: 30px; left: 22px; background: url(/img/phone1.png) no-repeat 0 0; width: 39px; height: 31px; }
.phone2 { position: absolute; z-index: 1; top: 24px; left: 19px; background: url(/img/phone2.png) no-repeat 0 0; width: 44px; height: 13px; }
.icon_phone:hover .phone2 { -moz-animation: phone 1.2s ease-in-out; -webkit-animation: phone 1.2s ease-in-out; animation: phone 1.2s ease-in-out; }

@-moz-keyframes phone {
    10% { -moz-transform: rotate(10deg); top: 20px; }
    20% { -moz-transform: rotate(-10deg); }
    30% { -moz-transform: rotate(10deg); }
    40% { -moz-transform: rotate(-10deg); }
    50% { -moz-transform: rotate(10deg); }
    60% { -moz-transform: rotate(-10deg); }
    70% { -moz-transform: rotate(10deg); }
    80% { -moz-transform: rotate(-10deg); }
    90% { -moz-transform: rotate(10deg); }
    100% { -moz-transform: rotate(0deg); top: 24px; }
}

@-webkit-keyframes phone {
    10% { -webkit-transform: rotate(10deg); top: 20px; }
    20% { -webkit-transform: rotate(-10deg); }
    30% { -webkit-transform: rotate(10deg); }
    40% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
    60% { -webkit-transform: rotate(-10deg); }
    70% { -webkit-transform: rotate(10deg); }
    80% { -webkit-transform: rotate(-10deg); }
    90% { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(0deg); top: 24px; }
}

@keyframes phone {
    10% { transform: rotate(10deg); top: 20px; }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    70% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    90% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); top: 24px; }
}

/*--------------------------------------------------
eldom icon
--------------------------------------------------*/
.plug { position: absolute; z-index: 1; top: 20px; left: 29px; background: url(/img/plug.png) no-repeat 0 0; width: 24px; height: 48px; }
.electric { position: absolute; z-index: 1; top: 5px; left: 34px; background: url(/img/electric.png) no-repeat 0 0; width: 14px; height: 26px; opacity: 0; }
.icon_eldom:hover .plug { -moz-animation: eldom1 1.2s ease-in-out; -webkit-animation: eldom1 1.2s ease-in-out; animation: eldom1 1.2s ease-in-out; }
.icon_eldom:hover .electric { -moz-animation: eldom2 1.2s ease-in-out; -webkit-animation: eldom2 1.2s ease-in-out; animation: eldom2 1.2s ease-in-out; }

@-moz-keyframes eldom1 {
    0% { top: 20px; }
    60% { top: 31px; }
    100% { top: 31px; }
}

@-webkit-keyframes eldom1 {
    0% { top: 20px; }
    60% { top: 31px; }
    100% { top: 31px; }
}

@keyframes eldom1 {
    0% { top: 20px; }
    60% { top: 31px; }
    100% { top: 31px; }
}

@-moz-keyframes eldom2 {
    50% { opacity: 0; }
    60% { opacity: 1; }
    70% { opacity: 0; }
    80% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes eldom2 {
    50% { opacity: 0; }
    60% { opacity: 1; }
    70% { opacity: 0; }
    80% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes eldom2 {
    50% { opacity: 0; }
    60% { opacity: 1; }
    70% { opacity: 0; }
    80% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 1; }
}



@media screen and (-webkit-min-device-pixel-ratio:2), screen and (-max-moz-device-pixel-ratio:2) {
}