.dotcontainer{
    width: 100%;
}



.timeline{
    width: 100%;
    padding: 10px 0px 10px 0px;
    background-color: #E4E2DB;
    text-align: left;
    font-weight: normal;
    position: fixed;
    bottom: 0px;
    z-index: 2;
    display: none;
}

.timelinetxt{
    font-family: 'Merriweather', serif;
    font-weight: 100;
    font-size: 18px;
    text-align: left;
    padding: 0px 0px 0px 10px;
}

.timelinetxt #clicktosee{
    font-size: 15px;
    color: #999999;
}


.datetxt{
    width: 100%;
    font-size: 16px;
    font-weight: 100;
    text-align: left;
    bottom: 170px;
    display: none;
    padding: 5px 0px 5px 10px;
}

.datetxt .keydot{
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #38B449;
    opacity: .4;
    display: inline-block;
}

.dotwrapper{
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    display: none;
}

.dotwrapper #prehistory{
    font-weight: 100;
    font-size: 16px;
    line-height: 1.4em;
    text-align: left;
    padding: 10px 0px 5px 10px;
}


.dotwrapper .datedot{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background-color: #38B449;
    opacity: .4;
    display: block;  
}

.dotwrapper .datedot#y1285{
    left: 274px;
    top: 21px;
}

.dotwrapper .datedot#y1415{
    left: 666px;
    top: 21px;
}

.dotwrapper .datedot#y1577{
    left: 1154px;
    top: 21px;
}

.dotwrapper .datedot#y1862{
    left: 223px;
    top: 98px;
}

.dotwrapper .datedot#y1867{
    left: 2028px;
    top: 21px;
}

.dotwrapper .datedot#y1883{
    left: 527px;
    top: 98px;
}

.dotwrapper .datedot#y1887{
    left: 584px;
    top: 98px;
}

.dotwrapper .datedot#y1897{
    left: 729px;
    top: 98px;
}

.dotwrapper .datedot#y1917{
    left: 1018px;
    top: 98px;
}

.dotwrapper .datedot#y1946{
    left: 1436px;
    top: 98px;
}

.dotwrapper .datedot#y1958{
    left: 1610px;
    top: 98px;
}

.dotwrapper .datedot#y1960{
    left: 1639px;
    top: 98px;
}

.dotwrapper .datedot#y1967{
    left: 1740px;
    top: 98px;
}

.dotwrapper .datedot#y1977{
    left: 1884px;
    top: 98px;
}

.dotwrapper .datedot#y1981{
    left: 1942px;
    top: 98px;
}

.dotwrapper .datedot#y1992{
    left: 2101px;
    top: 98px;
}

.dotwrapper .datedot#y1994{
    left: 2130px;
    top: 98px;
}

.dotwrapper .datedot#y2000{
    left: 2216px;
    top: 98px;
}

.dotwrapper .datedot#y2002{
    left: 2245px;
    top: 98px;
}

.dotwrapper .datedot#y2003{
    left: 2260px;
    top: 98px;
}

.dotwrapper .datedot#y2006{
    left: 2303px;
    top: 98px;
}

.dotwrapper .datedot#y2007{
    left: 2318px;
    top: 98px;
}

.dotwrapper .datedot#y2008{
    left: 2332px;
    top: 98px;
}

.dotwrapper .datedot#y2010{
    left: 2361px;
    top: 98px;
}

.dotwrapper .datedot#y2011{
    left: 2375px;
    top: 98px;
}

.dotwrapper .datedot#y2012{
    left: 2390px;
    top: 98px;
}

.dotwrapper .datedot#y2013{
    left: 2404px;
    top: 98px;
}

.dotwrapper .datedot#y2014{
    left: 2419px;
    top: 98px;
}

.dotwrapper .datedot#y2016{
    left: 2448px;
    top: 98px;
}

.dotwrapper .datedot#y2017{
    left: 2462px;
    top: 98px;
}

.dotwrapper .datedot#y2018{
    left: 2476px;
    top: 98px;
}

.dotwrapper .period{
    position: absolute;
    height: 4px;
    background-color: #38B449;
    opacity: .4;
    display: block;    
}

.dotwrapper .period#y1285y1415{
    width: 380px;
    left: 286px;
    top: 26px;
}

.dotwrapper .period#y1415y1577{
    width: 478px;
    left: 677px;
    top: 26px;
}

.dotwrapper .period#y1577y1867{
    width: 862px;
    left: 1166px;
    top: 26px;
}

.dotwrapper .period#y1883y1887{
    width: 45px;
    left: 540px;
    top: 103px;
}