body {
    margin: 0;
    padding: 0
}

.fnc-slider {
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: inherit
}

.fnc-slide__inner {
    background: #000;
}

.particle-wis-logo {
    z-index: 999999;
    border: 0;
    left: 0;
    position: absolute;
    padding: 0 0 0 4vw;
    top: 70px;
    width: 35%;
}

.fnc-slider *,
.fnc-slider *:before,
.fnc-slider *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.fnc-slider__slides {
    position: relative;
    height: 100%;
    transition: -webkit-transform 1s .6666666667s;
    -webkit-transition: -webkit-transform 1s .6666666667s;
    transition: transform 1s .6666666667s;
    transition: transform 1s .6666666667s, -webkit-transform 1s .6666666667s
}

.fnc-slider .m--blend-dark .fnc-slide__inner {
    background-color: #ead200
}

.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
    background-color: #1780cb
}

.fnc-slider .m--navbg-dark {
    background-color: #ff7c00
}

.fnc-slider .m--blend-green .fnc-slide__inner {
    background-color: #ffaf10
}

.fnc-slider .m--blend-green .fnc-slide__mask-inner {
    background-color: #42605E
}

.fnc-slider .m--navbg-green {
    background-color: #42605E
}

.fnc-slider .m--blend-red .fnc-slide__inner {
    background-color: #ea2329
}

.fnc-slider .m--blend-red .fnc-slide__mask-inner {
    background-color: #990e13
}

.fnc-slider .m--navbg-red {
    background-color: #990e13
}

.fnc-slider .m--blend-blue .fnc-slide__inner {
    background-color: #59aecb
}

.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
    background-color: #2D7791
}

.fnc-slider .m--navbg-blue {
    background-color: #2D7791
}

