/* Media query for small screens */
@media only screen and (min-width:0px) and (max-width:640px) {
    body {
        background-image:none;
    }
    .card {
        border-radius: 0;
    }
    .body nav {
        /* Top level container for left bar */
        width: 100%;
        padding: 1%;
        margin: 0;
    }
    #nav-ident {
        /* To reverse the layout to bring the CV image in the front */
        direction: rtl;
        /* To force the ident div to take a row */
        min-width: 34em;
    }
    #nav-ident-info,
    #nav-ident-info img,
    #nav-ident-info #name-id,
    #nav-ident #cv-img
    {
        /* these elements need to maintain their ltr direction.
        As container is rtl to reverse the layout, we override these elements */
        direction: ltr;
        display: inline-block;
    }
    #nav-ident-info {
        width: 22em;
        vertical-align: top;
        padding: 0;
        margin: 0;
    }
    #nav-ident-info #my-photo {
        width: 6em;
    }
    #nav-ident-info #name-id {
        vertical-align: top;
    }
    #nav-ident #cv-img {
        width: 6em;
        margin: .8em 0 0 0;
    }
    #nav-ident hr {
        /* Hide the horizontal seperator, because we are not in vertical layout. */
        display: none;
    }
    #nav-nav {
        display: inline-block;
        vertical-align: top;
        margin: 2em 0 0 0 ;
    }
    #nav-nav ul {
        /* to solve the element distribution */
        width: 100%;
        text-align: center;
    }
    #nav-nav ul li {
        display: inline-block;
    }
    #nav-nav ul li:after {
        /* Bullet seperator for menu links */
        content: "\2022";
        display: inline-block;
    }
    #nav-nav ul li:last-child:after { content: ""; }
    #nav-media {
        display: none;
    }
    #nav-nav ul li a {
        display: inline-block;
        padding: 0 1em 0 0;
    }
    #cv-content {
        width: 100%;
    }
    #cv #close-cv {
        right: -10px;
    }
    #cv #download-cv {
        right: -10px;
        top: 70px;
    }
    .contents {
        padding: 1.5em 0 0 0;
        width: 100%;
    }
    .contents .card-desc {
        /* The card above the contents grid */
        width: 100%;
    }
    .grid .block {
        /* Make 3 masonry column */
        border-radius: 0;
        width: 97.5%;
        margin: 0 2% 2% 0;
    }
    .grid section:nth-child(3n-1) {
        margin: 0 0 2% 0;
    }
    /* Flex Layout -------------------- */
    /* This could be commented out safely. For more specifications check styles.css */
    .body {
        flex-direction: column;
    }
    body nav {
        flex: .5 1 13em;
    }
    /* Cancelling Z-Depth Shadows */

    .z-1 {
        box-shadow: 0 0 0 0;
    }

    .z-2 {
        box-shadow: 0 0 0 0;
    }

    .z-3 {
        box-shadow: 0 0 0 0;
    }

    .z-4 {
        box-shadow: 0 0 0 0;
    }

    .z-5 {
        box-shadow: 0 0 0 0;
    }
}