/* SERRES 4 */

#serres4_container{
    background-color: #f5f5f0;
    min-height: 800px;

}

#serres4{
    --cover-highlight: rgb(255, 165, 211);
    --contrast-highlight: #e100ff;
    --hue-rotate-cover: 264deg;
    --sepia-amount: 100;

    background-color: rgb(255, 165, 211);
    color: #ff00fc;
    font-family: 'BBB Manifont Grotesk';
    max-width: 1310px;
    /* min-width: 670px; */
    margin: auto;
    transition: all 200ms ease-in-out;
    overflow: hidden;
    position: relative;
    height: 100dvh;
}

#serres4>.presentation{
    padding: 100px;
    /* position: relative; */
}
#serres4>.presentation>.title>img{
    /* font-family: 'Redaction';
    font-size: 4em;
    font-weight: bold; */
    max-width: 280px;
}
#serres4>.presentation>.title{
    /* background-color: rgb(255, 165, 211); */
}
#serres4>.foreground
{
    background-color: #f5f5f0;
    inset: 0;
    position: absolute;
    width: 100vw;
    height: 50dvh;
    -webkit-mask:
       url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle r="15" cx="50" cy="50" fill="black"/></svg>') 0/100% 100%,
       linear-gradient(#fff,#fff);
    -webkit-mask-composite:destination-out;
        mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet" width="100%" height="100%"><g><circle r="5" cx="13" cy="19.5"/><circle r="5" cx="15" cy="15"/><circle r="5" cx="28" cy="18"/><circle r="5" cx="18" cy="18"/><circle r="5" cx="22" cy="19"/><circle r="5" cx="40" cy="15"/><circle r="5" cx="33" cy="19"/><circle r="5" cx="40" cy="29"/><circle r="5" cx="30" cy="39"/><circle r="5" cx="33" cy="29"/><circle r="5" cx="33" cy="34"/><circle r="5" cx="22" cy="32"/><circle r="5" cx="24" cy="30"/><circle r="5" cx="25" cy="34"/><circle r="5" cx="33" cy="19"/></g><polygon transform="scale(.07) translate(750 500) rotate(15)" points="100,0 40,180 190,60 10,60 160,180" /></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
    mask-composite:exclude;  
    aspect-ratio: 1;
}

#serres4>.foreground2{
    top: 49.99dvh;
    background-color: #f2f4ee;
    position: absolute;
    height: 50dvh;
    width: 100%;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMid meet" width="100%" height="100%"><g><circle r="5" cx="-8" cy="5"/><circle r="5" cx="-7" cy="10"/><circle r="5" cx="-9" cy="23"/><circle r="5" cx="-6" cy="30"/><circle r="5" cx="-3" cy="33"/><circle r="5" cx="3" cy="35"/><circle r="5" cx="16" cy="30"/><circle r="5" cx="24" cy="34"/><circle r="5" cx="32" cy="31"/><circle r="5" cx="34" cy="25"/><circle r="5" cx="32" cy="16"/><circle r="5" cx="34" cy="8"/><circle r="5" cx="26" cy="5"/><circle r="5" cx="8" cy="7"/><circle r="5" cx="0" cy="6"/>  <circle r="14" cx="5" cy="22"/><circle r="14" cx="20" cy="18"/>              <circle r="5" cx="18" cy="19"/><circle r="5" cx="16" cy="10"/><circle r="5" cx="17" cy="10"/><circle r="5" cx="16" cy="12"/><circle r="5" cx="15" cy="8"/><circle r="5" cx="16" cy="10"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
    mask-composite: exclude;

}

