@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@keyframes tiltWiggle {
  0% {
    transform: translate(-50%, -230%) rotate(0deg);
  }

  16.67% {
    transform: translate(-50%, -230%) rotate(-45deg);
  }

  50% {
    transform: translate(-50%, -230%) rotate(45deg);
  }

  83.33% { 
    transform: translate(-50%, -230%) rotate(-45deg);
  }

  100% {
    transform: translate(-50%, -230%) rotate(0deg);
  }
}



@keyframes fadeOut{
    0%{
        opacity:0.6;
    }
    90%{
        opacity:0.6;
    }
    100%{
        opacity:0;
    }
}

    @keyframes instagramPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(203,74,33, 0);
  }
  100% {
      box-shadow: 0 0 0 100vw rgba(203,74,33, 0.7);
  }

}
/*

.phoneShine{
background:red!important;
	filter:unset!important;
	mix-blend-mode: unset!important;
}
*/
@keyframes semiCirclePopUp{
    0%{
        transform: scale(1.5) rotate(180deg);
    }
    50%{
        transform: scale(1.5) rotate(180deg);
    }
    60%{
        transform: scale(1.5) rotate(180deg);
    }
    100%{
        transform: scale(1.5) rotate(0deg);
    }
}



    @keyframes facebookPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252,245,239, 0);
  }
  100% {
    box-shadow: 0 0 0 100vw rgba(252,245,239, 0.9);
    }

}



.canastaContainer a{
    text-decoration: unset;
}


.clickedInstagram{
    animation: instagramPulse 0.55s cubic-bezier(.45,.35,.28,1) forwards;
}

.clickedFacebook{
    animation: facebookPulse 0.55s cubic-bezier(.45,.35,.28,1) forwards;
}

h1.wp-block-post-title {
    display: none;
}


main {
    width: 100%!important;
    margin: unset!important;
    padding: unset!important;
}

main .wp-block-group {
    width: 100%!important;
    height: 100%!important;
    margin: unset!important;
    padding: unset!important;
}

html body .canastaContainer {
    margin: unset!important;
    padding: unset;
    width: 100%!important;
    max-width: unset!important;
}

.entry-content {
    padding: 0!important;
    margin: unset!important;
    width: 100%!important;
    height: 100%!important;
    max-width: unset!important;
    overflow-x:clip;
}

.heroImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.heroRow {
    display: flex;
    flex-direction: row;
    background-color: #fcf5ef;
}



.heroText p, .heroText span {
    font-family: 'Montserrat';
    color: #47160d;
    font-weight: 400;
}


.heroText h1 {
    font-family: 'Anton';
    color: #47160d;
    font-size: 4.5em;
    margin: unset;
    margin-top: 11px;
}

.heroText {
    width: 40%;
    transform: translateX(10%);
}

.heroRow {
    display: flex;
    flex-direction: row;
    background-color: #fcf5ef;
    justify-content: center;
    align-items: center;
}

.heroImage {
    width: 30%;
    padding-right: 4vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.heroText p {
    font-size: 1em;
}


.heroText a {
    font-family: 'Anton';
    color: #fff9e6;
    background-color: #cb4a21;
    border: 1px solid #47160d;
    border-radius: 4px;
    text-decoration: unset;
    width: 250px;
    text-align: center;
    font-size: 1.6em;
    cursor: pointer;
    transform: translateY(7px);
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:clip;
    position:relative;
}

.sweepstakesContainer {
    padding-top: 13vh;
    padding-bottom: 13vh;
}



.sweepstakesContainer h2 {
    font-family: 'Anton';
    color: #47160d;
    font-size: 3.5em;
    margin: unset;
    margin-top: 11px;
    text-align: center;
}

.sweepstakesContainer>p {
    font-size: 1em;
    color: #47160d;
    font-family: 'Montserrat';
    font-weight: 400;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0 33%;
}



.sweepstakesBlurbs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    position: relative;
    height: 100%;
}


.topBlurb p {
    color: #47160d;
    font-family: 'Anton';
    font-size: 2em;
    text-align: center;
    margin: 0 auto;
}

