.margin-top-xxl {
    margin-top:5.25em;
    margin-top:var(--space-xxl)
}

.text-component p {
    line-height:1.4;
    line-height:var(--component-body-line-height)
}

.icon--sm {
    font-size:24px;
    font-size:var(--icon-sm);
    padding-left: 20px;
    width: 30%
}

.cd-cart::before {
    content:'';
    position:fixed;
    z-index:1;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.5);
    opacity:0;
    visibility:hidden;
    transition:opacity .4s, visibility .4s
}

.cd-cart--open::before {
    opacity:1;
    visibility:visible
}

.cd-cart__trigger,.cd-cart__content {
    position: fixed;
    bottom: 20px;
    right: 5%; /* moves cart over to the left */
    transition:-webkit-transform .2s;
    transition:transform .2s;
    transition:transform .2s, -webkit-transform .2s;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}

.cd-cart--empty .cd-cart__trigger,.cd-cart--empty .cd-cart__content {
    -webkit-transform:translateY(150px);
    -ms-transform:translateY(150px);
    transform:translateY(150px)
}

@media (min-width: 80rem) {
.cd-cart__trigger,.cd-cart__content {
    bottom:40px
}
}
    
.cd-cart__trigger {
    z-index:3;
    height:72px;
    width:72px;
    overflow:visible
}

.cd-cart__trigger::after,.cd-cart__trigger::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    -ms-transform:translateY(-50%) translateX(-50%);
    transform:translateY(-50%) translateX(-50%);
    height:100%;
    width:100%;
    background:url(../img/cd-icons-cart-close.svg) no-repeat 0 0;
    transition:opacity .2s, -webkit-transform .2s;
    transition:opacity .2s, transform .2s;
    transition:opacity .2s, transform .2s, -webkit-transform .2s;
    background-color: white;
}

.cd-cart__trigger::after {
    background-position:-72px 0;
    opacity:0;
    -webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg);
    -ms-transform:translateX(-50%) translateY(-50%) rotate(90deg);
    transform:translateX(-50%) translateY(-50%) rotate(90deg)
}

.cd-cart--open .cd-cart__trigger::before {
    opacity:0
}

.cd-cart--open .cd-cart__trigger::after {
    opacity:1;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}

.cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout {
    box-shadow:0 6px 40px rgba(0,0,0,0.3)
}

.cd-cart--open .cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout {
    box-shadow:0 4px 30px rgba(0,0,0,0.17)
}

.cd-cart__count {
    position:absolute;
    top:-10px;
    right:-10px;
    height:28px;
    width:28px;
    background:hsl(7, 80%, 56%);
    color: white;
    font-size:0.83333em;
    font-weight:bold;
    border-radius:50%;
    text-indent:-19px;
    transition:-webkit-transform .2s .5s;
    transition:transform .2s .5s;
    transition:transform .2s .5s, -webkit-transform .2s .5s;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

.cd-cart__count li {
    position:absolute;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    left:50%; /* Aligns shopping cart counter for iPhone */
    padding-left: 20px;
    list-style-type: none;
    text-align: center;
    top:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;-webkit-animation-duration:.15s;
    animation-duration:.15s
}

.cd-cart__count li:last-of-type {
    visibility:hidden
}

.cd-cart__count--update li:last-of-type {
    -webkit-animation-name:cd-qty-enter;
    animation-name:cd-qty-enter
}

.cd-cart__count--update li:first-of-type {
    -webkit-animation-name:cd-qty-leave;
    animation-name:cd-qty-leave
}

.cd-cart--open .cd-cart__count {
    transition:-webkit-transform .2s 0s;
    transition:transform .2s 0s;
    transition:transform .2s 0s, -webkit-transform .2s 0s;
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0)
}

.cd-cart--empty .cd-cart__count {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
}

.cd-cart__content {
    z-index:2;
    width:90%;
    max-width:440px;
    height:400px;
    max-height:90%;
    pointer-events:none
}

