modifications header + parallax home

web/themes/erabletheme/css/styles.css

@@ -46,7 +46,7 @@ a {
 }
 
 #block-erabletheme-contenudelapageprincipale {
-  margin-top: 7vh;
+  margin-top: 10vh;
 }
 
 /* PARTIALS */
@@ -65,7 +65,7 @@ a {
 }
 .layout-container header div {
   max-width: 100%;
-  max-height: 7vh;
+  max-height: 10vh;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -87,9 +87,15 @@ a {
     padding-right: 1.5vw;
   }
 }
+@media (min-width: 760px) {
+  .layout-container header div #block-erabletheme-logorepublique {
+    padding-right: 2rem;
+  }
+}
 @media (min-width: 1080px) {
   .layout-container header div #block-erabletheme-logorepublique {
     width: 10vw;
+    padding-right: 1vw;
   }
 }
 .layout-container header div #block-erabletheme-logoerable {
@@ -114,6 +120,9 @@ a {
 @media (min-width: 1080px) {
   .layout-container header div #block-erabletheme-logoerable {
     width: 10vw;
+    padding-left: 3vw;
+    padding-top: 0.4rem;
+    padding-bottom: 0.4rem;
   }
 }
 .layout-container header div #block-erabletheme-navigationprincipale {
@@ -125,7 +134,7 @@ a {
   height: 100%;
   align-items: center;
   justify-content: space-around;
-  padding: 0 5vw;
+  padding: 0 2vw;
 }
 .layout-container header div #block-erabletheme-navigationprincipale ul li {
   font-family: "Marianne", sans-serif;
@@ -142,7 +151,6 @@ a {
   background-color: #00ff80;
 }
 .layout-container header div #block-erabletheme-navigationprincipale ul li a.is-active {
-  font-weight: 400;
   background-color: #00ff80;
 }
 @media (min-width: 1080px) {
@@ -181,13 +189,14 @@ a {
 }
 .layout-container header div #block-erabletheme-header #hamburger {
   cursor: pointer;
-  width: 7vh;
+  width: 10vh;
   height: 100%;
   background-color: #00ff80;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
+  padding: 0.5rem 0;
 }
 .layout-container header div #block-erabletheme-header #hamburger h2 {
   font-size: 0.8rem;