.topBlurb {
    border-bottom: 1px solid #47160d;
    background-color: #fff9e6;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    padding: 6px 0;
    height: 29%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sweepstakeBlurb {
    margin: 0 30px;
    border: 1px solid #47160d;
    border-radius: 25px;
    width: 36%;
    aspect-ratio: 4/3;
    background-color: #ee8123;
}

.darkOrangeBlurb .topBlurb {
    background-color: #a13416;
}

.darkOrangeBlurb .topBlurb p {
    color: #fff9e6;
}

.bottomBlurb p {
    color: white;
    font-family: 'Montserrat';
    text-align: center;
    height: fit-content;
    margin: auto;
}
 
.bottomBlurb {
    display: flex;
}

.cadizContainer {
    background-color: #fcf5ef;
    margin-top: 10vh;
}

.cadizContainerHeader h2 {
    font-family: 'Anton';
    font-size: 4em;
    margin: unset;
    color: #47160d;
    text-align: center;
    padding: 60px 0;
}



.dates {
    width: 60%;
    display: flex;
    flex-direction: row;
}   

.dateBlurb {
    display: flex;
    flex-direction: column;
    padding: 0 32px;
}

.dateHeader {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.dateHeader h2 {
    font-family: 'Anton';
    font-size: 1.2em;
    color: #47160d;
    margin: unset;
}



.dateHeader p {
    margin: unset;
    color: #47160d;
    font-family: 'Montserrat';
    font-weight: 700;
}

.dateHeader h2 {
    font-family: 'Anton';
    font-size: 1.8em;
    color: #47160d;
    margin: unset;
}

.dateText p {
    color: #47160d;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 0.9em;
    margin: unset;
}


.dateLogo svg {
    width: 100%;
    height: 100%;
}

.dateLogoTop {
    width: 100%;
    height: 100%;
    display: block;
    letter-spacing: 0;
    line-height: 0;
}

.dateLogo {
    display: flex;
    width: 37px;
    height: 100%;
    flex-direction: column;
    position: relative;
    margin-right: 9px;
}

.cadizImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cadizDatesContainer {
    display: flex;
    flex-direction: row;
    padding: 0 9%;
    padding-top: 7vh;
}


.cadizImageContainer {
    width: 40%;
    height: 50%;
    margin: auto;
}


.dateLogoBottom {
    width: 50px;
    height: 21px;
    position: absolute;
    top: calc(100% - 4px);
    left: calc(50% - 25px);
    transform: rotate(0deg);
    transform-origin: 52% -75%;
    transition: all 0.35s ease-in-out;
}

.date:hover .dateLogoBottom {
    transform: rotate(270deg);
}

.date {
    display: flex;
    flex-direction: row;
    margin-bottom: 17px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.socialMediaContainer h2 {
    font-family: 'Anton';
    font-size: 2.4em;
    margin: unset;
    color: #47160d;
    text-align: center;
    padding: 60px 0;
}

.socialBlurbs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.socialBlurbs>div {
    width: 80px;
    outline: none!important;
    height: 80px;
    margin: 0 5px;
    border-radius: 50%;
}
.socialBlurbs * {
    outline:none!important;
}

.socialBlurbs>div>a {
    display: block;
    width: 100%;
    height: 100%;
}

.socialMediaContainer {
    padding-bottom: 60px;
}

.gsapPin {
    display: flex;
    flex-direction: row;
    height: 50vh;
    transition: transform 0.15s ease-in-out;
}

.gsapPinActive{
   transform: translateY(50%)!important;
}

.steps {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


.fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 5px;
    background: #ee8123;
}

.innerSteps {
    width: fit-content;
    height: fit-content;
    position: relative;
    padding-left: 15px;
}

.sweepstakeBlurbContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}


.confetti{
    position: fixed;
    top:0;
    left:0;
    z-index:99;
    width:100%;
    height:100%;
    pointer-events: none;
}

.flake {
	position:fixed;
	width:50px;
	height:50px;
	background-size:cover;
}

.flake1 {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.64 19.77'%3E%3Ctitle%3ERecurso 7companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M25.64,7.33,20.87,0S20.81,10.7,0,12.44l4.77,7.33C25.58,18,25.64,7.33,25.64,7.33' style='fill:%23461710'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}


.flake2 {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.11 23.67'%3E%3Ctitle%3ERecurso 2companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M7.86,0,0,6.08s9.11,9.59,13.25,17.59l7.86-6.08C17,9.59,7.86,0,7.86,0' style='fill:%23ee8024'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.flake3 {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.09 32.54'%3E%3Ctitle%3ERecurso 3companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M6.12,32.54A5.34,5.34,0,0,1,3.6,27.68a13.89,13.89,0,0,1,1.06-4.43L4.77,23a13.62,13.62,0,0,0,.71-2.47,4.74,4.74,0,0,1-1.71.4A3.56,3.56,0,0,1,0,18.06a3.06,3.06,0,0,1,1.06-2.74,3.66,3.66,0,0,1,3.36-.86A4.24,4.24,0,0,1,7,16.37a9.27,9.27,0,0,0,1.6-7.72A9.22,9.22,0,0,0,2.11,2.19L2.67,0a11.38,11.38,0,0,1,8.08,8.09A11.38,11.38,0,0,1,7.8,18.84h0a11.29,11.29,0,0,1-.91,4.88l-.11.3a11.81,11.81,0,0,0-.92,3.7,3.15,3.15,0,0,0,1.32,2.81ZM3.6,16.61a1.61,1.61,0,0,0-1,.39.87.87,0,0,0-.33.72c.08.5.75.88,1.42.9A3.09,3.09,0,0,0,5.28,18a2.33,2.33,0,0,0-1.42-1.38,1.09,1.09,0,0,0-.26,0' style='fill:%23d75e30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.flake4 {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.32 48.7'%3E%3Ctitle%3ERecurso 4companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M12.59,48.7,10.43,48a30.27,30.27,0,0,0,1.62-7.58,10.86,10.86,0,0,0-.64-4.11,6.31,6.31,0,0,1-5.64,1.89,5.2,5.2,0,0,1-3.63-3.09,4.35,4.35,0,0,1,.22-4.07l.15-.24.24-.13a7.34,7.34,0,0,1,8.5,1.3,10.37,10.37,0,0,0-1.68-7.4A37.4,37.4,0,0,0,6,20c-.94-1.11-1.92-2.25-2.8-3.46C1.32,13.92-.71,10,.25,5.88A7.94,7.94,0,0,1,4.51.66,5.86,5.86,0,0,1,9.67.54l-1,2a3.65,3.65,0,0,0-3.21.13,5.74,5.74,0,0,0-3,3.69C1.69,9.66,3.43,13,5,15.18c.83,1.14,1.78,2.24,2.69,3.31a39.61,39.61,0,0,1,3.79,4.94c2.27,3.7,2.79,7.69,1.41,10.75a12.36,12.36,0,0,1,1.4,6.35,31.27,31.27,0,0,1-1.72,8.17M4.15,32.52a2.24,2.24,0,0,0,.08,1.75,3,3,0,0,0,2,1.75,4.25,4.25,0,0,0,4-1.76c-.12-.15-.24-.29-.37-.43a5.24,5.24,0,0,0-5.72-1.31' style='fill:%23461710'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.flake5{
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.19 28.44'%3E%3Ctitle%3ERecurso 5companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M3,28.44A24.58,24.58,0,0,1,.29,22.17,9.5,9.5,0,0,1,.82,16,13.44,13.44,0,0,1,6.39,0L7.53,2a11.3,11.3,0,0,0-5,11.86,5.77,5.77,0,0,1,6.05-1,4.78,4.78,0,0,1,2.57,3.6A4.09,4.09,0,0,1,10,20.12a4.81,4.81,0,0,1-5.36.54,6.85,6.85,0,0,1-2.24-1.88,8.24,8.24,0,0,0,.15,2.9A22.75,22.75,0,0,0,5,27.35Zm.39-12.26a5.44,5.44,0,0,0,2.24,2.46,2.59,2.59,0,0,0,2.81-.19,1.92,1.92,0,0,0,.48-1.67,2.55,2.55,0,0,0-1.3-1.9,3.7,3.7,0,0,0-4.23,1.3' style='fill:%23ee8024'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}


.flake6{
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.64 19.77'%3E%3Ctitle%3ERecurso 7companyImgs%3C/title%3E%3Cg id='Capa_2' data-name='Capa 2'%3E%3Cg id='Capa_1-2' data-name='Capa 1'%3E%3Cpath d='M25.64,7.33,20.87,0S20.81,10.7,0,12.44l4.77,7.33C25.58,18,25.64,7.33,25.64,7.33' style='fill:%23461710'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}


.heroText a:hover::after{
    transform: rotateZ(60deg) translateY(-300%);
}


.heroText a::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translateY(300%);
    top: 0;
    pointer-events:none;
    left: 0;
    transition: transform 0.45s cubic-bezier(.47,1.08,.6,.97);
}


.openModal .headerLogo::after{
    animation:semiCirclePopUp 1.3s ease-in-out forwards;
}

.headerLogo .dateLogo {
    width: 100%;
    height: 100%;
}

.headerLogo::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fcf5ef;
    transform: scale(1.5) rotate(180deg);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.modalBackground{
    position: fixed;
    width: 100%;
    height: 100%;
    backdrop-filter: brightness(0.3) blur(2px);
    top: 0;
    left:0;
    transition:opacity 0.55s ease-in-out, background 0.55s ease-in-out;
    opacity:0;
    pointer-events: none;
    transform:translateX(300vw);
    z-index: 100;
}

.modalInner {
    border-radius: 5px;
    width: 27vw;
    height: auto;
    aspect-ratio: 1/1.2;
    background-color: #fcf5ef;
    transform-origin: left;
    transition: all 0.35s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotateY(-90deg) translate(-50%,-50%);
    filter: drop-shadow(-1px 4px 6px rgba(0,0,0,0.6));
}

.openModal{
opacity:1;
pointer-events: all;
transform: unset;
}

.dateFiller {
    width: 37px;
    margin-right:9px;
}

.openModal .modalInner{
    transform: translate(-50%,-50%);
}

.closeModal{
    opacity:0;
}

.innerSteps p {
    transition: all 0.15s ease-in-out;
    cursor: default;
}

.headerLogo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 29px;
    height: 29px;
}

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

.barImage {
    height: 50%;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

p.barInfo {
    font-family: 'Montserrat';
    color: #47160d;
    font-weight: 700;
    text-align: center;
}

h2.barName {
    font-family: 'Montserrat';
    color: #47160d;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    margin: unset;
}

.barText>a {
    font-family: 'Anton';
    color: #fff9e6;
    background-color: #cb4a21;
    border: 1px solid #47160d;
    border-radius: 4px;
    text-decoration: unset;
    width: fit-content;
    text-align: center;
    font-size: 1.2em;
    cursor: pointer;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    position: relative;
    padding: 3px 25px;
    margin: 0 auto;
}

.barText>a::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translateY(300%);
    top: 0;
    pointer-events: none;
    left: 0;
    transition: transform 0.45s cubic-bezier(.47,1.08,.6,.97);
}

.barText>a:hover::after{
    transform: rotateZ(60deg) translateY(-300%);
}

.barText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
    padding: 12px;
    box-sizing: border-box;
    transform: translateY(-11px);
}


.modalBackground.openModal .headerLogo {
    filter: drop-shadow(0px -7px 26px rgba(255,255,255,0.8));
}



/*3D PHONE*/

 @keyframes rouletteSpin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}



