* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 1) 100%), url(../images/immaculate-heart-of-mary-ai.jpg) 50% 100%;
    background-size: cover !important;
    background-blend-mode: multiply;
}

h1 {
    font-size: 3rem;
    font-size: 1.75rem;
    font-size: 1.6125rem;
    margin-bottom: 1rem;
    color: #333;
    text-align: center;
    text-align: left;

    color: #ccc;
    letter-spacing: .075rem;
}

.headline {
    font-size: 3rem;
    font-size: 1.6125rem;
    margin-bottom: 1rem;
    color: #ccc;
    letter-spacing: .075rem;
}

.headline-2 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    margin-bottom: .5rem;
    text-align: left;
    color: #ddd;
    letter-spacing: .07rem;
}

#section1 h1, .main-page #logo-container img {
    position: relative;
    animation: animatebottomin 2s;
}
#section1 img, #section1 p, #section1 .headline-2, #section1 .caption {
    position: relative;
    animation: animatebottomin 3s;
}
.section .prayer {
    position: relative;
    animation: animatebottomin 3s;
}

.mysteries-pages .static-content #text-content h1 {
    margin-bottom: .75rem;
    margin-bottom: 0;
}

p {
    font-size: 1.2rem;
    /* max-width: 800px; */
    text-align: center;
    line-height: 1.6;
    line-height: 1.5;
    margin-bottom: 2rem;
    margin-bottom: .5rem;

    text-align: left;
    color: #ddd;
    letter-spacing: .07rem;
}
    p:last-child {
        margin-bottom: 0;
    }

a {
    color: #ccc;
    text-decoration: none;
}

.txt-lt {
    text-align: left;
}

.txt-ctr {
    text-align: center;
}

.txt-rt {
    text-align: right;
}

.flex-ctr-top {
    align-items: center;
    justify-content: flex-start;
}

.flex-ctr-ctr {
    align-items: center;
    justify-content: center;
}

.flex-ctr-bottom {
    align-items: center;
    justify-content: flex-end;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.flex-column-all {
    display: flex;
    flex-direction: column;
}

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

.flex-column-desktop {
    display: flex;
    flex-direction: column;
}

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

.flex-gap-1-2 {
    gap: .5rem;
}

.flex-gap-1 {
    gap: 1rem;
}

.abs-left {
    position: absolute;
    display: block;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
}
.abs-center {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%, 0rem);
    z-index: 1;
}
.abs-right {
    position: absolute;
    display: block;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
}
.abs-bottom {
    bottom: 1rem;
}
.abs-top {
    bottom: 1rem;
}
img.icon {
    width: 25px;
}
img.icon.terco-branco {
    width: 4rem;
}

.container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scrollbar-width: none;
    height: 100vh;
    scroll-behavior: smooth;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 1) 100%), url(../images/immaculate-heart-of-mary-ai.jpg) 50% 100%;
    background-size: cover !important;
    background-blend-mode: multiply; */
}

body.joyful-mysteries {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, 1) 100%), url(../images/joyful-mysteries-archangel-gabriel-mary-annunciation.png) 50% 35%;
}
body.luminous-mysteries {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 1) 100%), url(../images/baptism-of-jesus.png) 50% 35%;
}
body.sorrowful-mysteries {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 1) 100%), url(../images/sorrowful-mysteries-crown-thorns-rusty-nails.jpg) 50% 35%;
}
body.glorious-mysteries {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 1) 100%), url(../images/resurrection-of-jesus.jpg) 50% 35%;
}
body.divine-mercy-overview, .divine-mercy-pages {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 1) 100%), url(../images/devine-mercy-eucharist.jpg) 50% 35%;
}

.section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 2rem; */
    /* position: relative; */
    scroll-snap-align: start;
    /* padding: 16rem 6rem 2rem 2rem;
    padding: 12rem 4rem 2rem 1rem; */
    align-items: flex-start;
    justify-content: flex-start;

    inset: calc(var(--spacing)* 0);
    /* background-size: cover !important; */
    background-blend-mode: multiply;
    opacity: .2;
    transition: opacity 1s, transform 8s cubic-bezier(.3, 0, .7, 1);
    transform: scale(1.12);
    opacity: 1;
    transform: scale(1);
}

.section > div.body-content {
    width: 100%;
    max-width: 940px;
    padding: 12rem 4rem 2rem 1rem;
}

