@font-face {
    font-family: 'Fjalla One';
    font-style : normal;
    font-weight: 400;
    src        : url("../../fonts/Fjalla_One/FjallaOne-Regular.ttf");
}

@font-face {
    font-family: 'Work Sans';
    font-style : normal;
    src        : url("../../fonts/Work_Sans/WorkSans-Medium.ttf");
}

.campaign_page {
    max-width: 1300px;
    width    : auto;
}

.campaign_page .item {
    padding   : 0;
    min-height: 290px;
    max-height: 500px;
    position  : relative;
}

/*------------left center cotent-------------*/
.campaign_page .item.left_center {}

.campaign_page .item.left_center img {
    display   : block;
    max-width : 100%;
    height    : auto;
    float     : left;
    max-height: 500px;
}

.campaign_page .item.left_center .information {
    position  : absolute;
    width     : 100%;
    height    : 100%;
    top       : -4px;
    text-align: center;
}

.campaign_page .item.left_center .information h1 {
    margin-top : 170px;
    font-size  : 33px;
    color      : var(--color-white);
    text-shadow: 2px 2px 8px #969696;
}

@media (max-width: 600px) {
    .campaign_page .item.left_center .information h1 {
        margin-top : 30%;
        font-size  : 33px;
        color      : var(--color-white);
        text-shadow: 2px 2px 8px #969696;
    } 
}

@media (max-width: 320px) {
    .campaign_page .item.left_center .information h1 {
        margin-top : 40%;
        font-size  : 33px;
        color      : var(--color-white);
        text-shadow: 2px 2px 8px #969696;
    } 
}

.campaign_page .item.left_center .information p {
    color    : #333;
    font-size: 20px;
}

@media (min-width: 992px) {
    .campaign_page .item.left_center .information {
        width: 60%;
        right: 14px;
    }

    .campaign_page .item.left_center .information h1 {
        margin-top: 170px;
        font-size : 40px;
        color     : var(--color-white);
    }

    .campaign_page .item.left_center .information p {
        font-size: 30px;
    }
}

/*------------default content-------------*/
.campaign_page .item.default {}

.campaign_page .item.default img {
    display   : inline-block;
    max-width : 100%;
    height    : auto;
    max-height: 500px;
}

.campaign_page .item.default .promo {
    font-size     : 18px;
    line-height   : 18px;
    font-family   : Work Sans;
    font-weight   : 400;
    background    : #333;
    color         : var(--color-white);
    letter-spacing: 1px;
    display       : inline-block;
    padding       : 10px 15px;
    position      : absolute;
    top           : 0;
    left          : 0;
    z-index       : 1;
}

.campaign_page .item.default .information {
    position  : absolute;
    width     : 100%;
    height    : 100%;
    top       : 0;
    text-align: center;
}

.campaign_page .item.default .information h2 {
    margin-top : 25%;
    font-size  : 50px;
    color      : var(--color-white);
    font-family: 'Fjalla One';
    text-shadow: 2px 2px 8px #969696;
}

.campaign_page .item.default .information p {
    color    : var(--color-white);
    font-size: 20px;
    display  : none;
}
@media(min-width: 992px){
    .campaign_page .veterans_day .information {
        padding-left: 22% !important;
        top: 15% !important;
    }

    .campaign_page .veterans_day .information h2 {
        font-size: 63px !important;
    }

    .campaign_page .veterans_day .information p {
        font-size: 27px !important;
    }
}

@media(min-width: 1200px){
    .campaign_page .veterans_day .information {
        padding-left: 15% !important;
        top: 8% !important;
    }

    .campaign_page .veterans_day .information h2 {
        font-size: 70px !important;
    }

    .campaign_page .veterans_day .information p {
        font-size: 30px !important;
    }
}

.campaign_page .veterans_day .information p {
    color    : #e8ebf1 !important;
    font-size: 20px;
    display  : none;
}


.campaign_page .item.default .promotion_expired,
.campaign_page .item.default .promotion_active {
    position: absolute;
    left    : 0;
    bottom  : 0;
}

.campaign_page .item.default .promotion_expired img,
.campaign_page .item.default .promotion_active img {
    display   : inline-block;
    max-width : 100%;
    height    : auto;
    max-height: 80px;
}

@media (min-width: 350px) {

    .campaign_page .item.default .promotion_expired img,
    .campaign_page .item.default .promotion_active img {
        max-height: 90px;
    }
}

@media (min-width: 600px) {

    .campaign_page .item.default .promotion_expired img,
    .campaign_page .item.default .promotion_active img {
        max-height: 120px;
    }
}

.campaign_page .item.default .shop_now a {
    position       : absolute;
    right          : 0;
    bottom         : 0;
    padding        : 10px 20px;
    margin         : auto;
    font-size      : 20px;
    font-weight    : bold;
    background     : #333;
    text-align     : center;
    color          : var(--color-white);
    text-decoration: none;
}