.fnc-slide {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.fnc-slide.m--before-sliding {
    z-index: 2 !important;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.fnc-slide.m--active-slide {
    z-index: 1;
    transition: -webkit-transform 1s .6666666667s ease-in-out;
    -webkit-transition: -webkit-transform 1s .6666666667s ease-in-out;
    transition: transform 1s .6666666667s ease-in-out;
    transition: transform 1s .6666666667s ease-in-out, -webkit-transform 1s .6666666667s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

body .fnc-nav__controls {
    line-height: .2vw !important
}

.fnc-slide__inner {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center top;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m--global-blending-active .fnc-slide__inner,
.m--blend-bg-active .fnc-slide__inner {
    background-blend-mode: luminosity
}

.m--before-sliding .fnc-slide__inner {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

.m--active-slide .fnc-slide__inner {
    transition: -webkit-transform 1s .6666666667s ease-in-out;
    -webkit-transition: -webkit-transform 1s .6666666667s ease-in-out;
    transition: transform 1s .6666666667s ease-in-out;
    transition: transform 1s .6666666667s ease-in-out, -webkit-transform 1s .6666666667s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.fnc-slide__mask {
    overflow: hidden;
    z-index: 1;
    position: absolute;
    right: 60%;
    top: 15%;
    width: 50.25vh;
    height: 67vh;
    margin-right: -90px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

.m--before-sliding .fnc-slide__mask {
    -webkit-transform: rotate(-10deg) translate3d(200px, 0, 0);
    transform: rotate(-10deg) translate3d(200px, 0, 0);
    opacity: 0
}

.m--active-slide .fnc-slide__mask {
    transition: opacity .35s 1.2222222222s, -webkit-transform .7s 1.2222222222s;
    -webkit-transition: opacity .35s 1.2222222222s, -webkit-transform .7s 1.2222222222s;
    transition: transform .7s 1.2222222222s, opacity .35s 1.2222222222s;
    transition: transform .7s 1.2222222222s, opacity .35s 1.2222222222s, -webkit-transform .7s 1.2222222222s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.m--previous-slide .fnc-slide__mask {
    transition: opacity .35s .6833333333s, -webkit-transform .7s .3333333333s;
    -webkit-transition: opacity .35s .6833333333s, -webkit-transform .7s .3333333333s;
    transition: transform .7s .3333333333s, opacity .35s .6833333333s;
    transition: transform .7s .3333333333s, opacity .35s .6833333333s, -webkit-transform .7s .3333333333s;
    -webkit-transform: rotate(10deg) translate3d(-200px, 0, 0);
    transform: rotate(10deg) translate3d(-200px, 0, 0);
    opacity: 0
}

.fnc-slide__mask-inner {
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: inherit;
    margin-left: -50vw;
    margin-top: -50vh;
    background-size: cover;
    background-position: center center;
    background-blend-mode: luminosity;
    -webkit-transform-origin: 50% 16.5vh;
    transform-origin: 50% 16.5vh;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

.m--before-sliding .fnc-slide__mask-inner {
    -webkit-transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
    transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0)
}

.m--active-slide .fnc-slide__mask-inner {
    transition: -webkit-transform .7s 1.2222222222s;
    -webkit-transition: -webkit-transform .7s 1.2222222222s;
    transition: transform .7s 1.2222222222s;
    transition: transform .7s 1.2222222222s, -webkit-transform .7s 1.2222222222s;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.m--previous-slide .fnc-slide__mask-inner {
    transition: -webkit-transform .7s .3333333333s;
    -webkit-transition: -webkit-transform .7s .3333333333s;
    transition: transform .7s .3333333333s;
    transition: transform .7s .3333333333s, -webkit-transform .7s .3333333333s;
    -webkit-transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
    transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0)
}

.fnc-slide__content {
    bottom: 20px;
    width: 50vw;
    max-width: 50vw;
    color: #fff;
    padding: 0 0 0 8vw;
    position: absolute;
    z-index: 25;
    left: 0
}

.fnc-slide__heading {
    margin-bottom: 10px;
    color: currentColor;
    font-weight: 400
}

.fnc-slide__heading-line {
    overflow: hidden;
    position: relative
}

.fnc-slide__subheading {
    color: currentColor;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
    font-size: 1.375rem;
    font-weight: 400;
    max-width: 600px
}

.m--before-sliding .fnc-slide__heading-line {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.m--active-slide .fnc-slide__heading-line {
    transition: -webkit-transform 1.5s 1s;
    -webkit-transition: -webkit-transform 1.5s 1s;
    transition: transform 1.5s 1s;
    transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.m--previous-slide .fnc-slide__heading-line {
    transition: -webkit-transform 1.5s;
    -webkit-transition: -webkit-transform 1.5s;
    transition: transform 1.5s;
    transition: transform 1.5s, -webkit-transform 1.5s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.fnc-slide__heading-line span {
    display: block;
    line-height: 1.15
}

.m--before-sliding .fnc-slide__heading-line span {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.m--active-slide .fnc-slide__heading-line span {
    transition: -webkit-transform 1.5s 1s;
    -webkit-transition: -webkit-transform 1.5s 1s;
    transition: transform 1.5s 1s;
    transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.m--previous-slide .fnc-slide__heading-line span {
    transition: -webkit-transform 1.5s;
    -webkit-transition: -webkit-transform 1.5s;
    transition: transform 1.5s;
    transition: transform 1.5s, -webkit-transform 1.5s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.fnc-nav {
    z-index: 5;
    position: absolute;
    right: 0;
    bottom: 0
}

.fnc-nav__bgs {
    z-index: -1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.fnc-nav__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.fnc-nav__bg.m--nav-bg-before {
    z-index: 2 !important;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.fnc-nav__bg.m--active-nav-bg {
    z-index: 1;
    transition: -webkit-transform 1s .6666666667s;
    -webkit-transition: -webkit-transform 1s .6666666667s;
    transition: transform 1s .6666666667s;
    transition: transform 1s .6666666667s, -webkit-transform 1s .6666666667s;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.fnc-nav__controls {
    font-size: 0
}

.fnc-nav__control {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-transition: background-color .5s;
    transition: background-color .5s
}

.fnc-nav__control.m--active-control {
    background: #1F2833
}

.fnc-nav__control-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important
}

.m--with-autosliding .m--active-control .fnc-nav__control-progress {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.m--prev-control .fnc-nav__control-progress {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform .5s !important;
    -webkit-transition: -webkit-transform .5s !important;
    transition: transform .5s !important;
    transition: transform .5s, -webkit-transform .5s !important
}

.m--reset-progress .fnc-nav__control-progress {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transition: -webkit-transform 0s 0s !important;
    -webkit-transition: -webkit-transform 0s 0s !important;
    transition: transform 0s 0s !important;
    transition: transform 0s 0s, -webkit-transform 0s 0s !important
}

.m--autosliding-blocked .fnc-nav__control-progress {
    -webkit-transition: all 0s 0s !important;
    transition: all 0s 0s !important;
    -webkit-transform: scaleX(0) !important;
    transform: scaleX(0) !important
}

.demo-cont {
    overflow: hidden;
    position: relative;
    height: 100vh;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    background: #000;
    padding: 0 !important
}

.slider-controls ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.slider-controls ul li:not(:last-child) {
    padding-right: 30px
}

.heading-bold {
    font-family: 'Libre Baskerville', serif;
    font-size: 3vw;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding: 0
}

.texteffect {
    -webkit-animation: .2s .40s fade backwards ease-out;
    animation: .2s .40s fade backwards ease-out
}

.heading-sub {
    width: 60%
}

.bannerpt {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.4vw;
    font-weight: 400;
    color: #fff;
    margin: 0
}

.read-button-b {
    padding: 5px 0 10px
}

.read-button-b a, .slider_btn {
    background-color: #003466;
    color: #fff;
    padding: 1vw 2vw 1vw;
    text-decoration: none;
    height: 3vw;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    line-height: 1vw;
    border-radius: .8vw;
    border-radius: 30px;
    border-color: transparent;
}

.read-button-b a:hover, .slider_btn:hover {
    background-color: #fff;
    color: #000
}

.scene {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    border-bottom: 0 solid #342a2a;
    height: 50vw;
    z-index: 10
}

.scene>div {
    position: absolute;
    bottom: 0
}

.scene>div.clouds {
    left: 25vw;
    margin-left: -20vw;
    bottom: 0;
    top: 7vw
}

.clouds .rotate-div span {
    width: 6vw;
    background: url(../images/slider/first-slider-icon.png) 0 .4vw;
    height: 5vw;
    display: inline-block;
    background-size: 17vw
}

.scene>div.iconjs {
    left: 29vw;
    margin-left: -3vw;
    bottom: 0;
    top: 8vw
}

.iconjs .rotate-div span {
    width: 6vw;
    background: url(../images/slider/first-slider-icon.png) -5.5vw .5vw;
    height: 5vw;
    display: inline-block;
    background-size: 17vw
}

.scene div.iconhtml {
    left: 28vw;
    margin-left: 12vw;
    bottom: 20vw
}

.iconhtml .rotate-div span {
    width: 6vw;
    background: url(../images/slider/first-slider-icon.png) -4vw 5vw;
    height: 5vw;
    display: inline-block;
    background-size: 14vw
}

.scene div.desktopicon {
    left: 0;
    margin-left: 4vw;
    bottom: 0;
    top: 40vw
}

.desktopicon .rotate-div span {
    width: 6vw;
    background: url(../images/slider/first-slider-icon.png) -.5vw 6vw;
    height: 5vw;
    display: inline-block;
    background-size: 18vw
}

.scene div.iconcss {
    left: 24vw;
    margin-left: 1vw;
    bottom: 10vw
}

.iconcss .rotate-div span {
    width: 6vw;
    background: url(../images/slider/first-slider-icon.png) -12vw 5.9vw;
    height: 5vw;
    display: inline-block;
    background-size: 17.5vw
}

.scene div.wall {
    width: 708px;
    height: 627px;
    background: url(../images/slider/wall.png) no-repeat center;
    z-index: 100;
    right: 0;
    bottom: 60px;
    margin-left: 0;
    z-index: 10
}

.scene div.seo-bg {
    width: 56vw;
    height: 40vw;
    background: url(../images/slider/seo-article.png) no-repeat center;
    z-index: 100;
    right: 7.5vw;
    bottom: 50px;
    margin-left: -290px;
    z-index: 15;
    background-size: 50vw
}

.scene>div.seo-c1 {
    left: 41vw;
    margin-left: -29vw;
    bottom: 0;
    top: 9vw
}

.seo-c1 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) 0 -.5vw;
    height: 5vw;
    display: inline-block;
    background-size: 27vw
}

.scene>div.seo-c2 {
    left: 60vw;
    margin-left: -33vw;
    bottom: 0;
    top: 8vw
}

.seo-c2 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) -6vw -1vw;
    height: 4vw;
    display: inline-block;
    background-size: 27vw
}

.scene>div.seo-c3 {
    left: 75vw;
    margin-left: -32vw;
    bottom: 0;
    top: 15vw
}

.seo-c3 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) -11vw -1vw;
    height: 4vw;
    display: inline-block;
    background-size: 26vw
}

.scene>div.seo-c4 {
    left: 3vw;
    margin-left: 0;
    bottom: 3vw;
    top: 38vw
}

.seo-c4 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) -6vw -6.5vw;
    height: 4vw;
    display: inline-block;
    background-size: 26vw
}

.scene>div.seo-c5 {
    left: 23vw;
    margin-left: -5vw;
    bottom: 9vw
}

.seo-c5 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) -1vw -6.5vw;
    height: 4vw;
    display: inline-block;
    background-size: 26vw
}

.scene>div.seo-c6 {
    left: 31vw;
    margin-left: 0;
    bottom: 6vw
}

.seo-c6 .rotate-div span {
    width: 6vw;
    background: url(../images/slider/seo-icon.png) -11.5vw -7vw;
    height: 4vw;
    display: inline-block;
    background-size: 26vw
}

.scene>div.seo-c7 {
    left: 32vw;
    margin-left: 0;
    bottom: 16vw
}

.seo-c7 .rotate-div span {
    width: 4vw;
    background: url(../images/slider/seo-icon.png) -17vw -7vw;
    height: 3vw;
    display: inline-block;
    background-size: 26vw
}

.scene>div.seo-c8 {
    width: 2vw;
    right: 24vw;
    margin-left: 0;
    height: 3vw;
    bottom: 11vw;
    z-index: 26;
    transform: rotate(-90deg)
}

.scene>div.seo-c9 {
    width: 162px;
    right: -10%;
    margin-left: 0;
    height: 117px;
    top: 16%;
    z-index: 16
}

.img-wdth {
    width: 100%;
    max-width: 100%
}

#gear1,
#gear2,
#gear3 {
    color: #888;
    display: block;
    float: left;
    position: absolute
}

#gear1 {
    top: 4vw;
    background: url(../images/slider/seo-icon.png) -26.7vw -11.7vw;
    width: 6vw;
    height: 6vw;
    background-size: 26vw
}

#gear2 {
    left: 4.5vw;
    background: url(../images/slider/seo-icon.png) -26.7vw -11.7vw;
    width: 6vw;
    height: 6vw;
    background-size: 26vw
}

#gear3 {
    top: 4vw;
    left: 9vw;
    background: url(../images/slider/seo-icon.png) -26.7vw -11.7vw;
    width: 6vw;
    height: 6vw;
    background-size: 26vw
}

.spin {
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite
}

.spin-back {
    -webkit-animation: spin-back 4s linear infinite;
    -moz-animation: spin-back 4s linear infinite;
    animation: spin-back 4s linear infinite
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes spin-back {
    100% {
        -moz-transform: rotate(-360deg)
    }
}

@-webkit-keyframes spin-back {
    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes spin-back {
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

#axis {
    position: absolute;
    z-index: 25;
    width: 258px;
    height: 87px;
    right: 80px;
    top: -50%
}

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    z-index: 25
}

.move-down {
    transform: translate(0, 350px);
    -webkit-transform: translate(0, 350px);
    -o-transform: translate(0, 350px);
    -moz-transform: translate(0, 350px);
    top: 10%
}

.coin {
    top: 0;
    left: 0;
    z-index: 25
}

#table {
    position: absolute;
    z-index: 25;
    width: 60vw;
    height: 50vw;
    right: 8vw;
    bottom: 0
}

#table .table,
#person .person {
    bottom: 0;
    right: 0;
    z-index: 25
}

.seo-c9 {
    position: absolute;
    right: 43px;
    top: 75px
}

.heartbig .heart {
    left: 1px;
    top: 18px
}

.heartsmall .heart {
    left: 14px;
    top: 12px
}

.heart {
    fill: red;
    position: relative;
    top: 0;
    width: 13px;
    animation: .8s infinite pulse
}

.ecommerce-st {
    width: 56vw;
    height: 40vw;
    background: url(../images/slider/ecommerece-slide.png) no-repeat center;
    z-index: 100;
    right: 4vw;
    bottom: 0;
    margin-left: 0;
    z-index: 15;
    background-size: 53vw
}

.eco-icon1 {
    left: 5vw;
    margin-left: 0;
    bottom: 6%;
    top: 5vw
}

.eco-icon1 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -4vw -2vw;
    height: 5vw;
    display: inline-block;
    background-size: 34vw
}

.eco-icon2 {
    left: 22vw;
    margin-left: 0;
    bottom: 6%;
    top: 10vw
}

.eco-icon2 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -12vw -3vw;
    height: 5vw;
    display: inline-block;
    background-size: 36vw
}

