@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.6em;	
  line-height: 1.6;
  font-family: "Open Sans", sans-serif;
  color: #333;
  margin: 0 auto;
  background-color: #ddd;
  margin-bottom: 175px;
  height: 100%;
  min-height: 100%;
  background-color: #72337d;
  background-size: cover;
}

p,
h1,
h2,
h3,
h4,
table {
  padding: .5em .5em;
  margin: .3em 0;
}

.ql-list {
  padding: 0em .5em 0em .5em;
  color : #334049;
  font-weight: 600;
}

.ui-frame,
header,
section,
footer {
  padding: 1em .5em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

aside .ui-frame {
  margin-bottom: 1em;
}

aside .social-media {
  display: inline-block;
  width: 4em;
  margin: .5em;
}

aside .social-media img {
  width: 100%;
}

* {
  box-sizing: border-box;
}


h1 {
  color : #334049;
  font-weight: 600;
}

.button {
  background-color: #3C9291;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12pt;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
}

.sub-nav {
  padding: .05em;
  margin-left: -.05em;
  display: inline-block;
  position: relative;
  transition: max-height .5s;
  background-color: #fff;
  border-bottom: none;
  border-top: 1px solid #ccc;
  border-right: .05px solid #ccc;
}

.sub-nav > a:first-of-type {
  border-top: none;
  text-decoration: none;
}


.sub-nav > a:not([href])::before {
    content: '\25bc\fe0e';
}

.sub-nav a:first-of-type:hover {
  background-color: inherit;
}

.sub-nav a {
  display: block;
  width: 100%;
  border-top: 1px solid #ccc;
  padding: .5em
}

.sub-nav .sub-links a:hover {
  background-color: #ddd;
}

.sub-nav .sub-links {
  background-color: #fff;
  position: absolute;
  left: 0em;
  top: 100%;
  width: max-content;
  display: block;
}

.sub-nav.open .sub-links {
  display: block;
  border: 1px solid #ccc;
  border-bottom: 4px double #ccc;
  z-index: 1;
}

.sub-nav:not(.open) .sub-links {
    display: none;
}

.column {
  display: inline-block;
  vertical-align: top;
  padding: 1em 1%;
}

.half {
  width: 48%;
}

.third {
  width: 31.333%;
}

.quarter {
  width: 23%;
}

.circular--square {
  border-radius: 50%;
  margin: 0em 1em 1em 1em 
}

details {    
  background: #eee;    
  color: #444;    
  padding: .5em .5em;
  margin: .3em 0;   
  border: none;    
  text-align: left;    
  outline: none;    
} 

.hz-images {
  display: inline-block;
  float: left;
  margin: 0 2.5%;
}
  
div.indent {
  text-indent: 2em;
}

td.indent {
  text-indent: 1em;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
  padding: 1em .5em;
}

aside {
  width: 34.33%;
}

section {
  width: 64.66%;
}

ul.a {
  list-style-type: none;
    padding: .5em .5em;
  margin: .3em 0;
}

ul.b {
  padding: .5em .5em;
  margin: .3em 0;
}

aside,
section {
  vertical-align: top;
  display: inline-block;
  height: auto;
}

header {
  padding : 0;
}

header > h1 {
  padding: .1em .5em;
}

header nav {
  padding: 0 .5em 0 0;
}

header .banner {
  width: 100%;
  height: auto;

}

.main-wrapper {
  margin: 2em auto;
  width: 95vw;
  max-width: 1200px;
}

footer {
  width: 100%;
  height: 100px;
  display: inline-block;
}

a, a:link, a:active {
  color: #666; 
  text-decoration: underline;
}

a:hover {
  color: #888; 
  cursor: pointer;
  text-decoration: underline;
}

nav a {
  display: inline-block;
  margin-right: .5em;
}

header .hamburger {
  display: none;
  width : 48px;
  height: 48px;
  background: #334049 url('/hamburger.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  border-bottom-left-radius: 4px;
}

header .hamburger:hover {
  cursor: pointer;
  background-color: #666;
}



.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

.read-more-toggle {
  display: none;
}

.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  padding: 5px;
  margin: .5em;
  font-size: .8em;
  background: #555;
  color: white;
}

.read-more-toggle-label:after {
  content: "More";
  display: inline-block;
}

.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
    than the content */
  max-height: 1500px;
}

.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less";
}


#table_fmt {
  border-collapse: collapse;
  width: 100%;
}

#table_fmt td, #table_fmt th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table_fmt tr:nth-child(even){background-color: #f2f2f2;}

#table_fmt tr:hover {background-color: #ddd;}

#table_fmt th {
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  background-color: #334049;
  color: white;
} 



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

  aside,
  section {
    width: 95%; 
  }

  .third,
  .quarter,
  .half {
    width: 98%;
  }

}

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

  header .hamburger {
    -webkit-transition: left .5s;
    -moz-transition: left .5s;
    transition: left .5s;
    display: block;
    position: fixed;
    top  : 0;
    right: 0;
  }

  header nav {
    -webkit-transition: left .5s;
    -moz-transition: left .5s;
    transition: left .5s;
    position: fixed;
    width: 320px;
    left: -320px;
    padding: .5em 0;
    border: 1px solid #ccc;
    background-color: #fff;
    top: 0;
    overflow-y: scroll;
    height: 100vh;
  }

  nav .sub-nav {
    display: block;
    border-radius: 0;
    border: none;
    border-top: 1px solid #ccc;
  }


  .sub-nav .sub-links {
    position: static;
    padding-left: 1em;
    background-color: #ddd;
  }

  .sub-nav .sub-links a {
    text-decoration: none;
    color: #666;
  }

  .sub-nav .sub-links a:hover {
    color: #888;
    text-decoration: underline;
  }

  nav.open {
    left: 0;
  }

  header nav.open .hamburger{
    left: 320px;
  }
   
}