@@ -227,7 +236,7 @@ a {
   transition: max-height 0.9s ease, padding 0.5s ease-out;
   position: fixed;
   background-color: #314e41;
-  top: 7vh;
+  top: 10vh;
   left: 0;
   width: 100vw;
   z-index: 0;
@@ -783,8 +792,8 @@ a {
 }
 @media (min-width: 760px) {
   .ornements_top_over {
-    left: -40vw;
+    left: -35vw;
-    top: -16vw;
+    top: -20vw;
   }
   .ornements_top_over > div {
     transform: scaleX(-1);
@@ -796,11 +805,8 @@ a {
   .ornements_top_over > div:nth-of-type(2) {
     display: none;
   }
-}
-@media (min-width: 1080px) {
   .ornements_top_over > div:nth-of-type(3) {
-    transform: scaleX(-1) rotate(-25deg);
+    background-image: url(../assets/formes/forme_6.png);
-    top: -25vh;
   }
 }
 
@@ -982,7 +988,7 @@ a {
     background-size: contain;
     background-image: url(../assets/formes/forme_5.png);
     position: absolute;
-    margin-top: 35vh;
+    top: 35vh;
   }
   .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
     width: 100%;
@@ -991,8 +997,8 @@ a {
     background-size: contain;
     background-image: url(../assets/formes/forme_2.png);
     position: absolute;
-    margin-top: 40vh;
+    top: 40vh;
-    margin-left: 12vw;
+    left: 12vw;
   }
 }
 @media (min-width: 1080px) {
@@ -1003,11 +1009,11 @@ a {
     right: -2vw;
   }
   .carousel_container .ornements_carousel_bottom > div:first-of-type {
-    margin-top: -16vh;
+    top: -16vh;
   }
   .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
-    margin-top: -8vh;
+    top: -8vh;
-    margin-left: 4vw;
+    left: 4vw;
   }
 }
 
@@ -1124,8 +1130,7 @@ a {
 @media (min-width: 1080px) {
   .ornements_consultation_left > div:first-of-type {
     transform: rotate(0deg);
-    bottom: unset;
+    bottom: 5vh;
-    top: -5vh;
     left: 0;
     width: 60%;
   }
@@ -1194,7 +1199,6 @@ a {
 @media (min-width: 1080px) {
   .ornements_consultation_right > div:nth-of-type(2) {
     transform: none;
-    right: -4vw;
     width: 60%;
   }
 }
@@ -1560,7 +1564,7 @@ a {
 }
 @media (min-width: 760px) {
   .fullpage {
-    margin-top: 10vh;
+    margin-top: 12vh;
     padding-top: 0;
     width: 75vw;
     margin-left: 12.5vw;

web/themes/erabletheme/js/erabletheme.js

@@ -132,9 +132,14 @@
       //
       // Effets parallax
       //
+      let currentPage;
+      if (document.querySelector('.fullpage:not(.actus)')) currentPage = 'fullpage';
+      else if (document.querySelector('.carousel_container')) currentPage = 'home';
+
       let ornements, scrollHeight;
       function getElementsAndPositions() {
         scrollHeight = document.body.scrollHeight;
+        if (currentPage === 'fullpage') {
           ornements = {
             topUnderFirst : {
               el : document.querySelector('.ornements_top_under > div:first-of-type'),
@@ -148,7 +153,7 @@
             },
             topOver : {
               el : document.querySelector('.ornements_top_over'),
-            values : { left : -40, top : -16 },
+              values : { left : -36, top : -20 },
               mobileValues : { right : -55, top : -5 }
             },
             bottomFirst : {
@@ -161,10 +166,75 @@
               values : window.innerWidth < 1080 ? { left : 18, bottom : -11 } : { left : 25, bottom : -9 },
               mobileValues : { left : -3, bottom : -15 }
             }
+          };
+        } else if (currentPage === 'home') {
+          ornements = {
+            carouselTop : {
+              el : document.querySelector('.ornements_carousel_top'),
+              values : window.innerWidth < 1080 ? { left : 3, top : -25 } : { left : -10, top : 20 },
+            //  mobileValues : {}
+            },
+            carouselBottomFirst : {
+              el : document.querySelector('.ornements_carousel_bottom > div:first-of-type'),
+              values : window.innerWidth < 1080 ? { left : 0, top : 35 } : { left : 0, top : -16 },
+            //  mobileValues : {}
+            },
+            carouselBottomSecond : {
+              el : document.querySelector('.ornements_carousel_bottom > div:nth-of-type(2)'),
+              values : window.innerWidth < 1080 ? { left : 12, top : 40 } : { left : 4, top : -8 },
+            //  mobileValues : {}
+            },
+            presentationLeftFirst : {
+              el : document.querySelector('.ornements_presentation_left > div:first-of-type'),
+              values : { left : -20, bottom : -8 },
+              mobileValues : { left : -20, bottom : -8 }
+            },
+            presentationLeftSecond : {
+              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(2)'),
+              values : { left : -21, bottom : -3 },
+              mobileValues : { left : -10, bottom : -5 }
+            },
+            presentationLeftThird : {
+              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(3)'),
+              values : { left : -22, bottom : -3 },
+              mobileValues : { left : -22, bottom : -3 }
+            },
+            presentationRightFirst : {
+              el : document.querySelector('.ornements_presentation_right > div:first-of-type'),
+              values : { right : -6, bottom : -3 },
+              mobileValues : { right : -15, bottom : -6 }
+            },
+            presentationRightSecond : {
+              el : document.querySelector('.ornements_presentation_right > div:nth-of-type(2)'),
+              values : { right : -12, bottom : -12 },
+              mobileValues : { right : -12, bottom : -12 }
+            },
+            consultationLeftFirst : {
+              el : document.querySelector('.ornements_consultation_left > div:first-of-type'),
+              values : window.innerWidth < 1080 ? { left : -30, bottom : -10 } : { left : 0, bottom : 5 },
+              mobileValues : { left : -30, bottom : -10 }
+            },
+            consultationLeftSecond : {
+              el : document.querySelector('.ornements_consultation_left > div:nth-of-type(2)'),
+              values : window.innerWidth < 1080 ? { left : -12, top : 0 } : { left : -20, top : -5 },
+              mobileValues : { left : -12, top : 0 }
+            },
+            consultationRightFirst : {
+              el : document.querySelector('.ornements_consultation_right > div:first-of-type'),
+              values : window.innerWidth < 1080 ? { right : -8, bottom : -2 } : { right : -3, bottom : 6 },
+              mobileValues : { right : -8, bottom : -2 }
+            },
+            consultationRightSecond : {
+              el : document.querySelector('.ornements_consultation_right > div:nth-of-type(2)'),
+              values : { right : -4, bottom : 3 },
+              mobileValues : { right : -4, bottom : 0 }
+            }
+          };
         }
       }
 
       function moveElementsOnScroll() {
+        if (currentPage === 'fullpage') {
           ornements.topOver.el.style.left = `${ornements.topOver.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
           ornements.topOver.el.style.top = `${ornements.topOver.values.top * (window.innerHeight / 100) + window.scrollY / 1.1}px`;
   
@@ -176,10 +246,47 @@
   
           ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
   
-        ornements.bottomSecond.el.style.top = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) + ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+          ornements.bottomSecond.el.style.bottom = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+        } else if (currentPage === 'home') {
+          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
+          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top * (window.innerHeight / 100) + window.scrollY / 8}px`;
+
+          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left * (window.innerWidth / 100) + window.scrollY / 5}px`;
+          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
+
+          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
+          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;
+
+
+          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
+
+          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;
+
+          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+
+
+          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
+
+          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;
+
+
+
+
+          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 6)}px`;
+
+          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+
+
+          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 4)}px`;
+
+          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+
+        }
       }
 
       function resetElementsPosition() {
+        if (currentPage === 'fullpage') {
+
           ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left}vw`;
           ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top}vh`;
   
@@ -196,9 +303,50 @@
           ornements.bottomSecond.el.style.top = "unset";
           ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.values.left}vw`;
           ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.values.bottom}vh`;
+
+        } else if (currentPage === 'home') {
+
+          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left}vw`;
+          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top}vh`;
+
+          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left}vw`;
+          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top}vh`;
+
+          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left}vw`;
+          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top}vh`;
+
+          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left}vw`;
+          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.values.bottom}vh`;
+
+          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left}vw`;
+          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.values.bottom}vh`;
+
+          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left}vw`;
+          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.values.bottom}vh`;
+
+          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right}vw`;
+          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.values.bottom}vh`;
+
+          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right}vw`;
+          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.values.bottom}vh`;
+
+          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left}vw`;
+          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.values.bottom}vh`;
+
+          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left}vw`;
+          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.values.top}vh`;
+
+          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right}vw`;
+          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.values.bottom}vh`;
+
+          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right}vw`;
+          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.values.bottom}vh`;
+        }
       }
 
       function resetMobileElementsPosition() {
+        if (currentPage === 'fullpage') {
+
           ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.mobileValues.left}vw`;
           ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.mobileValues.top}vh`;
   
@@ -216,22 +364,52 @@
           ornements.bottomSecond.el.style.top = "unset";
           ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.mobileValues.left}vw`;
           ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.mobileValues.bottom}vh`;
+
+        } else if (currentPage === 'home') {
+
+          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.mobileValues.left}vw`;
+          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.mobileValues.bottom}vh`;
+
+          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.mobileValues.left}vw`;
+          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.mobileValues.bottom}vh`;
+
+          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.mobileValues.left}vw`;
+          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.mobileValues.bottom}vh`;
+
+          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.mobileValues.right}vw`;
+          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.mobileValues.bottom}vh`;
+
+          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.mobileValues.right}vw`;
+          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.mobileValues.bottom}vh`;
+
+          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.mobileValues.left}vw`;
+          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.mobileValues.bottom}vh`;
+
+          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.mobileValues.left}vw`;
+          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.mobileValues.top}vh`;
+
+          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.mobileValues.right}vw`;
+          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.mobileValues.bottom}vh`;
+
+          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.mobileValues.right}vw`;
+          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.mobileValues.bottom}vh`;
+        }
       }
 
-      function setupResize() {
+      function setupParallax() {
         getElementsAndPositions();
         resetElementsPosition();
         window.addEventListener("scroll", moveElementsOnScroll);
       }
 
-      if (document.querySelector('.fullpage:not(.actus)')) {
+      if (currentPage) {
-        if (window.innerWidth > 760) setupResize();
+        if (window.innerWidth > 760) setupParallax();
         
         window.addEventListener('resize', () => { 
           window.scrollTo(0, 0);
           window.removeEventListener("scroll", moveElementsOnScroll); 
           if (window.innerWidth > 760) {
-            setupResize();
+            setupParallax();
           } else if (ornements) {
             resetMobileElementsPosition();
           }

web/themes/erabletheme/scss/_fullpage.scss

@@ -80,7 +80,7 @@
         margin-bottom: 8vh;
     }
     @media (min-width: $breakpoint_tablet) {
-        margin-top: 10vh;
+        margin-top: 12vh;
         padding-top: 0;
         width: 75vw;
         margin-left: 12.5vw;

web/themes/erabletheme/scss/global/_global.scss

@@ -1,3 +1,3 @@
 #block-erabletheme-contenudelapageprincipale {
-    margin-top: 7vh;
+    margin-top: 10vh;
 }

web/themes/erabletheme/scss/partials/_header.scss

@@ -12,7 +12,7 @@
         z-index: 99;
         div {
             max-width: 100%;
-            max-height: 7vh;
+            max-height: 10vh;
             display: flex;
             flex-wrap: nowrap;
             justify-content: space-between;
@@ -30,8 +30,12 @@
                         }
                     }
                 }
+                @media (min-width: $breakpoint_tablet) {
+                    padding-right: 2rem;
+                }
                 @media (min-width: $breakpoint_desktop) {
                     width: 10vw;
+                    padding-right: 1vw;
                 }
             }
             #block-erabletheme-logoerable {
@@ -54,6 +58,9 @@
                 }
                 @media (min-width: $breakpoint_desktop) {
                     width: 10vw;
+                    padding-left: 3vw;
+                    padding-top: 0.4rem;
+                    padding-bottom: 0.4rem;
                 }
             }
             #block-erabletheme-navigationprincipale {
@@ -64,7 +71,7 @@
                     height: 100%;
                     align-items: center;
                     justify-content: space-around;
-                    padding: 0 5vw;
+                    padding: 0 2vw;
                     li {
                         font-family: 'Marianne', sans-serif;
                         font-size: $m_font_size;
@@ -79,7 +86,6 @@
                             background-color: $fluo_green;
                         }
                         a.is-active {
-                            font-weight: 400;
                             background-color: $fluo_green;
                         }
                     }
@@ -120,13 +126,14 @@
             #block-erabletheme-header {
                 #hamburger {
                     cursor: pointer;
-                    width: 7vh;
+                    width: 10vh;
                     height: 100%;
                     background-color: $fluo_green;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-around;
+                    padding: 0.5rem 0;
                     h2 {
                         font-size: $sm_font_size;
                         font-family: 'Marianne', sans-serif;
@@ -168,7 +175,7 @@
                     transition: max-height 0.9s ease, padding 0.5s ease-out;
                     position: fixed;
                     background-color: $dark_green;
-                    top: 7vh;
+                    top: 10vh;
                     left: 0;
                     width: 100vw;
                     z-index: 0;

web/themes/erabletheme/scss/partials/_ornements.scss

@@ -30,8 +30,8 @@
         right: -8vw;
     }    
     @media (min-width: $breakpoint_tablet) {
-        left: -40vw;
+        left: -35vw;
-        top: -16vw;
+        top: -20vw;
         > div {
             transform: scaleX(-1);
             left: -55vw;
@@ -42,11 +42,8 @@
         > div:nth-of-type(2) {
             display: none;
         }
-    }
-    @media (min-width: $breakpoint_desktop) {
         > div:nth-of-type(3) {
-            transform: scaleX(-1) rotate(-25deg);
+            background-image: url(../assets/formes/forme_6.png);
-            top: -25vh;
         }
     }
 }
@@ -223,7 +220,7 @@
                 background-size: contain;
                 background-image: url(../assets/formes/forme_5.png);
                 position: absolute;
-                margin-top: 35vh;
+                top: 35vh;
             }
             > div:nth-of-type(2) {
                 width: 100%;
@@ -232,8 +229,8 @@
                 background-size: contain;
                 background-image: url(../assets/formes/forme_2.png);
                 position: absolute;
-                margin-top: 40vh;
+                top: 40vh;
-                margin-left: 12vw;
+                left: 12vw;
             }
         }
         @media (min-width: $breakpoint_desktop) {
@@ -242,11 +239,11 @@
             top: 0;
             right: -2vw;
             > div:first-of-type {
-                margin-top: -16vh;
+                top: -16vh;
             }
             > div:nth-of-type(2) {
-                margin-top: -8vh;
+                top: -8vh;
-                margin-left: 4vw;
+                left: 4vw;
             }
         }
     }
@@ -358,8 +355,7 @@
         bottom: -10vh;
         @media (min-width: $breakpoint_desktop) {
             transform: rotate(0deg);
-            bottom: unset;
+            bottom: 5vh;
-            top: -5vh;
             left: 0;
             width: 60%;
         }    
@@ -419,7 +415,6 @@
         }
         @media (min-width: $breakpoint_desktop) {
             transform: none;
-            right: -4vw;
             width: 60%;
         }
     }