@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

*{
    padding:0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: 'EB Garamond', serif;
    position: relative;
    background-color: #ffffff;
    background: url(images/gabriel-silverio-WDg9FeDqtzs-unsplash.jpg) no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    height: 100%;
}

body::-webkit-scrollbar{
    display: none;
}

a{
    text-decoration: none;
}
h1, h2{
    font-weight: 300;
}
img{
    max-width: 100%;
    min-width: 177px;
    min-height: 260px;
}
ul{
    list-style: none;
}
.scroll_snap_container{
    max-height: 100vh;
    scroll-snap-type: y proximity;
    scroll-snap-type: proximity; 
    scroll-snap-points-y: repeat(100vh);
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.partie_vide{
    height: 68vh;
    display: block;
    scroll-snap-align: start;
}

.headbar_form1_container{
    color: #ffffff;
    margin: 0 1rem;
    display: flex;
    font-size: 9.6rem;
    align-items: center;
}

.headbar_form1_container {
    list-style: none;
}

.bar{
    width:30vw;
    height: 3px;
    background-color: #ffffff;
}

.headbar_form1_Brand_Name{
    font-family: "Dancing Script", cursive;
    text-align: center;
    width: 50%;
    margin: 0 2rem;
}

.head_nav_bar{
    background-color: #2b0b03;
    position: sticky;
    top: 0;
    display:flex;
    width: 100%;
    height: max(16vh,110px);
    color: #ffffff;
    z-index: 20;
    justify-content: center;
    scroll-snap-align: start;
}
.nav_container{
    width: 100%;
    max-width: 1920px;
    display: none;
    align-items: center;
    margin: 0;
    position: relative;
}
.navbar{
    background: linear-gradient(to left, #d9d9d910 30%, #d9d9d900 80%);
    width: 100%;
    max-width: 1920px;
    font-size: 32px;
    position: relative;
    display: block;
    text-align: center;
    z-index: 2;
    transition: all 0.5s ease-in-out;
}
.menuIcon{
    display: none;
    cursor: pointer;
}

nav ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
nav li {
    height: 50px;
}
nav a{
    color: #ffffff;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1.3vw;
}
.navbar li:first-child{
    display: flex;
    align-items: center;
    font-size: 86px;
    font-family: "Dancing Script", cursive;
    margin-right: auto;
    margin-left: 3rem;
    transition: all 0.5s ease-in-out;
}
.sideBar{
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: 0.5s ease;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #27120A;
    font-size: 30px;
    font-style: italic;
    z-index: 999;
}
.sideBar a{
    color: #ffffff;
}
.sideBar hr{
    margin:2rem auto;
    background-color: #ffffff;
    border : none;
    border-radius: 50%;
    box-shadow: 0 0 30px #ffffff;
    height: 2px;
    width: 80px;
}
.sideBar li{
    text-shadow: 0 0 40px #fff;
}
.sideBar li:first-child{
    margin-right: 0;
    margin-left: 0;
    position: absolute;
    top: 15px;
    right: 20px;

}
.animation{
    display: block;
    border-top: solid #ffffff;
    border-bottom: solid #ffffff;
    border-width: 1px;
    position: absolute;
    height: 52px;
    z-index: 1;
    width: 0px;
    right: 0;
    transition: 0.4s ease;
    transform: translate(-50%, 0);
}


.main_body{
    background-color: #fff4ee;
}

.bold{
    font-weight: 600;
}
.upper_body{
    display: flex;
    max-width: 1920px;
    margin: auto auto 5rem auto;
}

.upper_middle_txt{
    max-width: 96rem;
    transition: all 0.5s ease-in-out;
}

.upper_body_content{
    margin: 0 auto;
}

.header_title{
    font-size: 5rem;
    text-align: center;
    margin: 4rem 0;
    transition: all 0.5s ease-in-out;
}

.header_txt{
    font-size: 3.6rem;
    letter-spacing: 2px;
    padding: 5px;
    font-style: italic;
    text-align: center;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}
.upper_left_pic, .upper_right_pic{
    margin-top: 1rem;
}

.middle_intro{
    display: block;
    text-align: center;
    font-size: 5rem;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.first_connector{
    display: block;
    margin: 2.77rem 25% -2.77rem 50%;
    position: relative;
    max-width: 480px;
    min-width: 260px;
}

.first_ruban{
    display: block;
    height: 51.3rem;
}

.ruban_container{
    display: flex;
    position: relative;
    align-items: center;
    height: inherit;
    max-width: 1920px;
    margin: auto;
}

.rubcont_left{
    padding-left: 3rem;
}

.rubcont_right{
    padding-right: 3rem;
}

.ruban_pic{
    margin: auto ;
    transform: translateX(400%);
    transition: transform 0.5s ease-out;
    position: relative;
}
.whiteFrameBorder{
    border: solid;
    border-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30px;
    left: 30px;
}
.whiteFrameBorder.alt {
    right: 30px;
    left: unset;
}
.ruban_pic:nth-of-type(odd){
    transform: translateX(-400%);
}
.ruban_frame{
    background-color: #fffbfb;
    text-align: center;
    width: 50vw;
    max-width: 971px;
    height: 40.8rem;
    padding: 0 2rem 0 2rem;
    transform: translateX(400%);
    transition: transform 0.7s ease-in-out;
}

.ruban_frame:nth-of-type(odd){
    transform: translateX(-400%);
}
.ruban_frame.FrameShow, .ruban_pic.FrameShow{
    transform: translateX(0);
}
.ruban_pic.FrameShow_mobile{
    transform: translateX(-50%);
}
.frame_left{
    margin-left: 3rem;
}
.frame_right{
    margin-right: 3rem;
}

.frame_title{
    font-size: 4rem;
    font-style: italic;
    font-weight: 400;
    margin: 4rem auto 7rem auto;
}

.frame_txt{
    display: inline;
    font-size: 4rem;
    margin: 2rem auto;
    max-width: 73.5rem;
    height: auto;
}

.connector{
    display: block;
    position: relative;
    margin: auto;
    max-width: 951.5px;
    min-width: 470.5px;
}

.svg_content{
    margin:-3.6rem auto -3.6rem auto;
    align-items: center;
}

.second_ruban{
    display: block;
    height: 51.3rem;
}

.third_ruban{
    display: block;
    height: 51.3rem;
}

.last_connector{
    display: block;
    position: relative;
    margin: -2.77rem 25% 2.77rem 50%;
    max-width: 480px;
    min-width: 260px;
}


.lower_body{
    display: flex;
    max-width: 1920px;
    height: 200px;
    margin: auto;
    align-items: baseline;
    margin-top: 6rem;
}

.center_lower_elements{
    position: relative;
    display: block;
    max-width: 945px;
    margin: 0 auto;
}

.conclu{
    font-size: 5.8rem;
    font-weight: 500;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.rectangle{
    position: absolute;
    border: solid;
    border-width: 4px;
    border-color: #ffffff;
    height: 119px;
    width: 945px;
}

.rectangle_haut{
    left: -1rem;
    bottom: -1rem;
}
.rectangle_bas{
    right: -1rem;
    top: -1rem;
}

.opacityShow{
    opacity: 1;
}
.main_body path{
    fill: #d6bb4e;
    stroke-width:0.264583;
    -webkit-filter: url(#filter1);
    filter: url(#filter1);
}
.bottom_bar{
    scroll-snap-align: end;
    background-color: #27120A;
    display: flex;
    height: 30rem;
    color: #ffffff;
    font-size: 3.2rem;
}

.bottom_content{
    margin: 3rem auto;
    width: 30vw;
    text-align: center;
}

.socialmedia{
    display: flex;
    justify-content: center;
}

.instagram, .facebook{
    margin: 0 3rem;
}


@media only screen and (min-width: 1921px){
    .navbar a{
        padding: 0 24px;
    }    
}

@media only screen and (max-width: 1921px){
    .connector{
        margin: auto 25%;
    }
    
}

@media only screen and (max-width: 1252px) {
    .frame_title{
    font-size: 4rem;
    }

    .frame_txt{
        font-size: 2.8rem;
    }
}



@media only screen and (max-width: 1645px) {
    .navbar{
        font-size: 24px;
    }
    .navbar li:first-child{
        font-size: 76px;
    }
}

@media only screen and (max-width: 1425px) {
    .headbar_form1_container{
        font-size: 7.6rem;
    }
    .bar{
        width: 25vw;
    }
    .header_title, .middle_intro{
        font-size: 3.96rem;
    }
    .header_txt{
        font-size: 2.85rem;
    }
}

@media only screen and (max-width: 1400px) {
    .navbar{
        font-size: 20px;
    }
    .navbar li:first-child{
        font-size: 66px;
    }
}

@media only screen and (max-width: 1118px) {
    .headbar_form1_container{
        font-size: 5.6rem;
    }
    .header_title, .middle_intro{
        font-size: 2.93rem;
    }
    .header_txt{
        font-size: 2.17rem;
    }
}

@media only screen and (max-width: 1200px) {
    .conclu{
        font-size: 4.5rem;
    }
    .rectangle{
        max-height: 92px;
        max-width: 733px;
    } 
}

@media only screen and (max-width: 1155px) {
    .animation, .hideOnResize{
        display: none;
    }
    .navbar{
        background: none;
        display: flex;
        justify-content: space-between;
    }
    .menuIcon{
        display: flex;
        margin-right: 2rem;
    }
    .navbar li:first-child{
        font-size: 66px;
    }
}

@media only screen and (max-width: 940px) {
    .conclu{
        font-size: 4rem;
    }
    .rectangle{
        height: 81px;
        width: 650px;
    }
    .rectangle_haut{
        left: -80px;
        bottom: -20px;
    }
    .rectangle_bas{
        display: none;
    }
    .bottom_content{
        font-size: 2rem;
    }
}
@media only screen and (max-width: 869px) {
    .frame_title{
    font-size: 3rem;
    }

    .frame_txt{
        font-size: 2.2rem;
    }
}
@media only screen and (max-width: 858px) {
    .headbar_form1_container{
        font-size: 4.14rem;
    }
    .header_title, .middle_intro{
        font-size: 2.5rem;
    }
    .header_txt{
        font-size: 1.6rem;
    }
}
@media only screen and (max-width: 750px) {
    .whiteFrameBorder{
        display: none;
    }
    .ruban_pic, .svg_content, .first_svg_content, .last_svg_content{
        display: none;
    }
    .rubcont_left{
        padding-left: 0;
    }
    .rubcont_right{
        padding-right: 0;
    }
    .frame_left, .frame_right{
        margin: auto;
    }
    .first_connector, .last_connector{
        height:117px;
    }
    .connector{
        height: 13px;
    }
    .header_title{
        margin: 5rem 2rem;
    }
    .header_txt{
        opacity: 1;
        margin: 2rem;
    }
    .upper_body{
        display: flex;
        flex-direction: column;
    }
    .upper_right_pic{
        display: block;
    }
    .upper_right_pic img{
        height: 250px;
    }
    .first_ruban, .second_ruban, .third_ruban{
        height: 330px;
    }
    .ruban_frame{
        background-color: #ffffff50;
        width: 235px;
        height: 235px;
        z-index: 1;
    }
    .ruban_pic{
        display: block;
        position: absolute;
        left: 50%;
    }
    .first_ruban img{
        min-width: 265px;
        min-height: 265px;
        z-index: -1;
        object-fit: cover;
    }
    .second_ruban img{
        min-width: 265px;
        min-height: 265px;
        object-fit: cover;
    }
    .third_ruban img{
        min-width: 265px;
        min-height: 265px;
        object-fit: cover;
    }
    .frame_title{
        font-size: 24px;
        margin: 1rem auto 4rem auto;
    }
    .frame_txt{
        font-size: 16px;
    }
}
@media only screen and (max-width: 693px) {
    .upper_left_pic, .upper_right_pic{
        display: none;
    }
}
@media (max-width: 640px) {
    body{
        background: url(images/PicMainPage_Mobile.jpg) no-repeat top;
    }
    .partie_vide{
        height: 30vh;
    }
    .entete h1{
        font-size: 28px;
        line-height: 40px;
    }
    .head_nav_bar{
        height: 96px;
    }
    .navbar{
        display: flex;
        justify-content: space-between;
    }
    .navbar li:first-child {
        font-size: 32px;
      }
    .bar{
        display: none;
    }
    .headbar_form1_Brand_Name{
        width: 100%;
    }

    .conclu{
        font-size: 28px;
        width: 60%;
        text-align: center;
        margin: auto;
    }
    .rectangle{
        max-height: 100px;
        height: 100px;
    }
    .rectangle_haut{
        width: 60vw;
        min-width: 220px;
        left: 50%;
        transform: translateX(-50%);
        top: -15%;
    }
    .bottom_content{
        font-size: 16px;
    }
    .instagram, .facebook{
        margin: 0 2vw;
    }
    .bottom_content svg{
        height: 40px;
        width: 40px;
    }
}