main {
    position: relative;
    overflow: hidden;
    display: block
}

main a {
    outline: none
}

main h2[class^=common-Uppercase] {
    color: #000
}

.globalNav .colorize {
    color: #fff
}

.globalNav .colorize.active, .globalNav .colorize:hover {
    color: hsla(0, 0%, 100%, .5)
}

main header {
    position: relative
}

#vzlomwa, #vzlomwa span {
    position: absolute
}
#vzlomwa_partner, #vzlomwa_partner span {
    position: absolute
}
#vzlomwas, #vzlomwas span {
    position: absolute
}
#vzlomwa {
    width: 100%;
    height: 103%;
    overflow: hidden;
    transform: skewY(-12deg);
    transform-origin: 0;
    background: linear-gradient(150deg, #2aa0da 15%, #90dcd9 70%, #e5f1f9 94%);
}
#vzlomwa_partner {
    width: 100%;
    height: 50%;
    overflow: hidden;
    transform: skewY(-12deg);
    transform-origin: 0;
    background: linear-gradient(150deg, #2aa0da 15%, #90dcd9 70%, #e5f1f9 94%);
}

#vzlomwas {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: skewY(-12deg);
    transform-origin: 0;
    background: linear-gradient(150deg, #90dcd9 15%, #f1f6fb 70%, #90dcd9 94%)
}

#vzlomwa_partner span {
    height: 40px
}
#vzlomwa span {
    height: 40px
}
#vzlomwas span {
    height: 40px
}
#vzlomwa :nth-child(1) {
    width: 50%;
    left: 50%;
    top: 40px;
    background: #1c92d2
}

#vzlomwa :nth-child(2) {
    width: 14%;
    right: 0;
    bottom: 40px;
    background: #90dcd9
}

#vzlomwa :nth-child(3) {
    width: 25%;
    bottom: 0;
    right: 0;
    background: #2aa0da
}

#vzlomwa_partner  :nth-child(1) {
    width: 50%;
    left: 50%;
    top: 40px;
    background: #1c92d2
}

#vzlomwa_partner  :nth-child(2) {
    width: 14%;
    right: 0;
    bottom: 40px;
    background: #90dcd9
}

#vzlomwa_partner  :nth-child(3) {
    width: 25%;
    bottom: 0;
    right: 0;
    background: #2aa0da
}

@media (min-width: 670px) {
    #vzlomwa span {
        height: 150px
    }

    #vzlomwa :nth-child(1) {
        top: 0;
        background: #1c92d2
    }

    #vzlomwa :nth-child(2) {
        width: 16.66667%;
        top: 300px;
        bottom: auto;
        background: #2aa0da
    }

    #vzlomwa :nth-child(3) {
        width: 33.33333%;
        right: auto;
        background: #90dcd9
    }
}
@media (min-width: 670px) {
    #vzlomwa_partner span {
        height: 150px
    }

    #vzlomwa_partner :nth-child(1) {
        top: 0;
        background: #1c92d2
    }

    #vzlomwa_partner :nth-child(2) {
        width: 16.66667%;
        top: 300px;
        bottom: auto;
        background: #90dcd9
    }

    #vzlomwa_partner :nth-child(3) {
        width: 33.33333%;
        right: auto;
        background: #90dcd9
    }
}
@media (min-width: 880px) {
    #vzlomwa span {
        height: 190px
    }

    #vzlomwa :nth-child(1) {
        width: 33.33333%;
        left: -16.66666%;
        background: #1c92d2
    }

    #vzlomwa :nth-child(2) {
        width: 33.33333%;
        top: 0;
        left: 16.66666%;
        right: auto;
        background: #1c92d2
    }

    #vzlomwa :nth-child(3) {
        width: 33.33333%;
        left: 49.99999%;
        bottom: auto;
        background: #1c92d2
    }

    #vzlomwa :nth-child(4) {
        width: 33.33333%;
        top: 380px;
        right: -16.66666%;
        background: #01b0ff
    }

    #vzlomwa :nth-child(5) {
        width: 33.33333%;
        bottom: 0;
        background: #1c92d2
    }
}
@media (min-width: 880px) {
    #vzlomwa_partner span {
        height: 190px
    }

    #vzlomwa_partner :nth-child(1) {
        width: 33.33333%;
        left: -16.66666%;
        background: #1c92d2
    }

    #vzlomwa_partner :nth-child(2) {
        width: 33.33333%;
        top: 0;
        left: 16.66666%;
        right: auto;
        background: #1c92d2
    }

    #vzlomwa_partner :nth-child(3) {
        width: 33.33333%;
        left: 49.99999%;
        bottom: auto;
        background: #1c92d2
    }

    #vzlomwa_partner :nth-child(4) {
        width: 33.33333%;
        top: 380px;
        right: -16.66666%;
        background: #01b0ff
    }

    #vzlomwa_partner :nth-child(5) {
        width: 33.33333%;
        bottom: 0;
        background: #1c92d2
    }
}