.cd-cart__layout {
    position:absolute;
    bottom:0;
    right:0;
    z-index:2;
    overflow:hidden;
    height:72px;
    width:72px;
    border-radius:0.25em;
    border-radius:var(--radius);
    transition:height .4s .1s, width  .4s .1s, box-shadow .3s;
    transition-timing-function:cubic-bezier(0.67, 0.17, 0.32, 0.95);
    background:hsl(0, 0%, 100%);
    background:var(--cd-color-3);
    box-shadow:0 4px 30px rgba(0,0,0,0.17);
    pointer-events:auto;display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column
}

.cd-cart--open .cd-cart__layout {
    height:100%;
    width:100%;
    transition-delay:0s;
    background-color: white;
    border-radius: 5px;
}

.cd-cart__header,.cd-cart__body {
    opacity:0;
    padding-left:0.825em;
    padding-left:calc(var(--space-sm)*1.1);
    padding-right:0.825em;
    padding-right:calc(var(--space-sm)*1.1)
}

.cd-cart--open .cd-cart__header,.cd-cart--open .cd-cart__body {
    opacity:1
}

.cd-cart__header {
    /* position:relative;
    z-index:1;
    -ms-flex-negative:0;
    flex-shrink:0;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-align:center;
    align-items:center; */
    /* border-radius:0.25em 0.25em 0 0;
    height:40px;
    line-height:40px;
    background-color:hsl(0, 0%, 100%);
    transition:opacity .2s 0s; */
    border-bottom: 1px solid black;
}

.cd-cart__layout h2 {
    text-transform:uppercase;
    margin-top: 10px;
    margin-left: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size:0.76388em;
    font-weight:700;
    letter-spacing:.1em;
}

.cd-cart--open .cd-cart__header {
    transition:opacity .2s .2s
}

.cd-cart__undo {
    opacity:0;visibility:hidden;
    transition:opacity .2s, visibility .2s;
    color:hsl(210, 31%, 28.8%);
    color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));
    font-size:0.69444em;font-size:var(--text-xs)
}

.cd-cart__undo a {
    text-decoration:underline;color:hsl(210, 31%, 24%);
    color:var(--cd-color-1)
}

.cd-cart__undo a:hover {
    color:hsl(204, 73%, 52%);color:var(--cd-color-2)
}

.cd-cart__undo--visible {
    opacity:1;visibility:visible
}

.cd-cart__body {
    -ms-flex-positive:1;
    flex-grow:1;
    padding-top:0.75em;
    padding-top:var(--space-sm);
    padding-bottom:0.75em;
    padding-bottom:var(--space-sm);
    overflow:auto;
    -webkit-overflow-scrolling:touch;transition:opacity .2s
}

.cd-cart__body ul {
    position:relative;
    padding-bottom:60px
}

.cd-cart__price {
    padding-right: 10px;
}

.classTitle, .cd-cart__delete-item {
    padding-left: 10px;
}

.classTitle {
    padding-bottom: 10px;
}

@media (min-width: 64rem) {
.cd-cart__body ul{
    padding-bottom:90px
}
}

.cd-cart--open .cd-cart__body {
    transition:opacity 0s
}

.cd-cart--open .cd-cart__body li {
    transition:opacity .3s .2s, -webkit-transform .3s .2s;transition:transform .3s .2s, opacity .3s .2s;transition:transform .3s .2s, opacity .3s .2s, -webkit-transform .3s .2s;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)
}

.cd-cart--open .cd-cart__body li:nth-of-type(2) {
    transition-duration:.4s
}

.cd-cart--open .cd-cart__body li:nth-of-type(3) {
    transition-duration:.5s
}

.cd-cart--open .cd-cart__body li:nth-of-type(4),.cd-cart--open .cd-cart__body li:nth-of-type(5) {
    transition-duration:.55s
}

.cd-cart__product {
    position:relative;
    opacity:0;
    -webkit-transform:translateX(80px);
    -ms-transform:translateX(80px);
    transform:translateX(80px);
    transition:opacity 0s .2s, -webkit-transform 0s .2s;
    transition:opacity 0s .2s, transform 0s .2s;
    transition:opacity 0s .2s, transform 0s .2s, -webkit-transform 0s .2s;
    display:-ms-flexbox;display:flex
}

