.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

    .slick-list:focus {
        outline: none
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block
}

    .slick-track:before, .slick-track:after {
        content: "";
        display: table
    }

    .slick-track:after {
        clear: both
    }

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir="rtl"] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url(/assets/ajax-loader-e7b44c86b050fca766a96ddac2d0932af0126da6f2305280342d909168dcce6b.gif) center center no-repeat
}

@font-face {
    font-family: "slick";
    src: url(/fonts/slick.eot);
    src: url(/fonts/slick.eot?#iefix) format("embedded-opentype"),url(/assets/slick-26726bac4060abb1226e6ceebc1336e84930fe7a7af1b3895a109d067f5b5dcc.woff) format("woff"),url(/assets/slick-37bc99cfdbbc046193a26396787374d00e7b10d3a758a36045c07bd8886360d2.ttf) format("truetype"),url(/fonts/slick.svg#slick) format("svg");
    font-weight: normal;
    font-style: normal
}

.slick-prev, .slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none
}

    .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
        outline: none;
        background: transparent;
        color: transparent
    }

        .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
            opacity: 1
        }

    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
        opacity: 0.25
    }

    .slick-prev:before, .slick-next:before {
        font-family: "slick";
        font-size: 20px;
        line-height: 1;
        color: white;
        opacity: 0.75;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

.slick-prev {
    left: -25px
}

[dir="rtl"] .slick-prev {
    left: auto;
    right: -25px
}

.slick-prev:before {
    content: "←"
}

[dir="rtl"] .slick-prev:before {
    content: "→"
}

.slick-next {
    right: -25px
}

[dir="rtl"] .slick-next {
    left: -25px;
    right: auto
}

.slick-next:before {
    content: "→"
}

[dir="rtl"] .slick-next:before {
    content: "←"
}

.slick-dotted.slick-slider {
    margin-bottom: 20px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer
    }

        .slick-dots li button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: none;
            line-height: 0px;
            font-size: 0px;
            color: transparent;
            padding: 5px;
            cursor: pointer
        }

            .slick-dots li button:hover, .slick-dots li button:focus {
                outline: none
            }

                .slick-dots li button:hover:before, .slick-dots li button:focus:before {
                    opacity: 1
                }

            .slick-dots li button:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "•";
                width: 20px;
                height: 20px;
                font-family: "slick";
                font-size: 6px;
                line-height: 20px;
                text-align: center;
                color: black;
                opacity: 0.25;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale
            }

        .slick-dots li.slick-active button:before {
            color: black;
            opacity: 0.75
        }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: "";
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}
 

