html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
    font-size:24px;
    font-family: 'Dosis', sans-serif;
}
body {
    background-image:url('hero-md.jpg');
    background-size:cover;
    font-family: 'Dosis', sans-serif;
}
.main {
    height:100%;
    width:100%;
}

.logo-row {
  text-align:center;
}

.logo {
  width:300px;
}


/* Content Box */
.content-box {
  background-color: rgba(230,227,215, .8);
  padding:.5em;
}

.content-box-content {
  margin-top:4px;
  margin-bottom:8px;  
  min-height:200px;
}

.list-group-item:nth-child(odd) {
  background-color: #efefef;
}

.event-date {
  width:30%;
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
.event-text {
  width:60%;
  display: inline-block;
}
.email-form input,
.email-form textarea {
  opacity: 1;
}
.email-submit {
  font-weight: bold;
  font-size: 90%;
}
.bio {
  font-size:80%;
}

/* Nav (inside content box) */

.sitenav a,
.social a {
  color: #000;
}

.sitenav-container {
  padding-top: 1em;
}


/* Override bootstrap styles */
.nav-pills li.active a {
  background-color: white;
  color: #000;
  font-weight: bold;
}

.nav-pills li.active a:hover {
  background-color: #e6d9cf;
  color: #000;
}





/* Large desktops and laptops */
@media (min-width: 1200px) {
  body {
    background-image:url('hero-lg.jpg');
  }
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    background-image:url('hero-lg.jpg');
    
  }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    background-image:url('hero-sm.jpg');
    font-size:1.2em;
  }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  body {
    background-image:url('hero-sm.jpg');
    font-size:1.2em;
  }
}
@media (min-height: 400px) and (max-height: 760px) {
  .logo {
     width:250px;
   }
}
@media (min-height: 761px) and (max-height: 900px) {
  .logo {
     width:300px;
   }
}
@media (min-height: 901px) {
  .logo {
     width:400px;
   }
}