*{
    margin: 0;
    padding: 0;
    touch-action: manipulation;
}

body{
    overflow-x: hidden;
    background: #005cb4;
}

@font-face {
    font-family: 'LiberatorMed';
    src: url('../fonts/Liberator-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Liberator';
    src: url('../fonts/Liberator-Heavy.otf') format('opentype'),
         url('../fonts/Liberator-Light.otf') format('opentype'),
         url('../fonts/Liberator-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Knockout';
    src: url('../fonts/Knockout.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Knockout28';
    src: url('../fonts/Knockout28.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.orrr{
    position: absolute;
    left: -4px;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 100;
    object-fit: cover;
}

.orrr {
    /* Set initial width to 0% */
    width: 0%;
    /* Set transition property to animate width changes */
    transition: width 1s ease-in-out;
    /* Define animation keyframes */
    animation: expandWidth 1s ease-in-out forwards;
  }
  
  /* Define animation keyframes */
  @keyframes expandWidth {
    from {
      width: 0%;
    }
    to {
      width: 102%;
    }
  }

  .canOrangeInitiated{
    position: absolute;
    z-index: 150;
    width: 25%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;
    cursor: pointer;
  }

  .orrr, .canOrangeInitiated {
    display: none;
  }

.originalModeCan, .clearModeCan {
    transition: transform 0.5s ease-in-out;
}

.opLoader{
    object-fit: cover;
    width: 100%;
    height: 100vh;
}

.landingpg{
    display: none;
}

main{
    max-width: 430px;
    outline: 3px solid red;
    margin: 0 auto;
}

.landing{
    display: none;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}

.orange{
    background-image: url('../images/expandOrange.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
}

.blue{
    background-image: url('../images/bluebg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
}

.coloredSections{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pitchLogo{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: -2.5em;
}

.choosechoice{
    position: absolute;
    right: 2em;
    margin-top: 2.5em;
}

footer{
    background: #d9002f;
    height: 101px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footerContent{
    display: flex;
    align-items: center;
}

.footerContent ul li{
    font-size: 14px;
}

.footerContent ul{
    list-style: none;
    display: flex;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Liberator;
    gap: 1em;
}

footer span{
    color: #ffffff;
    font-family: Liberator;
    font-size: 12px;
    align-self:start;
    /* margin-left: 1.3em; */
    font-weight: "Light" !important;
}

.pagePath{
    background: #0057ce;
}

.bluePath{
    background-image: url('../images/longbluebg.svg');
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.orangePath{
    background-image: url('../images/longorangebg.svg');
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.bannerCol{
    display: flex;
    justify-content: center;
    padding-top: 2em;
}

.bannerGroup{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sleemanLogoInstructions{
    position: absolute;
    z-index: 10;
    left: 0em;
    margin-top: -4.3em;
}

.officalPSonsers{
    margin-left: 6.5em;
    margin-top: -5em;
    width: 163px;
}

.pitchInstructionsLogo{
    position: relative;
    top: -1em;
}

.menuBtn{
    position: absolute;
    right: 1em;
    top: 6em;
    cursor: pointer;
}

.instructionsFrame{
    height: 60%;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.instructionsContent{
    font-family: 'Liberator', Knockout;
    background: #d01837;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.instructionsContent h1, .instructionsContent p{
    color: #FFFFFF;
}

.instructionsContent h1{
    font-size: 40px;
    text-align: center;
    padding-top: .2em;
    text-shadow: 
    -1px -1px 0 rgb(0, 0, 0),  
     -3px 4px 0 rgb(0, 0, 0),  
    -1px  1px 0 rgb(0, 0, 0),  
     1px  1px 0 rgb(0, 0, 0),
     0px  3px 0px rgb(0, 0, 0); /* Original bottom shadow */
     white-space: nowrap
}

.instructionsText{
    font-family: 'Knockout28';
    font-weight: light;
    font-size: 18px;
    max-width: 200px;
    text-align: center;
    margin: 0 auto;
}

.instructionsTextToBtn{
    border: 1px solid #000;
    border-radius: 30px;
    background: #fbce2f;
    color: #000000 !important;
    font-weight: bold;
    font-family: Knockout;
    text-transform: uppercase;
    height: 40px;
    width: 140px;
    line-height: 40px;
}

.arrows{
    position: relative;
    height: 90px;
    /* outline: 1px solid red; */
}

.arrows img{
    position: absolute;
}

.arrows img:first-child{
    left: 1em;
    bottom: 1em;

}

.arrows img:last-child{
    right: 1em;
    bottom: 1em;
}

.multiStepInstruction{
    display: none !important;
}

.instructionStep, .multiStep{
    object-fit: contain;
    position: relative;
    /* left: 2em;
    top: -1em; */
}

.multiStepLeft{
    position: relative;
    left: 6em;
    top: 7em;
}

.multiStepLeftMobile{
    position: relative;
    left: 6em;
    top: 5.5em;
}

.multiStepRightMobile{
    position: relative;
    top: 1em;
}

.instructionsHeader{
    min-height: 55px;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: #10572f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.instructionContainer{
    /* outline: 2px solid blue; */
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progressContainer{
    width: 80%;
    position: relative;
    top: .5em;
}

.progressbar{
    width: 100%;
    height: 4px;
    border: 2px solid #000000;
    background: #ffffff;
    border-radius: 10px;
}

.progressbarContainer{
    width: 0%;
    height: 4px;
    background: #79a656;
    border-radius: 10px;
}

.progressbarGroup{
    display: flex;
    justify-content: space-between;
}

.progressCheckpoint{
    width: 13px;
    height: 13px;
    border: 2px solid #000000;
    background: #ffffff;
    border-radius: 60px;
    position: relative;
    top: -.7em;
}

.progressCheckpoint:nth-child(2){
    position: relative;
    left: -.12em;
}

.progressCheckpoint:last-child{
    position: relative;
    right: -.5em;
}

.activeCheckpoint{
    position: relative;
    background: #7bcc6d;
}

.checkpointFlag{
    background-image: url('../images/checkpointflag.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 50px;
    height: 75px;
    transform: scale(0.4);
    top: -3.1em;
    left: -1.25em;
    position: absolute;
    z-index: 100;
    /* transition: left 0.3s ease;
    animation: moveRight 1s forwards; */
}

.progressbarGroup{
    position: relative;
}

.instructionStep {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes grow {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

/* @keyframes moveRight {
    from { left: 0; }
    to { left: 13%; }
  } */

.nextCheckpoint::before{
    /* content: "";
    background-image: url('../images/checkpointflag.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 50px;
    height: 75px;
    transform: scale(0.4);
    top: -2.7em;
    left: -1.58em;
    position: absolute; */
}

.supportPage{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Liberator', Knockout;
}

.contactUsLong{
    padding-bottom: 6em;
}

.contactUsContainer{
    background: #d01837;
    border-radius: 20px;
    height: 350px auto;
    max-height: 350px;
    overflow-y: scroll;
    width: 320px;
    margin-top: .5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contactUsContainer h1{
    color: #ffffff;
    font-size: 50px;
    text-shadow: -2px 6px 0px rgb(0, 0, 0);
    text-align: center;
    padding-top: .5em;
}

.contactUsContainer p{
    font-family: Knockout;
    font-size: 21px;
    color: #ffffff;
    text-align: center;
    padding-top: 2em;
    max-width: 250px;
    margin: 0 auto;
    cursor: pointer;
}

.contactUsBtn, .privacyBtn{
    cursor: pointer;
}

.contactUsContainer img{
    margin-top: 2em;
}

.socialmedia img{
    cursor: pointer;
}

.contactUsContainer a{
    font-family: Knockout;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    padding-top: 2em;
    max-width: 250px;
    margin: 0 auto;
}

.backToMainMenu{
    font-family: "Liberator";
    font-size: 18px;
    margin-top: 1.5em;
    cursor: pointer;
}

/* Privacy Policy */
  .privacy-policy-header {
    text-align: center;
    margin-top: 20px;
  }
  
  .privacy-policy-text {
    margin: 10px;
    line-height: 1.5;
    font-size: 14px !important;
  }
  
  .privacy-policy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
  }

  .privacy-policy-list {
    margin: 10px;
    padding-left: 20px;
  }

  .privacy-policy-header{
    color: #FFFFFF;
  }
  
  .privacy-policy-list-item {
    margin: 5px 0;
    line-height: 1.5;
    color: #ffffff;
  }

  .choosechoice {
    /* Set transition property for smooth animation */
    transition: transform 0.5s;
    /* Define animation keyframes */
    animation: growAndShrink 2s;
  }

  .bouncy{
    transition: transform 0.5s;
    /* Define animation keyframes */
    animation: growAndShrink 2s infinite;
  }

  #confetti-canvas{
    position: absolute;
    top: 0;
  }

  .instructionsTextToBtn{
    cursor: pointer;
  }

  .taylorModetext{
    color: #ffffff;
    font-family: "Liberator";
    font-size: 25px;
    max-width: 300px;
    text-align: center;
    padding-top: 1em;
  }
  
  /* Define animation keyframes */
  @keyframes growAndShrink {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }

  footer{
    z-index:999;
  }

  .mobileVideoOpening {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .mobileVideoOpening  {
    width: 100%;
    height: 900px;
  }

  .languageToggle{
    z-index: 999;
  }

  .languageToggle ul{
    list-style: none;
    display: flex;
    gap: .5em;
  }
  
  .languageToggle ul li{
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    font-family: "Liberator";
    cursor: pointer;
  }

  .langActive{
    /* color: #000 !important; */
    text-decoration: underline;
  }


  @media only screen and (max-width: 1400px){
    .progressOffset{
        width: 30% !important;
    }
  }

  @media only screen and (max-width: 1300px){
    .progressOffset{
        width: 35% !important;
    }
  }

  @media only screen and (max-width: 1100px){
    .progressOffset{
        width: 42% !important;
    }
  }

  @media only screen and (max-width: 1000px){
    .progressOffset{
        width: 50% !important;
    }
  }

  @media only screen and (max-width: 500px){
    .blue {
        background-color: #0057cf;
    }
    .sponsorLogo{
        /* margin-top: 3em;
        margin-left: -3em; */
    }
    .progressOffset{
        display: none !important;
    }
    .checkpointFlag{
        margin-left: -5px;
        margin-top: -2px;
    }
  }
  
  
  @media only screen and (max-width: 850px){
    .desktopOnlyFooter{
        display: none !important;
    }

    .instructionStep{
        transform: scale(1.1);
    }

    .mobileInstructions{
        transform: scale(1.1);
    }
    .desktopLanding{
        display: none !important;
    }
    .landing{
        display: flex;
    }
    .mobileOnly{
        display: block;
    }
    .desktopOnly{
        display: none !important;
    }
    .instructionContainer{
        margin: 0 auto;
        text-align: center;
    }
  }

  @media only screen and (max-height: 900px){
    .sponsorLogo{
        display: none;
    }
  }

  @media only screen and (min-width: 900px){
    .desktopInstructionsText, .instructionContainer {
        transform: scale(1.4);
    }
    
    .instructionContainer {
        transform: scale(1.4);
    }
    
    .sponsorLogo{
        margin-top: 13%;
        margin-left: -7em;
    }
    .mobileOnlyFooter{
        display: none !important;
    }

    .instructionStep{
        /* width: 460px; */
    }

    .instructionsText {
        padding-top: .5em;
        height: 32px;
        font-family: "Knockout";
        
    }
    .desktopLanding{
        display: flex;
        justify-content: center;
        height: 100vh;
        margin: 0 auto;
        position: relative;
    }

    .blue, .orange{
        height: auto;
    }

    .can{
        width: 50%;
    }

    .desktopLanding .icons{
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .desktopLogo{
        position: relative;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -5em;
    }

    .pitchLogo{
        position: relative;
    }

    .choosechoice{
        position: relative;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .blue{
        background-color: #0057cf;
    }

    .orange{
        background-color: #ebaf00;
    }

    .loadMode{
        position: relative;
    }

    .originalModeCan{
        position: relative;
        z-index: 50;
        cursor: pointer;
    }

    .clearModeCan{
        position: relative;
        z-index: 50;
        cursor: pointer;
    }

    footer{
        height: 50px;
        width: 100%;
        bottom: 0;
        position: fixed;
    }

    .pagePath {
        /* height: 100%; */
    }

    .arrows{
        height: 0;
    }

    .desktopInstructionsText {
        margin: 7em;
        max-width: 250px;
    width: 250px;
    min-width: 250px;
    }

    .instructionContainer{
        height: 200px;
        /* margin: 0 2em; */
        /* margin-left: 5em; */
    }

    .instructionContainer img{
        height: 200px;
        min-width: 350px;
        max-width: 350px;
        width: 350px;
        /* margin: 0 2em; */
        /* margin-left: 5em; */
    }

    .pitchInstructionsLogo{
        display: none;
    }

    .instructionsContent{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3em;
        border:2px solid #000;
        left: -2px;
    }

    .instructionsFrame{
        height: 500px;
        /* max-height: 50%; */
    }

    .arrows{
        position: absolute;
        top: 65%;
        width: 100%;
    }

    .leftArrow{
        position: absolute;
        left: 1em;
        cursor: pointer;
    }

    .rightArrow{
        position: absolute;
        right: 1em;
        cursor: pointer;
    }

    .desktopInstructionsText h1{
        font-size: 60px;
        font-family: "LiberatorMed";
    }

    .desktopInstructionsText p{
        font-size: 20px;
        text-align: center;
        /* margin: 0; */
        margin-top: 0em;
        max-width: 250px;
        font-family: "Knockout28";
    }

    .instructionsTextToBtn{
        font-size: 17px !important;
    }

    .instructionStep{
        transform: scale(1.5);
    }

    .mobileOnly{
        display: none;
    }

    .lessonTitle{
        max-width: 250px;
        text-align: center;
    }

    .instructionsTextToBtn{
        text-align: center !important;
        line-height: 22px !important;
    }

    .instructionspg{
        display: flex;
        width: 100%;
        /* justify-items: center; */
        /* flex-direction: column; */
        /* justify-content: center;
        align-items: center; */
        /* padding-top: 4em; */
        position: relative;
    }

    .appMain{
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        transform: translateY(-50%);
    }

    .instructionsFrame{
        width: 1500px;
    }

    footer span{
        align-self: center;
    }

    .footerContent{
        display: flex;
        justify-content: space-between;
        margin-left: 3em;
        margin-right: 3em;
    }

    .footerContent ul{
        display: flex;
        align-items: center;
    }

    .socialmedia{
        display: flex;
        /* margin-left: 2em; */
        gap: 1em;
    }

    .footerContent .left{
        display: flex;
    }

    footer{
        align-items: initial;
    }

    .contactUsContainer{
        width: 500px;
    }
    
    .instructionsFrame{
        position: relative;
    }

    .instructionsLogo{
        position: absolute;
        left: -0px;
        top: 0;
        min-height: 86px;
    }

    .instructionsLogo img{
        height: 86px;
    }

    .instructionsHeader {
        width: 100%;
        min-height: 86px;
        position: absolute;
        top: 0;
        top: -86px;
        right: 0;
        border: 2px solid #000;
    }

    .instructionsHeader::before{
        content: "";
        position: absolute;
        left: -.15em;
        top: -.1em;
        background: #10572f;
        height: 88px;
        width: 150px;
        border-top-left-radius: 15px;
        border: 1px solid #000000;
    }

    /* .instructionsHeader::after{
        content: "";
        position: absolute;
        left: -33px;
        top: 6px;
        background-image: url('../assets/pitchlogoinstruction.svg');
        height: 74px;
        width: 216px;
        transform: scale(0.6);
        background-size: contain;
    } */


    .progressOffset{
        width: 25%;
    }

    .progressContainer {
        width: 100%;
        position: relative;
        top: 0.5em;
        right:4em;
    }

    .progressCheckpoint {
        width: 20px;
        height: 20px;
        border: 2px solid #000000;
        border-radius: 60px;
        top: -0.9em;
    }

    .sleemanLogoInstructions{
        top: -5em;
    }

    .nextCheckpoint::before{
        left: -1.40em;
        top: -2.5em;
    }

  }

.openingSequenceDesktop{
    height: 100vh !important;
}

.openingSequence{
    height: 100vh !important;
}


body{
    background-color: #005cb4 !important;
}

.thanksforPlaying{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    color: #FFFFFF;
    margin-top: 10em;
}

.thanksforPlaying h1{
    font-family: 'Knockout';
    font-size: 64px;
    text-align: center;
}

footer{
    bottom: 0px; 
    position: absolute;
    width: 100%;
}

/* Updated Code */
.taylormadecontainer{
    margin-top: 2em;
}

.taylormadegolfballs{
    left: -5.6em;
    top: -7em;
    position: relative;
}

.officialSponserImage{
    position: absolute;
    right: 0;
    margin-left: auto;
    left: 0;
    margin-right: auto;
    margin-top: 30em;
}

.eachStepArrow{
    width: 70px;
    margin: 0 2em;
}

.stepCounterText{
    display: none;
    color: #ffffff;
    font-size: 26px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    text-align: center;
    padding: .2em 0;
    margin-bottom: .5em;
    max-width: 250px;
    min-width: 250px;
}

.importantLessonTitle {
    font-size: 40px !important;
    white-space: wrap !important;
    margin-bottom: .5em;
}

.sleemanLogoInstructions{
    cursor: pointer;
}

.lessonTextFormatted{
    font-size: 20px;
}

.appMain{
    padding-top: 4em;
}

@media only screen and (max-width: 600px){
    .sponsortextmobile{
        position: absolute;
        right: 2em;
    }

  .taylorballsseq{
    position: absolute;
    right: 0 !important;
    left: 0 !important;
    margin-top: 8em !important;
    margin-left: auto;
    margin-right: auto;
  }
  .logo2024{
    position: absolute;
    right: 0 !important;
    left: 0 !important;
    margin-top: -15em !important;
    margin-left: auto;
    margin-right: auto;
  }
  .clearLargeCanmobile{
    margin-top: -9em;
  }
  .moveupPos{
    transform: translateY(-2em);
  }
  .orangemobcan{
   margin-top: -6em !important; 
  }
  .sponsortextmobile{
    margin-top: 25em !important;
  }
}

@media only screen and (max-height: 700px){
    .sponsortextmobile{
        position: absolute;
        right: 2em;
    }

  .taylorballsseq{
    position: absolute;
    right: 0 !important;
    left: 0 !important;
    margin-top: 3.5em !important;
    margin-left: auto;
    margin-right: auto;
    width: 160px;
  }
  .logo2024{
    position: absolute;
    right: 0 !important;
    left: 0 !important;
    margin-top: -10em !important;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
  }
  .pitchLogo{
    width: 100px !important;
  }
  .clearLargeCanmobile{
    margin-top: -9em;
  }
  .moveupPos{
    transform: translateY(-2em);
  }
  .orangemobcan{
   margin-top: -5em !important; 
  }
  .sponsortextmobile{
    margin-top: 21em !important;
    width: 90px;
  }
}

@media only screen and (max-width: 900px){
    .footerContent{
        justify-content: space-around;
        transform: scale(0.9);
        padding-top: 1.3em;
    }
    .socialmedia ul{
        display: flex;
        align-items: center;
    }
    .mobileonlyFooterCopy{
        text-align: center;
        font-weight: 400;
        margin-top: .3em;
    }
    .instructionsContent{
        padding-top: 2.5em;
        padding-bottom: 2em;
    }
    .instructionspg{
        padding: 4em 0;
    }
    .mobileOnlyFooter{
        position: relative;
    }
    .movePosDown{
        transform: translateY(1em);
    }
    .moveDownClearCan{
        transform: translateY(3em);
    }
    .moveDownOriginalCan{
        transform: translateY(3em) !important;
    }
    .moveDownSponsor{
        transform: translateY(3em);
    }
    .pitchInstructionsLogo{
        opacity: 0;
        display: none;
    }
    .appMain{
        padding-top: 0 !important;
    }
    .lessonTitle{
        max-width: 380px !important;
        margin: 0 auto;
        text-align: center;
        white-space: wrap !important;
    }
}

.footerTextI, .privacyBtn{
    font-family: "Knockout";
    text-transform: uppercase;
}

@media only screen and (min-width: 1700px){
    .logoSizeLarge{
        width: 150px !important;
        margin-top: -7em;
    }
    .sponsorLogoSizeLarge{
        width: 250px !important;
        left: 3em;
        margin-top: -8em;
    }
}

.officialSponsorImageWidth{
    width: 250px !important;
}

/* Latest */
.sponsorLogo{
    display: block;
    position: absolute;
    left: 20% !important;
    top: 25%;
    transform: scale(0.7);
}

.clearCan20{
    position: relative;
}

.instructionsTextToBtn{
    background: #1e59d2;
    color: #FFFFFF !important;
    letter-spacing: 1px;
    font-size: 20px !important;
    border-radius: 8px;
    height: 27px;
    width: 124px;
    line-height: 18px !important;
}


.instructionsHeader {
    /* Define the default (English) image URL as a variable */
    --instruction-logo-url: url('../assets/pitchlogoinstruction.svg');
}

.instructionsHeader::after {
    content: "";
    position: absolute;
    left: -33px;
    top: 6px;
    /* Use the variable for the background image */
    background-image: var(--instruction-logo-url);
    height: 74px;
    width: 216px;
    transform: scale(0.6);
    background-size: contain;
}

.updateFontSize{
    font-size: 36px !important;
}



@media only screen and (min-width: 400px) and (max-width: 700px) {
    .pitchLogo{
        transform: scale(1) !important;
        width: 400px !important;
    }

}

@media only screen and (max-width: 500px){
    
    .sponsortextmobile{
        margin-top: -25em !important;
    }

    .moveDownSponsor{
        transform: translateY(0em) !important;
    }

    .instructionsFrame {
        height: 60%;
        max-width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        margin-top: 4em;
    }
    .instructionsTextToBtn{
        font-size: 14px !important;
        line-height: 28px !important;
    }
}

/* --- Loading Animation Container --- */
.opLoader {
    position: fixed; /* Position relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;    /* Cover full viewport width */
    height: 100%;   /* Cover full viewport height */
    z-index: 9999;  /* Ensure it's on top of all other content */
    background-color: #ffffff; /* Optional: Background color */
    overflow: hidden; /* Prevent scrollbars */
    /* display: block;  Let JS or media queries handle display */
}

/* --- Common Styling for Both Loading Videos --- */
.opLoader video.openingSequenceDesktop,
.opLoader video.openingSequenceMobile {
    position: absolute; /* Position relative to the .opLoader container */
    top: 50%;           /* Center vertically */
    left: 50%;          /* Center horizontally */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    z-index: 1; /* Ensure video is within the opLoader's stacking context */

    /* Default: Hide both videos initially; media queries will show the correct one */
    display: none;
}

/* --- Desktop Styles (500px and wider) --- */
@media (min-width: 500px) {
    .opLoader video.openingSequenceDesktop {
        display: block; /* Show desktop video */
        min-width: 100%;    /* Ensure it covers at least the full width */
        min-height: 100%;   /* Ensure it covers at least the full height */
        width: auto;        /* Allow width to adjust based on height */
        height: auto;       /* Allow height to adjust based on width */
        object-fit: cover; /* Make desktop video cover the screen */
    }

    .opLoader video.openingSequenceMobile {
        display: none; /* Hide mobile video on desktop */
    }
}

/* --- Mobile Styles (Less than 500px wide) --- */
@media (max-width: 499.98px) { /* Use .98 for precise less-than-500 */
    .opLoader{
        background: #f4e97f;
    }
    .opLoader video.openingSequenceDesktop {
        display: none; /* Hide desktop video on mobile */
    }

    .opLoader video.openingSequenceMobile {
        display: block; /* Show mobile video */

        /* --- Make the video smaller on mobile --- */
        /* Adjust these percentages as needed */
        max-width: 150%;   /* Limit width relative to the screen width */
        max-height: 150%;  /* Limit height relative to the screen height */

        /* Allow aspect ratio to control the final size within the max limits */
        width: auto;
        height: auto;

        /* Remove min sizes to allow shrinking below 100% */
        min-width: unset; /* Override the common style if it was set */
        min-height: unset;/* Override the common style if it was set */

        /* --- Choose how the video fits in its smaller box --- */
        /* 'cover': Fills the 90%/85% box, maintains aspect ratio, might crop video edges */
        /* 'contain': Fits the whole video inside the 90%/85% box, maintains aspect ratio, might show background bars */
        /* remove line: Browser default, often similar to 'contain' or 'fill' */
        object-fit: contain; /* Change to 'contain' or remove if 'cover' crops too much */
    }
}


@media only screen and (max-width: 450px){
    .pitchLogo{
        transform: scale(1) !important;
        width: 340px !important;
    }

    .sponsortextmobile{
        margin-top: -22em !important;
    }
}

/* --- Age Gate Styles --- */
#sh-age-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0b2343; /* Dark blue, similar to your site's potential theme */
    /* Or use a background image if you have a suitable one */
    /* background-image: url('../images/your-background.jpg'); */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Ensure it's on top */
    font-family: 'Roboto', sans-serif; /* Match font */
    color: #333; /* Default text color for inside the box */
}

.sh-age-gate-content-box {
    background-color: #ffffff;
    padding: 35px 45px;
    border-radius: 8px;
    text-align: center;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.sh-age-gate-logo {
    max-width: 160px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 25px;
}

.sh-age-gate-prompt {
    font-family: 'Roboto', sans-serif; /* Match font */
    font-weight: 500; /* Medium weight */
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #0b2343; /* Dark blue heading */
    text-transform: uppercase;
}

.sh-age-gate-legal-info {
    font-size: 0.95em;
    margin-bottom: 25px;
    color: #555;
}

.sh-age-gate-dob-inputs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 10px; /* Spacing between selects */
}

.sh-age-gate-dob-inputs select {
    padding: 12px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1; /* Allow selects to grow equally */
    font-size: 1em;
    text-align: center; /* Center text within select */
    -webkit-appearance: none; /* Basic reset for consistent look */
    -moz-appearance: none;
    appearance: none;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* Style placeholder options */
.sh-age-gate-dob-inputs select:required:invalid {
    color: #777;
}
.sh-age-gate-dob-inputs option[value=""][disabled] {
    display: none; /* Hide placeholder after selection */
}
.sh-age-gate-dob-inputs option {
    color: #333; /* Color for actual options */
}


.sh-age-gate-error-message {
    color: #D8000C; /* Error red */
    background-color: #FFD2D2; /* Light red background */
    border: 1px solid #D8000C;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.9em;
    min-height: 1.2em; /* Prevent layout shift */
    display: none; /* Hidden by default */
}

.sh-age-gate-button {
    padding: 12px 40px;
    background-color: #c8102e; /* Sleeman Red color */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: block;
    width: 100%; /* Make button full width of container */
    margin-bottom: 25px;
}

.sh-age-gate-button:hover {
    background-color: #a20d24; /* Darker red on hover */
}
.sh-age-gate-button:active {
     transform: scale(0.98); /* Slight press effect */
}

.sh-age-gate-legal-links {
    font-size: 0.8em;
    color: #666;
    margin-top: 20px;
    line-height: 1.5;
}

.sh-age-gate-legal-links a {
    color: #0b2343; /* Link color */
    text-decoration: underline;
}

.sh-age-gate-legal-links a:hover {
    color: #c8102e; /* Link hover color */
}

.sh-age-gate-legal-links p {
    margin-top: 10px;
    font-style: italic;
}

/* Make age gate hidden if JS adds this class */
.sh-age-gate-hidden {
    display: none;
}
/* --- In your CSS file --- */

/* Add !important only if necessary for debugging */
.sh-age-gate-hidden {
    display: none !important;
}