*{box-sizing:border-box}body{background:#fff;max-width:980px;margin:0 auto;padding:5px;font:14px "Segoe UI"}h1{font-size:26px}div.tree{overflow:hidden;width:100%;-webkit-column-count:3;-moz-column-count:3;column-count:3;padding-top:50px}div.tree div{display:inline-block;border:#ccc solid 1px;border-radius:5px;width:30%;min-width:300px;max-width:99%;margin:16px 1%;padding:12px;background:#fff;box-shadow:0 3px 3px #666}div.tree div:before{display:block;content:"";position:relative;left:50%;width:1px;height:32px;margin:-44px 0 12px 4px;background:#ccc}div.tree p{font-weight:bold;text-align:center;overflow:hidden;position:absolute;width:100%;left:0;margin-top:-50px}div.tree p:after{display:block;content:"";position:relative;width:67.5%;max-width:656px;height:1px;box-sizing:border-box;margin:-14px auto 0;background:#ccc}div.tree p a{margin:0 auto;float:none}div.tree p a:after{display:block;content:"";position:relative;left:50%;width:1px;height:32px;background:#ccc}@media only screen and (max-width:800px){div.tree div{width:50%}div.tree{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media only screen and (max-width:500px){div.tree div{width:100%}div.tree{-webkit-column-count:1;-moz-column-count:1;column-count:1}div.tree p:after, div.tree p a:after{display:none}}