.eco-icon3 {
    left: 36vw;
    margin-left: 0;
    bottom: 6%;
    top: 6vw
}

.eco-icon3 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -18vw -3vw;
    height: 5vw;
    display: inline-block;
    background-size: 32vw
}

.eco-icon4 {
    left: 57vw;
    margin-left: 0;
    bottom: 6%;
    top: 6vw
}

.eco-icon4 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -24vw -4vw;
    height: 5vw;
    display: inline-block;
    background-size: 32vw
}

.eco-icon5 {
    left: 8vw;
    margin-left: 0;
    bottom: 5vw
}

.eco-icon5 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -49vw -88vw;
    height: 5vw;
    display: inline-block;
    background-size: 32vw
}

.eco-icon6 {
    left: 19vw;
    margin-left: 0;
    bottom: 13%;
    top: 38vw
}

.eco-icon6 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -42vw -88vw;
    height: 5vw;
    display: inline-block;
    background-size: 32vw
}

.eco-icon7 {
    left: 38vw;
    margin-left: 0;
    bottom: 13%;
    top: 31vw
}

.eco-icon7 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/ecommerce-icon.png) -34vw -88vw;
    height: 5vw;
    display: inline-block;
    background-size: 32vw
}

.app-st {
    width: 56vw;
    height: 40vw;
    background: url(../images/slider/app-slider.png) no-repeat center;
    z-index: 100;
    right: 0;
    bottom: 60px;
    margin-left: 0;
    z-index: 15;
    background-size: 41vw
}

