body { font-family: sans-serif; margin: 0px; }

img { max-width: 100% }

/** Contains everything */
#container
{
	margin: 0;
	width: 100%;
	background: #fff;
}

/* Flex-box, containing left, main and right columns */
#main
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

/* Left column, containing wide screen navigation */
#left-side
{
  flex: 33%;
  flex-basis: 200px;
	padding: 20px 0;
}
/* Contains the main text */
#content
{
  flex: 33%;
  padding: 10px;
}

#content h2 { margin: 0; }

#right-column
{
  flex: 33%;
}

/*-------- WIDE SCREEN MENU -------------*/

#navigation ul {margin:0px; padding:0px; background-color:white;}
#navigation ul li {
  height:25px;
  line-height:25px;
  list-style:none;
  padding-left:10px;
  color:#FFF;
  border-top:#fff solid;
  border-bottom:#fff solid;
  border-width:2px;
  cursor:pointer;
}

#navigation ul li:hover {background-color:#fca523; position:relative;}

.sexypanels {
  margin: auto;
  list-style-type: none;
  width: 180px; /* width of menu */
  background-color: white;
}

.sexypanels li {
  border-bottom: 10px solid white; /* white border beneath each menu item */
  background-color: white;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.sexypanels li a {
  background: #dbf3ea; /*color of menu by default*/
  font: bold 14px /*"Lucida Grande", "Trebuchet MS", Verdana*/sans-serif;
  display: block;
  color: black;
  width: auto;
  padding: 10px 0; /* Vertical (top/bottom) padding for each menu link */
  margin: 0px;
  text-indent: 8px;
  text-decoration: none;
  border-bottom: 0px solid #dbf3ea; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}

.sexypanels li a:visited, .sexypanels li a:active {
  color: black;
}

.sexypanels li a:hover {
  color: #e67300;
  border-bottom: 0px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

.sexypanels ul li.active a {
  color: #e67300;
}

/*----------SMALL SCREEN MENU -------------*/

.topnav {
  overflow: hidden;
  background-color: #dbf3ea;
  position: relative;
}

/* Style for mobile menu items */
.topnav #myLinks {
  display: none;
  background-color: #F5F5F5;
}

.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/** Hamburger icon */
.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin: 28px;
  padding: 0;
}

.topnav_active {
  background-color: #dbf3ea;
  color: white;
}
#myLinks a:hover {
  background-color: #faa753;

}
.active {
  background-color: #faa753;
  color: white;
}

/* horizontal line between mobile menu items */
hr.menu_spacer {
  border: none;
  height: 1px;
  background: white;
  margin: 0;
  padding: 0;
}

/*----- HAMBURGER ICON ---------*/

/*----- SMALL/WIDE SCREEN ---------*/

/** Style used for the logo on the header, wide screen */
.header-logo {
  display: block;
  margin-left: 23%;
  margin-right: auto;
  padding-bottom: 20px;
}

.mobile-container {
  margin: auto;
  background-color: white;
  color: black;
  border-radius: 10px;
}

.wideScreenOnly {
  display: block;
  visibility: visible;
}

.smallScreenOnly {
  display: none; visibility: hidden;
}

@media screen and (max-width:850px) {
    .wideScreenOnly { display: none; visibility: hidden; }
    .smallScreenOnly { display: block; visibility: visible; }
    .noPrint { display: none; visibility: hidden; }
    #header { margin: 0; }
    #content { flex: 100%; padding: 0; margin: 10px; }
    #right-column { flex: 100%; padding: 0 0; }
    #left-side { width: 0%; visibility: hidden; }
}