﻿@font-face {
    font-family: "TT";
    src: url('/styles/TT Norms/TT Norms Regular.otf#iefix') format('opentype');
}

@font-face {
    font-family: "TT";
    src: url('/styles/TT Norms/TT Norms Bold.otf#iefix') format('opentype');
    font-weight: bold;
}


@font-face {
    font-family: "TT-Demi";
    src: url('/styles/TT Norms/TT_Norms_DemiBold.ttf');
}

@font-face {
    font-family: "TT-Condensed";
    src: url('/styles/TT Norms/TT_Norms_Condensed.otf');
}


:root {
    --dd-red: #e43d30;
    --dd-light-red: #eb1700;
    --dd-black: #191919;
    --dd-light-gray: #f2f2f2;
    --dd-med-gray: #d6d6d6;
    --dd-dark-gray: #6b6b6b;
}

body {
    padding-top: 132px;
    font-family: "TT";
}

img {
    max-width: 100%;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    font-family: "TT";
}

button,
select,
[type="button"],
[type="submit"] {
    -webkit-appearance: button;
    font-family: "TT";
}
body div.uwy.userway_p1 .userway_buttons_wrapper {
    top: auto;
    bottom: 13px;
}
h1 {
    text-align: center;
    color: var(--dd-red);
    line-height: 40px;
    font-size: 38px;
    margin-bottom: 25px;
    font-weight: bold;
    margin-top: 15px;
}

.hellobar {
    display: none;
    text-align: center;
    color: #fff;
    position: fixed;
    top: 0px;
    margin: auto;
    width: 100%;
    background: var(--dd-red);
    z-index: 9999;
    padding: 5px 0;
}

.static.content {
    padding-top: 20px;
    padding-bottom: 30px;
}

    .static.content p {
        margin-bottom: 20px;
    }

    .static.content ul {
        margin: 0px;
        padding: 0px;
        list-style: disc;
        padding-left: 25px;
        margin-bottom: 15px;
    }

    .static.content li {
        margin-bottom: 8px;
    }

    .static.content h4 {
        font-size: 19px;
        font-weight: bold;
    }

.make-space {
    padding-top: 35px;
    padding-bottom: 45px;
}

.pad-bottom {
    padding-bottom: 15px;
}

.center {
    text-align: center;
}

.status,
.validation {
    color: #ff0000;
}

.cookiebar {
    position: fixed;
    bottom: 0px;
    background-color: white;
    padding: 25px;
    width: 100%;
    z-index: 5000;
    display: none;
    border-top: 1px solid black;
    text-align: center;
}

    .cookiebar p {
        margin-bottom: 20px;
    }

    .cookiebar.visible {
        display: block;
    }

    .cookiebar .wrapper {
        display: block;
        margin-right: 20px;
    }

.wrapper .copy {
    margin-right: 20px;
}

.cookiebar .buttons {
    text-align: center;
    margin-right: 10px;
}

.cookiebar .button {
    min-width: 150px;
}

cookiebar .decline {
    background-color: transparent;
    border: 1px solid black;
    color: black;
    margin: 10px;
}



div.header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 6px solid var(--dd-red);
    z-index: 500;
    height: 128px;
    background-color: #ffffff;
}

.header .logo {
    margin-top: 35px;
    padding-left: 15px;
}

.header .rightside div.links,
.header .rightside div.searchwrapper {
    float: right;
    margin-top: 20px;
    margin-left: 15px;
}

.header .rightside .links div {
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
}

.header .links .login a {
    float: left;
}

.header .links .login img {
    width: 48px;
    height: 48px;
    display: block;
}

.header .links .login .logout {
    margin-left: 15px;
}

    .header .links .login .logout img {
        width: 40px;
        height: 40px;
        margin-top: 4px;
    }

.header .rightside .links .search {
    display: none;
}

.header .searchwrapper div.search {
    max-width: 450px;
    border: 1px solid var(--dd-med-gray);
    border-radius: 100px;
    height: 50px;
    background-color: #ffffff;
}

.header .searchwrapper input[type='search'] {
    height: 40px;
    margin-left: 15px;
    margin-top: 5px;
    color: var(--dd-black);
    line-height: 40px;
    border: none;
    background-color: #ffffff;
    width: calc(100% - 70px);
}

