:root{
--text-color: #d3cbc0;
--hover-state: #9c9c9c;
--light-gray: #f2f2f2;
--active-state: #ef422d;
}

html{
font-size:16px;
}

body{
font-family: 'Open Sans', sans-serif;
background-color: #222222;
}

h1{
color: #ffffff;
font-size:3rem;
line-height:3.75rem;
font-weight: 700;
letter-spacing: -0.175rem;
margin-bottom:1rem;
}

h2{
color: var(--text-color);
font-size:2rem;
line-height:3rem;
font-weight: 700;
letter-spacing: -0.1rem;
margin-bottom:0.5rem;
}

h3{
color: var(--text-color);
font-size:1.5rem;
line-height:2.25rem;
font-weight: 700;
letter-spacing: -0.075rem;
margin-bottom:0.5rem;
}

h4{
color: var(--text-color);
font-size:1.5rem;
line-height:2.25rem;
font-weight: 400;
letter-spacing: -0.075rem;
margin-bottom:0.5rem;
}

h5{
color: var(--text-color);
font-size:1.25rem;
line-height:2rem;
font-weight: 400;
letter-spacing: -0.075rem;
margin-bottom:0.5rem;
}

h6{
color: var(--text-color);
font-size:1rem;
line-height:1.75rem;
font-weight: 700;
letter-spacing:-0.75px;
margin-bottom:0.5rem;
}

p, ol, ul, dl, figcaption, legend{
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
font-size:1rem;
line-height:1.75rem;
font-weight: 400;
margin-bottom:0.5rem;
}

p.lede{
color: var(--text-color);
font-size:1.25rem;
line-height:2rem;
}

p.copyright{
border-top:1px solid var(--text-color);
padding-top:1rem;
margin-top:2rem;
}

strong{}

em{}

hr{
margin-top:2rem;
margin-bottom:2rem;
}

br{
clear:both;
}

blockquote{}

ol, ul{
margin-left:1.25rem;
}

li{}

dl{}

dd{}

address{
font-style: normal;
}

a, a:visited{
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
font-size:1rem;
line-height:1.75rem;
font-weight: 400;
}

a:hover{
color: var(--hover-state);
}

a:active, a:focus{
outline:1px solid var(--active-state);
}

button{
font-family: 'Open Sans', sans-serif;
color: var(--text-black);
font-size:1rem;
line-height:1.75rem;
font-weight: 400;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0.25rem;
padding:1rem;
cursor: pointer;
border:1px solid var(--text-color);
}

button:hover{
background-color: var(--hover-state);
}

button:active, button:focus{
outline:1px solid var(--active-state);
}

a.btn{
display:inline-block;
border-radius: 0.25rem;
padding:1rem;
border:1px solid var(--text-color);
text-decoration: none;
}

a.btn:hover{
background-color: var(--hover-state);
color: var(--text-color);
}

a.btn.btn-primary{
background-color: var(--text-color);
color:#ffffff;
border:none;
}

a.btn.btn-primary:hover{
background-color: var(--hover-state);
}

a.btn.btn-secondary{
border:2px solid var(--text-color);
}

a.btn.btn-secondary:hover{
border:2px solid var(--hover-state);
background: none;
color:var(--hover-state);
}

a.btn.btn-tertiary{
background-color:var(--light-gray);
border:none;
}

a.btn.btn-tertiary:hover{
background-color: var(--hover-state);
}

input[type="text"], textarea, select, label{
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
font-size:1rem;
line-height:1.75rem;
font-weight: 400;
padding:0.5rem;
}

label{
vertical-align: top;
padding:0px;
}

input[type="text"], textarea, select{
border: 1px solid var(--text-color);
}

input[type="text"]:active, input[type="text"]:focus, textarea:active, textarea:focus, select:active, select:focus, input[type="checkbox"]:active, input[type="checkbox"]:focus, input[type="radio"]:active, input[type="radio"]:focus{
outline:1px solid var(--active-state);
}

textarea{
width:100%;
}

select{
cursor:pointer;
}

option{}

header > a#skip-to-main{
position:absolute;
background-color: var(--text-color);
color:#ffffff;
top:0px;
left:-10000px;
overflow:hidden;
z-index:99;
padding:1rem;
}

