@charset "UTF-8";
@media (min-width: 300px) {
  body {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -3; }

  /* Fixed background frame over body */
  #bgContainer {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center center;
    overflow-y: scroll;
    scrollbar-width: none;
    z-index: -2; }

  /* The Main/Base grid-layout for the site */
  #grid {
    display: grid;
    grid-template-columns: 5px 1fr 5px;
    grid-gap: 5px;
    grid-template-rows: 65px 225px 1fr 400px;
    grid-template-areas: "nav nav nav" ". main ." "sub sub sub" "ft ft ft";
    /* # # # */ }

  nav {
    grid-area: nav;
    position: fixed;
    height: 0px;
    width: 100%;
    top: 0px;
    background-color: white;
    z-index: 3; }

  /* The banner above the navigation menu */
  header.banner {
    position: fixed;
    grid-area: hd;
    grid-column: -1/1;
    width: 100%;
    height: 50px;
    text-align: center;
    box-shadow: 0px 1px 12px rgba(32, 164, 162, 0.4);
    z-index: 2; }
    header.banner img {
      position: inherit;
      margin-top: 7px;
      margin-right: 15px;
      width: 35px; }

  main {
    grid-area: main;
    grid-column: 2/3;
    background-size: cover;
    background-position: center;
    border-radius: 50px 100px 275px 25px; }

  /* Footer design horizontal lines and logo/name */
  .lines {
    z-index: 3;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 10px; }

  .lines1 { background-color: rgba(255, 242, 0, 0.58); }

  .lines2 { background-color: rgba(255, 204, 0, 0.58); }

  footer {
    position: fixed;
    height: 300px;
    width: 100%;
    bottom: -350px;
    box-shadow: 0px 5px 20px rgba(0, 204, 255, 0.8);
    background-position: center -5%;
    transition: bottom 1.5s ease 0.7s;
    z-index: 3; }

  #logo_div {
    position: fixed;
    height: 50px;
    width: 100%;
    bottom: 0px;
    z-index: 2; } }
/* End min-width 300px */

@media (min-width: 768px) {
  /* The Main/Base grid-layout for the site */
  #grid {
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 70px 300px 1fr 400px; }

  nav {
    grid-area: nav;
    position: fixed;
    height: 50px;
    width: 100%;
    top: 0px;
    z-index: 3;
    box-shadow: 0px 1px 12px rgba(32, 164, 162, 0.4); }

  /* The banner above the navigation menu */
  header.banner {
    width: 10%;
    box-shadow: none;
		z-index: 4;	}
    header.banner img {
      margin-right: 5px; }

  /* Footer design horizontal lines and logo/name */
  .lines {
    z-index: 3;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 10px; }

  .lines1 {
    background-color: rgba(255, 242, 0, 0.58); }

  .lines2 {
    background-color: rgba(255, 204, 0, 0.58); }

  footer {
    position: fixed;
    height: 300px;
    width: 100%;
    bottom: -350px;
    box-shadow: 0px 5px 20px rgba(0, 204, 255, 0.8);
    background-position: center -5%;
    transition: bottom 1.5s ease 0.7s;
    z-index: 3; }
 }
@media (min-width: 1024px) {
  header.banner {
    width: 15%; } }
@media (min-width: 1200px) {
  #grid {
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 500px 1fr 400px; }

  header.banner {
    height: 70px; }
    header.banner img {
      width: 40px; }

  nav {
    height: 70px; } }
@media all and (min-width: 1600px) {
  /* The Main/Base grid-layout for the site */
  #grid {
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: 150px 550px 1fr 400px; }

  nav {
    height: 108px; }

  header.banner {
    width: 25%;
    height: 108px;
    padding-top: 25px; } }