@font-face {
    font-family: "apercu-light";
    src: url(/fonts/bb/apercu-light.eot);
    src: url(/fonts/bb/apercu-light.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/apercu-light.woff) format("woff"),url(/fonts/bb/apercu.ttf) format("truetype"),url(/fonts/bb/apercu-light.svg#aperculight) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "apercu-regular";
    src: url(/fonts/bb/apercu-regular.eot);
    src: url(/fonts/bb/apercu-regular.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/apercu-regular.woff) format("woff"),url(/fonts/bb/apercu-regular.ttf) format("truetype"),url(/fonts/bb/apercu-regular.svg#apercuregular) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "apercu-medium";
    src: url(/fonts/bb/apercu-medium.eot);
    src: url(/fonts/bb/apercu-medium.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/apercu-medium.woff) format("woff"),url(/fonts/bb/apercu-medium.ttf) format("truetype"),url(/fonts/bb/apercu-medium.svg#apercumedium) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "apercu-bold";
    src: url(/fonts/bb/apercu-bold.eot);
    src: url(/fonts/bb/apercu-bold.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/apercu-bold.woff) format("woff"),url(/fonts/bb/apercu-bold.ttf) format("truetype"),url(/fonts/bb/apercu-bold.svg#apercubold) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "coverly-regular";
    src: url(/fonts/bb/coverly-regular.eot);
    src: url(/fonts/bb/coverly-regular.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/coverly-regular.woff) format("woff"),url(/fonts/bb/coverly-regular.ttf) format("truetype"),url(/fonts/bb/coverly-regular.svg#coverlyregular) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "veneer";
    src: url(/fonts/bb/veneer.eot);
    src: url(/fonts/bb/veneer.eot?#iefix) format("embedded-opentype"),url(/fonts/bb/veneer.woff) format("woff"),url(/fonts/bb/veneer.ttf) format("truetype"),url(/fonts/bb/veneer.svg#veneer) format("svg");
    font-weight: normal;
    font-style: normal
}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    vertical-align: middle
}

    [class^="icon-"]:before, [class*=" icon-"]:before {
        display: block;
        font-family: "icomoon" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

.icon-x:before {
    content: "\e001"
}

.icon-caret-up:before {
    content: "\e002"
}

.icon-caret-right:before {
    content: "\e003"
}

.icon-caret-down:before {
    content: "\e004"
}

.icon-caret-left:before {
    content: "\e005"
}

.icon-info:before {
    content: "\e006"
}

.icon-lock:before {
    content: "\e008"
}

.icon-chat:before {
    content: "\e009"
}

.icon-pencil:before {
    content: "\e00a"
}

.icon-check:before {
    content: "\e00b"
}

.icon-check-doodle:before {
    content: "\e00c"
}

.icon-expand:before {
    content: "\e00d"
}

.icon-compress:before {
    content: "\e00e"
}

.icon-flip:before {
    content: "\e007"
}

.icon-instagram:before {
    content: "\e00f"
}

.icon-pinterest:before {
    content: "\e010"
}

.icon-youtube:before {
    content: "\e011"
}

.icon-twitter:before {
    content: "\e012"
}

.icon-facebook:before {
    content: "\e013"
}

.icon-envelope:before {
    content: "\e014"
}

.icon-chat-fill:before {
    content: "\e015"
}

.icon-link:before {
    content: "\e016"
}

.icon-nav:before {
    content: "\e017"
}

.icon-add:before {
    content: "\e000"
}

.icon-arrow-l:before {
    content: "\e017"
}

.icon-arrow-r:before {
    content: "\e018"
}

.icon-close:before {
    content: "\e019"
}

.icon-nav:before {
    content: "\e01a"
}

.icon-facebook-square:before {
    content: "\e01c"
}

.icon-instagram-stroke:before {
    content: "\e01d"
}

.icon-add-thin:before {
    content: "\e01b"
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html.barkbox-app .wrapper {
    width: 964px
}

html.barkbox-app h1.tighten {
    line-height: 40px
}

html.barkbox-app button {
    font-size: 17px;
    font-family: "apercu-bold", sans-serif;
    border-radius: 2px
}

    html.barkbox-app button.titlecase {
        text-transform: capitalize
    }

html, body {
    width: 100%;
    background-color: #FFFFFF;
    color: #221E1F;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent
}

body {
    overflow-y: scroll
}

h1 {
    font-family: sans-serif;
    font-size: 36px;
    line-height: 1.4em
}

h2 {
    font-family: sans-serif;
    font-size: 22px;
    line-height: 1.4em
}

h3 {
    font-family: "apercu-regular", sans-serif;
    font-size: 18px;
    line-height: 1.4em
}

h4 {
    font-family: "apercu-regular", sans-serif;
    font-size: 15px;
    line-height: 1.4em
}

h5 {
    font-family: "apercu-regular", sans-serif;
    font-size: 13px;
    line-height: 1.4em
}

h6 {
    font-family: "apercu-regular", sans-serif;
    font-size: 10px;
    line-height: 1.4em
}

p {
    font-family: "apercu-regular", sans-serif;
    font-size: 17px;
    line-height: 1.4em
}

    p.notice {
        color: #999999;
        font-size: 14px
    }

        p.notice.limit-width {
            max-width: 300px
        }

        p.notice a {
            color: #999999;
            font-size: 14px;
            text-decoration: underline;
            vertical-align: top
        }

a {
    font-family: "apercu-regular", sans-serif;
    font-size: 17px;
    line-height: 1.4em;
    text-decoration: none;
    color: #42B0E2;
    cursor: pointer;
    vertical-align: middle
}

    a:hover {
        color: #2C9CD3
    }

img {
    vertical-align: middle
}

    img.full, video.full {
        width: 100%
    }

form {
    float: left;
    width: 100%;
    *zoom: 1
}

    form:before, form:after {
        content: " ";
        display: table
    }

    form:after {
        clear: both
    }

    form.grey-fields input, form.grey-fields textarea, form.grey-fields select {
        background-color: #F0F0F0
    }

fieldset {
    position: relative;
    float: left;
    *zoom: 1
}

    fieldset:before, fieldset:after {
        content: " ";
        display: table
    }

    fieldset:after {
        clear: both
    }

    fieldset.radio {
        padding: 10px;
        border: 1px solid #D8D8D8;
        background-color: #FFFFFF;
        cursor: pointer
    }

        fieldset.radio.radio-top {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px
        }

        fieldset.radio.radio-bottom {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px
        }

        fieldset.radio.single-border {
            border-bottom: none
        }

        fieldset.radio p {
            line-height: 28px
        }

    fieldset.full {
        width: 100%
    }

    fieldset.half {
        width: 50%
    }

    fieldset.two-thirds {
        width: 66.667%
    }

    fieldset.one-third {
        width: 33.333%
    }

    fieldset.three-fourths {
        width: 75%
    }

    fieldset.one-fourth {
        width: 25%
    }

label:not([for*="checkbox-"]):not([for*="radio-"]) {
    display: block;
    margin-bottom: 5px;
    font-family: "apercu-regular", sans-serif;
    font-size: 13px;
    line-height: 1.4em;
    text-transform: uppercase;
    /*color: #999999*/
}

    label:not([for*="checkbox-"]):not([for*="radio-"]) a {
        font-size: 13px
    }

label[for*="checkbox-"], label[for*="radio-"] {
    cursor: pointer
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
    width: 100%;
    height: 50px;
    padding: 10px;
    border: 1px solid #D8D8D8;
    font-family: "apercu-regular", sans-serif;
    font-size: 17px;
    line-height: 1.4em;
    outline: none;
    -webkit-appearance: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus {
        border: 1px solid #42B0E2
    }

    input[type="text"].with-icon, input[type="email"].with-icon, input[type="password"].with-icon, input[type="tel"].with-icon {
        padding-left: 30px
    }

input[type="checkbox"] {
    position: absolute;
    left: -999em
}

    input[type="checkbox"] + p {
        position: relative;
        overflow: hidden
    }

        input[type="checkbox"] + p::before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 10px;
            background-color: #FFFFFF;
            border: 1px solid #D8D8D8;
            border-radius: 2px
        }

    input[type="checkbox"]:checked + p::before {
        background-color: #A4CF5F;
        border: 1px solid #A4CF5F
    }

    input[type="checkbox"]:checked + p::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 4px;
        top: 8px;
        left: 2px;
        border: 2px solid #FFFFFF;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

input[type="radio"] {
    width: 15px;
    display: inline;
}

    input[type="radio"] + p:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        border-radius: 12px;
        border: 3px solid #FFFFFF;
        box-shadow: 0 0 0 2px #D8D8D8
    }

    input[type="radio"]:checked + p:before {
        background-color: #FFFFFF;
        border: 3px solid #A4CF5F;
        box-shadow: 0 0 0 2px #A4CF5F
    }

textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #D8D8D8;
    font-family: "apercu-regular", sans-serif;
    font-size: 17px;
    line-height: 1.4em;
    resize: none;
    outline: none;
    -webkit-appearance: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

    textarea:focus {
        border: 1px solid #42B0E2
    }

select {
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    font-family: "apercu-regular", sans-serif;
    font-size: 17px;
    line-height: 50px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

button, input[type="submit"] {
    height: 50px;
    padding: 0 20px;
    border: none;
    font-family: "apercu-medium", sans-serif;
    font-size: 15px;
    line-height: 50px;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

    button.full, input[type="submit"].full {
        width: 100%
    }

    button.dark-grey, input[type="submit"].dark-grey {
        background-color: #999999
    }

        button.dark-grey:hover, input[type="submit"].dark-grey:hover {
            background-color: #666666
        }

    button.green, input[type="submit"].green {
        background-color: #A4CF5F
    }

        button.green:hover, input[type="submit"].green:hover {
            background-color: #7DAA43
        }

    button.green-outline, input[type="submit"].green-outline {
        border: 1px solid #A4CF5F;
        color: #A4CF5F;
        background-color: #FFFFFF
    }

        button.green-outline:hover, input[type="submit"].green-outline:hover {
            color: #FFFFFF;
            background-color: #A4CF5F
        }

    button.blue, input[type="submit"].blue {
        background-color: #42B0E2
    }

        button.blue:hover, input[type="submit"].blue:hover {
            background-color: #2C9CD3
        }

    button.white, input[type="submit"].white {
        color: #42B0E2;
        background-color: #FFFFFF
    }

        button.white:hover, input[type="submit"].white:hover {
            color: #2C9CD3;
            opacity: .8
        }

    button.blue-outline, input[type="submit"].blue-outline {
        border: 1px solid #42B0E2;
        color: #42B0E2;
        background-color: #FFFFFF
    }

        button.blue-outline:hover, input[type="submit"].blue-outline:hover {
            color: #FFFFFF;
            background-color: #42B0E2
        }

    button.black, input[type="submit"].black {
        background-color: #221E1F
    }

        button.black:hover, input[type="submit"].black:hover {
            background-color: #333333
        }

    button.red, input[type="submit"].red {
        background-color: #B2320F
    }

        button.red:hover, input[type="submit"].red:hover {
            background-color: #83250B
        }

    button.red-outline, input[type="submit"].red-outline {
        background-color: #FFFFFF;
        color: #B2320F;
        border: 1px solid #B2320F
    }

        button.red-outline:hover, input[type="submit"].red-outline:hover {
            border-color: #83250B;
            color: #83250B
        }

    button.white-outline, input[type="submit"].white-outline {
        background-color: transparent;
        color: #FFFFFF;
        border: 1px solid #FFFFFF
    }

        button.white-outline:hover, input[type="submit"].white-outline:hover {
            opacity: .8
        }

    button.facebook, input[type="submit"].facebook {
        background-color: #4565A1
    }

        button.facebook:hover, input[type="submit"].facebook:hover {
            background-color: #364F7D
        }

    button.facebook-outline, input[type="submit"].facebook-outline {
        background-color: #FFFFFF;
        color: #4565A1;
        border: 1px solid #4565A1
    }

        button.facebook-outline:hover, input[type="submit"].facebook-outline:hover {
            border-color: #364F7D;
            color: #FFFFFF;
            background-color: #364F7D
        }

            button.facebook-outline:hover i, input[type="submit"].facebook-outline:hover i {
                color: #FFFFFF
            }

    button.twitter, input[type="submit"].twitter {
        background-color: #00ACEB
    }

        button.twitter:hover, input[type="submit"].twitter:hover {
            background-color: #0087B8
        }

    button.twitter-outline, input[type="submit"].twitter-outline {
        border: 1px solid #00ACEB;
        color: #00ACEB;
        background-color: #FFFFFF
    }

        button.twitter-outline:hover, input[type="submit"].twitter-outline:hover {
            color: #FFFFFF;
            background-color: #00ACEB
        }

            button.twitter-outline:hover i, input[type="submit"].twitter-outline:hover i {
                color: #FFFFFF
            }

    button.sms, input[type="submit"].sms {
        background-color: #FFFFFF;
        border: 1px solid #A4CF5F;
        color: #A4CF5F
    }

        button.sms:hover, input[type="submit"].sms:hover {
            background-color: #A4CF5F;
            color: #FFFFFF
        }

    button.envelope, input[type="submit"].envelope {
        background-color: #42B0E2;
        color: #FFFFFF
    }

    button.disabled, input[type="submit"].disabled {
        background-color: #999999;
        background-size: 30px 30px;
        cursor: default;
        color: #FFFFFF;
        opacity: 1;
        background-image: -webkit-linear-gradient(-405deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
        animation: animate-stripes 3s linear infinite
    }

        button.disabled:hover, input[type="submit"].disabled:hover {
            background-color: #999999
        }

    button img, input[type="submit"] img {
        width: 25%;
        max-width: 32px;
        margin-right: 15px
    }

.eyebrows {
    font-family: "apercu-bold", sans-serif;
    font-size: 14px;
    color: #42B0E2;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 14px
}

.title {
    font-family: "apercu-regular", sans-serif;
    font-size: 18px;
    color: #333333;
    letter-spacing: 0;
    line-height: 18px
}

.hed {
    font-family: sans-serif;
    font-size: 36px;
    color: #333333;
    letter-spacing: -0.5px;
    line-height: 36px
}

.sub-hed {
    font-family: "apercu-medium", sans-serif;
    font-size: 22px;
    color: #333333;
    letter-spacing: 0;
    line-height: 28px
}

    .sub-hed.light {
        font-family: "apercu-light", sans-serif
    }

.dek {
    font-family: Apercu-Light;
    font-size: 22px;
    color: #333333;
    letter-spacing: 0;
    line-height: 28px
}

.legal {
    font-family: "apercu-regular", sans-serif;
    font-size: 13px;
    color: #999999;
    letter-spacing: 0;
    line-height: 22px
}

a.legal {
    font-size: 13px;
    color: #999999;
    text-decoration: underline
}

    a.legal:hover {
        text-decoration: none
    }

#main-wrapper {
    background-color: #FFFFFF
}

#main-container {
    width: 100%;
    margin-top: 60px
}

#preload-images {
    display: none
}

.wrapper {
    position: relative;
    width: 940px;
    height: 100%;
    margin: 0 auto;
    *zoom: 1
}

    .wrapper:before, .wrapper:after {
        content: " ";
        display: table
    }

    .wrapper:after {
        clear: both
    }

.large-wrapper {
    position: relative;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    *zoom: 1
}

    .large-wrapper:before, .large-wrapper:after {
        content: " ";
        display: table
    }

    .large-wrapper:after {
        clear: both
    }

.col {
    position: relative;
    float: left;
    *zoom: 1
}

    .col:before, .col:after {
        content: " ";
        display: table
    }

    .col:after {
        clear: both
    }

    .col.swap {
        float: right
    }

    .col.full {
        width: 100%
    }

    .col.half {
        width: 50%
    }

    .col.two-thirds {
        width: 66.667%
    }

    .col.one-third {
        width: 33.333%
    }

    .col.three-fourths {
        width: 75%
    }

    .col.one-fourth {
        width: 25%
    }

    .col.one-fifth {
        width: 20%
    }

    .col.two-fifths {
        width: 40%
    }

    .col.three-fifths {
        width: 60%
    }

.group {
    position: relative;
    width: 100%;
    *zoom: 1
}

    .group:before, .group:after {
        content: " ";
        display: table
    }

    .group:after {
        clear: both
    }

    .group.rounded {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

    .group.white {
        background-color: #FFFFFF
    }

    .group.dashed {
        border: 1px dashed #DFDFDF
    }

    .group .group-header {
        padding: 15px 25px;
        *zoom: 1
    }

        .group .group-header:before, .group .group-header:after {
            content: " ";
            display: table
        }

        .group .group-header:after {
            clear: both
        }

        .group .group-header.border {
            border-bottom: 1px solid #D8D8D8;
            color: #333333
        }

        .group .group-header.blue {
            background-color: #42B0E2;
            text-align: center;
            color: #FFFFFF
        }

    .group .group-content {
        padding: 25px;
        color: #333333;
        *zoom: 1
    }

        .group .group-content:before, .group .group-content:after {
            content: " ";
            display: table
        }

        .group .group-content:after {
            clear: both
        }

        .group .group-content + .group-content {
            padding-top: 0
        }

.tooltip-wrapper {
    float: left;
    width: 100%
}

    .tooltip-wrapper *, .tooltip-wrapper label:not([for*="checkbox-"]):not([for*="radio-"]) {
        display: inline-block
    }

    .tooltip-wrapper .icon-info {
        position: relative;
        cursor: pointer
    }

        .no-touch .tooltip-wrapper .icon-info:hover .tooltip, .tooltip-wrapper .icon-info.touch .tooltip {
            top: 25px;
            left: auto
        }

        .tooltip-wrapper .icon-info .tooltip {
            position: absolute;
            padding: 15px;
            background-color: #FFFFFF;
            text-align: left;
            z-index: 10;
            top: -9999px;
            left: -9999px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 0 2px 0 rgba(0,0,0,0.25)
        }

            .tooltip-wrapper .icon-info .tooltip:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                top: -10px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #333333
            }

            .tooltip-wrapper .icon-info .tooltip:after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                top: -10px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #FFFFFF
            }

.icon-check-doodle {
    margin-right: 24px;
    font-size: 28px;
    color: #A4CF5F
}

.solid-divider {
    border-top: 1px solid #DFDFDF
}

.dashed-divider {
    border-top: 1px dashed #DFDFDF
}

.top-divider {
    margin-top: 30px
}

.right-text {
    text-align: right
}

.center-text {
    text-align: center
}

.uppercase {
    text-transform: uppercase
}

.emphasize {
    font-family: sans-serif
}

.bold {
    font-family: "apercu-bold", sans-serif
}

.italicize {
    font-style: italic
}

.coverly {
    font-family: "coverly-regular", sans-serif
}

    .coverly a {
        font-family: "coverly-regular", sans-serif
    }

.truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.pull-center {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.unfloat {
    float: none
}

.top {
    margin-top: 30px
}

.top-mini {
    margin-top: 15px
}

.top-medium {
    margin-top: 20px
}

.top-extra {
    margin-top: 60px
}

.left {
    padding-right: 15px
}

.left-mini {
    padding-right: 7.5px
}

.middle {
    padding-left: 15px;
    padding-right: 15px
}

.middle-mini {
    padding-left: 7.5px;
    padding-right: 7.5px
}

.right {
    padding-left: 15px
}

.right-mini {
    padding-left: 7.5px
}

.grey-background {
    background-color: #F0F0F0
}

.blue-background {
    background-color: #42B0E2
}

.no-overflow {
    overflow: hidden
}

.white-text {
    color: #FFFFFF
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 50
}

    .overlay .modal {
        position: absolute;
        width: 40%;
        top: 25%;
        left: 50%;
        margin-left: -20%;
        box-shadow: 0 0 2px 0 rgba(0,0,0,0.25)
    }

.loading-image {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: fade-in 1s;
    -moz-animation: fade-in 1s;
    -ms-animation: fade-in 1s;
    -o-animation: fade-in 1s;
    animation: fade-in 1s
}

.loading-spinner {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: -webkit-linear-gradient(left, #cecece 10%, rgba(255,255,255,0) 42%);
    background: linear-gradient(to right, #cecece 10%, rgba(255,255,255,0) 42%);
    -webkit-animation: rotate-clockwise 1.4s infinite linear;
    -moz-animation: rotate-clockwise 1.4s infinite linear;
    animation: rotate-clockwise 1.4s infinite linear
}

    .loading-spinner:before {
        width: 50%;
        height: 50%;
        background: #cecece;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: ''
    }

    .loading-spinner:after {
        background: #F0F0F0;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

@-webkit-keyframes animate-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 60px 0
    }
}

@-moz-keyframes animate-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 60px 0
    }
}

@-o-keyframes animate-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 60px 0
    }
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 60px 0
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-o-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.mobile-inline, .mobile-block, .mobile-inline-block {
    display: none
}

.tablet-inline, .tablet-block, .tablet-inline-block {
    display: none
}

.desktop-inline, .default-inline {
    display: inline
}

.desktop-block, .default-block {
    display: block
}

.desktop-inline-block, .default-inline-block {
    display: inline-block
}

@media (max-width: 969px) {
    html.barkbox-app #main-container {
        margin-top: 60px
    }

    html.barkbox-app .wrapper {
        width: 100%;
        padding: 0 15px
    }

    html.barkbox-app #our-pack button {
        padding: 0 20px
    }

    .wrapper, .large-wrapper {
        width: 100%;
        padding: 0 15px
    }

    .desktop-inline, .desktop-block, .desktop-inline-block {
        display: none
    }

    .tablet-inline {
        display: inline
    }

    .tablet-block {
        display: block
    }

    .tablet-inline-block {
        display: inline-block
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 28px
    }

    h2 {
        font-size: 20px
    }

    p, a, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
        font-size: 15px
    }

    input[type="checkbox"]:checked + p::after {
        top: 6px
    }

    .hed {
        font-size: 30px;
        line-height: 32px
    }

    .zopim {
        display: none !important
    }

    .barkbox-app .top {
        margin-top: 15px
    }

    .default-inline, .default-block, .default-inline-block {
        display: none
    }

    .tablet-inline, .tablet-block, .tablet-inline-block {
        display: none
    }

    .mobile-inline {
        display: inline
    }

    .mobile-block {
        display: block
    }

    .mobile-inline-block {
        display: inline-block
    }
}

.alert-bar.success {
    background-color: #E5F0D6;
    color: #61822E
}

.alert-bar.warning {
    background-color: #FCF9E6;
    color: #93895C
}

.alert-bar.error {
    background-color: #F0D6CF;
    color: #873C30
}

.alert-bar .alert {
    margin-right: 50px;
    padding: 15px 0
}

.alert-bar p, .alert-bar a {
    font-size: 15px;
    line-height: 20px
}

.alert-bar .icon-x {
    position: absolute;
    top: 15px;
    right: 0;
    cursor: pointer
}

input[type="text"].error, input[type="email"].error, input[type="password"].error, input[type="tel"].error, textarea.error, select.error {
    border-color: #B2320F
}

.inline-error p, .inline-error a {
    font-size: 13px;
    text-align: left
}

.inline-error p {
    margin-top: 5px;
    color: #B2320F
}

.browser-alert-bar {
    display: none
}

.lte-ie9 #main-container {
    margin-top: 0px
}