#intro {
    position: relative
}

@media (min-width: 670px) {
    #intro {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        height: 600px
    }
}

@media (min-width: 880px) {
    #intro {
        height: 760px
    }
}

#intro .container-lg {
    padding-top: 70px;
    padding-bottom: 100px
}

.included-item svg {
    padding-top:3px
}
@media (min-width: 670px) {
    #intro .container-lg {
        margin-top: 10px;
        padding-top: 0;
        padding-bottom: 0
    }
}

#intro .announcement {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% + 20px * 2);
    padding: 10px 20px;
    margin: 0 0 30px -20px;
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background: rgba(0, 0, 140, .08)
}

#intro .message {
    -ms-flex: 1;
    flex: 1;
    margin: 0 12px
}

@media (min-width: 670px) {
    @supports (width:auto) {
        #intro .announcement {
            width: auto
        }
    }#intro .announcement {
    line-height: 26px;
    margin: 0 0 55px;
    padding: 0 12px 0 5px;
    border-radius: 15px
}

    #intro .message {
        margin: 0 7px 0 6px
    }
}

#intro .announcement .new-pill {
    padding: 0 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    background: #24b47e;
    text-transform: uppercase;
    border-radius: 10px
}

#intro .announcement:after {
    content: '\27A2';
    font: normal 16px StripeIcons;
    position: relative;
    bottom: 1px
}

#intro h1 {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    line-height: 52px;
    margin-top: 35px;
}
@media screen and (max-width:479px) {
    #intro h1 {
        margin-top: 5px;
    }
}


@media (min-width: 880px) {
    #intro h1 {
        font-size: 35px;

    }
}




#intro p {
    max-width: 500px;
    margin-top: 16px;
    color: #d9fcff
}

@media (min-width: 670px) {
    #intro p {
        max-width: 60%
    }
}

@media (min-width: 880px) {
    #intro p {
        max-width: 50%
    }
}

#intro ul.ul-banner-button {
    display: -ms-flexbox;
    display: flex;
    margin-top: 40px
}

@media (min-width: 670px) {
    #intro ul.ul-banner-button {
        margin-top: 65px
    }
}

#intro li:first-child a {
    margin-right: 23px;
    color: #fff;
    background: #3ecf8e;
    text-shadow: 0 1px 3px rgba(36, 180, 126, .4)
}

#intro li:first-child svg {
    position: relative;
    top: 1px;
    margin-right: 5px
}



@media (min-width: 670px) {
    #intro li:last-child {
        display: block
    }

    #intro li:last-child a {
        color: #7795f8
    }
}

#app-illustrations {
    pointer-events: none;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    width: 1287px;
    left: 50%;
    margin-left: -644px;
    transform: scale(.5) rotate(-12deg) translateX(50px);
    transform-origin: 50% 20%
}

#app-illustrations.hidden-preload {
    visibility: hidden
}

