:root {
    --headersectionColor1: #2a2a2a;
    --headersectionColor2: #74706d;
    --borderColor: red;
}


h2 {
    color: #13552f;
}

/*Index Page*/

/* Format Header */


.hs1 {
    background-color: var(--headersectionColor1);
    /*border: 1px solid var(--borderColor);*/
    overflow: auto;
}

.hs2 {
    background-color: var(--headersectionColor2);
    /*border: 1px solid var(--borderColor);*/
    overflow: auto;
}



.logo {
    height: 40%;
    width: 75%;
    padding-left: 20%;
    padding-right: 20%;
}

.centerimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding-top: 12px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 2% 5px 2%;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
 .topnav a.active {
    background-color: #13552f; 
    color: white;
}

.cs1 {
    background-color: #4caf504f;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: auto;
}

.cs2 {
    background-color: whitesmoke;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: auto;
}

.content-header-container {
    width:1200px;
    margin:0 auto;
}

.content-header-text {
    color: white;
    padding-left: 1%;
    padding-bottom:10px;
    background-color: #4d9dcc;
}


.content-wrapper {
    font: normal 10px Times Roman;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'left-column right-column';
    /*margin: 1% 2.5%;*/
    overflow: auto;
    /*border:1px dashed red;*/
}





/* Create two equal columns that floats next to each other */
.left-column {
    grid-area: left-column;
    /*border:1px dashed red;*/
}

.left-column-header {
    padding: 0 10% 0 5%;
}

.left-column-text {
    padding: 0 10% 0 10%;
}

.right-column {
    grid-area: right-column;
    /*border: 1px dashed red;*/
    padding: 0 5% 0 5%;
}

.right-column-header {
    padding: 0 10% 0 5%;
}

.right-column-text {
    padding: 0 5% 0 10%;
}


#myVideo {
    object-fit: contain;
    width: 98%;
    padding: 1%;
}

.row-1 {
    background-color: #1E242A !important
}

.row-2 {
    background-color: #28323C !important
}


/* Responsive layout - content-header-container */
@media screen and (max-width: 1200px) {
    .content-header-container {
        width: 95%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: 'left-column' ' right-column';
        margin: 1% 2.5%;
        overflow: auto;

    }

}

@media screen and (max-width: 800px) {
    #cw3 {
        grid-template-columns: 1fr;
        grid-template-areas: 'right-column' ' left-column';
        margin: 1% 2.5%;
        overflow: auto;
    }
}