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

@media screen and ( min-width: 75rem ) {
    
    .nav-container {
        display: -ms-grid;
        display: grid;
            grid-template-areas:
            "logo primary"
            "logo secondary";
       -ms-grid-columns: 360px 1fr;
       grid-template-columns: 360px 1fr;
       -ms-grid-rows: 1fr 2rem;
       grid-template-rows: 1fr 2rem;
    }

    .nav-toggle {
        display: none;
    }

    .nav-container .logo {
        grid-area: logo;
        position: relative;
        z-index: 3;
    }

    .nav-container .logo img {
        max-width: 100%;
    }

    .nav-container .primary {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        grid-area: primary;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        margin-bottom: 2rem;
    }

    .nav-container .primary ul li a {
        color: var(--blue);
    }

    .nav-container .secondary {
        grid-area: secondary;
    }

    nav.secondary {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 30px;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        margin-left: -2rem;
        padding: 0;
        position: relative;
        -webkit-transform: translateY(-8px);
            -ms-transform: translateY(-8px);
                transform: translateY(-8px);
        width: calc( 100% + 2rem );
    }

    .nav-container .secondary:after {
        background: url('../images/secondary-menu-cap.svg') no-repeat;
        content: ' ';
        height: 30px;
        position: absolute;
        right: -1.375rem;
        top: 0;
        width: 1.375rem;
    }

    .nav-container a:hover,
    .nav-container .primary ul li a:hover {
        color: var(--red);
    }

    .nav-container .menu-item-has-children:hover ul.sub-menu {
        max-height: 999px;
        overflow: visible;
    }

    .nav-container .menu-item-has-children:hover ul.sub-menu:before {
        background-color: transparent;
        content: ' ';
        display: block;
        height: 1rem;
        left: 0;
        position: absolute;
        top: -1rem;
        width: 100%;
    }

    .homepage-hero {
        display: table;
        margin-top: -11px;
        min-height: 475px;
        width: 100%;
    }
    
    .homepage-hero .hero-image {
        left: 0;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
    
    .hero-headings-container {
        margin-top: 6rem;
    }
    
    .hero-heading {
        border-radius: 0 47.5px 47.5px 0;
        height: 95px;
    }

    .hero-heading h1 {
        font-size: 4rem;
    }
    
    .hero-subheading {
        border-radius: 0 40px 40px 0;
        font-size: 48px;
        height: 80px;
        margin-top: 1rem;
        padding-right: 3rem;
    }

    .hero-heading:before,
    .hero-subheading:before {
        left: auto;
        right: 100%;
        width: 50vw;
    }

    .section-heading,
    .section-heading h1 {
        grid-area: title;
        font-size: 2.5rem;
    }
    
    .section-heading:before {
        right: calc( 100% + 2rem );
    }
    
    .homepage-cta a h2 {
        font-size: 3.25rem;
        font-weight: 600;
        margin-top: -0.7rem;
    }
    
    .homepage-section-content {
        font-size: 1.375rem;
        grid-area: content;
        line-height: 1.35;
        margin-top: -0.25rem;
    }
    
    .homepage-cta {
        display: -ms-grid;
        display: grid;
        grid-gap: 2rem;
        -ms-grid-rows: auto 2rem auto 2rem auto;
            grid-template-areas:
            "title title"
            "heading content"
            "heading button";
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .homepage-cta-heading {
        grid-area: heading;
    }
    
    .homepage-cta .button {
        grid-area: button;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }


    .homepage-bottom-graphic {
        margin-top: -3rem;
    }

    .footer-container .page-width {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 6rem 1fr 6rem 1fr;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 6rem;
    }
    
    .footer-container {
        padding: 4rem 0;
    }
    
    .footer-container .cols-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    
    .footer-container .cols-2 .footer-nacfe a,
    .footer-container .cols-2 .footer-rmi a {
        display: -ms-grid;
        display: grid;
        grid-gap: 2rem;
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: 1fr 1fr;
        max-width: calc( 100% - 2rem );
    }
    
    .footer-container .button {
        float: right;
        margin: 0;
    }

    .videos-grid {
        grid-gap: 2rem;
        -ms-grid-rows: auto 2rem auto;
            grid-template-areas:
            "one two"
            "one three";
        -ms-grid-columns: 1fr 2rem 33%;
        grid-template-columns: 1fr 33%;
    }
        
    .video-subtitle {
        display: block;
    }
    
    .video-thumb span:before {
        font-size: 3rem;
    }
    
    .video-thumb:hover span:before {
        color: var(--lightblue);
    }
    
    .homepage-videos {
        padding: 4rem 0;
    }

    .videos .section-heading {
        margin: 2rem 0 3rem 0;
    }
    
    .videos-archive .videos-grid {
        -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .videos-archive .video-grid-item:nth-of-type(1) {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1 / 4;
    }
    
    .videos-archive .video-grid-item:nth-of-type(1) .video-thumb {
        float: left;
        padding-top: 30%;
        width: 65.66%;
    }
    
    .videos-archive .video-grid-item:nth-of-type(1) h3, 
    .videos-archive .video-grid-item:nth-of-type(1) .video-subtitle {
        float: left;
        margin-left: 2rem;
        width: 31.33%;
    }
    
    .videos-archive .video-grid-item:nth-of-type(1) h3 {
        font-size: 2.5rem;
        margin-top: -0.25rem;
    }
    
    .videos-archive {
        padding-bottom: 5rem;
    }

    .videos .menu .videos a {
        background-color: rgba(255,255,255, 0.5);
        padding: 4px 10px 6px 10px;
    }

    .videos-archive {
        margin-top: -0.5rem;
    }

    .homepage-news .button {
        float: right;
    }

    .news-card:hover a {
        -webkit-box-shadow: 0px 4px 5px rgb(7 7 7 / 10%);
                box-shadow: 0px 4px 5px rgb(7 7 7 / 10%);
    }

    .post-container h1,
    .page .post-container h2,
    .page .post-container h2:first-of-type,
    .bootcamp-id {
        color: var(--blue);
        font-size: 3.25rem;
        line-height: 115%;
        margin-bottom: 1rem;
        text-transform: uppercase;
    }

    .news-archive {
        display: -ms-grid;
        display: grid;
        grid-gap: 2rem;
        -ms-grid-columns: 1fr 2rem 1fr;
        grid-template-columns: 1fr 1fr;
            grid-template-areas:
            "twitter posts";
    }
    
    .twitter-feed {
        grid-area: twitter;
    }
    
    .news-archive-posts {
        grid-area: posts;
    }

    .page-content {
        font-size: 1.375rem;
    }

    .webinar-content {
        padding: 2rem;
    }
    
    .webinar-content img.poster {
        margin: -2rem 0 2rem -2rem;
        width: calc( 100% + 4rem );
    }

    .webinar-info {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        display: -ms-grid;
        display: grid;
        grid-gap: 2rem;
        -ms-grid-columns: 1fr 2rem auto;
        grid-template-columns: 1fr 453px;
        margin-bottom: 2rem;
    }
    
    .webinar-registration .button {
        box-shadow: 0px 8px 10px rgba(7,7,7,0.1);
        font-size: 1rem;
        height: 87px;
        margin-top: 0;
        width: 100%;
    }

    .webinars-index ul {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .webinars-index a {
        padding: 1rem;
    }
    
    .webinars-index h2 {
        font-size: 2rem;
    }

    .page .dark-background .post-container h2,
    .page .dark-background .post-container h2:first-of-type {
        font-size: 2rem;
    }

    .participants-profile-display {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    .participant-profile dl {
        font-size: 1.5rem;
    }
    
    .participant-profile dd {
        font-weight: normal;
        text-align: right;
    }
    
    h3.profile-section {
        font-size: 2rem;
    }
    
    .participant-profile {
        padding: 2rem;
    }
    
    .profiles .section-heading:before {
        top: 1.25rem;
    }

    .profiles-index .profiles-navigation ul li:first-of-type a,
    .single-profile .profiles-navigation ul li.active a {
        background-color: #E8EBF0;
        color: var(--blue);
        font-size: 2rem;
        position: relative;
        text-decoration: underline;
        z-index: 0;
    }
    
    .profiles-index .profiles-navigation ul li:first-of-type a:before,
    .single-profile .profiles-navigation ul li.active a:before {
        background-color: #E8EBF0;
        content: ' ';
        height: 100%;
        position: absolute;
        right: 100%;
        top: 0;
        width: 100%;
    }
    
    .participant-profile {
        position: relative;
        z-index: 1;
    }

    .profiles-navigation ul {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .profiles-navigation a:hover {
        color: black;
    }

    .post-content .webinar-title {
        font-size: 2.25rem;
    }

    .newsletter-signup input {
        height: 35px;
    }
    
    .newsletter-signup input[type=submit] {
        margin-top: 0;
        cursor: pointer;
    }
    
    .newsletter-signup input[type=submit]:hover {
        background-color: var(--red);
    }

    .button.big.red {
        display: flex;
        float: none;
        margin: 0 auto;
        max-width: 200px;
    }

    .x-tabs {
        display: flex;
        grid-gap: 2rem;
        margin: 2rem 0;
    }
    
    .tabs.profile-tabs {
        flex-basis: 100%;
        height: fit-content;
        max-width: fit-content;
        position: sticky;
        top: 1rem;
    }
    
    .profile-tabs .tab {
        align-items: center;
        background-color: transparent;
        display: flex;
        margin: 0 0 1rem 1rem;
        padding: 0;
        white-space: nowrap;
    }
    
    .profile-tabs .tab[aria-selected=true] {
        background-color: transparent;
        font-weight: bold;
    }
    
    .profile-tabs .tab:before {
        background-color: white;
        border: 4px solid white;
        border-radius: 50%;
        box-sizing: border-box;
        content: ' ';
        height: 1.5rem;
        margin: 0 1rem 0 -1rem;
        width: 1.5rem;
    }
    
    .profile-tabs .tab[aria-selected=true]:before {
        background-color: var(--blue);
    }
    
    .page .post-container .tab-contents h2:first-of-type {
        color: var(--red);
        margin-top: -1.5rem;
    }
    
    .profile.selected:focus {
        outline: none;
    }

    .twitter-feed {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .news-archive-posts {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    
    .section-heading,
    .section-heading h1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    
    .homepage-section-content {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }
    
    .homepage-cta-heading {
        -ms-grid-row: 3;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1;
    }
    
    .homepage-cta .button {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
    
    .nav-container .logo {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
    }
    
    .nav-container .primary {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
    
    .nav-container .secondary {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

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

    .participant-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 4rem;
    }

    .participant-details dd {
        text-align: left;
    }

    .profile-content .intro-content {
        display: grid;
        grid-column-gap: 2rem;
        grid-template-areas:
            "title video"
            "summary video"
            "link video";
        grid-template-columns: 1fr 526px;
    }
    
    .profile-content .intro-content .profile-title {
        align-self: end;
        grid-area: title;
    }
    
    .profile-content .intro-content .video-container {
        align-self: start;
        grid-area: video;
    }
    
    .profile-content .intro-content .summary {
        align-self: end;
        grid-area: summary;
    }
    
    .profile-content .intro-content .metrics-link {
        align-self: end;
        grid-area: link;
    }

    .electric-profiles-wrapper {
        padding: 2rem 0;
    }

    :root {
        --remainder: calc( 100vw - var(--page-width) );
    }
    
    .homepage-profiles .slick-dots {
        clear: both;
    }

}