@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;700;900&display=swap');
@import url(font-awesome.css);

*{box-sizing:border-box; margin:0; padding:0;}
html {background:#333;}
body {display:none; background:#F0F2F5; font:14px/1.4em 'Fira Sans', sans-serif;}
img {max-width:100%;}
p {margin-bottom:1em;}
a {outline:none; color:#00A550;}
hr {margin:1em auto !important; border:1px solid rgba(0,0,0,0.05);}

table {width:100%; border-collapse:collapse;}
table tr:nth-child(odd) {background:#F0F2F5;}
table td {padding:1em; border:1px solid #eee; vertical-align:top;}

.width {width:1200px; max-width:100%; margin:0 auto;}
.flex {display:flex;}
.center {text-align:center;}
.table {display:table; width:100%; border-collapse:collapse;}
.table .tr {display:table-row;}
.table .tr:nth-child(odd) {background:#f4f4f4;}
.table .tr .td {display:table-cell; padding:1em;}

.h1, .h2 {font-weight:700; font-size:1.2em;}

.button {position:relative; overflow:hidden; display:inline-block; padding:1em 2em; margin:1px 2px; background:#00A550; font-weight:700; color:#fff; border:2px transparent; border-radius:5px; text-decoration:none; cursor:pointer;}
.button.blue {background:#2198D4;}
.button.lite {background:none; color:#00A550; border:2px solid #00A550;}
.button:hover:before {z-index:1; content:""; position:absolute; left:-40px; top:-150px; width:30px; height:300px; display:block; background:rgba(255,255,255,.4); transform:rotate(45deg); transition:.1s all; animation:buttonanim 2s .05s ease-in-out infinite;}
@keyframes buttonanim{0%{left:-30px; margin-left:0;}30%{left:110%; margin-left:80px;}to{left:110%; margin-left:80px;}}

.header {position:sticky; top:0; transition:.5s all; z-index:1; box-shadow:0 0 10px #ccc; background:#fff;}
.header.out {transform:translateY(-100%);}

.top {position:relative; display:flex; justify-content:space-between; align-items:center; padding:1em 0;}
.logo {font-size:2em; font-weight:900; text-transform:uppercase; text-decoration:none; line-height:1.2em; color:#000; align-items:center;}
.logo img {width:auto; height:1.25em; margin-right:0.5em;}
.logo i, .logo span {color:#00A550;}
.logo b {font-weight:300;}

.slogan {font-size:1.25em; color:#555;}
.slogan a {text-decoration:none;}

.sbox {display:flex; align-items: center;}
.sbox a {align-self: center; text-decoration:none; font-size:1.1em; font-weight:700; color:#555; text-transform:uppercase;}
.sbox a i {font-size:1.2em; margin:0 .5em;}
.sbox a.modes i {margin-left:0.75em;}
.sbox a.modes.vk i {color:#0077FF;}
.sbox a.modes.ok i {color:#FF7700;}
.sbox a.modes.tg i {color:#4D9BE3;}

.shownav {display:block; position:relative; width:2em; margin:0;}
.shownav b, .shownav b:before, .shownav b:after {display:block; position:absolute; right:0; width:1.5em; height:0.15em; background:#555; content:''; transition:.25s all;}
.shownav b {top:-3px;}
.shownav b:before {top:-6px;}
.shownav b:after {bottom:-6px;}
.shownav.active b {background-color:transparent;}
.shownav.active b:before {top:0; transform:rotate(-45deg);}
.shownav.active b:after {top:0; transform:rotate(45deg);}
	
.nav {display:none; position:absolute; top:100%; right:0; background:#fff; flex-direction:column; padding:1em 0;}
.nav a {display:block; padding:.5em 1em; font-size:1.2em; text-decoration:none; color:#000;}

.searchform {display:none; position:absolute; top:100%; right:0; padding:1em; background:#fff; border:1px solid #ddd; border-top:0; width:400px; max-width:100%;}
.searchform form {display:flex; justify-content:center;}
.searchform input {width:88%; padding:.75em 1em; border:1px solid #ddd; border-radius:5px 0 0 5px; outline:none;}
.searchform button {width:12%; text-align:center; border:0; border-radius:0 5px 5px 0; background:#00A550; color:#fff; cursor:pointer; outline:none;}
.searchform button i {font-size:2em;}

.section {padding:3em 0; min-height:80vh;}

.speedbar {padding:1em 0;}

.posts {display:flex; flex-wrap:wrap; justify-content:center;}
.posts > a, .posts > div {width:24%; margin:0 0.5% 2em; text-decoration:none; color:#333; box-shadow:0 5px 15px #ddd; border-radius:5px; background:#fff;}
.posts > a img, .posts > div img {display:block; width:100%; height:180px; object-fit:cover; border-radius:5px 5px 0 0;}
.post .text {padding:1em; font-size:1.2em;}
.post .inform {font-size:.75em; color:#999; margin-bottom:0.5em;}
.post .title {text-decoration:none; color:#555; font-size:1.1em;}
.post .views {display:block; margin-top:1em; font-size:.75em; font-style:normal; color:#555; text-align:right;}

.relatedtitle {margin:2em 0 1em 0; font-size:2em;}
.post.related {width:24%;}

.post.full .text {background:#fff; padding:1.5em; font-size:1em; border-radius:5px;}
.post.full .title {font-size:2.2em; font-weight:700; line-height:1.1em; color:#555; margin-bottom:1em;}
.post.full .title.small {font-size:1.8em;}
.post.full .inform {font-size:.5em; font-weight:300; line-height:1.4em; color:#999; margin-top:1em;}
.post.full .inform i {display:inline-block; margin:0 0.35em 0 1em;}
.post.full .inform span {display:inline-block; margin-right:1em;}
.post.full .inform i:first-child {margin-left:0;}
.post.full .text {
	font-size:1.2em; line-height:1.6em;
	img {display:block; margin:0 auto; text-align:center;}
	.highslide {
		position:relative; display:block; overflow:hidden; margin:1rem 0; border-radius:0.5rem; overflow:hidden;
		background-position:center center; background-size:cover; background-repeat:no-repeat;
		&:before {
			content:''; position:absolute; top:0; bottom:0; left:0; right:0; 
			backdrop-filter:blur(20px);
		}
		img {position:relative; margin:0 auto;}
	}	
	figure {display:block; margin:0 auto 1em auto; line-height:1.2em; text-align:center; font-size:.85em; color:#777;}
}

.post.full .share {margin-top:2em; align-items:center; justify-content:center;}
.post.full .share > span {padding-right:1em; text-transform:uppercase; font-weight:300;}

#fullsearch {width:100%; flex-grow:1; margin-bottom:2em;}
.full.searchform form {display:flex;}
.full.searchform input {width:50%; padding:1em; border:1px solid #ddd; border-radius:5px 0 0 5px; outline:none;}
.full.searchform button {width:4em; padding:1em; text-align:center; border:0; border-radius:0 5px 5px 0; background:#00A550; color:#fff; cursor:pointer; outline:none;}
.searchresult {margin-top:2em;}

.full.info {margin-bottom:2em;}

.navigation {justify-content:center; flex-wrap:wrap; margin-top:2em; font-size:1.2em;}
.navigation span, .navigation a {width:auto; min-width:30px; height:30px; line-height:1.8em; text-align:center; margin:0; padding:0 0.5em; text-decoration:none; background:#efefef; transition:.5s all;}
.navigation span {color:#999;}
.navigation span.current, .navigation a:hover {background:#bbb; color:#fff;}
.next {display:inline-block; padding:0.5em 2em; background:#00A550; font-weight:700; color:#fff; border-radius:5px; text-decoration:none;}

.footer {padding:3em 0; background:#FFF;}
.footer_text {font-size:0.8em; color:#999;}

/* Тёмная тема */
.dark a {color:#fff;}

.dark .header {background:#333; box-shadow:0 0 10px #000; color:#fff;}

.dark .logo {color:#fff;}
.dark .slogan {color:#ccc;}

.dark .nav {background:#333;}
.dark .shownav b, .dark .shownav b:before, .dark .shownav b:after {background:#fff;}
.dark .shownav.active b {background-color:transparent;}
.dark .modes i {color:#fff;}
.dark .modes.darkmode i {transform:scaleX(-1);}

.dark .searchform {background:#333; border:none;}
.dark .searchform input {border:none; background:#777;}

.dark .section {background:#444; color:#fff;}

.dark .posts > a, .dark .posts > div {color:#fff; background:#333; box-shadow:0 5px 15px #111;}
.dark .post .inform, .dark .post .views {color:#ccc;}
.dark .post .title {color:#efefef;}

.dark .post.full .title {color:#efefef;}
.dark .post.full .inform {color:#999;}
.dark .post.full .inform a {color:#bbb;}
.dark .post.full .text {background:none;}
.dark .post.full .text figure {color:#ccc;}

.dark .full.searchform input {border:0;}

.dark .navigation span, .dark .navigation a {background:#333;}
.dark .navigation span.current, .dark .navigation a:hover {background:#111; color:#fff;}

.dark .footer {padding:3em 0; background:#333; color:#ccc;}
.dark .footer_text {color:#777;}

.fwrap {width:600px; max-width:100%; margin:0 auto;}
.fbox {position:relative; padding:0 0 56.25% 0; height:0; overflow:hidden;}
.fbox iframe,.myvideo object,.myvideo embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.footer {padding:2em 0; background:#fff;}
.footer > .flex {justify-content: space-between;}
.footer strong {display:block; margin-bottom:0.5em;}
.footer .sbox a.modes i {margin:0 0.25em;}	
.copyrights {width:50%;}
.inf {font-size:0.85em; line-height:1.2em; color:#777;}


@media only screen and (max-width:769px) {
	.header {padding:0;}
	.logo, .sbox {padding:0 10px;}
	.logo {font-size:1.3em;}
	
	.slogan {display:none;}
	
	.nav {left:0;}
	.nav a {text-align:center;}
	
	.sbox a.modes i {margin:0 .25em;}
	.sbox span {display:none;}
	.searchform {width:100%; padding:2em 1em; border:0; background:rgba(255,255,255,.75); backdrop-filter:blur(10px);}
	
	.full.searchform input {width:calc(100% - 4em);}
	
	.section .width {max-width:95%;}

	.posts > a, .posts > div {display:block; width:95%; margin:0 auto 1em; /text-align:center;}
	.post.related {width:48%;}
	.post.related .title {font-size:1em;}
	
	.post.full .title {font-size:1.8em;}
	.post.full .text {padding:0.5em;}	
	
	.footer {padding:2em 1em;}
	.footer > .flex {flex-direction:column;}
	.footer strong {display:block; margin:0.5em auto; text-align:center;}
	.footer .logo, .footer .sbox {padding:0; justify-content: center;}
	.footer .inform {text-align:center;}
	.copyrights {width:100%;}
}
.ads {height:0; overflow:hidden;}