@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&family=Nanum+Myeongjo&family=Raleway&display=swap');
*{
    padding:0 ;
    margin:0 ;
    list-style:none ;
    text-decoration:none ;
}
html{
    scroll-behavior:smooth ;
}
/*----------------------------header----------------------------*/
header {
    position:fixed ;
    width:100% ;
    z-index:1000 ;
}
header img{
    width:75px ;
}
.flexRow{
    display:flex ;
    align-items:center ;
    justify-content:space-between ;
    width:calc(100% - 20px) ;
    padding:10px;
}
#burger{
    width:40px ;
    height:75px ;
    position:relative ;
    cursor:pointer ;
}

#burger span{
    height:3px ;
    width:40px ;
    background-color:#fff ;
    position:absolute ;
    top:35px ;
    right:0 ;
    transition:200ms ;
}
#burger span:nth-child(1){
    top:25px ;
}
#burger span:nth-child(3){
    top:45px ;
}
#burger.activeBurger span:nth-child(1){
    transform-origin:left  ;
    right:20px ;
    top:34px ;
    transform:rotate(45deg) ;
    width:20px ;
}
#burger.activeBurger span:nth-child(3){
    transform-origin:left  ;
    right:20px ;
    top:35px ;
    transform:rotate(-45deg) ;
    width:20px ;
}
header nav{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    justify-content:center ;
    background-color:#b81222 ;
    height:100vh ;
    position:absolute ;
    top:0 ;
    left:0 ;
    transform:translateX(-105%) ;
    transition:transform 200ms cubic-bezier(.49,.97,.56,.97) ;
}
header nav.open{
    transform:translateX(0) ;
}
header nav a{
    color:#fff ;
    padding:10px 30px ;
    font-size:2em ;
    font-family:'Nanum Myeongjo' ;
}
/*-----------------------------main-----------------------------*/
/*-----------------------------Section 1------------------------*/
.sectionFull{
    width:100vw ;
    height:100vh ;
}
#heroBanner{
    background:url('img/koala.jpg') no-repeat fixed ;
    background-size:cover ;
    position:relative ;
    color:#fff ;
    display:flex ;
    flex-direction:column ;
    justify-content:center ;
    align-items:center ;
}
#black{
    background-color:#000 ;
    position:absolute ;
    top:0 ;
    left:0 ;
    right:0 ;
    bottom:0 ;
    opacity:.5 ;
}
#heroBanner h2{
    font-family: 'Ms Madi', cursive ;
    z-index:1 ;
    font-size:1.8em ;
    margin-bottom:15px ;
}
#heroBanner h1 span{
    display:block ;
    height:100% ;
    width:0 ;
    background-color:#b81222 ;
    position:absolute ;
    animation:span 1000ms ease-out forwards ;
    animation-delay:1000ms ;
}
@keyframes span{
    0%{
        width:0px ;
    }
    60%{
        width:100% ;
    }
    80%{
        width:100% ;
        top:0 ;
    }
    100%{
        top:110% ;
        width:100% ;
    }
}
#heroBanner h1{
    font-family:'Nanum Myeongjo' ;
    z-index:1 ;
    font-size:3em ; 
    position:relative ;
    overflow:hidden ;
    color:transparent ;
    animation:h1 1000ms ease-out forwards ;
    animation-delay:1000ms ;
}
@keyframes h1{
    0%{
        color:transparent ;
    }
    60%{
        color:transparent ;
    }
    80%{
        color:#fff ;
    }
    100%{
        color:#fff ;
    }
}
/*-----------------------------Section 2-------------------------*/
#section2{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    justify-content:start ;
    width:calc(100vw - 50px) ;
    padding:25px ;
    text-align:center ;
    position:relative ;
    padding-bottom:20vw ;
}
#section2 h2{
    font-family:'Ms madi' ;
    font-size:2.5em ;
    margin-top:15vh ;
    transition:250ms ease-out ;
    opacity:0 ;
    transform:translateY(50px) ;
}
#section2 p{
    font-family:'Raleway' ;
    max-width:400px ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section2 img{
    z-index:-1 ;
    position:absolute ;
    bottom:0 ;
    left:0 ;
    width:100% ;
}

