@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

.container {
    order: unset !important
}

.builderbody .gridRow input {
    outline: none
}

.gridRow input::placeholder {
    color: #e3e2e1
}

.label__light {
    font-weight: lighter
}

.label__normal {
    font-weight: normal
}

.label__bold {
    font-weight: bold
}

.label__white {
    color: var(--colorWhite)
}

.el-select.el-select--mini {
    width: 100%
}

.el-form-item .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #409EFF;
    border-color: #409EFF;
    box-shadow: -1px 0 0 0 #c7c7c7
}

.focusHover {
    animation-name: shadowAnim;
    animation-duration: 1.2s;
    animation-iteration-count: infinite
}

.el-slider__button-wrapper {
    z-index: 998 !important
}

.width-100 {
    width: 100%
}

.positionRelative:not(.container) {
    position: relative
}

.positionRelative:not(.container) .positionAbsolute {
    position: absolute
}

.text_green {
    color: var(--colorDarkGreen)
}

.pointer {
    cursor: pointer
}

.resetlink {
    text-decoration: none;
    color: #2B2B2B
}

.hidden {
    display: none !important
}

.visibilityHidden {
    visibility: hidden !important
}

.hiddenAnim {
    opacity: 0 !important;
    height: 0
}

.fullWidth {
    width: 100%
}

.megekkoPricer {
    min-width: 115px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    background-image: linear-gradient(135deg, var(--colorDarkGreen) 0%, var(--colorDarkGreen) 89%, var(--colorGreen) 89%, var(--colorGreen) 100%);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--colorWhite);
    -webkit-transition: background-image 2s ease-in-out;
    transition: background-image 2s ease-in-out
}

.megekkoButton {
    text-align: center;
    margin-right: 10px;
    height: 50px;
    cursor: pointer;
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--colorWhite);
    line-height: 50px;
    vertical-align: top;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px
}

.megekkoButton__blue {
    background-color: var(--colorBlue)
}

.megekkoButton__lightGreen {
    background-color: var(--colorGreen)
}

.megekkoButton__darkGreen {
    background-color: var(--colorDarkGreen)
}

.shopButton {
    display: inline-block;
    width: 38px;
    height: 38px;
    margin: 0 0 0 5px;
    background-color: var(--colorBlue);
    background-image: url(https://www.megekko.nl/templates/basic/images/icoon_winkelwagen.png);
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: top
}

.btn__wrapper .btn__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none
}

.function-disabled {
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
    transition: all 2s
}

.no-select {
    user-select: none;
    cursor: default
}

.sliding-bg {
    display: inline-block;
    background-repeat: repeat !important;
    background-position: 0% 0%;
    background-size: 25% auto !important;
    animation-name: slide;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.ql-editor a {
    color: inherit;
    text-decoration: none
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pinch-zoom pan-y;
    -webkit-overflow-scrolling: touch
}

.horizontal-scroll::-webkit-scrollbar {
    display: none
}

.horizontal-scroll_snap {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab
}

.horizontal-scroll_snap.dragging {
    cursor: grabbing;
    scroll-behavior: auto
}

.horizontal-scroll_snap>.container_default {
    flex: 0 0 auto;
    scroll-snap-align: start
}

.horizontal-scroll_snap.is-dragging-links-blocked a {
    pointer-events: none
}

.horizontal-scroll_snap.no-snap {
    scroll-snap-type: none !important
}

.glide .glide__track .glide__slides {
    margin-left: 0
}

* {
    order: unset !important
}

p.paragraph {
    box-sizing: border-box
}

.category_block .category .category_image {
    pointer-events: none
}

.hvr-grow-category>object {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-grow-category:active>object,
.hvr-grow-category:focus>object,
.hvr-grow-category:hover>object {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.prd_bs_container {
    width: 100%;
    line-height: normal
}

.prd_bs_container_grid {
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    justify-content: center
}

.main_container .cookieconsent-optin-marketing {
    display: none
}

.offer {
    content: unset !important
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-grow:active,
.hvr-grow:focus,
.hvr-grow:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-shrink:active,
.hvr-shrink:focus,
.hvr-shrink:hover {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

@-webkit-keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

.hvr-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-pulse:active,
.hvr-pulse:focus,
.hvr-pulse:hover {
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.hvr-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-pulse-grow:active,
.hvr-pulse-grow:focus,
.hvr-pulse-grow:hover {
    -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

@keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

.hvr-pulse-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-pulse-shrink:active,
.hvr-pulse-shrink:focus,
.hvr-pulse-shrink:hover {
    -webkit-animation-name: hvr-pulse-shrink;
    animation-name: hvr-pulse-shrink;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.hvr-push {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-push:active,
.hvr-push:focus,
.hvr-push:hover {
    -webkit-animation-name: hvr-push;
    animation-name: hvr-push;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.hvr-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-pop:active,
.hvr-pop:focus,
.hvr-pop:hover {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.hvr-bounce-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-in:active,
.hvr-bounce-in:focus,
.hvr-bounce-in:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
}

.hvr-bounce-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-out:active,
.hvr-bounce-out:focus,
.hvr-bounce-out:hover {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
}

.hvr-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-rotate:active,
.hvr-rotate:focus,
.hvr-rotate:hover {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg)
}

.hvr-grow-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-grow-rotate:active,
.hvr-grow-rotate:focus,
.hvr-grow-rotate:hover {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg)
}

.hvr-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-float:active,
.hvr-float:focus,
.hvr-float:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

.hvr-sink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sink:active,
.hvr-sink:focus,
.hvr-sink:hover {
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }
}

.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-bob:active,
.hvr-bob:focus,
.hvr-bob:hover {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate
}

@-webkit-keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@-webkit-keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

@keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
}

.hvr-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-hang:active,
.hvr-hang:focus,
.hvr-hang:hover {
    -webkit-animation-name: hvr-hang-sink, hvr-hang;
    animation-name: hvr-hang-sink, hvr-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate
}

.hvr-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-skew:active,
.hvr-skew:focus,
.hvr-skew:hover {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg)
}

.hvr-skew-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.hvr-skew-forward:active,
.hvr-skew-forward:focus,
.hvr-skew-forward:hover {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg)
}

.hvr-skew-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.hvr-skew-backward:active,
.hvr-skew-backward:focus,
.hvr-skew-backward:hover {
    -webkit-transform: skew(10deg);
    transform: skew(10deg)
}

@-webkit-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.hvr-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-wobble-vertical:active,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:hover {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-wobble-horizontal:active,
.hvr-wobble-horizontal:focus,
.hvr-wobble-horizontal:hover {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px)
    }

    33.3% {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px)
    }

    49.95% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px)
    }

    66.6% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    83.25% {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px)
    }

    33.3% {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px)
    }

    49.95% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px)
    }

    66.6% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    83.25% {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.hvr-wobble-to-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-wobble-to-bottom-right:active,
.hvr-wobble-to-bottom-right:focus,
.hvr-wobble-to-bottom-right:hover {
    -webkit-animation-name: hvr-wobble-to-bottom-right;
    animation-name: hvr-wobble-to-bottom-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px)
    }

    33.3% {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px)
    }

    49.95% {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px)
    }

    66.6% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    83.25% {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px)
    }

    33.3% {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px)
    }

    49.95% {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px)
    }

    66.6% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    83.25% {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.hvr-wobble-to-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-wobble-to-top-right:active,
.hvr-wobble-to-top-right:focus,
.hvr-wobble-to-top-right:hover {
    -webkit-animation-name: hvr-wobble-to-top-right;
    animation-name: hvr-wobble-to-top-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

.hvr-wobble-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.hvr-wobble-top:active,
.hvr-wobble-top:focus,
.hvr-wobble-top:hover {
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

.hvr-wobble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.hvr-wobble-bottom:active,
.hvr-wobble-bottom:focus,
.hvr-wobble-bottom:hover {
    -webkit-animation-name: hvr-wobble-bottom;
    animation-name: hvr-wobble-bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }

    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }

    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }

    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }

    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }

    100% {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

.hvr-wobble-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-wobble-skew:active,
.hvr-wobble-skew:focus,
.hvr-wobble-skew:hover {
    -webkit-animation-name: hvr-wobble-skew;
    animation-name: hvr-wobble-skew;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}

@keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}

.hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-buzz:active,
.hvr-buzz:focus,
.hvr-buzz:hover {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

@keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

.hvr-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-buzz-out:active,
.hvr-buzz-out:focus,
.hvr-buzz-out:hover {
    -webkit-animation-name: hvr-buzz-out;
    animation-name: hvr-buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.hvr-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-forward:active,
.hvr-forward:focus,
.hvr-forward:hover {
    -webkit-transform: translateX(8px);
    transform: translateX(8px)
}

.hvr-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-backward:active,
.hvr-backward:focus,
.hvr-backward:hover {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px)
}

.hvr-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color
}

.hvr-fade:active,
.hvr-fade:focus,
.hvr-fade:hover {
    background-color: #2098D1;
    color: #fff
}

@-webkit-keyframes hvr-back-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75)
    }
}

@keyframes hvr-back-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75)
    }
}

.hvr-back-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color
}

.hvr-back-pulse:active,
.hvr-back-pulse:focus,
.hvr-back-pulse:hover {
    -webkit-animation-name: hvr-back-pulse;
    animation-name: hvr-back-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-color: #2098D1;
    background-color: #2098d1;
    color: #fff
}

.hvr-sweep-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sweep-to-right:active,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:hover {
    color: #fff
}

.hvr-sweep-to-right:active:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.hvr-sweep-to-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-sweep-to-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sweep-to-left:active,
.hvr-sweep-to-left:focus,
.hvr-sweep-to-left:hover {
    color: #fff
}

.hvr-sweep-to-left:active:before,
.hvr-sweep-to-left:focus:before,
.hvr-sweep-to-left:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.hvr-sweep-to-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-sweep-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sweep-to-bottom:active,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:hover {
    color: #fff
}

.hvr-sweep-to-bottom:active:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.hvr-sweep-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-sweep-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sweep-to-top:active,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:hover {
    color: #fff
}

.hvr-sweep-to-top:active:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.hvr-bounce-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-bounce-to-right:active,
.hvr-bounce-to-right:focus,
.hvr-bounce-to-right:hover {
    color: #fff
}

.hvr-bounce-to-right:active:before,
.hvr-bounce-to-right:focus:before,
.hvr-bounce-to-right:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}

.hvr-bounce-to-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-to-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-bounce-to-left:active,
.hvr-bounce-to-left:focus,
.hvr-bounce-to-left:hover {
    color: #fff
}

.hvr-bounce-to-left:active:before,
.hvr-bounce-to-left:focus:before,
.hvr-bounce-to-left:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}

.hvr-bounce-to-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-bounce-to-bottom:active,
.hvr-bounce-to-bottom:focus,
.hvr-bounce-to-bottom:hover {
    color: #fff
}

.hvr-bounce-to-bottom:active:before,
.hvr-bounce-to-bottom:focus:before,
.hvr-bounce-to-bottom:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}

.hvr-bounce-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

.hvr-bounce-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-bounce-to-top:active,
.hvr-bounce-to-top:focus,
.hvr-bounce-to-top:hover {
    color: #fff
}

.hvr-bounce-to-top:active:before,
.hvr-bounce-to-top:focus:before,
.hvr-bounce-to-top:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}

.hvr-radial-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-radial-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-radial-out:active,
.hvr-radial-out:focus,
.hvr-radial-out:hover {
    color: #fff
}

.hvr-radial-out:active:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:hover:before {
    -webkit-transform: scale(2);
    transform: scale(2)
}

.hvr-radial-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-radial-in:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    border-radius: 100%;
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-radial-in:active,
.hvr-radial-in:focus,
.hvr-radial-in:hover {
    color: #fff
}

