/* CHRISTMAS */
/* Combined Styles for Overlay with Snow Background */
.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /*background: linear-gradient(to right, rgba(255, 0, 0, 0.3), rgba(0, 128, 0, 0.3));*/
	background: linear-gradient(to right, rgba(255,255,255,0.50), rgba(200, 24, 136, 0));
    overflow: hidden; /* To contain snowflakes within the container */
	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.overlay-container:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: url("//d39ldsmboekjvi.cloudfront.net/images/holidays/christmas/xmas-s1.png"), 
                      url("//d39ldsmboekjvi.cloudfront.net/images/holidays/christmas/xmas-s2.png"), 
                      url("//d39ldsmboekjvi.cloudfront.net/images/holidays/christmas/xmas-s3.png");
    animation: snow 10s linear infinite;
}

@keyframes snow {
    0% { background-position: 0 0px, 0 0px, 0 0; }
    50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
    100% { background-position: 500px 1000px, 200px 400px, -100px 300px; }
}
#menu:not(.uk-active) {
	background-color:transparent;
	border:none;
	box-shadow: none;
}
@media(min-width:768px) {
	.hero {
		background-image:url('../../../ecom/img/bg_hero_christmas.jpg');
		background-size: cover;
		background-position: top center;
	}
}
/* Styles for Coupon Code Container */
.coupon-container {
    position: fixed;
    top: 39px;
    left: -65px;
	z-index: 60;
    height: 100px; /* Adjust if needed for the height of the Santa image */
    width: 100px; /* Initially, width only for the Santa image */
    transition: all 0.5s ease; /* Smooth transition for width */
    display: flex; /* Use flexbox for better alignment */
    align-items: center; /* Center items vertically */
    overflow: visible; /* Ensure overflow content is visible */
}
@media(max-width:767px) {
	.coupon-container {
    	top: 36px;
	}
}
/* Styles for Coupon Code */
.coupon-code {
    transition: width 0.5s ease; /* Transition for revealing the coupon */
    width: 0; /* Initially hidden */
    overflow: hidden;
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Vertical alignment */
	min-height: 100px;
	max-height: 100px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	background: linear-gradient(to left, #FFFFFF, #E8E8E8);
}

.coupon-code .coupon-text {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear 0.5s;
    margin-left: 10px; /* Spacing for the text inside coupon */
}

/* Styles for Santa Image */
.santa-image {
    height: 75px; /* Ensure this height matches the container height */
    width: 75px; /* Adjust as needed */
    flex-shrink: 0; /* Prevent the Santa image container from shrinking */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Vertical alignment */
	position: relative;
	left:-12px;
}
.santa-image img {
	animation: wobble 0.3s ease-in-out;
    animation-delay: 5s; /* Starts after 5 seconds */
    animation-iteration-count: 1; /* Run only once per cycle */
}
/* Hover effect to expand the container and reveal the coupon */
.coupon-container:hover {
    width: 300px; /* Full width */
}

.coupon-container:hover .coupon-code {
    width: 225px; /* Expand to the width of the coupon code */
}
.holidayButton, .cta-button {
	position: relative;
}
@media(min-width:768px) {
	.cta-button {
		padding-left:30px;
	}
}
.holidayButton:not(.cta-button) {
	padding-left:75px;
}
.coupon-container:hover .coupon-code .coupon-text {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
.cbtb {
	display:none;
}
@keyframes wobble-animation {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.wobble-animation {
    animation: wobble-animation 0.3s ease-in-out;
}
/* Bow Decoration */
.bow-decoration {
	position:absolute;
	left:0;
	top:0;
	height: 100%;
}