* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    margin: 0;
    background-color: white;
    overflow-y: scroll;
}

input, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
}

input, select, textarea {
    float: left;
    width: 240px;
    margin-top: 8px;
    border-radius: 3px;
    border: 1px solid #d1d5da;
    background-color: #fafbfc;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
    outline: none;
    transition: all 100ms ease;
    transition-property: border-color, background-color, box-shadow, outline;
}

input {
    padding: 5px 8px;
}

select {
    padding: 4px 4px;
}

textarea {
    resize: vertical;
    padding: 5px 8px;
}

input:focus, select:focus, textarea:focus {
    border-color: #2188ff;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075), 0 0 0 0.2em rgba(3, 102, 214, .3);
    outline: none;
}

input:read-only {
    background-color: hsla(0, 0%, 93%, 1);
    cursor: default;
}

a {
    color: #1b62c9;
    text-decoration: none;
    cursor: pointer;
}

a:active, a:hover {
    outline-width: 0;
}

a:hover {
    text-decoration: underline;
}

.header {
    width: 100%;
    height: 96px;
    padding: 16px;
    background-color: #f4f7fa;
}

.header > div {
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;
}

.header > div > .logo {
    float: left;
    width: 160px;
    height: 64px;
    margin: 0 32px 0 24px;
    font-size: 12px;
    text-align: right;
    background: url(/static/logo.svg) center no-repeat;
    background-size: 128px 32px;
}

.header > div > div.switch {
    display: none;
    float: left;
    width: 64px;
    height: 64px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g style="stroke:rgb(27,98,201);stroke-width:2;stroke-linecap:round"><line x1="1" y1="2" x2="15" y2="2"/><line x1="1" y1="8" x2="15" y2="8"/><line x1="1" y1="14" x2="15" y2="14"/></g></svg>') center no-repeat;
    background-size: 16px 16px;
    cursor: pointer;
}

.header > div > div.switch[data-collapsed=false] {
    background-color: rgba(27, 98, 201, 0.15);
}

.header a {
    text-decoration: none;
}

.header a.menu-button {
    display: block;
    float: left;
    height: 64px;
    line-height: 64px;
    padding: 0 24px;
    color: #004ab6;
    font-weight: 600;
    transition: color 150ms;
    cursor: pointer;
}

.header a.menu-button:hover,
.header a.menu-button-selected {
    color: #212529;
}

.header a.sign-up-button:hover {
    color: #212529;
}

.header a.login-button {
    display: block;
    float: right;
    height: 32px;
    line-height: 32px;
    margin: 16px;
    padding: 0 16px;
    color: white;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1b62c9;
    transition: background-color 150ms;
}

.header a.login-button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

.header a.login-button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

.sale {
    background: linear-gradient(60deg, rgb(8, 39, 93) 0%, rgb(0, 0, 0) 100%);
}

.sale > div {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 48px;
    color: #f4f7fa;
    font-size: 18px;
    text-align: center;
    line-height: 46px;
    cursor: default;
}

.sale > div > span.promo-code {
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    background: linear-gradient(60deg, rgba(0, 116, 128, 1) 0%, rgba(88, 0, 173, 1) 100%);
    cursor: pointer;
}

.sale > div > span.promo-code:hover {
    background: linear-gradient(60deg, rgb(0, 134, 155) 0%, rgb(105, 0, 204) 100%);
}

.sale > div > span.promo-code:active {
    background: linear-gradient(60deg, rgb(0, 160, 185) 0%, rgb(118, 0, 225) 100%);
}

.sale > div > div.copied {
    display: none;
    left: 786px;
    top: 48px;
    color: #212529;
    padding: 6px 170px 6px 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    background-color: #e4f9f3;
    box-shadow: 2px 2px 6px 0 rgb(0 0 0 / 20%);
    transition: 150ms;
}

.sale > div > div.copied[data-closed] {
    opacity: 0;
}

.sale > div > a {
    color: #f4f7fa;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 10px;
    margin-left: 8px;
    border-radius: 16px;
    background: linear-gradient(60deg, rgb(13, 0, 128) 0%, rgb(130, 0, 173) 100%);
}

.sale > div > a:hover {
    background: linear-gradient(60deg, rgb(13, 0, 155) 0%, rgb(146, 0, 196) 100%);
}

.sale > div > a:active {
    background: linear-gradient(60deg, rgb(13, 0, 194) 0%, rgb(160, 0, 217) 100%);
}

.overlay-menu {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 64px);
    background-color: rgba(0, 0, 0, 0.25);
    transition: background 100ms;
    z-index: 2;
}

a.download-button {
    font-weight: 600;
    color: white;
    border-radius: 8px;
    padding: 12px 24px 14px 56px;
    line-height: 44px;
    text-decoration: none;
    outline: none;
    background: #1b62c9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"/></svg>') 20px no-repeat;
    background-size: 24px 24px;
    transition: 150ms;
}

a.download-button:hover {
    opacity: 0.85;
}

a.download-button:active {
    opacity: 0.7;
}

a.download-win-button {
    font-weight: 600;
    color: white;
    border-radius: 8px;
    padding: 12px 24px 14px 56px;
    line-height: 44px;
    text-decoration: none;
    outline: none;
    background: #1b62c9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M0,93.7l183.6-25.3v177.4H0V93.7z M0,418.3l183.6,25.3V268.4H0V418.3z M203.8,446.3L448,480V268.4H203.8V446.3z M203.8,65.7v180.1H448V32L203.8,65.7L203.8,65.7z"/></svg>') 20px no-repeat;
    background-size: 24px 24px;
    transition: background-color 150ms;
}

a.download-win-button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

a.download-win-button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