.hvr-radial-in:active:before,
.hvr-radial-in:focus:before,
.hvr-radial-in:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.hvr-rectangle-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-rectangle-in:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-rectangle-in:active,
.hvr-rectangle-in:focus,
.hvr-rectangle-in:hover {
    color: #fff
}

.hvr-rectangle-in:active:before,
.hvr-rectangle-in:focus:before,
.hvr-rectangle-in:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.hvr-rectangle-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-rectangle-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-rectangle-out:active,
.hvr-rectangle-out:focus,
.hvr-rectangle-out:hover {
    color: #fff
}

.hvr-rectangle-out:active:before,
.hvr-rectangle-out:focus:before,
.hvr-rectangle-out:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.hvr-shutter-in-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-shutter-in-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
    color: #fff
}

.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
}

.hvr-shutter-out-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-shutter-out-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-shutter-out-horizontal:active,
.hvr-shutter-out-horizontal:focus,
.hvr-shutter-out-horizontal:hover {
    color: #fff
}

.hvr-shutter-out-horizontal:active:before,
.hvr-shutter-out-horizontal:focus:before,
.hvr-shutter-out-horizontal:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.hvr-shutter-in-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-shutter-in-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-shutter-in-vertical:active,
.hvr-shutter-in-vertical:focus,
.hvr-shutter-in-vertical:hover {
    color: #fff
}

.hvr-shutter-in-vertical:active:before,
.hvr-shutter-in-vertical:focus:before,
.hvr-shutter-in-vertical:hover:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

.hvr-shutter-out-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-shutter-out-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-shutter-out-vertical:active,
.hvr-shutter-out-vertical:focus,
.hvr-shutter-out-vertical:hover {
    color: #fff
}

.hvr-shutter-out-vertical:active:before,
.hvr-shutter-out-vertical:focus:before,
.hvr-shutter-out-vertical:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.hvr-border-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-border-fade:active,
.hvr-border-fade:focus,
.hvr-border-fade:hover {
    box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-hollow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: background;
    transition-property: background;
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-hollow:active,
.hvr-hollow:focus,
.hvr-hollow:hover {
    background: 0 0
}

.hvr-trim {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-trim:before {
    content: '';
    position: absolute;
    border: #fff solid 4px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.hvr-trim:active:before,
.hvr-trim:focus:before,
.hvr-trim:hover:before {
    opacity: 1
}

@-webkit-keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0
    }
}

@keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0
    }
}

.hvr-ripple-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-ripple-out:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 6px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.hvr-ripple-out:active:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:hover:before {
    -webkit-animation-name: hvr-ripple-out;
    animation-name: hvr-ripple-out
}

@-webkit-keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1
    }
}

@keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1
    }
}

.hvr-ripple-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-ripple-in:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.hvr-ripple-in:active:before,
.hvr-ripple-in:focus:before,
.hvr-ripple-in:hover:before {
    -webkit-animation-name: hvr-ripple-in;
    animation-name: hvr-ripple-in
}

.hvr-outline-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-outline-out:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left
}

.hvr-outline-out:active:before,
.hvr-outline-out:focus:before,
.hvr-outline-out:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px
}

.hvr-outline-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-outline-in:before {
    pointer-events: none;
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left
}

.hvr-outline-in:active:before,
.hvr-outline-in:focus:before,
.hvr-outline-in:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1
}

.hvr-round-corners {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: border-radius;
    transition-property: border-radius
}

.hvr-round-corners:active,
.hvr-round-corners:focus,
.hvr-round-corners:hover {
    border-radius: 1em
}

.hvr-underline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-underline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-underline-from-left:active:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:hover:before {
    right: 0
}

.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-underline-from-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-underline-from-center:active:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:hover:before {
    left: 0;
    right: 0
}

.hvr-underline-from-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-underline-from-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 100%;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-underline-from-right:active:before,
.hvr-underline-from-right:focus:before,
.hvr-underline-from-right:hover:before {
    left: 0
}

.hvr-overline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-overline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-overline-from-left:active:before,
.hvr-overline-from-left:focus:before,
.hvr-overline-from-left:hover:before {
    right: 0
}

.hvr-overline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-overline-from-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-overline-from-center:active:before,
.hvr-overline-from-center:focus:before,
.hvr-overline-from-center:hover:before {
    left: 0;
    right: 0
}

.hvr-overline-from-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-overline-from-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 100%;
    right: 0;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-overline-from-right:active:before,
.hvr-overline-from-right:focus:before,
.hvr-overline-from-right:hover:before {
    left: 0
}

.hvr-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-color: #2098D1;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-reveal:active:before,
.hvr-reveal:focus:before,
.hvr-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 4px
}

.hvr-underline-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-underline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-underline-reveal:active:before,
.hvr-underline-reveal:focus:before,
.hvr-underline-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.hvr-overline-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.hvr-overline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-overline-reveal:active:before,
.hvr-overline-reveal:focus:before,
.hvr-overline-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.hvr-glow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow
}

.hvr-glow:active,
.hvr-glow:focus,
.hvr-glow:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6)
}

.hvr-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow
}

.hvr-shadow:active,
.hvr-shadow:focus,
.hvr-shadow:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)
}

.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform
}

.hvr-grow-shadow:active,
.hvr-grow-shadow:focus,
.hvr-grow-shadow:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.hvr-box-shadow-outset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow
}

.hvr-box-shadow-outset:active,
.hvr-box-shadow-outset:focus,
.hvr-box-shadow-outset:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6)
}

.hvr-box-shadow-inset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-box-shadow-inset:active,
.hvr-box-shadow-inset:focus,
.hvr-box-shadow-inset:hover {
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-float-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity
}

.hvr-float-shadow:active,
.hvr-float-shadow:focus,
.hvr-float-shadow:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.hvr-float-shadow:active:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:hover:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
}

.hvr-shadow-radial {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-shadow-radial:after,
.hvr-shadow-radial:before {
    pointer-events: none;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.hvr-shadow-radial:before {
    bottom: 100%;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
}

.hvr-shadow-radial:after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
}

.hvr-shadow-radial:active:after,
.hvr-shadow-radial:active:before,
.hvr-shadow-radial:focus:after,
.hvr-shadow-radial:focus:before,
.hvr-shadow-radial:hover:after,
.hvr-shadow-radial:hover:before {
    opacity: 1
}

.hvr-bubble-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-bubble-top:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    left: calc(50% - 10px);
    top: 0;
    border-width: 0 10px 10px;
    border-color: transparent transparent #e1e1e1
}

.hvr-bubble-top:active:before,
.hvr-bubble-top:focus:before,
.hvr-bubble-top:hover:before {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.hvr-bubble-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-bubble-right:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    top: calc(50% - 10px);
    right: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #e1e1e1
}

.hvr-bubble-right:active:before,
.hvr-bubble-right:focus:before,
.hvr-bubble-right:hover:before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
}

.hvr-bubble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-bubble-bottom:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    left: calc(50% - 10px);
    bottom: 0;
    border-width: 10px 10px 0;
    border-color: #e1e1e1 transparent transparent
}

.hvr-bubble-bottom:active:before,
.hvr-bubble-bottom:focus:before,
.hvr-bubble-bottom:hover:before {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.hvr-bubble-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-bubble-left:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    top: calc(50% - 10px);
    left: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #e1e1e1 transparent transparent
}

.hvr-bubble-left:active:before,
.hvr-bubble-left:focus:before,
.hvr-bubble-left:hover:before {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

.hvr-bubble-float-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-top:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: calc(50% - 10px);
    top: 0;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: transparent transparent #e1e1e1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-top:active,
.hvr-bubble-float-top:focus,
.hvr-bubble-float-top:hover {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.hvr-bubble-float-top:active:before,
.hvr-bubble-float-top:focus:before,
.hvr-bubble-float-top:hover:before {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.hvr-bubble-float-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-right:before {
    position: absolute;
    z-index: -1;
    top: calc(50% - 10px);
    right: 0;
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #e1e1e1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-right:active,
.hvr-bubble-float-right:focus,
.hvr-bubble-float-right:hover {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

.hvr-bubble-float-right:active:before,
.hvr-bubble-float-right:focus:before,
.hvr-bubble-float-right:hover:before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
}

.hvr-bubble-float-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-bottom:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: calc(50% - 10px);
    bottom: 0;
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #e1e1e1 transparent transparent;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-bottom:active,
.hvr-bubble-float-bottom:focus,
.hvr-bubble-float-bottom:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.hvr-bubble-float-bottom:active:before,
.hvr-bubble-float-bottom:focus:before,
.hvr-bubble-float-bottom:hover:before {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.hvr-bubble-float-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-left:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: calc(50% - 10px);
    left: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #e1e1e1 transparent transparent;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform
}

.hvr-bubble-float-left:active,
.hvr-bubble-float-left:focus,
.hvr-bubble-float-left:hover {
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
}

.hvr-bubble-float-left:active:before,
.hvr-bubble-float-left:focus:before,
.hvr-bubble-float-left:hover:before {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px)
}

.hvr-icon-back {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s
}

.hvr-icon-back .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-back:active .hvr-icon,
.hvr-icon-back:focus .hvr-icon,
.hvr-icon-back:hover .hvr-icon {
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px)
}

.hvr-icon-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s
}

.hvr-icon-forward .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-forward:active .hvr-icon,
.hvr-icon-forward:focus .hvr-icon,
.hvr-icon-forward:hover .hvr-icon {
    -webkit-transform: translateX(4px);
    transform: translateX(4px)
}

@-webkit-keyframes hvr-icon-down {

    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25%,
    75% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

@keyframes hvr-icon-down {

    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25%,
    75% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

.hvr-icon-down {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-down .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-down:active .hvr-icon,
.hvr-icon-down:focus .hvr-icon,
.hvr-icon-down:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-down;
    animation-name: hvr-icon-down;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes hvr-icon-up {

    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25%,
    75% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@keyframes hvr-icon-up {

    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25%,
    75% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

.hvr-icon-up {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-up .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-up:active .hvr-icon,
.hvr-icon-up:focus .hvr-icon,
.hvr-icon-up:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-up;
    animation-name: hvr-icon-up;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.hvr-icon-spin {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-spin .hvr-icon {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

.hvr-icon-spin:active .hvr-icon,
.hvr-icon-spin:focus .hvr-icon,
.hvr-icon-spin:hover .hvr-icon {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

@-webkit-keyframes hvr-icon-drop {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100%,
    51% {
        opacity: 1
    }
}

@keyframes hvr-icon-drop {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100%,
    51% {
        opacity: 1
    }
}

.hvr-icon-drop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-drop .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-drop:active .hvr-icon,
.hvr-icon-drop:focus .hvr-icon,
.hvr-icon-drop:hover .hvr-icon {
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-animation-name: hvr-icon-drop;
    animation-name: hvr-icon-drop;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}

.hvr-icon-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-fade .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: color;
    transition-property: color
}

.hvr-icon-fade:active .hvr-icon,
.hvr-icon-fade:focus .hvr-icon,
.hvr-icon-fade:hover .hvr-icon {
    color: #0F9E5E
}

@-webkit-keyframes hvr-icon-float-away {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-1em);
        transform: translateY(-1em)
    }
}

@keyframes hvr-icon-float-away {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-1em);
        transform: translateY(-1em)
    }
}

.hvr-icon-float-away {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-float-away .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.hvr-icon-float-away:active .hvr-icon,
.hvr-icon-float-away:focus .hvr-icon,
.hvr-icon-float-away:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-float-away;
    animation-name: hvr-icon-float-away;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes hvr-icon-sink-away {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(1em);
        transform: translateY(1em)
    }
}

@keyframes hvr-icon-sink-away {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(1em);
        transform: translateY(1em)
    }
}

.hvr-icon-sink-away {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-sink-away .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.hvr-icon-sink-away:active .hvr-icon,
.hvr-icon-sink-away:focus .hvr-icon,
.hvr-icon-sink-away:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-sink-away;
    animation-name: hvr-icon-sink-away;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.hvr-icon-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-grow .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-grow:active .hvr-icon,
.hvr-icon-grow:focus .hvr-icon,
.hvr-icon-grow:hover .hvr-icon {
    -webkit-transform: scale(1.3) translateZ(0);
    transform: scale(1.3) translateZ(0)
}

.hvr-icon-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-shrink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-shrink:active .hvr-icon,
.hvr-icon-shrink:focus .hvr-icon,
.hvr-icon-shrink:hover .hvr-icon {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
}

@-webkit-keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
}

@keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
}

.hvr-icon-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-pulse .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-pulse:active .hvr-icon,
.hvr-icon-pulse:focus .hvr-icon,
.hvr-icon-pulse:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse;
    animation-name: hvr-icon-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes hvr-icon-pulse-grow {
    to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
}

@keyframes hvr-icon-pulse-grow {
    to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
}

.hvr-icon-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-pulse-grow .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-pulse-grow:active .hvr-icon,
.hvr-icon-pulse-grow:focus .hvr-icon,
.hvr-icon-pulse-grow:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse-grow;
    animation-name: hvr-icon-pulse-grow;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes hvr-icon-pulse-shrink {
    to {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
}

@keyframes hvr-icon-pulse-shrink {
    to {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
}

.hvr-icon-pulse-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}

.hvr-icon-pulse-shrink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-pulse-shrink:active .hvr-icon,
.hvr-icon-pulse-shrink:focus .hvr-icon,
.hvr-icon-pulse-shrink:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse-shrink;
    animation-name: hvr-icon-pulse-shrink;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

@-webkit-keyframes hvr-icon-push {
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

@keyframes hvr-icon-push {
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

.hvr-icon-push {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-push .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-push:active .hvr-icon,
.hvr-icon-push:focus .hvr-icon,
.hvr-icon-push:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-push;
    animation-name: hvr-icon-push;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-icon-pop {
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}

@keyframes hvr-icon-pop {
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}

.hvr-icon-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-pop .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-pop:active .hvr-icon,
.hvr-icon-pop:focus .hvr-icon,
.hvr-icon-pop:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pop;
    animation-name: hvr-icon-pop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.hvr-icon-bounce {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-bounce:active .hvr-icon,
.hvr-icon-bounce:focus .hvr-icon,
.hvr-icon-bounce:hover .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
}

.hvr-icon-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-rotate:active .hvr-icon,
.hvr-icon-rotate:focus .hvr-icon,
.hvr-icon-rotate:hover .hvr-icon {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg)
}

.hvr-icon-grow-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-grow-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-grow-rotate:active .hvr-icon,
.hvr-icon-grow-rotate:focus .hvr-icon,
.hvr-icon-grow-rotate:hover .hvr-icon {
    -webkit-transform: scale(1.5) rotate(12deg);
    transform: scale(1.5) rotate(12deg)
}

.hvr-icon-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-float .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-float:active .hvr-icon,
.hvr-icon-float:focus .hvr-icon,
.hvr-icon-float:hover .hvr-icon {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.hvr-icon-sink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-sink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-icon-sink:active .hvr-icon,
.hvr-icon-sink:focus .hvr-icon,
.hvr-icon-sink:hover .hvr-icon {
    -webkit-transform: translateY(4px);
    transform: translateY(4px)
}

@-webkit-keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@-webkit-keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

@keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}

.hvr-icon-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-bob .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-bob:active .hvr-icon,
.hvr-icon-bob:focus .hvr-icon,
.hvr-icon-bob:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
    animation-name: hvr-icon-bob-float, hvr-icon-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate
}

@-webkit-keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

@keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

@-webkit-keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

@keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }
}

.hvr-icon-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-hang .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-hang:active .hvr-icon,
.hvr-icon-hang:focus .hvr-icon,
.hvr-icon-hang:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate
}

@-webkit-keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }

    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }

    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.hvr-icon-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-wobble-horizontal .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-wobble-horizontal:active .hvr-icon,
