/* alert banner */
.alertBanner
{
    padding:0.5rem 0;
    background-color:var(--gfColors-bodyText);
    color:white;
}

.alertBanner a:hover {
    color: var(--gfColors-gold);
    box-shadow: inset 0px -1px 0px var(--gfColors-slateText);calloutBox-item
}

.alertBanner a
{
    color:white;
    box-shadow: inset 0px -1px 0px var(--gfColors-slateText);
}
/* CTA banner overlay option (add .bannerCTA class to component) */
@media(min-width:992px) {
    .bannerCTA {
    background-color: transparent;
    background-image: none;
    position:relative;
    padding-bottom: 3rem;
    }
    .bannerCTA .container {
    z-index: 200;
    position: absolute;
    top: -6rem;
    left: 50%;
    transform: translate(-50%);
    }
}
@media(min-width:1200px) {
    .bannerCTA {
        padding-bottom: 0;
    }
    .bannerCTA .container {
        top: -8rem;
    }
}

/* applications now open, start your application, applicatons due */

.deadline h2 {
    position: relative;
    font-family: var(--gfVars-bodyFont);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    text-wrap: pretty;
}
.deadline h2 span {
    font-size:2.3em;
    font-family: var(--gfVars-thirstyFont);
    text-transform: capitalize;
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    color: var(--gfColors-slate80);
}
.deadline p {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: bold;
    font-size: 1.5rem;
    line-height:1.3;
    text-wrap: pretty;
}

#applicationsOpen h2 {
    line-height: 1.3;
}
@media (max-width:991.98px) {
    .deadline p, .deadline h2 {
        font-size:1.1rem;
        line-height: 1.4;
        margin-top: 1.5em;
    }
    #startYourApplication h2 {
        line-height:1.6;
        margin-bottom:0;
    }
    #startYourApplication h2 span {
        display: block;
    }
   .deadline .u-grid2Columns {
        text-align: center;
        gap: 2rem;
    }
}
@media(min-width:768px) and (max-width:992px) {
    .deadline .u-grid2Columns {
    grid-template-columns: 64% 34%;
}
}
@media(max-width:767.98px) {
    .deadline h2 span{
       font-size: 2em;
       display: block;
       line-height: normal;
    }
    #startYourApplication h2 span {
        line-height:1.8;
    }
}
@media(max-width:575.98px) {
    #applicationsOpen p span, #startYourApplication p span {
        display:block;
    }
    /*.deadline.wysiwyg--navyTiles>.container {*/
    /*    background-color: rgba(0, 0, 0, 0);*/
    /*}*/
    #startYourApplication.wysiwyg--navyTiles>.container {
        padding-top:1rem;
    }
    #applicationDeadline p {
        display: flex;
        flex-direction: column;
    }
}

@media(min-width:768px) {
    #applicationsOpen .u-grid2Columns, #startYourApplication .u-grid2Column {
        grid-template-columns: auto auto;
    }
}
@media(min-width:992px){
   .deadline .button--xl {
        padding: 1rem 3.4rem 1rem;
    }
}
@media(min-width:992px) and (max-width:1200px) {
    #applicationDeadline p, #applicationDeadline h2{
        font-size: 1.15rem;
    }
}

@media(min-width:1200px) {
    .deadline .u-grid2Columns {
        grid-template-columns: 62% 1fr;
    }
    
}

/* Adjusting deadline button color for different screens */

@media(max-width:991.98px) {
.deadline a.button.button--gold{
    border: 1.5px solid var(--gfColors-gold);
    background-color:var(--gfColors-gold);
    color: var(--gfColors-navy);
}
.deadline a.button.button--gold:hover {
    background-color: rgba(0,0,0,0);
    color: var(--gfColors-gold);
    border: 1.5px solid var(--gfColors-gold);
}
}
@media(min-width:992px) {
    .deadline h2 span {
        color: var(--gfColors-gold);
        line-height: normal;
    }
    .deadline p {
        margin-top: -.2rem;
    }
    .deadline .u-goldSparks::before{
        rotate: 107deg;
        right: -1.75rem;
        left: auto;
    }
}


/* Video rotator countdown timer overlay */
/*
@media(min-width:768px) {
.videoRotator-video::before {
    content: "";
    background-image: linear-gradient(10deg, var(--gfColors-navy) 29%, transparent 60%);
    opacity: .55;
    width: 100%;
    height: 100%;
}
main .videoRotator-content {
    align-self: end;
    justify-self: center;
    margin-right: 0;
    width: 100%;
}
.countdownOverlay .u-grid2Columns {
    grid-template-columns: 60% 1fr;
}
.videoRotator-content {
    text-shadow: none;
}
.countdownOverlay h2, .countdownOverlay p, .videoRotator-content {
    text-align:left !important;
}
.countdownOverlay {
    width:100%;
}

.videoRotator-content img, .videoRotator-content svg {
       width: 300px;
       filter: none;
}
}
*/


/*Nationally recognized banner */

#christian-university-banner {
        padding-top: 2rem;
    padding-bottom: 2.5rem;
    background-color: var(--gfColors-slate45);
}
@media(max-width:767.98px) {
    #christian-university-banner {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}
}

/* Nationally Recognized */


#recognition .gf-logo {
    grid-column: 2;
    padding-top: 3rem;
}

#recognition {
    position:relative;
    margin-bottom:4rem;
}

#recognition::before {
    content: "";
    background-color: #e4eaee;
    border: 1px solid transparent;
    width: 30em;
    height: 30em;
    border-radius: 100%;
    position: absolute;
    top: -30em;
    display: grid;
    z-index: -10;
    justify-self: center;
    box-sizing:b;
    opacity:0;
    -webkit-animation: ripple 2s ease-out 1s forwards;
    animation: ripple 2s ease-out 1s forwards;
    box-sizing:content-box;
}

