html {
  position: relative;
  min-height: 100%;

  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}

a {
  color: #709C1A;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer {
  height: 5%;
  padding: 2%;

  color: #888;

  font-size: 0.625rem;
  font-weight: normal;
  text-align: center;
}




#sidebar-primary,
main {
  width: 320px;
  margin: 0 auto;
}






#sidebar-primary {
  position: relative;
  background-color: white;
}

#sidebar-primary header {
  position: relative;
  overflow: hidden;

  font-size: 1.125rem;
  font-weight: 300;
}

#sidebar-primary header a {
  color: #111;
  text-decoration: none;
}

#sidebar-primary header a:hover {
  text-decoration: underline;
}

#sidebar-primary header #primary-logo {
  display: inline-block;
  vertical-align: top;

  width: 100px;
  height: 100px;

  margin: 5%;

  background: #836997;
  background: linear-gradient(90deg, hsl(73, 93%, 70%), hsl(201, 93%, 70%));
}

#sidebar-primary header #primary-logo img {
  width: 100%;
  height: auto;
}

#sidebar-primary header #primary-nav-panel {
  display: inline-block;
  vertical-align: top;

  width: 50%;
  margin: 5% 0;
}

#sidebar-primary header #primary-nav-panel h1 {
  font-weight: normal;
  font-family: 'Nova Slim', "Trebuchet MS", cursive;
  font-size: 1.6875rem;
}

#sidebar-primary header #primary-nav-panel h1 a:hover {
  text-decoration: none;
  color: #444;
}

#sidebar-primary header #primary-nav-panel nav ul#social-media {

}

#sidebar-primary header #primary-nav-panel nav ul#social-media li {
  display: inline-block;
  margin-right: 4%;
}

#sidebar-primary header #primary-nav-panel nav .primary-nav-group {
  display: inline-block;
  margin: 6% 8% 6% 0;
}

#sidebar-primary header #primary-nav-panel nav  .primary-nav-group ul.nav-internal {
  display: none;
}

#sidebar-primary header #primary-nav-panel nav  .primary-nav-group h4 {
  font-weight: 400;
}



#sidebar-primary footer {
  display: none;    /* This footer is for desktop */
}












@media (min-width: 480px) {

  html {
    font-size: 20px;
  }

  #sidebar-primary,
  main {
    width: 480px;
  }





  #sidebar-primary header #primary-logo {
    width: 140px;
    height: 140px;
  }
}













@media (min-width: 800px) {

  html {
    font-size: 18px;
  }





  #sidebar-primary {
    position: fixed;

    top: 0px;
    bottom: 0px;
    left: 0px;

    width: 25%;
  }

  #sidebar-primary header {
    text-align: center;
  }

  #sidebar-primary header #primary-logo {
    display: block;

    width: 160px;
    height: 160px;

    margin: 6% auto;
  }

  #sidebar-primary header #primary-nav-panel {
    display: block;

    width: 100%;
    margin: 0% auto;
  }

  #sidebar-primary header #primary-nav-panel nav ul#social-media li {
    margin: 0 2%;
  }

  #sidebar-primary header #primary-nav-panel nav .primary-nav-group {
    display: block;

    margin: 0;
    margin-top: 16%;
  }

  #sidebar-primary header #primary-nav-panel nav .primary-nav-group ul.nav-internal {
    display: block;
  }



  #sidebar-primary footer {
    display: block;
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 3%;
    padding: 3%;

    font-size: 0.675rem;
  }





  main {
    margin-left: 25%;
    padding: 2%;
    width: 70%;
  }
  
  main #main-container {
    width: 560px;
    margin: 0 auto;
  }



  #page-primary-footer {
    display: none;    /* This footer is for mobile */
  }
}







@media (min-width: 960px) {

  html {
    font-size: 20px;
  }
  
  main {
    margin-left: 240px;
  }
  
  main #main-container {
    width: 672px;
  }
  
  
  #sidebar-primary {
    width: 240px
  }
  
  #sidebar-primary header #primary-logo {
    width: 170px;
    height: 170px;
  }
}