/* Theme Name: surprise-74.ru Description: Markup by Dimox Author: Dimox */ /* reset */ html { box-sizing: border-box } *, :after, :before { box-sizing: inherit } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } table { border-collapse: collapse; border-spacing: 0 } :focus { outline: 0 } /* end reset */ /* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } a { background-color: transparent } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } dfn { font-style: italic } mark { background: #ff0; color: #000 } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { box-sizing: content-box; height: 0 } pre { overflow: auto } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled], html input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto } input[type=search] { -webkit-appearance: textfield } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0; padding: 0 } textarea { overflow: auto } optgroup { font-weight: 700 } table { border-collapse: collapse; border-spacing: 0 } td, th { padding: 0 } /* end normalize */ body { background: #FFF; font: 14px/1.214 'PT Sans', sans-serif; color: #3B374F; } a { color: #5165AE; text-decoration: none; } a:hover { color: #3B374F; text-decoration: underline; } p { margin: 0 0 20px; } .aligncenter, div.aligncenter { display: block; margin-right: auto; margin-left: auto; } .alignleft { float: left; } img.alignleft, .wp-caption.alignleft { margin: 5px 20px 10px 0; } .alignright { float: right; } img.alignright, .wp-caption.alignright { margin: 5px 0 10px 20px; } .container { overflow: hidden; min-width: 320px; } .wrapper { width: 1000px; margin: 0 auto; } .head { padding: 0 0 27px; background: url('i/header.jpg') no-repeat; background-size: cover; } /* Header -----------------------------------------------------------------------------*/ .header { position: relative; height: 255px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAGCAYAAABAU4emAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV1JREFUeNqM0s8rBHEYx/GdZZdEfu6Zk5NESri4SC7KykVckE35E/wZctmLlOS0kpSDH2XLxY+DszYSkmQV2dHujPdTHzVtu+zUq5mm+T7P5/t9xokvpkIlrjD6sYIRVOEO21jDM/xQZZeDFkwjgQ684ByH2E8l408lFxaFs0KNmMcQ1nGEAtoxhT5s6v3nPyGr0YUFfGALt4ihV7VaVe+MkIVS4SxUDQaxjBus4rGouTUbwBxc7OIaWeT1ra96bRjHMPbshBQwWKtZE5rFBTbwSkj/N1yndjeKJiRxqlF+B8I5Kmj3Boxp5B4yeNMaV6ffgwc1zKhOTrXsu6jqFRRySWuOkbaDsXAnPNxr/gdq4mlRuatWzexf6pZYoPG7GlzqRN0y9cLabFT1LNyERl5nyWdUzFXhfAU/e067zipEWmssQETPnr51/6jnMUK7f00mdiLazBXqbYo/AgwAB5dpAp97s8wAAAAASUVORK5CYII=') repeat-x 50% 100%; } .header__logo { position: absolute; top: 60px; left: 0; min-height: 82px; padding: 0 0 0 0px; color: #3B374F; text-decoration: none; } .header__logo-sitename { display: inline-block; font-size: 35px; font-weight: normal; } .header__logo-domain { display: inline-block; vertical-align: 19px; width: 30px; height: 30px; border-radius: 50%; background: #5165AE; font-size: 18px; font-weight: 500; line-height: 30px; color: #FFF; text-align: center; } .header__logo-title { font-size: 12px; color: #5C596C; } .header__logo:hover { text-decoration: none; } .header__fav { position: absolute; top: 40px; left: 114px; padding: 3px 0 3px 15px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFxJREFUeNpifO+TxYAEWoG4GsZhQpLwAOIqKA0GLECcDMS2SIILgHgHEB8G6XwGxJFALA6VFIfyn4EktwNxEwMqAPG3w+xkhNJ/kVXAJJmBOA+IxaA0yC0MAAEGABoQDdcdL1/+AAAAAElFTkSuQmCC') no-repeat 0 4px; font-size: 10px; color: #5165AE; } .header__top-nav { position: absolute; top: 40px; left: 350px; font-size: 12px; } .header__top-nav li { float: left; list-style: none; } .header__top-nav li:not(:first-child) { margin: 0 0 0 18px; } .header__top-nav a { display: block; } .search-form { position: absolute; top: 86px; left: 340px; width: 270px; height: 40px; border-radius: 3px; background: #FFF; font-size: 12px; } .search-form__field { width: 100%; padding: 11px 43px 11px 17px; border: none; background: none; } .search-form__button { position: absolute; top: 0; right: 0; width: 46px; height: 100%; border: none; background: url('data:image/gif;base64,R0lGODlhCwALAIABAFFlrv///yH5BAEAAAEALAAAAAALAAsAAAIYTIBge6z7XjNKzmalpa6zk4Cfg4xQaYIFADs=') no-repeat 50%; } .header__nav { position: absolute; bottom: 33px; left: 15px; font-size: 20px; font-weight: normal; } .header__nav li { list-style: none; } .header__nav>ul>li { position: relative; float: left; padding: 0 0 5px; } .header__nav>ul>li:not(:first-child) { margin: 0 0 0 34px; } .header__nav>ul>li>a { color: #3B374F; } .header__nav>ul>li>a:hover { color: #5165AE; text-decoration: none; } .header__nav ul ul { position: absolute; top: 100%; left: 0; display: none; min-width: 100%; padding: 5px 0; border-radius: 4px; background: #476CAF; white-space: nowrap; font-size: 16px; } .header__nav ul ul li:hover { background: #3A5C99; } .header__nav ul ul a { display: block; padding: 10px 19px; color: #FFF; } .header__nav ul ul a:hover { background: #3A5C99; color: #FFF; text-decoration: none; } .header__nav li:hover>ul { display: block; } .header__nav ul ul ul { top: 5px; left: 100%; border-radius: 0 4px 4px 4px; background: #3A5C99; } .header__nav ul ul ul a:hover { background: #314E82; } .popular { padding: 25px 0 0; text-align: center; } .popular:after { content: ''; display: table; clear: both; } .popular__headline { margin: 0 0 25px; font-size: 16px; } .popular li { float: left; width: 120px; margin: 0 0 0 56px; list-style: none; } .popular li:first-child { margin: 0; } .popular a { display: block; } .popular__image { display: block; margin: 0 0 15px; border-radius: 3px; } /* Middle -----------------------------------------------------------------------------*/ .middle { padding: 30px 0; } .middle:after { content: ''; display: table; clear: both; } .content { float: left; width: 100%; padding: 0 300px 0 0; } .recent-comments { margin: 0 0 30px; } .recent-comments:after { content: ''; display: table; clear: both; } .recent-comments .headline { text-align: center; } .recent-comments-items { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .recent-comment { float: left; width: 220px; padding: 60px 20px 18px; border-radius: 3px; background: #F6F6F6 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZNJREFUeNpiDExdx4AHiAGxORAbArE0FvnHQHwBiA+tmxX4CZchjDgs4QNiPyC2BmImBsLgNxDvBeJtQMt+oktiM0ABiGuB2JZIC0CAFYg9gLg6KG29GCFLNIC4BOoTcoA4EFcALZLGZQnIBRlQV1ECuEHmAC3ixWZJGhBzMlAHgBwchm6JGRDLMlAXmAF9I49siQcDbYA3zBIhHHmAGkAX6BtOFiDDCJ+qpRM98ZoSnb8dnzTIEwogQoJcC4hUI80ETXK0BJwgS/4RUgULEnSaWACy5DOxQYJOEwm+gCx5SmakEqvmMQu0qI7CVRhiMwTmEyIsAJXID2HBdYcU/5MQJ2eARf9vmOs3k5pkiLDoD6h+QS5WbgHxRSon3QNAX7xBL4UXA/ErKlkACv712Ip6UNxMA+J3FFoASq0zgL74g6tmfA7E7UD8gEwLQEHeCbQAJe+xYFEIanV0QhsRfkRWxS+BeAPQ8HPYJFlwaAIVNYeB+DgQawKxPhDLQasFULX6AYg/AvFtIL4CNPw6PhcABBgA5+ZpFyd1BeUAAAAASUVORK5CYII=') no-repeat 50% 20px; text-align: center; } .recent-comment+.recent-comment { margin-left: 40px; } .recent-comment__title { margin: 0 0 12px; font-size: 16px; line-height: 19px; } .recent-comment__comments { margin: 13px 0 0; line-height: 1; color: #6F7070; } .recent-comment__comments span { display: block; font-size: 30px; font-weight: normal; color: #6BB44D; } .headline { margin: 0 0 13px; font-size: 20px; font-weight: normal; } .breadcrumbs { margin: 30px 0 0; color: #91909A; text-align: center; } .breadcrumbs a { text-decoration: none; } .breadcrumbs .home { padding: 0 0 0 20px; background: url('data:image/gif;base64,R0lGODlhCwAKAIABAFFlrv///yH5BAEAAAEALAAAAAALAAoAAAIYTGBoewfKHnrMLZpgtk5R34QgKJadJAUFADs=') no-repeat 0 5px; } .breadcrumbs .sep { display: inline-block; vertical-align: top; width: 3px; height: 5px; margin: 6px 6px 0; background: url('data:image/gif;base64,R0lGODlhAwAFAIABAFFlrv///yH5BAEAAAEALAAAAAADAAUAAAIFRAKWi1cAOw=='); text-indent: -9999px; } .items:after { content: ''; display: table; clear: both; } .item { float: left; width: 220px; margin: 0 0 26px 20px; } .item:nth-child(3n+1) { clear: both; margin-left: 0; } .item__link { display: block; } .item__image { display: block; margin: 0 0 17px; border-radius: 3px; } .item__title { font-size: 16px; line-height: 19px; } .item__cat { margin: 13px 0 0; font-size: 12px; } .item__cat a { color: #5CAE38; } .item__views { display: inline-block; margin: 13px 0 0; padding: 0 0 0 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAAGuM1UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMRJREFUeNqU0UsLAVEUwHFjFpSF8gopVkKmWPAFsLEQ5TtaWsvWTgojJI8kj5KlInn8T51i69Svae6ZM/ecew3HN5xIooC4rm3RxwIvWTA14UEVZbwxxh4xFOHFDg8pcKOOLDZoYYYVpoggjQCWUlBCDk+0cUYUTf3BGnkEpSPp29K27jgggYbOkcFJcxKWFNj64tJtbzBwxARhzUnYpg4nH4b0OUIPAz25GnyYo2P8nFJFZ7loUiIFP4bo4mr8ew8fAQYAY7csxiK30fAAAAAASUVORK5CYII=') no-repeat 0 2px; font-size: 12px; color: #91909A; } .pagination { margin: 3px 0 0; text-align: center; } .pagination a, .pagination span { display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin: 0 3px; border: 1px solid #DEDEE4; border-radius: 3px; transition: .1s; line-height: 30px; text-align: center; text-decoration: none; } .pagination a:hover, .pagination .current { border-color: #77C356; background: #77C356; color: #FFF; } .pagination .prev, .pagination .next { font-size: 17px; } .post__headline { margin: 0 0 20px; font-size: 36px; line-height: 1.1; } .post__entry { font-size: 16px; line-height: 19px; } .post__entry:after { content: ''; display: table; clear: both; } .post__entry> :last-child { margin-bottom: 0; } .post__entry a { text-decoration: underline; } .post__entry h2, .post__entry h3, .post__entry h4, .post__entry h5, .post__entry h6 { margin: 30px 0 20px; font-size: 30px; line-height: 1.1; } .post__entry h3 { font-size: 28px; } .post__entry h4 { font-size: 26px; } .post__entry h5 { font-size: 24px; } .post__entry h6 { font-size: 22px; } .post__entry ol { margin: 0 0 20px 40px; } .post__entry ul { margin: 0 0 20px 40px; } .post__entry ul>li { position: relative; margin: 0 0 6px; list-style: none; } .post__entry ul>li:before { content: ''; position: absolute; top: 6px; left: -20px; width: 3px; height: 5px; background: url('data:image/gif;base64,R0lGODlhAwAFAIABAEh0sP///yH5BAEAAAEALAAAAAADAAUAAAIFRAKWi1cAOw=='); } .post__entry li ul, .post__entry li ol { margin-top: 20px; } .post__entry table { width: 100%; margin: 22px 0; } .post__entry th, .post__entry td { padding: 6px 10px; border: 1px solid #DDD; } .post__entry blockquote { margin: 22px 0; padding: 12px 20px 12px 100px; border: 1px solid #AEEB60; border-radius: 3px; background: url('i/blockquote.png') no-repeat 25px 50%; } .post__entry blockquote.red { border-color: #FFA0A0; background: url('data:image/gif;base64,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') no-repeat 26px 50%; } .post__entry blockquote p { margin: 0; padding: 8px 0; } .post__entry img { max-width: 100%; height: auto; } .post__entry iframe { max-width: 100%; display: block; margin: 20px auto; border: none; } #toc_container { margin: 30px 0; padding: 20px; border-radius: 3px; background: #F6F6F6; } #toc_container .toc_title { margin: 0 0 15px; font-size: 20px; font-weight: normal; } #toc_container ul { margin: 0 0 0 20px; } #toc_container ul ul { margin-top: 5px; } #toc_container li { margin: 0; font-size: 14px; } #toc_container li:before { left: -12px; } #toc_container li+li { margin: 5px 0 0; } .wp-caption { position: relative; z-index: 1; background: #F6F6F6; } .wp-caption img { vertical-align: bottom; } .wp-caption.alignnone, .wp-caption.aligncenter { margin-bottom: 22px; } .wp-caption-text { padding: 12px; font-size: 14px; font-style: italic; color: #8D9CAA; text-align: center; } .post-share { margin: 25px 0 15px; } .post-share:after { content: ''; display: table; clear: both; } .post-share .vk-like, .post-share .fb-like, .post-share .twitter-share-button, .post-share .g-plus { float: left; margin-bottom: 10px; } .post-share .fb-like, .post-share .twitter-share-button { margin-right: 25px; } .comment-list { margin: 0 0 30px; } .comment-list li { list-style: none; } .comment-list .children li { padding: 0 0 0 20px; } .comment { margin: 0 0 20px; padding: 20px 20px 20px 100px; border-radius: 3px; background: #F6F6F6; } .comment:after { content: ''; display: table; clear: both; } .comment .avatar { float: left; margin: 0 0 0 -80px; } .comment-meta { margin: 0 0 14px; font-size: 12px; } .comment__author { display: inline-block; margin: 0 10px 0 0; font-size: 12px; color: #0FB12A; } .comment__text> :last-child { margin-bottom: 0; } .comment__reply { display: inline-block; vertical-align: top; margin: -2px 10px 0 0; } .comment__reply a { display: block; height: 15px; padding: 0 6px; border-radius: 2px; background: #77C356; font-size: 9px; line-height: 16px; color: #FFF; text-decoration: none; } .comment-nav { margin: -10px 0 30px; } .comment-nav:after { content: ''; display: table; clear: both; } li .respond { margin: 30px 0; } .respond__headline { margin: 0 0 15px; } .respond__cancel { margin: 0 0 12px; } .comment-form-fields:after { content: ''; display: table; clear: both; } .comment-form-field { float: right; width: 50%; padding: 0 0 0 5px; } .comment-form-field:nth-child(2n+1) { float: left; padding: 0 5px 0 0; } .comment-form__field { width: 100%; margin: 0 0 10px; padding: 8px 13px; border: 1px solid #E9EBEE; border-radius: 3px; } .comment-form__field::-webkit-input-placeholder { color: #B5B6BF; } .comment-form__field::-moz-placeholder { color: #454650; } .comment-form__field:-ms-input-placeholder { color: #B5B6BF; } .comment-form__comment { width: 100%; height: 90px; padding: 12px 13px; } .comment-form__button { height: 40px; margin: 0; padding: 0 25px; border: none; border-radius: 3px; background: #5165AE; transition: .1s; color: #FFF; } .comment-form__button:hover { background: #6274B6; } /* Sidebar -----------------------------------------------------------------------------*/ .sidebar { float: left; width: 270px; margin-left: -270px; } .sidebar> :last-child { margin: 0; } .catalog { margin: 0 0 30px; padding: 16px 20px 20px; border: 1px solid #AEEB60; border-radius: 3px; } .catalog__headline, .find__headline { margin: 0 0 5px; font-size: 20px; font-weight: normal; text-align: center; } .catalog__text, .find__text { margin: 0 0 16px; opacity: .7; text-align: center; } .catalog select { display: block; width: 100%; height: 40px; margin: 0 0 10px; padding: 0 0 0 14px; border: 1px solid #DEDEE4; border-radius: 3px; } .catalog__link, .find__link { display: block; height: 40px; border-radius: 3px; background: #77C356; transition: .1s; line-height: 41px; color: #FFF; text-align: center; } .catalog__link:hover, .find__link:hover { background: #8BCC6F; color: #FFF; text-decoration: none; } .find { margin: 0 0 30px; padding: 112px 20px 20px; border: 1px solid #B2C1F6; border-radius: 3px; background: url('i/find.png') no-repeat 50% 20px; } .find__link { background: #5165AE; } .find__link:hover { background: #6B7CBA; } .section { margin: 0 0 30px; padding: 16px 20px 20px; border: 1px solid #DEDEE4; border-radius: 3px; } .section__headline { margin: 0 0 13px; font-size: 20px; font-weight: normal; text-align: center; } .sidebar-item { position: relative; display: table; } .sidebar-item+.sidebar-item { margin: 20px 0 0; } .sidebar-item__image { display: table-cell; border-radius: 3px; } .sidebar-item__title { display: table-cell; vertical-align: middle; height: 75px; padding: 0 0 0 15px; } /* Footer -----------------------------------------------------------------------------*/ .footer { position: relative; display: table; padding: 40px 0; color: rgba(255, 255, 255, .5); } .footer:before { content: ''; position: absolute; z-index: -1; top: 0; right: -100%; bottom: 0; left: -100%; background: #525776; } .footer-left { display: table-cell; vertical-align: middle; width: 395px; padding: 0 20px 0 73px; font-size: 12px; } .footer-left p { margin: 0; } .footer-left p+p { margin: 8px 0 0; } .footer__logo { position: relative; margin: 0 0 3px; } .footer__logo:before { content: ''; position: absolute; top: 8px; width: 61px; height: 51px; } .footer__logo-sitename { display: inline-block; font-size: 25px; font-weight: normal; color: #FFF; } .footer__logo-domain { display: inline-block; vertical-align: 14px; width: 22px; height: 22px; border-radius: 50%; background: #5165AE; font-size: 13px; font-weight: 500; line-height: 23px; color: #FFF; text-align: center; } .footer__nav-1 { margin: 15px 0 0; } .footer__nav-1:after { content: ''; display: table; clear: both; } .footer__nav-1 li { float: left; margin: 0 0 0 18px; list-style: none; } .footer__nav-1 li:first-child { margin: 0; } .footer__nav-1 a { color: #FFF; } .footer__nav-2 { display: table-cell; vertical-align: middle; width: 240px; padding: 0 20px 0 0; font-size: 16px; font-weight: normal; } .footer__nav-2 li { list-style: none; } .footer__nav-2 li+li { margin: 10px 0 0; } .footer__nav-2 a { color: #FFF; } .footer__counters { display: table-cell; vertical-align: middle; width: 155px; } .footer__counters img { margin: 7px 0; } .footer__note { display: table-cell; vertical-align: middle; width: 210px; font-size: 12px; text-align: right; } @media screen and (max-width: 999px) { .wrapper { width: 700px; } .header { height: 200px; } .header__top-nav, .search-form { right: 0; left: auto; } .header__nav-toggle { position: absolute; top: 136px; right: -19px; width: 60px; height: 48px; border-radius: 4px 4px 0 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGZJREFUeNpiDExd58nAwDAXiCUZqAOeA3EyE5UNZYCaNZeJgTaAEWRwChC/oKKhT0FBwQIktlE5KCBO/v//P03CglZhzMASlLaeZi4GpeNnQPyfShhkludoOh5Nx6PpeFilY4AAAwAToULcKgP40AAAAABJRU5ErkJggg==') no-repeat 50%; cursor: pointer; } .header__nav-toggle.active { background: #476CAF url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNpi+P//vycQP/tPPQAyy5MRxGBgYJBkoC54zsRAG8AIMjgFiF9Q0dCnQJwMCgqaOJlWQTFEDfYEYlCS+08lDDJrNB2PpuPRdDy80jFAgAEATQabJhGYD9IAAAAASUVORK5CYII=') no-repeat 50%; } .header__nav { top: 184px; right: -19px; bottom: auto; left: auto; display: none; padding: 5px 0; border-radius: 4px 0 4px 4px; background: #476CAF; font-size: 16px; text-align: right; } .header__nav.active { display: block; } .header__nav>ul>li, .header__nav>ul>li:not(:first-child) { float: none; margin: 0; padding: 0; } .header__nav>ul a { display: block; padding: 10px 19px; color: #FFF !important; } .header__nav>ul a:hover { background: #3A5C99 !important; } .header__nav ul ul { position: static; display: block; padding: 0 !important; background: #3A5C99; } .header__nav ul ul li:hover ul { display: none; } .header__nav ul ul ul { display: none; } .popular li { margin: 0 0 0 25px; } .popular li:nth-child(n+6) { display: none; } .content { float: none; padding: 0; } .recent-comments-items { margin: 0 0 -20px; } .recent-comment { width: 340px; margin: 0 0 20px; } .recent-comment+.recent-comment { margin-left: 20px; } .recent-comment:nth-child(2n+1) { margin-left: 0; } .sidebar { float: none; width: 100%; margin: 30px 0 0; } .footer { display: block; } .footer-left, .footer__nav-2 { display: block; float: left; } .footer__counters { display: block; clear: both; width: auto; padding: 10px 0 0 73px; } .footer__note { display: block; width: auto; margin: 20px 0 0 73px; text-align: left; } } @media screen and (max-width: 719px) { .wrapper { width: 460px; } .header__logo { top: 30px; } .header__fav { top: 15px; } .header__top-nav { display: none; } .search-form { top: 137px; right: auto; left: 0; } .popular li { margin-left: 50px; } .popular li:nth-child(n+4) { display: none; } .item:nth-child(3n+1) { clear: none; margin-left: 20px; } .item:nth-child(2n+1) { clear: both; margin-left: 0; } .recent-comment { width: 100%; } .recent-comment+.recent-comment { margin-left: 0; } .post-share .twitter-share-button { clear: both; } .related-items .item:nth-child(n+3) { display: none; } .footer-left { float: none; margin: 0 0 25px; } .footer__nav-2 { float: none; margin: 0 0 10px 73px; } } @media screen and (max-width: 479px) { .wrapper { width: 300px; } .header__logo-sitename { font-size: 31px; } .search-form { width: 250px; } .popular li:nth-child(n+3) { display: none; } .headline { text-align: center; } .post--home .headline { text-align: left; } .item { float: none; width: 100%; margin-left: 0; text-align: center; } .item:nth-child(3n+1) { margin-left: 0; } .item__image { margin-right: auto; margin-left: auto; } .comment-list .children li { padding: 0; } .comment { padding-left: 20px; } .comment .avatar { display: none; } .comment-form-field, .comment-form-field:nth-child(2n+1) { float: none; width: 100%; padding: 0; } .comment-form__button { width: 100%; } } .recom { margin: 20px 0; padding: 10px 10px 10px 15px; border: 3px solid #B3E571; border-radius: 6px; } .recom a { color: #000; text-decoration: none; } .recom a.morelink { color: #3F53A8!important; font-weight: bold } .recom .zag { color: #FF9934; display: block; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none!important; } .title-rec { margin: 30px 0 20px; font-size: 30px; line-height: 1.1; }