.phoneContentsLogo {
    position: absolute;
    top: 0%;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60px;
    height: 60px;
    transform: translate(80%,40%);
    flex-direction: column;
}

.phoneContentsLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}




.phoneMenuLine {
    width: 100%;
    height: 4px;
    background-color: #ee8123;
    border-radius: 20px;
}

.roulette {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    overflow: clip;
    transform: translateY(40%);
}

.rouletteBG {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}


.rouletteInner {
    width: 96%;
    height: 96%;
    display: block;
    animation: rouletteSpin 30s linear infinite;
}

.rouletteInner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 0;
}


.rouletteBG img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rouletteText h2 {
    font-family: 'Montserrat';
    color: rgba(161,52,22,1);
    font-weight: 700;
    font-size: 1.4em;
    text-align: center;
    padding: 0 12%;
}


.rouletteText p, .rouletteText span {
    color: rgba(70,23,16,1);
    font-family: 'Montserrat';
    font-weight: 600;
    text-align: center;
    padding: 0 9%;
    display: block;
    margin: 14px auto;
    font-size: 0.7em;
}




.rouletteText a {
    display: block;
    text-align: center;
    font-family: 'Montserrat';
    font-weight: 600;
    color: white;
    background-color: #ee8123;
    width: fit-content;
    padding: 13px 19%;
    border-radius: 50px;
    font-size: 1em;
    margin: 0 auto;
    margin-top: 10%;
    text-decoration: unset;
}

.firstRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile {
    width: 60%;
    aspect-ratio: 63 / 130;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
}


 @keyframes rouletteSpin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

.phoneContents {
    height: 100%;
    width: 100%;
    background-color: #fbf5ef;
    background-image: url('/wp-content/uploads/2026/01/bgC.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    position: relative;
    transform: scale(0.95);
}

.phoneMenu {
    position: absolute;
    top: 0%;
    left: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 30px;
    height: 27px;
    transform: translate(-250%,150%);
    flex-direction: column;
}

.phoneMenuLine {
    width: 100%;
    height: 4px;
    background-color: #ee8123;
    border-radius: 20px;
}

.roulette {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    overflow: clip;
    transform: translateY(40%);
}

.rouletteBG {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.rouletteContainer {
    height: 40%;
    width: 100%;
    overflow: clip;
}

.rouletteInner {
    width: 96%;
    height: 96%;
    display: block;
    animation: rouletteSpin 30s linear infinite;
}

.rouletteInner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 0;
}


.rouletteBG img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.divider {
    width: 100%;
    background-color: #d7c9c2;
    height: 1px;
}


.firstRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.face {
    position: absolute;
    transform-style: preserve-3d;
}

.face img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.face1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Camera Mobile */

.contentCam {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 25%;
    height: 5.2%;
    z-index: 10;
    transform: translate(-50%, 5%) translateZ(-2.5px);
}

.backgroundCam {
    width: 100%;
    height: 100%;
    background-color: #2a2727;
    transform: translateZ(0px);
}

.webCam {
    position: absolute;
    top: 52%;
    left: 100%;
    transform: translate(-180%, -15%);
    width: 10px;
    height: 10px;
    background: linear-gradient(to right, #0d0d0d 0%, #4d4d4d 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 2px #000;
}

.flashCam {
    background: linear-gradient(45deg, #3558a9 0%, #5b81d2 100%);
    border-radius: 50%;
    width: 60%;
    height: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Camera Mobile */

.videoMobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: clip;
    border-radius: 70px;
    transform: translateZ(-4px);
}

.imgFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.face2 {
    width: 75.4%;
    height: 5.3%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -49%) translateZ(-19px) rotateX(-90deg);
}

.face2 .borderTopRight {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 8.5%;
    transform-origin: left bottom;
    transform: translateX(-15.7%) rotateY(-20deg);
}

.face2 .borderTopRightCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: left bottom;
    transform: translateX(70%) translateY(0%) translateZ(6px) rotateY(-39deg);
}

.face2 .borderTopLeft {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: right top;
    transform: translateX(-94%) rotateY(20deg);
}

.face2 .borderTopLeftCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: right top;
    transform: translateX(-172%) translateY(0%) translateZ(6px) rotateY(39deg);
}

