@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);
    }

}



/*DEFAULT STYLES*/
:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--base: #FFFFFF;
    --wp--preset--color--contrast: #111111;
    --wp--preset--color--accent-1: #FFEE58;
    --wp--preset--color--accent-2: #F6CFF4;
    --wp--preset--color--accent-3: #503AA8;
    --wp--preset--color--accent-4: #686868;
    --wp--preset--color--accent-5: #FBFAF3;
    --wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
    --wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
    --wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
    --wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
    --wp--preset--font-family--Montserrat: Montserrat, sans-serif;
    --wp--preset--font-family--fira-code: "Fira Code", monospace;
    --wp--preset--spacing--20: 10px;
    --wp--preset--spacing--30: 20px;
    --wp--preset--spacing--40: 30px;
    --wp--preset--spacing--50: clamp(30px, 5vw, 50px);
    --wp--preset--spacing--60: clamp(30px, 7vw, 70px);
    --wp--preset--spacing--70: clamp(50px, 7vw, 90px);
    --wp--preset--spacing--80: clamp(70px, 10vw, 140px);
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
    --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}

:root {
    --wp--style--global--content-size: 645px;
    --wp--style--global--wide-size: 1340px;
}

:where(body) {
    margin: 0;
}

.wp-site-blocks {
    padding-top: var(--wp--style--root--padding-top);
    padding-bottom: var(--wp--style--root--padding-bottom);
}

.has-global-padding {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

.has-global-padding > .alignfull {
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
}

.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) {
    padding-right: 0;
    padding-left: 0;
}

.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull {
    margin-left: 0;
    margin-right: 0;
}

.wp-site-blocks > .alignleft {
    float: left;
    margin-right: 2em;
}

.wp-site-blocks > .alignright {
    float: right;
    margin-left: 2em;
}

.wp-site-blocks > .aligncenter {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 1.2rem; margin-block-end: 0; }

:where(.wp-site-blocks) > :first-child {
    margin-block-start: 0; }

:where(.wp-site-blocks) > :last-child {
    margin-block-end: 0; }

:root {
    --wp--style--block-gap: 1.2rem;
}

:root :where(.is-layout-flow) > :first-child {
    margin-block-start: 0;}

:root :where(.is-layout-flow) > :last-child {
    margin-block-end: 0;}

:root :where(.is-layout-flow) > * {
    margin-block-start: 1.2rem;margin-block-end: 0;}

:root :where(.is-layout-constrained) > :first-child {
    margin-block-start: 0;}

:root :where(.is-layout-constrained) > :last-child {
    margin-block-end: 0;}

:root :where(.is-layout-constrained) > * {
    margin-block-start: 1.2rem;margin-block-end: 0;}

:root :where(.is-layout-flex) {
    gap: 1.2rem;
}

:root :where(.is-layout-grid) {
    gap: 1.2rem;
}

.is-layout-flow > .alignleft {
    float: left;
    margin-inline-start: 0;margin-inline-end: 2em;}

.is-layout-flow > .alignright {
    float: right;
    margin-inline-start: 2em;margin-inline-end: 0;}

.is-layout-flow > .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

.is-layout-constrained > .alignleft {
    float: left;
    margin-inline-start: 0;margin-inline-end: 2em;}

.is-layout-constrained > .alignright {
    float: right;
    margin-inline-start: 2em;margin-inline-end: 0;}

.is-layout-constrained > .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

.is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size);
}

body .is-layout-flex {
    display: flex;
}

.is-layout-flex {
    flex-wrap: wrap;
    align-items: center;
}

.is-layout-flex > :is(*, div) {
    margin: 0;
}

body .is-layout-grid {
    display: grid;
}

.is-layout-grid > :is(*, div) {
    margin: 0;
}

body {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--Montserrat);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 300;
    letter-spacing: -0.1px;
    line-height: 1.4;
    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: var(--wp--preset--spacing--50);
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: var(--wp--preset--spacing--50);
}

a:where(:not(.wp-element-button)) {
    color: currentColor;
    text-decoration: underline;
}

:root :where(a:where(:not(.wp-element-button)):hover) {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 1.125;
}

h1 {
    font-size: var(--wp--preset--font-size--xx-large);
}

h2 {
    font-size: var(--wp--preset--font-size--x-large);
}

