/*------------------------------------*\
    HEADER
\*------------------------------------*/

@media only screen and (max-width: 800px) { 
    header #header-menu .menu-element {
        margin-left: 25px;
    }

    header #header-menu .menu-element:last-child {
        margin-right: 25px;
    }
}

@media only screen and (max-width: 700px) { 
    header #header-menu .menu-element {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }

    header #header-menu .menu-element,
    header #header-menu .menu-element:last-child {
        margin: 0;
    }

    .underline-hover::after {
        bottom: -2px;
    }
}

@media only screen and (max-width: 500px) { 
    header .logo-container {
        display: none;
    }

    header .logo-hidden-container {
        display: block;
    }

    header .left,
    header .right {
        width: 50%;
        max-width: 50%;
        ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }

    header #header-menu .menu-element {
        margin-bottom: 5px;
    }
    
}


/*------------------------------------*\
    HOMEPAGE
\*------------------------------------*/

@media only screen and (max-width: 600px) { 
    main.home {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 48em) { /* sm */ 
    main .post-grid .grid-element {
        width: 100%;
    }
}


/*------------------------------------*\
    SINGLE
\*------------------------------------*/

@media only screen and (max-width: 600px) { 
    #single .entry-content .entry-text {
        font-size: 18px;
    }
}

@media only screen and (max-width: 500px) { 
    .flexslider {
        margin-bottom: 40px;
    }

    .flexslider .flex-direction-nav {
        display: none;
    }
}


/*------------------------------------*\
    ABOUT PAGE
\*------------------------------------*/

@media only screen and (max-width: 64em) { /* md */
    #about .text {
        margin-top: 30px;
    }
}


/*------------------------------------*\
    CONTACTS
\*------------------------------------*/


@media only screen and (max-width: 450px) { 
    #contact-page .email {
        font-size: 20px;
    }
}