@font-face {
    font-family: Lato;
    font-weight: 400;
    font-style: normal;
    src: url(assets/3b9b99039cc0a98dd50c3cbfac57ccb2.ttf)
}

@font-face {
    font-family: Lato;
    font-weight: 700;
    font-style: normal;
    src: url(assets/eb9532033c2adf99b1314611b5e9cd0e.ttf)
}

@font-face {
    font-family: Lato;
    font-weight: 100;
    font-style: normal;
    src: url(assets/eb1635403cd764912ca1e0af78735797.ttf)
}

@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
    src: url(assets/3e1af3ef546b9e6ecef9f3ba197bf7d2.ttf)
}

@font-face {
    font-family: Roboto;
    font-weight: 200;
    font-style: normal;
    src: url(assets/fc84e998bc29b297ea20321e4c90b6ed.ttf)
}

@font-face {
    font-family: Roboto;
    font-weight: 100;
    font-style: normal;
    src: url(assets/89e2666c24d37055bcb60e9d2d9f7e35.ttf)
}

#loading {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 1;
    background-color: #3f256e
}

#loading .fading-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px
}

#loading .fading-circle .sk-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#loading .fading-circle .sk-circle .sk-inner-circle {
    display: block;
    width: 15%;
    height: 15%;
    margin: 0 auto;
    content: "";
    -webkit-animation: sk-circle-fade-delay 1.2s infinite ease-in-out both;
    animation: sk-circle-fade-delay 1.2s infinite ease-in-out both;
    border-radius: 100%;
    background-color: #fff
}

#loading .fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

#loading .fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg)
}

#loading .fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

#loading .fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg)
}

#loading .fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg)
}

#loading .fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#loading .fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg)
}

#loading .fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg)
}

#loading .fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

#loading .fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg)
}

#loading .fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg)
}

#loading .fading-circle .sk-circle2 .sk-inner-circle {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

#loading .fading-circle .sk-circle3 .sk-inner-circle {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

#loading .fading-circle .sk-circle4 .sk-inner-circle {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

#loading .fading-circle .sk-circle5 .sk-inner-circle {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

#loading .fading-circle .sk-circle6 .sk-inner-circle {
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}

#loading .fading-circle .sk-circle7 .sk-inner-circle {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

#loading .fading-circle .sk-circle8 .sk-inner-circle {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

#loading .fading-circle .sk-circle9 .sk-inner-circle {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

#loading .fading-circle .sk-circle10 .sk-inner-circle {
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

#loading .fading-circle .sk-circle11 .sk-inner-circle {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

#loading .fading-circle .sk-circle12 .sk-inner-circle {
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s
}

@-webkit-keyframes sk-circle-fade-delay {
    0% {
        opacity: 0
    }

    39% {
        opacity: 0
    }

    to {
        opacity: 0
    }

    40% {
        opacity: 1
    }
}

@keyframes sk-circle-fade-delay {
    0% {
        opacity: 0
    }

    39% {
        opacity: 0
    }

    to {
        opacity: 0
    }

    40% {
        opacity: 1
    }
}

.slide.contacts {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 1080px;
    background-image: url(assets/bd41b3df462cc0d51adbb7b5f06c60fd.png);
    background-position: 50%;
    background-size: cover
}

.slide.contacts .contacts-text {
    position: absolute;
    top: 50%;
    left: 200px;
    margin-top: -182px;
    white-space: normal;
    color: #fff
}

.slide.contacts .contacts-text h2 {
    margin: 0;
    font-weight: 200
}

.slide.contacts .contacts-text h3 {
    margin-bottom: 0;
    font-weight: 200;
    line-height: 40px
}

.slide.contacts .phone {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 300px;
    height: 26px;
    background-image: url(assets/893e1a0b262fe276a73350b62197c1e1.png);
    background-repeat: no-repeat
}

@media (max-width:900px) {
    .slide.contacts {
        height: 650px;
        background-position: -375px
    }

    .slide.contacts .contacts-text {
        left: 15px
    }

    .slide.contacts .contacts-text h2 {
        font-size: 27px;
        font-weight: 100
    }

    .slide.contacts .contacts-text h3 {
        margin-bottom: 0;
        font-size: 19px;
        font-weight: 100;
        line-height: 40px
    }

    .slide.contacts .phone {
        width: 250px;
        height: 20px;
        background-size: contain
    }
}

.slide.examples {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 1080px;
    background-size: cover
}

