@media(min-width:1000px){#timeline .demo-card:nth-child(2n) .head:after,#timeline .demo-card:nth-child(odd) .head:after{position:absolute;content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent}#timeline .demo-card:nth-child(2n) .head:before,#timeline .demo-card:nth-child(odd) .head:before{position:absolute;content:"";width:9px;height:9px;background-color:#bdbdbd;border-radius:9px;box-shadow:0 0 2px 8px #fff}}.demo-card:first-child{order:1}.demo-card:nth-child(2){order:5}.demo-card:nth-child(3){order:2}.demo-card:nth-child(4){order:6}.demo-card:nth-child(5){order:3}.demo-card:nth-child(6){order:7}.demo-card:nth-child(7){order:4}.demo-card:nth-child(8){order:8}*{box-sizing:border-box}body{font-family:Roboto,sans-serif}#timeline{padding:50px 50px 100px;background:#fff;border-top:1px solid hsla(0,0%,75%,.4);border-bottom:1px solid hsla(0,0%,75%,.4)}#timeline h1{text-align:center;font-size:3rem;font-weight:200;margin-bottom:20px;line-height:3.1rem}#timeline h2{text-align:center;font-size:2rem;font-weight:100;margin-bottom:10px}#timeline p.leader{text-align:center;max-width:90%;margin:auto auto 45px}#timeline .demo-card-wrapper{position:relative;margin:auto}@media(min-width:1000px){#timeline .demo-card-wrapper{display:flex;flex-flow:column wrap;width:1170px;height:2140px;margin:0 auto}}#timeline .demo-card-wrapper:after{z-index:1;content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid hsla(0,0%,75%,.4)}@media(min-width:1000px){#timeline .demo-card-wrapper:after{border-left:1px solid #bdbdbd}}#timeline .demo-card{position:relative;display:block;margin:10px auto 80px;max-width:94%;z-index:2}@media(min-width:480px){#timeline .demo-card{max-width:60%;box-shadow:0 1px 22px 4px rgba(0,0,0,.07)}}@media(min-width:720px){#timeline .demo-card{max-width:40%}}@media(min-width:1000px){#timeline .demo-card{max-width:450px;height:400px;margin:45px 90px}#timeline .demo-card:nth-child(odd){margin-right:45px}#timeline .demo-card:nth-child(odd) .head:after{border-left-width:15px;border-left-style:solid;left:100%}#timeline .demo-card:nth-child(odd) .head:before{left:491.5px}#timeline .demo-card:nth-child(2n){margin-left:45px}#timeline .demo-card:nth-child(2n) .head:after{border-right-width:15px;border-right-style:solid;right:100%}#timeline .demo-card:nth-child(2n) .head:before{right:489.5px}#timeline .demo-card:nth-child(2){margin-top:180px}}#timeline .demo-card .head{position:relative;display:flex;align-items:center;color:#fff;font-weight:400}#timeline .demo-card .head .number-box{display:inline;float:left;margin:15px;padding:10px;font-size:35px;line-height:35px;font-weight:600;background:rgba(0,0,0,.17)}#timeline .demo-card .head h2{text-transform:uppercase;font-size:1.3rem;font-weight:inherit;letter-spacing:2px;margin:0;padding-bottom:6px;line-height:1.1rem}@media(min-width:480px){#timeline .demo-card .head h2{font-size:165%;line-height:1.8rem}}#timeline .demo-card .head h2 span{display:block;font-size:.6rem;margin:0}@media(min-width:480px){#timeline .demo-card .head h2 span{font-size:.8rem}}#timeline .demo-card .body{background:#fff;border:1px solid hsla(0,0%,75%,.4);border-top:0;padding:15px}@media(min-width:1000px){#timeline .demo-card .body{height:315px}}#timeline .demo-card .body p{font-size:18px;line-height:20px;margin-bottom:15px}#timeline .demo-card .body img{display:block;width:100%}#timeline .demo-card .body ul{list-style-type:disc;padding-left:20px;margin-top:15px}#timeline .demo-card .body ul li{font-size:16px;line-height:1.2rem;color:#333;margin-bottom:10px;padding-left:5px}#timeline .demo-card--step1{background-color:#60a5fa}#timeline .demo-card--step1 .head:after{border-color:#60a5fa}#timeline .demo-card--step2{background-color:#60a5fa}#timeline .demo-card--step2 .head:after{border-color:#60a5fa}#timeline .demo-card--step3{background-color:#9ca3af}#timeline .demo-card--step3 .head:after{border-color:#9ca3af}#timeline .demo-card--step4{background-color:#9ca3af}#timeline .demo-card--step4 .head:after{border-color:#9ca3af}#timeline .demo-card--step5{background-color:#9ca3af}#timeline .demo-card--step5 .head:after{border-color:#9ca3af}#timeline .demo-card--step6{background-color:#9ca3af}#timeline .demo-card--step6 .head:after{border-color:#9ca3af}#timeline .demo-card--step7{background-color:#9ca3af}#timeline .demo-card--step7 .head:after{border-color:#9ca3af}