https://artinresearch.com/flickity

1/*! Flickity v2.0.10
2http://flickity.metafizzy.co
3---------------------------------------------- */
4
5.flickity-enabled {
6  position: relative;
7}
8
9.flickity-enabled:focus { outline: none; }
10
11.flickity-viewport {
12  overflow: hidden;
13  position: relative;
14  height: 100%;
15}
16
17.flickity-slider {
18  position: absolute;
19  width: 100%;
20  height: 100%;
21}
22
23/* draggable */
24
25.flickity-enabled.is-draggable {
26  -webkit-tap-highlight-color: transparent;
27          tap-highlight-color: transparent;
28  -webkit-user-select: none;
29     -moz-user-select: none;
30      -ms-user-select: none;
31          user-select: none;
32}
33
34.flickity-enabled.is-draggable .flickity-viewport {
35  cursor: move;
36  cursor: -webkit-grab;
37  cursor: grab;
38}
39
40.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
41  cursor: -webkit-grabbing;
42  cursor: grabbing;
43}
44
45/* ---- previous/next buttons ---- */
46
47.flickity-prev-next-button {
48  position: absolute;
49  top: 50%;
50  width: 44px;
51  height: 44px;
52  border: none;
53  border-radius: 50%;
54  background: white;
55  background: hsla(0, 0%, 100%, 0.75);
56  cursor: pointer;
57  /* vertically center */
58  -webkit-transform: translateY(-50%);
59          transform: translateY(-50%);
60}
61
62.flickity-prev-next-button:hover { background: white; }
63
64.flickity-prev-next-button:focus {
65  outline: none;
66  box-shadow: 0 0 0 5px #09F;
67}
68
69.flickity-prev-next-button:active {
70  opacity: 0.6;
71}
72
73.flickity-prev-next-button.previous { left: 10px; }
74.flickity-prev-next-button.next { right: 10px; }
75/* right to left */
76.flickity-rtl .flickity-prev-next-button.previous {
77  left: auto;
78  right: 10px;
79}
80.flickity-rtl .flickity-prev-next-button.next {
81  right: auto;
82  left: 10px;
83}
84
85.flickity-prev-next-button:disabled {
86  opacity: 0.3;
87  cursor: auto;
88}
89
90.flickity-prev-next-button svg {
91  position: absolute;
92  left: 20%;
93  top: 20%;
94  width: 60%;
95  height: 60%;
96}
97
98.flickity-prev-next-button .arrow {
99  fill: #333;
100}
101
102/* ---- page dots ---- */
103
104.flickity-page-dots {
105  position: absolute;
106  width: 100%;
107  bottom: -25px;
108  padding: 0;
109  margin: 0;
110  list-style: none;
111  text-align: center;
112  line-height: 1;
113}
114
115.flickity-rtl .flickity-page-dots { direction: rtl; }
116
117.flickity-page-dots .dot {
118  display: inline-block;
119  width: 10px;
120  height: 10px;
121  margin: 0 8px;
122  background: #333;
123  border-radius: 50%;
124  opacity: 0.25;
125  cursor: pointer;
126}
127
128.flickity-page-dots .dot.is-selected {
129  opacity: 1;
130}