/* article.css - Responsive stylesheet: desktop and mobile */

/* ===== BASE / DESKTOP STYLES ===== */

body {
  font-family: Verdana;
  font-size: 100%;
  background: #ffffff;
}

#wrap {
  display: flex;
  flex-direction: column;
  width: 900px;
  margin: 0 auto;
  border: 3px solid #719371;
}

#banner1, .banner1 {
  background: #000033;
  height: 30px;
  margin: 0 0 2px 0;
}

#banner2, .banner2 {
  background: #660033;
  height: 30px;
  margin: 0 0 2px 0;
}

#header {
  padding: 10px 0;
}

#header h1 {
  text-align: center;
  color: #000033;
}

#menu {
  background: #719371;
  min-height: 30px;
  line-height: 25px;
  overflow: visible;
}

#menu ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 0 0 15px;
  margin: 0;
  list-style: none;
}

#menu ul li {
  display: inline;
}

#menu a {
  display: block;
  width: 6em;
  text-decoration: none;
  color: white;
  background-color: #719371;
  padding: 0.1em 0.6em;
  border-right: 1px solid white;
}

#menu a:hover {
  background-color: #AAB48B;
}

/* Two-column layout */
#columns {
  display: flex;
  align-items: flex-start;
}

#content {
  flex: 1;
  border-right: 1px solid #719371;
  padding: 0 20px 20px 20px;
  min-width: 0;
}

#content h4 {
  font-weight: bold;
}

#content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 10px auto;
}

#sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #ffffff;
}

#sidebar h3 {
  height: 30px;
  line-height: 30px;
  text-indent: 30px;
  padding: 3px 0 0 0;
  color: #000033;
  font-size: 0.9em;
}

#sidebar p {
  padding: 0 10px;
}

#sidebar ul {
  font-size: 0.9em;
}

#sidebar ul li {
  color: #719371;
  line-height: 50px;
}

#sidebar ul li a {
  color: #3F4C6B;
  text-decoration: none;
}

#sidebar ul li a:hover {
  text-decoration: underline;
}

#sidebar img {
  height: 180px;
  width: 180px;
  margin-top: 3cm;
  padding: 0 0 0 10px;
}

#banner3 {
  background: #719371;
  height: 30px;
  margin: 0 0 2px 0;
}


/* ===== MOBILE STYLES (max-width: 1025px) ===== */

@media screen and (max-width: 625px) {

  #wrap {
    width: 100%;
  }

  #header {
    padding: 6px 0;
  }

  #menu ul {
    padding: 0 0 0 11px;
  }

  #menu a {
    width: 4em;
  }

  #menu a:hover {
    background-color: #719371;
  }

  #columns {
    flex-direction: column;
  }

  #content {
    width: 100%;
    box-sizing: border-box;
    border-right: none;
  }

  #sidebar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }

  #sidebar h3 {
    font-size: 20px;
    line-height: 30px;
    background-color: #719371;
    color: #ffffff;
    padding: 0 0 0 5px;
    margin: 2px 0;
    text-indent: 0;
  }

  #sidebar p {
    display: none;
  }

  #sidebar ul li a {
    color: #ffffff;
    background-color: #719371;
    font-size: 20px;
    line-height: 30px;
  }

  #sidebar img {
    display: none;
  }

}