/* timeline here i put   ----------------------
    --------------------------------
    ---------------------------------
    -------------------------------- */
    
    @import url(https://fonts.googleapis.com/css?family=Lato:400|Raleway:400);

    #timeline {
        padding-top: 5%;
    }
    
    .timeline {
        height: 100%;
        position: relative;
    
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    
        figcaption {
            font: 900 190% 'Lato';
            text-transform: uppercase;
            -webkit-text-stroke: .25px;
        }
    
        h2 {
            font: 400 400% 'Raleway';
            padding-bottom: 100px;
            color: #b2cde9;
        }
    
        h6 {
            color: #0090F5;
            font: 400 80% Tahoma;
        }
           
    
        p, ol {
            font: 400 95% 'Raleway';
            padding: 3px 0 20px 0;
            color: #575757;
            text-align: justify;
            width: 70%;
        } 
    
        ol {
            list-style: disc;
            margin-top: -20px;
            padding-left: 40px;
        }
    
        figure {
            float: right;
            width: 100%;
        }
    
        article {
            position: relative;
            width: 38%;
            overflow: hidden;
            margin-bottom: 100px;
    
            &:first-of-type {
                float: left;
                text-align: right;
    
                p, figure {
                    float: right;
                }
            }
    
            &:last-of-type {
                float: right;
    
                h2 {
                    color: #c6e0aa;
                }
    
                h6, a {
                    color: #40aa00;
                }
    
                a:hover {
                    color: #95D40D;
                }
            }
        }
    }
    
    
    /* end the timeline  */