@media (min-width: 992px) {
    .campaign_page .item.default img {
        float: right;
    }

    .campaign_page .item.default .promo {
        font-size  : 20px;
        line-height: 20px;
    }

    .campaign_page .item.default .information {
        text-align  : left;
        width       : 60%;
        left        : 0;
        padding-left: 5%;
    }

    .campaign_page .item.default .information h2 {
        margin-top: 25%;
        font-size : 70px;
        color     : var(--color-white);
    }

    .campaign_page .item.default .information p {
        font-size: 35px;
        display  : block;
    }

    .campaign_page .item.default .shop_now a {
        width   : 180px;
        position: absolute;
        left    : 0;
        right   : 0;
        top     : 0;
        bottom  : auto;
    }
}

/*------------left content-------------*/
@media (min-width: 992px) {
    .campaign_page .item.left .promo {
        left : auto;
        right: 0;
    }

    .campaign_page .item.left img {
        float: left;
    }

    .campaign_page .item.left .information {
        text-align   : left;
        width        : 60%;
        right        : 0;
        padding-right: 5%;
        left         : auto;
    }

    .campaign_page .item.left .promotion_expired,
    .campaign_page .item.left .promotion_active {
        position: absolute;
        right   : 0;
        left    : auto;
    }
}

/*------------main banner-------------*/
.campaign_page .item.main_banner {
    background-color: #69bae8;
}

.campaign_page .item.main_banner .information h1 {
    color: #ffeb28;
    font-size: 50px;
    text-shadow: 2px 2px 8px #646363;
}

@media(max-width: 650px){
    .campaign_page .item.main_banner .information h1 {
        color: #ffeb28;
        font-size: 40px;
        text-shadow: 2px 2px 8px #646363;
    }
}
@media(max-width: 500px){
    .campaign_page .item.main_banner .information h1 {
        color: #ffeb28;
        font-size: 30px;
        text-shadow: 2px 2px 8px #646363;
    }
}

@media(max-width: 370px){
    .campaign_page .item.main_banner .information h1 {
        color: #ffeb28;
        font-size: 25px;
        text-shadow: 2px 2px 8px #646363;
    }
}

@media(max-width: 320px){
    .campaign_page .item.main_banner .information h1 {
        color: #ffeb28;
        font-size: 20px;
        text-shadow: 2px 2px 8px #646363;
    }
}


.campaign_page .item.main_banner .information p {
    color: var(--color-white);
}

/*------------valentine banner-------------*/
.campaign_page .item.valentines_day {
    background-color: #ffb7d9;
}

.campaign_page .item.valentines_day .promo {
    background: #f70424;
}

.campaign_page .item.valentines_day .shop_now a {
    background: #add8e6;
    color     : #333;
    ;
}

/*------------persident's banner-------------*/
.campaign_page .item.presidents_day {
    background-color: #1260a3;
}

.campaign_page .item.presidents_day .promo {
    background: #d61b27;
}

.campaign_page .item.presidents_day .information {
    text-align: center;
}

.campaign_page .item.presidents_day .shop_now a {
    background: var(--color-white);
    color     : #d61b27;
}

/*------------Women's banner-------------*/
.campaign_page .item.womens_day {
    background-color: #f06292;
}

.campaign_page .item.womens_day .promo {
    background: #000;
}

.campaign_page .item.womens_day .information {
    text-align: center;
}

.campaign_page .item.womens_day .shop_now a {
    background: var(--color-white);
    color     : #000;
}

.campaign_page .item.womens_day  .information h2 {
    margin-top: 25%;
}

/*------------ST patrick's day banner-------------*/
.campaign_page .item.st_patricks_day {
    background-color: #97eba3;
}

.campaign_page .item.st_patricks_day .promo {
    background: #ff712d;
}

.campaign_page .item.st_patricks_day .shop_now a {
    background: #ff712d;
    color     : var(--color-white);
}

/*------------Easter day banner-------------*/
.campaign_page .item.easter_day {
    background-color: #dad686;
}

.campaign_page .item.easter_day .promo {
    background: #f986ad;
}

.campaign_page .item.easter_day .shop_now a {
    background: #e45779;
    color     : var(--color-white);
}

/*------------Mother's day banner-------------*/
.campaign_page .item.mothers_day {
    background-color: #f272be;
}

.campaign_page .item.mothers_day .promo {
    background: #ffe270;
    color     : #333;
}

.campaign_page .item.mothers_day .shop_now a {
    background: #ffe270;
    color     : #333;
}

/*------------Memorial day banner-------------*/
.campaign_page .item.memorial_day {
    background-color: #3c3b6e;
}

.campaign_page .item.memorial_day .promo {
    background: #B22234;
}

.campaign_page .item.memorial_day .shop_now a {
    background: #941323;
}

/*------------father's day banner-------------*/
.campaign_page .item.fathers_day {
    background-color: #fef174;
}

.campaign_page .item.fathers_day .promo {
    background: #fc7454;
    color:var(--color-white);
}

.campaign_page .item.fathers_day .shop_now a {
    background: #fc7454;
    color:var(--color-white);
}

.campaign_page .item.fathers_day h2 {
    color: #fc7454 !important;
}