.lte-ie9 .browser-alert-bar {
    display: block;
    margin-top: 50px;
    margin-right: 0px
}

@media (max-width: 969px) {
    .alert-bar .icon-x {
        right: 15px
    }
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    box-shadow: 0 0 1px #999999;
    background-color: #FFFFFF
}

.override-fixed #header {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto
}

#header .mobile {
    display: none
}

#header .step-progress-bar {
    position: relative;
    background-color: #F0F0F0;
    height: 4px;
    width: 100%
}

    #header .step-progress-bar .step-progress {
        position: absolute;
        background-color: #42B0E2;
        height: 100%
    }

        #header .step-progress-bar .step-progress.super-chewer {
            background-color: #1D4F91
        }

#header .step-counter {
    font-size: 14px
}

#header .wrapper {
    width: 964px;
    height: 60px
}

#header .header-group {
    min-height: 1px;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

#header .header-group  img{
   padding-top:5px;
   padding-bottom:5px;
   max-height:60px;
}


    #header .header-group button {
        height: 40px;
        text-transform: capitalize;
        font-size: 14px;
        letter-spacing: 0;
        line-height: 40px;
        font-family: "apercu-bold", sans-serif;
        border-radius: 2px
    }

#header a {
    font-size: 14px;
    color: #333333;
    padding: 20px
}

    #header a:hover, #header a.active {
        color: #42B0E2
    }

    #header a.active {
        font-family: "apercu-bold", sans-serif
    }

#header .left-group a:first-child {
    padding-left: 0
}

#header .center-group {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

#header .right-group {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end
}

    #header .right-group a:last-child {
        padding-right: 0
    }

#header .chat-link.disabled {
    font-style: italic;
    color: #D8D8D8
}

    #header .chat-link.disabled:hover {
        cursor: default
    }

#header .chat-bubble {
    position: relative;
    margin-right: 2px;
    font-size: 16px
}

    #header .chat-bubble .icon-chat-fill {
        padding-bottom: 3px
    }

    #header .chat-bubble .zopim-chat-state-indicator {
        background-color: #A4CF5F;
        border-radius: 100%;
        border: 2px solid white;
        top: 0;
        position: absolute;
        left: 10px;
        width: 10px;
        height: 10px;
        display: none
    }

        #header .chat-bubble .zopim-chat-state-indicator.online {
            display: block;
            background-color: #A4CF5F
        }

#header .mobile-nav-dropdown.hidden {
    display: none
}

#header .super-chewer .header-group button {
    padding: 0 15px
}

@media (max-width: 969px) {
    #header a {
        padding: 15px
    }

    #header .wrapper {
        width: 100%;
        padding: 0 30px
    }

    #header .header-group button {
        padding: 0 18px
    }

    #header .super-chewer .header-group a {
        padding: 0 10px
    }

        #header .super-chewer .header-group a:last-child {
            padding-right: 0
        }
}

@media (max-width: 860px) {
    #header .super-chewer .header-group a {
        padding: 0 5px
    }

        #header .super-chewer .header-group a:last-child {
            padding-right: 0
        }
}

@media (max-width: 767px) {
    #header {
        background: none
    }

        #header .mobile {
            display: block
        }

        #header .default {
            display: none
        }

        #header .wrapper {
            padding: 0 10px 0 15px;
            background-color: #FFFFFF
        }

        #header .header-group {
            width: 33.33%
        }

            #header .header-group button {
                padding: 0 15px
            }

        #header .icon-nav, #header .icon-x {
            font-size: 25px
        }

        #header .mobile-nav-dropdown {
            text-align: center
        }

            #header .mobile-nav-dropdown ul {
                background-color: #FFFFFF;
                z-index: 1
            }

                #header .mobile-nav-dropdown ul li {
                    overflow: hidden;
                    height: 0;
                    margin: 0px 15px;
                    -webkit-transition: height 300ms ease-in-out;
                    -moz-transition: height 300ms ease-in-out;
                    transition: height 300ms ease-in-out
                }

                    #header .mobile-nav-dropdown ul li a {
                        padding: 20px 0;
                        display: block;
                        color: #333333;
                        font-size: 18px;
                        line-height: 18px
                    }

                    #header .mobile-nav-dropdown ul li:first-child {
                        margin: 0
                    }

            #header .mobile-nav-dropdown .chat-bubble {
                font-size: 19px;
                margin-left: 4px
            }

            #header .mobile-nav-dropdown.visible ul {
                padding-bottom: 20px
            }

                #header .mobile-nav-dropdown.visible ul li {
                    height: 60px;
                    border-top: 1px solid rgba(0,0,0,0.1)
                }

            #header .mobile-nav-dropdown.visible .line {
                border-bottom: 1px solid rgba(0,0,0,0.2)
            }

    .mobile-nav-underlay, .mobile-nav-underlay-erb {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #221E1F;
        opacity: .6;
        z-index: 1
    }

        .mobile-nav-underlay.hidden, .mobile-nav-underlay-erb.hidden {
            display: none
        }
}

@media (max-width: 400px) {
    #header .header-group button {
        padding: 0 10px
    }

    #header .center-group a {
        padding: 0
    }

        #header .center-group a img {
            max-width: 100%
        }

    #header .super-chewer .header-group {
        width: 30%
    }

        #header .super-chewer .header-group a {
            padding: 0
        }

    #header .super-chewer .center-group {
        width: 40%
    }
}

#footer {
    background-color: #FFFFFF
}

    #footer a {
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        padding-bottom: 8px;
        display: block
    }

        #footer a:hover {
            color: #999999;
            text-decoration: underline
        }

    #footer .mobile {
        display: none
    }

    #footer.grey-background {
        background-color: #F0F0F0
    }

    #footer .wrapper {
        max-width: 964px;
        margin: 0 auto
    }

    #footer .full-footer {
        position: relative;
        padding-top: 60px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between
    }

        #footer .full-footer.partial-border {
            border-top: 1px solid #DFDFDF
        }

    #footer .footer-group {
        margin-right: auto
    }

        #footer .footer-group ul li {
            line-height: 14px
        }

        #footer .footer-group:last-child {
            margin-right: 0;
            max-width: 278px
        }

    #footer .footer-graphic img {
        width: 195px
    }

    #footer .bb-newsletter-sign-up {
        margin-top: 20px
    }

    #footer .newsletter-sign-up-form {
        float: none
    }

        #footer .newsletter-sign-up-form fieldset input {
            color: #999999;
            background-color: #FFFFFF;
            font-size: 14px;
            height: 40px;
            border-radius: 2px 0px 0px 2px;
            width: 176px;
            border-right: none
        }

            #footer .newsletter-sign-up-form fieldset input.error {
                border-right: 1px solid #B2320F
            }

        #footer .newsletter-sign-up-form fieldset button {
            background-color: #42B0E2;
            padding: 0 15px;
            text-transform: capitalize;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 0px 2px 2px 0px;
            width: 102px;
            letter-spacing: 0;
            font-family: "apercu-bold", sans-serif
        }

            #footer .newsletter-sign-up-form fieldset button:hover {
                background-color: #2C9CD3
            }

    #footer .newsletter-success {
        display: none;
        position: absolute;
        bottom: 0;
        left: 7.5px;
        line-height: 40px
    }

    #footer .social-icons {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex
    }

        #footer .social-icons a {
            font-size: 20px;
            color: #333333
        }

            #footer .social-icons a:hover {
                text-decoration: none;
                color: #42B0E2
            }

        #footer .social-icons li:not(:last-child) a {
            margin-right: 20px
        }

    #footer .universal-footer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        padding: 30px 0
    }

        #footer .universal-footer p, #footer .universal-footer a {
            font-size: 13px;
            line-height: 13px;
            margin-right: 40px
        }

        #footer .universal-footer a {
            padding-bottom: 0
        }

            #footer .universal-footer a:hover {
                text-decoration: none
            }

            #footer .universal-footer a:last-child {
                margin-right: 0
            }

        #footer .universal-footer.partial-border {
            border-top: 1px solid #DFDFDF
        }

    #footer .barkshop-promo-footer {
        background-color: #333333;
        background-image: url("/fonts/bb/shared/tile-pattern.svg");
        border-radius: 2px;
        margin-bottom: 30px
    }

        #footer .barkshop-promo-footer a {
            color: #FFFFFF;
            padding: 20px 30px;
            text-align: center
        }

            #footer .barkshop-promo-footer a:hover {
                text-decoration: none
            }

        #footer .barkshop-promo-footer img {
            margin-right: 20px
        }

        #footer .barkshop-promo-footer .link {
            text-decoration: underline
        }

            #footer .barkshop-promo-footer .link:hover {
                text-decoration: none
            }

@media (max-width: 969px) {
    #footer {
        padding: 0px 30px 0px 30px
    }

        #footer .footer-info {
            margin-right: 0
        }

        #footer .wrapper {
            padding: 0
        }
}

