@import url('https://fonts.googleapis.com/css?family=Kurale'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, output, ruby, section, summary, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } ol, ul, li { list-style: none; } * { margin: 0; padding: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } a, a:hover { text-decoration: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .right { float: right; } .left { float: left; } h1, h2, h3 { text-align: center; } body { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjNDAzYzNmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMxZTI5MmQiPjwvcGF0aD4KPC9zdmc+"); font-family: Verdana; } @font-face { font-family: v_CCAdamKubertRegular; src: url('../font/v_CCAdamKubertRegular.ttf'); } .wrapper { max-width: 1280px; margin: 0 auto; padding-bottom: 10px; } .wrapper .header { max-width: 1280px; min-height: 200px; margin: 0 auto; border-radius: 5px 5px 3px 3px; display: flex; justify-content: space-between; background: #eee url('../img/ship-cover-bg.png') no-repeat; } .wrapper .header .header-wrapper { max-width: 1280px; min-height: 200px; margin: 0 auto; padding: 0 25px; border-radius: 5px 5px 3px 3px; display: flex; justify-content: space-between; } .wrapper .header .logo { margin: auto; } .wrapper .header .logo img { height: 180px; width: auto; display: block; border-radius: 7px; -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); -moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); } .wrapper .header .logo:hover { cursor: pointer; } .wrapper .header .header-title { display: flex; flex-direction: column; justify-content: center; padding: 0 35px; } .wrapper .header .header-title h1 { opacity: 0; font: bold 46px v_CCAdamKubertRegular; color: #eee; margin-bottom: 20px; } .wrapper .header .header-title h3 { opacity: 0; font: bold 20px/25px v_CCAdamKubertRegular; color: #eee; } .wrapper .header .header-title h3 span { display: block; float: right; margin-top: 20px; color: #eee; } .wrapper .header .wrapper-header-icon .vk { margin-top: 20px; } .wrapper .header .wrapper-header-icon .vk img { display: block; width: 120px; height: auto; margin-right: 110px; margin-bottom: 15px; } .wrapper .header .wrapper-header-icon .map img { width: 170px; height: auto; display: block; float: right; } .wrapper .mobile-header { display: none; } .wrapper #nav { max-width: 1280px; min-height: 40px; margin: 0 auto; padding: 0 25px; background: #000; border-radius: 5px; display: flex; align-items: center; } .wrapper #nav ul { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; } .wrapper #nav ul li { padding: 9px 10px; border-radius: 5px; cursor: pointer; } .wrapper #nav ul li a { display: block; text-transform: uppercase; color: #eee; font-weight: bold; font-size: 15px; cursor: pointer; } .wrapper #nav ul li:hover { -webkit-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); -moz-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.5); cursor: pointer; } .wrapper .need-site { background: #f5deb3; border-radius: 3px 3px 0 0; border-bottom: 1px solid grey; } .wrapper .need-site .click { display: block; padding: 10px 0; text-align: center; font-size: 17px; font-weight: 900; color: #00b0db; } .wrapper .need-site .click b { color: red; } .wrapper .content-wrapper { display: flex; flex-flow: row nowrap; } .wrapper .content-wrapper .sidebar-wrapper { width: 280px; height: auto; padding: 25px 0; background: #f5deb3; border-radius: 0 0 0 0; } .wrapper .content-wrapper .sidebar-wrapper .sidebar { width: 100%; height: 100%; padding: 30px 25px 0 25px; border-right: 1px solid #777; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting { margin-top: 20px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting form span { display: block; text-align: center; margin-bottom: 15px; font-weight: bold; font-size: 16px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting form input[type=text] { width: 100%; height: 25px; border-radius: 5px; border: none; padding-left: 5px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting form input[type=button] { margin-top: 10px; padding: 5px; height: 28px; width: 80px; text-align: center; float: right; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #wr { font-weight: bold; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #nav-interesting #intr-left { color: #000; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #nav-interesting #intr-right { color: #000; float: right; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #intr-div h1 { margin-top: 15px; font-size: 18px; text-decoration: underline; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #intr-div h2 { margin-top: 8px; margin-bottom: 10px; font-weight: bold; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #p-intr { margin-top: 10px; text-align: justify; text-indent: 25px; padding: 15px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #del-name { color: red; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .interesting #del-name:hover { cursor: pointer; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .side-bar-menu { margin-top: 20px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .side-bar-menu a { display: block; margin-bottom: 10px; text-decoration: underline; color: #4F4F4F; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .side-bar-menu a:last-of-type { margin-bottom: 0; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .show-aphorism { padding: 15px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .show-aphorism p { text-align: justify; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer { margin: 20px 0; padding-bottom: 20px; border-bottom: 2px solid #777; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer h5 { font-weight: bold; text-align: center; margin-bottom: 10px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer img { display: block; width: 70px; height: auto; float: left; margin-right: 10px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies { margin-top: 18px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span { cursor: pointer; font-size: 14px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(1) { color: #FF1493; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(2) { color: #A020F0; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(3) { color: #6495ED; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(4) { color: #00BFFF; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(5) { color: #00CD00; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(6) { color: #0000FF; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .web-technologies span:nth-child(7) { color: #008B8B; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo { margin: 15px 0 0 15px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li { cursor: pointer; font-size: 14px; list-style: circle; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(1) { color: #228B22; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(2) { color: #FF4500; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(3) { color: #FF00FF; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(4) { color: #A0522D; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(5) { color: #008B8B; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-indfo ul li:nth-child(6) { color: #00008B; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-contact { margin-top: 6.7px; font-size: 14px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-contact .dev-portf { font-size: 22px; margin: 10px auto 0; display: block; color: #00b0db; text-align: center; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-contact span { position: relative; color: #000; cursor: pointer; display: block; margin-bottom: 2px; margin-left: 15px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer .dev-contact span a { color: #00008B; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .aliexpress { width: 100%; text-align: center; margin-bottom: 20px; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .aliexpress-mobile { width: 100%; display: none; text-align: center; margin-bottom: 20px; } .wrapper .content-wrapper .content { max-width: 1000px; width: 100%; height: auto; padding: 25px; background: #f5deb3; border-radius: 0 0 0 0; } .wrapper .content-wrapper .content .aphorism p { text-indent: 0; } .wrapper .content-wrapper .content strong { font-weight: bold; } .wrapper .content-wrapper .content i { font-style: italic; color: #777; } .wrapper .content-wrapper .content h1 { font-size: 28px; font-weight: bold; margin: 25px 0; } .wrapper .content-wrapper .content h2 { font-size: 20px; margin: 25px 0; } .wrapper .content-wrapper .content h3 { font-size: 16px; margin: 25px 0; } .wrapper .content-wrapper .content h4 { margin: 25px 0; } .wrapper .content-wrapper .content p { text-indent: 40px; font-size: 17px; text-align: justify; } .wrapper .content-wrapper .content .img_r { width: 100%; height: auto; display: block; margin: 50px auto; } .wrapper .content-wrapper .content .keyseo { background: #FAEBD7; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; padding: 10px; } .wrapper .content-wrapper .content .keyseo p:before { content: ""; display: block; background: url("../img/icon12.png") no-repeat; float: left; width: 78px; height: 58px; margin-top: 3px; margin-right: 10px; } .wrapper .content-wrapper .content .save { display: flex; flex-flow: row wrap; justify-content: center; margin: 50px 0; } .wrapper .content-wrapper .content .numbering { padding: 35px 0; display: flex; justify-content: center; } .wrapper .content-wrapper .content .numbering ul { display: flex; flex-flow: row wrap; } .wrapper .content-wrapper .content .numbering ul li a { display: block; padding: 5px 10px; margin-right: 5px; margin-bottom: 10px; border-radius: 5px; background: #ffe4b5; font: 18px Arial, Helvetica, sans-serif; font-weight: bold; color: #777; border: 1px solid #777; } .wrapper .content-wrapper .content .numbering ul li a:hover { -webkit-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); -moz-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.5); cursor: pointer; } .wrapper .footer { position: relative; display: flex; max-width: 1280px; width: 100%; background: #eee url('../img/header-bg.png') no-repeat center center; height: 120px; border-radius: 0 0 5px 5px; } .wrapper .footer .footer-wrapper { position: relative; display: flex; max-width: 1280px; width: 100%; background: rgba(0, 0, 0, 0.6); height: 120px; border-radius: 0 0 5px 5px; } .wrapper .footer .footer-sitebar { display: flex; flex-direction: column; margin-left: 100px; } .wrapper .footer .footer-sitebar li { margin: auto 0; } .wrapper .footer .footer-sitebar li a { display: block; margin-bottom: 5px; font-size: 20px; font-weight: bold; color: #eee; } .wrapper .footer .footer-sitebar li a:last-of-type { margin-bottom: 0; } .wrapper .footer .link-site { position: absolute; left: 0; right: 0; width: 300px; margin: auto; text-align: center; line-height: 100px; } .wrapper .footer .link-site li a { display: block; color: #eee; font-size: 40px; font-weight: bold; font-family: 'Kurale', serif; } /*Кнопки*/ .button { margin-bottom: 13px; display: inline-block; margin-right: 8px; text-decoration: none; text-align: center; padding: 7px 26px; border: solid 1px #7e9965; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Arial, Helvetica, sans-serif; font-weight: bold; color: #ffffff; background-color: #68c73b; background-image: -moz-linear-gradient(top, #68c73b 0%, #257a10 100%); background-image: -webkit-linear-gradient(top, #68c73b 0%, #257a10 100%); background-image: -o-linear-gradient(top, #68c73b 0%, #257a10 100%); background-image: -ms-linear-gradient(top, #68c73b 0%, #257a10 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#257a10', endColorstr='#257a10', GradientType=0); background-image: linear-gradient(top, #68c73b 0%, #257a10 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } .button:hover { -webkit-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); -moz-box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.7); box-shadow: inset 0px 0px 30px 3px rgba(255, 255, 255, 0.5); cursor: pointer; } .button:last-of-type { margin-right: 0; } /*index.html*/ .index-dscrp { margin: 50px auto; padding: 25px; background: #F5DEB3; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .index-item-wrapper { display: flex; justify-content: space-between; flex-flow: row wrap; } .index-item-wrapper .index-item { display: flex; flex-direction: column; justify-content: space-between; width: 280px; padding: 5px; margin-bottom: 35px; border-radius: 3px; background: #F5DEB3; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .index-item-wrapper .index-item img { width: 100%; height: auto; display: block; } .index-item-wrapper .index-item .button { margin: 15px 40px; } #gifslider { -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); -moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.78); } #gifslider img { display: block; width: 100%; height: auto; } /*spisok.html*/ .wrapper-list { -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; padding: 20px 40px; display: flex; flex-flow: row wrap; } .wrapper-list .close-for-list { color: #777; display: block; margin: 5px 0 5px 12px; font-weight: bold; } .wrapper-list a { font-size: 17px; } .wrapper-list h2 { font-weight: bold; } .wrapper-list ul li { position: relative; } .wrapper-list ul li:before { content: ""; position: absolute; background: url('../img/book.png') no-repeat 0px 1px; width: 20px; height: 17px; left: -22px; } .wrapper-list ul li ul { margin-top: 5px; } .wrapper-list ul li li:before { display: none; } .wrapper-list ul li li a { margin-left: 20px; } .wrapper-list ul li a { color: #000; } .wrapper-list .novels { width: 50%; } .wrapper-list .novels ul li a { padding-right: 30px; } .wrapper-list .stories { width: 50%; } .wrapper-list .poems { width: 100%; } .wrapper-list .poems .poems-wrapper div { margin: 20px auto; } .wrapper-list .poems .poems-wrapper div p { text-align: center; } .wrapper-list .poems .poems-wrapper div i { display: block; margin-top: 15px; text-align: center; } /**audio*.html*/ .audio-secondary-list { margin: 5px 0; } .audio-secondary-list li:before { display: none; } .audio-secondary-list li a { margin-left: 20px; } .audio-secondary-list li div { margin: 5px 0 5px 25px; } .audio-secondary-list li div iframe + a { color: #777; display: block; margin: 5px 0 5px 12px; font-weight: bold; } /*gallery.html*/ #gallery { margin: 50px auto; } /*video.html*/ .film { margin: 0 auto; margin-bottom: 20px; padding: 20px 20px 40px 20px; border-radius: 5px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); position: relative; } .film h2 { font-weight: bold; } .film p { margin-bottom: 20px; } .film .wrap-film { display: flex; flex-flow: row wrap; } .film .wrap-film img { display: block; } .film .wrap-film table { padding: 20px; width: 600px; } .film .wrap-film table tr { display: block; border-bottom: 1px dotted grey; } .film .wrap-film table tr td:first-of-type { width: 150px; color: green; } .film .wrap-film table tr td:last-of-type { color: grey; } .film h3 { margin-top: 40px; font-weight: bold; } .film .button { position: absolute; right: 20px; bottom: 15px; } /*aforizmy.html*/ .aphorism { background: #FAEBD7; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; margin-bottom: 20px; padding: 20px; } .aphorism .link-for-aphorism { display: block; margin-top: 5px; text-align: right; color: #777; } /*raznoe.html*/ .article { box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 5px; margin-bottom: 20px; padding: 20px 20px 40px 20px; position: relative; } .article img { display: block; float: left; margin-right: 20px; } .article .button { position: absolute; right: 20px; bottom: 15px; } .article p:last-of-type { margin-bottom: 20px; } /*Аудиокниги*/ .content iframe { overflow: hidden; margin: 0; height: 60px; width: 400px; } /*Виджеты ВК*/ #vk_groups { margin: 30px auto; width: 100%; } #vk_comments { max-width: 800px; margin: 30px auto 10px; } /*aliexpress*/ #iframe-aliexpress-ad-id-1 { background: #fff !important; } /*Медиазапросы*/ @media (max-width: 1240px) { #vk_comments { width: 100%; } .wrapper .content-wrapper .content .numbering ul { justify-content: center; } .wrapper #nav ul li a { font-size: 16px; } .wrapper .header .header-title h1 { font-size: 40px; } .wrapper .header .header-title h3 { font-size: 18px; } .film .wrap-film { flex-direction: column; } .film .wrap-film img { margin: 0 auto; margin-bottom: 20px; } .film .wrap-film table { max-width: 800px; margin: 0 auto; } } @media (max-width: 1160px) { .content iframe { width: 100%; } .index-item-wrapper { justify-content: space-around; } .index-item-wrapper .index-item { margin-right: 20px; } } @media (max-width: 1140px) { .wrapper #nav { padding: 0 5px; } } @media (max-width: 1100px) { .wrapper #nav ul li a { font-size: .9rem; } } @media (max-width: 1024px) { .wrapper .footer .footer-sitebar { margin-left: 20px; } .wrapper .header .header-title h1 { font-size: 30px; } .wrapper .header .header-title h3 { font-size: 14px; line-height: 16px; } .wrapper #nav ul { justify-content: space-around; } .wrapper #nav ul li { padding: 0; } .wrapper #nav ul li:hover { box-shadow: none; } .wrapper #nav ul li a { font-size: .8rem; } .wrapper .header .wrapper-header-icon .vk img { margin-right: 0; } .content-wrapper > div.content > div.film > div > iframe { width: 100%; } } @media (max-width: 768px) { .wrapper .need-site { border-radius: 0; } .aliexpress-mobile { display: block !important; } .aliexpress { display: none; } .index-dscrp { padding: 25px 5px; } .wrapper .content-wrapper .content .numbering ul { justify-content: center; } .content iframe { overflow: hidden; margin: 0; height: 60px; width: 100%; } .wrapper .content-wrapper .content .save { margin: 25px 0; } .button { margin-bottom: 10px; } #gifslider { display: none; } .index-dscrp { margin: 0 auto; } .wrapper .content-wrapper .sidebar-wrapper { padding: 0; } .film .wrap-film table { width: 100%; padding: 0; } .wrapper { padding: 0; margin: 0 auto; width: 100%; position: relative; } .wrapper .mobile-header { display: block; width: 100%; height: 50px; padding: 0 10px; background: #f2d49c; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); opacity: .9; display: flex; justify-content: space-between; align-items: center; } .wrapper .mobile-header a { display: block; color: #000; } .wrapper .mobile-header a span { font-size: 20px; font-weight: bold; font-family: 'Kurale', serif; } .wrapper .mobile-header img { height: 30px; width: auto; position: relative; } .wrapper .mobile-header img:before { content: 'Меню'; position: absolute; left: -10px; } .wrapper .mobile-header #mobile-nav { display: none; position: absolute; width: 100%; height: 100%; z-index: 999; left: 0; top: 0; background: rgba(0, 0, 0, 0.8); } .wrapper .mobile-header #mobile-nav ul { display: flex; flex-direction: column; margin-top: 20px; } .wrapper .mobile-header #mobile-nav ul li { z-index: 999; display: flex; margin: auto auto; margin-bottom: 20px; } .wrapper .mobile-header #mobile-nav ul li a { position: relative; display: block; width: 100%; color: #fff; z-index: 999; text-transform: uppercase; font-weight: bold; } .wrapper .content-wrapper { flex-flow: column nowrap; } .wrapper .content-wrapper .content { border-radius: 0; order: 1; padding: 25px 5px 0 5px; margin-bottom: -2px; } .wrapper .content-wrapper .content .article img { float: none; display: block; clear: both; margin: 0 auto; } .wrapper .content-wrapper .content .index-item-wrapper .index-item { margin-right: 0; width: 100%; } .wrapper .content-wrapper .content .wrapper-list { flex-flow: column nowrap; } .wrapper .content-wrapper .content .novels { width: 100%; } .wrapper .content-wrapper .content .novels ul li { margin-bottom: 10px; } .wrapper .content-wrapper .content .stories { width: 100%; } .wrapper .content-wrapper .content .stories ul li { margin-bottom: 10px; } .wrapper .content-wrapper .content .poems ul .poems-wrapper li { margin-bottom: 10px; } .wrapper .content-wrapper .sidebar-wrapper { border-radius: 0; order: 2; width: 100%; } .wrapper .content-wrapper .sidebar-wrapper .sidebar { border: 0; } .wrapper .content-wrapper .sidebar-wrapper .sidebar .developer img { margin-right: 20px; } .wrapper .footer { background-size: cover; height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wrapper .footer .footer-wrapper { height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wrapper .footer .footer-sitebar { margin-top: 20px; } .wrapper .footer .link-site { position: relative; } .wrapper .header { display: none; } .wrapper #nav { display: none; } }