/* Main Configuration */

@layer configuration {

*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}

button,input {
    border        : unset;
    border-radius : unset;
    appearance    : unset;
    box-shadow    : unset;
    cursor        : pointer;
}

details,summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display : none;
}
}

@layer configuration {

@font-face {
    font-display : swap;
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 400;
    src          : url('fonts/work-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'Work Sans';
    font-style   : italic;
    font-weight  : 400;
    src          : url('fonts/work-sans-v19-latin-italic.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 600;
    src          : url('fonts/work-sans-v19-latin-600.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'Forma';
    font-style   : normal;
    font-weight  : 400;
    src          : url('fonts/FormaDJRDisplay-Regular-Testing.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'Forma';
    font-style   : normal;
    font-weight  : 700;
    src          : url('fonts/FormaDJRDisplay-Bold-Testing.woff2') format('woff2');
}

:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,0%);
    --text-gray  : #AFAFAF;

    --orange : #FC4C20;
    --black  : #000;
    --white  : #FFF;
    --gray   : #EBEAE6;

    /* Font Settings */
    --f-family : "Work Sans" , sans-serif;
    --f-size   : clamp(14px, 0.5vi + 12px, 20px);
    --f-height : clamp(20px, 0.67vi + 17.33px, 28px);
    --f-weight : 400;

    /* Layut Settings */
    --grid-gap : 0.5rem;
    --radius   : 10px;

    /* Set the defaults */
    font-size   : var(--f-height);
    font-family : var(--f-family);
    font-weight : var(--f-weight);
    background  : var(--background);
    color       : var(--text);
}

body {
    font-size   : var(--f-size);
    line-height : var(--f-height);
}

html,body {
    scroll-padding : 5rem;
    scroll-behavior: smooth;
}
}

@layer configuration {
/* 400 to 1600 */
:root {

    --small-text: clamp(12px, 0.17vi + 11.33px, 14px) / 1.4 "Work Sans" , sans-serif;
    --base-text: clamp(14px, 0.5vi + 12px, 20px) / 1.4 "Work Sans" , sans-serif;

    --menu-item : 700 clamp(16px, 0.5vi + 14px, 22px) / 1 "Forma";
    --button    : 700 clamp(12px, 0.17vi + 11.33px, 14px) / 1 "Forma";


    --menu-item : 700 clamp(16px, 0.5vi + 14px, 22px) / 1 "Forma";

    --mobile-menu-item  : 700 22px / 1 "Forma";
    --mobile-menu-label : 700 32px / 1 "Forma";

    --compatibility : 400 clamp(18px, 0.92vi + 14.33px, 29px) / 1.2 "Forma";
    --question      : 400 clamp(18px, 0.5vi + 16px, 24px) / 1.2 "Forma";

    --title-small-regular : 400 clamp(20px, 1vi + 16px, 32px) / 1.2 "Forma";
    --title-small-bold    : 700 clamp(20px, 1vi + 16px, 32px) / 1.2 "Forma";

    --title-medium-regular : 400 clamp(22px, 1.67vi + 15.33px, 42px) / 1.2 "Forma";
    --title-medium-bold    : 700 clamp(22px, 1.67vi + 15.33px, 42px) / 1.2 "Forma";

    --title-large-regular : 400 clamp(32px, 2.33vi + 22.67px, 60px) / 1 "Forma";
    --title-large-bold    : 700 clamp(32px, 2.33vi + 22.67px, 60px) / 1 "Forma";

}
}/* Global Settings *//* Content Goes Here */

body {
    position : relative;
}/* UI Elements */

.header {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    justify-content       : space-between;
    background            : var(--black);
    padding               : 1rem;
    border-radius         : var(--radius);
    align-content         : center;
    align-items           : center;
    position              : sticky;
    top                   : var(--grid-gap);
    margin                : var(--grid-gap);
    z-index               : 9999;

    @media (min-width: 750px) {
         grid-template-columns : 1fr 1fr 1fr;
    }
}

.header-home-link {
    justify-self: start;
}

.header-logo {
    height : 1.5rem;
}

.header-menu {
    justify-self : center;
    gap          : 1rem;
    display      : none;
    @media (min-width: 750px) {
        display : flex;
    }
}

.header-menu-item {
    color       : var(--white);
    font        : var(--menu-item);
    white-space : nowrap;
    &:hover {
        color : var(--orange);
    }
}

.header-demo {
    justify-self : end;
    @media (max-width: 749px) {
        display : none !important;
    }
}

.header-menu-button {
    justify-self: end;
    align-self: center;
    @media (min-width: 750px) {
        display : none;
    }

    &:hover .header-menu-button-icon {
        fill : var(--orange);
    }
}

.header-menu-button-icon {
    fill   : white;
    width  : 1.5rem;
    height : 1.5rem;
    display : none;

    &.visible {
        display : block;
    }
}

.opening {
    margin   : var(--grid-gap);
    position : relative;

    &::before {
        content       : "";
        position      : absolute;
        top           : 0;
        left          : 0;
        right         : 0;
        bottom        : 20%;
        max-height    : calc(100svh - 5rem);
        background    : linear-gradient(to bottom, var(--gradientTop), var(--gradientBottom));
        border-radius : var(--radius);
        z-index       : -1;
    }
}

.opening-inner {
    display       : grid;
    justify-items : center;
    text-align    : center;
    padding       : 2rem 1rem;
}

.opening-logo {
    height        : 1.5rem;
    margin-bottom : 1.5rem;

    @media (min-width: 750px) {
         height : 2.5rem;
    }
}

.opening-title {
    text-wrap : balance;
}

.opening-tagline {
    text-wrap     : balance;
    font          : var(--title-large-bold);
    margin-bottom : 0.5rem;
    max-width     : 70rem;
}

.opening-intro {
    max-width : 70rem;
    text-wrap : balance;
    font      : var(--title-small-regular);
}

.opening-media {
    border-radius : var(--radius);
    margin        : 3rem 0 1rem;
    width         : 80%;
}

.opening-image,
.opening-video {
    width : 100%;
}

.opening-button {
    margin-top : 1rem;
}

#home {

    .opening-media {
        margin-top : 0;
        pointer-events: none;
        z-index: -1;
        transform : translateY(-5%);
    }

    .opening-inner {
        padding-bottom : 0;
    }

}

.main-menu {
    position       : fixed;
    top            : 4.5rem;
    left           : var(--grid-gap);
    right          : var(--grid-gap);
    background     : #FBFBFB;
    padding        : 1rem;
    border-radius  : var(--radius);
    pointer-events : none;
    opacity        : 0;
    box-shadow     : 0px 22px 28px 0px #00000040;
    z-index        : 9999;
    transform      : translateY(0.5rem);
    transition-property : opacity, transform;
}

.main-menu-active {
    pointer-events : all;
    opacity        : 1;
    transform      : initial;
}

.menu-plugins {
    display               : grid;
    grid-template-columns : repeat(3,1fr);
}

.menu-plugins-item {
    border-left : 1px solid var(--orange);
    padding     : 0 1rem;

    &:last-child {
        border-right : 1px solid var(--orange);
    }

    &:hover .menu-plugins-item-label {
        color : var(--orange);
    }

}

.menu-plugins-item-icon {
    height        : 2rem;
    margin-bottom : 0.5rem;

    @media (min-width: 1000px) {
        height : 3rem;
    }
}

.menu-plugins-item-logo {
    height : 1.5rem;
    margin-bottom : 0.5rem;
    @media (min-width: 1000px) {
        height : 2rem;
    }
}

.menu-plugins-item-tagline {
    font : var(--title-small-regular);
    display: block;
    margin-bottom : 0.25rem;
}

.menu-plugins-item-label {
    font : var(--menu-item);
    display : block
}

.menu-about {
    display               : grid;
    grid-template-columns : 3fr 2fr;
}

.menu-about-content {
    border-left    : 1px solid var(--orange);
    padding        : 0 1rem;
    display        : flex;
    flex-direction : column;
}

.menu-about-logo {
    width : 100%;
    object-fit: contain;
    object-position: left top;
    max-height : 2rem;
    margin-bottom : auto;
    align-self: flex-start;
}

.menu-about-image {
    width : 100%;
}

.menu-about-link {
    font : var(--menu-item);
    align-self: flex-start;  
    margin-top : 0.25rem;
    &:hover {
        color : var(--orange);
    }
}

.menu-extra-content {
    display               : grid;
    grid-template-columns : 1fr 2fr 2fr;
}

.menu-extra-column {
    border-left    : 1px solid var(--orange);
    padding        : 0 1rem;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    &:last-child {
        border-right : 1px solid var(--orange);
    }
}

.menu-extra-label {
    background : var(--gray);
    font       : var(--title-small-bold);
    border-radius: var(--radius);
    padding : 0.25rem 0.5rem;
    margin-bottom : auto;
}

.menu-extra-title {
    font : var(--title-small-regular);
}

.menu-extra-subtitle {
    font : var(--menu-item);
    font-weight : 400;
    margin-bottom : auto;
}

.menu-extra-item {
    font : var(--menu-item);
    margin-top : 0.25rem;
    &:hover {
        color : var(--orange);
    }

    &:first-of-type {
        margin-top : 1.5rem;
    }

}

.mobile-menu {
    position            : fixed;
    top                 : 4.5rem;
    left                : var(--grid-gap);
    right               : var(--grid-gap);
    bottom              : var(--grid-gap);
    background          : var(--gray);
    padding             : 1rem;
    border-radius       : var(--radius);
    pointer-events      : none;
    opacity             : 0;
    box-shadow          : 0px 22px 28px 0px #00000040;
    z-index             : 9999;
    transform           : translateY(1rem);
    transition-property : opacity, transform;
    display             : flex;
    flex-direction      : column;
    gap                 : 0.5rem;

    @media (min-width: 750px) {
         display : none;
    }
}

.mobile-menu-active {
    pointer-events : all;
    opacity        : 1;
    transform      : initial;
}

.mobile-menu-extras {
    margin-top : auto;
}

.mobile-menu-label {
    font   : var(--mobile-menu-label);
    cursor : pointer;
    &:hover,
    [open] & {
        color : var(--orange);
    }

}

.mobile-menu-section[open] {
    margin-bottom : 0.5rem;

    &:not(:first-child) {
        border-bottom  : 1px solid var(--orange);
        padding-bottom : 1rem;
    }
}

.mobile-menu-items {
    display    : grid;
    margin-top : 0.5rem;
    gap        : 0.25rem;
}

.mobile-menu-link {
    font   : var(--mobile-menu-item);
    display : block;
    justify-self: start;

    &:hover {
        color : var(--orange);
    }
}

.mobile-menu-sublabel {
    font           : var(--small);
    text-transform : uppercase;
    margin-top     : 1rem;

}

.mobile-menu-plugins {
    gap : 1rem;
    margin-top : 1rem;
}

.mobile-menu-plugin {
    display : grid;
    grid-template-columns: 2rem auto;
    gap : 0.5rem;
}

.mobile-menu-plugin-icon {
    display : block;
    width   : 100%;
}

.mobile-menu-plugin-logo {
    display : block;
    height : 2rem;
}

.mobile-menu-button {
    display        : block;
    font           : var(--small);
    text-transform : uppercase;
    text-align     : center;
    color          : var(--white);
    padding        : 0.5rem;
    border-radius  : 5px;
}

.mobile-menu-button:first-child {
    background: var(--orange);
    margin-bottom : 0.25rem;
}

.mobile-menu-button:last-child {
    background: var(--black);
}

.footer-inner {
    margin                : var(--grid-gap);
    background            : var(--black);
    border-radius         : var(--radius);
    padding               : 2rem 2rem;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   : "logo logo" "menu menu" "credits credits" "info info" "follow follow";
    gap                   : 1.5rem;
    color                 : var(--white);
    font                  : var(--small-text);

    @media (min-width : 500px) {
        grid-template-areas : "logo logo" "menu credits" "info info" "follow follow";
    }

    @media (min-width : 700px) {
        grid-template-columns : 1fr 1fr auto auto;
        grid-template-areas   : "logo logo logo logo" "menu credits credits info" "follow follow follow follow";
    }

    @media (min-width: 950px) {
        grid-template-columns : 1fr 1fr auto auto;
        grid-template-areas   : "logo logo logo logo" "menu credits info info" "follow follow follow follow";
    }

    @media (min-width: 1200px) {
        grid-template-columns : repeat(4,1fr);
    }

}

.footer-logo {
    grid-area : logo;
    height    : 2rem;
}

.footer-menu {
    display       : grid;
    gap           : 0.5rem;
    align-self    : start;
    justify-items : start;
    grid-area     : menu;
}

.footer-menu-logo {
    height : 1rem;
}

.footer-credits {
    grid-area   : credits;
    font-weight : 700;
}

.footer-credits-logo {
    margin-top : 0.5rem;
    height : 1.75rem;
}

.footer-info {
    grid-area             : info;
    display               : grid;
    grid-template-columns : subgrid;
    grid-template-areas   : "address" "maps" "links" "legal";
    gap                   : 1rem 1rem;
    
    @media (min-width: 950px) {
        grid-template-areas   : "address links" "maps legal";
    }

    a {
        text-decoration : underline;
    }

}

.footer-info-address {
    grid-area : address;
}

.footer-info-maps {
    grid-area : maps;
}

.footer-info-links {
    grid-area : links;
}

.footer-info-legal {
    grid-area : legal;
    opacity   : 0.75;
}

.footer-follow {
    display    : flex;
    gap        : 1rem;
    margin-top : 2rem;
    grid-area  : follow;
    strong {
        font-weight : 700;
    }
}

.footer-follow-in,
.footer-follow-ig {
    display : grid;
    grid-template-columns: 0.75rem auto;
    align-items: center;
    gap : 0.25rem;

    svg {
        fill : var(--white);
        width : 100%
    }
}

.letterina {
    margin : var(--grid-gap);
}

.letterina-inner {
    border        : 1px solid var(--black);
    border-radius : var(--radius);
    padding       : 2.5rem 1rem;
    display       : grid;
    justify-items : center;
    text-align    : center;
}

.letterina-title {
    font : var(--title-medium-bold);
    color : var(--orange);
}

.letterina-tagline {
    font : var(--title-small-regular);
    color : var(--black);
}

.letterina-form {
    display               : grid;
    justify-content       : center;
    margin                : 1rem 0 0;
    gap                   : 1rem;
    width                 : 100%;
    max-width             : 20rem;
    grid-template-columns : 1fr;
}

.letterina-input {
    border-radius : var(--radius);
    border        : 1px solid var(--gray);
    width         : 100%;
    padding       : 0.55rem 0.75rem 0.45rem;
    font          : var(--small-text);
    box-shadow    : 0px 2px 2px 0px #0000000D;
    text-align    : center;

    &:focus {
        border        : 1px solid var(--orange);
    }

}

.letterina-button {
    justify-self : center;
}

.sib-form-container {
    max-width : 30rem;
    margin-top: 2rem;
}

#sib-form {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
}

