.glide {
    cursor: -webkit-grab
}

.glide__slides {
    margin: 0
}

.glide__arrow {
    cursor: pointer;
    padding: 0;
    background-color: transparent;
    border: 0;
    outline: 0
}

.glide--dragging {
    cursor: -webkit-grabbing
}

.panel {
    padding: 3.61111em 2em;
    background: -webkit-gradient(linear, left top, right top, from(#3e0c1c), to(#2d0f5e));
    background: linear-gradient(90deg, #3e0c1c 0, #2d0f5e)
}

.frame {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 13.33333rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform
}

@media (min-width: 42.5em) {
    .frame {
        height: 22.22222rem
    }
}

.frame > * {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid hsla(0, 0%, 100%, .5);
    border-radius: 1px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.frame > :first-child {
    border-radius: 2px;
    -webkit-box-shadow: 0 .5rem 4rem 0 rgba(0, 0, 0, .5);
    box-shadow: 0 .5rem 4rem 0 rgba(0, 0, 0, .5)
}

.frame > :nth-child(2) {
    top: 0;
    right: 0;
    width: 3rem;
    -webkit-transform: translate3d(-1px, 0, -3rem) rotateY(90deg);
    transform: translate3d(-1px, 0, -3rem) rotateY(90deg);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    border-width: 3px;
    border-right-width: 9px
}

.frame > :nth-child(3) {
    top: 0;
    left: 0;
    width: 3rem;
    -webkit-transform: translate3d(1px, 0, -3rem) rotateY(-90deg);
    transform: translate3d(1px, 0, -3rem) rotateY(-90deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    border-width: 3px;
    border-left-width: 9px
}

.frames {
    padding-top: 2rem;
    padding-bottom: 3rem
}

@media (min-width: 42.5em) {
    .frames {
        padding-top: 4rem;
        padding-bottom: 5rem
    }
}

.frames__list {
    overflow: visible
}

.frames__item {
    -webkit-transform: perspective(2000px);
    transform: perspective(2000px)
}

.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5em !important;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTEuODI2LjE2NGMtLjE2NC0uMTY0LS40My0uMTY0LS41OTUgMEw2IDUuNDA0Ljc2LjE2NEMuNTk0IDAgLjMyNyAwIC4xNjMuMTY0IDAgLjMzIDAgLjU5NC4xNjMuNzZsNS41MyA1LjUyN2MuMDguMDgyLjE4NC4xMjMuMjk3LjEyMy4xMDIgMCAuMjE1LS4wNC4yOTctLjEyM0wxMS44MTUuNzZjLjE3NS0uMTY1LjE3NS0uNDMyLjAxLS41OTZ6Ii8+PC9zdmc+);
    background-position: center right 1em;
    background-repeat: no-repeat
}

.slider__frame {
    border-radius: .16667em;
    text-align: center;
    height: 150px;
    line-height: 150px;
    -webkit-box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .5);
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .5);
    color: #fff;
    background: 0 0;
    font-size: 1em;
    font-weight: 900
}

.slider__frame[class*=active] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: linear-gradient(-45deg, #ed145b, #7b31f4)
}

.slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    background-color: #818999;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 .5rem 4rem 0 rgba(0, 0, 0, .5);
    box-shadow: 0 .5rem 4rem 0 rgba(0, 0, 0, .5)
}

.slider__arrow:hover {
    background-color: #ed145b
}

.slider__arrow--next {
    right: 1.5rem
}

.slider__arrow--prev {
    left: 1.5rem
}

.slider__bullets {
    position: absolute;
    z-index: 2;
    bottom: 1.5rem;
    left: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    list-style: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.slider__bullet {
    background-color: hsla(0, 0%, 100%, .5);
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    -webkit-box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    margin: 0 .25em
}

.slider__bullet:focus {
    outline: none
}

.slider__bullet:focus, .slider__bullet:hover {
    border: 2px solid #fff;
    background-color: hsla(0, 0%, 100%, .5)
}

.slider__bullet[class*=active] {
    background-color: #fff
}

.slider--big .slider__arrows {
    position: absolute;
    z-index: 2;
    bottom: 36px;
    width: 100%
}

@media (min-width: 42.5em) {
    .slider--big .slider__arrows {
        position: static
    }
}

.slider--big .slider__arrow {
    width: 46px;
    height: 46px;
    margin-top: -30px
}

@media (max-width: 42.4375em) {
    .slider--big .slider__arrow {
        position: static
    }
}

.slider--big .slider__arrow--next {
    right: 3rem
}

.slider--big .slider__arrow--prev {
    left: 3rem
}

.token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
    color: #999
}

.token.punctuation {
    color: #c1cde5
}

.token.attr-name, .token.boolean, .token.deleted, .token.namespace, .token.number, .token.tag {
    color: #d75d85
}

.token.function-name {
    color: #6196cc
}

.token.class-name, .token.constant, .token.function, .token.property, .token.symbol {
    color: #f8c555
}

.token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector {
    color: #8867be
}

.token.attr-value, .token.char, .token.regex, .token.string, .token.variable {
    color: #00d3ca
}

.token.entity, .token.operator, .token.url {
    color: #67cdcc
}

.token.bold, .token.important {
    font-weight: 700
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

.token.inserted {
    color: green
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #32333f;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: a
}

.line-numbers-rows > span:before {
    content: counter(a);
    color: #32333f;
    display: block;
    padding-right: .8em;
    text-align: right
}

:not(.no-js) [data-ref="fadereveal[el]"], :not(.no-js) [data-ref="slidereveal[el]"] {
    visibility: hidden
}

.ad #carbonads {
    display: block;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    font-size: 12px;
    border: 1px solid #32333f;
    max-width: 160px
}

.ad #carbonads a {
    text-decoration: none
}

.ad #carbonads a:hover {
    color: #fff
}

.ad .carbon-img {
    display: block;
    margin-bottom: 1em
}

.ad .carbon-img img {
    display: block
}

.ad .carbon-text {
    display: block;
    text-align: left;
    color: #969fb3;
    margin-bottom: 1em
}

.ad .carbon-poweredby {
    display: block;
    font-size: 8px;
    color: #818999;
    font-weight: 500;
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: 1px
}

.ad--fixed {
    position: fixed;
    right: 1rem;
    bottom: 0;
    z-index: 100;
    background-color: #05070b
}

@media (min-width: 77.5em) {
    .ad--fixed #carbonads {
        border-bottom: 0
    }
}

@media (max-width: 77.4375em) {
    .ad--fixed {
        position: static;
        padding: 1.5rem
    }

    .ad--fixed #carbonads {
        position: relative;
        max-width: 300px;
        display: block;
        margin: 0 auto
    }

    .ad--fixed .carbon-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .ad--fixed .carbon-img {
        margin-bottom: 0;
        margin-right: 15px
    }

    .ad--fixed .carbon-poweredby {
        position: absolute;
        bottom: 15px;
        left: 160px
    }
}