@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:500&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
}

.logo {
    height: 100%;
    vertical-align: middle;
}

    .logo:hover {
        cursor: pointer;
    }


/* Navigation Settings*/
.nav {
    height: 100px;
    width: 100%;
    background-color: #ffffff;
    position: relative;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

    .nav > .nav-header {
        display: inline;
    }

        .nav > .nav-header > .nav-title {
            display: inline-block;
            font-size: 22px;
            color: #fff;
            padding: 10px 10px 10px 10px;
            letter-spacing: 2px;
        }

    .nav > .nav-btn {
        display: none;
    }

    .nav > .nav-links {
        display: inline;
        float: right;
        font-size: 18px;
        padding: 30px 10px 10px 0px; 
    }

        .nav > .nav-links > a {
            display: inline-block;
            padding: 13px 10px 13px 10px; 
            text-decoration: none;
            /*color: #4d4d4d;*/
            text-align: center;
            /*border-top: 2px solid #00cc82;
            border-right: 2px solid #00cc82;
            border-left: 2px solid #00cc82;*
            /*box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.16), 5px 0px 0 0px rgba(0,0,0,0.12);*/
            /*border-radius: 10px 10px 0px 0px;*/
        }

            .nav > .nav-links > a:hover {
                background-color: #ada9a9;
                color: #ffffff;

            }

        .active-link {
            color:  #00cc82;
        }

        .unactive-link {
            color: #4d4d4d;
        }

    .nav > #nav-check {
        display: none;
    }