.cd-cart__product:not(:last-of-type) {
    margin-bottom:12px
}

.cd-cart__product a {
    text-decoration:none
}

.cd-cart__product--deleted {
    position:absolute;
    left:0;
    width:100%;
    opacity:0;
    -webkit-animation:cd-item-slide-out .3s forwards;
    animation:cd-item-slide-out .3s forwards
}

.cd-cart__product--deleted.cd-cart__product--undo {
    -webkit-animation:cd-item-slide-in .3s forwards;
    animation:cd-item-slide-in .3s forwards
}

.cd-cart__product--deleted+.cd-cart__product {
    -webkit-animation:cd-item-move-up-mobile .3s;
    animation:cd-item-move-up-mobile .3s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
    
@media (min-width: 64rem) {
.cd-cart__product--deleted+.cd-cart__product{
    -webkit-animation:cd-item-move-up .3s;
    animation:cd-item-move-up .3s
}
}

.cd-cart__product--undo+.cd-cart__product {
    -webkit-animation:cd-item-move-down-mobile .3s;
    animation:cd-item-move-down-mobile .3s;
    -webkit-animation-fill-mode:forwards;animation-fill-mode:forwards
}

@media (min-width: 64rem) {
.cd-cart__product--undo+.cd-cart__product{
    -webkit-animation:cd-item-move-down .3s;
    animation:cd-item-move-down .3s
}
}

.cd-cart__image {
    display:inline-block;width:50px;-ms-flex-negative:0;flex-shrink:0
}

.cd-cart__image img {
    display:block
}
    
@media (min-width: 64rem) {
.cd-cart__image{
    width:90px
}
}

.cd-cart__details {
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-line-pack:start;
    align-content:flex-start;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-positive:1;
    flex-grow:1;
    padding-top:0.825em;
    padding-top:calc(var(--space-sm)*1.1);
    padding-left:0.6em;padding-left:calc(var(--space-xs)*1.2)
}

.cd-cart__details h3 {
    font-weight:bold;
    width:70%;
    font-size:0.95833em;
    font-size:calc(var(--text-sm)*1.15)
}

.cd-cart__details h3 a {
    color:hsl(210, 31%, 24%);
    color:var(--cd-color-1)
}

.cd-cart__details h3 a:hover {
    color:hsl(204, 73%, 52%);
    color:var(--cd-color-2)
}

.cd-cart__price {
    width:30%;
    text-align:right;
    font-size:0.91666em;
    font-size:calc(var(--text-sm)*1.1);
    font-weight:bold
}

.cd-cart__actions {
    display:-ms-flexbox;
    display:flex;
    font-size:0.76388em;
    font-size:calc(var(--text-xs)*1.1)
}

.cd-cart__delete-item,.cd-cart__quantity {
    color:hsl(210, 31%, 28.8%);
    color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}

.cd-cart__delete-item {
    margin-right:0.75em;
    margin-right:var(--space-sm)
}

.cd-cart__delete-item:hover {
    color:hsl(7, 80%, 56%);
    color:var(--cd-color-5)
}

.cd-cart__quantity {
    display:-ms-flexbox;display:flex
}

.cd-cart__quantity label {
    margin-right:0.375em;margin-right:var(--space-xxs)
}

.cd-cart__select {
    position:relative
}

.cd-cart__select select {
    position:relative;
    padding:0 1.25em 0 0;
    padding:0 var(--space-md) 0 0;
    cursor:pointer;color:currentColor
}

.cd-cart__select select:focus {
    outline:none;
    color:hsl(210, 31%, 24%);
    color:var(--cd-color-1);
    box-shadow:0 1px 0 currentColor
}

.cd-cart__select select::-ms-expand {
    display:none
}

.cd-cart__select .icon {
    position:absolute;
    z-index:1;
    right:0;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    display:block;
    width:12px;
    height:12px;
    color:currentColor;
    pointer-events:none
}

@media (min-width: 64rem) {
.cd-cart__select select{
    padding-right:0.75em;
}
}

.cd-cart__footer {
    position:absolute;
    bottom:0;
    width:100%;
    border-radius:0 0 0.25em 0.25em;
    box-shadow:0 -2px 20px rgba(0,0,0,0.15);
    background:hsl(0, 0%, 100%);
    background:var(--cd-color-3)
}

.cd-cart__checkout {
    display:block;
    height:72px;
    line-height:72px;
    margin-right:72px;
    margin-bottom: -5px;
    margin-top: -10px;
    background:hsl(204, 73%, 52%);
    color:hsla(0, 0%, 100%, 0);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-align:center;font-size:1.2em;
    font-size:var(--text-md);
    font-weight:600;
    transition:all .2s 0s
}

.cd-cart__checkout:hover {
    background:hsl(204, 73%, 56.16%);
}

.cd-cart__checkout em {
    position:relative;
    display:inline-block;
    -webkit-transform:translateX(40px);
    -ms-transform:translateX(40px);
    transform:translateX(40px);
    transition:-webkit-transform 0s .2s;
    transition:transform 0s .2s;
    transition:transform 0s .2s, -webkit-transform 0s .2s
}

.cd-cart__checkout .icon {
    position:absolute;top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    right:0;
    opacity:0;
    transition:opacity .2s;
    color:currentColor
}

.cd-cart--open .cd-cart__checkout {
    color:hsl(0, 0%, 100%);
    color:var(--cd-color-3);
    transition:color .2s .3s
}

.cd-cart--open .cd-cart__checkout em {
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
    transition:padding .2s 0s, -webkit-transform .2s .3s;
    transition:transform .2s .3s, padding .2s 0s;
    transition:transform .2s .3s, padding .2s 0s, -webkit-transform .2s .3s
}

.cd-cart--open .cd-cart__checkout:hover em {
    padding-right:30px
}

.cd-cart--open .cd-cart__checkout:hover .icon {
    opacity:1
}

@-webkit-keyframes cd-qty-enter {
    0%{
    opacity:0;visibility:hidden;
    -webkit-transform:translateX(-50%) translateY(0);
    transform:translateX(-50%) translateY(0)
    }
    100%{
        opacity:1;visibility:visible;
        -webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)
    }
}

