#callout-hero {
    height: 20em
}

html.onphone #callout-hero {
    height: 8em
}

html.onsmallscreen #callout-hero-alt .spacer-top {
    padding-top: 1em
}

html.onsmallscreen #callout-hero-alt .spacer-bottom {
    padding-bottom: 1em
}

html.onsmallscreen #callout-hero-alt .tile p {
    margin-top: 0;
    font-size: 1.4em;
    line-height: 1em
}

#callout-perfect-fit button.next,
#callout-perfect-fit button.prev,
#callout-sealy-mattress-collection button.next,
#callout-sealy-mattress-collection button.prev {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    background: 0 0;
    z-index: 3;
    font-size: 4em;
    padding: 1rem;
    color: rgba(175, 175, 175, .8)
}

#callout-sealy-mattress-collection button.next,
#callout-sealy-mattress-collection button.prev {
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6)
}

html.ondesktop #callout-sealy-mattress-collection button.next {
    right: 50%;
    margin-right: -1.5em
}

html.ondesktop #callout-sealy-mattress-collection .img-bed,
html.ontablet #callout-sealy-mattress-collection .img-bed {
    height: 100% !important;
    width: auto;
    max-width: none !important
}

html.onphone #callout-perfect-fit button.next,
html.onphone #callout-perfect-fit button.prev {
    top: 0;
    margin-top: 3rem
}

#callout-perfect-fit button.next {
    right: 0
}

#callout-perfect-fit button.prev {
    left: 0
}

#callout-perfect-fit .animate-transition {
    transition: opacity .4s .5s, left .3s .6s;
    opacity: 0;
    left: 2rem;
    position: relative
}

#callout-perfect-fit .animate-transition~.animate-transition {
    transition: opacity .4s .7s, left .3s .7s
}

#callout-perfect-fit .js-active .animate-transition {
    opacity: 1;
    left: 0
}

#callout-sealy-mattress-collection .border-bottom {
    border-bottom: 0;
    border-top-width: .25rem
}

#callout-sealy-mattress-collection .color-alt-border-bottom {
    border-bottom: 0;
    border-top-width: .25rem;
    margin: 0 5x -.25rem;
    transition: border-color .3s, opacity .3s
}

#callout-sealy-mattress-collection .border-bottom {
    border-top-color: rgba(0, 0, 0, .05)
}

#callout-sealy-mattress-collection .color-alt-border-bottom:hover {
    opacity: 1 !important
}

#callout-sealy-mattress-collection .color-alt-border-bottom:not(.js-active) {
    border-top-color: transparent;
    opacity: .5
}

#callout-sealy-mattress-collection .img-bed {
    transition: opacity .3s
}

#callout-sealy-mattress-collection .img-bed.js-active {
    opacity: 1
}

#callout-sealy-mattress-collection .animate-transition {
    transition: opacity .3s 0s, left .3s 1s;
    opacity: 0;
    left: 2rem
}

#callout-sealy-mattress-collection .container.box-shadow {
    box-shadow: inset 0 0 0 10px #a29870
}

html.onphone #callout-sealy-mattress-collection .toggle-group a,
html.ontablet #callout-sealy-mattress-collection .toggle-group a {
    width: calc(100%/4)
}

html.onphone #callout-sealy-mattress-collection .toggle-group img,
html.ontablet #callout-sealy-mattress-collection .toggle-group img {
    width: 100% !important
}

#callout-sealy-mattress-collection [class*=copy-mattress] {
    z-index: -1
}

html.onphone #callout-sealy-mattress-collection .color-alt-bg90 {
    margin-left: 2em;
    margin-right: 2em
}

html.onphone #callout-sealy-mattress-collection .color-alt-bg90 .js-equalize-height2 p:last-child {
    padding-bottom: 1em
}

html.ontablet #callout-sealy-mattress-collection .-gutter-left.color-alt-bg90 {
    margin-left: -3rem
}

#mattress-range-crown-jewel-posturepedic.js-active~div .copy-mattress-crown-jewel {
    opacity: 1;
    z-index: 2;
    left: 0;
    transition: opacity .4s .2s, left .3s .4s
}

#mattress-range-posturepedic-aspire.js-active~div .copy-mattress-posturepedic-aspire,
#mattress-range-posturepedic-enhance.js-active~div .copy-mattress-posturepedic-enhance,
#mattress-range-posturepedic-exquisite.js-active~div .copy-mattress-posturepedic-exquisite,
#mattress-range-posturepedic-elevate.js-active~div .copy-mattress-posturepedic-elevate,
#mattress-range-posturepedic-performance.js-active~div .copy-mattress-posturepedic-performance,
#mattress-range-posturepedic-premium.js-active~div .copy-mattress-posturepedic-premium {
    opacity: 1;
    z-index: 2;
    left: 0;
    transition: opacity .4s .4s, left .3s .4s
}

img#mattress-range-crown-jewel-posturepedic.js-active~.span12 .prev,
img#mattress-range-posturepedic-performance.js-active~.span12 .next {
    opacity: 0 !important
}

#callout-customer-reviews button,
html.onphone #aside {
    display: none !important
}

html.onphone #callout-customer-reviews .js-equalize-height,
html.onphone #callout-customer-reviews .js-equalize-height2,
html.ontablet #callout-customer-reviews .js-equalize-height,
html.ontablet #callout-customer-reviews .js-equalize-height2 {
    height: auto !important
}

html.onphone #mattress-range-sizing .spanX {
    width: 50%;
    float: left;
    padding-bottom: 1.5em
}

html.onphone #mattress-range-sizing .spanX img,
html.ontablet #mattress-range-sizing .spanX img {
    max-width: 100%
}

html.ontablet #mattress-range-sizing .spanX {
    width: calc(100%/3);
    float: left;
    padding-bottom: 1.5em;
    margin: 0
}

#page-mattresses #banner .container .BannerContent {
    max-width: 630px
}