*{box-sizing:border-box}.timeline{position:relative;max-width:1200px;margin:0 auto}.timeline::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:6px;margin-left:-3px;background-color:#777}.timeline .container{position:relative;width:50%;padding:10px;background-color:inherit}.left::before,.right::before{content:" ";position:absolute;top:22px;z-index:1;width:0;height:0}.timeline .container::after{content:'';position:absolute;top:15px;right:-17px;z-index:1;width:25px;height:25px;border:4px solid #777;border-radius:50%;background-color:#fff}.left{left:-25.35%;padding-left:4px;padding-right:40px}.right{left:25.35%;padding-left:40px;padding-right:5px}.left::before{right:30px;border:solid #fff;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e6e6e6}.right::before{left:30px;border:solid #fff;border-width:10px 10px 10px 0;border-color:transparent #e6e6e6 transparent transparent}.right::after{left:-16px}.content{position:relative;padding:20px 30px;border-radius:6px;background-color:#e6e6e6;color:#404040}@media screen and (max-width:992px){.left{left:-21%}.right{left:21%}}@media screen and (max-width:768px){.timeline::after{left:31px}.timeline .container{width:100%;padding-left:70px;padding-right:12px}.timeline .container::before{left:60px;border:solid #fff;border-width:10px 10px 10px 0;border-color:transparent #e6e6e6 transparent transparent}.left,.right{left:0;padding-right:12px}.left::after,.right::after{left:15px}.content{padding:16px 18px}}