.slide.examples .examples-title {
    margin-bottom: 30px;
    padding-top: 71px;
    text-align: center
}

.slide.examples .examples-title h2 {
    font-weight: 200
}

.slide.examples .examples-nav {
    padding: 0 100px;
    text-align: center
}

.slide.examples .examples-nav .examples-nav-item {
    display: inline-block;
    margin-right: 50px;
    cursor: pointer;
    color: rgba(0, 0, 0, .3)
}

.slide.examples .examples-nav .examples-nav-item.examples-nav-item-selected {
    cursor: default;
    color: #181617
}

.slide.examples .examples-nav .examples-nav-item h3 {
    margin: 0;
    font-weight: 200;
    line-height: 60px
}

.slide.examples .examples-contents-container .examples-contents {
    display: none;
    height: 600px;
    margin: 0 50px;
    -webkit-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    transition: opacity .2s ease;
    text-align: center
}

.slide.examples .examples-contents-container .examples-contents.examples-contents-selected {
    display: block
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper {
    display: inline-block;
    height: 700px
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper:not(:last-child) {
    margin-right: 10px
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i1 {
    width: 1800px
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i2 {
    width: 900px
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i3 {
    width: 550px
}

.slide.examples .examples-contents-container .examples-contents .example-image-wrapper .example-image {
    width: inherit;
    height: inherit;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    -webkit-transition: top 1s ease, width 1s ease, height 1s ease, left 1s ease;
    -o-transition: top 1s ease, width 1s ease, height 1s ease, left 1s ease;
    transition: top 1s ease, width 1s ease, height 1s ease, left 1s ease;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.slide.examples #examples-slide-contents-social-graphs .p1 .example-image {
    background-image: url(assets/424b6616c402602ef472b9d77fd77e6b.png)
}

.slide.examples #examples-slide-contents-social-graphs .p1 .example-image.large {
    background-image: url(assets/767402f12e1e514b398617bb4599b29c.png)
}

.slide.examples #examples-slide-contents-social-graphs .p2 .example-image {
    background-image: url(assets/612d3d20744b399252dc2ae59433872b.png)
}

.slide.examples #examples-slide-contents-social-graphs .p2 .example-image.large {
    background-image: url(assets/612d3d20744b399252dc2ae59433872b.png)
}

.slide.examples #examples-slide-contents-cinema-sessions .p1 .example-image {
    background-image: url(assets/e2c5ea178ca45ec84b287297d7c939b4.png)
}

.slide.examples #examples-slide-contents-cinema-sessions .p1 .example-image.large {
    background-image: url(assets/e2c5ea178ca45ec84b287297d7c939b4.png)
}

.slide.examples #examples-slide-contents-budget-expenditure .p1 .example-image {
    background-image: url(assets/8e9453bc525b7f979c7d2eddbfda1857.png)
}

.slide.examples #examples-slide-contents-budget-expenditure .p1 .example-image.large {
    background-image: url(assets/f36e311cd8dded0bafed829fe1443ba3.png)
}

.slide.examples #examples-slide-contents-budget-expenditure .p2 .example-image {
    background-image: url(assets/ba112937828f41a293d66fd56d0fb8bf.png)
}

.slide.examples #examples-slide-contents-budget-expenditure .p2 .example-image.large {
    background-image: url(assets/9260a74b4eacafd3e37b69e7272ded14.png)
}

.slide.examples #examples-slide-contents-atm-anomalies .p1 .example-image {
    background-image: url(assets/35be1b53adbb20e31eb94af4f1741381.png)
}

.slide.examples #examples-slide-contents-atm-anomalies .p1 .example-image.large {
    background-image: url(assets/35be1b53adbb20e31eb94af4f1741381.png)
}

.slide.examples #examples-slide-contents-atm-anomalies .p2 .example-image {
    background-image: url(assets/bbf005337951924ed8e104ac0b5a65bf.png)
}

