@charset "UTF-8";
/* 
    Created on : May 1, 2015, 9:44:21 AM
    Author     : ade
*/
body {
    font-size: 62.5%; }

.titolomedio, .commento {
    background: #FFCC00;
    text-align: left;
    font: italic 150% Verdana, sans-serif; }

#TestoScelta {
    text-align: center;
    font-size: 150%;
    font-family: Verdana, sans-serif; }

.commento {
    top: 0px;
    position: relative;
    width: 295px;
    height: 440px;
    float: right;
    padding: 3px;
    font-size: 16px;}
.commento .uno {
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px; }
.commento .due {
    text-align: center;
    margin-top: 0px; }

.centeredImage {
    width: 300px;
    height: 380px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 0px;
    z-index: -1; }

.intro {
    width: 680px;
    height: 200px;
    position: relative;
    margin: 0px auto;
    top: -445px; }

.Descr {
    text-align: center;
    font: 10pt Tahoma, Arial, sans-serif; }

.ht {
    font-weight: bold;
    font-style: oblique;
    color: #0d467e; }

.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    top: 200px;
    position: relative; }

#slider {
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 440px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
    cursor: url(../pics/pause.png), auto;
}
#slider ul {
    margin: 0;
    padding: 0;
    position: relative; }
#slider li {
    width: 680px;
    height: 440px;
    position: absolute;
    top: -445px;
    list-style: none; }
#slider li.firstanimation {
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
    -ms-animation: cycle 25s linear infinite; }
#slider li.secondanimation {
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
    -ms-animation: cycletwo 25s linear infinite;}
#slider li.thirdanimation {
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite; 
    -ms-animation: cyclethree 25s linear infinite; }
#slider li.fourthanimation {
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite; 
    -ms-animation: cyclefour 25s linear infinite; }
#slider li.fifthanimation {
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite; 
    -ms-animation: cyclefive 25s linear infinite; }
#slider li.ctip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px; }

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -440px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;}

#slider:hover li, #slider:hover .progress-bar {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused; 
    -ms-animation-play-state: paused;}

#mask {
    overflow: hidden;
    height: 440px; }

@-moz-keyframes cycle {
    0% {
        top: 0px; }
    4% {
        top: 0px; }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    20% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    21% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    92% {
        top: -445px;
        opacity: 0;
        z-index: 0; }
    96% {
        top: -445px;
        opacity: 0; }
    100% {
        top: 0px;
        opacity: 1; } }