#app-illustrations div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 38px;
    background: #fff;
    box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05)
}

#app-illustrations .tablet-landscape {
    width: 512px;
    height: 352px;
    margin: 115px 50px 0
}

#app-illustrations .phone-big {
    display: none
}

#app-illustrations .phone-small {
    -ms-flex-order: -1;
    order: -1;
    width: 225px;
    height: 467px
}

#app-illustrations .tablet-portrait {
    width: 450px;
    height: 675px;
    margin-top: 115px
}

@media (min-width: 670px) {
    #app-illustrations {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 512px;
        margin-left: -50px;
        top: 215px;
        transform: rotate(-12deg);
        transform-origin: 100% 0
    }

    #app-illustrations.hidden-preload {
        visibility: visible
    }

    #app-illustrations [class^=tablet] {
        margin: 0
    }

    #app-illustrations .tablet-landscape {
        width: 512px;
        height: 352px
    }

    #app-illustrations .phone-small {
        width: 225px;
        height: 467px;
        margin: 0 0 50px 176px
    }

    #app-illustrations .tablet-portrait {
        display: none
    }
}

@media (min-width: 880px) {
    #app-illustrations {
        width: 829px;
        margin-left: -10px;
        top: 20px
    }

    #app-illustrations .tablet-landscape {
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin-right: 50px
    }

    #app-illustrations .phone-big {
        display: -ms-flexbox;
        display: flex;
        width: 267px;
        height: 553px
    }

    #app-illustrations .phone-small {
        -ms-flex-order: 0;
        order: 0;
        margin: 50px 50px 0 0
    }

    #app-illustrations .tablet-portrait {
        display: -ms-flexbox;
        display: flex;
        width: 450px;
        height: 675px;
        margin-top: 50px
    }
}

#primary {
    overflow: hidden;
    padding-top: 15px;
}

#primary .heading-icon {
    margin: 0 auto
}

#primary .heading-icon, #secondary .heading-icon {
    display: block;
    width: 66px;
    height: 66px;
    margin-bottom: 30px
}

#complete-toolkit .common-UppercaseTitle {
    text-align: center
}



@media (min-width: 670px) {
    #complete-toolkit .common-UppercaseTitle {
        margin: 0 25%
    }

    #complete-toolkit .common-BodyText {
        width: 50%;
        text-align: right
    }

    #complete-toolkit .common-Link--arrow {
        margin-bottom: 80px
    }
}

@media (min-width: 880px) {
    #complete-toolkit {
        position: relative;
        bottom: 10px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        height: 580px
    }

    #complete-toolkit > * {
        -ms-flex: none;
        flex: none
    }

    #complete-toolkit .common-UppercaseTitle {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        width: 50%;
        margin: 0 0 0 3px;
        text-align: right
    }

    #complete-toolkit .heading-icon {
        -ms-flex: none;
        flex: none;
        -ms-flex-order: 1;
        order: 1;
        margin: 0 0 0 25px
    }

    #complete-toolkit .common-UppercaseTitle span {
        -ms-flex: 1;
        flex: 1
    }

    #complete-toolkit .common-Link--arrow {
        margin-bottom: 0
    }
}

#complete-toolkit .common-BodyText {
  /*  padding-top: 35px */
}

#complete-toolkit .common-Link {
    display: block
}

@media (min-width: 670px) {
    #complete-toolkit .common-Link {
        margin-top: 15px;
        border-top: 2px solid #f1f7fb
    }
}

#developers-first {
    position: relative;
    padding-top: 110px
}

#developers-first:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 180%;
    top: 0;
    transform: skewY(-12deg);
    background: #f6f9fc
}

#developers-first .common-UppercaseTitle {
    text-align: center;
    position: relative
}

#developers-first p {
    margin: 30px auto;
    padding: 0 20px
}

@media (min-width: 670px) {
    #developers-first p {
        max-width: 730px;
        margin-bottom: 50px;
        text-align: center
    }
}

