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

*{
  box-sizing:border-box;
}

a{
  color:#ccc;
}
.container_test{
  width:300px;
  min-height:215px;
  margin:0 auto;
  position:relative;
  padding-bottom:5%;
  padding-top:5%;
  overflow:hidden;
}
div.h1_testimonial h1{
  text-align:right;
  color:#ffffff;
  font-size: 14px;
}
div.h2_testimonial h2{
  color:#ffffff; 
  margin:15px 0 5px;
  font-size: 12px;
  float:right;
}
div.h6_testimonial h6{
	color: #b3d13f;
	margin: 15px 0 5px;
	font-size: 12px;
	font-weight: bold;
}
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;
}
label{
  display:block;
  width:16%;
  border: 4px solid white;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

label.second{
  left:16%;
}
label.third{
  left:32%;
}
label.fourth{
  left:48%;
}
label.fifth{
  left:64%;
}

blockquote{
  margin:0;
  padding:21px;
  width:300px;
  background-color: #ededed;
  color:white;
  box-shadow: 2px 5px 2px rgba(0,0,0,0.5);
  position:relative;
  transition: background-color 0.6s linear;
  color: #ffffff;
  font-size: 12px;
  line-height: 14px;
  text-align: justify;
}

.one_test{
  margin:0;
  padding:21px;
  width:300px;
  background-color: #ededed;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
  color: #b8b8b8;
  font-size: 14px;
  line-height: 15px;
  
}

blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #b8b8b8;
  border-left-color:#b8b8b8;
  border-width: 10px; 
  left: 93%; 

} 
#second:checked ~ .two blockquote {
  background-color:#b3d13f;
}
.two blockquote:after{
content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #69743d;
  border-left-color:#69743d;
  border-width: 10px; 
  left: 93%; 
}
#third:checked ~ .three blockquote{
  background-color:#ededed;
}
.three blockquote:after{
  border: solid transparent; 
  border-top-color: #b8b8b8;
  border-left-color: #b8b8b8;
  border-width: 10px;
}
#fourth:checked ~ .four blockquote {
  background-color:#b3d13f;
}
.four blockquote:after{
content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #69743d;
  border-left-color:#69743d;
  border-width: 10px; 
  left: 93%; 
}
#fifth:checked ~ .five blockquote {
  background-color:#ededed;
}
.five blockquote:after{
content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #b8b8b8;
  border-left-color:#b8b8b8;
  border-width: 10px; 
  left: 93%; 
}

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

}
.slide{
  position:absolute;
  left:-100%;
  opacity:0;
  transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
  	border-color:#ededed;
}
#second:checked ~ label.second {
	border-color:#b3d13f;
}
#third:checked ~ label.third {
	border-color:#ededed;
}
#fourth:checked ~ label.fourth {
  	border-color:#b3d13f;
}
#fifth:checked ~ label.fourth {
	border-color:#ededed;
}

#first:checked ~ div.one {
  left:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}
#fourth:checked ~ div.four {
  left:0;
  opacity:1;
}
#fifth:checked ~ div.four {
  left:0;
  opacity:1;
}