.hvr-icon-wobble-horizontal:focus .hvr-icon,
.hvr-icon-wobble-horizontal:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-wobble-horizontal;
    animation-name: hvr-icon-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-icon-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes hvr-icon-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.hvr-icon-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-wobble-vertical .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-wobble-vertical:active .hvr-icon,
.hvr-icon-wobble-vertical:focus .hvr-icon,
.hvr-icon-wobble-vertical:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-wobble-vertical;
    animation-name: hvr-icon-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes hvr-icon-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}

@keyframes hvr-icon-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }
}

.hvr-icon-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-buzz .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-buzz:active .hvr-icon,
.hvr-icon-buzz:focus .hvr-icon,
.hvr-icon-buzz:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-buzz;
    animation-name: hvr-icon-buzz;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes hvr-icon-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

@keyframes hvr-icon-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }

    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

.hvr-icon-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.hvr-icon-buzz-out .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.hvr-icon-buzz-out:active .hvr-icon,
.hvr-icon-buzz-out:focus .hvr-icon,
.hvr-icon-buzz-out:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-buzz-out;
    animation-name: hvr-icon-buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.hvr-curl-top-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-curl-top-left:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    background: #fff;
    background: linear-gradient(135deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 1000;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height
}

.hvr-curl-top-left:active:before,
.hvr-curl-top-left:focus:before,
.hvr-curl-top-left:hover:before {
    width: 25px;
    height: 25px
}

.hvr-curl-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-curl-top-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    background: #fff;
    background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height
}

.hvr-curl-top-right:active:before,
.hvr-curl-top-right:focus:before,
.hvr-curl-top-right:hover:before {
    width: 25px;
    height: 25px
}

.hvr-curl-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-curl-bottom-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    background: linear-gradient(315deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height
}

.hvr-curl-bottom-right:active:before,
.hvr-curl-bottom-right:focus:before,
.hvr-curl-bottom-right:hover:before {
    width: 25px;
    height: 25px
}

.hvr-curl-bottom-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative
}

.hvr-curl-bottom-left:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    background: linear-gradient(45deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height
}

.hvr-curl-bottom-left:active:before,
.hvr-curl-bottom-left:focus:before,
.hvr-curl-bottom-left:hover:before {
    width: 25px;
    height: 25px
}

@keyframes shadowAnim {
    0% {
        box-shadow: inset 0 0 0 3px blue, 0 0 0 3px blue
    }

    50% {
        box-shadow: inset 0 0 0 5px #00d9ff, 0 0 0 5px #00d9ff
    }

    100% {
        box-shadow: inset 0 0 0 3px blue, 0 0 0 3px blue
    }
}

@keyframes slide {
    from {
        background-position: 0% 0%
    }

    to {
        background-position: -100% 0%
    }
}

[data-loadanimation]:not(.appContainer) {
    position: relative;
    opacity: 0
}

.activeAnimation.scale-in-center {
    -webkit-animation: scale-in-center 0.5s ease-in both;
    animation: scale-in-center 0.5s ease-in both
}

