.carrousel-cs { padding: 0; } @media (min-width: 576px) { .carrousel-cs { padding: 1rem; } } .glide__arrow--left{ left:-1rem; } .glide__arrow--right{ right:-1rem; } .glide__arrow { position: absolute; display: block; top: 50%; z-index: 2; color: white; text-transform: uppercase; padding: 9px 12px; background-color: transparent; border: none; text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); opacity: 1; cursor: pointer; transition: opacity 150ms ease, border 300ms ease-in-out; line-height: 1; } @media (min-width: 576px) { .glide__arrow { border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); border-radius: 4px; } } .glide__arrow:focus { outline: none; } .glide__arrow:hover { border-color: white; } .glide__bullets { list-style: none; position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translate(-50%, 0); } .glide__bullet { background-color: rgba(0, 0, 0, 0.3); width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 2px solid transparent; transition: all 300ms ease-in-out; cursor: pointer; line-height: 0; box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); margin: 0 0.25em; vertical-align: sub; } .glide__bullet--active { background-color: black; } .glide__bullet:hover { background-color: rgba(0, 0, 0, 0.3); }