@media (max-width:768.98px) {
    #recognition::before {
        width: 20em;
        height: 20em;
        top: -11em;
        opacity: 1;
        animation: none;
    }
    #recognition .gf-logo {
        padding-top:1rem;
    }
}
@media (max-width:575.98px) {
    #recognition::before {
        width: 14em;
        height: 14em;
        top: -8em;
    }
    ul.u-stepList>li::before {
        left:-.01rem;
    }
    }
@media(min-width:768px) {
    .u-stepList>li>span:first-child {
        display: inline-block;
    }
}

#recognition {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}
#recognition ul.u-stepList {
    padding: 0;
    grid-column: 2;
    max-width: 579px;
}
#recognition h1 {
    grid-column: 1/-1;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: var(--gfVars-bodyFont);
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    margin: 4rem 0 -1.5rem;
    text-align: center;
    color: var(--gfColors-navyAccent);
}
#recognition h2 {
    grid-column: 1/-1;
    font-size: clamp(3rem, 7.9vw, 5rem);
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin: 2rem 0;
    text-align: center;
}
@media(min-width: 992px) {
    #recognition h2 {
        letter-spacing: 0.4rem;
    }
}
@media(min-width: 768px) and (max-width: 992.98px) {
    #recognition h1 {
        font-size: .9rem;
    }
    #recognition h2 {
        font-size:3.9rem;
        letter-spacing: 0.3rem;
    }
}
@media(max-width: 767.98px) {
    #recognition h2 {
        font-size:3rem;
    }
    #recognition .u-stepList>li {
    font-size: 1.2rem;
    }
}

@media(max-width: 575.98px) {

    #recognition {
        background-position: top center;
    }
    #recognition h1 {
        margin-top:2rem;
        font-size: 1rem;
        line-height: 1.4;
    }
}

@-webkit-keyframes ripple {
  0% {
      top: -30em;
    width: 30em;
    height: 30em;
    opacity: 0;
  }
  80% {
    top: -28em;
    width: 36em;
    height: 36em;
    opacity: .7;
  }
  100% {
    top: -28em;
    width: 36em;
    height: 36em;
    opacity: 1;
  }
}
@keyframes ripple {
  0% {
      top: -30em;
    width: 30em;
    height: 30em;
    opacity: 0;
  }
  80% {
    top: -28em;
    width: 36em;
    height: 36em;
    opacity: .7;
  }
  100% {
    top: -28em;
    width: 36em;
    height: 36em;
    opacity: 1;
  }
}


/* Video Block */
#beKnownVideo
{
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:var(--gfColors-navy);
    padding:4rem 0;
    position: relative;
}

#beKnownVideo::before
{
    content: "";
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    background-color: var(--gfColors-navy);
    opacity:0.6;
    z-index:10;
}

#beKnownVideo *
{
    color:white;
}

.beKnownVideo-bgImage
{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    display:flex;
}

.beKnownVideo-bgImage img
{
    object-fit:cover;
    object-position:center center;
    height:100%;
    width:100%;
}

.beKnownVideo-content
{
    display:grid;
    align-items:center;
    justify-items:center;
    position:relative;
    z-index:20;
    font-size:1.5rem;
}

.beKnownVideo-content .videoBlock-thumbnail
{
    width:160px;
    height:160px;
    box-shadow:none;
}

.beKnownVideo-content > *
{
    max-width:620px;
    text-align:center;
}

.beKnownVideo-content h2
{
    font-family:ThirstySoftExtraBold, var(--gfVars-headerFont);
    margin-top:1em;
}

@media(min-width:768px) {
    .beKnownVideo-content .videoBlock-thumbnail
    {
        width:180px;
        height:180px;
        box-shadow:none;
    }
    
    .beKnownVideo-content .videoBlock-thumbnail::after {
        width: 160px;
        height: 160px;
        top: calc(50% - 80px);
        left: calc(50% - 80px);
        font-size: 4rem;
        line-height: 10rem;
    }
}

@media (max-width:767.98px) {
    #beKnownVideo {
        background-image: url(/_assets-index/images/mobile-beknown-video_gfu1158.jpg);
        height: 600px;
    }
    .beKnownVideo-content{
        font-size:1rem;
    }
    .beKnownVideo-content h2 {
            margin: 0;
    }
    .beKnownVideo-content > * {
        margin-bottom:0;
    }
}


/*  ---------   Find Your Program update 2022  ---------  */

.u-gfColors-gold {
    color:var(--gfColors-gold);
}
.u-gfColors-navy {
    color:var(--gfColors-navy);
}
.uppercase {
    text-transform: uppercase;
    letter-spacing: .05rem;
}

#programList .container {
    position:relative;
}

#programList ul li::before {
    display:none;
}
#programList a span {
    font-family: var(--gfVars-headerFont);
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .1rem;
    color: var(--gfColors-navy);
    box-shadow: none;
    text-shadow: none;
    display: block;
    line-height: 1.5em;
    margin-bottom: 0.5rem;
    transition: .25s;
    position: relative;
    text-wrap: auto;
}
#programList a span::after {
    content: "";
    display: inline-block;
    width: 2ex;
    margin-left: .5ex;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='23 9 148 90' style='enable-background:new 23 0 148 106;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st7%7Bfill:none;stroke:%23c4161c;stroke-width:15;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_2'%3E%3C/g%3E%3Cg id='Layer_1'%3E%3Cg%3E%3Cpolyline class='st7' points='108.4,14.8 147.3,53.7 108.4,92.6 '/%3E%3Cline class='st7' x1='147.3' y1='53.7' x2='23.1' y2='53.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    left: 0;
    transition: left .3s;
    height: .9ex;
    bottom: .2ex;

}
#programList .cardLink:hover span::after {
    left: .5ex;
}