/*--------------------------------Section 3----------------------*/
#section3{
    z-index:1 ;
    background-color:#fff ;
    position:relative ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    text-align:center ;
    overflow-x:hidden ;
}
#section3::before{
    content:'' ;
    position:absolute ;
    left:0 ;
    top:0 ;
    right:0 ;
    background: rgb(188,27,58);
    background: linear-gradient(180deg, rgba(188,27,58,1) 0%, rgba(188,27,58,0.0) 100%);
    height:20px ;
}
#section3 ol{
    position:relative ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section3 ol #bulle{
    position:absolute ;
    width:6px ;
    height:6px ;
    border-radius:50% ;
    background-color:#000 ;
    opacity:1 ;
    top:6% ;
    left:5% ;
    transition:200ms cubic-bezier(.49,.97,.56,.97);
}
#section3 h2{
    font-family:'Ms madi' ;
    font-size:2.5em ;
    padding-top:10vh ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section3 li{
    cursor:pointer ;
    font-family:'Raleway' ;
    font-weight:bolder ;
    margin:15px 0 ;
    opacity:.6 ;
}
#section3 .selected{
    opacity:1 ;
}
#section3 .container{
    display:flex ;
    flex-flow:row nowrap ;
    height:50vh ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section3 .container div{
    width:calc(100vw - 50px) ;
    padding:0 25px ;
    height:100% ;
    transform:translateX(100vw) ;
    transition:250ms cubic-bezier(.49,.97,.56,.97) ;
    display:flex ;
    flex-direction:column ;
    justify-content:center ;
    align-items:center ;
    text-align:center ;
}
#section3 .container img{
    display:none ;
}
#section3 .container p{
    font-family:'Raleway' ;
    max-width:500px ;
}
/*--------------------------------Section 4-----------------------*/
#section4{
    display:flex ;
    flex-direction:column ;
    justify-content:start ;
    align-items:center ;
    text-align:center ;
    overflow-x:hidden ;
}
#section4 h2{
    font-family:'Ms madi' ;
    font-size:2.5em ;
    margin-top:5vh ;
    transition:250ms ease-out ;
    opacity:0 ;
    transform:translateY(50px) ;
}
#section4 .swiper{
    margin-top:50px ;
    margin-left:unset ;
    margin-right:unset ;
    width:70vw ;
    max-width:420px ;
    height:60vh ;
    transition:250ms ease-out ;
    opacity:0 ;
    transform:translateY(50px) ;
    cursor:grab ;
}
#section4 .swiper-slide{
    border-radius:10px ;
    box-shadow:0 0 10px rgba(00,00,00,0.5) ;
}
#section4 .swiper img{
    height:100% ;
}
/*-------------------------------Section 5------------------------*/
#section5{
    height:unset ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    text-align:center ;
}
#section5 h2{
    font-family:'Ms madi' ;
    font-size:2.5em ;
    padding-top:10vh ;
    transition:250ms ease-out ;
}  
                    /*-----------Half 1-----------*/
#section5 #halfSection1{
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;    
}
#section5 #halfSection1 ul{
    margin-top:20px ;
    font-family:'Raleway' ;
    width:60vw ;
    max-width:275px ;
}
#section5 #halfSection1 li{
    display:flex ;
    justify-content:space-between ;
}
                    /*-----------Half 2-----------*/
