/* = Media Queries
----------------------------------------------------------------------------------------------------------------- */

/* Core */
@media screen and (min-width: 550px) {
    .medObj, .medObj .cont { clear: none; }
    .medObj .thumb { float: left; margin: 0 20px 0 0; max-width: 45%; }
}

@media screen and (min-width: 850px) {
    .col { float: left; }
    .colsClients .colOne { width: 30%; margin-right: 4%; }
    .colsClients .colTwo { width: 30%; margin-right: 4%; }
    .colsClients .colThree { width: 30%; }
}

@media screen and (min-width: 950px) {
    h1 { font-size: 3em; }
    h2 { margin: 45px 0; }
}

@media screen and (min-width: 1440px) {
    .colsClients .colOne { width: 30%; margin-right: 4%; }
    .colsClients .colTwo { width: 30%; margin-right: 4%; }
    .colsClients .colThree { width: 30%; }

    .medObj .thumb { max-width: none; }
}

/* Layout */
@media screen and (min-width: 400px) {
    .primaryNav { position: fixed; width: 340px; padding: 0 50px; background-position: 50px 30px; }

    .newsList li { float: left; width: 50%; }
    .newsList li h3 { margin-right: 30px; }
    .newsList li p { margin-right: 30px; }
    .newsList li .thumb { width: 90%; }
    .newsList li:nth-child(2n+1) { clear: left; }
}

@media screen and (min-width: 480px) {
    .signup label { width: 100%; }
    .signup .inputText { width: 100%; }
}

@media screen and (min-width: 550px) {
    .siteHead { height: 130px; padding-top: 15px; }
    .main { border: 0; padding-top: 0; margin: 40px 0 0 0; }
    .logo { width: 122px; height: 95px; display: block; margin: 0 auto; text-align: center; position: static; background: url(/_img/logo.jpg?v3) no-repeat left top; }
    h1 { margin: 0 0 20px; font-size: 2.4em; }
    .menuIcon { position: absolute; top: 14px; left: 15px; }
    .miniBasket { position: absolute; top: 7px; right: 15px; }

    .hero { padding-top: 0; }


    .poster { width: 484px; }
}

@media screen and (min-width: 750px) {
    .container { margin: 0 30px 30px; }
    .section { padding: 0 40px 15px; }
    .siteFoot { padding-bottom: 0; }

    .menuIcon { left: 40px; }
    .miniBasket { right: 40px; }

    .hero .text { padding: 40px 40px 75px; }
    .signup { padding: 30px 40px 20px; }
    .newsView h2 { margin-bottom: 20px; }

    .footerNav ul li { margin: 0 15px; display: inline; }
}

@media screen and (min-width: 950px) {
    .container { margin: 0 40px 40px; }
    h1 { font-size: 2.4em; }

    .hero .carousel { width: 530px; float: right; }


    .hero .controls { display: none; }
    .hero .text { padding: 20px 40px; text-align: left; }
    .hero .text h1 { margin: 10px 0 20px; font-size: 1.8em; }
    .hero .text p { margin: 0 0 15px; }
    .hero .text .leader { font-size: 1em; }
    .signup .webForm div { width: 25%; float: left; }
    .signup .inputText { width: 90%; }

    .newsList li { float: left; width: 33.33333%; margin: 0 0 40px; }
    .newsList li:nth-child(2n+1) { clear: none; }
    .newsList li:nth-child(3n+1) { clear: left; }

    .shopCatNav ul { display: inline; }
    .shopCatNav li { display: inline; margin: 0 10px 0 10px; }

    .homeNews .newsList li { width: 31.3%; }
    .homeNews .newsList li:nth-child(2n) { margin-right: 3%; margin-left: 3%; }
    .homeNews .newsList h3 { height: auto; }

    .homeNews .newsList li:nth-child(4) { display: none; }
}

@media screen and (min-width: 1024px) {
    .medObj .thumb { max-width: 40%; margin-right: 30px; }

    .homeNews .medObj .thumb { max-width: 46%; }
}

@media screen and (min-width: 1050px) {

    .newsList li .thumb { width: auto; }
}


@media screen and (min-width: 1200px) {
    .poster { width: 384px; float: right; padding-top: 52px; margin-top: -1px; }

    .bannerPosterWrap .hero { float: left; width: 77%; }
    .bannerPosterWrap .hero .carousel img { max-height: 260px; width: auto; max-width: none; }
    .bannerPosterWrap .poster { float: right; width: 12%; margin-right: 5%; }

    .homeNewsFeatured { width: 50%; margin-right: 5%; float: left; }
    .homeNewsList { width: 45%; float: left; }

    .hero .text .leader { display: none; }

    .poster .clip { display: block; position: absolute; top: 0; left: 12%; height: 83px; width: 32px; background: url(/_img/clip_short.png) no-repeat left top; }
    .poster .clipTwo { left: auto; right: 12%; }
    .poster .shopNowTitle { display: none; }

    .poster .banner { max-width: 162px; }
}

