@font-face {
    font-family: "HelveticaNeueW01-55Roma";
    src: url("https://assets.macys.com/dyn_img/fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot");
    src: url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix") format("embedded-opentype"), url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"), url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"), url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
}

@font-face {
    font-family: "HelveticaNeueW01-75Bold";
    src: url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot");
    src: url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?#iefix") format("embedded-opentype"), url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff") format("woff"), url("https://assets.macys.com/dyn_img/fonts/dyn_img/fonts/8fda1e47-19be-46c7-8d83-8d4fb35572f0.ttf") format("truetype"), url("/dyn_img/fonts/f751c8ae-1057-46d9-8d74-62592e002568.svg#f751c8ae-1057-46d9-8d74-62592e002568") format("svg");
}

@font-face {
    font-family: "Helvetica W01 Bold";
    src: url("https://assets.macys.com/dyn_img/fonts/f70da45a-a05c-490c-ad62-7db4894b012a.eot");
    src: url("https://assets.macys.com/dyn_img/fonts/f70da45a-a05c-490c-ad62-7db4894b012a.eot?#iefix") format("embedded-opentype"), url("https://assets.macys.com/dyn_img/fonts/c5749443-93da-4592-b794-42f28d62ef72.woff") format("woff"), url("https://assets.macys.com/dyn_img/fonts/73805f15-38e4-4fb7-8a08-d56bf29b483b.ttf") format("truetype"), url("https://assets.macys.com/dyn_img/fonts/874bbc4a-0091-49f0-93ef-ea4e69c3cc7a.svg#874bbc4a-0091-49f0-93ef-ea4e69c3cc7a") format("svg");
}

@media only screen and (max-width: 64em) {
    #bd {
        width: auto !important;
    }
}

.title-text {
    font-family: "HelveticaNeueW01-75Bold", Arial, sans-serif;
    font-size: 2.375em;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1em;
}

@media only screen and (max-width: 64em) {
    .title-text {
        text-align: center;
        font-size: 2.5em;
    }
}

.desc-text {
    font-family: "HelveticaNeueW01-55Roma", Arial, sans-serif;
    font-size: 0.875em;
    line-height: 1.3em;
}

@media only screen and (max-width: 64em) {
    .desc-text {
        text-align: center;
        font-size: 1.5em;
    }
}

.section-title {
    font-family: "HelveticaNeueW01-75Bold", Arial, sans-serif;
    font-size: 1.25em;
    font-style: italic;
    text-transform: uppercase;
}

@media only screen and (max-width: 64em) {
    .section-title {
        text-align: center;
        font-size: 2.5em;
    }
}

.product-section {
    background-color: #f8f8f8;
    margin-top: 1em;
}

@media only screen and (max-width: 64em) {
    .product-section {
        border: none !important;
    }
}

.title-text-box {
    margin-top: 11em;
}

.product-image-container {
    margin-top: 1em;
}

.product-text-box {
    margin-top: 1.3em;
}

a:hover {
    text-decoration: underline;
}

.whiteLink {
    color: #333;
}

@media only screen and (max-width: 64em) {
    .whiteLink {
        color: #fff;
    }
}


/*NAVBAR*/

.hub-navbar {
    height: 8em;
    margin-top: 0.75em;
    background-color: #472400;
    text-align: center;
}

.hub-navbar ul {
    list-style-type: none;
}

.hub-navbar li {
    display: inline;
    border-right: 1px solid white;
    padding: 0 1em 0 0.6em;
}

.hub-navbar li:last-child {
    border-right: none;
}

.hub-navbar a {
    font-family: "HelveticaNeueW01-75Bold", Arial, sans-serif;
    font-size: 0.875em;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.nav-top-list {
    margin-top: 1.5em;
}

.nav-bottom-list {
    margin-top: 1em;
}

@media only screen and (max-width: 64em) {
    .hub-navbar {
        height: auto;
        background-color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .hub-navbar li {
        position: relative;
        display: block;
        height: 4em;
        width: 22em;
        background-color: #472400;
        margin: 0 auto;
        margin-top: 3em;
    }
}

@media only screen and (max-width: 64em) {
    .nav-top-list li:first-child,
    .nav-bot-list li:last-child {
        height: 5.4em;
    }
}

@media only screen and (max-width: 64em) {
    .nav-top-list li:first-child a,
    .nav-bot-list li:last-child a {
        height: 3.8em;
    }
}

@media only screen and (max-width: 64em) {
    .hub-navbar a {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 3em;
        color: #fff;
        font-size: 1.4em;
        text-decoration: none;
        width: 13em;
        margin-left: 0.9em;
    }
}


/*INDEX*/

.index-list {
    list-style: none;
}

.index-list li {
    margin-bottom: 0.6em;
}

.index-list a {
    text-transform: uppercase;
    font-size: 0.9em;
}

#index-title {
    margin-top: 2.3em;
}

@media only screen and (max-width: 64em) {
    #index-title {
        margin-top: 0.2em;
    }
}

