@charset "UTF-8";
/* CSS Document */



 * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
  /* ... other styles */
  overflow-x: hidden; /* Stops horizontal breakage */
  overflow-y: auto;   /* Automatically adds vertical scroll if content is too tall */
    background-color: #000;
    background-image: url("images/texture.jpg");background-position: center top; 
    }

#row {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 100%;
	text-align: center;
}

#text {width: 100%; background-color: #fff; border-radius: 10px; overflow: hidden;}
#title {background-image: url("images/background.jpg"); background-size: 20% auto ; width: 100%; text-align: center; padding-top: 30px; padding-bottom: 50px; margin-bottom: 0px;}
p.title {font-family: "Montserrat", sans-serif; font-size: 3rem; line-height: 1rem; margin-top: 5px; margin-bottom: 0px; font-weight: 600;  }
p.smalltitle {font-family: "Square Peg", cursive; font-size: 3rem; line-height: 1rem; opacity: 0.5; padding: 0px; margin-top: 0px; margin-bottom: 25px;}
#row.ftr {padding: 50px; text-align: center;}
#row.ftr img.ftr-socials {width: 25px; height: auto; margin: 20px;}
#row.ftr img.dates {width: 100%; height: auto; clear: both; margin-top: 5px; margin-bottom: 25px;}


/* ==========================================================================
   1. BASE STYLES (Mobile First) Applies to all screens by default (0px to 767px)
   ========================================================================== */
