/* =======================================
File name: articles_2021.css
Author: NJ 
Date of creation: 5th April 2021
Last updated: 29 December 2021
========================================*/

/* Media Queries */

/* Media Queries with max-width 990px */

@media only screen and (max-width: 990px) {

    .aside {
        display: none;
    }

    .title1 {
        margin: 0 auto;
        margin-top: 50px;
    }

    .editor {
        margin: 0 auto;
    }

    .footer {
        margin: 0 auto;
        margin-top: 30px;
    }

    .stButton .stHBubble,
    .stButton .stBubble_hcount {
        height: 22px !important;
    }

    .footer ul li a {
        font-size: 14px;
    }

    /*----------------------------------*/
    /* Content */
    /*----------------------------------*/

    .content {
        grid-template-columns: 1fr;
    }

    /*----------------------------------*/
    /* Aside */
    /*----------------------------------*/

    .aside {
        align-items: flex-start;
        margin: 20px;
        align-items: center;
        padding: 20px;
    }

    /*----------------------------------*/
    /* Published Articles */
    /*----------------------------------*/

    .published h3 {
        max-width: 500px;
    }

    .row {
        max-width: 380px;
    }

    /*----------------------------------*/
    /* Video Choice of the Week */
    /*----------------------------------*/

    .aside img {
        display: none;
    }

    .aside .video-choice {
        display: none;
    }

    .aside p {
        display: none;
    }

    .aside .tip {
        display: none;
    }

    .video {
        display: none;
    }

    .row img {
        display: block;
    }

    .text-container p {
        display: block;
    }

    /*----------------------------------*/
    /* Ask Jeeves */
    /*----------------------------------*/

    .jeeves {
        display: none;
    }

    /*----------------------------------*/
    /* Ad */
    /*----------------------------------*/

    .ads {
        display: none;
    }

    /*----------------------------------*/
    /* Social Media Logos */
    /*----------------------------------*/

    .twitter {
        display: none;
    }

    .linkedin {
        display: none;
    }

    .facebook {
        display: none;
    }

}

/* Media Queries with max-width 965px */

@media only screen and (max-width: 965px) {

    .article {
        margin: 0 15px;
        border: none;
    }

    article p {
        padding-right: 0;
    }

    /*----------------------------------*/
    /* Footer */
    /*----------------------------------*/

    .title1 {
        margin: 0 auto;
        margin-top: 50px;
    }

    .editor {
        margin: 0 auto;
    }

    .footer {
        margin: 0 auto;
        margin-top: 30px;
    }

    /*----------------------------------*/
    /* Sites we follow */
    /*----------------------------------*/

    .follow {
        display: none;
    }

    .links {
        display: none;
    }


}

/* Media Queries with max-width 838px */

@media only screen and (max-width: 838px) {

    /*----------------------------------*/
    /* Follow us */
    /*----------------------------------*/

    .follow-us ul {
        padding-top: 0;
    }

    /*----------------------------------*/
    /* Highlights */
    /*----------------------------------*/

    .highlights {
        display: none;
    }

    /*----------------------------------*/
    /* Navigation Menu */
    /*----------------------------------*/

    .menu {
        display: none;
    }

    /*----------------------------------*/
    /* Mobile Navigation Menu */
    /*----------------------------------*/

    .mobile-navigation {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: solid 1px #ccc;
        padding: 10px;
    }

    .mobile-title {
        margin-left: 10px;
    }

    .mobile-navigation h1 {
        margin: 0;
        color: #cd0021;
        font-size: 1.6rem;
        text-transform: uppercase;
        padding-right: 40px;
    }

    .mobile-navigation h2 {
        margin-left: 5px;
    }

    .mobile-logo {
        width: 70px;
    }

    .hamburger {
        margin-top: 18px;
        align-self: flex-start;
        font-size: 1.1rem;
        cursor: pointer;
    }

    /*----------------------------------*/
    /* Overlay Content */
    /*----------------------------------*/

    .overlay {
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #cd0021;
    }

    .overlay-content {
        position: relative;
        top: 10%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 2.7rem;
        color: #fff;
        display: block;
        transition: 0.3s;
    }

    .overlay a:link {
        color: #fff;
        text-decoration: none;
    }

    .overlay a:visited {
        color: #fff;
    }

    .overlay a:hover {
        color: #FFD700;
    }

    .overlay a:active {
        color: #fff;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    /*----------------------------------*/
    /* Divider */
    /*----------------------------------*/

    .divider {
        display: none;
    }

}

/* Media Queries with max-width 748px */

@media only screen and (max-width: 748px) {

    /*----------------------------------*/
    /* Follow us */
    /*----------------------------------*/

    .follow-us {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: solid 1px #e1e1de;
        margin-top: 4px;
    }

    .content {
        display: block;
    }

    /*----------------------------------*/
    /* Useful Links */
    /*----------------------------------*/

    .links {
        display: none;
    }

    /*----------------------------------*/
    /* Sites we Follow */
    /*----------------------------------*/

    .follow {
        display: none;
    }

    /*----------------------------------*/
    /* Anniversary Logo*/
    /*----------------------------------*/

    .anniversary {
        display: none;
    }

    /*----------------------------------*/
    /* Editor's Choice */
    /*----------------------------------*/

    .editor {
        height: auto;
        grid-template-columns: auto;
        display: flex;
        flex-direction: column;
        grid-gap: 0px;
    }

    .editor p {
        grid-column-start: 2;
        margin-bottom: 20px;
    }

    .box {
        display: grid;
        grid-template-columns: 105px 1fr;
        grid-template-rows: 14px 1fr;
        min-height: 110px;
    }

    .box h6 {
        margin-top: 0;
    }

    /*----------------------------------*/
    /* Footer */
    /*----------------------------------*/

    .footer {
        max-width: 450px;
        justify-content: center;
        background-color: #fff;
        margin: 0 auto;
    }

    .footer::after {
        content: "";
        border-bottom: solid 1px #ccc;
        width: 250px;
        margin: 0 auto;
    }

    .footer ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer ul li a:after {
        content: "";
    }

    /*----------------------------------*/
    /* Links */
    /*----------------------------------*/

    .links {
        grid-template-columns: 2fr 3fr;
    }

    .book-slider {
        display: none;
    }

}

/* Media Queries with max-width 550px */

@media only screen and (max-width: 550px) {

    .article-picture {
        float: none;
        width: 100%;
        padding: 0;
    }

    .footer::after {
        display: none;
    }
}

/* Media Queries with max-width 440px */

@media only screen and (max-width: 440px) {

    /*----------------------------------*/
    /* Footer */
    /*----------------------------------*/

    .newjurist {
        font-weight: 700;
        display: block;
        margin-top: 5px;
    }

}

/* Media Queries with max-width 412px */

@media only screen and (max-width: 412px) {

    /*----------------------------------*/
    /* Published Articles */
    /*----------------------------------*/

    .published h3 {
        min-width: 300px;
    }

    .article {
        /*        margin-right: 5px;*/

        border-right: none;
    }

    .newjurist {
        font-weight: 700;
        display: block;
        margin-top: 5px;
    }

}