.mysteries-pages.oferecimento .section > .prayer, .mysteries-pages.agradecimento .section > .prayer {
    max-width: 940px;
}

.mysteries-pages .section > div.body-content {
    padding: 14rem 4rem 2rem 1rem;
}

/* .mysteries-pages .section {
    padding: 19rem 6rem 2rem 2rem;
    padding: 14rem 4rem 2rem 1rem;
} */

.mysteries-pages.oferecimento .section, .mysteries-pages.agradecimento .section {
    padding: 11rem 1rem 2rem;
}

/* .section:nth-child(1) {
    background-color: #f8d7da;
  }
  
  .section:nth-child(2) {
    background-color: #d1ecf1;
  }
  
  .section:nth-child(3) {
    background-color: #d4edda;
  }
  
  .section:nth-child(4) {
    background-color: #dff3cd;
  }
  
  .section:nth-child(5) {
    background-color: #dfe3cd;
  }
  
  .section:nth-child(6) {
    background-color: #d4edda;
  } */

.prayer,
#text-content .prayer {
    text-align: center;
    border-radius: .25rem;
    /* background-color: #00000050; */
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    margin-bottom: 1rem;
    margin-bottom: .5rem;
    /* max-width: 33rem; */
    border-radius: 4px;
    padding: .5rem .75rem;
    /* opacity: .5; */
}

.prayer.current {
    background-color: #00000070;
}

p.headline {
    font-size: .75rem;
    /* margin-bottom: .5rem; */
    /* border: 1px solid #fff; */
    /* border-radius: 4px;
    padding: .25rem .75rem;
    opacity: .5; */
}

.headline.current {
    font-size: 1.2rem;
    margin-bottom: 0;
    opacity: 1;
}

.copy {
    font-size: .75rem;
    line-height: 1.5;
    letter-spacing: .07rem;

    padding: 0 .75rem .5rem;
    padding: 0 .5rem;
    border-radius: 0 0 4px 4px;
}

.caption {
    /* transform: translate(-50%, 0.2rem); */
    color: #ccc;
    letter-spacing: .1rem;
    text-wrap: nowrap;
    font-size: .5rem;
    font-size: .6125rem;
}

.audio-controls {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    margin-top: 0;
    position: absolute;
    top: 1rem;
    right: 1rem;
    /* left: 6.5rem; */
    display: none;
}

/* .active .audio-controls {
    display: flex;
} */

button {
    padding: 0.75rem 1.5rem;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 0;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    /* background-color: #007bff; */
    color: white;
    color: #000;
    transition: background-color 0.3s;
}

/* button:hover {
      background-color: #0056b3;
    } */
/* button:not([disabled]) {
      color: #000;
    } */
button>img {
    color: transparent;
    width: 1rem;
    height: 1rem;
}

button.play-btn>span,
button.stop-btn>span {
    display: none;
}

.progress-container {
    width: 300px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0);
    border-radius: 4px;
    margin-top: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #007bff;
    border-radius: 4px;
    transition: width 0.1s linear;
}