.app-icon1 {
    left: 5vw;
    margin-left: 0;
    bottom: 6%;
    top: 7vw
}

.app-icon1 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -3vw -2vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon2 {
    left: 27vw;
    margin-left: 0;
    bottom: 6%;
    top: 6vw
}

.app-icon2 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -10vw -3vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon3 {
    left: 37vw;
    margin-left: 0;
    bottom: 6%;
    top: 16vw
}

.app-icon3 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -20vw -3vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon4 {
    left: 54vw;
    margin-left: 0;
    bottom: 6%;
    top: 6vw
}

.app-icon4 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -24vw -3vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon5 {
    left: 34vw;
    margin-left: 0;
    bottom: 6%;
    top: 31vw
}

.app-icon5 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -33vw -3vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon6 {
    left: 31vw;
    margin-left: 0;
    bottom: 6%;
    top: 43vw
}

.app-icon6 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -27vw -10vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon7 {
    left: 22vw;
    margin-left: 0;
    bottom: 6%;
    top: 35vw
}

.app-icon7 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -19vw -10vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon8 {
    left: 14vw;
    margin-left: 0;
    bottom: 6%;
    top: 45vw
}

.app-icon8 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -9vw -11vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.app-icon9 {
    left: 4vw;
    margin-left: 0;
    bottom: 6%;
    top: 40vw
}