#programming-languages {
    position: relative;
    height: 66px;
    margin-bottom: -66px
}

#programming-languages img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
    will-change: transform, opacity
}

#editor {
    margin: 20px 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(50, 50, 93, .1)
}

#editor pre {
    display: -ms-flexbox;
    display: flex
}

#editor pre > * {
    padding: 12px;
    font-size: 13px;
    line-height: 1.5
}

#editor .custom-line-numbers {
    text-align: right;
    background: #f2feef;
    color: #5dc79e;
    border-radius: 2px 0 0 2px
}

#editor code {
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

@media (min-width: 670px) {
    #notebook {
        position: relative;
        padding-bottom: 70px
    }

    #editor {
        margin: 0 245px 0 0
    }
}

#notebook nav select {
    width: 100%;
    font-family: Camphor, Open Sans, Segoe UI, sans-serif;
    font-size: 17px;
    color: #24b47e;
    border-radius: 2px;
    padding: 7px 12px;
    border: none;
    outline: none;
    background: #fff url(/img/v3/home/code-snippets/select-arrows.svg) no-repeat 97% 50%;
    background-size: 9px 14px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

#notebook nav > :not(select) {
    display: none
}

@media (min-width: 670px) {
    #notebook nav select {
        display: none
    }

    #notebook nav > :not(select) {
        display: block
    }

    #notebook nav {
        position: absolute;
        right: 20px;
        width: 210px
    }

    #notebook nav a, #notebook nav button {
        height: 34px;
        -webkit-tap-highlight-color: transparent
    }

    #notebook nav button {
        position: relative;
        width: 100%;
        padding-left: 32px;
        font-family: Camphor, Open Sans, Segoe UI, sans-serif;
        text-align: left;
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
        transition: color .3s
    }

    #notebook nav button svg {
        position: absolute;
        width: 13px;
        height: 14px;
        top: 10px;
        left: 10px;
        pointer-events: none
    }

    #notebook nav button path {
        transition: fill .3s
    }

    #notebook nav .selected {
        color: #24b47e
    }

    #notebook nav .selected path {
        fill: #24b47e
    }

    #notebook nav button:not(.selected):hover path {
        fill: #32325d
    }

    #notebook nav a {
        display: block;
        margin-top: 15px;
        padding-top: 15px;
        padding-left: 10px;
        border-top: 2px solid #e8f0f5
    }

    #api-method-selection {
        position: absolute;
        width: 100%;
        height: 34px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(50, 50, 93, .1);
        transition: transform .3s cubic-bezier(.165, .84, .44, 1);
        will-change: transform
    }
}

#always-improving, #global-scale {
    padding: 20px 0;
    border: 1px solid #f6f9fc
}

#always-improving {
    border-width: 0 0 1px
}

#global-scale {
    border-width: 1px 0 0
}

@media (min-width: 670px) {
    #secondary .cols {
        display: -ms-flexbox;
        display: flex
    }

    #always-improving {
        -ms-flex: 1;
        flex: 1;
        padding-right: 20px;
        border-width: 0 1px 0 0
    }

    #global-scale {
        -ms-flex: 1;
        flex: 1;
        padding-left: 20px;
        border-width: 0 0 0 1px
    }
}

@media (min-width: 1040px) {
    #always-improving {
        padding: 70px 70px 70px 0
    }

    #global-scale {
        padding: 70px 0 70px 70px
    }
}

#secondary .heading-icon {
    margin-bottom: 25px
}

#secondary .common-BodyText {
    margin: 15px 0 18px
}

#customer-logos {
    border-top: 2px solid #f6f9fc
}

#customer-logos a {
    display: block;
    padding-top: 20px;
    padding-bottom: 10px
}

#customer-logos .common-Button {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, 5px) scale(.95);
    opacity: 0;
    transition: .7s cubic-bezier(.19, 1, .22, 1)
}

