/* ---------------------------- ----- ---------------------------- */
/* ---------------------------- ----- ---------------------------- */
/* ---------------------------- BASIC ---------------------------- */
/* ---------------------------- ----- ---------------------------- */
/* ---------------------------- ----- ---------------------------- */

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: var(--white);
}

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

/* menu scrl unlocked */
/* .on, .app-on{ */
    /* height: auto; */
/* } */

/* menu scrl unlocked */
.on.off{
    overflow: hidden;
    position: fixed;
    /* height: 100%; */
    /* width: 100%; */
}

/* .app-on.app-off{ */
    /* overflow: hidden; */
    /* height: 100%; */
/* } */

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

/* .current-ancre{
    position: absolute;
    left: 10px;
    height: 4px;
    width: 20px;
    top: 0px;
    background-color: rgb(255, 248, 157);
    z-index: 328935489442;
} */


.Top-Cache{
    position: fixed;
    top: -500px;
    left: 0px;
    width: 100vw;
    height: 500px;
    z-index: 120010;
    /* background-color: magenta; */
    background-color: var(--white);
}

/* ---------------------------- --------- ---------------------------- */
/* ---------------------------- DEBUT IMG ---------------------------- */
/* ---------------------------- --------- ---------------------------- */





/* ---------------------------- ---------- ---------------------------- */
/* ---------------------------- ---------- ---------------------------- */
/* ---------------------------- NAVIGATION ---------------------------- */
/* ---------------------------- ---------- ---------------------------- */
/* ---------------------------- ---------- ---------------------------- */

.Navigation-Principal-Container{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 60px;
    /* background-color: yellow; */
    z-index: 120000;
}

.Navigation-Bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 60px;
    background-color: rgba(255, 244, 238, 0.5);
    backdrop-filter: blur(10px); /* flou de l'arrière-plan */
    -webkit-backdrop-filter: blur(10px); /* pour Safari */
}

.Navigation-Full-Container{
    position: absolute;
    left: 60px;
    top: 14px;
    height: 28px;
    width: calc(100vw - 120px);
}

.Navigation-Full-Container-1{
    /* background-color: blue; */
    z-index: 120;
}

.Navigation-Full-Container-2{
    display: none;
    /* background-color: rgb(214, 126, 255); */
    z-index: 130;
}

.Nav-Logo-Container{
    position: absolute;
    top: 4px;
    width: 102px;
    height: 20px;
    /* background-color: black; */
}

.Nav-Logo{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 102px;
}

.Nav-Logo-Trigger-1, .Nav-Logo-Trigger-2{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.Nav-Main-Container{
    position: absolute;
    width: 500px;
    width: 539px;
    width: 523px;
    height: 28px;
    left: 150px;
    top: 0px;
    /* background-color: rgb(217, 217, 217); */
    overflow: hidden;
}

.Nav-Main-Container-2{
    position: absolute;
    width: 475px;
    height: 28px;
    left: 150px;
    top: 0px;
    /* background-color: rgb(217, 217, 217); */
    overflow: hidden;
}

.Nav-Container{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    width: 1020px;
    height: 28px;
    /* background-color: red; */
    transition: left 0.36s ease-in-out;
}

.Nav-Container-2{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    width: 908px;
    height: 28px;
    /* background-color: rgb(128, 65, 65); */
    transition: left 0.36s ease-in-out;
}

.Nav-Contact-Main-Container{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    right: 0px;
    top: 0px;
    width: 171px;
    height: 28px;
    /* background-color: cornflowerblue; */
}

.Nav-Contact-Main-Container-2{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 71px;
    height: 28px;
    /* background-color: rgb(191, 174, 197); */
}

.Nav-Link{
    position: relative;
}

.Nav-Social-Link-Container{
    position: relative;
    top: 4px;
    width: 20px;
    height: 20px;
}

.Nav-Social-Logo, .Nav-Social-Link{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
}

.Nav-Item-Container{
    position: relative;
    top: 0px;
    height: 28px;
}

.Nav-Item-Container-1{
    width: 120px;
}

.Nav-Item-Container:hover{
    cursor: pointer;
}

/* .Nav-Item-1:hover{
    cursor: pointer!important;
} */

.Nav-Item-Container-2{
    width: 75px;
}

.Nav-Item-1, .Nav-Item-2{
    position: absolute;
    top: 0px;
}

.Nav-Item-1{
    left: 0px;
}

.Nav-Item-2{
    right: 0px;
}

.Nav-Arrow{
    position: absolute;
    top: 8px;
    width: 8px;
    height: 14px;
}

.Nav-Next-Arrow{
    right: 0px;
}

.Nav-Prev-Arrow{
    left: 0px;
}




/* ---------------------------- ---------- ---------------------------- */
/* -------------------------- NAVIGATION IOS -------------------------- */
/* ---------------------------- ---------- ---------------------------- */

.Ios-Navigation-Main-Container{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 50px;
    /* background-color: red; */
    z-index: 120000;   
}

/* ----------------------- NAVIGATION IOS LOGO ----------------------- */

.Ios-Nav-Logo-Container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 142px;
    width: var(--Ios-Nav-Logo-Container-Width);
    height: 50px;
    /* background-color: aqua; */
    z-index: 30;
}