@media (max-width: 767px) {
    #footer {
        padding: 0px 15px 0px 15px
    }

        #footer a {
            padding-bottom: 0
        }

        #footer .default {
            display: none
        }

        #footer .mobile {
            display: block
        }

        #footer .full-footer {
            -webkit-box-direction: normal;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            align-items: center
        }

        #footer .footer-group {
            margin: 0;
            text-align: center
        }

            #footer .footer-group:last-child {
                max-width: 290px
            }

            #footer .footer-group.footer-graphic {
                position: absolute;
                top: -34px;
                left: 0;
                right: 0;
                margin-bottom: 30px
            }

            #footer .footer-group.footer-info {
                margin-top: 135px
            }

                #footer .footer-group.footer-info .title {
                    margin-top: 10px;
                    line-height: 14px
                }

                #footer .footer-group.footer-info ul {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -moz-flex;
                    display: -ms-flexbox;
                    display: flex;
                    margin-top: 20px
                }

                    #footer .footer-group.footer-info ul li:not(:last-child) {
                        margin-right: 20px
                    }

                    #footer .footer-group.footer-info ul a {
                        line-height: 14px
                    }

            #footer .footer-group .newsletter-sign-up-form > fieldset {
                margin-top: 30px
            }

            #footer .footer-group .newsletter-sign-up-form fieldset input {
                width: 185px
            }

            #footer .footer-group .social-icons {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                -moz-justify-content: center;
                justify-content: center;
                margin-top: 20px
            }

        #footer .universal-footer {
            -webkit-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }

            #footer .universal-footer p {
                text-align: center;
                width: 100%;
                margin-right: 0;
                margin-bottom: 10px
            }

            #footer .universal-footer a:not(:last-child) {
                margin-right: 20px
            }

            #footer .universal-footer.is-simple {
                margin-bottom: 20px
            }

        #footer .barkshop-promo-footer {
            max-width: 345px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 15px
        }

            #footer .barkshop-promo-footer img {
                display: block;
                margin: 0 auto;
                padding-bottom: 10px
            }
}

#nanobar {
    display: none;
    position: fixed;
    width: 100%;
    padding: 5px 21px 5px 0;
    text-align: center;
    z-index: 30;
    margin-left: 0%;
    -webkit-transition: margin-left 0.3s ease-in-out;
    -moz-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out
}

    #nanobar.on-top {
        top: 0;
        left: 0
    }

    #nanobar.on-bottom {
        left: 0;
        bottom: 0
    }

        #nanobar.on-bottom .text-wrapper h3, #nanobar.on-bottom .text-wrapper p {
            display: block
        }

    #nanobar * {
        display: inline-block;
        vertical-align: middle
    }

    #nanobar img, #nanobar .text-wrapper h3, #nanobar .text-wrapper p, #nanobar a {
        margin: 5px
    }

    #nanobar img {
        width: 100px
    }

    #nanobar button {
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 40px
    }

    #nanobar .icon-x {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer
    }

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: scroll
}

    #overlay .modal {
        position: absolute;
        top: 10%;
        left: 50%;
        width: 940px;
        margin-left: -470px;
        border: 2px solid #FFFFFF;
        box-shadow: 0 0 2px 0 rgba(0,0,0,0.25)
    }

    #overlay .content-wrapper {
        position: relative;
        overflow: hidden
    }

        #overlay .content-wrapper:after {
            content: "";
            position: absolute;
            width: 110%;
            height: 100px;
            bottom: -80px;
            left: -5%;
            background: #FFFFFF;
            overflow: visible;
            -webkit-transform: skewY(-1deg);
            -moz-transform: skewY(-1deg);
            -ms-transform: skewY(-1deg);
            -o-transform: skewY(-1deg);
            transform: skewY(-1deg)
        }

    #overlay .logo {
        width: 135px;
        margin-top: 15px
    }

    #overlay .content {
        position: relative;
        z-index: 51;
        margin: 50px 0 150px;
        padding: 0 5%
    }

        #overlay .content h1 {
            font-size: 54px;
            line-height: 1em;
            padding: 5px 0
        }

    #overlay .footer {
        height: 100px;
        background-color: #FFFFFF
    }

    #overlay .doodle {
        position: absolute;
        bottom: 50px;
        width: 40%
    }

        #overlay .doodle.on-left {
            left: 30px
        }

        #overlay .doodle.on-right {
            right: 30px
        }

    #overlay .icon-x {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 36px;
        cursor: pointer
    }

@media (max-width: 969px) {
    #overlay .modal {
        left: 0;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px
    }
}

@media all and (max-width: 767px) {
    #overlay .modal {
        top: 0;
        width: 100%;
        min-height: 100%;
        margin: 0
    }

    #overlay .content-wrapper:after {
        display: none
    }

    #overlay .logo {
        margin-top: 0
    }

    #overlay .content {
        width: 100%;
        margin-top: 30px
    }

    #overlay .footer {
        position: absolute;
        left: 0;
        bottom: 0
    }

    #overlay .doodle {
        bottom: 15px;
        width: 280px
    }

        #overlay .doodle.on-left {
            left: 50%;
            margin-left: -140px
        }

        #overlay .doodle.on-right {
            right: 50%;
            margin-right: -140px
        }
}

.newsletter-sign-up-form {
    float: none
}

    .newsletter-sign-up-form fieldset input {
        color: #999999;
        font-size: 14px;
        height: 40px;
        border-radius: 2px 0px 0px 2px
    }

    .newsletter-sign-up-form fieldset button {
        background-color: #42B0E2;
        padding: 0 15px;
        text-transform: capitalize;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-radius: 0px 2px 2px 0px
    }

        .newsletter-sign-up-form fieldset button:hover {
            background-color: #2C9CD3
        }

.subheader {
    text-align: center;
    padding: 50px 15px 30px 15px
}

    .subheader .mobile {
        display: none
    }

    .subheader.account-subscription {
        padding-bottom: 0px
    }

#checkout-container .subheader {
    padding-top: 35px
}

    #checkout-container .subheader h1 {
        font-size: 22px;
        line-height: 30px
    }

@media (max-width: 767px) {
    .subheader {
        padding-top: 40px
    }

        .subheader .default {
            display: none
        }

        .subheader .mobile {
            display: block
        }

        .subheader .alt-mobile-hed {
            background-color: #FFFFFF;
            padding: 10px 0;
            border-bottom: 1px solid #DFDFDF
        }

        .subheader.show-alt-mobile {
            padding: 0;
            padding-bottom: 15px
        }

    #checkout-container .subheader {
        padding-top: 0
    }
}

#account-container {
    background-color: #F0F0F0
}

    #account-container button {
        font-size: 15px;
        border-radius: 0px;
        font-family: "apercu-medium", sans-serif
    }

    #account-container .hero-container {
        position: relative
    }

    #account-container #invite .hero-image {
        background: url("/assets/barkbox_app/views/account/invite/invite-hero.jpg") no-repeat;
        background-size: 100%;
        height: 260px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px
    }

    #account-container #invite .hero-text {
        position: absolute;
        max-width: 345px;
        top: 25%;
        right: 10%
    }

    #account-container #invite .copy-link {
        position: relative
    }

.no-touch #account-container #invite .copy-link button {
    display: block
}

#account-container #invite .copy-link button {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0
}

    #account-container #invite .copy-link button.zeroclipboard-is-hover {
        background-color: #666666
    }

#account-container #invite #referrals {
    background-color: #FFFFFF;
    padding-bottom: 100px
}

    #account-container #invite #referrals .doodle {
        margin-top: 45px
    }

    #account-container #invite #referrals .banner {
        width: 75%;
        margin: 0 auto;
        background-color: #42B0E2
    }

        #account-container #invite #referrals .banner p {
            font-size: 15px;
            line-height: 50px;
            color: #FFFFFF
        }

#account-container #gifts {
    padding-bottom: 100px
}

    #account-container #gifts .loading-spinner {
        margin: 100px auto
    }

    #account-container #gifts .wrapper {
        -webkit-animation: fade-in 1s;
        -moz-animation: fade-in 1s;
        -ms-animation: fade-in 1s;
        -o-animation: fade-in 1s;
        animation: fade-in 1s
    }

    #account-container #gifts .gift-icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        background-size: 120%;
        background-position: center center;
        background-color: #42B0E2;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px
    }

        #account-container #gifts .gift-icon.gift-email {
            background-image: url(/assets/barkbox_app/views/account/gifts/gift-email-icon-9f9b211ce5c41b6f09dd7fc92d6fd8a6d2c073dce555214b8249a5f69f9827a1.png)
        }

        #account-container #gifts .gift-icon.gift-print {
            background-image: url(/assets/barkbox_app/views/account/gifts/gift-print-icon-06ccc5c45e0ef1fd4be817427e7bbbbda91e630ed7fd3f8846391d70e40f8c72.png)
        }

        #account-container #gifts .gift-icon.gift-card {
            background-image: url(/assets/barkbox_app/views/account/gifts/gift-card-icon-5b02d993cb93e382b10e5e04843c874cd3c9189dacd87de0d0da6907f6ce1ad9.png)
        }

        #account-container #gifts .gift-icon.gift-box, #account-container #gifts .gift-icon.gift-subscription {
            background-image: url(/assets/barkbox_app/views/account/gifts/gift-box-icon-ac0aa54bce2aaffdd14eba739aa804018f1a540581fb8e284b32b2fd2cb76ca0.png)
        }

    #account-container #gifts .dog-name, #account-container #gifts .recipient-name, #account-container #gifts .purchaser-name {
        line-height: 50px;
        width: calc(100% - 65px - 60px)
    }

    #account-container #gifts .placeholder-doodle {
        margin: 5px 0 5px 15px
    }

    #account-container #gifts .detail.gift-type {
        width: 60%
    }

    #account-container #gifts .detail.status {
        width: 40%
    }

    #account-container #gifts .doodle {
        width: 100%;
        max-width: 330px;
        padding-top: 100px
    }

@media (max-width: 969px) {
    #account-container #invite .col {
        float: none;
        width: 480px;
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }

    #account-container #invite .hero-image {
        background-size: 200%
    }

    #account-container #invite .hero-text {
        position: relative;
        background-color: white;
        right: auto;
        top: 5px;
        padding: 15px 25px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        max-width: none
    }

        #account-container #invite .hero-text h1 {
            font-size: 20px
        }

    #account-container #invite #referrals .banner {
        width: 100%
    }

    #account-container #invite #referrals .doodle {
        max-width: 300px
    }

    #account-container #gifts .col {
        float: none;
        width: 480px;
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }

    #account-container #gifts .detail.gift-type, #account-container #gifts .detail.status {
        width: 100%;
        padding: 0
    }

    #account-container #gifts .detail + .detail {
        margin-top: 15px
    }

    #account-container #gifts .detail.current-plan, #account-container #gifts .detail.latest-shipment, #account-container #gifts .detail.expired-on, #account-container #gifts .detail.renews-on, #account-container #gifts .detail.ends-on, #account-container #gifts .detail.reactivate {
        padding: 0
    }
}

@media (max-width: 767px) {
    #account-container #invite .col, #account-container #invite .half {
        width: 100%;
        padding: 0
    }

    #account-container #invite .hero-image {
        height: 165px
    }

    #account-container #invite .hero-text h1 {
        padding: 0 20%
    }

    #account-container #gifts .col {
        width: 100%
    }

    #account-container #gifts .doodle {
        padding-top: 50px
    }

    #account-container #gifts .mobile-ctas {
        margin-bottom: 30px
    }
}