@keyframes cd-qty-enter {
    0%{
        opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);
        transform:translateX(-50%) translateY(0)
    }
    100%{
        opacity:1;visibility:visible;
        -webkit-transform:translateX(-50%) translateY(-50%);
        transform:translateX(-50%) translateY(-50%)
    }
}

@-webkit-keyframes cd-qty-leave {
    0%{
        opacity:1;visibility:visible;
        -webkit-transform:translateX(-50%) translateY(-50%);
        transform:translateX(-50%) translateY(-50%)
    }
    100%{
        opacity:0;visibility:hidden;
        -webkit-transform:translateX(-50%) translateY(-100%);
        transform:translateX(-50%) translateY(-100%)
    }
}

@keyframes cd-qty-leave {
    0%{
        opacity:1;visibility:visible;
        -webkit-transform:translateX(-50%) translateY(-50%);
        transform:translateX(-50%) translateY(-50%)
    }
    100%{
        opacity:0;visibility:hidden;
        -webkit-transform:translateX(-50%) translateY(-100%);
        transform:translateX(-50%) translateY(-100%)
    }
}

@-webkit-keyframes cd-item-move-up-mobile {
    0%{
        padding-top:62px
    }
    100%{
        padding-top:0px
    }
}

@keyframes cd-item-move-up-mobile {
    0%{
        padding-top:62px
    }
    100%{padding-top:0px
    }
}

@-webkit-keyframes cd-item-move-up {
    0%{
        padding-top:102px
    }
    100%{
        padding-top:0px
    }
}

@keyframes cd-item-move-up {
    0%{
        padding-top:102px
    }
    100%{
        padding-top:0px
    }
}

@-webkit-keyframes cd-item-move-down-mobile {
    0%{
        padding-top:0px
    }
    100%{
        padding-top:62px
    }
}

@keyframes cd-item-move-down-mobile {
    0%{
        padding-top:0px
    }
    100%{
        padding-top:62px
    }
}

