.timeline3 {
         position: relative;
         min-height: 200px;
         width: 100%;
         overflow: hidden;
         border: 1px inset #bbb;
     cursor: grab;
     }

.timeline4 {
         position: relative;
         min-height: 200px;
         width: 100%;
/*         overflow: hidden;*/
margin: 2em auto; 
     }
.scale {
    position: absolute;
    left: 210px;
    top: -10px;
    width: 35px;
    height: 100%;
    z-index: 10;
/*     background: linear-gradient(90deg, #c3c4c6 0, #656668 15%, #656668 85%, #c3c4c6 100% );*/
     background: linear-gradient(90deg, #656668 15%, #333 70%, #656668 100% );
/*    ,#333 50%*/
}

.scale-back {
    content: " ";
    position: absolute;
    left: 172px; top: 0;
    width: 111px;
    height: 100%;
    background-color: rgba(0,0,0, 0.1);
}
.scale::before {
   box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0px;
    width: 35px;
    height: 10px;
    content: " ";
    border-bottom: 10px solid transparent;
    border-left: 17px solid #fff; 
    border-right: 17px solid #fff; 
    border-top: 0 solid #fff;
}

.scale::after {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 35px;
    height: 10px;
    content: " ";
    border-top: 10px solid transparent;
    border-left: 17px solid #fff; 
    border-right: 17px solid #fff; 
    border-bottom: 0 solid #fff;
}
.scale-grade {
    width: 35px;
/*    border: 1px solid #bbb;*/
    border-top: 1px solid #bbb;
}

.scale-odd,
.scale-even {
    position: absolute;
/*    background-color: #fafafa;*/
             
}

.scale-even {
/*    background-color: #f0f0f0;*/
}

.scale-desc {
/*
    position: absolute;
    left: 0.0em; top: -1.0em;
*/
   
    font-size: smaller;
    width: 100%;
    text-align: center;
   
    font-weight: bold;
    color: #fff;
/*    text-shadow: 1px 1px 0px #fff;*/
}

.tl-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

.date {
    font-weight: bold;
}
.tl-period, .tl-human {
    position: absolute;
    box-sizing: border-box;
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
    cursor: pointer;
    width: 220px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    
    border-bottom: 1px dotted #bbb;
    border-top: 1px dotted #bbb;
    padding-right: 3.0em;
    
    border-radius: 5px 0 0 5px;
/*    background: linear-gradient(to bottom, #eee 0, #fff 50%, #eee 100%);*/
    
}

.tl-period:nth-child(odd) {
    background: linear-gradient(to right, #FDB93F 0, #FED387 50%, #FDB93F 100% );
     border: 2px solid #404040;
    border-right: 0 none;
   
}
.tl-period:nth-child(even) {
    background: linear-gradient(to right, #98D5D8 0, #D4EEEF 50%, #98D5D8 100% );
     border: 2px solid #22bfb8;
    border-right: 0 none;
    
}


.tl-period::before {
    position: absolute;
    top: -8px; right: 23px;
    content: url(event-arrrow.svg);
    width: 14px; height: 14px;
}
.tl-period::after {
    position: absolute;
    bottom: -8px; right: 23px;
    content: url(event-arrrow.svg);
    width: 14px; height: 14px;
}

.tl-period:nth-child(even)::before, .tl-period:nth-child(even)::after {
    content: url(event-arrrow-even.svg); 
}
.tl-period .date, .tl-human .date {
    font-size: smaller;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.tl-period a, .tl-human a {
    font-size: 120%;
    text-decoration: none;
    color: #333;
}

.period-end {
    align-self: flex-end;
}
/*
<stop  offset="0.1075" style="stop-color:#98D5D8"/>
			<stop  offset="0.5054" style="stop-color:#D4EEEF"/>
			<stop  offset="1" style="stop-color:#98D5D8"/>
.tl-period:hover {
    border-color: #666;
}
*/

.tl-human {
    padding-right: 0;
    padding-left: 3.3em;
     border-top: 1px dotted #bbb;
     border-bottom: 1px dotted #bbb;
    
    width: 220px;
    justify-content: flex-start;
    
    background: linear-gradient(to right, #feeac7 0, #fef2da 50%, #feeac7 100% );
    border: 2px solid #feb741;
    border-left: 0 none;
    
    border-radius: 0 5px 5px 0; 
}

.tl-human::before {
    position: absolute;
    top: -8px; left: 27px;
    content: url(event-arrrow-human.svg);
    width: 14px; height: 14px;
}
.tl-human::after {
    position: absolute;
    bottom: -8px; left: 27px;
    content: url(event-arrrow-human.svg);
    width: 14px; height: 14px;
}

.tl-desc {
/*    font-size: smaller;*/
    line-height: 1.2em;
    padding: 0.5em;
    padding-top: 0.8em;
    cursor: pointer;
    
}


.tl-human .tl-desc {
    padding-left: 1em;
}
.evt-body {
    position: absolute;
    left: 450px;
    z-index: 15;
   
}

.evt-body::before {
    box-sizing: border-box;
    position: absolute;
    left: -214px;
    top: 0px;
    content: " ";
    width: 214px;
    height: 16px;
    border-left: 0px solid;
    border-top: 7px solid;
    border-bottom: 8px solid;
    border-color: transparent;
    border-right: 202px solid rgba(100, 100, 100, 0.3) ;
/*        #6d6e70;*/
    background: url(event.svg) no-repeat 1px center transparent;
    overflow: visible;
    z-index: 1;
}

.evt-body:hover::before {
   
/*    border-top: 2px dashed #666;*/
    
/*    box-shadow: 1px 1px 1px #333;*/
} 

.evt-body.left .evt-desc, .evt-body.right .evt-desc {
    width: 7em
}
.evt-body.right {
    left: 560px
}
.evt-body.right::before {
    left: -335px;
    width: 337px;
    z-index: 1;
}

.left2 .evt-desc, .right2 .evt-desc {
    width: 13em;
}
.evt-body.right2 {
    left: 490px
}
.evt-body.left2 {
    left: 300px
}

.evt-body.right2::before {
    left: -253px;
    width: 255px;
    border-right-width: 254px;
}

.evt-body.left2::before {
    left: -63px;
    width: 57px;
    border-right-width: 64px;
}


 .evt-desc {
     padding: 0.5em;
     border: 1px solid #bbb;
/*     border-radius: 0 5px 5px 5px;*/
     background: #ffd;
     width: 16.3em;
/*     font-size: smaller;*/
     line-height: 1.2em;
/*     overflow: hidden;*/
      border: 2px solid #6d6d6f;
    border-radius: 8px;
     cursor: pointer;
  
 }

.evt-body .evt-desc {
    position: absolute;
    top: -1.1em;
    background: linear-gradient(to right, #febc41 0, #fed385 50%, #febc41 100% );
     z-index: 100;  
}

.evt-body a {
    font-size: 90%;
    text-decoration: none;
    color: #333;
}
.upper .evt-desc {
    position: absolute;
    top: auto;
    bottom: -20px;
}
.lower .evt-desc {
    position: absolute;
    top: -5px;
    
}

.evt-desc hr {
    margin: 0.4em auto;
}
.evt-desc:hover {
    -webkit-box-shadow: 1px 1px 1px 1px #D4D4D4;
box-shadow: 1px 1px 1px 1px #D4D4D4;    
    border-color: #666; 
    
}
 .evt-desc a {
     line-height: 1.1em;
 }
 section.chapter {
     position: relative;
/*         padding-right: 200px;*/
 }

aside.further {
    
    display: block;
    margin: 20px 0px;
    padding: 1em; padding-left: 80px;
    text-indent: 0px;
    text-decoration: none;
    text-align: left;
    color: #777;
     background: url("./a_web.gif") #f3f9ff 10px 10px no-repeat;
    border: 1px solid #ddf2fe;
/*
 position: absolute; right: 10px; 

    width: 170px;
    background: transparent;

    font-size: 90%;
*/
}

aside h4 {
    margin: 0; margin-bottom: 0.5em; 
    padding: 0;
/*    margin-left: 30px;*/
    min-height: auto;
}
aside ul {
    margin: 0 !important; padding: 0;
    padding-left: 0;
}

aside li {
    background: transparent;
   /* margin-left: 0; padding-left: 0 !important; */
    margin-bottom: 0.2em;
}
/*aside li::before { display: none }*/
aside p {
    text-indent: 0;
}
.timeline {
/*    position: absolute; left: 0;*/
    clear: both; margin-left: -260px;
    display: none;
    margin: 2em 0;
}