#app-container {
    height: calc(100vh - (510px));
    min-height: 680px
}

    #app-container #hero {
        height: 350px;
        background: url(/assets/barkbox_app/views/app/hero-c9a313e053088a82c28753cf8d466d92eee9fa440675bc3ffc63c72d715605e5.jpg) no-repeat 50% 50%;
        background-size: cover;
        position: relative;
        overflow: hidden
    }

        #app-container #hero:after {
            content: "";
            position: absolute;
            width: 110%;
            height: 100px;
            bottom: -80px;
            left: -5%;
            background: #FFFFFF;
            overflow: visible;
            -webkit-transform: skewY(1deg);
            -moz-transform: skewY(1deg);
            -ms-transform: skewY(1deg);
            -o-transform: skewY(1deg);
            transform: skewY(1deg)
        }

    #app-container h2 {
        margin-bottom: 5px
    }

    #app-container p {
        width: 100%;
        max-width: 385px
    }

    #app-container .store-logo {
        width: 100%;
        max-width: 230px
    }

@media (max-width: 767px) {
    #app-container {
        height: 100%
    }

        #app-container .col {
            width: 100%;
            padding: 0
        }

            #app-container .col.top.right-mini {
                margin-top: 15px
            }

        #app-container #hero {
            height: 225px
        }
}

#contact-us-container {
    padding-bottom: 100px
}

    #contact-us-container #hero {
        height: 450px;
        position: relative;
        overflow: hidden
    }

        #contact-us-container #hero:after {
            content: "";
            position: absolute;
            width: 110%;
            height: 100px;
            bottom: -80px;
            left: -5%;
            background: #FFFFFF;
            overflow: visible;
            -webkit-transform: skewY(1deg);
            -moz-transform: skewY(1deg);
            -ms-transform: skewY(1deg);
            -o-transform: skewY(1deg);
            transform: skewY(1deg)
        }

        #contact-us-container #hero .hero {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(/assets/barkbox_app/views/contact_us/hero-07409310a25a1cd465b4a4b8e5866581803071151082f671da44a71366b540fe.jpg) no-repeat 0 50%;
            background-size: cover
        }

        #contact-us-container #hero .content {
            position: absolute;
            width: 250px;
            height: 144px;
            top: 15%;
            right: 15px
        }

            #contact-us-container #hero .content h1 {
                line-height: 144px
            }

            #contact-us-container #hero .content img {
                position: absolute;
                width: 100%;
                top: 0;
                right: 0
            }

    #contact-us-container #options .wrapper, #contact-us-container #vendor-inquiries .wrapper {
        width: 700px
    }

    #contact-us-container #options .question-doodle {
        width: 100%;
        max-width: 157px
    }

    #contact-us-container #options .media-inquiries-doodle, #contact-us-container #options .vendor-inquiries-doodle {
        width: 100%;
        max-width: 87px
    }

    #contact-us-container #vendor-inquiries {
        display: none;
        padding-top: 30px
    }

        #contact-us-container #vendor-inquiries .arrow-doodle {
            position: absolute;
            top: -40px;
            right: 150px
        }

        #contact-us-container #vendor-inquiries #typeform {
            padding-top: 30px
        }

            #contact-us-container #vendor-inquiries #typeform iframe {
                width: 100%;
                height: 550px
            }

@media (max-width: 767px) {
    #contact-us-container #hero {
        height: auto;
        border-bottom: 1px dashed #DFDFDF
    }

        #contact-us-container #hero:after {
            display: none
        }

        #contact-us-container #hero .hero {
            position: relative;
            height: 225px
        }

        #contact-us-container #hero .content {
            position: relative;
            width: 100%;
            height: auto;
            top: auto;
            right: auto;
            padding: 60px 0
        }

            #contact-us-container #hero .content h1 {
                line-height: 1.4em
            }

            #contact-us-container #hero .content img {
                position: absolute;
                width: auto;
                top: 50%;
                right: 50%;
                margin-top: -59.5px;
                margin-right: -103px
            }

    #contact-us-container #options .wrapper, #contact-us-container #vendor-inquiries .wrapper {
        width: 100%
    }

    #contact-us-container #options .col, #contact-us-container #vendor-inquiries .col {
        padding: 0
    }

    #contact-us-container #options .col {
        width: 100%;
        padding: 0
    }

    #contact-us-container #options .question-doodle {
        margin-bottom: 15px
    }

    #contact-us-container #vendor-inquiries {
        padding-top: 45px
    }

        #contact-us-container #vendor-inquiries .arrow-doodle {
            right: 50%;
            margin-right: -28.5px
        }
}

#gift-from-bark-container {
    height: calc(100vh - (510px));
    min-height: 720px
}

    #gift-from-bark-container .wrapper {
        width: 500px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 60px
    }

        #gift-from-bark-container .wrapper .description {
            margin-top: 5px
        }

    #gift-from-bark-container .header {
        padding: 10px 0;
        background-color: #FFFFFF;
        border-bottom: 1px solid #DFDFDF
    }

@media (max-width: 767px) {
    #gift-from-bark-container {
        height: 100%
    }

        #gift-from-bark-container .wrapper {
            width: 100%;
            padding-top: 20px
        }

            #gift-from-bark-container .wrapper button {
                width: 100%
            }
}

#groupon-container #hero {
    height: 100vh;
    min-height: 600px;
    background-image: url(/assets/barkbox_app/views/groupon/hero-71b4ccd01abb6b8905a5cd01391a16c1b080e6e1f655d66fdf5f6952f3df51bf.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

    #groupon-container #hero .content {
        position: absolute;
        top: 80px;
        right: 15px;
        width: 480px;
        padding: 25px;
        background-image: url(/assets/barkbox_app/views/groupon/background-ec8e47610122358d462adde469c0c212bcc8e67ab2f92ab7110783521ffe518b.png)
    }

        #groupon-container #hero .content h3 {
            margin-bottom: 5px
        }

    #groupon-container #hero form {
        float: none
    }

@media (max-width: 969px) {
    #groupon-container #hero .content {
        top: 50px
    }
}

@media (max-width: 767px) {
    #groupon-container {
        margin-bottom: 50px
    }

        #groupon-container #hero .content {
            position: relative;
            width: 480px;
            right: auto;
            margin: 0 auto
        }
}

@media (max-width: 567px) {
    #groupon-container #hero .content {
        width: 100%
    }
}

#home-container {
    padding-bottom: 100px
}

    #home-container section {
        position: relative;
        overflow: hidden
    }

    #home-container .video-container .control-container {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: background-color 0.25s ease
    }

.no-touch #home-container .video-container .control-container:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,0.1)
}

#home-container .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#home-container .slick-dots li {
    width: 10px
}

    #home-container .slick-dots li button::before {
        font-size: small
    }

#home-container .slick-slide {
    margin: 0 10px
}

#home-container .slick-list {
    margin: 0 -10px
}

#home-container #hero {
    height: 640px;
    max-width: 1940px;
    margin: 0 auto;
     background-size: cover
}

    #home-container #hero .hero-wrapper {
        position: relative;
        width: 1040px;
        margin: 70px auto 0 auto;
        padding-left: 10px
    }

    #home-container #hero .small-wrapper {
        width: 430px
    }

        #home-container #hero .small-wrapper .hero-logo {
            height: 183px;
            background-size: contain
        }

        #home-container #hero .small-wrapper .hero-content {
            margin: 0
        }

            #home-container #hero .small-wrapper .hero-content p {
                width: 330px;
                margin: 0 auto
            }

    #home-container #hero .button-container {
        width: 360px
    }

        #home-container #hero .button-container button {
            width: 100%
        }

#home-container #what-is-it {
    margin-bottom: 80px
}

    #home-container #what-is-it h1 {
        width: 50%
    }

    #home-container #what-is-it .video-container {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-bottom: 45%;
        height: 0
    }

#home-container #whats-inside {
    height: 520px;
    max-width: 1940px;
    margin: 0 auto;
    background: url(/assets/barkbox_app/views/home/Inside-Box-1e7ccf377b95bf17f5b3bbe7a70dc8c945d843649c87d1d7c750eb6af3f2dd51.jpg) no-repeat center top;
    background-size: cover
}

    #home-container #whats-inside .small-wrapper {
        width: 346px
    }

    #home-container #whats-inside .white-text {
        color: #FFFFFF
    }

    #home-container #whats-inside .description {
        padding: 5px 10px 0 0;
        font-size: 15px;
        line-height: 20px
    }

    #home-container #whats-inside .message-1 {
        float: right;
        width: 162px;
        margin: -355px -10px 0 0
    }

        #home-container #whats-inside .message-1 * {
            font-size: 15px;
            line-height: 20px
        }

        #home-container #whats-inside .message-1 .arrow {
            float: left;
            margin-left: -20px;
            -webkit-transform: rotate(75deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(75deg);
            transform: rotate(75deg)
        }

    #home-container #whats-inside .message-2 {
        width: 145px;
        margin: 115px 0 0 195px
    }

        #home-container #whats-inside .message-2 * {
            font-size: 15px;
            line-height: 20px
        }

        #home-container #whats-inside .message-2 .arrow {
            float: right;
            margin: -80px -20px 0 0;
            -webkit-transform: rotate(255deg);
            -moz-transform: rotate(255deg);
            -ms-transform: rotate(255deg);
            -o-transform: rotate(255deg);
            transform: rotate(255deg)
        }

#home-container #product-carousel {
    max-width: 1940px;
    height: 305px;
    margin: 20px auto
}

    #home-container #product-carousel .slick-initialized .slick-slide {
        margin: 0 10px
    }

    #home-container #product-carousel .slick-track {
        margin-left: 65px
    }

    #home-container #product-carousel .slick-dots {
        bottom: -35px
    }

#home-container #our-pack {
    height: 580px;
    box-shadow: 0 0 1px #999999
}

    #home-container #our-pack .pack-image {
        height: 519px;
        background: url(/assets/barkbox_app/views/home/Image-Happy-474e14ae3ba5fd8b956e75b10308c3199c756d95b8c2672c7fe6522a241c32af.jpg) no-repeat;
        background-size: cover
    }

    #home-container #our-pack .treats-doodle {
        margin-left: -15px;
        padding-top: 90px
    }

    #home-container #our-pack .frank {
        width: 110px;
        margin-top: -65px
    }

        #home-container #our-pack .frank * {
            font-size: 15px
        }

        #home-container #our-pack .frank .arrow {
            margin-left: 55px
        }

    #home-container #our-pack .floyd {
        width: 75px;
        margin: 30px 0 0 510px;
        font-size: 15px
    }

        #home-container #our-pack .floyd * {
            font-size: 15px
        }

        #home-container #our-pack .floyd .arrow {
            margin-left: 35px;
            -webkit-transform: scaleX(-1);
            -moz-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1)
        }

    #home-container #our-pack .name {
        color: #42B0E2
    }

