/* picnic with santa 2026 */

:root {
  --cty-brand-santa-white:white; /* was asu gold */
  --cty-brand-santa-red: #e02500; /* was #ed3333 from santa logo */;
  --cty-brand-santa-green: #2a8436; /* was #39b54a from santa logo */;
  --cty-brand-santa-black: #211720;
  --cty-brand-santa-beige: #fffaf3;
}

.padding-top-alt { padding-top:24px; }
.padding-bottom-alt { padding-bottom:24px; }

.santa-photo-3x2 { width:100%; padding-bottom:66%; background-position:center center; background-size:cover; }

.santa-bg { background:var(--cty-brand-santa-beige); }
.santa-max-width { width:100%; max-width:1320px; background-color:white; margin:0 auto; }

.santa-bg h1 { color:var(---cty-brand-santa-red); }
.santa-bg p.intro { color:var(--cty-brand-santa-black); }
.santa-bg p.intro .fg-yellow { color:var(--cty-brand-santa-white); }

.santa-bg-navy { background:var(--cty-brand-santa-red); color:white; }

.santa-bg-navy h2 { color:var(--cty-brand-santa-white); font-size: 1.66rem; text-transform:uppercase; margin-bottom:0.25rem; margin-top:0; }
.santa-bg-navy h3 { color:var(--cty-brand-santa-white); margin-bottom:0.25rem; margin-top:0; }
.santa-bg-navy p { color:inherit; }

.santa-bg-navy .btn-brand { background-color:white; text-transform:uppercase; font-weight:600; color:#e32400; letter-spacing:0.100rem; border:1px solid #fff; transition: all 0.15s linear 0s; }
.santa-bg-navy .btn-brand { border-radius:0; font-size:19px; line-height:22px; padding:10px 20px; text-decoration:none!important; }
.santa-bg-navy .btn-brand:hover { background-color:#e32400; border-color:#fff; color:#fff; text-decoration:none!important; }



.santa-bg-white h2 { color:var(--cty-brand-santa-green); font-size: 1.66rem; text-transform:uppercase; margin-bottom:0.25rem; margin-top:0; }
.santa-bg-white h3 { color:var(--cty-brand-santa-red); margin-bottom:0.25rem; margin-top:0; }
.santa-bg-white p { color:inherit; }


/* video */

.path-video-max-width {
  max-width: 1320px!important;
  margin:0 auto;
}

.path-video-block {
  width: 100%;
  aspect-ratio: 1920 / 1080;
}

.path-video-block-video {
  width: 100%;
  height: 100%;
  display: block;
}



/* cards */

.santa-cards { margin:0; }
.santa-card { background-color:var(--cty-brand-santa-green); color:white; width:100%; height:356px; position:relative; }

.santa-image { position:absolute; z-index:1; top:0px; width:100%; height:300px; }
.santa-image-img { display:block; width:100%; height:300px; background-size:cover; background-position:center center; background-repeat:no-repeat; }
.santa-image-cover-text { 
   opacity:0; transition: all 200ms ease; overflow:hidden;
  position:absolute; z-index:1; top:0px; width:100%; height:300px;
  background-color:var(--cty-brand-santa-green);
  display:flex; 
  align-items:center;
  justify-content: center;
  padding:24px;
  text-align:center;
  font-weight: 700; font-size: 18px; line-height:1.4; text-wrap:balance;
}

.santa-card:hover .santa-image-cover-text { opacity:0.95; }


.santa-content { position:absolute; z-index:2; bottom:0px; width:100%; padding:16px 8px; }
.santa-content-headline { text-align:center; color:inherit; font-family: 'futura-pt', sans-serif; font-weight: 700; 
  font-size: 24px; line-height:1; text-wrap:balance;  }



/* image roll */

.image-roll-hold { background-color:inherit; margin-top:2rem; }

.imagerollSwiper .swiper-wrapper { width:100%; height:500px; position:relative; }

.imagerollSwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--cty-brand-santa-red);
  display: flex;
  justify-content: center;
  align-items: center;
  border:3px solid var(--cty-brand-santa-red);
}

.imagerollSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagerollSwiper .swiper-navigation {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  background-color: #e32400;
  border-radius: 30px;
  width: 96px;
  height: 48px;
}

.swiper-roll-prev, .swiper-roll-next { display:block; width:48px; height:48px; font-size:24px; line-height:48px; text-align:center; float:left; color:white; opacity:0.85; }

.swiper-roll-prev:hover { opacity:1; }
.swiper-roll-next:hover { opacity:1; }