#serres4>.shadow2,
#serres4>.shadow{
    background-color: #ff24fb;
    top: 50dvh;
    position: absolute;
    height: 50.1dvh;
    display: block;
    filter: blur(50px);
    mask:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51" preserveAspectRatio="xMaxYMid meet" width="100%" height="100%">    <filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="1" /></filter><g ><circle r="5" cx="-8" cy="5"/><circle r="5" cx="-7" cy="10"/><circle r="5" cx="-9" cy="23"/><circle r="5" cx="-6" cy="30"/><circle r="5" cx="-3" cy="33"/><circle r="5" cx="3" cy="35"/><circle r="5" cx="16" cy="30"/><circle r="5" cx="24" cy="34"/><circle r="5" cx="32" cy="31"/><circle r="5" cx="34" cy="25"/><circle r="5" cx="32" cy="16"/><circle r="5" cx="34" cy="8"/><circle r="5" cx="26" cy="5"/><circle r="5" cx="8" cy="7"/><circle r="5" cx="0" cy="6"/>  <circle r="14" cx="5" cy="22"/><circle r="14" cx="20" cy="18"/>              <circle r="5" cx="18" cy="19"/><circle r="5" cx="16" cy="10"/><circle r="5" cx="17" cy="10"/><circle r="5" cx="16" cy="12"/><circle r="5" cx="15" cy="8"/><circle r="5" cx="16" cy="10"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
    mask-composite: exclude;

    /* height: 100%; */
    width: 100%;
}
#serres4>.shadow{
    top: 0;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51" preserveAspectRatio="xMinYMid meet" width="100%" height="100%"><g><circle r="5" cx="13" cy="19.5"/><circle r="5" cx="15" cy="15"/><circle r="5" cx="28" cy="18"/><circle r="5" cx="18" cy="18"/><circle r="5" cx="22" cy="19"/><circle r="5" cx="40" cy="15"/><circle r="5" cx="33" cy="19"/><circle r="5" cx="40" cy="29"/><circle r="5" cx="30" cy="39"/><circle r="5" cx="33" cy="29"/><circle r="5" cx="33" cy="34"/><circle r="5" cx="22" cy="32"/><circle r="5" cx="24" cy="30"/><circle r="5" cx="25" cy="34"/><circle r="5" cx="33" cy="19"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
    mask-composite: exclude;
 
}
/* #serres4::before{
    inset: 0;
    content: '';
    background-color: black;
    width: 2000px;
    height: 100%;
    display: block;
    aspect-ratio: 1;
    mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><defs><filter id="a"><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/><feMerge><feMergeNode in="offsetBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)"><circle r="5" cx="13" cy="19.5"/><circle r="5" cx="15" cy="15"/><circle r="4" cx="28" cy="18"/><circle r="5" cx="18" cy="18"/><circle r="5" cx="22" cy="19"/><circle r="5" cx="40" cy="15"/><circle r="5" cx="33" cy="19"/><circle r="5" cx="40" cy="29"/><circle r="5" cx="30" cy="39"/><circle r="5" cx="33" cy="29"/><circle r="5" cx="33" cy="34"/><circle r="5" cx="22" cy="32"/><circle r="5" cx="24" cy="30"/><circle r="5" cx="25" cy="34"/><circle r="5" cx="33" cy="19"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
        mask-composite:exclude;  
} */
#serres4>.presentation>p{
    max-width: 450px;
    float: right;
    margin-right: 10px;;
    margin-top: 150px;
    font-size: 14px;
 }
#serres4>.foreground>em{
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: none;
}

#serres4 a{
    color: #e100ff;
}

#serres4_authors{
    z-index: 2;
    position: absolute;
    right: 0;
    top: 9%;
    display:block;
    text-align: right;
    padding: 5%;
    font-size: 13px;
    transition: all 250ms;
}

#s4_cache_fond{
  width: 200vw;
  height: 110dvh;
  position: absolute;
  /* background: #f5f5f0; */
  left: -20vw;
  z-index: -1;
}


#cover_4_img{
    transition: all 250ms ease;
}

.cover{
    transition: all 250ms ease;
}

