/** Shopify CDN: Minification failed

Line 410:4 All "@import" rules must come first

**/

  #mainSlide {
      position: relative;
      height:500px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      display: block;
  }
  .slideContainer{
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      transition-property: transform;
      transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
      box-sizing: content-box;
  }
  #mainSlide .mainSlideControls {
      position: absolute;
      bottom:0; 
      right: 0;
      z-index: 50;
      height:42px;
  }
  #mainSlide .slideArea{
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      height: 500px;
      display: grid;
      justify-content: flex-start;
      align-items: center;
      padding: 0;
      border: none;
    box-sizing:border-box;
  }
  #mainSlide .slideArea.cover{
    background-size: cover;
  }
  #mainSlide .slideArea.contain{
    background-size: contain;
  }
  #mainSlide .mainSlideControls i.fa-solid {
      background: #333;
      padding: 10px 15px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
  }
  #mainSlide .mainSlideControls i.fa-solid:hover {
      background:#CC1133;
  }
  #mainSlide .slideArea.rightImage{
      background-position:100% 50%;
  }
  #mainSlide .slideArea.leftImage{
      background-position:0% 50%;
  }
  #mainSlide .slideArea.centerImage{
      background-position:50% 50%;
  }
  
  #mainSlide .slideArea.rightText{
      justify-content: flex-end;
  }
  #mainSlide .slideArea.centerText{
      justify-content: center;
  }
  .slideContent {
      background:rgba(0,0,0,0.7);
      padding: 40px 60px 60px;
      color: #fff;
      position: relative;
      text-align: center;
      font-family: 'Montserrat', sans-serif;
     /* transition: all 1s ease;
      transition-delay: 0.4s; */
      opacity: 0;
      margin-top: 200px;
  }
  .mySwiper .swiper-wrapper{
    display:flex;
  }
  .mySwiper .swiper-wrapper > div{
    width:50%;
  }
  #mainSlide .slideArea.cover.imageSlide {
    display: flex;
    justify-content: space-around;
  }
  #mainSlide .slideArea.cover.imageSlide img{
    max-height:480px;
    max-width:100%;
  }
  #mainSlide .slideArea .sideImage{

  }
  #mainSlide .slideArea.leftText .slideContent{
      margin-left:100px;
   }
  #mainSlide .slideArea.rightText .slideContent{
      margin-right: 100px;
   }
  #mainSlide .slideArea.centerText .slideContent{
      justify-content: center;
  }
  
  .swiper-slide-active .slideContent{
      opacity: 1;
      margin-top:0;
  }
  
  .slideContent hr{
    border-color: #fff;
    margin: 5px 0;
    height: 0;
    border-bottom: 1px solid;
  }
  .slideContent .main1{
      font-size: 40px;
      font-weight: 200;
      font-style: italic;
      line-height: normal;
  }
  .slideContent .extraBold{
      font-size: 100px;
      font-weight: 900;
      line-height: 1;
      display:block;
  }
  .hpmInspire .slideContent .extraBold{
    font-size:100px;
  }
  .slideContent .details{
      display: flex;
      width:100%;
      justify-content: space-between;
      align-items:center;
  }
  .slideContent .regular{
      font-size:20px;
      font-weight: 200;
      font-style: italic;    
  }
  .slideContent .tiny{
      font-size:12px;
      font-weight: 200;
      font-style: italic;    
  }
  .slideContent a.btn{
      background:#fff;
      color:#121212;
      position: absolute;
      bottom:-10px;
      right:-50px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
  }
  .slideContent a.btn.white{
        background:#fff;
        color:#121212;
  }
  .slideContent a.btn.white:hover{
        background:#f3f3f3;
        color:#121212;
  }
  .slideContent a.btn.red{
        background:#CC1133;
        color:#fff;
  }
  .slideContent a.btn.red:hover{
      background:#941129;
  }

  .fandc .slideContent .extraBold{
      padding: 10px 0;
      display: block;
      font-size: 80px;
  }
  .fandc .slideContent .main1{
      font-size: 45px;
  }
  #mainSlide .slideArea.imageBottom{
    background-position-y: bottom;
  }
  #mainSlide .slideArea.imageTop{
    background-position-y: top;
  }
  .slideContent a.btn.easter{
    right:auto;
    left:-50px;
  }
  .sideImageMob{display:none;}

