* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

body {
   margin: 0;
   width: 960px;
   text-align: center;
   margin: 0 auto;
   padding-top: 32px;
   font-family: 'Roboto', sans-serif;
   background: #FFFFFF;
}

h1 {
   text-align: center;
   padding-bottom: 27px;
   margin-bottom: 0px;
   border-bottom: 0.5px solid rgba(37, 36, 36, 0.54);
   color: #000000;
   font-family: Menlo;
   font-size: 32px;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 35px;
   text-align: center;
}

.title-left {
   float: left;
   color: #050505;
   font-family: Menlo;
   font-size: 24px;
   letter-spacing: 0;
   font-weight: normal;
   cursor: pointer;
   padding-left: 14px;
}

.title-right {
   float: right;
   color: #050505;
   font-family: Menlo;
   font-size: 24px;
   letter-spacing: 0;
   font-weight: normal;
   padding-right: 14px;
}

/* h1 span {
    font-weight: 600;
 }
  */

.container {
   /*width: 80%;*/
   margin: auto;
   position: relative;
   overflow: hidden;
}

.cross-icon {
   position: absolute;
   right: 14px;
   top: 16px;
   cursor: pointer;
}

.units-container {
   text-align: right;
   position: absolute;
   right: 38px;
   top: 22px;
   color: rgba(0, 0, 0, 0.65);
   font-family: Menlo;
   font-size: 10px;
   letter-spacing: 0;
   line-height: 13px;
   text-align: right;
   visibility: hidden;
}

.directions-container {
   position: absolute;
   right: 21px;
   top: 100px;
   color: rgba(0, 0, 0, 0.65);
   font-family: Menlo;
   font-size: 10px;
   letter-spacing: 0;
   line-height: 13px;
   text-align: right;
   visibility: hidden;
}

.scale-container {0
   padding-top: 2px;
   padding-bottom: 2px;
   margin-left: 14px;
   position: absolute;
   right: -18px;
   visibility: hidden;
}

.arrow-container {
   padding-top: 2px;
   padding-bottom: 2px;
   margin-left: 14px;
   position: relative;
   left: 2px;
   visibility: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 2000px;
   background: black;
   z-index: -2
}

.story-overlay {
   width: 960px;
   position: absolute;
   z-index: 2;
   background: white;
   height: 1724px;
   top: 115px;
   color: #000000;
   font-family: Menlo;
   font-size: 18px;
   letter-spacing: 0;
   line-height: 28px;
   text-align: center;
   padding-top: 33px;
   box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2);
   padding-left: 50px;
   padding-right: 50px;
   z-index: 3;
}

.about-overlay {
   width: 960px;
   position: absolute;
   z-index: 2;
   background: white;
   height: 2260px;
   top: 115px;
   color: #000000;
   font-family: Menlo;
   font-size: 16px;
   letter-spacing: 0;
   line-height: 22px;
   text-align: center;
   padding-top: 33px;
   box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2);
   padding-left: 50px;
   padding-right: 50px;
   z-index: 3;
}

.start-here {
   position: absolute;
   left: 20px;
  color: rgba(0, 0, 0, 0.5); !important;
   font-family: Menlo;
   font-size: 16px !important;
   letter-spacing: 0;
   line-height: 16px;
}

.ref {
 
   color: rgba(0, 0, 0, 0.5); 
   font-family: Menlo;
   font-size: 14px;
   font-style: italic;

}

.contrast{
   position: absolute;
   left: 20px;
   color: #FF642C !important;
   font-family: Menlo;
   font-size: 16px !important;
   letter-spacing: 0;
   line-height: 16px;
   font-weight: bold;
}

.i26 {
   position: absolute;
   top: 240px;
   left: 27%;
   color: rgba(0, 0, 0, 0.6);
   font-family: Menlo;
   font-size: 14px;
   letter-spacing: 0;
   line-height: 30px;
   text-align: right;
   visibility: hidden;
}

.i24 {
   position: absolute;
   top: 340px;
   left: 23.5%;
   color: rgba(0, 0, 0, 0.6);
   font-family: Menlo;
   font-size: 14px;
   letter-spacing: 0;
   line-height: 30px;
   text-align: right;
   visibility: hidden;
}

.i16 {
   position: absolute;
   top: 740px;
   left: 27%;
   color: rgba(0, 0, 0, 0.6);
   font-family: Menlo;
   font-size: 14px;
   letter-spacing: 0;
   line-height: 30px;
   text-align: right;
   visibility: hidden;
}

