html, body{
    margin: 0;
    padding: 0;
}

div#scene{
    border: 1px solid black;
    width: 300px;
    height: 250px;
    background-color:#015b7f ;
    box-sizing: border-box;
    z-index: 1000;
    overflow: hidden;
    
}

div#Picture{
    z-index: 8;
    width: 300;
    height: auto;
    opacity: 1;
    left: 0px;
    top: 0px;
    animation-name: Pic-FadeOut;
    animation-duration: 0.8s;
    animation-delay: 5.6s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

div#Txt01{ 
    position: absolute;
    left: 32px;
    top: 145px;
    opacity: 0;
    animation-name: Txt01-FadeIn;
    animation-duration: 2.8s;
    animation-delay:0.4s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

div#Txt02{
    position: absolute;
    z-index: 13;
    left: 32px;
    top: 162px;
    opacity: 0;
    animation-name: Txt01-FadeIn;
    animation-duration: 2.8s;
    animation-delay: 3.2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

div#Txt03{
    position: absolute;
    opacity: 0;
    z-index: 0;
    left: 32px;
    top: 52px;
    animation-name: Txt03-FadeIn;
    animation-duration: .5s;
    animation-delay: 6.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}


div#LogoCanada {
    position: absolute;
    z-index: 8;
    width: 87px;
    height: 54px;
    opacity: 0;
    left: 159px;
    top: 194px;
    animation-name: Logo-FadeIn;
    animation-duration: 0.5s;
    animation-delay: 6.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes Pic-FadeOut{
    from {opacity: 1;}
    to {opacity: 0;}

}

@keyframes Txt01-FadeIn{
    0% {opacity:0}  
    15% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes Logo-FadeIn{
    from { opacity: 0;}
    to {opacity: 1;}
}

@keyframes Txt03-FadeIn{
    from {opacity:0}  
    to {opacity: 1;}
}