#speakers {margin-top:30px !important;}
.speaker-container .more { margin-bottom:30px;   }
.speaker img { max-height:300px; max-width:300px; }

/* This first .speaker div is for 2 or more speakers, aligning left float (note: unhide SEE MORE SPEAKERS also in HTML above) USE FIRST OR SECOND BLOCK, NOT BOTH */

.speaker { 
  display: none;
  float: left;
  width: 32%;
  margin-right: 10px;
 text-align:center; 
  min-height:530px; 
}
*/

/* This second .speaker div is for only 1 speaker, centering the speaker. USE FIRST OR SECOND BLOCK, NOT BOTH */
/*
.speaker { 
  display: none;
  /*float: left; */
  width: auto;
  margin-right: auto;
 text-align:center; 
  min-height:530px; 
}

.more, .less {
  background-color: #efefef;
  clear: both;
  color: #636363;
  cursor: pointer;
  display: block;
  font-size: 18px;
  margin-top: 6px;
  padding: 10px 0;
  text-align: center;
	text-transform: uppercase;
  width: 100%;
}
.speaker_name{ text-align:center; font-weight:bold;  font-size:36px; margin-top:20px;  }
.speaker_title{ text-align:center; font-weight:normal;  font-size:18px; margin-bottom:0px; }
.speaker_logo img{ max-height:80px !important;  margin-bottom:30px; }
@media only screen and (min-width:824px) and (max-width:1024px){
  #speakers {margin-top:20px !important;}
  .speaker{ width:48%; }
  .speaker_name{ font-size:32px; }
 }

@media only screen and (max-width:823px){
  #speakers { margin-top:20px !important;}
  .speaker{    width: 48%;  }
  .speaker_name{ font-size:28px; }
  }
@media only screen and (max-width:479px){
  .speaker{ float:none; width:98%; min-height:unset; margin:0 auto; text-align:center;}  
  .speaker_name{ font-size:22px; }
  .speaker_title { font-size:16px; }
  .speaker_logo img{ max-height:70px !important;  }
}