#customer-logos ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

#customer-logos li {
    margin: 10px
}

@media (min-width: 880px) {
    #customer-logos a {
        padding-top: 70px;
        padding-bottom: 65px
    }

    #customer-logos ul {
        -ms-flex-pack: justify;
        justify-content: space-between;
        transition: 1s cubic-bezier(.19, 1, .22, 1);
        will-change: transform;
        filter: blur(0)
    }

    #customer-logos a:hover .common-Button {
        opacity: 1;
        transform: translate(-50%, -7px)
    }

    #customer-logos a:hover ul {
        opacity: .7;
        transform: scale(.95);
        filter: blur(10px)
    }

    #customer-logos li {
        margin: 0
    }
}

#customer-logos img {
    height: 20px;
    vertical-align: middle
}

#customer-logos [src$="visa-xxl.png"] {
    height: 54px
}
#customer-logos [src$="ya.png"] {
    height: 54px
}
#customer-logos [src$="btc.png"] {
    height: 54px
}
#customer-logos [src$="mastercard.png"] {
    height: 54px
}

#customer-logos [src$="maestro.png"] {
    position: relative;
    top: 2px;
    height: 54px
}

#customer-logos [src$="qiwi.png"] {
    position: relative;
    bottom: 1px;
    height: 54px
}

#customer-logos [src$="mir.png"], #customer-logos [src$="pinterest.svg"] {
    height: 54px
}

#customer-logos [src$="deliveroo.svg"] {
    height: 40px
}

#customer-logos [src$="drivy.svg"] {
    height: 24px
}

#customer-logos [src$="heetch.svg"] {
    height: 26px
}

#customer-logos [src$="elcorteingles.svg"] {
    height: 45px
}

#customer-logos [src$="chope.png"] {
    height: 40px
}

#customer-logos [src$="hipvan.png"] {
    height: 30px
}

article#timeline div {
    position:relative
}
article#timeline div:after {
    content:'';
    width:2px;
    position:absolute;
    top:10px;
    bottom:10px;
    left:56px;
    z-index:1;
    background:#e6ebee
}
article#timeline section.year {
    position:relative
}
article#timeline h3 {
    position:absolute;
    color:#292e31;
    margin:0;
    font-size:1.0em;
    line-height:1.5em
}
@media screen and (max-width:479px) {
    article#timeline h3 {
        font-size:1.1em
    }
}
article#timeline section.year section {
    position:relative;

}
article#timeline section.year section h4 {
    position:absolute;
    bottom:0;
    font-size:1.4em;
    line-height:1.5em;
    margin:0;
    padding:0 0 0 81px;
    font-weight:400;
    color:#aab2b6
}
@media screen and (max-width:479px) {
    article#timeline section.year section h4 {
        font-size:1.1em
    }
}
article#timeline section.year section ul {
    list-style-type:none;
    padding:0 0 0 81px;
    margin:0 0 1em;
    font-size:1.4em;
    line-height:1.55em
}
article#timeline section.year section ul:first-of-type:after {
    content:'';
    width:6px;
    height:6px;
    background:#b6c4cc;
    border:2px solid #f8f9fb;
    border-radius:50%;
    position:absolute;
    left:52px;
    top:5px;
    z-index:2
}
article#timeline section.year section ul:last-child {
    margin-bottom:0
}
@media screen and (max-width:479px) {
    article#timeline section.year section ul {
        font-size:1.1em
    }
}



.social-ic__i:before {
    vertical-align: middle;
    margin-right: 8px;
    opacity: .7;
    -webkit-transition: opacity 200ms;
    -moz-transition: opacity 200ms;
    -ms-transition: opacity 200ms;
    transition: opacity 200ms
}
.social-ic__i:hover:before {
    opacity: 1
}

/* /Features icon sprite
     ========================================================================== */