.Ios-Nav-Logo{
    position: absolute;
    height: 20px;
    width: 102px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    /* transition: opacity 0.2s ease-in; */
    transition: opacity 0.12s ease-in;
    /* top: 0px; */
    /* left: 0px; */
}

.Ios-Nav-Logo.Ios-Nav-Logo-Off{
    position: absolute;
    height: 20px;
    width: 102px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* top: 0px; */
    /* left: 0px; */
}

.Ios-Nav-Logo-Trigger{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-color: burlywood; */
    /* opacity: 0.79; */
    z-index: 20;
}

/* ------------------- NAVIGATION IOS MENU TRIGGER ------------------- */

/* .Ios-Nav-Menu-Trigger-Container{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: blue;
}

.Ios-Nav-Menu-Trigger{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.Ios-Nav-Menu-Trigger.Ios-Nav-Menu-Trigger-On{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 30;
} */


/* .Ios-Nav-Menu-Trigger-Container{ */
    /* display: none; */
    /* position: absolute; */
    /* left: 0px; */
    /* top: 0px; */
    /* width: 100%; */
    /* height: 100%; */
    /* background-color: blue; */
/* } */

.Ios-Nav-Menu-Trigger{
    /* display: none; */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    /* background-color: blue; */
}

.Ios-Nav-Menu-Trigger.Ios-Nav-Menu-Trigger-On{
    /* display: none; */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 30;
    /* opacity: 0.5; */
    /* background-color: blue; */
}

/* ------------------- NAVIGATION IOS BACK TRIGGER ------------------- */

.Ios-Nav-Back-Main-Container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--Ios-Nav-Back-Main-Container-Width);
    height: 50px;
    /* background-color: darkgoldenrod; */
    z-index: 6;
}


.Ios-Nav-Back-Main-Container.Ios-Nav-Back-Main-Container-On{
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--Ios-Nav-Back-Main-Container-Width);
    height: 50px;
    /* background-color: darkgoldenrod; */
    z-index: 36;
}

.Ios-Nav-Back-Trigger{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    /* background-color: red; */
    opacity: 0.46;
    z-index: 40;
}


.Ios-Nav-Back-Container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--Ios-Nav-Back-Container-Width);
    height: 50px;
    z-index: 38;
    opacity: 0;
    transition: opacity 0.12s ease-in;
}

.Ios-Nav-Back-Container.Ios-Nav-Back-Container-On{
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--Ios-Nav-Back-Container-Width);
    height: 50px;
    z-index: 38;
    opacity: 1;
}

.Ios-Nav-Back{
    position: absolute;
    top: 0px;
    left: var(--Site-Margins);
    height: 50px;
    width: auto;
    z-index: 38;
    /* opacity: 0; */
    /* transition: opacity 0.2s ease-in; */
    /* transition: opacity 0.12s ease-in; */
}