.slide.examples #examples-slide-contents-atm-anomalies .p2 .example-image.large {
    background-image: url(assets/a7913d5ab84f36e71080278f07bc86cf.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p1 .example-image {
    background-image: url(assets/0f789faeb1499a5783e24bbbe9751e9c.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p1 .example-image.large {
    background-image: url(assets/f4a21d4dd7118f2272f195f6370eb8ce.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p2 .example-image {
    background-image: url(assets/fba468d68262d42b3b4353a337b742e9.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p2 .example-image.large {
    background-image: url(assets/db6354d9cf650c8ef7d9c1b7417b2a27.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p3 .example-image {
    background-image: url(assets/b43ac7059fb5e5abdb9dd46b5d78afe2.png)
}

.slide.examples #examples-slide-contents-net-mentioning .p3 .example-image.large {
    background-image: url(assets/637d6d2c0d76760e91143f6de3f2c098.png)
}

.slide.examples #examples-slide-contents-twitter-3d-graph .p1 .example-image {
    background-image: url(assets/f9a99985121ffa2f9b22d60312a2c770.png)
}

.slide.examples #examples-slide-contents-twitter-3d-graph .p1 .example-image.large {
    background-image: url(assets/2ca028a1dc3b138d96e8c6e460a9611b.png)
}

.slide.examples #examples-slide-contents-twitter-3d-graph .p2 .example-image {
    background-image: url(assets/7194163af160b251f7337e558468fac8.png)
}

.slide.examples #examples-slide-contents-twitter-3d-graph .p2 .example-image.large {
    background-image: url(assets/5a6c3f7b98dc11b6d06f6bb391029ddd.png)
}

@media (max-width:1850px) {
    .slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i1 {
        width: 1350px
    }

    .slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i2 {
        width: 600px
    }

    .slide.examples .examples-contents-container .examples-contents .example-image-wrapper.i3 {
        width: 400px
    }
}

@media (max-width:900px) {
    .slide.examples {
        overflow: hidden;
        height: 650px
    }

    .slide.examples .examples-title {
        margin: 0;
        padding: 55px 0 0
    }

    .slide.examples .examples-title h2 {
        margin: 0;
        font-size: 30px
    }

    .slide.examples .examples-nav {
        position: relative;
        overflow: visible;
        width: 100%;
        height: 40px;
        padding: 0;
        white-space: nowrap
    }

    .slide.examples .examples-nav .examples-nav-item {
        margin: 0;
        padding: 0 10px;
        font-size: 15px
    }

    .slide.examples .examples-nav .examples-nav-item h3 {
        font-size: inherit;
        font-weight: 700;
        line-height: 40px
    }

    .examples-contents-container {
        overflow: auto !important;
        width: 100% !important;
        white-space: nowrap !important;
        font-size: 0
    }

    .examples-contents-container .examples-contents {
        display: inline-block !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 475px !important;
        margin: 0 !important
    }

    .examples-contents-container .examples-contents .example-image-wrapper {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important
    }

    .examples-contents-container .examples-contents .example-image-wrapper:not(:last-child) {
        margin-bottom: 10px !important
    }

    .examples-contents-container .examples-contents .example-image-wrapper.i1 {
        height: 425px !important
    }

    .examples-contents-container .examples-contents .example-image-wrapper.i2 {
        height: 212.5px !important
    }

    .examples-contents-container .examples-contents .example-image-wrapper.i3 {
        height: 141.66666667px !important
    }
}

.slide.info {
    position: relative;
    height: 1200px;
    background-size: cover
}

.slide.info,
.slide.info .info-text {
    z-index: 500;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.slide.info .info-text {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -233px;
    padding-right: 700px;
    padding-left: 200px
}

.slide.info .info-text .info-text-container {
    max-width: 900px
}

.slide.info .info-text h2 {
    font-weight: 200
}

.slide.info .info-text h3 {
    margin-bottom: 40px;
    font-weight: 200
}

.slide.info .info-image {
    position: absolute;
    z-index: 500;
    top: 50%;
    right: 200px;
    width: 415px;
    height: 234px;
    margin-top: -160px
}

.slide.info #slide-info-bg {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0
}

@media (min-width:1200px) and (max-width:1450px) {
    .slide.info .info-text {
        padding-right: 600px !important;
        padding-left: 100px !important
    }

    .slide.info .info-text h2 {
        font-size: 35px !important
    }

    .slide.info .info-text h3 {
        font-size: 22px !important
    }

    .slide.info .info-image {
        right: 100px !important;
        margin-top: -170px !important
    }
}

@media (min-width:900px) and (max-width:1200px) {
    .slide.info .info-text {
        padding-right: 500px !important;
        padding-left: 50px !important
    }

    .slide.info .info-text h2 {
        font-size: 32px !important
    }

    .slide.info .info-text h3 {
        font-size: 18px !important
    }

    .slide.info .info-image {
        right: 50px !important;
        margin-top: -190px !important;
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@media (max-width:900px) {
    .slide.info {
        height: 950px
    }

    .slide.info .info-text {
        position: absolute;
        z-index: 500;
        top: 100px;
        right: 0;
        left: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 0;
        padding-right: 15px;
        padding-left: 15px
    }

    .slide.info .info-text .info-text-container {
        max-width: none
    }

    .slide.info .info-text h2 {
        font-size: 32px !important;
        font-weight: 200 !important;
        line-height: 40px
    }

    .slide.info .info-text h3 {
        font-size: 18px !important;
        font-weight: 200;
        line-height: 30px
    }

    .slide.info .info-image {
        display: none
    }
}

.slide.services {
    position: relative;
    height: 2000px;
    color: #fff;
    background-color: #673ab7;
    background-size: cover
}

.slide.services,
.slide.services .services-text {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.slide.services .services-text {
    position: absolute;
    z-index: 500;
    top: 20%;
    right: 0;
    left: 0;
    margin-top: -233px;
    padding-right: 750px;
    padding-left: 200px
}

.slide.services .services-text .services-text-container {
    max-width: 900px
}

.slide.services .services-text h2,
.slide.services .services-text h3 {
    font-weight: 100
}

.slide.services .services-image {
    position: absolute;
    top: 25%;
    right: 100px;
    width: 702px;
    height: 558px;
    margin-top: -220px;
    background-image: url(assets/d974d928904c56b4552855f5c457a305.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.slide.services #services-slide-bg {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0
}

@media (min-width:1450px) and (max-width:1600px) {
    .slide.services .services-text {
        padding-right: 630px !important
    }

    .slide.services .services-image {
        right: 50px !important;
        width: 600px !important;
        margin-top: -220px !important
    }
}

@media (min-width:1200px) and (max-width:1450px) {
    .slide.services .services-text {
        padding-right: 600px !important;
        padding-left: 100px !important
    }

    .slide.services .services-text h2 {
        font-size: 35px !important
    }

    .slide.services .services-text h3 {
        font-size: 20px !important
    }

    .slide.services .services-image {
        right: 40px !important;
        width: 550px !important;
        margin-top: -240px !important
    }
}

@media (min-width:900px) and (max-width:1200px) {
    .slide.services .services-text {
        padding-right: 500px !important;
        padding-left: 50px !important
    }

    .slide.services .services-text h2 {
        font-size: 32px !important
    }

    .slide.services .services-text h3 {
        font-size: 18px !important;
        line-height: 30px
    }

    .slide.services .services-image {
        right: 30px !important;
        width: 480px !important;
        margin-top: -250px !important
    }
}

@media (max-width:900px) {
    .slide.services {
        height: 1000px
    }

    .slide.services .services-text {
        position: absolute;
        z-index: 500;
        top: 40px;
        right: 0;
        left: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 0;
        padding-right: 15px;
        padding-left: 15px
    }

    .slide.services .services-text h2 {
        font-size: 30px !important;
        font-weight: 200 !important;
        line-height: 40px
    }

    .slide.services .services-text h3 {
        font-size: 14px !important;
        font-weight: 200;
        line-height: 21px
    }

    .slide.services .services-image {
        display: none
    }
}

.slide.main {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 1080px;
    padding-top: 100px;
    color: #fff;
    background-image: url(assets/3a2a0337eb5d8605ba011e2a5863853a.png);
    background-size: cover
}

.slide.main .main-text {
    position: absolute;
    z-index: 500;
    top: 50%;
    left: 200px;
    width: 650px;
    height: 365px;
    margin-top: -182px
}

.slide.main .main-text h1 {
    font-weight: 200
}

.slide.main .main-text h2 {
    font-weight: 100
}

.slide.main #main-slide-image-canvas {
    position: absolute;
    z-index: 500;
    top: 50%;
    right: 100px;
    width: 700px;
    height: 700px;
    margin-top: -350px
}

@media (min-width:1200px) and (max-width:1500px) {
    .slide.main .main-text {
        left: 50px
    }

    #main-slide-image-canvas {
        right: 0 !important;
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@media (min-width:1000px) and (max-width:1200px) {
    .slide.main .main-text {
        left: 50px
    }

    .slide.main .main-text h1 {
        font-size: 50px !important
    }

    .slide.main .main-text h2 {
        font-size: 35px !important
    }

    #main-slide-image-canvas {
        right: -100px !important;
        margin-top: -400px !important;
        -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
        transform: scale(.6)
    }
}

@media (min-width:900px) and (max-width:1000px) {
    .slide.main .main-text {
        left: 50px
    }

    .slide.main .main-text h1 {
        font-size: 40px !important
    }

    .slide.main .main-text h2 {
        font-size: 28px !important
    }

    #main-slide-image-canvas {
        right: -100px !important;
        margin-top: -400px !important;
        -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
        transform: scale(.6)
    }
}

@media (max-width:900px) {
    .slide.main {
        height: 650px
    }

    .slide.main .main-text {
        top: auto;
        bottom: 40px;
        left: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin-top: 0;
        padding: 0 15px
    }

    .slide.main .main-text h1 {
        text-align: center;
        font-size: 40px !important;
        font-weight: 100 !important
    }

    .slide.main .main-text h2 {
        text-align: center;
        font-size: 20px !important;
        font-weight: 100 !important;
        line-height: 28px
    }

    #main-slide-image-canvas {
        position: absolute;
        z-index: 500;
        top: 210px !important;
        left: 50% !important;
        width: 200px !important;
        height: 200px !important;
        margin: 0 !important;
        margin-left: -100px !important
    }
}

h1 {
    font-size: 80px
}

h2 {
    font-size: 40px;
    line-height: 60px
}

h3 {
    font-size: 26px;
    line-height: 40px
}

h5 {
    font-size: 20px
}

button {
    height: 60px;
    padding: 0 30px;
    cursor: pointer;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease;
    color: #fff;
    border: none;
    border-radius: 9px;
    outline: none;
    background-color: #07a9f4;
    font-family: inherit;
    font-size: 18px;
    font-weight: 100 !important;
    line-height: 60px
}

button:hover {
    background-color: #0698db
}

.tr {
    -webkit-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    transition: opacity .2s ease
}

#content.fade-tr .tr {
    opacity: 0 !important
}

#nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    margin-right: 120px;
    font-size: 14px;
    font-weight: 100;
    line-height: 100px
}

#nav .nav-item {
    display: inline-block;
    margin-left: 28px;
    cursor: pointer;
    -webkit-transition: border-bottom .2s ease;
    -o-transition: border-bottom .2s ease;
    transition: border-bottom .2s ease;
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid transparent;
    line-height: 24px
}

#nav .nav-item.nav-item-selected {
    cursor: default;
    border-bottom: 2px solid #fff
}

.side-nav {
    display: none;
    /* position: fixed;
    z-index: 999;
    top: 50%;
    right: 25px;
    overflow: visible;
    width: 16px;
    height: 133px;
    margin-top: -10px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    text-align: center */
}
/* 
.side-nav .side-nav-item-wrapper {
    width: 16px;
    height: 16px;
    margin-bottom: 13px;
    text-align: center;
    line-height: 16px
}

.side-nav .side-nav-item-wrapper .side-nav-item {
    display: inline-block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    -webkit-transition: background-color .2s ease, -webkit-box-shadow .2s ease, -webkit-transform .2s ease;
    transition: background-color .2s ease, -webkit-box-shadow .2s ease, -webkit-transform .2s ease;
    -o-transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
    transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
    transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease, -webkit-box-shadow .2s ease, -webkit-transform .2s ease;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .3);
    box-shadow: 0 0 6px rgba(0, 0, 0, .3)
}

.side-nav .side-nav-item-wrapper .side-nav-item:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

.side-nav .side-nav-item-wrapper .side-nav-item.side-nav-item-selected {
    width: 16px;
    height: 16px;
    cursor: default;
    background-color: #07a9f4
} */

@media (max-width:900px) {
    #nav {
        position: fixed;
        z-index: 2999;
        top: 50px;
        right: 100%;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        margin-right: 0;
        -webkit-transition: right .5s ease;
        -o-transition: right .5s ease;
        transition: right .5s ease;
        background-color: #3f256e
    }

    #nav .nav-item {
        display: block;
        margin: 0 !important;
        padding: 30px;
        border-bottom: none
    }

    #nav .nav-item.nav-item-selected {
        cursor: default;
        border-bottom: none;
        background-color: #4a2b81
    }

    #nav.nav-opened {
        right: 0
    }
}

