#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
box-sizing: content-box !important;
position: relative;
margin: 1.5em 0 3em;
}
#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options #ee-promotion-code-input-lbl h4 {
margin:0;
} @media only screen and (min-width: 481px) {
.ee-promotion-code-input__wrapper {
align-items: center;
display: grid;
grid-template-columns: 2fr 1fr;
min-height: 3em;
}
#ee-promotion-code-input,
#ee-promotion-code-submit {
box-sizing: border-box;
height: clamp(3rem, 100%, 5rem) !important;
line-height: 1;
margin: unset !important;
min-height: unset !important;
padding-block: clamp(0.25rem, 100%, 0.5rem) !important;
padding-inline: clamp(0.375rem, 100%, 0.75rem) !important;
}
#ee-promotion-code-input {
border-inline-end: none !important;
border-start-end-radius: 0 !important;
border-end-end-radius: 0 !important;
}
#ee-promotion-code-submit {
border-start-start-radius: 0 !important;
border-end-start-radius: 0 !important;
border-width: 1px;
min-width: 12rem;
white-space: nowrap;
}
} .ee-promo-banner-ribbon-dv {
height: 90px;
margin: 2em auto 0 ;
position: relative;
width: 100%;
}
.ee-promo-banner-ribbon-dv div {
box-sizing: border-box;
}
.ee-promo-banner-ribbon-dv > div {
height: 50px;
}
.ee-promo-banner-ribbon-main-dv {
position: relative;
display: block;
width:100%;
height: auto !important;
left: 40%;
top: 0;
padding: 5px;
margin-left: -40%;
z-index: 10;
}
.ee-promo-banner-ribbon-main-dv .ee-promo-banner-text-dv {
align-items: center;
border: 1px dashed rgba(255, 255, 255, 0.5);
color: #FFF;
display: flex;
height: auto !important;
justify-content: center;
min-height: 40px;
} .ee-promo-banner-ribbon-back-dv {
position: absolute;
width: 8%;
top: 12px;
}
.ee-promo-banner-ribbon-back-left-dv {
left: -5%;
}
.ee-promo-banner-ribbon-back-right-dv {
right: -5%;
} .ee-promo-banner-ribbon-skew-dv {
position: absolute;
width: 3%;
top: 6px;
z-index: 5;
}
.ee-promo-banner-ribbon-skew-left-dv {
left: 0;
transform: skew( 00deg, 25deg );
}
.ee-promo-banner-ribbon-skew-right-dv {
right: 0;
transform: skew( 00deg, -25deg );
} .ee-promo-banner-ribbon-arrow-dv {
position: absolute;
z-index: 2;
width: 0;
height: 25px !important;
} .ee-promo-banner-ribbon-back-left-dv > .ee-promo-banner-ribbon-arrow-dv {
left: -29px;
}
.ee-promo-banner-ribbon-arrow-top-dv {
top: 0;
border-top: 0 solid transparent;
border-bottom: 25px solid transparent;
}
.ee-promo-banner-ribbon-arrow-bottom-dv {
top: 25px;
border-top: 25px solid transparent;
border-bottom:0 solid transparent;
} .ee-promo-banner-ribbon-back-right-dv > .ee-promo-banner-ribbon-arrow-dv {
right: -29px;
}.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-top-dv {
border-bottom: 25px solid transparent;
border-top: 0 solid transparent;
border-right: none!important;
}
.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-bottom-dv {
border-top: 25px solid transparent;
border-bottom: 0 solid transparent;
border-right: none!important;
}
.ee-promo-separator-dv {
line-height:10px!important;
}
.ee-promo-banner-ribbon-dv,
.ee-upcoming-promotions-container-dv {
--ee-promo-banner-ribbon-color--currency-code: hsl(0, 0%, 100%);
}
.ee-promo-banner-ribbon-red-dv,
.ee-promo-upcoming-promotions-main-dv.red {
--ee-promo-banner-ribbon__main: hsl(3, 78%, 38%);
--ee-promo-banner-ribbon__back: hsl(3, 73%, 33%);
--ee-promo-banner-ribbon__dark: hsl(3, 68%, 23%);
--ee-promo-banner-ribbon__text: hsl(3, 78%, 100%);
--ee-promo-banner-ribbon__link: hsl(3, 78%, 90%);
--ee-promo-banner-ribbon__link--hover: hsl(3, 78%, 80%);
}
.ee-promo-banner-ribbon-orange-dv,
.ee-promo-upcoming-promotions-main-dv.orange {
--ee-promo-banner-ribbon__main: hsl(23, 90%, 59%);
--ee-promo-banner-ribbon__back: hsl(23, 85%, 54%);
--ee-promo-banner-ribbon__dark: hsl(23, 80%, 44%);
--ee-promo-banner-ribbon__text: hsl(23, 90%, 0%);
--ee-promo-banner-ribbon__link: hsl(23, 90%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(23, 90%, 90%);
}
.ee-promo-banner-ribbon-yellow-dv,
.ee-promo-upcoming-promotions-main-dv.yellow {
--ee-promo-banner-ribbon__main: hsl(45, 76%, 59%);
--ee-promo-banner-ribbon__back: hsl(45, 71%, 54%);
--ee-promo-banner-ribbon__dark: hsl(45, 66%, 44%);
--ee-promo-banner-ribbon__text: hsl(45, 76%, 0%);
--ee-promo-banner-ribbon__link: hsl(45, 76%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(45, 76%, 90%);
}
.ee-promo-banner-ribbon-olive-dv,
.ee-promo-upcoming-promotions-main-dv.olive {
--ee-promo-banner-ribbon__main: hsl(73, 26%, 58%);
--ee-promo-banner-ribbon__back: hsl(73, 21%, 53%);
--ee-promo-banner-ribbon__dark: hsl(73, 16%, 43%);
--ee-promo-banner-ribbon__text: hsl(73, 26%, 0%);
--ee-promo-banner-ribbon__link: hsl(73, 26%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(73, 26%, 90%);
}
.ee-promo-banner-ribbon-green-dv,
.ee-promo-upcoming-promotions-main-dv.green {
--ee-promo-banner-ribbon__main: hsl(162, 100%, 36%);
--ee-promo-banner-ribbon__back: hsl(162, 95%, 31%);
--ee-promo-banner-ribbon__dark: hsl(162, 90%, 21%);
--ee-promo-banner-ribbon__text: hsl(162, 100%, 0%);
--ee-promo-banner-ribbon__link: hsl(162, 100%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(162, 100%, 90%);
}
.ee-promo-banner-ribbon-aqua-dv,
.ee-promo-upcoming-promotions-main-dv.aqua {
--ee-promo-banner-ribbon__main: hsl(181, 61%, 42%);
--ee-promo-banner-ribbon__back: hsl(181, 56%, 37%);
--ee-promo-banner-ribbon__dark: hsl(181, 51%, 27%);
--ee-promo-banner-ribbon__text: hsl(181, 51%, 0%);
--ee-promo-banner-ribbon__link: hsl(181, 51%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(181, 51%, 90%);
}
.ee-promo-banner-ribbon-lite-blue-dv,
.ee-promo-upcoming-promotions-main-dv.lite-blue {
--ee-promo-banner-ribbon__main: hsl(206, 61%, 70%);
--ee-promo-banner-ribbon__back: hsl(206, 56%, 65%);
--ee-promo-banner-ribbon__dark: hsl(206, 51%, 55%);
--ee-promo-banner-ribbon__text: hsl(206, 61%, 5%);
--ee-promo-banner-ribbon__link: hsl(206, 61%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(206, 61%, 90%);
}
.ee-promo-banner-ribbon-blue-dv,
.ee-promo-upcoming-promotions-main-dv.blue {
--ee-promo-banner-ribbon__main: hsl(211, 67%, 36%);
--ee-promo-banner-ribbon__back: hsl(211, 62%, 31%);
--ee-promo-banner-ribbon__dark: hsl(211, 57%, 21%);
--ee-promo-banner-ribbon__text: hsl(211, 67%, 100%);
--ee-promo-banner-ribbon__link: hsl(211, 67%, 90%);
--ee-promo-banner-ribbon__link--hover: hsl(211, 67%, 80%);
}
.ee-promo-banner-ribbon-violet-dv,
.ee-promo-upcoming-promotions-main-dv.violet {
--ee-promo-banner-ribbon__main: hsl(253, 22%, 38%);
--ee-promo-banner-ribbon__back: hsl(253, 17%, 33%);
--ee-promo-banner-ribbon__dark: hsl(253, 12%, 23%);
--ee-promo-banner-ribbon__text: hsl(253, 22%, 100%);
--ee-promo-banner-ribbon__link: hsl(253, 22%, 90%);
--ee-promo-banner-ribbon__link--hover: hsl(253, 22%, 80%);
}
.ee-promo-banner-ribbon-purple-dv,
.ee-promo-upcoming-promotions-main-dv.purple {
--ee-promo-banner-ribbon__main: hsl(311, 40%, 29%);
--ee-promo-banner-ribbon__back: hsl(311, 35%, 24%);
--ee-promo-banner-ribbon__dark: hsl(311, 30%, 14%);
--ee-promo-banner-ribbon__text: hsl(311, 40%, 100%);
--ee-promo-banner-ribbon__link: hsl(311, 40%, 90%);
--ee-promo-banner-ribbon__link--hover: hsl(311, 40%, 80%);
}
.ee-promo-banner-ribbon-pink-dv,
.ee-promo-upcoming-promotions-main-dv.pink {
--ee-promo-banner-ribbon__main: hsl(349, 77%, 81%);
--ee-promo-banner-ribbon__back: hsl(349, 72%, 76%);
--ee-promo-banner-ribbon__dark: hsl(349, 67%, 66%);
--ee-promo-banner-ribbon__text: hsl(349, 77%, 5%);
--ee-promo-banner-ribbon__link: hsl(349, 77%, 10%);
--ee-promo-banner-ribbon__link--hover: hsl(349, 77%, 90%);
}
.ee-promo-banner-ribbon-main-dv {
background: var(--ee-promo-banner-ribbon__main);
}
.ee-promo-banner-ribbon-back-dv {
background: var(--ee-promo-banner-ribbon__back);
}
.ee-promo-banner-ribbon-arrow-top-dv,
.ee-promo-banner-ribbon-arrow-bottom-dv {
border-right: 30px solid var(--ee-promo-banner-ribbon__back);
}
.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-top-dv,
.ee-promo-banner-ribbon-back-right-dv .ee-promo-banner-ribbon-arrow-bottom-dv {
border-left: 30px solid var(--ee-promo-banner-ribbon__back);
}
.ee-promo-banner-ribbon-skew-dv {
background: var(--ee-promo-banner-ribbon__dark);
}
.ee-promo-banner-ribbon-main-dv .ee-promo-banner-text-dv {
color: var(--ee-promo-banner-ribbon__text);
}
.ee-promo-banner-plain-text-dv .ee-promo-banner-main-dv {
margin: 0 0 2em;
}
.ee-promo-banner-plain-text-dv .ee-promo-banner-plain-text-h4 {
margin: 0 0 .5em;
} #ee-upcoming-promotions-dv{
display: grid;
min-width: 360px;
}
.ee-upcoming-promotions-container-dv {
display: inline-block;
padding: 0;
margin: 0 0 20px;
width: 100%;
}
.ee-promo-upcoming-promotions-main-dv {
padding: 2rem 2rem 1.5rem;
background: #EEEEEE;
margin:.5em 0;
}
.ee-upcoming-promotions-container-dv .ee-upcoming-promotions-h5,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-text-pg,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-additional-details-pg {
margin: 0 0 .5em;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv {
background-color: var(--ee-promo-banner-ribbon__main);
color: var(--ee-promo-banner-ribbon__text);
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv p,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li {
color: var(--ee-promo-banner-ribbon__text);
margin-block-end: 1rem;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a {
color: var(--ee-promo-banner-ribbon__link);
text-decoration: underline;
text-underline-offset: .25rem;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a:hover,
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv ul li a:active {
color: var(--ee-promo-banner-ribbon__link--hover);
text-decoration: none;
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-main-dv .currency-code {
color: var(--ee-promo-banner-ribbon-color--currency-code);
}
.ee-upcoming-promotions-container-dv .ee-promo-upcoming-promotions-dates-dv.smaller-text {
color: hsla(0, 0%, 50%, .75);
}