/********************************************************** TABLE OF CONTENTS
  1.  Basic Normalize: A minimal normalize/reset for browser consistency.

  2.  Base Variables & Values: Just a manifest of the colors and fixed values used for the site.

  3.  Utilities: Utility classes (e.g., clearfix).

  4.  Structural Foundation: The basic page structure.

  5.  General Styles: The styles ("theme") of the site.

  6.  Section/Area Styles: Styles specific to given sections (e.g., masthead, footer).

  7.  Search Form: Styles for the search form.

  8.  List Module: A reusable list component (used, for example, on the Press Release page and the Search Results page).

  9.  Navigation: Rules for the navigation mechanism.

  10. Mini Gallery: A simple responsive image gallery (for the Home page).

  11. Profile Module: A component for displaying profiles (used, for example, on the Our Team page).

  12. Contact Form: Rules and configuration for the contact form.

  13. Media Queries: Simple media queries for different screen sizes. Not exhaustive, by any means.

***************************************************************************/

/********************************************************** Basic Normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,:after,:before{box-sizing:inherit}dl,h1,h2,h3,h4,h5,h6,ol,p,ul{margin-top:0;margin-bottom:0}blockquote,button{margin:0;padding:0}button,iframe,img{border:0}li,main{display:block}ol,ul{padding-left:0}dd{margin-left:0}h1,h2,h3,h4,h5,h6{font-size:inherit}sup{position:relative;top:-.5em;vertical-align:baseline;font-size:75%;line-height:0}strong{font-weight:700}figure{margin:0}a{text-decoration:none;color:inherit}button{text-align:inherit;text-transform:inherit;font:inherit;-webkit-font-smoothing:inherit;letter-spacing:inherit;background:0 0;cursor:pointer;overflow:visible}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
/********************************************************** End Basic Normalize */

/********************************************************** Base Variables & Values
  --- COLORS ---
  Base Color: #01AEF0 (1,174,240)
  Headings: #016d98
  Light Accent: #E6F7FE [also fallback for alpha color]
  Menu Background, Link: #01AEF0 [Base Color]
  Menu Hover, Link Hover: #0194CC
  Menu Current, Link Visited: #0182B4
  Submenu Background Color: #34BEF3 [a few shades lighter than default menu background color]

  --- VALUES ---
  Base Font Size: 16px
  Navigation Height: 32px
  Footer Height: 32px
*********************************************************** Base Variables & Values */


/********************************************************** Utilities */

/* Standard Clearfix */
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom:1;
}
/********************************************************** End Utilities */


/********************************************************** Structural Foundation */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page-container {
  position: relative;
  min-height: 100%;
  margin: 0 2%;
}

.page-header,
main {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  /* Alert: Magic Number (for IE7) */
  z-index: 100;
}

main {
  padding-bottom: 32px; /* Equal to height of page-footer. */
}

.page-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px; /* Equal to padding-bottom of main. */
  width: 100%;
}
/********************************************************** End Structural Foundation */


/********************************************************** General Styles */
body {
  line-height: 1.2;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 1px;
  color: #016d98;
}

h1 {
  font-size: 1.5em;
  font-weight: 900;
  margin: 1.5em 0 0.5em;
}
h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0.75em 0 0.25em;
}

a {
  text-decoration: none;
  color: #01AEF0;
}
a:hover,
a:active {
  color: #0194CC;
}
a:visited {
  color: #0182B4;
}
/********************************************************** End General Styles */


/********************************************************** Section/Area Styles */
.masthead {
  margin: 0 1px;
}

.logo-container,
.masthead-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
  overflow: hidden;
}

.logo-container {
  width: 60%;
  min-width: 300px;
}

.logo-container img {
  max-width: 100%;
  height: auto;
}

.masthead-content {
  width: 40%;
  text-align: right;
}

.content {
  position: relative;
  width: 95%;
  margin: 0 auto;
}

.content p {
  padding: 0.5em 0;
}

.colophon {
  margin: 2em 0;
  padding: 0.75em 0;
  border-top: 1px solid #01AEF0;
  border-bottom: 1px solid #01AEF0;
}

.colophon p {
  font-size: 0.875em;
}

.page-footer p {
  font-size: 0.875em;
  padding: 0.5em;
  color: #01AEF0;
}

.page-footer a,
.page-footer a:hover,
.page-footer a:active,
.page-footer a:visited {
  color: #01AEF0;
}
/********************************************************** End Section/Area Styles */


/********************************************************** Search Form */
.search-controls {
  border: none;
  padding: 0;
  margin: 0 0 0.5em 0;
  min-width: 240px;
}

.search-controls input[type=text] {
  font-family: inherit;
  margin: 0.25em 0.25em 0.25em 0;
}
.search-controls input[type=submit] {
  font-family: inherit;
  margin: 0.25em 0;
}
/********************************************************** End Search Form */


/********************************************************** List Module */
.list-container {
  width: 90%;
  margin: 0 auto 0 0;
}

.column-list {
  width: 100%;
  min-width: 320px;
}

.column-list li:nth-child(even) {
  background: #E6F7FE;
  background: rgba(230,247,254,0.75);
}

