/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
 @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
 .timeline {
  position: relative;
  overflow: hidden;
  
 }
 .timeline-bg {
  position: absolute;
    background-image: url(../picture/build.png);
    background-size: cover;
    background-position: 50% 50%;
    left: 0%;
    top: 0%;
    opacity: 0.1;
    z-index: 2;
    width: 100%;
    height: 100%;
 }
 .timeline body {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 5%;
   font-size: 100%;
   font-family: "Noto Sans", sans-serif;
   color: #48b379;
   background: #f7f7f7;
 }
 .timeline h2 {
   margin: 3em 0 0 0;
   font-size: 1.5em;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-top: 1em;
 }
 .timeline #timeline {
   list-style: none;
   margin: 50px 0 30px 120px;
   padding-left: 30px;
   border-left: 8px solid #48b379;
 }
 .timeline #timeline li {
   margin: 40px 0;
   position: relative;
 }
 .timeline #timeline p {
   margin: 0 0 15px;
 }
 .timeline .date {
   margin-top: -10px;
   top: 50%;
   left: -158px;
   font-size: 0.95em;
   line-height: 20px !important;
   position: absolute;
 }
 .timeline .circle {
   margin-top: -10px;
   top: 50%;
   left: -44px;
   width: 10px;
   height: 10px;
   background: #f7f7f7;
   border: 5px solid #48b379;
   border-radius: 50%;
   display: block;
   position: absolute;
   box-sizing: content-box;
 }
 .timeline .content {
   max-height: 20px;
   padding: 50px 20px 0;
   border-color: transparent;
   border-width: 2px;
   border-style: solid;
   border-radius: 0.5em;
   position: relative;
   letter-spacing: 0.1em;
   font-family: 'Courier New', Courier, monospace;
 }
 .timeline .content:before, .timeline .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: #f7f7f7;
   border-width: 17px;
   top: 50%;
   margin-top: -17px;
 }
 .timeline .content p {
   max-height: 0;
   color: transparent;
   text-align: justify;
   word-break: break-word;
   hyphens: auto;
   overflow: hidden;
   color: #666666 !important;
 }
 .timeline label {
   font-size: 1.3em;
   position: absolute;
   z-index: 100;
   cursor: pointer;
   top: 20px;
   transition: transform 0.2s linear;
   color: #48b379;
   font-size: large;
 }
 .timeline .radio {
   display: none;
 }
 .timeline .radio:checked + .relative label {
   cursor: auto;
   transform: translateX(42px);
 }
 .timeline .radio:checked + .relative .circle {
   background: #f98262;
 }
 .timeline .radio:checked ~ .content {
   max-height: 180px;
   border-color: #48b379;
   margin-right: 20px;
   transform: translateX(20px);
   transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
 }
 .timeline .radio:checked ~ .content p {
   max-height: 200px;
   color: #48b379;
   transition: color 0.3s linear 0.3s;
 }
 @media screen and (max-width: 767px) {
   .timeline #timeline {
     margin-left: 0;
     padding-left: 0;
     border-left: none;
   }
   .timeline #timeline li {
     margin: 50px 0;
   }
   .timeline label {
     width: 85%;
     font-size: 1.1em;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     display: block;
     transform: translateX(18px);
   }
   .timeline .content {
     padding-top: 45px;
     border-color: #48b379;
   }
   .timeline .content:before, .timeline .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: #f7f7f7;
     border-width: 20px;
     top: -20px;
     left: 50px;
     margin-left: -20px;
   }
   .timeline .content p {
     font-size: 0.9em;
     line-height: 1.4 !important;
   }
   .timeline .circle, .timeline .date {
     display: none;
   }
 }