/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Basic responsive layout for all browsers:
--------------------------------------------------------------*/

.site {
    max-width: 60em;
    margin: 0 auto;
}

/*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/

@supports (grid-area: auto) {

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

        .site {
            max-width: none;
            display: grid;
            grid-template-columns: repeat(4, 1fr) ;
            grid-template-rows: auto;
            grid-template-areas:
            "video video video nav"
            "main main main main" 

        }

           @media screen and (min-width: 1200px) {
        .site{
            grid-template-columns: repeat(4, 1fr) ;
            grid-template-rows: auto;
            grid-template-areas:
                "video video video nav"
                "main main main main" 
        }
    }
        
        .header {
            grid-area: header;
        }
        .main {
            grid-area: main;
        }
        
       .nav {
            grid-area: nav;
        }

        .video {
            grid-area: video;
        }

    }

 

}