.flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; bottom: 12px; width: 54px; height: 54px; border: 3px solid white; border-radius: 0; background: $color__background-overlay; cursor: pointer; } .flickity-prev-next-button:hover { //background: $secondary-background; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px $color__link-hover; } .flickity-prev-next-button:active { filter: alpha(opacity=60); /* IE8 */ opacity: 0.6; } .flickity-prev-next-button.previous { left: 12px; } .flickity-prev-next-button.next { right: 12px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { filter: alpha(opacity=30); /* IE8 */ opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #fff; } /* color & size if no SVG - IE8 and Android 2.3 */ .flickity-prev-next-button.no-svg { color: #fff; font-size: 26px; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: 2.5%; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: white; background: hsla(0, 0%, 100%, 0.20); border-radius: 50%; filter: alpha(opacity=25); /* IE8 */ opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { filter: alpha(opacity=100); /* IE8 */ opacity: 1; } /* Custom slider styles. */ .single-header, .featured-header, .featured-excerpt { max-width: 90%; margin-left: auto; margin-right: auto; } .single-title, .featured-title { margin: 0; @include font-size(2); } .single-title, .single-meta, .post-categories a, .featured-title, .featured-title a, .featured-title a:visited, .featured-excerpt, .featured-more, .featured-more:visited, .featured-more::after, .featured-more::after { color: $color__text-menu; text-align: center; text-decoration: none; } .single-title { padding: 40px 0; } .post-categories a:hover, .post-categories a:focus, .featured-title a:hover, .featured-title a:focus, .featured-more:hover, .featured-more:focus, .featured-more:hover::after, .featured-more:focus::after { color: $color__link-hover; } .featured-excerpt p { cursor: text; } .featured-more { display: inline-block; padding: 4px 8px; color: $color__text-blog; text-decoration: none; border: 2px solid $color__text-blog; background: $color__background-overlay; } .featured-more::after { display: none; font-family: 'Genericons'; content: '\f429'; margin-top: -4px; @include font-size(1.125); } .post-categories { margin: 0 auto; padding: 0; list-style: none; } /* Hide flickity buttons on small screens. */ .flickity-prev-next-button { display: none; } @media screen and (min-width: $breakpoint-small) { .single-title, .featured-title { @include font-size(2.5); } .flickity-prev-next-button { display: inline; } } @media screen and (min-width: $breakpoint-medium) { .single-title, .featured-title { @include font-size(3); } }