#top-bar {
    position: fixed;
    z-index: 950;
    top: 0;
    right: 0;
    left: 0;
    height: 100px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: #fff;
    background-color: #3f256e
}

#top-bar #toggle-menu {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 50px;
    height: 50px
}

#top-bar #toggle-menu i {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    line-height: 50px
}

#top-bar #top-bar-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 70px;
    background-image: url(assets/f4f40adad0679f53def8888ac8a2d205.png);
    background-repeat: no-repeat;
    background-size: contain
}

#top-bar .lang {
    display: none;
    /* position: absolute;
    top: 35px;
    right: 30px;
    width: 60px;
    height: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease;
    text-align: center;
    border-radius: 3px;
    background-color: #07a9f4;
    font-size: 14px;
    font-weight: 100;
    line-height: 30px */
}

/* #top-bar .lang:hover {
    background-color: #0698db
}

#top-bar .lang .lang-option {
    display: inline-block
}

#top-bar .lang .lang-option.lang-option-selected {
    font-weight: 400
} */

/* @media (max-width:900px) {
    #top-bar {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        overflow: hidden;
        height: 50px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        color: #fff;
        background-color: #3f256e
    }

    #top-bar #top-bar-logo,
    #top-bar .nav {
        display: none
    }

    #top-bar #toggle-menu {
        display: block
    }

    #top-bar .lang {
        display: none;
        top: 10px;
        right: 10px
    }

    .side-nav {
        display: none
    }
} */

