html, body {
  max-width: 100%;
}

img, object {
  max-width: 100%;
}

/* This improved layout in sub 800-pixels viewport, but also caused (of course) banner titles to pop to the top; it doesn't match current D&G on Production:
.overlay-txt {
  top: 0;
  left: 0;
}
*/

.overlay-txt h2 {
  margin: 12px 0 0 10px;
  padding: 0;
}

.ui-body-c .ui-link {
  color: #000;
  font-weight: normal;
}

.ui-content {
  padding: 0;
  text-align: center;
}

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
  padding: 0.7em 30px;
}

.ui-collapsible-contain {
  margin: 0.5em 13px;
  clear: both;
}

.ui-listview {
  margin: 0 !important;
}

#title {
  font-size: 26px;
  line-height: 26px;
  white-space: normal;
  margin: 0.6em 40px .8em;
  padding-bottom: 6px;
}

#nav-btns {
  width: 100%;
  text-align: center;
}

.text-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  text-align: left;
}

.text-list h2 {
  color: black;
  font-size: 20px;
  margin-top: 15px;
}

#footer {
  text-align: center;
  font-size: 12px;
}

#platform-footer {
  height: auto;
  margin-top: 10px;
}

#platform-footer-content {
  padding-left: 0;
}



@media screen and (min-width: 1028px) {
    .image-grid li {
        width: 33.333333333%;
        margin: 1px .75px 0 -1px; /* Negative Margin Necessary to prevent clothing section thumbnails from wrapping */
    }

}


@media screen and (max-width: 1027px) {
    .image-grid li {
        max-width: inherit;
        width: auto;
        height: inherit;
        /* Partial Pixels allows dynamic resizing of images to maintain 1 pixel margin around each side */
        margin: -0.5px .75px 0 0;
    }

    #feature {
        max-width: 808px;
        width: 100%;
    }

    #platform {
        width: 100%;
        min-width: inherit;
        background: none;
    }
    .narrow #platform {
        background: none;
    }

    #platform-canvas {
        max-width: 976px;
    }

    #platform-canvas-nav {
        margin-left: 15px;
    }
    #platform-canvas-content {
        margin-left: -15px;
    }

    /* Used by Header Images, separate from section images */
    .image-grid.banner li {
        /* A word on ALT-Text.  Because the alternative text is not true Alt-Text, but inline text placed without tags,
           the only solution I have developed to prevent the Alt-Text from displaying (and interfering with styles),
           is to set the text white and drop the point size small. Currently in Production (though not yet live),
           none of the Clothing images are utilizing the Alt Text feature.  If they want it, we can revisit it.

           Eventually consider implementing REAL Alt-Text. For now, this work-around prevents the alt-text
           from becoming visible when the banner image shrinks due to the new responsive design.
        */
        color: #FFF;
        font-size: 4px;
    }

    /* Pixel-perfect preservation of "How To" page step layout to preserve image placement next to text container */
    #steps .text {
        width: calc(100% - 343px);
    }

}


@media screen and (min-width: 801px) {
    /* Hide the mobile navigation menu when viewing desktop size */
    .slicknav_menu {
        display:none;
    }
}

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

    p { font-size: 14px; }

    #platform {
        min-width: inherit;
    }
    #platform-canvas {
        width: 100%;
    }
    .narrow #platform-canvas-nav {
        float: none;
        width: 100%;
        display: none;
    }
    #platform-canvas-nav > ul {
        width: 85%;
    }
    #platform-canvas-nav > ul ul a {
        padding: 10px;
    }
    #platform-canvas-nav ul a {
        color: navy;
        padding: 10px;
    }
    #platform-canvas-content {
        float: none;
        margin-left: inherit;
        padding: 0px;
    }

    #feature {
        height: auto;
    }
    #feature .quote-box {
        position: static;
        width: auto;
    }
    #feature .quote-box .attr {
        font-size: 14px;
    }

    #grooming-menu li {
        width: 32.75%;
    }
    .type-menu li {
        width: calc(100% /3) !important;
        width: 33.3333% !important; /* fallback for browsers not supporting calc */
        margin-left: auto;
    }

    .image-grid.banner li {
        max-width: 100% !important;
        width: 100% !important;
    }
    .image-grid.type-desc li {
        height: auto;
    }
    .image-grid.other {
        float: none;
        margin-left: 0;
    }

    .service-theme .flag {
        display: none;
    }
    .section-hdr {
        margin: 0;
        display: block;
        text-align: center;
        padding: 10px;
        background: #ebebeb;
    }

    /* Personal Grooming (mobile) */
    .box > img {
        left: 0;
        position: inherit;
        top: auto;
    }
    .txt {
        margin: 25px 0 0 0;
    }


 /* Still needs tweaking ~ Moved these styles out of general mobile rules */
    .image-grid {
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }

    .image-grid li {
        width: 50%;
        max-width: inherit;
        /*height: 0px auto;        */
        margin: -2px 0 0 0;
    }

    .image-grid li a {
        text-decoration: none;
    }
    .image-grid li a:hover {
        color: #fff;
        text-decoration: underline;
    }
    .image-grid li p {
        width: 97%;
    }

    .image-grid li img {
        width: 100% ;
    }

    .image-grid.type-desc li {
        width: 100% !important;
        text-align: left;
    }
    .type-desc a {
        color: #fff !important;
    }


 /* Overrides necessary styles in desktop view for accordion models, such as: "How to Tie a Tie"
    May not need any of these styles for mobile rendering, as I have made other rules fully responsive.
    Keeping these styles handy in case they can be altered to be used for other sections.  */
    /*
        #steps .title {
            padding: 0;
            margin: 0;
        }
        #steps {
            border: 0;
            margin: 0;
        }
        #steps .step {
            border: 0;
            margin: 0;
        }
        #steps .text {
            width: auto;
        }
        #steps .side {
            margin: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }
        #steps > li {
            overflow: hidden;
        }
    */

}

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

    #steps .text {
        width: inherit;
    }

    #steps .side {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 540px) {
    #grooming-menu li {
        width: 100%;
    }
    .type-menu li {
        width: 100% !important;
    }

    .image-grid.other {
        float: none;
        margin-left: 0;
    }

    .image-grid li p {
        width: 95%;
    }

    /* Center the Hulu-driven modal on the "How To" Pages (nixing left indent margin of modal placement) */
    .popup {
        margin-left: -3%;
    }
}


@media screen and (max-width: 441px) {
    .image-grid li {
        max-width: 100%;
        width: auto;
        float: none;
    }
    .image-grid.other {
        float: none;
        width: 99.5% !important;
        margin-left: 0;
    }

    #platform-canvas {
        width: 100%;
    }

  /*
    #feature {
        display: none;
    }
  */
    #feature .overlay-txt {
        height: 50px;
        width: 100%;
    }
    .overlay-txt h1 {
        font-size: 24px;
    }
    .overlay-txt h2 {
        font-size: 18px;
    }
    .overlay-txt p {
        font-size: 14px;
    }

    /* Center the Hulu-driven modal on the "How To" Pages (nixing left indent margin of modal placement) */
    .popup {
        margin-left: -5%;
    }

}


/* New Mobile Styles */