.activeAnimation.scale-in-top {
    -webkit-animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.activeAnimation.scale-in-bottom {
    animation: scale-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.activeAnimation.scale-in-left {
    animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.activeAnimation.scale-in-right {
    animation: scale-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 1
    }
}

@keyframes scale-in-bottom {
    0% {
        transform: scale(0);
        transform-origin: 50% 100%;
        opacity: 1
    }

    100% {
        transform: scale(1);
        transform-origin: 50% 100%;
        opacity: 1
    }
}

@keyframes scale-in-left {
    0% {
        transform: scale(0);
        transform-origin: 0 50%;
        opacity: 1
    }

    100% {
        transform: scale(1);
        transform-origin: 0 50%;
        opacity: 1
    }
}

@keyframes scale-in-right {
    0% {
        transform: scale(0);
        transform-origin: 100% 50%;
        opacity: 1
    }

    100% {
        transform: scale(1);
        transform-origin: 100% 50%;
        opacity: 1
    }
}

.activeAnimation.fade-in-center {
    animation: 1s ease-in fade-in-center;
    opacity: 1
}

.activeAnimation.fade-in-top {
    animation: 1s ease-in fade-in-top;
    opacity: 1
}

.activeAnimation.fade-in-bottom {
    animation: 1s ease-in fade-in-bottom;
    opacity: 1
}

.activeAnimation.fade-in-left {
    animation: 1s ease-in fade-in-left;
    opacity: 1
}

.activeAnimation.fade-in-right {
    animation: 1s ease-in fade-in-right;
    opacity: 1
}

@keyframes fade-in-center {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-50px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-right {
    0% {
        transform: translateX(100px);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.activeAnimation.puff-in-center {
    animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both
}

.activeAnimation.puff-in-top {
    animation: puff-in-top 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both
}

.activeAnimation.puff-in-bottom {
    animation: puff-in-bottom 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both
}

.activeAnimation.puff-in-left {
    animation: puff-in-left 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both
}

.activeAnimation.puff-in-right {
    animation: puff-in-right 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both
}

@keyframes puff-in-center {
    0% {
        transform: scale(2);
        filter: blur(4px);
        opacity: 0
    }

    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes puff-in-top {
    0% {
        transform: scale(2);
        transform-origin: 50% 0;
        filter: blur(4px);
        opacity: 0
    }

    100% {
        transform: scale(1);
        transform-origin: 50% 0;
        filter: blur(0);
        opacity: 1
    }
}

@keyframes puff-in-bottom {
    0% {
        transform: scale(2);
        transform-origin: 50% 100%;
        filter: blur(4px);
        opacity: 0
    }

    100% {
        transform: scale(1);
        transform-origin: 50% 100%;
        filter: blur(0);
        opacity: 1
    }
}

@keyframes puff-in-left {
    0% {
        transform: scale(2);
        transform-origin: 0 50%;
        filter: blur(4px);
        opacity: 0
    }

    100% {
        transform: scale(1);
        transform-origin: 0 50%;
        filter: blur(0);
        opacity: 1
    }
}

@keyframes puff-in-right {
    0% {
        transform: scale(2);
        transform-origin: 100% 50%;
        filter: blur(4px);
        opacity: 0
    }

    100% {
        transform: scale(1);
        transform-origin: 100% 50%;
        filter: blur(0);
        opacity: 1
    }
}

.hvr-bubble-top:before {
    border-color: transparent transparent var(--background-color) transparent
}

.hvr-bubble-left:before {
    border-color: transparent var(--background-color) transparent transparent
}

.hvr-bubble-right:before {
    border-color: transparent transparent transparent var(--background-color)
}

.hvr-bubble-bottom:before {
    border-color: var(--background-color) transparent transparent transparent
}

.hvr-bubble-float-top:before {
    border-color: transparent transparent var(--background-color) transparent
}

.hvr-bubble-float-left:before {
    border-color: transparent var(--background-color) transparent transparent
}

.hvr-bubble-float-right:before {
    border-color: transparent transparent transparent var(--background-color)
}

.hvr-bubble-float-bottom:before {
    border-color: var(--background-color) transparent transparent transparent
}

.hvr-ripple-out:before {
    border: var(--background-color) solid 6px
}

.hvr-ripple-in:before {
    border: var(--background-color) solid 4px
}

.hvr-fade:hover {
    background-color: var(--hover-color) !important
}

.hvr-back-pulse:hover {
    background-color: var(--hover-color)
}

.hvr-sweep-to-right:before {
    background-color: var(--hover-color)
}

.hvr-sweep-to-top:before {
    background-color: var(--hover-color)
}

.hvr-sweep-to-left:before {
    background-color: var(--hover-color)
}

.hvr-sweep-to-bottom:before {
    background-color: var(--hover-color)
}

.hvr-bounce-to-right:before {
    background-color: var(--hover-color)
}

.hvr-bounce-to-top:before {
    background-color: var(--hover-color)
}

.hvr-bounce-to-left:before {
    background-color: var(--hover-color)
}

.hvr-bounce-to-bottom:before {
    background-color: var(--hover-color)
}

.hvr-radial-out:before {
    background-color: var(--hover-color)
}

.hvr-radial-in:before {
    background-color: var(--background-color)
}

.hvr-radial-in {
    background-color: var(--hover-color) !important
}

@keyframes hvr-back-pulse {
    50% {
        background-color: var(--hover-color)
    }
}

.button {
    background-color: var(--colorDarkGray)
}

.button_round {
    border-radius: 50%
}

.button_social {
    height: 60px;
    width: 60px
}

.vm--overlay {
    background: rgba(var(--colorBlack), 0.6) !important
}

.imagePopup,
.fontPopup {
    line-height: normal;
    height: 100%;
    overflow: auto
}

.imagePopup::-webkit-scrollbar,
.fontPopup::-webkit-scrollbar {
    width: 13px
}

.imagePopup::-webkit-scrollbar-thumb,
.fontPopup::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: var(--colorLightGray)
}

.imagePopup .image_upload,
.imagePopup .font_upload,
.fontPopup .image_upload,
.fontPopup .font_upload {
    z-index: 9999;
    position: absolute;
    bottom: 10px;
    right: 10px;
    box-shadow: 0 0 3px 0px #3a3a3a;
    border-radius: 10px;
    background-color: #e7e7e7d1;
    padding: 10px
}

.imagePopup .image_upload .upload_label .el-button,
.imagePopup .font_upload .upload_label .el-button,
.fontPopup .image_upload .upload_label .el-button,
.fontPopup .font_upload .upload_label .el-button {
    padding: 10px
}

.imagePopup .image_upload .upload_label .el-button .el-icon-plus,
.imagePopup .font_upload .upload_label .el-button .el-icon-plus,
.fontPopup .image_upload .upload_label .el-button .el-icon-plus,
.fontPopup .font_upload .upload_label .el-button .el-icon-plus {
    font-size: 18px;
    font-weight: bold
}

.imagePopup .image_upload input,
.imagePopup .font_upload input,
.fontPopup .image_upload input,
.fontPopup .font_upload input {
    display: none
}

.imagePopup .fontsDiv,
.fontPopup .fontsDiv {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll
}

.imagePopup .fontsDiv::-webkit-scrollbar,
.fontPopup .fontsDiv::-webkit-scrollbar {
    width: 13px
}

.imagePopup .fontsDiv::-webkit-scrollbar-thumb,
.fontPopup .fontsDiv::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: var(--colorLightGray)
}

.imagePopup .fontsDiv .font,
.fontPopup .fontsDiv .font {
    position: relative
}

.imagePopup .fontsDiv .font .delete,
.fontPopup .fontsDiv .font .delete {
    top: 0;
    transform: translateY(20%);
    right: 10px;
    position: absolute;
    background: var(--colorDarkGray);
    padding: 10px;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    color: var(--colorWhite)
}

.imagePopup .fontsDiv .font .fontRow,
.fontPopup .fontsDiv .font .fontRow {
    border-bottom: 1px solid grey;
    padding: 10px 10px
}

.imagePopup .fontsDiv .font .fontRow i,
.fontPopup .fontsDiv .font .fontRow i {
    font-size: 13px
}

.imagePopup .fontsDiv .font .fontRow h3,
.fontPopup .fontsDiv .font .fontRow h3 {
    margin: 0;
    font-size: 25px
}

.imagePopup .imageDiv,
.fontPopup .imageDiv {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll
}

.imagePopup .imageDiv::-webkit-scrollbar,
.fontPopup .imageDiv::-webkit-scrollbar {
    width: 13px
}

.imagePopup .imageDiv::-webkit-scrollbar-thumb,
.fontPopup .imageDiv::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: var(--colorLightGray)
}

.imagePopup .imageDiv .image,
.imagePopup .imageDiv .video,
.fontPopup .imageDiv .image,
.fontPopup .imageDiv .video {
    height: max-content;
    width: calc((100% / 6) - 20px);
    display: block;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    box-shadow: 0 0 4px -2px var(--colorBlack);
    background: #fbfbfb;
    font-size: 14px;
    position: relative
}

.imagePopup .imageDiv .image .fileInfo,
.imagePopup .imageDiv .video .fileInfo,
.fontPopup .imageDiv .image .fileInfo,
.fontPopup .imageDiv .video .fileInfo {
    margin-left: 10px;
    margin-right: 10px;
    display: block
}

.imagePopup .imageDiv .image .fileInfo .fileName,
.imagePopup .imageDiv .video .fileInfo .fileName,
.fontPopup .imageDiv .image .fileInfo .fileName,
.fontPopup .imageDiv .video .fileInfo .fileName {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.imagePopup .imageDiv .image img,
.imagePopup .imageDiv .video img,
.fontPopup .imageDiv .image img,
.fontPopup .imageDiv .video img {
    width: 100%;
    object-fit: cover
}

.imagePopup .imageDiv .image .delete,
.imagePopup .imageDiv .video .delete,
.fontPopup .imageDiv .image .delete,
.fontPopup .imageDiv .video .delete {
    top: 0;
    transform: translateY(20%);
    right: 10px;
    position: absolute;
    background: #c72121;
    padding: 5px;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    color: var(--colorWhite)
}

.gridRow {
    display: flex
}

.gridRow.flexwrap {
    flex-wrap: wrap
}

.gridRow div.outline {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin: 5px;
    outline: 1px dashed var(--colorDarkGreen);
    background-color: #eee
}

.glide .glide__track {
    height: 100%
}

.glide .glide__slides {
    height: 100%;
    margin-left: 0
}

.glide .glide__slides .glide__slide {
    background-repeat: no-repeat
}

.glide .glide__bullets {
    bottom: 0.5em
}

.bs_slideshowV3 {
    position: relative;
    user-select: none
}

.bs_slideshowV3 .slideshow-container {
    position: relative;
    height: 100%;
    width: 100%
}

.bs_slideshowV3 .mySlides {
    font-size: 0px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.bs_slideshowV3 .mySlides a {
    display: inline-block
}

.bs_slideshowV3 .mySlides img {
    width: 100%;
    height: 100%
}

.bs_slideshowV3 .prev,
.bs_slideshowV3 .next {
    mix-blend-mode: exclusion;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: auto;
    padding: 0px 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center
}

.bs_slideshowV3 .next {
    right: 0;
    border-radius: 3px 0 0 3px
}

.bs_slideshowV3 .prev:hover,
.bs_slideshowV3 .next:hover {
    mix-blend-mode: unset;
    background-color: rgba(0, 0, 0, 0.4)
}

.bs_slideshowV3 .dots {
    position: absolute;
    text-align: center;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%)
}

.bs_slideshowV3 .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #939393;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease
}

.bs_slideshowV3 .active,
.bs_slideshowV3 .dot:hover {
    background-color: #FFF;
    box-shadow: 0 0.25em 0.5em 0 #000
}

.bs_slideshowV3 .fade {
    animation-name: fade;
    animation-duration: 3s
}

@keyframes fade {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.dummy {
    width: 100%;
    pointer-events: none;
    opacity: 0
}

.leftslide {
    left: -100%
}

.center {
    left: 0%
}

.rightslide {
    left: 100%
}

.anim {
    transition: all 1s ease-in-out
}

.bs_slideshowV3 .slideshow-container {
    overflow: hidden
}

.el-tree-fileManager {
    user-select: none
}

.el-tree-fileManager .el-tree-node .el-tree-node__content {
    display: flex;
    align-items: center;
    height: unset
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .el-tree-node__expand-icon {
    margin-top: -20px
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager .tree-node-label p {
    margin: 0
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager .tree-node-new-folder {
    margin-left: 5px;
    opacity: 0.4;
    font-style: italic
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager .tree-node-new-folder:hover {
    opacity: 1
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager .tree-node-new-folder p {
    margin: 0;
    display: flex;
    align-items: center
}

.el-tree-fileManager .el-tree-node .el-tree-node__content .custom-tree-node-fileManager .tree-node-new-folder p i.material-icons {
    font-size: 18px
}

.btn__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    text-align: inherit;
    height: 100%
}

.video_container_single {
    margin: 5px
}

.main_container .youtube_default .youtube_video {
    position: relative
}

.azline {
    overflow-wrap: anywhere;
    margin: 0px 0 10px 0px
}

.azline .wcpageletter {
    cursor: pointer
}

.azline .wcpageletter a {
    color: var(--colorBlack);
    text-decoration: none
}

.azline .wcpageletter a:hover {
    text-decoration: underline
}

.azline .wcpageletter:not(:last-child):after {
    content: "|";
    margin: 0 3px;
    color: var(--colorDarkGray)
}

.searchword__bb {
    display: inline-block
}

.searchword__bb .searchwordlink__bb {
    font-family: "Roboto";
    font-size: 13px;
    line-height: 21px;
    cursor: pointer;
    margin: 0 2px;
    color: var(--colorDarkGray);
    display: inline-block;
    text-decoration: none
}

.searchword__bb .searchwordlink__bb:hover {
    text-decoration: underline
}

.searchword__bb a.searchwordlink__bb:after {
    content: "|";
    margin: 0 3px;
    color: var(--colorDarkGray)
}

.MOBILE .populairSubgroups {
    columns: 2
}

.populairSubgroups {
    columns: 5;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    -webkit-column-rule: 0px;
    -moz-column-rule: 0px;
    column-rule: 0px;
    margin-top: 15px;
    margin-bottom: 30px;
    overflow: hidden
}

@media (min-width: 0) and (max-width: 700px) {
    .populairSubgroups {
        columns: 2
    }
}

.populairSubgroups .popItem {
    text-decoration: none;
    font-family: 'Roboto';
    display: block;
    padding: 0 15px;
    box-sizing: border-box;
    vertical-align: top;
    overflow: hidden;
    height: 21px;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.populairSubgroups .popItem:hover {
    text-decoration: underline
}

.populairSubgroups .popItem.prod {
    font-weight: 700;
    color: var(--colorGreen);
    font-size: 14px;
    line-height: 20px
}

.populairSubgroups .popItem.sub {
    color: var(--colorDarkGray);
    font-size: 13px;
    line-height: 20px
}

.MOBILE .productBlock.overrule {
    width: calc(100% / 2)
}

.productBlock.overrule .pricerspace .pricer.teaser {
    max-width: 115px
}

.productBlock.overrule .pricerspace .pricer.teaser .pricecontainer {
    font-size: 15px;
    line-height: 15px;
    padding-top: 5px;
    white-space: initial
}

.productBlock.overrule {
    display: inline-block;
    width: 200px;
    vertical-align: top
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule {
        width: 120px
    }
}

.productBlock.overrule .containerProduct {
    margin: 10px 5px 0px 5px;
    cursor: pointer
}

.productBlock.overrule .containerProduct .title {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.productBlock.overrule .containerProduct .imageProduct {
    display: block;
    height: 220px;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule .containerProduct .imageProduct {
        height: 170px
    }
}

.productBlock.overrule .containerProduct .imageProduct img {
    position: inherit
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule .containerProduct .imageProduct img {
        width: 100px
    }
}

.productBlock.overrule .containerProduct .imageProduct .uspWrap {
    position: absolute;
    top: 10px;
    left: -5px;
    z-index: 10
}

.productBlock.overrule .pricerspace {
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 0px
}

.productBlock.overrule .pricerspace .pricer {
    display: block;
    min-width: 115px;
    text-align: center;
    background: linear-gradient(135deg, var(--colorDarkGreen) 0%, var(--colorDarkGreen) 89%, var(--colorGreen) 89%, var(--colorGreen) 100%);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: var(--colorWhite)
}

.productBlock.overrule .pricerspace .pricer .pricecontainer {
    display: block;
    position: relative;
    left: 2px;
    color: var(--colorWhite);
    margin-right: 10px;
    margin-left: 10px;
    white-space: nowrap
}

.productBlock.overrule .pricerspace .pricer .pricecontainer .euro {
    display: inline-block;
    font-size: 32px
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule .pricerspace .pricer .pricecontainer .euro {
        font-size: 23px
    }
}

.productBlock.overrule .pricerspace .pricer .pricecontainer .euro .pricecomma {
    font-size: 26px
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule .pricerspace .pricer .pricecontainer .euro .pricecomma {
        font-size: 18px
    }
}

.productBlock.overrule .pricerspace .pricer .pricecontainer .euro .cent {
    display: inline-block;
    position: relative;
    top: -10px;
    left: -3px;
    font-size: 18px
}

@media (min-width: 0) and (max-width: 700px) {
    .productBlock.overrule .pricerspace .pricer .pricecontainer .euro .cent {
        font-size: 14px;
        left: 0;
        top: -7px
    }
}

.arrowContainer {
    position: absolute;
    display: flex;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: space-between;
    height: 0px;
    bottom: 0px
}

.arrowContainer .arrow {
    cursor: pointer;
    height: 290px;
    width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    color: var(--colorBlue);
    font-size: 0px;
    font-weight: bold
}

@media (min-width: 0) and (max-width: 700px) {
    .arrowContainer .arrow {
        height: 220px
    }
}

.arrowContainer .arrow.prev {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    justify-content: center;
    background: linear-gradient(to left, var(--transparent), var(--colorWhite))
}

.arrowContainer .arrow.prev span {
    height: 10px;
    width: 10px;
    border-bottom: 4px solid;
    border-left: 4px solid;
    transform: rotate(45deg)
}

.arrowContainer .arrow.next {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    justify-content: center;
    background: linear-gradient(to right, var(--transparent), var(--colorWhite))
}

.arrowContainer .arrow.next span {
    height: 10px;
    width: 10px;
    border-bottom: 4px solid;
    border-left: 4px solid;
    transform: rotate(-135deg)
}

.topContainerBanner {
    position: relative;
    width: 100%
}

#bannerContent {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pinch-zoom pan-y;
    -webkit-overflow-scrolling: touch
}

#bannerContent>div {
    user-select: none
}

.arrowContainerBanner {
    position: absolute;
    display: flex;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: space-between;
    height: 0px;
    bottom: 0px
}

.arrowContainerBanner .arrow {
    cursor: pointer;
    height: 110px;
    width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    color: var(--colorBlue);
    font-size: 0px;
    font-weight: bold
}

@media (min-width: 0) and (max-width: 700px) {
    .arrowContainerBanner .arrow {
        height: 220px
    }
}

.arrowContainerBanner .arrow.prev {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    justify-content: flex-start;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--colorWhite))
}

.arrowContainerBanner .arrow.prev span {
    height: 10px;
    width: 10px;
    border-bottom: 4px solid;
    border-left: 4px solid;
    transform: rotate(45deg)
}

.arrowContainerBanner .arrow.next {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    justify-content: center;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--colorWhite))
}

.arrowContainerBanner .arrow.next span {
    height: 10px;
    width: 10px;
    border-bottom: 4px solid;
    border-left: 4px solid;
    transform: rotate(-135deg)
}

@keyframes shine {
    to {
        background-position: right -40px top 0
    }
}

.productBlock.skeleton .title,
.productBlock.skeleton .pricerspace .pricer,
.productBlock.skeleton a,
.productBlock.skeleton .imageProduct img {
    font-size: 0px;
    color: transparent;
    background-color: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 2s ease infinite;
    border-radius: 5px
}

.productBlock.skeleton .image .uspWrap {
    display: none
}

.productBlock.skeleton .imageProduct img {
    height: 170px;
    width: 170px;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAACqCAQAAACXfxwJAAAA5klEQVR42u3QMQEAAAwCoNm/9EroBxHIURcFUqVKRapUqUiVKhWpUqUiVapUpEqVilSpUpEqVSpSpUpFqlSpUpEqVSpSpUpFqlSpSJUqFalSpSJVqlSkSpWKVKlSkSpVqlSkSpWKVKlSkSpVKlKlSkWqVKlIlSoVqVKlIlWqVKRKlSoVqVKlIlWqVKRKlYpUqVKRKlUqUqVKRapUqUiVKhWpUqVKRapUqUiVKhWpUqUiVapUpEqVilSpUpEqVSpSpUpFqlSpSJUqVSpSpUpFqlSpSJUqFalSpSJVqlSkSpWKVKlSkbr1h/kAq6yLUMYAAAAASUVORK5CYII=)
}

.productBlock.skeleton .euro,
.productBlock.skeleton .euro .pricecomma {
    font-size: 0px
}

.topContainerProduct {
    position: relative;
    width: 100%
}

.horizontal-scroll {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-y: scroll
}

@media (min-width: 0) and (max-width: 700px) {
    .product {
        display: flex;
        flex-direction: column
    }

    .product .productRow {
        flex-direction: column !important;
        text-align: center
    }

    .product .productRow .productContent .template .t0 {
        display: flex
    }

    .product .productRow .productContent .template .t0 .t1 {
        width: 50%;
        text-align: left
    }

    .product .productRow .productContent .productFooter {
        flex-direction: column
    }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .product {
        display: flex;
        flex-direction: column
    }

    .product .productRow .productContent .template .t0 {
        display: flex
    }

    .product .productRow .productContent .template .t0 .t1 {
        width: 50%
    }
}

.paper.MOBILE .product {
    display: flex;
    flex-direction: column
}

.paper.MOBILE .product .productRow {
    flex-direction: column;
    text-align: center
}

.paper.MOBILE .product .productRow .productContent .template .t0 {
    display: flex
}

.paper.MOBILE .product .productRow .productContent .template .t0 .t1 {
    text-align: left;
    width: 50%
}

.paper.MOBILE .product .productRow .productContent .productFooter {
    flex-direction: column
}

.product {
    width: 100%
}

.product .productRow {
    display: flex;
    justify-content: space-between;
    flex-direction: row
}

.product .productRow .row2 {
    flex-grow: 1
}

.product .productRow .el-image img {
    max-width: 180px;
    max-height: 180px;
    min-width: 180px;
    min-height: 180px;
    margin: 20px
}

.product .productRow .uspWrap {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10
}

.product .productRow .uspWrap .usp {
    margin-left: 0px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #D90000;
    color: var(--colorWhite);
    padding-left: 4px;
    margin-bottom: 4px;
    float: left;
    clear: left
}

.product .productRow .uspWrap .usp:after {
    border-right: 20px solid transparent;
    border-top: 20px solid #D90000;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    background-color: transparent;
    position: absolute
}

.product .productRow .productContent {
    width: 100%
}

.product .productRow .productContent .title {
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0
}

.product .productRow .productContent .subtitle {
    font-size: 11px;
    font-weight: 400;
    line-height: 30px
}

.product .productRow .lineNoMargin {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #b3b3b3
}

.product .productRow .template {
    display: block
}

.product .productRow .template .t0 {
    display: block;
    line-height: 25px;
    background-color: var(--colorWhite);
    font-size: 12px;
    font-weight: 400;
    clear: both;
    transition: all 0.2s ease-in-out
}

.product .productRow .template .t0:nth-child(even) {
    background-color: var(--colorLightGray)
}

.product .productRow .template .t0 .t1 {
    display: inline-block;
    width: 220px;
    padding-left: 5px;
    vertical-align: top
}

.product .productRow .template .t0 .t2 {
    display: inline-block;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    text-align: left
}

.product .productRow .productFooter {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.product .productRow .productFooter .productEnergielabel {
    max-width: 50px;
    max-height: 50px;
    margin: 10px
}

.product .productRow .productFooter .productLink {
    min-width: 200px
}

.product .productRow .productFooter .productLink a {
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--colorBlue)
}

.product .productRow .productFooter .productLink a:hover {
    text-decoration: underline
}

.product .productRow .productFooter .bs_priceBlock {
    position: unset;
    left: unset;
    right: unset;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end
}

.product .productRow .productFooter .bs_priceBlock.hidden {
    display: none
}

.product .productRow .productFooter .bs_priceBlock .teaser {
    margin-right: 10px
}

.product .productRow .productFooter .bs_priceBlock .vanvoor {
    position: relative;
    right: 10px
}

.product .productRow .productFooter .bs_priceBlock .greyOut {
    pointer-events: none
}

.product .productRow .productFooter .bs_priceBlock .greyOut .shopButton {
    background-color: #CCCCCC;
    cursor: default
}

.product .productRow .productFooter .bs_priceBlock .megekkoPricer:hover {
    cursor: pointer
}

.product .productRow .productFooter .bs_priceBlock .megekkoPricer .euro {
    display: inline-block;
    font-size: 32px
}

.product .productRow .productFooter .bs_priceBlock .megekkoPricer .cent {
    font-size: 18px;
    position: relative;
    display: inline-block;
    top: -10px;
    left: -3px
}

.divider_line {
    height: 1px;
    width: 100%;
    background-color: #b3b3b3
}

.productList .productChild:nth-last-child() {
    background-color: red
}

.imageRow.el-col-24 {
    width: auto
}

.paper .teaser {
    width: 115px;
    padding-top: 5px
}

.paper .vanvoor {
    display: inline-block;
    position: absolute;
    min-width: 70px;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--colorGray)
}

.paper .vanvoor .prijs {
    display: block;
    width: 100%;
    position: absolute;
    top: 6px;
    text-align: center
}

.paper .vanvoor .line {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 14px;
    left: 0px;
    border-bottom: 1px solid var(--colorGray);
    -webkit-transform: rotate(170deg);
    transform: rotate(170deg)
}

.teaser {
    font-size: 15px;
    line-height: 15px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.teaserdate {
    background: var(--colorBlue);
    color: var(--colorWhite);
    width: 135px;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-align: center;
    line-height: 15px;
    padding-top: 5px;
    box-sizing: border-box;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.productEnergielabel {
    max-width: 50px;
    max-height: 50px;
    margin: 10px
}

.pricer.teaser.megekkoPricer {
    width: 115px !important
}

.left_column_promo {
    display: flex;
    flex-direction: column;
    text-align: flex-end;
    align-items: flex-start
}

.promoprijs {
    display: inline-block;
    background-color: #ce0004;
    color: var(--colorWhite);
    padding: 3px;
    text-align: center;
    font-size: 13px
}

.productList.productGrid {
    display: flex !important;
    flex-wrap: wrap
}

.productList.productGrid .productChild {
    margin: 10px
}

.productList.productGrid .productChild.items1 {
    width: calc(100% / 1 - 20px)
}

.productList.productGrid .productChild.items2 {
    width: calc(100% / 2 - 20px)
}

.productList.productGrid .productChild.items3 {
    width: calc(100% / 3 - 20px)
}

.productList.productGrid .productChild.items4 {
    width: calc(100% / 4 - 20px)
}

.productList.productGrid .productChild.items5 {
    width: calc(100% / 5 - 20px)
}

.productList.productGrid .productChild.items6 {
    width: calc(100% / 6 - 20px)
}

.productList.productGrid .productChild.items7 {
    width: calc(100% / 7 - 20px)
}

.productList.productGrid .productChild.items8 {
    width: calc(100% / 8 - 20px)
}

.productList.productGrid .productChild .product .productRow {
    display: flex;
    flex-direction: column;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto
}

.productList.productGrid .productChild .product .productRow .resetlink {
    display: flex;
    flex-direction: column
}

.productList.productGrid .productChild .product .productRow .resetlink .title {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.productList.productGrid .productChild .product .productRow .resetlink .row1 {
    width: unset;
    display: flex;
    align-items: center;
    justify-content: center
}

.productList.productGrid .productChild .product .productRow .resetlink .row1 .el-image img {
    margin: 0;
    min-width: unset;
    min-height: unset
}

.productList.productGrid .productChild .product .productRow .resetlink .row2 .productFooter {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center
}

.productList.productGrid .productChild .product .productRow .resetlink .row2 .productFooter .productLink {
    display: none
}

.productList.productGrid .productChild .product .productRow .resetlink .row2 .productFooter .productEnergielabel {
    margin: 0px
}

.productList.productGrid .productChild .divider_line {
    display: none
}

.action_products {
    width: 100%
}

.action_products .product .productRow .productContent {
    width: 100%;
    max-width: 100%
}

.action_products .category_list {
    background-color: var(--colorLightGray);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 15px;
    row-gap: 15px;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 30px
}

.action_products .category_list .category_block {
    width: 100%;
    padding: 0px
}

.action_products .category_list .category_block .category {
    padding: 15px 7px;
    background-color: var(--colorDarkGray);
    color: var(--colorGreen);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 160px;
    width: 100%
}

.action_products .category_list .category_block .category .category_image {
    height: 100px;
    width: 100px
}

.action_products .category_list .category_block .category .category_name {
    height: 50px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 17px
}

.action_products .category_list.minimized {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.action_products .category_list.minimized .category_block .category {
    flex-direction: row;
    height: auto;
    padding: 7px 7px;
    text-align: left;
    cursor: pointer
}

.action_products .category_list.minimized .category_block .category .category_image {
    height: 50px;
    width: 50px;
    min-height: 50px;
    min-width: 50px
}

.action_products .category_list.minimized .category_block .category .category_name {
    font-size: 16x
}

.action_products .product_list {
    width: 100%
}

.action_products .product_list .category_banner {
    padding: 15px;
    color: var(--colorWhite);
    background-color: var(--colorDarkGray);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.action_products .product_list .category_banner .category_title {
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.action_products .product_list .category_banner .category_title h1 {
    font-size: 20px;
    margin: 0;
    padding-left: 15px;
    text-transform: uppercase
}

.action_products .product_list .category_banner .toTop_image {
    --background-color: $colorGreen;
    --hover-color: $colorGreen;
    height: 48px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center
}

.action_products .product_list .category_banner .toTop_image img {
    width: 38px;
    height: 38px
}

.action_products .product_list .category_products {
    margin-bottom: 10px
}

@media (min-width: 0) and (max-width: 700px) {
    .action_products .category_list {
        grid-template-columns: repeat(2, calc(50% - calc(15px / 2)))
    }

    .action_products .category_list .category_block .category .category_image {
        width: 90px;
        height: 90px
    }

    .action_products .category_list .category_block .category .category_name {
        font-size: 16px;
        word-break: break-word
    }

    .action_products .category_list.minimized {
        row-gap: 7px
    }

    .action_products .category_list.minimized .category_block .category {
        padding: 0px 0px
    }

    .action_products .category_list.minimized .category_block .category .category_image {
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px
    }

    .action_products .category_list.minimized .category_block .category .category_name {
        font-size: 16x
    }

    .action_products .product_list .productFooter {
        flex-direction: column
    }

    .action_products .product_list .category_banner {
        font-size: 10px
    }
}

.productTop10 .product .productRow .numberRow {
    background: linear-gradient(135deg, var(--colorGreen) 50px, var(--colorWhite) 0);
    font-size: 34px;
    color: var(--colorWhite);
    font-family: Roboto;
    display: flex;
    padding-left: 5px;
    min-height: 70px
}

.productTop10 .product .productRow .uspWrap {
    left: unset
}

input[data-size="mini"] {
    height: 28px;
    line-height: 28px;
    font-size: 12px
}

input[data-size="small"] {
    height: 32px;
    line-height: 32px;
    font-size: 13px
}

input[data-size="medium"] {
    height: 36px;
    line-height: 368px;
    font-size: 14px
}

input[data-size="large"] {
    height: 40px;
    line-height: 40px;
    font-size: 14px
}

input.mg-input {
    margin: 5px;
    background-color: var(--colorWhite);
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    outline: none
}

input.mg-input:focus {
    outline: none;
    border-color: #409EFF
}

input.mg-input::placeholder {
    color: #BBB
}

input.mg-input[type="search"] {
    padding: 9px 4px 9px 40px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center
}

.actionContainer {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, 300px);
    justify-content: space-around;
    gap: 20px
}

.actionContainer .action_block {
    margin: 10px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.actionContainer .action_block .infoBlock {
    background-color: grey;
    height: 40px;
    width: 100%;
    display: flex
}

.actionContainer .action_block .infoBlock .dateBlock {
    background-color: var(--colorWhite);
    display: flex;
    flex-grow: 1;
    align-items: center;
    letter-spacing: 1.5px;
    font-size: 15px;
    font-weight: 700
}

.actionContainer .action_block .infoBlock .buttonBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--colorBlue);
    max-width: 75px;
    min-width: 70px;
    color: var(--colorWhite)
}

.paper.MOBILE .actionContainer {
    justify-content: center
}

@media (min-width: 0) and (max-width: 700px) {
    .actionContainer {
        justify-content: center;
        grid-template-columns: auto
    }
}

.categoryPagina {
    width: 100%
}

.categoryPagina .projectLine {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid var(--colorGray)
}

.like_button_container {
    display: flex;
    flex-direction: column;
    align-items: center
}

.like_button_container .buttons {
    margin-top: 15px;
    display: flex
}

.like_button_container .buttons .like_button {
    height: 55px;
    width: 55px;
    background: url("https://www.megekko.nl/file/62/likebuttons.svg") no-repeat;
    background-position: 0px 0;
    background-size: auto 100%
}

.like_button_container .buttons .like_button.active,
.like_button_container .buttons .like_button:hover {
    background-position: -119px 0
}

.like_button_container .buttons .dislike_button {
    height: 55px;
    width: 55px;
    background: url("https://www.megekko.nl/file/62/likebuttons.svg") no-repeat;
    background-position: -58px 0;
    background-size: auto 100%
}

.like_button_container .buttons .dislike_button.active,
.like_button_container .buttons .dislike_button:hover {
    background-position: -175px 0
}

.blogInfo {
    display: flex;
    font-size: 12px;
    width: 100%;
    color: #858585
}

.blogInfo .authorInfo {
    margin-right: 10px
}

.blogInfo .authorInfo,
.blogInfo .timeInfo {
    display: flex;
    align-items: center
}

.openday {
    display: flex
}

.openday>div {
    width: calc(100% / 3)
}

#wordcloudcont__bb {
    position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 0 15px;
    overflow: hidden;
    height: 100%;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap
}

.twitchWrapper {
    position: relative
}

.twitchWrapper .redirect_container {
    background: var(--colorWhite);
    opacity: 0;
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 30px;
    width: 70px;
    cursor: pointer;
    z-index: 9999999;
    border-radius: 5px
}

.twitchWrapper .redirect_container:hover {
    opacity: 0.13
}

.youtube_videos h2 {
    font-size: 21px
}

.youtube_videos .videos_container {
    font-size: unset;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 16px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    overflow-x: auto;
    user-select: none
}

.youtube_videos .videos_container .youtube_video .video_container {
    position: relative
}

.youtube_videos .videos_container .youtube_video .video_container .video_thumb {
    height: 100%;
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 16 / 9
}

.youtube_videos .videos_container .youtube_video .video_container .video_title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #0f0f0f;
    line-height: 20px
}

.youtube_videos .videos_container .youtube_video .video_container .channel_name {
    font-size: 13px;
    color: var(--colorGray)
}

.youtube_videos .youtube_scroll {
    position: relative;
    padding: 0 16px
}

.youtube_videos .youtube_left,
.youtube_videos .youtube_right {
    height: 157px;
    width: 50px;
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.youtube_videos .youtube_left {
    left: -8px
}

.youtube_videos .youtube_right {
    right: -8px
}

.youtube_videos .youtube_arrow_left,
.youtube_videos .youtube_arrow_right {
    background: var(--colorWhite);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none
}

.youtube_videos .youtube_arrow_right {
    transform: scaleX(-1)
}

#scroll-container::-webkit-scrollbar {
    width: 0
}

.main_container .videos_container .youtube_video {
    position: relative
}

.main_container .videos_container .youtube_video .iframe_overlay {
    position: absolute;
    background: rgba(26, 26, 26, 0.8);
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    transition: all 0.5s ease-in-out;
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center
}

.main_container .videos_container .youtube_video:hover .iframe_overlay {
    display: none !important
}

.main_container .videos_container .youtube_video .iframe_overlay_not {
    position: absolute;
    background: rgba(26, 26, 26, 0.8);
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    transition: all 0.5s ease-in-out;
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer
}

.youtube_shorts h2 {
    font-size: 21px
}

.youtube_shorts .shorts_container {
    font-size: unset;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    overflow-x: auto;
    user-select: none
}

.youtube_shorts .shorts_container .youtube_short .short_container {
    position: relative
}

.youtube_shorts .shorts_container .youtube_short .short_container .short_thumb {
    height: 430px;
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 9 / 16
}

.youtube_shorts .shorts_container .youtube_short .short_container .short_title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #0f0f0f;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.youtube_shorts .shorts_container .youtube_short .short_container .channel_name {
    font-size: 13px;
    color: var(--colorGray)
}

.youtube_shorts .shorts_scroll {
    position: relative;
    padding: 0 16px
}

.youtube_shorts .shorts_left,
.youtube_shorts .shorts_right {
    height: 430px;
    width: 50px;
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.youtube_shorts .shorts_left {
    left: -8px
}

.youtube_shorts .shorts_right {
    right: -8px
}

.youtube_shorts .short_arrow_left,
.youtube_shorts .short_arrow_right {
    background: var(--colorWhite);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none
}

.youtube_shorts .short_arrow_right {
    transform: scaleX(-1)
}

#scroll-container::-webkit-scrollbar {
    width: 0
}

.main_container .shorts_container .youtube_short .iframe_overlay {
    position: absolute;
    background: rgba(26, 26, 26, 0.8);
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 9 / 16;
    transition: all 0.5s ease-in-out;
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 430px
}

.main_container .shorts_container .youtube_short:hover .iframe_overlay {
    display: none !important
}

.main_container .shorts_container .youtube_short .iframe_overlay_not {
    position: absolute;
    background: rgba(26, 26, 26, 0.8);
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 9 / 16;
    transition: all 0.5s ease-in-out;
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    height: 430px
}

.divider_default {
    height: 3px;
    width: 50px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0
}

.likebuttons_default {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: var(--colorDarkGray);
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0
}

.blogInfo_default {
    font-size: 12px;
    color: #757575;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0
}

.wordcloud_default {
    height: 100%;
    width: 100%
}

.populairegroepen_default {
    height: 100%;
    width: 100%
}

.heading_default {
    font-weight: bold;
    font-family: "Roboto", "sans-serif";
    text-align: left;
    line-height: 1.5;
    color: var(--colorGreen);
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
    text-transform: none;
    background-color: rgba(0, 0, 0, 0);
    --background-color: rgba(0, 0, 0, 0);
    --hover-color: rgba(0, 0, 0, 0);
    background-image: none;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    top: 5px;
    left: 5px
}

h1.heading.heading_default,
h2.heading.heading_default,
h3.heading.heading_default,
h4.heading.heading_default {
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1.5
}

.banner_default {
    height: 100px;
    width: 100%;
    font-size: 16px;
    text-align: left;
    font-weight: normal;
    color: var(--colorWhite);
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0
}

.image_default {
    order: 0;
    width: 100%;
    height: auto;
    opacity: 100%;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: rgba(0, 0, 0, 0);
    --background-color: rgba(0, 0, 0, 0);
    --hover-color: $colorGreen;
    filter: none;
    border-radius: 0;
    box-sizing: border-box;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-style: none;
    border-color: rgba(0, 0, 0, 0);
    overflow: unset;
    object-fit: fill;
    object-position: 50% 50%
}

.youtube_default {
    width: 100%
}

.paragraph_default {
    font-size: 16px;
    font-weight: normal;
    font-family: "Roboto", "sans-serif";
    text-align: left;
    line-height: 1.5;
    color: var(--colorBlack);
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
    text-transform: none;
    background-color: rgba(0, 0, 0, 0);
    --background-color: rgba(0, 0, 0, 0);
    --hover-color: rgba(0, 0, 0, 0);
    background-image: none;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto
}

.actieProducts_default {
    height: 100%;
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0
}

.productGrid_default {
    height: 100%;
    width: 100%
}

.freeProducts_default {
    height: 100%;
    width: 100%
}

.productLanding_default {
    height: 100%;
    width: 100%
}

.projectPositie_default {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-right: 15px
}

.productTop10_default {
    height: 100%;
    width: 100%
}

.product_default {
    height: 100%;
    width: 100%
}

.container .container_default {
    justify-content: flex-start;
    align-items: flex-start;
    font-family: Roboto, sans-serif;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    height: 100%;
    width: 100%;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0);
    --background-color: rgba(0, 0, 0, 0);
    --hover-color: rgba(0, 0, 0, 0);
    background-image: none;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    box-shadow: none
}

.textInput_default {
    height: 25px;
    width: 170px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: var(--colorBlack);
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
    border-radius: 5px;
    box-sizing: border-box;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: var(--colorBlack);
    background-color: var(--colorWhite);
    --background-color: $colorWhite
}

.textEditor_default {
    font-size: 16px;
    font-family: "Roboto", "sans-serif";
    line-height: 1.5;
    color: var(--colorBlack);
    width: 100%;
    height: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto
}

.twitchWrapper {
    width: 100%;
    height: 100%
}

.youtube_videos_default {
    width: 100%;
    height: 100%
}

.youtube_shorts_default {
    width: 100%;
    height: 100%
}

.mgk_openingHours {
    font-size: 16px;
    font-weight: normal;
    font-family: "Roboto";
    text-align: left;
    line-height: 1.5;
    color: var(--colorBlack);
    width: 600px
}

.mgk_specialDays {
    font-size: 16px;
    font-weight: normal;
    font-family: "Roboto";
    text-align: left;
    line-height: 1.5;
    color: var(--colorBlack);
    max-width: 800px
}

.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;
    box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
    text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
    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: 2em
}

.glide__arrow--right {
    right: 2em
}

.glide__arrow--disabled {
    opacity: 0.33
}

.glide__bullets {
    position: absolute;
    z-index: 2;
    bottom: 2em;
    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
}

:root {
    --colorGreen: #8CD50B;
    --colorGreenTrans: #8CD50B44;
    --colorDarkGreen: #84C100;
    --colorBlue: #008FD5;
    --colorDarkBlue: #006999;
    --colorDarkGray: #4C4D4E;
    --colorGray: #999999;
    --colorMediumGray: #DDDDDD;
    --colorLightGray: #EEEEEE;
    --colorRed: #D90000;
    --colorWhite: #FFFFFF;
    --colorBlack: #000000;
    --darker: #00000008;
    --lighter: #FFFFFF66;
    --RGBcolorGreen: 140, 213, 11;
    --RGBcolorBlue: 0, 143, 213;
    --RGBcolorDarkGray: 76, 77, 78;
    --RGBcolorGray: 153, 153, 153;
    --RGBcolorLightGray: 238, 238, 238;
    --RGBcolorRed: 217, 0, 0;
    --RGBcolorWhite: 255, 255, 255;
    --RGBcolorBlack: 0, 0, 0
}

.displayBlock {
    display: block
}

.add-new-div {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    color: #919191;
    font-size: 35px;
    text-align: center;
    display: flex;
    flex-direction: column
}

.container {
    display: flex;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column
}

#mainCanvas {
    background: var(--colorWhite)
}

