body {
    min-width: 320px;
}

header,
nav,
article,
section,
header .inner,
footer .inner,
.products,
div.blog,
div.blog #commentform {
    max-width: 100%;
}

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

    html {
        min-height: 100%;
    }

    body {
        height: 100%;
        background-size: cover;
    }

    header,
    article,
    footer {
        width: auto;
        padding: 0 15px;
    }

    header nav ul li a {
        padding: 0 10px;
    }

    header p.logo1, 
    header p.logo2 {
        top: 105px;
    }

    .home h1 {
        visibility: hidden;
    }

    .reviews ul {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    div.blog div.blogText {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    div.blog div.images {
        float: none;
    }

    .products {
        display: flex;
    }

    footer {
        height: auto;
    }
    footer .inner {
        padding: 15px 0;
    }
    footer .inner .left,
    footer .inner .right {
        float: none;
        text-align: center;
    }

    footer ul.nav li,
    footer ul.social li {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

}

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

    article {
        padding: 15px;
    }

    .internal .boxContent,
    .internal .boxContent .scrollable,
    .wideFrame .scrollable,
    div.blog .scrollable,
    div.blog div.blogText,
    .contact .info,
    .contact .info .scrollable,
    .contact .contactForm,
    .contact .contactForm .scrollable {
        width: auto;
    }

    section,
    .internal .boxContent,
    .internal .boxContent .text,
    .internal .boxContent .scrollable,
    .wideFrame,
    .wideFrame .scrollable,
    div.blog .scrollable,
    .contact .info,
    .contact .info .scrollable,
    .contact .contactForm,
    .contact .contactForm .scrollable {
        height: auto;
    }

    section {
        min-height: 678px;
    }

    header {
        background: url(/images/bg-dark.png);
    }

    header p.logo1, 
    header p.logo2 {
        display: none;
    }

    .internal .content,
    .contact,
    .contact .info,
    .contact .contactForm,
    div.blog div.blogText,
    div.form form {
        float: none;
    }

    .internal .boxContent,
    .contact .info, 
    .contact .contactForm,
    .wideFrame,
    .products {
        background-size: cover;
    }

    .wideFrame {
        padding-bottom: 15px;
    }

    .reviews ul {
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }
    .reviews ul li {
        position: relative;
        top: auto !important;
        left: auto !important;
        margin-bottom: 5px;
    }
    .reviews ul li:nth-child(2n) {
        margin-left: auto;
    }

    div.blog.left,
    div.blog div.bloginner {
        float: none;
    }
    .wideFrame h1.blogTitle {
        margin: 15px 15px 0;
    }
    .wideFrame .scrollable {
        margin: 15px;
    }
    div.blog div.images {
        float: none;
        max-width: 100%;
    }
    div.blog div.images img {
        max-width: 100%;
    }
    div.blog div.blogText {
        margin-right: 0;
    }
    div.blog #commentform .commentField {
        padding-left: 0;
    }

    .products {
        display: block;
        height: auto;
    }
    .products .scrollable {
        max-height: none;
        margin: 15px 0 0 0;
    }
    .products .cart {
        width: 100%;
        float: none;
    }
    .products .cart .inner {
        padding: 15px;
    }
    .products .cart .scrollable {
        width: auto;
        height: auto;
        overflow: visible;
    }
    .products .cart table {
        width: 100%;
    }
    .products .cart a.goCheckout {
        position: static;
    }
    .products .productList,
    .checkout {
        width: 100%;
        float: none;
    }
    .products .productList .inner,
    .checkout .inner {
        padding: 15px;
    }
    .checkout .inner {
        width: auto;
    }
    .products .productList h1 {
        display: block;
        height: auto;
        padding: 0 0 35px 0;
        background-position: center bottom;
        text-align: center;
    }
    .productList ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: auto !important;
    }
    .products .productList ul li {
        margin-bottom: 15px;
        padding: 5px;
    }

    header {
        height: auto;
    }
    header .inner {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    header .inner::after {
        content: '';
        display: table;
        clear: both;
    }
    header .logo {
        top: -50px;
    }


    /* responsive menu */
    .menu-btn {
        display: block;
        height: 30px;
        padding: 0;
        background: none;
        border: none;
        outline: none;
        position: relative;
        z-index: 1001;
    }
    .menu-btn-icon,
    .menu-btn-icon::before,
    .menu-btn-icon::after {
        display: inline-block;
        width: 40px;
        height: 4px;
    }
    .menu-btn-icon::before,
    .menu-btn-icon::after {
        content: '';
        position: absolute;
        left: 0;
        background: inherit;
    }
    .menu-btn-icon {
        background: #fff;
        margin-right: 10px;
        vertical-align: middle;
    }
    .nav-active .menu-btn-icon {
        background: transparent;
    }
    .nav-active .menu-btn-icon::before,
    .nav-active .menu-btn-icon::after {
        background: #7C0012;
    }
    .menu-btn-icon::before {
        top: 0;
    }
    .nav-active .menu-btn-icon::before {
        transform: rotate(45deg);
        top: 50%;
        margin-top: -2px;
    }
    .menu-btn-icon::after {
        bottom: 0;
    }
    .nav-active .menu-btn-icon::after {
        transform: rotate(-45deg);
        bottom: 50%;
        margin-bottom: -2px;
    }
    .menu-btn-text {
        display: inline-block;
        vertical-align: middle;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
    }
    .menu-btn-text::before {
        content: 'Menu';
    }
    .nav-active .menu-btn-text::before {
        content: 'Close';
    }

    header nav,
    .home nav {
        background: #000;
    }
    header nav {
        height: 100%;
        width: 270px;
        padding-top: 50px;
        border-right: 1px solid #222;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        transform: translateX(-270px);
        transition: transform 0.3s ease;
    }
    .nav-active header nav {
        transform: translateX(0);
    }

    header nav ul,
    header nav ul li {
        float: none;
    }
    header nav ul {
        border-top: 1px solid #222;
    }
    header nav ul li {
        background: none;
        border-bottom: 1px solid #222;
    }
    header nav ul li a,
    header nav ul li:first-child a,
    header nav ul li:last-child a {
        padding: 10px 15px;
    }
    /* end responsive menu */

    header .icons {
        margin-top: 10px;
        padding: 0;
        clear: none;
    }
    header .icons ul {
        display: inline-block;
        padding: 0;
        float: none;
        vertical-align: middle;
    }
    header .icons a.title,
    header .icons ul li {
        float: none;
        display: inline-block;
    }
    header .icons ul li.cart {
        margin-right: 5px;
    }
    header .icons ul li a {
        display: inline-block;
        margin: 0;
    }

    .home .homeSummary {
        max-width: 100%;
        margin: 15px auto;
        float: none;
    }
    .home .intro {
        max-width: 100%;
    }
    
    .internal .boxContent .images {
        position: relative;
        background: rgba(0, 0, 0, .75);
    }
    .internal .boxContent .nivoSlider {
        margin-left: -218.5px;
        position: absolute;
        top: 0;
        left: 50%;
    }
    .internal .boxContent .text {
        padding-bottom: 15px;
        background: none;
    }

    .contact .info {
        margin: 0;
    }
    .contact .info .inner {
        padding-top: 75px;
        margin: 0 15px;
        background-position: center 15px;
    }
    .contact .info .inner .text {
        padding: 15px 0;
        border-bottom: 1px solid #fff;
        text-align: center;
    }
    .contact h1 {
        text-align: center;
    }
    .contact .contactForm .inner {
        padding-top: 15px;
        margin: 0 15px;
        background: none;
    }
    #contactform {
        margin: 0 auto;
    }

}

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

    header,
    article,
    footer {
        padding-left: 10px;
        padding-right: 10px;
    }

    .internal .boxContent .text,
    .internal .nosub .text {
        padding: 15px;
    }

    .home .homeSummary {
        background: none;
    }
    .home .homeSummary .inner {
        padding: 0;
        border: 5px solid rgba(255, 255, 255, .5);
    }
    .home .homeSummary img {
        display: none;
    }
    .home .homeSummary .text {
        width: 100%;
    }

}