#main>section:not(#section-1) {
    width: 100%;
    top: 100%;
    padding: 80px 0;
    overflow: hidden;
    position: relative
}

#main>section:not(#section-1)>.content {
    max-width: 90%;
    display: block;
    margin: auto;
    position: relative
}

#main .left2 {
    float: left;
    width: 46%
}

#main .right {
    float: right;
    width: 54%;
    padding-left: 0px
}

#main #section-1 .content a,
#main .cta {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 44px;
    cursor: pointer;
    background: linear-gradient(to top, #333 50%, #f78f8f 50%);
    background-size: 100% 200%;
    background-position: top left
}

#main #section-1 .content a:hover,
#main .cta:hover {
    background-position: bottom left
}

#main #section-2 .left2 ul li:before,
#main .icon {
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: ""
}

#main .demos {
    display: inline-block;
    margin: 30px 0 40px 0
}

#main .demos>div {
    float: left;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer
}

#main .demos:not(.small)>div {
    background: rgba(0, 0, 0, .4);
    padding: 8px 12px;
    margin: 0 10px 10px 0
}

#main .demos:not(.small)>div:hover {
    background: #333
}

#main .demos.small {
    margin: 18px 0
}

#main .demos.small>div {
    margin: 0 16px 14px 0
}

#main .demos.small>div:hover {
    opacity: .7;
    text-decoration: underline
}

#main #section-1 {
    overflow: hidden;
    width: 100%;
    height: 100%
}

#main #section-1 .content {
    width: 80%;
    height: 200px;
    color: #fff;
    text-align: center
}

#main #section-1 .content .title {
    font-weight: 300;
    font-size: 46px;
    padding-bottom: 8px
}

#main #section-1 .content a {
    margin-top: 40px
}

#main #section-2 {
    background: #f78f8f;
    color: #fff
}

#main #section-2:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 600px 1920px 0 0;
    border-color: rgba(0, 0, 0, .1) transparent transparent transparent;
    z-index: 1
}

#main #section-2>div {
    position: relative;
    z-index: 2
}

#main #section-2 p {
    color: #fff
}

#main #section-2 .left2 .title {
    font-weight: 300;
    font-size: 40px
}

#main #section-2 .left2 .title span {
    display: block;
    font-weight: 700;
    font-size: 82px;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
    margin-bottom: 40px
}

#main #section-2 .left2 ul {
    margin: 30px 0
}

#main #section-2 .left2 ul li {
    float: left;
    clear: left;
    width: 45%;
    position: relative;
    margin-bottom: 18px;
    font-size: 14px;
    padding-right: 20px
}

#main #section-2 .left2 ul li:before {
    margin: -2px 10px 0 0;
    background-image: url(icons/check.svg);
    width: 20px;
    height: 20px;
    opacity: .7
}

#main #section-2 .left2 ul li:nth-child(even) {
    padding-right: 0;
    clear: none
}

#main #section-2 .left2 a {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px
}

#main #section-2 .left2 a:hover {
    opacity: .7
}

#main #section-3 {
    background: #fff
}

#main #section-4 {
    background: rgba(0, 0, 0, .4);
    height: 480px
}

#main #section-4:not(#section-1) {
    padding: 40px
}

#main #section-4 a {
    color: #fff
}

#main #section-4 .content {
    text-align: center
}

#main #section-4 .content .block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    text-align: center;
    margin: 50px auto 0 auto;
    opacity: 0;
    -webkit-animation: clients 20s infinite ease;
    animation: clients 20s infinite ease
}

#main #section-4 .content .block:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

#main #section-4 .content .block:nth-child(2) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

#main #section-4 .content .block:nth-child(3) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s
}

#main #section-4 .content .block:nth-child(4) {
    -webkit-animation-delay: 15s;
    animation-delay: 15s
}

#main #section-2 .left2 ul #section-4 .content .block li:before,
#main #section-4 .content .block #section-2 .left2 ul li:before,
#main #section-4 .content .block .icon {
    background-image: url(icons/star.svg);
    width: 14px;
    height: 14px;
    margin-bottom: 20px
}

#main #section-4 .content .block .title {
    font-size: 16px;
    font-weight: 700
}

#main #section-4 .content .block .client {
    font-size: 12px;
    color: #f78f8f
}