.header .searchwrapper input[type='submit'] {
    height: 40px;
    border-radius: 40px;
    width: 40px;
    position: relative;
    background-color: var(--dd-red);
    color: var(--dd-red);
    font-size: 0px;
    padding: 0px;
    background-image: url('/images/new/Search_w.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 5px;
    float: right;
}

.header .cart a {
    position: relative;
    text-decoration: none;
    display: inline-block;
}

.header .cart span {
    position: absolute;
    font-weight: bold;
    color: #ffffff;
    font-size: 12px;
    top: 3px;
    right: 1px;
    text-align: center;
    display: block;
    width: 18px;
    height: 18px;
}

.header .cart img {
    height: 48px;
    width: 48px;
}

.header .select {
    top: 5px;
}

.header .rightside select {
    border-radius: 5px;
    border: 1px solid var(--dd-dark-gray);
    width: 70px;
}

.header .navigation {
    clear: both;
}

    .header .navigation ul {
        margin: 0px;
        padding: 0px;
        margin-left: 70px;
        padding-top: 10px;
    }

        .header .navigation ul li ul {
            margin-left: 0px;
        }

    .header .navigation li {
        display: inline-block;
        line-height: 32px;
        padding-bottom: 15px;
        margin-right: 20px;
        position: relative;
    }

        .header .navigation li.status {
            display: none;
        }

        .header .navigation li a {
            color: var(--dd-black);
            font-weight: bold;
            font-size: 16px;
            text-decoration: none;
        }

        .header .navigation li ul li a {
            color: var(--dd-red);
        }

        .header .navigation li a:hover {
            color: var(--dd-red);
        }

.text-hover {
    opacity: 1;
    color: var(--dd-red);
    font-size: 12px;
    cursor: pointer;
    padding-top: 5px;
    position: absolute;
    top: 55%;
}

div.cart .text-hover {
    margin-left: 13px;
    margin-top: 21px;
}

.header .toprow a:hover .text-hover {
    opacity: 1;
}

ul.topnav .parent,
ul.topnav .current {
    background-image: url("/images/new/Polygon.svg");
    background-position: 50% calc(100% + 4px);
    background-repeat: no-repeat;
}

.lognav ul.topnav > li {
    position: relative
}


.lognav ul.topnav li ul {
    display: none;
    margin: 10px !important;
    padding: 10px !important;
    flex-direction: column;
    position: absolute;
    margin-left: 0;
    margin-top: 13px;
    text-align: center;
    border: 3px solid #0D858C;
    border-radius: 20px;
    background: #C5E8EA;
    transform: translate(-50%);
    left: 40%
}

ul.topnav li ul {
    display: none;
    margin: 0px;
    padding: 0px;
    flex-direction: column;
    position: absolute;
    margin-left: 0;
    margin-top: 13px;
    text-align: center;
    border: 3px solid var(--dd-red);
    border-radius: 20px;
    background: #ffc4fc;
    transform: translate(-50%);
    left: 50%;
}


.header .navigation.lognav li ul li a {
    color: #0D858C;
}


.header .navigation.lognav li ul li:hover a {
    color: var(--dd-red);
}

.header .navigation li ul li:hover a {
    color: #4c0c3a;
}

.lognav ul.topnav li:hover ul {
    display: block;
}

ul.topnav li:hover ul {
    display: block;
}

ul.topnav li ul > li {
    margin-right: 0px
}

.header .navigation li ul li {
    margin-right: 0px;
    padding: 5px 5px;
    min-width: 125px;
}


.header .navigation.lognav > li a:hover {
    color: #0D858C;
}

.header .navigation li ul li:hover a {
    color: #4c0c3a;
}


.lognav ul.topnav li ul:after {
    content: url(/images/new/GreenT.svg);
    height: 25px;
    position: absolute;
    top: -20px;
    transform: translate(-50%);
    left: 49%;
}

ul.topnav li ul:after {
    content: url(/images/new/Polygon.svg);
    height: 25px;
    position: absolute;
    top: -17px;
    transform: translate(-50%);
    left: 49%;
}

.main.container {
    clear: both;
}

div.footer {
    clear: both;
    width: 100%;
    color: #ffffff;
    padding-top: 75px;
    background-color: #4c0c3a;
}

    div.footer .four.columns img {
        width: 320px;
        margin-top: 10px;
        margin-bottom: 50px;
        display: inline-block;
    }

    div.footer h4 {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    div.footer p {
        font-size: 14px;
        line-height: 20px;
        color: #ffffff;
    }

    div.footer .two a {
        color: #ffffff;
        display: block;
        text-decoration: none;
        font-size: 16px;
        margin-bottom: 15px;
    }

        div.footer .two a:hover {
            text-decoration: underline;
        }

    div.footer .addborder {
        border-top: 1px solid #ffffff;
        clear: both;
        padding-top: 20px;
        padding-bottom: 25px;
    }

    div.footer div.social a {
        margin-right: 8px;
    }

    div.footer div.social img {
        width: 32px;
        height: 32px;
    }

    div.footer .button {
        background-color: transparent;
        border: 1px solid #ffffff;
        padding: 0px;
        height: 58px;
        border-radius: 100px;
        line-height: 58px;
        width: 198px;
        transition: none;
        display: block;
    }

        div.footer .button:hover {
            background-color: #ffffff;
            color: var(--dd-black);
        }

        div.footer .button span {
            display: none;
        }

        div.footer .button[href^="tel:"]:hover {
            font-size: 0px;
        }

            div.footer .button[href^="tel:"]:hover svg {
                display: none;
            }

        div.footer .button:hover span {
            display: inline-block;
            font-size: 16px;
        }

        div.footer .button svg {
            margin-right: 6px;
            font-size: 25px;
            top: 3px;
            position: relative;
        }


table.form .formElement input,
table.form .formElement textarea,
table.form .formElement select {
    width: 100%;
}


div.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    background-color: #666666;
    opacity: 0.6;
}

.curr-overlay {
    width: 15%;
    background-color: rgba(255,255,255,0.6);
    padding-top: 0px;
    padding: 10px;
    position: fixed;
    left: 65px;
    bottom: 10px;
    border: 2px solid var(--dd-red);
    border-radius: 20px;
    font-size: 10px;
    cursor: pointer;
    z-index: 100;
}

div.cartoverlay,
div.cobrand {
    left: 50%;
    position: fixed;
    top: 50%;
    background-color: #ffffff;
    z-index: 1200;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 40px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
}

    div.cartoverlay img {
        margin-left: auto;
        margin-right: auto;
    }

.cartoverlay-content {
    padding-left: 15px;
    padding-right: 10px;
}

div.cartoverlay .image {
    text-align: left;
    padding-top: 00px;
}

div.cartoverlay .copy {
    text-align: left;
    padding-top: 40px;
}

div.cobrand div.alert p {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 21px;
    line-height: 22px;
    margin-bottom: 20px;
}

div.cartoverlay p {
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 20px;
    margin-right: 25px;
}

div.cobrand div.alert h3 {
    font-weight: bold;
    color: #FF3008;
    font-size: 22px;
    font-style: italic;
}

div.cartoverlay a.close.top,
div.cobrand a.close {
    font-size: 30px;
    text-decoration: none;
    margin-bottom: 25px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 15px;
    color: var(--dd-dark-gray);
}

div.cartoverlay a.button {
    max-width: 225px;
    display: block;
}

    div.cartoverlay a.button span {
        background-image: url("/images/new/white-cart.png");
        background-repeat: no-repeat;
        background-position: left 50%;
        background-size: 25px;
        padding-left: 30px;
    }

div.splash {
    display: none;
    padding: 20px;
    background-color: #ffffff;
    position: fixed;
    z-index: 1200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    div.splash h3 {
        font-weight: bold;
        font-size: 25px;
        line-height: 38px;
        margin-bottom: 24px;
    }

    div.splash .button {
        display: block;
        margin-bottom: 18px;
        width: 225px;
        margin-left: auto;
        margin-right: auto;
        font-weight: bold;
    }

/* Login */
.loginpage {
    padding-top: 35px;
    padding-bottom: 45px;
}

    .loginpage h1 {
        color: var(--dd-red);
        text-align: center;
        font-size: 25px;
    }

div.loginpage h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 10px;
}

table.login {
    text-align: center;
}

.login .bottom a {
    display: inline-block;
    margin: 10px;
}

/* Home Page */

/* Logged in Home*/

.callouts {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

    .callouts .imgbox {
        position: relative;
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .callouts .swag .hoverimg,
    .callouts .ops .hoverimg,
    .callouts .giveaways .hoverimg,
    .callouts .merchdiv .hoverimg {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        object-fit: contain;
        opacity: 0;
        transition: opacity .2s;
    }

    .callouts .swag:hover .hoverimg,
    .callouts .ops:hover .hoverimg,
    .callouts .giveaways:hover .hoverimg,
    .callouts .merchdiv:hover .hoverimg {
        opacity: 1;
    }

.customcallout {
    background-image: url('/images/loghome/custom order banner no text.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 450px;
    position: relative
}



.customcalloutcontent {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



    .customcalloutcontent h3 {
        font-weight: bold;
        font-size: 48px;
        color: #0D858C;
        text-align: left;
        margin-bottom: 10px;
    }

    .customcalloutcontent p {
        font-size: 32px;
        color: #0D858C;
        text-align: left;
    }

.custombtnwrap {
    text-align: right;
    margin-right: 20%;
}


    .custombtnwrap a.button {
        background: white;
        color: var(--dd-red);
        font-size: 28px;
        padding: 16px 30px;
    }

        .custombtnwrap a.button:hover {
            background: #F5E2DD;
            color: white;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }

div.landing {
    position: relative;
}

    div.landing img {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    div.landing .mobile {
        display: none;
    }

    div.landing .content {
        position: absolute;
        width: 30%;
        top: 54%;
        left: 14%;
        transform: translate(0, -50%);
        text-align: center;
    }


.landing .content a {
    background-color: #fff;
    color: var(--dd-red);
}

    .landing .content a:hover {
        background-color: var(--dd-red);
        color: white;
    }


div.landing h1 {
    font-weight: bold;
    font-size: 50px;
    color: var(--dd-black);
    margin-bottom: 25px;
    line-height: 55px;
    text-align: left;
    margin-top: 0px;
}

div.landing p {
    margin-bottom: 25px;
    font-size: 24px;
    line-height: 25px;
    color: #f9f39d;
    font-family: "TT-Demi";
}


h2.hero-purple {
    color: #4b0c39;
    font-weight: 900;
    margin-bottom: 20px;
    font-family: "TT-Condensed";
    font-size: 70px;
}

h2.hero-yellow {
    color: #f9f39d;
    font-weight: 900;
    font-family: "TT-Condensed";
    margin-bottom: -15px;
    font-size: 70px;
}

.homecats .category:hover .wrapper {
    top: -15px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.homecats div.category {
    display: grid;
    grid-template-rows: 100%;
}

.homecats h3 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: bold;
}



.homecats-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 50px 0;
}

.homecats-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 0 10px 50px 10px;
}

.homecats-box {
    position: relative;
}

.homecats-cta-box {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 43%;
}

img.mobile-on {
    display: none;
}

h3.purple {
    color: #4b0c39;
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: "TT-Condensed";
}

h3.red {
    color: var(--dd-red);
    font-weight: 900;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 33px;
    font-family: "TT-Condensed";
}

h3.and-white {
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 33px;
    font-family: "TT-Condensed";
}

.homecats-p-purple {
    color: #4b0c39;
    margin-bottom: 20px;
    font-family: "TT-Demi";
}

.homecats-p-yellow {
    color: #f9f39d;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: "TT-Demi";
}


.bigcats-box img {
    width: 100%;
    height: 60%;
}

.big-box-cta {
    padding-left: 25px;
}

    .big-box-cta h3 {
        font-weight: 800;
        font-size: 30px;
        margin-top: 10px;
        font-family: "TT";
    }

    .big-box-cta p {
        width: 75%;
        margin-bottom: 10px;
        min-height: 50px;
        font-family: "TT";
        font-size: 18px;
    }

.blueban {
    background-color: #ffe7e7;
    text-align: center;
    clear: both;
    padding-top: 25px;
    padding-bottom: 25px;
}

    .blueban h3 {
        font-size: 30px;
        margin-bottom: 30px;
        color: var(--dd-black);
        line-height: 32px;
        font-weight: bold;
    }

    .blueban p {
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 20px;
        font-weight: normal;
        font-size: 18px;
        color: var(--dd-black);
    }

    .blueban img {
        max-width: 60%;
        height: 180px;
    }

    .blueban a {
        font-weight: bold;
        color: var(--dd-red);
        font-size: 18px;
        text-decoration: none;
    }

        .blueban a:hover {
            text-decoration: underline;
        }

        .blueban a::after {
            content: "\f061";
            font-family: "Font Awesome 5 Free";
            color: var(--dd-red);
            font-size: 12px;
            position: relative;
            left: 8px;
        }

div.ig-feed {
    background-color: #ffc4fc;
    margin-top: 56px;
    color: var(--dd-red);
}

    div.ig-feed .eui-widget-title {
        text-transform: uppercase;
        font-family: "TT";
    }

/* Category layout */
.sort-order {
    float: right;
    margin-top: 15px;
    margin-right: 10px;
}

.catform p {
    text-align: center;
    margin-bottom: 10px;
}

.catform .catDesc {
    clear: both;
    padding-bottom: 25px;
    text-align: center;
}

.catheader {
    border-bottom: 2px solid var(--dd-red);
    text-align: center;
    height: 30px;
    margin-bottom: 45px;
    position: relative;
}

    .catheader h2 {
        margin: 0px;
        padding-left: 55px;
        padding-right: 55px;
        background-color: #ffffff;
        font-size: 30px;
        font-weight: bold;
        color: var(--dd-red);
        line-height: 30px;
        display: inline-block;
        position: relative;
        top: 16px;
    }

    .catheader .viewall {
        position: absolute;
        top: 6px;
        display: block;
        background-color: #ffffff;
        padding-left: 35px;
        right: 0px;
    }

        .catheader .viewall .button {
            border: 2px solid var(--dd-red);
            background-color: #ffffff;
            color: var(--dd-red);
            padding: 10px 18px;
        }

            .catheader .viewall .button:hover {
                border: 2px solid var(--dd-light-red);
                color: var(--dd-light-red);
            }

div.category,
div.category .products {
    position: relative;
}

    div.category .product {
        position: relative;
        top: 0px;
        vertical-align: top;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        transition: all .5s;
    }

        div.category .product:nth-child(4n+1) {
            margin-left: 0px;
            clear: left;
        }

    div.category .products.row {
        clear: both;
    }

    div.category .scroller {
        overflow: hidden;
        white-space: nowrap;
        font-size: 0;
        padding-top: 25px;
        padding-bottom: 10px;
    }

        div.category .scroller .wrapper {
            position: relative;
            left: 0px;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            transition: all .5s;
        }

        div.category .scroller .product {
            width: 22.75%;
            display: inline-block;
            float: none;
            margin-left: 3%;
        }

    div.category .product .hover {
        margin: 10px;
        padding-bottom: 15px;
    }

    div.category .product:hover {
        top: -15px;
    }

    div.category .product p.name {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;
        line-height: 20px;
        margin-bottom: 20px;
        white-space: normal;
    }

        div.category .product p.name a {
            text-decoration: none;
        }

    div.category .product:hover p.name a {
        color: var(--dd-red);
    }

    div.category .product p.price {
        color: #666666;
        font-size: 25px;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;
        line-height: 30px;
        margin-bottom: 30px;
        font-weight: normal;
    }

    div.category .product:hover .hover {
        -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
    }

    div.category .product div.image {
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;
    }

    div.category.search-results .product:nth-child(4n+1) {
        margin-left: 0px;
        clear: left;
    }

    div.category .arrow {
        font-size: 36px;
        color: var(--dd-dark-gray);
        cursor: pointer;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
    }

        div.category .arrow.left {
            left: 0px;
        }

        div.category .arrow.right {
            right: 0px;
        }

        div.category .arrow.disabled {
            color: var(--dd-med-gray);
        }

    div.category .product img {
        max-width: 100%;
    }

    div.category .scroller .product:first-child {
        margin-left: 0;
    }

.cat-price.original,
span.price.original {
    text-decoration: line-through;
}

.cat-price.closeout,
span.price.closeout {
    color: var(--dd-red) !important;
}

.cat-breadcrumb {
    padding-top: 20px;
    padding-left: 15px;
}

    .cat-breadcrumb .home {
        /*display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("/images/new/bread-house.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;*/
    }

    .cat-breadcrumb a {
        text-decoration: none;
        line-height: 30px;
        vertical-align: top;
    }

        .cat-breadcrumb a:hover {
            text-decoration: underline;
            color: var(--dd-red);
        }

    .cat-breadcrumb .fa-arrow-right {
        color: var(--dd-med-gray);
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
        line-height: 30px;
        vertical-align: top;
        margin-top: 6px;
    }

/* Product Page */

#productItem {
    margin-top: 25px;
    margin-bottom: 35px;
}

    #productItem .imagewrapper {
        text-align: center;
    }

        #productItem .imagewrapper .gallery {
            margin-bottom: 15px;
        }

        #productItem .imagewrapper img {
            max-width: 100%;
            cursor: pointer;
        }

        #productItem .imagewrapper p {
            clear: both;
            font-size: 14px;
        }

            #productItem .imagewrapper p .fa-search-plus {
                color: var(--dd-red);
                font-size: 18px;
                margin-left: 10px;
            }

