/*
 * layout
 */
.maxwidth{
    max-width: 1296px;
}

/*
 * header
 */
.navbar-brand svg{
    max-width: 109px;
    max-height: 40px;
}
.svg-letters{
    fill: rgba(255, 255, 255, 0.75);
}

/*
 *sidebars
 */
 .sidebar{
    padding: 0 12px;
    position: sticky;
    top: 88px;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
.sidebar-ul ul{
    margin-left: 6px;
}
.sidebar-toggler a{
    display: inline-block;
    text-decoration: none;
    margin: 1px 0;
    padding: 3px 8px;
    border-radius: 4px;
    transition: color .4s ease-out;
    transition: background-color .4s ease-out;
}
.sidebar-toggler a:hover{
    color: rgb(248, 249, 250);
    background-color: #06c;
}
.sidebar-ul > li > a{
    display: inline-block;
    padding: 3px 0;
    text-decoration: none;
}
.sidebar-ul > li > a:hover{
    text-decoration: underline;
}
@media (max-width: 991px){
    .hidden-scroll{
        overflow: hidden;
    }
    .sidebar{
        color: #BFBFBF;
        background-color: #212529;
        position: fixed;
        top: 66px;
        left: 0;
        width: 100%;
        height: calc(100vh - 56px);
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
        transition: .4s ease all;
    }
    .open-sidebar .sidebar{
        opacity: 1;
        transform: initial;
    }
    .sidebar-ul{
        padding: 1.6rem 2.6rem;
    }
}

/*
 * img
 */
p > .img-fluid {
    border: 1px solid #ccc;
}

/*
 * anchor
 */
h2::before {
    content: "";
    display: block;
    height: 80px;
    margin-top: -80px;
}
h2::after{
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/ico-title.svg") no-repeat bottom center;
}

/*
 * title
 */
h1, h2{
    font-weight: bold;
}
h2{
    margin-top: 4rem;
}
h3{
    margin-top: 2rem;
}
h4{
    margin-top: 1rem;
}

/*
 * Link
 */
main [href^="http"]::after,
main [href^="/"]::after,
footer [href^="http"]::after {
    content: "";
    display: inline;
    padding-left: 1.2rem;
}
main [href^="/"]::after{
    background: url(../images/arrow-down-left.svg) no-repeat right bottom;
}
main [href^="http"]::after,
footer [href^="http"]::after {
    background: url(../images/arrow-up-right.svg) no-repeat right bottom;
}

/*
 * ico info
 */
.alert svg{
    display: inline-block;
    max-width: 2.2rem;
    max-height: 2.2rem;
    padding: .1rem;
}

/*
 * 404
 */
 .container-404{
    padding: 3.2rem 1.6rem;
    background-color: #272f42;
    min-height: 100vh;
    color: #fff;
 }
 .conteudo-404{
    max-width: 990px;
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ilustracao-404{
    flex: 2 1 500px;
    padding: 10px;
}
.introducao-404{
    flex: 1 1 250px;
    padding: 10px;
}
.introducao-404 p{
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.introducao-404 h1{
    font-size: 3.052rem;
    line-height: 1;
    margin-bottom: 2rem;
}
.btn-404:hover{
    color:#f61;
}
@media (max-width: 1000px){
    .conteudo-404{
        padding-top: 4rem;
        margin: 0 auto;
    }
    .ilustracao-404{
        order: 2;
    }
}

/*
 * return top
 */
.return-top{
    visibility: hidden;
    opacity: 0;
    position: fixed;
    right: 22px;
    bottom: 16px;
    transition: all .4s ease-in-out;
}
.return-top.show-arrow{
    visibility: visible;
    opacity: 1;
}

/*
 * code
 */
pre code{
    border-radius: 4px;
}