@media screen and (min-width:2000px) {
    #mainSlide, 
    #mainSlide .slideArea{
      height:700px;
      max-height: auto;
    }
    #mainSlide .slideArea.leftText .slideContent{
      margin-left: 200px;
    }
    #mainSlide .slideArea.rightText .slideContent{
      margin-right: 200px;
    }
}

  @media screen and (max-width:997px) {
      #mainSlide{
          height: 350px;
           max-height:700px;
      }
      #mainSlide .slideArea{
          height: 350px;
         max-height:700px;
      }
      .slideContent{
          padding:20px;
          margin:0;
      }
      
      
      .slideContent .details{
          display: block;
  
      }
      .slideContent .main1{
          font-size: 30px;
      }
      .slideContent .extraBold{
          font-size: 50px;
      }
        
      .slideContent .regular{
          font-size: 14px;
          display: block;
          text-align: center;
          line-height: normal;
      }
      .slideContent .tiny{
          font-size: 10px;
          text-align: center;
          display: block;
      }
      .slideContent .tiny br{
          display: none;
      }
      .slideContent a.btn{
          position:relative;
          right: auto;
          bottom: auto;
          margin-bottom: -40px;
          margin-top:10px;
          display:block;
      }
      #mainSlide .slideArea.cover.imageSlide {
        display: flex;
        flex-wrap: wrap;
      }
      #mainSlide .slideArea.cover.imageSlide img{
        max-height:480px;
        max-width:100%;
      }
      .sideImage{display:none;}
      .sideImageMob{display:block;}
      .hpmInspire .slideContent .extraBold{
        font-size:50px;
      }
      p.bigSavings{
        font-size: 70px;
      }
    #mainSlide .slideArea.midWinter, #mainSlide .slideArea.sumComing{
      align-items:start;
    }
    #mainSlide .slideArea.midWinter .slideContent, 
    #mainSlide .slideArea.sumComing .slideContent{
      margin-top:35px;
    }

    
  }
  @media screen and (max-width:576px) {
    #mainSlide, 
    #mainSlide .slideArea  {
        height: 700px;
        max-height:700px;
    }
    #mainSlide .slideArea.leftText,
    #mainSlide .slideArea.rightText,
    #mainSlide .slideArea.center{
          margin:0;
          justify-content: center;
          align-items: start;
          padding-top:20px;
    } 
    #mainSlide .slideArea.leftText .slideContent,
    #mainSlide .slideArea.rightText .slideContent,
    #mainSlide .slideArea.center .slideContent{
        margin:0
    }
    #mainSlide .slideArea.rightImage{
        background-position: 50% 50%;
    }
    .slideContent .extraBold{
          font-size: 40px;
    }
   
    .twoButtons .slideContent a.btn {
      margin-top:0;
      margin-bottom:0;
      left:auto;
      right:auto;
    }
    .twoButtons .slideContent a.btn.easter{
        margin-bottom:10px;
    }
    p.bigSavings{
      font-size: 40px;
    }

   
   
}


  .hover-panels {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 100%;   /* matches parent container height */
  }

  .panel {
    flex: 1 1 0;
    min-width: 0;
    transition: flex 1s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .panel:empty{
    display:block;
  }
  /* shrink others slightly when gallery hovered */
  .hover-panels:hover .panel {
    flex: 0.85 1 0;
  }

  /* expand hovered one */
  .hover-panels .panel:hover {
    flex: 2.3 1 0;
  }

     /* Example parent container that controls gallery height */
   .gallery-container {
     width: 100%;
     margin: 0;
     height: 100%;        /* base height */
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
   }

   /* Three Image Content Styling */
   .threeImageContent {

     z-index: 10;

   }

   /* Mobile responsive - stack images vertically */
   @media (max-width: 768px) {
     .hover-panels {
       flex-direction: column;
       gap: 8px;
     }
     
     .panel {
       flex: 1 1 auto;
       height: 200px; /* Fixed height for mobile panels */
     }
     
     .hover-panels:hover .panel {
       flex: 1 1 auto; /* Reset flex on mobile */
     }
     
     .hover-panels .panel:hover {
       flex: 1 1 auto; /* Reset flex on mobile */
     }
     
     .threeImageContent {
       padding: 20px 30px;
       max-width: 90%;
     }
   }
    @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

    .containBan{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    #xmas2025Banner{
        display: flex;
        width: 100%;
        background-image: url('/cdn/shop/files/christmas-slides.jpg?v=1763691336');
        background-size:cover;
        background-position: center;
        height:100%;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .redBanner{
        color:#fff;
        text-align: center;
        width:100%;
        background: rgb(204,17,51);
        font-size:5vw;   
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative;
        z-index: 3;
        font-family: "Permanent Marker", "Homemade Apple", "Poppins", Arial, Helvetica, sans-serif;
        line-height:1.5;
    }
    .innerBox{
        border-top:1px dashed #fff;
        border-bottom:1px dashed #fff;
        padding-bottom: 10px;
        line-height: 1.2;
        padding: 10px 20px;
    }
    .deckHalls{
      font-family: "Permanent Marker", "Homemade Apple", "Poppins", Arial, Helvetica, sans-serif;
      color: #333;
      text-align: center;
      font-size: 2vw;
    }
@media (max-width:991px){
    #xmas2025Banner{
        background-image: url('/cdn/shop/files/christmas-slides.jpg?v=1763691336');
    }
    .innerBox{
      padding-top: 5px;
    }
    .redBanner{
        font-size:10vw;
        margin-bottom: 1rem;
    }
    .deckHalls{
        font-size: 6vw;
        line-height: 1.2;
        text-align: center;
        max-width: 80%;
    }
}