@font-face {
    font-family: 'FightThis';
    src: url('/fonts/FightThis.woff2') format('woff2'),
        url('/fonts/FightThis.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.underlink a {
    color: inherit;
    text-decoration: underline !important;
}

.touchClay{
    position: absolute;
    top: 58%;
    left: 3%;
    font-size: 100px;
}
.clayMoment{
    position: absolute;
    top: 69%;
    left: 18%;
    font-size: 120px;
}

.clayMmunity{
    position: absolute;
    top: 60%;
    left: 7%;
    font-size: 100px;
}
.clayUs{
    position: absolute;
    top: 69%;
    left: 30%;
    font-size: 125px;
}

.joinClub{
    position: absolute;
    top: 62%;
    left: 7%;
    font-size: 100px;
}
.youFriend{
    position: absolute;
    top: 71%;
    left: 20%;
    font-size: 100px;
}
@media (max-width: 875px) {
    .touchClay{
        position: absolute;
        top: 60%;
        left: 3%;
        font-size: 75px;
    }
    .clayMoment{
        position: absolute;
        top: 69%;
        left: 20%;
        font-size: 75px;
    }
    .clayMmunity{
        position: absolute;
        top: 60%;
        left: 3%;
        font-size: 75px;
    }
    .clayUs{
        position: absolute;
        top: 68%;
        left: 18%;
        font-size: 100px;
    }
    
    .joinClub{
        position: absolute;
        top: 60%;
        left: 3%;
        font-size: 65px;
    }
    .youFriend{
        position: absolute;
        top: 69%;
        left: 20%;
        font-size: 65px;
    }
}

@media (max-width: 643px) {
    .touchClay{
        position: absolute;
        top: 72%;
        left: 10%;
        font-size: 60px;
    }
    .clayMoment{
        position: absolute;
        top: 77%;
        left: 14%;
        font-size: 70px;
    }
    .clayMmunity{
        position: absolute;
        top: 72%;
        left: 8%;
        font-size: 75px;
    }
    .clayUs{
        position: absolute;
        top: 77%;
        left: 14%;
        font-size: 100px;
    }
    
    .joinClub{
        position: absolute;
        top: 72%;
        left: 4%;
        font-size: 60px;
    }
    .youFriend{
        position: absolute;
        top: 77%;
        left: 8%;
        font-size: 60px;
    }
}
@media (max-width: 480px) {
    .touchClay{
        position: absolute;
        top: 72%;
        left: 2%;
        /*text-align: center;*/
        font-size: 48px;
    }
    .clayMoment{
        position: absolute;
        top: 79%;
        left: 10%;
        font-size: 50px;
    }
    .clayMmunity{
        position: absolute;
        top: 72%;
        left: 5%;
        font-size: 48px;
    }
    .clayUs{
        position: absolute;
        top: 79%;
        left: 22%;
        font-size: 65px;
    }
    
    .joinClub{
        position: absolute;
        top: 72%;
        left: 0%;
        font-size: 45px;
    }
    .youFriend{
        position: absolute;
        top: 79%;
        left: 8%;
        font-size: 47px;
    }
}
.flicker-text {
  font-family: 'FightThis';
  color:white;
  opacity: 0;
  filter: blur(12px);
  transform-origin: center center;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  white-space: nowrap;
}

.flicker-text.flicker-active {
  animation: flickerBlur 8s ease-in-out;
  opacity: 1;
}

@keyframes flickerBlur {
  0%, 5% {
    opacity: 0;
    filter: blur(15px);
    /*transform: scale(0.8);*/
  }
  10% {
    opacity: 1;
    filter: blur(4px);
    /*transform: scale(2.2);*/
  }
  15%, 70% {
    opacity: 1;
    filter: blur(0);
    /*transform: scale(2.5);*/
  }
  85% {
    opacity: 0;
    filter: blur(6px);
    /*transform: scale(2.2);*/
  }
  100% {
    opacity: 0;
    /*filter: blur(15px);*/
    /*transform: scale(0.8);*/
  }
}



/* border: 9px solid #de84b4; <hr class="border-2 border-[#de84b4] w-full -skew-x-12 mb-2">*/
	    /*box-shadow: 0px 4px #c96ca9;*/
.popup-content {
  @apply bg-white w-[90%] max-w-sm p-6 relative shadow-lg transition-all duration-300;
}  
	  
@media (max-width: 640px) {
.popupContent {
     max-width: 90vw;       /* Use 90% of viewport width */
     width: auto;           /* Allow width to adjust */
     padding: 1.5rem;       /* Adjust padding for smaller screens */
     -skew-x-6: none;       /* Optionally remove skew on mobile for readability */
     transform: none !important; /* Disable skew on mobile */
}
}
.logo-number {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: #de84b4;
     color: white;
     font-size: 14px;
     font-weight: bold;
}
.business-logo {
}
.noShow {
     display: none;
}
/* common styles for all trailing spans */
.trail {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     background: white;
     transform: translateX(0) skewX(12deg);
     opacity: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     z-index: 0;
}
/* staggered widths, initial and final positions, and delays */
.trail:nth-child(2) {
     width: 20px;
     transform: translateX(-100%) skewX(-6deg);
     transition-delay: 0s;
}
.trail:nth-child(3) {
     width: 12px;
     transform: translateX(-50%) skewX(-6deg);
     transition-delay: 0.075s;
}
.trail:nth-child(4) {
     width: 8px;
     transform: translateX(-20%) skewX(-6deg);
     transition-delay: 0.15s;
}
/* on hover of parent group */
.group:hover .trail:nth-child(2) {
     transform: translateX(-110%);
     opacity: 1;
}
.group:hover .trail:nth-child(3) {
     transform: translateX(-40%);
     opacity: 1;
}
.group:hover .trail:nth-child(4) {
     transform: translateX(100%);
     opacity: 1;
}
h1, h2, h3, h4, h5, h6, p, span, li, a, label {
     color: #c96ca9;
     font-style: italic;
}


.fightClubChapter {
    font-family: 'FightThis';
    font-size: 50px;
    font-weight: inherit;
    letter-spacing: 4px;
    font-style: normal;
}
.fightClubSection {
    font-family: 'FightThis';
    /*font-size: 27px;*/
    font-weight: inherit;
    letter-spacing: 4px;
    font-style: normal;
}

.price-table-container {
     display: flex;
     flex-wrap: nowrap;       /* keep in one row */
     gap: 20px;               /* spacing between cards */
     margin: 20px 0;
     width: 100%;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
}
.price-table-container::-webkit-scrollbar {
height: 8px;
}
.price-table-container::-webkit-scrollbar-thumb {
background: #de84b4;
border-radius: 4px;
}
.price-table-container::-webkit-scrollbar-track {
background: #f0f0f0;
}
.member-details {
     /*text-transform: uppercase;*/
     background: white;
     color: #c96ca9;
     /*color: #de84b4;*/
     transform: skew(-6deg);
     text-align: center;
     padding: 30px;
     box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.price-card {
     flex: 1 1 0; /* each card takes equal width */
     background: #de84b4;
     color: white;
     transform: skew(-6deg);
     padding: 30px;
     min-width: 250px;
     box-shadow: 0 8px 20px rgba(0,0,0,0.2);
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-card:hover {
     transform: skew(-6deg) scale(1.05);
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.price-card h2 {
     color: white;
     margin-bottom: 5px;
     font-size: 24px;
}
.price-card .price {
     color: white;
     font-size: 32px;
     font-weight: bold;
     line-height: 36px;
}
.price-card ul {
     color: white;
     /*list-style: none;*/
     padding: 0;
     margin-bottom: 20px;
}
.price-card li {
     color: white;
     margin: 0;
}
.price-card button {
     padding: 10px 20px;
     border: none;
     background: white;
     color: #FF69B4;
     font-weight: bold;
     cursor: pointer;
     border-radius: 8px;
     transition: background 0.3s ease, color 0.3s ease;
}
.price-card button:hover {
     background: #FF69B4;
     color: white;
}
/* Animate hamburger bars into an X */
.open .bar:nth-child(1) {
     transform: rotate(45deg) translateY(10px);
}
.open .bar:nth-child(2) {
     opacity: 0;
}
.open .bar:nth-child(3) {
     transform: rotate(-45deg) translateY(-10px);
}
html {
     scroll-behavior: smooth;
}
.button-with-slashes::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px; /* start outside the button */
     width: 30px;
     height: 100%;
     background: linear-gradient(to right, #de84b4 60%, transparent 60%);
     transform: skewX(-12deg);
     transition: right 0.3s ease;
}
.button-with-slashes:hover::after {
     right: 0; /* slide in */
}
ul.white-bullets {
     list-style-type: disc;       /* show bullets */
     list-style-position: inside; /* bullets inside the text block */
     padding-left: 1rem;          /* indent text */
     color: #fff;                 /* text color */
     font-size: 1.125rem;         /* font size */
}
.pink-text {
    color: #de84b4;
}
ul.pink-bullets {
     list-style: none;       /* remove default bullets */
     padding-left: 1rem;     /* indent text */
     color: #de84b4;         /* pink bullet color */
     color: #333;            /* text color 
    font-size: 1.125rem;    /* font size */
}
ul.pink-bullets li {
     position: relative;
     /*margin-bottom: 0.5rem;*/
     padding-left: 1rem;     /* space for bullet */
}
ul.pink-bullets li::before {
     content: "•";
     color: #de84b4;         /* pink bullet color */
     position: absolute;
     left: 0;
}
.classes-container {
     /*display: flex;*/
  /*flex-wrap: nowrap;*/
  /*gap: 2rem;*/
  /*margin: 2rem 0;*/
  /*overflow-x: visible;*/
  /*overflow-y: hidden;*/
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
}
.classes-container::-webkit-scrollbar {
height: 8px;             /* custom scrollbar */
}
.classes-container::-webkit-scrollbar-thumb {
background: #de84b4;     /* scrollbar color */
border-radius: 4px;
}
.classes-container::-webkit-scrollbar-track {
background: #f0f0f0;
}
.class-box {
     /*flex: 1 1 calc(33.333% - 3rem); */
     min-width: 280px;
     max-width: 325px;
     margin-bottom: 1rem;
     /*background-color: #deb4ca;*/
     background-color: #de84b4;
     /*padding: 1rem 1.5rem;*/
     transform: skewX(-6deg);
     transition: transform 0.3s ease;
}
/* Undo skew for text inside */
.class-box h2, .class-box h3, .class-box p {
     color: white; /* white text */
     font-style: italic;/*transform: skewX(-6deg);*/
}
/* Heading */
.class-box h2, .class-box h3 {
     /*font-weight: bold;*/
  /*margin-bottom: 0.5rem;*/
     padding: 1rem 1.5rem;
     font-style: italic;
}
/* Paragraph */
.class-box p {
     padding: 1rem 1.5rem;
     line-height: 1.5;
     margin-bottom: 0.5rem;
     font-style: italic;
}
/* Hover effect for subtle lift */
.class-box:hover {
/*transform: translateY(-5px);*/
  /*background-color: #de84b4;*/
  /*transform: skewX(-12deg) translateY(-5px);*/
}
/* Desktop horizontal banner */
.banner-image {
     background-image: url('images/clay-club-pleasanton-tracy.jpeg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     width: 95%;
     height: 95%;
}

/* Mobile portrait banner */
@media (max-width: 640px) {
.banner-image {
     background-image: url('images/clay-club-pleasanton-tracy-portrait-high.png');
     /*background-size: cover;*/
     background-size: contain;
     background-position: center;
}
}

@media (max-width: 899px) {
  .hide-below-900 {
    display: none;
  }
}
.no-scroll {
  overflow: hidden;
  height: 100vh;
}
.arrow.rotate-90 {
     transform: rotate(90deg);
}
.slide-form {
     position: fixed;
     top: 0;
     bottom: 0;
     width: 100%;
     max-width: 480px;
     background: white;
     z-index: 50;
     overflow-y: auto;
     padding: 2rem;
     transition: transform 0.5s ease-in-out;
}
.right-0 {
     right: 0;
}
.left-0 {
     left: 0;
}
.translate-x-full {
     transform: translateX(100%);
}
.-translate-x-full {
     transform: translateX(-100%);
}
.close-btn {
     position: absolute;
     top: 1rem;
     right: 1rem;
     font-size: 2rem;
     color: #de84b4;
     cursor: pointer;
}
.slide-form {
@apply fixed top-0 h-full w-96 bg-white shadow-xl p-6 transform transition-transform duration-300 z-50;
}
.close-btn {
@apply absolute top-4 right-4 text-2xl font-bold text-gray-600 hover:text-black;
}
/* Just in case */
.accordion-section button {
     cursor: pointer;
}

a[href^="tel"] {
     color: inherit;
     text-decoration: none;
}
.checkbox-style input[type="checkbox"] {
     height: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
     width: 0;
}
.checkbox-margins {
     padding: 10px 0 15px 0;
     margin: 5px 0 10px 0;
     width: 100%;
}
.checkbox-style {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     column-gap: 5px;
     row-gap: 10px;
}
.checkbox-style label {
     flex-grow: 1;
     display: block;
     color: white;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
     text-align: center;
     text-transform: uppercase;
     padding: 10px 15px 10px 10px;
     transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;/*user-select: none;*/
}

@media screen and (max-width: 600px) {
.flex-start {
     flex-direction: column;
     column-gap: 5px;
     row-gap: 10px;
}
.checkbox-style label {
     padding: 5px 10px 5px 7px;
}
.checkbox-margins {
     padding: 10px 0 15px 0;
}
.flex-full {
}
.flex-full label {
}
}
.checked-class {
     color: white;
     transform: translateY(4px);
}
.clearBoth {
     clear: both;
}
.contactSection {
     margin: auto;
     max-width: 650px;
}
.dateInputFormat {
     -webkit-appearance: none;
     width: 100%;
     box-shadow: 0 4px 0 #E5E5E5;
}
.darkerGrey {
     background-color: #313637;
}
.disabler {
     cursor: not-allowed;
     filter: grayscale(100%) opacity(50%);
     pointer-events: none;
}
.equalBoxes div {
     min-height: 100%;
}
.fullCaps {
     text-transform: uppercase;
}
.grayScale {
     filter: grayscale(1);
}
.grid-container {
     /*border-radius: 15px;*/
     display: grid;
     grid-template-columns: auto auto;
     margin: auto;
     padding: 0px;
}
.grid-container div {
     padding: 12px;
     text-align: center;
}
.gridFour {
     grid-row: 4;
}
.gridThree {
     grid-row: 3;
}
.gridTwo {
     grid-row: 2;
}
.headerGrid {
     grid-column: 1/span 2;
     grid-row: 1;
}
.imageGalleryPottery {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: space-evenly;
}
.imageGalleryPottery .isotope-item a:hover > img {
     opacity: .5;
}
.imageGalleryPottery div {
     background-color: green !important;
     transform: skewX(12deg);
     border: 5px solid #edbf46;
     box-shadow: 0px 4px 0px 0px #e0b84e;
     height: 75px;
     margin: 0 3px 0 0;
     overflow: hidden;
     transition: all .5s;
     width: 75px;
}
.imageGalleryPottery div:hover {
     box-shadow: 0px 0px 0px 0px #e0b84e;
}
.imageGalleryPottery img {
     transform: skewX(12deg);
     position: relative;
     top: -20px;
     transition: all .5s;
}
.justifyLove {
     gap: 10px;
     justify-content: center;
}
.levels {
     align-items: flex-start;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
}
.levels > div {
     flex-basis: 24%;
}
.mainAtelier li {
     margin-bottom: 8px;
}
.nicdark_bg_gray {
     background-color: #cbcbcb;
}
.noRadius {
     border-radius: 0;
}
.oam_bg_black {
     background-color: black;
}
.oam_video_gallery_overlay {
     background-color: silver;
     transform: skewX(12deg);
     bottom: 0;
     cursor: pointer;
     height: 130px;
     left: 0;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     right: -20px;
     top: 0;
     transition: .5s ease;
     width: 150px;
}
.oam_video_gallery_text {
     -ms-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     color: white;
     font-family: Lucida Sans !important;
     font-size: 7em;
     /*font-size: 8em;*/
     left: 42%;
     position: absolute;
     text-align: center;
     top: 42%;
     transform: translate(-50%, -50%);
}
.videoCarousel {
     -ms-overflow-style: -ms-autohiding-scrollbar;
     -webkit-overflow-scrolling: touch;/*display: flex;*//*flex-wrap: nowrap;*/
	/*overflow-x: auto;*/
	/*padding: 10px;*/
}
.videoContainer {
     transform: skewX(-12deg);
     border: 9px solid #de84b4;
     ;
     box-shadow: 0px 4px #c96ca9;
     width: 125px;
     height: 125px;
     min-width: 125px;
     min-height: 125px;
     margin: 0 5px;
     position: relative;
     transition: all .4s ease-out;
     overflow: hidden;
}
.videoContainer:hover {
     border: 9px solid #c96ca9;
     box-shadow: 0px 0px transparent;
}
.videoContainer:hover > .oam_video_gallery_overlay {
     opacity: .5;
}
.videoContainer:hover > .oam_video_gallery_text {
     opacity: 1;
}
.videoContainer:hover > .videoItem {
     opacity: .2;
}
.videoContainerClicked {
     /*transform: skewX(-6deg);*/
     border: 9px solid #6fc191;
     box-shadow: 0px 4px #66af84;
     height: 125px;
     margin: 0 5px;
     position: relative;
     transition: all .4s ease-out;
     width: 125px;
}
.videoItem {
     transform: skewX(12deg) scale(1.25);
     opacity: 1;
     transition: all .4s ease-out;
}
.videoItemClicked {
     opacity: 1;
}
.videoPlayer {
/*border-radius: 50%;*/
}

@media only screen and (max-width: 420px) {
}

@media only screen and (max-width: 480px) {
}

@media only screen and (max-width: 550px) {
}

@media only screen and (max-width: 768px) {
.centerMobile {
     text-align: center;
}
}

@media only screen and (min-width: 550px) {
.oamieDisplay {
     display: flex;
}
}

@media only screen and (min-width:551px) and (max-width: 770px) {
.elementalColumns div.oamieDisplay {
     display: flex;
}
}

@media screen and (min-width:480px) {
.contactSection {
     max-width: 325px;
}
.contactSection {
     max-width: 325px;
}
.onMobile {
     display: none;
}
}

@media screen and (min-width:481px) {
.onMobile {
     display: none;
}
}