label.entry__error {
    font          : var(--small-text);
    padding       : 5px 0.25rem;
    border-radius : 5px;
    color         : white;
    background    : var(--orange);
    display       : none;
}

.sib-form-double {
    grid-column  : span 2;
    justify-self : center;
}

.sib-input {
    @media (max-width: 499px) {
        grid-column : span 2;
    }
}

#OPT_IN {
    position : static;
    appearance: checkbox;
}

.sib-form__declaration {
    grid-column : span 2;
    font        : var(--small-text);
    color       : var(--text-gray);
    display     : flex;
    gap         : 1rem;
    text-align : left;
    align-items : center;
    align-content : center;
    a {
        color : var(--orange);
    }
}

.sib-form-message-panel {
    border        : 1px solid var(--orange);
    padding       : 1rem;
    border-radius : var(--radius);
    display       : none;
}

.sib-form-message-panel__text {
    display : flex;
    gap     : 0.5rem;

    svg {
        fill   : var(--orange);
        width  : 1rem;
        height : 1rem;
    }
}

.progress-indicator__icon {
    display : none !important;
}

.input--hidden {
    position : absolute;
    left : -9999px;
    top : -9999px;
}

.compatibility {
    background : linear-gradient(to bottom, var(--gray) , var(--white));
    text-align : center;
    padding    : 4rem 1rem 2rem;
}

