h1, h2, h3, p { margin-top: 0; }

h2 { font-size: 2.1em; font-weight: 300; }

h3 { font-size: 1.7em; font-weight: 500; margin-bottom: 0; }

h4 { font-size: 1.5em; font-weight: 600; margin-bottom: 0; }


.content-wrapper {
    padding-left: 5%; padding-right: 5%;
}

.page-header {
    display: flex;  
    padding-left: 5%; padding-right: 5%;
    justify-content: space-between;
    background-color: #fff;
}

    .page-header--docs {
        padding-left: 2%; padding-right: 2%;
    }

.page-header-main {
    display: flex;
}

.page-body {
    display: flex; flex-direction: column;
    min-height: calc(100% - 36px);
}
    .page-body[data-page="docs"] {
        background: #f0f0f0 url(./../images/books-1845614_1920.jpg) 100%/cover no-repeat;
    }

    .page-body-header { 
        padding-top: 20px; padding-bottom: 30px;
        background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.2));
        background: rgba(65, 105, 225, 0.95) ;
        color: #fff;
    }    

.body-section {
    padding-top: 24px;
}

.link {
    position: relative;
    display: inline-flex; align-items: center;
    font-size: 1.4rem; font-weight: 300; 
    text-decoration: none; 
}

.logo-link {
    display: flex; align-items: center;
    height: 40px;
    width: 200px;
}
   
    .logo-link-img {
        height: 30px;
        width: 30px;
    }
   
    .logo-link-text {
        margin-left: 4px;
        font-size: 2em;
        font-weight: 300;
        color: #3A3B4F;
    }

    .link-version {
        display: inline-block;
        padding: 3px 6px;
        background-color: #271C40; 
    }