#programList div > a {
    box-shadow: none;
    color: var(--gfColors-navyAccent);
     line-height: 1.75em;
}

#programList .cardLink {
    background-color: rgba(187, 201, 212, 0.2);
    padding: 1.5rem 1.5rem 1.75rem;
    margin-bottom: 0;
    position:relative;
    transition: .2s;
}
#programList .cardLink:hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 4px var(--gfColors-slate15);
}
#programList .u-grid3Columns {
        padding-left: 0;
}

@media(max-width:991.98px) {
     #programList h2 {
        text-align:center;
        margin-top: 1.2rem;
     }
}

@media (min-width:992px) {
    #programList .u-grid3Columns {
        gap:1rem;
    }
    #programList .container {
        padding-bottom: 12rem;
    }
    #programList .uppercase {
        padding-left:4rem;
    }
}
@media(min-width:992px) and (max-width:1440px) {
    #programList h2 {
        margin-left:0rem;
        margin-bottom: 0rem;
    }
    
}

/* ----  Personalized Program  ----  */
#programList.personalized .doodleArrows {
    position:relative;
}
#programList.personalized .doodleArrows.container
{
    padding-bottom:0;
}
#programList.personalized .doodleArrows::after {
    position:absolute;
    content:"";
    background-image: url(/__template/t1/images/doodle-illustrations/two-arrows-gold.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    right: 1rem;
    bottom: -4rem;
    z-index: 2;
}
@media(min-width:525px) {
    #programList.personalized .doodleArrows::after {
        height: 100px;
        width: 100px;
        bottom: -4rem;
        right: 2rem;
}
}
@media(min-width:992px) {
     #programList.personalized .doodleArrows::after {
        bottom: -1rem;
        left: 19rem;
        transform: rotate(-87deg) scaleX(1);
        height: 150px;
        width: 150px;
     }   
}
#find-your-program-personalization .u-grid2Columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}
@media (min-width: 992px) {
    #find-your-program-personalization .u-grid2Columns {
        grid-template-columns: 2fr 1fr; 
        gap: 2rem;
    }
}
#find-your-program-personalization .featured-program-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
}
#find-your-program-personalization .featured-program-card .card-media {
    overflow: hidden;
}

#find-your-program-personalization .featured-program-card .card-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out;
}
#find-your-program-personalization .featured-program-card:hover .card-media img {
    transform: scale(1.05);
}
#find-your-program-personalization .featured-program-card .card-body {
    padding: 1rem;
    flex-grow: 1;
    background-color:var(--gfColors-slate15);
}

#find-your-program-personalization .featured-program-card .card-body h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .12rem;
}
#find-your-program-personalization .featured-program-card .card-body h3 a.stretched-link {
    color: var(--gfColors-navy) !important;
}
#find-your-program-personalization .featured-program-card .card-body h3::after {
    content: "";
    display: inline-block;
    width: 2ex;
    margin-left: .5ex;
    /*background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='23 9 148 90' style='enable-background:new 23 0 148 106;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st7%7Bfill:none;stroke:%23c4161c;stroke-width:15;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_2'%3E%3C/g%3E%3Cg id='Layer_1'%3E%3Cg%3E%3Cpolyline class='st7' points='108.4,14.8 147.3,53.7 108.4,92.6 '/%3E%3Cline class='st7' x1='147.3' y1='53.7' x2='23.1' y2='53.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    left: 0;
    transition: left .3s;
    height: .9ex;
    bottom: .2ex;
}
#find-your-program-personalization .featured-program-card .card-body:hover h3::after {
    left: .5ex;
}
#find-your-program-personalization .featured-program-card .card-body p {
    margin-bottom:0;
}
#find-your-program-personalization .additional-programs-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#find-your-program-personalization .additional-programs-sidebar h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

#find-your-program-personalization .program-links-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
#find-your-program-personalization .program-link {
    display: inline-block;
    width: 100%;
    background-color: var(--gfColors-slate15);
    border-color: var(--gfColors-slate15);
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: transform 0.4s ease;
    text-transform: uppercase;
    text-align: start;
}
#find-your-program-personalization .program-link:hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 4px var(--gfColors-slate15);
}

@media (min-width:525px) {
    #find-your-program-personalization .featured-program-card .card-body {
        padding: 2.5rem;
    }
}
@media (min-width:768px)  {
    #find-your-program-personalization .featured-program-card .card-body h3 {
        font-size: 2rem;
    }
    .personalized #find-your-program-personalization .container {
        padding-bottom: 4rem;
    }
}
@media(max-width:768px) {
    #find-your-program-personalization .featured-program-card .card-media img {
            aspect-ratio: 4 / 2.5;
    }
}

@media (min-width:1200px) {
    .personalized #find-your-program-personalization .container {
        padding-bottom: 6rem;
    }
}
.personalized .bg-tiles-bottom {
    right: 8%;
    width: 45%;
    height: 150px;
    left: auto;
    bottom: 18%;
}
@media (max-width:1200px) {
    .personalized .bg-tiles-bottom {
        right: 10%;
    }
}

/* Optimize for Rob's Laptop Screen */
@media (min-width: 992px) and (max-height: 780px) {
    #find-your-program-personalization .featured-program-card .card-media {
        aspect-ratio: 4 / 1.5;
    }
    #programList.personalized .uppercase {
        padding:0;
        display: inline-block !important;
    }
    #programList.personalized .doodleArrows::after {
        bottom: -3rem;
        left: 28rem;
    }
    #programList.personalized .doodleArrows { 
        margin-bottom: -1rem;
    }
    #find-your-program-personalization .featured-program-card .card-body {
        padding:2rem;
    }

}
@media (max-width: 1200px) and (max-height: 780px) {
        .personalized .bg-tiles-bottom {
            display: none !important;
    }
}