.compatibility-text {
    text-wrap : balance;
    font      : var(--title-small-regular);
}

.compatibility-icons {
    display         : flex;
    flex-wrap       : wrap;
    margin          : 2rem auto 0;
    justify-content : center;
    align-items     : center;
    list-style      : none;
    gap             : var(--grid-gap);
}

.compatibility-icon {
    font            : var(--compatibility);
    color           : var(--white);
    background      : var(--black);
    aspect-ratio    : 1;
    display         : flex;
    justify-content : center;
    align-items     : center;
    text-align      : center;
    width           : 3rem;
    border-radius   : var(--radius);
    position        : relative;

}

.contact {
    margin : var(--grid-gap);
}

.contact-inner {
    background     : var(--orange);
    border-radius  : var(--radius);
    padding        : 2.5rem 1rem;
    text-align     : center;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 0.5rem;
}

.contact-text {
    color     : var(--white);
    font      : var(--title-medium-bold);
    text-wrap : balance;
}

.contact-logo {
    width : 100%;
    margin-bottom : 1.5rem;

    @media (min-width : 550px) {
        height : 1.5rem
    }

    @media (min-width : 800px) {
        height : 1.75rem;
    }
}

.module {
    margin : var(--grid-gap);
}

.module-intro {
    padding    : 2rem 1rem;
    text-align : center;
    max-width  : 55rem;
    margin     : 0 auto;
}

