body{
    background-image: url(deux.jpg);
    background-size: cover;
    width: 1350px;
    height: 684px;
    overflow: hidden;
}
header.Panel{
    background-color: white;
    height:50px;
    margin-left: -8px;
    margin-right: -9px;
    margin-top: -11px;
    border: solid;
    border-width: 1px;
    border-color: blue;
    opacity: 0.9;
}


h1.titre{
    font-size: 17px;
    padding-top: 6px;
    padding-left: 50px;
    opacity: 90px;
    
}
article.coeur{
    background-color: whitesmoke;
    border-style: solid;
    border-width: 1px; 
    height: 540px;
    width: 1150px;
    margin-bottom: 40px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 40px;
    opacity: 0.95;
}

ul {
    list-style-type: none;
    margin-top: 0px;
    padding: 0px;
    width: 252px;
    background-color: #D9E3E6;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
    box-shadow: 5px -4px 5px  grey;
}
li a:active{
    background-color: mediumvioletred;
    
}



div.contenu{
    height: 541px;
    width: 900px;
    margin-left: 251px;
    margin-top: -223px;
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: black;
       
}

.contenu img{
    height: 541px;
    width: 898px;
    position: absolute;
    animation-name: example;
    animation-duration: 3400ms;
    animation-iteration-count: infinite;

}

.contenu img:nth-child(1) {animation-delay: 0.5s}
.contenu img:nth-child(2) {animation-delay: 1s}


/*Animation code*/

@keyframes example {

    0% {opacity: 1;} 
    25% {opacity 0,75;} 
    50% {opacity: 0,5;} 
    100% {opacity: 0;} 
}