/* ------------------------------------------------------
  Between 1600px and 1980px
------------------------------------------------------ */
@media only screen and (min-width: 1600px) {
    div.container {
        width: 1600px;
    }
    nav#top-nav ul#top-menu li {
        margin: 0 30px 0 0;
    }
    a#top-logo {
        margin: 0 70px 0 0;
    }
}
/* ------------------------------------------------------
  Between 1240px and 1600px
------------------------------------------------------ */
@media only screen and (min-width: 1240px) and (max-width: 1600px) {
    div.container {
        width: 1240px;
    }
    nav#top-nav ul#top-menu li {
        margin: 0 10px 0 0;
    }
    a#top-logo {
        margin: 0 70px 0 0;
    }
}




/* ------------------------------------------------------
  Between 960px and 1240px
------------------------------------------------------ */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
    body,
    div.html_edited {
        font-size: 15px;
    }
    div.container {
        width: 960px;
    }
    nav#top-nav ul#top-menu li {
        margin: 0 5px 0 0;
    }
    a#top-logo {
        width: 100px;
        margin: 16px 5px 0 0;
    }
    a#top-logo img {
        width: 100%;
        float: left;
    }
    nav#top-nav {
        width: 88%;
        width: calc(100%-100px);
    }
    nav#top-nav ul#top-menu li a {
        font-size: 13px;
    }
    nav#top-nav ul#top-menu {
        padding: 30px 0 0 0;
    }
    h2.section_title {
        font-size: 22px;
    }
}
/* ------------------------------------------------------
  Between 768px and 960px
------------------------------------------------------ */
@media only screen and (min-width: 768px) and (max-width: 960px) {
    body,
    div.html_edited {
        font-size: 15px;
    }
    div.container {
        width: 768px;
    }
    nav#top-nav ul#top-menu li {
        margin: 0 5px 0 0;
    }
    a#top-logo {
        width: 90px;
        top: -12px;
        z-index: 998;
        left: 50%;
        position: absolute;
        margin: 16px 5px 0 -45px;
    }
    a#top-logo img {
        width: 100%;
        float: left;
    }
    nav#top-nav {
        width: 100%;
        width: calc(100%-100px);
    }
    nav#top-nav ul#top-menu li a {
        font-size: 12px;
        margin: 0 0 6px 0;
    }
    nav#top-nav ul#top-menu {
        width: 100%;
        padding: 53px 0 0 0;
    }
    nav#top-nav ul#top-menu li:last-child {
        margin: 0 0 0 0;
    }
    h2.section_title {
        font-size: 22px;
    }
    div.wrapper.placeholder_about, 
    div.wrapper.products_background {
        padding: 300px 0 0 0;
    }
}

/* ------------------------------------------------------
  Between 480px and 768px
------------------------------------------------------ */
@media only screen and (min-width: 480px) and (max-width: 768px) {
    body,
    div.html_edited {
        font-size: 15px;
    }
    body {
        padding: 60px 0 0 0;
    }
    div.container {
        width: 480px;
    }
    div.wrapper.headerwrapper {
        display: none;
    }
    div.wrapper.mobile {
        display: block;
    }
    h2.section_title {
        font-size: 22px;
    }
    div.wrapper.placeholder_about, 
    div.wrapper.products_background {
        padding: 300px 0 0 0;
    }
    div.prod_images div.item {
        width: 25%;
    }
    div.wrapper.services div.half {
        float: left;
        width: 100%;
    }
    div.gallery div.item {
        width: 33.33%;
    }
    form.form div.half {
        width: 100%;
    }
    div.wrapper.footer_wrapper {
        padding: 25px 0;
    }
    div.wrapper.services div.white_bg {
        padding: 0 15px;
        width: 480px;
        float: right;
        margin: 0 auto;
        display: inline-block;
    }
}


/* ------------------------------------------------------
  Under 480px
------------------------------------------------------ */
@media only screen and (max-width: 480px) {
    body,
    div.html_edited {
        font-size: 15px;
    }
    body {
        padding: 60px 0 0 0;
    }
    div.container {
        width: 98%;
    }
    div.wrapper.headerwrapper {
        display: none;
    }
    div.wrapper.mobile {
        display: block;
    }
    h2.section_title {
        font-size: 22px;
    }
    div.wrapper.placeholder_about, 
    div.wrapper.products_background {
        padding: 150px 0 0 0;
    }
    div.prod_images div.item {
        width: 33.33%;
    }
    div.wrapper.services div.half {
        float: left;
        width: 100%;
    }
    div.gallery div.item {
        width: 50%;
    }
    form.form div.half {
        width: 100%;
    }
    div.wrapper.footer_wrapper {
        padding: 25px 0;
    }
    div.wrapper.services div.white_bg {
        padding: 0 15px;
        width: 98%;
        float: right;
        margin: 0 auto;
        display: inline-block;
    }
    div.html_edited {
        padding: 0 10px;
    }

}