[data-module="cards"] {

    .module-inner {
        background : var(--gray);
        border-radius : var(--radius);

        .layout & {
            background : unset;
        }
    }


}

.cards {
    display               : grid;
    grid-template-columns : 1fr;
    padding               : 0 var(--grid-gap) var(--grid-gap);
    gap                   : var(--grid-gap);

    @media (min-width : 600px) {
        grid-template-columns : repeat(2,1fr);
    }

    &[data-layout="4"] {
        @media (min-width : 1200px) {
            grid-template-columns : repeat(4,1fr);
        }
    }

}

.cards[data-background="white"] .card {
    padding       : var(--grid-gap);
    background    : var(--white);
    border-radius : var(--radius);
}

.card-image {
    width : 100%;
    border-radius: var(--radius);
}

.card-caption {
    padding-top : 0.75rem;
}

[data-module="features"] {

    container-type : inline-size;

    .module-inner {
        background    : linear-gradient(to bottom, var(--gray) , var(--white));
        border-radius : var(--radius);
    }

}

.features {
    display               : grid;
    grid-template-columns : 1fr;
    padding               : 0 var(--grid-gap) 4rem;
    gap                   : 1rem var(--grid-gap);

    @container (min-width : 600px) {
        grid-template-columns : repeat(2,1fr);
    }

    @container (min-width : 1200px) {
        grid-template-columns : repeat(4,1fr);
    }

}

.feature {
    padding : var(--grid-gap);
}

.feature-image {
    height        : 2rem;
    margin-bottom : 0.25rem;
}

[data-module="slider"] {
    margin : var(--grid-gap) 0;

    h2 {
        color: var(--orange);
    }

}

.slider {
    margin-bottom : 3rem;
}

.slide {
    margin     : 0 1rem;
    width      : 80%;
    transition : opacity 200ms;
}

.slide-inner {
    border-radius : var(--radius);
    border        : 1px solid var(--black);
    overflow      : hidden;
}

.slide-image {
    width : 100%;
}

.slide:not(.is-selected) {
    opacity : .25;
}

[data-module="plugins"] {

    h2 {
        color: var(--orange);
    }

    .module-inner {
        background : var(--gray);
        border-radius : var(--radius);
    }

}

[data-module="image"] {

    .module-inner {
        background    : var(--gray);
        border-radius : var(--radius);
        position      : relative;
        overflow      : hidden;
    }

    img {
        width : 100%;

        &.full-height {
            height     : calc(100svh - 5rem);
            object-fit : cover;
            top        : 4.5rem;
        }

        &.natural-width {
            margin : auto;
        }

    }



}

[class*="image-overlay"] {
    position        : absolute;
    display         : flex;
    top             : 0;
    right           : 0;
    bottom          : 0;
    left            : 0;
    flex-direction  : column;
    color           : var(--white);
    padding         : 1rem;
}

.image-overlay-center {
    text-align      : center;
    align-items     : center;
    justify-content : center;
}

.image-overlay-bottom {
    align-items     : flex-start;
    justify-content : flex-end;
}

.image-title {
    font : var(--title-large-bold);
}

.image-subtitle {
    font : var(--title-small-regular);
}

[data-module="text"] {

    .module-inner {
        background    : var(--gray);
        border-radius : var(--radius);
        position      : relative;
        padding       : 1rem;
    }

    [data-alignment="center"] {
        text-align : center;
        padding    : 3rem 1rem;
        margin     : 0 auto;
        max-width  : 60rem;
        text-wrap  : balance;
    }

}

[data-module="contacts"] {

    .module-inner {
        background    : var(--gray);
        border-radius : var(--radius);
        position      : relative;
        padding       : 1rem;
    }

    form {
        background    : var(--white);
        border-radius : var(--radius);
        padding       : 1rem;
        display : grid;
        grid-template-columns: 1fr 1fr;
        gap : 1rem;
    }

}

#plugin-botcha {
    --background : #F5F5F5;
    --border     : #7BD3F4;
    --title      : #255178;
    --tagline    : #073466;
    --text       : #073466;
}

#plugin-jevero {
    --background : #EAF5F0;
    --border     : #21BF87;
    --title      : #25463A;
    --tagline    : #25463A;
    --text       : #25463A;
}

#plugin-jevero-cost {
    --background : #EBEAE6;
    --border     : #4DB88F;
    --title      : #36B182;
    --tagline    : #000000;
    --text       : #000000;
}

.plugin-preview {
    padding               : 5rem;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--grid-gap);
    padding               : 0 var(--grid-gap) var(--grid-gap);

    @media (min-width: 1150px) {
         grid-template-columns : 1fr 1fr;
    }
}

.plugin-preview-content {
    border-radius   : var(--radius);
    background      : var(--background);
    display         : flex;
    flex-direction  : column;
    align-content   : flex-start;
    justify-content : flex-start;
    padding         : 1rem;
    border          : 1px solid var(--border);
    @media (min-width: 1150px) {
        aspect-ratio : 1;
    }
}

.plugin-preview-logo {
    height          : 2rem;
    object-fit      : contain;
    object-position : left top;
    max-width       : 100%;
    margin-bottom   : 1rem;
}

