");} /* Made */ .block.made {display: flex; justify-content: flex-start; align-items: center; height: 65px; padding: 0; color: #999;} .block.made::before {position: absolute; content: ''; top: 0; left: 0; width: 100px; height: 0; border-top: 1px solid #888;} .block.made span {color: #bbb;} .block.made a {color: #ddd; margin: 0 5px;} .block.made a:hover {text-decoration: underline;} .blockErr {background: #0069ff; color: #fff; padding: 15px 25px; border-radius: 50px;} div.t-wrap {overflow-x: auto;} /* Templates */ .tpl-cover .cover {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px;} .tpl-cover .cover * {z-index: 2;} .tpl-promo [cols="1"] {height: 100%;} .tpl-shadow {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; pointer-events: none; z-index: 1;} .tpl-about {display: flex; justify-content: flex-start; align-items: center;} .tpl-about .cover {width: calc(100% / 3); margin-right: 25px;} .tpl-about .tpl-content {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: calc(100% / 3 * 2 - 25px);} .why-we ul {list-style: none;} .why-we ul li {display: flex; justify-content: flex-start; align-items: center; margin: 0 !important; padding: 0 20px; width: 100%; background: #fff; border-left: 3px solid #becd00; box-shadow: 0 10px 20px rgb(0 0 0 / 5%);} .tpl .lock:before {content: ''; width: 0px; height: 0px;} div.timeRemaining {display: flex; flex-direction: column; justify-content: center; align-items: flex-end; color: #aaa; line-height: 1;} div.timeRemaining p {margin: 0;} div.timeRemaining ul.clockTimer {display: flex;} div.timeRemaining ul.clockTimer li {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 10px;} div.timeRemaining ul.clockTimer li::after {position: absolute; top: 3px; right: -7px; bottom: 0; margin: auto; content: ':'; font-weight: bold;} div.timeRemaining ul.clockTimer li:first-child::after {position: absolute; content: ''; right: -7px; top: 0; bottom: 0; width: 0; height: 100%; border-left: 1px dotted #ddd;} div.timeRemaining ul.clockTimer li:last-child::after {display: none;} div.timeRemaining ul.clockTimer li:first-child {padding-left: 0;} div.timeRemaining ul.clockTimer span:first-child {font-size: 1.5em; color: #becd00; font-weight: 500;} div.timeRemaining ul.clockTimer span.text {font-size: 12px; padding-left: 4px;} div.timeRemaining ul.clockTimer li:first-child span {color: #333;} @media screen and (min-width: 800px){ } /* MEDIA SCREEN */ @media screen and (max-width: 2560px){ header.leftbar {position: fixed; flex-direction: column; justify-content: flex-start; width: 450px; height: 100vh; padding: 50px 0; background: #fff;} #page content, .flex, .block, .site-body {max-width: 1500px;} /* div.text table[type] {width: 1500px;} */ footer .block {padding: 50px;} } @media screen and (max-width: 1920px){ header.leftbar {width: 20vw;} #page content, .flex, .block, .site-body {max-width: 1250px;} /* div.text table[type] {width: 1250px;} */ footer .block {padding: 50px;} } @media screen and (max-width: 1600px){ .side-nav.left-nav.fix-nav .flex, .side-nav.left-nav.fix-nav .block {max-width: 1100px;} } @media screen and (max-width: 1440px){ header.leftbar {width: 25vw;} .side-nav.left-nav.fix-nav header {width: 300px;} .side-nav.left-nav.fix-nav #page, .side-nav.left-nav.fix-nav footer {margin-left: 300px; width: calc(100% - 300px);} .side-nav.left-nav.fix-nav .flex, .side-nav.left-nav.fix-nav .block {max-width: 1000px;} } @media screen and (max-width: 1366px){ #page content, .flex, .block, .site-body {max-width: 1200px;} div.text table[type] {width: 1200px;} footer .block {padding: 50px;} } @media screen and (max-width: 1280px){ .left-nav.fix-nav header {left: -350px;} .left-nav.fix-nav header.active {left: 0;} .left-nav.fix-nav header #mobilenav {transform: translateX(0); top: 0;} .left-nav.fix-nav #page {margin-left: 0; width: 100%; padding-top: 50px;} .left-nav.fix-nav footer {margin-left: 0; width: 100%;} .side-nav.left-nav.fix-nav header #mobilenav {display: flex; opacity: 1; visibility: visible;} .side-nav.left-nav.fix-nav #page, .side-nav.left-nav.fix-nav footer {margin-left: 0px; width: 100%;} .side-nav.left-nav.fix-nav .flex, .side-nav.left-nav.fix-nav .block {max-width: 1200px;} #page content, .flex, .block, .site-body {max-width: 950px;} /* div.text table[type] {width: 1200px;} */ footer .block {padding: 50px;} } @media screen and (max-width: 1024px){ header {justify-content: flex-start; align-items: flex-start; overflow: hidden;} header.leftbar {position: fixed; width: 35vw; right: -35vw; transition: 0.5s; z-index: 90;} header.leftbar.active {right: 0;} header #mobilenav {display: flex; opacity: 1; visibility: visible;} header.leftbar.active #mobilenav {right: 0;} .top-nav header div.contacts {position: absolute; bottom: -35vh; height: 35vh; transition: 0.25s; z-index: 10;} .top-nav header div.contacts .flex {flex-direction: column; align-items: flex-start; padding: 25px;} .top-nav header div.contacts .flex > div {justify-content: flex-start;} .top-nav header div.contacts .flex > div.social-links {margin-top: 10px;} .top-nav header div.contacts:hover {top: auto; bottom: 0;} .top-nav header div.contacts .moreinfo {display: flex;} .top-nav header {height: 53px; transition: 0.5s; position: fixed; border-bottom: 1px solid #ddd; background: #f9f9f9;} .top-nav.dark-nav header {background: #111; border-bottom: 1px solid #444;} .top-nav header .moreinfo {visibility: hidden;} .top-nav header.active {height: 100vh;} .top-nav header.active .moreinfo {visibility: visible;} .top-nav header #mobilenav {top: 3px;} .top-nav header nav {justify-content: center; align-items: center; height: 50px; padding-top: 50px; width: 100%; border-top: 3px solid #becd00;} .top-nav header nav.fixed {position: relative; box-shadow: none;} .top-nav header nav ul.langs {margin-top: 20px;} .top-nav header nav .searchpanel {margin: 20px auto; max-width: unset;} .top-nav header nav .flex {overflow: auto; flex-direction: column; height: calc(100vh - 100px); padding: 0 30px; justify-content: flex-start; align-items: flex-start;} .top-nav header nav .flex > a {position: fixed; display: flex; justify-content: center; align-items: center; top: 3px; left: 15px; height: 50px; min-width: 50px;} .top-nav header nav .flex ul.main-nav {display: block; width: 100%; font-size: 19px; overflow: hidden; overflow-y: auto; margin-top: 20px;} .top-nav header nav .flex ul.main-nav li {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%;} .top-nav header nav .flex ul.main-nav li a {padding: 10px; justify-content: flex-start; text-align: left; width: calc(100% - 50px);} .top-nav header nav .flex ul.main-nav li i {font-size: 30px;} .top-nav header nav .flex ul.main-nav li ul {margin: 0; width: 100%; padding: 5px 10px; min-width: unset;} .top-nav header nav .flex ul.main-nav li:hover ul {position: relative;} .left-nav header, .side-nav header {width: 350px; height: 100vh; overflow: unset;} .left-nav header #mobilenav {top: 0; left: 350px; margin: 0; transform: translateX(0);} .left-nav header.active #mobilenav {left: 300px;} .side-nav.left-nav header #mobilenav {top: 0; right: 350px; margin: 0; transform: translateX(0);} .side-nav header.active #mobilenav {right: 300px;} .headmenu ul li.parent {width: 25%;} .headmenu ul li a, .headmenu ul li ul li a {font-size: 0.8em;} #page content, .flex, .block, .site-body {max-width: 950px;} div.text table[type] {width: 950px;} section {padding-left: 20px; padding-right: 20px;} section .flex {flex-direction: row;} footer .col {padding: 50px 0;} footer .block {padding: 25px;} footer .block .col {width: 100% !important; padding: 20px;} footer .col ul {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;} footer .col ul li a {padding: 5px 20px 5px 0;} .block.made {margin: 0 auto; width: calc(100% - 50px);} button#gofullscreen {display: none;} } @media screen and (max-width: 800px) { #page {padding-top: 50px;} .side-nav #page {padding-top: 0;} header.leftbar {width: 50vw; right: -50vw;} header.leftbar.active {right: 0;} [view=''] #page {padding-top: 0;} #page content, .flex, .block, .site-body {max-width: 750px;} /* div.text table[type] {width: 750px;} */ section .flex {flex-direction: column;} section h1 {font-size: 1.8em;} section h2 {font-size: 1.6em;} section h3 {font-size: 1.4em;} section h4 {font-size: 1.3em;} section h5 {font-size: 1.2em;} section h6 {font-size: 1em;} big {font-size: 1.8em;} .headmenu ul li a {width: 100%;} .headmenu ul li.parent {width: 33.33%;} .headmenu ul li a, .headmenu ul li ul li a {font-size: 0.8em;} nav div.share {bottom: 100px;} [cols='2'], [cols='3'], [cols='4'], [cols='5'], [cols='6'], [cols='7'], [cols='8'], [cols='9'], [col='2'], [col='3'], [col='4'], [col='5'], [col='6'], [col='7'], [col='8'], [col='9'] {grid-template-columns: repeat(2, 1fr);} div.text table[type], div.text table[type] tbody, div.text table[type] tr, div.text table[type] td {display: block;} div.text table[type] td {width: 100%; height: auto;} div.text table[type][col='2'] td, div.text table[type][col='3'] td, div.text table[type][col='4'] td, div.text table[type][col='5'] td {width: 100%;} #comment-type field .emoji .set-emoji {top: 20px;} } @media screen and (max-width: 540px){ header.leftbar {width: 100vw; right: -100vw;} header.active {right: 0;} #page content, .flex, .block, .site-body {width: 100%;} div.text table[type] {width: 100%;} .headmenu ul li.parent {width: 50%;} .headmenu ul li a, .headmenu ul li ul li a {font-size: 0.8em;} section:not(#breadcrumbs) {padding-top: 25px; padding-bottom: 25px;} #page content, section > .block, section > .flex {padding: 0;} section .case:first-child {min-width: 100%; width: 100%;} section .case:last-child {min-width: 100%; width: 100%;} section .flex .list .cols {padding: 0;} section .list {width: 100%;} [cols='2'], [cols='3'], [cols='4'], [cols='5'], [cols='6'], [cols='7'], [cols='8'], [cols='9'], [col='2'], [col='3'], [col='4'], [col='5'], [col='6'], [col='7'], [col='8'], [col='9'] {grid-template-columns: 100%;} [cols='1'].cols-m2, [cols='2'].cols-m2, [cols='3'].cols-m2, [cols='4'].cols-m2, [cols='5'].cols-m2, [cols='6'].cols-m2, [cols='7'].cols-m2, [cols='8'].cols-m2, [cols='9'].cols-m2, [cols='1'].cols-m2, [col='2'].cols-m2, [col='3'].cols-m2, [col='4'].cols-m2, [col='5'].cols-m2, [col='6'].cols-m2, [col='7'].cols-m2, [col='8'].cols-m2, [col='9'].cols-m2 {grid-template-columns: repeat(2, 1fr);} [cols='3'].cols-m3, [cols='4'].cols-m3, [cols='5'].cols-m3, [cols='6'].cols-m3, [cols='7'].cols-m3, [cols='8'].cols-m3, [cols='9'].cols-m3, [col='3'].cols-m3, [col='4'].cols-m3, [col='5'].cols-m3, [col='6'].cols-m3, [col='7'].cols-m3, [col='8'].cols-m3, [col='9'].cols-m3 {grid-template-columns: repeat(3, 1fr);} [cols].cols-m4, [col].cols-m4 {grid-template-columns: repeat(4, 1fr);} [cols].cols-m5, [col].cols-m5 {grid-template-columns: repeat(5, 1fr);} [cols].cols-m6, [col].cols-m6 {grid-template-columns: repeat(6, 1fr);} [cols].gap20, section [col].gap20 {grid-gap: 10px;} [cols].gap30, section [col].gap30 {grid-gap: 15px;} [cols].gap40, section [col].gap40 {grid-gap: 20px;} [cols].gap50, section [col].gap50 {grid-gap: 25px;} [cols].gap10.cols-m2, [cols].gap20.cols-m2, [cols].gap30.cols-m2, [cols].gap40.cols-m2, [cols].gap50.cols-m2, [cols].gap10.cols-m3, [cols].gap20.cols-m3, [cols].gap30.cols-m3, [cols].gap40.cols-m3, [cols].gap50.cols-m3 {grid-gap: 10px;} field {width: 100%;} .case div.comments form field {margin: 0;} send {margin: 0; width: 100%;} .userLogin form field send {width: auto;} footer .flex {padding: 50px 30px;} footer .flex > div {padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.3);} footer .flex > div:last-child {border-bottom: none;} .tpl-promo [cols="1"] {height: 600px;} .tpl-cover {height: unset !important;} .tpl-cover .cover {padding: 25px;} .tpl-about {flex-direction: column;} .tpl-about .cover {width: 100%; margin: 0;} .tpl-about .tpl-content {width: 100%; margin-top: 20px;} body > modal > div.view-img {width: 100vw; height: 100vh; max-height: calc(100vh - 100px); max-width: 100vw;} body > modal > div.view-img img {max-height: calc(100vh - 70px); max-width: calc(100vw - 70px);} body > modal > div.view-img p {} modal .booking {width: 100%;} .coockie {max-width: 260px; flex-direction: column;} .coockie p {margin: 0 0 10px 0;} #cabinet {width: 100vw;} #cabinet:empty {right: -100vw;} } #adminpanel {position: fixed; left: -31px; bottom: 80px; padding: 10px; background: linear-gradient(135deg, #0069ff, #4c00d8); border-radius: 0 0 8px 8px; font-family: 'Tahoma'; transform: rotate(-90deg); box-shadow: 0 0 50px rgb(0 0 0 / 40%); color: #fff; z-index: 999;} form dir {width: calc(100% - 40px); margin: 0; padding: 0;} form dir div {position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 40px; padding: 0 15px; white-space: nowrap; overflow: hidden;} form dir div::after {position: absolute; content: 'ⵗ'; right: 0; font-size: 20px; padding: 10px; background: #fff; border-radius: 10px;} form dir ul {display: none; position: absolute; z-index: 100; width: calc(100% - 50px); background: #fafafa; margin: 0 !important; border-radius: 6px; border: 1px solid #aaa; box-shadow: 0 0 50px rgb(0 0 0 / 20%); overflow: hidden;} form dir ul li {display: flex; justify-content: flex-start; align-items: center; position: relative; padding: 0 10px 0 35px !important; width: 100%; height: 40px; border-bottom: 1px dashed #ddd; font-size: 15px !important; user-select: none;} form dir ul li:hover {cursor: pointer; background: #fff;} form dir ul li::before {position: absolute; display: block; content: ''; left: 10px; width: 15px; height: 15px; border-radius: 7.5px; border: 2px solid #ddd; margin-right: 5px;} form dir ul li.select::before {background: #becd00;} form dir:hover ul {display: block;}/* © LeoCRAFT Digital "Catana", CSS For You Site */ .wc::-scrollbar {background: #222;} .wc::-scrollbar-track {background: #222;} .wc::-scrollbar-thumb {background: #bbb; border-radius: 0px;} .wc::-scrollbar-thumb:hover {background: #00aaaa;} .wc::-webkit-scrollbar {background: #222;} .wc::-webkit-scrollbar-track {background: #222;} .wc::-webkit-scrollbar-thumb {background: #bbb; border-radius: 0px;} .wc::-webkit-scrollbar-thumb:hover {background: #00aaaa;} .wc::-moz-scrollbar {background: #222;} .wc::-moz-scrollbar-track {background: #222;} .wc::-moz-scrollbar-thumb {background: #bbb; border-radius: 0px;} .wc::-moz-scrollbar-thumb:hover {background: #00aaaa;} ::-webkit-datetime-edit {color: #ddd;} ::-webkit-datetime-edit-fields-wrapper {background: transparent;} ::-webkit-datetime-edit-text {color: #ecad00;} ::-webkit-datetime-edit-day-field {color: #bababa;} ::-webkit-datetime-edit-month-field {color: #ecad00;} ::-webkit-datetime-edit-year-field {color: #becd00;} ::-webkit-inner-spin-button {display: none;} ::-webkit-calendar-picker-indicator {} @font-face { font-family: 'ibmbios2y'; src: url('assets/fonts/old-style/ibm_bios-2y.eot'); src: url('assets/fonts/old-style/ibm_bios-2y.eot?#iefix') format('embedded-opentype'), url('assets/fonts/old-style/ibm_bios-2y.woff2') format('woff2'), url('assets/fonts/old-style/ibm_bios-2y.woff') format('woff'), url('assets/fonts/old-style/ibm_bios-2y.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'ibmvga8'; src: url('assets/fonts/old-style/ibm_vga8.eot'); src: url('assets/fonts/old-style/ibm_vga8.eot?#iefix') format('embedded-opentype'), url('assets/fonts/old-style/ibm_vga8.woff2') format('woff2'), url('assets/fonts/old-style/ibm_vga8.woff') format('woff'), url('assets/fonts/old-style/ibm_vga8.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Flexi_IBM'; src: url('assets/fonts/old-style/Flexi_IBM.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'dot_digital-7'; src: url('assets/fonts/old-style/dot_digital-7.ttf') format('truetype'); font-weight: 400; font-style: normal; } input {caret-color: #ecad00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} input#files {display: none;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 50px #202020 inset; -webkit-text-fill-color: #becd00; } body #root {font-family: 'ibmvga8'; font-size: 16px;} #root h1, #root h2, #root h3, #root h4, #root h5, #root h6, #page .head {font-family: 'ibmvga8'; font-size: 1em;} h1.p404 {font-size: 32px;} h1.p404 span {font-size: 64px; color: #ecad00; display: block; margin-bottom: -17px;} h1.p404 b {color: #a100ad;} h1.p404 u {color: #056da8;} #page section:not(.Cover) .head {display: inline-block; color: #333; background: #aebb00; box-shadow: 5px 5px 0 rgba(0 0 0 / 50%); border: 2px solid #404040; padding: 5px 5px 3px 5px; text-transform: uppercase; width: fit-content;} #page section:not(.Cover) .head::before {content: '['; color: #ecad00;} #page section:not(.Cover) .head::after {content: ']'; color: #ecad00;} .blue #page section:not(.Cover) .head {background: #a100ad; color: #eee;} .blue #page section:not(.Cover) .head::before {color: #ecad00;} .blue #page section:not(.Cover) .head::after {color: #ecad00;} .light #page section:not(.Cover) .head {box-shadow: 5px 5px 0 rgba(0 0 0 / 3%);} .light .head {color: #ecad00;} ::-webkit-input-placeholder {color: #404040;} ::-moz-placeholder {color: #404040;} :-moz-placeholder {color: #404040;} :-ms-input-placeholder {color: #404040;} .blue ::-webkit-input-placeholder {color: rgb(255 255 255 / 40%);} .blue ::-moz-placeholder {color: rgb(255 255 255 / 40%);} .blue :-moz-placeholder {color: rgb(255 255 255 / 40%);} .blue :-ms-input-placeholder {color: rgb(255 255 255 / 40%);} .light #breadcrumbs ol li a span {color: #555;} .light #breadcrumbs ol li:last-child a span {color: #a6b200;} header div.contacts {background: #999;} header div.contacts p, header div.contacts .flex > div a {color: #202020;} header nav {background: #202020; border-bottom: none; height: 55px; animation: light 5s infinite; font-family: 'ibmvga8';} @keyframes light { 0%,100% {border-bottom-color: #404040;} 50% {border-bottom-color: #becd00;} } header nav.fixed {} header nav a.logo {display: block; width: 132px; height: 28px; margin-top: -9px; background: url('https://it8bit.club/userfiles/logo.png'); background-position: center; background-repeat: no-repeat;} header nav ul.main-nav {margin-left: 30px; border: 1px solid #333333;} header nav ul.main-nav li {border-right: 1px solid #333333;} header nav ul.main-nav li:last-child {border: none;} header nav ul.main-nav li a {color: #bababa; padding: 5px 5px 3px 5px; text-transform: uppercase;} header nav ul.main-nav li a::before {content: '['; color: #becd00;} header nav ul.main-nav li a::after {content: ']'; color: #becd00;} header nav ul.main-nav li a:hover {background: #bababa; color: #202020;} header nav ul.main-nav li a.active {background: #becd00; color: #202020;} header nav ul.main-nav li a:hover::before, header nav ul.main-nav li a.active::before, header nav ul.main-nav li a:hover::after, header nav ul.main-nav li a.active::after {color: #fff;} .light header nav a.logo {background: url('https://it8bit.club/userfiles/light-logo.png');} .light header nav {background: #fff;} .light header nav ul.main-nav {border-color: #eee;} .light header nav ul.main-nav li {border-color: #eee;} .blue header nav a.logo {background: url('https://it8bit.club/userfiles/blue-logo.png');} .blue header nav ul.main-nav {border-color: #ccc;} .blue header nav ul.main-nav li {border-right-color: #ccc;} #breadcrumbs ol::after {display: none;} #breadcrumbs ol li a {color: #505050; height: 35px;} #breadcrumbs ol li a span {border-color: #333333;} ul#pagesnav:first-of-type {display: none;} ul#pagesnav li a {background: transparent; color: #404040; border: 2px solid #404040; width: 30px; height: 30px; padding-top: 2px;} ul#pagesnav li a:hover {border-color: #056da8;} ul#pagesnav li.now a {background: #ecad00;} form.searchpanel {margin: 0 0 20px 0; height: 50px; background: transparent; border: 5px solid #505050; box-shadow: 10px 10px 0 rgb(0 0 0 / 50%);} form.searchpanel button {color: #707070;} form.searchpanel button::before {border-color: #505050;} form.searchpanel input {color: #eee;} form.searchpanel:hover {border-color: #ecad00;} .light form.searchpanel {box-shadow: 10px 10px 0 rgb(0 0 0 / 3%);} .light form.searchpanel input {color: #bababa;} .page-panel {background: transparent; border: 9px double #333333; padding: 20px;} .page-panel pre {position: relative; display: block; width: 100%;} .page-panel pre::before {position: absolute; content: ''; width: calc(100% + 40px); border-top: 9px double #333333; height: 0; margin-top: 2px; top: 0; bottom: 0; left: -20px; right: 0; margin: auto;} .page-menu {padding: 30px 20px 10px 20px; margin-top: 30px; background: #272727; border: 3px solid #404040; box-shadow: 10px 10px 0px rgb(0 0 0 / 50%);} .page-menu .head {position: absolute; top: -16px; margin: 0;} .page-menu li {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 2px 0; border-bottom: 1px solid #333333;} .page-menu li:last-of-type {border-bottom: none !important;} .page-menu li ico {display: none;} .page-menu li a {width: 100%; color: #eee; display: flex; justify-content: flex-start; align-items: center;} .page-menu > li > a::before {content: '\BB\a0'; margin-right: -6px; color: #555; z-index: 10;} .page-menu > li > a::before {content: '\BB\a0';} .page-menu > li:hover > a::before, .page-menu > li.open > a::before {content: "\25BA\A0"; color: #becd00;} .page-menu li a div {padding: 4px 8px 2px 12px; margin-left: -10px;} .page-menu li a span {font-size: 0.8em; color: #eee; margin-left: auto;} .page-menu li a span::before {content: '['; margin-right: 2px; color: #ecad00;} .page-menu li a span::after {content: ']'; margin-left: 2px; color: #ecad00;} .page-menu li a:hover div {background: #404040;} .page-menu li.open {padding-bottom: 0;} .page-menu li.open > a {color: #ecad00; border-bottom: 1px solid #111; padding-bottom: 2px;} .page-menu li ul {display: none; width: 100%; margin: 0;} .page-menu li ul li {padding-left: 10px;} .page-menu li ul li a, .page-menu li ul li a span {color: #aaa;} .page-menu li.open ul {display: block; border-top: 1px solid #333333;} .newsletter {padding: 15px; border: 6px double #ecad00; margin-top: 30px;} .newsletter .head {position: absolute; top: -38px;} .newsletter p {margin-top: 15px;} .newsletter .social-links {display: flex;} .newsletter .social-links a {width: 30px; height: 30px; border-width: 2px;} .newsletter .social-links a i {font-size: 16px; margin-top: 3px;} .tags {display: flex; flex-wrap: wrap;} .tags li {margin: 0 3px 3px 0;} .tags li a {display: inline-block; padding: 3px 5px 2px; background: #272727; color: #bababa;} .tags li a::before {content: '#'; color: #ecad00;} .tags li a:hover {background: #ecad00; color: #333;} .tags li a:hover::before {color: #fff;} div.share {margin-top: 25px; justify-content: flex-start; padding-top: 20px; border-top: 1px solid #333333;} .blue .page-menu, .blue .page-menu .head {border-color: #eee;} .blue .page-menu li {border-bottom: 1px solid #aaa;} .blue .page-menu li a, .blue .page-menu li a span {color: #333;} .blue .page-menu li a:hover div {background: #ecad00;} .blue .page-menu li.open > a {color: #becd00; border-bottom: 1px solid #aaa;} .blue .page-menu li.open ul {border-top: 1px solid #ccc;} .blue .page-menu li ul li a, .blue .page-menu li ul li a span {color: #555;} .blue .tags li a {color: #333;} .blue .tags li a:hover {background: #ecad00; color: #eee;} .blue .tags li a:hover::before {color: #becd00;} .blue .page-menu > li:hover > a::before, .blue .page-menu > li.open > a::before {color: #a100ad;} .light .page-menu {box-shadow: 10px 10px 0px rgb(0 0 0 / 3%);} .light .page-menu li {border-bottom: 1px solid #ddd;} .light .page-menu li a, .light .page-menu li a span {color: #333;} .light .page-menu li.open > a {color: #a100ad; border-bottom: 1px solid #ccc;} .light .page-menu li.open ul {border-top: 1px solid #fff;} .light .page-menu li ul li a, .light .page-menu li ul li a span {color: #777;} .light .page-menu > li > a::before {color: #aaa;} .light .page-menu > li:hover > a::before, .light .page-menu > li.open > a::before {color: #a100ad;} ul.langs {margin: 0;} ul.langs li a {text-transform: uppercase; font-size: 14px; padding: 0 7px; border-right-color: rgba(125 125 125 / 20%);} ul.langs li a:not([href]) {background: #becd00; color: #202020; padding: 5px 7px; margin-left: 5px; border: none;} ul.langs i {display: none;} #root .cover {box-shadow: 5px 5px 0 rgba(0 0 0 / 50%); background-color: transparent;} .light #root .cover {box-shadow: 5px 5px 0 rgba(0 0 0 / 3%);} /* #root .shadowText {position: absolute; overflow: hidden; left: 5px; top: 5px; width: 100%; height: 100%; background-color: white; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 74%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 74%, black 75%, black); background-size: 4px 4px; background-position: 0 0, 2px 2px; } */ #root .warning {background-color: #ecad00; border: 10px solid #becd00; box-shadow: none; color: #111; font-size: 35px; padding: 50px; font-weight: 500; font-style: italic;} .typewrite > .wrap {border-right: 6px solid #ecad00; padding-right: 5px; color: #fff; animation: blink 1s infinite;} .typewrite > .wrap:empty {padding: 0;} @keyframes blink { 0%,100% {border-right-color: #becd00;} 50% {border-right-color: #fff;} } modal video {min-width: 672px;} .account {margin: 0 auto; justify-content: center; height: 55px; padding: 0 10px 0 8px; background: #272727;} .account span {font-size: 14px;} .account a.ico {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 5px; border: 2px solid #333333;} .account a.ico i {font-size: 24px;} .account a.ico:hover {cursor: pointer; border-color: #ecad00;} .blue .account {background: #ccc;} .blue .account a {color: #222;} .blue .account a:hover {color: #a100ad;} .light .account {background: #eee;} .userLogin {background: #202020; border: 10px double #aebb00; max-width: 300px; font-family: 'ibmvga8';} .userLogin .head {position: relative; font-size: 24px; background: #aebb00; padding: 10px 10px 12px 10px; color: #fff; font-family: 'ibmvga8';} .userLogin .head::before {position: absolute; content: ''; width: calc(100% + 40px); left: -20px; top: 0; bottom: 0; margin: auto; height: 0; border-top: 1px solid #aebb00;} .userLogin form field {background: transparent; border-color: #333333;} .userLogin form field ico:after {border-left: 1px solid #333333;} .userLogin form field input {background: transparent; color: #bababa; font-family: 'ibmvga8';} .userLogin form a, .userLogin .new-registration a {color: #ecad00;} .userLogin form field.buttons a {width: 36px; height: 36px;} .userLogin form field.buttons a i {font-size: 32px;} .userLogin form field.invite {border-width: 2px;} .userLogin form field.invite i {color: #ecad00;} .userLogin form > p {font-size: 12px; padding: 5px 7px 3px; background: #333333; color: #202020; width: fit-content;} .userLogin form field.buttons a {background: #a100ad; color: #ddd;} .userLogin form field.buttons a:hover {background: #aebb00; color: #a100ad;} .userLogin form code div {font-style: normal; background: #555; color: #eee;} form field send {background: #aebb00; color: #222; padding: 10px 15px; border-radius: 0;} .blue .userLogin {border-color: #ecad00;} .blue .userLogin .head {background: #ecad00;} .blue .userLogin .head::before {border-top-color: #ecad00;} .blue form field send {background: #ecad00;} #archive { margin: 25px 0; border: 6px double #404040;} #archive div.filepanel {display: flex; justify-content: flex-start; align-items: center; height: 40px; padding: 0 5px 0 15px; background: #272727; border-bottom: 2px solid #404040; color: #eee;} #archive div.filepanel a {color: #fff; display: flex; justify-content: flex-start; align-items: center; text-transform: uppercase;} #archive div.filepanel a i {margin-right: 10px;} #archive div.filepanel a:not(:first-child) {padding: 3px 5px; border: 1px solid #ffffff77; font-size: 13px;} #archive div.filepanel a:hover:not(:first-child) {border-color: #fff; background: #becd00;} #archive div.filepanel a:first-child {text-transform: none; } #archive div.filepanel span {color: #333;} #archive div.filepanel span i {font-size: 20px;} #archive div.filepanel #audioplay {position: absolute; right: 15px; height: 30px; top: 0; bottom: 0; margin: auto;} #archive div.filepanel #audioplay audio {height: 30px; background: #f1f3f4; filter: sepia(0%) saturate(70%) grayscale(1) contrast(100%) invert(85%);} #archive dir {padding: 10px 10px 50px 10px; margin: 0; list-style: none; border: 3px solid #333333; background: #333; max-height: 500px; overflow-y: auto;} #archive dir[cols].gap10 {grid-gap: 0 10px;} #archive dir li {display: flex; justify-content: flex-start; align-items: center; height: 40px; border-bottom: 1px solid #555; color: #ddd; font-family: 'Tahoma';} #archive dir li:hover {background: #444;} #archive dir li.folder ico {color: #becd00;} #archive dir li ico {color: #aaa;} #archive dir li ico i {font-size: 26px;} #archive dir li.select {background: #404040; color: #fff;} #archive dir li.select ico i {color: #becd00;} #archive dir li a.download {position: absolute; right: 10px;} #archive dir li a.download:hover {color: #fff;} #archive dir li span {position: absolute; display: block; left: 40px; max-width: calc(100% - 100px); white-space: nowrap; overflow: hidden;} #archive ::-webkit-scrollbar-track {background: #333;} a.shareDisk {display: flex; justify-content: flex-start; align-items: center; padding: 0; height: 32px; margin: 10px 0; background: #555; color: #ddd; width: fit-content; border: 3px double #777; box-shadow: 5px 5px 0 rgb(0 0 0 / 50%);} div.shareDisk {margin: 25px 0 10px; border: 3px double #777; box-shadow: 5px 5px 0 rgb(0 0 0 / 50%); width: fit-content;} .shareDisk::before {position: absolute; content: attr(share); font-size: 10px; line-height: 10px; padding: 3px 5px 1px; background: #454545; color: #777; left: 0; top: -17px;} div.shareDisk {background-color: #000;} div.shareDisk audio {height: 40px; background: #f1f3f4; filter: sepia(0%) saturate(70%) grayscale(1) contrast(100%) invert(95%); margin-bottom: -4px;} div.shareDisk video {width: 320px; height: auto; margin-bottom: -3px;} a.shareDisk ico {width: 26px; height: 26px; background: #333;} a.shareDisk ico i {margin: 2px 0 0 0; color: #becd00; font-size: 20px;} a.shareDisk[folder] i {color: #ecad00;} a.shareDisk span {font-size: 14px; line-height: 12px; padding: 8px 5px 6px 5px; border-left: 3px double #777;} a.shareDisk:hover {border-color: #ecad00;} a.shareDisk:hover span {border-left-color: #ecad00;} p.comment {padding: 5px; font-size: 14px; border: 2px solid #404040; display: block; max-width: 320px; width: fit-content;} p.comment::before {position: absolute; content: ''; left: 3px; top: -8px; border: 8px solid transparent; border-left: 15px solid #404040; border-bottom: 0 solid #404040;} .blue a.account span {color: #000000;} .blue a.account i {color: #aa5500;} .blue header nav {background: #bbbbbb;} .blue header nav ul.main-nav li a {color: #000000;} .blue header nav ul.main-nav li a:hover {background: #000000; color: #bbbbbb;} .blue header nav ul.main-nav li a.active {background: #aa5500; color: #becd00;} .blue ul.langs li a {color: #000000;} .blue ul.langs li a:not([href]) {background: #aa5500; color: #becd00;} #root.light .cover {box-shadow: 5px 5px 0 rgba(0 0 0 / 3%);} dialog a.download {display: flex; justify-content: flex-start; align-items: center; height: 50px; font-size: 20px; background: #becd00; padding: 0 10px 0 0; color: #bababa; border: 5px solid #eee;} dialog a.download:hover {background: #a6b200; color: #fff;} #comment-head h3 {color: #ecad00;} #comment-head h3 i {color: #ecad00; font-size: 24px;} #comment-head h3 b {margin: 0;} #comment-head h3 span {color: #aaa;} #comment-head button, #comments send {background-color: #ecad00; color: #333; font-family: 'ibmvga8'; border-radius: 0; padding: 8px 12px; font-size: 16px;} #comment-head button:hover, #comments send:hover {background: #becd00;} #comment-head::before {border-top: 3px double #404040;} #comment-type {background: #202020; border: 6px double #404040; border-radius: 0; font-family: 'ibmvga8' !important;} #comment-type p {background: #222; border: 3px double #a6b200; border-radius: 0;} #comment-type field:not(.name), #comment-type field.name input {border-color: #555} #comment-type field:not(.name), #comment-type field.name input, #comment-type field textarea {background: #333; color: #aaa; border-radius: 0;} #comment-type field textarea {font-size: 17px;} #comment-type field ico {color: #777;} #comment-type field ico::after {border-left-color: #555;} #comment-type field .emoji ico {background: #555;} #comment-type field .emoji .set-emoji {background: #444;} #comment-type field .emoji .set-emoji a {padding-right: 0;} #comment-type field .emoji .set-emoji a:hover {background: #555;} #comment-type field.name div.request {background: #333; border-color: #555;} #comment-type field.name div.request::before {color: #a6b200;} #comment-list > li { border-radius: 0; border: 3px double #404040;} #comment-list li .comment-head {background: #333; border-bottom-color: #555;} #comment-list li .comment-head span.name s, #comment-list li .comment-head span.name b, #comment-list li .comment-head span.name b i, #comment-list li .comment-head span.date {color: #666;} #comment-list li .comment-text {font-size: 16px; color: #999;} #comment-list li .comment-text blockquote {background: #444;} #comment-list li .comment-text blockquote b {color: #ccc;} #comment-list li .comment-text blockquote::after {border-left: 3px solid #444; border-top: 3px solid #444;} #comment-list li .edit-this {background: #444; border: 1px solid #555;} #comment-list li .edit-this textarea {background: #333; color: #888; border-color: #555; font-size: 17px;} #comment-list li .edit-this close {background: #555;} #comment-list li .edit-this close i {color: #777;} #comment-list li .edit-comment div {background: #444; color: #555; border-color: #555;} #comment-list li .edit-comment:hover div a {color: #666;} ol.stars[rate]::before {color: #777;} #setColors {position: fixed; z-index: 10; bottom: 150px; right: 0; padding: 5px; transition: 0.25s;} #setColors li {display: block; width: 25px; height: 25px; margin-bottom: 5px; border: 1px solid rgba(125 125 125 / 30%);} #setColors li:hover {opacity: 0.5;} #setColors li.base {background: #222;} #setColors li.light {background: #f7f7f7;} #setColors li.blue {background: #000084;} #setColors li:hover {cursor: pointer; border-color: rgba(125 125 125 / 100%);} #cabinet {overflow: hidden; overflow-y: auto;} #cabinet close {position: absolute; top: 10px; right: 10px; color: #becd00; z-index: 100;} #cabinet close:hover i {color: #becd00;} .user-cabinet {width: 100%; padding-bottom: 100px;} .user-cabinet .user-cover {position: relative; width: 100%; height: 150px; background-color: rgba(0 0 0 / 50%); margin-bottom: 70px;} .user-cabinet .user-cover a.select {position: absolute; left: 5px; top: 5px; display: none; justify-content: center; align-items: center; width: 35px; height: 35px; color: #ddd; background: rgb(0 0 0 / 70%); position: absolute;} .user-cabinet .user-cover a.select i {font-size: 22px;} .user-cabinet .user-cover a.select:hover {color: #ecad00;} .user-cabinet .user-avatar {position: absolute; display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; left: 20px; bottom: -50px; background-color: #202020; border: 5px solid #333333;} .user-cabinet .user-avatar:hover {cursor: pointer; border-color: #becd00;} .user-cabinet .user-cover:hover > a.select, .user-cabinet .user-avatar:hover > a.select {display: flex;} .user-cabinet .user-avatar a.select {top: unset; left: unset; bottom: 5px;} .user-cabinet a.back {position: absolute; display: flex; justify-content: center; align-items: center; left: 0; top: 0; width: 25px; height: 40px; z-index: 99;} .user-cabinet a.back i {font-size: 24px;} .user-cabinet .user-info {position: absolute; left: 130px; top: 160px;} .user-cabinet .user-info li.login {display: flex; justify-content: flex-start; align-items: center;} .user-cabinet .user-info li.login a {color: #becd00; font-size: 18px;} .user-cabinet .user-info li.login a:hover {text-decoration: underline;} .user-cabinet .user-info li.login span {font-size: 13px; padding: 2px 5px; background: #333333; margin-left: 5px;} .user-cabinet .user-info li.email {font-size: 14px; color: #505050;} .user-cabinet form {padding: 0 50px;} .user-cabinet form p {display: inline-block; margin-bottom: 0; padding: 5px 5px 3px 5px; line-height: 14px; font-size: 14px; color: #bababa; background: #373737;} .user-cabinet form h3 {margin-bottom: 10px;} .user-cabinet form li div {display: flex; justify-content: flex-start; align-items: center; border: 1px solid #404040;} .user-cabinet form ul {margin-bottom: 10px;} .user-cabinet form li div ico {width: 42px; height: 32px; border-right: 1px solid #333333;} .user-cabinet form li div ico i {font-size: 24px; margin-top: 3px; color: #404040;} .user-cabinet form li div ico i.active {color: #becd00;} .user-cabinet form li div input {width: calc(100% - 48px); margin: 3px; border: none;} .user-cabinet form input {display: flex; justify-content: flex-start; align-items: center; height: 36px;} .user-cabinet form input, .user-cabinet form textarea {width: 100%; padding: 7px; font-size: 16px; line-height: 16px; border: 1px solid #333333; color: #bababa; background: rgba(0 0 0 / 15%); font-family: 'ibmvga8';} .user-cabinet form textarea {resize: none; height: 100px;} .user-cabinet form .tublr {margin: 2px; width: calc(100% - 4px); padding: 2px; justify-content: flex-start; border: none;} .user-cabinet form .tublr a {display: flex; justify-content: center; align-items: center; white-space: nowrap; user-select: none; font-size: 14px; line-height: 14px; padding: 8px; min-width: calc(100% / 4 - 1.5px); background: #333333; color: #aaa; margin-right: 2px;} .user-cabinet form .tublr a:last-of-type {margin: 0;} .user-cabinet form .tublr a.select {background: #ecad00; color: #eee;} .user-cabinet form .tublr a:not(.select):hover {background: #555; color: #eee;} .user-cabinet form .send {display: inline-flex; justify-content: flex-start; align-items: center; height: 40px; padding: 0 10px 0 5px; font-size: 18px; margin-top: 10px;} .user-cabinet form .send:hover {cursor: pointer;} .user-cabinet form .send i {font-size: 22px; margin-right: 6px;} .user-cabinet form res div {display: block; padding: 10px; background: #ecad00; color: #fff; margin-top: 10px;} .user-cabinet .user-menu {padding: 0 50px;} .user-cabinet .user-menu a, .user-cabinet .user-menu div {display: flex; justify-content: flex-start; align-items: center;} .user-cabinet .user-menu div {height: 50px; padding: 0 10px; border: 4px double #404040; font-size: 20px; color: #fff;} .user-cabinet .user-menu div i {font-size: 26px; margin-right: 10px; color: #ecad00;} .user-cabinet .user-menu a i {margin-right: 10px;} .user-cabinet .user-menu a:hover {color: #ecad00;} .user-cabinet .user-menu a {height: 40px; padding: 0 10px; border-bottom: 1px solid #333333;} .user-cabinet .user-menu a i {font-size: 26px; color: #fff;} .user-cabinet .user-menu ul li:last-of-type a {border: none;} .user-cabinet .user-menu a.user-exit {display: inline-flex; justify-content: flex-start; align-items: center; height: 40px; padding: 10px; margin-top: 10px;} .user-cabinet .user-menu a.user-exit i {font-size: 22px; margin-right: 10px;} .user-cabinet a.back, .user-cabinet form .send, .user-cabinet .user-menu a.user-exit {background: #a6b200; color: #222;} .user-cabinet a.back:hover, .user-cabinet form .send:hover, .user-cabinet .user-menu a.user-exit:hover {background: #becd00;} .select-img {width: 100vw; max-width: 700px; max-height: 480px; font-size: 16px;} .select-head {width: 100%; height: 50px; display: flex; justify-content: space-between; background: #bbb; align-items: center; padding: 0 10px;} .select-img .presset {position: relative; padding: 20px; width: 100%; max-height: 490px; background: transparent;} .select-img .presset::before {position: absolute; content: ''; left: 5px; top: 5px; right: 5px; bottom: 5px; border: #ecad00 double 6px;} .select-img .presset ul {width: calc(100% + 15px); height: 100%; padding-right: 15px; overflow-y: auto; padding-bottom: 20px;} .select-img .presset ul li {box-shadow: 5px 5px 0 rgb(0 0 0 / 50%); border: 2px solid #444;} .select-img .presset ul li:hover {border-color: #ecad00; cursor: pointer;} .select-img #upload-file {padding: 8px; background: #ecad00; color: #222;} .select-img #upload-file::before {content: '['; color: #fff;} .select-img #upload-file::after {content: ']'; color: #fff;} .select-img #upload-file:hover {background: #a100ad;} .light .user-cabinet form p {background: #eee; color: #bababa;} .light .user-cabinet form li div {border-color: #ddd;} .light .user-cabinet form input, .light .user-cabinet form textarea {background: rgba(0 0 0 / 3%);} .light .user-cabinet form .tublr a {background: #ccc; color: #eee;} .light .user-cabinet form .tublr a.select {background: #becd00; color: #fff;} .light .user-cabinet form .tublr a:not(.select):hover {background: #aaa; color: #fff;} .light .user-cabinet .user-menu a i {color: #272727;} .light .user-cabinet .user-menu div {color: #bababa;} .blue .user-cabinet .user-info li.login span {background: #aa5500; color: #fff;} .blue .user-cabinet .user-menu div i {color: #aa5500;} .blue .user-cabinet .user-menu a {border-bottom: 1px solid rgb(255 255 255 / 25%);} .blue .user-cabinet form p {color: #202020; background: #8e8e8e;} .blue .user-cabinet a.back, .blue .user-cabinet form .send, .blue .user-cabinet .user-menu a.user-exit {background: #00aaaa; color: #222;} .blue .user-cabinet a.back:hover, .blue .user-cabinet form .send:hover, .blue .user-cabinet .user-menu a.user-exit:hover {background: #aa5500; color: #becd00;} .blue .user-cabinet form .tublr a {background: #272727;} .blue .user-cabinet form .tublr a.select {background: #ecad00;} .blue .user-cabinet form .tublr a:not(.select):hover {background: #ddd;} .elt::before {position: absolute; content: ''; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgb(0 0 0 / 15%) 2px); z-index: 10;} .elt.old::before {animation: 0.1s elt infinite;} .elt.off::before {display: none;} #amiga-os::before {top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px);} @keyframes elt { 0%,100% {background-position: 0px 0px;} 50% {background-position: 0px 1px;} } div.insert-obj {display: inline-block; line-height: 13px; margin-right: 10px; font-size: 12px; padding: 2px 3px 1px; background: #555; color: #aaa;} footer {font-family: 'ibmvga8';} footer .flex::before {position: absolute; content: ''; top: 0; width: 100%; border-top: 1px solid rgba(125 125 125 / 10%);} footer .flex::after {position: absolute; content: ''; height: 0; width: 50px; left: 0; top: 0px; border-top: 1px solid #becd00; animation: fline 3s infinite;} @keyframes fline { 0%,100% {left: 0%; width: 0px;} 25%,75% {left: calc(50% - 75px); width: 150px;} 50% {left: 100%; width: 0px;} } footer ul.contacts li div.social-links i, footer p, footer span, footer li a {color: #999; font-size: 16px;} footer ul.contacts li p i {font-style: normal; font-size: 24px;} footer ul.contacts li div.social-links i {font-size: 20px;} footer .social-links a {width: 30px; height: 30px; border-width: 2px;} footer .social-links a i {font-size: 16px; margin-top: 2px;} footer .head {font-family: 'dot_digital-7' !important; font-size: 30px; text-transform: none; margin-bottom: 10px; padding-bottom: 10px;} .onload {position: relative; width: calc(100% - 10px); min-width: 200px; height: 21px; margin: 5px; background: #000;} .onload::after {position: absolute; content: ''; height: 7px; width: 0; left: 0; top: 7px; background: #becd00; animation: onload 2s infinite;} @keyframes onload { 0%,100% {left: 0%; width: 0px;} 25%,75% {left: calc(50% - 50px); width: 100px;} 50% {left: 100%; width: 0px;} } .block.made::before {border-top-color: #333;} .modal img:hover, img.modal:hover {transform: unset; opacity: 0.5;} @media screen and (min-width: 1280px){ } @media screen and (max-width: 2560px){ } @media screen and (max-width: 1920px){ } @media screen and (max-width: 1440px){ } @media screen and (max-width: 1366px){ } @media screen and (max-width: 1280px){ } @media screen and (max-width: 1024px){ } @media screen and (max-width: 800px){ nav.fixed {border-top: none; height: 50px;} nav.fixed.active {border-top: none; height: 100vh;} modal video {min-width: auto; max-width: calc(100% - 50px);} } @media screen and (max-width: 540px){ }