* -----------------------------------------------------------------------------
  BOX SIZING RESET
----------------------------------------------------------------------------- */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
html {box-sizing: border-box;}

/* ***Basic Styling*********************************** */

body {
  color: #6d6d6d;
  font-family: "Arial", Helvetica, sans-serif;
  margin: 0px; padding: 0px; height: 100%;
}

#header .table{
  display: table;
  width: 100%;
  border-collapse: collapse;
  background-color: #4794d3;
  /*background-color: white;*/
}
#header .table-row {display: table-row;}
#header .table-cell {
  display: table-cell;
  border: green 0px solid;
  vertical-align: middle;
}

#header .hamburger {
  border: 2px solid #b8b8b8;  
  box-shadow: 3px 3px 5px black;
 	border-radius: 50%;
  cursor: pointer;
}
#header .hamburger{
  background: 
  url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M1%2C4h12c0.553%2C0%2C1-0.447%2C1-1s-0.447-1-1-1H1C0.447%2C2%2C0%2C2.447%2C0%2C3S0.447%2C4%2C1%2C4z%20M13%2C6H1C0.447%2C6%2C0%2C6.447%2C0%2C7%20c0%2C0.553%2C0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1C14%2C6.447%2C13.553%2C6%2C13%2C6z%20M13%2C10H1c-0.553%2C0-1%2C0.447-1%2C1s0.447%2C1%2C1%2C1h12%20c0.553%2C0%2C1-0.447%2C1-1S13.553%2C10%2C13%2C10z%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
}

#menu_tip {color: white; padding: 5px 0px 0px 0px; margin: 0px; text-align: center;}
#header .hdr_image_cont {}
#header #hdr_image{border: 2px solid gray; float: right; box-sizing: content-box;}
#header .hdr_text{
  text-align: center; 
  color: white; 
  font-weight: 700; 
}

.page_title {font-family: "Trebuchet MS", Arial, sans-serif; text-align: center; padding: 0px; background-color: white; margin-left: 10px; margin-right: 10px;}
.subtitle {font-family: "Trebuchet MS", Arial, sans-serif; text-align: center; padding: 0px; background-color: white;}

#related {background-color: #c6ffca; clear: both; padding: 3px 15px;}
#related a:hover   {background-color: #91FFFF;}

footer nav {
   background-color: #4794d3;
   border-radius: 10px;
}

