<?php
/**
 *  The template for displaying single blog post
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php 
    get_header();
 ?>
    <!-- Breadcrumb -->
    <nav class="container pt-4 mt-lg-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
        </ol>
    </nav>
    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

    <?php
        $categories = get_the_category($post->ID);
    ?>
    <!-- Post title + Meta  -->
    <section class="container mt-4 pt-lg-2 pb-3">
        <h1 class="pb-3" style="max-width: 970px;"><?php the_title()?></h1>
        <div class="d-flex flex-md-row flex-column align-items-md-center justify-content-md-between mb-3">
            <div class="d-flex align-items-center flex-wrap text-muted mb-md-0 mb-4">
            <div class="fs-xs border-end pe-3 me-3 mb-2">
                <?php if($categories):?>
                    <?php foreach($categories as $cat):?>
                        <?php $category_link = get_category_link($cat->cat_ID); ?>
                        <a class="badge bg-faded-primary text-primary fs-base" href="<?= $category_link?>"><?= $cat->name?></a>
                    <?php endforeach ?>
                <?php endif ?>   
            </div>
            <!-- <div class="fs-sm border-end pe-3 me-3 mb-2">12 hours ago</div> -->
            <div class="d-flex mb-2">
                <div class="d-flex align-items-center me-3">
                <time class="hero-article-info"><?php echo get_the_date('F j, Y'); ?></time>
                </div>
                <div class="d-flex align-items-center me-3">
                <i class="bx bx-comment fs-base me-1"></i>
                <span class="fs-sm">4</span>
                </div>
            </div>
            </div>
            <div class="d-flex align-items-center position-relative ps-md-3 pe-lg-5 mb-2">
            <?php echo get_avatar( get_the_author_meta( 'ID' ) , 60, '', get_the_author(), $args = array('class' => array( 'rounded-circle me-3'))); ?>
            <div class="ps-3">
                <h6 class="mb-1"><?php  echo __( 'Author', 'felicityhealth' );?></h6>
                <a href="#" class="fw-semibold stretched-link"><?php echo get_the_author(); ?></a>
            </div>
            </div>
        </div>
    </section>
    <!-- Post image (parallax) -->
    <div class="jarallax mb-lg-5 mb-4" data-jarallax data-speed="0.4" style="height: 36.45vw; min-height: 300px;">
        <div class="jarallax-img" style="background-image: url(<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>);"></div>
    </div>
   
    <!-- Post content + Sharing -->
    <section class="container mb-5 pt-4 pb-2 py-mg-4">
    <div class="row gy-4">

        <!-- Content -->
        <div class="col-lg-9">
        <?php
            if( '' !== get_post()->post_content ) {
                the_content( __( 'Continue reading', 'zulured' ) );
            } else {
                echo __( '<p><em>No content for this post</em></p>', 'zulured' );
            }
        ?>
        <!-- Tags -->
        <hr class="mb-4">
        <div class="d-flex flex-sm-row flex-column pt-2">
            <h6 class="mt-sm-1 mb-sm-2 mb-3 me-2 text-nowrap">Related Tags:</h6>
            <div>
            <a href="#" class="btn btn-sm btn-outline-secondary me-2 mb-2">#lifestyle</a>
            <a href="#" class="btn btn-sm btn-outline-secondary me-2 mb-2">#tech</a>
            <a href="#" class="btn btn-sm btn-outline-secondary me-2 mb-2">#business</a>
            </div>
        </div>
        </div>

        <!-- Sharing -->
        <div class="col-lg-3 position-relative">
        <div class="sticky-top ms-xl-5 ms-lg-4 ps-xxl-4" style="top: 105px !important;">
            <span class="d-block mb-3">5 min read</span>
            <h6>Share this post:</h6>
            <div class="mb-4 pb-lg-3">
            <a href="#" class="btn btn-icon btn-secondary btn-linkedin me-2 mb-2">
                <i class="bx bxl-linkedin"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary btn-facebook me-2 mb-2">
                <i class="bx bxl-facebook"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary btn-twitter me-2 mb-2">
                <i class="bx bxl-twitter"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary btn-instagram me-2 mb-2">
                <i class="bx bxl-instagram"></i>
            </a>
            </div>
            <button class="btn btn-lg btn-outline-secondary">
            <i class="bx bx-like me-2 lead"></i>
            Like it
            <span class="badge bg-primary shadow-primary mt-n1 ms-3">8</span>
            </button>
        </div>
        </div>
    </div>
    </section>

    <!-- Post comments -->
    <section class="container mb-4 pt-lg-4 pb-lg-3">
        <h2 class="h1 text-center text-sm-start">4 comments</h2>
        <div class="row">
            <!-- Comments -->
            <div class="col-lg-9">

            <!-- Comment -->
            <div class="py-4">
                <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
                <div class="d-flex align-items-center me-3">
                    <img src="assets/img/avatar/03.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                    <h6 class="fw-semibold mb-0">Esther Howard</h6>
                    <span class="fs-sm text-muted">4 mins ago</span>
                    </div>
                </div>
                <a href="#" class="nav-link fs-sm px-0">
                    <i class="bx bx-share fs-lg me-2"></i>
                    Reply
                </a>
                </div>
                <p class="mb-0">Nibh enim porta ut augue felis, donec sit luctus. Quis ullamcorper dolor sit mauris. Hendrerit eu libero, eu tristique sodales ultrices etiam adipiscing. Donec viverra sodales arcu gravida nibh at. Neque lobortis quis porta integer et placerat lectus scelerisque. Velit eget malesuada morbi faucibus at sed euismod. Tortor, eu ut id tincidunt leo placerat luctus.</p>
            </div>

            <hr class="my-2">

            <!-- Comment -->
            <div class="py-4">
                <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
                <div class="d-flex align-items-center me-3">
                    <img src="assets/img/avatar/02.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                    <h6 class="fw-semibold mb-0">Ralph Edwards</h6>
                    <span class="fs-sm text-muted">September 9 at 12:48</span>
                    </div>
                </div>
                <a href="#" class="nav-link fs-sm px-0">
                    <i class="bx bx-share fs-lg me-2"></i>
                    Reply
                </a>
                </div>
                <p class="mb-0 pb-2">Eget amet, ac scelerisque tellus sed. Sapien duis sit neque pulvinar. Est sit aenean nisl etiam donec mattis ut diam. Luctus massa eu nunc aliquam viverra tempus, eu amet, luctus. Ac faucibus vestibulum eu lacus. Ullamcorper sem ultrices tincidunt pharetra?</p>

                <!-- Comment reply -->
                <div class="position-relative ps-4 mt-4">
                <span class="position-absolute top-0 start-0 w-1 h-100 bg-primary"></span>
                <div class="d-flex align-items-center justify-content-between ps-3 pb-2 mb-1">
                    <div class="d-flex align-items-center me-3">
                    <img src="assets/img/avatar/05.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                        <h6 class="fw-semibold mb-0">Albert Flores</h6>
                        <span class="fs-sm text-muted">16 hours ago</span>
                    </div>
                    </div>
                    <a href="#" class="nav-link fs-sm px-0">
                    <i class="bx bx-share fs-lg me-2"></i>
                    Reply
                    </a>
                </div>
                <p class="ps-3 mb-0"><a href="#" class="fw-semibold text-decoration-none">@Ralph Edwards</a> Vulputate malesuada amet, consequat ullamcorper. Orci, cras maecenas in sit purus pellentesque. Ridiculus blandit pellentesque eget arcu morbi nisl. Morbi volutpat adipiscing sapien sed ut tempor.</p>
                </div>
            </div>

            <hr class="my-2">

            <!-- Comment -->
            <div class="py-4">
                <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
                <div class="d-flex align-items-center me-3">
                    <img src="assets/img/avatar/07.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                    <h6 class="fw-semibold mb-0">Cameron Williamson</h6>
                    <span class="fs-sm text-muted">March 24 at 8:20</span>
                    </div>
                </div>
                <a href="#" class="nav-link fs-sm px-0">
                    <i class="bx bx-share fs-lg me-2"></i>
                    Reply
                </a>
                </div>
                <p class="mb-0">Mattis id ut sed arcu metus elit faucibus condimentum aliquam. Nam adipiscing diam et suspendisse. Sagittis massa maecenas laoreet nulla amet nunc sagittis, pulvinar neque. Duis imperdiet ipsum suspendisse massa lectus habitasse. Id ante volutpat hendrerit augue parturient eget. Ac vitae posuere leo morbi vitae at hac lectus. Nibh neque quam quis amet mattis sit. Faucibus risus at sit tempus ut.</p>
            </div>
            </div>
        </div>
    </section>

    <!-- Comment form + Subscription -->
    <section class="container mb-4 pb-2 mb-md-5 pb-lg-5">
        <div class="row gy-5">
            <!-- Comment form -->
            <div class="col-lg-9">
            <div class="card p-md-5 p-4 border-0 bg-secondary">
                <div class="card-body w-100 mx-auto px-0" style="max-width: 746px;">
                <h2 class="mb-4 pb-3">Leave a Comment</h2>
                <form class="row gy-4 needs-validation" novalidate>
                    <div class="col-sm-6 col-12">
                    <label for="c-name" class="form-label fs-base">Name</label>
                    <input id="c-name" type="text" class="form-control form-control-lg" required>
                    <span class="invalid-tooltip">Please, enter your name.</span>
                    </div>
                    <div class="col-sm-6 col-12">
                    <label for="c-email" class="form-label fs-base">Email</label>
                    <input id="c-email" type="email" class="form-control form-control-lg" required>
                    <span class="invalid-tooltip">Please, provide a valid email address.</span>
                    </div>
                    <div class="col-12">
                    <label for="c-comment" class="form-label fs-base">Comment</label>
                    <textarea id="c-comment" class="form-control form-control-lg" rows="3" placeholder="Type your comment here..." required></textarea>
                    <span class="invalid-tooltip">Please, enter your comment.</span>
                    </div>
                    <div class="col-12">
                    <div class="form-check">
                        <input id="c-save" type="checkbox" class="form-check-input">
                        <label for="c-save" class="form-check-label">Save my name and email in this browser for the next time I comment.</label>
                    </div>
                    </div>
                    <div class="col-12">
                    <button type="submit" class="btn btn-lg btn-primary w-sm-auto w-100 mt-2">Post comment</button>
                    </div>
                </form>
                </div>
            </div>
            </div>

            <!-- Subscription form + Sharing -->
            <div class="col-lg-3 position-relative">
            <div class="sticky-top ms-xl-5 ms-lg-4 ps-xxl-4" style="top: 70px !important;">
                <div class="row gy-lg-5 gy-4 justify-content-center text-lg-start text-center">

                <!-- Subscription form -->
                <div class="col-lg-12 col-sm-7 col-11">
                    <h6 class="fs-lg">Enjoy this post? Join our newsletter</h6>
                    <form class="needs-validation" novalidate>
                    <div class="input-group mb-3">
                        <i class="bx bx-envelope position-absolute start-0 top-50 translate-middle-y zindex-5 ms-3 text-muted d-lg-inline-block d-none"></i>
                        <input type="email" placeholder="Your Email" class="form-control ps-lg-5 rounded text-lg-start text-center" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Subscribe</button>
                    </form>
                </div>

                <!-- Sharing -->
                <div class="col-lg-12 col-sm-7 col-11">
                    <h6 class="fs-lg">Don’t forget to share it</h6>
                    <div class="mb-4 pb-lg-3">
                    <a href="#" class="btn btn-icon btn-secondary btn-linkedin me-2 mb-2">
                        <i class="bx bxl-linkedin"></i>
                    </a>
                    <a href="#" class="btn btn-icon btn-secondary btn-facebook me-2 mb-2">
                        <i class="bx bxl-facebook"></i>
                    </a>
                    <a href="#" class="btn btn-icon btn-secondary btn-twitter me-2 mb-2">
                        <i class="bx bxl-twitter"></i>
                    </a>
                    <a href="#" class="btn btn-icon btn-secondary btn-instagram me-2 mb-2">
                        <i class="bx bxl-instagram"></i>
                    </a>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
    </section>
    <?php endwhile; ?>
    <?php endif; ?>

    <!-- Related articles (Slider below lg breakpoint) -->
    <section class="container mb-5 pt-md-4">
    <div class="d-flex flex-sm-row flex-column align-items-center justify-content-between mb-4 pb-1 pb-md-3">
        <h2 class="h1 mb-sm-0">Related Articles</h2>
        <a href="blog-list-with-sidebar.html" class="btn btn-lg btn-outline-primary ms-4">
        All posts
        <i class="bx bx-right-arrow-alt ms-1 me-n1 lh-1 lead"></i>
        </a>
    </div>

    <div class="swiper mx-n2" data-swiper-options='{
        "slidesPerView": 1,
        "spaceBetween": 8,
        "pagination": {
        "el": ".swiper-pagination",
        "clickable": true
        },
        "breakpoints": {
        "500": {
            "slidesPerView": 2
        },
        "1000": {
            "slidesPerView": 3
        }
        }
    }'>
        <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide h-auto pb-3">
            <article class="card border-0 shadow-sm h-100 mx-2">
            <div class="position-relative">
                <a href="blog-single.html" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                <i class="bx bx-bookmark"></i>
                </a>
                <img src="assets/img/blog/01.jpg" class="card-img-top" alt="Image">
            </div>
            <div class="card-body pb-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Business</a>
                <span class="fs-sm text-muted">May 19, 2021</span>
                </div>
                <h3 class="h5 mb-0">
                <a href="blog-single.html">5 Bad Landing Page Examples &amp; How We Would Fix Them</a>
                </h3>
            </div>
            <div class="card-footer py-4">
                <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none">
                <img src="assets/img/avatar/01.jpg" class="rounded-circle me-3" width="48" alt="Avatar">
                Jerome Bell
                </a>
            </div>
            </article>
        </div>

        <!-- Item -->
        <div class="swiper-slide h-auto pb-3">
            <article class="card border-0 shadow-sm h-100 mx-2">
            <div class="position-relative">
                <a href="blog-single.html" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                <i class="bx bx-bookmark"></i>
                </a>
                <img src="assets/img/blog/06.jpg" class="card-img-top" alt="Image">
            </div>
            <div class="card-body pb-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Marketing</a>
                <span class="fs-sm text-muted">Apr 2, 2021</span>
                </div>
                <h3 class="h5 mb-0">
                <a href="blog-single.html">How Agile is Your Forecasting Process?</a>
                </h3>
            </div>
            <div class="card-footer py-4">
                <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none">
                <img src="assets/img/avatar/05.jpg" class="rounded-circle me-3" width="48" alt="Avatar">
                Albert Flores
                </a>
            </div>
            </article>
        </div>

        <!-- Item -->
        <div class="swiper-slide h-auto pb-3">
            <article class="card border-0 shadow-sm h-100 mx-2">
            <div class="position-relative">
                <a href="blog-single.html" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                <i class="bx bx-bookmark"></i>
                </a>
                <img src="assets/img/blog/03.jpg" class="card-img-top" alt="Image">
            </div>
            <div class="card-body pb-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Business</a>
                <span class="fs-sm text-muted">Sep 16, 2021</span>
                </div>
                <h3 class="h5 mb-0">
                <a href="blog-single.html">This Week in Search: New Limits and Exciting Features</a>
                </h3>
            </div>
            <div class="card-footer py-4">
                <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none">
                <img src="assets/img/avatar/02.jpg" class="rounded-circle me-3" width="48" alt="Avatar">
                Ralph Edwards
                </a>
            </div>
            </article>
        </div>
        </div>

        <!-- Pagination (bullets) -->
        <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
    </div>
    </section>
<style>
.nga-hero-section {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
}

.-bg-deep-blue {
    background-color: #051c2c;
    color: #fff;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 20%);
}

.-bg-deep-blue * {
    color: inherit;
}

.nga-hero-section .parallax-container {
    width: 100%;
    height: 281px;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    background-size: cover;
    background-position: center center;
}

.nga-hero-section.default .text-bg-gradient {
    display: none;
}

.nga-hero-section .hero-media-container,
.nga-hero-section .hero-text-container {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
}

.nga-hero-section .hero-text-container {
    padding: 100px 0 30px;
    text-align: center;
    min-height: auto;
    z-index: 1;
}

.nga-hero-section.default .hero-media-container,
.nga-hero-section.default .hero-text-container {
    min-height: 225px;
}

.nga-hero-section.default .hero-text-container {
    text-align: left;
    position: relative;
    padding-bottom: 30px;
    padding-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.nga-hero-section .wrapper {
    min-height: auto;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.ngat .wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: auto;
    margin: 0;
}

.wrapper:after {
    clear: both;
    content: '';
    display: table;
}

.nga-hero-section.default .content-wrapper {
    -ms-flex-item-align: center;
    align-self: center;
    width: 90.55007%;
    margin: 0 5.50071%;
}

.nga-animate {
    opacity: 1;
}

.slight-slide-down-0 {
    -webkit-animation: slight-slide-down 1s forwards;
    animation: slight-slide-down 1s forwards;
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}

.u-ts-3 {
    font-size: 2.25rem !important;
    line-height: 2.75rem !important;
}

.nga-hero-section .hero-text-container header,
.nga-hero-section .hero-text-container h1 {
    margin: 0 0 8px;
}

.nga-hero-section .hero-text-container h1 {
    font-family: 'Georgia' , Times New Roman, serif;
    font-weight: 500;
}

.nga-hero-section .hero-text-container .headline {
    color: inherit;
    line-height: 1.17;
    letter-spacing: -0.2px;
}

.nga-hero-section.default .hero-text-container .headline {
    font-family: 'Georgia' , Times New Roman, serif;
    font-size: 1.75rem;
    line-height: 2rem;
}

.blur-in-800 {
    -webkit-animation: blur-in 1s forwards;
    animation: blur-in 1s forwards;
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
}

.nga-hero-section .hero-text-container footer {
    margin-top: 5px;
}

.nga-hero-section .hero-article-info,
.nga-hero-section .eyebrow {
    font-size: .875rem;
    line-height: 1.25rem;
    font-style: normal;
}

.-bg-deep-blue * a:before,
.-bg-deep-blue * a:after,
.-bg-deep-blue * a *:after {
    color: inherit;
}

.page-arrow-down-icon:before {
    content: "\f078";
}

[class^='page-']:before,
[class*=' page-']:before {
    font-family: "FontAwesome";
    font-weight: 400;
    color: #e92b26;
    font-size: 1em;
    display: inline-block;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




@media screen and (min-width: 48rem) {
    .u-ts-3 {
        font-size: 2.75rem !important;
        line-height: 3.25rem !important;
    }

}


@media screen and (min-width: 481px) {
    .nga-hero-section.default {
        min-height: 550px;
    }

    /* .nga-hero-section .parallax-container {
        min-height: 225px;
        position: absolute;
        height: calc(100% + 145px);
        top: -145px;
        left: 0;
    } */
    .nga-hero-section .parallax-container {
        min-height: 225px;
        position: absolute;
        height: calc(100% + 200px);
        top: -100px;
        left: 0;
        background-repeat: no-repeat;
    }

    .nga-hero-section.default .text-bg-gradient {
        display: block;
        position: absolute;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.6)));
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.6) 100%);
        top: 30%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .nga-hero-section.default .hero-text-container {
        position: absolute;
        min-height: auto;
        bottom: 0;
        padding-bottom: 65px;
        z-index: 3;
    }

    .nga-hero-section.default .content-wrapper {
        width: 81.10014%;
        margin-left: 9.44993%;
        min-height: auto;
        background-color: transparent;
    }

    .nga-hero-section .hero-text-container header,
    .nga-hero-section .hero-text-container h1 {
        margin: 0 0 15px;
    }

    .nga-hero-section .hero-text-container .headline {
        letter-spacing: normal;
    }

    .nga-hero-section.default .hero-text-container .headline {
        font-size: 2.75rem;
        line-height: 3.25rem;
    }
}

