@charset "utf-8";

/* CSS Document */

/* -------------------------------------

 * For horizontal version, set the

 * $vertical variable to false

 * ------------------------------------- */

/* -------------------------------------

 * General Style

 * ------------------------------------- */

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

.background_timeline {

  margin: 0;

  padding: 0 5%;

  font-size: 100%;

  font-family: "Noto Sans", sans-serif;

  color: rgb(242, 242, 242);

  background:rgb(242, 242, 242);

  overflow-x:auto;
  
  overflow-y:vissible;

}



h2 {

  margin: 3em 0 0 0;

  font-size: 1.5em;

  letter-spacing: 2px;

  text-transform: uppercase;

}



/* -------------------------------------

 * timeline

 * ------------------------------------- */

#timeline {

  list-style: none;

  margin: 46px 0 0;

  padding: 0;

  border-top: 6px solid #5f3b19;

  display: table;

  border-spacing: 30px 0;

}

#timeline li {

  display: table-cell;

}

#timeline li .relative {

  position: relative;

}

#timeline p {

  margin: 145px 0 15px;

  

 

  

}



.date {

  text-align: center;

  top: -55px;

  left: 0;

  right: 0;

  font-size: 0.95em;

  line-height: 20px;

  position: absolute;
  
  color:#5f3b19;

}



.circle {

  margin: 0 auto;

  top: -14px;

  left: 0;

  right: 0;

  width: 10px;

  height: 10px;

  background: #5f3b19;

  border: 5px solid #eee9dc;

  border-radius: 50%;

  display: block;

  position: absolute;

}



.content {

  width: 200px;

  max-height: 0;

  margin-top: 40px;

  vertical-align: top;

  padding: 50px 15px 15px;

  transition: width 0.4s linear, max-height 0.4s linear;

  border-width: 2px;

  border-style: solid;

  border-radius: 0.5em;

  position: relative;

  background-size:cover;

  background-position:center;

}

.content:before, .content:after {

  content: "";

  width: 0;

  height: 0;

  border: solid transparent;

  position: absolute;

  pointer-events: none;

  bottom: 100%;

}

.content:before {

  border-bottom-color: inherit;

  border-width: 15px;

  left: 50%;

  margin-left: -15px;

}

.content:after {

  border-bottom-color: #5f3b19;

  border-width: 12px;

  left: 50%;

  margin-left: -12px;

}

.content p {

  max-height: 0;

  color: white;

  text-align: justify;

  word-break: break-word;

  hyphens: auto;

  overflow: hidden;
  
  background-color:rgba(0,0,0,0.5);
  
  padding-left:5px;

}



label {

  font-size: 1.3em;

  position: absolute;

  z-index: 100;

  cursor: pointer;

  width: 200px;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  display: block;

  top: 60px;

  left: 15px;

}



.radio {

  display: none;

}



.radio:checked + .relative label {

  cursor: auto;

  width: 400px;

  transition: width 0.3s linear 0.2s;
  
  color:black;

}

.radio:checked + .relative .circle {

  background: black;

}

.radio:checked ~ .content {

  max-height: 180px;

  border-color: #eee9dc;

  width: 400px;

}

.radio:checked ~ .content p {

  max-height: 200px;

  color: eee9dc;

  transition: color 0.3s linear 0.3s;

}

@media (max-width:550px)  {

}



/* -------------------------------------

 * mobile phones (vertical version only)

 * ------------------------------------- */