body{
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.diaporama1{
    margin: 0 auto;
    width: 300px;
    height: 200px;
    border: 3px solid #333;
    background-image: url("imgs/via margana1.jpg");
    
    webkit-animation-name: diapo1;
    webkit-animation-duration: 90s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
    
    moz-animation-name: diapo1;
    moz-animation-duration: 90s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;
    moz-animation-direction: normal;
    
    animation-name: diapo1;
    animation-duration: 90s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
    
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/via margana1.jpg");}
    7%{background-image: url("imgs/via margana2.jpg");}
    14%{background-image: url("imgs/via margana3.jpg");}
    21%{background-image: url("imgs/Piazza margana1.jpg");}
    28%{background-image: url("imgs/Piazza margana2.jpg");}
    35%{background-image: url("imgs/Piazza margana3.jpg");}
    42%{background-image: url("imgs/Piazza margana3b.jpg");}
    49%{background-image: url("imgs/Piazza margana4.jpg");}
    56%{background-image: url("imgs/Piazza margana5.jpg");}
    63%{background-image: url("imgs/Piazza margana6.jpg");}
    70%{background-image: url("imgs/Piazza margana7.jpg");}
    77%{background-image: url("imgs/Piazza margana8.jpg");}
    85%{background-image: url("imgs/Piazza margana9.jpg");}
    92%{background-image: url("imgs/Piazza margana10.jpg");}

}
    
@-moz-keyframes diapo1{
    0%{background-image: url("imgs/via margana1.jpg");}
    7%{background-image: url("imgs/via margana2.jpg");}
    14%{background-image: url("imgs/via margana3.jpg");}
    21%{background-image: url("imgs/Piazza margana1.jpg");}
    28%{background-image: url("imgs/Piazza margana2.jpg");}
    35%{background-image: url("imgs/Piazza margana3.jpg");}
    42%{background-image: url("imgs/Piazza margana3b.jpg");}
    49%{background-image: url("imgs/Piazza margana4.jpg");}
    56%{background-image: url("imgs/Piazza margana5.jpg");}
    63%{background-image: url("imgs/Piazza margana6.jpg");}
    70%{background-image: url("imgs/Piazza margana7.jpg");}
    77%{background-image: url("imgs/Piazza margana8.jpg");}
    85%{background-image: url("imgs/Piazza margana9.jpg");}
    92%{background-image: url("imgs/Piazza margana10.jpg");}
}
    
@-keyframes diapo1{
    0%{background-image: url("imgs/via margana1.jpg");}
    7%{background-image: url("imgs/via margana2.jpg");}
    14%{background-image: url("imgs/via margana3.jpg");}
    21%{background-image: url("imgs/Piazza margana1.jpg");}
    28%{background-image: url("imgs/Piazza margana2.jpg");}
    35%{background-image: url("imgs/Piazza margana3.jpg");}
    42%{background-image: url("imgs/Piazza margana3b.jpg");}
    49%{background-image: url("imgs/Piazza margana4.jpg");}
    56%{background-image: url("imgs/Piazza margana5.jpg");}
    63%{background-image: url("imgs/Piazza margana6.jpg");}
    70%{background-image: url("imgs/Piazza margana7.jpg");}
    77%{background-image: url("imgs/Piazza margana8.jpg");}
    85%{background-image: url("imgs/Piazza margana9.jpg");}
    92%{background-image: url("imgs/Piazza margana10.jpg");}
}

.diaporama2{
    margin: 0 auto;
    width: 300px;
    height: 200px;
    border: 3px solid #333;
    background-image: url("imgs/Margana assemble.jpg");
    
    webkit-animation-name: diapo2;
    webkit-animation-duration: 48s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
    
    moz-animation-name: diapo2;
    moz-animation-duration: 48s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;
    moz-animation-direction: normal;
    
    animation-name: diapo2;
    animation-duration: 48s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@-webkit-keyframes diapo2{
    0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    7%{background-position: -300px 0px;}
    9%{background-position: -300px 0px;}
    14%{background-position: -600px 0px;}
    16%{background-position: -600px 0px;}
    21%{background-position: -900px 0px;}
    23%{background-position: -900px 0px;}
    28%{background-position: -1200px 0px;}
    30%{background-position: -1200px 0px;}
    35%{background-position: -1500px 0px;}
    37%{background-position: -1500px 0px;}
    42%{background-position: -1800px 0px;}
    44%{background-position: -1800px 0px;}
    49%{background-position: -2100px 0px;}
    51%{background-position: -2100px 0px;}
    56%{background-position: -2400px 0px;}
    58%{background-position: -2400px 0px;}
    63%{background-position: -2700px 0px;}
    65%{background-position: -2700px 0px;}
    70%{background-position: -3000px 0px;}
    72%{background-position: -3000px 0px;}
    77%{background-position: -3300px 0px;}
    79%{background-position: -3300px 0px;}
    83%{background-position: -3600px 0px;}
    85%{background-position: -3600px 0px;}
    90%{background-position: -3900px 0px;}
    92%{background-position: -3900px 0px;}
    96%{background-position: -4200px 0px;}
    100%{background-position: -4200px 0px;}
}
@-moz-keyframes diapo2{
    0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    7%{background-position: -300px 0px;}
    9%{background-position: -300px 0px;}
    14%{background-position: -600px 0px;}
    16%{background-position: -600px 0px;}
    21%{background-position: -900px 0px;}
    23%{background-position: -900px 0px;}
    28%{background-position: -1200px 0px;}
    30%{background-position: -1200px 0px;}
    35%{background-position: -1500px 0px;}
    37%{background-position: -1500px 0px;}
    42%{background-position: -1800px 0px;}
    44%{background-position: -1800px 0px;}
    49%{background-position: -2100px 0px;}
    51%{background-position: -2100px 0px;}
    56%{background-position: -2400px 0px;}
    58%{background-position: -2400px 0px;}
    63%{background-position: -2700px 0px;}
    65%{background-position: -2700px 0px;}
    70%{background-position: -3000px 0px;}
    72%{background-position: -3000px 0px;}
    77%{background-position: -3300px 0px;}
    79%{background-position: -3300px 0px;}
    83%{background-position: -3600px 0px;}
    85%{background-position: -3600px 0px;}
    90%{background-position: -3900px 0px;}
    92%{background-position: -3900px 0px;}
    96%{background-position: -4200px 0px;}
    100%{background-position: -4200px 0px;}
    
@-keyframes diapo2{
    0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    7%{background-position: -300px 0px;}
    9%{background-position: -300px 0px;}
    14%{background-position: -600px 0px;}
    16%{background-position: -600px 0px;}
    21%{background-position: -900px 0px;}
    23%{background-position: -900px 0px;}
    28%{background-position: -1200px 0px;}
    30%{background-position: -1200px 0px;}
    35%{background-position: -1500px 0px;}
    37%{background-position: -1500px 0px;}
    42%{background-position: -1800px 0px;}
    44%{background-position: -1800px 0px;}
    49%{background-position: -2100px 0px;}
    51%{background-position: -2100px 0px;}
    56%{background-position: -2400px 0px;}
    58%{background-position: -2400px 0px;}
    63%{background-position: -2700px 0px;}
    65%{background-position: -2700px 0px;}
    70%{background-position: -3000px 0px;}
    72%{background-position: -3000px 0px;}
    77%{background-position: -3300px 0px;}
    79%{background-position: -3300px 0px;}
    83%{background-position: -3600px 0px;}
    85%{background-position: -3600px 0px;}
    90%{background-position: -3900px 0px;}
    92%{background-position: -3900px 0px;}
    96%{background-position: -4200px 0px;}
    100%{background-position: -4200px 0px;}
}