/* @group Single Pages
------------------------------------ */

/* Content
------------------------------------ */
.site-nav + .single-content {
    background: rgba(98, 119, 101, 0.2);
    margin: 8.2rem 0 7rem;
    padding: 7rem 0;
}
.single-content .header h1 {
    font-size: 2.3rem;
    letter-spacing: 0;
    margin: 0 0 2rem;
}
.single-content .header small,
.single-content .header ul {
    display: block;
    margin: 0 0 2rem;
}
.single-content .header small,
.single-content .header ul li {
    font-size: 1.5rem;
    letter-spacing: .2em;
    text-transform: uppercase; 
}
.single-content .header ul {
    list-style: none;
    padding-left: 0;
}
.single-content .header ul li {
    display: inline-block;
}
.single-content .header ul li:not(:last-of-type)::after {
    content: '|';
    margin: 0 1rem;
}
.single-content .content .img-box {
    height: 23.3rem;
    margin: 0 0 2rem;
}
.single-content .content .video-box {
    cursor: pointer;
}
.single-content .content .video-box button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity .3s;
    pointer-events: none;
}
.single-content .content .video-box button i {
    display: inline-block;
    width: 9rem;
    height: 9rem;
    background: no-repeat url('../../imgs/layout/globals/icon-play.svg') center center;
    background-size: contain;
}
.single-content .content .video-box button.hide {
    opacity: 0;
}
.single-content .content .txt-box p,
.single-content .content .txt-box ul {
    margin: 0 0 2rem;
}
.single-content .content .bttn-box {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1rem;
}
@media only screen
and (min-width : 961px) {
    .site-nav + .single-content {
        margin: 15rem 0 8.4rem;
    }
    .single-content .header h1 {
        font-size: 3.5rem;
        margin: 0 0 2.6rem;
    }
    .single-content .header small,
    .single-content .header ul {
        margin: 0 0 2.6rem;
    }
    .single-content .header small,
    .single-content .header ul li {
        font-size: 2.5rem;
        letter-spacing: .12em;
    }
    .single-content .header ul li:not(:last-of-type)::after {
        margin: 0 1.5rem;
    }
    .single-content .content .img-box {
        height: 69.6rem;
        margin: 0 0 2.6rem;
    }
    .single-content .content .video-box button i {
        width: 14.5rem;
        height: 14.5rem;
    }
    .single-content .content .txt-box p,
    .single-content .content .txt-box ul {
        margin: 0 0 2.6rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}


/* Featured
------------------------------------ */
.single-featured {
    margin: 0 0 7rem;
}
.single-featured .header small {
    display: block;
    margin: 0 0 .9rem;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: .2em;
}
.single-featured .header h2 {
    font-size: 3.5rem;
    line-height: 1.08em;
    letter-spacing: .028em;
    margin: 0 0 6rem;
}
.single-featured .cards .card:not(:last-of-type) {
    margin-bottom: 3rem;
}
.single-featured .cards .card .img-box {
    height: 20rem;
    margin: 0 0 1.5rem;
}
.single-featured .cards .card h3 {
    font-family: var(--baskerville-font);
    font-size: 2.5rem;
    text-transform: capitalize;
    margin: 0 0 1rem;
}
.single-featured .cards .card p {
    margin: 0 0 1rem;
}
.single-featured .cards .card ul {
    list-style: none;
    padding: 0;
}
.single-featured .cards .card ul li {
    display: inline-block;
}
.single-featured .cards .card ul li:not(:last-of-type)::after {
    content: '|';
    margin: 0 .5rem;
}
.single-featured .cards .card button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: default;
}
.single-featured .cards .card button i {
    display: inline-block;
    width: 7rem;
    height: 7rem;
    background: no-repeat url('../../imgs/layout/globals/icon-play.svg') center center;
    background-size: contain;
}
.single-featured .cards .card figcaption {
    position: absolute;
    top: 1.5rem;
    left: 0;
    padding: 1rem;
    background-color: var(--light-green);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: capitalize;
}
@media only screen
and (min-width : 961px) {
    .single-featured {
        margin: 0 0 14.8rem;
    }
    .single-featured .header small {
        font-size: 2.5rem;
        letter-spacing: .12em;
        margin: 0 0 3.4rem;
    }
    .single-featured .header h2 {
        font-size: 5rem;
        line-height: 1.04em;
        letter-spacing: .02em;
        margin: 0 0 8.3rem;
    }
    .single-featured .cards {
        display: flex;
        column-gap: 7rem;
    }
    .single-featured .cards .card {
        flex: 0 1 calc(33% - 3.5rem);
    }
    .single-featured .cards .card:not(:last-of-type) {
        margin-bottom: 0;
    }
    .single-featured .cards .card .img-box {
        height: 30rem;
        margin: 0 0 2rem;
    }
    .single-featured .cards .card h3 {
        font-size: 2.2rem;
        letter-spacing: .009em;
    }
    .single-featured .cards .card p {
        font-size: 2rem;
        letter-spacing: .01em;
        margin: 0 0 2rem;
    }
    .single-featured .cards .card ul li {
        font-size: 2rem;
        letter-spacing: .01em;
    }
    .single-featured .cards .card button i {
        width: 9.5rem;
        height: 9.5rem;
    }
    .single-featured .cards .card figcaption {
        top: 2rem;
        font-size: 1.6rem;
        letter-spacing: .0125em;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
body.single-news_events .site-nav {
    background-color: var(--main-white);
}
body.single-news_events .site-nav .menu a{
    color: var(--main-black);
}
body.single-news_events .site-nav .logo path {
    fill: var(--main-black);
}


/* @end */
/* ANIMATIONS */
:where(#wrapper) .single-content :is(h1, small, small + ul, figure, .txt-box, a) {
	opacity: 0;
	--duration: 1s;
	--delay: 700ms; 
}
:where(#wrapper) .single-content.animateActive :is(h1, small, small + ul,.txt-box) {
	animation: fadeUp var(--duration) forwards;
	animation-delay: calc(var(--delay));
}
:where(#wrapper) .single-content.animateActive :is(figure, a) {
	animation: fade var(--duration) forwards;
}

:where(#wrapper) .single-content.animateActive :is(h1) {
	animation-delay: calc(var(--delay));
}
:where(#wrapper) .single-content.animateActive :is(small) {
	animation-delay: calc(var(--delay) * 2);
}
:where(#wrapper) .single-content.animateActive :is(small + ul) {
	animation-delay: calc(var(--delay) * 2 + 300ms);
}

:where(#wrapper) .single-content.animateActive :is(figure) {
	animation-delay: calc(var(--delay) * 3);
}

:where(#wrapper) .single-content.animateActive :is(.txt-box) {
	animation-delay: calc(var(--delay) * 4);
}
:where(#wrapper) .single-content.animateActive :is(a) {
	animation-delay: calc(var(--delay) * 5);
}

:where(#wrapper) .single-featured :is(p, h2, article) {
	opacity: 0;
	--duration: 1s;
	--delay: 700ms; 
}

:where(#wrapper) .single-featured.animateActive :is(p, h2, article) {
	animation: fade var(--duration) forwards;
}
:where(#wrapper) .single-featured.animateActive :is(p) {
    animation-delay: calc(var(--delay) * 1);
}
:where(#wrapper) .single-featured.animateActive :is(h2) {
    animation-delay: calc(var(--delay) * 2);
}
:where(#wrapper) .single-featured.animateActive :is(article) {
    animation-delay: calc(var(--delay) * 3);
}