/* //assets.macysassets.com/dyn_img/fonts */
/* Neue Helvetica W01 55 Roman (22.17kb - Latin 1) */
@font-face {
    font-family: "HelveticaNeueW01-55Roma";
    src: url("//assets.macysassets.com/dyn_img/fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix");
    src: url("//assets.macysassets.com/dyn_img/fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix") format("eot"), url("//assets.macysassets.com/dyn_img/fonts/b0868b4c-234e-47d3-bc59-41ab9de3c0db.woff2") format("woff2"), url("//assets.macysassets.com/dyn_img/fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"), url("//assets.macysassets.com/dyn_img/fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"), url("//assets.macysassets.com/dyn_img/fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
}
/* Neue Helvetica W01 65 Medium (22.37kb - Latin 1) */
@font-face {
    font-family: "HelveticaNeueW01-65Medi";
    src: url("//assets.macysassets.com/dyn_img/fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?#iefix");
    src: url("//assets.macysassets.com/dyn_img/fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?#iefix") format("eot"), url("//assets.macysassets.com/dyn_img/fonts/3600b37f-2bf1-45f3-be3a-03365f16d9cb.woff2") format("woff2"), url("//assets.macysassets.com/dyn_img/fonts/60be5c39-863e-40cb-9434-6ebafb62ab2b.woff") format("woff"), url("//assets.macysassets.com/dyn_img/fonts/4c6503c9-859b-4d3b-a1d5-2d42e1222415.ttf") format("truetype"), url("//assets.macysassets.com/dyn_img/fonts/36c182c6-ef98-4021-9b0d-d63122c2bbf5.svg#36c182c6-ef98-4021-9b0d-d63122c2bbf5") format("svg");
}
/* Linotype Didot W01 Roman (27.35kb - Latin 1) */
@font-face {
    font-family: "Didot W01 Roman";
    src: url("//assets.macysassets.com/dyn_img/fonts/dd077a5a-5331-4833-8a24-e3afbe24d92e.eot?#iefix");
    src: url("//assets.macysassets.com/dyn_img/fonts/dd077a5a-5331-4833-8a24-e3afbe24d92e.eot?#iefix") format("eot"), url("//assets.macysassets.com/dyn_img/fonts/ca8dded6-b7b2-4d3c-b45e-a32de5023d4d.woff2") format("woff2"), url("//assets.macysassets.com/dyn_img/fonts/8cf278e2-5b07-4c21-97da-4762c9ea76c1.woff") format("woff"), url("//assets.macysassets.com/dyn_img/fonts/488ffbea-dc53-43b4-a9e2-d5bff132a85d.ttf") format("truetype"), url("//assets.macysassets.com/dyn_img/fonts/972bb961-7f13-4e8d-8c1f-034e3f4e7517.svg#972bb961-7f13-4e8d-8c1f-034e3f4e7517") format("svg");
}
/* Linotype Didot W01 Italic (27.63kb - Latin 1) */
@font-face {
    font-family: "Didot W01 Italic";
    src: url("//assets.macysassets.com/dyn_img/fonts/9c2cfd19-472b-4ef5-ad73-43eee68dc43b.eot?#iefix");
    src: url("//assets.macysassets.com/dyn_img/fonts/9c2cfd19-472b-4ef5-ad73-43eee68dc43b.eot?#iefix") format("eot"), url("//assets.macysassets.com/dyn_img/fonts/abe3d3a9-c990-459f-9407-54ac96cd2f00.woff2") format("woff2"), url("//assets.macysassets.com/dyn_img/fonts/09a4b57b-7400-4d30-b4ba-d6e303c57868.woff") format("woff"), url("//assets.macysassets.com/dyn_img/fonts/a0cb08d5-975f-4c8d-bcdc-d771a014d92a.ttf") format("truetype"), url("//assets.macysassets.com/dyn_img/fonts/86d60a09-e8f8-4003-b688-0f8a2aba6532.svg#86d60a09-e8f8-4003-b688-0f8a2aba6532") format("svg");
}
/* Linotype Didot W01 Bold Italic (26.23kb - Latin 1) */
@font-face {
    font-family: "Didot W01 Bold Italic";
    src: url("//assets.macysassets.com/dyn_img/fonts/5fa305e7-b64e-4c8a-b1f5-324ecc0b83ed.eot?#iefix");
    src: url("//assets.macysassets.com/dyn_img/fonts/5fa305e7-b64e-4c8a-b1f5-324ecc0b83ed.eot?#iefix") format("eot"), url("//assets.macysassets.com/dyn_img/fonts/fa4e3a6d-66cb-4422-9450-017ce5d58f68.woff2") format("woff2"), url("//assets.macysassets.com/dyn_img/fonts/69ebc5c0-3a5a-4452-a681-d3ba91648d9f.woff") format("woff"), url("//assets.macysassets.com/dyn_img/fonts/98cd62f2-3e6f-4bf5-8d48-42df36207b6d.ttf") format("truetype"), url("//assets.macysassets.com/dyn_img/fonts/97dc6a4b-7baa-436e-9d48-62870c1e49ac.svg#97dc6a4b-7baa-436e-9d48-62870c1e49ac") format("svg");
}

.content {
    font-family: "HelveticaNeueW01-55Roma", Helvetica, sans-serif;
}

.you-might-also-like .inline {
    float: left;
}

.you-might-also-like-wrapper {
    background-color: #262626;
    color: white;
    width: 100%;
    height: 313px;
    margin: 35px 0 0 0;
    /* font-size: 20px; */
}

.you-might-also-like-wrapper p.title {
    font-family: "Didot W01 Roman", serif;
    font-size: 24px;
    line-height: 24px;
    margin: 40px 0 30px 0;
}

.you-might-also-like-link {
    float: left;
    width: 226px;
    height: 168px;
    border: 1px solid #000;
    text-align: center;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 18px;
    color: #222;
    margin: 0 15px 15px 0;
    padding: 0;
    background-color: #fff;
}

.you-might-also-like-link img {
    border-bottom: 1px solid #000;
    margin-bottom: 4px;
}

.you-might-also-like-link:hover {
    background-color: #333;
    color: #fff;
}

.header {
    height: 363px;
    border-bottom: 1px solid #96979c;
}

.header h1 {
    /* font-family: sans-serif;
    font-weight: bold; */
    font-size: 50px;
    line-height: 50px;
    color: #000;
}

ul#mattress-buying-guide-breadcrumbs {
    list-style: none;
    padding: 20px 0 32px 23px;
    /* ul has no height with li's floating, so we set it here */
    margin: 8px 0 0;
}

