.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
body {font-family:'Montserrat',sans-serif}
h1 {margin:0; padding:0}
.container {width:960px;margin:0 auto}
.header {background-color:#2c2c2c;padding:1em;border-bottom:solid 6px #aaff11}
.header .container {display:flex;justify-content:space-between;}
.header a {color:#99ff11;text-decoration:none;text-transform:uppercase;font-family:'Open Sans Condensed'}
.header a:hover {color:#ccff55;}
ul.nav {align-self:flex-end;list-style:none;margin:0 auto;padding-left:0}
ul.nav li {display:inline-block;padding:0px 20px}
ul.nav li:last-child {padding-right:0}
.tribox_container {display:flex;justify-content:space-between}
.tribox {flex-basis:30%;text-align:center;}

.content_pane {text-align:center; padding:2em 0em}
.content_pane div.body p {width:60%;margin:0 auto;line-height:150%;font-size:1.08em;margin-bottom:1em}
.tribox p.body {width:100%}
.tribox p {text-align:justify}

.number {width:80px;height:80px;font-size:60px;line-height:80px;border:solid 8px #99ff11;border-radius:50px;text-align:center;margin:0 auto}
hr {border: solid 1px #99ff11;margin:0 auto;width:50%;border-bottom:0;margin-bottom:1em}
.tribox:hover .number {border-color:#ccff55}
.service_map {width:100%; height:400px;background-color:blue}

.content_pane.dark {background-color:#2c2c2c;color:#f0f0f0}
.content_pane.green {background-color:#9edc66;color:black}

#contact_form .error {color:red;font-size:0.8em;text-align:left}
#contact_form {display:flex;flex-wrap:wrap;max-width:480px;margin:0 auto;justify-content:space-between}
#contact_form input, #contact_form button, #contact_form select {font-size:120%}
#contact_form input {border:0;flex-basis: 60%; flex-grow:1;margin-bottom:0.8em;padding:5px}
#contact_form p.error {flex-basis:60%;margin-top:0.3em;margin-bottom:0.3em;flex-grow:1}
#contact_form .half, #contact_form p.error.half {flex-basis:45%;flex-grow:0;}
#contact_form button {flex-basis:60%; flex-grow:1; background-color:#2c2c2c;border:0;color:#f0f0f0;font-weight:bold;padding:8px}
#contact_form button:hover {background-color:#444;cursor:pointer}
#contact_form select {margin-bottom:0.8em;flex-basis}
#pricing p {text-align:center;font-size:270%}
#pricing .rich-text p {font-size:100%}
.contact {color:white;text-align:right;font-size:200%;font-weight:bold;font-family:'Open Sans Condensed';vertical-align:center}

.disclosure {display:none}

.closed_notice {width:960px;margin:0 auto;position:relative;top:-1em;padding:2em 0;background-color:red;color:white;font-size:140%;font-weight:bold;margin-bottom:-2em;text-transform:uppercase;text-align:center}

@media only screen and (max-width:959px) {
.tribox_container {width:auto;flex-direction:column}
.container {width:auto;padding:0 20px}
.tribox {margin-bottom:1.5em;margin-top:1.5em}
.tribox h3 {margin-top:0}
.closed_notice {width:auto;padding-left:20px;padding-right:20px}
}

@media only screen and (max-width:800px) {
/* link collapse */
.content_pane div.body p {width:80%}
.disclosure {display:block;font-size:2.5em;text-align:center}
ul.nav.container {flex-direction:column;}
#navContainer {display:none}
ul.nav li {text-align:center;margin:0.7em 0;font-size:1.2em;}
}

@media only screen and (max-width:640px) {
.content_pane div.body p {padding:0 20px;width:auto}
/* top bar collapse */
.header .container {flex-direction:column;}
.contact {text-align:center}
.header h1 {text-align:center;margin-left:-35px}
}

@media only screen and (max-width:540px) {
#contact_form .half {flex-basis:60%;flex-grow:1}
}
