@charset "UTF-8";
/* CSS Document */

#with-without-animation{position:relative;width:1440px;height:calc(0.5055555555555555 * 1440px);max-width:100vw;max-height:100vw;margin:0 auto;top:-60px;margin-bottom:-60px}@media screen and (max-width: 1400px){#with-without-animation{top:-4vw}}

@media screen and (max-width: 800px){
    #with-without-animation{transform:scale(1.2) translate(-8px, 0);top:0}
#with-without-animation .label{font-size:10px;letter-spacing:0.25px;}
}
@media screen and (max-width: 500px){
    #with-without-animation{transform:scale(1.2) translate(-8px, 0);top:0}
#with-without-animation .label{display: none;}
#with-without-animation .label:after{display: none;}
}
#with-without-animation .label{font-size:12px;line-height:14px;text-align:center;letter-spacing:1.25px;color:#000000;padding:6px 17px 6px 20px;position:absolute;background:#ffffff;box-shadow:5px 5px 20px rgba(123,150,184,0.2);z-index:5;border-radius:5px;top:40%;left:29%;transition:opacity 0.75s;opacity:0;pointer-events:none}

@media screen and (max-width: 1000px){#with-without-animation .label{transform:translate(-1px, -2px)}}

#with-without-animation .label:after{content:"";width:10px;height:10px;background-color:#28282a;border-radius:50%;position:absolute;left:-5px;top:9px}

#with-without-animation #label-1{top:25.5%;left:29%}#with-without-animation #label-2{top:32.3%;left:38.7%}#with-without-animation #label-3{top:43.85%;left:35.6%}#with-without-animation #label-4{top:53.7%;left:26.7%}#with-without-animation #label-5{left:38.6%;top:64.15%}#with-without-animation #label-6{top:71.7%;left:28%}#with-without-animation-ao-1{left:18.61111111111111%;top:22.939560439560438%;width:62.708333333333336%;opacity:1;z-index:0;position:absolute;cursor:pointer}#with-without-animation-ao-1:after{left:0;width:0%;bottom:0;z-index:-1;height:4px;content:"look at me";position:absolute;background:linear-gradient(to right, #2f73da 0%, #6bcddb 100%);transition:width 0.25s}.reverse-animate *{animation-direction:reverse}.with-without-animation-trigger #with-without-animation-ao-1{animation-name:with-without-animation-ao-1-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-1-animation{0%{left:18.61111111111111%;top:22.939560439560438%;width:62.708333333333336%;opacity:1;z-index:0}25%{left:18.645833333333332%;top:23.008241758241756%;width:62.708333333333336%;opacity:0;z-index:0}100%{left:18.61111111111111%;top:22.939560439560438%;width:62.708333333333336%;opacity:0;z-index:0}}#with-without-animation-ao-2{left:19.54861111111111%;top:22.046703296703296%;width:60.90277777777777%;opacity:0;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-2{animation-name:with-without-animation-ao-2-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-2-animation{0%{left:19.54861111111111%;top:22.046703296703296%;width:60.90277777777777%;opacity:0;z-index:0}75%{left:19.54861111111111%;top:22.046703296703296%;width:60.90277777777777%;opacity:0;z-index:0}100%{left:19.54861111111111%;top:22.046703296703296%;width:60.90277777777777%;opacity:1;z-index:0}}#with-without-animation-ao-3{left:44.375%;top:42.71978021978022%;width:17.22222222222222%;opacity:0;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-3{animation-name:with-without-animation-ao-3-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-3-animation{0%{left:44.375%;top:42.71978021978022%;width:17.22222222222222%;opacity:0;z-index:0}61%{left:44.375%;top:42.71978021978022%;width:17.22222222222222%;opacity:0;z-index:0}89%{left:44.375%;top:42.71978021978022%;width:17.22222222222222%;opacity:1;z-index:0}100%{left:44.375%;top:42.71978021978022%;width:17.22222222222222%;opacity:1;z-index:0}}#with-without-animation-ao-4{left:17.291666666666668%;top:18.40659340659341%;width:14.930555555555555%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-4{animation-name:with-without-animation-ao-4-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-4-animation{0%{left:17.291666666666668%;top:18.40659340659341%;width:14.930555555555555%;opacity:1;z-index:0}25%{left:17.291666666666668%;top:18.40659340659341%;width:14.930555555555555%;opacity:1;z-index:0}75%{left:16.11111111111111%;top:12.362637362637363%;width:14.930555555555555%;opacity:1;z-index:0}100%{left:16.11111111111111%;top:12.362637362637363%;width:14.930555555555555%;opacity:1;z-index:0}}#with-without-animation-ao-5{left:25.694444444444443%;top:66.8956043956044%;width:11.458333333333332%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-5{animation-name:with-without-animation-ao-5-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-5-animation{0%{left:25.694444444444443%;top:66.8956043956044%;width:11.458333333333332%;opacity:1;z-index:0}25%{left:25.694444444444443%;top:66.8956043956044%;width:11.458333333333332%;opacity:1;z-index:0}75%{left:28.541666666666664%;top:18.40659340659341%;width:11.458333333333332%;opacity:1;z-index:0}100%{left:28.541666666666664%;top:18.40659340659341%;width:11.458333333333332%;opacity:1;z-index:0}}#with-without-animation-ao-6{left:69.44444444444444%;top:13.324175824175825%;width:13.402777777777777%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-6{animation-name:with-without-animation-ao-6-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-6-animation{0%{left:69.44444444444444%;top:13.324175824175825%;width:13.402777777777777%;opacity:1;z-index:0}25%{left:69.44444444444444%;top:13.324175824175825%;width:13.402777777777777%;opacity:1;z-index:0}75%{left:25%;top:32.417582417582416%;width:13.402777777777777%;opacity:1;z-index:0}100%{left:25%;top:32.417582417582416%;width:13.402777777777777%;opacity:1;z-index:0}}#with-without-animation-ao-7{left:55.208333333333336%;top:27.335164835164832%;width:15.347222222222223%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-7{animation-name:with-without-animation-ao-7-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-7-animation{0%{left:55.208333333333336%;top:27.335164835164832%;width:15.347222222222223%;opacity:1;z-index:0}25%{left:55.208333333333336%;top:27.335164835164832%;width:15.347222222222223%;opacity:1;z-index:0}75%{left:12.5%;top:40.52197802197802%;width:15.347222222222223%;opacity:1;z-index:0}100%{left:12.5%;top:40.52197802197802%;width:15.347222222222223%;opacity:1;z-index:0}}#with-without-animation-ao-8{left:33.68055555555556%;top:44.505494505494504%;width:13.402777777777777%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-8{animation-name:with-without-animation-ao-8-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-8-animation{0%{left:33.68055555555556%;top:44.505494505494504%;width:13.402777777777777%;opacity:1;z-index:0}25%{left:33.68055555555556%;top:44.505494505494504%;width:13.402777777777777%;opacity:1;z-index:0}75%{left:17.569444444444443%;top:64.83516483516483%;width:13.402777777777777%;opacity:1;z-index:0}100%{left:17.569444444444443%;top:64.83516483516483%;width:13.402777777777777%;opacity:1;z-index:0}}#with-without-animation-ao-9{left:48.19444444444444%;top:53.98351648351648%;width:13.402777777777777%;opacity:1;z-index:0;position:absolute;cursor:pointer}.with-without-animation-trigger #with-without-animation-ao-9{animation-name:with-without-animation-ao-9-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-9-animation{0%{left:48.19444444444444%;top:53.98351648351648%;width:13.402777777777777%;opacity:1;z-index:0}25%{left:48.19444444444444%;top:53.98351648351648%;width:13.402777777777777%;opacity:1;z-index:0}75%{left:28.125%;top:61.26373626373627%;width:13.402777777777777%;opacity:1;z-index:0}100%{left:28.125%;top:61.26373626373627%;width:13.402777777777777%;opacity:1;z-index:0}}#with-without-animation-ao-10{left:38.958333333333336%;top:17.582417582417584%;width:13.402777777777777%;opacity:1;z-index:0;position:absolute}.with-without-animation-trigger #with-without-animation-ao-10{animation-name:with-without-animation-ao-10-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-10-animation{0%{left:38.958333333333336%;top:17.582417582417584%;width:13.402777777777777%;opacity:1;z-index:0}25%{left:38.958333333333336%;top:17.582417582417584%;width:13.402777777777777%;opacity:1;z-index:0}75%{left:72.36111111111111%;top:11.263736263736265%;width:13.402777777777777%;opacity:1;z-index:0}100%{left:72.36111111111111%;top:11.263736263736265%;width:13.402777777777777%;opacity:1;z-index:0}}#with-without-animation-ao-11{left:65.34722222222223%;top:62.362637362637365%;width:14.374999999999998%;opacity:1;z-index:0;position:absolute}.with-without-animation-trigger #with-without-animation-ao-11{animation-name:with-without-animation-ao-11-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-11-animation{0%{left:65.34722222222223%;top:62.362637362637365%;width:14.374999999999998%;opacity:1;z-index:0}25%{left:65.34722222222223%;top:62.362637362637365%;width:14.374999999999998%;opacity:1;z-index:0}75%{left:76.25%;top:27.609890109890113%;width:14.374999999999998%;opacity:1;z-index:0}100%{left:76.25%;top:27.609890109890113%;width:14.374999999999998%;opacity:1;z-index:0}}#with-without-animation-ao-12{left:14.374999999999998%;top:45.604395604395606%;width:13.402777777777777%;opacity:1;z-index:0;position:absolute}.with-without-animation-trigger #with-without-animation-ao-12{animation-name:with-without-animation-ao-12-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-12-animation{0%{left:14.374999999999998%;top:45.604395604395606%;width:13.402777777777777%;opacity:1;z-index:0}25%{left:14.374999999999998%;top:45.604395604395606%;width:13.402777777777777%;opacity:1;z-index:0}75%{left:76.04166666666666%;top:49.45054945054945%;width:13.402777777777777%;opacity:1;z-index:0}100%{left:76.04166666666666%;top:49.45054945054945%;width:13.402777777777777%;opacity:1;z-index:0}}#with-without-animation-ao-13{left:76.875%;top:42.582417582417584%;width:11.180555555555555%;opacity:1;z-index:0;position:absolute}.with-without-animation-trigger #with-without-animation-ao-13{animation-name:with-without-animation-ao-13-animation;animation-timing-function:ease-in-out;animation-duration:2.5s;animation-delay:0s;animation-fill-mode:forwards}@keyframes with-without-animation-ao-13-animation{0%{left:76.875%;top:42.582417582417584%;width:11.180555555555555%;opacity:1;z-index:0}25%{left:76.875%;top:42.582417582417584%;width:11.180555555555555%;opacity:1;z-index:0}75%{left:72.36111111111111%;top:68.68131868131869%;width:11.180555555555555%;opacity:1;z-index:0}100%{left:72.36111111111111%;top:68.68131868131869%;width:11.180555555555555%;opacity:1;z-index:0}}

@media screen and (max-width: 798px){
    .with-without{margin-bottom:40px}
    .with-without .wrapper li h4{font-size:14px;line-height:24px;letter-spacing:0.25px;font-weight: normal;}
}

.with-without > ul{list-style: none !important;line-height: 1.6 !important;padding:0 !important;}

.with-without .wrapper{display:flex;justify-content:center;text-align:center;margin:0 auto;width:560px;max-width:100%;border-bottom:solid 1px #d4d4d4;position:relative;z-index:3;flex-direction: row;align-items: flex-start;}

.with-without .wrapper li{width:100%;position:relative;cursor:pointer;transition:min-height 0.3s ease-out;min-height:42px;list-style-type:none;}

.with-without .wrapper li h4{font-weight:bold;font-size:16px;letter-spacing:1.25px;line-height:24px;color:#cccccc;}

.with-without .wrapper li:after{left:0;width:0%;bottom:0;z-index:-1;height:4px;content:"";position:absolute;background:linear-gradient(to right, #81deef 0%, #5cffc1 100%);transition:width 0.25s;}

.with-without .wrapper li:hover h4{color:black}
.with-without .wrapper li:hover:after{width:100%}
.with-without .wrapper .active h4{color:black}
.with-without .wrapper .active:after{width:100%}
.with-without .path-animation-container{overflow:hidden}

@media screen and (max-width: 800px){
    .with-without .path-animation-container{height:49vw}
}