.columns {
  *zoom: 1;
}
.columns:before {
  display: table;
  content: "";
}
.columns:after {
  display: table;
  content: "";
  clear: both;
}

.header-columns p,
.body-columns p {
  padding: 0.5em;
  overflow: hidden;
}

.header-columns p {
  font-weight: bold;
}

.columns .column {
  position: relative;
  clear: none;
  float: left;
  margin: 0;
  padding: 0;
}

.columns .span1 {
  width: 8.33333%;
}
.columns .span2 {
  width: 16.66667%;
}
.columns .span3 {
  width: 25%;
}
.columns .span4 {
  width: 33.33333%;
}
.columns .span5 {
  width: 41.66667%;
}
.columns .span6 {
  width: 50%;
}
.columns .span7 {
  width: 58.33333%;
}
.columns .span8 {
  width: 66.66667%;
}
.columns .span9 {
  width: 75%;
}
.columns .span10 {
  width: 83.33333%;
}
.columns .span11 {
  width: 91.66667%;
}
.columns .span12 {
  width: 100%;
}
/********************************************************** End List Module */


/********************************************************** Navigation */
.primary-nav {
  position: relative;
  margin: 1px;
  background: #01AEF0;
  height: 32px;
}

.site-nav,
.nav-submenu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.site-nav {
  background: #01AEF0;
  font-size: 0.875em;
  position: relative;
  /* Alert: Magic Number */
  z-index: 200;
}

.nav-submenu {
  position: absolute;
  display: none;
  background: #34BEF3;
  font-size: 0.875em;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 100%;
  /* Alert: Magic Number */
  z-index: 300;
}

.nav-item,
.nav-submenu-item {
  position: relative;
  font-size: 1em;
  text-transform: capitalize;
  list-style-type: none;
  color: #FFF;
  zoom: 1;
  white-space: nowrap;
  text-align: center;
}

.nav-item {
  float: left;
  background: #01AEF0;
}

.nav-submenu-item {
  background: #34BEF3;
}

.nav-item:hover,
.nav-submenu-item:hover {
  background: #0194CC;
}

.site-nav li a {
  display: block;
  padding: 0 1em;
  height: 32px;
  line-height: 32px;
  text-decoration: none;
  color: #FFF;
}

.site-nav li a:hover,
.site-nav li a:active,
.site-nav li a:visited {
  color: #FFF;
}

.nav-current-item {
  background: #0182B4;
}

.nav-active .nav-submenu {
  display: block;
}

#menu-toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 32px;
  background: #01AEF0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}
#menu-toggle span {
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: #FFF;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background 0.3s;
            transition: background 0.3s;
}
#menu-toggle span::before, #menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  background: inherit;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0);
            transform: translateZ(0);
  -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  -webkit-transition: background 0s, -webkit-transform 0.3s;
            transition: background 0s, -webkit-transform 0.3s;
            transition: transform 0.3s, background 0s;
            transition: transform 0.3s, background 0s, -webkit-transform 0.3s;
}
#menu-toggle span::before {
  top: -6px;
  -webkit-transform: rotate(0);
            transform: rotate(0);
}
#menu-toggle span::after {
  bottom: -6px;
  -webkit-transform: rotate(0);
            transform: rotate(0);
}

#menu-toggle.menu-is-open span {
  background: rgba(255, 255, 255, 0);
}
#menu-toggle.menu-is-open span::before, #menu-toggle.menu-is-open span::after {
  background: #FFF;
}
#menu-toggle.menu-is-open span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
}
#menu-toggle.menu-is-open span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
}
/********************************************************** End Navigation */

/********************************************************** Press Release Banner */
.banner {
  position: relative;
  margin: 1px;
  background: #e6e6e6;
  height: 32px;
  padding-top: .5%;
  padding-left: .5%;
  whitespace: nowrap;
}

.banner-nav,
.banner-submenu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.banner-nav {
  background: #e6e6e6;
  font-size: 0.875em;
  position: relative;
  /* Alert: Magic Number */
  z-index: 200;
}

.nav-submenu {
  position: absolute;
  display: none;
  background: #e6e6e6;
  font-size: 0.875em;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 100%;
  white-space: nowrap;
  /* Alert: Magic Number */
  z-index: 300;
}

.banner-item,
.banner-submenu-item {
  position: relative;
  font-size: 1em;
  text-transform: capitalize;
  list-style-type: none;
  color: #FFF;
  zoom: 1;
  text-align: center;
}

.banner-item {
  float: left;
  background: #fdee8a;
}

.banner-submenu-item {
  background: #fdee8a;
}

.banner-item:hover,
.banner-submenu-item:hover {
  background: #0194CC;
}

.banner-nav li a {
  display: block;
  padding: 0 1em;
  height: 32px;
  line-height: 32px;
  text-decoration: none;
  color: #FFF;
}

.site-nav li a:hover,
.site-nav li a:active,
.site-nav li a:visited {
  color: #FFF;
}

.banner-current-item {
  background: #fdee8a;
}

.banner-active .nav-submenu {
  display: block;
}

