* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.band {
  background: white;
}

.band.navigation {
  background: rgb(26, 0, 51);
}

.band.footer {
  background:rgb(31, 31, 46);
  color: rgb(224, 224, 255);
  padding: 15px 0;
}

.footer .row.pageinfo p {
  font-size: 1.3rem;
  line-height:1.3;
  margin: 0 0 5px;
  text-align: center;
}

.footer .row.tpiinfo p {
  font-size:1.7rem;
  line-height:1.6;
}

.header.main {
  padding: 35px 0;
}

.header h1.logo {
  margin: 7px 0 0 0 ;
  float: left;
}

.header h1.logo a {
  width: 250px;
  height: 49px;
  background: white;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.announcement {
  border-radius: 25px;
  background: rgba(72, 34, 47, 0.1);
  border: 4px solid #48222F;
  padding: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}

.announcement h1 {
  color: #48222F;
  font-family:'Open Sans Condensed', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  margin: 0 0 24px;
  padding: 0 30px;
  text-align: center;
  text-transform: uppercase;  
}

figcaption {
  font-size:1.3rem;
}

/* Links (except nav)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color:inherit;
  text-decoration:none;
  transition: all 0.2s ease-in-out; 
  box-shadow: inset 0 -5px 0 rgba(51, 51, 77, 0.5); 
}

a:hover {
  xcolor:#0f5b70;
  color:#000;
  box-shadow: inset 0 -65px 0 rgba(51, 51, 77, 0.2); 
}

.highlights a {
  color: rgb(224, 224, 255);
  transition: all 0.2s ease-in-out; 
  box-shadow: inset 0 -5px 0 rgba(221, 204, 255, 0.6);
}

.highlights a:hover {
  box-shadow: inset 0 -65px 0 rgba(153, 102, 255, 0.4);  
}

.footer a {
  color: rgb(224, 224, 255);
  transition: all 0.2s ease-in-out; 
  box-shadow: inset 0 -3px 0 rgba(224, 224, 255, 0.4);
}

.footer a:hover {
  color: #0FA0CE; }
  
figure a {
  box-shadow: none;
  
}

/* Navigation elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.band.navigation {
  z-index: 1000;
  position:-webkit-sticky;
  position:sticky;
  top:0px;
}

nav.primary ul,
nav.primary ul li {
  margin: 0;
}

nav.primary select {
  display: none;
  width: 100%;
  height: 28px;
  margin: 21px 0;
  padding: 0;
}

nav.primary ul li {
  display: inline;
  float: left;
  position: relative;
}

nav.primary ul li span {
  display: none;
}

nav.primary ul li a {
  display: inline-block;
  line-height:49px;
  padding: 0 14px;
  color: rgb(224, 224, 255);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-decoration: none;
  box-shadow:none;
}

nav.primary ul li:hover > a {
  background:#2c333a;
}

/* this should highlight the menu for the page */
#home .home, #about .about, #committees .committees, #projects .projects, #resources .resources, #support .support, #contact .contact {
  background: #374048;
}

nav.primary ul li a:hover {
  background:#2c333a;
  cursor: pointer;
}

nav.primary ul ul {
  opacity: 0;
  filter:alpha(opacity=0);
  position: absolute;
  z-index: 999;
  background: #374048;
  height: 0px;
  overflow: hidden;
  min-width: 100%;
  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  -ms-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
  -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}

nav.primary ul li:hover ul {
  opacity: 10;
  filter:alpha(opacity=100);
  height: auto;
  overflow: auto;
}

nav.primary ul ul li {
  float: none;
  display: block;
  border-bottom: 1px solid rgb(10, 10, 15);
  list-style-type: none;
}

nav.primary ul ul li a { 
  display: block;
  line-height: 35px;
  text-transform: none;
  white-space: nowrap;
}

@media (max-width: 975px) {
  nav.primary select {display: block;}
  nav.primary ul {display: none;}
}


.band.highlights {
  background-color: #260d1a;
  color:white;
}

table tbody tr td.subhead {
  padding-left:10px;
  font-weight:700;
}

table tbody tr td {
  vertical-align: top;
}

/* Article styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 550px) {
}

article.blurb {
  margin-bottom: 1.5rem;
  padding: 0 1rem;
  border:1px solid rgb(10, 10, 15);
}

article.blurb header {
  height:150px;
}

article.blurb header img {
  max-width:100%; 
  max-height:150px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:1rem;
}  

article.blurb .teaser {
  line-height:2.2rem;
}

/* needed for MailerLite imbedded signmp form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.label-description::before {
  left: -2.5rem !important;
}

.ml-form-embedPermissionsContent > p > strong {
  display: block;
  font-size: 1.5rem !important;
  line-height: 1.9rem !important;
}

/* making multi-column lists
------------------------------------------------ */
.multi-column-list {
  column-count: 2;
  list-style: none; /* Removes default bullets/numbers */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
}  
.multi-column-list li {
  padding: 0 1rem;
  margin: 0;
}

/* for responsive iframe and images
------------------------------------------------ */
.responsive-image {
  width: 100%;
  max-width: 1200px;
}

.wrapper-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.wrapper-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}