/* ----- Background tiles animation ----- */
@media (min-width:992px) {
    .bg-tiles {
    position: absolute;
    top: 10%;
    right: 0%;
    width: 45%;
    height: 150px;
    }
    .bg-tiles-bottom {
       position: absolute;
       bottom:1%;
       left:0%;
       width: 45%;
       height: 150px;
        left: -20%;
    }
    .bg-tiles-bottom li {
    position: absolute;
    list-style: none;
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 60px 60px;
    bottom: -60px;
}
    .bg-tiles li {
        position: absolute;
        list-style: none;
        display: block;
        width: 60px;
        height: 60px;
        background-image:url(/_assets-index/images/tile-gear.svg);
        background-repeat:no-repeat;
        background-size:60px 60px;
        bottom: -60px;
    }
    .bg-tiles li:nth-child(1) {
        left: 0;
    }
    .bg-tiles li:nth-child(2) {
        background-image:url(/_assets-index/images/tile-pennington.svg);
        left: 120px;
        -webkit-animation: fade-out-in 6s ease 6s infinite;
        animation: fade-out-in 6s ease 6s infinite;
    }
    .bg-tiles li:nth-child(3) {
        background-image:url(/_assets-index/images/tile-mountain.svg);
        left: 180px;
    }
    .bg-tiles li:nth-child(4), .bg-tiles-bottom li:nth-child(1) {
        background-image:url(/_assets-index/images/tile-trees.svg);
        left: 240px;
    }
    .bg-tiles li:nth-child(5), .bg-tiles-bottom li:nth-child(2) {
        background-image:url(/_assets-index/images/tile-oregon.svg);
        left: 360px;
    }
    .bg-tiles li:nth-child(6), .bg-tiles-bottom li:nth-child(3) {
        background-image:url(/_assets-index/images/tile-bible.svg);
        left: 420px;
        -webkit-animation: fade-out-in 5s ease infinite;
        animation: fade-out-in 5s ease infinite;
    }
    .bg-tiles li:nth-child(7), .bg-tiles-bottom li:nth-child(4) {
        background-image:url(/_assets-index/images/tile-stethoscope.svg);
        left: 480px;
        -webkit-animation: fade-out-in 6s ease 7s 4;
        animation: fade-out-in 6s ease 7s 4;
    }
    .bg-tiles li:nth-child(8) {
        background-image:url(/_assets-index/images/tile-pens.svg);
        left: 60px;
        bottom:0;
    }
    .bg-tiles li:nth-child(9) {
        background-image:url(/_assets-index/images/tile-bible.svg);
        left: 120px;
        bottom:0;
        -webkit-animation: fade-out-in 6s ease 1s infinite;
        animation: fade-out-in 6s ease 1s infinite;
    }
    .bg-tiles li:nth-child(10), .bg-tiles-bottom li:nth-child(5) {
        background-image:url(/_assets-index/images/tile-stethoscope.svg);
        left: 240px;
        bottom:0;
        -webkit-animation: fade-out-in 6s ease 3s infinite;
        animation: fade-out-in 6s ease 3s infinite;
    }
    .bg-tiles li:nth-child(11), .bg-tiles-bottom li:nth-child(8){
        background-image:url(/_assets-index/images/tile-woodmar.svg);
        left: 300px;
        bottom:0;
    }
    .bg-tiles li:nth-child(12), .bg-tiles-bottom li:nth-child(9) {
        background-image:url(/_assets-index/images/tile-pens.svg);
        left: 420px;
        bottom:0;
        -webkit-animation: fade-out-in 8s ease 5s infinite;
        animation: fade-out-in 8s ease 5s infinite;
    }
    .bg-tiles li:nth-child(13){
        background-image:url(/_assets-index/images/tile-drink.svg);
        left: 480px;
        bottom:0;
        opacity:0;
        -webkit-animation: fade-in-left 8s ease 3s infinite;
        animation: fade-in-left 8s ease 3s infinite;
    }
    .bg-tiles li:nth-child(14) {
        background-image:url(/_assets-index/images/tile-gear.svg);
        left: 180px;
        bottom:60px;
        opacity:0;
        -webkit-animation: fade-in-down 11s ease 3s infinite;
        animation: fade-in-down 11s ease 3s infinite;
    }
    .bg-tiles li:nth-child(15), .bg-tiles-bottom li:nth-child(6) {
        background-image:url(/_assets-index/images/tile-forest.svg);
        left: 300px;
        bottom:60px;
        -webkit-animation: fade-out-in 6s ease 2s 8;
        animation: fade-out-in 6s ease 2s 8;
    }
    .bg-tiles li:nth-child(16), .bg-tiles-bottom li:nth-child(7) {
        background-image:url(/_assets-index/images/tile-gf.svg);
        left: 360px;
        bottom:60px;
        -webkit-animation: fade-out-in 6s ease 4s infinite;
        animation: fade-out-in 6s ease 4s infinite;
    }
    .bg-tiles li:nth-child(17) {
        background-image:url(/_assets-index/images/tile-circuit-board.svg);
        left: 480px;
        bottom:60px;
    }
    .bg-tiles li:nth-child(18) {
        background-image:url(/_assets-index/images/tile-circuit-board.svg);
        left: 120px;
        bottom:60px;
        opacity:0;
        -webkit-animation: fade-in-out 7s ease 2s infinite;
        animation: fade-in-out 7s ease 2s infinite;
    }
}    

