.aem-hero__background img,
.aem-hero__background video { object-fit: fill; }

#summer-extras-hero .aem-hero__button {
    width: 190px;
    border-radius: 4px;
    padding: 0;
    height: 42px;
    letter-spacing: 1px;
}

#summer-ever-text { line-height: 10px;  display: none; }
#summer-ever-text-mobile { line-height: 10px; }
#summer-extras-hero { height: 900px; }

@media screen and (min-width: 768px) {
    .aem-hero__copy {justify-content: flex-end; margin-bottom: 0; padding: 0px }
   #summer-ever-text { display: block; }

   #summer-extras-hero .aem-hero__background img,
   #summer-extras-hero .aem-hero__background video { object-fit: none; }
}

#aem-loyalty-banner.cmp-container { border-top: none; flex-direction: column;  padding-top: 40px; padding-bottom: 25px; }

#soe-banner-button { width: 134px; height: 40px; letter-spacing: 1px; }
#soe-banner-button .cmp-button__text { position: relative; bottom: 2px; }

@media screen and (min-width: 768px) { 
    #aem-loyalty-banner.cmp-container { flex-direction: row; padding: 25px; }
}

/* Summer of Extras Landing Page */

#our-most-extra { max-width: 420px; margin: auto; }

#rewards-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 850px;
    margin: 0 auto 120px auto;
}

#rewards-cards-container .card {
    max-width: none;
    height: 250px;
    margin-top: 95px;
    text-align: center;
}

#rewards-cards-container .card:nth-child(2) {
    margin-top: 60px;
}

#rewards-cards-container .card img {
    max-width: 212px;
}

#rewards-cards-container .aem-card__copy {
    padding-top: 0;
    background-color: #fff;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#rewards-cards-container .aem-card__paragraph p {
    margin: 0;
    line-height: 21px;
}

#rewards-cards-container .aem-card__paragraph span.font-gotham-black {
    line-height: 32px;
}

#svg-dotted-line,
#svg-dotted-line-desktop {
    position: absolute;
    z-index: 0;
}

#svg-dotted-line {
    left: calc(50% - 175px);
}

#svg-dotted-line-desktop {
    left: calc(50% - 100px);
}

#svg-dotted-line-straight {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: -1rem;
}

.container.bg-grey-light {
    position: relative;
    z-index: 1;
}

#ok-to-be-extra {
    position: relative;
    overflow: hidden;
}

#ok-to-be-extra>.text {
    position: relative;
}

#ok-to-be-extra .cmp-text .font-size-72 {
    font-size: 32px;
}

#ok-to-be-extra .cmp-text p {
    margin: 0 0 4px;
    background-color: #f7f7f7;
}

/* Mobile styles (under 768px) */
#more-extras-mobile { 
    max-width: 375px; 
    margin: auto; 
    position: relative;
    top: 200px;
    z-index: 1;
}

#more-extras-hero {
    height: 500px;
}

#more-extras-hero .aem-hero__foreground { 
    height : 100%; 
    max-height: 400px; 
}

#ok-to-be-extra-svg svg {
    width: 270px;
    height: 56px;
}

#container-qr-hero {
    position: relative;
}

#hero-qr-code {
    height: 725px;
}

#hero-qr-code .aem-hero__foreground { margin-bottom: 40%; }

#hero-qr-code .aem-hero__background img { object-fit: cover; }

#hero-qr-code .aem-hero__paragraph.md\:d-none { max-width: 350px; }

#hero-qr-code .aem-hero__image-1 {
    display: none;
}

#hero-qr-code .aem-hero__image-1 img.d-inline.md\:d-none {
    display: block;
    position: absolute;
    bottom: 0;
    right: 1vw;
    width: 34vw;
    max-width: 390px;
    height: auto;
}

#hero-social .aem-hero__foreground { flex-direction: column; }

#hero-social .aem-hero__background {background-color: white; }

#hero-social .aem-hero__image-1 > img { margin: 0; width: 100%; }

#hero-social .aem-hero__paragraph img { margin: 0 10px; }

#aem-rewards-landing-page .bg-grey-light {
    background-color: #f7f7f7;
}

#qr-code-mobile {
    display: contents;
}

#qr-code-mobile>img {
    width: 100vw;
    max-width: none;
}

#bottom-hero .aem-hero__foreground-image {
    width: 82px;
    height: 80px;
    margin-bottom: 1.25rem;
}

#top-hero .aem-hero__button,
#bottom-hero .aem-hero__button {
    border-radius: 999px;
    width: 193px;
    height: 44px;
    line-height: 44px;
    z-index: 1;
}

#text-faq { max-width: 400px; margin: auto; }

@media screen and (min-width: 375px) {
    #more-extras-mobile {max-width: 550px;  top: 220px; }
}
@media screen and (min-width: 400px) {
    #more-extras-mobile { top: 230px; }
    #more-extras-hero { height: 500px; }
}
@media screen and (min-width: 576px) {
    #more-extras-mobile { top: 240px; }
    .aem-hero__copy { margin: auto; }
}