/* .Ios-Nav-Back.Ios-Nav-Back-On{
    position: absolute;
    top: 0px;
    left: var(--Site-Margins);
    height: 50px;
    width: auto;
    z-index: 38;
    opacity: 1;
} */



/* .Ios-Nav-Back{
    position: absolute;
    top: 0px;
    left: var(--Site-Margins);
    height: 50px;
    width: auto;
    z-index: 38;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.Ios-Nav-Back.Ios-Nav-Back-On{
    position: absolute;
    top: 0px;
    left: var(--Site-Margins);
    height: 50px;
    width: auto;
    z-index: 38;
    opacity: 1;
} */

/* ---------------------- NAVIGATION IOS BURGER ---------------------- */

.Ios-Burger-Main-Container{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 50px;
    width: 90px;
    width: var(--Ios-Burger-Main-Container-Width);
    z-index: 10;
    /* background-color: plum; */
}

.Ios-Burger-Container{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    height: 22px;
    width: 50px;
    /* background-color: plum; */
}

.Ios-Burger-Line{
    position: relative;
    width: 50px;
    height: 2px;
    background-color: var(--black);
    left: 0px;
}

.Ios-Burger-Cache{
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 50px;
    width: var(--Ios-Burger-Main-Container-Width);
    z-index: 60000;
    /* background-color: blue; */
    /* opacity: 0.9; */
}

.Ios-Burger-Cache.Ios-Burger-Cache-On{
    display: block!important;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 50px;
    width: var(--Ios-Burger-Main-Container-Width);
    z-index: 60000;
    /* background-color: blue; */
    /* opacity: 0.9; */
}


/* ------------------------ NAVIGATION IOS BG ------------------------ */

.Ios-Navigation-Bg{
    /* display: none; */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 50px;
    background-color: rgba(255, 244, 238, 0.5);
    backdrop-filter: blur(10px); /* flou de l'arrière-plan */
    -webkit-backdrop-filter: blur(10px); /* pour Safari */
}

/* ---------------------------- -------- ---------------------------- */
/* ---------------------------- -------- ---------------------------- */
/* ---------------------------- MENU IOS ---------------------------- */
/* ---------------------------- -------- ---------------------------- */
/* ---------------------------- -------- ---------------------------- */

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

.Menu-Max-Container{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: -100012;
    /* z-index: 100012; */
    /* background-color: tomato; */
}

.Menu-Max-Container.Menu-Max-Container-On{
    /* display: none; */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 100012;
}

.Menu-Massive-Container{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: 0.4s ease-in;
    /* background-color: cornflowerblue; */
}

.Menu-Massive-Container.Menu-Massive-Container-On{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition: 0.4s ease-in;
    /* background-color: cornflowerblue; */
}

.Menu-Global-Container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}

.Menu-Principal-Container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    /* background-color: aliceblue; */
    overflow: hidden;
}


/* ---------------------------- -------- ---------------------------- */
/* ---------------------------- BACKGROUND ---------------------------- */
/* ---------------------------- -------- ---------------------------- */

.Menu-Background{
    display: none;
    position: fixed;
    top: 0px;
    top: -100vh;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: var(--green);
    z-index: 100010;
    /* transition: 0.24s ease-in; */
    transition: 0.54s ease-in;
    transition: 0.44s ease-out;
}

.Menu-Background.Menu-Background-On{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: var(--green);
    z-index: 100010;
    /* transition: 0.24s ease-in; */
}
/* ---------------------------- -------- ---------------------------- */
.Menu-Background-Cache-Resize{
    display: none;
    position: fixed;
    top: -100vh;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: var(--green);
    z-index: 100009;
}

.Menu-Background-Cache-Resize.Menu-Background-Cache-Resize-On{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: var(--green);
    z-index: 100009;
}
/* ---------------------------- -------- ---------------------------- */
.Menu-Background-Transfer-Cache{
    display: none;
    position: fixed;
    /* top: 0px; */
    top: -100vh;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: lawngreen;
    background-color: var(--green);
    z-index: 100008;
}