.app-icon9 .rotate-div span {
    width: 7vw;
    background: url(../images/slider/app-icon.png) -4vw -11vw;
    height: 6vw;
    display: inline-block;
    background-size: 40vw
}

.rotate-div {
    transform-origin: 50px 5px;
    transition: transform 15s ease-in 15s;
    animation-duration: 15s;
    animation-name: paragato;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    -webkit-animation-duration: 15s;
    -webkit-animation-name: paragato;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes paragato {
    from {
        transform: rotate(-20deg)
    }

    to {
        transform: rotate(20deg)
    }
}

@-webkit-keyframes paragato {
    from {
        transform: rotate(-20deg)
    }

    to {
        transform: rotate(20deg)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.1)
    }

    40% {
        transform: scale(1)
    }

    60% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes fade {
    from {
        transform: translateY(.25em);
        opacity: 0
    }
}

@keyframes fade {
    from {
        transform: translateY(.25em);
        opacity: 0
    }
}

.mtop {
    margin: .8vw 0 .8vw
}

@media only screen and (max-width:1024px) {
    #table {
        width: 490px;
        height: 415px
    }

    #table .table,
    #person .person {
        width: 100%;
        bottom: inherit
    }

    .fnc-slide__content {
        width: 100%;
        max-width: 100%;
        bottom: 100px
    }

    .scene div.seo-bg {
        width: 388px;
        height: 362px;
        margin-left: 0;
        background-size: 100%;
        top: 94px
    }

    .ecommerce-st {
        width: 442px;
        height: 100%;
        z-index: 15;
        background-size: 400px
    }

    .heading-bold {
        font-size: 29px
    }

    .app-st {
        width: 100%;
        height: 100%;
        ;
        left: 16%;
        right: 0;
        background-size: 500px
    }
}

