Template:NCKU Tainan/overview

.timeline {

 display: flex;
 margin: 0 auto;
 flex-wrap: wrap;
 flex-direction: column;
 width: 80%;
 max-width: 1000px;
 position: relative;

}

.timeline__content-desc {

 margin: 15px;
 font-size: 17px;
 box-sizing: border-box;
 color: #333;
 font-family: 'Raleway', sans-serif;
 font-weight: normal;
 line-height: 22px;
 text-align: justify;

}

.timeline:before {

 position: absolute;
 left: 50%;
 width: 2px;
 height: 100%;
 margin-left: -1px;
 content: "";
 background: rgba(255, 255, 255, 0.07);

}

.timeline-item {

 padding: 40px 0;
 opacity: .3;
 filter: blur(2px);
 transition: .3s;
 box-sizing: border-box;
 width: calc(50% - 40px);
 display: flex;
 position: relative;
 transform: translateY(-80px);

}

.timeline-item:before {

 content: attr(data-text) '\a' attr(title);
 white-space: pre;
 letter-spacing: 3px;
 width: 100%;
 position: absolute;
 color: #f9cb8f;
 font-size: 24px;
 font-family: 'Montserrat', sans-serif;
 border-left: 2px solid #f9cb8f;
 top: 70%;
 margin-top: -5px;
 padding-left: 15px;
 opacity: 0;
 right: calc(-100% - 56px);

}

1. t7.timeline-item:before {

 content: attr(data-text) '\A' attr(title1) attr(title2);
 white-space: pre;

}

1. t9.timeline-item:before {

 content: attr(data-text) '\A' attr(title1) '\A' attr(title2);
 white-space: pre;

}

.timeline-item:nth-child(even) {

 align-self: flex-end;

}

.timeline-item:nth-child(even):before {

 right: auto;
 text-align: right;
 left: calc(-100% - 56px);
 padding-left: 0;
 border-left: none;
 border-right: 2px solid #f9cb8f;
 padding-right: 15px;

}

.timeline-item.active {

 opacity: 1;
 /*transform: translateY(0);*/
 filter: initial;

}

.timeline-item.active:before {

 top: 50%;
 transition: .1s all .1s;
 opacity: 1;

}

.timeline__img {

 max-width: 100%;
 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);

}

.timeline__img:hover {

 cursor: pointer;

}

.timeline-container {

 width: 100%;
 position: relative;
 padding: 80px 0;
 transition: .3s ease 0s;
 background-attachment: fixed;
 background-size: cover;

}

.timeline-container:before {

 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 content: "";

}

.timeline-header {

 width: 100%;
 text-align: center;
 margin-bottom: 120px;
 position: relative;

}

.timeline-header_title {

 color: #f9cb8f;
 font-size: 46px;
 font-family: 'Montserrat', sans-serif;
 font-weight: normal;
 margin: 0;

}

.timeline-header_subtitle {

 color: #3cbac8;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 letter-spacing: 5px;
 font-weight: normal;

}

@media only screen and (max-width: 768px) {

 .timeline__content {
   margin-top: 75px;
 }
 .timeline-item {
   padding: 40px 0;
   opacity: .3;
   filter: blur(2px);
   transition: .3s;
   box-sizing: border-box;
   width: 100%;
   display: flex;
   position: relative;
   transform: translateY(-80px);
 }
 .timeline-item:before {
   content: attr(data-text) '\a' attr(title);
   white-space: pre;
   letter-spacing: 3px;
   width: 100%;
   position: absolute;
   color: #3cbac8;
   font-size: 20px;
   font-family: 'Montserrat', sans-serif;
   border-left: 2px solid #f9cb8f;
   margin-top: 5%;
   right: 0;
   left: 10px;
   padding-left: 15px;
   opacity: 0;
 }
 #t7.timeline-item:before {
   content: attr(data-text) '\A' attr(title1) '\A' attr(title2);
   white-space: pre;
 }
 .timeline-item:nth-child(even) {
   align-self: flex-start;
 }
 .timeline-item:nth-child(even):before {
   content: attr(data-text) '\a' attr(title);
   white-space: pre;
   letter-spacing: 3px;
   width: 100%;
   position: absolute;
   color: #3cbac8;
   font-size: 20px;
   font-family: 'Montserrat', sans-serif;
   border-left: 2px solid #f9cb8f#;
   margin-top: 5%;
   right: 0;
   left: 10px;
   padding-left: 15px;
   opacity: 1;
   text-align: left;
 }
 .timeline-item.active:before {
   top: 0;
 }

}