.flex-parent{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.input-flex-container{display:flex;justify-content:space-around;align-items:center;width:80vw;height:100px;max-width:1000px;position:relative;z-index:0}.input{width:25px;height:25px;background-color:#2c3e50;position:relative;border-radius:50%}.input:hover{cursor:pointer}.input::after,.input::before{content:"";display:block;position:absolute;z-index:-1;top:50%;transform:translateY(-50%);background-color:#2c3e50;width:4vw;height:5px;max-width:50px}.input::before{left:calc(-4vw + 12.5px)}.input::after{right:calc(-4vw + 12.5px)}.input.active{background-color:#2c3e50}.input.active::before{background-color:#2c3e50}.input.active::after{background-color:#aeb6bf}.input.active span{font-weight:700}.input.active span::before{font-size:13px}.input.active span::after{font-size:15px}.input.active~.input,.input.active~.input::after,.input.active~.input::before{background-color:#aeb6bf}.input span{width:1px;height:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);visibility:hidden}.input span::after,.input span::before{visibility:visible;position:absolute;left:50%}.input span::after{content:attr(data-year);top:25px;transform:translateX(-50%);font-size:14px}.input span::before{content:attr(data-info);top:-65px;width:70px;transform:translateX(-5px) rotateZ(-45deg);font-size:12px;text-indent:-10px}.description-flex-container{width:80vw;margin-top:100px;max-width:1000px}.description-flex-container p{margin-top:0;display:none}.description-flex-container p.active{display:block}@media (min-width:1250px){.input::before{left:-37.5px}.input::after{right:-37.5px}}@media (max-width:850px){.input{width:17px;height:17px}.input::after,.input::before{height:3px}.input::before{left:calc(-4vw + 8.5px)}.input::after{right:calc(-4vw + 8.5px)}}@media (max-width:600px){.flex-parent{justify-content:initial}.input-flex-container{flex-wrap:wrap;justify-content:center;width:100%;height:auto;margin-top:15vh}.input{width:60px;height:60px;margin:0 10px 50px;background-color:#aeb6bf}.input::after,.input::before{content:none}.input span{width:100%;height:100%;display:block}.input span::before{top:calc(100% + 5px);transform:translateX(-50%);text-indent:0;text-align:center}.input span::after{top:50%;transform:translate(-50%,-50%);color:#ecf0f1}.description-flex-container{margin-top:30px;text-align:center}}@media (max-width:400px){body{min-height:950px}}