@media(min-width:992px) and (max-width:1440px) {

    .bg-tiles {
        right: 4%;
    }
}

    @-webkit-keyframes fade-out-in {
      0% {
        opacity:1;
      }
      50% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    @keyframes fade-out-in {
      0% {
        opacity:1;
      }
      50% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }

    
    @-webkit-keyframes fade-in-out {
      0% {
        opacity:0;
      }
      50% {
        opacity:1;
      }
      100% {
        opacity:0;
      }
    }
    @keyframes fade-in-out {
      0% {
        opacity:0;
      }
      50% {
        opacity:1;
      }
      100% {
        opacity:0;
      }
    }

    @-webkit-keyframes fade-in-down {
      0% {
        opacity:0;
        bottom:60px;
      }
      15% {
        opacity:1;
        bottom:60px;
      }
      40% {
        opacity:1;
        bottom:60px;
      }
      60% {
        opacity:1;
        bottom:0;
      }
      80% {
        opacity:0;
        bottom:0;
      }
      100% {
        opacity:0;
        bottom:60px;
      }
    }
    @keyframes fade-in-down {
      0% {
        opacity:0;
        bottom:60px;
      }
      15% {
        opacity:1;
        bottom:60px;
      }
      40% {
        opacity:1;
        bottom:60px;
      }
      60% {
        opacity:1;
        bottom:0;
      }
      80% {
        opacity:0;
        bottom:0;
      }
      100% {
        opacity:0;
        bottom:60px;
      }
    }


    @-webkit-keyframes fade-in-left {
      0% {
        opacity:0;
        left:480px;
      }
      40% {
        opacity:1;
        left:480px;
      }
      60% {
        opacity:1;
        left:420px;
      }
      80% {
        opacity:0;
        left:420px;
      }
      100% {
        opacity:0;
        left:480px;
      }
    }
    @keyframes fade-in-left {
      0% {
        opacity:0;
        left:480px;
      }
      40% {
        opacity:1;
        left:480px;
      }
      60% {
        opacity:1;
        left:420px;
      }
      80% {
        opacity:0;
        left:420px;
      }
      100% {
        opacity:0;
        left:480px;
      }
    }

    @-webkit-keyframes fade-out-right {
      0% {
        opacity:1;
        left:420px;
      }
      20% {
        opacity:0;
        left:420px;
      }
      30% {
        opacity:0;
        left:480px;
      }
      60% {
        opacity:1;
        left:480px;
      }
      100% {
        opacity:1;
        left:420px;
      }
    }
    @keyframes fade-out-right {
      0% {
        opacity:1;
        left:420px;
      }
      20% {
        opacity:0;
        left:420px;
      }
      30% {
        opacity:0;
        left:480px;
      }
      60% {
        opacity:1;
        left:480px;
      }
      100% {
        opacity:1;
        left:420px;
      }
    }


@media (max-width:575.98px) {
    .circle-bg {
        background-size: min(75vw, 75%),min(45vw, 60%);
        background-position-x: -2rem, 110%;
        background-position-y: center, bottom;
    }
}

/* Circle Stats 60+ 20+ 4,000+ */


#circleStats {
    margin-bottom: 0;
}
#circleStats .circles > div {
    max-width: 300px;
    padding: 1rem;
    display: grid;
    align-content: center;
    text-align: center;
}
#circleStats .circles span.h3.d-block {
    margin-block: 0;
    font-size: 3em;
    font-weight: 500;
}
#circleStats .gold-sparks {
    position: relative;
}
#circleStats .gold-sparks::before {
    content: "";
     background-image: url(/__template/t1/images/doodle-illustrations/three-gold-lines.svg);
     background-repeat: no-repeat;
     width: 3rem;
    height: 3rem;
    position: absolute;
    top: -0.75rem;
    right: 0.25rem;
    display: block;
    transform: scaleX(-1);
}
#circleStats .u-grid3Columns {
    grid-template-columns: repeat(3, auto);
    justify-content: end;
    gap: 1rem;
}

#circleStats .imageBanner {
    padding-bottom: 8rem;
    background-image:url(/_assets-index/images/top-colleges_dji_0015.jpg);
    background-position-y: 20%;
    background-size: cover;
    position: relative;
}

@media(min-width:768px) {
    #circleStats .container.circles.u-grid3Columns {
        margin-top: -5rem;
}
}
#circleStats .circles > div {
    background-color: var(--gfColors-slate45);
    max-width: 230px;
    height: 230px;
    padding: 1.4rem;
    border-radius: 50%;
    display: grid;
    align-content: center;
}
}
@media (min-width:1200px) {
    #circleStats .container.circles.u-grid3Columns {
        padding-inline: 3rem;
    }
}
@media (max-width: 1199.98px) {
    #circleStats {
        padding-top: 2rem;
    }
    #circleStats .circles > div {
    max-width: 210px;
    height: 210px;
    padding: 1rem;
}
}
@media (max-width: 991.98px) {
    #circleStats .u-grid3Columns {
        justify-content: center;
        gap: 0.5rem;
    }
    #circleStats {
        margin-top: 6rem;
    }
}
@media(max-width:767.98px) { 
    #circleStats {
        margin-top: 0;
        overflow: hidden;
        padding-top: 5rem;
    }
    #circleStats .u-grid3Columns {
        grid-template-columns: 1fr;
        gap: 0;
        width: 21rem;
    }
    #circleStats .circles span.h3.d-block {
     font-size: 2.25em;
    }
    #circleStats .circles > div {
    max-width: 10rem;
    height: 10rem;
    }
    #circleStats div.u-grid3Columns > div:nth-child(1) {
        justify-self: start;
        margin-bottom: -4rem;
    }
    #circleStats div.u-grid3Columns > div:nth-child(2) {
        justify-self: end;
    }
    #circleStats div.u-grid3Columns > div:nth-child(3) {
        justify-self: center;
    }
     #circleStats .circles {
         margin-top: -5rem;
    }
    #circleStats .imageBanner {
        padding-bottom: 2rem;
        background-image:url(/_assets-index/images/mobile_dji_0015.jpg);
        background-position-y: 20%;
        background-size: cover;
        justify-content: center;
}
#circleStats .gold-sparks::before {
    content: "";
     background-image: url(/__template/t1/images/doodle-illustrations/three-gold-lines.svg);
     background-repeat: no-repeat;
     width: 3rem;
    height: 3rem;
    position: absolute;
    top: 0.25rem;
    right: 8rem;
    display: block;
    transform: scaleX(-1) rotate(-12deg);
}
}