a.download-mac-button {
    font-weight: 600;
    color: white;
    border-radius: 8px;
    padding: 12px 24px 14px 56px;
    line-height: 44px;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    background: #1b62c9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="white"><path d="m49.85,34.01c-.08-8.11,6.61-12,6.91-12.19-3.76-5.5-9.62-6.25-11.71-6.34-4.98-.51-9.73,2.93-12.25,2.93s-6.43-2.86-10.56-2.79c-5.43.08-10.44,3.16-13.24,8.03-5.64,9.79-1.44,24.3,4.06,32.25,2.69,3.88,5.9,8.26,10.1,8.1,4.05-.16,5.58-2.62,10.49-2.62s6.28,2.62,10.57,2.54c4.36-.08,7.12-3.96,9.79-7.86,3.09-4.51,4.36-8.88,4.43-9.1-.09-.04-8.5-3.26-8.59-12.94Z"/><path d="m41.8,10.22c2.23-2.71,3.74-6.47,3.33-10.22-3.22.13-7.12,2.14-9.43,4.85-2.07,2.4-3.88,6.22-3.4,9.9,3.59.28,7.25-1.83,9.49-4.53Z"/></g></svg>') 20px no-repeat;
    background-size: 24px 24px;
    transition: background-color 150ms;
}

a.download-mac-button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

a.download-mac-button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

a.download-linux-button {
    font-weight: 600;
    color: white;
    border-radius: 8px;
    padding: 12px 24px 14px 56px;
    line-height: 44px;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    background: #1b62c9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12.503 0c-.155 0-.315.008-.479.021-4.227.333-3.106 4.807-3.17 6.298-.077 1.093-.3 1.954-1.051 3.021-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489-.039.034-.076.068-.111.135-.26.268-.449.601-.662.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.681-.09.188-.136.393-.132.601 0 .199.027.401.055.536.058.399.116.729.039.97-.248.68-.279 1.146-.105 1.485.174.334.535.469.939.601.811.2 1.91.135 2.775.599.926.467 1.866.671 2.616.47.526-.115.97-.463 1.208-.945.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.578.199.025.135.063.199.114.334l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.199-.812-.714-1.377v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135-.056-.038-.121-.062-.19-.064.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.561-3.369.027-2.152.237-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.191.135.33.332.439.533.105.259.158.459.166.724 0-.02.006-.04.006-.059v.104c-.002-.007-.004-.015-.004-.021l-.004-.024c-.002.243-.053.483-.15.706-.047.125-.119.24-.213.335-.029-.016-.057-.03-.088-.042-.105-.045-.199-.064-.285-.133-.071-.028-.145-.051-.219-.066.049-.059.145-.133.182-.198.053-.128.082-.264.088-.402v-.019c.002-.135-.018-.271-.061-.4-.045-.135-.101-.201-.183-.334-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132-.095.094-.166.207-.205.334-.053.127-.084.264-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202-.01-.065-.016-.132-.018-.199v-.02c-.008-.264.043-.526.15-.769.082-.219.232-.406.43-.533.171-.129.379-.199.594-.199zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.141.401.153.667v.004c.007.134.006.201-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.089.013-.179.003-.267v-.015c-.012-.133-.039-.199-.082-.333-.031-.102-.088-.193-.166-.267-.049-.045-.115-.068-.183-.064h-.021c-.071.006-.13.041-.186.132-.064.077-.105.171-.12.27-.027.108-.035.219-.023.331v.014c.012.135.037.201.081.334.045.134.097.2.165.268.011.009.021.018.034.024-.07.057-.117.07-.176.136-.037.028-.08.06-.131.068-.104-.125-.196-.26-.275-.402-.096-.21-.146-.438-.155-.667-.017-.226.011-.452.08-.668.055-.197.152-.379.283-.535.128-.133.26-.2.418-.2zm1.371 1.706c.331 0 .732.065 1.215.399.293.2.523.269 1.053.468h.003c.255.136.405.266.478.399v-.131c.073.147.078.318.016.47-.123.311-.516.644-1.064.843v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267-.152.008-.305-.015-.448-.067-.11-.06-.218-.126-.322-.198-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.711-.069-.268-.005-.469.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.469.839-.601.139-.036.294-.065.466-.065zm2.799 2.143c.359 1.417 1.197 3.475 1.736 4.473.286.534.855 1.659 1.102 3.024.156-.005.329.018.513.064.646-1.671-.546-3.467-1.089-3.966-.221-.201-.232-.335-.123-.335.589.534 1.365 1.572 1.646 2.757.129.535.159 1.104.021 1.67.067.028.135.061.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.061-.003-.12 0-.181 0h-.015c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.771.465-.007.043-.012.066-.017.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.021.334-.171.838-.319 1.351-1.5 1.072-3.58 1.538-5.349.334-.111-.193-.246-.374-.402-.533-.074-.125-.168-.237-.275-.334.182 0 .338-.029.465-.067.145-.067.257-.188.314-.334.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.399-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.141 2.497-.122 3.854.038-.989.258-1.965.647-2.876.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.211.201.477.335.876.335.039.003.075.006.111.006.411 0 .729-.134.996-.268.29-.134.521-.334.74-.4h.005c.467-.135.836-.402 1.045-.7zm2.186 8.958c.037.601.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.009c.315-.008.577.01.847.267l.003.003c.208.199.305.531.391.876.085.401.154.78.409 1.066.486.527.645.906.636 1.14l.003-.006v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.371 1.139-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.401-.12-1.025.056-1.69.176-.668.428-1.345.463-1.898.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.815.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.638.434.598.77 1.131.729 1.57v.006c-.057.744-.479 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.611-.201-.723-.401-.111-.199-.113-.601.123-1.23v-.003l.002-.003c.117-.334.03-.753-.027-1.119-.055-.401-.083-.709.043-.94.16-.334.396-.399.689-.533.295-.135.641-.202.916-.469h.002v-.003c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.279-.466-.155-.134-.28-.268-.374-.335-.164-.134-.144-.334-.074-.334.109.016.129.135.199.201.096.066.215.199.361.333.291.2.68.467 1.166.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.137.149-.268.279-.268.129.016.034.134-.147.333-.181.135-.461.335-.69.468v-.001zm-1.082-1.584V5.64c-.006-.019.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.139.068-.051 0-.131-.019-.137-.068-.009-.066.088-.133.15-.133.081-.031.184-.047.259-.005.019.009.036.03.03.05v.021h.003z"/></svg>') 20px no-repeat;
    background-size: 24px 24px;
    transition: background-color 150ms;
}