[class^="sp-"]:before,
[class*="sp-"]:before {
    display: inline-block;
    background-image: url("/images/sprite.png");
    background-repeat: no-repeat;
    content: "";
}
[class^="sp-sc-"]:before,
[class*="sp-sc-"]:before {
    width: 20px;
    height: 20px;
}
.sp-sc-fb:before {
    background-position: 0px -831px;
}
.sp-sc-tw:before {
    background-position: -20px -831px;
}
.sp-sc-gp:before {
    background-position: -40px -831px;
}
.sp-sc-yt:before {
    background-position: -60px -831px;
}
.sp-sc-vm:before {
    background-position: -80px -831px;
}
.sp-seal:before {
    background-position: 0 -701px;
    width: 110px;
    height: 110px;
}

.button.raised {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
    transition-delay: 0.2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.green {
    background-color: #37c784;
    color: #fff;
}
.button {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    font-size: 13px;
    background-color: #fff;
    color: #646464;
    padding: 1px 4px 1px 4px;
}
/* BASICS */

.CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: 300px;
    color: black;
    direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
    padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
    padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: #999;
    white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
    border-left: 1px solid black;
    border-right: none;
    width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0 !important;
    background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1;
}

.cm-animate-fat-cursor {
    width: auto;
    border: 0;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
    background-color: #7e7;
}
@-moz-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}
@-webkit-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}
@keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
    position: absolute;
    left: 0; right: 0; top: -50px; bottom: -20px;
    overflow: hidden;
}
.CodeMirror-ruler {
    border-left: 1px solid #ccc;
    top: 0; bottom: 0;
    position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
    position: relative;
    overflow: hidden;
    background: white;
}

.CodeMirror-scroll {
    overflow: scroll !important; /* Things will break if this is overridden */
    /* 30px is the magic margin used to hide the element's real scrollbars */
    /* See overflow: hidden in .CodeMirror */
    margin-bottom: -30px; margin-right: -30px;
    padding-bottom: 30px;
    height: 100%;
    outline: none; /* Prevent dragging from highlighting the element */
    position: relative;
}
.CodeMirror-sizer {
    position: relative;
    border-right: 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
}
.CodeMirror-vscrollbar {
    right: 0; top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.CodeMirror-hscrollbar {
    bottom: 0; left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
    right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
    left: 0; bottom: 0;
}

.CodeMirror-gutters {
    position: absolute; left: 0; top: 0;
    min-height: 100%;
    z-index: 3;
}
.CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    background: none !important;
    border: none !important;
}
.CodeMirror-gutter-background {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 4;
}
.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
    cursor: text;
    min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
    /* Reset some styles that the rest of the page might have set */
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
}

.CodeMirror-linebackground {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 0;
}

.CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    overflow: auto;
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
    outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.CodeMirror-cursor {
    position: absolute;
    pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3;
}
div.CodeMirror-dragcursors {
    visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
    background-color: #ffa;
    background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
    /* Hide the cursor when printing */
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden;
    }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }




.spinner-container {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}

.spinner-container .path {
    stroke-dasharray: 1,150; /* 1%, 101% circumference */
    stroke-dashoffset: 0;
    stroke: #fff;
    stroke-linecap: round;
    -webkit-animation: dash 1.5s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite;
    z-index: 17;
}



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

@keyframes dash {
    0% {
        stroke-dasharray: 1,150;  /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90,150; /* 70%, 101% circumference */
        stroke-dashoffset: -35;   /* 25% circumference */
    }
    100% {
        stroke-dasharray: 90,150; /* 70%, 101% circumference */
        stroke-dashoffset: -124;  /* -99% circumference */
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,150;  /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90,150; /* 70%, 101% circumference */
        stroke-dashoffset: -35;   /* 25% circumference */
    }
    100% {
        stroke-dasharray: 90,150; /* 70%, 101% circumference */
        stroke-dashoffset: -124;  /* -99% circumference */
    }
}
.loader--style3 {
    position: relative;
    float: right;
    margin-right: 10%;
}