/* Top Christian College */


#topCollege .u-navyBackground {
    background-color: var(--gfColors-navyAccent);
    padding-bottom: 5rem;
}
#topCollege .u-grid2Columns {
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding-top: 5rem;
    padding-bottom: 1rem;
    padding-left: 2.8rem;
}
#topCollege h2 {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 2.6rem;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    text-align: left;
}
#topCollege h2 span {
   font-family: var(--gfVars-bodyFont);
   color: var(--gfColors-gold);
    font-weight: bold;
    letter-spacing: .15em;
    display:block;
    font-size: .5em;
}

#topCollege ul.u-stepList>li::before {
    height: 1.7rem;
    width: 1.7rem;
}
@media(min-width:768px) {
    #topCollege ul.u-2ColumnList {
        gap:2rem;
}
}
@media (max-width: 1199.98px) {
    #topCollege .u-grid2Columns {
        padding-left: 0.1rem;
    }
}
@media(max-width:767.98px) {
    #topCollege h2 {
        font-size: 2.2rem;
        line-height: 1.2;
        padding-top: 3rem;
        margin-bottom: 1.5rem;
        text-align: left;
    }
    #topCollege .u-navyBackground {
        padding-bottom: 2rem;
    }
    #topCollege .u-grid2Columns {
        padding-top: 0;
    }
}
@media (max-width: 575.98px) {
    #topCollege .u-grid2Columns {
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 0.75rem;
}
}
@media(max-width:381.98px) {
    #topCollege h2 {
        font-size: 1.8rem;
    }
}
@media(min-width:1200px) {
    #topCollege h2 {
        font-size: 3rem;
    }
    #topCollege {
        margin-bottom: 8rem;
    }
    #topCollege ul.u-2ColumnList {
        padding-inline: 4rem;
        gap: 4rem;
    }
}

/* 93 Callout */
#callout-93 {
        height: auto;
        align-content: end;
        overflow: hidden;
}
#callout-93 .background-image{
    width: 100vw;
    background-image: url(/_assets-index/images/2504_chapel_gf13235.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    aspect-ratio: 5 / 2.7;
    margin-top: -7rem;
}
@media (max-width: 1199.98px) {
    #callout-93 .background-image{
    background-size: contain;
    aspect-ratio: 5 / 3;
    margin-top: -3rem;

}
}
@media (max-width: 767.98px) {
    #callout-93 .background-image {
        background-size: 125%;
        aspect-ratio: 5 / 4;
    }
}
@media (min-width: 768px) {
    #callout-93 .background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 9rem;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    margin-top: -0.1rem;
}
}
@media (min-width: 1200px) {
    #callout-93 .background-image::before {
    height: 13rem;
}
}
#callout-93 .content-93 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "highlight"
        "divider"
        "content";
    gap: 1rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
    padding-inline: 28.5px;
}
@media (min-width: 575px) {
    #callout-93 .content-93 {
        padding-inline: 0;
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    #callout-93 .content-93 {
        grid-template-columns: minmax(160px, auto) 2px 1fr;
        grid-template-areas: "highlight divider content";
        column-gap: 2rem;
        align-items: center;
        padding: 0px 2rem 0px 0px;
        margin-top: 4rem;
    }
}
@media (min-width: 1200px) {
    #callout-93.imageBanner-content {
    align-self: start;
    padding: 1rem 2rem;
    background-image: transparent;
    height: auto;
}
}

#callout-93 .calloutBox-highlight {
    font-family: var(--gfVars-headerFont);
    justify-self: start;
    font-size: 4rem;
    line-height: 1;
    grid-area: highlight;
    margin: 0px;
    z-index: 1;
}
@media (min-width: 768px) {
    #callout-93 .calloutBox-highlight {
        justify-self: end;
    }
}
#callout-93 .u-goldSparks::after {
        top: -2.2rem;
    }
#callout-93 .content-93::before {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    background-color: var(--gfColors-gold);
    grid-area: divider;
    z-index: 1;
}
@media (min-width: 768px) {
    #callout-93 .content-93::before {
        width: 2px;
        height: 100%;
    }
}
#callout-93 .calloutBox-content {
    font-size: 1.2rem;
    line-height: 1.6;
    grid-area: content;
    margin: 0px;
    z-index: 1;
}


/* Personalized Story Rotator */