a.download-linux-button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

a.download-linux-button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

a.download-postman-button {
    background-color: #ff6c37;
}

a.download-insomnia-button {
    background-color: #3d00bf;
}

a.download-bruno-button {
    background-color: #c57800;
}

a.download-apidog-button {
    background-color: #293ed0;
}

a.download-httpie-button {
    background-color: #1c913a;
}

.banner {
    padding: 16px;
    background-color: white;
}

.banner > div {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    cursor: default;
}

.banner > div > .banner-title {
    padding: 32px 16px;
    font-size: 44px;
    line-height: 64px;
    text-align: center;
}

.banner > div > .banner-text {
    color: #5e6573;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
}

.banner > div > .group {
    max-width: 480px;
    text-align: center;
    border-radius: 8px;
    padding: 32px 16px;
    margin: 0 auto;
    background: #f4f7fa;
}

.banner > div .banner-button {
    text-align: center;
    padding: 32px 0 8px 0;
}

.banner > div .banner-hint {
    text-align: center;
    color: #5e6573;
    font-size: 12px;
}

.banner > div > h1 {
    font-size: 48px;
    text-align: center;
    margin: 16px 0 8px 0;
    color: #0052c9;
}

.banner > div > h2 {
    font-size: 32px;
    font-weight: 400;
    color: #566079;
    text-align: center;
    margin: 8px 0 8px 0;
}

.carousel {
    padding: 8px 0 56px 0;
    background: linear-gradient(180deg, white, #f4f7fa);
}

.carousel > div {
    position: relative;
    width: 100%;
    max-width: 1056px;
    margin: 0 auto;
    padding: 16px;
    line-height: 0;
}

.carousel > div img {
    width: 100%;
    box-shadow: 0 10px 26px 0 rgba(0, 0, 0, 0.25);
}

.carousel-button {
    position: absolute;
    top: calc(50% - 16px);
    width: 36px;
    height: 32px;
    opacity: 0.5;
    transition: 100ms;
    cursor: pointer;
}

.carousel-button:hover {
    opacity: 1;
}

.carousel-left-button {
    left: -48px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15.5" stroke="rgb(94,101,115)" fill="none"/><line x1="16" y1="24" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="16" y1="8" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="24" y1="16" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/></svg>') left no-repeat;
    background-size: 36px 32px;
}

.carousel-left-button:hover {
    background-size: 32px 32px;
}

.carousel-left-button:active {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15.5" stroke="rgb(94,101,115)" fill="rgb(208,211,216)"/><line x1="16" y1="24" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="16" y1="8" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="24" y1="16" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/></svg>') left no-repeat;
    background-size: 32px 32px;
}

.carousel-right-button {
    right: -48px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15.5" stroke="rgb(94,101,115)" fill="none"/><line x1="16" y1="24" x2="24" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="16" y1="8" x2="24" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="24" y1="16" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/></svg>') left no-repeat;
    background-size: 32px 32px;
}

.carousel-right-button:hover {
    background-size: 36px 32px;
}

.carousel-right-button:active {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15.5" stroke="rgb(94,101,115)" fill="rgb(208,211,216)"/><line x1="16" y1="24" x2="24" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="16" y1="8" x2="24" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/><line x1="24" y1="16" x2="8" y2="16" stroke="rgb(94,101,115)" stroke-linecap="round"/></svg>') left no-repeat;
    background-size: 36px 32px;
}

.killer-feature {
    padding: 48px 16px 16px 16px;
    background: white;
    cursor: default;
}

.killer-feature > div {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;
}

.killer-feature > div > div {
    color: #1b62c9;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    padding: 24px;
    /*background: url(/static/images/memory-efficient.svg) 48px 0 no-repeat;*/
    /*background-size: 144px 144px;*/
}

.key-feature {
    padding: 48px 16px 16px 16px;
    background: white;
    cursor: default;
}

.key-feature > div {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    overflow: hidden;
}

.key-feature > div > div {
    float: left;
    width: 31%;
    margin: 8px;
    padding: 24px;
    border-radius: 8px;
    background-color: #f4f7fa;
}

.key-feature > div > div > h3 {
    color: #1b62c9;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-align: left;
    margin: 18px 0;
}

.key-feature > div > div > p {
    font-size: 18px;
}

.feature {
    width: 100%;
    max-width: 1024px;
    min-height: 380px;
    margin: 0 auto;
    padding: 32px 0;
    cursor: default;
}

.feature > div > div {
    float: left;
    width: 50%;
    padding: 16px;
}

.feature > div > div:last-child {
    text-align: center;
}

.feature > div > div > h3 {
    color: #1b62c9;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-align: left;
    margin: 18px 0;
}

.feature > div > div > p {
    font-size: 18px;
}

.feature img {
    max-width: 100%;
    box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.15);
}

.final-block {
    padding: 32px 0;
    cursor: default;
}

.final-block > div {
    max-width: 1024px;
    margin: 0 auto;
    padding: 16px;
    text-align: center;
}

.final-block > div > span {
    font-size: 32px;
    padding: 8px 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(27, 98, 201, 0) 0%, rgba(27, 98, 201, 0.15) 100%);
}