.plugin-preview-title {
    font  : var(--title-medium-bold);
    color : var(--title);

    @media (min-width: 1350px) {
         font : var(--title-large-bold);
    }
}

.plugin-preview-tagline {
    font   : var(--title-medium-regular);
    margin : 0 0 0.5rem;
    color  : var(--tagline);
    @media (min-width: 1350px) {
        margin : 0.25rem 0 1rem;
        font : var(--title-large-regular);
    }
}

.plugin-preview-text {
    color : var(--text);
}

.plugin-preview-specs {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 0 var(--grid-gap);
    margin-top            : 1.5rem;
    @media (min-width: 500px) {
         grid-template-columns : 1fr 1fr;
    }
}

.plugin-preview-spec {
    display     : flex;
    gap         : 0.25rem;
    align-items : center;
    border-top : 1px solid var(--border);
    padding : 0.25rem 0;
}

.plugin-preview-spec-icon {
    height : 1rem;
}

.plugin-preview-spec-text {
    font : var(--small-text);
    text-transform: uppercase;
}

.plugin-preview-button {
    align-self : flex-start;
    margin-top : 1rem;
}

.plugin-preview-media {
    aspect-ratio  : 1;
    border-radius : var(--radius);
    overflow      : hidden;
}

.plugin-preview-media-image,
.plugin-preview-media-video {
    width : 100%;
    height : 100%;
    object-fit: cover;
}

.home-about {
    margin : var(--grid-gap);
}

.home-about-inner {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--grid-gap);
    position              : relative;
    align-items           : start;
    align-content         : start;

    @media (min-width: 750px) {
         grid-template-columns : 1fr 1.5fr;
    }

    @media (min-width: 1050px) {
        grid-template-columns : 1fr 2fr;
    }

    @media (min-width: 1400px) {
         grid-template-columns : 1fr 2.5fr;
    }

}

.home-about-tagline {
    text-align     : center;
    padding-bottom : 3rem;
    font           : var(--title-large-bold);
    @media (min-width: 750px) {
        grid-column : span 2;
    }
}

.home-about-left {
    padding             : 1rem;
    border-radius       : var(--radius);
    background          : var(--gray);
    display             : grid;
    grid-template-areas : "title" "text";
    grid-template-rows  : 1fr auto;
    gap : 1rem;
    @media (min-width: 750px) {
        min-height          : calc(100svh - 5rem);
        position            : sticky;
        top                 : 4.5rem;
    }
}

.home-about-title {
    font : var(--title-medium-bold);
    em {
        color : var(--orange);
        font-style : normal;
    }
}

.home-about-button {
    margin : 0.75rem 0 0;
    display: inline-block !important;
    width: auto;
    justify-self : start;
}

.home-about-right {
    position      : relative;
    border-radius : var(--radius);
    border        : 1px solid var(--orange);
    padding       : var(--grid-gap);
}

.before-after {
    display               : grid;
    grid-template-columns : 1fr;
    border-bottom         : 1px solid var(--orange);
    padding-bottom        : var(--grid-gap);
    margin-bottom         : var(--grid-gap);

    /* Make it two side by side columns */
    @media (min-width: 1050px) {
         grid-template-columns : 1fr 1fr;
    }

    img {
        max-width : 100%;
    }
}

.after-image,
.before-image {
    padding-bottom : 1rem;
}

.after {
    padding         : 4rem var(--grid-gap) 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    position        : relative;
    border-top      : 1px solid var(--orange);

    @media (min-width: 1050px) {
        border-left : 1px solid var(--orange);
        border-top  : unset;
    }
}

.before {
    display         : flex;
    justify-content : center;
    align-items     : flex-start;
    position        : relative;
    padding         : 4rem var(--grid-gap) 0;
}

.before-after-title {
    position : absolute;
    top      : 0.5rem;
    left     : 0.5rem;
    font     : var(--title-medium-bold);
    display : flex;
    gap : 0.3rem;
    align-items : baseline;

    img {
        height : 1.1rem;
    }
}

.time-to-market {
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-areas   : "title" "text" "graph" "image";
    border-bottom         : 1px solid var(--orange);
    padding-bottom        : var(--grid-gap);
    margin-bottom         : var(--grid-gap);

    @media (min-width: 1050px) {
        grid-template-columns : 1fr 1fr;
        grid-template-rows    : auto 1fr auto auto;
        grid-template-areas   : "title image" ". image" "text image" "graph image";
    }

}

.ttm-title {
    grid-area: title;
    font : var(--title-medium-bold);
    margin-bottom : 3rem;
}

.ttm-text {
    grid-area: text;
}

.ttm-graph {
    grid-area: graph;
    max-width : 100%;
    margin-top : 1rem;
}

.ttm-image {
    grid-area: image;
    width : 100%;

}

.about-extra {
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-areas   : "title" "specs" "rhino";
    @media (min-width: 1050px) {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "title specs" "rhino specs";
    }
}

.ae-title {
    grid-area     : title;
    font          : var(--title-medium-bold);
    margin-bottom : 2rem;
    @media (max-width: 1050px) {
        margin-bottom : 3rem;
        padding-right : 1rem;
    }
}

.ae-rhino {
    grid-area : rhino;
    height : 5rem;
    align-self: end;
}

.ae-specs {
    grid-area  : specs;
    list-style : none;
    @media (max-width: 1049px) {
        margin-bottom : 2rem;
    }
}

.ae-spec {
    background    : var(--orange);
    border-radius : var(--radius);
    display       : flex;
    gap           : 0.5rem;
    padding       : 0.25rem;
    margin-bottom : 0.25rem;
    color : var(--white);
    align-items: center;

    img {
        display : block;
        height : 1rem;
    }
}

.home-shoe {
    position   : relative;
    background : linear-gradient(to bottom, var(--white) , var(--gray));
}

