/* Import */

@import url('https://fonts.googleapis.com/css?family=Chivo:300,300i,400,400i,700,700i,900,900i|Saira+Extra+Condensed:100,200,300,400,500,600,700,800|Saira:100,200,300,400,500,600,700,800');

/* Variables */


/* Base */

body {
  background: #252827;
  font-size: 16px;
 
}

p {
  font-weight: 300;
}

strong {
  font-weight: 600;
}

h1 {
 font-family: 'Saira', sans-serif;
 letter-spacing: 1.5px;
 color: white;  
 font-weight: 400;
 font-size: 2.4em;
 margin:0;
 padding:0;
}

h2 {
 font-family: 'Saira', sans-serif;
 letter-spacing: 1.5px;
 color: white;  
 font-weight: 400;
 font-size: 1.8em;
 margin:0;
 padding:0;
}

a{color:#78b1e2;}

#content {
  margin-top: 16px;
  text-align: center;  
}

.topButtonContainer{text-align:right; margin:0 auto; }

.topbutton {
    border: none;
    padding: 12px 16px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 12px 2px;
    cursor: pointer;
 background-color: #444; color: white;} /* Gray */ 
 

/* Timeline */

.timeline {
  border-left: 4px solid #efefef;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;    
  background: #2c2c2d;
  color: #fff;
  font-family: 'Chivo', sans-serif;  
  margin: 50px auto;  
  /*letter-spacing: 0.5px;   */
  position: relative;
  /*line-height: 1.4em;*/
  font-size: 1.03em;   
  padding: 50px;  
padding-top:10px;  
  list-style: none;
  text-align: left;  
  font-weight: 100;  
  max-width: 50%; 
}

 
  h2, h3 {
   font-family: 'Saira', sans-serif;
   letter-spacing: 1.5px;
   font-weight: 400;
   font-size: 1.4em;
  }
  
.mktevent, 
.infoevent,
.devevent, 
.coreevent, 
.adminevent, 
.libevent {
    border-bottom: 1px dashed #a2a2a5;
    padding-bottom: 25px;
    margin-bottom: 25px;  
    position: relative;
  }
.mktevent:last-of-type, 
.infoevent:last-of-type,
.devevent:last-of-type,
.coreevent:last-of-type, 
.adminevent:last-of-type, 
.libevent:last-of-type  { 
      padding-bottom: 0;
      margin-bottom: 0; 
      border: none;      
    }

.infoevent:before, 
.infoevent:after, 
.mktevent:before, 
.mktevent:after, 
.devevent:before, 
.devevent:after,
.coreevent:before, 
.coreevent:after, 
.adminevent:before, 
.adminevent:after, 
.libevent:before,
.libevent:after{
      position: absolute;
      display: block;
      top: 0;

    }

	/*timeline titles */
 .infoevent:before{
      left: -225px;    
      color: #e8846b;   
      content: attr(data-date);
       font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }
	
	.mktevent:before  {
      left: -225px;    
      color: #69a9fb;    
      content: attr(data-date);
      font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }

 .devevent:before{
      left: -225px;    
      color: #e8e069;   
      content: attr(data-date);
       font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }

	
.coreevent:before{
      left: -225px;    
      color: #b785ab;    
      content: attr(data-date);
      font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }
	
	
.adminevent:before {
      left: -225px;    
      color: #6daf5b;    
      content: attr(data-date);
      font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }
	
.libevent:before {
      left: -225px;    
      color: #167c80;    
      content: attr(data-date);
      font-weight: 600;    
      font-size: 1.2em;
      min-width: 120px;
      font-family: 'Saira', sans-serif;
	  width: 150px;
    text-align: right;
    }
	
	
	
	/*timeline bubbles */

.infoevent:after {
      box-shadow: 0 0 0 4px #e8846b;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    } 
	
	.mktevent:after {
      box-shadow: 0 0 0 4px  #69a9fb;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    }
	
	  
.devevent:after {
      box-shadow: 0 0 0 4px #e8e069;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    } 
	
		  
.coreevent:after {
      box-shadow: 0 0 0 4px #b785ab ;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    } 
		  
.adminevent:after {
      box-shadow: 0 0 0 4px #4f8640 ;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    } 
		  
.libevent:after {
      box-shadow: 0 0 0 4px #167c80;    
      left: -57px;        
      background:  #252827 ;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 10px;
    }