.Menu-Background-Transfer-Cache.Menu-Background-Transfer-Cache-On{
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: lawngreen;
    background-color: var(--white);
    z-index: 100008;
}
/* ---------------------------- -------- ---------------------------- */



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

.Menu-Full-Container{
    position: absolute;
    top: var(--Menu-Full-Container-Top);
    height: var(--Menu-Full-Container-Height);
    width: var(--Menu-Full-Container-Width);
    /* left: var(--Site-Margins); */
    /* background-color: navy; */
    z-index: 100212;
}

.Menu-Full-Container-1{
    /* display: block; */
    left: var(--Menu-Full-Container-1-Left-Init);
    z-index: 100212;
    opacity: 1;
    transition: left 0.16s ease-in, opacity 0.16s ease-in;
}

.Menu-Full-Container-1.Menu-Full-Container-1-Bis{
    /* display: none; */
    left: var(--Menu-Full-Container-1-Left-Bis);
    opacity: 0;
    z-index: 100210;
}

.Menu-Full-Container-2{
    /* display: none; */
    left: var(--Menu-Full-Container-2-Left-Init);
    opacity: 0;
    transition: left 0.16s ease-in, opacity 0.16s ease-in;
    /* background-color: red; */
    z-index: 100210;
}

.Menu-Full-Container-2.Menu-Full-Container-2-Bis{
    /* display: block; */
    left: var(--Menu-Full-Container-2-Left-Bis);
    opacity: 1;
    /* background-color: red; */
    z-index: 100212;
}

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


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

.Menu-Main-Container{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    width: 100%;
    /* background-color: yellow; */
}

/* .Menu-Main-Container-1{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: yellow;
    height: var(--Menu-Main-Container-1-Height-Off);
    transition: height 0.94s ease-in;
}

.Menu-Main-Container-1.Menu-Main-Container-1-On{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: yellow;
    height: var(--Menu-Main-Container-1-Height);
    transition: height 0.94s ease-in;
} */

/* ---------------------------- -------- ---------------------------- */
.Menu-Main-Container-1{
    /* left: 0px; */
    height: var(--Menu-Main-Container-1-Height-Off);
    transition: height 0.24s ease-in;
}

.Menu-Main-Container-1.Menu-Main-Container-1-On{
    /* left: 0px; */
    height: var(--Menu-Main-Container-1-Height);
    transition: height 0.24s ease-in;
}

.Menu-Container-1{
    position: relative;
    left: 0px;
    width: 100%;
    height: var(--Menu-Container-Height);
    /* background-color: tan; */
    opacity: 0;
    transition: 0.2s ease-in;
    /* transform: translateY(-50px); */
}

.Menu-Container-1.Menu-Container-1-On{
    position: relative;
    left: 0px;
    width: 100%;
    height: var(--Menu-Container-Height);
    /* background-color: tan; */
    opacity: 1;
    /* transform: translateY(-50px); */
}

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

.Menu-Main-Container-2{
    /* left: 0px; */
    height: var(--Menu-Main-Container-2-Height-Off);
    transition: height 0.24s ease-in;
}

.Menu-Main-Container-2.Menu-Main-Container-2-On{
    /* left: 0px; */
    height: var(--Menu-Main-Container-2-Height);
    transition: height 0.24s ease-in;
}

.Menu-Container-2{
    position: relative;
    left: 0px;
    width: 100%;
    height: var(--Menu-Container-Height);
    /* background-color: tan; */
    opacity: 0;
    transition: 0.2s ease-in;
    /* transform: translateY(-50px); */
}

.Menu-Container-2.Menu-Container-2-On{
    position: relative;
    left: 0px;
    width: 100%;
    height: var(--Menu-Container-Height);
    /* background-color: tan; */
    opacity: 1;
    /* transform: translateY(-50px); */
}

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

.Menu-Container-12-Trigger{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-color: aliceblue; */
    z-index: 36;
}

