.glide {
position: relative;
width: 100%;
box-sizing: border-box;
}
.glide * {
box-sizing: inherit;
}
.glide__track {
overflow: hidden;
}
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
margin: 0;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.glide__slides--dragging {
user-select: none;
}
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.glide__slide a {
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
}
.glide__arrows {
-webkit-touch-callout: none;
user-select: none;
}
.glide__bullets {
-webkit-touch-callout: none;
user-select: none;
}
.glide--rtl {
direction: rtl;
} .glide__arrow {
position: absolute;
display: block;
top: 50%;
z-index: 2;
color: white;
text-transform: uppercase;
padding: 9px 12px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
opacity: 1;
cursor: pointer;
transition: opacity 150ms ease, border 300ms ease-in-out;
transform: translateY(-50%);
line-height: 1;
}
.glide__arrow:focus {
outline: none;
}
.glide__arrow:hover {
border-color: white;
}
.glide__arrow--left {
left: -1em;
}
.glide__arrow--right {
right: -1em;
}
.glide__arrow--disabled {
opacity: 0.33;
}
.glide__bullets {
position: absolute;
z-index: 2;
bottom: -1em;
left: 50%;
display: inline-flex;
list-style: none;
transform: translateX(-50%);
}
.glide__bullet {
background-color: rgba(255, 255, 255, 0.5);
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;
}
.glide__bullet:focus {
outline: none;
}
.glide__bullet:hover, .glide__bullet:focus {
border: 2px solid white;
background-color: rgba(255, 255, 255, 0.5);
}
.glide__bullet--active {
background-color: white;
}
.glide--swipeable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.glide--dragging {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.glide__arrows--bottom .glide__arrow {
top: calc(100% + 25px);
left: 0;
}
.glide__arrows--bottom .glide__arrow--right {
left: 50px;
right: unset;
} @media only screen and (max-width: 768px) {
.glide__arrow--left {
left: 0;
}
.glide__arrow--right {
right: 0;
}
}