/*//////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Header Settings*/
.header-img1 {
    grid-area: img1;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.gavel {
    height: 200px;
    /*padding: 0 10% 0 0;*/
    /*float: right;*/
    margin-left: auto;
    margin-right: auto;
    display: block;
    /*padding: 0 10px 0 10px;*/ /
}

.intro-text {
    font-size: 48px;
    font-weight: 900;
    color: #ffffff;
    color: #4D4D4D;
}

.intro-sentence {
    font-size: 18px;
    color: #ffffff;
    color: #4D4D4D;
    padding-top: 100px;
}


/* Button Settings */
.cta1 {
    grid-area: cta1;
    padding-top: 25px;
}

.cta-select {
    border: 2px solid #00cc82;
    background: transparent;
    background: #ffffff;
    color: #B4272A;
    color: #00cc82;
    width: 200px;
    height: 50px;
    cursor: pointer;
    font-size: 16px;
    font-style: none;
}

    .cta-select a {
        text-decoration: none;
        color: inherit;
    }

    .cta-select:hover {
        background-color: #00cc82;
        color: #ffffff;
    }

.header-p1 {
    grid-area: text1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 16px;
    /*text-align: center;*/
    text-align: left;
}

.grid-container-h {
    display: grid;
    grid-template-areas: 
        'text1 img1'
        'text1 img1'
        'cta1 img1';
    grid-gap: 15px;
    grid-column-gap: 25px;
    padding: 75px 75px 200px 75px;
    background-color: #ffffff;
    border-top: solid 1px #deded2;
    text-align: left;
}

    .grid-container-h > div {
        text-align: left;
        font-size: 16px;
    }

@media (max-width:600px) {
    .grid-container-h {
        grid-template-areas: 
            'img1' 
            'text1' 
            'cta1';
        grid-gap: 10px;
        padding: 50px 25px 25px 25px;
    }

        .grid-container-h > div {
            text-align: center;
            font-size: 16px;
        }
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Section 1 Settings*/
.sec1-title {
    grid-area: title;
    color: #00cc82;
    text-align: center;
    font-weight: 800;
}

.sec1-img1 {
    grid-area: img1;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.letter {
    height: 100px;
    /*border: 2px solid black;*/
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.clock {
    height: 100px;
    /*border: 2px solid black;*/
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.courthouse {
    height: 100px;
    /*border: 2px solid black;*/
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec1-p1 {
    grid-area: text1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 16px;
    text-align: center;
}

.sec1-img2 {
    grid-area: img2;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec1-p2 {
    grid-area: text2;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec1-img3 {
    grid-area: img3;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec1-p3 {
    grid-area: text3;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.grid-container1 {
    display: grid;
    grid-template-areas: 'title title title' 'img1 img2 img3' 'text1 text2 text3';
    grid-gap: 15px;
    grid-column-gap: 25px;
    padding: 75px 50px 75px 50px;
    background-color: #fafaf9;
    border-top: solid 1px #deded2;
}

    .grid-container1 > div {
        text-align: center;
        font-size: 16px;
    }

@media (max-width:600px) {
    .grid-container1 {
        grid-template-areas: 'title title' 'img1 img1' 'text1 text1' 'img2 img2' 'text2 text2' 'img3 img3' 'text3 text3';
        grid-gap: 10px;
        padding: 50px 25px 15px 25px;
    }
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Section 2 Settings*/
.sec2-title {
    text-align: center;
    color: #00cc82;
}

.sec2-img1 {
    grid-area: img1;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.magnifying-glass {
    height: 100px;
    padding: 0 5% 0 5%;
    float: left;
}

.questions {
    height: 100px;
    padding: 0 5% 0 5%;
    float: left;
}

.scale {
    height: 100px;
    padding: 0 5% 0 5%;
    float: left;
}

.sec2-p1 {
    grid-area: text1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 16px;
}

.sec2-img2 {
    grid-area: img2;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec2-p2 {
    grid-area: text2;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec2-img3 {
    grid-area: img3;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.sec2-p3 {
    grid-area: text3;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.grid-container2-title {
    display: grid;
    grid-template-areas: 'title';
    grid-gap: 15px;
    padding: 75px 100px 0px 100px;
    background-color: #ffffff;
    border-top: solid 1px #deded2;
}

.grid-container2 {
    display: grid;
    grid-template-areas: 'title title' 'img1 text1' 'img2 text2' 'img3 text3';
    grid-gap: 20px;
    grid-column-gap: 50px;
    padding: 0px 100px 50px 100px;
}

    .grid-container2 > div {
        font-size: 16px;
    }

@media (max-width:600px) {
    .grid-container2-title {
        padding: 50px 25px 0px 25px;
    }

    .grid-container2 {
        grid-template-areas: 'title' 'img1' 'text1' 'img2' 'text2' 'img3' 'text3';
        grid-gap: 10px;
        padding: 20px 25px 20px 25px;
        text-align: center;
    }
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Footer Settings*/
.prp {
    height: 160px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    display: block;
}

.footer-img1 {
    grid-area: img1;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /*padding: 0 10px 0 10px;*/
}

.footer-p1 {
    grid-area: text1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.footer a {
    text-decoration: none;
    color: #00cc82;
}

    .footer a:hover {
        color: #0486C2;
    }


.grid-container3 {
    display: grid;
    grid-template-areas: 'img1 text1';
    grid-gap: 15px;
    padding: 50px 100px 50px 100px;
    background-color: #fafaf9;
    border-top: solid 1px #deded2;
}

    .grid-container3 > div {
        text-align: left;
        font-size: 16px;
    }

@media (max-width:600px) {
    .grid-container3 {
        grid-template-areas: 'img1 img1' 'text1 text1';
        grid-gap: 10px;
        padding: 15px 25px 15px 25px;
    }

    .footer-img1 {
        padding-right: 70px;
    }
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////*/

/* For Pages: 
    - More Info  
    - Resources
    - Nondiscrimination
*/
.page-content {
    padding: 25px 200px 75px 200px;
}

    .page-content a {
        text-decoration: none;
        color: #00cc82;
    }

        .page-content a:hover {
            color: #4D4D4D; /* SLC Dark Grey Color*/
        }

.content-title {
    color: #00cc82; /* SLC Green Color*/
}

/* END OF STYLE FOR ABOVE PAGES */
/*//////////////////////////////////////////////////////////////////////////////////////////////////*/


/* For tables: */
/* Before 900px */
@media (max-width: 900px) {
    .nav > .nav-btn {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }

        .nav > .nav-btn > label {
            display: inline-block;
            width: 50px;
            height: 50px;
            padding: 13px;
            margin-top: 25px;
        }

            .nav > .nav-btn > label:hover, .nav #nav-check:checked ~ .nav-btn > label {
                background-color: rgba(0, 0, 0, 0.3);
            }

            .nav > .nav-btn > label > span {
                display: block;
                width: 25px;
                height: 10px;
                border-top: 2px solid #4d4d4d; 
            }

    .nav > .nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #ffffff; 
        height: 0px;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        top: 100px; 
        left: 0px; 
        padding: 0 0 0 0;
    }

        .nav > .nav-links > a {
            color: #504f4f;
            display: block;
            width: 100%;
        }

        .nav > .nav-links > a {
            display: inline-block;
            padding: 13px 10px 13px 10px;
            text-decoration: none;
            color: #4d4d4d;
            text-align: center;
            border-top: 0px none;
            border-right: 0px none;
            border-left: 0px none;
            /*box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.16), 5px 0px 0 0px rgba(0,0,0,0.12);*/
            border-radius: 0px;
        }

    .active-link {
        background-color: inherit;
    }

    .nav > .nav-links > a:hover {
        /*background-color: rgba(0, 0, 0, 0.3);*/
        background-color: #00cc82;
        color: #ffffff;
    }

    .nav > #nav-check:not(:checked) ~ .nav-links {
        height: 0px;
    }

    .nav > #nav-check:checked ~ .nav-links {
        height: calc(100vh - 50px);
        overflow-y: auto;
    }


     /*For Pages: 
    - More Info  
    - Resources
    - Nondiscrimination
    */
/*//////////////////////////////////////////////////////////////////////////////////////////////////*/
    .page-content {
        padding: 25px 20px 75px 20px;
    }

        .page-content a {
            text-decoration: none;
            color: #00cc82;
        }

            .page-content a:hover {
                color: #4D4D4D;
            }

    .content-title {
        color: #00cc82;
    }

/* END OF STYLE FOR ABOVE PAGES */
/*//////////////////////////////////////////////////////////////////////////////////////////////////*/
}

/* For mobile phones: */
/* 640px*/
@media (max-width:600px) {
    .nav > .nav-btn {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }

        .nav > .nav-btn > label {
            display: inline-block;
            width: 50px;
            height: 50px;
            padding: 13px;
            /*background-color: red;*/
            margin-top: 25px;
        }

            .nav > .nav-btn > label:hover, .nav #nav-check:checked ~ .nav-btn > label {
                background-color: rgba(0, 0, 0, 0.3);
            }

            .nav > .nav-btn > label > span {
                display: block;
                width: 25px;
                height: 10px;
                border-top: 2px solid #4d4d4d; /*#eee;*/
            }

    .nav > .nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #504f4f; /*#333;*/
        height: 0px;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        top: 100px; /*50px*/
        left: 0px;
        padding: 0 0 0 0;
    }

        .nav > .nav-links > a {
            color: #ffffff;
            display: block;
            width: 100%;
        }

    .nav > #nav-check:not(:checked) ~ .nav-links {
        height: 0px;
    }

    .nav > #nav-check:checked ~ .nav-links {
        height: calc(100vh - 50px);
        overflow-y: auto;
    }

    /* For Pages: 
    - More Info  
    - Resources
    - Nondiscrimination
    */
/*//////////////////////////////////////////////////////////////////////////////////////////////////*/
    .page-content {
        padding: 25px 20px 75px 20px;
    }

        .page-content a {
            text-decoration: none;
            color: #00cc82;
        }

            .page-content a:hover {
                color: #4D4D4D;
            }

    .content-title {
        color: #00cc82;
    }
    /* END OF STYLE FOR ABOVE PAGES */
/*//////////////////////////////////////////////////////////////////////////////////////////////////*/
}

@media (min-width: 1440px) {
    .grid-container-h {
        display: grid;
        grid-template-areas: 'text1 img1' 'text1 img1' 'cta1 img1';
        grid-gap: 15px;
        grid-column-gap: 25px;
        padding: 75px 20% 5% 20%;
        text-align: left;
    }

        .grid-container-h > div {
            text-align: left;
            font-size: 16px;
        }

    .cta-select {
        height: 100%;
    }

    .grid-container1 {
        grid-template-areas: 
        'title title title' 
        'img1 img2 img3' 
        'text1 text2 text3';
        grid-gap: 15%;
        padding: 50px 20% 10% 20%;
    }

    .grid-container2 {
        display: grid;
        grid-template-areas: 'title title' 'img1 text1' 'img2 text2' 'img3 text3';
        grid-gap: 20px;
        grid-column-gap: 50px;
        padding: 0px 20% 5% 20%;
    }
    
    .grid-container3 {
        display: grid;
        grid-template-areas: 'img1 text1';
        grid-gap: 15px;
        padding: 50px 20% 50px 20%;
    }
}