#detailed-example {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 0;
    background-color: #000
}

#mouse-icon {
    position: fixed;
    z-index: 999;
    bottom: 5px;
    left: 50%;
    margin-left: -13px
}

@media (max-width:900px) {
    #mouse-icon {
        display: none
    }
}

body {
    margin: 0;
    padding: 0;
    color: #181617;
    background-color: #fff;
    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

*,
:after,
:before {
    box-sizing: border-box
}

.sublime-text {
    overflow: visible;
    width: 416px;
    margin: 60px auto 50px;
    transform: scale(0);
    animation: appear .5s ease-out forwards;
    border-radius: 6px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .55)
}

.sublime-text .screen {
    position: relative;
    height: 234px;
    color: #fff;
    border-radius: 8px;
    background-color: #f2f2f2;
    font-size: 30px
}

.sublime-text .screen .top-bar {
    position: absolute;
    width: 100%;
    height: 30px;
    margin-top: 0;
    border-radius: 7px 7px 0 0;
    background-color: #e6e7e8
}

.sublime-text .screen .top-bar .buttons {
    position: absolute;
    top: 12px;
    left: 22px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff8f8f
}

.sublime-text .screen .top-bar .buttons:after,
.sublime-text .screen .top-bar .buttons:before {
    position: absolute;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 50%
}