.nav-dots {
    position: fixed;
    right: 2rem;
    right: .5rem;
    top: 50%;
    transform: translateY(-29%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 10;
}
.mysteries-pages .nav-dots {
    transform: translateY(-29%);
    right: 1.75rem;
    right: 1rem;
}

.nav-dot {
    width: 10px;
    height: 10px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    /* background-color: rgba(0, 0, 0, 0.2); */
    cursor: pointer;
    transition: background-color 0.3s;
}

.mysteries-overview .nav-dot[data-section="1"],
.mysteries-overview .nav-dot.active[data-section="1"],
.mysteries-overview .nav-dot[data-section="7"],
.mysteries-overview .nav-dot.active[data-section="7"],
.mysteries-pages .nav-dot[data-section="13"],
.mysteries-pages .nav-dot.active[data-section="13"] {
    background-color: transparent;
    width: auto;
    height: auto;
}
.mysteries-overview .nav-dot[data-section="7"] img,
.mysteries-pages .nav-dot[data-section="13"] img {
    background-color: transparent;
    width: 1rem;
    opacity: .7;
}

.mysteries-overview .nav-dot[data-section="2"],
.mysteries-overview .nav-dot[data-section="6"] {
    width: 20px;
    height: 20px;
}

.mysteries-pages .nav-dot[data-section="1"],
.mysteries-pages .nav-dot[data-section="12"] {
    width: 20px;
    height: 20px;
}

.nav-dot.active, .nav-dot:has(~ .active) {
    background-color: #007bff;
    background-color: #fff;
}
.nav-dot:has(~ .active) > img {
    background-color: transparent;
    opacity: 1;
}

.nav-dot .cross-icon, .nav-dot .arrow-down-icon {
    color: transparent;
    width: 3rem;
    /* background-color: #fff; */
    /* padding: .25rem; */
    /* border-radius: .25rem; */
    opacity: .2;
}
.nav-dot.arrow-down span {
    display: block;
    font-size: .75rem;
    margin-top: .25rem;
    background-color: #00000090;
    padding: .5rem;
    border-radius: .25rem;
}

.nav-dot.active .cross-icon {
    opacity: 1;
}

.mysteries-overview .nav-dot[data-section="6"]:not(.active) + .nav-dot.arrow-down,
.mysteries-pages .nav-dot[data-section="12"]:not(.active) + .nav-dot.arrow-down {
    /* display: none; */
    opacity: 0;
    pointer-events: none;
}

.mysteries-overview .nav-dot.active[data-section="6"] + .nav-dot.arrow-down,
.mysteries-pages .nav-dot.active[data-section="12"] + .nav-dot.arrow-down {
    display: block;
    position: relative;
    animation: animatebottomin 2s;
}

/* .static-content #logo-container, .static-content #social-container {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
} */
.static-content #logo-container {
    top: 1rem;
}
.static-content #logo-container>#logo {
    width: 75px;
    width: 50px;
}
.static-content #logo-container>#logo img {
    width: 100%;
    border-radius: 50%;
}
.static-content #social-container {
    bottom: 1rem;
}
    .static-content #social-container>#logo>a {
        display: flex;
        align-items: flex-end;
        gap: .5rem;
    }
        .static-content #social-container>#logo img {
            width: 25px;
        }
        .static-content #social-container>#logo span {
            font-size: .75rem;
        }

.static-content #text-content {
    width: 100%;
    position: absolute;
    top: 5rem;
    left: 0;
    padding: 0 2rem;
    padding: 0 1rem;
    /* z-index: 1; */
}

.static-content #text-content>p,
.static-content #text-content>h1 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.static-content #text-content .prayer {
    margin-top: 1.5rem;
    display: block;
    margin-right: 4rem;
}
.btn {
    margin: 0;
}
.btn.btn-gold {
    background-color: #e9cc8c;
}
.btn.btn-gold a {
    color: #333;
}
.btn.btn-left {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    margin: 0;
}
.btn.btn-center {
    margin-left: 50%;
    transform: translate(-50%, 0px);
    transform: translate(-50%, 50%);
}
.btn.btn-right {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: 0;
}
.btn.btn-gold p {
    font-size: .75rem;
}

/* MAIN PAGE */
.main-page .prayer {
    margin-bottom: .125rem;
}
.main-page .container .section > div:first-child {
    margin-bottom: 1rem;
}
.main-page .container .section {
    padding: 2rem;
    padding: 120px 2rem 2rem;
    align-items: center;
    justify-content: center;
}
/* .main-page .container .section p, .main-page .container .section img.icon, .main-page .container .section .prayer { */
.main-page .container .section p, .main-page .container .section img.icon {
    margin-bottom: 1rem;
}
.main-page .container .section h1 {
    margin-bottom: 0;
}
.main-page .static-content #logo-container>#logo {
    width: 75px;
}
.main-page .prayer, .main-page-rosary .prayer {
    border: 1px solid #333;
    box-shadow: 0 0 7px #333;
}

.main-page-rosary .prayer {
    margin-bottom: 0;
}
.main-page-rosary .container .section > div:first-child {
    margin-bottom: 1rem;
}
.main-page-rosary .container .section {
    padding: 100px 2rem 2rem;
    align-items: center;
    justify-content: flex-start;
}
.main-page-rosary .container .section p, .main-page-rosary .container .section img.icon {
    margin-bottom: 1rem;
}
.main-page-rosary .container .section h1 {
    margin-bottom: 0;
}
.main-page-rosary .static-content #logo-container>#logo {
    width: 75px;
}



