/********** SO FRESH AND SO CLEAN **********/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select, textarea {
    margin: 0;
    padding: 0;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

/********** THE HIPSTER MOVEMENT DID NOT YIELD A GREAT LITERATURE, BUT IT MAKE GOOD USE OF FONTS **********/

body
{
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   -webkit-text-size-adjust: 100%; /* So iOS doesn't resize fonts */ 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/********** GLOBALS **********/

body
{
   font-size: 10px;
   color: #000;
}

strong
{
   font-weight: bold;
}

a
{
   color: inherit;
}

a:hover
{
   text-decoration: none;
}

h1
{
   font-size: 2.3125em;
   color: #001643;
   margin-bottom: 0.8em;
   line-height: 1.2;
}


h1:not(:first-of-type)
{
   margin-top: 1.1em;
}


h2
{
   font-weight: bold;
   margin-bottom: 1em;
   line-height: 1.6;
   font-size: 1.1em;
}

.contained
{
   box-sizing: border-box;
   width: 100%;
   max-width: 1200px;
   padding: 0 4.5em;
   margin-left: auto;
   margin-right: auto;
}

header
{
   position: relative;
   margin: 3.4em auto;
}

header .nav_home
{
   background: url('images/logo-color.png') 0 0 no-repeat;
   background-size: contain;
   width: 21.1em;
   width: 19.5em;
   height: 4.5em;
   height: 4.095em;
}

header .nav_home a
{
   display: inline-block;
   width: 100%;
   height: 100%;
}

header ul.nav_links
{
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   padding-right: 4.5em;
}

header ul.nav_links li
{
   float: left;
   margin-right: 3.4em;
   font-size: 1.6em;
}

header ul.nav_links li:last-of-type
{
   margin-right: 0;
}

header ul.nav_links li a
{
   color: #000;
   padding-bottom: 4px;
   text-decoration: none;
   border-bottom: 1px solid white;   
}

header ul li.nav_link_selected a
{
   font-weight: bold;
}

header ul li.nav_link_selected a,
header ul.nav_links li a:hover
{
   border-color: black;   
}

.main_content
{
   margin-top: 3em;
   margin-bottom: 3em;
   color: #393939;
}

.content_container
{
   box-sizing: border-box;
   width: 100%;
   max-width: 900px;
   padding: 0 5em;
   margin-left: auto;
   margin-right: auto;
   font-size: 1.6em;
   line-height: 1.8125;

}

.content_container p,
.content_container ul
{
   margin-bottom: 1.5em;
}

.content_container li
{
   list-style: disc;
   margin-left: 3em;
   padding-left: 1em;
   margin-bottom: 0.35em;
}

footer
{
   width: 100%;
   background: #001643;
   color: white;
   padding: 3.6em 0;
}

footer a
{
   color: white;
   text-decoration: none;
}

.footer_legal, .footer_copyright
{
   font-size: 0.876em;
   line-height: 1.357;
   margin: 2.07em 0;
}

.footer_logo_area
{
   border-bottom: 1px solid white;
   padding-bottom: 2.25em;
}

.footer_logo
{
   width: 13.6875em;
   height: 3em;
   background: url(images/logo-white.png) center center no-repeat;
   background-size: contain;
}

.footer_contact
{
   margin-top: 1.45em;
   font-size: 1.25em;
   line-height: 1;
}

.footer_phone, .footer_email
{
   float: left;
}

.footer_phone
{
   width: 15em;
}

.footer_copyright
{
   font-weight: bold;
   margin: 0;
}

/********** HOME / ABOUT US PAGE **********/

.featured_area
{
   position: relative;
   width: 100%;
   height: 32.5em;
   background: url(images/network-nodes.jpg) center center no-repeat;
   background-size: cover;
   line-height: 0;

}

.featured_area:after
{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: black;
   opacity: 0.25;
}

.featured_title
{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: white;
   font-size: 5.25em;
   text-align: center;
   font-style: italic;
   line-height: 1.1667;
   z-index: 1;
   padding: 0 2.5em;
}

/********** LEADERSHIP PAGE **********/

.leadership > div
{
   width: 45%;
}

.leadership > div:first-of-type
{
   float: left;
}

.leadership > div:last-of-type
{
   float: right
}

.leader_photo img
{
   width: 100%;
   max-width: 215px;
   height: auto;
}

.leader_name
{
   font-size: 1.5625em;
   margin-top: 1em;
   line-height: 1.1;
}

.leader_title, .leader_email
{
   font-size: 1.125em;
   line-height: 1.6;
}

.leader_title
{
   font-weight: bold;
}

.leader_email
{
   margin-top: 0.5em;
   margin-bottom: 1.6em;
}

/********** MOBILE IS EVERYTHING **********/


@media (max-width: 825px) 
{ 
   body
   {
      font-size: 9px;
   }
   
   .content_container,
   .contained
   {
      padding: 0 3em;
   }
   
   header ul.nav_links
   {
      padding-right: 3em;
   }
   
   header ul.nav_links li
   {
      margin-right: 4em;
   }
}

@media (max-width: 740px) 
{ 
   body
   {
      font-size: 8px;
   }
   
   header ul.nav_links li
   {
      margin-right: 3em;
   }  
   
   header .nav_home
   {
      width: 18em;
      height: 3.6em;
   }
   
   .featured_title
   {
      font-size: 4.5em;
   }
   
   .main_content
   {
      margin-top: 2em;
      margin-bottom: 2em;
   }
   
   h1
   {
      margin-bottom: 0.4em;
   }
}

@media (max-width: 600px) 
{ 
   body
   {
      font-size: 7px;
   }   

   header ul.nav_links
   {
      padding-right: 2em;
   }

   header ul.nav_links li
   {
      margin-right: 2em;
   }  
      
   .content_container,
   .contained
   {
      padding: 0 2em;
   }
   
   .content_container li
   {
      margin-left: 2em;   
   }
   
   .main_content
   {
      font-size: 2em;
   }
   
   h1
   {
      font-size: 1.9em;   
      margin-bottom: 0.6em;
   }
   
   .leadership > div
   {
      width: 46.5%;
   }
   
   .footer_phone
   {
      width: auto;
   }
   
   /*
   .footer_email
   {
      float: right;
   }
   */
   
   header ul.nav_links li a
   {
      padding-bottom: 3px;
   }
}

@media (max-width: 500px) 
{ 
   header ul.nav_links li
   {
      margin-right: 2.1em;
      font-size: 1.4em;
   }  
   
   header .nav_home
   {
      width: 14em;
      height: 2.8em;
   }
   
   .featured_title
   {
      font-size: 4em;
   }  
   
   .footer_contact
   {
      font-size: 1.15em;
   }
   
   header ul.nav_links li a
   {
      padding-bottom: 2px;
   }
}



@media (max-width: 400px) 
{ 
   header ul.nav_links li
   {
      margin-right: 1.2em;
      font-size: 1.3em;
   }  
   
   header .nav_home
   {
      width: 11em;
      height: 2.2em;
   }
   
   header ul.nav_links li a
   {
      padding-bottom: 1px;
   }
}