#mainCanvas .container {
    display: flex;
    flex-direction: column
}

body {
    margin: 0;
    font-family: Roboto
}

body.builderbody {
    overflow-x: hidden;
    background: var(--colorLightGray)
}

.el-slider .el-slider__input.el-input-number--mini {
    width: 100px
}

.el-slider .el-slider__runway.show-input {
    margin-right: 120px
}

.imageRadio .el-radio {
    opacity: 0;
    height: 0;
    width: 0;
    position: absolute
}

.imageRadio .el-radio.is-checked+.el-image {
    outline: 2px solid var(--colorDarkGreen);
    box-shadow: inset 0 0 5px 2px #d1d1d1
}

.imageRadio .el-image {
    outline: 1px solid lightgrey;
    cursor: pointer;
    margin: 5px;
    padding: 5px;
    width: 50px !important;
    height: 50px !important
}

.preview #editorCanvas {
    transition: width 0.4s ease-in-out
}

.preview:not(.disable) a {
    pointer-events: none
}

/*!
 * Quill Editor v1.3.5
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
#editorCanvas .ql-container {
    font-size: inherit !important
}

.ql-container {
    box-sizing: border-box;
    font-family: inherit !important;
    font-size: inherit;
    height: 100%;
    margin: 0px;
    position: relative
}

.ql-container.ql-disabled .ql-tooltip {
    visibility: hidden
}

.ql-container.ql-disabled .ql-editor ul[data-checked]>li::before {
    pointer-events: none
}

.ql-clipboard {
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%
}

.ql-clipboard p {
    margin: 0;
    padding: 0
}

#editorCanvas .ql-editor {
    font-size: inherit !important
}

.ql-editor {
    min-height: unset !important;
    box-sizing: border-box;
    height: 100%;
    outline: none;
    overflow-y: hidden;
    padding: unset;
    display: flex;
    flex-direction: column;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word
}

.ql-editor>* {
    cursor: text
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin: 0 !important;
    padding: 0 !important;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
}

.ql-editor ol,
.ql-editor ul {
    padding-left: 1.5em
}

.ql-editor ol>li,
.ql-editor ul>li {
    list-style-type: none
}

.ql-editor ul>li::before {
    content: '\2022'
}

.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
    pointer-events: none
}

.ql-editor ul[data-checked=true]>li *,
.ql-editor ul[data-checked=false]>li * {
    pointer-events: all
}

.ql-editor ul[data-checked=true]>li::before,
.ql-editor ul[data-checked=false]>li::before {
    color: #777;
    cursor: pointer;
    pointer-events: all
}

.ql-editor ul[data-checked=true]>li::before {
    content: '\2611'
}

.ql-editor ul[data-checked=false]>li::before {
    content: '\2610'
}

.ql-editor li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em
}

.ql-editor li:not(.ql-direction-rtl)::before {
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right
}

.ql-editor li.ql-direction-rtl::before {
    margin-left: 0.3em;
    margin-right: -1.5em
}

.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
    padding-left: 1.5em
}

.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
    padding-right: 1.5em
}

.ql-editor ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0
}

.ql-editor ol li:before {
    content: counter(list-0, decimal) ". "
}

.ql-editor ol li.ql-indent-1 {
    counter-increment: list-1
}

.ql-editor ol li.ql-indent-1:before {
    content: counter(list-1, lower-alpha) ". "
}

.ql-editor ol li.ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-2 {
    counter-increment: list-2
}

.ql-editor ol li.ql-indent-2:before {
    content: counter(list-2, lower-roman) ". "
}

.ql-editor ol li.ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-3 {
    counter-increment: list-3
}

.ql-editor ol li.ql-indent-3:before {
    content: counter(list-3, decimal) ". "
}

.ql-editor ol li.ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-4 {
    counter-increment: list-4
}

.ql-editor ol li.ql-indent-4:before {
    content: counter(list-4, lower-alpha) ". "
}

.ql-editor ol li.ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-5 {
    counter-increment: list-5
}

.ql-editor ol li.ql-indent-5:before {
    content: counter(list-5, lower-roman) ". "
}

.ql-editor ol li.ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-6 {
    counter-increment: list-6
}

.ql-editor ol li.ql-indent-6:before {
    content: counter(list-6, decimal) ". "
}

.ql-editor ol li.ql-indent-6 {
    counter-reset: list-7 list-8 list-9
}

.ql-editor ol li.ql-indent-7 {
    counter-increment: list-7
}

.ql-editor ol li.ql-indent-7:before {
    content: counter(list-7, lower-alpha) ". "
}

.ql-editor ol li.ql-indent-7 {
    counter-reset: list-8 list-9
}

.ql-editor ol li.ql-indent-8 {
    counter-increment: list-8
}

.ql-editor ol li.ql-indent-8:before {
    content: counter(list-8, lower-roman) ". "
}

.ql-editor ol li.ql-indent-8 {
    counter-reset: list-9
}

.ql-editor ol li.ql-indent-9 {
    counter-increment: list-9
}

.ql-editor ol li.ql-indent-9:before {
    content: counter(list-9, decimal) ". "
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em
}

.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em
}

.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 3em
}

.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 4.5em
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em
}

.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em
}

.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 6em
}

.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 7.5em
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em
}

.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em
}

.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 9em
}

.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 10.5em
}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em
}

.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em
}

.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 12em
}

.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 13.5em
}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em
}

.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em
}

.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 15em
}

.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 16.5em
}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em
}

.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em
}

.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 18em
}

.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 19.5em
}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em
}

.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 22.5em
}

.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 21em
}

.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 22.5em
}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em
}

.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em
}

.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 24em
}

.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 25.5em
}

.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em
}

.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 28.5em
}

.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 27em
}

.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 28.5em
}

.ql-editor .ql-video {
    display: block;
    max-width: 100%
}

.ql-editor .ql-video.ql-align-center {
    margin: 0 auto
}

.ql-editor .ql-video.ql-align-right {
    margin: 0 0 0 auto
}

.ql-editor .ql-bg-black {
    background-color: #000
}

.ql-editor .ql-bg-red {
    background-color: #e60000
}

.ql-editor .ql-bg-orange {
    background-color: #f90
}

.ql-editor .ql-bg-yellow {
    background-color: #ff0
}

.ql-editor .ql-bg-green {
    background-color: #008a00
}

.ql-editor .ql-bg-blue {
    background-color: #06c
}

.ql-editor .ql-bg-purple {
    background-color: #93f
}

.ql-editor .ql-color-white {
    color: #fff
}

.ql-editor .ql-color-red {
    color: #e60000
}

.ql-editor .ql-color-orange {
    color: #f90
}

.ql-editor .ql-color-yellow {
    color: #ff0
}

.ql-editor .ql-color-green {
    color: #008a00
}

.ql-editor .ql-color-blue {
    color: #06c
}

.ql-editor .ql-color-purple {
    color: #93f
}

.ql-editor .ql-font-serif {
    font-family: Georgia, Times New Roman, serif
}

.ql-editor .ql-font-monospace {
    font-family: Monaco, Courier New, monospace
}

.ql-editor .ql-size-small {
    font-size: 0.75em
}

.ql-editor .ql-size-large {
    font-size: 1.5em
}

.ql-editor .ql-size-huge {
    font-size: 2.5em
}

.ql-editor .ql-direction-rtl {
    direction: rtl;
    text-align: inherit
}

.ql-editor .ql-align-center {
    text-align: center
}

.ql-editor .ql-align-justify {
    text-align: justify
}

.ql-editor .ql-align-right {
    text-align: right
}

.ql-editor.ql-blank::before {
    color: rgba(0, 0, 0, 0.6);
    content: attr(data-placeholder);
    font-style: italic;
    left: 15px;
    pointer-events: none;
    position: absolute;
    right: 15px
}

.ql-bubble.ql-toolbar:after,
.ql-bubble .ql-toolbar:after {
    clear: both;
    content: '';
    display: table
}

.ql-bubble.ql-toolbar button,
.ql-bubble .ql-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    padding: 3px 5px;
    width: 28px
}

.ql-bubble.ql-toolbar button svg,
.ql-bubble .ql-toolbar button svg {
    float: left;
    height: 100%
}

.ql-bubble.ql-toolbar button:active:hover,
.ql-bubble .ql-toolbar button:active:hover {
    outline: none
}

.ql-bubble.ql-toolbar input.ql-image[type=file],
.ql-bubble .ql-toolbar input.ql-image[type=file] {
    display: none
}

.ql-bubble.ql-toolbar button:hover,
.ql-bubble .ql-toolbar button:hover,
.ql-bubble.ql-toolbar button:focus,
.ql-bubble .ql-toolbar button:focus,
.ql-bubble.ql-toolbar button.ql-active,
.ql-bubble .ql-toolbar button.ql-active,
.ql-bubble.ql-toolbar .ql-picker-label:hover,
.ql-bubble .ql-toolbar .ql-picker-label:hover,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
.ql-bubble.ql-toolbar .ql-picker-item:hover,
.ql-bubble .ql-toolbar .ql-picker-item:hover,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
    color: #252525
}

.ql-bubble.ql-toolbar button:hover .ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: #252525
}

.ql-bubble.ql-toolbar button:hover .ql-stroke,
.ql-bubble .ql-toolbar button:hover .ql-stroke,
.ql-bubble.ql-toolbar button:focus .ql-stroke,
.ql-bubble .ql-toolbar button:focus .ql-stroke,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: #252525
}

@media (pointer: coarse) {

    .ql-bubble.ql-toolbar button:hover:not(.ql-active),
    .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
        color: #252525
    }

    .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
    .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
    .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
    .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
        fill: #252525
    }

    .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
    .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
    .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
    .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: #252525
    }
}

.ql-bubble {
    box-sizing: border-box
}

.ql-bubble * {
    box-sizing: border-box
}

.ql-bubble .ql-hidden {
    display: none
}

.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
    visibility: hidden
}

.ql-bubble .ql-tooltip {
    position: absolute;
    transform: translateY(10px);
    z-index: 9999
}

.ql-bubble .ql-tooltip a {
    cursor: pointer;
    text-decoration: none
}

.ql-bubble .ql-tooltip.ql-flip {
    transform: translateY(-10px)
}

.ql-bubble .ql-formats {
    display: inline-block;
    vertical-align: middle
}

.ql-bubble .ql-formats:after {
    clear: both;
    content: '';
    display: table
}

.ql-bubble .ql-stroke {
    fill: none;
    stroke: #252525;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2
}

.ql-bubble .ql-stroke-miter {
    fill: none;
    stroke: #252525;
    stroke-miterlimit: 10;
    stroke-width: 2
}

.ql-bubble .ql-fill,
.ql-bubble .ql-stroke.ql-fill {
    fill: #252525
}

.ql-bubble .ql-empty {
    fill: none
}

.ql-bubble .ql-even {
    fill-rule: evenodd
}

.ql-bubble .ql-thin,
.ql-bubble .ql-stroke.ql-thin {
    stroke-width: 1
}

.ql-bubble .ql-transparent {
    opacity: 0.4
}

.ql-bubble .ql-direction svg:last-child {
    display: none
}

.ql-bubble .ql-direction.ql-active svg:last-child {
    display: inline
}

.ql-bubble .ql-direction.ql-active svg:first-child {
    display: none
}

.ql-bubble .ql-editor h1 {
    font-size: 2em
}

.ql-bubble .ql-editor h2 {
    font-size: 1.5em
}

.ql-bubble .ql-editor h3 {
    font-size: 1.17em
}

.ql-bubble .ql-editor h4 {
    font-size: 1em
}

.ql-bubble .ql-editor h5 {
    font-size: 0.83em
}

.ql-bubble .ql-editor h6 {
    font-size: 0.67em
}

.ql-bubble .ql-editor a {
    text-decoration: underline
}

.ql-bubble .ql-editor blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px
}

.ql-bubble .ql-editor code,
.ql-bubble .ql-editor pre {
    background-color: #f0f0f0;
    border-radius: 3px
}

.ql-bubble .ql-editor pre {
    white-space: pre-wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px
}

.ql-bubble .ql-editor code {
    font-size: 85%;
    padding: 2px 4px
}

.ql-bubble .ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible
}

.ql-bubble .ql-editor img {
    max-width: 100%
}

.ql-bubble .ql-picker {
    color: #252525;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    position: relative;
    vertical-align: middle
}

.ql-bubble .ql-picker-label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding-left: 8px;
    padding-right: 2px;
    position: relative;
    width: 100%
}

.ql-bubble .ql-picker-label::before {
    display: inline-block;
    line-height: 22px
}

.ql-bubble .ql-picker-options {
    background-color: #ccc;
    display: none;
    min-width: 100%;
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap
}

.ql-bubble .ql-picker-options .ql-picker-item {
    cursor: pointer;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px
}

.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
    color: #252525;
    z-index: 2
}

.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: #777
}

.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: #777
}

.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
    display: block;
    margin-top: -1px;
    top: 100%;
    z-index: 1
}

.ql-bubble .ql-color-picker,
.ql-bubble .ql-icon-picker {
    width: 28px
}

.ql-bubble .ql-color-picker .ql-picker-label,
.ql-bubble .ql-icon-picker .ql-picker-label {
    padding: 2px 4px
}

.ql-bubble .ql-color-picker .ql-picker-label svg,
.ql-bubble .ql-icon-picker .ql-picker-label svg {
    right: 4px
}

.ql-bubble .ql-icon-picker .ql-picker-options {
    padding: 4px 0px
}

.ql-bubble .ql-icon-picker .ql-picker-item {
    height: 24px;
    width: 24px;
    padding: 2px 4px
}

.ql-bubble .ql-color-picker .ql-picker-options {
    padding: 3px 5px;
    width: 152px
}

.ql-bubble .ql-color-picker .ql-picker-item {
    border: 1px solid transparent;
    float: left;
    height: 16px;
    margin: 2px;
    padding: 0px;
    width: 16px
}

.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    position: absolute;
    margin-top: -9px;
    right: 0;
    top: 50%;
    width: 18px
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
    content: attr(data-label)
}

.ql-bubble .ql-picker.ql-header {
    width: 98px
}

.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
    content: 'Normal'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: 'Heading 1'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: 'Heading 2'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: 'Heading 3'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: 'Heading 4'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: 'Heading 5'
}

.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: 'Heading 6'
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    font-size: 2em
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    font-size: 1.5em
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    font-size: 1.17em
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    font-size: 1em
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    font-size: 0.83em
}

.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    font-size: 0.67em
}

.ql-bubble .ql-picker.ql-font {
    width: 108px
}

.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
    content: 'Sans Serif'
}

.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: 'Serif'
}

.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: 'Monospace'
}

.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    font-family: Georgia, Times New Roman, serif
}

.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    font-family: Monaco, Courier New, monospace
}

.ql-bubble .ql-picker.ql-size {
    width: 98px
}

.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
    content: 'Normal'
}

.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: 'Small'
}

.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: 'Large'
}

.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: 'Huge'
}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    font-size: 10px
}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    font-size: 18px
}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    font-size: 32px
}

.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
    background-color: #fff
}

.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
    background-color: #000
}

.ql-bubble .ql-toolbar .ql-formats {
    margin: 8px 12px 8px 0px
}

.ql-bubble .ql-toolbar .ql-formats:first-child {
    margin-left: 12px
}

.ql-bubble .ql-color-picker svg {
    margin: 1px
}

.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
.ql-bubble .ql-color-picker .ql-picker-item:hover {
    border-color: #fff
}

span.ql-picker-item:hover {
    text-decoration: underline
}

.ql-bubble .ql-tooltip {
    background-color: #f9f9f9;
    color: #252525;
    box-sizing: border-box;
    border: 1px solid black
}

.ql-bubble .ql-tooltip-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: " ";
    display: block;
    left: 50%;
    margin-left: -6px;
    position: absolute
}

.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
    border-bottom: 6px solid #444;
    top: -6px
}

.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
    border-top: 6px solid #444;
    bottom: -6px
}

.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
    display: block
}

.ql-bubble .ql-tooltip.ql-editing .ql-formats {
    visibility: hidden
}

.ql-bubble .ql-tooltip-editor {
    display: none
}

.ql-bubble .ql-tooltip-editor input[type=text] {
    background: transparent;
    border: none;
    color: #252525;
    font-size: 13px;
    height: 100%;
    outline: none;
    padding: 10px 20px;
    position: absolute;
    width: 100%
}

.ql-bubble .ql-tooltip-editor a {
    top: 10px;
    position: absolute;
    right: 20px
}

.ql-bubble .ql-tooltip-editor a:before {
    color: #ccc;
    content: "\D7";
    font-size: 16px;
    font-weight: bold
}

.ql-container.ql-bubble:not(.ql-disabled) a {
    position: relative;
    white-space: nowrap
}

.ql-container.ql-bubble:not(.ql-disabled) a::before {
    background-color: #444;
    border-radius: 15px;
    top: -5px;
    font-size: 12px;
    color: #fff;
    content: attr(href);
    font-weight: normal;
    overflow: hidden;
    padding: 5px 15px;
    text-decoration: none;
    z-index: 1
}

.ql-container.ql-bubble:not(.ql-disabled) a::after {
    border-top: 6px solid #444;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    top: 0;
    content: " ";
    height: 0;
    width: 0
}

.ql-container.ql-bubble:not(.ql-disabled) a::before,
.ql-container.ql-bubble:not(.ql-disabled) a::after {
    left: 0;
    margin-left: 50%;
    position: absolute;
    transform: translate(-50%, -100%);
    transition: visibility 0s ease 200ms;
    visibility: hidden
}

.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
    visibility: visible
}

.ql-picker-item[data-value="8px"]::before,
.ql-picker-label[data-value="8px"]::before {
    content: "8px" !important
}

.ql-picker-item[data-value="9px"]::before,
.ql-picker-label[data-value="9px"]::before {
    content: "9px" !important
}

.ql-picker-item[data-value="10px"]::before,
.ql-picker-label[data-value="10px"]::before {
    content: "10px" !important
}

.ql-picker-item[data-value="11px"]::before,
.ql-picker-label[data-value="11px"]::before {
    content: "11px" !important
}

.ql-picker-item[data-value="12px"]::before,
.ql-picker-label[data-value="12px"]::before {
    content: "12px" !important
}

.ql-picker-item[data-value="14px"]::before,
.ql-picker-label[data-value="14px"]::before {
    content: "14px" !important
}

.ql-picker-item[data-value="16px"]::before,
.ql-picker-label[data-value="16px"]::before {
    content: "16px" !important
}

.ql-picker-item[data-value="18px"]::before,
.ql-picker-label[data-value="18px"]::before {
    content: "18px" !important
}

.ql-picker-item[data-value="20px"]::before,
.ql-picker-label[data-value="20px"]::before {
    content: "20px" !important
}

.ql-picker-item[data-value="22px"]::before,
.ql-picker-label[data-value="22px"]::before {
    content: "22px" !important
}

.ql-picker-item[data-value="24px"]::before,
.ql-picker-label[data-value="24px"]::before {
    content: "24px" !important
}

.ql-picker-item[data-value="26px"]::before,
.ql-picker-label[data-value="26px"]::before {
    content: "26px" !important
}

.ql-picker-item[data-value="28px"]::before,
.ql-picker-label[data-value="28px"]::before {
    content: "28px" !important
}

.ql-picker-item[data-value="36px"]::before,
.ql-picker-label[data-value="36px"]::before {
    content: "36px" !important
}

.ql-picker-item[data-value="48px"]::before,
.ql-picker-label[data-value="48px"]::before {
    content: "48px" !important
}

.ql-picker-item[data-value="72px"]::before,
.ql-picker-label[data-value="72px"]::before {
    content: "72px" !important
}