.new-banner {
    display:inline-block;
    margin-left:-8px;
    padding:6px 12px 5px 8px;
    background-color:rgba(207,215,223,.3);
    border-radius:16px;
    font-size:14px!important;
    color:#fff;
    line-height:1.4em;
    margin-top:9px
}
.new-banner .badge {
    padding:2px 6px 1px;
    border-radius:9px;
    margin-right:6px;
    text-transform:uppercase;
    font-size:12px!important;
    font-weight:600;
    background-color:#1c92d2;
    color:#fff
}

.feature-list_container {
    display:grid;
    grid-gap:10px;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    padding:0 20px
}
@media(min-width:670px) {
    .feature-list_container {
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        grid-template-rows:repeat(2,1fr);
        grid-template-columns:repeat(2,1fr);
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        padding:0 60px
    }
}
@media(min-width:880px) {
    .feature-list_container {
        grid-template-rows:1fr;
        grid-template-columns:repeat(2,1fr);
        padding:0 20px
    }
}
@media(min-width:1040px) {
    .feature-list_container {
        padding:0
    }
}


.feature-list_container .feature-list li {
    position:relative;

    padding-right:0;
    -webkit-transition:color .15s ease-in-out;
    transition:color .15s ease-in-out
}
@media (min-width:670px) {
    .feature-list_container .feature-list li:hover {
        color:#74e4a2
    }
    .feature-list_container .feature-list li:hover .popover {
        opacity:1;
        -webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);
        transition-timing-function:cubic-bezier(.165,.84,.44,1);
        -webkit-transform:translateY(calc(-100% - 5px));
        transform:translateY(calc(-100% - 5px))
    }
}

.feature-list_container .feature-list li:active {
    color:#74e4a2
}
.feature-list_container .feature-list li:active .popover {
    opacity:1;
    -webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);
    transition-timing-function:cubic-bezier(.165,.84,.44,1);
    -webkit-transform:translateY(calc(-100% - 5px));
    transform:translateY(calc(-100% - 5px))
}
.feature-list_container .feature-list li.empty:before {
    display:none
}
.feature-list_container .feature-list li.title {
    text-transform:uppercase;
    padding-left:0;
    font-weight:600;
    letter-spacing:.025em;
    padding-right:0
}
.feature-list_container .feature-list li.title:before {
    display:none
}
.feature-list_container .feature-list li.title:hover {
    color:#fff
}
.feature-list_container .feature-list .popover {
    position:absolute;
    left:0px;
    right:-10px;
    top:30px;
    background-color:#fff;
    border-radius:4px;
    -webkit-box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
    box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
    -webkit-transition-property:opacity,-webkit-transform;
    transition-property:opacity,-webkit-transform;
    transition-property:transform,opacity;
    transition-property:transform,opacity,-webkit-transform;
    -webkit-transition-duration:.15s;
    transition-duration:.15s;
    -webkit-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out;
    pointer-events:none;
    opacity:0;
    -webkit-transform:translateY(-100%) scale(.75);
    transform:translateY(-100%) scale(.75);
    -webkit-transform:translateY(calc(-100% + 10px)) scale(.75);
    transform:translateY(calc(-100% + 10px)) scale(.75);
    -webkit-transform-origin:20px calc(100% + 12px);
    transform-origin:20px calc(100% + 12px);
    color:#000;
    padding:15px 20px;
    font-size:13px;
    font-weight:500;
    line-height:1.5em
}
.feature-list_container .feature-list .popover:before {
    content:"";
    position:absolute;
    bottom:-6px;
    left:15px;
    width:12px;
    height:12px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    border-radius:0 0 4px 0;
    background-color:inherit;
    -webkit-box-shadow:3px 3px 5px rgba(82,95,127,.04);
    box-shadow:3px 3px 5px rgba(82,95,127,.04)
}
.features__prises {
    z-index:6
}