.productImage {
    margin-bottom: 10px;
}

.productcontent {
    margin-top: 35px;
}

    .productcontent h1 {
        font-weight: bold;
        font-size: 42px;
        color: var(--dd-red);
        margin-bottom: 8px;
        line-height: 46px;
        text-align: left;
    }

    .productcontent .sku {
        color: #9fa2a6;
        font-size: 14px;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

    .productcontent .price {
        color: #000000;
        font-size: 25px;
        font-weight: bold;
        line-height: 30px;
        margin-bottom: 25px;
    }

    .productcontent .description {
        font-size: 16px;
        margin-top: 10px;
        padding-bottom: 15px;
    }

.prodopts {
    margin-bottom: 20px;
}

.productcontent .prodopt,
.productcontent .productquantity {
    margin-bottom: 15px;
}

    .productcontent .prodopt span {
        display: block;
        margin-bottom: 5px;
    }

.productcontent .productquantity {
    padding-top: 10px;
}

div#orderarea strong {
    display: block;
    text-align: left;
    border-bottom: 1px solid var(--dd-light-gray);
    color: var(--dd-red);
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

div.quantities .six.columns {
    padding-bottom: 10px;
    line-height: 36px;
}

    div.quantities .six.columns:nth-child(2n+1) {
        clear: left;
        margin-left: 0px;
    }

.quantities input {
    max-width: 50%;
    float: right;
}

.productorder {
    clear: left;
}

.productcontent .description ul {
    margin: 0px;
    padding: 0px;
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 15px;
}

.productcontent .description li {
    margin-bottom: 8px;
}

.prodopt strong,
.productquantity strong {
    display: block;
}

.gallery > div {
    float: left;
    margin-right: 10px;
}

div.product table.pricing {
    margin-top: 15px;
    margin-bottom: 15px;
}

    div.product table.pricing tr:first-child td,
    div.product table.pricing tr td:first-child {
        background-color: #e1e1e1;
    }

    div.product table.pricing td {
        text-align: center;
        padding: 5px 10px 5px 10px;
        font-size: 15px;
        color: #000000;
        border: 1px solid #ababab;
    }

.related {
    clear: both;
}

/* Search */

div.blendedSearchMain h3 {
    border-bottom: 1px solid #717171;
    color: #026b4d;
    font-weight: bold;
    line-height: 28px;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
}

div.search-facet {
    text-align: left;
}

    div.search-facet h4 {
        margin-bottom: 12px;
    }

/* Cart Page */

table.cartTable {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-bottom: 1px solid var(--dd-med-gray);
    margin-bottom: 15px;
}

    table.cartTable tr.cartHeader {
        display: table-row;
    }

    table.cartTable th {
        border-bottom: 1px solid var(--dd-med-gray);
        color: #000000;
        display: table-cell;
        float: none;
        text-align: center;
        vertical-align: middle;
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 19px;
        font-size: 16px;
    }

        table.cartTable th:first-child {
            text-indent: 8px;
            text-align: left;
        }

    table.cartTable td {
        display: table-cell;
        float: none;
        line-height: 60px;
        height: 60px;
        vertical-align: middle;
        text-align: center;
        padding-bottom: 5px;
        padding-top: 5px;
    }

    table.cartTable tr.cartFooter td {
        line-height: unset;
        height: 30px;
        vertical-align: middle;
    }

    table.cartTable img.preview {
        display: block;
    }

    table.cartTable td input {
        max-width: 70px;
        font-size: 18px;
        text-align: right;
    }

        table.cartTable td input[disabled] {
            background-color: #bfbfbf;
        }

    table.cartTable div.iteminfo {
        text-align: left;
    }

    table.cartTable div.img {
        text-align: center;
    }

        table.cartTable div.img img {
            max-width: 60px;
            margin-left: auto;
            margin-right: auto;
        }

.cartFooter {
    text-align: right;
    width: 50%;
    float: none;
    padding-bottom: 10px;
}

    .cartFooter p,
    .cartFooter span {
        font-size: 16px;
    }

    .cartFooter p {
        font-weight: bold;
        display: inline-block;
    }

    .cartFooter .row {
        display: grid;
        grid-auto-flow: column;
        padding-top: 5px;
        padding-bottom: 5px;
        grid-template-columns: repeat(3,1fr);
    }

.cartbuttons {
    clear: both;
}

table.cartTable span.cartProdName {
    float: left;
    line-height: 30px;
}

    table.cartTable span.cartProdName a {
        text-decoration: none;
    }

        table.cartTable span.cartProdName a:hover {
            text-decoration: underline;
        }

div.cartbuttons a {
    display: block;
    float: right;
    clear: right;
    min-width: 125px;
}

a.button.light {
    background-color: var(--dd-light-gray);
    color: var(--dd-black);
}

    a.button.light:hover {
        background-color: #DBDBDB;
    }

div.cartbuttons div.gift {
    float: right;
}

    div.cartbuttons div.gift .formElement {
        float: left;
    }

        div.cartbuttons div.gift .formElement label {
            font-size: 12px;
        }

        div.cartbuttons div.gift .formElement input {
            height: 50px;
        }

    div.cartbuttons div.gift span {
        margin-top: 10px;
    }

    div.cartbuttons div.gift .success,
    div.cartbuttons div.gift .error,
    div.static.gift .error {
        display: block;
        text-align: left;
    }

    div.cartbuttons div.gift .error {
        color: #ff0000;
    }

div.empty-cart {
    text-align: center;
}

    div.empty-cart .bag {
        background-color: var(--dd-red);
        height: 222px;
        width: 222px;
        border-radius: 222px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        margin-top: 10px;
    }

        div.empty-cart .bag img {
            display: inline-block;
            margin-top: 35px;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(266deg) brightness(105%) contrast(100%);
        }

    div.empty-cart h3 {
        color: var(--dd-red);
        font-size: 26px;
        font-weight: bold;
    }

    div.empty-cart p {
        margin-bottom: 18px;
        font-size: 17px;
        line-height: 20px;
    }

    div.empty-cart div.gift {
        float: left;
    }

/* Account/History */
div.accountheader {
    text-align: center;
}

    div.accountheader a {
        margin-left: 10px;
        margin-right: 10px;
    }

table.accountform,
table.orders {
    margin-bottom: 25px;
    width: 100%;
    text-align: center;
}

    table.orders td {
        vertical-align: middle;
        text-align: left;
        padding: 5px;
    }

    table.orders th {
        background-color: var(--dd-med-gray);
        text-align: left;
        padding-top: 8px;
        padding-bottom: 8px;
        color: var(--dd-black);
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

        table.orders th:first-child,
        table.orders td:first-child {
            padding-left: 8px;
        }

    table.orders tr:nth-child(2n+1) {
        background-color: var(--dd-light-gray);
    }

    table.orders th.subtable span {
        display: inline-block;
    }

    table.orders th.subtable span,
    table.orders table.details td {
        width: 20%;
    }

        table.orders th.subtable span:first-child,
        table.orders table.details td:first-child {
            width: 60%;
        }

    table.orders table tr {
        background-color: #ffffff;
    }

    table.orders p {
        margin-bottom: 5px;
        line-height: 17px;
    }

    table.orders div.o-details,
    table.orders div.reorder {
        display: none;
        position: fixed;
        max-width: 85%;
        max-height: 85%;
        min-width: 60%;
        min-height: 50%;
        z-index: 1200;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
    }

    table.orders a.view-more,
    table.orders a.reorder-btn {
        cursor: pointer;
        display: inline;
    }

    table.orders a.close {
        font-size: 30px;
        text-decoration: none;
        margin-bottom: 25px;
        margin-right: 5px;
        margin-top: 5px;
        cursor: pointer;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    table.orders div.padding {
        padding: 20px;
    }

    table.orders table.details,
    table.orders table.line-items {
        width: 100%;
        margin-bottom: 25px;
    }

div.reorder h3 {
    color: #191919;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
}

table.details h4 {
    font-size: 19px;
    line-height: 22px;
    margin-bottom: 10px;
    font-weight: bold;
}

table.orders td table.details tr {
    background-color: #ffffff;
}

.status-header h1 {
    background-color: var(--dd-red);
    color: #ffffff;
    padding-top: 0px;
    margin-top: 35px;
    text-align: left;
    font-size: 32px;
    text-indent: 15px;
    font-weight: bold;
}

.status-header p {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 18px;
}

    .status-header p span {
        margin-left: 15px;
        display: inline-block;
        font-weight: normal;
    }

table.orders.status td {
    vertical-align: top;
    color: #007797;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 24px;
    text-align: left;
}

/* Etc. Pages */
table.form {
    width: 100%;
}

/*Breadcrumbs*/

div.breadcrumb {
    text-align: center;
    min-height: 85px;
}

    div.breadcrumb ol {
        list-style: none;
        counter-reset: item;
        margin-top: 25px;
    }

        div.breadcrumb ol li {
            display: inline-block;
            counter-increment: item;
            margin-bottom: 5px;
            padding-top: 50px;
            position: relative;
            text-align: center;
            width: 100px;
            vertical-align: top;
            margin-left: 25px;
            margin-right: 25px;
            font-size: 11px;
            line-height: 15px;
            color: var(--dd-med-gray);
        }

            div.breadcrumb ol li:after {
                content: counter(item);
                border-radius: 100%;
                background-color: #ffffff;
                border: 3px solid var(--dd-med-gray);
                color: var(--dd-med-gray);
                width: 40px;
                height: 40px;
                font-size: 18px;
                line-height: 40px;
                text-align: center;
                display: inline-block;
                position: absolute;
                top: 0px;
                left: 50%;
                transform: translate(-50%,0);
            }

            div.breadcrumb ol li:nth-child(n+2)::before {
                content: '';
                border-top: 3px solid var(--dd-med-gray);
                position: absolute;
                width: 100px;
                height: 1px;
                left: -50px;
                top: 22px;
                transform: translate(-27px,0);
                color: var(--dd-red);
            }

            div.breadcrumb ol li.active:after,
            div.breadcrumb ol li.active:before,
            div.breadcrumb ol li.check:before {
                border-color: var(--dd-red);
                color: var(--dd-red);
                background-color: #ffffff;
            }

            div.breadcrumb ol li.check:after {
                background-image: url(/images/new/check.svg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: 100%;
                font-style: normal;
                font-size: 30px;
                font-weight: 900;
                text-decoration: inherit;
                border: 3px solid var(--dd-red);
                background-color: var(--dd-red);
                font-size: 28px;
                line-height: 42px;
                color: #ffffff;
                content: '';
            }

            div.breadcrumb ol li.active {
                font-weight: bold;
            }

                div.breadcrumb ol li.active, div.breadcrumb ol li.check, div.breadcrumb ol li.active a, div.breadcrumb ol li.check a {
                    color: var(--dd-red);
                    text-decoration: none;
                    font-weight: bold;
                }

/* Checkout Styles */
div.checkout h2 {
    text-align: center;
    color: var(--dd-red);
    line-height: 40px;
    font-size: 35px;
    margin-bottom: 25px;
    font-weight: bold;
}

div.addr {
    border-bottom: 2px solid var(--dd-med-gray);
    margin-bottom: 30px;
    padding-bottom: 20px;
    text-align: center;
}

table.shopts {
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

    div.same label,
    div.addr > label,
    div.selector label,
    table.shopts label,
    div.opt label {
        display: inline;
        margin-left: 6px;
        font-weight: normal;
    }

div.same {
    margin-bottom: 15px;
}

.radio label {
    display: inline-block;
}

.addr-book .checkbox {
    text-align: left;
}

.addr-book input[type='checkbox'] {
    height: 35px;
    width: 35px;
    margin-top: 15px;
    float: left;
    margin-right: 5px;
}

.addr-book .selector label {
    margin: 0px;
    position: relative;
    top: 12px;
}

table.address {
    width: 100%;
}

div.address.ReadOnly label {
    margin-left: 0px;
    margin-bottom: 0px;
}

div.checkout .cartWrapper {
    margin-bottom: 20px;
}

div.checkout div.payment {
    clear: left;
}

div.checkout table.cartTable td,
div.checkout table.cartTable th,
div.checkout table.cartTable tr.cartFooter td {
    text-align: left;
}

div.checkout .opt {
    text-align: center;
}

.paymentbox table.payment {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .paymentbox table.payment td {
        padding-top: 5px;
        padding-bottom: 5px;
    }

.paymentbox {
    clear: left;
    border-bottom: 2px solid var(--dd-med-gray);
    margin-bottom: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.payment .row .six.columns:nth-child(2) {
    margin: 0px;
    width: 50%;
}

.payment .cc-num input {
    background-image: url('/images/new/DD_CC_r2.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 60px;
}

    .payment .cc-num input.visa {
        background-size: 120px;
        background-position: top -60px right -50px;
    }

    .payment .cc-num input.mastercard {
        background-size: 150px;
        background-position: top right -75px;
    }

    .payment .cc-num input.amex {
        background-size: 130px;
        background-position: top -200px right -65px;
    }

    .payment .cc-num input.discover {
        background-size: 130px;
        background-position: top -125px right -45px;
    }

.addresses.row,
.express-addr {
    margin-top: 25px;
    clear: both;
}

div.continue {
    text-align: center;
    clear: both;
    padding-top: 25px;
}

    div.continue p {
        margin-bottom: 15px;
    }

div.confirm {
    text-align: center;
}

    div.confirm table {
        margin-left: auto;
        margin-right: auto;
    }

div#igFlag {
    width: 15%;
    background-color: rgba(255,255,255,0.6);
    padding-top: 0px;
    padding: 10px;
    left: 10px;
    border: 2px solid var(--dd-red);
    border-radius: 20px;
    font-size: 10px;
    cursor: pointer;
    z-index: 100;
}

@media (min-width: 1600px) {
    .homecats-cta-box {
        position: absolute;
        top: 5%;
        left: 2%;
        width: 36%;
    }
}

@media (max-width: 1600px) {
    h2.hero-purple, h2.hero-yellow {
        font-size: 60px;
    }

    div.landing p {
        margin-bottom: 5px;
        font-size: 20px;
    }
}

@media (max-width: 1280px) {


    div.landing p {
        margin-bottom: 5px;
    }


    h3.and-white, h3.red {
        font-size: 22px;
        margin-bottom: 0px;
    }

    h2.hero-yellow {
        color: #f9f39d;
        font-weight: 900;
        margin-bottom: -8px;
    }

    .homecats-p-yellow {
        font-size: 12PX;
    }

    h2.hero-yellow, h2.hero-purple {
        font-size: 45px;
    }
}

@media (max-width: 1080px) {
    div .cartbuttons div.gift {
        float: none;
        text-align: right;
    }

        div.cartbuttons div.gift .formElement {
            float: none;
            display: inline-block;
        }

    div.landing h1 {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    div.landing p {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 10px;
    }

    div.footer .button {
        width: auto;
        margin-right: 20px;
    }

    div .breadcrumb ol li {
        width: 90px;
        margin-left: 15px;
        margin-right: 15px;
    }

        div.breadcrumb ol li:nth-child(n+2)::before {
            width: 70px;
            left: -24px;
        }

    table.orders a.view-more, table.orders a.reorder-btn {
        font-size: 10px;
    }

    table.orders td {
        font-size: 13px;
    }

    tr.cartItem a.button {
        font-size: 12px;
    }

    .empty-cart .cartbuttons div.gift {
        text-align: center;
    }

    .empty-cart .cartbuttons a.button {
        float: none;
    }

    .payment .formElement label {
        font-size: 10px;
    }
}


@media (max-width: 1024px) {
    h2.hero-purple, h2.hero-yellow {
        font-size: 35px;
    }

    div.landing p {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
    }

    .homecats-p-yellow {
        display: none;
    }
}

@media (max-width: 768px) {
    .header .searchwrapper div.search {
        width: 280px;
    }

    div.cartoverlay a.button {
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    div.landing h1 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    div.landing p {
        font-size: 15px;
        line-height: 17px;
    }

    div.footer .button {
        max-width: 75%;
    }

    div.footer .three p {
        font-size: 12px;
    }

    div.footer .two a {
        font-size: 14px;
    }

    .homecats {
        grid-template-columns: 100%;
    }


    .homecats-p-yellow {
        display: block;
    }

    .homecats-cta-box {
        position: inherit;
        top: 10px;
        left: 0px;
        width: 50%;
        margin: auto;
        text-align: center;
    }

    h3.red {
        color: var(--dd-red);
        font-weight: 900;
        margin-bottom: 0;
        font-size: 18px;
    }

    h3.and-white {
        font-size: 18px;
    }

    .homecats-p-yellow {
        color: #f9f39d;
        margin-bottom: 5px;
    }

    .homecats-bottom-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        margin: 0 10px 50px 10px;
    }

    .homecats-top-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        margin: 50px 0;
    }

    .bigcats-box img {
        width: 100%;
        height: unset;
    }

    .homecats {
        display: block;
    }

    img.mobile-on {
        display: block;
        width: 100%;
    }

    img.desktop-on {
        display: none;
    }

    .homecats-top-grid .homecats-box:first-child {
        background-color: #560000;
    }

    .homecats-top-grid .homecats-box:last-child {
        background-color: #4c0c3a;
    }

    .homecats-top-grid .homecats-box:first-child {
        background-color: #560000;
    }

    .homecats-top-grid .homecats-box:last-child {
        background-color: #4c0c3a;
    }

    .customcalloutcontent h3 {
        font-size: 24px;
        text-align: center;
    }

    .customcalloutcontent p {
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;
    }

    .text-hover {
        opacity: 0;
    }
}

@media (max-width: 667px) {
    body {
        padding-top: 76px;
    }

    div.page-content {
        padding: 0px 20px;
    }

    div.header {
        height: 70px;
    }



    .header .toprow {
        margin-left: 65px;
        position: relative;
        z-index: 500;
    }

    .header .logo {
        margin-top: 20px;
        padding: 0px;
        width: 50px;
        height: 30px;
        display: block;
        background-image: url('/images/new/D_red.svg');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
    }

        .header .logo img {
            display: none;
        }

    .header .navigation {
        background-image: url('/images/new/mobile.png');
        background-position: left 50%;
        background-repeat: no-repeat;
        display: block;
        height: 40px;
        width: 100%;
        position: absolute;
        top: 15px;
        left: 10px;
        z-index: 400;
        cursor: pointer;
    }

        .header .navigation ul {
            display: none;
            margin: 0px;
            padding: 0px;
            background-color: var(--dd-red);
            width: 100%;
            left: -10px;
            top: 55px;
            position: relative;
        }


        .header .navigation.open ul {
            display: block;
        }

            .header .navigation.open ul li ul {
                display: none;
            }

        .header .navigation li {
            display: block;
            color: #ffffff;
            border-bottom: 1px solid #ffffff;
            text-align: center;
            margin-right: 0px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .header .navigation li.status {
                display: block;
            }

            .header .navigation li a {
                display: block;
                color: #ffffff;
                font-weight: normal;
            }

            .header .navigation li a {
                cursor: var(--dd-black);
            }

    .header .rightside {
        float: right;
        width: auto;
        margin-right: 10px;
    }

        .header .rightside .links div {
            margin-right: 8px;
        }

        .header .rightside .links img {
            width: 30px;
            height: 30px
        }

    .header .cart span {
        font-size: 8px;
        top: 1px;
        right: 1px;
        display: block;
        height: 12px;
        width: 12px;
        text-align: center;
    }

    .header .links .login .logout img {
        height: 26px;
        width: 26px;
    }

    .header .links .login .logout {
        margin-left: 10px;
    }

    .header .rightside .links .search {
        display: none;
        cursor: pointer;
    }

    .header .select {
        top: unset;
    }

    .header .rightside select {
        width: 50px;
    }

    .header .rightside div.searchwrapper {
        float: none;
        margin: 0px;
        display: none;
        background-color: var(--dd-red);
        position: absolute;
        width: 100vw;
        top: 70px;
        left: -65px;
    }

        .header .rightside div.searchwrapper .search {
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
            width: auto;
        }

        .header .rightside div.searchwrapper.open {
            display: block;
        }

    div.landing .large {
        display: none;
    }

    div.landing .mobile {
        display: block;
    }

    div.landing .content {
        position: unset;
        width: unset;
        height: unset;
        transform: unset;
        left: unset;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
        padding-bottom: 20px;
    }

    div.landing h1 {
        font-size: 24px;
        line-height: 30px;
        margin-top: 20px;
        text-align: center;
    }

    div.landing p {
        font-size: 16px;
        line-height: 19px;
    }

    div.landing .content .button {
        margin-bottom: 0px;
    }

    .homecats .wrapper {
        display: flex;
        flex-direction: column;
    }

        .homecats .wrapper .copy {
            order: 2;
            width: 100%;
            text-align: center;
        }

        .homecats .wrapper .image {
            order: 1;
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }

    .cat-breadcrumb {
        font-size: 12px;
    }

        .cat-breadcrumb .fa-arrow-right {
            font-size: 12px;
            vertical-align: unset;
            margin-top: 9px;
            line-height: 16px;
        }

    .catheader h2 {
        padding-left: 30px;
        padding-right: 30px;
    }

    div.category .product {
        margin-bottom: 15px;
    }

        div.category .product:hover {
            top: 0px;
        }

        div.category .product .hover {
            -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
            -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
            box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
        }

    div.category .scroller .product {
        width: 100%;
        margin: 0px;
    }

    div.category .arrow {
        width: 45px;
        height: 45px;
        z-index: 200;
        background-color: #ffffff;
        border: 1px solid var(--dd-dark-gray);
        border-radius: 45px;
        line-height: 45px;
        font-size: 30px;
    }

        div.category .arrow.left {
            left: 10px;
        }

        div.category .arrow.right {
            right: 10px;
        }

    .catheader {
        margin-bottom: 75px;
    }

        .catheader .viewall {
            padding: 0px;
            top: 24px;
            right: auto;
            position: relative;
        }

    .productcontent {
        text-align: center;
    }

        .productcontent h1 {
            text-align: center;
            font-size: 24px;
            line-height: 32px;
        }

        .productcontent .sku {
            margin-bottom: 15px;
        }

        .productcontent .description {
            text-align: left;
        }

    .cartoverlay .close.top {
        position: absolute;
        top: 2px;
        right: 5px;
    }

    div.breadcrumb {
        min-height: 50px;
    }

        div.breadcrumb ol {
            margin-bottom: 5px;
        }

            div.breadcrumb ol li {
                margin: 0px;
                width: 55px;
                padding-top: 30px;
                font-size: 0px;
            }

                div.breadcrumb ol li.check::after {
                    font-size: 18px;
                    line-height: 25px;
                }

                div.breadcrumb ol li:nth-child(n+2)::before {
                    left: 15px;
                    width: 21px;
                    top: 15px;
                }

                div.breadcrumb ol li::after {
                    width: 25px;
                    height: 25px;
                    line-height: 25px;
                    font-size: 15px;
                }

    div.cartbuttons a {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 125px;
        clear: both;
    }

    table.cartTable div.iteminfo span {
        line-height: 18px;
    }

    tr.cartFooter td p {
        display: block;
        line-height: 35px;
    }

    div.footer .button {
        max-width: 100%;
        margin-right: 0px;
    }

    tr.cartFooter td p {
        margin-right: 5px;
    }

    div.product div.productsOrderArea input,
    div.product div.productsOrderArea select,
    div.product div.productsOrderArea button {
        width: 120px !important;
        max-width: 120px;
        font-size: 10px;
    }

    div.product .quantities {
        text-align: left;
        display: table;
    }

    div.quantities .six.columns {
        float: none;
        display: table-row;
    }

    div.product .quantities span {
        padding-right: 15px;
        display: table-cell;
        padding-bottom: 15px;
    }

    div.product .quantities input {
        float: none;
    }

    table.cartTable,
    table.cartTable div.iteminfo a {
        font-size: 14px;
        line-height: 18px;
    }

        table.cartTable tr.cartItem td {
            padding-left: 2px;
            padding-right: 2px;
        }

    table.cartTable {
        width: 280px;
    }

        table.cartTable th {
            padding: 2px;
        }

        table.cartTable td input {
            width: 50px;
            text-align: center;
        }

        table.cartTable td a {
            font-size: 12px;
        }

    div.cartWrapper table.cartTable td,
    div.cartWrapper table.cartTable th {
        display: inline-block;
        float: left;
        height: auto;
        width: auto;
        line-height: 30px;
    }

    div.cartWrapper table.cartTable tr.cartHeader {
        display: none;
    }

    div.cartWrapper table.cartTable tr.cartItem {
        position: relative;
        border-top: 1px solid #FF3008;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
    }

        div.cartWrapper table.cartTable tr.cartItem::after {
            content: '';
            clear: both;
            display: block;
        }

    div.cartWrapper table.cartTable td:first-child {
        width: 20%;
        padding-left: 0px;
        padding-right: 0px;
    }

    table.cartTable td span {
        position: relative;
    }

    table.cartTable td:nth-child(3) span::after {
        content: '(unit price)';
        position: absolute;
        bottom: 0px;
        font-size: 9px;
        top: 5px;
        left: 50%;
        transform: translate(-50%,0);
        white-space: nowrap;
    }

    table.cartTable td:nth-child(5) span::after {
        content: '(total)';
        position: absolute;
        bottom: 0px;
        font-size: 9px;
        top: 20px;
        left: 50%;
        transform: translate(-50%,0);
        white-space: nowrap;
    }

    div.cartWrapper table.cartTable td.five {
        width: 70%;
        padding-left: 3%;
    }

    div.cartWrapper table.cartTable td.one {
        width: 20%;
        margin-right: 3%;
        padding: 0px;
    }

    div.cartWrapper table.cartTable td:last-child {
        margin-right: 0;
    }

    table.cartTable a.button {
        position: absolute;
        top: 50%;
        right: 10px;
        display: block;
        height: 20px;
        width: 20px;
        border-radius: 20px;
        background-color: #bfbfbf;
        color: #bfbfbf;
        font-size: 0px;
        padding: 0px;
    }

        table.cartTable a.button:after {
            content: 'X';
            color: #ffffff;
            height: 20px;
            width: 20px;
            display: block;
            font-size: 14px;
            font-weight: bold;
            top: 9px;
            position: absolute;
            transform: translate(0,-50%);
        }

    div.cartWrapper table.cartTable th.six {
        width: 100px;
    }

    .checkout .addresses div.five.columns,
    .express-addr .address div.six.columns {
        width: 50%;
    }

    .checkout .addresses .address {
        padding-left: 6px;
        padding-right: 6px;
    }

    .checkout .addresses h2 {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 15px;
    }

    .checkout .cartTable .cartItem td {
        line-height: 20px;
    }

    div.cartbuttons {
        text-align: center;
    }

    table.orders .orderrow > td,
    table.line-items td,
    table.line-items th {
        display: block;
        float: left;
        width: 47%;
        padding: 1.5% !important;
    }

        table.line-items th:nth-child(2n+1),
        table.line-items td:nth-child(2n+1) {
            clear: left;
        }

        table.orders .orderrow > td:last-child {
            float: right;
        }

    table.orders tr.cartHeader {
        font-size: 0px;
        position: relative;
        display: block;
        width: 100%;
        height: 24px;
        background-color: var(--dd-med-gray);
    }

    table.orders .cartHeader:after {
        content: 'Orders';
        font-weight: bold;
        position: absolute;
        left: 50%;
        font-size: 18px;
        top: 0px;
        transform: translate(-50%,0);
    }

    table.orders a.view-more,
    table.orders a.reorder-btn {
        display: inline-block;
    }

    table.orders tr.orderrow,
    table.line-items tr {
        clear: both;
        display: block;
        width: 100%;
        border-top: 2px solid var(--dd-med-gray);
    }

    table.orders div.o-details,
    table.orders div.reorder {
        width: 100%;
        max-width: unset;
        height: 100%;
        max-height: unset;
    }

        table.orders div.o-details .four.columns {
            border-bottom: 1px solid var(--dd-med-gray);
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

    div.footer {
        text-align: center;
    }

        div.footer .four.columns {
            margin-left: 5%;
            margin-right: 5%;
            width: 90%;
            text-align: left;
            margin-bottom: 25px;
        }

        div.footer .two.columns {
            margin-left: 5%;
            width: 45%;
            text-align: left;
        }

    div.cartoverlay,
    div.cobrand {
        width: 75%;
    }

    div .cartbuttons div.gift {
        text-align: center;
    }

    .addr-book input[type='checkbox'] {
        height: 18px;
    }
}
