Не могу задать правильное поведение hover

#html #css #html5 #css3 #hover

Всем привет.
Почти сделал рейтинг со звездами, как вдруг проблема с наведением по ним...
Вот код - https://jsfiddle.net/dokgkxza/





    
        
        
        
        
        
        
        
        
        
        
        
    




С левой стороны на правую нормально работает, но если наоборот вести курсор то будет
подсвечиваться только первый элемент на который навел...

Добавил z-index: 20; к спан ховер, а к обычному спан z-index: 30; ... но это далеко
не идеал...
Код дубль 2 - https://jsfiddle.net/dokgkxza/1/
    

Ответы

Ответ 1

Вот работающий пример (только вместо звездочек кружочки)

.star-item span:hover ~ span label,
.star-item span:hover label,
.star-item span.checked label,
.star-item span.checked ~ span label {
    background:#F90;
    color:#FFF;
}


Как сделать звездочки без картинок на чистом css

А вобще как я понимаю это типовая задачка (даже в яндексе ее дают), есть смысл посмотреть
готовое решение и его повторить, не изобретая свой велосипед.


Ответ 2

Еще раз всем привет)))
Сделал я как нужно))) Большое спасибо Алексею Обухову, автору первого ответа.
Вся фишка оказалась во float: right; для класса star-item и в селекторе ~.
Вот код дубль 3 - https://jsfiddle.net/yhLrur49/



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.rating-new {
	position: relative;
	overflow: hidden;
}

.rating-new::after {
	content: "";
	display: block;
	padding-bottom: 10%;
}

.rating-new > ul {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NyA1LjI5MTY2NjciCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzkiCiAgICAgICBkPSJtIDUuMTU5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NDcsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IEwgMCwyOTMuNzI5NiBsIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODcsMC45MDM5OCAtMC4zMDQ1NjQ1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODc3LDEuOTM2NzcgLTEuMTI1ODcyNSwwLjYzODI5IDAuMjE1MDgyOSwtMS4zNTIwMyAtMC45MTA5NTMyNCwtMC45NTc1MiAxLjI1ODg4NzY0LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjYsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE5LDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzI0LC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjQsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MSwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODcsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODcsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNiwwLjE5NzE5IC0wLjkxMDk1MSwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDEwLjQ1MTA0MiwyOTMuNzI5NiAtMS43ODI1NjUxLC0wLjI3OTQxIC0wLjc5NzEyMjksLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzMywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODgsMC45MDM5OCAtMC4zMDQ1NjQ2LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzI1LDAuNjM4MjkgMC4yMTUwODI5LC0xLjM1MjAzIC0wLjkxMDk1MzIsLTAuOTU3NTIgMS4yNTg4ODc2LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjUsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE3LDAuOTU3NTIgMC4yMTUwODA4LDEuMzUyMDMgLTEuMTI1ODcyMywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTgiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAyMS4wMzQzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzIsMC42MzgyOSAwLjIxNTA4MiwtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTYsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODcyLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MywwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1MywtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNiwtMS4yMzAxNCAwLjU2MzAxNywxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzMsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0zIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjc0MzI3NyIKICAgICAgIGQ9Im0gMzEuNjE3NzA5LDI5My43Mjk2IC0xLjc4MjU2NiwtMC4yNzk0MSAtMC43OTcxMjIsLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzLDAuMjc5NDEgMS4yODk4NDIsMS4zNTU4NiAtMC4zMDQ1NjIsMS45MTQ1MyAxLjU5NDQwNywtMC45MDM5OCAxLjU5NDQwOCwwLjkwMzk4IC0wLjMwNDU2NSwtMS45MTQ1MyB6IG0gLTIuNTc5Njg4LDEuOTM2NzcgLTEuMTI1ODczLDAuNjM4MjkgMC4yMTUwODMsLTEuMzUyMDMgLTAuOTEwOTUzLC0wLjk1NzUyIDEuMjU4ODg4LC0wLjE5NzE5IDAuNTYzMDE2LC0xLjIzMDE0IDAuNTYzMDE3LDEuMjMwMTQgMS4yNTg3MjcsMC4xOTcxOSAtMC45MTA5NTMsMC45NTc1MiAwLjIxNTA4MiwxLjM1MjAzIC0xLjEyNTg3MywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTUiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAzNi45MDkzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMzIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSA0Mi4yMDEwNDIsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNyIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDQ3LjQ5MjcwOSwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MiwwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1NCwtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNywtMS4yMzAxNCAwLjU2MzAxNiwxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzIsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0xIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjk1NjU3NSIKICAgICAgIGQ9Im0gNTIuOTE2NjY3LDI5My43Mjk2IC0xLjgyODI3MiwtMC4yNzk0MSAtMC44MTc1NjIsLTEuNzQxODcgLTAuODE3NTYzLDEuNzQxODcgLTEuODI4MjcsMC4yNzk0MSAxLjMyMjkxNSwxLjM1NTg2IC0wLjMxMjM3MSwxLjkxNDUzIDEuNjM1Mjg5LC0wLjkwMzk4IDEuNjM1MjkxLDAuOTAzOTggLTAuMzEyMzc0LC0xLjkxNDUzIHogbSAtMi42NDU4MzQsMS45MzY3NyAtMS4xNTQ3NDEsMC42MzgyOSAwLjIyMDU5NywtMS4zNTIwMyAtMC45MzQzMTEsLTAuOTU3NTIgMS4yOTExNjgsLTAuMTk3MTkgMC41Nzc0NTMsLTEuMjMwMTQgMC41Nzc0NTIsMS4yMzAxNCAxLjI5MTAwMiwwLjE5NzE5IC0wLjkzNDMwOSwwLjk1NzUyIDAuMjIwNTk2LDEuMzUyMDMgLTEuMTU0NzQxLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMCIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	list-style: none;
}

.rating-new > ul > li:first-child {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 2;
	height: 100%;
}

.star-item {
	float: right;
  display: block;
	width: 10%;
	height: 100%;
}

.star-item > span {
	display: block;
	width: 10%;
	height: 100%;
  position: absolute;
  z-index: 20;
  cursor: pointer;
}

.star-item > span:hover {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;
}

.star-item:hover ~ .star-item > span {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover
}


	

		

		

		

		

		

		

		

		

		

		

		

	






Еще раз спасибо)))