.component-source-block {
    padding: 32px 0;
    background: linear-gradient(90deg, white, #f4f7fa);
    cursor: default;
}

.component-source-block > div {
    max-width: 1024px;
    margin: 0 auto;
    padding: 16px;
    text-align: center;
}

.component-source-block > div > div:first-child {
    font-size: 20px;
    line-height: 48px;
}

.component-source-block > div > div:last-child {
    color: #5e6573;
    font-size: 12px
}

.page-title {
    width: 100%;
    cursor: default;
}

.page-title > div {
    max-width: 1024px;
    margin: 0 auto;
    padding: 16px;
}

.page-title > div > h1 {
    font-size: 36px;
    font-weight: 400;
    text-align: left;
    color: #004ab6;
    margin: 16px 0 8px 0;
}

.page-title > div > h2 {
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    margin: 16px 0 8px 0;
}

.docs-title {
    width: 100%;
    cursor: default;
}

.docs-title > div {
    max-width: 1304px;
    margin: 0 auto;
    padding: 16px;
}

.docs-title > div > h1 {
    font-size: 36px;
    font-weight: 400;
    color: #004ab6;
    text-align: left;
    margin: 32px 0 0 264px;
}

.menu {
    float: left;
    width: 280px;
    padding: 24px 16px;
}

.menu > a {
    display: block;
    float: left;
    width: 100%;
    height: 40px;
    line-height: 38px;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    color: #212529;
    border-radius: 6px;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: background-color 100ms;
    cursor: pointer;
}

.menu > a:hover {
    background-color: #f4f5f7;
}

.menu > a[data-select] {
    font-weight: 600;
    background-color: #f4f5f7;
}

.menu > a:active {
    background-color: #eaedef;
}

.content > div {
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;
}

.wide-content > div {
    max-width: 1336px;
}

.wide-content > div > div.page {
    float: left;
    width: calc(100% - 280px);
}

.page {
    padding: 16px;
}

.page > div {
    float: left;
    width: 100%;
}

.page > div.title {
    font-size: 24px;
    cursor: default;
}

.page > div.subhead {
    font-size: 20px;
    line-height: 40px;
    margin-top: 24px;
    border-bottom: 1px solid #ebedef;
    cursor: default;
}

.page > div.label {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 16px;
    cursor: default;
}

.page > div.author {
    float: left;
    width: 100%;
    margin-top: 16px;
}

.page > div.author > div:first-child {
    float: left;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    margin-right: 12px;
    background: url(/static/images/founder-photo.jpg) left no-repeat;
    background-size: 48px 48px;
}

.page > div.author > div:last-child {
    float: left;
    font-size: 14px;
    color: #5e6573;
    line-height: 20px;
    padding: 4px 0;
    cursor: default;
}

.page > p {
    float: left;
    width: 100%;
    margin: 1em 0 0 0;
    cursor: default;
}

.page > p.image {
    margin: 1.5em 0 0.5em 0;
}

.page > p > img {
    max-width: 100%;
    height: auto;
    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.25);
}

.page > p.neg-comment {
    color: #41464f;
    font-style: italic;
    font-size: 16px;
    padding: 1em 1em 1em 5.5em;
    border-radius: 6px;
    background-color: #fff1ee;
    background-position: 20px 20px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
}

.page > p.pos-comment {
    color: #41464f;
    font-style: italic;
    font-size: 16px;
    padding: 1em 1em 1em 5.5em;
    border-radius: 6px;
    background-color: #e5ffea;
    background-position: 20px 20px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
}

.page > p.boy-comment {
    background-image: url(/static/images/blog/icons/boy-user.svg);
}

.page > p.businessman-comment {
    background-image: url(/static/images/blog/icons/businessman-user.svg);
}

.page > p.female-comment {
    background-image: url(/static/images/blog/icons/female-user.svg);
}

.page > p.girl-comment {
    background-image: url(/static/images/blog/icons/girl-user.svg);
}

.page > p.grandmother-comment {
    background-image: url(/static/images/blog/icons/grandmother-user.svg);
}

.page > p.man-comment {
    background-image: url(/static/images/blog/icons/man-user.svg);
}

.page > p.oldman-comment {
    background-image: url(/static/images/blog/icons/oldman-user.svg);
}

.page > div.table-of-contents {

}

.page > div.table-of-contents > a {
    display: block;
    float: left;
    width: calc(30% - 8px);
    line-height: 48px;
    padding: 0 16px;
    margin-right: 16px;
    color: #212529;
    border-radius: 6px;
    text-decoration: none;
    background-color: #f4f5f7;
    transition: background-color 100ms;
}

.page > div.table-of-contents > a:hover {
    background-color: #eaedef;
}

.page > div.table-of-contents > a:active {
    background-color: #eaedef;
}

.page > p.text-check {
    padding: 1em 1em 1em 4em;
    background-position: 20px center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    border-radius: 6px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="check_mark" fill="rgb(0,188,125)" d="m5.23,14.57L.16,9.51c-.21-.21-.21-.59,0-.85l.8-.8c.21-.21.59-.21.85,0l3.84,3.84L14.19,3.16c.21-.21.59-.21.85,0l.8.8c.21.21.21.59,0,.85L6.08,14.57c-.27.21-.64.21-.85,0Z"/></svg>');
    background-color: #f4f7fa;
}

.page ul.bullet,
.page ol.bullet {
    float: left;
    cursor: default;
}

.page ul.bullet > li,
.page ol.bullet > li {
    padding-left: 8px;
}

.page ol.bullet > li:not(li:last-child),
.page ul.bullet > li:not(li:last-child) {
    margin-bottom: 8px;
}

.page ul.check > li {
    padding-left: 8px;
    padding-bottom: 8px;
    list-style-type: "✅";
}

.page > div.text {
    margin-top: 16px;
    cursor: default;
}

.page > div.radius, .page > p.radius {
    padding: 16px;
    border-radius: 6px;
    background: #f4f7fa;
}

.page > div.info, .page > p.info {
    background: #deebff;
}

.page > div.success, .page > p.success {
    background: #deffe4;
}

.page > div.error, .page > p.error {
    background: #ffdede;
}