.face2, .face2 .borderTopRight, .face2 .borderTopLeft, .face2 .borderTopLeftCorner, .face2 .borderTopRightCorner {
    border-bottom: 1px solid #47160d;
}

.face3 {
    width: 10.9%;
    height: 88.2%;
    top: 50%;
    left: 100%;
    transform: translate(-56%, -50%) translateZ(-19px) rotateY(-88deg);
}

.face3 .borderRightTop {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.2%;
    transform-origin: right bottom;
    transform: translateY(-94%) translateX(-3.5%) rotateX(-20deg) translateZ(0.5px);
}

.face3 .borderRightBottom {
    background-color: rgb(238, 129, 35);
    top: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.1%;
    transform-origin: left top;
    transform: translateY(-12%) translateX(-5%) rotateX(20deg);
}

.face3, .face3 .borderRightTop, .face3 .borderRightBottom {
    border-left: 1px solid #47160d;
}

/* Button Unlock Right Side */

.face3 .unlock {
    position: absolute;
    width: 50%;
    height: 14%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transform-style: preserve-3d;
}

.unlock .buttonUnlock {
    background-color: rgb(216, 94, 49);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    filter: drop-shadow(-1px 3px 4px rgba(0, 0, 0, 0.15));
}

.buttonUnlock1 { transform: translateZ(-1px); }
.buttonUnlock2 { transform: translateZ(-1.5px); }
.buttonUnlock3 { transform: translateZ(-2px); }
.buttonUnlock4 { transform: translateZ(-2.5px); }
.buttonUnlock5 { transform: translateZ(-3px); }
.buttonUnlock6 { transform: translateZ(-3.5px); }
.buttonUnlock7 { transform: translateZ(-4px); }

/* Button Unlock Right Side */

/* Button SIM */

.face3 .sim {
    position: absolute;
    width: 50%;
    height: 14%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -200%);
    transform-style: preserve-3d;
}

.sim .buttonSim {
    background-color: rgb(216, 94, 49);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
    position: absolute;
    border: 1px solid #00000024;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, .4), 0 0 1px rgba(255, 255, 255, .7);
}

.buttonSim .pointSim {
    background-color: black;
    position: absolute;
    top: 100%;
    left: 50%;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -250%);
}

/* Button SIM */

.face4 {
    width: 10.9%;
    height: 88.2%;
    top: 50%;
    left: 0;
    transform: translate(-44%, -50%) translateZ(-21px) rotateY(-90deg);
}