.sublime-text .screen .top-bar .buttons:after {
    left: 12px;
    background-color: #5ec3af
}

.sublime-text .screen .top-bar .buttons:before {
    left: -12px;
    background-color: #ff2929
}

.sublime-text .screen .left-bar {
    position: absolute;
    width: 30px;
    height: 100%;
    padding-left: 8px;
    border-radius: 10px 0 0 7px;
    background-color: #e0e0e0
}

.sublime-text .screen .left-bar:after {
    position: absolute;
    top: 24px;
    content: ". . . . . . . . . .";
    color: #fff;
    font-size: 42px;
    line-height: 20px
}

.sublime-text .screen .code {
    position: absolute;
    margin: 0 0 0 30px
}

.sublime-text .screen .code .row {
    position: relative;
    height: 20px;
    padding: 8px
}

.sublime-text .screen .code .row p {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 8px;
    margin-right: 5px;
    opacity: 0;
    border-radius: 4px;
    background-color: #fff
}

.sublime-text .screen .code .row p.green {
    width: 61px;
    background-color: #5ec3af
}

.sublime-text .screen .code .row p.orange {
    width: 114px;
    background-color: #ff8f8f
}

.sublime-text .screen .code .row p.blue {
    width: 98px;
    background-color: #43c7f4
}

.sublime-text .screen .code .row p.purple {
    width: 32px;
    background-color: #9e76b4
}

.sublime-text .screen .code .row p.yellow {
    width: 72px;
    background-color: #ffcc4e
}

.sublime-text .screen .code .row p.transparent {
    width: 30px;
    background-color: transparent
}

.sublime-text .screen .code .row p.cursor {
    width: 2px;
    margin-left: 1px;
    animation: blink 1s ease 4.6s infinite;
    border-radius: 0;
    background-color: #e6e7e8
}

.sublime-text .row1>p:first-child {
    animation: show-text .1s ease 1.1s forwards
}

