.Pastspeakers {
  margin: auto;
  padding: 0;

  background-attachment: fixed;

  width: 100%;
  text-align: center;
  font-family: Agency, sans-serif;
}

.Pastspeakerscontainer {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  text-align: center;
}

.Pastspeakers h1 {
  font-family: LemonMilk, sans-serif;
  font-size: 28px;
}

.Pastspeakers ul {
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  justify-content: center;

  margin: 0 0 20px 0;
  padding: 0;
}

.Pastspeakers ul li {
  position: relative;
}

.PastSpeakerImg {
  margin: auto;
  overflow:hidden;
  width: 100%;
  min-height: 40px;
  max-width: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-clip: content-box;

  -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: gray;
}

.PastSpeakerImg::before {
  content:'';
  padding-top:120%; /* vertical value as  100% equals width */
  float:left;
}

.PastSpeakerImg::after {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.63);
}

.Pastspeakers ul li.PastspeakerItem {
  width: 40%;
  max-width: 200px;
  margin: 10px;
}

.Pastspeakerwrapper {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  display: block;
}

.Pastspeakerwrapper::after{
  position: relative;
}

ul.PastspeakerInfo {
  display: block;
  width: 100%;
  text-align: left;
  bottom: 0;
  margin: 0;
  position: absolute;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.1+1,0.44+78,0.44+99 */
  background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 1%, rgba(0,0,0,0.44) 78%, rgba(0,0,0,0.44) 99%, rgba(0,0,0,0.44) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 1%,rgba(0,0,0,0.44) 78%,rgba(0,0,0,0.44) 99%,rgba(0,0,0,0.44) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 1%,rgba(0,0,0,0.44) 78%,rgba(0,0,0,0.44) 99%,rgba(0,0,0,0.44) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#70000000',GradientType=0 ); /* IE6-9 */
}

ul.PastspeakerInfo li {
  margin: 0;
  padding: 5px;
}

.PastspeakerInfo a {
  text-decoration: none;
}

.PastspeakerInfo h3 {
  font-size: 16px;
  margin: 0;
}

.PastspeakerInfo h3:after{
  content: url("../images/external-link-icon.png");
  margin: 0 0 0 5px;
}

@media all and (max-width: 600px) {

}