@import “common”;

body {

@include flex(column);

min-height: 100vh;
margin: 0;
background: #fff;

}

a {

-webkit-tap-highlight-color: transparent;

}

.timeline {

@include flex(column);
-webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

margin: 0 auto;

.timeline-title {
  margin-bottom: 0;
  color: #666;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

ul {
  padding: 0 0 50px;
  margin: 0;

  p {
    color: #666;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
  }
}

time {
  color: #fff;
  font-weight: bold;
  padding-bottom: 5px;
}

a {
  text-decoration: none;
  color: #eee;
}

}

@media (min-width: 769px) {

.timeline {
  a:hover {
    color: #fff;
  }
}

}

.timeline ul li {

position: relative;

width: 2px;
margin: 0 auto;
padding-top: 50px;

list-style-type: none;

background: #bdbdbd;

}

.timeline ul li::after {

content: '';
position: absolute;
left: 50%;
bottom: 45px;
-webkit-transform: translateX(-50%);
        transform: translateX(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background: inherit;

}

.timeline ul li div {

@include flex(column);

position: relative;
bottom: 35px;
width: 250px;
padding: 15px;
border-radius: 4px;
background: #999;

}

.timeline ul li div::before {

content: '';
position: absolute;
bottom: 10px;
width: 0;
height: 0;
border-style: solid;

}

.timeline ul li:nth-child(odd) div {

left: 45px;

}

.timeline ul li:nth-child(odd) div::before {

left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #999 transparent transparent;

}

.timeline ul li:nth-child(even) div {

right: 320px;

}

.timeline ul li:nth-child(even) div::before {

right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #999;

}

/* timeline effects */ .timeline ul li::after {

-webkit-transition: background-color .5s ease-in-out;
        transition: background-color .5s ease-in-out;

}

.timeline ul li.in-view::after {

background: #bdbdbd;

}

.timeline ul li div {

visibility: hidden;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;

}

.timeline ul li:nth-child(odd) div {

-webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);

}

.timeline ul li:nth-child(even) div {

-webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);

}

.timeline ul li.in-view div {

-webkit-transform: none;
        transform: none;
visibility: visible;
opacity: 1;

}

@media (max-width: 1000px) {

header {
  margin: 0;
}

.timeline {
  padding: 0 20px;
  margin: 0;

  ul {
    padding: 0;
    margin-left: 100px;
  }
}

.timeline ul li {
  margin-left: 40px;
}

.timeline ul li:nth-child(even) div {
  left: 45px;
}
.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #999 transparent transparent;
}

/* timeline effects */
.timeline ul li::after {
  -webkit-transition: background-color .5s ease-in-out;
          transition: background-color .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #bdbdbd;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  -webkit-transform: translate3d(200px, 0, 0);
          transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  -webkit-transform: translate3d(200px, 0, 0);
          transform: translate3d(200px, 0, 0);
}

.timeline ul li.in-view div {
  -webkit-transform: none;
          transform: none;
  visibility: visible;
  opacity: 1;
}

}

@media (max-width: 415px) {

header {
  margin: 0;
}

.archive-title {
  a {
    font-size: 1.2em;
  }
}

.timeline {
  padding: 0 20px;
  margin: 0;

  ul {
    padding: 0;
    margin: 0;

    p {
      font-size: 1.2em;
      text-align: left;
    }
  }

  time, a {
    font-size: .8em;
  }
}

.timeline ul li {
  margin-left: 20px;
}

.timeline ul li div {
  width: 150px;
}

.timeline ul li:nth-child(even) div {
  left: 45px;
}

.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #999 transparent transparent;
}

/* timeline effects */
.timeline ul li::after {
  -webkit-transition: background-color .5s ease-in-out;
          transition: background-color .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #bdbdbd;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  -webkit-transform: translate3d(50px, 0, 0);
          transform: translate3d(50px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  -webkit-transform: translate3d(50px, 0, 0);
          transform: translate3d(50px, 0, 0);
}

.timeline ul li.in-view div {
  -webkit-transform: none;
          transform: none;
  visibility: visible;
  opacity: 1;
}

.copyright {
  p {
    font-size: .7em;
  }
}

}