.stories-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     margin-bottom: 1rem;
     margin-top: 5rem;
}
 .stories-header h2 {
     text-transform: uppercase;
     color: var(--gfColors-slate100);
     letter-spacing: 0.1em;
     word-spacing: 0.2rem;
     text-align: center;
     padding-bottom: 1rem;
     margin-top: 0px;
}
 .stories-header h2 span {
     font-family: ThirstySoftExtraBold, var(--gfVars-headerFont);
     font-size: 1.8em;
     color: var(--gfColors-navy);
     text-transform: none;
     letter-spacing: 0;
}
 .threeAsterisks {
     position: relative;
     width: 100%;
}
 .threeAsterisks::after {
     content: "";
     background-image: url(/__template/t1/images/doodle-illustrations/gold-stars.svg);
     background-repeat: no-repeat;
     width: 4.5rem;
     height: 4rem;
     position: absolute;
     bottom: 8.5rem;
     left: 5rem;
     display: inline-block;
}
 .story-card {
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
     border-radius: 4px;
}
 .story-card-image {
     position: relative;
     width: 100%;
     overflow: hidden;
}
 .story-card-image img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
     transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     aspect-ratio: 4/3;
}
 .story-card-image::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 40%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--gfColors-navy) 100%);
     pointer-events: none;
}
 .story-card-body {
     background-color: var(--gfColors-navy);
     color: #ffffff;
     padding: 0 1.75rem 2rem 1.75rem;
     text-align: left;
}
 .story-card-body h3 {
     color: #ffffff;
     font-size: 1.65rem;
     margin-top: 0;
     margin-bottom: 0.75rem;
     line-height: 1.2;
}
 .story-card-body h3 a {
     color: #ffffff !important;
     text-decoration: none;
}
 .story-card-body h3 a:hover, .story-card-body h3 a:focus {
     color: #ffffff;
}
 .story-card-body p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 0.95rem;
     line-height: 1.5;
     margin-bottom: 0;
}
 .stories-cta {
     text-align: center;
}
/*---------- Splide Styles -------------*/
 #storiesCarousel {
     overflow: visible;
}
 .stories-header .splide__arrows {
     position: relative;
     display: flex;
     gap: 1rem;
}
 .stories-header .splide__arrow {
     position: static;
     transform: none;
     background: none;
     border: none;
     width: auto;
     height: auto;
}
 .splide__track {
     overflow: visible !important;
}
 .splide__slide {
     width: 500px;
     flex-shrink: 0;
}
 .story-carousel-wrapper {
     overflow-x: hidden;
}
/*---------- Responsive Carousel Styles ---------*/
 @media (max-width: 767.98px) {
     .splide__slide {
         display: flex !important;
    }
     .splide__slide .story-card-body {
         flex-grow: 1;
    }
}
@media (min-width: 480px) {
     .threeAsterisks::after {
        bottom: 5.5rem;
        left: 0rem;
    }
}
 @media (min-width: 576px) {
     .story-card {
         aspect-ratio: 4 / 4.5;
    }
}
 @media (min-width: 768px) {
     #storiesCarousel .splide__track {
         overflow: hidden;
    }
     .story-card {
         aspect-ratio: 4 / 2.8;
    }
     .stories-header {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         text-align: left;
         margin-bottom: 0;
         margin-top: 0;
    }
     .stories-header .stories-title {
         text-align: left;
    }
     .story-card {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
         position: relative;
         max-width: 675px;
         aspect-ratio: 4 / 3;
    }
     .story-card-image, .story-card-body {
         grid-area: 1 / 1;
    }
     .story-card-image {
         height: 100%;
         width: 100%;
    }
     .story-card-image img {
         height: 100%;
         width: 100%;
    }
     .story-card:hover .story-card-image img {
         transform: scale(1.06);
    }
     .story-card-image::after {
         display: none;
    }
     .story-card-body {
         align-self: end;
         position: static;
         z-index: 2;
         width: 100%;
         background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(15, 23, 42, 0.75) 30%, var(--gfColors-navy) 85% );
         padding: 4rem 1.75rem 2rem 1.75rem;
        /* Tall top padding lets gradient stretch up naturally */
    }
     .story-card-body h3 {
         font-size: 1.85rem;
    }
     .stories-cta {
         text-align: left;
    }
     .story-carousel-wrapper {
        padding-left: 1.75rem;
    }
    .threeAsterisks::after {
        bottom: 1.5rem;
        margin-left: 0.5rem;
        left: auto;
        transform: rotate(-25deg);
     }
}
@media (min-width: 1200px) {
     .threeAsterisks::after {
        bottom: 2rem;
     }
}
/* --------- Story Carousel Controls ---------*/
 .carousel-controls {
     display: flex;
     gap: 0.5rem;
}
 .carousel-controls .carousel-arrow {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 2px solid var(--gfColors-navy);
     background: transparent;
     color: var(--gfColors-navy);
     font-size: 1.5rem;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease;
}
 .carousel-controls .carousel-arrow:hover {
     background-color: var(--gfColors-navy);
     color: #ffffff;
}
/* Fallback for stretched link if not supplied by framework */
 .story-card .stretched-link::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     content: "";
}


/* Old Story Component */

/* Hear our stories */
span.storyCircle{
    transition: all .5s;
}
span.storyCircle:hover{
    transform: scale(1.05) rotate(5deg);
}
 .circle-nav {
    border-radius: 50%;
    position: relative;
    width: fit-content;
    height: auto;
    align-items: center;
    justify-self: center;
    display: grid;
    width:100%;
    overflow: hidden;
 }
 
 /* Accessibility update */
 .circle-nav a {
    display: block;
    position: relative;
    border-radius: 50%;
}

.circle-nav a:focus-visible  {
    border: solid 2px var(--gfColors-linkBlue);
    transition: box-shadow 0.2s ease;
}
 div.storyBlock.u-grid3Columns {
     justify-content: center;
 }
.storyBlock {
    display: grid;
    justify-items: center;
    gap: 3rem;
    grid-template-columns: 22rem 4rem 22rem;

    
}

 #hearStories a.button.sparkle {
     padding: 0.75rem 2.5rem;
     position: relative;
}
 #hearStories a.button.sparkle::after {
     content: "";
     background-image: url(/__template/t1/images/doodle-illustrations/gold-stars.svg);
     background-repeat: no-repeat;
     width: 4rem;
     height: 4rem;
     position: absolute;
     bottom: 1rem;
     left: -2rem;
     display: block;
}
@media(max-width:992px) {
     .storyBlock {
         grid-template-columns: 1fr;
         }
}
@media(min-width:992px) {
     #hearStories a.button.sparkle {
margin-top: 2.5rem;
}}
@media(max-width:992px) {
     #hearStories a.button.sparkle {
margin-top: 1.5rem;
}}