#home-container #inspired-by-dogs {
    padding: 50px 0 30px 0;
    background-color: #42B0E2;
    background-image: url(/assets/barkbox_app/views/home/Pattern-BG-Video-cd073ac536031f8fb82fcc06f84210146afff8e7cb40e436ec8441e4a401e85f.png)
}

    #home-container #inspired-by-dogs .white {
        color: #FFFFFF
    }

    #home-container #inspired-by-dogs .video-container {
        margin-bottom: 20px
    }

    #home-container #inspired-by-dogs .video-carousel .slick-slide {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-bottom: 9.5%;
        height: 0
    }

    #home-container #inspired-by-dogs video {
        border: 2px solid #FFFFFF;
        border-radius: 2px
    }

    #home-container #inspired-by-dogs .slick-dotted.slick-slider {
        margin-bottom: 0
    }

    #home-container #inspired-by-dogs .slick-dots {
        bottom: -36px
    }

    #home-container #inspired-by-dogs .slick-list {
        margin: 0
    }

    #home-container #inspired-by-dogs .slick-arrow {
        width: 75px;
        height: 75px;
        background-repeat: no-repeat
    }

        #home-container #inspired-by-dogs .slick-arrow:before {
            content: ""
        }

        #home-container #inspired-by-dogs .slick-arrow.slick-next {
            margin-right: -80px;
            background-image: url(/assets/barkbox_app/views/home/Button-Arrow-Right-75b9aed0a8f75f7bfb6297ebfe206d22d148acef3bfe597bf4733ab7adc14221.png)
        }

            #home-container #inspired-by-dogs .slick-arrow.slick-next:hover {
                background-image: url(/assets/barkbox_app/views/home/Button-Arrow-Right-Hover-0e08bd694261aa1c88f08ffb8a51e95fac00bbc08e15ba28e2166a2e01bf9c5f.png)
            }

        #home-container #inspired-by-dogs .slick-arrow.slick-prev {
            margin-left: -80px;
            background-image: url(/assets/barkbox_app/views/home/Button-Arrow-Left-17d52fc73658360df05e00e42b37fd28d7c95566cc3916a5b259e4830d3042dd.png)
        }

            #home-container #inspired-by-dogs .slick-arrow.slick-prev:hover {
                background-image: url(/assets/barkbox_app/views/home/Button-Arrow-Left-Hover-f16bc31b0434f6ff3d0c7210f1eee4a852274b6eee688990ca303eb52889e078.png)
            }

#home-container #pups-who-ruv-it .left-image {
    padding-right: 10px
}

#home-container #pups-who-ruv-it .right-image {
    padding-left: 10px
}

#home-container #pups-who-ruv-it img {
    width: 100%
}

#home-container #pups-who-ruv-it button {
    margin: 20px 0 4px 0;
    width: 226px
}

@media (min-width: 1281px) {
    #home-container #hero {
        min-height: 690px
    }

        #home-container #hero .hero-wrapper {
            width: 1070px;
            margin-top: 70px;
            padding-left: 0
        }

    #home-container #whats-inside {
        background-size: cover
    }
}

@media (max-width: 969px) {
    #home-container .wrapper {
        width: 760px;
        padding: 0 15px
    }

    #home-container #hero {
        height: 650px;
        background-size: auto
    }

        #home-container #hero .hero-wrapper {
            width: 100%;
            margin: 40px auto;
            padding: 0 50px
        }

        #home-container #hero .small-wrapper {
            width: 100%
        }

            #home-container #hero .small-wrapper .hero-logo {
                height: 210px;
                
            }

            #home-container #hero .small-wrapper .hero-content {
                margin-top: 245px
            }

                #home-container #hero .small-wrapper .hero-content p {
                    width: auto
                }

                #home-container #hero .small-wrapper .hero-content .button-container {
                    width: 460px
                }

    #home-container #whats-inside .small-wrapper {
        width: 270px
    }

    #home-container #whats-inside h2 {
        line-height: 26px
    }

    #home-container #whats-inside .message-1 {
        margin: -395px 150px 0 0
    }

        #home-container #whats-inside .message-1 .arrow {
            float: right;
            margin-right: -20px;
            -webkit-transform: rotate(290deg) scaleX(-1);
            -moz-transform: rotate(290deg) scaleX(-1);
            -ms-transform: rotate(290deg) scaleX(-1);
            -o-transform: rotate(290deg) scaleX(-1);
            transform: rotate(290deg) scaleX(-1)
        }

    #home-container #whats-inside .message-2 {
        margin: 90px 0 0 120px
    }

    #home-container #our-pack {
        height: 445px
    }

        #home-container #our-pack .pack-image {
            height: 384px;
            background: url(/assets/barkbox_app/views/home/Image-Happy-474e14ae3ba5fd8b956e75b10308c3199c756d95b8c2672c7fe6522a241c32af.jpg) no-repeat;
            background-size: contain
        }

    #home-container #inspired-by-dogs .slick-arrow.slick-prev, #home-container #inspired-by-dogs .slick-arrow.slick-next {
        background-image: none
    }

        #home-container #inspired-by-dogs .slick-arrow.slick-prev:hover, #home-container #inspired-by-dogs .slick-arrow.slick-next:hover {
            background-image: none
        }
}

@media (max-width: 767px) {
    #home-container .wrapper {
        width: 100%;
        padding: 0 20px
    }

    #home-container .top-extra {
        margin-top: 40px
    }

    #home-container h1.tighten {
        line-height: 30px
    }

    #home-container #hero {
        height: 531px;
        background-size: auto
    }

        #home-container #hero .hero-wrapper {
            margin: auto auto;
            padding: 0 20px
        }

        #home-container #hero .small-wrapper .hero-logo {
            height: 152px;

        }

        #home-container #hero .small-wrapper .hero-content {
            margin-top: 190px
        }

            #home-container #hero .small-wrapper .hero-content h2 {
                font-size: 16px
            }

            #home-container #hero .small-wrapper .hero-content p {
                width: 270px
            }

            #home-container #hero .small-wrapper .hero-content .button-container {
                width: 100%
            }

                #home-container #hero .small-wrapper .hero-content .button-container button {
                    padding: 0 15px
                }

    #home-container #what-is-it {
        margin-bottom: 20px
    }

        #home-container #what-is-it h1 {
            width: 270px
        }

        #home-container #what-is-it p {
            width: 270px;
            margin-right: auto;
            margin-left: auto
        }

        #home-container #what-is-it .video-container {
            max-width: 100%;
            padding-bottom: 57%
        }

    #home-container #whats-inside {
        height: 650px;
        background-size: auto
    }

        #home-container #whats-inside .small-wrapper {
            width: 100%;
            text-align: center
        }

            #home-container #whats-inside .small-wrapper .top {
                margin-top: 15px
            }

            #home-container #whats-inside .small-wrapper button {
                width: 100%
            }

        #home-container #whats-inside .mobile-wrapper {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 320px;
            margin: 0 auto
        }

        #home-container #whats-inside .message-1 {
            margin: -323px 135px 0 0
        }

            #home-container #whats-inside .message-1 .arrow {
                position: absolute;
                margin: 37px 0 0 93px;
                -webkit-transform: rotate(327deg);
                -moz-transform: rotate(327deg);
                -ms-transform: rotate(327deg);
                -o-transform: rotate(327deg);
                transform: rotate(327deg)
            }

        #home-container #whats-inside .message-2 {
            width: 240px;
            margin: 0 auto 20px auto;
            text-align: center
        }

            #home-container #whats-inside .message-2 .arrow {
                float: left;
                margin: -63px 0 0 13px;
                -webkit-transform: rotate(115deg) scaleX(-1);
                -moz-transform: rotate(115deg) scaleX(-1);
                -ms-transform: rotate(115deg) scaleX(-1);
                -o-transform: rotate(115deg) scaleX(-1);
                transform: rotate(115deg) scaleX(-1)
            }

    #home-container #our-pack {
        height: auto
    }

        #home-container #our-pack .pack-image {
            height: 545px;
            background: url(/assets/barkbox_app/views/home/Image-Happy-474e14ae3ba5fd8b956e75b10308c3199c756d95b8c2672c7fe6522a241c32af.jpg) no-repeat center;
            background-size: cover
        }

        #home-container #our-pack button {
            width: 100%
        }

    #home-container #inspired-by-dogs *::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none
    }

    #home-container #pups-who-ruv-it .slick-dots {
        bottom: -52px
    }

    #home-container #pups-who-ruv-it .button-container {
        width: 100%;
        padding-top: 18px
    }

        #home-container #pups-who-ruv-it .button-container button {
            width: 100%;
            margin-top: 10px
        }
}

#custom-hero {
    height: calc(100vh - 60px);
    background-size: cover;
    background-position: center;
    min-height: 400px
}

    #custom-hero .content {
        max-width: 60%;
        margin: 0 auto;
        margin-top: 75px
    }

        #custom-hero .content h1, #custom-hero .content h2 {
            overflow: hidden;
            max-height: 56px
        }

        #custom-hero .content h1 {
            max-height: 100px;
            line-height: 45px
        }

        #custom-hero .content h2 {
            margin-top: 10px
        }

    #custom-hero .cta {
        max-width: 80%;
        margin: 0 auto;
        margin-top: 25px
    }

        #custom-hero .cta a {
            margin: 0 5px
        }

    #custom-hero.white h1, #custom-hero.white h2 {
        color: #FFFFFF
    }

.arrow-circle {
    background-color: #FFFFFF;
    border-radius: 100%;
    height: 45px;
    width: 45px;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    border: 2px solid transparent
}

    .arrow-circle .arrow {
        margin-left: 11px;
        margin-top: 17px
    }

        .arrow-circle .arrow.hover {
            display: none
        }

.no-touch .arrow-circle:hover {
    background-color: #42B0E2;
    border: 2px solid #FFFFFF
}

    .no-touch .arrow-circle:hover .arrow.main {
        display: none
    }

    .no-touch .arrow-circle:hover .arrow.hover {
        display: block
    }

@media (max-width: 969px) {
    #custom-hero .content {
        max-width: 80%
    }

    #custom-hero .cta {
        max-width: 100%
    }

    #custom-hero .arrow-circle {
        bottom: 80px
    }
}

@media (max-width: 767px) {
    #custom-hero .content {
        margin-top: 40px;
        max-width: 90%
    }

        #custom-hero .content h1 {
            padding: 0 10%;
            max-height: 72px;
            line-height: 36px
        }

    #custom-hero .cta button {
        padding: 0 20px
    }

    #custom-hero .cta a.long-text {
        display: block
    }

        #custom-hero .cta a.long-text button {
            width: 100%;
            margin-bottom: 15px
        }
}

#static-container {
    padding-bottom: 30px
}

    #static-container #hero {
        height: 350px;
        background: url(/assets/barkbox_app/views/static/hero-2251ff8fcce4e5d7b28fc98a6d414ac4ffe49774618393a3cbec615f045fe3d6.jpg) no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden
    }

        #static-container #hero:after {
            content: "";
            position: absolute;
            width: 110%;
            height: 100px;
            bottom: -80px;
            left: -5%;
            background: #FFFFFF;
            overflow: visible;
            -webkit-transform: skewY(1deg);
            -moz-transform: skewY(1deg);
            -ms-transform: skewY(1deg);
            -o-transform: skewY(1deg);
            transform: skewY(1deg)
        }

    #static-container h1, #static-container h2, #static-container h3, #static-container .dashed-divider {
        margin-top: 30px
    }

    #static-container p {
        margin-top: 15px
    }

    #static-container ul {
        list-style-type: disc
    }

        #static-container ul li {
            margin-left: 30px
        }

@media (max-width: 767px) {
    #static-container #hero {
        height: 225px
    }
}

#super-chewer-container h1 {
    font-family: "veneer", sans-serif;
    font-size: 64px;
    line-height: 1em
}

#super-chewer-container h2 {
    font-family: "veneer", sans-serif;
    font-size: 45px;
    line-height: 1em
}

#super-chewer-container p {
    font-family: "apercu-light", sans-serif;
    font-size: 16px
}

#super-chewer-container .emphasize {
    font-family: "apercu-bold", sans-serif
}

#super-chewer-container .pattern-edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: url("v3/super-chewer/pattern-edge.png");
    visibility: hidden
}

    #super-chewer-container .pattern-edge.on-top {
        top: -21px
    }

        #super-chewer-container .pattern-edge.on-top.tilt-right {
            -webkit-transform: skewY(1deg);
            -moz-transform: skewY(1deg);
            -ms-transform: skewY(1deg);
            -o-transform: skewY(1deg);
            transform: skewY(1deg)
        }

        #super-chewer-container .pattern-edge.on-top.tilt-left {
            -webkit-transform: skewY(-1deg);
            -moz-transform: skewY(-1deg);
            -ms-transform: skewY(-1deg);
            -o-transform: skewY(-1deg);
            transform: skewY(-1deg)
        }

    #super-chewer-container .pattern-edge.on-bottom {
        bottom: -2px;
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        transform: scaleY(-1)
    }

