html {
  	font-size: 100%;
    box-sizing: border-box;
  }
  html * {
    box-sizing: inherit;
  }
  body {
    font-family: Monserrat,  sans-serif;
    font-weight:  200;
    font-size:  1.2rem;
    line-height:  1.8rem;
    color: #444;
    margin: 0;
    background-color:  #444;
  }
  #container {
     max-width: 1200px;
    margin: 0 auto;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding:  0;
  }
  li {
    margin:  0;
    padding: 0;
  }
  img {
    width: 100%;
    height:  auto;
  }
  i {
    font-style: italic;
  }
  strong {
	  font-weight: bold;
  }
  h2 {
  color: #ce2d88;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-top: 1.5em;
  margin-bottom: 0;
  text-align: center;
}
h2 + p {
  margin-top:  .5rem;
}


header, footer {
  background-color:  #000;
  padding:  1rem 0;
}
header {
  background-color:  #000;
  background: #000 url(images/dots_only.png) no-repeat center;
  background-size: 75%;

}
header p {
  margin: 0;
  padding: 0;
  text-align: center;
}
header img {
  max-width: 480px;
}


/* INTRO SECTION */

#intro {
  margin:  0;
  padding: 1.5rem 1.25rem;
  background:  #444;
  color:  #ccc;
  letter-spacing: .05em;
 
}
#intro p {
  margin-top: 1rem;
}
#intro b {
  font-weight:  400;
  color:  #fff;
  font-size:  1.4rem;
  line-height: 2.0rem;
}
#intro a:link { color: lightskyblue; font-weight: bolder; }
#intro a:visited { color: plum; font-weight: bolder; }
#intro a:focus, #intro a:hover { color: white; font-weight: bolder; }
#intro a:active { color: plum; font-weight: bolder; }

/* OBITUARIES */

#inmemory {
  background-color: rgba(206,45,136,1);
  margin: 0;
  padding:  1.25rem 1.25rem 1.25rem;
}
.obit {
  background-color:  #fff;
  background-color: rgba(255,255,255,.75);
  color:  #444;
  font-size:  1rem;
  font-weight:  400;
  line-height:  1.5rem;
  border: 2px #ce2d88 solid;
  padding: 1rem;
  margin: 0 0 1rem 0;
}
.obit:after {
  content:  " ";
  display: block;
  clear: both;
}
.obit img {
  width: 150px;
  height:  150px;
  float: left;
  margin: 0 1rem;
}
.obit h2 {
  margin-top: 1.5rem;
  line-height:  1.4;
  text-align:  left;
}
.obit p {
  margin-bottom:  0;
}

/* PROGRAM SECTION */
#program {
  margin: 0;
  background-color: #fff;
}

#program .event-header {
  text-align: center;
  margin:  0;
  width:  100%;
  padding: 1.5rem 1rem 1rem 1rem;
  background-color:  #000;

  /* background: linear-gradient(180deg, rgba(206,45,136,1) 0%, rgba(255,255,255,1) 95%); */
}
#program .event-header h1 {
  font-weight:  bold;
  font-size:  2.25rem;
  color: #fff;
  /* margin: .75rem 1.25rem; */
}
#program .event-header .dates {
  /* font-weight:  bold; */
  color:  #ccc;
  font-size:  1rem;
  line-height:  1.25;
  margin-top:  1rem;
}
#yr2019, #yr2014, #yr2013 {
  border-top: 6px solid #cd2d88;
} 

/* PROGRAM LISTINGS */
#program .event-content {
  padding: 1.25rem;
}

#program li {
  display: flex;
  margin-top:  .75rem;
  line-height:  1.5rem;
  flex-wrap:  wrap;
}
#program .speaker {
  /* background-color: lightpink; */
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-right:  1rem;
  width: 100%;
  color: #555;

}
#program .title {
  /* background-color: yellow; */
}

/* PHOTO GALLERY */


#gallery ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

#gallery li {
  margin: 0;
  flex: 1 1 auto;
    align-items: flex-start;
}
#gallery img {
  width: 100%;
  height: intrinsic;
}

/* QUOTES */

#quotes {
  width: 100%;
  background-color: #cd2d88;
  color:  #fff;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
}
#quotes li {
  font-size: 1rem;
  line-height: 1.4rem;
  margin-top: 1.5rem;
  width: 100%;
}
#quotes li .source {
  color:rgba(255,255,255,.7);
  font-weight: bold;
}

/* FOOTER */
footer {
  text-align: center;
  color: #666;
  font-size: 1rem;
}


 

/* 480px--increase #intro padding */

@media screen and (min-width: 480px) {
  #intro { 
  padding: 2rem 2rem;

  }
}

/* 600px--increase L/R space on whole page */

@media screen and (min-width: 600px) {
  #intro, #quotes { 
    padding: 1.5rem 3rem;
  }
  #inmemory {
    padding: 1.25rem 3rem 2rem;
  }
  #program .event-content {
    padding: 1.25rem 3rem;
   }
   #program li {
    margin-top: 1.25rem;
   }
    #gallery li {
    margin: 0;
    flex: 1 1 50%;
  }
  #gallery li img {
    width: 100%;
    height:  auto;
  }
} 

/* 720px--increase space around Christopher's section */

@media screen and (min-width: 720px) {
#intro {
  background: url(images/austin_stage_1200.jpg) no-repeat center top;
  color: #ccc;
  letter-spacing: 0;
 }
 .darkened {
   background-color: rgba(0,0,0,.6);
   margin: -1.5rem -3rem;
   padding: 1rem 3rem;
 }
} 

/* 800px--increase L/R spacing to 6rem */

@media screen and (min-width: 800px) {
  #intro, #quotes, #inmemory { 
    padding: 1.25rem 6rem 2rem;
  }
  #program .event-content {
    padding:  1.25rem 6rem;
  }
 .darkened {
    margin: -1.25rem -6rem;
   padding: 1rem 6rem;
 }

} 

/* 960px--introduce image to #intro; 2-column Program list */

@media screen and (min-width: 960px) {
  #intro { 
    height:  685px;
    background: url(images/austin_stage_1200.jpg) no-repeat center top;
    padding:  0 0 1rem 50%;
  }
  .darkened {
    background-color: rgba(0,0,0,.6);
    margin: 0;
    height: 685px;
    padding:  1.5rem 3rem 1.5rem 1.5rem;
  }

  #program li {
   flex-wrap:  no-wrap;
   align-items: baseline;
}
  #program .speaker {
 /* background-color: lightpink; */
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-right:  1rem;
  width: 220px;
  color: #555;

}
#program .title {
  width: 700px;
}
.event-content h2 {
  margin-top:  2.5rem;
  margin-bottom: 1rem;
}
 #gallery li {
  margin: 0;
  flex: 1 1 33.33333333%;
  }

} 

/* 1200px--adjust #intro spacing */
@media screen and (min-width: 1200px) {
  #intro { 
    padding:  0rem 0rem 0rem 50%;
  }
  .darkened {
    padding: 2rem 6rem 2rem 2rem;
  }