
//
// Timeline
// --------------------------------------------------

$text-color: rgb(77, 77, 77);
$bg-entry: rgb(80,80,80);
.intense.timeline { 
	*,*:after,
	*:before{
		box-sizing: border-box;
	}
}

  .intense.timeline_element .title .label {
    background-color: transparent !important;
  }

  .intense.timeline {
    margin: 0px auto;
    max-width: 100%;
    overflow: hidden;
    height: auto;
    position: relative;
    padding: 10px 0px;
    list-style-type: none;
    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NMTEz8z8gABAAPKwIlXWq1kgAAAABJRU5ErkJggg==);
    background-repeat: repeat-y;
    background-position: 50% 0;
    
    .year {
      background: $bg-entry;
      font-size: 2em;
      max-width: 4em; 
      clear: both; 
      margin: 1em auto;
      color: white;
      border-radius: 30% / 100%;
      text-align: center;
      margin-top: 50px;
      line-height: 30px;
      padding-bottom: 5px;
      
      &:first-of-type {
        margin-top: 0 !important;
      }

      @media all and (max-width: 600px) {
        font-size: 1.5em;
      }   
    }
    

    .event {
      position: relative;
      float: right;
      clear: right;
      width: 45%;
      margin: 10px 2.5%;
      
      border-radius: 5px;
      list-style-type: none;
      display: block;
      padding: .4em;
      background: white;
      z-index: 15;
      
      color: $text-color;
      border: 1px solid lighten($bg-entry,30%);
      text-decoration: none;

      -webkit-transition: background .15s linear;
      -moz-transition: background .15s linear;
      -ms-transition: background .15s linear;
      -o-transition: background .15s linear;
      transition: background .15s linear;
      
      &.featured {
        width: 95% !important;
        background: lighten(#ccc,11%);
        
        &:after, &:before {
          display: none;
        }
      }
      
      @media all and (max-width: 600px) {
        width: 85%;
      }    
      
      &.offset-first {
       margin-top: -8px !important;
     }

     img {
      max-width: 100%;
    }

    &:hover {
      background: lighten($bg-entry,60%);

      &:after {
        background: $bg-entry;
      }
    }

    &:nth-child(2n) {
      float: left;
      clear: left;
      @media all and (min-width:600px) {
        margin-top:20px;
      }
    }

    &:after {      
      @media all and (min-width: 650px) {
        display: block;
        content: ' ';
        height: 9px; width: 9px;
        background: lighten($bg-entry,30%);
        border-radius: 50%;
        position:absolute;
        left: -5%;
        top: 1.5em;
        border: 2px solid white;
      }
    }

    &:nth-child(2n):after {
      right: -5%;
      left: auto;
    }

    & > article > .row {
      padding-top: 0 !important;
    }

    .title {
      text-align: left;
      & > h3 {
        margin-top: 0;
        padding-top: 0;
      }
    }

    &.event.rtl .title {
	text-align: right;
    }

    .date {
      text-align: right;
    }

    &.event.rtl .date {
      text-align: left;
    }

    .content {
      text-align: left;
    }
  }
}

.intense.timeline_center {
  @extend .timeline;

  .event {
    float: none;
    clear: none;
    width: 95%;

    &:after {      
      @media all and (min-width: 650px) {
        display: none;
      }
    }

    &:nth-child(2n) {
      float: none;
      clear: none;
      margin-top:20px;
    }
  }
}

.intense.timeline_left {
  @extend .timeline;
  background-position: 90% 0; 

  .year {
    margin: 1em 0 1em 83.5%;
  }

  .event {
    width: 82%;
    float: left;
    clear: left;

    &:nth-child(2n) {
      float: left;
      clear: left;
      margin-top:20px;
    }

    &:after {
      right: -5%;
      left: auto;
    }
  }
}

.intense.timeline_right {
  @extend .timeline;
  background-position: 10% 0;

  .year {
    margin: 1em 0 1em 5%;
  }

  .event {
    width: 82%;
    float: right;
    clear: right;

    &:nth-child(2n) {
      float: right;
      clear: right;
      margin-top:20px;
    }

    &:nth-child(2n):after {
      left: -5%;
      right: auto;
    }
  }
}
