/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
.cuerpo {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 5%;
 font-size: 100%;
 font-family: "Noto Sans", sans-serif;
 color: #5a66a6;
 }
 
#timeline h2 {
 margin: 3em 0 0 0;
 font-size: 1.5em;
 letter-spacing: 2px;
 text-transform: uppercase;
}
 
/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
 list-style: none;
 margin: 50px 0 30px 120px;
 padding-left: 30px;
 border-left: 8px solid #5a66a6;
}
#timeline li {
 margin: 40px 0;
 position: relative;
}
#timeline p {
 margin: 0 0 15px;
}
 
#timeline .date {
 margin-top: -10px;
 top: 50%;
 left: -158px;
 font-size: 0.95em;
 line-height: 20px;
 position: absolute;
}
 
#timeline .circle {
 margin-top: -10px;
 top: 50%;
 left: -44px;
 width: 10px;
 height: 10px;
 background: #4c568c;
 border: 5px solid #5a66a6;
 border-radius: 50%;
 display: block;
 position: absolute;
}
 
#timeline .content {
 max-height: 20px;
 padding: 50px 20px 0;
 border-color: transparent;
 border-width: 2px;
 border-style: solid;
 border-radius: 0.5em;
 position: relative;
}
#timeline .content:before, .content:after {
 content: "";
 width: 0;
 height: 0;
 border: solid transparent;
 position: absolute;
 pointer-events: none;
 right: 100%;
}
#timeline .content:before {
 border-right-color: inherit;
 border-width: 20px;
 top: 50%;
 margin-top: -20px;
}
#timeline .content:after {
 border-right-color: #4c568c;
 border-width: 17px;
 top: 50%;
 margin-top: -17px;
 margin-right: 0.2em;
}
#timeline .content p {
 max-height: 0;
 color: transparent;
 text-align: justify;
 word-break: break-word;
 hyphens: auto;
 overflow: hidden;
}
 
#timeline label {
 font-size: 1.3em;
  position: absolute;
 z-index: 100;
 cursor: pointer;
 top: 20px;
 transition: -webkit-transform 0.2s linear;
}
 
#timeline .radio {
 display: none;
}
 
#timeline .radio:checked + .relative label {
 cursor: auto;
 -webkit-transform: translateX(42px);
}
#timeline .radio:checked + .relative .circle {
 background: #6B8E23;
}
#timeline .radio:checked ~ .content {
 max-height: 180px;
 border-color: #4c568c;
 margin-right: 20px;
 -webkit-transform: translateX(20px);
 transition: max-height 0.4s linear, border-color 0.5s linear, -webkit-transform 0.2s linear;
}
#timeline .radio:checked ~ .content p {
 max-height: 200px;
 color: #4c568c;
 transition: color 0.3s linear 0.3s;
}
 
/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
 #timeline {
 margin-left: 0;
 padding-left: 0;
 border-left: none;
 }
 #timeline li {
 margin: 50px 0;
 }
 
 #timeline label {
 width: 85%;
 font-size: 1.1em;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
 -webkit-transform: translateX(18px);
 }
 
 #timeline .content {
 padding-top: 45px;
 border-color: #4c568c;
 }
 #timeline .content:before, .content:after {
 border: solid transparent;
 bottom: 100%;
 }
 #timeline .content:before {
 border-bottom-color: inherit;
 border-width: 17px;
 top: -16px;
 left: 50px;
 margin-left: -17px;
 }
 #timeline .content:after {
 border-bottom-color: #4c568c;
 border-width: 20px;
 top: -20px;
 left: 50px;
 margin-left: -20px;
 }
 #timeline .content p {
 font-size: 0.9em;
 line-height: 1.4;
 }
 
 #timeline .circle, .date {
 display: none;
 }
}