/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
@media only screen and (max-width: 768px) {
  /* Style adjustments for viewports 480px and over go here */
    #home h3, #home p {
        width: 92%;
        padding: 0 4%;
    }

    .col_text {
        width: 100%;
    }

    #home img {
        display: block;
        width: 30%;
    }

    #home .img {
        width: 92%;
        margin: 0 4%;
    }

    #inside.section .img {
        width: 100%;
    }

    #inside, #services {
        padding: 0 20px;
    }

    #inside .img img {
        width: 30%;
        margin: 0 10px 10px 0;
    }

    #services ul {
    }

    #services ul li {
        margin: 0 0 10px 0;
    }

    #footer .section {
        width: 28%;
        margin: 0 2%;
    }

    #nav {
        display: none;
    }
}

@media only screen and (max-width: 560px) {
    #main_nav li {
        margin: 4px 0;
        height: auto;
        line-height: 30px;
        width: 100%;
    }

    #projects ul#albums {
        width: 92%;
        margin: 20px 4% 5px 4%;
    }

    #projects ul#albums li {
        width: 100%;
        background: white;
        border-top: 1px solid #bd0926;
        border-bottom: 1px solid #bd0926;
        height: 40px;
    }

    #projects ul#albums li a {
        line-height: 40px;
        font-size: 1em;
    }
}

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

    #services ul {
        margin: 0 4%;
        width: 92%;
    }

    #footer .section {
        width: 92%;
        margin: 0 4%;
    }
}