ul#mattress-buying-guide-breadcrumbs>li {
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 16px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#mattress-buying-guide-social-icons {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 8px auto 0;
}

#mattress-buying-guide-social-icons img {
    width: 40px;
    height: 40px;
    cursor: pointer;
}


/* Nav Bar CSS */

.top-nav {
    height: 52px;
    border: 1px solid black;
}

.top-nav .inline {
    float: left;
    height: 50px;
    line-height: 1.2em;
}

.top-nav #mattress-buying-guide {
    background-color: #333;
    color: white;
    padding: 15px 23px;
    text-align: center;
    /* font-family: sans-serif; */
    font-weight: bold;
}

.top-nav #mattress-basics {
    font-weight: bold;
    padding: 5px 76px 10px 53px;
    cursor: pointer;
}

.top-nav #mattress-accessories {
    font-weight: bold;
    padding: 5px 95px 10px 28px;
    cursor: pointer;
}

.top-nav #mattress-care {
    font-weight: bold;
    padding: 5px 0px 10px 15px;
    cursor: pointer;
}

.nav-separator {
    background-color: #004d4d;
    width: 100%;
    height: 8px;
}

.nav-views {
    height: 143px;
    width: 100%;
    padding-top: 20px;
}

.nav-views ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 20px;
    border-left: 1px solid #1796b2;
}

.nav-views ul>li {
    list-style-type: none;
    font-weight: bold;
    font-size: 16px;
    line-height: 25px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.nav-views ul>li a {
    text-decoration: none;
}

.nav-views ul>li a:hover {
    text-decoration: underline;
}

#nav-mattress-basics ul {
    margin-left: 250px;
}

#nav-mattress-accessories ul {
    margin-left: 444px;
}

#nav-mattress-care ul {
    margin-left: 666px;
}

