.main-flex {
    display:flex;
    
  }
 .agenda-wrapper {
    width: 106%;
    margin: auto;
    
}
.agenda-content {
  width:95%;
  height:auto;
 margin-top:10px;
  margin-left:10px;
  border-radius:16px;
  border:2px solid #f7f7f7;
 -webkit-box-shadow: 5px 5px 7px 2px rgba(0,0,0,0.2); 
box-shadow: 5px 5px 7px 2px rgba(0,0,0,0.2);
  background:#fff;
  margin-top:30px;
  
}
.left {
  width:80%;
  padding-bottom: 25px;
  
}
.main-left {
    width: 100%;
    margin-left: -2%;
    margin-right: 9px;
}
.left .category {
  font-size:13px;
  color:#303ab2;
  padding-top:25px;
  padding-left:25px;
  font-family: Avenir Next LT W01 Bold,sans-serif;
    
  
}
.left .agenda-title {
  font-size:22px;
  color:#000;
  padding-left:25px;
  font-family: Avenir Next LT W01 Bold,sans-serif;
}
.right {
  border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  width:20%;background:#f7f7f7;
  color:#303ab2;
  font-size:11px;
  font-weight:bold;
    text-align:right;
  padding-top:20px;
  padding-right:10px;
  

}
.right span {
 font-size:11px;
  font-weight:bold;
  color:#666666;
  text-align:right;
  text-transform: uppercase;

}
.image {
  width:48px;
  height:48px;
  
}
.people-container {
  padding-top:20px;
  padding-left:25px
}
.image_image {
  border-radius:8px;
}
.agenda-person {
padding-left:10px;
  font-family: Avenir Next LT W01 Bold,sans-serif;
}
.agenda-position { 
  font-size:12px;
font-family: AvenirNextLTW01-Regular,serif;
}
.learn-more {
 display:block;
  margin-top:50px;
  padding-bottom:30px
}
.agenda-flex {
    display: flex;
    
}
@media only screen and (max-width: 480px) {
.agenda-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
  .left {
  width:100%;
    padding-bottom: 25px;
  
}
  .right {
  border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  width:100%;background:#f7f7f7;
  color:#303ab2;
  font-size:11px;
  font-weight:bold;
    text-align:right;
  padding-top:20px;
  padding-right:10px;
  

}
  .main-left {
  width:100%
}
  .main-flex {
    display:flex;
    flex-wrap: wrap;
  }
  .learn-more {
    display: block;
    margin-top: 26px;
    padding-bottom: 25px;
}
  .people-container {
    padding-left: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
}
  
 .agenda-wrapper {
    width: 100%;
    
    margin-left: 10px;
}
}
@media screen and (min-width: 1024px) {
  .right {
  border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  width:25%;background:#f7f7f7;
  color:#303ab2;
  font-size:11px;
  font-weight:bold;
    text-align:right;
  padding-top:20px;
  padding-right:10px;
}
  .left {
  width:75%;
    padding-bottom: 25px;
  
}
}
@media screen and (min-width: 480px) and (max-width: 770px) {
.agenda-wrapper {
   margin: auto;
    width: 100%;
    margin-left: 20px;
}

.main-flex {
    display: flex;
    flex-direction: column;
}
}
.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}

.popup-inner {
  max-width: 700px;
  width: 90%;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  border-radius: 3px;
  background: #fff;
}

.popup-close {
  width: 30px;
  height: 30px;
  padding-top: 4px;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  
  transition: ease 0.25s all;
  -webkit transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0,0,0,0.8);
  
  font-family: Arial, sans-serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #fff;
}

.popup-close:hover {
  background: rgba(0,0,0,1);
  text-decoration: none;
  color: #fff;
}