.sm-wrapper,
[data-sm-init="true"] {
    display: none;
}
.sm-wrapper * {
    box-sizing: border-box;
}
.sm-wrapper,
.sm-wrapper .sm-overlay,
.sm-wrapper .sm-popup {
    position: fixed;
    top: 0;
    left: 0;
}
.sm-wrapper {
    z-index: 99999997;
}
.sm-wrapper .sm-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 99999998;
}
.sm-wrapper .sm-popup {
    z-index: 99999999;
}
.sm-sticky-button {
    position: fixed;
    top: 30px;
    left: 30px;
    background: #333;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding: 8px 20px;
    cursor: pointer;
    z-index: 99999996;
}
.sm-sticky-button:hover {
    opacity: 0.8;
}
.sm-wrapper .sm-popup .sm-draggable {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: 0 0;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    z-index: 998;
}
.sm-wrapper [data-sm-close="true"] {
    cursor: pointer;
}
body.sm-pageAnimated > :not(.sm-wrapper) {
    pointer-events: none;
}
.sm-wrapper .sm-popup > div:after {
    content: "";
    display: block;
    clear: both;
}
.sm-wrapper .sm-popup[data-sm-position*="enter"] {
    left: 0;
    right: 0;
}
.sm-wrapper .sm-popup[data-sm-position*="eft"] {
    left: 0;
    right: auto;
}
.sm-wrapper .sm-popup[data-sm-position*="ight"] {
    left: auto;
    right: 0;
}
.sm-wrapper .sm-popup[data-sm-position*="top"] {
    top: 0;
    bottom: auto;
}
.sm-wrapper .sm-popup[data-sm-position*="bottom"] {
    top: auto;
    bottom: 0;
}
.sm-wrapper .sm-popup[data-sm-position="center"],
.sm-wrapper .sm-popup[data-sm-position="left"],
.sm-wrapper .sm-popup[data-sm-position="right"] {
    top: 0;
    bottom: 0;
}
.sm-wrapper div[data-sm-animated="true"] {
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-direction: normal;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.sm-wrapper.sm-active div[data-sm-effect="zoomIn"] {
    animation-name: sm-zoomIn;
}
.sm-wrapper div[data-sm-effect="zoomIn"] {
    animation-name: sm-zoomIn-out;
}
@keyframes sm-zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-zoomIn-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="zoomOut"] {
    animation-name: sm-zoomOut;
}
.sm-wrapper div[data-sm-effect="zoomOut"] {
    animation-name: sm-zoomOut-out;
}
@keyframes sm-zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-zoomOut-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideTop"] {
    animation-name: sm-slideTop;
}
.sm-wrapper div[data-sm-effect="slideTop"] {
    animation-name: sm-slideTop-out;
}
@keyframes sm-slideTop {
    0% {
        opacity: 0;
        transform: translateY(-25%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideTop-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-25%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideBottom"] {
    animation-name: sm-slideBottom;
}
.sm-wrapper div[data-sm-effect="slideBottom"] {
    animation-name: sm-slideBottom-out;
}
@keyframes sm-slideBottom {
    0% {
        opacity: 0;
        transform: translateY(25%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideBottom-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(25%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideRight"] {
    animation-name: sm-slideRight;
}
.sm-wrapper div[data-sm-effect="slideRight"] {
    animation-name: sm-slideRight-out;
}
@keyframes sm-slideRight {
    0% {
        opacity: 0;
        transform: translateX(25%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideRight-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(25%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideLeft"] {
    animation-name: sm-slideLeft;
}
.sm-wrapper div[data-sm-effect="slideLeft"] {
    animation-name: sm-slideLeft-out;
}
@keyframes sm-slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-25%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideLeft-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(-25%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideInTop"] {
    animation-name: sm-slideInTop;
}
.sm-wrapper div[data-sm-effect="slideInTop"] {
    animation-name: sm-slideInTop-out;
}
@keyframes sm-slideInTop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-30%);
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateY(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideInTop-out {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-30%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideInBottom"] {
    animation-name: sm-slideInBottom;
}
.sm-wrapper div[data-sm-effect="slideInBottom"] {
    animation-name: sm-slideInBottom-out;
}
@keyframes sm-slideInBottom {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30%);
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateY(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideInBottom-out {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(30%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideInRight"] {
    animation-name: sm-slideInRight;
}
.sm-wrapper div[data-sm-effect="slideInRight"] {
    animation-name: sm-slideInRight-out;
}
@keyframes sm-slideInRight {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(30%);
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateX(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideInRight-out {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateX(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateX(30%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="slideInLeft"] {
    animation-name: sm-slideInLeft;
}
.sm-wrapper div[data-sm-effect="slideInLeft"] {
    animation-name: sm-slideInLeft-out;
}
@keyframes sm-slideInLeft {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(-30%);
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateX(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-slideInLeft-out {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 1;
        transform: scale(0.8) translateX(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateX(-30%);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="rotateIn"] {
    animation-name: sm-rotateIn;
}
.sm-wrapper div[data-sm-effect="rotateIn"] {
    animation-name: sm-rotateIn-out;
}
@keyframes sm-rotateIn {
    0% {
        opacity: 0;
        transform: rotate(720deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-rotateIn-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: rotate(720deg) scale(0.5);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="rotateOut"] {
    animation-name: sm-rotateOut;
}
.sm-wrapper div[data-sm-effect="rotateOut"] {
    animation-name: sm-rotateOut-out;
}
@keyframes sm-rotateOut {
    0% {
        opacity: 0;
        transform: rotate(720deg) scale(1.4);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-rotateOut-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: rotate(720deg) scale(1.4);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="flipInX"] {
    animation-name: sm-flipInX;
}
.sm-wrapper div[data-sm-effect="flipInX"] {
    animation-name: sm-flipInX-out;
}
@keyframes sm-flipInX {
    0% {
        opacity: 0;
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transition-timing-function: ease-in;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transition-timing-function: ease-in;
    }
    60% {
        opacity: 1;
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}
@keyframes sm-flipInX-out {
    0% {
        transform: perspective(400px);
    }
    20% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    40% {
        opacity: 1;
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transition-timing-function: ease-in;
    }
    100% {
        opacity: 0;
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transition-timing-function: ease-in;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="flipInY"] {
    animation-name: sm-flipInY;
}
.sm-wrapper div[data-sm-effect="flipInY"] {
    animation-name: sm-flipInY-out;
}
@keyframes sm-flipInY {
    0% {
        opacity: 0;
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transition-timing-function: ease-in;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transition-timing-function: ease-in;
    }
    60% {
        opacity: 1;
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}
@keyframes sm-flipInY-out {
    0% {
        transform: perspective(400px);
    }
    20% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    40% {
        opacity: 1;
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transition-timing-function: ease-in;
    }
    100% {
        opacity: 0;
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transition-timing-function: ease-in;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="swingTop"] {
    animation-name: sm-swingTop;
}
.sm-wrapper div[data-sm-effect="swingTop"] {
    animation-name: sm-swingTop-out;
    transform-origin: top center;
}
@keyframes sm-swingTop {
    0% {
        opacity: 0;
        transform: perspective(300px) rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-swingTop-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: perspective(300px) rotateX(-90deg);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="swingBottom"] {
    animation-name: sm-swingBottom;
}
.sm-wrapper div[data-sm-effect="swingBottom"] {
    animation-name: sm-swingBottom-out;
    transform-origin: bottom center;
}
@keyframes sm-swingBottom {
    0% {
        opacity: 0;
        transform: perspective(300px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-swingBottom-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: perspective(300px) rotateX(90deg);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="swingRight"] {
    animation-name: sm-swingRight;
}
.sm-wrapper div[data-sm-effect="swingRight"] {
    animation-name: sm-swingRight-out;
    transform-origin: center right;
}
@keyframes sm-swingRight {
    0% {
        opacity: 0;
        transform: perspective(200px) rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-swingRight-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: perspective(200px) rotateY(-90deg);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="swingLeft"] {
    animation-name: sm-swingLeft;
}
.sm-wrapper div[data-sm-effect="swingLeft"] {
    animation-name: sm-swingLeft-out;
    transform-origin: center left;
}
@keyframes sm-swingLeft {
    0% {
        opacity: 0;
        transform: perspective(200px) rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes sm-swingLeft-out {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: perspective(200px) rotateY(90deg);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="flash"] {
    animation-name: sm-flash;
}
@keyframes sm-flash {
    0%,
    40%,
    80% {
        opacity: 0;
    }
    100%,
    20%,
    60% {
        opacity: 1;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="pulse"] {
    animation-name: sm-pulse;
}
@keyframes sm-pulse {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    25%,
    75% {
        transform: scale(1.05);
    }
    0%,
    100%,
    50% {
        transform: none;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="rubberBand"] {
    animation-name: sm-rubberBand;
}
@keyframes sm-rubberBand {
    0% {
        opacity: 0;
        transform: scale3d(1, 1, 1);
    }
    30% {
        opacity: 1;
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="shake"] {
    animation-name: sm-shake;
}
@keyframes sm-shake {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="swing"] {
    animation-name: sm-swing;
    transform-origin: top center;
}
@keyframes sm-swing {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="tada"] {
    animation-name: sm-tada;
}
@keyframes sm-tada {
    0% {
        opacity: 0;
        transform: scale3d(1, 1, 1);
    }
    10% {
        opacity: 1;
    }
    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="wobble"] {
    animation-name: sm-wobble;
}
@keyframes sm-wobble {
    0% {
        opacity: 0;
        transform: none;
    }
    15% {
        opacity: 1;
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        transform: none;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounce"] {
    animation-name: sm-bounce;
    transform-origin: center bottom;
}
@keyframes sm-bounce {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    0%,
    100%,
    20%,
    53%,
    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounceIn"] {
    animation-name: sm-bounceIn;
}
@keyframes sm-bounceIn {
    0%,
    100%,
    20%,
    40%,
    60%,
    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounceInUp"] {
    animation-name: sm-bounceInUp;
}
@keyframes sm-bounceInUp {
    0%,
    100%,
    60%,
    75%,
    90% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounceInDown"] {
    animation-name: sm-bounceInDown;
}
@keyframes sm-bounceInDown {
    0%,
    100%,
    60%,
    75%,
    90% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {
        transform: none;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounceInRight"] {
    animation-name: sm-bounceInRight;
}
@keyframes sm-bounceInRight {
    0%,
    100%,
    60%,
    75%,
    90% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        transform: none;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="bounceInLeft"] {
    animation-name: sm-bounceInLeft;
}
@keyframes sm-bounceInLeft {
    0%,
    100%,
    60%,
    75%,
    90% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        transform: none;
    }
}
.sm-wrapper.sm-active div[data-sm-effect="unFold"] {
    animation-name: sm-unFold;
}
.sm-wrapper div[data-sm-effect="unFold"] {
    animation-name: sm-unFold-out;
}
@keyframes sm-unFold {
    0% {
        transform: scaleY(0.01) scaleX(0);
    }
    50% {
        transform: scaleY(0.01) scaleX(1);
    }
    100% {
        transform: scaleY(1) scaleX(1);
    }
}
@keyframes sm-unFold-out {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    50% {
        transform: scaleY(0.01) scaleX(1);
    }
    100% {
        transform: scaleY(0.01) scaleX(0);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="flowIn"] {
    animation-name: sm-flowIn;
}
.sm-wrapper div[data-sm-effect="flowIn"] {
    animation-name: sm-flowIn-out;
}
@keyframes sm-flowIn {
    0% {
        opacity: 0;
        border-radius: 200px;
        transform: scale(0.6);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
@keyframes sm-flowIn-out {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        border-radius: 200px;
        transform: scale(0.6);
    }
}
.sm-wrapper.sm-active div[data-sm-effect="fadeIn"] {
    animation-name: sm-fadeIn;
}
@keyframes sm-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.sm-wrapper div[data-sm-effect*="bounce"],
.sm-wrapper div[data-sm-effect="fadeIn"],
.sm-wrapper div[data-sm-effect="flash"],
.sm-wrapper div[data-sm-effect="pulse"],
.sm-wrapper div[data-sm-effect="rubberBand"],
.sm-wrapper div[data-sm-effect="shake"],
.sm-wrapper div[data-sm-effect="swing"],
.sm-wrapper div[data-sm-effect="tada"],
.sm-wrapper div[data-sm-effect="wobble"] {
    animation-name: sm-fadeIn-out;
}
@keyframes sm-fadeIn-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.sm-wrapper .sm-button {
    position: absolute;
    z-index: 999;
}
.sm-wrapper .sm-button,
.sm-wrapper .sm-button:after,
.sm-wrapper .sm-button:before {
    transition: all 0.1s ease;
}
.sm-wrapper .sm-button[data-sm-button-align="right"][data-sm-button-place="inside"] {
    right: 12px;
}
.sm-wrapper .sm-button[data-sm-button-align="right"][data-sm-button-place="outside"] {
    right: 0;
}
.sm-wrapper .sm-button[data-sm-button-align="left"][data-sm-button-place="inside"] {
    left: 12px;
}
.sm-wrapper .sm-button[data-sm-button-align="left"][data-sm-button-place="outside"] {
    left: 0;
}
.sm-wrapper .sm-button[data-sm-button-place="inside"] {
    top: 12px;
}
.sm-wrapper .sm-button[data-sm-button-place="outside"] {
    top: -28px;
}
.sm-wrapper .sm-button[data-sm-button-style*="cancel"] {
    width: 24px;
    height: 24px;
}
.sm-wrapper .sm-button[data-sm-button-style*="cancel"][data-sm-button-place="outside"] {
    margin-top: -6px;
}
.sm-wrapper .sm-button[data-sm-button-style*="cancel"]:after,
.sm-wrapper .sm-button[data-sm-button-style*="cancel"]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 2px;
    margin: auto;
    transform-origin: center;
}
.sm-wrapper .sm-button[data-sm-button-style*="cancel"]:before {
    transform: rotate(45deg);
}
.sm-wrapper .sm-button[data-sm-button-style*="cancel"]:after {
    transform: rotate(-45deg);
}
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="inside"],
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="outside"]:after,
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="outside"]:before,
.sm-wrapper .sm-button[data-sm-button-style*="cancel simple"][data-sm-button-place="inside"]:after,
.sm-wrapper .sm-button[data-sm-button-style*="cancel simple"][data-sm-button-place="inside"]:before {
    background: #111;
}
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="inside"]:after,
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="inside"]:before,
.sm-wrapper .sm-button:not([data-sm-button-style*="simple"])[data-sm-button-style*="cancel"][data-sm-button-place="outside"],
.sm-wrapper .sm-button[data-sm-button-style*="cancel simple"][data-sm-button-place="outside"]:after,
.sm-wrapper .sm-button[data-sm-button-style*="cancel simple"][data-sm-button-place="outside"]:before {
    background: #fff;
}
.sm-wrapper .sm-button:not([data-sm-button-style*="label"]) {
    opacity: 0.5;
}
.sm-wrapper .sm-button:not([data-sm-button-style*="label"]):hover {
    opacity: 1;
}
.sm-wrapper .sm-button[data-sm-button-style*="text"]:after {
    content: attr(data-sm-button-text);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}
.sm-wrapper .sm-button[data-sm-button-style*="circle"] {
    border-radius: 50%;
}
.sm-wrapper .sm-button[data-sm-button-style*="text simple"] {
    font-size: 11px;
}
.sm-wrapper .sm-button[data-sm-button-style*="text simple"][data-sm-button-place="inside"]:after {
    color: #111;
}
.sm-wrapper .sm-button[data-sm-button-style*="text simple"][data-sm-button-place="outside"]:after {
    color: #fff;
}
.sm-wrapper .sm-button[data-sm-button-style*="label"] {
    font-size: 9px;
    color: #fff;
    padding: 6px 12px;
    background: #111;
    background: linear-gradient(to right, #cc3434 50%, #111 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}
.sm-wrapper .sm-button[data-sm-button-style*="label"]:hover {
    background-position: left bottom;
}
body.noOverflow {
    overflow: hidden;
}
.mainDemo {
    text-align: center;
}
.mainDemo .title {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    padding-bottom: 12px;
}
.mainDemo p {
    padding: 14px 0;
}
.mainDemo .close {
    display: inline-block;
    margin: 20px 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #3dc197;
}
.mainDemo .close:hover {
    background: #333;
}
.alert-1 {
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.alert-1:not([data-state="warning"]) * {
    color: #fff;
}
.alert-1[data-state="success"] {
    background-color: #59bda5;
}
.alert-1[data-state="error"] {
    background-color: #dc6868;
}
.alert-1[data-state="info"] {
    background-color: #7cc5e8;
}
.alert-1[data-state="warning"] {
    background-color: #f7eab7;
    color: #333;
}
.alert-1 .title {
    font-weight: 700;
    font-size: 24px;
    display: block;
    margin-top: 130px;
    margin-bottom: 10px;
    position: relative;
}
.alert-1 p {
    font-size: 14px;
    padding-bottom: 50px;
    line-height: 20px;
}
.alert-1 .title,
.alert-1 p {
    padding-left: 30px;
    padding-right: 30px;
}
.alert-1 .title:after,
.alert-1 .title:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.alert-1:not([data-state="warning"]) .title:before {
    top: -70px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    border: solid 2px #fff;
}
.alert-1[data-state="success"] .title:after {
    top: -56px;
    width: 8px;
    height: 20px;
    border: solid #fff;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}
.alert-1[data-state="error"] .title:after {
    top: -89px;
    font-size: 60px;
    line-height: 90px;
    content: "\00D7";
}
.alert-1[data-state="warning"] .title:before {
    top: -70px;
    width: 0;
    height: 0;
    border-left: 34px solid transparent;
    border-right: 34px solid transparent;
    border-bottom: 54px solid rgba(0, 0, 0, 0.2);
}
.alert-1[data-state="info"] .title:after,
.alert-1[data-state="warning"] .title:after {
    content: "i";
    font-size: 28px;
    font-family: monospace, sans-serif;
}
.alert-1[data-state="warning"] .title:after {
    top: -52px;
}
.alert-1[data-state="info"] .title:after {
    top: -60px;
}
.alert-1 .close {
    font-size: 12px;
    font-weight: 700;
    padding: 20px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.2);
}
.alert-1 .close:hover {
    opacity: 0.6;
}
.alert-2 {
    padding: 20px 30px;
}
.alert-2:not([data-state="warning"]) * {
    color: #fff;
}
.alert-2[data-state="success"] {
    background-color: #59bda5;
}
.alert-2[data-state="error"] {
    background-color: #dc6868;
}
.alert-2[data-state="info"] {
    background-color: #7cc5e8;
}
.alert-2[data-state="warning"] {
    background-color: #f7eab7;
    color: #333;
}
.alert-2 .title {
    font-weight: 700;
    font-size: 18px;
    display: block;
    padding-bottom: 2px;
}
.alert-2 p {
    font-size: 13px;
    line-height: 20px;
    padding: 0;
}
.alert-3 * {
    text-align: center;
    color: #333;
}
.alert-3 .title {
    font-size: 28px;
    padding: 46px 20px 0 20px;
}
.alert-3 p {
    font-size: 14px;
    line-height: 22px;
    padding: 20px 20px 40px 20px;
    opacity: 0.7;
}
.alert-3 .action {
    float: left;
    width: 50%;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    padding: 16px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.alert-3 .action.yes {
    background: #45bba1;
}
.alert-3 .action.no {
    background: #333;
}
.alert-3 .action.yes:hover {
    background: #369d86;
}
.alert-3 .action.no:hover {
    background: #666;
}
.audioPlayer audio {
    width: 100%;
}
.audioPlayer .close {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding-top: 10px;
    opacity: 0.6;
}
.audioPlayer .close:hover {
    opacity: 1;
}
.audioPlayer .close:after {
    content: "×";
    padding-left: 6px;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}
body.banner_readMore_visible .sm-popup {
    border-bottom: solid 6px #d97c7c;
}
.banner_readMore img {
    width: 30%;
    float: left;
}
.banner_readMore .content {
    width: 60%;
    float: right;
    margin-left: 10%;
}
.banner_readMore .content a:hover {
    color: #333;
}
.banner_readMore .content .title {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}
.banner_readMore .content p {
    font-size: 12px;
    line-height: 18px;
    color: #999;
    padding: 10px 0;
}
.banner_readMore .content a {
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    color: #b64c4c;
}
.carouselSlider * {
    text-align: center;
}
.carouselSlider {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.carouselSlider.visible {
    opacity: 1;
}
.carouselSlider .title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.carouselSlider .title span {
    font-size: 22px;
    padding: 10px;
}
.carouselSlider p {
    font-size: 14px;
    color: #999;
    padding: 20px 0 30px 0;
    line-height: 20px;
}
.carouselSlider .carouselWrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.carouselSlider .actions {
    text-align: center;
    margin-bottom: 20px;
    display: block;
}
.carouselSlider .nav {
    display: inline-block;
    background: 0 0;
    border: solid 1px #333;
    outline: 0;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    padding: 0 10px;
    line-height: 22px;
    margin: 0 4px 20px 0;
    user-select: none;
}
.carouselSlider .nav:hover {
    background: #333;
    color: #fff;
}
.carouselSlider .nav.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.carouselSlider .carouselList {
    position: relative;
    display: inline-block;
    left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.carouselSlider .carouselList li {
    list-style: none;
    float: left;
    transition: opacity 0.2s ease;
}
.carouselSlider .carouselList:hover li {
    opacity: 1;
}
.carouselSlider .carouselList:hover li:not(:hover) {
    opacity: 0.5;
}
.carouselSlider .carouselList img {
    margin-bottom: 10px;
    width: 100%;
}
.carouselSlider .carouselList .name {
    font-size: 14px;
    color: #333;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carouselSlider .carouselList .price {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
}
.cartSlideOut * {
    box-sizing: border-box;
    color: #333;
}
.cartSlideOut {
    overflow: auto;
}
.cartSlideOut .actions {
    display: inline-block;
    width: 100%;
    padding: 28px 0;
}
.cartSlideOut .action {
    font-weight: 700;
    border: solid 1px #333;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.cartSlideOut .action:hover {
    background: #42abb5;
    border-color: #42abb5;
    color: #fff;
}
.cartSlideOut .actions .shop {
    text-align: center;
    font-size: 12px;
    padding-top: 10px;
    cursor: pointer;
}
.cartSlideOut .actions .shop:hover {
    opacity: 0.6;
}
.cartSlideOut .emptyCart {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    padding: 36px;
    display: none;
    color: #bbb;
}
.cartSlideOut .emptyCart .action {
    margin-top: 20px;
    color: #333;
}
.cartSlideOut .emptyCart .action:hover {
    color: #fff;
}
.cartSlideOut .cartItems {
    display: inline-block;
    width: 100%;
    overflow: auto;
}
.cartSlideOut .cartItems .item {
    background: #fff;
    float: left;
    clear: both;
    margin-bottom: 20px;
    color: #333;
    position: relative;
    transition: all 0.3s ease;
    max-height: 150px;
}
.cartSlideOut .cartItems .item.hidden {
    max-height: 0;
    margin: 0;
}
.cartSlideOut .cartItems .item .data,
.cartSlideOut .cartItems .item img {
    float: left;
    width: 50%;
}
.cartSlideOut .cartItems .item .data {
    padding-left: 30px;
    transition: all 0.2s ease;
}
.cartSlideOut .cartItems .item .data:hover .remove {
    opacity: 1;
}
.cartSlideOut .cartItems .item .data .title {
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 4px;
}
.cartSlideOut .cartItems .item .data > div span {
    font-weight: 700;
    text-align: right;
    float: right;
    color: #42abb5;
}
.cartSlideOut .cartItems .item .data .attribute {
    float: left;
    padding-right: 20px;
    font-size: 12px;
    padding-bottom: 4px;
    color: #333;
    opacity: 0.8;
}
.cartSlideOut .cartItems .item .data .attribute span {
    padding-left: 4px;
}
.cartSlideOut .cartItems .item .data .qty {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    margin-top: 14px;
}
.cartSlideOut .cartItems .item .data .qty span {
    display: inline-block;
    font-weight: 400;
}
.cartSlideOut .cartItems .item .data .price {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0;
}
.cartSlideOut .cartItems .item .data .remove {
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
}
.cartSlideOut .cartItems .item .data .remove:hover {
    text-decoration: underline;
}
.cartSlideOut .total {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    color: #999;
    text-transform: uppercase;
    padding: 20px 0 0 0;
    border-top: solid 1px #eee;
}
.cartSlideOut .total span {
    font-weight: 700;
    color: #333;
    float: right;
    text-align: right;
}
.cartSlideOut .info {
    font-size: 12px;
    padding: 10px 0 0 0;
}
.cartSlideOut .info span {
    font-weight: 700;
}
.contactForm * {
    text-align: center;
}
.contactForm .topIcon {
    content: "";
    display: block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTIxRkQ4ODUzNkEyMTFFNThBRERCNzY5MzU5RTIyRjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTIxRkQ4ODYzNkEyMTFFNThBRERCNzY5MzU5RTIyRjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMjFGRDg4MzM2QTIxMUU1OEFEREI3NjkzNTlFMjJGMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMjFGRDg4NDM2QTIxMUU1OEFEREI3NjkzNTlFMjJGMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvWSRQUAAAINSURBVHja1FeBjcIwDKSvHyAjsMF3hI7ACN0ANoANYIMyAht8NvgwAWxAN8jHyJFc4yZOAL0+kgVSHPvi2Gd34b1fgNSscM4F+a48e5cmOm+apsaIx7NNDQBYH4s/Xv8LQAibeYWOmAwZnWWQIcgtyIXmgCeHw98r6oDuUuU3BQBuE2Trp2uXAHBgutu5iGQBoPMfNDSCY26MAyDndnjGow1TBACN3NCAmwunBIA9m0OViwBeBsBufszxgM8kENiQIpECEN/RaojIK2gUbKHqIQkg/Lbkzc0LARiSE20KQAxXr6Vir2wkQW1Dn/UBACbN/fYlvcAXdDISBRP9Uibs8Pf4RuaNtlcSFUcA9o0ALPM1ARBr3Qmh64PsC0INldQJW1fma5IDNkEqJ3y7IZUD+LZDikNiiUtJ6BIADGG1QQLACMwlekDcfwBgaZ1qQJCmo3Xe8gh8kv1YfuLhMHWN+K6QSD0LFsyFAPwMCQa6M+lhWC5MIrDhdKmIBF0ux56E5vsUEV2U1OpKnJOBxaMvkYqtlooJCK3znja5OQCdNgoVY3i8fZdrx1aq+SedH3mLzw0kY0lXVHbBUTWQkHodn40EufnI+UUzlLZssOwKHHc4B4rOS8dyS8oNgKylIRVLa00YMTJe3VjOlFckizXrmotY1dcxhnKF/Rxu9oVbZ6RyyPJTsOW0X8e/AgwAphLRLwGN8rEAAAAASUVORK5CYII=)
        0 0 no-repeat;
    width: 32px;
    height: 32px;
    margin: 0 auto 20px auto;
}
.contactForm .title {
    font-size: 30px;
    font-weight: 700;
}
.contactForm .title,
.contactForm p {
    color: #fff;
}
.contactForm form {
    display: block;
    margin: 30px 0;
}
.contactForm form input.send,
.contactForm input,
.contactForm textarea {
    border-bottom: solid 1px #fff;
    font-size: 14px;
    color: #fff;
    background: 0 0;
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    text-align: left;
}
.contactForm form input.send {
    background: #ef6161;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    margin-top: 30px;
    display: block;
    text-align: center;
    cursor: pointer;
}
.contactForm form input.send:hover {
    background: #fff;
    color: #222;
}
.contactForm .close {
    font-weight: 700;
    color: #fff;
    font-size: 12px;
    padding-bottom: 20px;
}
.contactForm .close:hover {
    opacity: 0.7;
}
.errorMsg {
    color: #ef6161;
    font-size: 12px;
    font-weight: 700;
    display: block;
}
@media screen and (max-width: 480px) {
    .contactForm .title {
        font-size: 24px;
    }
}
@media screen and (max-height: 480px) {
    body.sm-contactForm-active .sm-wrapper .sm-popup {
        overflow: scroll;
    }
}
body.content_box_visible .sm-button:after,
body.content_box_visible .sm-button:before {
    background: #fff !important;
}
body.content_box_visible .sm-popup {
    overflow-y: auto;
    overflow-x: hidden;
}
.content_box {
    color: #333;
}
.content_box .content {
    padding: 40px;
}
.content_box .content .subtitle,
.content_box .content .title,
.content_box .content p {
    padding: 14px 0;
}
.content_box .content .title {
    font-size: 28px;
}
.content_box .content .title:first-of-type {
    padding-top: 0;
}
.content_box .content .subtitle {
    font-size: 18px;
    font-weight: 700;
    border-bottom: solid 1px #dedede;
    margin-bottom: 14px;
}
.content_box .content ul {
    margin-top: 20px;
}
.content_box .content p,
.content_box .content ul li {
    font-size: 14px;
    line-height: 22px;
}
.content_box .content p {
    opacity: 0.7;
}
.content_box .content ul li {
    margin-left: 14px;
}
.content_box .content .close {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 30px;
    letter-spacing: 0.5px;
}
.content_box .content .close:hover {
    opacity: 0.6;
}
.cookieNotice-1 .title {
    font-weight: 700;
    font-size: 22px;
    padding: 30px 36px 10px 36px;
}
.cookieNotice-1 p {
    font-size: 14px;
    line-height: 22px;
    padding: 0 36px 30px 36px;
}
.cookieNotice-1 .close {
    display: inline-block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: #333;
    opacity: 0.3;
}
.cookieNotice-1 .close:hover {
    opacity: 1;
}
.cookieNotice-1 a {
    color: #f78f8f;
    text-decoration: none;
    border-bottom: dashed 1px #f78f8f;
}
.cookieNotice-2 * {
    color: #fff;
    text-align: left;
}
.cookieNotice-2 .title {
    font-weight: 700;
    padding: 0 0 6px 0;
    font-size: 18px;
}
.cookieNotice-2 p {
    font-size: 14px;
    padding: 0;
}
.countDownBanner * {
    color: #fff;
}
.countDownBanner {
    width: 100%;
    height: 100%;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.countDownBanner .title {
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    font-size: 38px;
    margin: 140px 34px 0 0;
    font-weight: 700;
}
.countDownBanner .intro {
    color: #222;
    margin-right: 34px;
}
.countDownBanner .sm-countDown {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center;
}
.countDownBanner .sm-countDown li {
    display: inline-block;
    padding: 5px;
    margin: 0 20px 0 0;
    font-size: 12px;
}
.countDownBanner .sm-countDown li.hide {
    display: none;
}
.countDownBanner .sm-countDown li p {
    display: inline;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
.countDownBanner .sm-countDown li p span {
    font-weight: 700;
    font-size: 32px;
}
.countDownBanner .sm-countDown li:nth-child(3) {
    margin-right: 0;
}
.countDownBanner .price {
    position: absolute;
    top: 20px;
    right: 34px;
    color: #e97777;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    font-size: 68px;
    font-weight: 700;
}
.countDownBanner .price span {
    font-size: 30px;
}
.countDownBanner .location {
    position: absolute;
    top: 110px;
    right: 34px;
    color: #fff;
    font-size: 14px;
}
.countDownBanner .close {
    position: absolute;
    left: 0;
    bottom: 16px;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
.countDownBanner .close span {
    font-weight: 700;
}
@media screen and (max-width: 400px) {
    .countDownBanner {
        text-align: center;
    }
    .countDownBanner .location,
    .countDownBanner .price {
        left: 0;
        right: 0;
        margin: auto;
    }
    .countDownBanner .title {
        margin: 150px 0 0 0;
    }
    .countDownBanner .sm-countDown {
        margin-top: 20px;
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
    }
    .countDownBanner .sm-countDown li {
        margin: 0;
    }
    .countDownBanner .sm-countDown li p span {
        font-size: 24px;
    }
}
.couponCode * {
    text-align: center;
    color: #333;
}
.couponCode .title {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 10px;
    position: relative;
}
.couponCode .title span {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding: 4px 6px;
    background: #4c94a5;
    border-radius: 4px;
    margin-top: -12px;
}
.couponCode p {
    font-size: 14px;
    line-height: 22px;
}
.couponCode .sm-couponCode {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    background: #d76a6a;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    border-radius: 6px;
}
.couponCode .sm-couponCode:before {
    content: "";
    position: absolute;
    top: -12px;
    left: -11px;
    width: 105%;
    height: 80px;
    border: dashed 2px #bbb;
    border-radius: 6px;
}
.couponCode .sm-couponCode:after {
    position: absolute;
    top: -26px;
    left: -20px;
    content: "\2702";
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    height: auto;
    color: #333;
    background: #fff;
}
.couponCode ul {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    position: relative;
}
.couponCode ul li {
    display: inline-block;
    margin: 0 10px;
}
.couponCode ul li p {
    display: inline;
}
.couponCode ul li p span {
    font-size: 22px;
    font-weight: 700;
}
.couponCode ul li p em {
    font-size: 12px;
}
.dropdownMenu .menuItem {
    display: inline-block;
    position: relative;
    background: #fff;
}
.dropdownMenu .menuItem .title {
    cursor: default;
}
.dropdownMenu .menuItem .title,
.dropdownMenu .menuItem a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}
.dropdownMenu .menuItem .title,
.dropdownMenu .menuItem > a {
    padding: 20px;
}
.dropdownMenu .menuItem:hover > .title,
.dropdownMenu .menuItem:hover > a,
.dropdownMenu .menuItem > .title:hover,
.dropdownMenu .menuItem > a:hover {
    background: #629fd5;
    color: #fff;
}
.dropdownMenu .menuItem .subItems {
    min-width: 100%;
    white-space: nowrap;
    z-index: 10;
}
.dropdownMenu .menuItem .subItems ul {
    background: #fff;
    padding: 20px;
    border-color: #629fd5;
    border-width: 3px;
}
.dropdownMenu .menuItem .subItems ul li {
    list-style: none;
    margin-bottom: 6px;
}
.dropdownMenu .menuItem .subItems ul li:last-of-type {
    margin-bottom: 0;
}
.dropdownMenu .menuItem .subItems ul li a {
    opacity: 0.6;
}
.dropdownMenu .menuItem .subItems ul li a:hover {
    opacity: 1;
}
@media screen and (min-width: 800px) {
    .dropdownMenu .menuItem .subItems {
        position: absolute;
        left: 0;
        transition: all 0.2s ease;
        opacity: 0;
        visibility: hidden;
    }
    .dropdownMenu.top .menuItem .subItems {
        top: 100%;
    }
    .dropdownMenu.bottom .menuItem .subItems {
        bottom: 100%;
    }
    .dropdownMenu.top .menuItem .subItems {
        transform: translateY(20px);
    }
    .dropdownMenu.bottom .menuItem .subItems {
        transform: translateY(-20px);
    }
    .dropdownMenu .menuItem:hover .subItems,
    .dropdownMenu .menuItem:hover .subItems:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .dropdownMenu.top .menuItem .subItems ul {
        border-top-style: solid;
    }
    .dropdownMenu.bottom .menuItem .subItems ul {
        border-bottom-style: solid;
    }
}
@media screen and (max-width: 800px) {
    .dropdownMenu .menuItem,
    .dropdownMenu .menuItem .title,
    .dropdownMenu .menuItem > a {
        width: 100%;
        font-size: 14px;
    }
    .dropdownMenu .menuItem .title,
    .dropdownMenu .menuItem > a {
        padding: 14px;
    }
    .dropdownMenu .menuItem .title:before {
        content: "+";
        padding-right: 10px;
    }
    .dropdownMenu .menuItem:hover .title:before {
        content: "-";
    }
    .dropdownMenu .menuItem .subItems {
        display: none;
    }
    .dropdownMenu .menuItem:hover .subItems,
    .dropdownMenu .menuItem:hover .subItems:hover {
        display: block;
    }
    .dropdownMenu .menuItem .subItems a {
        padding-left: 10px;
    }
}
.eventsCalendar {
    color: #333;
}
.eventsCalendar .calendar .ui-datepicker-header {
    position: relative;
    background: #40b9c0;
    color: #fff;
    padding: 36px;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-datepicker-title {
    display: inline-block;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
    font-size: 36px;
    margin-left: 14px;
    color: #fff;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year {
    font-size: 12px;
    vertical-align: top;
    margin-left: 3px;
    color: #fff;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all {
    position: absolute;
    top: 38px;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all.ui-datepicker-prev {
    right: 70px;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all.ui-datepicker-next {
    right: 50px;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all .ui-icon {
    display: inline-block;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    height: 18px;
    width: 18px;
    font-size: 0;
    text-indent: 100%;
    cursor: pointer;
    opacity: 0.3;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all .ui-icon:hover {
    opacity: 1;
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all .ui-icon.ui-icon-circle-triangle-w {
    transform: rotate(135deg);
}
.eventsCalendar .calendar .ui-datepicker-header .ui-corner-all .ui-icon.ui-icon-circle-triangle-e {
    transform: rotate(-45deg);
}
.eventsCalendar .calendar .ui-datepicker-calendar {
    display: inline-block;
    width: 100%;
    padding: 24px 36px;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody,
.eventsCalendar .calendar .ui-datepicker-calendar thead {
    width: 100%;
    display: inline-table;
    text-align: center;
    font-size: 14px;
}
.eventsCalendar .calendar .ui-datepicker-calendar thead {
    border-bottom: solid 1px #eee;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody {
    margin-top: 20px;
}
.eventsCalendar .calendar .ui-datepicker-calendar td,
.eventsCalendar .calendar .ui-datepicker-calendar th {
    width: calc(100% / 7);
    height: 38px;
    line-height: 38px;
    position: relative;
}
.eventsCalendar .calendar .ui-datepicker-calendar thead tr th span {
    font-weight: 700;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td a {
    color: #333;
    text-decoration: none;
    position: relative;
    width: 100%;
    display: inline-block;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-other-month {
    opacity: 0.3;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-today a {
    color: #fff;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.highlight a:before,
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-today a:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -15px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    z-index: -1;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-today a:before {
    background: #40b9c0;
    border-color: #40b9c0;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.highlight a:before {
    border: solid 2px #cecece;
}
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.highlight a.ui-state-active:before,
.eventsCalendar .calendar .ui-datepicker-calendar tbody tr td.highlight:hover a:before {
    border-color: #333;
}
.eventsCalendar .events {
    display: none;
    width: 100%;
    position: relative;
    padding: 24px 36px 36px 36px;
    border-top: solid 1px #eee;
}
.eventsCalendar .events .date {
    font-size: 11px;
    opacity: 0.7;
}
.eventsCalendar .events .title {
    display: inline-block;
    max-width: 70%;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 4px;
}
.eventsCalendar .events .closeEvent {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.3;
}
.eventsCalendar .events .closeEvent:hover {
    opacity: 1;
}
.eventsCalendar .events .summary {
    font-size: 12px;
    line-height: 20px;
    padding-top: 12px;
}
.feedbackForm .title {
    font-size: 20px;
    font-weight: 700;
}
.feedbackForm p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
    padding: 10px 0 30px 0;
}
.feedbackForm .field {
    display: inline-block;
    width: 100%;
    margin-bottom: 22px;
}
.feedbackForm input {
    width: 100%;
    font-size: 12px;
    padding: 10px;
    border: solid 1px #ccc;
    outline: 0;
}
.feedbackForm input:focus {
    border-color: #333;
}
.feedbackForm input.send {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: #61c7c8;
    border: none;
    outline: 0;
    margin: 0 0 10px 0;
}
.feedbackForm input.send:hover {
    opacity: 0.7;
}
.feedbackForm label {
    float: left;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.feedbackForm .errorMsg {
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    color: red;
}
.feedbackForm .stars {
    border: none;
    outline: 0;
    position: relative;
    float: right;
}
.feedbackForm .stars input {
    display: none;
}
.feedbackForm .stars:not(:checked) > label {
    float: right;
    width: auto;
    margin-top: -4px;
    padding: 0 0 0 4px;
    overflow: visible;
    white-space: nowrap;
    font-size: 20px;
    line-height: 20px;
    color: #ddd;
    position: relative;
}
.feedbackForm .stars:not(:checked) > label:before {
    content: "\2605";
}
.feedbackForm .stars:not(:checked) > label:hover,
.feedbackForm .stars:not(:checked) > label:hover ~ label,
.feedbackForm .stars > input:checked ~ label {
    color: #459b9c;
}
.feedbackForm .check {
    width: 70px;
    line-height: 22px;
    height: 22px;
    background: #f0f0f0;
    position: relative;
    float: right;
    margin-top: -4px;
}
.feedbackForm .check:after,
.feedbackForm .check:before {
    font-size: 10px;
    text-align: center;
    position: absolute;
    z-index: 0;
    width: 50%;
}
.feedbackForm .check:before {
    content: "Yes";
    left: 0;
    color: #222;
}
.feedbackForm .check:after {
    content: "No";
    right: 0;
    color: #999;
}
.feedbackForm .check input {
    display: none;
}
.feedbackForm .check label {
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #333;
    content: "";
}
.feedbackForm .check label:hover {
    background: #333;
}
.feedbackForm .check input:checked + label {
    left: 50%;
    background: #459b9c;
}
.gdprSettings * {
    color: #666;
}
.gdprSettings .title {
    font-size: 18px;
    font-weight: 700;
}
.gdprSettings p {
    font-size: 14px;
    padding: 20px 0;
    color: #aaa;
}
.gdprSettings > div {
    display: inline-block;
    width: 100%;
}
.gdprSettings > div input:not([type="submit"]) {
    display: none;
}
.gdprSettings > div label {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    padding-left: 30px;
    cursor: pointer;
}
.gdprSettings > div label:after,
.gdprSettings > div label:before {
    content: "";
    position: absolute;
    display: block;
    transition: all 0.2s ease;
}
.gdprSettings > div label:before {
    background: #eee;
}
.gdprSettings > div input:checked + label:before {
    background: #3dc197;
}
.gdprSettings .check {
    border-bottom: dashed 1px #ddd;
    padding-bottom: 30px;
    margin: 10px 0 30px 0;
}
.gdprSettings .check label:before {
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
}
.gdprSettings .check label:after {
    top: 1px;
    left: 6px;
    width: 4px;
    height: 11px;
    border-style: none solid solid none;
    border-color: transparent #fff #fff transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}
.gdprSettings .check input:checked + label:after {
    opacity: 1;
}
.gdprSettings .onOff {
    margin: 10px 0;
}
.gdprSettings .onOff label {
    padding-left: 0;
}
.gdprSettings .onOff label:before {
    top: 0;
    right: 0;
    width: 36px;
    height: 20px;
    border-radius: 30px;
}
.gdprSettings .onOff label:after {
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}
.gdprSettings .onOff input:checked + label:after {
    right: 18px;
}
.gdprSettings .actions {
    margin: 30px 0 20px 0;
}
.gdprSettings .actions input {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 6px 30px;
    border: none;
    outline: 0;
    background: #3d96c1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gdprSettings .actions input:hover {
    background: #666;
}
.gdprSettings .actions a {
    font-size: 12px;
    color: #aaa;
    padding-top: 10px;
    float: right;
}
.gdprSettings .actions a:hover {
    color: #666;
}
.html5Banner * {
    box-sizing: border-box;
}
.gwd-page-content {
    background-color: transparent;
    transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-style: preserve-3d;
    position: absolute;
    overflow: hidden;
}
.gwd-page-wrapper {
    background-color: #fff;
    position: absolute;
    transform: translateZ(0);
}
.gwd-page-size {
    width: 460px;
    height: 360px;
}
.gwd-img-11g9 {
    position: absolute;
    width: 460px;
    height: 360px;
    left: 0;
    top: 0;
    opacity: 1;
}
.gwd-p-1qqq {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 38px;
    left: 195px;
    top: 93px;
}
.gwd-p-5d55 {
    font-size: 28px;
    color: #141212;
    left: 219px;
    top: 181px;
    transform: translate3d(158px, 0, 0);
    opacity: 0;
}
.gwd-p-1tk5 {
    left: 168px;
    top: 142px;
    transform: translate3d(180px, 0, 0);
    opacity: 0;
}
@keyframes gwd-gen-yqu9gwdanimation_gwd-keyframes {
    0% {
        transform: translate3d(180px, 0, 0);
        opacity: 0;
        animation-timing-function: ease;
    }
    10.33% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    24.44% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    34.64% {
        transform: translate3d(0, -71px, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    91.76% {
        transform: translate3d(0, -71px, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-yqu9gwdanimation {
    animation: gwd-gen-yqu9gwdanimation_gwd-keyframes 5.45s linear 256ms 1 normal forwards;
}
@keyframes gwd-gen-uermgwdanimation_gwd-keyframes {
    0% {
        transform: translate3d(158px, 0, 0);
        opacity: 0;
        animation-timing-function: ease;
    }
    10.63% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    26.15% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    35.6% {
        transform: translate3d(0, -61px, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    91.51% {
        transform: translate3d(0, -61px, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-uermgwdanimation {
    animation: gwd-gen-uermgwdanimation_gwd-keyframes 5.231s linear 394ms 1 normal forwards;
}
.gwd-p-1qir {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 24px;
    left: 265px;
    top: 252px;
}
.gwd-p-1og6 {
    font-weight: 700;
    font-size: 32px;
    left: 180px;
    top: 255px;
    transform: translate3d(0, 40px, 0);
    opacity: 0;
    transform-style: preserve-3d;
}
.gwd-canvas-1qtj {
    position: absolute;
    left: 152.5px;
    top: 218.5px;
    width: 241px;
    height: 91px;
    opacity: 0;
    transform: translate3d(0, 42px, 0);
    transform-style: preserve-3d;
    border: solid 2px #fff;
}
.gwd-p-10su {
    font-size: 16px;
    left: 190px;
    top: 240px;
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transform-style: preserve-3d;
}
@keyframes gwd-gen-1660gwdanimation_gwd-keyframes {
    0% {
        transform: translate3d(0, 42px, 0);
        opacity: 0;
        animation-timing-function: ease;
    }
    17.11% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    87.4% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-1660gwdanimation {
    animation: gwd-gen-1660gwdanimation_gwd-keyframes 3.326s linear 2.212s 1 normal forwards;
}
@keyframes gwd-gen-7qqogwdanimation_gwd-keyframes {
    0% {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
        animation-timing-function: ease;
    }
    18.37% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    86.03% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-7qqogwdanimation {
    animation: gwd-gen-7qqogwdanimation_gwd-keyframes 2.863s linear 2.574s 1 normal forwards;
}
@keyframes gwd-gen-1urigwdanimation_gwd-keyframes {
    0% {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
        animation-timing-function: ease;
    }
    21.53% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: linear;
    }
    83.59% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-1urigwdanimation {
    animation: gwd-gen-1urigwdanimation_gwd-keyframes 2.438s linear 2.906s 1 normal forwards;
}
@keyframes gwd-gen-yde1gwdanimation_gwd-keyframes {
    0% {
        opacity: 1;
        animation-timing-function: linear;
    }
    92.16% {
        opacity: 1;
        animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-yde1gwdanimation {
    animation: gwd-gen-yde1gwdanimation_gwd-keyframes 5.819s linear 0s 1 normal forwards;
}
.gwd-img-139j {
    position: absolute;
    width: 460px;
    height: 360px;
    left: 0;
    top: 0;
    transform: translate3d(0, -137px, 0);
    opacity: 0;
}
@keyframes gwd-gen-9sgggwdanimation_gwd-keyframes {
    0% {
        opacity: 0;
        transform: translate3d(0, -137px, 0);
        animation-timing-function: linear;
    }
    90.17% {
        opacity: 0;
        transform: translate3d(0, -137px, 0);
        animation-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-9sgggwdanimation {
    animation: gwd-gen-9sgggwdanimation_gwd-keyframes 6.287s linear 0s 1 normal forwards;
}
.gwd-span-12d6 {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    color: #212124;
    font-size: 14px;
    left: 20px;
    top: 311px;
    transform: translate3d(0, 40px, 0);
    opacity: 0;
    transform-style: preserve-3d;
}
.gwd-span-1bgv {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    font-size: 22px;
    color: #435abb;
    font-weight: 700;
    left: 20px;
    top: 281px;
    transform: translate3d(0, 32px, 0);
    opacity: 0;
    transform-style: preserve-3d;
}
@keyframes gwd-gen-20togwdanimation_gwd-keyframes {
    0% {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
        animation-timing-function: linear;
    }
    92.24% {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
        animation-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, -10px, 0);
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-20togwdanimation {
    animation: gwd-gen-20togwdanimation_gwd-keyframes 6.756s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1nfdgwdanimation_gwd-keyframes {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
        animation-timing-function: linear;
    }
    92.4% {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
        animation-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, -10px, 0);
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-1nfdgwdanimation {
    animation: gwd-gen-1nfdgwdanimation_gwd-keyframes 6.831s linear 0s 1 normal forwards;
}
.gwd-canvas-1pd6 {
    position: absolute;
    width: 104.5px;
    height: 104.5px;
    top: 22px;
    left: 333px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    background: #4acc8b;
    border-radius: 50%;
}
.gwd-span-fren {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 36px;
    left: 342px;
    top: 51px;
    transform: scale3d(0.5, 0.5, 0.5);
    opacity: 0;
}
.gwd-span-10uc {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    left: 21px;
    top: 333px;
    color: #0b0b0b;
    font-size: 10px;
    opacity: 0;
}
@keyframes gwd-gen-af1egwdanimation_gwd-keyframes {
    0% {
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
        animation-timing-function: linear;
    }
    91.81% {
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
        animation-timing-function: ease;
    }
    97.27% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-af1egwdanimation {
    animation: gwd-gen-af1egwdanimation_gwd-keyframes 7.999s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-765bgwdanimation_gwd-keyframes {
    0% {
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
        animation-timing-function: linear;
    }
    91.56% {
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
        animation-timing-function: ease;
    }
    96.7% {
        transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        animation-timing-function: ease;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-765bgwdanimation {
    animation: gwd-gen-765bgwdanimation_gwd-keyframes 8.124s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-lmz7gwdanimation_gwd-keyframes {
    0% {
        opacity: 0;
        animation-timing-function: linear;
    }
    94.17% {
        opacity: 0;
        animation-timing-function: linear;
    }
    100% {
        opacity: 1;
        animation-timing-function: linear;
    }
}
#gwd-html5Banner.gwd-play-animation .gwd-gen-lmz7gwdanimation {
    animation: gwd-gen-lmz7gwdanimation_gwd-keyframes 9.205s linear 0s 1 normal forwards;
}
.imageGallery li {
    list-style: none;
}
.imageGallery #galleryWrap {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.imageGallery #galleryWrap.visible {
    opacity: 1;
}
.imageGallery .nav {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #fff;
    height: 30px;
    width: 30px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}
.imageGallery #prevItem {
    left: 0;
    transform: rotate(135deg);
}
.imageGallery #nextItem {
    right: 0;
    transform: rotate(-45deg);
}
.imageGallery #galleryWrap:hover .nav {
    opacity: 0.5;
}
.imageGallery #galleryWrap:hover .nav:hover {
    opacity: 1;
}
.imageGallery #galleryWrap:hover #prevItem {
    left: 40px;
}
.imageGallery #galleryWrap:hover #nextItem {
    right: 40px;
}
.imageGallery #galleryWrap {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.imageGallery #galleryItems {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s ease;
}
.imageGallery #galleryItems li {
    position: relative;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.imageGallery #galleryDots {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.imageGallery #galleryDots li {
    content: "";
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    opacity: 0.5;
    transition: all 0.2s ease;
}
.imageGallery #galleryDots li.active {
    transform: scale(1.4);
    opacity: 1;
}
.imageGallery #galleryItems .content {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 50%;
    text-align: center;
}
.imageGallery #galleryItems .content .title {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 6px;
    color: #fff;
}
.imageGallery #galleryItems .content p {
    font-size: 14px;
    line-height: 22px;
    color: #fff;
}
@media screen and (max-width: 960px) {
    .imageGallery #galleryItems .content {
        max-width: 80%;
    }
}
@media screen and (max-width: 640px) {
    .imageGallery #galleryItems .content {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}
.userForm * {
    box-sizing: border-box;
    color: #fff;
}
.userForm {
    overflow: auto;
}
.userForm .login,
.userForm .register {
    position: absolute;
    top: 0;
    left: 0;
    background: #44b7ab;
    border-radius: 6px;
    padding: 50px;
    transition: all 0.2s ease;
}
.userForm > div.hidden {
    transform: rotateY(90deg);
    opacity: 0;
    visibility: hidden;
}
.userForm > div .clrfx {
    display: inline-block;
    width: 100%;
    clear: both;
    content: "";
    margin: 12px 0;
}
.userForm > div .title {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.userForm > div a {
    color: #fff;
}
.userForm > div form {
    display: inline-block;
    width: 100%;
    clear: both;
}
.userForm > div form .row {
    display: inline-block;
    width: 100%;
    position: relative;
}
.userForm > div form .row:first-of-type {
    margin-top: 20px;
}
#main #section-2 .left ul .userForm > div form .row li:before,
.userForm > div form .row #main #section-2 .left ul li:before,
.userForm > div form .row .icon {
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 18px;
    height: 18px;
}
.userForm > div form .row input[type="password"],
.userForm > div form .row input[type="text"] {
    background: 0 0;
    background: 0 0;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: solid 1px #bbb;
    -webkit-box-shadow: 0 0 0 1000px #44b7ab inset;
    font-size: 13px;
    color: #fff;
    padding: 8px 8px 8px 40px;
}
.userForm > div form .row input::-webkit-input-placeholder {
    color: #fff;
}
.userForm > div form .row input:-moz-placeholder {
    color: #fff;
}
.userForm > div form .row input::-ms-input-placeholder {
    color: #fff;
}
.userForm > div form .row input::placeholder {
    color: #fff;
}
.userForm > div form .styledCheck {
    display: inline-block;
    float: left;
}
.userForm > div form .styledCheck input {
    display: none;
}
.userForm > div form .styledCheck label {
    font-size: 11px;
    line-height: 16px;
    position: relative;
    cursor: pointer;
}
.userForm > div form .styledCheck label:before {
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    vertical-align: middle;
    margin: -2px 10px 0 0;
}
.userForm > div form .styledCheck label:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    background: #fff;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: none;
}
.userForm > div form .styledCheck input:checked + label:after {
    display: block;
}
.userForm > div form .forgotPass {
    float: right;
    display: inline-block;
    font-size: 11px;
    cursor: pointer;
    margin-top: 6px;
}
.userForm > div form .forgotPass:hover {
    text-decoration: underline;
}
.userForm > div .action,
.userForm > div .action2 {
    display: inline-block;
    width: 100%;
    line-height: 50px;
    height: 50px;
    margin: 30px 0 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease;
}
.userForm > div .action {
    background: #444;
}
.userForm > div .action2 {
    border: solid 2px #fff;
}
.userForm > div .action2:hover,
.userForm > div .action:hover {
    opacity: 0.7;
}
.userForm > div .back,
.userForm > div .info {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    opacity: 0.7;
}
.userForm > div .back {
    cursor: pointer;
    margin-top: 14px;
}
.userForm > div .back:hover {
    opacity: 1;
    text-decoration: underline;
}
@media screen and (max-width: 420px) {
    .userForm .login,
    .userForm .register {
        padding: 30px;
        border-radius: 0;
    }
    .userForm > div .action,
    .userForm > div .action2 {
        height: 40px;
        line-height: 40px;
        font-size: 12px;
    }
}
.newsletterForm * {
    color: #fff;
}
.newsletterForm {
    text-align: center;
}
.newsletterForm form {
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
}
.newsletterForm form:after {
    content: "";
    display: block;
    clear: both;
}
.newsletterForm .title {
    font-size: 32px;
    position: relative;
    padding-top: 70px;
}
.newsletterForm .title:after,
.newsletterForm .title:before {
    position: absolute;
    left: 0;
    right: 0;
    content: "";
    margin: auto;
}
.newsletterForm .title:before {
    top: 0;
    width: 64px;
    height: 40px;
    background: 0 0;
    border: solid 2px #fff;
    border-radius: 6px;
}
.newsletterForm .title:after {
    top: -6px;
    width: 30px;
    height: 30px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    transform: rotate(35deg) skew(-20deg);
}
.newsletterForm p {
    font-size: 14px;
    padding-bottom: 40px;
}
.newsletterForm input {
    float: left;
    font-size: 14px;
    padding: 0 10px;
    line-height: 40px;
}
.newsletterForm input[type="email"] {
    width: 65%;
    background: rgba(0, 0, 0, 0.2);
}
.newsletterForm input[type="submit"] {
    width: 35%;
    background: #333;
    font-weight: 700;
    cursor: pointer;
}
.newsletterForm input[type="submit"]:hover {
    opacity: 0.7;
}
.newsletterForm input::-webkit-input-placeholder {
    color: #fff;
}
.newsletterForm input:-moz-placeholder {
    color: #fff;
}
.newsletterForm input::-ms-input-placeholder {
    color: #fff;
}
.newsletterForm input::placeholder {
    color: #fff;
}
.notificationBanner * {
    color: #fff;
    box-sizing: border-box;
}
.notificationBanner .wrap {
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    padding: 20px;
}
.notificationBanner .title {
    font-weight: 700;
    color: #fff;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
.notificationBanner .left {
    float: left;
    text-align: left;
}
.notificationBanner .right {
    float: right;
}
.notificationBanner p {
    font-size: 14px;
    padding: 0;
}
.notificationBanner p span {
    font-weight: 700;
    font-size: 22px;
}
.notificationBanner .sm-countDown li {
    display: inline-block;
    padding: 5px;
    margin: 0 20px 0 0;
    font-size: 12px;
    vertical-align: middle;
}
.notificationBanner .sm-countDown li p {
    display: inline;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
.notificationBanner .sm-countDown li p span {
    font-weight: 700;
    font-size: 32px;
}
.notificationBanner .sm-countDown li.last a {
    font-size: 14px;
    font-weight: 700;
    background: #f78f8f;
    padding: 10px 20px;
    text-decoration: none;
}
.notificationBanner .sm-countDown li.last a:hover {
    background: #000;
}
@media screen and (max-width: 1024px) {
    .notificationBanner .sm-countDown li p span {
        font-size: 20px;
    }
}
@media screen and (max-width: 800px) {
    .notificationBanner .sm-countDown li:not(.last) {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .notificationBanner .wrap {
        padding: 10px;
    }
    .notificationBanner ul {
        float: none;
        width: 100%;
        display: inline-block;
        margin-top: 10px;
    }
    .notificationBanner li.last,
    .notificationBanner li.last a {
        width: 100%;
        display: inline-block;
        margin: 0 0 30px 0;
    }
    .notificationBanner li.last {
        padding: 0;
    }
    .notificationBanner li.last a {
        padding: 6px 10px;
        text-align: center;
    }
}
.overlayMenu .company {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    padding-bottom: 80px;
}
.overlayMenu a {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    margin: 0 0 50px 0;
    opacity: 0.7;
}
.overlayMenu a span {
    display: block;
    font-size: 14px;
    color: #fff;
    padding-top: 6px;
}
.overlayMenu a:hover {
    opacity: 1;
}
.overlayMenu a:last-of-type {
    margin-bottom: 0;
}
.productQuickView * {
    color: #333;
}
.productQuickView .left,
.productQuickView .right {
    width: 50%;
}
.productQuickView .left {
    float: left;
}
.productQuickView .right {
    float: right;
    padding-left: 50px;
}
.productQuickView .left img {
    width: 100%;
}
.productQuickView .right .stock {
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 10px;
}
.productQuickView .right .stock:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    margin: -2px 6px 0 0;
    border-radius: 50%;
}
.productQuickView .right .stock.true {
    color: #67c198;
}
.productQuickView .right .stock.true:before {
    background: #67c198;
}
.productQuickView .right .stock.false {
    color: red;
}
.productQuickView .right .stock.false:before {
    background: red;
}
.productQuickView .right .name {
    font-size: 24px;
}
.productQuickView .right p {
    font-size: 14px;
    line-height: 22px;
    padding: 20px 0 30px 0;
    color: #999;
}
.productQuickView .right .price.new {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 6px;
}
.productQuickView .right .price.old {
    font-size: 12px;
    color: #999;
}
.productQuickView .right .info {
    font-size: 12px;
    padding-top: 30px;
}
.productQuickView .right .info:before {
    content: "\2022\A0\A0";
}
.productQuickView .right .options {
    margin: 30px 0;
}
.productQuickView .right .options input {
    display: none;
}
.productQuickView .right .options label {
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s ease;
}
.productQuickView .right .options input:checked + label,
.productQuickView .right .options label:hover {
    opacity: 1;
}
.productQuickView .right .options.radio label {
    display: inline-block;
    margin-right: 14px;
    font-size: 12px;
    font-weight: 700;
    border: solid 2px #333;
    border-radius: 50px;
    padding: 6px 12px;
}
.productQuickView .right .toCart {
    display: inline-block;
    position: relative;
    padding: 14px 0;
    background: #48c9ca;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    width: 150px;
    text-align: center;
    overflow: hidden;
    margin: 0;
    transition: all 0.2s ease;
}
.productQuickView .right .toCart:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    transform: scale(0.98);
    background: #3eb6b7;
}
.productQuickView .right .toCart span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    position: relative;
    z-index: 2;
}
.productQuickView .right .toCart:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e86565;
    border-radius: 50px;
    transition: all 0.1s ease;
    display: none;
}
.productQuickView .right .toCart.added:after {
    display: block;
    animation: slideBg 1s forwards;
}
@keyframes slideBg {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@media screen and (max-width: 800px) {
    .productQuickView {
        overflow-y: auto;
    }
    .productQuickView .left,
    .productQuickView .right {
        width: 100%;
        float: none;
    }
    .productQuickView .right {
        padding-left: 0;
        padding-top: 30px;
    }
    .productQuickView .right .options.radio label {
        margin-bottom: 10px;
    }
}
.pulloutFooter * {
    color: #555;
}
.pulloutFooter {
    text-align: center;
}
.pulloutFooter .links {
    display: inline-block;
    width: 100%;
}
.pulloutFooter .links a {
    display: inline-block;
    margin: 0 18px;
    font-size: 14px;
    text-decoration: none;
}
.pulloutFooter .links a:first-of-type {
    margin-left: 0;
}
.pulloutFooter .links a:last-of-type {
    margin-right: 0;
}
.pulloutFooter .links a:before {
    content: "•";
    padding-right: 8px;
}
.pulloutFooter .links a:hover {
    color: #4a8fff;
}
.pulloutFooter .copy {
    display: inline-block;
    font-size: 12px;
    border-top: solid 1px #ddd;
    padding-top: 30px;
    margin-top: 30px;
    min-width: 40%;
}
.sm-sticky-button.mainDemo-41 {
    bottom: 0;
    left: 40px;
    top: auto;
    margin: auto;
    max-width: 140px;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
}
body.pulloutFooter-visible .sm-sticky-button.mainDemo-41 {
    transform: translateY(100%);
}
@media (max-width: 640px) {
    .pulloutFooter {
        text-align: left;
    }
    .pulloutFooter .links a {
        display: block;
        margin: 10px 0;
    }
    .pulloutFooter .copy {
        width: 100%;
    }
    .sm-sticky-button.mainDemo-41 {
        max-width: 100%;
    }
}
.pulloutPricelist {
    position: relative;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.pulloutPricelist.visible {
    opacity: 1;
}
.sm-sticky-button.open-pulloutPricelist {
    top: 48%;
    left: 10px;
    font-size: 14px;
    background: #38c184;
    transition: all 0.2s ease;
}
body.pulloutPricelist-visible .sm-sticky-button.open-pulloutPricelist {
    opacity: 0;
}
.pulloutPricelist .carouselWrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.pulloutPricelist .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.pulloutPricelist .nav:before {
    position: absolute;
    top: 62px;
    background: 0 0;
    content: "";
    width: 20px;
    height: 20px;
    border-style: none solid solid none;
    border-color: transparent #fff #fff transparent;
    border-width: 0 3px 3px 0;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}
.pulloutPricelist .nav.prev:before {
    left: 0;
    transform: rotate(135deg);
}
.pulloutPricelist .nav.next:before {
    right: 0;
    transform: rotate(-45deg);
}
.pulloutPricelist:hover .nav:before {
    opacity: 1;
}
.pulloutPricelist:hover .nav.prev:before {
    left: 30px;
}
.pulloutPricelist:hover .nav.next:before {
    right: 30px;
}
.pulloutPricelist:hover .nav.disabled:before {
    opacity: 0.4;
    pointer-events: none;
}
.pulloutPricelist .carouselList {
    position: relative;
    display: inline-block;
    left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.pulloutPricelist .carouselList > li {
    list-style: none;
    float: left;
    transition: opacity 0.2s ease;
    text-align: center;
}
.pulloutPricelist .carouselList .bg-green,
.pulloutPricelist .carouselList .bg-green .price:before {
    background: #53c8e3;
}
.pulloutPricelist .carouselList .bg-pink,
.pulloutPricelist .carouselList .bg-pink .price:before {
    background: #ff7698;
}
.pulloutPricelist .carouselList .bg-orange,
.pulloutPricelist .carouselList .bg-orange .price:before {
    background: #ffaa5a;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] * {
    color: #fff;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] {
    display: inline-block;
    width: 100%;
    padding: 40px 40px 0 40px;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] .title {
    font-size: 32px;
    text-transform: uppercase;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] .price {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: 22px;
    font-weight: 700;
    padding: 8px 0 24px 0;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] .price span {
    display: block;
    font-size: 12px;
    font-weight: 400;
}
.pulloutPricelist .carouselList > li > div[class*="bg-"] .price:before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: -1;
}
.pulloutPricelist .carouselList > li ul {
    padding: 20px 40px;
}
.pulloutPricelist .carouselList > li ul li {
    list-style: none;
    font-size: 14px;
    text-align: left;
    padding: 8px 0 8px 20px;
    position: relative;
}
.pulloutPricelist .carouselList > li ul li:after,
.pulloutPricelist .carouselList > li ul li:before {
    content: "";
    position: absolute;
    display: block;
}
.pulloutPricelist .carouselList > li ul li.yes:before {
    top: 12px;
    left: 0;
    width: 5px;
    height: 10px;
    border-style: none solid solid none;
    border-color: transparent #6dbb47 #6dbb47 transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pulloutPricelist .carouselList > li ul li.no:after,
.pulloutPricelist .carouselList > li ul li.no:before {
    top: 19px;
    left: -2px;
    width: 10px;
    height: 2px;
    background: #bbb;
}
.pulloutPricelist .carouselList > li ul li.no:before {
    transform: rotate(45deg);
}
.pulloutPricelist .carouselList > li ul li.no:after {
    transform: rotate(-45deg);
}
.pulloutPricelist .carouselList > li .order {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-decoration: none;
    padding: 8px 20px;
    margin-top: 10px;
    border: solid 2px #555;
    transition: all 0.2s ease;
}
.pulloutPricelist .carouselList > li .order:hover {
    background: #555;
    color: #fff;
}
.pulloutPricelist .close {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    color: #999;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pulloutPricelist .close:hover {
    color: #555;
}
.punchyBanner * {
    color: #fff;
}
.punchyBanner {
    outline: solid 2px #e258b0;
    outline-offset: 8px;
    overflow: hidden;
    position: relative;
    padding: 50px;
    height: 100%;
    max-height: 490px;
}
.punchyBanner a {
    text-decoration: none;
}
.punchyBanner .bg {
    position: absolute;
    bottom: -140px;
    right: -70px;
    color: #333;
    opacity: 0.15;
    font-weight: 700;
    font-size: 420px;
    z-index: -1;
}
.punchyBanner .title {
    font-size: 48px;
    font-weight: 700;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
}
.punchyBanner .title:after {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    width: 30%;
    height: 2px;
    background: #fff;
}
.punchyBanner .subtitle {
    font-size: 34px;
    line-height: 46px;
}
.punchyBanner .subtitle span,
.punchyBanner p span {
    font-weight: 700;
    padding: 0 4px;
}
.punchyBanner p {
    font-size: 14px;
    line-height: 24px;
    padding: 30px 0;
}
.punchyBanner p span {
    background: #333;
}
.simpleMsg * {
    text-align: center;
}
.simpleMsg .top {
    background: #d7d9cc;
    padding: 30px;
}
.simpleMsg .title {
    font-weight: 700;
    font-size: 32px;
    color: #333;
}
.simpleMsg p {
    font-size: 14px;
    color: #333;
}
.simpleMsg .bottom {
    background: #fff;
    width: 100%;
    padding: 30px 0;
}
.simpleMsg .close {
    display: inline-block;
    background: #5f6251;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 32px;
    letter-spacing: 1px;
    cursor: pointer;
}
.simpleMsg .close:hover {
    background: #333;
}
.siteSearch {
    display: inline-block;
    width: 100%;
    background: #333;
}
.siteSearch form .searchIcon {
    font-size: 2.6em;
    width: 0.4em;
    height: 0.4em;
    border: 0.06em solid #fff;
    border-radius: 0.35em;
    position: absolute;
    left: 16px;
    top: 18px;
    opacity: 0.4;
}
.siteSearch form .searchIcon::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -0.15em;
    bottom: -0.1em;
    border-width: 0;
    background: #fff;
    width: 0.2em;
    height: 0.08em;
    transform: rotate(45deg);
}
.siteSearch form input:not([type="submit"]):focus ~ .searchIcon {
    opacity: 1;
}
.siteSearch form input {
    line-height: 56px;
}
.siteSearch form input:not([type="submit"]) {
    background: 0 0;
    font-size: 18px;
    color: #fff;
    border: none;
    outline: 0;
    padding: 0 20px 0 50px;
    width: 80%;
    float: left;
}
.siteSearch form input[type="submit"] {
    width: 20%;
    height: 100%;
    float: right;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    background: #539dba;
    cursor: pointer;
    opacity: 1;
}
.siteSearch form input[type="submit"]:hover {
    opacity: 0.7;
}
.smoothBanner * {
    text-align: center;
}
.smoothBanner:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 400px;
    background-size: cover;
    z-index: -1;
}
.smoothBanner .top {
    color: #fff;
    padding: 200px 0 60px 0;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.smoothBanner .top .title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
}
.smoothBanner p {
    font-size: 14px;
    line-height: 24px;
    margin-top: 30px;
}
.smoothBanner .top p {
    letter-spacing: 4px;
    padding-top: 10px;
    color: #fff;
}
.smoothBanner .bottom p {
    font-size: 14px;
    letter-spacing: 1px;
}
.smoothBanner .bottom a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 12px 50px;
    background: #b35b5b;
    background: linear-gradient(to bottom, #343d4d 50%, #b35b5b 50%);
    background-size: 100% 200%;
    background-position: bottom left;
    margin-top: 20px;
    transition: all 0.2s ease;
}
.smoothBanner .bottom a:hover {
    background-position: top left;
}
@media screen and (min-width: 541px) {
    .smoothBanner .top .title {
        display: block;
        max-width: 50%;
        margin: auto;
    }
    .smoothBanner .bottom {
        padding: 0 50px 50px 50px;
    }
}
@media screen and (max-width: 540px) {
    .smoothBanner .top .title {
        font-size: 28px;
    }
    .smoothBanner .bottom a,
    .smoothBanner .top p {
        font-size: 12px;
    }
    .smoothBanner .bottom a {
        margin-top: 10px;
    }
    .smoothBanner .bottom {
        padding: 70px 30px 30px 30px;
    }
}
.socialShare {
    display: inline-block;
    width: 100%;
}
#main #section-2 .left ul .socialShare li:before,
.socialShare #main #section-2 .left ul li:before,
.socialShare .icon {
    float: left;
    width: 50px;
    height: 50px;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    transition: all 0.2s ease;
}
#main #section-2 .left ul .socialShare li:hover:before,
.socialShare #main #section-2 .left ul li:hover:before,
.socialShare .icon:hover {
    opacity: 0.6;
}
#main #section-2 .left ul .socialShare li.fb:before,
.socialShare #main #section-2 .left ul li.fb:before,
.socialShare .icon.fb {
    background-color: #3b5999;
}
#main #section-2 .left ul .socialShare li.tw:before,
.socialShare #main #section-2 .left ul li.tw:before,
.socialShare .icon.tw {
    background-color: #55acee;
}
#main #section-2 .left ul .socialShare li.in:before,
.socialShare #main #section-2 .left ul li.in:before,
.socialShare .icon.in {
    background-color: #e4405f;
}
#main #section-2 .left ul .socialShare li.li:before,
.socialShare #main #section-2 .left ul li.li:before,
.socialShare .icon.li {
    background-color: #0077b5;
}
.spinWheel * {
    box-sizing: border-box;
}
.spinWheel {
    position: relative;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.spinWheel.visible {
    opacity: 1;
}
.spinWheel .wheelWrap {
    display: inline-block;
    width: 400px;
    height: 400px;
    position: relative;
}
.spinWheel .wheelWrap .wheel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid 12px #fff;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 8s cubic-bezier(0, 0.99, 0.45, 0.99);
    z-index: 1;
}
.spinWheel .wheelWrap .wheel .area {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 50%;
    transform-origin: 0 100%;
    overflow: hidden;
}
.spinWheel .wheelWrap .wheel .area span {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding-top: 20px;
}
.spinWheel .wheelWrap .start {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    background: #12b6d0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    margin: -50px 0 0 -50px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 2;
}
.spinWheel .wheelWrap .start:hover {
    background: #139cb2;
}
.spinWheel .wheelWrap .start:active {
    transform: scale(0.97);
}
.spinWheel .wheelWrap .marker {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 4px;
    height: 30px;
    margin: 0 0 0 -20px;
    background: #12b6d0;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    transform: rotate(-4deg);
    z-index: 2;
}
.spinWheel .wheelWrap .win * {
    color: #fff;
}
.spinWheel .wheelWrap .win {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #12b6d0;
    border-radius: 50%;
    text-align: center;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.2);
    transition: all 0.25s ease;
}
.spinWheel .wheelWrap .win.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.spinWheel .wheelWrap .win .title {
    font-size: 24px;
    font-weight: 700;
    padding: 100px 0 10px 0;
}
.spinWheel .wheelWrap .win .prizeMsg {
    font-size: 28px;
    padding-bottom: 20px;
}
.spinWheel .wheelWrap .win a {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    border: solid 1px #fff;
    padding: 10px 20px;
    transition: all 0.2s ease;
}
.spinWheel .wheelWrap .win a:hover {
    background: #fff;
    color: #12b6d0;
}
.spinWheel .wheelWrap .win .small {
    font-size: 12px;
    text-decoration: underline;
    padding: 20px 0 0 0;
}
.spinWheel .wheelWrap .win .small:hover {
    opacity: 0.7;
}
.stats .row {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.stats .title {
    margin-bottom: 26px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}
.stats .data-title {
    width: 30%;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    float: left;
}
.stats .data-title span {
    padding-right: 4px;
    color: #ddd;
}
.stats .data {
    width: 70%;
    height: 22px;
    float: right;
    overflow: hidden;
}
.stats .data span {
    width: 15%;
    height: 100%;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    padding-left: 10px;
    background: #e67373;
}
.stats .data span.value-1 {
    width: 23%;
}
.stats .data span.value-2 {
    width: 58%;
}
.stats .data span.value-3 {
    width: 36%;
}
.stats .data span.value-4 {
    width: 79%;
}
.stats .data span.value-5 {
    width: 48%;
}
.stats .result {
    display: block;
    margin-top: 10px;
    float: left;
}
.stats .result span {
    color: #fff;
    font-size: 12px;
}
.stats .result span b {
    font-weight: 700;
    color: #fff;
}
.stats .result span:before {
    content: "";
    display: inline-block;
    background: #e67373;
    width: 12px;
    height: 12px;
    vertical-align: top;
    margin: 5px 6px 0 0;
}
.testimonials ul {
    display: inline-block;
    width: 100%;
    min-height: 120px;
    position: relative;
    margin: 20px 0;
}
.testimonials li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.testimonials li img {
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 50%;
}
.testimonials li .title {
    font-size: 18px;
    font-weight: 700;
    padding: 30px 0 4px 0;
}
.testimonials li p {
    font-size: 12px;
    line-height: 18px;
    opacity: 0.8;
}
.testimonials .dots {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.testimonials .dot {
    float: left;
    content: "";
    height: 5px;
    background: #cfcfcf;
    cursor: pointer;
    transition: all 0.1s ease;
}
.testimonials .dot.active,
.testimonials .dot:hover {
    background: #ba6a6a;
}
.underConstruction * {
    color: #fff;
    text-align: left;
}
.underConstruction .title {
    font-size: 48px;
    font-weight: 700;
}
.underConstruction p {
    font-size: 14px;
}
.underConstruction .sm-countDown {
    margin-top: 20px;
}
.underConstruction .sm-countDown li {
    display: inline-block;
    padding: 4px;
    margin: 0 20px 0 0;
    color: #fff;
    font-size: 12px;
}
.underConstruction .sm-countDown li p {
    color: #fff;
    display: inline;
}
.underConstruction .sm-countDown li p span {
    font-weight: 700;
    font-size: 36px;
}
.underConstruction .progress {
    display: inline-block;
    width: 100%;
    height: 3px;
    position: relative;
    background: rgba(255, 255, 255, 0.2);
}
.underConstruction .progress .current {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 68%;
    height: 100%;
    background: #fff;
}
.underConstruction .progress span {
    position: absolute;
    top: -12px;
    right: -50px;
    font-size: 12px;
    background: #fff;
    color: #777;
    font-weight: 700;
    padding: 6px;
    border-radius: 4px;
}
.underConstruction .progress span:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 5px 0;
    border-color: transparent #fff transparent transparent;
}
@media screen and (max-width: 560px) {
    .underConstruction .sm-countDown li p span {
        font-size: 18px;
    }
    .underConstruction .progress span {
        display: none;
    }
}
.userProfile * {
    box-sizing: border-box;
}
.userProfile * {
    color: #222;
}
.userProfile .top {
    display: inline-block;
    width: 100%;
    clear: both;
    padding-bottom: 20px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.userProfile .left {
    float: left;
    width: 30%;
}
.userProfile .right {
    float: right;
    width: 65%;
    padding: 0 0 0 20px;
}
.userProfile .left .pic {
    width: 100%;
}
.userProfile .right .name {
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    width: 100%;
}
.userProfile .right .desc {
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
.userProfile .right a {
    font-weight: 700;
    font-size: 12px;
    color: #55822d;
    text-decoration: none;
    width: 100%;
    float: left;
    margin: 4px 0 0 0;
}
.userProfile .right a:first-of-type {
    margin-top: 12px;
}
.userProfile .right a:hover {
    color: #222;
}
.userProfile #profileSettings {
    display: inline-block;
}
.userProfile #profileSettings .title {
    font-size: 18px;
    opacity: 0.5;
    margin-bottom: 16px;
}
.userProfile #profileSettings .field {
    position: relative;
    display: inline-block;
    width: 100%;
    clear: both;
    margin: 10px 0;
}
.userProfile #profileSettings .field .subtitle {
    float: left;
    font-size: 13px;
    line-height: 20px;
}
.userProfile #profileSettings .field .subtitle:before {
    width: 4px;
    height: 4px;
    content: "";
    background: #222;
    border-radius: 50%;
    line-height: 20px;
    margin: 8px 4px 0 0;
    float: left;
}
.userProfile #profileSettings .chk {
    position: relative;
    width: 40px;
    text-align: center;
    float: right;
    margin-right: 30px;
}
.userProfile #profileSettings input,
.userProfile #profileSettings input:active {
    display: none;
    opacity: 0;
}
.userProfile #profileSettings label,
.userProfile #profileSettings label:after,
.userProfile #profileSettings label:before {
    transition: all 0.3s ease;
}
.userProfile #profileSettings label {
    display: block;
    position: relative;
    padding: 10px;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    height: 20px;
    border-radius: 18px;
    background: #f0f0f0;
    cursor: pointer;
}
.userProfile #profileSettings label:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    line-height: 18px;
    text-indent: 40px;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: auto;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #ddd;
}
.userProfile #profileSettings label:after {
    content: attr(data-off);
    display: block;
    position: absolute;
    z-index: 0;
    top: -7px;
    left: -40px;
    padding: 10px;
    height: 100%;
    width: 30px;
    text-align: center;
    color: #bfbfbf;
    white-space: nowrap;
}
.userProfile #profileSettings input:checked + label {
    box-shadow: inset 0 0 0 20px #3aaf39, 0 0 0 2px #3aaf39;
}
.userProfile #profileSettings input:checked + label:before {
    left: calc(100% - 20px);
    box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0, 0, 0, 0.3);
}
.userProfile #profileSettings input:checked + label:after {
    content: attr(data-on);
    left: 36px;
    width: 20px;
}
.welcomeMsg .title {
    font-size: 36px;
}
.welcomeMsg p {
    font-size: 14px;
    line-height: 24px;
    color: #999;
    margin: 20px 0;
    padding: 10px 0;
}
.welcomeMsg .close {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #f78f8f;
    padding: 10px 20px;
    border-radius: 6px;
    border-bottom: solid 2px #c06666;
    transition: all 0.1s ease;
}
.welcomeMsg .close:hover {
    background: #333;
    border-color: #000;
}
#slickGenerator {
    display: inline-block;
    width: 100%;
}
#slickGenerator .console,
#slickGenerator pre {
    background: #333;
    color: #fff;
    margin: 20px 0;
    width: 100%;
    line-height: 24px;
    overflow-x: auto;
}
#slickGenerator pre {
    padding: 20px 20px 20px 0;
}
#slickGenerator .code,
#slickGenerator .console,
#slickGenerator .console span,
#slickGenerator pre,
#slickGenerator pre span {
    font-family: Consolas, Courier, monospace;
}
#slickGenerator .console,
#slickGenerator .console span,
#slickGenerator pre,
#slickGenerator pre span {
    font-size: 14px;
}
#slickGenerator .com {
    color: #999;
    font-style: italic;
}
#slickGenerator .br {
    color: #bbb;
}
#slickGenerator .el {
    color: #ff5d5d;
}
#slickGenerator .c-yellow,
#slickGenerator .sel {
    color: #f3ed34;
}
#slickGenerator .mtd {
    color: #4f98d7;
}
#slickGenerator .bool {
    color: #ff5d5d;
}
#slickGenerator .array,
#slickGenerator .c-white,
#slickGenerator .setting {
    color: #fff;
}
#slickGenerator .endComma {
    font-style: normal;
    font-weight: 400;
    font-family: inherit;
    font-size: inherit;
    color: #fff;
}
#slickGenerator .hideComma .endComma {
    display: none;
}
#slickGenerator .code {
    display: inline-block;
    background: #eee;
    padding: 2px 4px;
}
#slickGenerator .code span {
    font-style: italic;
    font-size: 11px;
    color: #ff5d5d;
    font-weight: 700;
    letter-spacing: 1px;
    padding-left: 20px;
}
#slickGenerator .code span:before {
    content: "@type {";
}
#slickGenerator .code span:after {
    content: "}";
}
#main #section-1 .content #slickGenerator a,
#slickGenerator #main #section-1 .content a,
#slickGenerator .cta {
    display: inline-block;
    margin-top: 20px;
    font-weight: 700;
    color: #fff;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
#slickGenerator .pink {
    background: #f78f8f;
}
#slickGenerator .green {
    background: #3dc197;
}
#main #section-1 .content #slickGenerator a:hover,
#slickGenerator #main #section-1 .content a:hover,
#slickGenerator .cta:hover {
    background: #333;
}
#slickGenerator ::selection {
    color: #fff;
    background: #3dc197;
}
#slickGenerator #generator {
    float: left;
    width: 60%;
    padding-right: 60px;
}
#slickGenerator #generator .title {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 10px 0;
}
#slickGenerator .showMoreSettings {
    display: inline-block;
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
#slickGenerator .showMoreSettings:after {
    content: " »";
}
#slickGenerator .showMoreSettings:hover {
    opacity: 0.7;
}
#slickGenerator .moreSettings {
    display: none;
}
#slickGenerator .moreInfo_cta {
    color: #4f98d7;
    border-bottom: dashed 1px #4f98d7;
    cursor: pointer;
}
#slickGenerator p.moreInfo_content {
    display: none;
    background: #eee;
    padding: 30px;
}
#slickGenerator p.moreInfo_content span.code {
    background: #ddd;
}
#slickGenerator #generator .left,
#slickGenerator #generator .right {
    width: 50%;
    margin: 20px 0;
}
#slickGenerator #generator .left {
    float: left;
    padding-right: 30px;
}
#slickGenerator #generator .right {
    float: right;
    padding-left: 30px;
}
#slickGenerator .field,
#slickGenerator .fields {
    display: inline-block;
    width: 100%;
    position: relative;
}
#slickGenerator .fields {
    counter-reset: label;
}
#slickGenerator .field {
    line-height: 36px;
    min-height: 36px;
}
#slickGenerator .field:not(:last-of-type) {
    margin-bottom: 10px;
}
#slickGenerator .disabled {
    display: none;
}
#slickGenerator p.small {
    font-size: 12px;
    padding-left: 30px;
}
#slickGenerator .tip {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
    background: #333;
    font-size: 11px;
    color: #fff;
    padding: 10px 14px;
    width: 170px;
    height: 54px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.1s ease;
    z-index: -1;
}
#slickGenerator .tip:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    margin: 0 0 -4px 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
}
#slickGenerator .field label:hover ~ .tip {
    opacity: 1;
    transform: translateY(0);
    z-index: 99;
}
#slickGenerator input,
#slickGenerator label,
#slickGenerator select,
#slickGenerator textarea {
    float: left;
    width: 50%;
    font-size: 14px;
}
#slickGenerator label {
    margin-top: 6px;
}
#slickGenerator label:before {
    counter-increment: label;
    content: counter(label) ". ";
}
#slickGenerator input,
#slickGenerator select,
#slickGenerator textarea,
#slickGenerator textarea.code {
    background: #eee;
    padding: 6px 10px;
    -webkit-appearance: none;
    height: 100%;
}
#slickGenerator input:focus,
#slickGenerator select:focus,
#slickGenerator textarea:focus {
    outline: solid 1px #333;
}
#slickGenerator textarea {
    resize: none;
    min-height: 100px;
}
#slickGenerator textarea:focus {
    min-height: 200px;
}
#slickGenerator .styledSelect:after {
    content: "";
    width: 12px;
    height: 12px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 10px;
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='306px' height='306px' viewBox='0 0 306 306' style='enable-background:new 0 0 306 306;' xml:space='preserve'><polygon style='fill:#333' points='271.3,58.64 153,175.95 35.7,58.65 0,94.354 153,247.35 306,94.35'/></svg>")
        0 0 no-repeat;
    background-size: 100%;
    z-index: 10;
}
#slickGenerator input[type="range"] {
    margin-top: 10px;
    background: 0 0;
}
#slickGenerator input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #bbb;
    border-radius: 0;
}
#slickGenerator input[type="range"]::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    border: none;
    margin-top: -5px;
    -webkit-appearance: none;
}
#slickGenerator ::-webkit-input-placeholder {
    font-style: italic;
    opacity: 0.7;
}
#slickGenerator input:focus::-webkit-input-placeholder {
    opacity: 0;
}
#slickGenerator #results {
    background: #333;
    -webkit-backface-visibility: hidden;
    position: absolute;
    top: 40px;
    right: 0;
    width: 40%;
    margin-top: 0;
    padding: 30px 20px;
}
#slickGenerator #results .console {
    margin: 0;
    overflow-x: hidden;
    cursor: default;
    counter-reset: line;
    padding-left: 20px;
}
#slickGenerator #results .html {
    display: inline-block;
}
#slickGenerator #results .html.top {
    padding-top: 30px;
}
#slickGenerator #results .html.bottom {
    padding-bottom: 30px;
}
#slickGenerator #results .row {
    position: relative;
}
#slickGenerator #results .row:before {
    position: absolute;
    top: 2px;
    left: -10px;
    width: 20px;
    color: #999;
    font-size: 12px;
    text-align: right;
    counter-increment: line;
    content: counter(line);
}
#slickGenerator #results .html .row,
#slickGenerator #results .setting {
    width: 100%;
    padding: 2px 38px;
    color: #fff;
    line-height: 22px;
    white-space: nowrap;
}
#slickGenerator #results .setting,
#slickGenerator .hasSettings {
    display: none;
}
#slickGenerator #results .html .row:not(.hasSettings),
#slickGenerator #results .setting.visible {
    display: inline-block;
}
#slickGenerator .actions {
    display: inline-block;
    width: 100%;
    margin: 30px;
}
#slickGenerator .actions .copyCode.active {
    background: #3dc197;
}
#slickGenerator .actions .copyCode.active:after {
    display: inline-block;
    content: "";
    vertical-align: middle;
    margin: -6px 0 0 14px;
    padding: 0;
    width: 6px;
    height: 12px;
    border-style: none solid solid none;
    border-color: transparent #fff #fff transparent;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