.Menu-Arrow-Container{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 20px;
    /* background-color: red; */
    z-index: 12;
}

.Menu-Arrow{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: auto;
    /* background-color: blue; */
}

.Menu-Arrow-Small{
    display: none;
}

.Menu-Arrow-Medium{
    display: none;
}

.Menu-Arrow-Large{
    display: block;
}  

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

.Menu-Bottom-Full-Container{
    position: absolute;
    bottom: 0px;
    left: 50vw;
    transform: translateX(-50%);
    width: var(--Menu-Bottom-Full-Container-Width);
    height: var(--Menu-Bottom-Full-Container-Height);
    /* background-color: red; */
    opacity: 0;
    transition: 0.24s ease-in;
    z-index: 100212;
}

.Menu-Bottom-Full-Container-On{
    position: absolute;
    bottom: 0px;
    left: 50vw;
    transform: translateX(-50%);
    width: var(--Menu-Bottom-Full-Container-Width);
    height: var(--Menu-Bottom-Full-Container-Height);
    /* background-color: red; */
    opacity: 1;
    z-index: 100212;
}

.Menu-Bottom-Line{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    background-color: var(--black);
}

.Menu-Bottom-Main-Container{
    position: absolute;
    top: 30px;
    left: 0px;
    width: var(--Menu-Bottom-Main-Container-Width);
}

.Menu-Bottom-Main-Container-1{
    height: 92px;
    /* background-color: aqua; */
}

.Menu-Bottom-Main-Container-2{
    display: none;
    height: 30px;
    /* background-color: violet; */
}

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

.Menu-Mail-Container{
    position: absolute;
    top: 0px;
    /* background-color: olivedrab; */
}

.Menu-Mail-Container-1{
    width: 350px;
    height: 42px;
    left: 50%;
    transform: translateX(-50%);
}

.Menu-Mail-Container-2{
    width: 180px;
    height: 30px;
    left: 0px;
}