/* Tablet and desktop */
@media screen and (min-width: 768px) {
    #our-most-extra { max-width: 800px; margin-bottom: 25px; }

    #svg-dotted-line-straight {
        display: none;
    }

    #rewards-cards-container .card:nth-child(odd) {
        align-self: end;
        position: relative;
        bottom: 25px;
    }

    #rewards-cards-container .card:nth-child(2) {
        margin-top: 40px;
        margin-left: 35px;
    }

    #rewards-cards-container {
        margin: -2rem auto;
        overflow: hidden;
        padding: 5vh 0;
        position: relative;
        z-index: 0;
    }

    #rewards-cards-container .card {
        max-width: 315px;
        height: 210px;
        margin-top: 0;
    }

    #rewards-cards-container .card img {
        max-width: 300px;
    }

    #rewards-cards-container .card:nth-child(4) {
        margin-top: 110px;
        margin-left: 180px;
    }

    #svg-dotted-line-desktop {
        display: flex;
        flex-direction: column;
    }

    #svg-dotted-line-desktop svg {
        position: relative;
    }

    #ok-to-be-extra .cmp-text .font-size-72 {
        font-size: 70px;
    }

    #ok-to-be-extra-svg svg {
        width: 590px;
        height: 121px;
    }

    #more-extras-desktop {
        max-width: 950px;
        height: 700px;
        margin: auto;
        position: absolute;
        z-index: 1;
        width: 100%;
        display: flex;
        left: 0px;
        right: 0px;
        top: auto;
        margin-top: -25px;
    }
    #more-extras-desktop svg.md\:d-block { padding-bottom: 50px; }

    #more-extras-hero { min-height: 0; height: 700px; }
    #more-extras-hero .aem-hero__background { min-height: 0; }

    #more-extras-hero .aem-hero__foreground { max-height: 100%; }
    #more-extras-hero .aem-hero__paragraph.md\:d-inline p:last-child {
        margin: auto;
    }

    #hero-qr-code .aem-hero__foreground {
        margin-bottom: 0;
        height: 100%;
    }

    #hero-qr-code .aem-hero__copy {
        width: 50%;
        margin: auto 0;
        padding-right: 20px;
    }

    #hero-qr-code .aem-hero__paragraph .font-size-48 {
        font-size: 52px;
    }

    #hero-qr-code .aem-hero__paragraph { max-width: 390px; }

    #hero-qr-code .aem-hero__image-1 {
        display: block;
        width: 50%;
    }

    #hero-qr-code .aem-hero__image-1 img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #hero-qr-code .aem-hero__copy p img {
        height: 43px;
        width: 140px;
        margin-right: 15px;
    }

    #qr-code-mobile {
        display: none;
    }

    #container-qr-hero {
        position: relative;
    }
    
    #hero-social { height: 725px; }

    #hero-social .aem-hero__foreground { flex-direction: row; height: 100%; }

    #hero-social .aem-hero__foreground .aem-hero__image-1 > img { height: 100%; }

    #hero-social .aem-hero__background { background-color: #fbfbfb; }

    #hero-social .aem-hero__copy { max-width: none; }

    #hero-social .aem-hero__paragraph.md\:d-inline {
           max-width: 525px;
           margin: auto;
      }

     #hero-social .aem-hero__paragraph img:first-of-type { margin: 0 }

    #bottom-hero {
        height: 786px;
    }

    #bottom-hero .aem-hero__paragraph .font-size-72 {
        font-size: 70px;
    }

    #bottom-hero .aem-hero__button {
        width: auto;
        width: 193px;
        font-size: 14px;
    }
}

@media screen and (min-width: 1024px) {
    #hero-qr-code {
        height: 850px;
    }

    #hero-qr-code .aem-hero__image-1 {
        width: 60%;
    }

    #hero-qr-code .aem-hero__paragraph {
        margin: auto 0 auto 10%;
        padding-top: 75px;
        max-width: 445px;
    }
}

/* Mobile only */
@media screen and (max-width: 767.9px) {
    #rewards-cards-container .card .font-size-2em {
        font-size: 18px;
    }
}

/* XS Mobile only */
@media screen and (max-width: 400px) {
    .bag-icon-container {
        margin-left: 0;
    }

    .findChipotle-text {
        font-size: 13px;
    }
}

/* Dotted line animation https://css-tricks.com/svg-line-animation-works */
svg.fade-out {
    opacity: 1;
}

path.animation-dashoffset {
    opacity: 1;
    stroke-dashoffset: 0;
}

path.animation-dashoffset-mobile {
    opacity: 1;
}

svg.fade-in path.animation-dashoffset.animate {
    animation: dash 1s ease-out reverse forwards;
    stroke-dashoffset: revert-layer;
}

svg.fade-in path.animation-dashoffset.backwards.animate {
    stroke-dashoffset: var(--dashLen);
}

#svg-dotted-line svg.fade-in path.animation-dashoffset-mobile.animate {
    animation: dash-mobile 8s ease-out reverse backwards;
    z-index: 1;
    stroke-dashoffset: 2150;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-mobile {
    to {
        stroke-dashoffset: 4300;
    }
}

@media screen and (min-width: 768px) {
    #rewards-cards-container .aem-card .fade-in {
        opacity: 0;
    }

    #rewards-cards-container .aem-card.animate .fade-in {
        opacity: 1;
    }
}

#svg-dotted-line-straight svg.fade-out {
    opacity: 1;
}

#svg-dotted-line-straight svg.fade-in path.animation-dashoffset-mobile.animate {
    animation: dash-mobile-straight 0.5s linear reverse backwards;
    z-index: 1;
    stroke-dashoffset: 140;
}

@keyframes dash-mobile-straight {
    to {
        stroke-dashoffset: 280;
    }
}