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

/*{
  box-sizing:border-box;
} */

/* html, body{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  background-color:#ddd;
  background-size:cover;
} */

.testiTEXT{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  font-size: 16px;
  padding-left: 16px;
  text-indent: -1px;
}

a{
  color:#ccc;
}

.container{
  width:600px;
  min-height:260px;
  margin:0 auto;
  position:relative;
  padding-bottom:10px;
  overflow:hidden;
/*  border: 1px dotted black; */
}

h5{
  text-align:center;
  text-shadow:0 1px white;
  color:#02303F;
}

h2{
  color:#736861; 
  margin:15px 0 5px;
  text-shadow:0 1px rgba(255,255,255,0.5);
}

h6{
  color:#928566; 
  margin:0;
}

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:14%;
  border: 4px solid #dcdcdc;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

label.second{
  left:17%;
}

label.third{
  left:34%;
}

label.fourth{
  left:51%;
}

label.fifth{
  left:68%;
}

label.sixth{
  left:85%;
}


blockquote{
  margin:0;
  padding:20px;
  width:560px;
  background-color: #DB532B;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
}

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

#second:checked ~ .two blockquote {
  background-color:purple;
}

.two blockquote:after{
  border: solid transparent; 
  border-top-color: purple;
  border-left-color:purple;
  border-width: 10px;
}

#third:checked ~ .three blockquote{
  background-color:#54885F;
}

.three blockquote:after{
  border: solid transparent; 
  border-top-color: #54885F;
  border-left-color: #54885F;
  border-width: 10px;
}

#fourth:checked ~ .four blockquote{
  background-color:#CD3700;
}

.four blockquote:after{
  border: solid transparent; 
  border-top-color: #CD3700;
  border-left-color: #;
  border-width: 10px;
}

#fifth:checked ~ .five blockquote{
  background-color:#00688B;
}

.five blockquote:after{
  border: solid transparent; 
  border-top-color: #00688B;
  border-left-color: #00688B;
  border-width: 10px;
}

#sixth:checked ~ .six blockquote{
  background-color:#308014;
}

.six blockquote:after{
  border: solid transparent; 
  border-top-color: #308014;
  border-left-color: #308014;
  border-width: 10px;
}



.quotes{
  font: normal 6em "Open Sans";
  position:absolute;
  color:rgba(255,255,255,0.5);
/*  font-size:6em; */
}

.leftq{
  top:-8px;
  left:5px;
}

.rightq{
  bottom:6px;
  right:5px;
}

/*  */.spaceTESTI{
  float:left;
  margin-right: 20px;
}

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

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

#second:checked ~ label.second {
  border-width:6px; border-color:purple;
}

#third:checked ~ label.third {
  border:6px solid #54885F;
}

#fourth:checked ~ label.fourth {
  border:6px solid #CD3700;
}

#fifth:checked ~ label.fifth {
  border:6px solid #00688B;
}

#sixth:checked ~ label.sixth {
  border:6px solid #308014;
}



#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.five {
  left:0;
  opacity:1;
}
#sixth:checked ~ div.six {
  left:0;
  opacity:1;
}