.animate-bottom-in {
    position: relative;
    animation: animatebottomin 0.7s;
}
@keyframes animatebottomin {
    from {
        bottom: -70px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}



/* MOBILE DEVICES LANDSCAPE */
/* @media screen and (max-width: 767.98px) and (orientation: landscape) { */
@media screen and (max-width: 1023.98px) and (orientation: landscape) {
    .flex-column-mobile-landscape {
        display: flex;
        flex-direction: column;
    }
    .flex-row-mobile-landscape {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .prayer {
        padding: .125rem .75rem;
        margin-bottom: .125rem;
    }
    .prayer.current {
        padding: .5rem .75rem;
    }
    .nav-dots {
        gap: .5rem;
    }
    .btn.btn-top-right {
        position: absolute;
        left: unset;
        bottom: unset;
        top: 2rem;
        right: 2rem;
    }
    .btn.btn-top-right-landscape {
        position: absolute;
        left: unset;
        bottom: unset;
        top: 2rem;
        right: 2rem;
        transform: unset;
    }
    .btn.btn-bottom-right-landscape {
        position: absolute;
        top: unset;
        left: unset;
        bottom: 0;
        right: 1rem;
        margin-bottom: 1rem;
        transform: unset;
    }
    .mysteries-pages .nav-dots {
        transform: translateY(-40%);
    }
    .main-page .container .section {
        justify-content: flex-start;
    }
    .main-page-rosary .static-content #logo-container, .mysteries-pages .static-content #logo-container, .mysteries-overview .static-content #logo-container {
        top: 2rem;
        left: 2rem;
        transform: none;
    }
    .mysteries-pages .static-content #text-content, .mysteries-overview .static-content #text-content {
        top: 2rem;
    }
    .main-page-rosary .container .section > div:first-child {
        margin-bottom: 0;
    }
    .main-page-rosary .caption {
        display: block;
        text-wrap: wrap;
        line-height: 1rem;
        margin-top: .25rem;
    }
    .main-page-rosary .container .section {
        padding-top: 2rem;
    }
    .mysteries-pages .section > div.body-content {
        padding-top: 9rem;
    }
    .mysteries-pages.oferecimento .section, .mysteries-overview .section > div.body-content, .mysteries-pages.agradecimento .section {
        padding-top: 8rem;
    }
    .mysteries-pages.oferecimento .section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .mysteries-pages.oferecimento .copy {
        letter-spacing: .06rem;
    }
    .mysteries-pages.oferecimento #section1 .prayer:first-child {
        width: 46%;
    }
    .mysteries-pages.oferecimento #section1 .prayer {
        width: 52%;
    }
    .mysteries-pages.oferecimento #section1 .prayer.btn {
        /* margin-top: -1.5rem; */
        width: auto;
        /* margin-left: 0;
        transform: none; */
    }
}
@media (max-width: 767.98px) and (orientation: portrait) {
    .prayer:not(.btn), #text-content .prayer:not(.btn) {
        width: 100%;
    }
}

/* TABLET AND DESKTOP */
@media (min-width: 768px) {
    .section {
        align-items: center;
        justify-content: center;
    }
    #section1 h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .main-page .container .section p, .main-page .container .section img.icon {
        margin-bottom: 3rem;
    }
    .headline {
        text-align: center;
    }
    .copy {
        font-size: 1rem;
    }
    .btn.btn-center {
        margin-left: 0;
        transform: none;
    }
    .nav-dots {
        right: .5rem;
    }
    .mysteries-pages .nav-dots {
        right: 1rem;
    }
    .static-content #logo-container {
        top: 2rem;
    }
    .static-content #logo-container>#logo, .main-page .static-content #logo-container>#logo, .main-page-rosary .static-content #logo-container>#logo {
        width: 100px;
    }
    .static-content #text-content {
        top: 10rem;
    }
    .main-page-rosary .container .section {
        padding-top: 140px;
        justify-content: center;
    }
    .caption.weekdays {
        display: block;
        margin-top: .5rem;
    }
    .main-page .prayer, .main-page-rosary .prayer {
        width: 100%;
    }
    .main-page .prayer, .main-page-rosary .prayer {
        padding: 1.25rem;
    }
    .mysteries-pages.oferecimento .section, .mysteries-pages.agradecimento .section {
        padding-top: 15rem;
    }
    .prayer.current:not(.btn), #text-content .prayer.current:not(.btn) {
        padding: 1rem 1.5rem;
    }
    body:not(.main-page-rosary) .prayer .headline, body:not(.main-page-rosary) #text-content .prayer .headline {
        text-align: left;
    }
}