@-webkit-keyframes cd-item-move-down {
    0%{
        padding-top:0px
    }
    100%{
        padding-top:102px
    }
}

@keyframes cd-item-move-down {
    0%{
        padding-top:0px
    }
    100%{
        padding-top:102px
    }
}

@-webkit-keyframes cd-item-slide-out {
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
    100%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px);
        opacity:0
    }
}

@keyframes cd-item-slide-out {
    0%{
        -webkit-transform:translateX(0);
        transform:translateX(0);opacity:1
    }
    100%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px);
        opacity:0
    }
}

@-webkit-keyframes cd-item-slide-in {
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);opacity:1
    }
    0%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px);
        opacity:0
    }
}

@keyframes cd-item-slide-in {
    100%{
        -webkit-transform:translateX(0);
        transform:translateX(0);
        opacity:1
    }
    0%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px);
        opacity:0
    }
}

.cd-main h1 {
    color:hsl(210, 31%, 24%);
    color:var(--cd-color-1)
}

.cd-article-link {
    display:inline-block;
    padding:0.75em 1.25em;
    padding:var(--space-sm) var(--space-md);
    border-radius:50em;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.1em;
    text-decoration:none;
    font-size:0.83333em;
    font-size:var(--text-sm);
}

.cd-add-to-cart {
    /* display:inline-block;
    padding:0.75em 1.25em;
    padding:var(--space-sm) var(--space-md);
    border-radius:50em;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.1em;
    text-decoration:none;
    font-size:0.83333em;
    font-size:var(--text-sm);
    background:hsl(204, 73%, 52%);
    background:var(--cd-color-2);
    color:hsl(0, 0%, 100%);
    color:var(--cd-color-3); */
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

/* .cd-add-to-cart:hover {
    background:hsl(204, 73%, 57.2%);
    background:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.1))
} */

/* .cd-add-to-cart:active{
    -webkit-transform:scale(0.9);
    -ms-transform:scale(0.9);
    transform:scale(0.9)
} */

.cd-article-link {
    color:hsl(210, 31%, 24%);
    color:var(--cd-color-1);
    background-color:hsl(192, 15%, 84.6%);
    background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.9))
}

.cd-article-link:hover {
    background-color:hsl(192, 15%, 89.3%);
    background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.95))
}

/* Shopping cart placement */

@media (min-width: 725px) and (max-width: 924.98px) { 
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 6.5%; /* moves cart over to the left */
}
}

@media (min-width: 925px) and (max-width: 1199.98px) { 
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 8%; /* moves cart over to the left */
}
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 11%; /* moves cart over to the left */
}
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 13%; /* moves cart over to the left */
}
}    

@media (min-width: 1400px) and (max-width: 1499.98px) {
.cd-cart__trigger,.cd-cart__content {
    bottom: 20px;
    right: 15.5%; /* moves cart over to the left */
}
}

@media (min-width: 1500px) and (max-width: 1599.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 18%; /* moves cart over to the left */
}
}

@media (min-width: 1600px) and (max-width: 1699.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 19%; /* moves cart over to the left */
}
}

@media (min-width: 1700px) and (max-width: 1799.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 21%; /* moves cart over to the left */
}
}

@media (min-width: 1800px) and (max-width: 1899.98px) {
.cd-cart__trigger,.cd-cart__content {
    bottom: 20px;
    right: 23%; /* moves cart over to the left */
}
}

@media (min-width: 1900px) and (max-width: 1999.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 24%; /* moves cart over to the left */
}
}

@media (min-width: 2000px) and (max-width: 2099.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 25.5%; /* moves cart over to the left */
}
}

@media (min-width: 2100px) and (max-width: 2199.98px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 26.5%; /* moves cart over to the left */
}
}

@media (min-width: 2200px) and (max-width: 2299.98px) {
.cd-cart__trigger,.cd-cart__content {
    bottom: 20px;
    right: 27.5%; /* moves cart over to the left */
}
}

@media (min-width: 2300px) {
.cd-cart__trigger, .cd-cart__content {
    bottom: 20px;
    right: 29.5%; /* moves cart over to the left */
}
}