#section5 #halfSection2{
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
    margin-bottom:10vh ;
}
#section5 #halfSection2 #chartContainer{
    margin-top:25px ;
    height:400px ;
    width:90vw ;
    max-width:600px ;
}
#section5 #halfSection2 p{
    padding-top:25px ;
    font-family:'Raleway' ;
    font-size:0.8em ;
}
/*--------------------------------Section 6----------------------*/
#section6{
    height:unset ;
    width:calc(100vw - 50px) ;
    padding:0 25px ;
    display:flex ;
    align-items:center ;
    flex-direction: column;
    text-align:center ;
    margin-bottom:10vh ;
}
#section6 h2{
    font-size:2.5em ;
    font-family:'Ms Madi' ;
    margin-bottom:30px ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section6 .container{
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section6 .container h2{
    font-size:2em ;
}
#section6 .container div{
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section6 p{
    max-width:480px ;
    font-family:'Raleway' ;
    text-align:center;
    margin-bottom:30px ;
}
#section6 img{
    display:none ;
}
/*--------------------------------Section 8----------------------*/
#section8{
    height:unset ;
    width:calc(100vw - 50px) ;
    padding:0 25px ;
    margin-bottom:10vh ;
    display:flex ;
    flex-direction:column ;
    align-items:center ;
}
#section8 h2 {
    font-size:2.5em ;
    text-align:center;
    font-family:'Ms Madi' ;
    margin-bottom:30px ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section8 #covid,#section8 #animaux,#section8 #photos{
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section8 h3 {
    z-index:2 ;
    position:relative ;
    text-align:center;
    color:#fff;
    margin:20px 0 20px 0 ;
}
#section8 h3 span{
    z-index:-1 ;
    border-radius:5px ;
    position:absolute ;
    top:0 ;
    left:0 ;
    right:0 ;
    bottom:0 ;
    background-color:rgba(00,00,00,0.5) ;
}
#section8 #covid h3 {
    background:url("img/covid-19.png") center;
    background-size:cover ;
    border-radius:5px ;
    padding:40px 0 ;
}
#section8 #animaux h3 {
    background:url("img/animaux.jpg") ;
    background-position:center 30% ;
    background-size:cover ;
    border-radius:5px ;
    padding:40px 0 ;
}
#section8 #photos h3 {
    background:url("img/photos.jpg") center;
    background-size:cover ;
    border-radius:5px ;
    padding:40px 0 ;
}
#section8 p {
    max-width:480px ;
    font-family:'Raleway' ;
    text-align:center;
}
/*--------------------------------Section 9----------------------*/
#section9{
    height:unset ;
    display:flex ;
    align-items:center ;
    flex-direction: column;
    text-align:center ;
    padding-bottom:10vh ;
}
#section9 h2{
    font-size:2.5em ;
    text-align:center;
    font-family:'Ms Madi' ;
    margin-bottom:30px ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
#section9 iframe{
    width:80vw ;
    height:80vw ;
    max-width:500px ;
    border-radius:5px ;
    box-shadow:0 0 10px rgba(00,00,00,0.4) ;
    opacity:0 ;
    transform:translateY(50px) ;
    transition:250ms ease-out ;
}
/*-----------------------------Footer----------------------------*/
footer {
    background-color:#3d1014;
    box-shadow:0 0 10px rgba(00,00,00,0.7) ;
    color:#dfdfdf ;
}

footer #contenu {
    margin:10px 0;
    display:flex;
    justify-content:space-around;
}

footer #contenu div {
    text-align:center;
}

footer #informations {
    padding-top:15px;
    text-align:center ;
    font-family:'Raleway' ;
}

footer ul {
    padding:0;
    list-style:none;
    font-family:'Raleway' ;
}

footer ul li a {
    text-decoration:none;
    color:#dfdfdf;
    font-family:'Raleway' ;
}

footer ul li a:hover {
    text-decoration:underline;
}

footer ul li a:active {
    color:#dfdfdf;
}

footer ul li a:focus {
    color:#dfdfdf;
}

footer #copyright {
    text-align:center;
    font-size:0.8em;
    color:#dfdfdf;
    cursor:not-allowed;
    padding:10px;
}

/*----------------------------Version Desktop-------------------*/

