/* 
    When editing this style sheet there are several responsive things to consider.
    1) Is the header banner tall or standard.  Absolutley positioned items need to adjust accordingly.
    2) Is the image gallery visible if it is this affects the layout of other items at various screen sizes.
    Both of these variables can be determined by classes assigned to the div.header-inner DOM object.  
*/

body#collections.browse .thumbnails.products li { width: 170px !important; height: 290px !important; border: none; border-radius: 0px; box-shadow: none; transition: none; }

body#collections.browse .thumbnails.products { margin-left: -5px !important; }

    body#collections.browse .thumbnails.products li .details { padding: 4px; text-align: center; }

    body#collections.browse .thumbnails.products li .imgWrap { width: 160px; height: 240px; border: 1px solid #DDDDDD; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); display: block; line-height: 20px; padding: 4px; transition: all 0.2s ease-in-out 0s; }

    body#collections.browse .thumbnails.products li img { margin-top: 0px !important; }

div#PartnerCollectionDetail h2 .badge { border-radius: 3px; margin-left: 5px; line-height: 18px; vertical-align: super; }

    div#PartnerCollectionDetail h2 .badge.badge-type-limited { background-color: #0088CC; }

div#PartnerCollectionDetail div.header-inner { position: relative; }

    div#PartnerCollectionDetail div.header-inner div.img-banner { z-index: 1; }

    div#PartnerCollectionDetail div.header-inner div.img-gallery { z-index: 2; left: 250px; min-height: 50px; min-width: 50px; position: absolute; top: 80px; }

    div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-gallery { top: 175px; }

    div#PartnerCollectionDetail div.header-inner div.img-gallery div.img-gallery-item { border: 4px solid rgba(0, 0, 0, 0.6); float: left; height: 145px; margin-left: 10px; margin-bottom: 10px; overflow: hidden; width: 97px; }

    div#PartnerCollectionDetail div.header-inner div.img-primary { z-index: 2; border: 4px solid rgba(0, 0, 0, 0.6); border-radius: 0 0 0 0; overflow: hidden; position: absolute; height: 330px; left: 20px; top: 20px; width: 220px; }

    div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-primary { top: 65px; }

    div#PartnerCollectionDetail div.header-inner div.copy-details { margin-top: 20px; margin-left: 260px; }

    div#PartnerCollectionDetail div.header-inner.img-badge-none div.copy-details { margin-left: 0px; }

/*.thumbnails.products li { width: 172px !important;}*/

.row .thumbnails { margin-left: -20px !important; }

div#PartnerCollectionDetail .header-inner { min-height: 370px; }
    div#PartnerCollectionDetail .header-inner.img-badge-none { min-height: 0px; }

@media (max-width: 960px) {



    div#PartnerCollectionDetail div.header-inner div.copy-details { margin-top: 85px; }

    div#PartnerCollectionDetail div.header-inner.img-banner-tall div.copy-details { margin-top: 10px; }

    div#PartnerCollectionDetail div.header-inner.img-gallery-none div.copy-details { margin-top: 20px; }

    div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-gallery { top: 65px; }
}

@media (max-width: 660px) {
    .breadcrumb .share { display: none; }

    div#PartnerCollectionDetail div.header-inner { display: none; }

        div#PartnerCollectionDetail div.header-inner div.img-primary, div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-primary { top: 0px; left: 0px; }

        div#PartnerCollectionDetail div.header-inner div.copy-details { margin-left: 0px; margin-top: 0px; }

        div#PartnerCollectionDetail div.header-inner.img-gallery-none div.copy-details { margin-left: 260px; }

    div#PartnerCollectionDetail .header-inner { min-height: 350px; }

    div#PartnerCollectionDetail div.header-inner div.img-gallery, div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-gallery { position: inherit; margin-left: 240px; top: 0px; left: 0px; min-height: 330px; }
}

@media (max-width: 480px) {
    div#PartnerCollectionDetail div.header-inner.img-gallery-none div.img-primary { position: inherit; margin: 0px auto; top: 0px; left: 0px; }

    div#PartnerCollectionDetail div.header-inner.img-gallery-none div.copy-details { margin-left: 0px; }
}

@media (max-width: 400px) {
    div#PartnerCollectionDetail div.header-inner div.img-primary { position: inherit; margin: 0px auto; top: 0px; left: 0px; }

    div#PartnerCollectionDetail div.header-inner div.img-gallery, div#PartnerCollectionDetail div.header-inner.img-banner-tall div.img-gallery { position: inherit; margin-left: 0px; top: 0px; left: 0px; margin-top: 10px; min-height: 100px; }
}