:root {
     --width: 300px;
     --height: 600px;
}

@font-face {
     font-family: TuskerGrotesk Medium;
     src: url(fonts/TuskerGrotesk-5500Medium.ttf);
}

@font-face {
     font-family: WorkSans Medium;
     src: url(fonts/WorkSans-Medium.otf);
}

@font-face {
     font-family: WorkSans SemiBold;
     src: url(fonts/WorkSans-SemiBold.otf);
}

@font-face {
     font-family: WorkSans Regular;
     src: url(fonts/WorkSans-Regular.otf);
}

.abs{position:absolute;}
.rel{position:relative;}
.flex{display:flex;}
.center{align-items: center;justify-content: center;}
.flexEnd {justify-content: flex-end;}
.flexStart {justify-content: flex-start;}
.alignEnd {align-items: flex-end;}
.col{flex-direction: column;}
.row{flex-direction: row;}
.fullSize{width:var(--width);height:var(--height);left:0px;top:0px;}
#guide{opacity:0.5;z-index: 999;}

#frame2Div,#frame3Div {
     opacity: 0;
     display: none;
}
#frame2Div{ 
     z-index: 11;
}
#frame3Div{ 
     z-index: 12;
}

#headlineSubCTADiv,#headlineSubCTADiv2,#headlineSubCTADiv3 {
     left: 10px;
     top: 38px;
     width: 280px;
     height: 242px;
}

#frame1HeadlineContainer,#frame2HeadlineContainer,#frame3HeadlineContainer {
     width: 280px;
     height: auto;
}

#frame1Headline,#frame2Headline,#frame3Headline {
     top: 1px;
     font-family: "TuskerGrotesk Medium";
     font-size: 52px;
     letter-spacing: -0.02em;
     line-height: 1.11em;
     text-align: left;
     color: #000000;
}

#frame1SubheadlineContainer,#frame2SubheadlineContainer,#frame3SubheadlineContainer {
     width: 280px;
     height: 18px;
     margin-top: 10px;
     margin-bottom: 12px;
}

#frame1Subheadline,#frame2Subheadline,#frame3Subheadline {
     font-family: "WorkSans Medium";
     font-size: 18px;
     letter-spacing: -0.05em;
     line-height: 1em;
     text-align: left;
     color: #000000;
}

#ctaDivContainer,#ctaDivContainer2,#ctaDivContainer3 {
     width: max-content;
     height: 29px;
     border: 1px solid;
     border-radius: 15px;
     z-index: 10;
     cursor:pointer;
     padding: 7px 12px;
}



#frame1Subheadline2Container,#frame2Subheadline2Container,#frame3Subheadline2Container {
     width: auto;
     height: 15px;
}

#frame1Subheadline2,#frame2Subheadline2,#frame3Subheadline2  {
     font-family: "WorkSans SemiBold";
     font-size: 13px;
     letter-spacing: 0em;
     line-height: 1em;
     text-align: left;
     color: #000000;
     white-space: nowrap;
}

#ctaHitArea,#ctaHitArea2,#ctaHitArea3 {
     width: 103px;
     height: 28px;
     border: 1px solid;
     border-radius: 15px;
     background-color: #000000;
     opacity: 0;
}

#logoLegalDiv,#logoLegalDiv2,#logoLegalDiv3  {
     top: 489px;
     left:10px;
     width: 280px;
     height: 100px;
}

#logosDiv,#logosDiv2,#logosDiv3 {
     width: auto;
     height: 33px;
}



#logoContainer_Div,#logo2Container_Div,#logo3Container_Div {
     width: auto;
     height: 33px;
}

#logoContainer2_Div,#logo2Container2_Div,#logo3Container2_Div {
     width: auto;
     height: 22px;
     top: 5px;
}

#logoDivider,#logoDivider2,#logoDivider3 {
     width: 1px;
     height: 32px;
     margin-right: 8px;
     margin-left: 7px;
     transform: rotate(180deg);
}

#frame1Subheadline3Container,#frame2Subheadline3Container,#frame3Subheadline3Container,#frame1Subheadline3ContainerLegal{
     top: 2px;
     width: 280px;
     height: auto;
     margin-top: 11px;
}

#frame1Subheadline3,#frame2Subheadline3,#frame3Subheadline3,#frame1Subheadline3Legal {
     font-family: "WorkSans Regular";
     font-size: 9px;
     letter-spacing: -0.05em;
     line-height: 1.22em;
     text-align: left;
     color: #000000;
     
}


#frame1ImageContainer,#frame2ImageContainer,#frame3ImageContainer,#backgroundFrame1,#backgroundFrame2,#backgroundFrame3,#legalBackground {
     width: var(--width);
     height: var(--height);
}



#frame1Image2Container,#frame2Image2Container,#frame3Image2Container {
     display: block;
}

#backgroundFrame1,#backgroundFrame2,#backgroundFrame3 {
     background-color: #FFFFFF;
}

#backgroundFrame2,#exitButtonFrame3 {
     border: 1px solid #000000;
}



#legalContainer,#legalContainer2,#legalContainer3   {
     left: 2px;
     top: -6px;
     width: max-content;
     height: 9px;
}

#legalContainer2  {
     left: 5px;
     top: -7px;
}

#legalContainer3  {
     left: 5px;
     top: -7px;
}

#legalDiv1,#legalDiv2,#legalDiv3 {
     left: 4px;
     width: max-content;
     height: 11px;
     margin-top: 14px;
     display: none;
     cursor: pointer;
     z-index: 14;
}

#legalDiv2,#legalDiv3 {
     left: 1px;
     top: 1px;
}

#legalText1,#legalText2 ,#legalText3 {
     font-family: "WorkSans Regular";
     font-size: 9px;
     letter-spacing: -0.05em;
     line-height: 1.12em;
     text-align: left;
     color: #000000;
}

#arrowSVG,#arrowSVG2,#arrowSVG3 {
     left: -4px;
     top: -8px;
     width: 5px;
     height: 5px;
     margin-right: 2px;
}

#arrowSVG2,#arrowSVG3 {
     left: -1px;
     top: -9px;
}

#legalBackground {
     z-index: 15;
     display: none;
     background-color: #FFFFFF;
     border: 1px solid #000000;
     border-bottom: 1px solid #000000;
}

#closeContainer {
     left: 277px;
     top: 6px;
     width: 12px;
     height: 12px;
     cursor: pointer;
}

#frame1Subheadline3ContainerLegal,#frame2Subheadline3ContainerLegal,#frame3Subheadline3ContainerLegal {
     top: 232px;
     left: 24px;
     width: 250px;
     height: 112px;
}
#frame2Subheadline3ContainerLegal,#frame3Subheadline3ContainerLegal {
     top: 243px;
}



#frame1Subheadline3Legal,#frame2Subheadline3Legal,#frame3Subheadline3Legal {
     font-family: "WorkSans Regular";
     font-size: 12px;
     letter-spacing: -0.05em;
     line-height: 1.17em;
     text-align: center;
     color: #000000;
}

#exitButtonFrame1,#exitButtonFrame2,#exitButtonFrame3,#exitButtonLegal {
    
     cursor: pointer;
  

}

#legal1HitArea,#legal2HitArea,#legal3HitArea {
     top: -15px;
    left: -5px;
    width: 12px;
    height: 10px;
     background-color: aqua;
     opacity: 0;
}