.page > p.idea {
    padding: 16px 16px 16px 56px;
    border-radius: 6px;
    background: #f0ffde url(/static/images/idea.svg) 16px 20px no-repeat;
    background-size: 24px 24px;
}

.page > div.plans-note {
    font-size: 14px;
    color: #5e6573;
    text-align: center;
    cursor: default;
}

.page > div.plans-note > span {
    background: url(/static/images/sbp.svg) center no-repeat;
    background-size: 40px 20px;
}

.page > div.russian-plans-note {
    display: none;
    font-size: 16px;
    line-height: 22.5px;
    text-align: center;
    cursor: default;
}

.page > div.russian-plans-note > span {
    background: url(/static/images/sbp.svg) center no-repeat;
    background-size: 44px 24px;
}

.pricing-content > div > h1 {
    float: left;
    width: 100%;
    font-size: 40px;
    text-align: center;
    margin: 32px 0 0 0;
    cursor: default;
}

.pricing-content > div > h2 {
    float: left;
    width: 100%;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.3em;
    color: #004ab6;
    text-align: center;
    margin-top: 40px;
    cursor: default;
}

.pricing-content > div > h3 {
    float: left;
    width: 100%;
    font-size: 32px;
    text-align: center;
    margin: 64px 0 0 0;
}

