/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

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

    .top-links-container {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }

    #social-footer .page-width {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    
    .social-icons {
        margin-top: 0;
    }

    .logo-flex .wp-block-group__inner-container {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        grid-gap: 2rem;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .logo-flex .wp-block-group__inner-container img {
        max-width: 24rem;
    }

    .participants-thumbnail-grid {
        grid-gap: 3rem;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .archived-videos {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .electric-profiles {
        display: grid;
        grid-template-columns: 210px 1fr;
        transition: all 500ms linear 0s;
        margin: 0 auto;
        max-width: 75rem;
        width: calc( 100% - 4rem );
    }

    .electric-profiles-wrapper:target .electric-profiles,
    .single-profile .electric-profiles {
        transform: translateX(0);
    }

    .profiles-list ul {
        padding: 0;
    }

    .electric-profiles-wrapper:target .menu-anchor,
    .single-profile .menu-anchor {
        display: none;
    }

    .homepage-run-container {
        background: #E8EBF0;
    }

    .homepage-run {
        display: grid;
        grid-template-areas:
            "content video"
            "metrics video";
        grid-template-columns: 1fr 1fr;
    }
    
    .homepage-run .run-content {
        grid-area: content;
    }
    
    .homepage-run .run-metrics {
        grid-area: metrics;
    }

    .homepage-run .run-metrics li {
        padding: 1.5rem;
    }

    .homepage-run .run-metrics span {
        font-size: 2.5rem;
    }

    .homepage-run .run-metrics label {
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    
    .homepage-run .run-video {
        grid-area: video;
    }

    .run-video a {
        height: 100%;
        padding-top: 0;
    }

    .carousel.mobile,
    .pagination {
        display: none;
    }

    .profile-slide {
        background-color: white;
        box-shadow: 0px 8px 10px rgb(7 7 7 / 10%);
        height: 100%;
        margin: 0 0.5rem;
    }

    .homepage-profiles .slick-dots {
        justify-content: center;
    }

    .homepage-profiles .slick-dots li {
        margin: 0 1rem;
    }

    .homepage-profiles .carousel-container {
        padding: 2rem 0;
        margin: 0 auto;
        max-width: var(--page-width);
        width: calc( 100vw - 4rem );
    }

    

    .homepage-profiles .slick-nav:hover span:before {
        opacity: 0.5;
    }

    .homepage-profiles .heading-slide {
        background-image: linear-gradient(130deg, transparent 30%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 50%, transparent 50%, transparent 80%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.1) 100%);
        background-size: 6.53px 7.78px;
        margin: 0;
        padding: 4rem 1rem 1rem 1rem;
    }

    .profile-slide .content h3 {
        font-size: 1.25rem;
    }
    
    .profile-slide .content {
        font-size: 1rem;
    }

    .homepage-profiles .heading {
        margin-bottom: 0;
        min-height: 100px;
    }

    .homepage-profiles .slick-nav span:before {
        content: '\f054';
        font: 600 3rem 'Font Awesome 5 Free';
        margin-right: 0;
    }

    .news-cards ul {
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3;
    }

    .news-card h3 {
        font-size: 1.25rem;
        line-height: 1.5;
    }

}

@media screen and ( min-width: 767px ) and ( max-width: 75rem ) {
    .run-content .positioner,
    .run-metrics .positioner {
        padding-left: 2rem;
    }
}