footer nav a {
border: solid 2px #67b5d1; 
color: #67b5d1; 
display: inline-block; 
background-color: white;
border-radius: 10px;
}
footer nav a:hover {color: #3184a1;}

#c-menu--slide-left h3 {text-align: center; text-decoration: underline; background-color: #e1e1e1; margin: 0px; padding: 18px 0px;}

.center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

.blue {color: blue;}
.red {color: red;}
.gray {color: gray;}

.bold {font-weight: 700;}
.und {text-decoration: underline;}
.italics {font-style: italic;}

.column_container {padding: 10px; overflow: auto;}
.column_container P {margin: 8px 0px;}

.light_green_bg  {background-color: #c6ffca;}
.light_red_bg    {background-color: #ffe6e6;}
.light_orange_bg {background-color: #ffedcc;}
.light_gray_bg   {background-color: #f0f0f0;}

.spacer-25 {height: 25px;}
.spacer-25:after {content: ""; clear: both; display: block;}
.lh135 {line-height: 135%;}
.font-size-75 {font-size: 75%;}
.big {font-size: 200%;}
.pb10 {padding-bottom: 10px;}

.pointer {cursor: pointer;}

.left {float: left;}   
.right {float: right;}

.auto_margin {margin-left: auto; margin-right: auto;}
.noborder {border: 0px;}
.nodisplay {display: none;}

.auto-overflow {overflow: auto}
.whole-width {width: 100%;}
.width30 {width: 30%;}
.width35 {width: 35%;}
.width-145 {width: 145px;}

.column_container:after {content: ""; clear: both; display: block;}
.blue_border_1 {border: 1px solid blue;}
.streaming_img {width: 80px; height: 15px; border: none;}

.smaller {font-size: 0.8em;}
.clearfix::after {content: ""; clear: both; display: table;}
.br25 {border-radius: 25px;}
.black_hr {height:2px; border-width:0; color:black; background-color:black;}

/* ***Size-related Styling (responsive)**** Default ** */

body {font-size: 100%; line-height: 1.4;}
#o-wrapper {min-width: 320px;}
#header .table-cell {padding: 10px;}
#header .hamburger_cont {width: 70px;}
#header .hamburger {height: 40px; width: 40px; margin: 0px auto;}
#header .hdr_image_cont {width: 20%; min-width: 66px; padding: 0px;}
#header #hdr_image {width: calc(0.6 * 110px); height: calc(0.6 * 83px);}
#header .hdr_text {font-size: .9em; min-width: 160px; /* <= 184px */ line-height: 1.5;}
#menu_tip {display: none;}
#hnav {display: none;}
/*.page_title {font-size: 1.5em;}*/
[class*="col-"] {width: 100%; /* For mobile phones: */ float: left;}
.footer_nav {padding: 10px;}
footer nav a {padding: 12px 24px;}
.page-bottom-padding {height: 25px;}

@media all and (min-width: 20em) {
/* #o-wrapper {max-width: 100%;} */
}

/* ***Size-related Styling (responsive)**** 496 px *** */

@media all and (min-width: 31em) {

#header .hdr_text {font-size: 1.2em;}
#header .hdr_image_cont {padding: 10px 0px; min-width: 110px;}
#header #hdr_image {width: 110px; height: 83px;}
#header .hamburger_cont {width: 110px;}
#hnav li a {padding: 10px 10px;}
#menu_tip {display: none;}
}

/* ***Size-related Styling (responsive)**** 576 px *** */
/* Inherits mobile styles, but floats containers to make columns */

@media all and (min-width: 36em){

#menu_tip {display: block;}
#header .hdr_text {font-size: 1.65em;}
.page-bottom-padding {display: none;}

	.col-576-1 {width: 8.33%;}
	.col-576-2 {width: 16.66%;}
	.col-576-3 {width: 25%;}
	.col-576-4 {width: 33.33%;}
	.col-576-5 {width: 41.66%;}
	.col-576-6 {width: 50%;}
	.col-576-7 {width: 58.33%;}
	.col-576-8 {width: 66.66%;}
	.col-576-9 {width: 75%;}
	.col-576-10 {width: 83.33%;}
	.col-576-11 {width: 91.66%;}
	.col-576-12 {width: 100%;}
}

/* ***Size-related Styling (responsive)**** 640 px *** */

@media all and (min-width: 40em) { /* 640px */
/*.page_title {font-size: 2em;}*/

	.col-640-1 {width: 8.33%;}
	.col-640-2 {width: 16.66%;}
	.col-640-3 {width: 25%;}
	.col-640-4 {width: 33.33%;}
	.col-640-5 {width: 41.66%;}
	.col-640-6 {width: 50%;}
	.col-640-7 {width: 58.33%;}
	.col-640-8 {width: 66.66%;}
	.col-640-9 {width: 75%;}
	.col-640-10 {width: 83.33%;}
	.col-640-11 {width: 91.66%;}
	.col-640-12 {width: 100%;}
}

/* ***Size-related Styling (responsive)**** 700 px *** */

@media all and (min-width: 44em) { /* 700px */
#hnav {display: block;}
main {font-size: 1.25em;}
#header h1.page_title {font-size: 2.5em;}
#menu_tip {display: none;}
.page_title {padding: 25px 0px;}
}

/* ***Size-related Styling (responsive)**** 800 px *** */

@media all and (min-width: 50em) { /* 800px */

}

/* ***Size-related Styling (responsive)**** 900 px *** */

@media all and (min-width: 55.8em) { /* 900px */

}

@media all and (max-width: 64em) {main {margin: 0px 10px;}}

/* -----------------------------------------------------------------------------
  ROOT ELEMENTS
----------------------------------------------------------------------------- */
html, body {margin: 0; padding: 0; height: 100%;}
body {
  color: #6d6d6d;
  background-color: #fff;
  font-family: "Arial", Helvetica, sans-serif;
}
/* -----------------------------------------------------------------------------
  HEADING ELEMENTS
----------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  color: #3b3b3b;
  font-weight: 700;
  line-height: 1.2;
}
/* -----------------------------------------------------------------------------
  TEXT ELEMENTS
----------------------------------------------------------------------------- */
a {
  color: #28aadc;
  text-decoration: none;
}
a:hover {color: #00648c;}
b,strong {font-weight: 700;}
i,em {font-style: italic;}
/* -----------------------------------------------------------------------------
  MEDIA ELEMENTS
----------------------------------------------------------------------------- */
img {max-width: 100%; height: auto; width: auto\9; /* IE8 */}
/* -----------------------------------------------------------------------------
  WRAPPER OBJECT
----------------------------------------------------------------------------- */
.o-wrapper {
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
#o-wrapper {
    max-width: 1000px;
    text-align: left;
    margin: 0px auto;
  }
/* -----------------------------------------------------------------------------
  CONTAINER OBJECTS
----------------------------------------------------------------------------- */
.o-container {
/*  margin: 0 auto;*/
}
/* -----------------------------------------------------------------------------
  HEADER OBJECT
----------------------------------------------------------------------------- */
.o-header {background-color: white;}

#hnav {font-family: verdana;}
#hnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5f5f5f;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#hnav li {float: left;}
#hnav li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}
#hnav li a:hover {
    background-color: #111;
}
/* -----------------------------------------------------------------------------
  MAIN OBJECT
----------------------------------------------------------------------------- */
.o-main {
  /**/
}
/* -----------------------------------------------------------------------------
  SLIDE AND PUSH MENUS COMPONENT
----------------------------------------------------------------------------- */
/**
 * Menu overview.
 */
.c-menu {
  position: fixed;
  z-index: 200;
  background-color: #67b5d1;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
.c-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/**
 * Left and right menus
 *
 * Slide and push menus coming in from the left and right inherit a lot of
 * common styles. We'll start each of them off by doing up the common styles
 * for each version, followed by individual styles.
 *
 * The various versions are governed by modifier classes.
 */
/**
 * Common modifiers for left/right menus.
 */
.c-menu--slide-left {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
@media all and (min-width: 20em) { /* was 320px */
  .c-menu--slide-left {
    width: 300px;
  }
}
.c-menu--slide-left .c-menu__item {
  display: block;
  text-align: center;
  border-top: solid 1px #b5dbe9;
  border-bottom: solid 1px #3184a1;
}
.c-menu--slide-left .c-menu__item:first-child {
  border-top: none;
}
.c-menu--slide-left .c-menu__item:last-child {
  border-bottom: none;
}
.c-menu--slide-left .c-menu__link {
  display: block;
  padding: 12px 24px;
  color: #fff;
}
.c-menu--slide-left .c-menu__close {
  display: block;
  padding: 12px 24px;
  width: 100%;
}
/**
 * Slide/Push Menu Left.
 */
.c-menu--slide-left {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
@media all and (min-width: 20em) { /* was 320px */
  .c-menu--slide-left {
    -webkit-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
.c-menu--slide-left.is-active {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
/**
 * Body states.
 *
 * When a menu is active, we want to hide the overflows on the body to prevent
 * awkward document scrolling.
 */
body.has-active-menu {
  overflow: hidden;
}
/**
 * Close button resets.
 */
.c-menu__close {
  color: #fff;
  background-color: #3184a1;
  font-size: .9em; /* was: 14px */
  border: none;
  box-shadow: none;
  border-radius: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.c-menu__close:focus {
  outline: none;
}
/* -----------------------------------------------------------------------------
  MASK COMPONENT
----------------------------------------------------------------------------- */
.c-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
          transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.c-mask.is-active {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
}