/*timeline*/
 
 * {
  -webkit-box-sizing: border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}

.paragraph--type--body {
  position: relative;
}

table.start {
 width: 50px !important;
 position: absolute;
 left: 0px;
 right: 0px;
 top: -20px;
 z-index: 10; !important;
 margin: auto;
 height: 40px;
 pointer-events: none;
}

table.end {
 width: 50px !important;
 position: absolute;
 left: 0px;
 right: 0px;
 z-index: 10; !important;
 bottom: -15px;  
 height: 40px;
 margin: auto;
 pointer-events: none;
}

table.start tr,
table.end tr{
 background: none;
 border: none;
}

table.start td,
table.end td{
 background: none;
 border: none;
}

table.start h2:after,
table.end h2:after{
 display: none;
}

table.start h2,
table.end h2 {
 margin: 0px;
 font-size: 12px;
 color: #fff !important;
 line-height: 100%;
 text-align: center;
 display: flex;
 justify-content: center;
align-items: center;
}



div#timeline_container {
 width:auto;
 margin:25px auto;
 position:relative;
}
div#timeline_container header {
 position:relative;
 z-index:20;
}
div#timeline_container header figure {
 width:200px;
 height:200px;
 border-radius:50%;
 border:5px solid #cdc9c6;
 overflow:hidden;
 display:block;
 margin:0 auto;
}
div#timeline_container header figure img {
 height:100%;       		
}
div#timeline_container header h1 {
 position:absolute;
 top:20px;
 right:80px;
 font-family: 'Lobster', cursive;
 font-size:2.8em;
 text-shadow:2px 2px 1px #fff;
 font-weight:normal;
}
div#timeline_container > ul {
 position:relative;
 width:3px;
 background:#002a42;
 border-right:1px solid white;
 margin:0 auto;
 padding:0;
 list-style:none;      		
}

div#timeline_container > ul > li {
 position:relative;
 padding:.3em 0;
 min-height:30px;
 cursor:pointer;
 
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 -o-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;
}

div#timeline_container ul li:before {
display: none;
}

div#timeline_container > ul > li.hidden {
 position:absolute;
 top:-500px;
}
div#timeline_container > ul > li div {
 position:absolute;
}
div#timeline_container > ul li > div.event_icn {
 padding:0.3em;
 font-size:6px;
 border-radius:50%;
 background:#ebe7e4;
 border:0px;
 margin-left:-5px;
 color:rgba(85,86,86,0.3);
 box-shadow:1px 1px 1px white;

 -webkit-transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
 height: 12px;
 width: 12px;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#007cc2;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#007cc2;}

div#timeline_container > ul > li.education_event div.event_icn { background:#002a42;}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#007cc2;}

div#timeline_container > ul > li.work_event div.event_icn { background:#000;}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#007cc2;}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
 background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}


div#timeline_container > ul > li div.event_content {
 width:160px;
 padding:10px 15px;
 border:1px solid #002a42;
 border-radius:0px;
 top:-12px;
 opacity:0;
 background:white;
 -webkit-transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
 font-size: 13px;
 position: absolute;
 z-index: 10;
  hyphens: auto;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
 opacity:1;
}
div#timeline_container > ul > li:nth-child(odd) div.event_content {
 right:-185px;
}
div#timeline_container > ul > li:nth-child(even) div.event_content {
 left:-185px;
 text-align:right
}
div#timeline_container > ul > li div.event_content:before {
 content:"";
 position:absolute;
 width:10px;
 height:10px;
 border-bottom:1px solid #002a42;
 border-left:1px solid #002a42;
 top:10px;
 background:#ebe7e4;
 margin-top:8px;
 background:white;
}

         
div#timeline_container > ul > li:nth-child(odd) div.event_content:before {
 left:-6px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
div#timeline_container > ul > li:nth-child(even) div.event_content:before {
 right:-6px;
 -webkit-transform: rotate(225deg);
 -moz-transform: rotate(225deg);
 -ms-transform: rotate(225deg);
 -o-transform: rotate(225deg);
 transform: rotate(225deg);
}

div#timeline_container > ul > li:nth-child(even) div.event_content h2 {
  text-align: right;
}


div#timeline_container > ul > li div.event_content h2 {
 margin:0.3em 0;
 padding:0;
 text-transform:capitalize;
 font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
 margin:0;
 padding:0px;
 line-height:140%;
}
div#timeline_container > ul > li div.event_content ul {
 margin:0;
 padding:0;
 list-style:none;
 line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
 top:1em;
 width:180px;
 text-align:right;
 font-size:1.2em;
 text-shadow:1px 1px 1px white;
 opacity:0.3;
 font-weight:bold;
 -webkit-transition:all 0.3s ease-in-out;
 -moz-transition:all 0.3s ease-in-out;
 -o-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}
div#timeline_container > ul > li:nth-child(odd) div.event_date {right:60px;}
div#timeline_container > ul > li:nth-child(even) div.event_date {left:60px;}

div#instructions_container {
 position:fixed;
 padding:2em;
 width:300px;
 bottom:2em;
 right:2em;
 line-height:1.4em;
 background:#FDFDBD;
 border-radius:10px;
 border:1px solid #DDDBDA;
 z-index:40;
 font-size:0.9em;
 color:black;
 line-height:1.6em;
}
div#info_container{
 position:fixed;
 bottom:2em;
 right:2em;
 border-radius:50%;
 color:#ebe7e4;
 background:#6d6b6a;
 opacity:0.3;
 cursor:pointer;
 width:22px;
 font-size:14px;
 height:22px;
 padding-top:2px;
 text-align:center;
 font-family:'lobster','cursive';
 display:none;
}
div#info_container:hover {
 opacity:0.9;
}

div#timeline_container > ul li:first-child > div.event_icn {
 width: 40px;
 height: 40px;
 margin-left: -19px;
 margin-top: -25px;
}

div#timeline_container > ul li:last-child > div.event_icn {
 width: 40px;
 height: 40px;
 margin-left: -19px;
 background-color: #007cc2;
}

div#timeline_container h2 {
 margin-top: 0px !important;
 margin-bottom: 0px !important;
 font-size: 15px !important;
 color: #002a42 !important;
 font-weight: bold;
}

div#timeline_container h2:after {
 display: none;
}


div#timeline_container > ul li:first-child h2,
div#timeline_container > ul li:last-child h2{
 display: none;
}

@media screen and (max-width: 680px) {
  
  table.start {
    top: -10px;
  }

  table.end {
    bottom: -25px;
  }
  
}


      @media screen and (max-width: 414px) {

div#timeline_container > ul > li:nth-child(2n) div.event_content {
    left: -160px;
    text-align: right;
} 
        div#timeline_container > ul > li:nth-child(2n+1) div.event_content {
    right: -160px;
}
div#timeline_container > ul > li div.event_content {
    width: 136px;
}}