.Menu-Mail-Content{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.Menu-Mail-Accroche{
    top: 0px;
    /* background-color: tomato; */
}

.Menu-Mail-1{
    bottom: 0px;
}

.Menu-Mail-2{
    /* background-color: red; */
    height: 21px;
    top: 50%;
    transform: translateY(-50%);
}



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

.Menu-Socials-Container{
    position: absolute;
    width: 80px;
    height: 30px;
    bottom: 0px;
    /* background-color: yellow; */
}
.Menu-Socials-Container-1{
    left: 50%;
    transform: translateX(-50%);
}
.Menu-Socials-Container-2{
    right: 0px;
}

.Menu-Social{
    position: absolute;
    top: 0px;
    height: 30px;
    width: auto;
}

.Menu-Social-Insta{
    left: 0px;
}
.Menu-Social-Tiktok{
    right: 0px;
}

.Menu-Social-Link{
    position: absolute;
    top: 0px;
    height: 30px;
    width: 30px;
    z-index: 10;
    /* background-color: yellow; */
}

.Menu-Insta-Link{
    left: 0px;
}

.Menu-Tiktok-Link{
    right: 0px;
}

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




/* .Menu-Bottom-Content{}
.Menu-Bottom-Content-1{
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 230px;
    background-color: red;
}

.Menu-Full-Bottom-Content-2{
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 88px;
    background-color: red;
} */


















/* ---------------------------- -------- ------ -------- ---------------------------- */
/* ---------------------------- -------- ------ -------- ---------------------------- */
/* ---------------------------- -------- FOOTER -------- ---------------------------- */
/* ---------------------------- -------- ------ -------- ---------------------------- */
/* ---------------------------- -------- ------ -------- ---------------------------- */

.Footer-Principal-Container{
    position: absolute;
    width: 100vw;
    left: 0px;
    bottom: 0px;
}

.Footer-Full-Container{
    position: absolute;
    width: 100vw;
    background-color: var(--green);
}

.Logo-M{
    position: absolute;
}

/* ---------------------------- ------------ ---------------------------- */
/* ---------------------------- FOOTER LARGE ---------------------------- */
/* ---------------------------- ------------ ---------------------------- */

.Footer-Principal-Container-Large{
    height: 911px;
}

.Footer-Full-Container-Large{
    height: 625px;
    top: 286px;
}

/* ---------------------------- FOOTER LOGO LARGE ---------------------------- */

.Footer-Logo-Main-Container-Large{
    position: absolute;
    width: 570px;
    right: 40px;
    overflow: hidden;
}

.Footer-Logo-White-Main-Container-Large{
    height: 514px;
    top: 0px;
    /* background-color: blue; */
}

.Footer-Logo-Green-Main-Container-Large{
    height: 600px;
    top: 200px;
    /* background-color: red; */
}

.Logo-M-Large{
    left: 0px;
    width: 570px;
    height: auto;
    bottom: 0px;
}

/* ---------------------------- FOOTER MAIL LARGE ---------------------------- */

.Footer-Mail-Main-Container-Large{
    position: absolute;
    top: 70px;
    left: 40px;
    width: 400px;
    height: 85px;
    /* background-color: red; */
}

.Footer-Mail-Phrase-Large{
    position: absolute;
    top: 0px;
    left: 0px;
}

.Footer-Mail-Adress-Large{
    position: absolute;
    bottom: 0px;
    left: 0px; 
}

/* ---------------------------- FOOTER SITEPLAN ---------------------------- */

.Footer-Siteplan-Main-Container{
    position: absolute;
    width: 300px;
    height: 164px;
    left: 40px;
    top: 225px;
    /* background-color: red; */
}

.Footer-Siteplan-Container{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0px;
    /* background-color: blue; */
}

.Footer-Siteplan-Left-Container{
    width: 105px;
    left: 0px;
    height: 164px;
}

.Footer-Siteplan-Right-Container{
    width: 93px;
    right: 0px;
    height: 96px;
}

.Siteplan-Links{
    position: relative;
    left: 0px;

}

/* ---------------------------- FOOTER SOCIALS LARGE ---------------------------- */

.Footer-Socials-Main-Container-Large{
    position: absolute;
    left: 40px;
    top: 448px;
    height: 40px;
    width: 134px;
    /* background-color: red; */
}

.Footer-Socials-Container-Large{
    position: absolute;
    top: 0px;
    width: 40px;
    height: 40px;
    /* background-color: orange; */
}

.Footer-Socials-Container-1-Large{
    left: 0px;
}

.Footer-Socials-Container-2-Large{
    right: 0px;
}

.Footer-Socials-Logo{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
}

.Footer-Social-Link{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* background-color: blue; */
    /* opacity: 0.2; */
    z-index: 100;
}

/* ---------------------------- FOOTER BOTTOM LARGE ---------------------------- */

.Footer-Bottom-Main-Container-Large{
    position: absolute;
    width: calc(100vw - 80px);
    height: 50px;
    top: 832px;
    top: 546px;
    left: 50vw;
    transform: translateX(-50%);
    /* background-color: purple; */
}

.Footer-Bottom-Main-Container-Line-Large{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 22px;
}

.Footer-Bottom-Main-Container-Line-1-Large{
    /* background-color: red; */
    top: 0px;
}

.Footer-Bottom-Main-Container-Line-2-Large{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* background-color: blue; */
    bottom: 0px;
}

.Footer-Copyright-Large{
    position: absolute;
    top: 0px;
    left: 0px;
}

.Footer-Smartloop-Large{
    position: absolute;
    top: 0px;
    right: 0px;
    /* background-color: rgb(27, 27, 27); */
}

.Footer-Bottom-Links-Large{
    position: relative;
}



/* ---------------------------- ------------ ---------------------------- */
/* ---------------------------- FOOTER SMALL ---------------------------- */
/* ---------------------------- ------------ ---------------------------- */

.Footer-Principal-Container-Small{
    display: none;
    height: 612px;
}

.Footer-Full-Container-Small{
    height: 548px;
    top: 64px;
}

/* ---------------------------- FOOTER LOGO SMALL ---------------------------- */

.Footer-Logo-Main-Container-Small{
    position: absolute;
    width: 320px;
    width: var(--Footer-Logo-Main-Container-Small-Width);
    left: 50vw;
    transform: translateX(-50%);
    overflow: hidden;
}

.Footer-Logo-White-Main-Container-Small{
    height: 274px;
    top: 0px;
    /* background-color: blue; */
}

.Footer-Logo-Green-Main-Container-Small{
    height: 337px;
    top: 0px;
    /* background-color: red; */
}

.Logo-M-Small{
    left: 0px;
    /* width: 320px; */
    width: 100%;
    height: auto;
    bottom: 0px;
}

/* ---------------------------- FOOTER CONTENT SMALL ---------------------------- */

.Footer-Content-Container-Small{
    position: absolute;
    bottom: 0px;
    left: 50vw;
    transform: translateX(-50%);
    width: var(--Footer-Content-Container-Small-Width);
    height: 230px;
    /* background-color: aliceblue; */
}

/* ---------------------------- FOOTER CONTAINER SMALL ---------------------------- */

.Footer-Container-Small{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 20px;
    top: 45px;
    height: 164px;
    width: calc(100% - 40px);
    /* background-color: red; */
}

/* ---------------------------- FOOTER CONTACT SMALL ---------------------------- */

.Footer-Contact-Main-Container{
    position: relative;
    left: 0px;
    height: 42px;
    width: 100%;
    /* background-color: blue; */
}

/* ---------------------------- FOOTER MAIL SMALL ---------------------------- */

.Footer-Mail-Phrase-Small{
    position: absolute;
    top: 0px;
    left: 0px;
}

.Footer-Mail-Adress-Small{
    position: absolute;
    bottom: 0px;
    left: 0px; 
}

/* ---------------------------- FOOTER SOCIALS SMALL ---------------------------- */

.Footer-Socials-Main-Container-Small{
    position: absolute;
    width: 80px;
    height: 30px;
    right: 0px;
    bottom: 0px;
    /* background-color: orange; */
}

.Footer-Socials-Container-Small{
    position: absolute;
    height: 30px;
    width: 30px;
}

.Footer-Socials-Container-1-Small{
    left: 0px;
}

.Footer-Socials-Container-2-Small{
    right: 0px;
}


/* ---------------------------- FOOTER DOCUMENTATION SMALL ---------------------------- */

.Footer-Documentation-Main-Container{
    position: relative;
    left: 0px;
    width: 100%;
    height: 32px;
    /* background-color: blue; */
}

.Footer-Documentation-Links{
    position: absolute;
}

.Footer-Documentation-Links-1, .Footer-Documentation-Links-2{
    left: 0px;
}

.Footer-Documentation-Links-3, .Footer-Documentation-Links-4{
    right: 0px;
}

.Footer-Documentation-Links-1, .Footer-Documentation-Links-3{
    top: 0px;
}

.Footer-Documentation-Links-2, .Footer-Documentation-Links-4{
    bottom: 0px;
}

/* ---------------------------- FOOTER BOTTOM SMALL ---------------------------- */

.Footer-Bottom-Main-Container-Small{
    position: relative;
    left: 0px;
    width: 100%;
    height: 32px;
    /* background-color: blue; */
}

.Footer-Smartloop-Small{
    position: absolute;
    top: 0px;
    left: 0px;
}

.Footer-Copyright-Small{
    position: absolute;
    bottom: 0px;
    left: 0px;
}



/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- GENERAL BTN ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */

.Btn{
    border: 1px solid var(--black);
    /* border: none; */
    box-sizing: border-box;
    background-color: var(--white);
}

.Btn-Text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.Btn:hover{
    cursor: pointer;
}

.Btn-Text:hover{
    cursor: pointer;
}


/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- GENERAL TAP ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */
/* ---------------------------- ----------- ---------------------------- */

.Tap-Zone{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: slateblue;
}