.ornements_top_over { pointer-events: none; position: absolute; width: 100vw; height: 30vh; right: -55vw; top: -5vh; z-index: 0; > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; } > div:first-of-type { background-image: url(../assets/formes/forme_4.png); top: -3vh; right: 5vw; } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); right: -13vw; } > div:nth-of-type(3) { background-image: url(../assets/formes/forme_3.png); top: 4vh; right: -8vw; } @media (min-width: $breakpoint_tablet) { left: -40vw; top: -10vw; > div { transform: scaleX(-1); left: -55vw; } > div:first-of-type { display: none; } > div:nth-of-type(2) { display: none; } } @media (min-width: $breakpoint_desktop) { > div:nth-of-type(3) { transform: scaleX(-1) rotate(-25deg); top: -25vh; } } } .ornements_top_under { display: none; position: absolute; width: 100vw; height: 30vh; left: -30vw; top: 0vw; > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transform: scaleX(-1); } > div:first-of-type { background-image: url(../assets/formes/forme_4.png); top: -3vh; left: -45vw; } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); left: -60vw; } @media (min-width: $breakpoint_tablet) { display: block; } @media (min-width: $breakpoint_desktop) { > div:first-of-type { top: 1vh; left: -50vw; } > div:nth-of-type(2) { top: 6vh; left: -56.5vw; } } } .ornements_bottom_over { pointer-events: none; position: absolute; width: 100vw; height: 30vh; left: -30vw; bottom: -20vh; > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; } > div:first-of-type { background-image: url(../assets/formes/forme_1.png); left: 8vw; bottom: -4vh; } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_2.png); bottom: -15vh; left: -3vw; } @media (min-width: $breakpoint_tablet) { left: unset; right: -8vw; bottom: -25vh; > div { transform: scaleX(-1); } > div:nth-of-type(2) { left: 18vw; bottom: -11vh; } } @media (min-width: $breakpoint_desktop) { > div:first-of-type { bottom: 6vh; left: 20vw; } > div:nth-of-type(2) { bottom: -9vh; left: 25vw; } } } .fullpage.actus { .ornements_top_over, .ornements_top_under { top: -12vh; } .ornements_bottom_over { bottom: -28vh; > div:nth-of-type(2) { bottom: -10vh; left: -7vh; } } @media (min-width: $breakpoint_tablet) { width: auto; margin-left: $x_margin; margin-right: $x_margin; .actus_list { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (min-width: $breakpoint_desktop) { .actus_list { grid-template-columns: repeat(3, 1fr); } .ornements_top_over { > div:nth-of-type(3) { top: -28vh; } } .ornements_bottom_over { > div:first-of-type { bottom: 0vh; left: -3vw; } > div:nth-of-type(2) { left: 6vh; } } } } .carousel_container { position: relative; .ornements_carousel_top { position: absolute; display: none; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_5.png); @media (min-width: $breakpoint_tablet) { display: block; width: 20vw; height: 50vh; top: -25vh; left: 3vw; transform: rotate(-90deg); } @media (min-width: $breakpoint_desktop) { top: 20vh; left: -10vw; height: 30vh; } } .ornements_carousel_bottom { position: absolute; display: none; overflow: hidden; @media (min-width: $breakpoint_tablet) { display: block; width: 20vw; height: 50vh; right: 0; bottom: 1px; > div:first-of-type { width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_5.png); position: absolute; margin-top: 35vh; } > div:nth-of-type(2) { width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_2.png); position: absolute; margin-top: 40vh; margin-left: 12vw; } } @media (min-width: $breakpoint_desktop) { width: 12vw; bottom: unset; top: 0; right: -2vw; > div:first-of-type { margin-top: -16vh; } > div:nth-of-type(2) { margin-top: -8vh; margin-left: 4vw; } } } } .ornements_presentation_left { position: absolute !important; height: 20vh; width: 20vw; // background-color: red; bottom: 0; left: 0; z-index: 0; overflow: hidden; > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } > div:first-of-type { background-image: url(../assets/formes/forme_4.png); transform: rotate(180deg); width: 200%; left: -20vw; bottom: -8vh; } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); transform: rotate(180deg); width: 130%; left: -10vw; bottom: -5vh; @media (min-width: $breakpoint_tablet) { width: 170%; height: 120%; left: -21vw; bottom: -3vh; } } > div:nth-of-type(3) { background-image: url(../assets/formes/forme_3.png); transform: rotate(180deg); position: absolute; width: 100%; height: 100%; width: 200%; left: -22vw; bottom: -3vh; } } .ornements_presentation_right { position: absolute !important; height: 20vh; width: 20vw; bottom: 0; right: 0; z-index: 0; overflow: hidden; > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } > div:first-of-type { background-image: url(../assets/formes/forme_1.png); transform: rotate(-90deg); bottom: -3vh; right: -6vw; } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_2.png); bottom: -12vh; right: -12vw; } }