#s4_img2{
    position: absolute;
    width: 30%;
    z-index: 1;
    mix-blend-mode: color-burn;
    left: 20%;
    bottom: 0;
    transform: scaleX(-1);
}
#s4_img2 img {
    width: 100%;
}


/* MOBILE */
@media(max-width:612px) {
    #serres4{
        /* transform: scale(.8) translate(-21%,-20%);  */
    }
    #serres4_authors {
        /* max-width: 40%; */
        top: 170px;
        padding: 12px;
        font-size: 11.5px;
        /* right: 78px; */
      }
    .cover{
        transform: scale(.67);
        left: -20px;
        top: 30dvh;
        padding: 0px;
        padding-top: 10px;
    }

    #serres4 > .foreground,
    #serres4> .shadow{
        width: 200vw;
        left:-45px;
        top: -75px;
        /* min-height: 450px; */
        /* height: 50.1vh; */
    }
    #serres4 > .foreground2,
    #serres4> .shadow2{
        /* top: 41%; */
        left: 0%;
        bottom:0;
        /* height: 59%; */
        /* min-height: 560px; */

    }
    #serres4>.foreground{
        /* padding-top:10px; */
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 72 72" preserveAspectRatio="xMinYMid meet" width="100%" height="100%"><g><circle r="5" cx="13" cy="19.5"/><circle r="5" cx="15" cy="15"/><circle r="5" cx="28" cy="18"/><circle r="5" cx="18" cy="18"/><circle r="5" cx="22" cy="19"/><circle r="5" cx="40" cy="15"/><circle r="5" cx="33" cy="19"/><circle r="5" cx="40" cy="29"/><circle r="5" cx="30" cy="39"/><circle r="5" cx="33" cy="29"/><circle r="5" cx="33" cy="34"/><circle r="5" cx="22" cy="32"/><circle r="5" cx="24" cy="30"/><circle r="5" cx="25" cy="34"/><circle r="5" cx="33" cy="19"/></g><polygon transform="scale(.05) translate(150 700) rotate(15)" points="100,0 40,180 190,60 10,60 160,180" /></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
        mask-composite: exclude;
        padding-bottom: 80px;
    }
    #serres4>.shadow{
        /* padding-top:10px; */

        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -3.8 72 72" preserveAspectRatio="xMinYMax meet" width="100%" height="100%"><g><circle r="5" cx="13" cy="19.5"/><circle r="5" cx="15" cy="15"/><circle r="5" cx="28" cy="18"/><circle r="5" cx="18" cy="18"/><circle r="5" cx="22" cy="19"/><circle r="5" cx="40" cy="15"/><circle r="5" cx="33" cy="19"/><circle r="5" cx="40" cy="29"/><circle r="5" cx="30" cy="39"/><circle r="5" cx="33" cy="29"/><circle r="5" cx="33" cy="34"/><circle r="5" cx="22" cy="32"/><circle r="5" cx="24" cy="30"/><circle r="5" cx="25" cy="34"/><circle r="5" cx="33" cy="19"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
        mask-composite: exclude;
        padding-bottom: 80px;

    }
    #serres4>.foreground2{
        z-index: 1;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-16 -4 56 56" preserveAspectRatio="xMaxYMax" width="100%" height="100%">    <filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="1" /></filter><g ><circle r="5" cx="-8" cy="5"/><circle r="5" cx="-7" cy="10"/><circle r="5" cx="-9" cy="23"/><circle r="5" cx="-6" cy="30"/><circle r="5" cx="-3" cy="33"/><circle r="5" cx="3" cy="35"/><circle r="5" cx="16" cy="30"/><circle r="5" cx="24" cy="34"/><circle r="5" cx="32" cy="31"/><circle r="5" cx="34" cy="25"/><circle r="5" cx="32" cy="16"/><circle r="5" cx="34" cy="8"/><circle r="5" cx="26" cy="5"/><circle r="5" cx="8" cy="7"/><circle r="5" cx="0" cy="6"/>  <circle r="14" cx="5" cy="22"/><circle r="14" cx="20" cy="18"/>      <circle r="5" cx="-7" cy="15"/>     <circle r="5" cx="31" cy="39"/><circle r="5" cx="23" cy="37"/><circle r="5" cx="13.4" cy="37"/><circle r="5" cx="4.4" cy="39"/><circle r="5" cx="-4.4" cy="41"/><circle r="5" cx="-6" cy="36"/>         <circle r="5" cx="18" cy="19"/><circle r="5" cx="16" cy="10"/><circle r="5" cx="17" cy="10"/><circle r="5" cx="16" cy="12"/><circle r="5" cx="15" cy="8"/><circle r="5" cx="16" cy="10"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
        mask-composite: exclude;
        /* padding-top: 500px; */
    }
    #serres4>.shadow2{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-17 -4.9 56 56" preserveAspectRatio="xMaxYMax" width="100%" height="100%">    <filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="1" /></filter><g ><circle r="5" cx="-8" cy="5"/><circle r="5" cx="-7" cy="10"/><circle r="5" cx="-9" cy="23"/><circle r="5" cx="-6" cy="30"/><circle r="5" cx="-3" cy="33"/><circle r="5" cx="3" cy="35"/><circle r="5" cx="16" cy="30"/><circle r="5" cx="24" cy="34"/><circle r="5" cx="32" cy="31"/><circle r="5" cx="34" cy="25"/><circle r="5" cx="32" cy="16"/><circle r="5" cx="34" cy="8"/><circle r="5" cx="26" cy="5"/><circle r="5" cx="8" cy="7"/><circle r="5" cx="0" cy="6"/>  <circle r="14" cx="5" cy="22"/><circle r="14" cx="20" cy="18"/>   <circle r="5" cx="-7" cy="15"/>      <circle r="5" cx="31" cy="39"/><circle r="5" cx="23" cy="37"/><circle r="5" cx="13.4" cy="37"/><circle r="5" cx="4.4" cy="39"/><circle r="5" cx="-4.4" cy="41"/><circle r="5" cx="-6" cy="36"/>             <circle r="5" cx="18" cy="19"/><circle r="5" cx="16" cy="10"/><circle r="5" cx="17" cy="10"/><circle r="5" cx="16" cy="12"/><circle r="5" cx="15" cy="8"/><circle r="5" cx="16" cy="10"/></g></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
        mask-composite: exclude;
        /* padding-top: 500px; */
    }

    #serres4 > .foreground2,
    #serres4> .shadow2,
    #serres4 > .foreground,
    #serres4 > .shadow{
        
        /* top: 49.9vh; */
        /* transform: rotate(-90deg); */
        /* left: -10%; */
    }
    #serres4 > .presentation {
        font-size: 14px;
        display: block;
        width: 100%;
        padding: 0;
      }
    #cover_4_img{
        /* padding-top: 150px; */
    }
    #serres4 > .presentation > .title{
        /* margin-left: 26px; */
        /* margin-top: 4px; */
        /* width: 300px; */
        width: 200px;
        /* margin-top: -10px; */

        margin-left: 40px;
    }
    #serres4 > .presentation > .title > img{
        margin-top: 2dvh;
        width: 100%;
    }
    #serres4 > .presentation > p{
        bottom: 63px;
        max-width: unset;
        font-size: 11.5px;
        text-indent: 30px each-line;
        padding-left: 62px;
        padding-right: 30px;
        position: absolute;
        z-index: 0;
        text-align: justify;
        height: 240px;
        overflow: scroll;
    }
    #s4_img2{
        position: absolute;
        width: 60%;
        z-index: 2;
        mix-blend-mode: color-burn;
        left: 15px;
        bottom: 0;
        transform: scaleX(-1);
        opacity: .4;
    }
}

@media(max-width:670px) {
    
}