.controls{width:40px;height:40px;position:absolute;left:120px;display:flex;justify-content:center;align-items:center;cursor:pointer}.controls:hover:after{transform:translateX(-10px) rotate(45deg)}.controls:hover:active:after{transform:translateX(-20px) rotate(45deg);transition:300ms all}.controls:after{content:"";position:absolute;width:16px;height:16px;transform:rotate(45deg);border-left:4px solid #fff;border-bottom:4px solid #fff;transition:500ms all}.controls.next{left:auto;right:120px;transform:rotate(180deg)}.time-line{width:100%;height:480px;display:flex;justify-content:center;align-items:center;bottom:0}.time-line *{transition:800ms all cubic-bezier(.23,1,.32,1)}.time-line .dates-overflow{left:0;width:500vw;position:absolute;bottom:50px;height:50px}.time-line .dates-wrap{display:inline-block;position:absolute;height:100%;left:calc(50vw - 350px)}.time-line .dates-wrap:before,.time-line .dates-wrap:after{content:"";position:absolute;width:160px;height:100%;left:-1px;transform:translate(-50%,-50%);z-index:2}.time-line .dates-wrap:after{left:auto;right:-1px;transform:translate(50%,-50%)}.time-line .dates-wrap .date{width:160px;position:relative;float:left;height:100%;display:flex;justify-content:center;align-items:center;transition:800ms all cubic-bezier(.23,1,.32,1)}.time-line .dates-wrap .date .date-content{visibility:hidden;position:absolute;width:420px;bottom:100%;margin-bottom:80px;border-radius:3px;transform-origin:50% 100%;transform:scale(.7);box-shadow:0 10px 30px rgba(0,0,0,0)}.time-line .dates-wrap .date .date-content:after{content:"";position:absolute;left:50%;width:1px;top:100%;margin-top:-1px;height:60px;opacity:0;background-color:#fff;transform:scaleY(0);transform-origin:100% 100%;transition:800ms all cubic-bezier(.23,1,.32,1)}.time-line .dates-wrap .date .date-content .date-image{width:100%;height:calc(100% - 60px);background-size:cover;background-position:center}.time-line .dates-wrap .date .date-content>div{opacity:0;transform:translateY(40px)}.time-line .dates-wrap .date .date-content .date-text{width:100%;height:auto;background:linear-gradient(to bottom right,#1cb36e,#0f81c8);padding:50px;border-radius:5px}.time-line .dates-wrap .date .date-year{opacity:.4;width:100%;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer}.time-line .dates-wrap .date .date-year:hover{opacity:1!important}.time-line .dates-wrap .date .date-year:hover:after{transform:scale(1)!important}.time-line .dates-wrap .date .date-year p{position:absolute;top:40px;line-height:0;color:#fff;font-size:35px;font-weight:900;transform:scale(.4);z-index:2}.time-line .dates-wrap .date .date-year:after{content:"";position:absolute;width:14px;height:14px;background-color:#fff;bottom:100%;margin-bottom:-7px;border-radius:50%;transform:scale(.4);transition:500ms all}.time-line .dates-wrap .date .date-year:before{content:"";position:absolute;top:0;width:200%;height:1px;background-color:#fff}.time-line .dates-wrap .date.sibling .date-year{opacity:.6}.time-line .dates-wrap .date.sibling .date-year:after{transform:scale(.8)}.time-line .dates-wrap .date.sibling .date-year p{transform:scale(.6)}.time-line .dates-wrap .date.active+.date .date-year{opacity:.6}.time-line .dates-wrap .date.active+.date .date-year:after{transform:scale(.8)}.time-line .dates-wrap .date.active+.date .date-year p{transform:scale(.6)}.time-line .dates-wrap .date.active .date-year{opacity:1}.time-line .dates-wrap .date.active .date-year:before{width:calc(200% - 11px)}.time-line .dates-wrap .date.active .date-year:after{transform:scale(1)}.time-line .dates-wrap .date.active .date-year p{transform:scale(1.2)}.time-line .dates-wrap .date.active .date-content{transform:scale(1);visibility:visible}.time-line .dates-wrap .date.active .date-content:after{transition-delay:200ms;opacity:1;transform:scaleY(1)}.time-line .dates-wrap .date.active .date-content div{transition-delay:200ms;opacity:1;transform:translateY(0) scale(1)}@media screen and (max-width:1366px){.time-line .dates-wrap{left:calc(50vw - 160px)}}@media screen and (max-width:992px){.time-line .dates-wrap{left:calc(50vw - 190px)}.controls{left:400px;top:-48px}.time-line .dates-wrap .date .date-year{opacity:0}}@media screen and (max-width:580px){.time-line{height:550px}.time-line .dates-wrap{left:calc(50vw - 120px)}.time-line .dates-wrap .date .date-content{width:380px}.controls.next{right:185px}.controls{left:170px;top:0}}@media screen and (max-width:479px){.time-line .dates-wrap{left:calc(50vw - 110px)}.time-line .dates-wrap .date .date-content{width:280px}.controls{left:130px;top:0}.controls.next{right:135px}}