:root {
  --red: #BF2419;
  --gray-lightest: #F2F2F2;
  --gray-light: #E5E5E5;
  --gray-medium: #636363;
  --gray-dark: #363636;
  --blue-light: #7BD0FF;
  --font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  --mobile-padding:20px;
  --tablet-padding:30px;
  --desktop-padding:95px;
}
.no-whitespace-top {
  margin-top:0;
  padding-top:0;
}
body {
    margin:0;
    background-color: #FFF;
    font-family:var(--font-family);
}
a.skip {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
a.skip:focus {
  position:static;
  width:auto;
  height:auto;
}
section {
  border-top:1px solid var(--gray-light);
  margin-top:var(--mobile-padding);
}
h2 {
  text-transform: uppercase;
  text-align: center;
  font-size:30px;
  letter-spacing: 7px;
  color: var(--red);
  font-weight: normal;
  margin:0;
  padding-top:40px;
  padding-bottom:20px;

}
img {
  width:100%;
  max-width: 700px;
}
.sticky {
  text-align: center;
  position:sticky;
  top:0;
  width:100%;
  z-index:1000;
}
.header {
  background-color:#000;
  background-image:url('../../images/header-background-small.png');
  border-bottom:4px solid var(--red);
  max-height: 53px;
}
.logo {
    padding-top:5px;
}
#etn-logo {
    width:150px;
    margin-bottom:-8px;
}
.hero {
  background-color:#000;
  padding:20px;
  color:#FFF;
  line-height: 1.8em;
}
.hero h1 {
  font-size:30px;
  margin: calc( var(--mobile-padding) / 2) 0;
  text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}
.hero p {
  margin:0;
  text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}
.body-container {
    padding: var(--mobile-padding);
}

/* Main menu */
.menu-icon {
  position:absolute;
  top:10px;
  left:20px;
}
.topnav {
    overflow: hidden;
    background-color: #FFF;
  }
  
  .topnav a { /* menu items */
    float: left;
    display: block;
    color: var(--red);
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 15px;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing: 1;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    font-weight:bold;
  }
  
  .topnav .icon, .topnav a, .topnav div {
    display: none;
  }

  a.icon {
      float: left;
      display: block;
      color: #FFF;
      font-size: 24px;
      padding: var(--padding-small);
      position: absolute;
      top: var(--padding-xsmall);
      left: var(--padding-small);
  }

  .topnav.responsive a,
  .topnav.responsive div {
      float: none;
      display: block;
      text-align: left;
  }


  /* Content */
  .row {
    margin-top:var(--mobile-padding);
  }
  p, ul {
    margin: 20px 0;
    line-height:1.8em;
  }
  ul {
    list-style: square;
    list-style-image: url('../../images/bullet.gif');
  }
  p > p {
    margin-top:0;
  }
  #intro {
    margin: calc(-1 * var(--mobile-padding));
    margin-bottom:0;
    padding: var(--mobile-padding);
    background-color:var(--gray-lightest);
    border-bottom:1px solid var(--gray-light);
  }
  #intro > p:first-child {
    font-weight: bold;
  }
  .responsive-iframe {
    width: 100%;
  }
  .contain-169 {
    aspect-ratio: 16 / 9;
  }
  @supports not (aspect-ratio: 16 / 9) {
    .contain-169::before {
        float: left;
        padding-top: 56.25%;
        content: '';
    }

    .contain-169::after {
        display: block;
        content: '';
        clear: both;
    }
}


/* Footer */
.footer {
  border-top: 3px solid #a5a5a5;
  padding: 2em 0;
  background-color:var(--gray-dark);
  color:#FFF;
  margin-left:0 !important;
  margin-right:0 !important;
}
.footer a {
  color:#f5c2be;
  text-decoration:none;
}
.footer a:hover {
  text-decoration:underline;
}
#footer-logo {
  text-align: center;
}
#footer-logo img {
  max-width: 400px;
  margin-top: 30px;
}
#connect-header {
  text-transform: uppercase;
  font-weight:bold;
  border-bottom: 1px solid #d1d1d1;
  font-size:.9em;
  line-height:1.8em;
}
ul.connect-list {
  margin:0;
  padding:0;
  margin-top:5px;
  list-style: none;
  font-size:.9em;
  line-height:1.8em;
} 


/* U of C */
.row.footer-uoc {
  display:flex;
  flex-direction: row;
  align-items:center;
  margin:0;
  padding:20px 8px 30px 8px;
  background-color: var(--gray-lightest);
  text-align: center;
}
.row.footer-uoc > div {
  width:100%;
  padding-bottom:20px;
}
.uoc-logo > a > svg, .doe-logo > a > img {
  height:36px;
  width: auto;
}
.footer-uoc > div > ul {
  margin:0;
  padding:0;
  text-align: center;
}
.uoc-menu > ul > li {
  display:block;
  list-style: none;
  line-height: 1.5em;
  font-size:.9em
}
.uoc-menu > ul > li > a {
  color: #666;
  font-size:.9em;
  margin-right: 25px;
  text-decoration: none;
}
.uoc-menu > ul > li > a:hover {
  text-decoration: underline;
}