.home-shoe-marquee {
    position : absolute;
    top      : 2rem;
    left     : 0;
    right    : 0;
    display  : flex;
    overflow : hidden;
}

.home-shoe-image {
    width    : 100%;
    position : relative;
    z-index  : 5;
}

.home-shoe-marquee-text {
    display     : flex;
    white-space : nowrap;
    gap         : 1rem;
    align-items : center;
    font        : var(--title-small-regular);
    padding     : 0 0.5rem;
    animation   : marquee 15s linear infinite;
}

.home-shoe-marquee-icon {
    height : 1rem;
}

@keyframes marquee {
    from {
        transform : translateX(0)
    }

    to {
        transform : translateX(-100%)
    }
}

.home-plugins {
    background : var(--gray);
    padding    : var(--grid-gap);
}

.home-plugins-inner {
    border-radius: var(--radius);
    background: var(--white);
}

.home-plugins-intro {
    text-align : center;
    padding    : 2.5rem 1rem;
}

.home-plugins-title {
    font            : var(--title-medium-bold);
    display         : flex;
    gap             : 0.5rem;
    align-items     : baseline;
    justify-content : center;
    margin-bottom   : 1rem;
}

.home-plugins-img {
    height : 2rem;
}

.home-plugins-subtitle {
    font : var(--title-medium-bold);
    text-wrap: balance;
}

.home-plugins-container {
    position : relative;

    @media (min-width: 1150px) { 
        .plugin-preview {
            position : sticky;
            top      : 4.5rem;
        }
    }

    @media (max-width: 1149px) {
        .plugin-preview-content,
        .plugin-preview-media {
            position : sticky;
            top : 4.5rem;
        }
    }

}

.layouts {
    margin  : var(--grid-gap);
    display : grid;
    gap     : var(--grid-gap);
}

.layout {
    display       : grid;
    border-radius : var(--radius);
    gap           : var(--grid-gap);
    position      : relative;
    align-items   : start;
    align-content : start;

    .module {
        margin : 0;
    }

}

.gray-layout {
    background : var(--gray);
}

.white-layout {
    background : var(--white);
}

.gradient-layout {
    background : linear-gradient(to bottom, var(--gray), var(--white));
}

.padded-layout {
    padding : var(--grid-gap);
}

.left-sticky .column:first-child {
    position : sticky;
    top      : 4.5rem;
}

.right-sticky .column:last-child {
    position : sticky;
    top      : 4.5rem;
}

.column {
    border-radius : var(--radius);
    overflow: hidden;
    @media (max-width: 950px) {
         grid-column: 1 / -1;
    }

    .module-inner {
        border-radius: 0;
    }

}

.demo {
    padding : 0 var(--grid-gap);
}

.demo-inner {
    border-radius  : var(--radius);
    background     : var(--orange);
    min-height     : calc(100svh - 5rem);
    padding : 0 var(--grid-gap) 3rem;
}

.demo-intro {
    padding    : 3rem 1rem;
    text-align : center;
}

.demo-title {
    font          : var(--title-large-bold);
    color         : var(--white);
    text-wrap     : balance;
    margin-bottom : 1rem;
}

.demo-intro-logo {
    display   : inline-block;
    height    : 1.5rem;
    width     : auto;
    max-width : 100%;
}

.demo-form {
    margin                : 1rem auto;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
    max-width             : 30rem;
    background            : var(--white);
    padding               : 2rem 1rem;
    border-radius         : var(--radius);

    @media (min-width: 700px) {
         padding : 2rem;
    }

    .input:last-child {
        justify-self: center;
    }

}

.demo-subtitles {
    grid-column : span 2;
    text-align: center;
}

.demo-subtitle {
    color : var(--orange);
    font : var(--title-medium-bold);
}

.demo-tagline {

}

.demo-plugins {
    grid-column           : span 2;
    display               : grid;
    grid-template-columns : repeat(3,1fr);
    gap                   : 0.5rem;
    justify-content       : center;
    padding               : 1rem 0;

    @media (min-width: 500px) {
        grid-template-columns : repeat(3,6rem);
        gap : 1rem;
    }
}

.demo-plugin-image {
    width : 100%;
}

.demo-plugin {
    padding       : 0.25rem 0.75rem;
    border        : 1px solid var(--gray);
    border-radius : var(--radius);
    cursor        : pointer;

    &:hover {
        border-color : lightgray;
        box-shadow : 0px 2px 2px 0px #0000000D
    }

    input[type="checkbox"]:checked + & {
        border-color : var(--orange);
    }
}

input[type="checkbox"] {
    position : absolute;
    left     : 999999px;
}

.support-header {
    padding : 0 var(--grid-gap);
}

.support-header-inner {
    border-radius : var(--radius);
    background    : var(--gray);
    text-align    : center;
    padding       : 3rem 1rem;

    h1 {
        font : var(--title-large-bold);
    }

    h2 {
        font : var(--title-medium-bold);
    }

    form {
        max-width : 25rem;
        margin : 1.5rem auto 0;
    }

    input {
        text-transform: uppercase;
    }
}

.support-navigation {
    padding               : var(--grid-gap) var(--grid-gap) 0;
    display               : grid;
    grid-template-columns : repeat(2,1fr);
    gap                   : var(--grid-gap);
}

.support-navigation-item {
    text-align    : center;
    display       : block;
    background    : var(--gray);
    border-radius : var(--radius);
    font          : var(--title-medium-bold);
    padding       : 1.5rem;
    color         : var(--text-gray);
    border        : 1px solid var(--gray);

    &:hover {
        color : var(--white);
        background: var(--orange);
    }
}

.support-navigation-item-current {
    color         : var(--orange);
    background    : var(--white);
    border        : 1px solid var(--orange);
    border-radius : var(--radius) var(--radius) 0 0;
    border-bottom : 1px solid var(--white);
    position      : relative;
}

