.framework{padding:80px 20px}.framework .framework-container{overflow:visible;max-width:900px;min-height:640px;margin:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:1}.framework .central-part{display:flex;align-items:center;justify-content:center;width:100%}.framework .framework-node{display:flex;flex:0 0 190px;min-height:190px;padding:24px 20px;align-items:center;justify-content:center;flex-direction:column;gap:16px;border:2px solid #3177ff;border-radius:50%;background:#fff;color:#3177ff;text-align:center}.framework .framework-node img{width:82px;height:82px}.framework .framework-node span{max-width:145px;font-family:"bw_modelica_lgc_ss01medium",sans-serif;font-size:1.25vw;line-height:120%}@media(max-width: 768px){.framework .framework-node span{font-size:16px;line-height:26px}}.framework .framework-node--center{flex-basis:230px;min-height:230px;border-width:3px}.framework .framework-connector{position:relative;flex:0 0 auto}.framework .framework-connector::after{position:absolute;width:10px;height:10px;content:"";border-top:2px solid #3177ff;border-right:2px solid #3177ff}.framework .framework-connector--vertical{width:2px;height:48px;background:#3177ff}.framework .framework-connector--vertical::after{bottom:1px;left:-4px;transform:rotate(135deg)}.framework .framework-connector--horizontal{height:2px;min-width:45px;background:#3177ff}.framework .framework-connector--horizontal::after{top:-4px;right:1px;transform:rotate(45deg)}.framework #center.el.animate{transform:translateY(0px);transition-delay:250ms;animation:centerElanim cubic-bezier(0.215, 0.61, 0.355, 1) 800ms}.framework #right.el.animate{transform:translateX(0px);transition-delay:200ms;animation:rightElanim cubic-bezier(0.215, 0.61, 0.355, 1) 800ms}.framework #left.el.animate{transform:translateX(0px);transition-delay:150ms;animation:leftElanim cubic-bezier(0.215, 0.61, 0.355, 1) 800ms}.framework #second-up.el.animate{transform:translateY(0px);transition-delay:100ms;animation:secondUpElanim cubic-bezier(0.215, 0.61, 0.355, 1) 800ms}.framework #first-up.el.animate{transform:translateY(0px);transition-delay:0ms;animation:firstUpElanim cubic-bezier(0.215, 0.61, 0.355, 1) 800ms}.framework .arrow.el.animate{transition-delay:800ms}.framework .el{opacity:0;transition:all 800ms cubic-bezier(0.215, 0.61, 0.355, 1)}.framework .el.animate{opacity:1}@media(max-width: 760px){.framework{padding-top:50px;padding-bottom:50px}.framework .framework-container{min-height:0}.framework .central-part{flex-direction:column}.framework .framework-node,.framework .framework-node--center{flex-basis:auto;width:190px;min-height:190px}.framework .framework-connector--horizontal{width:2px;height:48px;min-width:0;background:#3177ff}.framework .framework-connector--horizontal::after{right:auto;bottom:1px;left:-4px;top:auto;transform:rotate(135deg)}}@keyframes centerElanim{from{transform:translateY(250px)}to{transform:translateY(0px)}}@keyframes rightElanim{from{transform:translateX(250px)}to{transform:translateX(0px)}}@keyframes leftElanim{from{transform:translateX(-250px)}to{transform:translateX(0px)}}@keyframes secondUpElanim{from{transform:translateY(300px)}to{transform:translateY(0px)}}@keyframes firstUpElanim{from{transform:translateY(400px)}to{transform:translateY(0px)}}@keyframes animateArrow{from{opacity:1}to{opacity:0}}