@media only screen and (max-width: 64em) {
    #index-title-container h1 {
        color: #000;
        margin-top: 0.8em;
    }
}

@media only screen and (max-width: 64em) {
    #index-title-container p {
        color: #000;
        line-height: 1.4em;
    }
}

@media only screen and (max-width: 64em) {
    .index-navbar {
        height: auto;
        background-color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .index-navbar li {
        position: relative;
        display: block;
        height: 4em;
        width: 22em;
        background-color: #472400;
        margin: 0 auto;
        margin-top: 3em;
    }
}

@media only screen and (max-width: 64em) {
    .index-list {
        margin-top: -2em;
        margin-bottom: 3em;
    }
}

@media only screen and (max-width: 64em) {
    .index-list li:last-child {
        height: 5.4em;
    }
}

@media only screen and (max-width: 64em) {
    .index-list li:last-child a {
        height: 3.8em;
    }
}

@media only screen and (max-width: 64em) {
    .index-navbar a {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 3em;
        color: #fff;
        font-size: 1.4em;
        text-decoration: none;
        width: 13em;
        margin-left: 1.3em;
        text-align: center;
    }
}


/*CHOCOLATES*/

.choco-title {
    background-color: #f8f8f8;
}

#choco-title-text {
    margin-top: 5em;
}

.choco-lower-section {
    height: 20em;
}

@media only screen and (max-width: 64em) {
    #choco-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #choco-title-text {
        margin-top: 0.5em;
    }
}

@media only screen and (max-width: 64em) {
    #choco-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #choco-title-container p {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .choco-lower-section {
        height: auto;
    }
}


/*COFFEE*/

.coffee-title {
    background-color: #f8f8f8;
}

#coffee-title-container {
    margin-top: 14em;
}

.coffee-lower-section {
    height: 18em;
}

@media only screen and (max-width: 64em) {
    #coffee-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #coffee-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #coffee-title-container p {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .coffee-lower-section {
        height: auto;
    }
}


/*FRUIT*/

.top-fruit-container {
    height: 568px;
    background-image: url("https://assets.macys.com/dyn_img/creativepages/gourmet-food-and-gift-baskets/04-fruit_03.jpg");
}

@media only screen and (max-width: 64em) {
    .top-fruit-container {
        background-image: none;
        background-color: #f8f8f8;
    }
}

#fruit-title-container {
    margin-top: 2em;
    color: #fff;
}

#fruit-title {
    color: #fff;
}

.fruit-lower-section {
    height: 18em;
}

@media only screen and (max-width: 64em) {
    #fruit-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #fruit-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #fruit-title-container p {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .fruit-lower-section {
        height: auto;
    }
}


/*CANDY*/

.candy-title {
    background-color: #f8f8f8;
}

#candy-title-container {
    margin-top: 14em;
}

.candy-lower-section {
    height: 17em;
}

@media only screen and (max-width: 64em) {
    #candy-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #candy-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #candy-title-container p {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .candy-lower-section {
        height: auto;
    }
}


/*MASON JARS*/

.mason-title {
    background-color: #f8f8f8;
}

#mason-title-container {
    margin-top: 13em;
}

.mason-lower-section {
    height: 18em;
}

@media only screen and (max-width: 64em) {
    #mason-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #mason-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #mason-title-container p {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    .mason-lower-section {
        height: auto;
    }
}


/*HOLIDAY GIFT BASKETS*/

.baskets-title {
    background-color: #f8f8f8;
}

#baskets-title-container {
    margin-top: 13em;
}

@media only screen and (max-width: 64em) {
    #baskets-title-container {
        background-color: #472400;
        margin-top: 0em;
        padding-top: 1.5em;
    }
}

@media only screen and (max-width: 64em) {
    #baskets-title-container h1 {
        color: #fff;
    }
}

@media only screen and (max-width: 64em) {
    #baskets-title-container p {
        color: #fff;
    }
}

.baskets-lower-section {
    height: 18em;
}

@media only screen and (max-width: 64em) {
    .baskets-lower-section {
        height: auto;
    }
}