header > a#skip-to-main:hover{
background-color: var(--hover-state);
}

header > a#skip-to-main:focus{
left:0px;
}

#main-content{
margin-top:75px;
margin-bottom:75px;
}

#main-navigation ul{
list-style: none;
float:right;
margin-bottom:0px;
}

#main-navigation li{
float:left;
}

#main-navigation a{
display:block;
padding:1rem;
text-decoration: none;
}

#main-navigation a:hover{
background-color: var(--light-gray);
color: var(--text-color);
}

#main-navigation button{
background: none;
border:none;
border-radius: 0px;
}

#main-navigation button:hover{
background-color: var(--light-gray);
}

#mobileGlobalNavBtn{
display:none;
float:right;
}

.icon-before svg{
position:relative;
top:4px;
margin-right:7px;
width:18px;
height:18px;
}

.icon-after svg{
position:relative;
top:4px;
margin-left:7px;
width:18px;
height:18px;
}

.icon-white{
fill:#ffffff;
}

.icon-black{
fill:var(--text-black);
}

img{}

img.img-responsive{
width:100%;
}

img caption{}

th{
padding:1rem;
}

table{}

tr{}

tbody tr:nth-child(even){
background-color: var(--light-gray);
}

tbody tr:hover{
background-color: var(--light-gray);
}

th{
text-align: left;
background-color: var(--light-gray);
font-weight:700;
}

td{
padding:1rem;
}

table figcaption{}

.band{
background-color: var(--light-gray);
overflow:hidden;
padding-top:2rem;
padding-bottom:2rem;
}

.row{
display:flex;
flex-direction: row;
flex-flow: row;
flex-wrap: wrap;
justify-content: flex-start;
margin:auto;
}

.row-narrow{
width:750px;
}

.row-wide{
width:1200px;
}

.col{
margin-left:1rem;
margin-right:1rem;
}

.col-100{
flex-basis: calc(100% - 2rem);
}

.col-25{
flex-basis: calc(25% - 2rem);
}

.col-33{
flex-basis: calc(33.3% - 2rem);
}

.col-50{
flex-basis: calc(50% - 2rem);
}

.col-75{
flex-basis: calc(75% - 2rem);
}

header{
width:100%;
background-color:#222222;
overflow: hidden;
text-align: center;
}

footer{
background-color:#ffffff;
padding-top:2rem;
padding-bottom:2rem;
}

footer p{
color:#ef422d;
font-size:0.85rem;
}

#logo{
width:250px;
height: auto;
margin: auto;
}

#hero-banner{
/*
background-image: url("../images/hero-image.jpg");
background-size: cover;
background-position: right center;
*/
}

#hero-image{
width:100%;
height:600px;
overflow:hidden;
}

#hero-image img{
width:100%;
height: 600px;
object-fit: cover;
}

#hero-content{
position:absolute;
bottom:25px;
width:33%;
margin-left:75px;
background-color: #ef422d;
padding:35px;
}

#hero-content h1{
color:#ffffff;
}

#hero-content p{
color:#ffffff;
}

#hero-content h1:after{
content: ' ';
display: block;
width: 50px;
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid #ffffff;
}

.nav-lvl-one{
display:none;
}

#main-navigation-drawer{
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
z-index: 99;
background-color:#d1d1d1;
padding:2rem;
}

@media (max-width:750px){
  #mobileGlobalNavBtn{
  display:block;
  }

  #header-navigation{
  display:none;
  }

  .row-narrow{
  width: calc(100% - 2rem);
  }

  .col-25, .col-75{
  flex-basis: calc(50% - 2rem);
  }

  #hero-image{
  height:350px;
  }

  #hero-image img{
  width:100%;
  height:350px;
  }

  #hero-content{
  position:relative;
  bottom:0px;
  margin-left:0px;
  padding:2rem;
  width:calc(100% - 4rem);
  }
}

@media (max-width:650px){
  .col-25, .col-33, .col-50, .col-75{
  flex-basis: calc(100% - 2rem);
  }

  .col{
  margin-bottom:2rem;
  }

}