/* TABLET PORTRAIT */
/* @media (min-width: 768px) and (max-width: 1023.98px) {
    .flex-column-tablet {
        display: flex;
        flex-direction: column;
    }
    
    .flex-row-tablet {
        display: flex;
        flex-direction: row;
    }
} */

@media (min-width: 1024px) {
    .nav-dots, .mysteries-pages .nav-dots {
        right: 2rem;
    }
    .mysteries-pages .section > div.body-content {
        padding-right: 1rem;
    }
    .abs-left-desktop {
        position: absolute;
        display: block;
        left: 1rem;
        bottom: 1rem;
        z-index: 1;
    }
    .abs-center-desktop {
        position: absolute;
        display: block;
        left: 50%;
        transform: translate(-50%, 0rem);
        z-index: 1;
    }
    .abs-right-desktop {
        position: absolute;
        display: block;
        left: unset;
        right: 1rem;
        bottom: 1rem;
        z-index: 1;
    }
    .abs-top-desktop {
        bottom: unset;
        top: 1rem;
    }
    .abs-bottom-desktop {
        top: unset;
        bottom: 1rem;
    }
}

@media (min-width: 1300px) {
    .nav-dots, .mysteries-pages .nav-dots {
        right: 10rem;
    }
}

/* @media (min-width: 1366px) {
    .nav-dots, .mysteries-pages .nav-dots {
        right: 25%;
    }
}

@media (min-width: 1600px) {
    .nav-dots, .mysteries-pages .nav-dots {
        right: 30%;
    }
} */



/* DIVINE MERCY CHAPLET */


.divine-mercy-overview .nav-dot[data-section="1"],
.divine-mercy-overview .nav-dot.active[data-section="1"],
.divine-mercy-overview .nav-dot[data-section="6"],
.divine-mercy-overview .nav-dot.active[data-section="6"],
.divine-mercy-pages .nav-dot[data-section="12"],
.divine-mercy-pages .nav-dot.active[data-section="12"] {
    background-color: transparent;
    width: auto;
    height: auto;
}
.divine-mercy-overview .nav-dot[data-section="6"] img,
.divine-mercy-pages .nav-dot[data-section="12"] img {
    background-color: transparent;
    width: 1rem;
    opacity: .7;
}

.divine-mercy-overview .nav-dot[data-section="2"] {
    width: 20px;
    height: 20px;
}
.divine-mercy-overview .nav-dot[data-section="5"]:not(.active) + .nav-dot.arrow-down,
.divine-mercy-pages .nav-dot[data-section="11"]:not(.active) + .nav-dot.arrow-down {
    /* display: none; */
    opacity: 0;
    pointer-events: none;
}

.divine-mercy-overview .nav-dot.active[data-section="5"] + .nav-dot.arrow-down,
.divine-mercy-pages .nav-dot.active[data-section="11"] + .nav-dot.arrow-down {
    display: block;
    position: relative;
    animation: animatebottomin 2s;
}
/* .divine-mercy-overview .static-content #logo-container {
    top: 2rem;
    left: 2rem;
    transform: none;
}
.divine-mercy-overview .static-content #text-content {
    top: 2rem;
}
.divine-mercy-overview .section > div.body-content {
    padding-top: 8rem;
} */

.divine-mercy-pages.agradecimento .section > .prayer {
    max-width: 940px;
}
.divine-mercy-pages.agradecimento .section {
    padding: 13rem 1rem 2rem;
}
@media screen and (max-width: 767.98px) and (orientation: portrait) {
    .divine-mercy-overview .section .prayer {
        margin-bottom: .25rem;
    }
    .divine-mercy-overview .copy {
        line-height: 1.35;
    }
}
@media screen and (max-width: 1023.98px) and (orientation: landscape) {
    .divine-mercy-overview .section > div.body-content {
        padding-top: 8rem;
    }
    .divine-mercy-pages.agradecimento .section {
        padding-top: 8rem;
    }
    .divine-mercy-pages .static-content #logo-container, .divine-mercy-overview .static-content #logo-container {
        top: 2rem;
        left: 2rem;
        transform: none;
    }
    .divine-mercy-pages .static-content #text-content, .divine-mercy-overview .static-content #text-content {
        top: 2rem;
    }
}
@media (min-width: 768px) {
    .divine-mercy-pages.agradecimento .section {
        padding-top: 15rem;
    }
}