#slickGenerator .actions .openPreview:hover {
    color: #fff;
}
#slickGenerator .actions .openPreview {
    display: inline-block;
    position: relative;
    color: #bbb;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
}
#slickGenerator .actions .openPreview:after {
    content: "»";
    padding-left: 6px;
}
@media (max-width: 1024px) {
    #slickGenerator #results,
    #slickGenerator .main {
        display: inline-block;
        height: auto;
    }
    #slickGenerator #generator {
        width: 100%;
        margin: 0;
    }
    #slickGenerator #results {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        margin-top: 0;
    }
}
@media (max-width: 800px) {
    #slickGenerator #generator,
    #slickGenerator #generator .left,
    #slickGenerator #generator .right {
        width: 100%;
        padding: 0;
    }
    #slickGenerator #results {
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 1024px) {
    #main #section-1 .content,
    #main > section:not(#section-1) .content {
        max-width: 100%;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
    #main #section-1 .content .title {
        font-size: 32px;
    }
    #main .left,
    #main .right {
        width: 100%;
        float: left;
        padding: 0;
    }
    #main .left {
        margin-bottom: 40px;
    }
    #main #section-2 .left ul li {
        display: inline-block;
        margin-right: 20px;
    }
    #main #section-2 .left a {
        margin-bottom: 30px;
    }
    #main #slickGenerator .section .val {
        top: -18px;
        right: 0;
    }
    #main #slickGenerator .section .val:before {
        display: none;
    }
    #main #slickGenerator .section .optionTitle .info {
        display: none;
    }
    #main #slickGenerator .section .optionTitle:hover {
        cursor: default;
    }
    #main .stats {
        display: inline-block;
        width: 100%;
        margin-bottom: 40px;
    }
    #main .stats .item {
        width: 60%;
    }
    #main .stats #circleChart {
        width: 30%;
    }
    #main #section-4 .content .block {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    #main #section-2 .left ul li {
        display: block;
        margin-right: 0;
    }
    #main .stats .item {
        width: 100%;
    }
    #main .stats #circleChart {
        width: 40%;
    }
}
/*# sourceMappingURL=main.min.css.map */