@media only screen and (max-width:767px) {
    .bannerpt {
        font-size: .4em
    }

    .read-button-b a, .slider_btn {
        padding: 15px 20px 20px;
        height: 25px
    }

    img.object.table.move-left {
        width: 100%;
        height: auto
    }

    .fnc-slide__content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-top: 0;
        z-index: 16;
        top: 90px
    }

    .heading-bold {
        font-size: 29px
    }

    .scene {
        height: 620px
    }

    .scene div.wall {
        width: 100%;
        height: 100%;
        margin-left: 0
    }

    #table {
        width: 100%;
        height: 300px;
        bottom: inherit;
        text-align: center;
        top: 51%
    }

    #table img {
        display: inline-block;
        width: 100% !important;
        position: relative
    }

    .scene>div.iconjs {
        margin-left: -142px;
        top: 3%
    }

    .scene div.iconhtml {
        left: 83%;
        margin-left: 0;
        bottom: inherit;
        top: 10%
    }

    .scene div.desktopicon {
        left: 5%;
        top: 34%
    }

    .scene div.iconcss {
        left: 82%;
        margin-left: 0;
        top: 34%
    }

    .scene div.seo-bg {
        width: 100%;
        height: 100%;
        margin-left: 0;
        background-size: 400px;
        top: 21%;
        bottom: 31px;
        right: 0 !important
    }

    .scene>div.seo-c1 {
        left: 0;
        margin-left: 0;
        top: 1%
    }

    .scene>div.seo-c2 {
        left: 76%;
        margin-left: 0;
        top: 6%
    }

    .scene>div.seo-c3 {
        left: 3%;
        margin-left: 0;
        top: 42%;
        z-index: 9999
    }

    .scene>div.seo-c4 {
        left: 73%;
        margin-left: 0;
        bottom: 30px;
        top: 31%;
        z-index: 9999
    }

    .seo-c9 {
        right: 23px;
        top: 236px
    }

    .ecommerce-st {
        width: 100%;
        height: 100%;
        background-size: 460px;
        top: 21%;
        right: 0 !important
    }

    .eco-icon1 {
        top: 4%
    }

    .eco-icon2 {
        left: 2%
    }

    .eco-icon3 {
        left: 20%;
        top: 32%;
        z-index: 99
    }

    .eco-icon4 {
        left: 85%;
        top: 9%
    }

    .eco-icon5 {
        left: 4%;
        top: 64%
    }

    .eco-icon7 {
        left: 84%;
        top: 37%
    }

    .eco-icon6 {
        left: 82%;
        z-index: 99;
        top: 65%
    }

    .app-st {
        width: 100%;
        height: 100%;
        left: 0;
        padding: 0 !important;
        background-size: 287px;
        top: 21%;
        right: 0 !important
    }

    .app-icon1 {
        left: 9%;
        top: 2%
    }

    .app-icon2 {
        left: 1%;
        top: 16%
    }

    .app-icon3 {
        left: 8%;
        top: 37%;
        z-index: 99
    }

    .app-icon4 {
        left: 83%;
        top: 8%;
        z-index: 99
    }

    .app-icon5 {
        left: 82%;
        z-index: 99
    }

    .app-icon6 {
        left: 83%;
        top: 32%;
        z-index: 99
    }

    .app-icon7 {
        left: 4%;
        top: 54%;
        z-index: 99
    }

    .app-icon8 {
        left: 55%;
        top: 42%;
        z-index: 99
    }

    #axis,
    .scene>div.clouds,
    .scene>div.iconjs,
    .scene div.iconhtml,
    .scene div.desktopicon,
    .scene div.iconcss {
        z-index: 99
    }

    .demo-cont {
        height: 673px
    }

    .app-icon1,
    .app-icon2,
    .app-icon3,
    .app-icon4,
    .app-icon5,
    .app-icon6,
    .app-icon7,
    .app-icon8,
    .app-icon9,
    .app-icon9,
    .eco-icon1,
    .eco-icon2,
    .eco-icon3,
    .eco-icon4,
    .eco-icon5,
    .eco-icon6,
    .eco-icon7,
    .seo-c1,
    .seo-c2,
    .seo-c3,
    .seo-c4,
    .seo-c5,
    .seo-c6,
    .seo-c7,
    .seo-c8,
    .seo-c9,
    .desktopicon,
    .iconcss,
    .iconhtml,
    .iconjs,
    .clouds {
        z-index: 99
    }
}

