.ornements_top_over { pointer-events: none; position: absolute; width: 100vw; height: 30vh; right: -55vw; top: -5vh; z-index: 0; transition: left 0.05s ease, top 0.05s ease; > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transition: left 0.05s ease, top 0.05s ease; } > 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: -35vw; top: -20vw; > div { transform: scaleX(-1); left: -55vw; } > div:first-of-type { display: none; } > div:nth-of-type(2) { display: none; } > div:nth-of-type(3) { background-image: url(../assets/formes/forme_6.png); } } } .ornements_top_under { pointer-events: none; display: none; position: absolute; width: 100vw; height: 30vh; left: -30vw; top: 0vw; transition: left 0.05s ease, top 0.05s ease; > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transform: scaleX(-1); transition: left 0.05s ease, top 0.05s ease; } > 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; 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; top: 40vh; left: 12vw; } } @media (min-width: $breakpoint_desktop) { width: 12vw; bottom: unset; top: 0; right: -2vw; > div:first-of-type { top: -16vh; } > div:nth-of-type(2) { top: -8vh; left: 4vw; } } } } .ornements_presentation_left { pointer-events: none; position: absolute !important; height: 20vh; width: 20vw; 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 { pointer-events: none; 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); right: -15vw; bottom: -6vh; @media (min-width: $breakpoint_tablet) { bottom: -3vh; right: -6vw; } } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_2.png); bottom: -12vh; right: -12vw; } } .ornements_consultation_left { pointer-events: none; position: absolute !important; height: 20vh; width: 30vw; bottom: -8vh; 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%; height: 120%; left: -30vw; bottom: -10vh; @media (min-width: $breakpoint_desktop) { transform: rotate(0deg); bottom: 5vh; left: 0; width: 60%; } } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); transform: rotate(180deg); left: -12vw; @media (min-width: $breakpoint_desktop) { left: -20vw; top: -5vh; } } @media (min-width: $breakpoint_desktop) { top:0; } } .ornements_consultation_right { pointer-events: none; position: absolute !important; height: 20vh; width: 30vw; bottom: -8vh; 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); width: 80%; height: 80%; right: -8vw; bottom: -2vh; @media (min-width: $breakpoint_desktop) { right: -3vw; bottom: 6vh; transform: rotate(180deg); } } > div:nth-of-type(2) { background-image: url(../assets/formes/forme_3.png); transform: rotate(180deg); right: -4vw; width: 100%; @media (min-width: $breakpoint_tablet) { width: 30%; bottom: 3vh; } @media (min-width: $breakpoint_desktop) { transform: none; width: 60%; } } @media (min-width: $breakpoint_desktop) { bottom: unset; top: 0; right: 0; } }