.nav-bottom-line {
    width: 100%;
    height: 1px;
    background-color: #666;
}

h2.subsection-title {
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    background-color: #035465;
    color: #fff;
    margin: 0;
    /* -1px 0 0 -1px; */
    padding: 14px 20px;
    text-transform: uppercase;
}

span.reg-superscript {
    position: relative;
    font-size: 0.75em;
    top: -5px;
    /* desktop */
}

@media only screen and (max-width: 599px) {
    /* mobile - small */
    nav#flyout ul {
        display: none;
    }
    nav#flyout {
        position: relative;
        display: block;
        background-color: #eee;
        font-family: sans-serif;
        font-weight: bold;
        border-bottom: 2.5vw solid #035465;
        /* hide on expand */
    }
    div.flyout-title {
        color: #fff;
        background-color: #333;
        text-align: center;
        font-size: 5vw;
        line-height: 1em;
        margin: 0;
        padding: 2vw 0 3vw;
    }
    div#flyout-indicator {
        position: absolute;
        /* overflow-y: hidden; */
        right: 3vw;
        top: 2vw;
        width: 5vw;
        height: 5vw;
        /* background-color: #fff; */
        /*
        background-size: 100%;
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: no-repeat;
        */
        margin: 0;
        padding: 0;
    }
    div#flyout-indicator img#plus-sign {
        display: block;
    }
    div#flyout-indicator img#minus-sign {
        display: none;
    }
    nav#flyout.expanded {
        border-bottom: 0.1em solid #ccc;
    }
    /* nav#flyout.expanded img { position: relative; top: -5vw; } */
    nav#flyout.expanded ul {
        display: block;
    }
    /* nav#flyout.expanded div#flyout-indicator { background-position-y: 100%; } */
    nav#flyout.expanded div#flyout-indicator img#plus-sign {
        display: none;
    }
    nav#flyout.expanded div#flyout-indicator img#minus-sign {
        display: block;
    }
    nav#flyout ul {
        border-top: 0.8em solid #1796b2;
        margin: 0;
    }
    nav#flyout li {
        font-size: 5vw;
        padding: 0 7%;
    }
    nav#flyout a {
        text-decoration: none;
    }
    li.flyout-section-title {
        text-transform: uppercase;
        margin-top: 1.5em;
        border-bottom: 0.1em solid #1796b2;
    }
    nav#flyout li:first-child {
        margin-top: 0.4em;
    }
    nav#flyout li:last-child {
        margin-top: 1.2em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        border-top: 0.1em solid #1796b2;
    }
    nav#flyout.flyout-index li:last-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    .header {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 97.3vw;
        /* !important; */
    }
    .header h1 {
        background-color: rgba(255, 255, 255, 0.7);
        text-align: left;
        margin-left: -0.1%;
        /* !important; */
        padding: 5.5%;
        /* !important; */
        font-size: 8vw;
        /* !important; */
        line-height: 1em;
        /* !important; */
        display: inline-block;
        /* makes container width = text width */
    }
    h2.subsection-title {
        /* display: inline-block;
        font-family: sans-serif;
        font-weight: bold; */
        font-size: 5vw;
        line-height: 1em;
        /* background-color: #035465;
        color: #fff; */
        margin: 0;
        /* -1px 0 0 -1px; */
        padding: 5% 6.5%;
        /* text-transform: uppercase; */
    }
    span.reg-superscript {
        top: -0.4em !important;
        /* mobile */
    }
    #mattress-buying-guide-social-icons {
        width: 88vw;
        margin: 9vw auto;
    }
    #mattress-buying-guide-social-icons img {
        width: 14vw;
        height: 14vw;
        margin: 0;
    }
    .you-might-also-like-link {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 24px;
        line-height: 22px;
        color: #222;
        margin: 0 35px 0 35px;
        padding: 0;
        background-color: #fff;
    }
    .you-might-also-like-wrapper {
        height: 375px;
    }
    .you-might-also-like-wrapper img {
        width: 100%;
        margin-bottom: 0 !important;
    }
    .you-might-also-like-wrapper p.title {
        font-size: 7vw;
        line-height: 1em;
        margin: 12% 0 12%;
    }
    .ymalTextBox {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        background-color: white;
    }
}