.face4 .borderLeftTop {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.2%;
    transform-origin: left bottom;
    transform: translateY(-94%) translateX(0.5%) rotateX(20deg);
}

.face4 .borderLeftBottom {
    background-color: rgb(238, 129, 35);
    top: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.1%;
    transform-origin: left top;
    transform: translateY(-9%) translateX(0.5%) rotateX(-20deg);
}

.face4, .face4 .borderLeftTop, .face4 .borderLeftBottom {
    border-left: 1px solid #47160d;
}

/* Button Volume Plus */

.face4 .volumePlus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -225%);
    width: 50%;
    height: 10%;
    transform-style: preserve-3d;
}

.face4 .buttonVolume {
    background-color: rgb(216, 94, 49);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    filter: drop-shadow(-1px 3px 4px rgba(0, 0, 0, 0.15));
}

.buttonVolume1 { transform: translateZ(1px); }
.buttonVolume2 { transform: translateZ(1.5px); }
.buttonVolume3 { transform: translateZ(2px); }
.buttonVolume4 { transform: translateZ(2.5px); }
.buttonVolume5 { transform: translateZ(3px); }
.buttonVolume6 { transform: translateZ(3.5px); }
.buttonVolume7 { transform: translateZ(4px); }

/* Button Volume Plus */

/* Button Volume Minus */

.face4 .volumeMinus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 50%;
    height: 10%;
    transform-style: preserve-3d;
}

/* Button Volume Minus */

/* Sound Box */

.face4 .sound {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 290%);
    width: 50%;
    height: 5%;
    transform-style: preserve-3d;
}

.sound .boxSound {
    background-color: rgb(216, 94, 49);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    position: absolute;
    border: 1px solid #00000024;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, .4), 0 0 1px rgba(255, 255, 255, .7);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    padding: 2px 3px;
}

.boxSound .outSound {
    width: 60%;
    height: 100%;
    background-color: black;
    border-radius: 5px;
}

/* Sound Box */

.face5 {
    width: 75.4%;
    height: 5.3%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -56%) translateZ(-20px) rotateX(90deg);
}

.face5 .imgBottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.imgBottom img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.face5 .borderBottomRight {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: left top;
    transform: translateX(-7.7%) rotateY(-20deg);
}

.face5 .borderBottomRightCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: left top;
    transform: translateX(70%) translateY(0%) translateZ(6px) rotateY(-39deg);
}

.face5 .borderBottomLeft {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: right bottom;
    transform: translateX(-94%) rotateY(20deg);
}

.face5 .borderBottomLeftCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: right bottom;
    transform: translateX(-172%) translateY(0%) translateZ(6px) rotateY(39deg);
}

.face5, .face5 .borderBottomRight, .face5 .borderBottomLeft, .face5 .borderBottomLeftCorner, .face5 .borderBottomRightCorner {
    border-top: 1px solid #47160d;
}

.face5 .contentBottom {
    background-color: black;
    width: 100%;
    height: 100%;
    transform: translateZ(2px);
    position: absolute;
    top: 0;
    left: 0;
}

/* Bottom Left Decoration */

.face5 .leftDecoration {
    width: 18%;
    height: 55%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(100%, -50%);
    background-color: black;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
}

.bulletLeft, .bulletRight {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.bulletRight .bullet {
    width: 1px;
    height: 100%;
    background-color: #c7c7c7;
    transform: rotate(-15deg);
    margin-right: 2px;
}

.bulletLeft .bullet {
    width: 1px;
    height: 100%;
    background-color: #c7c7c7;
    transform: rotate(15deg);
    margin-right: 2px;
}

/* Bottom Left Decoration */

/* Mobile Charger */

.face5 .charger {
    width: 20%;
    height: 35%;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid black;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: 2px solid black;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, .4), 0 0 1px rgba(255, 255, 255, .7);
}

.mobileCharger {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #614e4e;
    box-shadow: inset 0 1px 0 #000;
}

/* Mobile Charger */

/* Bottom Right Decoration */

.face5 .rightDecoration {
    width: 18%;
    height: 55%;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-200%, -50%);
    background-color: black;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bottom Right Decoration */

.face6 {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transform: translate(-50%, -50%) translateZ(-28px);
}

.phoneShine {
    content: '';
    position: absolute;
    z-index:10;
    top: 0;
    left: 0;
    width: 10%;
    height: 120%;
    background: #ffffff5c;
    transform: rotate(-25deg) translateY(0%) translateX(0px);
    mix-blend-mode: color-dodge;
    filter: blur(11px);
}

