/* Fallback tuned to Marcellus vertical metrics */
@font-face {
    font-family: "Marcellus Fallback";
    src: local("Georgia");
    ascent-override: 97.412%;
    descent-override: 27.979%;
    line-gap-override: 0%;
    size-adjust: 101.06%;
}

/* Fallback tuned to match Poppins’ vertical metrics */
@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial");
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
    /* Optional: add size-adjust after you decide which fallback to match widths against */
    size-adjust: 113%;
}

/* Your stacks */
:root {
    --serif-fallback: "Marcellus Fallback", Georgia, "Times New Roman", Times, serif;
    --sans-fallback: "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* -------------------------->>> <<<--------------------------*/
/* ---->>> STRUCTURE <<<----*/
/* -------------------------->>> <<<--------------------------*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body  {
width:100%;
text-align: center;
margin: auto 0;
min-height: 100vh;
/*z-index: 0;*/
background-color: #000000;
}

#bg-wrap {
    background: linear-gradient(#000000bc, #000000bc), /* overlay layer */
    url("/media/2025/hall-of-tarot-background-color.webp") center center / cover no-repeat; /* image layer */
    background-attachment: fixed;
    /*background-image: url("/media/2025/hall-of-tarot-background-color.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
    */
}

/*#bg-wrap::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bc;
    pointer-events: none;
    inset: 0;
    z-index: -1;
}*/

.tarot-logo{
width:260px
}
@media (max-width:1300px){.tarot-logo{width:260px; margin-top:10px}}@media (max-width:600px){.tarot-logo{width:200px;margin-top:10px}}

div.sticky {
top: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top:0px;
z-index: 1000 !important;
background-color:#000000bc;
}

.home-header-interior {
margin:0 auto;
width:80%;
padding-top:1.0%;
min-height:50px;
}
@media (max-width:1300px) {
.home-header-interior {width:96%;}
}
@media (max-width:600px) {
.home-header-interior {width:96%;}
}

.home-content-master {
margin: 0 auto;
width:100%;
padding-top:20px;
border-top:0px solid #00000056; 
background-color:#00000056;
background-position:center;
background-size:100%;
text-align:center;
}
@media (max-width:1300px) {
.home-content-master {width:100%;}
}
@media (max-width:800px) {
.home-content-master {width:100%;}
}

.home-content-interior {
margin: 0 auto;
width:80%;
min-height:80vh;
padding-top:1%;
}
@media (max-width:1500px) {
.home-content-interior {margin: 0 auto; width:96%;}
}
@media (max-width:600px) {
.home-content-interior {margin: 0 auto; width:96%;}
}

.reading-box {
float:left;
width:26%;
padding:1%;
text-align:center;
}
@media (max-width:1300px) {
.reading-box {float:none; margin:0 auto; text-align:center; width:94%;}
}

.reading-box-top {
float:left;
width:43%;
padding:1.5%;
text-align:center;
}
@media (max-width:1300px) {
.reading-box-top {float:none; margin:0 auto; text-align:center; width:96%;}
}

.homepage-top-two-section-box {
margin:0 auto;
width:80%;
text-align:center;
}
@media (max-width:1300px) {
.homepage-top-two-section-box {float:none; margin:0 auto; text-align:center; width:98%;}
}

.tarot-readings-process-box1 {
margin: 0 auto;
width:36%;
padding:3%;
text-align:center;
border:1px solid #b4c2d667;
background-color: #00000067;
border-radius:2px;
}
@media (max-width:1300px) {
.tarot-readings-process-box1 {float:none; margin: 0 auto; text-align:center; width:70%;}
}
@media (max-width:600px) {
.tarot-readings-process-box1 {float:none; margin: 0 auto; text-align:center; width:86%;}
}

