:root{color:#ffffffde;--color_w:#fff;--bg_color:#2b2b2b;--top_bar_bg:#2b2b2bb5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--fsize:16px;--fs-h2:40px;--fs-title:1.5em;--fs-hrono:14px;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:#fff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#fff}body{background:var(--bg_color);min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}#app{width:100%}#main{text-align:center;width:96%;max-width:1570px;margin:0 auto;padding:0 2%;position:relative}button{cursor:pointer;color:var(--color_w);background:0 0;border:1px solid #ffffff42;border-radius:8px;padding:.5em .8em;font-family:inherit;font-size:1em;font-weight:500;line-height:1;transition:border-color .25s;overflow:hidden}button:hover{border-color:#fff}input:focus,input:focus-visible{outline:2px solid #ffffff71}button:focus,button:focus-visible{outline:1px solid #fff}.sticky{z-index:10;position:sticky;top:0}#app{position:relative}.logo{z-index:11;position:relative}.logo a{color:var(--color_w);will-change:filter;transition:filter .5s}.logo a:hover{color:var(--color_w);filter:drop-shadow(0 0 2em #fffa)}.slogan{text-align:center;margin-bottom:-24px;font-size:14px;position:absolute;top:56px;left:50%;transform:translate(-50%)}.film_list h2{font-size:var(--fs-h2);text-align:center;line-height:1.03}.film_list .title{font-size:var(--fs-title);text-align:center;line-height:.97}.film_list .film img{border-radius:34px}.inline{align-items:stretch;display:flex}.top_bar{background:linear-gradient(180deg,var(--bg_color),var(--top_bar_bg));text-shadow:1px 0 2px #000;padding:7px 0 2px;transition:all .8s;animation:linear both adjust-header;animation-timeline:scroll(root);animation-range:0 100px}.top_bar strong{margin-left:5px}.top_bar .active{background:#ffffff4f;outline:1px solid #fff}.top_bar button{text-shadow:1px 0 2px #000}@keyframes adjust-header{to{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:linear-gradient(#000,#00000042);border:none;border-radius:0 0 10px 10px;box-shadow:0 2px 10px #0000001a}}.search{margin-right:20px;position:relative}.search .search_bar{position:relative}.search input{text-indent:10px;width:278px;height:21px;font-size:var(--fsize);text-align:left;border:1px solid #ffffff1c;border-radius:8px;margin-bottom:7px;margin-right:12px;padding:5px}.search .btn_cl{vertical-align:middle;width:24px;display:inline-block;position:absolute;top:-3px;right:21px}.search .btn_cl button{vertical-align:baseline;text-box-trim:trim-end;color:#585858;height:28px;text-shadow:none;padding:6px 3px;font-size:25px;line-height:10px;display:block;overflow:hidden}.search .btn_cl button:hover{color:#000}.counts{text-align:left;position:absolute;top:20px;left:40px}.franchise{margin-bottom:2rem}.franchise h2{margin-bottom:1rem;padding-bottom:.5rem;scroll-margin-block-start:120px}.franchise-films{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));justify-content:center;justify-items:center;gap:1rem;width:100%;display:grid}#main{transition:all .4s}#main.open{width:auto;margin:0 auto 0 210px;transition:all .4s}#main.open .franchise-films{grid-template-columns:repeat(5,1fr)}.film{text-align:center;background:#fafff410;border:1px solid #dddddd42;border-radius:18px;flex-direction:column;justify-content:space-between;align-items:center;padding:1rem;transition:transform .2s;display:flex;position:relative;overflow:hidden}.film .g{margin-bottom:8px;font-size:14px;line-height:14px;display:block}.film .year{font-size:17px;font-weight:500;display:block}.film .d{opacity:0;color:#fff;-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);z-index:-1;background:#00000080;border-radius:10px 10px 18px 18px;flex-direction:column;justify-content:flex-end;padding:15px;font-size:14px;font-weight:500;line-height:1.2;transition:all .2s;display:flex;position:absolute;bottom:-15px;left:0;right:0;overflow-y:hidden}.film .d p{scroll-behavior:smooth;margin-bottom:0;display:flex}.film .d p::-webkit-scrollbar{width:6px}.film .d p::-webkit-scrollbar-track{background:0 0}.film .d p::-webkit-scrollbar-thumb{background-color:#8383838e;border:1px solid #0000;border-radius:20px}.film .d .btns{justify-content:space-around;padding-top:10px;display:flex}.film .d .btns button{border:none;outline:none}.film .d .btns svg{fill:#ffffff62;width:20px;height:20px}.film .d .btns .btn_bookmark.set svg{fill:#40efffaf}.film .d .btns .btn_watched.set svg{fill:#00ff1599}.film .d .btns .btn_favorite.set svg{fill:#ffb940de}.film .d .btns .btn_bookmark.set:hover svg{fill:#40efffe3}.film .d .btns .btn_watched.set:hover svg{fill:#00ff15da}.film .d .btns .btn_favorite.set:hover svg{fill:#ffbd4a}.film .d .btns button:hover svg{fill:#fff}.film .title{text-shadow:2px 0 2px #0000009e;margin-bottom:.2rem;margin-left:-14px;margin-right:-14px;font-weight:700}.film .title .h{font-size:var(--fs-hrono);margin-bottom:-8px;font-style:normal;font-weight:400;position:relative;top:-8px}.film:hover .d{z-index:2;opacity:1;transition:all .5s .4s;bottom:0}.film .img{transition:transform 3s 1s;position:relative;transform:scale(1)}.film .img img{border-radius:21px 21px 15px 15px;width:100%;height:auto}.franchise-title{border-bottom:2px solid #cccccc13;margin:2rem 0 1rem;padding-bottom:.5rem}.franchise-title:first-child{margin-top:0}.user_info{text-align:right;z-index:11;width:180px;position:absolute;top:-10px;right:40px}.user_info button{text-align:right;border:none;outline:1px solid #0000;margin-bottom:1px;padding:4px 10px;font-weight:400;transition:all .5s;display:inline-block}.user_info button:hover{outline:1px solid #ffffff5b}.user_info div,.user_info span{vertical-align:top;border-radius:8px;margin-bottom:2px;padding:0 2px}.user_info svg{vertical-align:middle;width:18px;height:18px;position:relative;top:-1px}.user_info .icon_watched{fill:#00ff15da}.user_info .icon_like{fill:#ffb940de}.user_info .icon_bookmark{fill:#40efffaf}.film.bookmark,.btns .bookmark,.user_info .bookmark{background:#00ceff2e;border-color:#73f3ff;outline:1px solid #73f3ff}.film.watched,.btns .watched,.user_info .watched{background:#4b74205d;border-color:#13f12662;outline:1px solid #13f12662}.film.favorite,.btns .favorite,.user_info .favorite{background:#ffd43129;border-color:#ffb940de;outline:1px solid #ffb940de}.filters{gap:10px;height:15px;font-size:24px;display:flex}.filters li{cursor:pointer;margin:0;padding:0;list-style:none}.genre_bar{margin-top:5px;display:none}.genre_bar.open{display:block}.genre_bar button{margin:0 3px 3px 0;padding:0 .8rem 4px;font-size:.9rem;font-weight:400}.filter_bar{margin:7px;padding-left:20px;line-height:1.2}.sort_bar .ico{fill:#fff;vertical-align:bottom;width:18px;margin:0 3px 0 0}.sort_bar button{margin-bottom:5px}.sort_bar button svg{vertical-align:top}.scroll{scroll-behavior:smooth;padding-right:6px}.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-track{background:0 0}.scroll::-webkit-scrollbar-thumb{background-color:#616161ce;border:1px solid #0000;border-radius:20px}.fr_map_close{z-index:12;display:none}.fr_map{text-align:left;z-index:12;align-content:space-evenly;width:210px;height:100vh;padding:0;transition:all .3s;display:none;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.fr_map .wrap{padding:20px 5px 20px 0}.fr_map h2{text-align:center}.fr_map.open{display:block}.fr_map a{color:#ccc;background:0 0;padding-left:10px;padding-right:15px;transition:all .5s;display:block}.fr_map a:hover{color:#fff;text-indent:2px;background:linear-gradient(90deg,#ffffff42,#0000)}@keyframes fade_in{0%{opacity:0;bottom:-15px}to{opacity:1;bottom:0}}@keyframes img_film_in{0%{top:0;transform:scale(1)}to{transform:scale(1.04)}}@keyframes img_film_out{0%{top:13px;transform:scale(1.04)}to{top:0;transform:scale(1)}}@keyframes fade_out{0%{opacity:1;display:none;bottom:0}to{opacity:0;display:block;bottom:-15px}}.add-film-form input,.add-film-form textarea{color:#fff;background:0 0}.tg_bot{cursor:pointer;z-index:15;background:#93939345;border:1px solid #ffffff36;border-radius:9px;padding:4px 10px 6px 40px;position:absolute;top:-5px;right:200px;box-shadow:1px 1px 5px #0000001a}.tg_bot span{transition:all .4s;position:relative;left:0}.tg_bot svg{position:absolute;top:0;left:4px}.tg_bot:hover span{left:-4px}.scroll-to-top{color:#fff;cursor:pointer;opacity:0;visibility:hidden;z-index:11;background:#7d7c7c80;border:none;border-radius:50%;justify-content:center;align-items:center;width:4rem;height:4rem;transition:all .3s;display:flex;position:fixed;bottom:4rem;right:4rem;overflow:hidden;transform:translateY(1rem);box-shadow:0 2px 10px #0003}.scroll-to-top svg{border-radius:50%;transform:scale(2)}.scroll-to-top:hover{background:#b1b1b180;transform:translateY(-.25rem);box-shadow:0 4px 15px #0000004d}.scroll-to-top:active{transform:translateY(0)}.scroll-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.hide{display:none}@media (max-width:768px){.scroll-to-top{width:3rem;height:3rem;bottom:3rem;right:1rem}}body{background-color:#000;background-image:url(https://kinofilter.ru/bg_1080.jpg);background-position:50%;background-repeat:repeat-x;background-size:cover;background-attachment:fixed}#app{background:#00000073}.film{-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);background:#dbdbdb1c;padding:1rem .7rem .4rem}.top_bar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#dbdbdb1c;border:1px solid #dddddd42;border-radius:10px;margin-bottom:.6rem;padding-left:10px}.franchise-films{gap:.7rem}@media (max-width:1370px){.inline{flex-direction:column}.franchise-films{grid-template-columns:repeat(4,1fr)}.sticky{position:relative}#main.open .franchise-films{grid-template-columns:repeat(4,1fr)}}@media (max-width:1000px){.inline{flex-direction:column}.franchise-films{grid-template-columns:repeat(3,1fr)}.sticky{position:relative}#main.open .franchise-films{grid-template-columns:repeat(2,1fr)}.tg_bot{top:-30px;right:50%;transform:translate(50%)}}@media (max-width:800px){.franchise-films{--fs-title:17px;--fsize:12px;grid-template-columns:repeat(2,1fr)}#main.open .franchise-films{grid-template-columns:repeat(2,1fr)}#main{width:96%;padding:0 2%}}@media (max-width:500px){.tg_bot{top:-66px}.search{text-align:center;margin-bottom:7px;margin-right:0;position:relative}.search input{width:90%}.genre_bar button{padding:5px .8rem 7px}.search .btn_cl{display:block}.search .btn_cl button{z-index:1;color:#000;border-color:#000;position:absolute;top:1px;right:4%}.logo{margin:80px 0 85px}.slogan{width:inherit;top:-25px}.counts{top:70px;left:5%}.user_info{top:57px;right:4%}.top_bar .inline{flex-direction:column-reverse}.sort_bar{flex-wrap:wrap;justify-content:space-evenly;align-items:baseline;display:flex}.sort_bar button{width:45%}.sort_bar strong{width:90%;line-height:2.4rem;display:block}.sort_bar strong a{line-height:30px}.fr_map_close{background:#000000db;border-radius:0 10px 10px 0;outline:none;width:30px;height:100px;transition:all .3s;display:none;position:fixed;top:80%;left:210px;transform:translateY(-50%);border:none!important}.fr_map_close:active,.fr_map_close:focus{outline:none}.fr_map_close.swap{left:0}.fr_map_close.open{display:block}.fr_map_close svg{fill:#fff;width:13px;position:relative;left:-5px}#main.open{margin:0}.fr_map.swap{left:-215px}.fr_map{background:#000000db}.fr_map .wrap{padding-top:60px}.fr_map a{padding-top:2px;padding-bottom:2px}.franchise-films{--fs-title:20px;--fsize:12px;grid-template-columns:repeat(2,1fr);gap:5px}.franchise h2{scroll-margin-block-start:75px;font-size:26px}.top_bar,.film{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#cbc3c33b!important}.film{padding:5px}.film .year{font-size:14px}.film .title{overflow-wrap:break-word;flex-direction:column;align-content:center;align-items:center;min-height:19px;margin-left:-6px;margin-right:-6px;padding-top:5px;font-size:1.14rem;display:flex}.film .title .h{font-size:11px;font-weight:600}.film .d{padding:3px;font-size:11px}.film .d p{max-height:30vh;margin-bottom:0;display:block;overflow:auto}.film .meta{flex-direction:column-reverse;place-content:stretch space-evenly;align-items:center;font-size:12px;display:flex}.film .img{padding:0 5px}}@media (max-width:400px){.franchise-films{--fs-title:20px;--fsize:12px}.franchise h2{font-size:26px}}@media (max-width:320px){.logo a{font-size:32px}.logo{margin:80px 0 85px}}