.face2, .face3, .face4, .face6 {
    background-color: rgb(238, 129, 35);
}

/* Efecto Conffeti */

.secondRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buttonConffeti {
    padding: 20px;
    border: 1px solid rgb(252, 252, 252);
    border-radius: 15px;
    background-color: rgb(53 68 133);
    font-weight: 400;
    color: rgb(242, 242, 242);
    font-family: fantasy;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.buttonConffeti:hover {
    background-color: rgb(94 107 161);
}

.dot {
    width: 10px;
    height: 10px;
}

.dot svg {
    width: 100%;
    height: 100%;
    display: block;
}


/**/

.tiltTutorial {
    display: none;
}

@media only screen and (max-width:1600px){
    .cadizContainer {
    margin-top: 30vh;
}
    .heroText h1 {
    font-size: 3.2em;
}

.heroText p {
    font-size: 0.8em;
}
.heroText span {
    font-size: 0.9em;
}
.heroImage {
    width: 450px;
    padding-right: unset;
}
.rouletteText h2 {
    font-size: 1.1em;
}

.rouletteText p, .rouletteText span {
    font-size: 0.6em;
}
.heroText a {
    width: 210px;
    font-size: 1.3em;
}
.rouletteText a {
    font-size: 0.8em;
}

.sweepstakesContainer h2 {
    font-size: 2.4em;
}
.sweepstakesContainer>p {
    font-size: 0.8em;
}

.sweepstakeBlurb {
    width: 47%;
}

.cadizContainerHeader h2 {
    font-size: 2.7em;
}

.cadizDatesContainer {
    padding: 0 6%;
    padding-top: 2vh;
    padding-bottom: 4vh;
}

.dates {
    width: 70%;
}

.dateBlurb {
    padding: 0 22px;
}

.dateLogo {
    width: 29px;
}

.dateLogoBottom {
    width: 17px;
    height: 21px;
    position: absolute;
    top: calc(100% - 4px);
    left: calc(50% - 8.5px);
    transform: rotate(0deg);
    transform-origin: 8px -10px;
    transition: all 0.35s ease-in-out;
}

.socialMediaContainer h2 {
    font-size: 1.7em;
}
.socialBlurbs>div {
    width: 70px;
    height: 70px;
}

.dateHeader p {
    margin-top: 0px;
}


.dateHeader {
    margin-bottom: 10px;
}
.modalInner {
    width: 34vw;
    max-height: 90vh;
}


.dateText p {
    font-size: 0.8em;
    white-space: nowrap;
    text-wrap: nowrap;
}

.face2 .borderTopRightCorner {
    transform: translateX(70%) translateY(0%) translateZ(5px) rotateY(-44deg);
}


.face2 .borderTopLeftCorner {
    transform: translateX(-172%) translateY(0%) translateZ(5px) rotateY(39deg);
}
.face5 .borderBottomRight {
    transform: translateX(-7.7%) rotateY(-23deg);
}

.face5 .borderBottomLeft {
    transform: translateX(-94%) rotateY(24deg);
}

.face5 {
    transform: translate(-50%, -64%) translateZ(-20px) rotateX(90deg);
}

.face4 .borderLeftBottom {
    transform: translateY(-9%) translateX(0.5%) rotateX(-30deg);
}

.face3 .borderRightBottom {
    transform: translateY(-12%) translateX(-5%) rotateX(25deg);
}

.face5 {
    transform: translate(-50%, -64%) translateZ(-20px) rotateX(90deg);
}

}


@media only screen and (max-width:1400px){
    .modalInner {
    width: 40vw;
}
}

@media only screen and (max-width:1000px){
.videoMobile {
    border-radius: 50px;
}

.face5 {
    transform: translate(-50%, -54%) translateZ(-20px) rotateX(90deg);
}


.face5 .borderBottomLeft {
    transform: translateX(-94%) rotateY(33deg);
}


.face2 .borderTopLeft {
    transform: translateX(-94%) rotateY(28deg);
}

.face5 .borderBottomRight {
    transform: translateX(-7.7%) rotateY(-35deg);
}
.webCam {
    width: 7px;
    height: 7px;
}

    .face4 .borderLeftBottom {
    transform: translateY(-9%) translateX(0.5%) rotateX(-30deg);
}

.face3 .borderRightBottom {
    transform: translateY(-12%) translateX(-5%) rotateX(25deg);
}

.face1 {
    transform: translateZ(-8px);
}

.face2 .borderTopRight {
    transform: translateX(-15.7%) rotateY(-24deg);
}

    .heroImage {
    width: 350px;
}
   .firstRow{
    height:fit-content;
    padding-top: 22px;
    flex-direction: column;

padding-bottom: 10vh;   
}
.heroText h1 br {
    display: none;
}
html .heroText {
    padding: 0 10%;
    padding-top:5vh;
}

    
    .modalInner {
    width: 60vw;
}

.dateLogoBottom {
    top: calc(100% - 11px);
}

.gsapPin {
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: unset;
    justify-content: center;
}
.modalInner .dateLogoBottom {
    top: calc(100% - 5px);
}

.gsapPinActive{
    transform:unset!important;
}

    .heroRow {
    flex-direction: column-reverse;
}

.heroText {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
}


.heroText h1 {
    text-align: center;
}

.heroText p, .heroText span {
    text-align: center;
}

.sweepstakesContainer>p {
    padding: 0 4%;
}

.fill {
    top: -14px;
    height: 5px;
    width: 100%;
}


.innerSteps {
    display: flex;
    flex-direction: row;
    padding-left:unset;
}

.innerSteps p {
    cursor: default;
    margin: 0 13px;
}

.steps {
    width: 100%;
    height: 40%;
}

.sweepstakesContainer h2 {
    font-size: 1.7em;
}

.sweepstakesBlurbs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40%;
    width:100%;
}

.date {
    width: fit-content;
    margin: 0 auto;
    padding: 0 10%;
}

.headerLogo .dateLogo {
    transform: translate(0,-50%);
}

.sweepstakeBlurb {
    width:41%;
    padding: unset;
    margin-bottom: 6vh;
}

.cadizContainerHeader h2 {
    font-size: 2.2em;
    padding: 40px 0;
}

.cadizDatesContainer {
    flex-direction: column;
}

.dates {
    flex-direction: column;
    width: 100%;
    padding: 0 1%;
}
.dateHeader h2 {
    text-align: center;
}

.dateHeader p {
    text-align: center;
}
.cadizImageContainer {
    width: 100%;
    height: auto;
    margin: auto;
}

.socialMediaContainer h2 {
    font-size: 1.2em;
    padding: 0 3%;
    padding-top: 5vh;
    padding-bottom: 3vh;
}

.socialBlurbs>div {
    width: 60px;
    height: 60px;
}

.dateText p {
    font-size: 0.8em;
    text-align: center;
}


.dateLogo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-60%, -50%);
}