#super-chewer-container #hero {
    position: relative;
    height: calc(100vh - 50px);
    min-height: 625px;
    background-color: #1D4F91
}

    #super-chewer-container #hero .hero {
        width: 100%;
        height: calc(100vh - 50px - 173px);
        min-height: 452px;
        background: url(/fonts/bb/super-chewer/hero-fallback-2d115622505efea5fe8ebf16b74ab41d0f0fab2d078ef1ce02f5f83165f598fb.jpg) no-repeat center bottom;
        background-size: cover;
        background: url(/fonts/bb/super-chewer/dog-b3105a850dc34493061372953f4aa6cc88f9f5e3d1e1853e718d6a9ce95c85e9.jpg) no-repeat calc(50% - 200px) bottom/340px auto,url(/fonts/bb/super-chewer/toy-80f8a2e96c4fe46cbee26f167f86e99a457c00c753b89ff821d6a3bcecdb951d.jpg) no-repeat calc(50% + 250px) bottom/300px auto,url(/fonts/bb/super-chewer/pattern-newsprint-ee913e7fafc3214a809fed4974538f0c66674493d1199a76de419cb85ce65284.jpg);
        background-blend-mode: multiply;
        position: relative;
        overflow: hidden
    }

        #super-chewer-container #hero .hero:after {
            content: "";
            position: absolute;
            width: 110%;
            height: 100px;
            bottom: -80px;
            left: -5%;
            background: #1D4F91 url(/fonts/bb/super-chewer/pattern-distressed-09ef9598e89e41bc1ee96c311ba9da4b3952866e6f61ea141b7b8da0cccd459d.png);
            overflow: visible;
            -webkit-transform: skewY(-1deg);
            -moz-transform: skewY(-1deg);
            -ms-transform: skewY(-1deg);
            -o-transform: skewY(-1deg);
            transform: skewY(-1deg)
        }

    #super-chewer-container #hero .speech-bubble-1, #super-chewer-container #hero .speech-text-1 {
        position: absolute;
        left: calc(50% + 250px);
        bottom: 0
    }

    #super-chewer-container #hero .speech-bubble-2, #super-chewer-container #hero .speech-text-2 {
        position: absolute;
        left: calc(50% + 250px);
        bottom: 0
    }

    #super-chewer-container #hero .speech-bubble-1 {
        margin: 0 0 200px -260px;
        opacity: 0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out
    }

        #super-chewer-container #hero .speech-bubble-1.begin {
            opacity: 1
        }

    #super-chewer-container #hero .speech-bubble-2 {
        margin: 0 0 130px -310px;
        opacity: 0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
        -webkit-transition-delay: 1.5s;
        -moz-transition-delay: 1.5s;
        transition-delay: 1.5s
    }

        #super-chewer-container #hero .speech-bubble-2.begin {
            opacity: 1
        }

    #super-chewer-container #hero .speech-text-1, #super-chewer-container #hero .speech-text-2 {
        font-family: "coverly-regular", sans-serif;
        font-size: 18px
    }

    #super-chewer-container #hero .speech-text-1 {
        margin: 0 0 270px -242px
    }

        #super-chewer-container #hero .speech-text-1.begin span {
            opacity: 1
        }

        #super-chewer-container #hero .speech-text-1 span {
            opacity: 0;
            -webkit-transition: opacity 0.5s ease-in-out;
            -moz-transition: opacity 0.5s ease-in-out;
            transition: opacity 0.5s ease-in-out
        }

        #super-chewer-container #hero .speech-text-1 .word-1 {
            -webkit-transition-delay: 0.25s;
            -moz-transition-delay: 0.25s;
            transition-delay: 0.25s
        }

        #super-chewer-container #hero .speech-text-1 .word-2 {
            -webkit-transition-delay: 0.5s;
            -moz-transition-delay: 0.5s;
            transition-delay: 0.5s
        }

        #super-chewer-container #hero .speech-text-1 .word-3 {
            -webkit-transition-delay: 0.75s;
            -moz-transition-delay: 0.75s;
            transition-delay: 0.75s
        }

        #super-chewer-container #hero .speech-text-1 .word-4 {
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 1s;
            transition-delay: 1s
        }

        #super-chewer-container #hero .speech-text-1 .word-5 {
            -webkit-transition-delay: 1.25s;
            -moz-transition-delay: 1.25s;
            transition-delay: 1.25s
        }

    #super-chewer-container #hero .speech-text-2 {
        margin: 0 0 144px -285px
    }

        #super-chewer-container #hero .speech-text-2.begin span {
            opacity: 1
        }

        #super-chewer-container #hero .speech-text-2 span {
            opacity: 0;
            -webkit-transition: opacity 0.5s ease-in-out;
            -moz-transition: opacity 0.5s ease-in-out;
            transition: opacity 0.5s ease-in-out
        }

        #super-chewer-container #hero .speech-text-2 .word-1 {
            -webkit-transition-delay: 1.75s;
            -moz-transition-delay: 1.75s;
            transition-delay: 1.75s
        }

        #super-chewer-container #hero .speech-text-2 .word-2 {
            -webkit-transition-delay: 2s;
            -moz-transition-delay: 2s;
            transition-delay: 2s
        }

        #super-chewer-container #hero .speech-text-2 .word-3 {
            -webkit-transition-delay: 2.25s;
            -moz-transition-delay: 2.25s;
            transition-delay: 2.25s
        }

        #super-chewer-container #hero .speech-text-2 .word-4 {
            -webkit-transition-delay: 2.5s;
            -moz-transition-delay: 2.5s;
            transition-delay: 2.5s
        }

        #super-chewer-container #hero .speech-text-2 .word-5 {
            -webkit-transition-delay: 2.75s;
            -moz-transition-delay: 2.75s;
            transition-delay: 2.75s
        }

        #super-chewer-container #hero .speech-text-2 .word-6 {
            -webkit-transition-delay: 3s;
            -moz-transition-delay: 3s;
            transition-delay: 3s
        }

        #super-chewer-container #hero .speech-text-2 .word-7 {
            -webkit-transition-delay: 3.25s;
            -moz-transition-delay: 3.25s;
            transition-delay: 3.25s
        }

        #super-chewer-container #hero .speech-text-2 .word-8 {
            -webkit-transition-delay: 3.5s;
            -moz-transition-delay: 3.5s;
            transition-delay: 3.5s
        }

    #super-chewer-container #hero .headline-wrapper {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-top: 10px;
        background: #1D4F91 url(/fonts/bb/super-chewer/pattern-distressed-09ef9598e89e41bc1ee96c311ba9da4b3952866e6f61ea141b7b8da0cccd459d.png);
        color: #FFFFFF
    }

    #super-chewer-container #hero .headline {
        position: relative;
        width: 100%;
        max-width: 468px
    }

    #super-chewer-container #hero .star {
        position: absolute;
        top: 15px
    }

        #super-chewer-container #hero .star.on-left {
            left: 30px
        }

        #super-chewer-container #hero .star.on-right {
            right: 30px
        }

    #super-chewer-container #hero .icon-caret-down {
        font-size: 35px;
        cursor: pointer
    }

    #super-chewer-container #hero .pattern-edge {
        z-index: 10
    }

#super-chewer-container #content-body {
    padding: 30px 0 50px;
    position: relative;
    overflow: hidden
}

    #super-chewer-container #content-body:after {
        content: "";
        position: absolute;
        width: 110%;
        height: 100px;
        bottom: -80px;
        left: -5%;
        background: #1D4F91 url(/fonts/bb/super-chewer/pattern-distressed-09ef9598e89e41bc1ee96c311ba9da4b3952866e6f61ea141b7b8da0cccd459d.png);
        overflow: visible;
        -webkit-transform: skewY(1deg);
        -moz-transform: skewY(1deg);
        -ms-transform: skewY(1deg);
        -o-transform: skewY(1deg);
        transform: skewY(1deg)
    }

    #super-chewer-container #content-body .dog-chewing-image {
        width: 100%;
        max-width: 437px
    }

    #super-chewer-container #content-body .top-content-wrapper {
        width: 100%;
        max-width: 375px;
        padding-top: 5%
    }

    #super-chewer-container #content-body h2 {
        width: 100%;
        color: #1D4F91
    }

    #super-chewer-container #content-body .diamond-divider {
        height: 9px;
        background: url(/fonts/bb/super-chewer/pattern-diamond-99e873fe396392c1d90bd575fa30e41c0be308bce3bd519906ab0774ae91f2be.png)
    }

    #super-chewer-container #content-body .bottom-content-wrapper {
        width: 100%;
        max-width: 300px;
        padding-top: 5%
    }

    #super-chewer-container #content-body .super-chewer-barkbox-image {
        width: 145%;
        max-width: 652px;
        margin-right: -75px
    }

#super-chewer-container #content-footer {
    position: relative;
    padding: 30px 0 100px;
    background: #1D4F91 url(/fonts/bb/super-chewer/pattern-distressed-09ef9598e89e41bc1ee96c311ba9da4b3952866e6f61ea141b7b8da0cccd459d.png);
    color: #FFFFFF
}

    #super-chewer-container #content-footer .content-wrapper {
        position: relative;
        width: 100%;
        max-width: 450px
    }

    #super-chewer-container #content-footer .pattern-stars {
        position: absolute;
        top: -80px;
        left: 50%;
        margin-left: -125px
    }

    #super-chewer-container #content-footer h2 {
        width: 100%
    }

    #super-chewer-container #content-footer .italicize {
        font-family: "apercu-bold", sans-serif;
        font-style: italic
    }

    #super-chewer-container #content-footer .stroke {
        width: 150px;
        margin: -15px 0 0 30px
    }

#super-chewer-container #cta {
    background-color: #F0F0F0;
    padding: 100px 0
}

    #super-chewer-container #cta .content-wrapper {
        max-width: 540px;
        position: relative;
        width: 100%
    }

    #super-chewer-container #cta .super-chewer-doodle {
        left: 50%;
        margin-left: -135px;
        position: absolute;
        top: -180px
    }

    #super-chewer-container #cta h2 {
        color: #1D4F91;
        width: 100%
    }