.intro {
   position: absolute;
   top: 15px;
   left: 30px;
   z-index: 2;
}
.apt {
   position: absolute;
   top: 235px;
   left: 36%;
   visibility: hidden;
}

.hive {
   position: absolute;
   top: 235px;
   left: 52%;
   visibility: hidden;
}

.visits {
   position: absolute;
   top: 143px;
   left: 40%;
   visibility: hidden;
}

.lifetime {
   position: absolute;
   top: 142px;
   left: 53%;
   visibility: hidden;
}

.densthl {
   position: absolute;
   top: 500px;
   left: 20%;
   visibility: hidden;
}

.denstjg {
   position: absolute;
   top: 510px;
   left: 52%;
   visibility: hidden;
}

.complaints {
   position: absolute;
   top: 550px;
   left: 31%;
   visibility: hidden;
}

.trains {
   position: absolute;
   top: 315px;
   left: 51%;
   visibility: hidden;
}

.flower {
   position: absolute;
   top: 970px;
   left: 25%;
   visibility: hidden;
}

.eggplants {
   position: absolute;
   top: 970px;
   left: 53%;
   visibility: hidden;
}

.party {
   position: absolute;
   top: 1100px;
   left: 32.5%;
   visibility: hidden;
}

.work {
   position: absolute;
   top: 1100px;
   left: 53%;
   visibility: hidden;
}

.coffee {
   position: absolute;
   top: 1280px;
   left: 38%;
   visibility: hidden;
}

.plate {
   position: absolute;
   top: 1234px;
   left: 53%;
   visibility: hidden;
}
.circle-medium {
   background-color: rgba(242, 219, 84, 0.55);
   width: 100px;
   height: 206px;
   border-bottom-left-radius: 800px;
   border-top-left-radius: 800px;
   position: absolute;
   left: 39.5%;
   top: 300px;
   visibility: hidden;
}

.circle-small {
   background-color: rgba(242, 219, 84, 0.55);
   width: 50px;
   height: 104px;
   border-bottom-right-radius: 800px;
   border-top-right-radius: 800px;
   position: absolute;
   left: 50%;
   top: 350px;
   visibility: hidden;
}

.timeline-block {
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
   height:75px;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 20px;
   height: 1px;
   border: 1px solid black;
   margin-top: 100px;
   z-index: 1;
   background: black;
}
 
.timeline-content {
   width: 100%;
   padding: 0 17px;
   padding-top: 86px;
   color: rgba(0, 0, 0, 0.7);
   font-family: Menlo;
   font-size: 16px;
   letter-spacing: 0;
   line-height: 20px;
   text-align: right;
   position: relative;
   visibility: hidden;
}

.timeline-content-legends {
   position: absolute;
   width: 50%;
   padding: 0 100px;
   padding-top: 0px;
   padding-top: 36px;
   font-family: Menlo;
   font-size: 14px;
   letter-spacing: 0;
   line-height: 16px;
   text-align: right;
   top: 73%;
   color: #000000;
   font-family: Menlo;
   font-size: 16px;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 19px;
   text-align: right;
}

.timeline-content-legends-right {
   position: absolute;
   width: 50%;
   padding: 0 100px;
   padding-top: 0px;
   padding-top: 0px;
   padding-top: 36px;
   font-family: Menlo;
   font-size: 14px;
   letter-spacing: 0;
   line-height: 16px;
   text-align: left;
   top: 73%;
   right: 0%;
   color: #000000;
   font-family: Menlo;
   font-size: 16px;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 19px;
}

.placeholder-content-left {
   position: absolute;
   top: 73px;
   right: 24px;
   font-size: 16px;
}

.legends-person-left {
   position: absolute;
   top: 330px;
   width: 90px;
   right: 18px;
   font-size: 14px;
   font-weight: normal;
}

.legends-person-right {
   position: absolute;
   top: 330px;
   width: 90px;
   left: 18px;
   font-size: 14px;
   font-weight: normal;
}

.placeholder-content-right {
   position: absolute;
   top: 73px;
   left: 24px;
   text-align: left;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}

.timeline-content .left {
   text-align: right;
}
.timeline-content .left img {
   position: relative;
   top: 6px;
}

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

.timeline-content .right img {
   position: relative;
   top: 6px;
}

.footer {
   color: #000000;
   font-family: Menlo;
   font-size: 10px;
   letter-spacing: 0;
   line-height: 11px;
   border-top: 0.5px solid rgba(41, 32, 32, 0.39);
   padding: 10px;
   text-align: left;
   background: #FFFFFF;
   overflow: hidden;
   z-index: 3;
   position: relative;
   z-index: -1;
}