.campaign_page .item.fathers_day p {
    color:#68cfec !important;
    text-shadow: 1px 1px 1px #fc7453;
}


/*------------Flag day banner-------------*/
.campaign_page .item.flag_day {
    background-color: #992636;
}

.campaign_page .item.flag_day .promo {
    background: #294ed9;
}

.campaign_page .item.flag_day .shop_now a {
    background: #294ed9;
}

/*------------Independence day banner-------------*/
.campaign_page .item.independence_day {
    background-color: #c41f40;
}

.campaign_page .item.independence_day .promo {
    background: #1e2d60;
}

.campaign_page .item.independence_day .shop_now a {
    background: #1e2d60;
}

/*------------Labor day banner-------------*/
.campaign_page .item.labor_day {
    background-color: #3c3b6e;
}

.campaign_page .item.labor_day .promo {
    background: #b22234;
}

.campaign_page .item.labor_day .shop_now a {
    background: #b22234;
}

/*------------columbus day banner-------------*/
.campaign_page .item.columbus_day {
    background-color: #a6effc;
}

.campaign_page .item.columbus_day .promo {
    background: #b22234;
}

.campaign_page .item.columbus_day .shop_now a {
    background: #b22234;
}

/*------------halloween day banner-------------*/
.campaign_page .item.halloween_day {
    background-color: #f5841b;
}

.campaign_page .item.halloween_day .promo {
    background: #333;
}

.campaign_page .item.halloween_day .shop_now a {
    background: #333;
}

/*------------veterans day banner-------------*/
.campaign_page .item.veterans_day {
    background-color: #B22234 ;
}

.campaign_page .item.veterans_day .promo {
    background: #3C3B6E;
}

.campaign_page .item.veterans_day .shop_now a {
    background: #3C3B6E;
}

/*------------thanksgiving day banner-------------*/
.campaign_page .item.thanksgiving {
    background-color: #A26B35 ;
}

.campaign_page .item.thanksgiving .promo {
    background: #ED732E;
}

.campaign_page .item.thanksgiving .shop_now a {
    background: #ED732E;
}

/*------------black friday banner-------------*/
.campaign_page .item.black_friday {
    background-color: #4a4b49;
}

.campaign_page .item.black_friday .promo {
    background: #ce2733;
}

.campaign_page .item.black_friday .shop_now a {
    background: #333;
}

/*------------Cyber Monday banner-------------*/
.campaign_page .item.cyber_monday {
    background-color: #fe019a;
}

.campaign_page .item.cyber_monday .promo {
    background: #29d0fd;
}

.campaign_page .item.cyber_monday img {
    margin-top: 30px;
}

@media (max-width: 400px) {
    .campaign_page .item.cyber_monday .promo {
        font-size: 16px;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

.campaign_page .item.cyber_monday .shop_now a {
    background: #29d0fd;
}

/*------------christmas day banner-------------*/
.campaign_page .item.christmas {
    background-color: #6689c6;
}

.campaign_page .item.christmas .promo {
    background: #df2400;
}

.campaign_page .item.christmas .shop_now a {
    background: #df2400;
}


/*------------new year day banner-------------*/
.campaign_page .item.new_year {
    background-color: #03172F	;
}

.campaign_page .item.new_year .promo {
    background: #D7B030	;
}

.campaign_page .item.new_year .shop_now a {
    background: #D7B030	;
}


/*------------Giveaway day banner-------------*/
.campaign_page .item.giveaway_day {
    background-color: #156bb7;
}

.campaign_page .item.giveaway_day .promo {
    background: #3c3b6e;
}

.campaign_page .item.giveaway_day .shop_now a {
    background: #f4b406;
	/*border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;*/
}

/*------------ LGTBI day banner -------------*/
.campaign_page .item.lgtbi {
    background-color: #7B68EE;
}

.campaign_page .item.lgtbi .promo {
    background-image: linear-gradient(to left, #f651c4, #7B68EE, #3498db, #2ecc71, #FFD700);    
    background-clip: text;
    animation: color 4s linear infinite;
    background-size: 500%;
    box-shadow: 0px 0px 10px white;
}

.campaign_page .item.lgtbi .shop_now a {
    background-image: linear-gradient(to left, #f651c4, #7B68EE, #3498db, #2ecc71, #FFD700);    
    background-clip: text;
    animation: color 4s linear infinite;
    background-size: 500%;
    box-shadow: 0px 0px 10px white;
    border-radius: 0px 0px 20px 20px;
}

.campaign_page .item.lgtbi .title {
    color: transparent;
    text-align: center;
    border-radius: 20px;
    background-image: linear-gradient(to left, #f651c4, #7B68EE, #3498db, #2ecc71, #FFD700);    
    box-shadow: 0px 0px 10px white;
    background-clip: text;
    animation: color 4s linear infinite;
    background-size: 500%;    
    padding: 1rem 0rem;
    margin: 0rem 5rem 1rem 5rem;
}

.campaign_page .item.lgtbi .information .description {
    text-align: center;
    font-size: 32px;
}

@keyframes color {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}