@media(max-width:992px) {
     #storySection div.divideLine {
display: none;
}}

#storySection div, #hearStories {
    text-align: center;
}
.divideLine {
    content: "";
    display: block;
    grid-column: 2;
    background-color: var(--gfColors-gold);
    width: 1px;
}
h3 {
    margin-top: 1em;
}
#storySection h2 {
     text-transform:uppercase;
     color:var(--gfColors-slate100);
     letter-spacing:0.1em;
     word-spacing:0.2em;
     padding-bottom:4rem;
     text-align: center;
     margin-top:4.25em;
}
#storySection h2 span {
     font-family:ThirstySoftExtraBold, var(--gfVars-headerFont);
     font-size:1.8em;
     color:var(--gfColors-navy);
     text-transform:none;
     letter-spacing:0;
}
     #storySection h2 {
         padding-bottom:1rem;
         margin-top: 0px;
    }

    }
     #storySection h2::after {
         content: "";
         height: 2px;
         background-color:var(--gfColors-gold);
         width: 100%;
         position: absolute;
         background-position: bottom;
         top: 2rem;
         position:absolute;
         grid-column: 3;
    }
.storyCircle {
    display: flex;
    justify-content: center;
    align-items: center;}


/* News & Events */
#newsEvents h2
{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap:1rem;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom: 3rem;
}


#newsEvents h2::before, #newsEvents h2::after
{
  content:"";
  height:1px;
  background-color:var(--gfColors-slate80);
  width: 100%;
  display:block;
}
#newsEvents .h5 a {
    line-height:1.2;
}
#newsEvents span span
{
  font-family:ThirstySoftExtraBold, var(--gfVars-headerFont);
  color: var(--gfColors-slate100);
  font-size:0.8em;
  font-weight:normal;
}

.newsEvents-itemHolder
{
    row-gap:1rem;
    column-gap:0;
}

.newsEvents-itemHolder > *
{
    padding:0 1rem;
    display:grid;
    justify-items:center;
    text-align:center;
    align-content: start;
}

.newsEvents-itemHolder img
{
    max-width:250px;
    width:100%;
}

.newsEvents-itemHolder > * + *
{
    border-left: 1px solid var(--gfColors-slate45);
}

.newsEvents-itemHolder-description {
    max-width:32ch;
}

@media(max-width: 767.98px){
    .newsEvents-itemHolder
    {
        grid-template-columns:1fr 1fr;
        column-gap:1rem;
    }
    
    .newsEvents-itemHolder > *
    {
        border-left:none;
        padding:0 0.5rem;
    }
    .newsEvents-itemHolder > div img {
        border-radius:50%;
    }
}

.newsEvents-itemHolder a.no-box-shadow {
    box-shadow:none;
}
.newsEvents-itemHolder > div img {
    border-radius:50%;
    aspect-ratio:1/1;
    object-fit:cover;
    box-shadow: 1px 1px 5px #eee;
    max-width: 250px;
}



@media(min-width:992px) {
    .newsEvents-itemHolder > * {
        padding: 0 3rem;
    }
    #newsEvents h2 {
        margin-bottom: 4rem;
        margin-top: 7rem;
    }
    h3.mt-2.newsEvents-itemHolder-heading {
    line-height: 1.2;
    font-size: 1.75rem;
}
}

@media (max-width: 475.98px) {
    .newsEvents-itemHolder {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
    .newsEvents-itemHolder div img {
        max-width:250px;
    }
    #newsEvents h2 {
        font-size:2.1rem;
    }
}

#calendar-btn a.button.button--lg {
    padding-inline: 3rem;
}


/* Be Known Ending */
#beKnownEnding
{
    text-align:center;
    background-image:url(/_assets-index/images/smiley-face.png);
    background-position:top center;
    background-repeat: no-repeat;
    background-size: 4rem auto;
    padding-top:4.5rem;
}

#beKnownEnding :first-child
{
    margin-top:0;
}

#beKnownVerse {
  position: relative;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  text-align: center;
    padding: 60px 0 0; 
}
#beKnownVerse::before {
  content: "Be Known.";
  font-family: var(--gfVars-headerFont);
  position: relative; 
  order: 3; 
  font-size: 20vw;  
  font-weight: 900;
  color: var(--gfColors-slate20);  
  z-index: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 0.8;
  margin-top: 20px;
}
#beKnownVerse .verse {
  order: 1;
  position: relative;
  z-index: 2;
  width: 100%;
}
#beKnownVerse .verse p {
  max-width: 800px;
  margin: 0 auto;
}
#beKnownVerse .book {
    order: 2;  
    position: relative;
    z-index: 2;
    margin-top: 15px;
    width: 14rem;
    font-size: 1.2rem;
}
@media(max-width:768px) {
    #beKnownVerse .book::after {
        width:0;
        content:none;
    }
}
@media(min-width:992px) {
    #beKnownVerse .verse {
          margin-top: 7rem;
    }
    #beKnownVerse .book {
        margin-top: 5rem;
        font-size: 1.5rem;
        position:relative;
    }

    #beKnownVerse {
        height: 400px;  
        justify-content: center;
    }
    #beKnownVerse::before {
        position: absolute;  
        order: unset; 
        font-size: 22vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        opacity: 0.8;  
        letter-spacing: 0.03em;
    }
}
@media(min-width: 1400px) {
    #beKnownVerse::before{
        font-size: 320px;
    }
}