@media screen and (min-width: 1250px) {
    .zoneOne { float: left; width: 74%; }
    .zoneTwo { float: right; width: 20%; }

    .hero .carousel { width: 600px; }
    .hero .controls { display: block; left: 40px; bottom: 40px; margin-left: 0; background: none; }
    .hero .text { padding: 40px; }
    .newsList h2 { margin-top: 0; }

    .bannerPosterWrap .hero .carousel img { max-height: 265px; }
}

@media screen and (min-width: 1440px) {
    .container { width: 1400px; margin: 0 auto 30px; }
    .zoneOne { float: left; width: 74%; }
    .zoneTwo { float: right; width: 20%; }
    .skinny { width: 800px; margin: 0 auto; }

    .hero .carousel { width: 650px; }
    .hero .text h1 { margin-bottom: 16px; font-size: 2.1em; }
    .hero .text .leader { font-size: 1.3em; }
    .signup .webForm div { width: 29%; }
    .signup .webForm div.submit { width: 13%; }

    .poster { width: auto; }


    .bannerPosterWrap .hero .carousel img { max-height: 285px; }
}

/* Store */
@media screen and (min-width: 480px) {
    .secure li { width: 37%; display: inline-block; }
    .promo input { width: 75%; }
    label { width: 30%; padding-top: 10px; }
    input.text, textarea, select, .inputText { width: 70%; }
}

@media screen and (min-width: 600px) {
    .prodList ul li { width: 48%; }
    #coBasket .btnAlt { display: inline-block; }
    .colsHalf .col { width: 47%; float: left; margin-right: 6%; }
    .colsHalf .endCol { margin-right: 0; }
    .colsThird .col { width: 30%; float: left; margin-right: 4%; }
    .colsThird .endCol { margin-right: 0; }
    .colsFourth .col { width: 20%; float: left; margin-right: 6%; }
    .colsFourth .endCol { margin-right: 0; }
    .colsFifth .col { width: 15.8%; float: left; margin-right: 5%; }
    .colsFifth .endCol { margin-right: 0; }
    .shopCatNav span { display: block; font-weight: bold; }
}

@media screen and (min-width: 625px) {
    .prodStock { margin-top: 20px; }
    .prodStockSubmit .btnAdd { display: inline-block; }
}

@media screen and (min-width: 800px) {
    .checkoutProgress { display: block; height: 42px; border: 1px solid #e5e5e5; background: #fff; -moz-box-shadow: 0 0 3px #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 3px #ddd; box-shadow: 0 0 3px #ddd; }
    .checkoutProgress li { float: left; height: 40px; margin-right: 0; padding: 11px 35px 11px 10px; background: url(/_img/icons/progress-stage.jpg) no-repeat right center; list-style-type: none; }
    .checkoutProgress .progressComplete a { padding-left: 25px; font-style: italic; background: url(/_img/icons/progress-complete.png) no-repeat left center; }
    .checkoutProgress .progressActive a { padding-left: 25px; font-style: italic; font-weight: bold; background: url(/_img/icons/progress-active.png) no-repeat left center; }
    .checkoutProgress .progressEnd { padding-right: 25px; background: none; }
    .checkoutProgress .btn { color: #000; padding: 0; font-weight: normal; background: none; text-shadow: 0 0 0 #fff; }
    .checkoutProgress .btnDisabled { color: #999; background: none; }
}

@media screen and (min-width: 825px) {
    .prodStock { margin-top: 40px; }
}

@media screen and (min-width: 1024px) {
    .prodView { width: 75%; float: left; }
    .prodView h1 { font-size: 3.14em; }
    .prodStock { width: 20%; float: right; margin-top: 0; padding: 0; background: none; }
    .prodStock label { width: auto; margin-right: 20px; }
    .prodStock select { width: 45%; }
    .prodStockSubmit .btnAdd { display: block; }

    .prodList ul li { width: 21%; min-height: 385px; }
    .prodList ul li:nth-child(2n) { margin-right: 4%; }
    .prodList ul li:nth-child(4n) { margin-right: 0; }
    .prodImages { width: 30%; float: left; }
    .prodDetails { width: 67%; float: right; }
    .promo .btn { margin-top: 0; }
    .formWidth { width: 50%; }
    .prodStockSelection { position: absolute; top: 0; right: 0; }
    .promo label { width: 45%; }
    .promo input { width: 37%; float: right; margin: 0 0 0 10px; }
}

@media screen and (min-width: 1300px) {
    .prodView { width: 80%; margin-bottom: 40px; }
    .prodStock { width: 15%; }
    .prodStock select { width: auto; }
    .prodStockSubmit { text-align: left; }
    .prodStockSubmit .btnAdd { display: inline-block; }
}

@media screen and (min-width: 1440px) {
    .shopCatNav span { display: inline-block; vertical-align: middle; }
}