.top-left-box {width: 50px;height: 50px;background-color: #ff0000; position: fixed;top: 0;left: 0;z-index: 9999; }

.content {position: relative; z-index: 10; color: white;text-align: center;padding: 20px 0; min-height: 100vh; display: flex;flex-direction: column;align-items: safe center;justify-content: safe center; width: 90%; margin-left: 5%; margin-right: 5%; }

#row.ftr img.ftr-logo {width: 40%; height: auto; min-width: 250px;}

.card-content {padding: 35px; width: 100%;overflow-wrap: break-word;word-wrap: break-word;background-color: #d6262b;border-radius: 15px;}
.card-content h6 {font-size: 1.5rem; color: #fff;margin-bottom: 0px;text-align: center;font-family: "Square Peg", cursive;font-weight: 300;line-height: 1rem;opacity: 0.5;}
.card-content h3 {font-size: 2rem; color: #fff;margin-bottom: 8px;text-align: center;font-family: "Montserrat", sans-serif;font-weight: 600;}
.card-content p {font-size: 1.0rem; color: #ffffff;line-height: 1.2;text-align: center;font-family: "Montserrat", sans-serif;font-weight: 500;padding-left: 25px; padding-right: 25px; opacity: 0.66;}

#title {background-image: url("images/background.jpg"); background-size: 20% auto ; width: 100%; text-align: center; padding-top: 20px; padding-bottom: 40px; margin-bottom: 0px;}
p.title {font-family: "Montserrat", sans-serif; font-size: 2rem; line-height: .75rem; margin-top: 5px; margin-bottom: 0px; font-weight: 600;  }
p.smalltitle {font-family: "Square Peg", cursive; font-size: 2rem; line-height: .75rem; opacity: 0.5; padding: 0px; margin-top: 0px; margin-bottom: 15px;}
    
p.pageintro {font-family: "Montserrat", sans-serif;font-size: 1.1rem;line-height: 1.1;color: #000;font-weight: 700;width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 25px; margin-bottom: 0px;}
p.highlight {font-family: "Montserrat", sans-serif;font-size: .9rem;line-height: 1.2;color: #fff;font-weight: 700;width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 20px; margin-bottom: 0px;background-color: #333333;border-radius: 10px; padding: 25px;}

#day {width: 48%; margin-left: 1%; margin-right: 1%; float: left; background-color: #eee; border-radius: 10px; padding-top: 15px; margin-bottom: 35px;}

#day img.artist {width: 100%; height: auto; margin-bottom: 0px;}
#day h1 {font-size: 1.35rem; font-weight: 700; border-top: solid; border-top-color: #d6262b; border-top-width: 3px; margin-top: -4px; padding-top: 5px; padding-bottom: 25px; width: 90%; margin-left: 5%; margin-right: 5%;}
#day p.date {font-size: 1.35rem;font-family: "Montserrat", sans-serif; text-transform: uppercase; font-weight: 700; margin: 0px; }
#day p.date strong {padding-left: 5px; color: #d6262b;  }
#day p.session {font-family: "Square Peg", cursive; text-transform: lowercase; font-size: 1.25rem; padding: 0px; margin-top: 0px; margin-bottom: 0px; opacity: 0.5; color: #000; line-height: 1rem;}
#day p.time {color: #d6262b; font-weight: 700;font-family: "Montserrat", sans-serif; font-size: .6rem; margin-top: 0px; margin-bottom: 20px;  }
#day p.highlight {font-family: "Montserrat", sans-serif;font-size: .85rem;line-height: 1.2;color: #fff;font-weight: 700;width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 20px; margin-bottom: 20px;background-color: #333333;border-radius: 10px; padding: 15px;}

#day p.price-date {font-family: "Square Peg", cursive; font-size: 1.25rem !important; line-height: 1rem; padding: 0px; margin-top: 0px; margin-bottom: 10px; color: #d6262b;}
#day p.price-date span {font-family: "Montserrat", sans-serif; font-size: .9rem; line-height: 1rem; margin-top: 10px; margin-bottom: 0px; font-weight: 700; color: #000; }
#day p.price-room {font-family: "Montserrat", sans-serif; font-size: 1rem; line-height: 1rem; margin-top: 0px; margin-bottom: 10px; font-weight: 700; color: #d6262b; }
#day p.price-price {font-family: "Montserrat", sans-serif; font-size: 2rem; line-height: 1.0rem; margin-top: 0px; margin-bottom: 0px; font-weight: 600; color: #000; }
#day p.price-price sup {font-size: 50%; }
#day p.price-per {font-family: "Square Peg", cursive; font-size: 1.25rem !important; line-height: 1.5rem; padding: 0px; margin-top: 0px; margin-bottom: 10px; color: #d6262b; text-transform: lowercase;}

#break {display: block;}
#break768 {display: none;}
#break1024 {display: none;}


/* ==========================================================================
   2. TABLET BREAKPOINT (768px) Applies to screens 768px wide and up (e.g., iPads, portrait tablets)
   ========================================================================== */
@media (min-width: 768px) {
.top-left-box {width: 50px;height: 50px;background-color: #ff9900; position: fixed;top: 0;left: 0;z-index: 9999; }
    
.content { width: 80%;margin-left: 10%;margin-right: 10%;}
 
#row.ftr img.ftr-logo {width: 40%; height: auto; min-width: 300px;}
.card-content h6 {font-size: 1.75rem;}
.card-content h3 {font-size: 3rem;}
.card-content p {font-size: 1.25rem;}
    #title {padding-top: 30px; padding-bottom: 50px; margin-bottom: 0px;}
p.title {font-size: 3rem; line-height: 1rem; margin-top: 5px; margin-bottom: 0px; font-weight: 600;  }
p.smalltitle {font-size: 3rem; line-height: 1rem; padding: 0px; margin-top: 0px; margin-bottom: 25px;}
    
p.pageintro {font-size: 1.25rem;line-height: 1.2;width: 90%; margin-left: 5%; margin-right: 5%;margin-top: 35px;}
p.highlight {font-size: 1.rem;line-height: 1.2;}
    
    #day {width: 48%; margin-left: 1%; margin-right: 1%; }


#day p.date {font-size: 2.25rem;}
#day p.session {font-size: 2rem; margin-bottom: 10px;}
#day p.time {font-size: 1.2rem; margin-top: 0px; margin-bottom: 20px;}
#day p.highlight {font-size: 1.25rem;line-height: 1.2;}
#day h1 {font-size: 1.75rem; font-weight: 700; border-top: solid; border-top-color: #d6262b; border-top-width: 3px; margin-top: -4px; padding-top: 10px; padding-bottom: 25px; width: 80%; margin-left: 10%; margin-right: 10%;}
    
#day p.price-date {font-size: 1.66rem !important; line-height: 1.5rem; padding: 0px; margin-top: 0px; margin-bottom: 10px; }
#day p.price-date span {font-size: 1.5rem; line-height: 1rem; margin-top: 10px; margin-bottom: 0px;}
#day p.price-room {font-size: 1.1rem; line-height: 1rem; margin-top: 10px; margin-bottom: 15px;}
#day p.price-price {font-size: 3rem; line-height: 1.25rem; margin-top: 10px; margin-bottom: 10px;}
#day p.price-price sup {font-size: 50%; }
#day p.price-per {font-size: 1.5rem !important; line-height: 1.5rem; padding: 0px; margin-top: 0px; margin-bottom: 10px;}
    
    #break {display: none;}
    #break768 {display: block;}
    #break1024 {display: none;}
}


/* ==========================================================================
   3. DESKTOP BREAKPOINT (1024px) Applies to screens 1024px wide and up (e.g., Laptops, landscape tablets)
   ========================================================================== */
@media (min-width: 1024px) {
.top-left-box {width: 50px;height: 50px;background-color: #ffff00; position: fixed;top: 0;left: 0;z-index: 9999; }
    
.content { width: 60%;margin-left: 20%;margin-right: 20%;}
#row.ftr img.ftr-logo {width: 40%; height: auto; min-width: 300px;}
    
    #day {width: 23%; margin-left: 1%; margin-right: 1%; }
    

#day p.date {font-size: 1.5rem;}
#day p.session {font-size: 1.35rem; margin-bottom: 10px;}
#day p.time {font-size: .7rem; margin-top: 0px; margin-bottom: 20px;}
#day p.highlight {font-size: .85rem;line-height: 1.2;}
#day h1 {font-size: 1.25rem; font-weight: 700; border-top: solid; border-top-color: #d6262b; border-top-width: 3px; margin-top: -4px; padding-top: 10px; padding-bottom: 25px; width: 80%; margin-left: 10%; margin-right: 10%;}
    
#day p.price-date {font-size: 2rem !important; line-height: 2rem; padding: 0px; margin-top: 0px; margin-bottom: 10px; }
#day p.price-date span {font-size: 2rem; line-height: 1rem; margin-top: 10px; margin-bottom: 0px;}
#day p.price-room {font-size: 1.25rem; line-height: 1rem; margin-top: 10px; margin-bottom: 15px;}
#day p.price-price {font-size: 4rem; line-height: 1.5rem; margin-top: 10px; margin-bottom: 10px;}
#day p.price-price sup {font-size: 50%; }
#day p.price-per {font-size: 1.75rem !important; line-height: 2rem; padding: 0px; margin-top: 0px; margin-bottom: 10px;}
    
    #break {display: none;}
    #break1024 {display: block;}
    #break768 {display: none;}
}


/* ==========================================================================
   OPTIONAL: LARGE / ULTRA-WIDE DESKTOP (1200px or 1400px) Applies to large monitors to prevent layouts from stretching infinitely
   ========================================================================== */
@media (min-width: 1200px) {
.top-left-box {width: 50px;height: 50px;background-color: #66ff00; position: fixed;top: 0;left: 0;z-index: 9999; }
    
.content { width: 50%;margin-left: 25%;margin-right: 25%;}
    #row.ftr img.ftr-logo {width: 40%; height: auto; min-width: 300px;}
    .card-content h6 {font-size: 2.5rem; }
    .card-content h3 {font-size: 4rem;}
    
    #day p.date {font-size: 1.75rem;}
#day p.session {font-size: 1.75rem; margin-bottom: 10px;}
#day p.time {font-size: .9rem; margin-top: 0px; margin-bottom: 20px;}
}