@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.containerbiodic a{
  color:#ccc;
}
.containerbiodic{
  box-sizing:border-box;
  font: normal 1em/1.5 "Open Sans";
  width: 95%;
  min-height:155px;
  margin:10px auto;
  position:relative;
  padding-bottom:30px;
  overflow:hidden;
}
.containerbiodic h1{
  text-align:center;
  text-shadow:0 1px white;
  color:#02303F;
}
.containerbiodic h2{
  color:#736861; 
  margin:15px 0 5px;
  text-shadow:0 1px rgba(255,255,255,0.5);
}
.containerbiodic h6{
  color:#928566; 
  margin:0;
}
.containerbiodic input[type="radio"] {
  position: absolute;
  width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
  height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.containerbiodic label{
  display:block;
  width:25%;
  border: 4px solid white;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
  border:6px solid #54885F;
}

.containerbiodic blockquote{
  margin:0;
  padding:30px;
  width:100%;
  background-color: #54885F;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
  
}

.containerbiodic blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #54885F;
  border-left-color: #54885F;
  border-width: 10px;
  left: 3%; 
} 

.containerbiodic .quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.containerbiodic .leftq{
  top:-25px;
  left:5px;
}
.containerbiodic .rightq{
  bottom:-10px;
  right:5px;
}
.containerbiodic img{
  float:left;
  margin-right: 20px;
}

.containerbiodic #first:checked ~ label.first {
  border-width:6px;
  border-color:#DB532B;
}

.containerbiodic #first:checked ~ div.one {
  left:0;
  opacity:1;
}