@media screen and (min-width:1024px){
    body{
        width:100vw ;
        overflow-x:hidden ;
        margin:0 ;
    }
    #cursor{
        top:0 ;
        left:0 ;
        position:absolute ;
        pointer-events:none ;
        z-index:10000 ;
        width: 18px ;
        height:18px ;
        border-radius:50% ;
        background-color:#3d1014 ;
        transition:width 100ms ease-out,height 100ms ease-out,transform 100ms ease-out,border-color 150ms ease-out ;
        border:solid 2px #3d1014 ;
    }
    #cursor.click{
        width:38px ;
        height:38px ;
        transform:translate(-10px,-10px) ;
    }
    /*--------------------------------Header---------------------*/
    header{
        width:100vw ;
        display:flex ;
        transition:200ms ease-out ;
        opacity:0 ;
        transform:translateY(-100px) ;
        animation:apparition 400ms ease-out forwards ;
        animation-delay:400ms ;
    }
    @keyframes apparition{
        from{
            opacity:0 ;
            transform:translateY(-100px) ;
        }
        to{
            opacity:1 ;
            transform:translateY(0) ;
        }
    }
    header img{
        width:50px ;
    }
    header #burger{
        display:none ;
    }
    header nav{
        position:relative ;
        top:unset ;
        left:unset ;
        height:unset ;
        background-color:transparent ;
        transform:translateX(0) ;
        flex-direction:row ;
    }
    header nav a{
        font-size:1em ;
        font-weight:bold ;
        text-align:center ;
        position:relative ;
    }
    header nav a::after{
        content:'' ;
        position:absolute ;
        bottom:7px ;
        left:20px ;
        right:100% ;
        height:1.5px ;
        background-color:#fff ;
        transition:250ms ease-out ;
    }
    header nav a:hover::after{
        right:20px ;
    }
    header.color{
        background-color:rgba(255,255,255,1) ;
        box-shadow:0 0 10px rgba(00,00,00,0.4) ;

    }
    header.color nav a{
        color:#000 ;
    }
    header.color nav a::after{
        background-color:#000 ;
    }
    /*----------------------------Main---------------------------*/
    main{
        width:100vw ;
        overflow-x:hidden ;
    }
    .sectionFull{
        width:99vw ;
    }
    /*-----------------------------Section1----------------------*/
    #heroBanner{
        width:100vw ;
    }
    /*-----------------------------Section2----------------------*/
    #section2{
        overflow:hidden ;
        width:calc(100vw - 50px) ;
        padding-bottom:30vw ;
    }
    #section2 img{
        width:100vw ;
    }
    /*-----------------------------Section3-----------------------*/
    #section3{
        width:100vw ;
    }
    #section3 .container{
        margin-top:25px ;
    }
    #section3 .container div{
        flex-direction:row ;
    }
    #section3 .container img{
        display:block ;
        box-shadow:0 0 10px rgba(00,00,00,0.4) ;
        margin:0 20px ;
        border-radius:5px ;

    }
    #section3 #divLion img{
        width:40vw ;
    }
    #section3 .container #divGirafes{
        flex-direction:row-reverse ;
    }
    #section3 #divGirafes img{
        width:40vw ;
    }
    #section3 #divRhino img{
        width:40vw ;
    }
    /*-----------------------------Section5-----------------------*/
    #section5{
        flex-direction:row ;
        justify-content:space-around ;
        align-items:center ;
    }
    #section5 #halfSection2 #chartContainer{
        max-width:500px ;
    }
    /*-----------------------------Section6-----------------------*/
    #section6{
        width:calc(99vw - 50px) ;
    }
    #section6 img{
        display:block ;
        width:450px ;
        border-radius:5px ;
        box-shadow:0 0 10px rgba(00,00,00,0.4) ;
        margin:0 10px ;
    }
    #section6 .container{
        display:flex ;
        align-items:center ;
        justify-content:space-around;
        margin:12.5px 0 ;
    }
    #section6 .container.reverse{
        flex-direction:row-reverse ;
    }
    /*-----------------------------Section8-----------------------*/
    #section8{
        width:calc(99vw - 50px) ;
        flex-flow:row wrap;
        align-items:start ;
        justify-content:center ;
    }
    #section8 h2{
        margin:25px 35vw ;
    }
    #section8 div{
        margin:25px ;
    }
    /*-----------------------------Section9-----------------------*/
    #section9 iframe{
        width:50vw ;
        height: 50vw;
        max-width:500px ;
        max-height:500px ;
    }
}