.dateLogoBottom {
    width: 17px;
    height: 21px;
    position: absolute;
    top: calc(100% - 9px);
    left: calc(50% - 8.5px);
    transform: rotate(0deg);
    transform-origin: 8.3px -11px;
    transition: all 0.35s ease-in-out;
}

.firstRow {
    flex-direction: column;
}


.phoneMenu {
    width: 20px;
    height: 17px;
}


.phoneMenuLine {
    height: 3px;
}

.phoneContentsLogo {
    width: 40px;
    height: 40px;
}

.rouletteText h2 {
    font-size: 0.8em;
}
.rouletteText p, .rouletteText span {
    font-size: 0.4em;
}

.rouletteText a {
    font-size: 0.6em;
    padding: 8px 16%;
}

.date {
    margin-bottom: 25px;
    position: relative;
    margin-top: 25px;
}

.heroText{
    transform: unset;
}
.dateFiller {
    width: 0px;
    margin-right:unset;
}
}

@media only screen and (max-width:500px){
.modalBackground .dateLogo {
    transform: translateY(-50%);
}

.modalInner {
    width: 90vw;
}

.sweepstakeBlurb {
    width: 84%;
}


.cadizContainerHeader h2 {
    font-size: 2em;
    padding: 40px 5%;
}

.modalBackground {
    background-color: rgba(0,0,0,0.2);
}


.face3 .borderRightTop {
    transform: translateY(-94%) translateX(-3.5%) rotateX(-25deg) translateZ(0.5px);
}

.face4 .borderLeftTop {
    transform: translateY(-94%) translateX(0.5%) rotateX(24deg);
}

.face5 .borderBottomRight {
    transform: translateX(-7.7%) rotateY(-30deg);
}

.tiltTutorial {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-230%);
    display: block;
    animation: tiltWiggle 4s infinite ease-in-out, fadeOut 8s forwards;
    opacity: 0.6;
}


}