/* CSS Document */

/* Mes images size = 1400 x 300 */ 
/* Défilement donner 3sec par images / adapter les frames en & selon nbr img */

.carrouselArea{
    margin:0 auto;
    border:0px solid gray;
    padding:0;
    width:100%;
    height:300px;
    background-image: url("../img/b000.jpg");
    background-size: cover;

    -webkit-animation-name:zoneImg;
    -webkit-animation-duration:20s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;

    -moz-animation-name:zoneImg;
    -moz-animation-duration:20s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;

    animation-name:zoneImg;
    animation-duration:20s;
    animation-timing-function:linear;
    animation-timing-function:easy-out;
    animation-iteration-count:infinite;
    animation-direction:normal;
}                           

@-webkit-keyframes zoneImg{
    0%{background-image: url("../img/b000.jpg"); background-size: cover;}
    25%{background-image: url("../img/b001.jpg"); background-size: cover;}
    40%{background-image: url("../img/b002.jpg"); background-size: cover;}
    55%{background-image: url("../img/b003.jpg"); background-size: cover;}
    70%{background-image: url("../img/b004.jpg"); background-size: cover;}
    85%{background-image: url("../img/b005.jpg"); background-size: cover;}
}

@-moz-keyframes zoneImg{
    0%{background-image: url("../img/b000.jpg"); background-size: cover;}
    25%{background-image: url("../img/b001.jpg"); background-size: cover;}
    40%{background-image: url("../img/b002.jpg"); background-size: cover;}
    55%{background-image: url("../img/b003.jpg"); background-size: cover;}
    70%{background-image: url("../img/b004.jpg"); background-size: cover;}
    85%{background-image: url("../img/b005.jpg"); background-size: cover;}
}

@keyframes zoneImg{
    0%{background-image: url("../img/b000.jpg"); background-size: cover;}
    25%{background-image: url("../img/b001.jpg"); background-size: cover;}
    40%{background-image: url("../img/b002.jpg"); background-size: cover;}
    55%{background-image: url("../img/b003.jpg"); background-size: cover;}
    70%{background-image: url("../img/b004.jpg"); background-size: cover;}
    85%{background-image: url("../img/b005.jpg"); background-size: cover;}
}



/* --------- RESPONSIVE DESIGN ---------- */
@media all and (max-width : 1100px){
.carrouselArea{
    height:230px;
}

@media all and (max-width : 1000px){
.carrouselArea{
    height:210px;
}

@media all and (max-width : 900px){
.carrouselArea{
    height:180px;
}

@media all and (max-width : 700px){
.carrouselArea{
    height:150px;
}

@media all and (max-width : 550px){
.carrouselArea{
    height:110px;
    background-image: url("img/b000.jpg");
    background-size: cover;
}