.blog-post-content > div {
    font-size: 16px;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.blog-post-content > div > h1 {
    float: left;
    width: 100%;
    font-size: 40px;
    text-align: center;
    cursor: default;
}

.blog-post-content > div > h2 {
    font-size: 30px;
    cursor: default;
}

.page > div.blog-preview {
    float: left;
    min-height: 360px;
    margin-right: 48px;
    margin-bottom: 48px;
    width: calc(50% - 48px);
    cursor: default;
}

.page > div.blog-preview > h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page > div.blog-preview > h2 > a {
    color: #004ab6;
}

.page > div.blog-preview > div.bg {
    width: 448px;
    height: 252px;
    color: white;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    border-radius: 6px;
    background: #1B62C9;
    background: linear-gradient(135deg, rgb(220, 235, 255) 0%, rgba(27, 201, 195, 1) 50%, rgba(27, 98, 201, 1) 100%);
}

.page > div.blog-preview > img {
    width: 100%;
    height: auto;
}

.page > div.blog-preview > div {
    margin-top: 8px;
    font-size: 14px;
    color: #5e6573;
}

.page > div.blog-preview > div > span:first-child {
    display: block;
    float: left;
}

.page > div.blog-preview > div > span:last-child {
    display: block;
    float: right;
}

span.header-gradient {
    background: -webkit-linear-gradient(360deg, #0052c9, #00337d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

span.apple-gradient {
    background: -webkit-linear-gradient(360deg, #ae00c9, #04007d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

span.new-feature {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: #c3ffeb;
}

.page > div > div.plan {
    float: left;
    font-size: 16px;
    line-height: 30px;
    min-height: 492px;
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #d2dceb;
    width: calc(33% - 8px);
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.1);
}

.page > div > div.plan:not(:last-child) {
    margin-right: 16px;
}

.page > div > div.plan > div.name {
    font-size: 28px;
    font-weight: 600;
    margin: 8px 0;
}

.page > div > div.plan > div.name > span {
    font-size: 15px;
    margin-left: 10px;
    border-radius: 4px;
    padding: 4px 8px 5px 8px;
    vertical-align: bottom;
    background-color: rgba(12, 125, 213, 0.2);
}

.page > div > div.plan > div.price {
    font-size: 32px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, Consolas, Ubuntu, monospace;
    color: #1b62c9;
    margin-top: 24px;
}

.page > div > div.plan > div.price > span > span {
    font-size: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    vertical-align: top;
}

.page > div > div.plan > div.for {
    color: #5e6573;
    font-size: 14px;
    margin-top: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page > div > div.plan > a.button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: white;
    display: block;
    width: 100%;
    line-height: 40px;
    margin: 16px 0;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-color: #1b62c9;
    transition: background-color 150ms;
}

.page > div > div.plan > a.button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

.page > div > div.plan > a.button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

.page > div > div.plan > div.subhead {
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
    padding: 6px 0;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page > div > div.plan > div.check {
    font-size: 15px;
    line-height: 20px;
    padding: 6px 0 6px 24px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="check_mark" fill="rgb(0,188,125)" d="m5.23,14.57L.16,9.51c-.21-.21-.21-.59,0-.85l.8-.8c.21-.21.59-.21.85,0l3.84,3.84L14.19,3.16c.21-.21.59-.21.85,0l.8.8c.21.21.21.59,0,.85L6.08,14.57c-.27.21-.64.21-.85,0Z"/></svg>') left no-repeat;
    background-size: 16px 16px;
}

.page > div.features {
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #d2dceb;
    margin-top: 32px;
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.1);
    cursor: default;
}

.page > div.features > table {
    width: 100%;
    border-spacing: 0;
}

.page > div.features > table > thead > tr > th {
    font-size: 20px;
    font-weight: 600;
    padding: 12px;
}

.page > div.features > table > thead > tr > th:first-child {
    width: 64%;
}

.page > div.features > table > thead > tr > th:not(:first-child) {
    width: 12%;
    text-align: center;
}

.page > div.features > table > tbody > tr > td {
    font-size: 16px;
    padding: 12px;
}

.page > div.features > table > tbody > tr > td:first-child {
    border-radius: 6px 0 0 6px;
}

.page > div.features > table > tbody > tr > td:last-child {
    border-radius: 0 6px 6px 0;
}

.page > div.features > table > tbody > tr:hover {
    background: #f4f7fa;
}

.page > div.features > table td.check {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="check_mark" fill="rgb(0,188,125)" d="m5.23,14.57L.16,9.51c-.21-.21-.21-.59,0-.85l.8-.8c.21-.21.59-.21.85,0l3.84,3.84L14.19,3.16c.21-.21.59-.21.85,0l.8.8c.21.21.21.59,0,.85L6.08,14.57c-.27.21-.64.21-.85,0Z"/></svg>') center no-repeat;
    background-size: 16px 16px;
}

.page > div.questions {
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #d2dceb;
    margin-top: 32px;
    margin-bottom: 24px;
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.1);
    cursor: default;
}

.page > div.questions > div:not(:first-child) {
    margin-top: 32px;
}

.page > div.questions > div > div:first-child {
    font-size: 18px;
    font-weight: 600;
}

.page > div.questions > div > div:last-child {
    margin-top: 8px;
}

a.blue-button {
    font-weight: 600;
    color: white;
    display: block;
    width: fit-content;
    line-height: 40px;
    padding: 0 24px;
    margin: 16px auto;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-color: #1b62c9;
    transition: background-color 150ms;
}

a.blue-button:hover {
    background-color: rgba(27, 98, 201, 0.85);
}

a.blue-button:active {
    background-color: rgba(27, 98, 201, 0.7);
}

.page > div.distribution {
    line-height: 30px;
    min-height: 432px;
    margin-top: 48px;
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #d2dceb;
    width: calc(32% - 4px);
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.1);
}

.page > div.distribution[data-current] {
    border: 1px solid #829bc5;
    background-color: #f4f7fa;
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.2);
}

.page > div.distribution > div.type {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin: 16px 0;
    cursor: default;
}

.page > div.distribution > div.icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/nativerest-icon.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.postman-icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/blog/icons/postman-logo.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.insomnia-icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/blog/icons/insomnia-logo.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.bruno-icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/blog/icons/bruno-logo.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.apidog-icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/blog/icons/apidog-logo.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.httpie-icon {
    height: 96px;
    margin: 32px;
    background: url(/static/images/blog/icons/httpie-logo.svg) center no-repeat;
    background-size: 96px 96px;
}

.page > div.distribution > div.version {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 16px;
    cursor: default;
}

.page > div.distribution > div.btn {
    text-align: center;
    margin-top: 32px;
}

.page > div.distribution > div.compatible {
    color: #5e6573;
    font-size: 12px;
    padding-top: 8px;
    line-height: 16px;
    text-align: center;
    cursor: default;
}

.page > div.distribution > div.mirror {
    text-align: center;
    margin: 8px;
    line-height: 22px;
    cursor: default;
}

.page > div.release-notes {
    line-height: 30px;
    min-height: 432px;
    margin-top: 48px;
    margin-bottom: 16px;
    padding: 32px;
    border-radius: 6px;
    border: 1px solid #d2dceb;
    width: calc(40% - 16px);
    box-shadow: 2px 2px 10px 2px rgba(34, 60, 80, 0.1);
    cursor: default;
}

.page > div.release-notes > div.title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.page > div.release-notes > div.built {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 16px;
}

.page > div.release-notes > div.check {
    font-size: 15px;
    line-height: 20px;
    padding: 6px 0 6px 24px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="check_mark" fill="rgb(0,188,125)" d="m5.23,14.57L.16,9.51c-.21-.21-.21-.59,0-.85l.8-.8c.21-.21.59-.21.85,0l3.84,3.84L14.19,3.16c.21-.21.59-.21.85,0l.8.8c.21.21.21.59,0,.85L6.08,14.57c-.27.21-.64.21-.85,0Z"/></svg>') left no-repeat;
    background-size: 16px 16px;
}

.page > div.release-notes > div.changelog {
    margin: 16px 0 6px 24px;
}

.page > div.note {
    font-size: 12px;
    line-height: 20px;
    margin-top: 4px;
    cursor: default;
}

.page > div.note > span.example {
    color: #1b62c9;
    margin-left: 10px;
    cursor: pointer;
}

.page > div.note > span.example:hover {
    text-decoration: underline;
}

.page > div.attachment {
    font-size: 14px;
    width: 278px;
    max-width: calc(100% - 126px);
    height: 32px;
    border-radius: 3px;
    border: 1px solid #d1d5da;
    line-height: 30px;
    padding: 0 8px;
    margin-left: 8px;
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.page span.code {
    font-family: Consolas, monospace;
    font-size: 14px;
    line-height: normal;
    padding: 3px 6px;
    border-radius: 3px;
    background-color: #f3f4f4;
}

.page p.code {
    font-family: Consolas, monospace;
    padding: 12px 16px;
    border-radius: 4px;
    background-color: #f4f7fa;
}

.page a.shortcut {
    font-family: Consolas, monospace;
    font-size: 14px;
    color: #006445;
    line-height: normal;
    padding: 3px 6px;
    border-radius: 3px;
    text-decoration: none;
    background-color: #f3f4f4;
}

.page a.shortcut:hover {
    background-color: #eaedef;
}

.page a.shortcut:active {
    background-color: #d6dbde;
}

.page a.http-method {
    font-family: Consolas, monospace;
    font-weight: 600;
    line-height: normal;
    padding: 3px 6px;
    border-radius: 3px;
    text-decoration: none;
    background-color: #f3f4f4;
}

.page a.http-method:hover {
    background-color: #eaedef;
}

.page a.http-method:active {
    background-color: #d6dbde;
}

.page span.bold {
    font-weight: 500;
}

.page span.name {
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 3px;
    background-color: #f3f4f4;
}

.page span.text-gradient {
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 3px;
    background: linear-gradient(45deg, rgba(242, 255, 228, 1) 0%, rgba(228, 255, 235, 1) 100%);
}

.page span.version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(228, 255, 247, 1) 0%, rgba(228, 240, 255, 1) 100%);
}

.page span.postman-version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 243, 228, 1) 0%, rgba(255, 230, 228, 1) 100%);
}

.page span.insomnia-version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(228, 236, 255) 0%, rgb(233, 228, 255) 100%);
}

