.login-box 
{
    right: 250px;
}

.content-box 
{
    width: auto;
}

.blog-post-padding
{
    padding-left: 100px;
    float: left;
    width: 100%;
}

.blog-posts-list-width
{
    width: 90%;
}

.pictures {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pictures > li {
    border: 3px solid transparent;
    float: left;
    height: calc(100% / 5);
    margin: 0 -1px -1px 0;
    overflow: hidden;
    width: calc(100% / 5);
}

.pictures > li > img {
    cursor: zoom-in;
    width: 100%;
}

.hamburger-navbar-right
{
    display: none;
}

.mobile-controls
{
    float: right; 
    margin-right: 5px;
}

#articles_container
{
    width: 100%; 
    overflow: auto; 
    position: relative; 
    padding-left: 20px; 
    padding-right:20px
}

#articles_html_content
{
    padding-left: 40px; 
    padding-right:40px;
}

@media (max-width: 768px) 
{
    .login-box 
    {
        right: auto;
    }

    .content-box 
    {
        width: 95%;
    }

    .blog-v2 
    {
        width: 100%;
    }

    .blog-posts-list-width
    {
        width: 100%;
    }

    .blog-post-padding
    {
        padding-left: 7px;
        padding-right: 7px;
        float: left;
        width: 100%;
    }

    .pictures > li 
    {
        border: 3px solid transparent;
        float: left;
        height: calc(100% / 3);
        margin: 0 -1px -1px 0;
        overflow: hidden;
        width: calc(100% / 3);
    }

    .hamburger-navbar-right
    {
        display: inline;
    }

    .mobile-controls
    {
        float: right; 
        margin-right: 5px;
    }

    #articles_container
    {
        width: 100%; 
        overflow: auto; 
        position: relative; 
        padding-left: 0px; 
        padding-right: 0px
    }

    #articles_html_content
    {
        padding-left: 0px; 
        padding-right: 0px;
        width: 100%
    }
}

@media (max-width: 480px) 
{
    .login-box 
    {
        right: auto;
    }

    .content-box 
    {
        width: 95%;
    }

    .blog-v2 
    {
        width: 100%;
    }

    .blog-posts-list-width
    {
        width: 100%;
    }

    .blog-post-padding
    {
        padding-left: 5px;
        padding-right: 5px;
        float: left;
        width: 100%;
    }

    .pictures > li 
    {
        border: 3px solid transparent;
        float: left;
        height: calc(100% / 3);
        margin: 0 -1px -1px 0;
        overflow: hidden;
        width: calc(100% / 3);
    }

    .hamburger-navbar-right
    {
        display: inline;
    }

    .mobile-controls
    {
        float: right; 
        margin-right: 5px;
    }

    #articles_container
    {
        width: 100%; 
        overflow: auto; 
        position: relative; 
        padding-left: 0px; 
        padding-right: 0px
    }

    #articles_html_content
    {
        padding-left: 0px; 
        padding-right: 0px;
        width: 100%
    }
}