/* Start custom CSS for html, class: .elementor-element-4f98679 */.stylish-bar { color: #fff; display: flex; height: 200px; font-family: "Adoma", Sans-serif;}
.stylish-bar span { height: 10px; width: 20%; position: relative; margin-top: 120px; }

.stylish-bar span a.empty { display: block; float: right; position: absolute; right: -13px; bottom: -8px; right: 50%;}
.stylish-bar span a.empty:before { content: attr(data-after); position: absolute; top: -80px; color: #FFFFFF; font-size: 30px; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 0.3; }
.stylish-bar span a.empty:hover:before { content: attr(data-after); position: absolute; font-size: 50px;top: -100px; color: #FFFFFF; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 1; }
.stylish-bar span a.empty .middle-dot { display: block; border: 3px solid #fff; width: 25px; height: 25px; border-radius: 100%; background: #000; margin: 0; position: relative }
.stylish-bar span a.empty .middle-dot:after { width: 5px; height: 5px; content: ''; position: absolute; left: 7px; top: 7px; background: #fff; border-radius: 100%; }
.stylish-bar span a.empty .middle-line { position: absolute; right: 11px; bottom: 24px; height: 30px; width: 3px; background: #fff; }
.stylish-bar span a.empty .middle-line:before { background: #fff; width: 11px; height: 11px; content: ''; position: absolute; border-radius: 100%; left: -4px; top: -4px; }
.stylish-bar span a.empty .middle-line:after { display: block; content: ''; width: 3px; height: 3px; background: #000; position: absolute; border-radius: 100%; }

.stylish-bar span a.notempty { display: block; float: right; position: absolute; right: -13px; bottom: -8px; right: var(--right-side); }
.stylish-bar span a.notempty:before { content: attr(data-after); position: absolute; top: -80px; color: #FFFFFF; font-size: 30px; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 0.3; }
.stylish-bar span a.notempty:hover:before { content: attr(data-after); position: absolute; font-size: 50px;top: -100px; color: #FFFFFF; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 1; }
.stylish-bar span a.notempty .middle-dot { display: block; border: 3px solid #333131; width: 25px; height: 25px; border-radius: 100%; background: #fff; margin: 0; position: relative }
.stylish-bar span a.notempty .middle-dot:after { width: 5px; height: 5px; content: ''; position: absolute; left: 7px; top: 7px; background: #fff; border-radius: 100%; }
.stylish-bar span a.notempty .middle-line { position: absolute; right: 11px; bottom: 24px; height: 30px; width: 3px; background: #fff; }
.stylish-bar span a.notempty .middle-line:before { background: #fff; width: 11px; height: 11px; content: ''; position: absolute; border-radius: 100%; left: -4px; top: -4px; }
.stylish-bar span a.notempty .middle-line:after { display: block; content: ''; width: 3px; height: 3px; background: #fff; position: absolute; border-radius: 100%; }
.stylish-bar span a.notempty:after { content: attr(data-year); position: absolute; top: 40px; color: #FFFFFF; font-size: 40px; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 0.3; }
.stylish-bar span a.notempty:hover:after { content: attr(data-year); position: absolute; top: 40px; color: #FFFFFF; font-size: 40px; left: 50%; transform: translate(-50%, 0); white-space: nowrap;opacity: 1; }

.stylish-bar span a.active:before { font-size: 50px; top: -100px; }
.stylish-bar span a.active:before,
.stylish-bar span a.active:after { color: #fff; opacity: 1; }

.stylish-bar span.grey { width: 14%; }
.stylish-bar span.brown { width: 12%; }
.stylish-bar span.green { width: 18%; }
.stylish-bar span.blue { width: 27%; }
.stylish-bar span.red { width: 30%; }



.stylish-bar-mobile { color: #fff; display: flex; position: absolute; top: 0; bottom: 0; right: 0; width: 30%; flex-direction: column; }
.stylish-bar-mobile span { width: 5px; height: 20%; position: relative; margin-top: 0; margin-right: 30%; }

.stylish-bar-mobile a { transform: rotate(-90deg); z-index: 99; }

.stylish-bar-mobile span a.empty { display: block; float: right; position: absolute; bottom: -8px; right: -10px; bottom: var(--right-side); }

.stylish-bar-mobile span a.empty .middle-dot { display: block; border: 3px solid #fff; width: 25px; height: 25px; border-radius: 100%; background: #000; margin: 0; position: relative }
.stylish-bar-mobile span a.empty .middle-dot:after { width: 5px; height: 5px; content: ''; position: absolute; left: 7px; top: 7px; background: #fff; border-radius: 100%; }
.stylish-bar-mobile span a.empty .middle-line { position: absolute; right: 11px; bottom: 24px; height: 30px; width: 3px; background: #fff; }
.stylish-bar-mobile span a.empty .middle-line:before { background: #fff; width: 11px; height: 11px; content: ''; position: absolute; border-radius: 100%; left: -4px; top: -4px; }
.stylish-bar-mobile span a.empty .middle-line:after { display: block; content: ''; width: 3px; height: 3px; background: #000; position: absolute; border-radius: 100%; }

.stylish-bar-mobile span a.notempty { display: block; float: right; position: absolute; right: -13px; bottom: -8px; right: var(--right-side); bottom: 96%; }
.stylish-bar-mobile span a.empty:before,
.stylish-bar-mobile span a.notempty:before { content: attr(data-after); position: absolute; color: #676868; font-size: 15px; transform: rotate(90deg); width: 70px; top: -60px; bottom: 0; left: 0; right: -70px; text-align: right; height: 40px; display: flex; flex-direction: column-reverse; }
.stylish-bar-mobile span a.notempty .middle-dot { display: block; border: 3px solid #333131; width: 25px; height: 25px; border-radius: 100%; background: #fff; margin: 0; position: relative }
.stylish-bar-mobile span a.notempty .middle-dot:after { width: 5px; height: 5px; content: ''; position: absolute; left: 7px; top: 7px; background: #fff; border-radius: 100%; }
.stylish-bar-mobile span a.notempty .middle-line { position: absolute; right: 11px; bottom: 24px; height: 30px; width: 3px; background: #fff; }
.stylish-bar-mobile span a.notempty .middle-line:before { background: #fff; width: 11px; height: 11px; content: ''; position: absolute; border-radius: 100%; left: -4px; top: -4px; }
.stylish-bar-mobile span a.notempty .middle-line:after { display: block; content: ''; width: 3px; height: 3px; background: #fff; position: absolute; border-radius: 100%; }
.stylish-bar-mobile span a.notempty:after { content: attr(data-year); position: absolute; top: 25px; color: #676868; font-size: 25px; left: 50%; transform: translate(-50%, 0); white-space: nowrap; font-weight: bold; }

.stylish-bar-mobile span a.active:before { font-size: 20px; top: -60px; }
.stylish-bar-mobile span a.active:before,
.stylish-bar-mobile span a.active:after { color: #fff; }

.stylish-bar-mobile span.grey { height: 14%; }
.stylish-bar-mobile span.brown { height: 12%; }
.stylish-bar-mobile span.green { height: 18%; }
.stylish-bar-mobile span.blue { height: 27%; }
.stylish-bar-mobile span.red { height: 30%; }

.grey { background: #676868; }
.brown { background: #654720; }
.green { background: #627438; }
.blue { background: #99f9; }
.red { background: #651d2a; }

.grey.active { background: #d3d3d3;}
.brown.active { background: #fbad4a;}
.green.active { background: #9fc14e;}
.blue.active { background: #9999ff;}
.red.active { background: #fb4361;}/* End custom CSS */