@import url(core/skeleton.css);

/* -------------------------- BODY ------------------- */ 

/* ---------- PART 1 -------------- */
#titlepage {
    height: 139px;
    padding-top: 80px;
    background: no-repeat center;
}
#titlepage h1 {
    margin: 40px 0 40px 457px;
    text-transform: capitalize;
}


/* ---------- PART 2 -------------- */

div.intro-content{
    
    padding: 90px 0;
    text-align: left;
}

div.intro-content div.wrapper{
    
    display: flex;
}

div.intro-content img{
    width: 30%;
    border-radius: 0%;
    height: 50px
}

div.resp-content {
  display: none;
} 

/*---------------------------------------*/
div.intro-content div.wrapper span#story-2015 {
  width : 30%;
  height : 17em;
  background-image: url(/images/histoire/2015.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
  z-index: 2;
}





div.intro-content div.wrapper span#story-2019 {
  width : 30%;
  height : 17em;
  background-image: url(/images/histoire/2019.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-2019::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   


div.intro-content div.wrapper span#story-juin-2020 {
    width : 30%;
    height : 17em;
    background-image: url(/images/instagram/photo3vatsy.png);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-juin-2020::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   


div.intro-content div.wrapper span#story-septembre-2020 {
    width : 30%;
    height : 17em;
    background-image: url(/images/videdressing/teamvd.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-septembre-2020::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}     


div.intro-content div.wrapper span#story-octobre-2020 {
    width : 30%;
    height : 17em;
    background-image: url(/images/renovation/murpeinture.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-octobre-2020::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}     


div.intro-content div.wrapper span#story-novembre-2020 {
    width : 30%;
    height : 17em;
    background-image: url(/images/gasytribu.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-novembre-2020::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}     




div.intro-content div.wrapper span#story-decembre-2020 {
    width : 30%;
    height : 17em;
    background-image: url(/images/Soa_kanto_malagasy/4_copie.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-decembre-2020::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 75.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    


div.intro-content div.wrapper span#story-janvier-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/Soaviko_Akorondrano/1.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-janvier-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-mai-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/crowdfunding/Crowdfunding_expl.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: -30px;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-mai-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    



div.intro-content div.wrapper span#story-juin-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/videdressing2/1.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: bottom;
    background-position-x: 0px;
    z-index: 2;
}

div.intro-content div.wrapper span#story-juin-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-juillet-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/appro.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: -25px;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-juillet-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-aout-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/sanitaire/1.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-aout-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    


div.intro-content div.wrapper span#story-septembre-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/recre/48.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-septembre-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-novembre-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/quesaco/2.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-novembre-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    


div.intro-content div.wrapper span#story-decembre-2021 {
    width : 30%;
    height : 17em;
    background-image: url(/images/concert/26_reshape.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-decembre-2021::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-fevrier-2022 {
    width : 30%;
    height : 17em;
    background-image: url(/images/Mavana/Mavana-scheme.png);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: -17px;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-fevrier-2022::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}    

div.intro-content div.wrapper span#story-avril-2022 {
    width : 30%;
    height : 17em;
    background-image: url(/images/videdressing3/1.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-avril-2022::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   

div.intro-content div.wrapper span#story-mai-2022 {
    width : 30%;
    height : 17em;
    background-image: url(/images/Mavana/mavana-working.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    z-index: 2;
}

div.intro-content div.wrapper span#story-mai-2022::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   

div.intro-content div.wrapper span#story-aout-2022 {
    width : 30%;
    height : 17em;
    background-image: url(/images/Garden-party/1.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: -63px;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-aout-2022::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   

div.intro-content div.wrapper span#story-octobre-2022 {
    width : 30%;
    height : 17em;
    background-image: url(/images/WDC/WDC_France.jpg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 100%;
    background-position-y: top;
    background-position-x: center;
    z-index: 2;
}

div.intro-content div.wrapper span#story-octobre-2022::after {
    content: "";
    border-width: 2px;
    border-color: #777;
    height: 68.5%;
    border-style: solid;

    display: inline-block;
    position: relative;
    top: 100%;
    left: 51.5%;

    opacity: 0.2;
}   


div.intro-content div.wrapper span#story-decembre-2022 {
  width : 30%;
  height : 17em;
  background-image: url(/images/Mavana/34.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-decembre-2022::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   


div.intro-content div.wrapper span#story-janvier-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/logo_divers/vinted.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 175%;
  background-position-y: -34px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-janvier-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   



div.intro-content div.wrapper span#story-fevrier-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/Mavana/37.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 101%;
  background-position-y: 0px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-fevrier-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   





div.intro-content div.wrapper span#story-mars-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/Mavana/38.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 105%;
  background-position-y: -10px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-mars-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   





div.intro-content div.wrapper span#story-juin-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/partenaires/logo_fondation-accenture.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 100%;
  background-position-y: 5px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-juin-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   

div.intro-content div.wrapper span#story-juillet-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/evenement/Afterwork_badass.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 175%;
  background-position-y: -34px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-juillet-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   


div.intro-content div.wrapper span#story-decembre-2023 {
  width : 30%;
  height : 17em;
  background-image: url(/images/Kajy/quatre_quart.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 100%;
  background-position-y: 1px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-decembre-2023::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   


div.intro-content div.wrapper span#story-fevrier-2024 {
  width : 30%;
  height : 17em;
  background-image: url(/images/taombaovao/1.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 143%;
  background-position-y: -38px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-fevrier-2024::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   

div.intro-content div.wrapper span#story-mai-1-2024 {
  width : 30%;
  height : 17em;
  background-image: url(/images/Garden-party3/2.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 100%;
  background-position-y: -1px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-mai-1-2024::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   

div.intro-content div.wrapper span#story-mai-2-2024 {
  width : 30%;
  height : 17em;
  background-image: url(/images/tsika_jiaby/2.jpeg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 151%;
  background-position-y: -123px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-mai-2-2024::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   



div.intro-content div.wrapper span#story-octobre-2024 {
  width : 30%;
  height : 17em;
  background-image: url(/images/zama/1.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 151%;
  background-position-y: -14px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-octobre-2024::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   


div.intro-content div.wrapper span#story-novembre-2024 {
  width : 30%;
  height : 17em;
  background-image: url(/images/tsena/1.jpg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 97% 110%;
  background-position-y: 1px;
  background-position-x: center;
  z-index: 2;
}

div.intro-content div.wrapper span#story-novembre-2024::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   


div.intro-content div.wrapper span#story-mars-2025 {
  width : 30%;
  height : 17em;
  background-image: url(/images/tamboavoa2/2.jpeg);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100% 100%;
  background-position-y: 0px;
  background-position-x: -6px;
  z-index: 2;
}

div.intro-content div.wrapper span#story-mars-2025::after {
  content: "";
  border-width: 2px;
  border-color: #777;
  height: 68.5%;
  border-style: solid;

  display: inline-block;
  position: relative;
  top: 100%;
  left: 51.5%;

  opacity: 0.2;
  z-index: 2;
}   



/*----------------------------------------*/





/*-----------------------------------------*/





div.resp-content div.wrapper {
  width: 100%;
}

div.resp-content div.wrapper span {
  height: 320px;
  display: block;
}



div.resp-content div.wrapper span#story-2015 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/7.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-2019 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/8.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-juin-2020 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/9.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-septembre-2020 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/10.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-octobre-2020 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/11.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-novembre-2020 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/12.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-decembre-2020 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/13.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-janvier-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/14.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-mai-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/15.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-juin-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/16.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: bottom;
  background-position-x: 0px;
}


div.resp-content div.wrapper span#story-juillet-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/17.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-aout-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/18.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-septembre-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/19.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-novembre-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/20.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}
 


div.resp-content div.wrapper span#story-decembre-2021 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/21.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-fevrier-2022 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/22.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-avril-2022 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/23.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-mai-2022 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/24.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-aout-2022 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/25.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: 0px;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-octobre-2022 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/26.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-x: center;
}




div.resp-content div.wrapper span#story-decembre-2022 {
width : 100%;

background-image: url(/images/histoire_resp/27.png);
background-repeat: no-repeat;
background-position: 15px;
background-size: 100%;
background-position-x: center;
}


div.resp-content div.wrapper span#story-janvier-2023 {
width : 100%;

background-image: url(/images/histoire_resp/28.png);
background-repeat: no-repeat;
background-position: 15px;
background-size: 100%;
background-position-y: top;
background-position-x: center;
}

div.resp-content div.wrapper span#story-fevrier-2023 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/29.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-mars-2023 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/30.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-juin-2023 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/31.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.resp-content div.wrapper span#story-juillet-2023 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/32.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}



div.resp-content div.wrapper span#story-decembre-2023 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/33.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-fevrier-2024 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/34.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-mai-1-2024 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/35.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-mai-2-2024 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/36.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}

div.resp-content div.wrapper span#story-octobre-2024 {
  width : 100%;
  
  background-image: url(/images/histoire_resp/37.png);
  background-repeat: no-repeat;
  background-position: 15px;
  background-size: 100%;
  background-position-y: top;
  background-position-x: center;
}


div.intro-content article{

    width: 70%;
}

div.intro-content div.wrapper p{
    margin-bottom: 0;
}

div.intro-content div.wrapper h1{
    margin-left: 3%;
    margin-bottom: 1%;
    margin-top: 4%;

    font-size: 40px;
}

div.intro-content div.wrapper h3{
    margin-left: 5%;
    margin-bottom: 0;
    text-align: left;

    font-size: 25px;
}

div.intro-content div.wrapper span.histore_description{
    margin-top: 5%;
    margin-left: 4%;
    display: inline-block;
    font-weight: bold;
}

div.intro-content div.wrapper span.histore_description li{
    margin-left: 6%;
    list-style-type: disclosure-closed;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* ---------- PART 3 -------------- */

div.subpart {
    
    padding: 0 0 15px 0;
    text-align: left;
}

div.scroll-container {
  display: none;
}



  
  @media all and (max-width: 480px) {

    div.resp-content div.wrapper span {
      height: 300px;
    }

    div.intro-content {
      display: none !important;
    }

    div.resp-content {
      display: block;
    }

    #titlepage h1 {
      margin: 11% 0 0 0;
      width: 100%;
      text-align: center;
    }

    .scroll-container {
      display: block !important;
      position: fixed;
      top: 23%;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 100%;
      background-color: transparent;
    }
  
    .scroll-line {
      width: 100%;
      height: 115px; /* La hauteur initiale de la ligne */
      background-color: #ffbeb0;
      position: relative;
      top: 0;
      transition: top 0.1s ease-out; /* Pour un effet fluide */
      border-radius: 29%;
    }

    .circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ffbeb0;
      position: relative;
      top: 46%; /* Positionner le cercle pour qu'il se trouve plus bas dans la page */
      left: calc(50% - 20px); /* Centrer le cercle par rapport à la page */
      opacity: 0; /* Initialement invisible */
      transition: opacity 0.5s ease; /* Animation de l'apparition */
    }
  
    
  }