:root {
    --primary-color: rgba(13, 110, 139, 0.75); /* DELETE ?????? */
    --overlay-color: rgba(24, 39, 51, 0.85);
    --menu-speed: 0.75s;
}

body {
    background-color: rgb(187, 213, 223)
}

.body-container {
    /* max-width: 95%; */
    width: auto;
    margin: auto; /* This centers the entire webpage within the margin */
    //border: 1px black solid; /* remove this when done */
}





/* MOBILE VIEW */
.body-container {
    display: block;
}

.mobile-header-container {
    // margin: 10px 20px 10px 10px;
    /* margin-right: 10px; */
    /* padding: 10px; */
    /* height: 200px; */
    //outline: 5px purple solid;
}

.mobile-grid {
    display: grid;
    grid-template-rows: 30% 70%;
}

.grid-hamburger {
    grid-column: 1/1;
    grid-row:1/2;
    max-width: 100%;
}

.grid-logo {
    grid-column:1/1;
    grid-row:1/2;
    max-width: 100%;
}

.sam-full {
    display: block;
    padding: 10px 0 10px 0;
    // max-width: 100%;
    // width: 50%;
    height: 100%;
    // justify-content: center;
    margin: auto;
    // outline: 5px blue solid;
}

.grid-text {
    grid-column:1/1;
    grid-row:2/2;
    max-width: 100%;
}

.menu-wrap {
    display: flex;
    /* display: none; */
}

.header-container {
    display: none;
}

.header {
    display: none;
}

#navbar {
    display: none;
}

.jde-grid {
    display: none;
}

.line {
    border-top: 5px solid rgb(116, 174, 190);
    //border-top-color: rgb(64, 176, 72)
}

.mobile-social-container {
    display: block;
    margin: auto;
    padding: 10px;
}

.social-logo {
    justify-content: center;
    width: 18%;
    padding: 10px;
}

#mobile-footer {
    display: block;
    padding: 5px;
    /*padding-top: 10px;*/
    /*padding-left: 10px;*/
    font: arial;
    font-size: 12px;
    line-height: 0.5em;
    /* border: 5px purple solid; */
}

#main-footer {
    display: none;
}

#ssl-footer {
    display: block;
    text-align: center;
    /* border: 5px red solid; */
}
/* END MOBILE VIEW */





/* TABLET VIEW */
@media only screen and (min-width: 768px) {
    .body-container {

    }

    .mobile-header-container {
        display: none;
    }

    .mobile-grid {
        display: none;
    }

    .grid-hamburger {
      display: none;
  }

    .grid-logo {
      display: none;
  }

        .sam-full {
          display: none;
      }

    .grid-text {
      display: none;
  }

    .header-container {
        display: block;
        /* border: 5px red solid; */
    }

    .header {
        display: block;
        font-family: arial;
        font-size: 20px;
        text-align: center;
        /* border: 5px purple solid; */
    }

    .menu-wrap {
        display: none;
    }

    .line {
        display: none;
    }

    #navbar {
        display: block;
        padding: 5px 10px 5px 10px;
        background-color: rgb(116, 174, 190);
    }

    #navbar ul {
        padding: 0;
        list-style: none;
    }

    #navbar li {
        display: inline;
    }

    #navbar a {
        font-family: arial;
        font-size: 20px;
        padding-right: 50px;
        text-decoration: none;
        color: #fff;
    }

    .nav-container {
        width: 100%;
        /* margin: auto; */
        /* overflow: hidden; */
        /* border: 5px blue solid; */
    }

    .jde-grid {
        display: grid;
        grid-template-columns: 70% 30%;
        /* border: 5px black solid; */
    }

        .grid-jde {
            grid-column:1/2;
            Grid-row:1/2;
            max-width: 100%;
            /* border: 5px red solid; */
        }

            .jde-logo {
                width: 100%;
            }

        .grid-sam {
            grid-column:2/3;
            Grid-row:1/3;
            max-width: 100%;
            /* border: 5px purple solid; */
        }

            .sam {
                max-width: 100%;
            }

        .grid-social {
            grid-column:1/2;
            Grid-row:2/3;
            max-width: 100%;
            //border: 5px blue solid;
        }

            .social-container {
                display: block;
                max-width: 100%;
                margin: auto;
                padding: 10px;
                text-align: center;
            }

    .mobile-social-container {
        display: none;
    }

    .social-logo {
        width: 10%;
        padding-left: 10px;
        display: inline-block;
    }

    #mobile-footer {
        display: none;
    }

    #main-footer {
        display: block;
        text-align: center;
        /* border: 5px purple solid; */
    }

    #ssl-footer {
        display: block;
        text-align: center;
        /* border: 5px red solid; */
    }

}
/* END TABLET VIEW */





/* PC VIEW */
@media only screen and (min-width: 1024px) {

/* END PC VIEW */