.sublime-text .row1>p:nth-child(2) {
    animation: show-text .1s ease 1.2s forwards
}

.sublime-text .row1>p:nth-child(3) {
    animation: show-text .1s ease 1.3s forwards
}

.sublime-text .row1>p:nth-child(4) {
    animation: show-text .1s ease 1.4s forwards
}

.sublime-text .row1>p:nth-child(5) {
    animation: show-text .1s ease 1.5s forwards
}

.sublime-text .row1>p:nth-child(6) {
    animation: show-text .1s ease 1.6s forwards
}

.sublime-text .row1>p:nth-child(7) {
    animation: show-text .1s ease 1.7s forwards
}

.sublime-text .row1>p:nth-child(8) {
    animation: show-text .1s ease 1.8s forwards
}

.sublime-text .row1>p:nth-child(9) {
    animation: show-text .1s ease 1.9s forwards
}

.sublime-text .row2>p:first-child {
    animation: show-text .1s ease 1.5s forwards
}

.sublime-text .row2>p:nth-child(2) {
    animation: show-text .1s ease 1.6s forwards
}

.sublime-text .row2>p:nth-child(3) {
    animation: show-text .1s ease 1.7s forwards
}

.sublime-text .row2>p:nth-child(4) {
    animation: show-text .1s ease 1.8s forwards
}

.sublime-text .row2>p:nth-child(5) {
    animation: show-text .1s ease 1.9s forwards
}

.sublime-text .row2>p:nth-child(6) {
    animation: show-text .1s ease 2s forwards
}

.sublime-text .row2>p:nth-child(7) {
    animation: show-text .1s ease 2.1s forwards
}

.sublime-text .row2>p:nth-child(8) {
    animation: show-text .1s ease 2.2s forwards
}

.sublime-text .row2>p:nth-child(9) {
    animation: show-text .1s ease 2.3s forwards
}

.sublime-text .row3>p:first-child {
    animation: show-text .1s ease 1.9s forwards
}

.sublime-text .row3>p:nth-child(2) {
    animation: show-text .1s ease 2s forwards
}

.sublime-text .row3>p:nth-child(3) {
    animation: show-text .1s ease 2.1s forwards
}

.sublime-text .row3>p:nth-child(4) {
    animation: show-text .1s ease 2.2s forwards
}

.sublime-text .row3>p:nth-child(5) {
    animation: show-text .1s ease 2.3s forwards
}

.sublime-text .row3>p:nth-child(6) {
    animation: show-text .1s ease 2.4s forwards
}

.sublime-text .row3>p:nth-child(7) {
    animation: show-text .1s ease 2.5s forwards
}

.sublime-text .row3>p:nth-child(8) {
    animation: show-text .1s ease 2.6s forwards
}

.sublime-text .row3>p:nth-child(9) {
    animation: show-text .1s ease 2.7s forwards
}

.sublime-text .row4>p:first-child {
    animation: show-text .1s ease 2.3s forwards
}

.sublime-text .row4>p:nth-child(2) {
    animation: show-text .1s ease 2.4s forwards
}

.sublime-text .row4>p:nth-child(3) {
    animation: show-text .1s ease 2.5s forwards
}

.sublime-text .row4>p:nth-child(4) {
    animation: show-text .1s ease 2.6s forwards
}

.sublime-text .row4>p:nth-child(5) {
    animation: show-text .1s ease 2.7s forwards
}

.sublime-text .row4>p:nth-child(6) {
    animation: show-text .1s ease 2.8s forwards
}

.sublime-text .row4>p:nth-child(7) {
    animation: show-text .1s ease 2.9s forwards
}

.sublime-text .row4>p:nth-child(8) {
    animation: show-text .1s ease 3s forwards
}

.sublime-text .row4>p:nth-child(9) {
    animation: show-text .1s ease 3.1s forwards
}

.sublime-text .row5>p:first-child {
    animation: show-text .1s ease 2.7s forwards
}

.sublime-text .row5>p:nth-child(2) {
    animation: show-text .1s ease 2.8s forwards
}

.sublime-text .row5>p:nth-child(3) {
    animation: show-text .1s ease 2.9s forwards
}

.sublime-text .row5>p:nth-child(4) {
    animation: show-text .1s ease 3s forwards
}

.sublime-text .row5>p:nth-child(5) {
    animation: show-text .1s ease 3.1s forwards
}

.sublime-text .row5>p:nth-child(6) {
    animation: show-text .1s ease 3.2s forwards
}