.support-navigation-item-background {
    position   : absolute;
    left       : -1px;
    right      : 0px;
    bottom     : 0px;
    height     : 1rem;
    transform  : translateY(100%);
    background : var(--white);
    z-index    : 5000;
}

.support-navigation-item-left-curve {
    position   : absolute;
    width      : var(--grid-gap);
    height     : var(--grid-gap);
    left       : 0;
    bottom     : 0;
    z-index    : 5100;
}

.support-navigation-item-right-curve {
    position   : absolute;
    width      : var(--grid-gap);
    height     : var(--grid-gap);
    bottom     : 0;
    right      : 0;
    z-index    : 5100;
}

.support-navigation-item-current:first-child {
    
    .support-navigation-item-left-curve {
        height      : 1rem;
        left        : -1px;
        bottom      : -1rem;
        border-left : 1px solid var(--orange);
    }

    .support-navigation-item-right-curve {
        height        : 1rem;
        width         : 1rem;
        right         : -1rem;
        bottom        : calc(-0.5rem - 2px);
        border-left   : 1px solid var(--orange);
        border-bottom : 1px solid var(--orange);
        border-radius : 0 0 0 var(--radius);
    }

    .support-navigation-item-background {
        right : calc(-0.5rem - 1px);
    }
}

.support-navigation-item-current:last-child {
    .support-navigation-item-background {
        left : calc(-0.5rem - 1px);
    }

    .support-navigation-item-right-curve {
        height       : 1rem;
        right        : -1px;
        bottom       : -1rem;
        border-right : 1px solid var(--orange);
    }

    .support-navigation-item-left-curve {
        height        : 1rem;
        width         : 1rem;
        left          : -1rem;
        bottom        : calc(-0.5rem - 2px);
        border-right   : 1px solid var(--orange);
        border-bottom : 1px solid var(--orange);
        border-radius : 0 0 var(--radius) 0;
    }

}

.support-content {
    padding : var(--grid-gap);
}

.support-content-inner {
    border                : 1px solid var(--orange);
    min-height            : 50vh;
    border-radius         : var(--radius);
    padding               : var(--grid-gap);
    display               : grid;
    grid-template-columns : 1fr;
    position              : relative;
    align-items           : start;
    gap                   : 1rem;

    @media (min-width: 750px) {
         grid-template-columns : 15rem 1fr;
    }
}/* Sidebar */

.support-content-sidebar {

    @media (min-width: 750px) {
        position : sticky;
        top      : 5rem;
        padding-bottom : 10rem;
        &::after {
            content    : "";
            position   : absolute;
            top        : 0;
            right      : -0.5rem;
            bottom     : 0;
            width      : 1px;
            background : var(--orange);
        }
    }

}

.sidebar-qa {
    border-bottom : 1px solid var(--orange);
    padding-bottom : var(--grid-gap);
    margin-bottom : var(--grid-gap);
}

.sidebar-qa-title {
    font   : var(--question);
    cursor : pointer;
    &::after {
        content   : "✕";
        float     : right;
        transform : scale(.5) rotate(45deg);
        color     : var(--orange);
    }
    &:hover {
        color : var(--orange);
    }

    [open] &::after {
        transform : scale(0.5)
    }
}

.sidebar-qa-links {
    display : grid;
    justify-items: start;
}

.sidebar-qa-link {
    font : var(--small-text);
    text-transform: uppercase;
}/* Content Section */

.support-section {
    margin-bottom : 3rem;
}

.support-section-title {
    font          : var(--title-small-bold);
    margin-bottom : 1rem;
}

.support-section-text {
    margin-bottom : 1rem;
}

.support-qa {
    margin-bottom : 0.5rem;
}

.support-q {
    font : var(--question);
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

.support-footer {
    padding : 0 var(--grid-gap);
}

.support-footer-inner {
    border-radius : var(--radius);
    background    : var(--gray);
    text-align    : center;
    padding       : 3rem 1rem;

    h1 {
        font : var(--title-large-bold);
    }

    h2 {
        font : var(--title-medium-bold);
    }

    a {
        display: inline-block;
        margin-top : 0.5rem;
    }
}

.whitepapers-header {
    padding : 0 var(--grid-gap);
}

.whitepapers-header-inner {
    border-radius : var(--radius);
    background    : var(--gray);
    text-align    : center;
    padding       : 3rem 1rem;

    h1 {
        font : var(--title-large-bold);
        color : var(--orange);
    }

    h2 {
        font : var(--title-medium-bold);
        text-wrap: balance;
        display : inline-block;
        max-width: 40ch;
    }

    form {
        max-width : 25rem;
        margin : 1.5rem auto 0;
    }

    input {
        text-transform: uppercase;
    }
}

.whitepapers-content {
    padding : var(--grid-gap);
}

.whitepapers-grid {
    display : grid;
    grid-template-columns: 1fr;
    gap : var(--grid-gap);

    @media (min-width: 500px) {
         grid-template-columns: repeat(2,1fr);
    }

    @media (min-width: 850px) {
         grid-template-columns: repeat(3,1fr);
    }

    @media (min-width: 1300px) {
         grid-template-columns: repeat(4,1fr);
    }

}

.whitepaper {
    border        : 1px solid var(--black);
    padding       : var(--grid-gap);
    border-radius : var(--radius);
    display       : grid;
    gap           : var(--grid-gap);
    align-items   : start;
    align-content : start;

    &:hover {
        background : var(--orange);
        border-color: var(--orange);
        color : white;
    }
}

.whitepaper-image {
    display : block;
    width : 100%;
    border-radius: var(--radius);
}

.whitepaper-title {
    font : var(--question);
}

.resources-header {
    padding : 0 var(--grid-gap);
}

.resources-header-inner {
    border-radius : var(--radius);
    background    : var(--gray);
    text-align    : center;
    padding       : 3rem 1rem;

    svg {
        width : 3rem;
    }

    h1 {
        font : var(--title-large-bold);
        color : var(--orange);
    }

    h2 {
        font : var(--title-medium-bold);
        text-wrap: balance;
        display : inline-block;
        max-width: 40ch;
    }
}

.resources-navigation {
    padding               : var(--grid-gap) var(--grid-gap) 0;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--grid-gap);
}

