@import url("fonts/fonts.css");
* {font-family: Raleway; color: #221; margin:0;}
body {background:#f8fafc;}
h1 {text-align:center; padding: 0.5em; color: #45556c;}
main {max-width:1440px; margin: 0 auto; display:flex;}
	/* Хедер */
header {width:100%; padding: 1em; border: solid 1px #e2e8f0; background: #fff;}
article {overflow:hidden; padding: 0em; margin-top: 1em; border: 2px solid #f4f4f5; box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.05);  border-radius: 10px; flex: 1; background:#fff;}
.sidebar {width:256px;}
.head-container {max-width:1024px; margin: 0 auto; display:table;}
#logo {height:100px; margin:-1em -1em 0 -10em;display:none;}
.menu {display:table-cell; vertical-align:middle;}
.menu-horizontal{text-align:right}
.menu-list{display: inline-block;}
.menu-link {padding: 0.1em 0.2em; text-decoration: none;}
.menu-item {display:inline-block;}
.search {display:inline;}
.search input,.search .submit{padding: 0.3em 0.2em; font-size: 13pt; border: none; vertical-align: middle; border-radius: 0.3em; color: #7cbb64; outline: none; text-align:right;}
.search button{vertical-align: middle; background: none; color: white; border: none; font-size:22pt; text-align:right;}
.line-through {text-decoration:line-through;}
@media screen and (max-width: 80em){ /* 1280px */
	#logo {margin:-1em -1em 0 -1em;}
}
@media screen and (max-width: 48em){ /* 768px */
	#logo {display:block;}
	.menu {display:inline-block;}
	.head-container{padding: 1em 0;}
	.sidebar {width:unset;}
}
@media screen and (max-width: 36em){
main {flex-direction: column;}
}
	/*Заголовок поста, список*/
.post-title {padding: 0.5em ;margin: 0; box-shadow: inset 0 0 0 200vw #6bb350dd;}
.post-title a, .post-title{text-decoration:none; font: normal normal normal 28px 'univers', impact; color: white; text-transform: uppercase;}
.post-picture2{min-height: 350px; max-width:768px; background-size: 100%; overflow: hidden; margin: 0 auto; background-repeat: no-repeat; clear:both;}
.post-picture{display:flex; flex-direction: row-reverse; background-repeat: no-repeat; background-size: contain; background-position-x: 20%;}
.post-picture > p{position: absolute; border-radius: 1em 0 0 1em; background: #E38C18; color: wheat; font-weight: bold; padding: 0.2em 1em;}.
.post-picture h1{margin: 1em 0; background: #6bb350dd; padding: 0.5em 5%;}
#post-picture{flex-direction: row-reverse; background-position-x: center; background-size: unset;}

.post-title ~ p{padding:0 1em; margin: -0.5em 0 0; text-align: right; background: #E38C18; color: wheat; font-weight: bold;}
.post-description {text-align:justify; text-indent: 1.5; padding: 2em; margin: 3em; background: white; border-radius: 1em; flex-basis: 33%; border: 2px solid #f4f4f5; box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.05);}
.more {float:right; position:relative;}
.more a{color: #7cbb64; text-decoration: none; text-transform: uppercase; font-family: univers; font-size: 19pt;}
.more a:hover{color: #e38c18;}
.more a:hover:before{color: #7cbb64; content: "читать"; position: absolute; display: block; height: 65%; overflow: hidden;}
@media screen and (max-width: 80em){ /* 1280px */
	.post-picture{flex-direction: column; background-size: initial; background-position-x: center;}
	.post-description{margin: 350px 0px 0px; border: none; box-shadow: none;}
}
@media screen and (max-width: 48em){ /* 768px */
	.post-description {padding: 1em;}
	.post-title {padding: 0.5em 0;}
}

	/*Таблицы*/
table {background: #fff; border: 1px solid gray; width:100%;}
td {text-align: center; padding: 1em;}
th, .category {font-family: Univers; text-transform: uppercase; font-size: 1.5em; color: #695; font-weight: bold;}	
tr:hover{background:#dea;}
	/*Тело записи*/
.content {padding: 0em; margin-top:1em;	border: 2px solid #f4f4f5; box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.05); border-radius: 10px;}
.content img, .article img{max-width:100%; display: block; margin: 0 auto;}
.article {text-align:justify; text-indent: 2em; padding: 1em 3em; background:white;}
.article h2{font-size: large; color: #7cbb64; clear:both; padding: 1.5em;}
.article h3{font-size: medium; color: #7cbb64;}
.img-vertical {width:49%;}
.img-1-3 {width:30%;}
.img-terminal {float: right; border: 1px solid #808080; padding: 15px 3px 2px; border-radius: 5px; margin: 0 0 1em 1em; background-color: #f2f0eb;}
.dropdown{border: solid 1px #2f512d; background: rgba(78, 108, 75, 0.43); margin: 1em;}
.dropbtn{margin: 5pt;}
.dropdown-content{background:#ffa; display:none;}
.code{border: solid 1px #2f512d; background: #ffa; line-height:1.7;}
pre{text-indent:0; padding:5pt; margin:0;font-family: open sans;}

.terminal {background: #002458; font-weight: unset; font-family: consolas; font-size: initial; color: #eee8aa; padding: 3pt 15pt; margin: 10pt 0; text-indent: 0px; clear:both;}
p.download {text-align:right; padding: 2em 1em;}
p.download a{padding: 0.5em 1em; color: white; text-decoration: none; text-transform: uppercase; font-family: Univers; font-size: 20pt; background: #7cbb64; transition: 0.2s; text-align:center; text-indent: 0;}
p.download a:hover{background: #e38c18;}
pre.php {border: 1px solid #eee;}
pre.php .comment{color:#080;}
pre.php .function{color:#00f; font-weight:bold;}
@media screen and (max-width: 48em){ /* 768px */
	.article {padding: 1em;}
	p.download a {display:block;}
.img-vertical {width:100%;}
.img-1-3 {width:100%;}
}
	/*Навигация*/
.pagination {margin:0 auto; text-align:center;}
.pagination li{display:inline-block; margin:0pt 5pt; border: solid 1px #7cbb64;}
.pagination li:hover, .pagination li.active{background:#7cbb64;}
.pagination li a{text-decoration:none; font-size:12pt; display:block; padding:3pt;}
.pagination li.active a{text-decoration:none; color:white;}
	/*Правый блок*/
.widget {margin: 2em 1em;}
.widget h2 {text-align:center;font-size: 15pt;text-transform: uppercase;}
.widget ul {list-style:none; margin:0px;padding:0px;}
.widget li { margin: 1em; background:#7cbb64;  transition: 0.2s;}
.widget li:hover, .widget li.active{background:#e38c18;}
.widget a {display:block; padding: 0.5em 1em; color:white; text-decoration:none; text-transform: uppercase; font-family: Univers; font-size: 20pt;}
.widget .ad-href {display:inline; color:unset; text-transform:none; font-family:arial; font-size:12pt; padding:0;color: #e38c18;}
.widget .ad-div {padding:0 10pt; font-size: 12pt; font-family: arial;text-align: center;}

	/* Футер */
footer {width: 100%; background: #7cbb64; text-align: center; padding: 1em 0em;}
	
	/*Карусель*/
.carousel{white-space:nowrap; overflow:auto; scrollbar-width: none; -ms-overflow-style: none; text-indent: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 15px 0px;}
.carousel::-webkit-scrollbar{display: none;}
.car-wrap{position:relative;}
.car-nav{display:block;position:absolute;transition: 0.5s; top: 50%; opacity:0.6;font-size:35pt; color:#e38c18;font-weight:bold;text-indent: 0;cursor:pointer;user-select: none; border-radius: 50%; width: 50pt; height: 50pt; text-align: center; line-height: 45pt;}
.car-nav:hover{opacity:1; background: #ffffff55;}
.car-nav-prev{left:0;}
.car-nav-next{right:0;}
.carousel img{display: inline-block; transition: 0.5s; max-width:70%; margin: 0px 15px;pointer-events: none;}
.carousel img.active{box-shadow: 0px 0px 11px 3px rgb(22, 111, 14);}
.car-wrap {text-align: center;}
.car-wrap .dots {margin-top: -5px;}
.car-wrap .dots .dot{transition: 0.3s; display: inline-block; width: 7pt; height: 7pt; border-radius: 50%; background: #7cbb64; margin: 1pt;}
.car-wrap .dots .dot:hover{cursor:pointer; background: #e38c18;}
.car-wrap .dots .dot.active{background:#e38c18;}