.sublime-text .row5>p:nth-child(7) {
    animation: show-text .1s ease 3.3s forwards
}

.sublime-text .row5>p:nth-child(8) {
    animation: show-text .1s ease 3.4s forwards
}

.sublime-text .row5>p:nth-child(9) {
    animation: show-text .1s ease 3.5s forwards
}

.sublime-text .row6>p:first-child {
    animation: show-text .1s ease 3.1s forwards
}

.sublime-text .row6>p:nth-child(2) {
    animation: show-text .1s ease 3.2s forwards
}

.sublime-text .row6>p:nth-child(3) {
    animation: show-text .1s ease 3.3s forwards
}

.sublime-text .row6>p:nth-child(4) {
    animation: show-text .1s ease 3.4s forwards
}

.sublime-text .row6>p:nth-child(5) {
    animation: show-text .1s ease 3.5s forwards
}

.sublime-text .row6>p:nth-child(6) {
    animation: show-text .1s ease 3.6s forwards
}

.sublime-text .row6>p:nth-child(7) {
    animation: show-text .1s ease 3.7s forwards
}

.sublime-text .row6>p:nth-child(8) {
    animation: show-text .1s ease 3.8s forwards
}

.sublime-text .row6>p:nth-child(9) {
    animation: show-text .1s ease 3.9s forwards
}

.sublime-text .row7>p:first-child {
    animation: show-text .1s ease 3.5s forwards
}

.sublime-text .row7>p:nth-child(2) {
    animation: show-text .1s ease 3.6s forwards
}

.sublime-text .row7>p:nth-child(3) {
    animation: show-text .1s ease 3.7s forwards
}

.sublime-text .row7>p:nth-child(4) {
    animation: show-text .1s ease 3.8s forwards
}

.sublime-text .row7>p:nth-child(5) {
    animation: show-text .1s ease 3.9s forwards
}

.sublime-text .row7>p:nth-child(6) {
    animation: show-text .1s ease 4s forwards
}

.sublime-text .row7>p:nth-child(7) {
    animation: show-text .1s ease 4.1s forwards
}

.sublime-text .row7>p:nth-child(8) {
    animation: show-text .1s ease 4.2s forwards
}

.sublime-text .row7>p:nth-child(9) {
    animation: show-text .1s ease 4.3s forwards
}

.sublime-text .row8>p:first-child {
    animation: show-text .1s ease 3.9s forwards
}

.sublime-text .row8>p:nth-child(2) {
    animation: show-text .1s ease 4s forwards
}

.sublime-text .row8>p:nth-child(3) {
    animation: show-text .1s ease 4.1s forwards
}

.sublime-text .row8>p:nth-child(4) {
    animation: show-text .1s ease 4.2s forwards
}

.sublime-text .row8>p:nth-child(5) {
    animation: show-text .1s ease 4.3s forwards
}

.sublime-text .row8>p:nth-child(6) {
    animation: show-text .1s ease 4.4s forwards
}

.sublime-text .row8>p:nth-child(7) {
    animation: show-text .1s ease 4.5s forwards
}

.sublime-text .row8>p:nth-child(8) {
    animation: show-text .1s ease 4.6s forwards
}

.sublime-text .row8>p:nth-child(9) {
    animation: show-text .1s ease 4.7s forwards
}

.sublime-text .row9>p:first-child {
    animation: show-text .1s ease 4.3s forwards
}

.sublime-text .row9>p:nth-child(2) {
    animation: show-text .1s ease 4.4s forwards
}

.sublime-text .row9>p:nth-child(3) {
    animation: show-text .1s ease 4.5s forwards
}

.sublime-text .row9>p:nth-child(4) {
    animation: show-text .1s ease 4.6s forwards
}

.sublime-text .row9>p:nth-child(5) {
    animation: show-text .1s ease 4.7s forwards
}

.sublime-text .row9>p:nth-child(6) {
    animation: show-text .1s ease 4.8s forwards
}

.sublime-text .row9>p:nth-child(7) {
    animation: show-text .1s ease 4.9s forwards
}

.sublime-text .row9>p:nth-child(8) {
    animation: show-text .1s ease 5s forwards
}

.sublime-text .row9>p:nth-child(9) {
    animation: show-text .1s ease 5.1s forwards
}

@keyframes blink {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes show-text {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes appear {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.05)
    }

    75% {
        transform: scale(.95)
    }

    to {
        transform: scale(1)
    }
}