/*€──────────────────────────────────────────────────────────────────────────────────────────────*/
/*€--- Fichier S000-index.css ===> STYLE appliqué sur fichier V000-index.php ( Dossier VIEW )    */
/*€──────────────────────────────────────────────────────────────────────────────────────────────*/


/*:___ DEBUT - 01 ______________________________________________________________________________:*/

/*?--- CONTAINER DIAPORAMA */
#iContainerDiaporama {
    width: 100%;
    height: calc(100vh - 90px);
    top: 0;
    left: 0;
}

.img-1, .img-2, .img-3, .img-4, .img-5 {
    position: absolute;
    width: 100%;
    height: calc(100% - 90px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

.img-1 {
    animation-name: image1;
}

.img-2 {
    animation-name: image2;
}

.img-3 {
    animation-name: image3;
}

.img-4 {
    animation-name: image4;
}

.img-5 {
    animation-name: image5;
}

@keyframes image1 {
    0%   {opacity: 1;}
    20%  {opacity: 0;}
    40%  {opacity: 0;}
    60%  {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes image2 {
    0%   {opacity: 0;}
    20%  {opacity: 1;}
    40%  {opacity: 0;}
    60%  {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes image3 {
    0%   {opacity: 0;}
    20%  {opacity: 0;}
    40%  {opacity: 1;}
    60%  {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes image4 {
    0%   {opacity: 0;}
    20%  {opacity: 0;}
    40%  {opacity: 0;}
    60%  {opacity: 1;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes image5 {
    0%   {opacity: 0;}
    20%  {opacity: 0;}
    40%  {opacity: 0;}
    60%  {opacity: 0;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
}


/*?--- CONTAINER INFO */
#iContainerInfo {
    width: 100%;
    height: 600px;
    background-color: #02b3f8;
}
/*:________________ FIN - 01 ___________________________________________________________________:*/