@media only screen and (max-width:1200px) {
    .fnc-slide__inner:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .4)
    }

    .fnc-slide__subheading {
        max-width: 380px
    }
}

@media only screen and (max-width:767px) {
    .fnc-slide__content {
        padding: 0 2rem;
        margin-top: 2.5rem;
        z-index: 15;
        text-align: center
    }

    .fnc-slide__subheading {
        font-size: 1rem
    }

    .fnc-slide__subheading {
        max-width: 100%
    }

    .fnc-slide__inner:after {
        background-color: rgba(0, 0, 0, .6)
    }

    .request-block {
        right: 20px
    }

    .image-width {
        width: 75px;
        height: 75px;
        left: 50%;
        margin-left: -35px;
        top: 100px
    }

    .scene div.wall {
        width: 100%;
        height: 100%;
        margin-left: 0
    }

    #table {
        width: 100%;
        height: 300px;
        bottom: inherit;
        text-align: center;
        top: 51%
    }

    #table img {
        display: inline-block;
        width: 100% !important;
        position: relative
    }

    .scene>div.iconjs {
        margin-left: -142px;
        top: 3%
    }

    .scene div.iconhtml {
        left: 83%;
        margin-left: 0;
        bottom: inherit;
        top: 10%
    }

    .scene div.desktopicon {
        left: 5%;
        top: 34%
    }

    .scene div.iconcss {
        left: 82%;
        margin-left: 0;
        top: 34%
    }

    .scene div.seo-bg {
        width: 100%;
        height: 100%;
        margin-left: 0;
        background-size: 400px;
        top: 21%;
        bottom: 31px;
        right: 0 !important
    }

    .scene>div.seo-c1 {
        left: 0;
        margin-left: 0;
        top: 1%
    }

    .scene>div.seo-c2 {
        left: 76%;
        margin-left: 0;
        top: 6%
    }

    .scene>div.seo-c3 {
        left: 3%;
        margin-left: 0;
        top: 42%;
        z-index: 9999
    }

    .scene>div.seo-c4 {
        left: 73%;
        margin-left: 0;
        bottom: 30px;
        top: 31%;
        z-index: 9999
    }

    .seo-c9 {
        right: 23px;
        top: 236px
    }

    .ecommerce-st {
        width: 100%;
        height: 100%;
        background-size: 460px;
        top: 21%;
        right: 0 !important
    }

    .eco-icon1 {
        top: 4%
    }

    .eco-icon2 {
        left: 2%
    }

    .eco-icon3 {
        left: 20%;
        top: 32%;
        z-index: 99
    }

    .eco-icon4 {
        left: 85%;
        top: 9%
    }

    .eco-icon5 {
        left: 4%;
        top: 64%
    }

    .eco-icon7 {
        left: 84%;
        top: 37%
    }

    .eco-icon6 {
        left: 82%;
        z-index: 99;
        top: 65%
    }

    .app-st {
        width: 100%;
        height: 100%;
        left: 0;
        padding: 0 !important;
        background-size: 287px;
        top: 21%;
        right: 0 !important
    }

    .app-icon1 {
        left: 9%;
        top: 2%
    }

    .app-icon2 {
        left: 1%;
        top: 16%
    }

    .app-icon3 {
        left: 8%;
        top: 37%;
        z-index: 99
    }

    .app-icon4 {
        left: 83%;
        top: 8%;
        z-index: 99
    }

    .app-icon5 {
        left: 82%;
        z-index: 99
    }

    .app-icon6 {
        left: 83%;
        top: 32%;
        z-index: 99
    }

    .app-icon7 {
        left: 4%;
        top: 54%;
        z-index: 99
    }

    .app-icon8 {
        left: 55%;
        top: 42%;
        z-index: 99
    }

    #axis,
    .scene>div.clouds,
    .scene>div.iconjs,
    .scene div.iconhtml,
    .scene div.desktopicon,
    .scene div.iconcss {
        z-index: 99
    }

    .demo-cont {
        height: 673px
    }

    .app-icon1,
    .app-icon2,
    .app-icon3,
    .app-icon4,
    .app-icon5,
    .app-icon6,
    .app-icon7,
    .app-icon8,
    .app-icon9,
    .app-icon9,
    .eco-icon1,
    .eco-icon2,
    .eco-icon3,
    .eco-icon4,
    .eco-icon5,
    .eco-icon6,
    .eco-icon7,
    .seo-c1,
    .seo-c2,
    .seo-c3,
    .seo-c4,
    .seo-c5,
    .seo-c6,
    .seo-c7,
    .seo-c8,
    .seo-c9,
    .desktopicon,
    .iconcss,
    .iconhtml,
    .iconjs,
    .clouds {
        z-index: 99
    }

    @keyframes grow {
        0% {
            height: 0;
            top: 0
        }

        100% {
            height: 135px;
            top: 0
        }
    }
}

@media only screen and (max-width:479px) {
    .demo-cont {
        height: 640px
    }

    .bannerpt br,
    .heading-bold br {
        display: none
    }

    #table {
        bottom: 0
    }

    #table img {
        width: 100%
    }

    .scene div.seo-bg {
        width: 100%;
        height: 100%;
        margin-left: 0;
        background-size: 300px;
        top: 50px;
        bottom: 31px
    }

    .ecommerce-st {
        width: 100%;
        height: 300px;
        background-size: 100%;
        top: 37%
    }

    #table img {
        width: 100% !important;
        height: 100% !important;

    }

    .bannerpt,
    .heading-bold {
        padding: 0 15px
    }

    .heading-bold {
        font-size: 22px
    }
}