/********************************************************** End Press Release Banner */


/********************************************************** Mini Gallery */
.gallery {
  position: relative;
  overflow: hidden;
}

.gallery-row {
  position: relative;
  width: 100%;
}

.gallery-panel {
  position: relative;
  float: left;
  width: 50%;
  padding: 1px;
}

.gallery-panel img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
/********************************************************** End Mini Gallery */


/********************************************************** Profile Module */

.profile-module {
  width: 90%;
  margin: 2em auto;
  border: 1px solid #01AEF0;
  padding: 1em;
  box-shadow: 3px 3px 6px -1px #666;
}

.header-content {
  overflow: hidden;
}

.profile-image {
  position: relative;
  float: left;
  width: 35%;
  overflow: hidden;
}

.profile-image .text-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  background-color: rgba(1,174,240,0.08);
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.profile-image .overlay-content {
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  background: #E6F7FE;
  background: rgba(230,247,254,0.75);
  color: #016d98;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.profile-image .overlay-content a {
  display: block;
}

.profile-image  .overlay-content p {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0.25em 0;
}

.profile-image:hover .text-overlay, .profile-image:focus .text-overlay {
  opacity: 1;
}
.profile-image:hover .overlay-content, .profile-image:focus .overlay-content {
  bottom: 0;
}

.header-content {
  padding: 2em 1em 1em 1em;
  width: 65%;
}

.profile-image img {
  display: block;
  width: 100%;
  height: auto;
}

.profile-image-reversed {
  float: right;
  padding-left: 1em;
}

.header-content .quote-module {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #E6F7FE;
  border-left-color: rgba(1,174,240,0.1);
}

.header-content .quote-module blockquote {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1em;
}

.header-content .quote-module blockquote::before {
  position: absolute;
  top: 22px;
  left: 10px;
  color: #E6F7FE;
  color: rgba(1,174,240,0.1);
  content: "\201c";
  font-family: sans-serif;
  font-size: 86px;
  font-weight: bold;
  line-height: 0;
}

.header-content .quote-module blockquote::after {
  position: absolute;
  bottom: -18px;
  right: 10px;
  color: #E6F7FE;
  color: rgba(1,174,240,0.1);
  content: "\201d";
  font-family: sans-serif;
  font-size: 86px;
  font-weight: bold;
  line-height: 0;
}

.header-content .quote-module blockquote p {
  font-size: 1em;
  padding: 0.5em 0;
}

.header-content .quote-module .citation {
  padding: 1em 0.5em 0.5em 1.5em;
}

.header-content .quote-module .attribution {
  font-size: 0.875em;
  font-style: italic;
}

.profile-body {
  padding: 1em 0 0 0;
}

.profile-body p {
  font-size: 0.875em;
}

/********************************************************** End Profile Module */


/********************************************************** Contact Form */

#contact-form {
  width: 80%;
  max-width: 600px;
}

.input-fields,
.action-fields {
  border: 0;
  margin: 0;
}
.input-fields {
  padding: 0 0 1em;
}
.action-fields {
  padding: 1em;
}

.required-marker {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 0;
  width: 10px;
  color: #DC143C;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.input-fields .required-marker {
  margin-left: -10px;
}

#contact-form label {
  display: inline-block;
  padding: 0.5em 0.25em 0.25em;
  vertical-align: top;
  width: 25%;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  display: inline-block;
  margin: 0;
  padding: 0.25em;
  border: 1px solid #01AEF0;
  vertical-align: top;
  margin: 0.25em;
  width: 73%;
  font-family: inherit;
}
#contact-form textarea {
  resize: vertical;
}
#contact-form input[type="submit"],
#contact-form input[type="reset"] {
  margin: 0.25em 0.5em;
  padding: 0.25em 2em;
  font-family: inherit;
  width: 100px;
  min-width: 100px;
}

/********************************************************** End Contact Form */


/********************************************************** Media Queries */

/* Not mobile-first! That is, we proceed from larger sizes down. */

@media only screen and (min-width: 1200px) {
  .page-container {
    margin: 0 10%;
  }

  .profile-module {
    width: 60%;
    margin: 2em;
  }
}

@media only screen and (max-width: 992px) {
  .profile-image,
  .header-content {
    width: 50%;
  }
  .header-content blockquote p {
    font-size: 0.875em;
  }
}

@media only screen and (max-width: 740px) {
  .logo-container {
    width: 100%;
  }

  .masthead-content {
    width: 100%;
  }

  #contact-form label,
  #contact-form input[type="text"],
  #contact-form input[type="email"],
  #contact-form textarea {
    display: inline-block;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .gallery-panel {
    float: none;
    width: 100%;
  }

  #menu-toggle {
    display: block; 
  }

  .site-nav {
    display: none;
  }

  .site-nav ul {
    width: 100%;
  }

  .site-nav li {
    text-align: left;
  }

  .nav-item {
    float: none;
  }

  .nav-active .nav-submenu {
    position: static;
  }

  .profile-image {
    float: none;
    padding-right: 0;
    width: 100%;
  }

  .header-content {
    width: 100%;
  }

}
/********************************************************** Media Queries */