@-webkit-keyframes clients {
    0% {
        opacity: 0
    }

    2% {
        opacity: 1
    }

    24% {
        opacity: 1
    }

    26% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes clients {
    0% {
        opacity: 0
    }

    2% {
        opacity: 1
    }

    24% {
        opacity: 1
    }

    26% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

#main #section-1 #section-4 .content a,
#main #section-4 #section-1 .content a,
#main #section-4 .content .cta {
    margin: 240px 0 10px 0
}

#main #section-4 .content .price {
    font-size: 14px;
    display: block;
    clear: both;
    color: #fff;
    text-align: center
}

#main #section-4 .content .price span {
    font-weight: 700;
    font-size: 40px;
    margin-right: -6px
}

#main #section-5 p {
    font-size: 10px;
    text-align: center
}

#main #section-5 p span {
    display: block;
    height: 0;
    opacity: 0;
    font-size: 0
}

#main #section-5 p a {
    color: #fff
}

.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: .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(.7)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-zoomIn-out {
    0% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0;
        transform: scale(.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(.8) translateY(-30%)
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateY(0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-slideInTop-out {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateY(0)
    }

    100% {
        opacity: 0;
        transform: scale(.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(.8) translateY(30%)
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateY(0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-slideInBottom-out {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateY(0)
    }

    100% {
        opacity: 0;
        transform: scale(.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(.8) translateX(30%)
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateX(0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-slideInRight-out {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateX(0)
    }

    100% {
        opacity: 0;
        transform: scale(.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(.8) translateX(-30%)
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateX(0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-slideInLeft-out {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 1;
        transform: scale(.8) translateX(0)
    }

    100% {
        opacity: 0;
        transform: scale(.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(.5)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sm-rotateIn-out {
    0% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0;
        transform: rotate(720deg) scale(.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, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .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(.9, .9, .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(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .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(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .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(.215, .61, .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(.215, .61, .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(.215, .61, .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;
    height:60%!important;
}

@keyframes sm-bounceInLeft {

    0%,
    100%,
    60%,
    75%,
    90% {
        transition-timing-function: cubic-bezier(.215, .61, .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(.01) scaleX(0)
    }

    50% {
        transform: scaleY(.01) scaleX(1)
    }

    100% {
        transform: scaleY(1) scaleX(1)
    }
}

@keyframes sm-unFold-out {
    0% {
        transform: scaleY(1) scaleX(1)
    }

    50% {
        transform: scaleY(.01) scaleX(1)
    }

    100% {
        transform: scaleY(.01) scaleX(0)
    }
}

.sm-wrapper.sm-active div[data-sm-effect=flowIn] {
    animation-name: sm-flowIn;
    height:60%!important;
}

.sm-wrapper div[data-sm-effect=flowIn] {
    animation-name: sm-flowIn-out
}

@keyframes sm-flowIn {
    0% {
        opacity: 0;
        border-radius: 200px;
        transform: scale(.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(.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 .1s ease
}

.sm-wrapper .sm-button[data-sm-button-align=right][data-sm-button-place=inside] {
    right: 12px
}

@media screen and (max-width:768px){
    .sm-wrapper .sm-button[data-sm-button-align=right][data-sm-button-place=inside] {
        right: 15px;
        position: fixed;
        top: 15%;
    }
}

.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: .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 .2s ease;
    background: #3dc197
}

.mainDemo .close:hover {
    background: #333
}

.alert-1 {
    overflow: hidden;
    box-shadow: 0 0 30px rgba(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, .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, .2)
}

.alert-1 .close:hover {
    opacity: .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: .7
}

.alert-3 .action {
    float: left;
    width: 50%;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    padding: 16px;
    cursor: pointer;
    transition: all .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: .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 .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: .4;
    pointer-events: none
}

.carouselSlider .carouselList {
    position: relative;
    display: inline-block;
    left: 0;
    overflow: hidden;
    transition: all .3s ease
}

.carouselSlider .carouselList li {
    list-style: none;
    float: left;
    transition: opacity .2s ease
}

.carouselSlider .carouselList:hover li {
    opacity: 1
}

.carouselSlider .carouselList:hover li:not(:hover) {
    opacity: .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 .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: .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 .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 .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: .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: .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: .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: .5px
}

.content_box .content .close:hover {
    opacity: .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: .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, .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, .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, .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:768px) {
    .sm-popup{
        width: 100%;
    }
}
    
    
    @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: .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 .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: .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: .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: .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: .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: .7
}

.feedbackForm label {
    float: left;
    font-size: 14px;
    transition: all .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 .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 .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(.5, .5, .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(.5, .5, .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(.5, .5, .5);
        opacity: 0;
        animation-timing-function: linear
    }

    91.81% {
        transform: scale3d(.5, .5, .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(.5, .5, .5);
        opacity: 0;
        animation-timing-function: linear
    }

    91.56% {
        transform: scale3d(.5, .5, .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 .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 .2s ease
}

.imageGallery #prevItem {
    left: 0;
    transform: rotate(135deg)
}

.imageGallery #nextItem {
    right: 0;
    transform: rotate(-45deg)
}

.imageGallery #galleryWrap:hover .nav {
    opacity: .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 .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: .5;
    transition: all .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:#000000c4;
    border-radius: 6px;
    padding: 50px;
    transition: all .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 .left2 ul .userForm>div form .row li:before,
.userForm>div form .row #main #section-2 .left2 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, .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 .1s ease
}

.userForm>div .action {
    background: #444
}

.userForm>div .action2 {
    border: solid 2px #fff
}

.userForm>div .action2:hover,
.userForm>div .action:hover {
    opacity: .7
}

.userForm>div .back,
.userForm>div .info {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    opacity: .7
}

.userForm>div .back {
    cursor: pointer;
    margin-top: 14px
}

.userForm>div .back:hover {
    opacity: 1;
    text-decoration: underline
}
@media screen and (min-width:768px) {
    .userForm .login, .userForm .register{
        top: 20%;
    }

    .sm-wrapper .sm-button[data-sm-button-style*=cancel][data-sm-button-place=outside]{
        margin-top: 130px;
    }
}

@media screen and (max-width:420px) {
    .sm-wrapper .sm-button[data-sm-button-style*=cancel][data-sm-button-place=outside]{
        margin-top: 140px;
        margin-right: 26px;
    }

    .userForm .login,
    .userForm .register {
        padding: 30px;
        border-radius: 0;
        top:20%;
    }

    .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, .2)
}

.newsletterForm input[type=submit] {
    width: 35%;
    background: #333;
    font-weight: 700;
    cursor: pointer
}

.newsletterForm input[type=submit]:hover {
    opacity: .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, .2)
}

.notificationBanner .left2 {
    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, .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: .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 .left2,
.productQuickView .right {
    width: 50%
}

.productQuickView .left2 {
    float: left
}

.productQuickView .right {
    float: right;
    padding-left: 50px
}

.productQuickView .left2 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 0px 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: .4;
    transition: all .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, .2);
    width: 150px;
    text-align: center;
    overflow: hidden;
    margin: 0;
    transition: all .2s ease
}

.productQuickView .right .toCart:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
    transform: scale(.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 .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 .left2,
    .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 .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 .2s ease
}

.pulloutPricelist.visible {
    opacity: 1
}

.sm-sticky-button.open-pulloutPricelist {
    top: 48%;
    left: 10px;
    font-size: 14px;
    background: #38c184;
    transition: all .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 .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: .4;
    pointer-events: none
}

.pulloutPricelist .carouselList {
    position: relative;
    display: inline-block;
    left: 0;
    overflow: hidden;
    transition: all .3s ease
}

.pulloutPricelist .carouselList>li {
    list-style: none;
    float: left;
    transition: opacity .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 .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 .2s ease
}

.pulloutPricelist .close:hover {
    color: #555
}

.punchyBanner * {
    color: #fff
}

.punchyBanner {
    outline: solid 2px #efa414;
    outline-offset: 8px;
    overflow: hidden;
    position: relative;
    padding: 50px;
    height: 100%;
    max-height: 490px;
    width:540px;
}

.punchyBanner a {
    text-decoration: none
}

.punchyBanner .bg {
    position: absolute;
    bottom: -140px;
    right: -70px;
    color: #333;
    opacity: .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: .4em;
    height: .4em;
    border: .06em solid #fff;
    border-radius: .35em;
    position: absolute;
    left: 16px;
    top: 18px;
    opacity: .4
}

.siteSearch form .searchIcon::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -.15em;
    bottom: -.1em;
    border-width: 0;
    background: #fff;
    width: .2em;
    height: .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: .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, .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 .2s ease
}

.smoothBanner .bottom a:hover {
    background-position: top left
}
.punchyBanner .right .field{
    width:30%;
    margin-bottom:5px; 
    transform:skewX(-10deg);
}

.punchyBanner .promo_img{
    position:absolute; 
    left:0;
}

@media screen and (max-width:768px){
    .punchyBanner{
        padding:0;
        width:auto;
    }
    .punchyBanner .promo_img{
        position:relative;
    }
    .punchyBanner .right .field{
    width:80%;
    margin-bottom:5px; 
    transform:skewX(-10deg);
}
    
}

@media screen and (max-width:539px) {
       .punchyBanner{
        padding:0;
        width:auto;
    }
    .punchyBanner .promo_img{
        position:relative;
    }
    .punchyBanner .right .field{
    width:80%;
    margin-bottom:5px; 
    transform:skewX(-10deg);
}
    .smoothBanner .top .title {
        display: block;
        max-width: 50%;
        margin: auto
    }

    .smoothBanner .bottom {
        padding: 0 50px 50px 50px
    }
}

@media screen and (max-width:540px) {
           .punchyBanner{
        padding:0;
        width:auto;
    }
    .punchyBanner .promo_img{
        position:relative;
    }
    .punchyBanner .right .field{
    width:80%;
    margin-bottom:5px; 
    transform:skewX(-10deg);
}
    .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 .left2 ul .socialShare li:before,
.socialShare #main #section-2 .left2 ul li:before,
.socialShare .icon {
    float: left;
    width: 50px;
    height: 50px;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    transition: all .2s ease
}

#main #section-2 .left2 ul .socialShare li:hover:before,
.socialShare #main #section-2 .left2 ul li:hover:before,
.socialShare .icon:hover {
    opacity: .6
}

#main #section-2 .left2 ul .socialShare li.fb:before,
.socialShare #main #section-2 .left2 ul li.fb:before,
.socialShare .icon.fb {
    background-color: #3b5999
}

#main #section-2 .left2 ul .socialShare li.tw:before,
.socialShare #main #section-2 .left2 ul li.tw:before,
.socialShare .icon.tw {
    background-color: #55acee
}

#main #section-2 .left2 ul .socialShare li.in:before,
.socialShare #main #section-2 .left2 ul li.in:before,
.socialShare .icon.in {
    background-color: #e4405f
}

#main #section-2 .left2 ul .socialShare li.li:before,
.socialShare #main #section-2 .left2 ul li.li:before,
.socialShare .icon.li {
    background-color: #0077b5
}

.spinWheel * {
    box-sizing: border-box
}

.spinWheel {
    position: relative;
    opacity: 0;
    transition: opacity .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, .2);
    overflow: hidden;
    transition: all 8s cubic-bezier(0, .99, .45, .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, .3);
    cursor: pointer;
    z-index: 2
}

.spinWheel .wheelWrap .start:hover {
    background: #139cb2
}

.spinWheel .wheelWrap .start:active {
    transform: scale(.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, .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(.2);
    transition: all .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 .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: .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: .8
}

.testimonials .dots {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.testimonials .dot {
    float: left;
    content: '';
    height: 5px;
    background: #cfcfcf;
    cursor: pointer;
    transition: all .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, .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, .1);
    margin-bottom: 20px
}

.userProfile .left2 {
    float: left;
    width: 30%
}

.userProfile .right {
    float: right;
    width: 65%;
    padding: 0 0 0 20px
}

.userProfile .left2 .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: .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 .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, .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, .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 .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 .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: .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 .left2,
#slickGenerator #generator .right {
    width: 50%;
    margin: 20px 0
}

#slickGenerator #generator .left2 {
    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 .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: .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 .left2,
    #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 .left2,
    #main .right {
        width: 100%;
        float: left;
        padding: 0
    }

    #main .left2 {
        margin-bottom: 40px
    }

    #main #section-2 .left2 ul li {
        display: inline-block;
        margin-right: 20px
    }

    #main #section-2 .left2 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 .left2 ul li {
        display: block;
        margin-right: 0
    }

    #main .stats .item {
        width: 100%
    }

    #main .stats #circleChart {
        width: 40%
    }
}

/*# sourceMappingURL=main.min.css.map */