.tarot-readings-process-box2 {
margin: 0 auto;
width:82%;
padding:3%;
text-align:center;
/*border:1px solid #790a9067;*/
border-radius:8px;
}
@media (max-width:1300px) {
.tarot-readings-process-box2 {float:none; margin: 0 auto; text-align:center; width:70%; background: linear-gradient(to top, #0071D889, #0071D8dd);}
}
@media (max-width:600px) {
.tarot-readings-process-box2 {float:none; margin: 0 auto; text-align:center; width:86%; background: linear-gradient(to top, #0071D889, #0071D8dd);}
}

.content-interior {
margin: 0 auto;
width:80%;
min-height:80vh;
padding-top:1%;
}
@media (max-width:1500px) {
.content-interior {margin: 0 auto; width:94%; padding-left:3%; padding-right:3%;}
}
@media (max-width:600px) {
.content-interior {margin: 0 auto; width:94%; padding-left:3%; padding-right:3%;}
}

.readings-cards {
width:60%;
}
@media (max-width:1500px) {
.readings-cards {width:80%;}
}
@media (max-width:600px) {
.readings-cards {width:80%;}
}

.spanish-main-boxes-spacer {
float:left;
min-width:8%;
width:8%;
}

.main-boxes-spacer {
float:left;
min-width:8%;
width:8%;
}

.main-ads-box {
float:left;
width:26%;
padding:1%;
text-align:center;
background: transparent; 
}
@media (max-width:1300px) {
.main-ads-box {float:none; margin: 0 auto; text-align:center; width:70%;}
}
@media (max-width:600px) {
.main-ads-box {float:none; margin: 0 auto; text-align:center; width:96%;}
}

.header-interior-left {
float:left;
text-align:left;
padding-left:0%;
width:30%;
background-color:transparent;
}
@media (max-width:1300px) {
.header-interior-left {}
}
@media (max-width:600px) {
.header-interior-left {}
}

.header-interior-right {
float:left;
text-align:right;
padding-right:0%;
margin-top:11px;
width:70%;
background-color:transparent;
}
@media (max-width:1300px) {
.header-interior-right {}
}
@media (max-width:600px) {
.header-interior-right {margin-top:10px;}
}

.content-master {
margin: 0 auto;
width:100%;
padding-top:20px;
background-color:#00000056;
text-align:center;
}
@media (max-width:1300px) {
.content-master {width:100%;}
}
@media (max-width:800px) {
.content-master {width:100%;}
}

.tarot-readers-box {
margin: 0 auto;
width:44%;
padding:3%;
text-align:center;
border:1px solid #b4c2d667;
background-color: #00000067;
border-radius:2px;
}
@media (max-width:1300px){.tarot-readers-box{float:none;margin:0 auto;text-align:center;width:70%}}
@media (max-width:600px){.tarot-readers-box{float:none;margin:0 auto;text-align:center;width:86%}}

.signup-pages-left {
float:left;
width:47.5%;
text-align:center;
}
@media (max-width:1300px) {
.signup-pages-left {float:none; margin:0 auto; text-align:center; width:96%;}
}
@media (max-width:760px) {
.signup-pages-left {float:none; margin:0 auto; text-align:center; width:96%;}
}

.signup-pages-right {
float:left;
width:47.5%;
margin-left:5%;
text-align:center;
}
@media (max-width:1300px) {
.signup-pages-right {float:none; margin:0 auto; text-align:center; width:96%;}
}
@media (max-width:760px) {
.signup-pages-right {float:none; margin:0 auto; text-align:center; width:96%;}
}

.admin-pages-left {
float:left;
width:20%;
text-align:left;
}
@media (max-width:1300px) {
.admin-pages-left {float:none; margin:0 auto; text-align:center; width:96%;}
}
@media (max-width:760px) {
.admin-pages-left {float:none; margin:0 auto; text-align:center; width:96%;}
}

.admin-pages-right {
float:left;
width:80%;
text-align:center;
}
@media (max-width:1300px) {
.admin-pages-right {float:none; margin:0 auto; text-align:center; width:96%;}
}
@media (max-width:760px) {
.admin-pages-right {float:none; margin:0 auto; text-align:center; width:96%;}
}

.reading-pages-picture-box {
width:40%;
border-radius:8px;
filter:drop-shadow(0 0 0.2rem rgb(180,194,214));
}
@media (max-width:1700px) {
.reading-pages-picture-box {width:40%;}
}
@media (max-width:1500px) {
.reading-pages-picture-box {width:40%;}
}
@media (max-width:760px) {
.reading-pages-picture-box {width:50%;}
}

.footer {
margin: 0 auto;
width:100%;
min-height:80px;
background: linear-gradient(to bottom, #000000, #000000); 
border-top: 1px solid #b4c2d634;
padding-top:10px;
}
@media (max-width:1300px) {
.footer {}
}
@media (max-width:600px) {
.footer {}
}

.footer-interior {
margin:0 auto;
width:80%;
text-align:left;
padding-top:10px;
}
@media (max-width:1300px) {
.footer-interior {}
}
@media (max-width:600px) {
.footer-interior {width:90%;}
}

.footer-left {
float:left;
width:50%;
text-align:left;
}
@media (max-width:1300px) {
.footer-left {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
.footer-left {float:none; margin:0 auto; width:96%; text-align:center;}
}

.footer-right {
float:left;
width:50%;
text-align:right;
}
@media (max-width:1300px) {
.footer-right {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
.footer-right {float:none; margin:0 auto; width:96%; text-align:center;}
}


.footer-warning {
width:100%;
text-align:left;
margin-top:10px;
}
@media (max-width:1300px) {
.footer-warning {text-align:center; margin-top:20px;}
}
@media (max-width:600px) {
.footer-warning {text-align:center; margin-top:20px;}
}

.review-box-left {
float:left;
width:28%;
padding:2%;
margin-right:1%;
min-height:179px;
background:linear-gradient(to bottom, #37323eef, #37323eab), url(/media/2025/review-box-background.webp) no-repeat; 
background-position:center; 
background-size:100%; 
background-size: cover;
text-align:center; 
border:0px solid #5059ba; 
border-radius:0px; 
filter:drop-shadow(0 0 0.2rem rgb(151,177,171));
}

@media (max-width:1300px) {
.review-box-left {float:none; margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.review-box-left {float:none; margin:0 auto; width:96%; padding:0%;}
}

.review-box-middle {
float:left;
width:28%;
padding:2%;
margin-right:1%;
margin-left:1%;
background:linear-gradient(to bottom, #37323eef, #37323eab), url(/media/2025/review-box-background.webp) no-repeat; 
background-position:center; 
background-size:100%; 
background-size: cover;
text-align:center; 
border:0px solid #5059ba; 
border-radius:0px; 
filter:drop-shadow(0 0 0.2rem rgb(151,177,171));
}

@media (max-width:1300px) {
.review-box-middle {float:none; margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.review-box-middle {float:none; margin:0 auto; width:96%; padding:0%;}
}

.review-box-right {
float:left;
width:28%;
padding:2%;
margin-left:1%;
background:linear-gradient(to bottom, #37323eef, #37323eab), url(/media/2025/review-box-background.webp) no-repeat; 
background-position:center; 
background-size:100%; 
background-size: cover;
text-align:center; 
border:0px solid #5059ba; 
border-radius:0px; 
filter:drop-shadow(0 0 0.2rem rgb(151,177,171));
}
@media (max-width:1300px) {
.review-box-right {float:none; margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.review-box-right {float:none; margin:0 auto; width:96%; padding:0%;}
}

.content-wrapper-80 {
margin: 0 auto;
width:80%;
text-align:left;
}
@media (max-width:1300px) {
.content-wrapper-80 {margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.content-wrapper-80 {margin:0 auto; width:96%; padding:0%;}
}

.content-wrapper-70 {
margin: 0 auto;
width:70%;
text-align:left;
}
@media (max-width:1300px) {
.content-wrapper-70 {margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.content-wrapper-70 {margin:0 auto; width:96%; padding:0%;}
}

.content-wrapper-29 {
margin: 0 auto;
width:30%;

text-align:center;
}
@media (max-width:1700px) {
.content-wrapper-29 {margin:0 auto; width:24%; padding:0%; text-align:center;}
}
@media (max-width:1300px) {
.content-wrapper-29 {margin:0 auto; width:96%; padding:0%; text-align:center;}
}
@media (max-width:760px) {
.content-wrapper-29 {margin:0 auto; width:96%; padding:0%; text-align:center;}
}

.float-wrapper-30 {
float:left;
width:30%;
text-align:left;
}
@media (max-width:1300px) {
.float-wrapper-30 {float:none; margin:0 auto; width:96%; padding:0%; text-align:center;}
}
@media (max-width:760px) {
.float-wrapper-30 {float:none; margin:0 auto; width:96%; padding:0%; text-align:center;}
}

.float-wrapper-70 {
Float:left;
width:70%;
text-align:left;
}
@media (max-width:1300px) {
.float-wrapper-70 {float:none; margin:0 auto; width:96%; padding:0%;}
}
@media (max-width:760px) {
.float-wrapper-70 {float:none; margin:0 auto; width:96%; padding:0%;}
}

.h-divider {
margin: auto;
margin-top:0px;
width: 70%;
position: relative;
}
@media (max-width:1200px) {
.h-divider {width:90%; margin-top:40px;}
}

.h-divider .shadow {
overflow: hidden;
height: 20px;
}

.h-divider .shadow:after {
content: '';
display: block;
margin: -25px auto 0;
width: 100%;
height: 25px;
border-radius: 125px/12px;
box-shadow: 0 0 8px #ffffff;
}

.review-box-wrapper{
margin:0 auto;
width:96%}
}
@media (max-width:600px){
.review-box-wrapper{margin:0 auto; width:100%;}
}

.white {
color:#ffffff;
}

/* ---->>> <<<----*/

.green {
color:#70c1b3;
}

/* ---->>> <<<----*/

.pink {
color:#f25f5c;
}

/* ---->>> <<<----*/

.purple {
color:#790a90;
}

/* ---->>> <<<----*/

.grey {
color:#e5e5e5;
}

/* ---->>> <<<----*/

.mobilehide {
}

@media (max-width:1300px) {
.mobilehide {display:none;}
}
@media (max-width:600px) {
.mobilehide {display:none;}
}

/* ---->>> <<<----*/

.mobileshow {
display:none;
}

@media (max-width:1300px) {
.mobileshow {display:inline;}
}
@media (max-width:600px) {
.mobileshow {display:inline;}
}
@media print {
    .mobileshow { display: none; }
}

.small80 {
font-size:70%;
}

.small50 {
font-size:50%;
}

.small80 {
font-size:80%;
}

.big50 {
font-size:150%;
}

.headline {
font-family: "Marcellus", var(--serif-fallback);
font-weight: 400;
font-size:50px;
color:#ffffff;
line-height:1.2;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
.headline {font-size:32px;}
}
@media (max-width:600px) {
.headline {font-size:34px;}
}

h1 {
font-family: "Marcellus", var(--serif-fallback);
font-weight: 400;
font-size:50px;
color:#ffffff;
line-height:1.3;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
h1 {font-size:32px;}
}
@media (max-width:600px) {
h1 {font-size:32px;}
}

h2 {
font-family: "Marcellus", var(--serif-fallback);
font-weight: 400;
font-size:40px;
color:#ffffff;
line-height:1.3;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
h2 {font-size:31px;}
}
@media (max-width:600px) {
h2 {font-size:27px;}
}

h3 {
font-family: "Marcellus", var(--serif-fallback);
font-weight:400;
font-size:34px;
color:#ffffff;
line-height:1.2;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
h3 {font-size:30px;}
}
@media (max-width:600px) {
h3 {font-size:20px;}
}

h4 {
font-family: "Marcellus", var(--serif-fallback);
font-size:28px;
color:#ffffff;
line-height:1.2;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
h4 {font-size:30px;}
}
@media (max-width:600px) {
h4 {font-size:30px;}
}

h5 {
font-family: "Marcellus", var(--serif-fallback);
font-size:20px;
color:#ffffff;
line-height:1.3;
margin:0px;
padding:0px;
font-weight:normal;
}
@media (max-width:1300px) {
h5 {font-size:30px;}
}
@media (max-width:600px) {
h5 {font-size:22px;}
}



.text1b {
font-family: 'Poppins', var(--sans-fallback);
font-size:14px;
color:#000000;
line-height:1.6;
}
@media (max-width:1300px) {
.text1b {font-size:15px;}
}
@media (max-width:600px) {
.text1b {font-size:15px;}
}

.text2 {
font-family: 'Poppins', var(--sans-fallback);
font-size:13px;
color:#e6e6e6;
line-height:1.6;
}
@media (max-width:1300px) {
.text2 {font-size:14px;}
}
@media (max-width:600px) {
.text2 {font-size:14px;}
}

.quote1 {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#ffffff;
line-height:1.9;
}
@media (max-width:1300px) {
.quote1 {font-size:16px;}
}
@media (max-width:600px) {
.quote1 {font-size:16px;}
}

.box-nav {
text-decoration:none;
color:#ffffff;
border:0px solid #790a90;
border-radius:8px;
filter:drop-shadow(0 0 0.3rem rgb(255,212,0));
}

.box-nav:hover {
text-decoration:none;
color:#ffffff;
border:0px solid #790a90;
border-radius:8px;
filter:drop-shadow(0 0 0.5rem rgb(196,252,240));
}

.nav {
text-decoration:none;
}

.nav1 {
font-family: 'Poppins', var(--sans-fallback);
font-size:13px;
font-weight:normal;
color:#ffd400;
line-height:1.5;
text-decoration:none;
}

@media (max-width:1300px) {
.nav1 {font-size:13px;}
}
@media (max-width:600px) {
.nav1 {font-size:13px;}
}

.nav1:hover {
font-family: 'Poppins', var(--sans-fallback);
font-size:13px;
font-weight:normal;
color:#790a90;
line-height:1.5;
text-decoration:none;
}

.nav2 {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#ffd400;
line-height:1.6;
text-decoration:none;
text-transform: uppercase;
}
@media (max-width:1300px) {
.nav2 {font-size:16px;}
}
@media (max-width:600px) {
.nav2 {font-size:16px;}
}

.nav2:hover {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#790a90;
line-height:1.6;
text-decoration:none;
}
@media (max-width:1300px) {
.nav2:hover {font-size:16px;}
}
@media (max-width:600px) {
.nav2:hover {font-size:16px;}
}

.nav2-current {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#ebeff7;
line-height:1.6;
}
@media (max-width:1300px) {
.nav2:hover {font-size:16px;}
}
@media (max-width:600px) {
.nav2:hover {font-size:16px;}
}

.nav3 {
    font-family: Segoe UI, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffd400;
    line-height: 1.7;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

    .nav3:hover {
        font-family: Segoe UI, sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #97b1ab;
        line-height: 1.7;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

.namenav {
font-family: 'Poppins', var(--sans-fallback);
font-size:18px;
color:#ffd400;
line-height:1.6;
text-decoration:none;
}
@media (max-width:1300px) {
.namenav {font-size:18px;}
}
@media (max-width:600px) {
.namenav {font-size:18px;}
}

.namenav:hover {
font-family: 'Poppins', var(--sans-fallback);
font-size:18px;
color:#ebeff7;
line-height:1.6;
text-decoration:none;
}
@media (max-width:1300px) {
.namenav:hover {font-size:18px;}
}
@media (max-width:600px) {
.namenav:hover {font-size:18px;}
}

.arrow-nav {
color:#ffd400;
font-size:50px;
text-decoration:none;
}

.arrow-nav:hover {
color:#790a90;
font-size:50px;
text-decoration:none;
}

.arrow-nav2 {
color:#ffd400;
font-size:24px;
text-decoration:none;
}

.arrow-nav2:hover {
color:#790a90;
font-size:24px;
text-decoration:none;
}

.button1_nav {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#000000;
background-color:#ffd400;
border:2px solid #ffd400;
filter: drop-shadow(0 0 0.9rem rgb(100,100,100));
border-radius: 40px;
padding:20px;
text-decoration:none;
text-transform: uppercase;
}

.button1_nav:hover {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#ffffff;
background-color:#790a90;
border:2px solid #790a90;
filter: drop-shadow(0 0 0.9rem rgb(100,100,100));
border-radius: 40px;
padding:22px;
text-decoration:none;
text-transform: uppercase;
}

.button1_disabled {
font-family: 'Poppins', var(--sans-fallback);
font-size: 15px;
font-weight: normal;
color: #000000;
background-color: #ebeff7;
border: 2px solid #ebeff7;
filter: drop-shadow(0 0 0.9rem rgb(100,100,100));
border-radius: 30px;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}

.button2_nav {
display: inline-block;
text-align:center;
width:200px;
min-width:200px;
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#000000;
background-color:#ffd400;
border:2px solid #ffd400;
filter: drop-shadow(0 0 0.9rem rgb(100,100,100));
border-radius:8px;
padding:10px;
text-decoration:none;
text-transform: uppercase;
}

.button2_nav:hover {
display: inline-block;
text-align:center;
width:200px;
min-width:200px;
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#000000;
background-color:#790a90;
border:2px solid #790a90;
filter: drop-shadow(0 0 0.9rem rgb(100,100,100));
border-radius:8px;
padding:10px;
text-decoration:none;
text-transform: uppercase;
}

.dropdown {
margin-top:0px;
position: relative;
display: inline-block;
text-align:left;
}

.dropdown-content {
display: none;
margin-top:3px;
border:1px solid #790a90;
border-radius:8px;
position: absolute;
background-color: #000000;
padding:10px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 10000;
left:-220px;
right: auto;
text-align:left;
}
@media (max-width:1200px) {
.dropdown-content {left:-220px;}
}

.dropdown-content a {
color:#ffd400;
font-family: 'Questrial', sans-serif;
font-size:16px; 
font-weight:normal;
line-height:1.2;
text-decoration:none;
padding: 5px 4px 5px 4px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-image: linear-gradient(to right, #ffffff); color:#ffffff; text-decoration:none; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {color:#2d3a44; padding-bottom:4px; border-bottom:2px solid #b0bec9; border-radius:10%;}

.linethrough {
    text-decoration: line-through;
    color: #a34f4f;
}

.small70 {
    font-size: 70%;
}

/* progress circle and start button */
.circle {
    margin: 0px auto;
    width: 100px;
    height: 100px;
}

.begin2 {
    margin: 0px auto;
    width: 100px;
    height: 100px;
}


/* Rating Star Widgets Style */
.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    text-align: center;
}

.rating-stars ul > li.star {
    display: inline-block;
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
    font-size: 2.0em; /* Change the size of the stars */
    color: #ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
    color: #FFE575;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
    color: #ffd400;
}


/* validation messages */
.validation-summary-errors ul {
    list-style-type: none;
    padding-left: 0;
}

.text-danger {
    color: #f84545;
}

.mobilenav #myLinks {
    display: none;
    font-family: 'Poppins', var(--sans-fallback);
    color: #ffd400;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.6;
    text-decoration: none;
    border: none;
}

.#myLinks {
    display: none;
    font-family: 'Poppins', var(--sans-fallback);
    color: #ffd400;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.6;
    text-decoration: none;
    border: none;
}

.mobilenav a {
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    display: block;
    font-family: 'Poppins', var(--sans-fallback);
    color: #ffd400;
    font-weight: normal;
    line-height: 1.6;
    text-decoration: none;
    border: none;
}

.mobilenav a.icon {
    color: #ffd400;
    display: block;
    position: sticky;
    left: 0;
    top: 0;
}

.mobilenav a:hover {
    color: #ffd400;
}

/* share button adjustments */
a.a2a_morexxx {
    display: none;
}

.calltoaction-boxes-left {
    float: left;
    width: 46%;
    padding: 1%;
    margin-right: 2%;
    text-align: center;
    background: linear-gradient(to bottom, #790a90da, #790a90da), url(/media/box-bg1.png) no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 8px;
    filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
}

@media (max-width:1300px) {

    .calltoaction-boxes-left {
        float: none;
        margin: 0 auto;
        width: 96%;
    }
}

@media (max-width:760px) {

    .calltoaction-boxes-left {
        float: none;
        margin: 0 auto;
        width: 96%;
    }
}

.calltoaction-boxes-right {
    float: left;
    width: 46%;
    padding: 1%;
    text-align: center;
    margin-left: 2%;
    background: linear-gradient(to bottom, #790a90da, #790a90da), url(/media/box-bg1.png) no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 8px;
    filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
}

@media (max-width:1300px) {

    .calltoaction-boxes-right {
        float: none;
        margin: 0 auto;
        margin-top: 20px;
        width: 96%;
    }
}

@media (max-width:760px) {

    .calltoaction-boxes-right {
        float: none;
        margin: 0 auto;
        margin-top: 20px;
        width: 96%;
    }
}

/* ---->>> <<<----*/

.calltoaction-banner {
width: 100%;
padding: 0%;
text-align: center;
background: linear-gradient(to bottom, #790a90da, #790a90da), url(/media/box-bg1.png) no-repeat;
background-position: center;
background-size: 100%;
border-radius: 8px;
filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
}

@media (max-width:1300px) {
.calltoaction-banner {
margin: 0 auto;
 width: 96%;
    }
}
@media (max-width:760px) {
.calltoaction-banner {
margin: 0 auto;
width: 96%;
    }
}

.glider-contain {
  width: 61%;
  margin: 0 auto;
  position: relative;

}
.glider {
  margin: 0 auto;
width: 96%;
padding:2%;
  position: relative;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  transform: translateZ(0);
}
.glider-track {
  transform: translateZ(0);
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 1;
}
.glider.draggable {
  user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
}
.glider.draggable .glider-slide img {
  user-select: none;
  pointer-events: none;
}
.glider.drag {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.glider-slide {
  user-select: none;
  justify-content: center;
  align-content: center;
  width: 100%;
}
.glider-slide img {
  max-width: 100%;
}
.glider::-webkit-scrollbar {
  opacity: 0;
  height: 0;
}
.glider-prev,.glider-next {
  user-select: none;
  position: absolute;
  outline: none;
  background: none;
  padding: 0;
  z-index: 2;
  font-size: 40px;
  text-decoration: none;
  left: -23px;
  border: 0;
  top: 30%;
  cursor: pointer;
  color: #ffd400;
  opacity: 1;
  line-height: 1;
  transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
              color .5s cubic-bezier(.17,.67,.83,.67);
}
.glider-prev:hover,
.glider-next:hover,
.glider-prev:focus,
.glider-next:focus {
  color: #ffd400;
}
.glider-next {
  right: -23px;
  left: auto;
}
.glider-next.disabled,
.glider-prev.disabled {
  opacity: .25;
  color: #666;
  cursor: default;
}
.glider-slide {
  min-width: 150px;
}
.glider-hide {
  opacity: 0;
}
.glider-dots {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
.glider-dot {
  border: 0;
  padding: 0;
  user-select: none;
  outline: none;
  display: block;
  cursor: pointer;
  color: #ccc;
  border-radius: 999px;
  background: #ccc;
  width: 0px;
  height: 0px;
  margin: 7px;
}
.glider-dot:hover,
.glider-dot:focus,
.glider-dot.active {
  background: #a89cc8;
}
@media(max-width: 36em){
  .glider::-webkit-scrollbar {
    opacity: 1;
    -webkit-appearance: none;
    width: 7px;
    height: 3px;
  }
  .glider::-webkit-scrollbar-thumb {
    opacity: 1;
    border-radius: 99px;
    background-color: rgba(156, 156, 156, 0.25);
    box-shadow: 0 0 1px rgba(255,255,255,.25);
  }
}

audio {
    
    width: 220px;
    height: 75px;
}

.breadcrumb {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #ffd400;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
}

.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after{
	background: #9EEB62;
}

#myBtn {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#000000;
line-height:1.1;
background-color:#ffd400;
border:2px solid #ffd400;
border-radius:4px;
padding:10px;;
display: none; 
position: fixed; 
bottom: 20px; 
right: 30px; 
z-index: 99; 
outline: none;
cursor: pointer; 
}

#myBtn:hover {
background-color: #c4fcf0;
border:2px solid #c4fcf0;
}

.accordion {
    background-color: #ffd400;
    color: #000000;
    cursor: pointer;
    padding: 1%;
    width: 100%;
    margin-top:20px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    font-weight:bold;
    transition: 0.4s;
    border-radius:4px;
    }
    
    .active, .accordion:hover {
    background-color: #ffd400; 
    }
    
    .panel {
    padding: 1%;
    display: none;
    text-align:left;
    background-color: transparent;
    overflow: hidden;
    }
    
    .accordion:after {
      content: '\25BC'; /* Unicode character for "plus" sign (+) */
      font-size: 17px;
      color: #000000;
      float: right;
      margin-left: 5px;
    }

.seo-page-header-frame {
margin:0 auto;
width:80%;
padding:3%;
border-radius:8px;
}
@media (max-width:1300px) {
    .seo-page-header-frame {margin:0 auto; width:96%; padding:2%;}
}
@media (max-width:600px) {
    .seo-page-header-framer {margin:0 auto; width:96%; padding:2%;}
}
    
.card-thumbnail { 
width:30%;
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.3s; 
-webkit-transition-timing-function: ease; 
} 
@media (max-width:1300px) {
    .card-thumbnail {width:70%;}
}
@media (max-width:600px) {
    .card-thumbnail {width:70%;}
}

/*change the number below to scale to the appropriate size*/ 
.card-thumbnail:hover { 
transform: scale(1.1); 
}

.seo-content-wrapper {
margin:0 auto;
width:90%;
text-align:center;
}
@media (max-width:1300px) {
    .seo-content-wrapper  {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
    .seo-content-wrapper  {float:none; margin:0 auto; width:96%; text-align:center;}
}

.seo-page-left {
float:left;
width:50%;
text-align:left;
}
@media (max-width:1300px) {
    .seo-page-left {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
    .seo-page-left {float:none; margin:0 auto; width:96%; text-align:center;}
}

.seo-page-right-video {
    float: left;
    width: 50%;
    text-align: right;
}

@media (max-width:1300px) {
    .seo-page-right-video {
        float: none;
        margin: 0 auto;
        width: 96%;
        text-align: center;
    }
}

@media (max-width:600px) {
    .seo-page-right-video {
        float: none;
        margin: 0 auto;
        width: 96%;
        text-align: center;
    }
}

.seo-page-right-image {
float:left;
width:50%;
text-align:right;
}
@media (max-width:1300px) {
    .seo-page-right-image {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
    .seo-page-right-image {float:none; margin:0 auto; width:96%; text-align:center;}
}

.seo-page-image {
width:80%;
border-radius:8px;
}
@media (max-width:1300px) {
    .seo-page-image {width:96%;}
}
@media (max-width:600px) {
    .seo-page-image {width:96%;}
}

.seo-page-right-content {
    float:left;
    width:50%;
    text-align:left;
}
@media (max-width:1300px) {
    .seo-page-right-content {float:none; margin:0 auto; width:96%; text-align:center;}
}
@media (max-width:600px) {
    .seo-page-right-content {float:none; margin:0 auto; width:96%; text-align:center;}
}

.seo-page-callout-box {
margin:0 auto;
width:60%;
padding:3%; 
border-radius:8px;
}
@media (max-width:1300px) {
    .seo-page-callout-box {margin:0 auto; width:96%; padding:2%;}
}
@media (max-width:600px) {
    .seo-page-callout-box {margin:0 auto; width:96%; padding:2%;}
}

.sub-home-header-right {
float:left;
text-align:center;
width:63%;
margin-top:4%;
background-color:transparent;
}
@media (max-width:1300px) {
.sub-home-header-right {}
}
@media (max-width:600px) {
.sub-home-header-right {width:66%; margin-top:13%;}
}

a.image-link {
position: relative;
display: inline-block;
overflow: hidden;
text-decoration: none; 
border-radius: 50%; 
filter:drop-shadow(0 0 0.1rem #ffd400);
border:1px solid #ffd400;
}

a.image-link:hover {
filter:drop-shadow(0 0 0.2rem #790a90);
border:1px solid #790a90;
}

a.image-link img {
display: block;
width: 240px;
height: 240px;
border-radius: 50%;
object-fit: cover;
}
@media (max-width:1300px) {
a.image-link img {width:150px; height:150px;}
}

a.image-link::after {
content: "Start Your Reading";   
position: absolute;
inset: 0; 
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #ffffff;               
background-color:#790a9034; 
filter:drop-shadow(0 0 0.1rem #790a90);
opacity: 0;
transition: opacity 0.5s ease;
font-family: 'Poppins', var(--sans-fallback);
font-size:16px;
font-weight:normal;
color:#ffffff;
}

a.image-link:hover::after {
opacity: 1;
}

a.image-link-200 {
position: relative;
display: inline-block;
overflow: hidden;
text-decoration: none; 
border-radius: 50%; 
filter:drop-shadow(0 0 0.1rem #ffd400);
border:1px solid #ffd400;
}

a.image-link-200:hover {
filter:drop-shadow(0 0 0.2rem #790a90);
border:1px solid #790a90;
}

a.image-link-200 img {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
@media (max-width:1300px) {
a.image-link-200 img {width:150px; height:150px;}
}

a.image-link-200::after {
content: "Select This Reader";   
position: absolute;
inset: 0; 
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #ffffff;               
background-color:#790a9034; 
filter:drop-shadow(0 0 0.1rem #790a90);
opacity: 0;
transition: opacity 0.5s ease;
font-family: 'Poppins', var(--sans-fallback);
font-size:16px;
font-weight:normal;
color:#ffffff;
}

a.image-link-200:hover::after {
opacity: 1;
}

.sparkle {
filter: drop-shadow(0 0 0.1rem #ffd400);
animation: glow 2s infinite alternate;
}
@keyframes glow {
0%   { filter: drop-shadow(0 0 0.1rem #ffd400); }
50%  { filter: drop-shadow(0 0 0.4rem #fff176); }
100% { filter: drop-shadow(0 0 0.1rem #ffd400); }
}

/* Sparkle stars (independent elements) */
.spark {
position: absolute;
font-size: 0.8rem;
color: #fffacd;
pointer-events: none; 
opacity: 0;
animation: twinkle 2s infinite;
}

.star1 { top: 5%; left: 80%; animation-delay: 0s; }
.star2 { top: 70%; left: 15%; animation-delay: 1s; }
.star3 { top: 40%; left: 90%; animation-delay: 0.5s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.3) rotate(45deg); }
}

.float-in-top {
  opacity: 0;
  transform: translateY(60px); /* deeper float */
  transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.float-in-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.float-in-left {
  opacity: 0;
  transform: translateX(-100px); /* comes from the left */
  transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
z-index:0;
position: relative
}

/* Final state: fully visible in position */
.float-in-left.visible {
  opacity: 1;
  transform: translateX(0);
z-index:0;
position: relative
}

.float-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  position: relative;
  z-index: 1;

}

/* Final state: fully visible and in place */
.float-in-right.visible {
  opacity: 1;
  transform: translateX(0);
z-index:0;
position: relative
}

.dropbtn {
font-family: 'Poppins', var(--sans-fallback);
font-size:15px;
font-weight:normal;
color:#ffd400;
line-height:1.2;
text-decoration:none;
border: none;
}

.dropdown {
margin-top:0px;
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
margin-top:0px;
border:1px solid #000000;
border-radius:4px;
position: absolute;
background-color: #000000;
padding:10px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 10000;
left:0em;
right: 0em;
text-align:left;
}
@media (max-width:1500px) {
.dropdown-content {left:-14em;}
}

.dropdown-content a  {
color:#ffd400;
font-family: 'Questrial', sans-serif;
font-size:15px; 
font-weight:normal;
line-height:1.2;
text-decoration:none;
padding: 5px 4px 5px 4px;
text-decoration: none;
display: block;
border-bottom:0px solid #ffffff;
border-left:0px solid #ffffff;
}
.dropdown-content a:hover  {background-image: linear-gradient(to right, #ffffff); color:#97b1ab; text-decoration:none; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover  .dropbtn {color:#97b1ab; padding-bottom:4px; border-bottom:0px solid #b0bec9; border-radius:10%;}


.boxes-4{
float:left;
width:22.5%;
padding:0;
margin-left:1%;
margin-right:1%;
border:0 solid transparent;
border-radius:8px;
text-align:center;
background-color:transparent
}
@media (max-width:760px){
.boxes-4{float:none; margin:0 auto; width:96%;}
}

.footer-15{
float:left;
width:15%;
text-align:left
}
@media (max-width:1500px){
.footer-15{float:none; margin:0 auto; width:96%; text-align:center;}
}


/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 180px;
background-color: #090909;
color: #ffffff;
text-align: center;
padding: 5px;
border-radius: 4px;
cursor: help;
 
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}

.title-float-1 {
float:left;
width:7%;
text-align:left;
}
@media (max-width:1300px) {
.title-float-1 {width:15%}
}
@media (max-width:600px) {
.title-float-1 {width:15%}
}

.title-float-2 {
float:left;
width:10%;
border-left:1px solid #ffffff23;
border-right:1px solid #ffffff23;
padding-right:1%;
padding-left:1%;
margin-top:10px;
text-align:center;
}
@media (max-width:1300px) {
.title-float-2 {width:40%; border-left:0px solid #ffffff23; border-right:0px solid #ffffff23; padding-right:1%; padding-left:1%; margin-top:0px;}
}
@media (max-width:600px) {
.title-float-2 {width:40%; border-left:0px solid #ffffff23; border-right:0px solid #ffffff23; padding-right:1%; padding-left:1%; margin-top:0px;}
}

.title-float-3 {
float:left;
width:50%;
padding-left:2%;
text-align:left;
margin-top:14px;
}
@media (max-width:1300px) {
.title-float-3 {float:none; width:100%; margin-top:5px;}
}
@media (max-width:600px) {
.title-float-3 {float:none; width:100%; margin-top:5px;}
}

.title-float-4 {
float:left;
width:28%;
margin-top:22px;
text-align:right;
}
@media (max-width:1300px) {
.title-float-4 {width:100%; margin-top:20px; text-align:left;}
}
@media (max-width:600px) {
.title-float-4 {width:100%; margin-top:20px; text-align:left;}
}

.advisor-profile-box {
float:left;
width:47%;
text-align:center;
}
@media (max-width:1300px) {
.advisor-profile-box {margin:0 auto; width:98%; padding:1%;}
}
@media (max-width:600px) {
.advisor-profile-box {margin:0 auto; width:98%; padding:1%;}
}

.advisor-title-float-1 {
float:left;
width:30%;
text-align:left;
}
@media (max-width:1300px){.advisor-title-float-1{float:none; margin:0 auto; width:96%; text-align:center;}}
@media (max-width:600px){.advisor-title-float-1{float:none; margin:0 auto; width:96%; text-align:center;}}

.advisor-title-float-2{
float:left;
width:66%;
padding-left:4%;
margin-top:0;
text-align:left;
}
@media (max-width:1300px){.advisor-title-float-2{float:none; width:96%; margin:0 auto; padding-left:0%; text-align:center;}}
@media (max-width:600px){.advisor-title-float-2{float:none; width:96%; margin:0 auto; padding-left:0%; text-align:center;}}

.advisor-bullet-left{
float:left;
width:37%;
text-align:left;
margin-top:-10px;
}
@media (max-width:1300px){.advisor-bullet-left{float:none;width:100%;}}
@media (max-width:600px){.advisor-bullet-left{float:none;width:100%;}}

.advisor-bullet-right{
float:left;
width:37%;
text-align:left;
margin-left:6%;
margin-top:-10px;
}
@media (max-width:1300px){.advisor-bullet-right{float:none;width:100%;margin-left:0;}}
@media (max-width:600px){.advisor-bullet-right{float:none;width:100%;margin-left:0;}}

.spanish-main-boxes-spacer {
    float: left;
    min-width: 8%;
    width: 8%;
}

.spanish-reading-box {
    float: left;
    width: 26%;
    padding: 1%;
    text-align: center;
}

@media (max-width:1300px) {
    .spanish-reading-box {
        float: none;
        margin: 0 auto;
        text-align: center;
        width: 94%;
    }
}

.printfooter {
    display: none;
}

.printheader {
    display: none;
}

@media print {
    .noprint {
        display: none;
    }

    .printfooter {
        display: block;
    }

    .printheader {
        display: block;
    }
}

/* card meaning stuff */

.card-div {
    float: left;
    width: 18.4%;
    text-align: center;
}

@media (max-width:1300px) {
    .card-div {
        float: none;
        margin: 0 auto;
        width: 96%;
        text-align: center;
    }
}

@media (max-width:600px) {
    .card-div {
        float: none;
        margin: 0 auto;
        width: 96%;
        text-align: center;
    }
}

.card-thumb {
    width: 100%;
    filter: drop-shadow(0 0 0.1rem #ffd400);
    border-radius: 4px;
    padding: 1px;
}

@media (max-width:1300px) {
    .card-thumb {
        width: 50%;
    }
}

a.card-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    border-radius: 4px;
    filter: drop-shadow(0 0 0.1rem #ffd400);
    border: 0px solid #ffd400;
}

    a.card-link:hover {
        filter: drop-shadow(0 0 0.2rem #790a90);
        border: 0px solid #790a90;
    }

    a.card-link img {
        margin: 0 auto;
        display: block;
        width: 90%;
        border-radius: 4px;
        object-fit: cover;
    }

@media (max-width:1300px) {
    a.card-link img {
        width: 50%;
    }
}

a.card-link::after {
    content: "View Card Meaning";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background-color: #790a9034;
    filter: drop-shadow(0 0 0.1rem #790a90);
    opacity: 0;
    transition: opacity 0.5s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: normal;
}

a.card-link:hover::after {
    opacity: 1;
}

/* start DEV related */

.reading-pages-selected-3card-div {
    margin: 0 auto;
    width: 60%;
    padding-top: 10px;
    text-align: center;
    height: 100%;
}

@media (max-width:1300px) {

    .reading-pages-selected-3card-div {
        width: 96%;
    }
}

@media (max-width:760px) {

    .reading-pages-selected-3card-div {
        width: 96%;
    }
}

.reading-3cards-div {
    float: left;
    width: 33.33%;
    text-align: center;
}

.reading-pages-selected-1card-div {
    margin: 0 auto;
    width: 20%;
    padding-top: 10px;
    text-align: center;
    height: 100%;
}

@media (max-width:1300px) {

    .reading-pages-selected-1card-div {
        width: 32%;
    }
}

@media (max-width:760px) {

    .reading-pages-selected-1card-div {
        width: 32%;
    }
}

.reading-1card-div {
    width: 100%;
    text-align: center;
}

.readings-cards {
    width: 60%;
    margin: 0 auto;
}

@media (max-width:1500px) {

    .readings-cards {
        width: 80%;
    }
}

@media (max-width:600px) {

    .readings-cards {
        width: 80%;
    }
}

.reading-pages-card-box {
    width: 28%;
    border-radius: 8px;
    filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
}

@media (max-width:1700px) {
    .reading-pages-card-box {
        width: 30%;
    }
}

@media (max-width:1500px) {
    .reading-pages-card-box {
        width: 20%;
    }
}

@media (max-width:760px) {
    .reading-pages-card-box {
        width: 30%;
    }
}

/* ---->>> <<<----*/

.reading-pages-deck-cards1 {
    height: 230px;
    border-radius: 6px;
    margin-left: 0px;
}

@media (max-width:1500px) {
    .reading-pages-deck-cards1 {
        height: 120px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

@media (max-width:760px) {
    .reading-pages-deck-cards1 {
        height: 82px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

/* ---->>> <<<----*/

.reading-pages-deck-cards2 {
    height: 230px;
    border-radius: 6px;
    margin-left: -92px;
}

@media (max-width:1500px) {
    .reading-pages-deck-cards2 {
        height: 120px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

@media (max-width:760px) {
    .reading-pages-deck-cards2 {
        height: 82px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

.reading-pages-fulldeck-cards1 {
    height: 230px;
    border-radius: 6px;
    margin-left: 0px;
}

@media (max-width:1500px) {
    .reading-pages-fulldeck-cards1 {
        height: 120px;
        margin-left: 0px;
    }
}

@media (max-width:760px) {
    .reading-pages-fulldeck-cards1 {
        height: 82px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

.reading-pages-fulldeck-cards2 {
    height: 230px;
    border-radius: 6px;
    margin-left: -128px;
}

@media (max-width:1500px) {
    .reading-pages-fulldeck-cards2 {
        height: 120px;
        margin-left: 0px;
        margin-top: 30px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

@media (max-width:760px) {
    .reading-pages-fulldeck-cards2 {
        height: 82px;
        margin-left: 0px;
        margin-top: 0px;
        filter: drop-shadow(0 0 0.2rem rgb(180,194,214));
    }
}

#progressoverlay {
    width: 100%;
    height: 375px;
    position: absolute;
    /*padding: 1%;*/
    top: 0;
    left: 0;
    /*background-color: #97B1AB23;*/
    opacity: 0.5;
    z-index: 945;
}

#progressad {
    width: 100%;
    height: 350px;
    position: absolute;
    padding-top: 1%;
    padding-bottom: 1%;
    top: 0;
    left: 0;
    z-index: 950;
}

.progressbar {
    width: 68%;
    margin: 0px 15% 7px 15%;
    position: absolute;
    bottom: 1px;
    text-align: center;
    /*position: relative;*/
    z-index: 950;
}

.adslot_reading {
    display: inline-block;
    min-width: 250px;
    max-width: 300px;
    width: 100%;
    height: 300px;
    max-height: 300px;
    margin: 0 auto;
}

@media (min-width:500px) {
    .adslot_reading {
        min-width: 300px;
        max-width: 400px;
    }
}

/* ---->>> <<<----*/

.reading-controls {
    margin-top: 40px;
}


/* ---->>> <<<----*/

.reading-text-window {
    position: relative;
    margin: 0 auto;
    width: 100%;
    /*padding: 1%;*/
    height: 375px;
    text-align: left;
    background-color: transparent;
    border: 0px solid #ffffff;
    border-radius: 0px;
    overflow: auto;
}

@media (max-width:1300px) {
    .reading-text-window {
    }
}

@media (max-width:760px) {
    .reading-text-window {
        width: 98%;
    }
}

.reading-text-view {
    margin: 0 auto;
    width: 90%;
    padding: 1%;
    text-align: left;
    background-color: transparent;
    border-radius: 0px;
    overflow: auto;
}

@media (max-width:1300px) {
    .reading-text-view {
    }
}

@media (max-width:760px) {
    .reading-text-view {
        width: 98%;
    }
}



.flip-card-back, .flip-card-front {
    border-radius: 5px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    transition: transform 0.5s ease;
}

.flip-card-back {
    transform: rotateY(180deg);
}

    .flip-card-back.flipped {
        transform: rotateY(0deg);
    }

.flip-card-front {
    transform: rotateY(0deg);
}

    .flip-card-front.flipped {
        transform: rotateY(180deg);
    }

.flip-card-back img {
    backface-visibility: hidden;
    border-radius: 10px;
}

.flip-card-front img {
    backface-visibility: hidden;
    border-radius: 10px;
}

.unselected {
    transition: top 1s ease-out, left 1s ease-out, width 1s ease-out, height 1s ease-out, margin 1s ease-out, opacity 1s ease-out, transform 1s;
    transition-duration: 1s;
}

.hilite:hover {
    margin-bottom: -10px;
}

.shuffling {
    margin-left: -139px;
    transition: margin-left 1s ease-out, transform 1s;
    transition-duration: 1s;
}

@media (max-width:1500px) {
    .shuffling {
        margin-left: -74px;
        margin-top: 30px;
        transition: margin-left 1s ease-out, transform 1s;
        transition-duration: 1s;
    }
}

@media (max-width:760px) {
    .shuffling {
        margin-left: -52px;
        margin-top: 0px;
        transition: margin-left 1s ease-out, transform 1s;
        transition-duration: 1s;
    }
}

.shufflingfull {
    /*    margin-left: -138.5px;*/ /*-149px;*/
    /*    transition: margin-left 1s ease-out, transform 1s;
    transition-duration: 1s;
}

@media (max-width:1500px) {
    .shufflingfull {*/
    margin-left: -74px;
    margin-top: 30px;
    transition: margin-left 1s ease-out, transform 1s;
    transition-duration: 1s;
    /*    }*/
}

@media (max-width:760px) {
    .shufflingfull {
        margin-left: -52px;
        margin-top: 0px;
        transition: margin-left 1s ease-out, transform 1s;
        transition-duration: 1s;
    }
}

.inverted .card-flip-back img {
    transform: scaleY(-1);
}

.inverted {
    transform: rotate(180deg);
}

.wait-cursor {
    cursor: wait;
}

/* ---->>> <<<----*/

.icon-nav {
    color: #ffd400; /*#ffffff;*/
    font-weight: normal;
}

.icon-nav:hover {
    color: #97b1ab; /*#ebeff7;*/
    font-weight: normal;
}



/* for video embeds */
.video-wrap {
    width: 100%;
    max-width: 450px;
    border: 2px solid #97B1AB;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
}

.video-wrap-large {
    width: 100%;
    max-width: 720px;
    border: 2px solid #97B1AB;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
}

.video-container {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}


/* end DEV related */

/* start css moved to the bottom */

.text1 {
    font-family: 'Poppins', var(--sans-fallback);
    font-size: 16px;
    font-weight: normal;
    color: #e6e6e6;
    line-height: 1.7;
}

@media (max-width:1300px) {
    .text1 {
        font-size: 16px;
    }
}

@media (max-width:600px) {
    .text1 {
        font-size: 16px;
    }
}

/* end css moved to the bottom */

/* begin more DEV */

.begin {
    display: none;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -210px;
    z-index: 990;
    margin: 0px auto;
    height: 100px;
}

@media (max-width:760px) {

    .begin {
        bottom: -210px;
    }
}

.floating-button-container {
    position: relative; /* Required for absolute positioning inside */
    min-height: 75px; /* Ensure enough space for the button */
}

.floating-button {
    position: absolute; /* Default: Stays in place initially */
    bottom: 20px; /* Normal positioning inside parent */
    left: 50%;
    transform: translateX(-50%);
    z-index: 990;
    font-family: 'Poppins', var(--sans-fallback);
    font-size: 15px;
    font-weight: 400;
    color: #000;
    background-color: #ffd400;
    border: 2px solid #ffd400;
    filter: drop-shadow(0 0 0.5rem #646464);
    border-radius: 8px;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    outline: none;
    width: auto;
    white-space: nowrap;
    transition: all 1.0s ease-in-out;
}

    /* Hover Effect */
    .floating-button:hover {
        background-color: #97b1ab;
        border: 2px solid #97b1ab;
    }

/* user input results box */

.userinput {
    border: 1px solid #3568FF;
    border-radius: 8px;
    float: right;
    padding: 4px 4px 4px 4px;
    margin-right: 10px;
}

/* typing indicator */


.typind {
    align-items: center;
    display: flex;
    height: 17px;
}

.typindcontainer .typdot {
    background-color: #90949c;
}

.typdot {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 2px;
    display: inline-block;
    height: 4px;
    margin-right: 2px;
    width: 4px;
}

@-webkit-keyframes mercuryTypingAnimation {
    0% {
        -webkit-transform: translateY(0px)
    }

    28% {
        -webkit-transform: translateY(-5px)
    }

    44% {
        -webkit-transform: translateY(0px)
    }
}

.typdot:nth-child(1) {
    -webkit-animation-delay: 200ms;
}

.typdot:nth-child(2) {
    -webkit-animation-delay: 300ms;
}

.typdot:nth-child(3) {
    -webkit-animation-delay: 400ms;
}

/* end more DEV */

/* added for 2026 header compatibility */

/* BASE FLEX ROW */ .flex-row {
    display: flex;
    width: 100%;
    gap: 70px;
    align-items: stretch;
    box-sizing: border-box;
}
/* FLEX 40-60 */

.flex-40-60 .flex-left {
    flex: 0 0 calc(40% - 28px);
}

.flex-40-60 .flex-right {
    flex: 0 0 calc(60% - 42px);
}

.flex-30-70 .flex-left {
    flex: 0 0 calc(30% - 21px);
}

.flex-30-70 .flex-right {
    flex: 0 0 calc(70% - 49px);
}

/* COLUMN STYLES */

.flex-row > div {
    min-width: 0;
    box-sizing: border-box;
}

.flex-row img {
    max-width: 100%;
    height: auto;
}
/* MOBILE */

@media (max-width: 900px) {
    .flex-row {
        flex-direction: column;
        width: 100%;
        gap: 40px;
        align-items: flex-start;
    }

        .flex-row > div {
            width: 100% !important;
            max-width: 100%;
            flex: none !important;
        }
    /* Keep header logo and navigation side by side */

    .home-header-interior .flex-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .home-header-interior .flex-left {
        width: auto !important;
        flex: 2 1 0 !important;
    }

    .home-header-interior .flex-right {
        width: auto !important;
        flex: 8 1 0 !important;
    }
}