article .framework-container {position: absolute; top: 50px; right: 40px; z-index: 2;}
article .framework-container ul {display: flex; justify-content: flex-end;}
article .framework-container ul li {margin: 0 0 0 7px;}
article .framework-container ul li a {display: inline-block; font-size: 15px; color: #333; padding: 7px 13px 8px; border: solid 1px #c9cacd; border-radius: 25px;}
article .framework-container ul li.active a {background-color: #f85c46; border-color: #f85c46; color: #fff; position: relative;}
article .framework-container ul li.active a:after {content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: block; width: 0; height: 0; border: solid 5px transparent; border-top-color: #f85c46;}

@media (max-width: 500px) {
    article .framework-container {border-left: solid 3px #f85c46; position: relative; top: -25px; left: 20px; width: 300px;}
    article .framework-container ul {flex-direction: column;}
    article .framework-container ul li {margin: 0;}
    article .framework-container ul li.active {margin: 0 0 0 5px;}
    article .framework-container ul li a {border: none;}
    article .framework-container ul li.active a {background: none; color: #333; font-weight: 700;}
    article .framework-container ul li.active a:after {border: none;}
}