.page-menu {
    display: flex; flex-direction: row;
}

    .page-menu-item {
        position: relative;
        display: inline-flex;
        height: 100%;
        color: #444;
        font-size: 1.4em; font-weight: 300;
        cursor: default;
    }
        .page-menu-item:hover { color: #000; background-color: rgb(255, 220, 116); }
        .page-menu-item.selected { color: #222; font-weight: 500; } 

        .page-menu-item.selected .page-menu-item__text {
            border-bottom: 4px solid rgb(255, 192, 0);
        }
    .page-menu-item__text {
        display: flex; align-items: center;
        height: 100%;
        padding-left: 24px; padding-right: 24px;
        border-radius: 0;
        transition: .2s;
    }

    .page-menu-item__link {
        display: flex; align-items: center;
        height: 100%;
        color: inherit;
        text-decoration: none;
        padding-left: 24px; padding-right: 24px;
        text-align: center;
        border-radius: 0;
        transition: .2s;
    }

    .helper {
        position: absolute;
        top: 100%; left: 0;
        width: 120px;
        padding: 3px 6px 4px;
        border-radius: 1px;
        font-size: 1.2rem; font-style: normal;
        color: #fff;
        background-color: rgba(55, 55, 55, 0.85);
        opacity: 0;
        transition: .2s;
        transform: scale(0); transition-property: opacity, transform;
        z-index: 20;
    }

    .has-helper:hover > .helper {
        opacity: 1;   
        transform: scale(1) translateY(2px);
    }

.page-header-link {
    position: relative;
    display: flex;
    height: 100%;
    color: #6667AB;
    font-size: 1.4em; font-weight: 300;
    cursor: default;
}

.socials {
    align-self: flex-end;
    display: flex;
}

.social-link {
    display: block;
}

.social-link-img {
    height: 24px;
}

.page-footer {
    color: #fff;
    background-color: #031E36;
    padding-top: 48px; padding-bottom: 24px;
}

    .footer-nav {
        display: flex;
    }

    .footer-nav-item {
        display: inline-flex;
    }

        .footer-nav-item:not(:last-child):after {
            content: "|";
            margin-left: 4px; margin-right: 4px;
        }

        .footer-nav__link {
            color: #fff;
        }

    .footer-license {
        font-size: 1.3em;
    }

    .footer-license__link {
        color: #fff;
        font-weight: bold;
    }

.docs__main {
    display: flex;
    height: calc(100% - 25px);
}

.main-nav {
    padding-top: 24px; padding-left: 2%;
    width: 240px;
    background-color: #262626;
}

.nav-title {
    color: #f5f5f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.7em; font-weight: 500;
}

.nav-menu-title {
    color: #f5f5f5;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.6em; font-weight: 500;
    text-transform: uppercase;
    color: #f53b57;
}

.main-menu {
    display: flex; flex-direction: column;
    color: #fff;
    width: 200px;
}

    .main-menu-item {
        display: block;
        text-transform: uppercase;
        font-size: 1.4em;
        margin-bottom: 6px;
    }

    .main-menu-item__link {
        display: flex; align-items: center;
        height: 100%;
        color: inherit;
        text-decoration: none;
        padding: 2px;
        text-align: center;
        border-radius: 0;
        transition: .2s;
    }

    .main-menu-item-details {
        display: flex; flex-direction: column;
        text-transform: none;
        font-size: 0.9em;
    }


ul.dash {
    padding-left: 18px;
}
        
    ul.dash > li:before { 
        content: '-'; 
        margin-left: 4px;
        margin-right: 8px; 
        font-weight: bold;
        color: currentColor;
    } 


.main-content {
    flex-grow: 2;
    padding-top: 24px;
    padding-left: 12px;
    overflow: auto;
    background-color: #fefefe;
}

.body { 
    padding-top: 20px; padding-bottom: 20px;
    background-color: #f5f5f5; 
}



.page-title {
    margin: 0;
    font-size: 3em; font-weight: 300;
    color: #1b1b1b;
    color: #fff;
}

.article-title {
    font-size: 3em;
}

.article-section { padding-right: 60px; line-height: 1.5; }

.article-section-title {
    font-size: 2.4em;
    margin-bottom: 6px;
}

.article-section-subtitle {
    text-transform: uppercase;
    color: #111;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.article-section p {
    margin-top: 0;
    /* max-width: 900px; */
}

.title {
    margin-bottom: 2px;
    font-size: 1.7em; font-weight: 500;
}

.gentleman-quote {
    margin: 0;
    font: normal 1.4em 'Bookman Old Style', Bookman, 'Segoe UI', Tahoma, Geneva, sans-serif;
    color: #36454f;
    color: #e5e4e2;
}


.box-container { 
    position: relative;
    display: flex;
    flex-flow: row wrap;
    padding: 20px  calc(5% + 300px) 30px 5%; 
    z-index: 2;
}
    .box-container:after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: linear-gradient(to right, #555, rgba(0, 0, 0, 0.5));
        z-index: -1;
    }

.tablet {
    content: "";
    position: absolute;
    top: 10px; right: 5%; bottom: 10px;
    width: 300px;
    background: radial-gradient(#a9a9a9, #838996);
    border: solid #555;
    border-width: 10px 7px;
    border-radius: 5%;
    z-index: -1;
}

.box { border-radius: 2px; overflow: hidden; }
    .box:hover { box-shadow: 3px 5px 1px -1px rgba(85, 85, 85, 0.5); transition: .2s .2s; }

        .box:hover .box-title { margin-bottom: 0; padding-bottom: 13px; }

.box-title {
    position: relative;
    display: block;
    margin-top: 0; margin-bottom: 3px;
    color: #2D68C4;
    font-size: 1.7em; font-weight: 500;
    padding: 10px;
    background-color: #fefefe;
    z-index: 2;
    transition: .2s;
}

.box-description {
    margin: 0;
    background-color: #fefefe;
    padding: 5px 10px 10px;
}


.box-header:hover + .box-content li {
    margin-top: 0; 
    padding-top: 4px;
    background-color: #f5f5f5;
}



.box-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .box-content li {
        position: relative;
        margin-top: 2px;
        padding: 2px 10px 3px;
        background-color: #eee;
        z-index: 2;
        transition: .2s;
        z-index: 2;
    }
        .box-content li:hover { margin-left: 2px; background-color: #fff; }

    .box-link {
        display: block;
        color: #2D68C4;
    }

    .box-content li:last-child {
        flex-grow: 2;
    }

.link {
    position: relative;
    display: inline-block;
    text-decoration: none; text-align: center;
}

.link-wrapper {
    display: inline-block;
    width: 85px; height: 80px;
    text-align: center;
    padding-top: 20px; padding-left: 5px; padding-right: 5px;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3), 0 -1px 2px #999;
    background: #5497FF;
    border-radius: 50%;
    font-size: 1.4rem;
    vertical-align: middle;
    transform: scale(0.8);
}

.link-mail {
    position: relative;
    display: inline-flex;
    padding: 1px 5px 2px;
    text-decoration: none;
    color: #5497FF;
    transition: box-shadow .2s .3s;
    z-index: 2;
}
    .link-mail:before {
        content: "📧";
        margin-right: 6px;
    }
    .link-mail:visited { color: #2D68C4; }
    .link-mail:hover { box-shadow: 0 1px 1px #999; }
    .link-mail:after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: #f9f9f9;
        box-shadow: inset 0 -2px 0 #f9c446;
        z-index: -1;
        transition: box-shadow .5s;
    }
        .link-mail:hover:after { box-shadow: inset 0 -50px 0 #f0f0f0; }
        .link-mail:focus { box-shadow: none; }

.link-github {
    position: relative;
    display: inline-flex;
    padding: 1px 5px 2px;
    text-decoration: none;
    color: #5497FF;
    transition: box-shadow .2s .3s;
    z-index: 2;
}
    .link-github:before {
        content: "";
        height: 18px; width: 18px;
        background: url(/assets/images/GitHub-Mark-32px.png) 100%/contain no-repeat;
        margin-right: 6px;
    }
    .link-github:visited { color: #2D68C4; }
    .link-github:hover { box-shadow: 0 1px 1px #999; }
    .link-github:after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: #f9f9f9;
        box-shadow: inset 0 -2px 0 #262626;
        z-index: -1;
        transition: box-shadow .5s;
    }
        .link-github:hover:after { box-shadow: inset 0 -50px 0 #f0f0f0; }
        .link-github:focus { box-shadow: none; }

.link-youtube {
    position: relative;
    display: inline-flex;
    padding: 1px 5px 2px;
    text-decoration: none;
    color: #5497FF;
    transition: box-shadow .2s .3s;
    z-index: 2;
}
    .link-youtube:before {
        content: "";
        height: 24px; width: 24px;
        background: url(/assets/images/youtube_social_icon_red.png) 100%/contain no-repeat;
        margin-right: 6px;
    }
    .link-youtube:visited { color: #2D68C4; }
    .link-youtube:hover { box-shadow: 0 1px 1px #999; }
    .link-youtube:after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: #f9f9f9;
        box-shadow: inset 0 -2px 0 #F20505;
        z-index: -1;
        transition: box-shadow .5s;
    }
        .link-youtube:hover:after { box-shadow: inset 0 -50px 0 #f0f0f0; }
        .link-youtube:focus { box-shadow: none; }

.link-out {
    display: inline-block;
    padding: 1px 5px 2px;
    position: relative;
    text-decoration: none;
    color: #5497FF;
    transition: box-shadow .2s .3s;
    z-index: 2;
}
    .link-out:visited { color: #2D68C4; }
    .link-out:hover { box-shadow: 0 1px 1px #999; }
    .link-out:after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: #f9f9f9;
        box-shadow: inset 0 -2px 0 currentColor;
        z-index: -1;
        transition: box-shadow .5s;
    }
        .link-out:hover:after { box-shadow: inset 0 -50px 0 #f0f0f0; }



.tutorial-section {
    padding-top: 24px; padding-bottom: 60px;
    background-color: rgba(245, 245, 245, 0.9);
}

.section-header-title {
    margin-bottom: 2px;
}

.tutorial-list {
    display: flex;
}

.tutorial-item {
    margin-right: 12px;
}

.tutorial-item__title {
    margin-bottom: 6px;
    font: 400 1.1em 'Segoe UI', 'Droid Sans', Ubuntu, 'Lucida Grande', Arial, sans-serif;
    color: #555;
    text-transform: uppercase;
}

.tutorial-item__link {
    display: block;
    height: 240px;
}

.tutorial-item__link-img {
    display: block;
    height: 100%;
    width: auto;
    box-shadow: 1px 2px 3px #999;
}
    
/* @media only screen and (max-width: 768px) {
    .content-wrapper {
        padding: 0 1%; 
    }
} */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .box {
        width: calc(50% - 5px);
    }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .box { width: calc(33.3% - 5px); }
        .box:not(:nth-child(3n)) { margin-right: 10px; }
        .box:nth-child(n + 4) { margin-top: 10px; }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .box { width: calc(30% - 5px); }
}