body.guide {
    background-color: rgb(45, 46, 50) !important;
}

body.guide .main.container {
    padding-top: 66px;
}

body.guide.use-case-page {
    background-color: #fff;
}

.guide .main.container > * {
    margin-left: auto;
    margin-right: auto;
}

.guide .header {
    background-color: inherit;
    padding: 15px;
}

.guide .header > * {
    float: left;
    color: #fff;
}

.guide .header h1 {
    margin: 0;
    font-size: 18px;
    line-height: 40px;
}

.guide .header .right {
    float: right;
 }

.guide .header .right a {
    display: inline-block;
    line-height: 40px;
    height: 40px;
    background: #3275D9;
    padding: 0 24px;
    color: #fff;
    text-decoration: none;
    border: 0;
}

.guide .header .right a:hover {
    box-shadow: 4px 4px 0 #4B94E6;
}

.guide h1,
.guide h2,
.guide h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
}

.guide h1 {
    margin-bottom: 50px;
}

.guide h1 a,
.guide h1 a:link,
.guide h1 a:visited,
.guide h1 a:active,
.guide h1 a:focus,
.guide h1 a:hover,
.guide h2 a,
.guide h2 a:link,
.guide h2 a:visited,
.guide h2 a:active,
.guide h2 a:focus,
.guide h2 a:hover {
    text-decoration: none;
    border: none;
}
.guide h1 a:hover,
.guide h2 a:hover {
    border-bottom: 1px solid #fff;
    color: #fff;
}


.guide article h1 a:hover,
.guide article h2 a:hover {
    border-bottom: 1px solid #000;
    color: #000;
}

.guide a.logo,
.guide a.logo:link,
.guide a.logo:visited,
.guide a.logo:active,
.guide a.logo:focus,
.guide a.logo:hover {
    text-decoration: none;
    border: none;
    color: #fff;
    margin: 0 32px 0 8px;
    line-height: 36px;
}

.guide .header .right span i {
    font-style: normal;
}

@media screen and (max-width: 800px) {
    .guide .logo {
        display: none;
    }

    .guide .header .right span i{
        display: none;
    }
    .guide .header .right span:after {
        content: "Create a guide"
    }

}


.guide article {
    margin-bottom: 50px;
    max-width: 780px;
    background: #fff;
    position: relative;
}

.guide article img {
    display: block;
    margin: 0 auto;
}

.guide article .text {
    padding: 20px;
    font-size: 1.2em;
    line-height: 1.5em;
}

.guide article .text p {
}

.guide article .index {
    padding: 10px;
    font-size: 0.8em;
}

.guide .index a {
    color: #000;
    text-decoration: none;
    border: 0;
}

.guide .index a:hover {
    text-decoration: underline;
}

.guide article .text img.richtext-image.full-width {
    margin-right: -20px;
    margin-left: -20px;
    width: calc(100% + 40px);
}

.guide .sidebar {
    position: fixed;
    top: 120px;
    padding: 20px 24px 30px 24px;
    background: #fff;
    border-radius: 4px;
    max-width: 300px;

    & .toc-list {
        list-style: none;
        padding-left: 1em;

        & > li {
            margin: 5px 0;
        }
        & > li a {
            text-decoration: none;
            border-bottom: none;
            color: #0b0b0b;

            &:hover {
                color: #3275D9;
            }
        }

        & .is-active-link {
            font-weight: bold;
            color: #3275D9;
        }
    }

    & .js-toc > .toc-list {
        padding-left: 0;
        margin: 0;
    }

    & .js-toc {
        width: 100%;
    }
}


@media only screen and (max-width: 1420px) {
    .guide .sidebar {
        display: none;
    }
}