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-size:100%;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}

/* ---------- MAIN CONTENT -----------*/
html {
	scroll-behavior: smooth;
}


body {  margin: auto;
        color: rgb(65, 65, 65);
        font-family: joanna-nova, serif;
        font-weight: normal;
        line-height: 1.5em;
        background:#fafafa;
        font-size: 20px;}

section, footer {
        margin: auto;
        width: 80%; 
        max-width: 760px;}

.dark { padding: 4em 0;
        background: #4a4f54;
        color: #fff}
.dark h2 {color: #fafafa}

.pale { padding: 4em 0;
        background: rgb(244, 244, 244);
    }

.grid ul {
  padding: 0;
  display: grid;
  grid-template-rows:    repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 1rem;
  list-style-type: none;
  margin: 3em 0;}

.flex { margin: 2em 0;
        display: flex;
    }
.flex li {    margin: 0 10px;}

.hero {margin-top: 2.5em}


/*------------ TYPOGRAPHY --------------------*/

h1, h2, h3 { text-align: center;
            margin: 1em 0;
            font-weight: normal;
            color:/* rgb(49, 91, 135)*/#4a4f54;;}

h1 {font-size: 3.375em;
    margin: .5em;
   
    font-weight: 300; 
    color:rgb(49, 91, 135)}

h3 {font-size: 1.618em}

h2 {font-size: 2.25em}

p {line-height: 1.5em;
    margin-bottom: 1em}

blockquote, cite, {font-family: joanna-nova, serif;}
        
.leader {font-size: 1.3em;
        line-height: 1.3}

.intro {text-align: center;
    margin-bottom: 4em}

.intro h2 { font-size: 3em;
            margin: .5em 0 .75em 0;
            text-transform: none;}

.intro h3  {text-transform: uppercase;
            font-size: 1.25em;
            letter-spacing: 2px;
            color: #0699c9;
            margin: -1em 0 3em 0}        

.intro p {  font-weight: 200;
            text-align: left;}

ul, {list-style: none; margin: 0}

li {margin: .5em 0}

  /* -------------- LINKS -------------------- */

a { color: rgb(49, 91, 135);
    text-decoration: none;} 
a:hover { color: #ff9900;} 
a:visited {color: #ff9900;}
        
/* ---------------- NAVIGATION ----------------------- */
 nav {  position: absolute;
        top: 0;
        left: 0;
        margin:0;
        width: 100%; 
        font-size: 0.65em;
        background: #4a4f54/*rgb(49, 91, 135)*/;
        padding: .5em 0; 
        z-index: -1; }

nav ul { text-align: center;
         text-transform: uppercase;
         letter-spacing: 2px;}

nav ul li { display: inline;
            margin: 15px;
            z-index: 2; } 

nav a:link {color: #fff}
            
nav a:visited {color: #fff}
            
nav a:hover {   
                color: #ff9900;
                transition: all 0.2s ease-in-out; } 


/* ------------------- IMAGES -------------------- */

img {
    display: block;
    margin: auto; 
    padding: 0;
    max-width: 100%;}

.logo { margin: auto;
        width: 150px;
        margin-top: 2em;}

hr {    margin: 3em 0;
        height: 1px;    
        background-color:#4a4f54;
        border: 0 none;}

.band { z-index: -2;
        height: 200px;
        width: 1000px;
        background-color: #fff;
        top:-5%;
        left:-5%;}


    /*----------------- GRID HOVER TEST -----------------*/
.grid li {
    position: relative;
    width: 100%;}
.image {
    display: block;
    width: 100%;
    height: auto;}
.overlay {
    position: absolute;
    background-color: #222222;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: 0;}
.text {
    font-size: .75em;
    font-weight: 200;
    text-align: center;
    width: 90%;
    margin-top: 0em;
    line-height: 1.3;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: 0.5s;
    transform: translate(-50%, -50%);
    } 

.overlay:hover .text { color: #000;
    transition: all 0.5s ease-in-out;}

.overlay:hover  {background: rgba(255, 255, 255, 0.8);
    border-bottom: none;
    opacity: 1;
    transition: all 0.5s ease-in-out;}

    
/*------------------- FOOTER ---------------------*/
footer {
    width: 800px;
    text-align: center;
    font-size: .75em;
    line-height: 1.5em;
    padding-bottom: 2em;}

footer a:link {color: #ff9900;
border-bottom: #ff9900 1px dotted;}
footer a:visited {columns: #ff9900;}
footer a:hover {color: #fafafa; border-bottom: #fafafa 1px dotted; transition: all 0.2s ease-in-out;
}

.connections{
    position: relative;
    margin: 0 auto;
    margin: 20, 0px;
}
.connections ul{
    margin: 0;
    padding: 0;
}
.connections li{
    margin: 0 15px;
    padding: 0;
    list-style: none;
    display: inline-block;  
}
.connections a:link{
    border-bottom: none;
}
.connections img,
.connections svg{
    border: none;
}
.connections a:hover img,
.connections a:hover svg{
    border-bottom: none;}

.connections svg {
        margin: 2em auto;}

.connections a:hover svg path {
        fill: #ff9900;
        transition: all 0.2s ease-in-out;}