.page span.bruno-version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(255, 235, 201) 0%, rgb(255, 214, 206) 100%);
}

.page span.apidog-version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(222, 249, 255) 0%, rgb(227, 235, 255) 100%);
}

.page span.httpie-version-gradient {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(218, 255, 226) 0%, rgb(209, 255, 250) 100%);
}

.page table, .page table {
    border-collapse: collapse;
    border-spacing: 0;
}

.page table th, .page table td {
    padding: 6px;
}

.page table.border th {
    background-color: #f4f7fa;
}

.page table.border th, .page table.border td {
    border: 1px solid #dee0e3;
    cursor: default;
}

.page input,
.page select,
.page textarea {
    float: left;
    width: 240px;
    margin-top: 8px;
    border-radius: 3px;
    border: 1px solid #d1d5da;
    background-color: #fafbfc;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
    outline: none;
    transition: all 100ms ease;
    transition-property: border-color, background-color, box-shadow, outline;
}

.page input {
    padding: 5px 8px;
}

.page select {
    padding: 4px 4px;
}

.page textarea {
    resize: vertical;
    padding: 5px 8px;
}

.page input:focus,
.page select:focus,
.page textarea:focus {
    border-color: #2188ff;
    background-color: white;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075), 0 0 0 0.2em rgba(3, 102, 214, .3);
    outline: none;
}

.page input:read-only {
    background-color: hsla(0, 0%, 93%, 1);
    cursor: default;
}

.page div.status {
    float: left;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    margin-top: 12px;
    border-radius: 12px;
    transition: 150ms;
    cursor: default;
}

.page div.status-warn:hover {
    background-color: #ecedf0;
}

.page div.status-warn:active {
    background-color: #dddee1;
}

.page div.status-ok {
    background: url('data:image/svg+xml,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11.5" stroke="rgb(72,154,35)" fill="none" /><line x1="5" y1="11" x2="10" y2="16" stroke="rgb(72,154,35)" stroke-linecap="round"/><line x1="10" y1="16" x2="19" y2="8" stroke="rgb(72,154,35)" stroke-linecap="round"/></svg>') center no-repeat;
    background-size: 24px 24px;
}

.page div.status-warn {
    background: url('data:image/svg+xml,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11.5" stroke="rgb(250,166,26)" fill="none" /><line x1="12" y1="6" x2="12" y2="14" stroke="rgb(250,166,26)" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="18" r="1.5" fill="rgb(250,166,26)" /></svg>') center no-repeat;
    background-size: 24px 24px;
    cursor: pointer;
}

.page > .captcha {
    float: left;
    clear: both;
    font-family: Consolas, monospace;
    font-size: 3px;
    text-align: center;
    width: 400px;
    max-width: 100%;
    height: 54px;
    margin-top: 16px;
    padding: 10px;
    border: 1px solid #d8dee2;
    border-radius: 5px;
    cursor: default;
    user-select: none;
}

.page > div.button {
    clear: both;
    width: auto;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    padding: 0 16px;
    margin-top: 16px;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    transition: 150ms;
    cursor: pointer;
    user-select: none;
}

.page > div.button:hover {
    border-color: rgba(27, 31, 35, .35);
    background-color: #e6ebf1;
    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
}

.page > div.button:active {
    border-color: rgba(27, 31, 35, .35);
    background-color: #e9ecef;
    background-image: none;
    box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, .15);
}

.page > input[type=file] {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
    z-index: -1;
}

.page > input[type=file] + label {
    float: left;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    padding: 0 16px;
    margin-top: 8px;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    transition: 150ms;
    cursor: pointer;
    user-select: none;
}

.page > input[type=file] + label:hover {
    border-color: rgba(27, 31, 35, .35);
    background-color: #e6ebf1;
    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
}

.page > input[type=file] + label:active {
    border-color: rgba(27, 31, 35, .35);
    background-color: #e9ecef;
    background-image: none;
    box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, .15);
}

.page > div.container {
    position: relative;
    width: 240px;
    padding: 24px;
    margin-top: 16px;
    margin-right: 16px;
    border-radius: 6px;
    cursor: default;
    background-color: #f6f8fa;
}

.page > div.container > div:first-child {
    float: left;
    color: #586069;
    line-height: 16px;
}

.page > div.container > div:last-child {
    float: left;
    clear: both;
    color: #24292e;
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    margin-top: 16px;
}

.page > h1 {
    float: left;
    width: 100%;
    cursor: default;
}

.page > h2 {
    float: left;
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
    margin: 32px 0 0 0;
    cursor: default;
}

.page > h3 {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    margin: 32px 0 0 0;
    cursor: default;
}

.page > h4 {
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin: 1em 0 0 0;
    cursor: default;
}

.footer {
    padding: 24px 0;
    background-color: #f4f7fa;
}

.footer > div {
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;
}

.footer > div > div {
    float: left;
    width: 20%;
    padding: 16px;
}

.footer > div > div > div > img {

}

.footer > div > div > div > select {
    width: 130px;
    margin: 8px 0 24px 0;
}

.footer > div > div > div {
    float: left;
    width: 100%;
    line-height: 32px;
    cursor: default;
}

.footer > div > div > div:first-child {
    font-size: 18px;
    font-weight: 600;
    padding: 8px 0;
}

.footer > div > div > div > a {
    color: #4c515b;
}

.footer > div > div > div > a:hover {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 2px solid #4c515b;
}

.footer > div > div > div.x-com {
    padding-left: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"/></svg>') left no-repeat;
    background-size: 16px 16px;
}

.footer > div > div > div.github {
    padding-left: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14"><path fill="rgb(36,41,47)" fillrule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>') left no-repeat;
    background-size: 16px 16px;
}