@media (max-width: 767px) {
    #super-chewer-container h1, #super-chewer-container h2 {
        font-size: 35px
    }

    #super-chewer-container #hero {
        height: 395px;
        min-height: 0
    }

        #super-chewer-container #hero .hero {
            height: 295px;
            min-height: 0;
            background: url(/fonts/bb/super-chewer/hero-fallback-2d115622505efea5fe8ebf16b74ab41d0f0fab2d078ef1ce02f5f83165f598fb.jpg) no-repeat center bottom/100% auto;
            background: url(/fonts/bb/super-chewer/dog-b3105a850dc34493061372953f4aa6cc88f9f5e3d1e1853e718d6a9ce95c85e9.jpg) no-repeat calc(50% - 70px) bottom/200px auto,url(/fonts/bb/super-chewer/toy-80f8a2e96c4fe46cbee26f167f86e99a457c00c753b89ff821d6a3bcecdb951d.jpg) no-repeat calc(50% + 100px) bottom/180px auto,url(/fonts/bb/super-chewer/pattern-newsprint-ee913e7fafc3214a809fed4974538f0c66674493d1199a76de419cb85ce65284.jpg)
        }

        #super-chewer-container #hero .headline-wrapper {
            padding-top: 0
        }

        #super-chewer-container #hero .headline {
            max-width: 270px
        }

        #super-chewer-container #hero .star {
            height: 25px;
            top: 5px
        }

            #super-chewer-container #hero .star.on-left {
                left: 20px
            }

            #super-chewer-container #hero .star.on-right {
                right: 20px
            }

        #super-chewer-container #hero .icon-caret-down {
            font-size: 30px
        }

    #super-chewer-container #content-body {
        padding: 0 0 70px
    }

        #super-chewer-container #content-body .col.half {
            width: 100%;
            padding: 0
        }

        #super-chewer-container #content-body .dog-chewing-image {
            display: block;
            float: none;
            margin: 15px auto 0
        }

        #super-chewer-container #content-body .diamond-divider {
            position: absolute;
            top: -10px;
            left: 0;
            width: calc(100% + 30px);
            margin-left: -15px;
            padding-top: 20px;
            background-color: #FFFFFF;
            background-repeat: repeat-x;
            background-position: center center;
            -webkit-transform: skewY(-1deg);
            -moz-transform: skewY(-1deg);
            -ms-transform: skewY(-1deg);
            -o-transform: skewY(-1deg);
            transform: skewY(-1deg)
        }

        #super-chewer-container #content-body .top-content-wrapper {
            padding-top: 30px
        }

        #super-chewer-container #content-body h2 {
            max-width: 290px
        }

        #super-chewer-container #content-body .super-chewer-barkbox-image {
            width: calc(100% + 190px);
            margin-right: -50px
        }

        #super-chewer-container #content-body .bottom-content-wrapper {
            padding-top: 0
        }

    #super-chewer-container #content-footer .content-wrapper {
        max-width: 350px
    }

    #super-chewer-container #content-footer h2 {
        max-width: 290px
    }

    #super-chewer-container #cta h2 {
        max-width: 230px
    }

    #super-chewer-container #cta button {
        width: 100%;
        padding: 0
    }
}

@media (max-width: 567px) {
    #super-chewer-container #hero .hero {
        background: url(/fonts/bb/super-chewer/hero-fallback-2d115622505efea5fe8ebf16b74ab41d0f0fab2d078ef1ce02f5f83165f598fb.jpg) no-repeat center bottom/145% auto;
        background: url(/fonts/bb/super-chewer/dog-b3105a850dc34493061372953f4aa6cc88f9f5e3d1e1853e718d6a9ce95c85e9.jpg) no-repeat calc(50% - 70px) bottom/200px auto,url(/fonts/bb/super-chewer/toy-80f8a2e96c4fe46cbee26f167f86e99a457c00c753b89ff821d6a3bcecdb951d.jpg) no-repeat calc(50% + 100px) bottom/180px auto,url(/fonts/bb/super-chewer/pattern-newsprint-ee913e7fafc3214a809fed4974538f0c66674493d1199a76de419cb85ce65284.jpg)
    }

    #super-chewer-container #content-body .dog-chewing-image {
        max-width: calc(100% + 50px);
        margin: 0 0 0 -15px;
        width: calc(100% + 30px)
    }
}

#theme-index a:hover, #theme-detail a:hover {
    text-decoration: underline
}

#theme-index .wrapper {
    padding-top: 60px;
    margin-top: 60px
}

#theme-index .theme-index-header {
    width: 65%
}

#theme-index .theme-slide {
    position: relative;
    margin-bottom: 30px
}

    #theme-index .theme-slide .theme-text {
        position: absolute;
        width: 40%;
        top: 50%;
        left: 7%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%)
    }

#theme-index .theme-index-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    height: 300px;
    background-image: url(/assets/barkbox_app/views/themes/themes-background-ed479cf7645dd86fe3bb7e41b519422798e0014cc5e68b5e9ef9a35b7760a9af.png);
    background-repeat: repeat
}

    #theme-index .theme-index-footer .footer-wrapper {
        max-width: 400px
    }

    #theme-index .theme-index-footer .button-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center
    }

#theme-detail .hero {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative
}

    #theme-detail .hero .eyebrows {
        color: #221E1F;
        background-color: #FFFFFF;
        padding: 30px 15px 0 15px;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        width: 70%;
        margin: 0 auto
    }

#theme-detail .theme-description {
    width: 70%;
    margin: 0 auto
}

    #theme-detail .theme-description .theme-logo {
        width: 50%
    }

#theme-detail .featured-products .product {
    display: flex
}

    #theme-detail .featured-products .product .product-image {
        width: 40%
    }

    #theme-detail .featured-products .product .product-text {
        width: 60%;
        flex-direction: column;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center
    }

#theme-detail .featured-products .products:nth-child(odd) .product {
    flex-direction: row-reverse
}

#theme-detail .video {
    border-top: 1px solid #DFDFDF
}

#theme-detail .video-container {
    position: relative
}

    #theme-detail .video-container .control-container {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: background-color 0.25s ease
    }

.no-touch #theme-detail .video-container .control-container:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,0.1)
}

#theme-detail .video-container .video-player {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 56%;
    height: 0
}

    #theme-detail .video-container .video-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

#theme-detail .social .heading {
    width: 60%;
    margin: 0 auto
}

#theme-detail .sign-up-now {
    display: flex
}

    #theme-detail .sign-up-now .half {
        width: 50%
    }

        #theme-detail .sign-up-now .half:last-child {
            flex-direction: column;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            justify-content: center
        }

    #theme-detail .sign-up-now .button-container {
        display: flex
    }

#theme-detail .next-theme {
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

    #theme-detail .next-theme .text-container a {
        display: block
    }

    #theme-detail .next-theme .text-container.white-text .eyebrows, #theme-detail .next-theme .text-container.white-text a {
        color: #221E1F
    }

    #theme-detail .next-theme .text-container.white-text .sub-hed, #theme-detail .next-theme .text-container.white-text p {
        color: #FFFFFF
    }

@media (max-width: 969px) {
    #theme-index .wrapper {
        margin-top: 60px;
        padding-top: 60px;
        padding-left: 0;
        padding-right: 0
    }

    #theme-detail .hero .eyebrows, #theme-detail .theme-description {
        width: 80%
    }

    #theme-detail .hero {
        height: 350px
    }

    #theme-detail .featured-products .product .product-image, #theme-detail .featured-products .product .product-text {
        width: 50%
    }

    #theme-detail .sign-up-now button {
        padding: 0 20px
    }
}

@media (max-width: 649px) {
    #theme-index .wrapper {
        margin-top: 30px;
        padding-top: 30px
    }

    #theme-index .theme-index-header {
        width: 80%
    }

    #theme-index .theme-index-list {
        margin-top: 30px
    }

    #theme-index .theme-slide .theme-text {
        width: 75%;
        left: 50%;
        top: 10%;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }

    #theme-index .theme-index-footer {
        padding: 0 20px 20px 20px
    }

        #theme-index .theme-index-footer button {
            padding: 0 20px
        }

    #theme-detail .theme-description, #theme-detail .social .heading, #theme-detail .sign-up-now .half {
        width: 100%
    }

    #theme-detail .hero {
        height: 220px
    }

    #theme-detail .featured-products .product {
        display: block;
        margin-bottom: 30px
    }

        #theme-detail .featured-products .product .product-image, #theme-detail .featured-products .product .product-text {
            width: 100%
        }

        #theme-detail .featured-products .product .product-image {
            padding: 0
        }

        #theme-detail .featured-products .product .product-text {
            margin-top: 15px;
            text-align: center
        }

    #theme-detail .sign-up-now {
        display: block
    }

        #theme-detail .sign-up-now .half:last-child {
            margin-top: 15px;
            text-align: center
        }

            #theme-detail .sign-up-now .half:last-child .button-container {
                display: block
            }
}

#wholesale-container .darkest-grey-text {
    color: #333333
}

    #wholesale-container .darkest-grey-text * {
        color: #333333
    }

#wholesale-container .hero {
    height: 409px;
    max-width: 1940px;
    margin: 0 auto;
    background-position: center center;
    background-image: url(/assets/barkbox_app/views/wholesale/hero-18f56460b295af0f394b45eaebed16ed9b88b3f4f6f456048cef3dde08b0a870.jpg);
    background-size: cover
}

    #wholesale-container .hero .hero-text {
        float: right;
        width: 450px;
        padding: 50px 60px 0 0
    }

        #wholesale-container .hero .hero-text h1, #wholesale-container .hero .hero-text p {
            color: #FFFFFF
        }

        #wholesale-container .hero .hero-text p {
            padding: 0 10px
        }

        #wholesale-container .hero .hero-text button {
            width: 270px
        }

            #wholesale-container .hero .hero-text button.wholesale-email {
                color: #42B0E2;
                background-color: #FFFFFF
            }

                #wholesale-container .hero .hero-text button.wholesale-email:hover {
                    color: #2C9CD3;
                    opacity: .8
                }

#wholesale-container .wholesale-pricing {
    margin-bottom: 50px
}

    #wholesale-container .wholesale-pricing h2 {
        line-height: 36px
    }

#wholesale-container .wholesale-facts {
    max-width: 1940px;
    margin: 0 auto;
    padding: 30px 0 50px 0;
    background-position: right;
    background-color: #F0F0F0;
    background-image: url(/assets/barkbox_app/views/wholesale/texture-897f9a451390bf485a8a7696ed00e6b76c3cc1cb8d391d2b90c51d76a40e16ad.png)
}

    #wholesale-container .wholesale-facts .description {
        margin-top: 15px
    }

@media (max-width: 969px) {
    #wholesale-container .hero .hero-text {
        width: 415px;
        padding: 50px 20px 0 0
    }

    #wholesale-container .wholesale-pricing .group .group-content {
        padding: 18px
    }

    #wholesale-container .wholesale-facts .description {
        padding: 0 5px
    }

    #wholesale-container .wholesale-facts img {
        margin-left: -15px
    }
}

@media (max-width: 767px) {
    #wholesale-container .hero {
        height: auto;
        background-image: none
    }

        #wholesale-container .hero img {
            width: 100%
        }

        #wholesale-container .hero .hero-text {
            float: none;
            width: 100%;
            margin: 0 auto;
            padding: 20px 15px;
            text-align: center
        }

            #wholesale-container .hero .hero-text h1, #wholesale-container .hero .hero-text p {
                color: #333333
            }

            #wholesale-container .hero .hero-text button {
                width: 100%
            }

                #wholesale-container .hero .hero-text button.wholesale-email {
                    color: #FFFFFF;
                    background-color: #42B0E2
                }

                    #wholesale-container .hero .hero-text button.wholesale-email:hover {
                        color: #FFFFFF;
                        opacity: 1;
                        background-color: #2C9CD3
                    }

    #wholesale-container .one-third {
        width: 100%;
        padding: 10px 0
    }

    #wholesale-container .top {
        margin-top: 15px
    }

    #wholesale-container .wholesale-pricing {
        margin-bottom: 30px;
        border-top: 2px dashed #DFDFDF
    }

    #wholesale-container .wholesale-facts {
        padding: 20px 15px
    }

        #wholesale-container .wholesale-facts .group .group-content {
            padding: 15px
        }

        #wholesale-container .wholesale-facts .description {
            margin-top: 0px
        }

            #wholesale-container .wholesale-facts .description.allset {
                margin-top: 15px
            }

        #wholesale-container .wholesale-facts img {
            margin-left: 0px
        }
}

@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    #wholesale-container .hero {
        background-image: url(/assets/barkbox_app/views/wholesale/hero@2x-7c93cd710837cf72b52bbb9b2419aaae36fb6d6cf4cd4f33f8e2ea25f2da2482.jpg)
    }
}

{
}