@media screen and (min-width: 73.75rem) {
    .u-ts-3 {
        font-size: 3.25rem !important;
        line-height: 3.75rem !important;
    }

}

@media screen and (min-width: 769px) {
    .nga-hero-section.default .content-wrapper {
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .nga-hero-section.default .hero-text-container .headline {
        font-size: 3.25rem;
        line-height: 3.75rem;
    }

}

@media screen and (min-width: 1181px) {
    .nga-hero-section.default .content-wrapper {
        width: 70.54945%;
        margin-left: 7.36264%;
    }

    .nga-hero-section.default .hero-text-container .headline {
        font-size: 4rem;
        line-height: 4.75rem;
    }
}
</style>

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<main class="ngat">
    <section class="nga-hero-section default -bg-deep-blue">
        <div class="js-parallax parallax-container"
            style="background-image: url('<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>');">
        </div>
        <div class="text-bg-gradient "></div>
        <div class="hero-text-container">
            <div class="wrapper">
                <div class="content-wrapper">
                    <h1 class="headline nga-animate u-ts-3 slight-slide-down-0" itemprop="headline">
                        <?php the_title(); ?>
                    </h1>
                    <footer class="nga-animate blur-in-800">
                        <time class="hero-article-info"> <?php echo get_the_date('F j, Y'); ?></time>
                        <span class="hero-article-info"> | <?php echo __( 'Article', 'zulured' )?></span>
                    </footer>
                    <a href="javascript://" class="page-arrow-down-icon"></a>
                </div>
            </div>
        </div>
    </section>
    <style>
    .nga-article-metadata {
        position: relative;
        z-index: 1;
        height: auto;
        margin: 30px auto;
        opacity: 0;
    }

    .nga-article-metadata.visible,
    .hero-deck.visible {
        -webkit-transition: all 0.4s ease-in-out 0.4s;
        transition: all 0.4s ease-in-out 0.4s;
        opacity: 1;
    }

    .nga-article-metadata .wrapper {
        height: auto;
    }

    .nga-article-metadata .sticky-share-wrapper {
        top: -3.5rem;
        -webkit-transition: top 0.5s;
        transition: top 0.5s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0 auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .nga-article-metadata .sticky-share-wrapper,
    .hero-deck .deck-content {
        width: 88.99859%;
        margin-left: 5.50071%;
    }

    .nga-article-metadata .author-by-line {
        margin-bottom: 24px;
        font-size: .875rem;
        line-height: 1.25rem;
    }

    .cta-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0;
        margin-top: 0;
        clear: both;
        max-width: 100%;
    }

    .cta-container.-align-horizontal {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-bottom: -1rem;
    }

    .nga-article-metadata .share-menu {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .cta-container.-margin-tight.-align-horizontal {
        margin-bottom: -.5rem;
    }

    .visually-hidden {
        position: absolute !important;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }

    .icon-radial,
    .icon-outline {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-color: #2251ff;
    }

    .cta-container>a {
        -ms-flex-item-align: start;
        align-self: flex-start;
        max-width: 100%;
        list-style: none;
        margin-top: 1rem;
    }

    .cta-container.-margin-tight>a {
        margin-top: .5rem;
    }

    .cta-container.-align-horizontal>a {
        margin: 0 1rem 1rem 0;
    }

    .cta-container.-margin-tight.-align-horizontal>a {
        margin: 0 .5rem .5rem 0;
    }

    .page-linkedin2-icon:before {
        content: "\f0e1";
    }

    .page-twitter-icon:before {
        content: "\f099";
    }

    .page-facebook-thin-icon:before {
        content: "\f09a";
    }

    .page-email-icon:before {
        content: "\f0e0";
    }

    .page-print-icon:before {
        content: "\f02f";
    }

    .icon-radial:before,
    .icon-outline:before {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        -webkit-transition: 120ms linear;
        transition: 120ms linear;
        position: relative;
        -webkit-transition-property: background-color, top, -webkit-box-shadow;
        transition-property: background-color, top, -webkit-box-shadow;
        transition-property: background-color, box-shadow, top;
        transition-property: background-color, box-shadow, top, -webkit-box-shadow;
        width: 32px;
        height: 32px;
        font-size: .875rem;
    }

    .icon-radial:before {
        background-color: #000;
        color: #fff;
    }

    .icon-radial:hover:before {
        background-color: #2251ff;
    }

    .icon-radial.page-print-icon:before,
    .icon-radial.page-email-icon:before {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .icon-radial:empty:hover:before,
    .icon-outline:empty:hover:before,
    .icon-default:empty:hover:before {
        top: -2px;
        -webkit-box-shadow: 0 7px 14px 0 rgb(0 0 0 / 20%);
        box-shadow: 0 7px 14px 0 rgb(0 0 0 / 20%);
    }

    @media screen and (max-width: 47.9375em) {
        .nga-hero-section.default .hero-text-container {
            background-color: #f0f0f0;
            color: #333;
        }

        .nga-hero-section.default {
            text-shadow: none;
        }

        .nga-hero-section .parallax-container {
            min-height: 225px;
            position: absolute;
            height: calc(100% + 145px);
            top: -145px;
            left: 0;
        }

    }

    @media screen and (min-width: 481px) {
        .nga-article-metadata {
            margin: 40px auto 30px;
        }

        .nga-article-metadata .sticky-share-wrapper {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
        }

        .nga-article-metadata .sticky-share-wrapper,
        .hero-deck .deck-content,
        .ngat .main-copy>p,
        .ngat .main-copy>h2,
        .ngat .main-copy>h3 {
            padding: 0 3.94922%;
        }

        .nga-article-metadata .author-by-line {
            margin: 0 24px 0 0;
        }
    }

    @media screen and (min-width: 769px) {
        .nga-article-metadata {
            margin: 60px auto 40px;
        }

        .nga-article-metadata .sticky-share-wrapper,
        .ngat .main-copy>p,
        .ngat .main-copy>h2,
        .ngat .main-copy>h3 {
            width: 81.10014%;
            margin-left: 9.44993%;
        }

        .hero-deck .deck-content,
        .ngat .main-copy>p,
        .ngat .main-copy>h2,
        .ngat .main-copy>h3 {
            padding: 0 9.44993%;
        }
    }

    @media screen and (min-width: 1181px) {

        .nga-article-metadata .sticky-share-wrapper,
        .hero-deck .deck-content,
        .ngat .main-copy>p,
        .ngat .main-copy>h2,
        .ngat .main-copy>h3 {
            width: 70.54945%;
            margin-left: 14.72527%;
            padding: 0 7.36264%;
        }
    }
    </style>
    <section class="nga-article-metadata visible">
        <div class="wrapper">
            <div class="sticky-share-wrapper">
                <div class="author-by-line">
                    <?php  echo __( 'By ', 'zulured' ); echo get_the_author(); ?>
                </div>
                <?php get_template_part( 'template-parts/snippets/share' );?>
            </div>
        </div>
    </section>

    <style>
    .nga-article-metadata.sticky {
        height: 0;
        opacity: 0;
        position: fixed;
        top: -100px;
        left: 0;
        width: 100%;
        z-index: 101;
        margin: 0;
        padding: 0;
        max-width: none;
        background: #fff;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        border-bottom: solid 1px #d0d0d0;
    }

    .nga-article-metadata.sticky .wrapper {
        height: 4rem;
    }

    .nga-article-metadata.sticky .sticky-share-wrapper {
        height: 100% !important;
        width: 100% !important;
        -webkit-transition: top 0.5s;
        transition: top 0.5s;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 5.50071%;
        margin-left: 0px;
    }

    .nga-article-metadata.sticky .sticky-share-title {
        display: none;
    }

    .nga-article-metadata.sticky .progress-bar {
        position: relative;
        border-color: #2251ff;
        border-style: solid;
        border-width: 2px 0 0;
        border-radius: 50px;
    }

    @media screen and (min-width: 481px) {
        .nga-article-metadata.sticky .sticky-share-title {
            vertical-align: middle;
            display: block;
            font-size: 1.125rem;
            line-height: 1.75rem;
            font-weight: 400;
            color: #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 43.30042%;
        }
    }

    @media screen and (min-width: 769px) {
        .nga-article-metadata.sticky .sticky-share-title {
            width: 52.75035%;
        }
    }

    @media screen and (min-width: 1181px) {
        .nga-article-metadata.sticky .sticky-share-wrapper {
            padding: 0 7.36264%;
        }

        .nga-article-metadata.sticky .sticky-share-title {
            width: 55.82418%;
        }

    }
    </style>
    <section class="nga-article-metadata sticky" aria-hidden="true" style="overflow-y: hidden; z-index: 101;">
        <div class="wrapper">
            <div class="sticky-share-wrapper">
                <div class="sticky-share-title"><?php the_title(); ?></div>
                <?php get_template_part( 'template-parts/snippets/share' );?>
            </div>
        </div>
        <div class="progress-bar" style="width: 14.5823%;"></div>
    </section>

    <style>
    .hero-deck {
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        width: 100%;
        opacity: 0;
    }

    .hero-deck .deck-content {
        opacity: 1;
        -ms-flex-item-align: center;
        align-self: center;
        margin: 0 auto;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 300;
        padding-top: 20px;
        padding-bottom: 45px;
    }

    .nga-article-metadata~.hero-deck .deck-content {
        padding-top: 0;
    }

    @media screen and (min-width: 481px) {
        .hero-deck .deck-content {
            padding-top: 60px;
            padding-bottom: 72px;
        }
    }

    @media screen and (min-width: 769px) {
        .hero-deck .deck-content {
            font-size: 1.75rem;
            line-height: 2.25rem;
        }
    }
    </style>
    <?php  if ( has_excerpt()): ?>
    <section class="hero-deck visible">
        <div class="wrapper">
            <div class="deck-content">
                <div class="deck-content-wrapper">
                    <?php echo $excerpt = wp_strip_all_tags(get_the_excerpt()); ?>
                </div>
            </div>
        </div>
    </section>
    <?php endif ?>


    <style>
    .ngat .article-body-wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin-bottom: 4rem;
    }

    .text-longform {
        font-size: 1.25rem;
        line-height: 2rem;
    }

    .wrapper .main {
        float: left;
        display: block;
        margin-right: 3.07692%;
        width: 63.18681%;
    }

    .article-body-wrapper .main-copy {
        position: relative;
    }

    .article-body-wrapper>.share,
    .article-body-wrapper .main-copy,
    .article-body-wrapper .sticky-share-container:not(._show) {
        float: left;
        display: block;
        margin-right: 3.07692%;
        width: 48.46154%;
        margin-left: 22.08791%;
    }

    .ngat .main-copy {
        margin: 0;
        width: 100%;
        max-width: 100%;
        float: none;
    }

    .article-body-wrapper .main-copy.text-longform,
    .article-body-wrapper .main-copy>p,
    .article-body-wrapper .main-copy li {
        font-size: 1.25rem;
        line-height: 2rem;
        clear: none;
    }

    .article-body-wrapper .main-copy.text-longform:first-child,
    .article-body-wrapper .main-copy>p:first-child,
    .article-body-wrapper .main-copy li:first-child {
        margin-top: 0;
    }

    .text-longform>h2,
    .text-longform>h3,
    .text-longform>h4,
    .text-longform>h5,
    .text-longform>h6 {
        color: #000;
        margin-top: 48px;
        margin-bottom: 24px;

        font-family: 'Georgia' , Times New Roman, serif;
    }

    h2 {
        font-size: 2.75rem;
        line-height: 3.25rem;
    }

    h3 {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    .text-longform>p {
        margin-top: 0;
        margin-bottom: 1em;
    }

    .description a,
    .author-by-line a,
    .text-longform>p a:not([class]),
    .text-longform>ul li a:not([class]),
    .text-longform>ol li a:not([class]) {
        color: inherit;
        border-bottom: 2px solid #2251ff;
        padding-left: 2px;
        padding-right: 2px;
        -webkit-transition: 120ms linear;
        transition: 120ms linear;
        -webkit-transition-property: background-color, color;
        transition-property: background-color, color;
    }

    .description a:hover,
    .author-by-line a:hover,
    .text-longform>p a:not([class]):hover,
    .text-longform>ul li a:not([class]):hover,
    .text-longform>ol li a:not([class]):hover {
        color: #fff;
        background-color: #2251ff;
    }

    .text-longform ol,
    .text-longform ul {
        list-style-position: outside;
        margin-left: 1em;
    }

    .ngat .main-copy>ul,
    .ngat .main-copy>ol {
        margin-left: 1em;
        overflow: visible;
    }

    .text-longform li:not(:last-of-type) {
        margin-bottom: 12px;
    }

    .article-body-wrapper .main-copy.text-longform,
    .article-body-wrapper .main-copy>p,
    .article-body-wrapper .main-copy li {
        font-size: 1.25rem;
        line-height: 2rem;
        clear: none;
    }

    .article-body-wrapper .main-copy.text-longform:first-child,
    .article-body-wrapper .main-copy>p:first-child,
    .article-body-wrapper .main-copy li:first-child {
        margin-top: 0;
    }

    /* Author */

    .article-body-wrapper .about-authors {
        border-top: solid 1px #000;
        padding-top: 4rem;
        margin-top: 4rem;
    }

    .ngat .article-body-wrapper .about-authors,
    .ngat .main-copy>table,
    .ngat .main-copy>.footnotes {
        width: 88.99859%;
        margin-left: 5.50071%;
        margin-right: 5.50071%;
    }

    .ngat .article-body-wrapper .about-authors,
        {
        clear: right;
    }

    .c-title {
        border-top: 1px solid #000;
        color: #000;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: .075em;
        text-transform: uppercase;
        padding-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .c-title.is-align-center {
        border-top: 0;
        padding-top: 0;
        text-align: center;
    }

    .columns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: -1.5rem;
        margin-right: -.75rem;
        margin-left: -.75rem;
    }

    .columns>* {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: .75rem;
        padding-left: .75rem;
        margin-top: 1.5rem;
    }

    .columns+.columns {
        margin-top: 0;
    }

    .meta-xs {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .article-body-wrapper .author-details p {
        margin-top: 0;
        clear: left;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        overflow-wrap: break-word;
    }

    .article-body-wrapper .author-details p:last-child {
        margin-bottom: 0;
    }

    .article-body-wrapper .author-details a {
        color: #000;
        border-bottom: 2px solid #333;
        padding-left: 2px;
        padding-right: 2px;
        -webkit-transition: 120ms linear;
        transition: 120ms linear;
        -webkit-transition-property: background-color, color;
        transition-property: background-color, color;
    }

    .article-body-wrapper .author-details a:hover {
        background-color: #333;
    }

    .article-body-wrapper .author-details a:hover {
        color: #fff;
    }


    @media screen and (min-width: 0) {
        .column {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 0%;
            flex: 1 0 0%;
        }
    }


    @media screen and (min-width: 481px) {

        .ngat .main-copy>ul,
        .ngat .main-copy>ol {
            padding-left: 14.95063%;
        }
    }

    @media screen and (min-width: 48em) {

        .text-longform>h2,
        .text-longform>h3,
        .text-longform>h4,
        .text-longform>h5,
        .text-longform>h6 {
            margin-top: 72px;
        }
    }

    @media screen and (min-width: 769px) {

        .ngat .main-copy>ul,
        .ngat .main-copy>ol {
            margin-left: 0;
            padding-left: 24.40056%;
            padding-right: 5.50071%;
        }

        .ngat .article-body-wrapper .about-authors {
            width: 62.20028%;
            margin-left: 18.89986%;
            margin-right: 18.89986%;
        }
    }

    @media screen and (min-width: 1181px) {

        .ngat .main-copy>ul,
        .ngat .main-copy>ol {
            padding-left: 26.37363%;
            padding-right: 0;
            margin-right: 22.08791%;
        }

        .ngat .article-body-wrapper .about-authors {
            width: 55.82418%;
            margin-left: 22.08791%;
            margin-right: 22.08791%;
        }
    }
    </style>
    <div class="wrapper">
        <div class="article-body-wrapper" itemtype="http://schema.org/Article">
            <article class="main-copy text-longform main">
                <?php
                if( '' !== get_post()->post_content ) {
                    the_content( __( 'Continue reading', 'zulured' ) );
                } else {
                    echo __( '<p><em>No content for this post</em></p>', 'zulured' );
                }
                ?>
            </article>
            <div class="about-authors">
                <h2 class="c-title is-align-center"><?php echo __( 'About the author(s)', 'zulured' )?></h2>
                <div class="columns">
                    <div class="column">
                        <div class="author-details meta-xs">
                            <p><strong><?php echo get_the_author(); ?></strong>
                                <?php echo nl2br(get_the_author_meta('description')); ?>
                                <a
                                    href="<?php echo get_the_author_meta( 'url');?>"><?php echo get_the_author_meta( 'url');?></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
<section class="container u-content-space u-bg-arrow-wrapper pb-4">
    <div class="row justify-content-center">
        <?php
        if ( comments_open() || get_comments_number() ) {
            comments_template();
        }
        ?>
    </div><!-- .row -->

    <div class="row justify-content-center border-top mt-4">
        <div class="col-md-9">
            <div class="zulu-post-pagination">
                <?php if (strlen(get_previous_post()->post_title) > 0) { //Check if next previous exist  ?>
                <div class="zulu-post-prev">
                    <span>←&nbsp; <?php _e( 'Newer', 'zulured' ); ?></span>
                    <span class="subtitle"><?php previous_post_link( '<strong>%link</strong>' ); ?></span>
                </div>
                <?php } ?>

                <?php if (strlen(get_next_post()->post_title) > 0) { //Check if next post exist ?>
                <div class="zulu-post-next">
                    <span><?php _e( 'Older', 'zulured' ); ?> &nbsp;→</span>
                    <span class="subtitle"><?php next_post_link( '<strong>%link</strong>' ); ?></span>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>
</section>
<?php endwhile; ?>
<?php endif; ?>


<style>
.ngat .article-closer {
    padding-bottom: 80px;
    background: #f0f0f0;
}

.up {
    float: left;
    display: block;
    margin-right: 3.07692%;
    width: 85.27473%;
    margin-left: 7.36264%;
    clear: both;
    padding-left: 5%;
    padding-right: 5%;
}

.up:after {
    clear: both;
    content: '';
    display: table;
}

.up:last-child {
    margin-right: 0;
}

section.up,
.three-up:not(.three-up-enhanced) {
    margin-top: 70px;
}

.section-header {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: .075em;
    color: #000;
    text-transform: uppercase;
    border-top: 1px solid #000;
    padding-top: 1.5rem;
}

.section-header {
    margin-top: 0;
    margin-bottom: 30px;
}

.section-header.section-header--centered {
    text-align: center;
    border-top: 1px transparent solid;
}

.block-list {
    margin: 0;
}

.up .block-list {
    position: relative;
}

.up>.block-list {
    padding-bottom: 1em;
}

.up>.block-list:last-child {
    padding-bottom: 0;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.three-up .item {
    margin-bottom: 40px;
    float: left;
    display: block;
    margin-right: 3.60825%;
    width: 29.7%;
}

.up .item:after {
    clear: both;
    content: '';
    display: table;
}


.three-up .item:nth-of-type(3n+1) {
    clear: both;
}

.three-up .item:nth-last-child(-n+3) {
    margin-bottom: 0;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item {
    float: none;
    position: relative;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item .eyebrow,
.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item .image {
    position: relative;
    z-index: 2;
}


img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.up .image+.text-wrapper {
    margin-top: 20px;
}

.article-date,
.eyebrow {
    display: block;
    padding-bottom: 3px;
    font-size: .875rem;
    line-height: 1.25rem;
}

.up .item-title-link,
.up .item-title-link:hover {
    display: block;
    font-size: inherit;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item a.item-title-link:first-of-type:before {
    content: '';
    display: block;
    position: absolute;
    top: -25px;
    left: -5%;
    width: calc(100% + 10%);
    height: calc(100% + 50px);
    opacity: 0;
    background-color: #fff;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    -webkit-box-shadow: 0 10px 40px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 10px 40px 0 rgb(0 0 0 / 20%);
    pointer-events: none;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item:hover a.item-title-link:first-of-type:before {
    opacity: 1;
    z-index: 1;
}

.up .item-title-link,
.up .item-title-link:hover {
    display: block;
    font-size: inherit;
}

.text-s .headline {
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-style: normal;
    color: #000;
}

.-arrow.headline {
    padding-right: 2em;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item .headline {
    display: inline;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item a.item-title-link:first-of-type>* {
    position: relative;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item:hover {
    z-index: 3;
    color: #333;
    text-shadow: none;
}

.three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item:hover a.item-title-link:first-of-type>* {
    z-index: 2;
}

.three-up .item:nth-of-type(3n+1) {
    clear: both;
}

.three-up .item:nth-last-child(-n+3) {
    margin-bottom: 0;
}

@media screen and (min-width: 48em) {
    .up {
        padding-left: 0;
        padding-right: 0;
    }

    .three-up:not(.more-posts):not(.alert-section):not(.-link-list)>.block-list:not(.span-full-width) .item a.item-title-link:first-of-type:before {
        left: -25px;
        width: calc(100% + 50px);
    }
}

@media screen and (max-width: 47.9375em) {
    .up .item {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        clear: both;
        float: none;
    }

    .three-up .item {
        float: none;
        width: 100%;
        display: block;
    }

    .three-up .item:nth-last-child(-n+3) {
        margin-bottom: 40px;
    }

    .up>.block-list .item {
        padding-bottom: 40px;
    }
}
</style>

<?php 
        // Display Related posts
		$orig_post = $post;
		global $post;
		$categories = get_the_category($post->ID);
		if ($categories) {
			$category_ids = array();
			foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

			$args=array(
			'category__in' => $category_ids,
			'post__not_in' => array($post->ID),
			'posts_per_page'=> 3, // Number of related posts that will be shown.
			);

			$my_query = new WP_Query($args);
			if( $my_query->have_posts() ) {?>

<div class="ngat">
    <div class="wrapper article-closer" id="divarticlecloser">
        <section class="up three-up">
            <h2 class="section-header section-header--centered">
                <?php _e( 'Related Articles', 'zulured' ); ?>
            </h2>
            <div class="text-s block-list">
                <?php while( $my_query->have_posts() ) { $my_query->the_post();?>
                <article class="item">
                    <a href="<?= esc_url( get_permalink() )?>" tabindex="-1" aria-hidden="true">
                        <div class="image"
                            style="background-image: url('<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>');height: 218px;background-size: cover;">
                        </div>
                    </a>
                    <div class="text-wrapper mt-4">
                        <span class="eyebrow">
                            Article
                        </span>
                        <a class="item-title-link" href="<?= esc_url( get_permalink() )?>">
                            <h3 class="headline -arrow"><?php the_title(); ?></h3>
                        </a>
                    </div>
                    <!-- /text-wrapper -->
                </article>
                <!-- /item -->
                <?php }?>
            </div>
        </section>

    </div>
</div>
<?php } } $post = $orig_post; wp_reset_query(); ?>
</main>
<?php get_footer(); ?>
<script>
// Blog Sticky Menu
$(document).on("scroll", function() {
    var pixels = $(document).scrollTop(); // pixels = amount of px from top of page
    if (pixels > 500) {
        $(".nga-article-metadata.sticky").css({
            "opacity": '1',
            "height": '64px',
            "top": '60px'
        });
        <?php
            //change top value when user is logged
            if ( is_user_logged_in() ) {?>
               $(".nga-article-metadata.sticky").css({
                    "top": '92px'
                });
        <?php } ?>
    } else {
        $(".nga-article-metadata.sticky").css({
            "opacity": '0',
            "height": '0',
            "top": '-100px'
        });
    }

})
</script>