/* ----------------------------
    GLOBAL
---------------------------- */

body {
    font-family: 'Montserrat', Tahoma, sans-serif;
    background: #d8d8d8;
}

.outerWrap {
    background: #fff;
    padding-bottom: 2em;
}

.pageWidth {
    width: 94em;
    margin: 0 auto;
}

strong {
    font-weight: bold;
}


/* ----------------------------
    HEADER
---------------------------- */


/* Site header */

header {
    padding-top: 1em;
    position: relative;
}

.logo {
    text-transform: uppercase;
    font-size: 4.6em;
    float: left;
}

.logo a {
    color: #0386A2;
}

.logo .subLine {
    display: block;
    font-size: 0.308em;
    opacity: 0.7;
    text-align: center;
    margin-top: -0.4em;
    margin-bottom: 0.6em;
    text-transform: uppercase;
}

.logo .subLine span {
    display: inline-block;
    background: #fff;
    padding: 0 5px;
}


.navMenu {
    border-top: #979797 1px solid;
    border-bottom: #979797 1px solid;
    margin: 2em 0 2.5em;
}

.navMenu li {
    display: inline-block;
}

.navMenu li a {
    font-size: 1.6em;
    text-transform: uppercase;
    display: block;
    padding: 0.6em 0.9em 0.55em;
    color: #6d6d6d;
}

.navMenu li ul {
    display: none;
}

header .mobile {
    display: none;
}



/* ----------------------------
    SECTION HEADER
---------------------------- */

h2.sectionHeading {
    text-align: center;
    color: #0386A2;
    font-size: 2.4em;
    text-transform: uppercase;
    margin: 1em 0 1.8em;
}

h2.sectionHeading span {
    display: inline-block;
    background: #fff;
    padding: 0 0.5em;
}

h2.sectionHeading:after {
    content: "";
    display: block;
    border-bottom: #979797 1px solid;
    width: 100%;
    margin-top: -0.53em;
}



/* ----------------------------
    PRODUCT PANELS
---------------------------- */

.productPanels {
    width: 102.127659574468%; /* 960 / 940 */
    overflow: hidden;
} 

.productPanels .panel {
    display: block;
    float: left;
    width: 31.25%; /* 300 / 960 */
    margin-right: 2.083333333333%; /* 20 / 960 */
    margin-bottom: 2em;
    text-align: center;
    position: relative;
}

@media only screen and (max-width: 960px) {
    
    .pageWidth,
    nav .container,
    .container.shoppingCart {
        width: 90%;
		
    }
    
    body {
        background: #fff;
    }
    
    header {
        position: relative;
        padding-top: 3em;
		text-align: center;
    }
    
    .logo {
        font-size: 3.8em;
        top: 1em;
		float: none;
    }
    
    
    header .desktop,
    header .mobile .navMenu {
        display: none;
    }
    
    header .mobile {
        display: block;
        border-top: #979797 1px solid;
        margin-bottom: 2em;
        margin-top: 1em;
    }
    
    .menuButton {
        background: url('../i/mobileMenu.png') no-repeat 1em center;
        position: absolute;
        top: 5em;
        left: 0;
        text-indent: -9999px;
        overflow: hidden;
        width: 48px;
		height: 22px;
    }
    
    .navMenu {
        padding: 1.5em 0;
        margin-top: -1px;
    }
    
    .navMenu li {
        display: block;
    }

}

@media only screen and (max-width: 780px) {
	
    section h2 {
        margin-bottom: 1.4em;
        font-size: 2.2em;
    }
  
}

@media only screen and (max-width: 490px) {
    
    nav {
        padding: 0.5em 0;
    }
    
    nav .navbar-left,
    nav .navbar-right {
        font-size: 0.8em;
    }
    
    nav ul li:first-child {
        padding-left: 0;
    }
}