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

#user_guide * {
  box-sizing: border-box;
}

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

#user_guide a {
  color: #ccc;
}

@media (max-width: 700px) {
  #user_guide .container {
    min-height: 430px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
  }
}

@media (min-width: 700px) {
  #user_guide .container {
    width: 500px;
    min-height: 430px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
  }
}

#user_guide h1 {
  text-align: center;
  text-shadow: 0 1px white;
  color: #DA532B;
  ;
}

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

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

#user_guide 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;
}

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

#user_guide label.second {
  left: 34%;
}

#user_guide label.third {
  left: 68%;
}

@media (max-width: 700px) {
  #user_guide blockquote {
    margin: 0;
    padding: 30px;
    background-color: #DB532B;
    color: white;
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.6s linear;
  }
}

@media (min-width: 700px) {
  #user_guide blockquote {
    margin: 0;
    padding: 30px;
    width: 500px;
    background-color: #DB532B;
    color: white;
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.6s linear;
  }
}



#user_guide 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;
}

.quotes {
  position: absolute;
  color: rgba(255, 255, 255, 0.5);
  font-size: 5em;
}

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

.rightq {
  bottom: -10px;
  right: 5px;
}

#user_guide img {
  float: left;
  margin-right: 20px;
}

#user_guide .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;
}

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

#second:checked~div.two {
  left: 0;
  opacity: 1;
}

#third:checked~div.three {
  left: 0;
  opacity: 1;
}