@import url(https://fonts.googleapis.com/css?family=Lato);

/*$title-background: #3d9e67;
$background-color: #faf8eb;
$content-background-color: #91bdd0;
$content-background-gradient: #56BC83;
$time-color: #fff;
$text-color: #fff;
$content-width: 450px;*/

.timeline *,
.timeline *::before,
.timeline *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline{
  color: #fff;
  font-size: 16px;
  font-family: 'Muli', sans-serif;
  width: 100%;
 } 

.timeline  h1, .timeline ul li .content h2{
    /* text-shadow: 1px 1px 1px rgba(56, 56, 56, 0.5); */
  }


  
.timeline  h1{
    background: #3d9e67;
    padding: 70px 0;
    font-size: 2.5em;
    text-align: center;
  }
  
.timeline  ul{
    background: #faf8eb;
    padding: 50px 0; }
    
.timeline li {
      background: #91bdd0;
      position: relative;
      margin: 0 auto;
      width: 5px;
      padding-bottom: 40px;
      list-style-type: none; }
      
.timeline li:last-child{
        padding-bottom: 7px;
      }
      
.timeline li:before{
        content: '';
        background: #faf8eb;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 20px;
        height: 20px;
        border: 3px solid #91bdd0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
      
      
.timeline .content {
        background: #91bdd0; 
        position: relative;
        top: 7px;
        /* width: 450px; */
        width: 200px;
        padding: 15px; }
        
.timeline .content h2 {
          color: #fff;
          padding-bottom: 10px;
          text-align: center;
          font-size: 20px;
        }
        
.timeline .content p {
          text-align: center;
          font-size: 13px;
          line-height: 19px;
        }
        
.timeline .content:before {
          content: '';
          background: #91bdd0;
          position: absolute;
          top: 0px;
          width: 38px;
          height: 5px;
        }
     
      
.timeline ul li:nth-child(odd) .content {
        left: 50px;
        background: #91bdd0;
       /* background: -webkit-linear-gradient(-45deg, #56BC83 , #91bdd0);
        background: linear-gradient(-45deg,  #56BC83 , #91bdd0); */
      }
      
.timeline ul li:nth-child(odd) .content:before {
        left: -38px;
      }
      
.timeline ul li:nth-child(even) .content {

        left: -245px;
        background: #91bdd0;
        /*background: -webkit-linear-gradient(45deg, #56BC83 , #91bdd0);
        background: linear-gradient(45deg,  #56BC83 , #91bdd0);*/
      }
      
.timeline ul li:nth-child(even) .content:before {
        right: -38px;
      }
    }
  }
}

/* -------------------------
   ----- Media Queries ----- 
   ------------------------- */

@media screen and (max-width: 1020px) {
  .timeline ul li .content {
    width: 41vw;
  }
  .timeline ul li:nth-child(even) .content {
    left: calc(-41vw - 45px);
  }
}

@media screen and (max-width: 700px) {
  .timeline ul li {
    margin-left: 20px; }
    
  

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

  .timeline ul li .content h2{
        text-align: initial;
      }
  
    
    .timeline ul li:nth-child(even) .content {
      left: 45px;
      background: #91bdd0;
     /* background: -webkit-linear-gradient(-45deg, #56BC83 , #91bdd0);
      background: linear-gradient(-45deg,  #56BC83 , #91bdd0);*/
    }
    
    .timeline ul li:nth-child(even) .content:before {
      left: -33px;
    }
  }