.resources-navigation-link {
    border-radius : var(--radius);
    background    : var(--gray);
    text-align    : center;
    padding       : 1rem 0.25rem;
    font          : var(--menu-item);
    color         : var(--text-gray);

    @media (min-width: 600px) {
        font : var(--title-small-bold);
    }

    &:hover {
        color : var(--black);
    }
}

.resources-navigation-link-active {
    color          : var(--white);
    background     : var(--orange);
    pointer-events : none;
}

.resources-content {
    padding : var(--grid-gap);
}

.resources-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill,minmax(12rem,1fr));
    gap                   : var(--grid-gap);
}

.resource {
    border        : 1px solid var(--black);
    padding       : var(--grid-gap);
    border-radius : var(--radius);
    display       : grid;
    gap           : var(--grid-gap);
    align-items   : start;
    align-content : start;
    word-break    : break-all;

    &:hover {
        
        background: var(--black);
        color : var(--white);
    }
}

.resource-image {
    display       : block;
    width         : 100%;
    border-radius : var(--radius);
    aspect-ratio  : 16/9;
    object-fit    : cover;
}

.resource-title {
    font : var(--question);
}

.start {
    padding : 0 var(--grid-gap);
}

.start-inner {
    border-radius : var(--radius);
    background    : var(--gray);
    min-height    : calc(100svh - 5rem);
    padding       : 0 var(--grid-gap) 3rem;
}

.start-intro {
    padding    : 3rem 1rem;
    text-align : center;
}

.start-title {
    font          : var(--title-large-bold);
    text-wrap     : balance;
    margin-bottom : 0.25rem;
}

.start-tagline {
    font      : var(--title-medium-bold);
    text-wrap : balance;
}

.start-plugins-title {
    font      : var(--small-text);
    text-transform: uppercase;
    text-wrap : balance;
    text-align: center;
    padding-bottom : 3rem;
}

.start-plugins-buttons {
    display               : grid;
    grid-template-columns : repeat(var(--columns),1fr);
    gap                   : 0.5rem;
    justify-content       : center;

    @media (min-width: 500px) {
        grid-template-columns : repeat(var(--columns),6rem);
        gap : 1rem;
    }
}

.start-plugin-image {
    width : 100%;
}

.start-plugin {
    padding       : 0.25rem 0.75rem;
    border        : 1px solid var(--gray);
    border-radius : var(--radius);
    cursor        : pointer;
    background    : var(--white);

    &:hover {
        border-color : lightgray;
        box-shadow : 0px 2px 2px 0px #0000000D
    }

    input[type="checkbox"]:checked + & {
        border-color : var(--orange);
    }
}

input[type="checkbox"] {
    position : absolute;
    left     : 999999px;
}/* Reusable Components */

.editor {

    h1 {
        font : var(--title-large-bold);
        &:not(:last-child) {
            margin-bottom : 1rem;
        }
    }

    h2 {
        font : var(--title-medium-bold);
        &:not(:last-child) {
            margin-bottom : 0.75rem;
        }
    }

    h3 {
        font : var(--title-small-bold);
        &:not(:last-child) {
            margin-bottom : 0.5rem;
        }
    }

    p:not(:last-child) {
        margin-bottom : 1rem;
    }

    ol,ul {
        list-style-position: inside;
        margin : 1rem 0;
        li::marker {
            color : var(--orange);
        }
    }

    a {
        text-decoration: underline;
        text-decoration-color : var(--orange);
    }

    code {
        font-family : monospace;
        background : var(--gray);
        padding : 0.1em;
        font-size : 0.8em;
    }

}

.inline-logo {
    margin-bottom : 1rem;
    object-fit: contain;
    object-position: left center;
}/* Nothing to see here */

img {
    display : block;
}

.button-white,
.button-orange {
    display        : block;
    font           : var(--button);
    text-transform : uppercase;
    padding        : 0.4rem 0.75rem 0.3rem;
    border-radius  : 5px;
    text-align     : center;
    letter-spacing : 5%;
}

.button-white {
    color      : var(--orange);
    background : var(--white);
    border     : 1px solid var(--white);
    &:hover {
        color      : var(--white);
        background : var(--orange);
    }
}

.button-orange {
    color      : var(--white);
    background : var(--orange);
    border     : 1px solid var(--orange);
    &:hover {
        color      : var(--orange);
        background : var(--white);
    }
}

div.input,
.entry__field {
    grid-column : span 1;
    position    : relative;


    input[type="text"],
    input[type="email"],
    input[type="search"],
    textarea {
        border-radius : var(--radius);
        border        : 1px solid var(--gray);
        width         : 100%;
        padding       : 0.55rem 0.75rem 0.45rem;
        font          : var(--small-text);
        box-shadow    : 0px 2px 2px 0px #0000000D;
        background    : var(--white);
        resize : none;
        
        &:focus {
            border : 1px solid var(--orange);
        }
    }

    label {
        font       : var(--small-text);
        background : var(--white);
        position   : absolute;
        top        : 0;
        left       : var(--grid-gap);
        transform  : translateY(-50%);
        display    : inline-block;
        padding    : 0 0.25rem;

        sup {
            color       : var(--orange);
            line-height : 1;
        }

    }

}

div.input-double,
.input-double {
    grid-column : span 2;
}/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.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;
  -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;
}/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }

.flickity-prev-next-button.next { right: 10px; }/* 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 .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  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: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}