@-moz-keyframes cycletwo {
    0% {
        top: -445px;
        opacity: 0; }
    16% {
        top: -445px;
        opacity: 0; }
    20% {
        top: 0px;
        opacity: 1; }
    24% {
        top: 0px;
        opacity: 1; }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    40% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    41% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-moz-keyframes cyclethree {
    0% {
        top: -445px;
        opacity: 0; }
    36% {
        top: -445px;
        opacity: 0; }
    40% {
        top: 0px;
        opacity: 1; }
    44% {
        top: 0px;
        opacity: 1; }
    56% {
        top: 0px;
        opacity: 1; }
    60% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    61% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-moz-keyframes cyclefour {
    0% {
        top: -445px;
        opacity: 0; }
    56% {
        top: -445px;
        opacity: 0; }
    60% {
        top: 0px;
        opacity: 1; }
    64% {
        top: 0px;
        opacity: 1; }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    80% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    81% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-moz-keyframes cyclefive {
    0% {
        top: -445px;
        opacity: 0; }
    76% {
        top: -445px;
        opacity: 0; }
    80% {
        top: 0px;
        opacity: 1; }
    84% {
        top: 0px;
        opacity: 1; }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    100% {
        top: 445px;
        opacity: 0;
        z-index: 0; } }
@-webkit-keyframes cycle {
    0% {
        top: 0px; }
    4% {
        top: 0px; }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    20% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    21% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    92% {
        top: -445px;
        opacity: 0;
        z-index: 0; }
    96% {
        top: -445px;
        opacity: 0; }
    100% {
        top: 0px;
        opacity: 1; } }
@-webkit-keyframes cycletwo {
    0% {
        top: -445px;
        opacity: 0; }
    16% {
        top: -445px;
        opacity: 0; }
    20% {
        top: 0px;
        opacity: 1; }
    24% {
        top: 0px;
        opacity: 1; }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    40% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    41% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-webkit-keyframes cyclethree {
    0% {
        top: -445px;
        opacity: 0; }
    36% {
        top: -445px;
        opacity: 0; }
    40% {
        top: 0px;
        opacity: 1; }
    44% {
        top: 0px;
        opacity: 1; }
    56% {
        top: 0px;
        opacity: 1; }
    60% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    61% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-webkit-keyframes cyclefour {
    0% {
        top: -445px;
        opacity: 0; }
    56% {
        top: -445px;
        opacity: 0; }
    60% {
        top: 0px;
        opacity: 1; }
    64% {
        top: 0px;
        opacity: 1; }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    80% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    81% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-webkit-keyframes cyclefive {
    0% {
        top: -445px;
        opacity: 0; }
    76% {
        top: -445px;
        opacity: 0; }
    80% {
        top: 0px;
        opacity: 1; }
    84% {
        top: 0px;
        opacity: 1; }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    100% {
        top: 445px;
        opacity: 0;
        z-index: 0; } }
@-ms-keyframes cycle {
    0% {
        top: 0px; }
    4% {
        top: 0px; }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    20% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    21% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    92% {
        top: -445px;
        opacity: 0;
        z-index: 0; }
    96% {
        top: -445px;
        opacity: 0; }
    100% {
        top: 0px;
        opacity: 1; } }
@-ms-keyframes cycletwo {
    0% {
        top: -445px;
        opacity: 0; }
    16% {
        top: -445px;
        opacity: 0; }
    20% {
        top: 0px;
        opacity: 1; }
    24% {
        top: 0px;
        opacity: 1; }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    40% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    41% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-ms-keyframes cyclethree {
    0% {
        top: -445px;
        opacity: 0; }
    36% {
        top: -445px;
        opacity: 0; }
    40% {
        top: 0px;
        opacity: 1; }
    44% {
        top: 0px;
        opacity: 1; }
    56% {
        top: 0px;
        opacity: 1; }
    60% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    61% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-ms-keyframes cyclefour {
    0% {
        top: -445px;
        opacity: 0; }
    56% {
        top: -445px;
        opacity: 0; }
    60% {
        top: 0px;
        opacity: 1; }
    64% {
        top: 0px;
        opacity: 1; }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    80% {
        top: 445px;
        opacity: 0;
        z-index: 0; }
    81% {
        top: -445px;
        opacity: 0;
        z-index: -1; }
    100% {
        top: -445px;
        opacity: 0;
        z-index: -1; } }
@-ms-keyframes cyclefive {
    0% {
        top: -445px;
        opacity: 0; }
    76% {
        top: -445px;
        opacity: 0; }
    80% {
        top: 0px;
        opacity: 1; }
    84% {
        top: 0px;
        opacity: 1; }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0; }
    100% {
        top: 445px;
        opacity: 0;
        z-index: 0; } }
.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #2EFEF7;
    -moz-animation: fullexpand 25s ease-out infinite;
    -webkit-animation: fullexpand 25s ease-out infinite; 
    -ms-animation: fullexpand 25s ease-out infinite;}

@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0%;
        opacity: 0; }
    4%, 24%, 44%, 64%, 84% {
        width: 0%;
        opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% {
        width: 100%;
        opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% {
        width: 100%;
        opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% {
        width: 100%;
        opacity: 0; } }
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0%;
        opacity: 0; }
    4%, 24%, 44%, 64%, 84% {
        width: 0%;
        opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% {
        width: 100%;
        opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% {
        width: 100%;
        opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% {
        width: 100%;
        opacity: 0; }
}
@-ms-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0%;
        opacity: 0; }
    4%, 24%, 44%, 64%, 84% {
        width: 0%;
        opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% {
        width: 100%;
        opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% {
        width: 100%;
        opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% {
        width: 100%;
        opacity: 0; }
}

#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left: 0px; }