#timeline .timeline-item:after,#timeline .timeline-item:before{
    content:'';
    display:block;
    width:100%;
    clear:both
}
*,*:before,*:after{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}
#timeline{
    line-height:1.5em;
    font-size:14px;
    width:90%;
    margin:30px auto;
    position:relative;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease
}
#timeline:before{
    content:"";
    width:3px;
    height:100%;
    background:#000;
    left:50%;
    top:0;
    position:absolute
}
#timeline:after{
    content:"";
    clear:both;
    display:table;
    width:100%
}
#timeline .timeline-item{
    margin-bottom:50px;
    position:relative
}
#timeline .timeline-item .timeline-icon{
    background:#000;
    width:40px;
    height:40px;
    position:absolute;
    top: 0px;
    left:50.5%;
    overflow:hidden;
    margin-left:-23px;
    -webkit-border-radius:30%;
    -moz-border-radius:30%;
    -ms-border-radius:30%;
    border-radius:30%
}
#timeline .timeline-item .timeline-icon img{
    position:relative;
    top:9px;
    left:8px;
}
#timeline .timeline-item .timeline-content{
    width:45%;
    background:#fff;
    padding:20px;
    border: 2px solid black;
    -webkit-border-radius:13px;
    -moz-border-radius:13px;
    -ms-border-radius:13px;
    border-radius:13px;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease
}
#timeline .timeline-item .timeline-content h3{
    padding:15px;
    background:#000;
    color:#fff;
    margin:-20px -20px 0 -20px;
    font-weight:500;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    border-radius:10px;
}
#timeline .timeline-item .timeline-content:before{
    content:'';
    position:absolute;
    left:45%;
    top:15px;
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:7px solid #000
}
#timeline .timeline-item .timeline-content.right{
    float:right
}
#timeline .timeline-item .timeline-content.right:before{
    content:'';
    right:45%;
    left:inherit;
    border-left:0;
    border-right:7px solid #000
}
@media screen and (max-width: 768px){
    #timeline{
        margin:30px;
        padding:0
    }
    #timeline:before{
        left:0
    }
    #timeline .timeline-item .timeline-content{
        width:90%;
        float:right
    }
    #timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.right:before{
        left:10%;
        margin-left:-6px;
        border-left:0;
        border-right:7px solid #000
    }
    #timeline .timeline-item .timeline-icon{
        left:0.5%
    }
}