.footer > div > div > div.youtube {
    padding-left: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14"><path fill="rgb(224,47,47)" d="M15.84,4.59a3.89,3.89,0,0,0-.64-1.7,2.23,2.23,0,0,0-1.6-.72C11.36,2,8,2,8,2H8s-3.36,0-5.6.17a2.23,2.23,0,0,0-1.6.72,3.89,3.89,0,0,0-.64,1.7A27.46,27.46,0,0,0,0,7.35V8.64a27.53,27.53,0,0,0,.16,2.77A3.86,3.86,0,0,0,.8,13.1a2.58,2.58,0,0,0,1.76.73C3.84,14,8,14,8,14s3.36,0,5.6-.18a2.19,2.19,0,0,0,1.6-.72,3.86,3.86,0,0,0,.64-1.69A27.46,27.46,0,0,0,16,8.65V7.35A27.46,27.46,0,0,0,15.84,4.59Z"/><polygon fill="rgb(255,255,255)" points="6 5 6 11 11 8 6 5"/></svg>') left no-repeat;
    background-size: 16px 16px;
}

.footer > div > div > div.linkedin {
    padding-left: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g><path fill="rgb(40,103,178)" d="M16,2a2,2,0,0,0-2-2H2A2,2,0,0,0,0,2V14a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2Z"/><g><rect fill="rgb(255,255,255)" x="1.91" y="5.58" width="2.68" height="8.06"/><path fill="rgb(255,255,255)" d="M3.27,1.7a1.39,1.39,0,1,0,0,2.78h0a1.39,1.39,0,1,0,0-2.78Z"/><path fill="rgb(255,255,255)" d="M11.16,5.39A2.68,2.68,0,0,0,8.75,6.72V5.58H6.07c0,.76,0,8.06,0,8.06H8.75V9.14a1.82,1.82,0,0,1,.09-.65,1.46,1.46,0,0,1,1.37-1c1,0,1.36.74,1.36,1.82v4.31h2.68V9C14.25,6.55,12.93,5.39,11.16,5.39Z"/></g></g></svg>') left no-repeat;
    background-size: 16px 16px;
}

.footer > div > div > div.producthunt {
    padding-left: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="m20,40c11.05,0,20-8.95,20-20S31.05,0,20,0,0,8.95,0,20s8.95,20,20,20" fill="rgb(255,97,84)"/><path d="m22.67,20h-5.67v-6h5.67c1.66,0,3,1.34,3,3s-1.34,3-3,3m0-10h-9.67v20h4v-6h5.67c3.87,0,7-3.13,7-7s-3.13-7-7-7h0" fill="rgb(255,255,255)"/></svg>') left no-repeat;
    background-size: 16px 16px;
}

.copyright {
    padding: 16px 0;
    background-color: #e2eaf2;
    cursor: default;
}

.copyright > div {
    font-size: 12px;
    font-family: Consolas, monospace;
    width: 100%;
    max-width: 1024px;
    padding: 0 16px;
    margin: 0 auto;
    overflow: hidden;
}

@media (max-width: 1180px) {
    .carousel-left-button {
        left: 24px;
    }

    .carousel-right-button {
        right: 24px;
    }
}

@media (max-width: 832px) {
    .page > div > div.plan {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .page > div.features {
        padding: 8px;
    }

    .page > div.features > table > thead > tr > th {
        font-size: 15px;
        font-weight: 600;
    }

    .page > div.features > table > tbody > tr > td {
        font-size: 15px;
    }
}

@media (max-width: 1000px) {

    .sale {
        display: none;
    }

    .header {
        position: fixed;
        padding: 0;
        height: 64px;
        z-index: 3;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
    }

    .header > div > .logo {
        margin: 0;
    }

    .header > div > a.menu-button {
        display: none;
    }

    .header > div > div.switch {
        display: block;
    }

    .header > div > a.sign-up-button {
        display: none;
    }

    .banner > div {
        padding-top: 80px;
    }

    .page-title > div {
        padding-top: 80px;
    }

    .docs-title > div {
        padding-top: 80px;
    }

    .docs-title > div > h1 {
        font-size: 26px;
        font-weight: 300;
        margin: 0;
    }

    .pricing-content > div > h1 {
        margin: 88px 0 0 0;
    }

    .page > div.russian-plans-note {
        font-size: 14px;
    }

    .page > div.distribution {
        width: 100%;
        margin-right: 0;
    }

    .page > div.release-notes {
        width: 100%;
    }

    .page > div.blog-preview {
        width: 100%;
        margin-right: 0;
    }

    .sidebar {
        position: fixed;
        top: 64px;
        left: -216px;
        width: 200px;
        height: calc(100vh - 64px);
        background-color: #fafbfc;
        transition: left 150ms;
        z-index: 3;
    }

    .sidebar[data-visible=true] {
        left: 0;
        box-shadow: 8px 0 16px 0 rgba(0, 0, 0, 0.15);
    }

    .header a.menu-button {
        float: left;
        width: 100%;
        height: 64px;
        font-size: 20px;
        line-height: 64px;
    }

    .header a.menu-button:hover,
    .header a.menu-button[data-select] {
        background-color: #eaedef;
    }

    .header a.menu-button:active {
        background-color: #d6dbde;
    }

    .killer-feature > div > div {
        padding: 0;
        background: none;
    }

    .key-feature > div > div {
        width: 100%;
    }

    .feature > div > div {
        width: 100%;
    }

    .final-block > div > span {
        font-size: 24px;
    }

    .footer > div > div:first-child {
        width: 100%;
    }

    .footer > div > div {
        width: 50%;
        padding: 24px;
    }

    .footer > div > div:first-child > div:first-child {
        width: 148px;
    }

    .footer > div > div:first-child > div:nth-child(2) {
        width: 200px;
    }
}

@media (max-width: 600px) {

    .menu {
        width: 100%;
    }

    .wide-content > div > div.page {
        float: none;
        width: auto;
    }
}

@media (max-width: 340px) {

    .header a.login-button {
        display: none;
    }
}