h3 {
    font-size: var(--wp--preset--font-size--large);
}

h4 {
    font-size: var(--wp--preset--font-size--medium);
}

h5 {
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.5px;
}

h6 {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    padding-top: 1rem;
    padding-right: 2.25rem;
    padding-bottom: 1rem;
    padding-left: 2.25rem;
    text-decoration: none;
    text-transform: inherit;
}

:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
    border-color: transparent;
    color: var(--wp--preset--color--base);
}

:root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
    outline-color: var(--wp--preset--color--accent-4);
    outline-offset: 2px;
}

:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption) {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.4;
}

.has-black-color {
    color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
    color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-color {
    color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-color {
    color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-color {
    color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-color {
    color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-color {
    color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-color {
    color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-color {
    color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-color {
    color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-color {
    color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-color {
    color: var(--wp--preset--color--vivid-purple) !important;
}

.has-base-color {
    color: var(--wp--preset--color--base) !important;
}

.has-contrast-color {
    color: var(--wp--preset--color--contrast) !important;
}

.has-accent-1-color {
    color: var(--wp--preset--color--accent-1) !important;
}

.has-accent-2-color {
    color: var(--wp--preset--color--accent-2) !important;
}

.has-accent-3-color {
    color: var(--wp--preset--color--accent-3) !important;
}

.has-accent-4-color {
    color: var(--wp--preset--color--accent-4) !important;
}

.has-accent-5-color {
    color: var(--wp--preset--color--accent-5) !important;
}

.has-accent-6-color {
    color: var(--wp--preset--color--accent-6) !important;
}

.has-black-background-color {
    background-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-background-color {
    background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-background-color {
    background-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-background-color {
    background-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-background-color {
    background-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-background-color {
    background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-background-color {
    background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-background-color {
    background-color: var(--wp--preset--color--light-green-cyan) !important;
}


body, html {
    margin: unset;
    padding: unset;
    overflow-x: clip;
}

/*Header*/
body>header {
    padding-bottom: 10vh;
    width: 0px;
    height: 0px;
    position: relative;
    background-color: #d65e30;
    z-index: 999;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background-color: #d65e30;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-in-out;
}

.headerInnerWrapper {
    width: 100%;
    height: 70%;
    background-color: #f5c59d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerLogoWrapper {
    background-color: #d65e30;
    border-radius: 10px;
    filter: drop-shadow(0px 2px 10px rgba(0,0,0,0.6));
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13vh;
    width: 17vh;
}

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

.topHeaderLogo {
    width: 75%;
    height: 75%;
    transition: all 0.15s ease-in-out;
}

.topHeaderLogo a {
    width: 100%;
    height: 100%;
    display: block;
}

.header.headerStuck {
    height: 8vh;
}

.headerStuck .topHeaderLogo{
    width:65%;
    height:65%;
}
/**/

.fillTransition{
    transition: transform 0.15s ease-in-out;
}

.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:hidden;
}

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

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



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


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

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

.textMobile {
    display: none;
    text-align: center;
}

.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;
}

.heroImage > a {
    outline: none;
    text-decoration: none;
}


.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:hidden;
    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: 70%;
    position: relative;
    height: 100%;
}

.topSweepstakesSection {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 40%;
    margin: 0 auto;
    margin-top: 15vh;
    background-color: #fff9e6;
    border-radius: 40px;
    position: relative;
}

.bottomBlurb img, .bottomBlurb picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
}

.sweepstakeBlurb.darkOrangeBlurb img {
    object-fit: contain;
    width: 70%;
    height: 100%;
    margin: auto;
}

.sweepstakeBlurb.darkOrangeBlurb .bottomBlurb {
    background-color: #fbf4ee;
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
}

.sweepstakeBlurb.darkOrangeBlurb picture {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.bottomBlurbs {
    position: absolute;
    top: 59%;
    left: 0;
    width: 100%;
    height: 38%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



.topBlurb p {
    color: #461710;
    font-family: 'Montserrat';
    font-size: 1.3em;
    text-align: center;
    margin: 0 auto;
    font-weight: 800;
}




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

.sweepstakeBlurb {
    margin: 0 30px;
    border: 4px solid #461710;
    border-radius: 25px;
    width: 80%;
    height: 100%;
    background-color: #fff9e6;
    transform: scale(1.05);
}


.sweepstakeBlurb.darkOrangeBlurb img, .sweepstakeBlurb.darkOrangeBlurb picture {
    object-fit: contain;
    width: 90%;
    height: 100%;
    margin: auto;
}

.bottomBlurb p {
    color: white;
    font-family: 'Montserrat';
    text-align: center;
    height: fit-content;
    margin: auto;
}
 
.bottomBlurb {
    display: flex;
    height: calc(80% - 2px);
}

.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;
}

.sweepstakeBlurb1 img, .sweepstakeBlurb1 picture {
    object-fit: contain;
    background-color: white;
}

.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%;
    display: block;
    object-fit: cover;
}

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


.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: 100vh;
}


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


.fill {
    position: absolute;
    top: 0;
    left: -8px;
    height: 100%;
    width: 10px;
    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);
    background-color:rgba(0,0,0,0.3);
    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: 1000;
}

.modalInner {
    border-radius: 5px;
    width: 27vw;
    height: calc(27vw * 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;
    font-size: 1.5em;
	  -webkit-touch-callout: none;
    font-family: 'Montserrat';
    cursor: pointer;
}

.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: hidden;
    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: hidden;
    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 button {
    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;
    border: none;
}

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

.mobile {
    width: calc(80vh * 342 / 705);
    height: 80vh;
    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-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    position: relative;
    transform: scale(0.95);
}

.phoneImgBackground {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.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: hidden;
    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: hidden;
}

.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(-1.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: hidden;
    border-radius: 70px;
    transform: translateZ(-2px);
}

.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: 85%;
    transform: translateZ(3px) translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 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;
}


.phoneContents {
        border-radius: 16px;
    }
    .face1 {
        transform: translateZ(3px);
    }

/**/



.helperLeft svg, .helperRight svg {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.helperLeft, .helperRight {
    width: 40px;
    height: 40px;
}


html body .textHelper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-60%);
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sweepstakeBlurb3 .bottomBlurb {
    background-color: white;
    border-radius: 26px;
}


.textContentHelper {
    background-color: #d65e30;
    padding: 3px 19px;
}


.textContentHelper p {
    font-family: 'Montserrat';
    font-weight: 700;
    color: #fbf4ee;
    margin: unset;
    font-size: 1em;
}

.bottomBlurb2, .bottomBlurb1 {
    cursor: not-allowed;
}

.helperLeft {
    transform: scale(1.1) translateX(10px);
}


.helperRight {
    transform: scale(1.1) translateX(-10px);
}

.tiltTutorial {
    display: none;
}

.bottomBlurbImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottomBlurbImg {
    position: relative;
}

.bottomBlurbImgSoon {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ed8024;
    border-top: 5px solid #461710;
    border-bottom: 5px solid #461710;
    z-index: 10;
}

.bottomBlurbImg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottomBlurbImgSoon p {
    font-family: 'Montserrat';
    color: white;
    font-weight: 800;
    font-size: 1.5em;
    margin: unset;
    transition: all 0.25s ease-in-out;
}

.bottomBlurb1:hover .bottomBlurbImgSoon p, .bottomBlurb2:hover .bottomBlurbImgSoon p {
    color: #a50000;
}

.bottomBlurbImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    filter: blur(20px);
}

.bottomBlurbs>div>a {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: unset;
}

.bottomBlurbImg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: clip;
}

.bottomBlurbs>div {
    height: 100%;
    width: 16%;
}


.bottomBlurb1, .bottomBlurb2 {
    margin: 0px 2%;
    border-radius: 10px;
    border: 6px solid #461710;
    position: relative;
}

.bottomBlurb2 .bottomBlurbText {
    position: absolute;
    top: 80%;
    left: 100%;
    width: fit-content;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    background-color: #fff9e6;
    transform: translate(6px,-60%);
    padding: 4px 14%;
    border: 6px solid #461710;
    border-left: unset;
}


.bottomBlurb1 .bottomBlurbText {
    position: absolute;
    top: 80%;
    left: 0%;
    width: fit-content;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    background-color: #fff9e6;
    transform: translate(-100%,-60%);
    padding: 4px 14%;
    border: 6px solid #461710;
}

.bottomBlurbText p {
    font-family: 'Montserrat';
    font-weight: 900;
    color: #d65e30;
    font-size: 1.6em;
    margin: unset;
    text-wrap: nowrap;
    white-space: nowrap;
}


.helperLeft, .helperRight {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ed8024;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fbf4ee;
    transform: scale(1.1);
}


.helperRight {
    transform: scale(1.1) translateX(-10px);
}

.helperLeft {
    transform: scale(1.1) translateX(10px);
}


.topSweepstakesSection::after {
    content: '';
    top: 100%;
    left: 0;
    width: 210px;
    height: 210px;
    position: absolute;
    transform: translate(-30%,-75%);
    background-image: url('./rss/png/decorL.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

.topSweepstakesSection::before {
    content: '';
    top: 100%;
    left: 100%;
    width: 210px;
    height: 210px;
    position: absolute;
    transform: translate(-60%,-75%);
    background-image: url('./rss/png/decorR.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

.dateBlurb:first-of-type {
    margin-right: 5%;
}

.cadizDatesContainer {
    display: flex;
    flex-direction: row;
}

.dates {
    width: 70%;
}

.cadizImageContainer {
    width: 30%;
    height: 100%;
    margin: unset;
}

.cadizImageContainer.imageResponsive {
    display: none;
}

#footer {
    height: 24vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.backgroundFooter {
    height: 95%;
    background-color: rgb(245, 197, 157);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: auto;
}

.backgroundFooter hr {
    width: 100%;
    height: 25px;
    margin: 0;
    background-color: rgb(214, 94, 48);
    border: 0;
}

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

.contentFooter > a {
    height: 100%;
    width: 240px;
    background-color: rgb(214, 94, 48);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
}

.contentFooter a {
    text-decoration: none;
    color: #47160d;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 0.6em;
    margin: unset;
    display: block;
    transition: all 0.25s ease-in-out;
}

.contentFooter a:hover {
    font-weight: 900;
}

.footerLogo {
    width: fit-content;
    margin: 0 auto;
}

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

.firstLinks, .secondLinks {
    width: calc(50% - 120px);
}

.firstLinks {
    text-align: right;
    padding-right: 2%;
    box-sizing: border-box;
}

.secondLinks {
    text-align: left;
    padding-left: 2%;
    box-sizing: border-box;
}

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

    .innerSteps p {
    font-size: 1.2em;
}

.dateFiller {
    width: 29px;
}


.topBlurb p {
    font-size: 1.2em;
}

.bottomBlurbImgSoon p {
    font-size: 1.2em;
}


.bottomBlurbs>div {
    width: 18%;
}

.bottomBlurbText p {
    font-size: 1.4em;
}

    .cadizContainer {
    margin-top: 30vh;
}
    .heroText h1, .textMobile 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;
    padding: 0 5%;
}



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

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

.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;
    height: calc(34vw * 1.2);
    max-height: 90vh;
}

.dateBlurb:first-of-type {
    margin-right: unset;
}


.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;
    height: calc(40vw * 1.2);
}
}

@media only screen and (max-width:1000px){
    .phoneContents {
        border-radius: unset;
    }
    .face1 {
        transform: unset;
    }
    .textMobile {
    display: block;
    height: auto;
    padding-bottom: 5vh;
    box-sizing: border-box;
    padding-right: 2%;
    padding-left: 2%;
}
.noMobile {
    display: none;
}
.videoMobile {
    border-radius: 50px;
}
.mobile {
    width: calc(60vh * 342 / 705);
    height: 60vh;
}

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


.face5 .borderBottomLeft {
    transform: translateX(-94%) rotateY(33deg);
}
.face5 .borderBottomLeftCorner {
    transform: translateX(-172%) translateY(0%) translateZ(7px) rotateY(39deg);
}
.face5 .borderBottomRightCorner {
    transform: translateX(70%) translateY(0%) translateZ(7px) rotateY(-39deg);
}


.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;
    height: 60vh;
}
.firstRow{
    height: fit-content;
    padding-top: 22px;
    flex-direction: column;
    padding-bottom: 8vh;   
}
.heroText h1 br {
    display: none;
}
html .heroText {
    padding: 0 10%;
    padding-top:5vh;
}

    
    .modalInner {
    width: 60vw;
    height: calc(60vw * 1.2);
}

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

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

.topSweepstakesSection::before {
    width: 140px;
    height: 140px;
}
.topSweepstakesSection::after {
    width: 140px;
    height: 140px;
}


.gsapPinActive{
    transform:unset!important;
}

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


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

.steps {
    width: 100%;
    height: 3em;
    justify-content: flex-start;
    padding-top: 50px;
}



.heroText {
    width: 100%;
    height: auto;
    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;
    white-space: nowrap;
    text-wrap: nowrap;
}

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

.sweepstakesBlurbs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    aspect-ratio: 2/1;
}

.topSweepstakesSection {
    flex-direction: column;
    width: 80%;
    height: 50%;
    margin-top: 12vh;
}

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

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


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

.cadizDatesContainer {
    flex-direction: column;
    height: auto;
}

.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;
}

.fill {
    left: unset;
}
}





@media only screen and (max-width:1200px){
.bottomBlurbs>div {
    width: 25%;
}
}


/* CAMBIOS IMAGEN RUTAS */

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

    .bottomBlurbs {
    top: 72%;
    width: 100%;
    height: 25%;
}

.bottomBlurbImgSoon p {
    font-size: 1.1em;
}



.textContentHelper p {
    font-size: 0.8em;
}


.bottomBlurbs>div {
    width: 22%;
}

    .cadizImageContainer {
        width: 60%;
        height: auto;
        margin: auto;
        display: none;
    }

    .cadizImageContainer.imageResponsive {
        display: block
    }

}
@media only screen and (max-width:900px){
    html body .bottomBlurbs>div {
        width: 80%;
        height: auto;
        aspect-ratio: 1/1.2;
        max-height: 100%;
    }

.bottomBlurb1, .bottomBlurb2 {
    border: 4px solid #461710;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}


.bottomBlurb2 .bottomBlurbText, .bottomBlurb1 .bottomBlurbText {
    border: 4px solid #461710;
}



.bottomBlurb2 .bottomBlurbText, .bottomBlurb1 .bottomBlurbText {
    top: -4px;
    left: 50%;
    transform: translate(-50%,-100%);
    width: 100%;
    border: 4px solid #461710;
    border-bottom: unset;
    padding: unset;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.bottomBlurbText p{
    text-align: center;
}

.textContentHelper p {
    text-wrap: nowrap;
    white-space: nowrap;
}
}


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

    .cadizImageContainer {
        width: 100%;
    }

    .cadizDatesContainer {
        padding-right: 0;
        padding-left: 0;
    }

}


@media only screen and (max-width:500px){
    .fill {
        left: 4px;
    }
    #footer {
        height: 20vh;
    }
    .backgroundFooter hr {
        height: 20px;
    }
    .contentFooter > a {
        width: 150px;
        padding: 20px;
    }
    .contentFooter a {
        font-size: 0.5em;
    }
    .firstLinks, .secondLinks {
        width: fit-content;
    }
    .sweepstakesBlurbs {
    width: 87vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
	
.heroImage {
    height: 50vh;
}

.mobile {
    width: calc(50vh * 342 / 705);
    height: 50vh;
}

.modalBackground .dateLogo {
    transform: translateY(-50%);
}

.modalInner {
    width: 90vw;
    height: calc(90vw * 1.2);
}



.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;
}

.topSweepstakesSection::before {
    width: 70px;
    height: 70px;
}
.topSweepstakesSection::after {
    width: 70px;
    height: 70px;
}

html body .bottomBlurbs>div {
    width: 40%;
}

.bottomBlurbImgSoon p {
    font-size: 0.8em;
}


.bottomBlurbImgSoon {
    border-top: 3px solid #461710;
    border-bottom: 3px solid #461710;
}


.sweepstakeBlurb {
    margin: 0 0px;
    border: 4px solid #461710;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    background-color: #fff9e6;
    transform: scale(1.05);
}


.bottomBlurb2 .bottomBlurbText, .bottomBlurb1 .bottomBlurbText {
    top: -4px;
    left: 50%;
    transform: translate(-50%,-100%);
    width: 100%;
    border: 4px solid #461710;
    border-bottom: unset;
    padding: unset;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}


.bottomBlurb1, .bottomBlurb2 {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}



.bottomBlurbText p {
    font-size: 1.1em;
    text-align: center;
}

.textContentHelper p {
    font-size: 0.6em;
}

html body .bottomBlurbs>div {
    width: 80%;
}

.helperLeft, .helperRight {
    width: 25px;
    height: 25px;
}



.sweepstakeBlurb3 .bottomBlurb {
    background-color: white;
    border-radius: 26px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}


.rouletteText button {
    font-size: 0.7em;
    padding: 10px 16%;
}

.bottomBlurb1, .bottomBlurb2 {
    border: 4px solid #461710;
}

.topBlurb p {
    font-size: 0.8em;
}



.cadizContainer {
    margin-top: 0vh;
}


}

@supports not (aspect-ratio: 1/1) {
    @media only screen and (max-width:900px){
        html body .bottomBlurbs>div {
            width: 80%;
            height: 100%;
        }
    }
}

@supports (-webkit-touch-callout: none) {
    @media only screen and (max-width:900px){
        html body .bottomBlurbs>div {
            height: 100%;
        }
    }
}

@media only screen and (max-height: 700px) and (max-width: 500px) {
    .phoneMenu {
        width: 12px;
        height: 10px;
    }
    .phoneMenuLine {
        height: 2px;
    }
    .phoneContentsLogo {
        width: 25px;
        height: 25px;
    }
    .rouletteText h2 {
        font-size: 0.7em;
    }
    .rouletteText button {
        font-size: 0.5em;
        padding: 6px 12%;
    }
    .rouletteText p, .rouletteText span {
        margin: 1px auto;
    }
    .tiltTutorial {
        top: 104%;
        width: 25px;
        height: 25px;
    }
    .phoneContents {
        border-radius: 16px;
    }
    .contentCam {
        transform: translate(-50%, 5%) translateZ(-0.5px);
    }
    .videoMobile {
        transform: translateZ(-1px);
    }
    .face1 {
        transform: translateZ(-11px);
    }
    .face5 {
        height: 7.3%;                                                                            
    }
    .face5 .borderBottomLeftCorner {
        transform: translateX(-168%) translateY(0%) translateZ(5px) rotateY(45deg);
    }
    .face5 .borderBottomRightCorner {
        transform: translateX(70%) translateY(0%) translateZ(5px) rotateY(-39deg);
    }
    .face5 .contentBottom {
        transform: translateZ(1px) translate(-50%, -50%);
    }
}

@media only screen and (min-height: 800px) and (max-width: 600px) {
    .face5 .borderBottomRight {
        width: 8.3%;
    }
    .face5 .borderBottomLeft {
        width: 8.3%;
    }
}

@media only screen and (min-height: 900px) and (max-width: 800px) {
    .contentCam {
        transform: translate(-50%, 5%) translateZ(-5px);
    }
    .videoMobile {
        top: 50%;
        left: 50%;
        width: 98%;
        transform: translateZ(-5.5px) translate(-50%, -50%);
        border-radius: 15px;
    }
    .phoneContents {
        border-radius: 15px;
    }
    .face2 .borderTopRightCorner {
        transform: translateX(70%) translateY(0%) translateZ(6px) rotateY(-44deg);
    }
    .face2 .borderTopLeftCorner {
        transform: translateX(-172%) translateY(0%) translateZ(6px) rotateY(39deg);
    }
    .face4 .borderLeftBottom {
        transform: translateY(-9%) translateX(0.5%) rotateX(-30deg) translateZ(1px);
    }
    .face5 .contentBottom {
        height: 71%;
        transform: translateZ(1px) translate(-50%, -50%);
    }
    .face5 .leftDecoration, .face5 .rightDecoration {
        width: 21%;
    }
    .face5 .borderBottomLeftCorner {
        transform: translateX(-172%) translateY(0%) translateZ(9px) rotateY(39deg);
    }
    .face5 .borderBottomRightCorner {
        transform: translateX(70%) translateY(0%) translateZ(9px) rotateY(-39deg);
    }
}



.has-vivid-green-cyan-background-color {
    background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-background-color {
    background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-background-color {
    background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-background-color {
    background-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-base-background-color {
    background-color: var(--wp--preset--color--base) !important;
}

.has-contrast-background-color {
    background-color: var(--wp--preset--color--contrast) !important;
}

.has-accent-1-background-color {
    background-color: var(--wp--preset--color--accent-1) !important;
}

.has-accent-2-background-color {
    background-color: var(--wp--preset--color--accent-2) !important;
}

.has-accent-3-background-color {
    background-color: var(--wp--preset--color--accent-3) !important;
}

.has-accent-4-background-color {
    background-color: var(--wp--preset--color--accent-4) !important;
}

.has-accent-5-background-color {
    background-color: var(--wp--preset--color--accent-5) !important;
}

.has-accent-6-background-color {
    background-color: var(--wp--preset--color--accent-6) !important;
}

.has-black-border-color {
    border-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-border-color {
    border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-border-color {
    border-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-border-color {
    border-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-border-color {
    border-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-border-color {
    border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-border-color {
    border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-border-color {
    border-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-border-color {
    border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-border-color {
    border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-border-color {
    border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-border-color {
    border-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-base-border-color {
    border-color: var(--wp--preset--color--base) !important;
}

.has-contrast-border-color {
    border-color: var(--wp--preset--color--contrast) !important;
}

.has-accent-1-border-color {
    border-color: var(--wp--preset--color--accent-1) !important;
}

.has-accent-2-border-color {
    border-color: var(--wp--preset--color--accent-2) !important;
}

.has-accent-3-border-color {
    border-color: var(--wp--preset--color--accent-3) !important;
}

.has-accent-4-border-color {
    border-color: var(--wp--preset--color--accent-4) !important;
}

.has-accent-5-border-color {
    border-color: var(--wp--preset--color--accent-5) !important;
}

.has-accent-6-border-color {
    border-color: var(--wp--preset--color--accent-6) !important;
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}

.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
    background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
    background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
    background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}

.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
    background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}

.has-cool-to-warm-spectrum-gradient-background {
    background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}

.has-blush-light-purple-gradient-background {
    background: var(--wp--preset--gradient--blush-light-purple) !important;
}

.has-blush-bordeaux-gradient-background {
    background: var(--wp--preset--gradient--blush-bordeaux) !important;
}

.has-luminous-dusk-gradient-background {
    background: var(--wp--preset--gradient--luminous-dusk) !important;
}

.has-pale-ocean-gradient-background {
    background: var(--wp--preset--gradient--pale-ocean) !important;
}

.has-electric-grass-gradient-background {
    background: var(--wp--preset--gradient--electric-grass) !important;
}

.has-midnight-gradient-background {
    background: var(--wp--preset--gradient--midnight) !important;
}

.has-small-font-size {
    font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size {
    font-size: var(--wp--preset--font-size--x-large) !important;
}

.has-xx-large-font-size {
    font-size: var(--wp--preset--font-size--xx-large) !important;
}

.has-Montserrat-font-family {
    font-family: var(--wp--preset--font-family--Montserrat) !important;
}

.has-fira-code-font-family {
    font-family: var(--wp--preset--font-family--fira-code) !important;
}

:root :where(.wp-block-columns-is-layout-flow) > :first-child {
    margin-block-start: 0;}

:root :where(.wp-block-columns-is-layout-flow) > :last-child {
    margin-block-end: 0;}

:root :where(.wp-block-columns-is-layout-flow) > * {
    margin-block-start: var(--wp--preset--spacing--50);margin-block-end: 0;
}

:root :where(.wp-block-columns-is-layout-constrained) > :first-child {
    margin-block-start: 0;}

:root :where(.wp-block-columns-is-layout-constrained) > :last-child {
    margin-block-end: 0;}

:root :where(.wp-block-columns-is-layout-constrained) > * {
    margin-block-start: var(--wp--preset--spacing--50);margin-block-end: 0;
}

:root :where(.wp-block-columns-is-layout-flex) {
    gap: var(--wp--preset--spacing--50);
}

:root :where(.wp-block-columns-is-layout-grid) {
    gap: var(--wp--preset--spacing--50);
}

:root :where(.wp-block-post-title a:where(:not(.wp-element-button))) {
    text-decoration: none;
}

:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover) {
    text-decoration: underline;
}

:root :where(.wp-block-site-title) {
    font-weight: 700;
    letter-spacing: -.5px;
}

:root :where(.wp-block-site-title a:where(:not(.wp-element-button))) {
    text-decoration: none;
}

:root :where(.wp-block-site-title a:where(:not(.wp-element-button)):hover) {
    text-decoration: underline;
}

:root :where(.wp-block-navigation) {
    font-size: var(--wp--preset--font-size--medium);
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button))) {
    text-decoration: none;
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
    text-decoration: underline;
}

/**/