@import url(reset.css);

/*========================= Переменные =============================*/
html {
	--color-text-post: #0a4a5c;
	--border-post: 1px solid #d1d0d0;
	--font-text-main: 0.9em Verdana;
}

/*--------------------- Скролл-бар ----------------------------*/
::-webkit-scrollbar{
    width:10px;
}
::-webkit-scrollbar-thumb{
    border-color: #2d9fe0;
    background-color: #2d9fe0;
}
::-webkit-scrollbar-thumb:hover{

    border-color: #555;
    background-color: #aaa;
}

::-webkit-scrollbar-track{
    border-width:0;
}
::-webkit-scrollbar-track:hover{

}

/*--------------- Стили по умолчанию ----------------------*/
cite {
	display: block;
	padding: 0.5em 1em;
	border-left: 2px solid #cc0000;
	border-right: 2px solid #cc0000;
	font: italic 1em Verdana;
	background: #eee;
}

b, strong {
  font-weight: bolder;
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

ul, ol {
	font: 1rem Georgia;
	list-style-type: disc;
	list-style-position: inside;
	padding: 1rem 1rem 1rem 1.5rem;
}
	ul li, ol li {
		margin-bottom: 0.2rem;
	}
ol {
	list-style-type: decimal;
}

.post iframe {
	display: block;
    margin: 1.4rem auto;
    width: 40em;
    height: 22em;
}

#but, #but2, .wrap-nav nav h5, .on-footer h5 {
	display: none;
}
#but, #but2 {
	width: 30px;
	height: 25px;
	background: url('../images/but.png');
	position: absolute;
	right: 10px;
	top: 4px;
	cursor: pointer;
}
#but2 {
	right: 50px;
}

a:link {
	color: #0571d0;
}
a:visited {
	color: #654a5c;
}
a:hover {
	color: #d00548;
}
a:active {
	color: #d03505;
}

div.no-search {
	padding: 2em 0;
	text-align: center;
}
span.no-search {
	font: 1em Tahoma;
	color: var(--color-text-post);
	padding: 0.5em;
	padding-right: 40px;
	background: url('../images/smiles/dntknw.gif') no-repeat right center;
}

/*------------------------ Таблица ----------------------*/

table, th, td {
    border: 1px solid #c3c5c6;
    border-collapse: collapse;
    padding: 0.5rem;
}
table {
    width: 90%;
    margin: 1.5rem auto;
}

/*---------------------------------------------------------*/

:root {
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

body {
	overflow-x: hidden;
background: rgb(36,149,213);
background: linear-gradient(180deg, rgba(36,149,213,1) 0%, rgba(36,149,213,1) 0%, rgba(43,158,223,1) 31%, rgba(69,184,249,1) 72%, rgba(69,184,249,1) 93%, rgba(69,184,249,1) 100%);
}

.top {
	height: 1.5em;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#10547a+1,319ede+100 */
background: #10547a; /* Old browsers */
background: -moz-linear-gradient(top,  #10547a 1%, #319ede 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #10547a 1%,#319ede 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #10547a 1%,#319ede 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10547a', endColorstr='#319ede',GradientType=0 ); /* IE6-9 */

}

.wrapper {
	width: 98%;
	margin: 0 auto;
	min-width: 320px;
}

header {
	padding: 0;
}

.logo-container {
	/*overflow: hidden;*/
}
.logo-container p {
	width: 10%;
	float: left;
	max-width: 200px
}

	.logo-container p a {
		display: block;
		font: .7em Tahoma;
		color: #fff;
		margin-bottom: .3em;
		text-decoration: none;
	}
	.logo-container p a:before {
		content: '\2022  ';
	}
	.logo-container p a:hover {
		color: #fee408;
	}

.logo {
	float: left;
	width: 35%;
	background: #fff;
	border-radius: 0.6em 0.6em 0 0;
	shape-outside: polygon(0px 0px, 0px 100%, 100% 100%, 83% 0);
  	clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 83% 0);
  	border: 5px solid #f2f2f2;
  	border-bottom: none;
  	padding: .9em 0 0 1.5em;
  	margin-bottom: -1px;
}
.logo a {
	display: block;
	font: bold 2em Impact;
	text-decoration: none;
	line-height:38px;
  	color: #ffb600;
  	/*text-shadow: 1px 1px 1px #5c5757;*/
background: #ffb400;
background: -moz-linear-gradient(top,  #ffb400 0%, #ffb400 56%, #ffb400 56%, #ffb400 56%, #ffb400 59%, #56b6f9 61%, #56b6f9 75%, #56b6f9 100%);
background: -webkit-linear-gradient(top,  #ffb400 0%,#ffb400 56%,#ffb400 56%,#ffb400 56%,#ffb400 59%,#56b6f9 61%,#56b6f9 75%,#56b6f9 100%);
background: linear-gradient(to bottom,  #ffb400 0%,#ffb400 56%,#ffb400 56%,#ffb400 56%,#ffb400 59%,#56b6f9 61%,#56b6f9 75%,#56b6f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb400', endColorstr='#56b6f9',GradientType=0 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
	letter-spacing: 1px;
}
.logo a:hover {

}
.logo span {
	display: block;
	font: 11px Tahoma;
	text-transform: uppercase;
	line-height: 12px;
	padding-left: .3em;
	color: #ff8a00;
	text-shadow: 0px 0px 0.3px #5c5757;
}
.logo span i {
	color: #3aa9e8;
	font-style: normal;
}

.tools {
	float: right;
	width: 45%;
}
	.tools h6 {
		text-align: center;
		padding: 0.4em 0.9em;
		font: bold 0.7em Tahoma;
		text-transform: uppercase;
		color: #ffda00;
		border-radius: 0.4em;
		margin-bottom: 0.4em;
		background: #08678c;
	}
		.tools h6 span {
			color: #fff;
		}

.install {
	position: absolute;
	padding: 0.2em 0.4em;
	border-radius: 0.4em;
	text-align: center;
}
.install a {
	margin-right: 0.2em;
}
	.install img {
		width: 2em;
		height: 2em;
		opacity: 0.8;
	}
	.install img:hover {
		opacity: 1;
		transition: transform 0.2s ease-out;
		transform: scale(1.3);
	}

.logo-bottom {
	border-left: 5px solid #f2f2f2;
	border-right: 5px solid #f2f2f2;
	background: #fff;
	height: 1.2em;
	border-radius: 0 0.6em 0 0;
}

.wrap-nav {
	background: #fff;
	border-left: 5px solid #f2f2f2;
	border-right: 5px solid #f2f2f2;
	padding: 0 0.3em;
}

.nav-top {
	height: 0.6em;
	margin: 0 auto 0.2em;
	border-radius: 0.6em 0.6em 0 0;
background: rgb(229,229,229);
background: -moz-linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(235,235,235,1) 45%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(235,235,235,1) 45%, rgba(249,249,249,1) 100%);
background: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(235,235,235,1) 45%, rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e5e5",endColorstr="#f9f9f9",GradientType=1);
}

.wrap-nav nav {
	text-align: center;
	border-radius: 0.4em 0.4em 0 0;
	margin: 0.2em auto 0;
	padding: 1.1em;
background: rgb(235,235,235);
background: -moz-linear-gradient(180deg, rgba(235,235,235,1) 0%, rgba(246,246,246,1) 35%, rgba(254,254,254,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(235,235,235,1) 0%, rgba(246,246,246,1) 35%, rgba(254,254,254,1) 100%);
background: linear-gradient(180deg, rgba(235,235,235,1) 0%, rgba(246,246,246,1) 35%, rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebebeb",endColorstr="#fefefe",GradientType=1);
}

.wrap-nav nav a {     
	color: #2092d3;
	font: bold 0.7em Tahoma;
	text-transform: uppercase;
}
.wrap-nav nav a:hover {
	color: #ff0046;
}
.wrap-nav nav a + a {
	margin-left: 0.9em;
	border-left: 1px solid #2092d3;
	padding-left: 0.9em;
}

.breadcrumbs {
	border-top: 5px solid #29b3ea;
	padding: 0.9em;
background: #2598d9;
background: -moz-linear-gradient(top,  #2598d9 1%, #37aaeb 40%, #45b7f8 100%);
background: -webkit-linear-gradient(top,  #2598d9 1%,#37aaeb 40%,#45b7f8 100%);
background: linear-gradient(to bottom,  #2598d9 1%,#37aaeb 40%,#45b7f8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2598d9', endColorstr='#45b7f8',GradientType=0 );

}
	.breadcrumbs a, .breadcrumbs b  {
		font: 0.9em Tahoma;
		color: #fff;
		text-decoration: none;
	}
	.breadcrumbs a:hover {
		color: #ffda00;
		text-decoration: underline;
	}
	.breadcrumbs a + a {
		margin-left: 0.5em;
	}
		.breadcrumbs a > img {
			width: 1em;
			margin-right: 0.7em;
		}
	.breadcrumbs a::after {
		content: ' \00BB';
	}
	.breadcrumbs b {
		margin-left: 0.5em;
		font: 1em Tahoma;
		color: #fff;
		text-shadow: 0.1em 0.1em 0.2em #262525;
	}
	.breadcrumbs b span {
		color: yellow;
	}


/*-------------------------- flex ------------------------------------*/
.flex {
	display: flex;
	border-radius: 0 0 0.9em 0.9em;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(152, 146, 146, 0.8);
-moz-box-shadow:    0px 3px 5px 0px rgba(152, 146, 146, 0.8);
box-shadow:         0px 3px 5px 0px rgba(152, 146, 146, 0.8);

}
.under-flex {
	border-bottom: 1px solid #84cdff;
	border-radius: 0 0 0.9em 0.9em;
background: #4fb8f4;
background: -moz-linear-gradient(top,  #4fb8f4 97%, #4fb8f4 97%, #2aa9f2 98%, #0c9ef0 99%, #0c9ef0 99%, #059bef 100%);
background: -webkit-linear-gradient(top,  #4fb8f4 97%,#4fb8f4 97%,#2aa9f2 98%,#0c9ef0 99%,#0c9ef0 99%,#059bef 100%);
background: linear-gradient(to bottom,  #4fb8f4 97%,#4fb8f4 97%,#2aa9f2 98%,#0c9ef0 99%,#0c9ef0 99%,#059bef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fb8f4', endColorstr='#059bef',GradientType=0 );

}

aside {
	border-left: 5px solid #f2f2f2;
	padding: 0 0.3em;
	flex: 20%;
	width: 20vw;
	max-width: 300px;
	min-width: 250px;
	background: #fff;
	border-radius: 0 0 0 0.9em;
}
	aside hr {
		border: 3px solid #ffaf00;
	}

aside.right {
	border-left: none;
	border-right: 5px solid #f2f2f2;
	border-radius: 0 0 0.9em 0;
}
	aside .aside__in {
		background: #eaeaea;
		padding: 0.3em;
		border: 1px solid #dfdfdf;
		border-radius: 0.3em;
		height: calc(100% - 2em);
	}
	.aside__in section {
		margin-bottom: 1.1em;
		padding-bottom: 0.9em;
		background: url('../images/shadow.png') no-repeat center bottom; 
	}
	a.bottom-btn {
		display: block;
		text-align: center;
		text-shadow: 1px 0 1px #737373;
		background: #f96b04;
		padding: 0.5em 0;
		color: #fff;
		border-radius: 0 0 0.6em 0.6em;
		border-top: 1px solid #fff;
		text-decoration: none;
		font-family: Tahoma;
	}
	.bottom-btn:hover {
		background: #ec3f0a;
	}

		.h2-head {
			padding: 0.4em 0.7em;
			border-radius: 0.1em;
			color: #fff;
			font: 17px Tahoma;
			border-bottom: 3px solid #68b8e5;
			outline-bottom: 1px solid #f0f0f0;
			margin-bottom: 0.9em;

background: #42b5f6;
background: -moz-linear-gradient(top,  #42b5f6 0%, #299cdd 100%);
background: -webkit-linear-gradient(top,  #42b5f6 0%,#299cdd 100%);
background: linear-gradient(to bottom,  #42b5f6 0%,#299cdd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b5f6', endColorstr='#299cdd',GradientType=0 );
-webkit-box-shadow: 0px 3px 5px 0px rgba(152, 146, 146, 0.8);
-moz-box-shadow:    0px 3px 5px 0px rgba(152, 146, 146, 0.8);
box-shadow:         0px 3px 5px 0px rgba(152, 146, 146, 0.8);
}
	
.category a {
	display: block;
	background: #d3d3d3;
	padding: 0.5em 0;
	color: #000;
	font: 0.8em Tahoma;
	border: 1px solid #fff;
	border-radius: 0.2em;
	margin-bottom: 0.05em;
	text-decoration: none;
}
.category a:hover {
	background: #45b8f9;
	color: #fff;
}
.category > a::before {
	content: "\27A4";
	background: #ffaf00;
	margin-right: 0.4em;
	color: #fff;
	padding: 0.5em 0.4em;
	font-size: 0.8rem;
	border-right: 1px solid #fff;
	text-shadow: 0 0 1px #737373;
}
	.category menu {
		padding: 0 0 0 1.5em;
		margin: 0;
		display: none;
	}
		.category menu a {
			padding-left: 1rem;
			font-style: italic;
			background: #bae3ea;
		}
		a.drop-down {
			font-weight: bold;
		}
		a.drop-down::before {
			background: #299fe1;
		}

.section__body {
	background: #d3d3d3;
	border: 1px solid #e0e0e0;
	outline: 1px solid #d1d0d0;
	padding: 0.5em;
	overflow-y: auto;
}
.section__body.post-links {
	max-height: 300px;
}
	.post-links a {
		display: block;
		color: #000101;
		font: 0.9em Tahoma;
		margin-bottom: 0.45em;
	}
	.post-links a:hover {
		color: #049ce3;
	}
	.post-links a::before {
		content: '\00BB';
		margin-right: 0.2em;
	}

.section__body.drivers a > img {
	width: inherit;
}

.section__body a > img {
	width: 100%;
}
/*----------------- Личный кабинет -----------------*/
.kabinet {
	overflow: hidden;
	text-align: center;
}
img.avatar {
	width: 30%;
	float: left;
	border:1px solid #737373;
	border-radius: 50%;
}
.about-user {
	overflow: auto;
	margin-left: 34%;
}
.about-user h4 {
	font: 2em Mistral;
	border-bottom: 1px solid #737373;
	padding-bottom: 0.1em;
}
.about-user small {
	font: 0.9em Calibri;
	margin-bottom: 1em;
	display: inline-block;
}
.about-user a {
	display: block;
	font: 0.9em Tahoma;
	color: #605f5f;
}
.about-user a:hover {
	color: #000;
}

/*------------------- Топ 100 ------------------------*/
.section__body.top100 {
	max-height: 300px; 
	overflow-x: hidden; 
	overflow-y: auto;
	background: #eaeaea;
}
.section__body.top100 a {
	font: 0.8em Georgia;
	display: block; 
	border-bottom: 1px dotted #999191;
	overflow: hidden;  
	padding: 0.2em 0; 
	text-decoration: none;
	color: #444;
	border-bottom: 1px dotted #999191
}
.section__body.top100 a:hover {
	background: #68bfbf;
	color: #fff;
}
.section__body.top100 * {
	display: table-cell;
}
.section__body.top100 img {
	float: left;
	width: 2em;
	margin-right: 0.6em;
}

/*------------------ Работа в сети ---------------------*/
.section__body.work {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,b3bead+100;Wax+3D+%233 */
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */


}

.section__body.work a {
	display: block;
	font: 0.9em Tahoma;
	text-decoration: none;
	margin-bottom: 0.2em;
	color: #400707;
}
.section__body.work a:hover {
	color: #c81010;
	text-decoration: underline;
}
.section__body.work a::before {
	content: "\262D  ";
	color: red;
}

/*---------------------- Друзья сайта ------------------------------*/
.section__body.friends {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow: inherit;
}
.section__body.friends a {
	width: 88px;
	height: 31px;
	margin-bottom: 0.3em;
	opacity: 0.9;
}
.section__body.friends a:hover {
		opacity: 1;
		transition: transform 0.2s ease-out;
		transform: scale(1.3);
	}

/*=============================== Новости IT ==================================*/
.pager.two a {
	display: inline-block;
	width: 150px;
    margin: 30px 0.5em 0 0;
    background: #21b0ff;
    border: 5px solid #fff;
    border-radius: 15px;
    text-align: center;
    font: 0.9em Tahoma;
    padding: 6px 0;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0 5px #686f70;
    text-transform: uppercase;
    text-shadow: #777777 0px 0px 1px;
    cursor: pointer;
}
.pager.two a:hover {
	background: #f96b04; 
}
.pager.two a:active {
	transform: scale(0.95) translate(-1px);
}

.section__body.it {
 background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
  background-blend-mode: multiply;
}

.section__body.it a {
	display: block;
	font: 0.9em Georgia;
	text-decoration: none;
	margin-bottom: 0.2em;
	color: #400707;
}
.section__body.it a:hover {
	color: #c81010;
	text-decoration: underline;
}
.section__body.it a::before {
	content: "\2691  ";
	color: red;
}

.section__body.it + select {
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none!important;
    background: url('../images/down.png') no-repeat 96% 50%;
    background-size: 1.5em;
    background-color: #2a9dde;
    width: 100%;
    border: 3px solid #52a8f2;
    padding: 0.5em;
    color: #fff;
    outline: none;
    cursor: pointer;   
}

/*------------------- Меню Драйверы ----------------------*/
.section__body.drivers a {
	text-decoration: none;
	display: table;
	margin-bottom: 0.2em;
	color: #535151;
}
.section__body.drivers a:hover {
	color: #db1208;
}
.section__body.drivers a img {
	display: table-cell;
	margin-right: 1em;
}
.section__body.drivers a b {
	display: table-cell;
	vertical-align: middle;
}

/*-------- Помощь сайту (оплата) -----------------*/
p.donate {
    font: 0.7em Tahoma;
    color: #666666;
    padding-bottom: 0.5em;
}
p.donate:last-child {
    padding-bottom: 1em;
}
div.keeper, div.yandex, div.visa {
    background: url(../images/keeper.png) no-repeat 0 center;
    padding-left: 44px;
    margin: 5px 0;
}

div.keeper p, div.yandex p, div.visa p {
    font: bold 1em 'Times New Roman';
    color: #5d0707;
}
div.yandex {
    background: url(../images/yan.png) no-repeat 0 center;
    height: 23px;
    padding-top: 7px;
}
div.sms {
    background: url(../images/sms.png) no-repeat 0 center;
    height: 23px;
    padding-top: 7px;
    padding-left: 44px;
    margin: 5px 0;
}
div.sms p {
    font: bold 14px 'Times New Roman';
    color: #5d0707;
    cursor: pointer;
}
div.sms p:hover {
    color: #fa0404;
}
div.visa {
    background: url(../images/visa.png) no-repeat 0 center;
    height: 23px;
    padding-top: 7px;
}

/*=================== Блок онлайн =======================*/
.online {
	font: 13px Verdana;
	color: #554c4c;
}
.online > p > b {
	font-family: 'Georgia';
}
.online > p:last-child {
	font-style: italic;
	margin: 1em 0 0 0;
}

/*------------------------------------------------*/

/*-------------------- Центральный контент ----------------------------*/
main {
	padding: 0 0 0.8em 0;
	padding-top: 0;
	flex: 60%;
	background: #fff;
}

.search {
	box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.26);
	margin-bottom: 0.4em;
	padding: 0.1em 0.5em 0.5em 0.5em;
background: #45b7f8;
background: -moz-linear-gradient(top,  #45b7f8 0%, #45b7f8 0%, #37aaeb 47%, #2598d9 100%, #2698d9 100%);
background: -webkit-linear-gradient(top,  #45b7f8 0%,#45b7f8 0%,#37aaeb 47%,#2598d9 100%,#2698d9 100%);
background: linear-gradient(to bottom,  #45b7f8 0%,#45b7f8 0%,#37aaeb 47%,#2598d9 100%,#2698d9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45b7f8', endColorstr='#2698d9',GradientType=0 );

}
	.search form {
		border: 1px solid #71c9fb;
		padding: 0.7em;
	}
		.search form input {
			font: 0.8em Tahoma;
		}
		.search form input[type=search] {
			font: 0.9em Verdana;
			color: var(--color-text-post);
			width: 80%;
			padding: 0.6em;
			border: 1px solid #f2f2f2;
		}
		.search form input[type=search]:focus {
			border: 1px solid #2ea1e2;
		    box-shadow: 0 0 3px #6f7375;
		}
		.search form input[type=submit] {
			font-weight: bold;
			width: 20%;
			padding: 0.6em;
			border: 1px solid #ffaf00;
			cursor: pointer;
background: #ffd700;
background: -moz-linear-gradient(top,  #ffd700 0%, #ffd000 50%, #ffd000 50%, #ffd000 51%, #ffb900 52%, #ffaf00 99%);
background: -webkit-linear-gradient(top,  #ffd700 0%,#ffd000 50%,#ffd000 50%,#ffd000 51%,#ffb900 52%,#ffaf00 99%);
background: linear-gradient(to bottom,  #ffd700 0%,#ffd000 50%,#ffd000 50%,#ffd000 51%,#ffb900 52%,#ffaf00 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd700', endColorstr='#ffaf00',GradientType=0 );

		}
		.search form input[type=submit]:hover {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffb76b+0,ffa73d+50,ff7c00+51,ff7f04+100;Orange+Gloss */
background: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */

		}
		.search form input[type=submit]:active {
transform: scale(0.95) translate(-1px);


		}

.main {
	padding: 0.6em 0.4em;
}

.block_karusel {
	position: relative;
}

/*================== Не получившаяся карусель ============================*/
/*.karusel {
	width: 50vw;
	height: 11em;
	padding: 1em 0;
	border: 1px solid #d1d0d0;
	border-radius: 0.4em;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
	#roll {
		position: absolute;
		left: 0;
		top: 1em;
		padding: 0.6em 0.8em;
		display: flex;
		z-index: 2;
	}*/
	.reklama a {
		text-decoration: none;
		display: inline-table;
		position: relative;
		color: #444;
		z-index: 1;
	}
	.reklama a + a {
		margin-right: 1em;
	}
	.reklama a b {
		font: 0.9em Colibri;
		position: absolute;
		top: -30px;
		opacity: 0.8;
		left: -10%;
		z-index: 2;
		background: #eeec81;
		padding: 0.2em;
		text-align: center;
	}
	.reklama a strong {
		display: block;
		text-align: center;
	}
	.reklama a > img {
		/*min-width: 6em;
		margin-right: 1em;
		height: 6em;*/
		height: 5em;
		opacity: 0.9;
		
	}
	.reklama a > img:hover {
		opacity: 1;
		transition: transform 0.2s ease-out;
		/*transform: scale(1.4);*/
		transform: scale(1.2);
	}
		.reklama .tools {
			float: none;
			width: 100%;
		}

.sort {
	padding: 1em 1em 2em;
	font: 12px Tahoma;
	text-align: center;
}
	.sort a {
		color: #45b8f9;
		display: inline-block;
		padding: 0.1em 1em;
		margin-right: -0.4em;

	}
	.sort a + a {
		border-left: 1px solid #000;
	}
	.sort a:hover {
		color: #ff7e00;
	}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1.3em 0.8em;
}


/*------------------------ Уменьшаем количество колонок в зависимости от разрешения ---------------------*/
@media (max-width: 97em) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 74em) {
	.grid {
		grid-template-columns: 1fr;
	}
}

/*------------------ Вид с изображением слева и новость сайта ----------------------------------*/
.news {
	width: 90%;
	margin: 0 auto;
}

.news img {
    width: 6em;
    margin: 0 0.5em 0.4em;
}
.news a.float-right {
	color: #fff;
} 
.news a.float-right:hover {
	color: #fbf094;
}
.news .footer__bottom {
	background: #696a69;
	border-radius: 0;
}
.news .h2-head {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff670f+0,ff670f+100;Orange+Flat+%231 */
background: #ff670f; /* Old browsers */
background: -moz-linear-gradient(top,  #ff670f 0%, #ff670f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff670f 0%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff670f 0%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff670f', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
border-bottom: 3px solid #f2610d;
text-align: center;
}
/*------------------------------------------------------------------------*/
	.grid article, .news {
		background: #fff;
		border: 1px solid #d1d0d0;
		border-radius: 0.5em 0.5em 0 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}
		.grid article a.h2-head, .news a.h2-head {
			border-radius: 0.5em 0.5em 0 0;
			display: block;
			text-decoration: none;
			color: #fff;   
			font-size: 1em;
		}
		.grid p, .news p {
			padding: 0.6em;
			text-align: justify;
			font: 0.875em Verdana;
			color: var(--color-text-post);
		}
		.grid article > p img, .news > p img {
			width: 35%;
		}

	.grid footer, .news footer {
background: #e7e7e7;
background: -moz-linear-gradient(top,  #e7e7e7 0%, #dedede 100%, #dedede 100%);
background: -webkit-linear-gradient(top,  #e7e7e7 0%,#dedede 100%,#dedede 100%);
background: linear-gradient(to bottom,  #e7e7e7 0%,#dedede 100%,#dedede 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#dedede',GradientType=0 );
	}
		.footer__top {
			padding: 0.6em;
			overflow: hidden;
		}
		.footer__top a {
			color: #1a82c5;     
		}
		.footer__top a:hover {
			color: #e40e1d;
		}
		.footer__bottom {
			font: 0.93em Georgia;
			text-shadow: 1px 0 1px #737373;
			background: #ffaf00;
			padding: 0.5em;
			color: #fff;
			border-radius: 0.6em 0.6em 0 0;
			border-top: 1px solid #fff;
		}
			.footer__bottom span {
				margin: 0 0.8em 0 0.2em;
			}

.android-img-block {
	margin: 0 auto;
	width: 30%;
	padding-bottom: 37px;
	background: url('../images/android_post_bg.png') no-repeat center bottom;
	background-size: 90%;
}
	.android-img-block img {
		width: 100% !important;
	}

/*----------------- Pager --------------------------------*/  
.pager {
	text-align: center;
	margin: 3em 0;
	font: 0.9em Tahoma;
	
}
	.pager a, .pager span {
		padding: .4em .6em;
		text-decoration: none;
		border: 1px solid #dedede;
		background: #ededed;
		color: #3c3c3c;
		margin-right: 0.3em;
	}
	.pager a:hover {
		background: #45b8f9;
		color: #fefefe;
	}
	.pager span {
		background: #fafafa;
		color: #be0808;
	}

/*------------------------------ Правый сайдбар ---------------------------------------*/
.form-enter {
	display: flex;
	flex-wrap: wrap;
	font: bold 0.8em Tahoma;
	align-items: center;
	padding: 0.8em 0.2em 0.6em;
}
	.form-enter input:not([type=submit]) {
		padding: 0.5em;
		margin-bottom: 1em;
		border: 1px solid #f2f2f2;
		outline: 1px solid #fff;
	}
	.form-enter input:not([type=submit]):focus {
		outline: none;
		box-shadow: inset 0 0 0.2em #b6b7bb;
	}
.form-enter b {
	flex: 25%;
	width: 25%;
	margin-bottom: 1em;
}
.form-enter input {
	width: 60%;
	flex: 60%;
}
.form__links {
	flex: 70%;
}
.form-enter input[type=submit] {
	flex: 30%;
	padding: 0.3em;
	border: 0;
	font-size: 1rem;
	color: white;
	box-shadow: 0 0 0.2em #737373;
	margin-top: 0.3em;
	cursor: pointer;
	box-shadow: 0 0 0.1em #124;
background: rgba(81,202,246,1);
background: -moz-linear-gradient(top, rgba(81,202,246,1) 0%, rgba(73,197,242,1) 50%, rgba(51,165,231,1) 51%, rgba(44,158,224,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(81,202,246,1)), color-stop(50%, rgba(73,197,242,1)), color-stop(51%, rgba(51,165,231,1)), color-stop(100%, rgba(44,158,224,1)));
background: -webkit-linear-gradient(top, rgba(81,202,246,1) 0%, rgba(73,197,242,1) 50%, rgba(51,165,231,1) 51%, rgba(44,158,224,1) 100%);
background: -o-linear-gradient(top, rgba(81,202,246,1) 0%, rgba(73,197,242,1) 50%, rgba(51,165,231,1) 51%, rgba(44,158,224,1) 100%);
background: -ms-linear-gradient(top, rgba(81,202,246,1) 0%, rgba(73,197,242,1) 50%, rgba(51,165,231,1) 51%, rgba(44,158,224,1) 100%);
background: linear-gradient(to bottom, rgba(81,202,246,1) 0%, rgba(73,197,242,1) 50%, rgba(51,165,231,1) 51%, rgba(44,158,224,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51caf6', endColorstr='#2c9ee0', GradientType=0 );
}
.form-enter input[type=submit]:hover {
background: rgba(47,168,212,1);
background: -moz-linear-gradient(top, rgba(47,168,212,1) 0%, rgba(61,172,209,1) 49%, rgba(30,137,199,1) 51%, rgba(31,128,184,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(47,168,212,1)), color-stop(49%, rgba(61,172,209,1)), color-stop(51%, rgba(30,137,199,1)), color-stop(100%, rgba(31,128,184,1)));
background: -webkit-linear-gradient(top, rgba(47,168,212,1) 0%, rgba(61,172,209,1) 49%, rgba(30,137,199,1) 51%, rgba(31,128,184,1) 100%);
background: -o-linear-gradient(top, rgba(47,168,212,1) 0%, rgba(61,172,209,1) 49%, rgba(30,137,199,1) 51%, rgba(31,128,184,1) 100%);
background: -ms-linear-gradient(top, rgba(47,168,212,1) 0%, rgba(61,172,209,1) 49%, rgba(30,137,199,1) 51%, rgba(31,128,184,1) 100%);
background: linear-gradient(to bottom, rgba(47,168,212,1) 0%, rgba(61,172,209,1) 49%, rgba(30,137,199,1) 51%, rgba(31,128,184,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fa8d4', endColorstr='#1f80b8', GradientType=0 );
}
.form-enter input[type=submit]:active {
	transform: scale(0.95);
}
.form__links a {
	font-weight: normal;
	color: #2092d3;
	line-height: 1.4;
}
.form__links a:hover {
	color: #f90c58;
}

/*----------------------- Форма голосования --------------------------------*/
form.vote {
	padding: 0.5em 0.2em 0.6em;
	font: 0.9em Tahoma;
}
.vote label {
	display: block;
	margin-bottom: 0.4em;

}
.vote label input {
	position: relative;
	top: 0.12em;
    left: -0.1em;
}
.vote h5 {
	font-weight: bold;
	margin-bottom: 0.9em;
}
.vote button {
	display: block;
	padding: 0.4em 1.4em;
	color: #fff;
	border: none;
	margin: 0.8em auto;
	cursor: pointer;
	font-weight: bold;
	box-shadow: 0px 0px 2px #7e7979;
background: #ffc500;
background: -moz-linear-gradient(top,  #ffc500 0%, #ffb900 48%, #ffb100 100%);
background: -webkit-linear-gradient(top,  #ffc500 0%,#ffb900 48%,#ffb100 100%);
background: linear-gradient(to bottom,  #ffc500 0%,#ffb900 48%,#ffb100 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc500', endColorstr='#ffb100',GradientType=0 );
}
.vote button[type=submit] {
	margin-top: 1.4em;
}
.vote button:hover {
	box-shadow: inset 0 0 0.2em #b3a313, inset 0 0.1em 0.5em rgba(238, 186, 18, 0.4);

}

.on-footer {
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding: 1.2em 0;
}
	.on-footer a {
		font: bold 0.8em Tahoma;
		text-transform: uppercase;
		color: #fff;
	}
	.on-footer a:hover {
		color: #fc7203;
	}

/*---------------------------------- Футер -------------------------------------------*/
.under-flex + footer {
	display: flex;
	width: 96%;
	margin: 0 auto;
	padding: 1.1em 0;
}

	.footer__links {
		width: 70%;
		font: 0.8em Tahoma;
	}
	.footer__links a {
		display: block;
		color: #fff;
		margin-bottom: 1em;
	}

	.footer__counter {
		width: 30%;
		padding: 1em 0;
		text-align: center;
	}
		.footer__counter a {
			display: inline-block;
			border: 1px solid #88ceff;
		}

/*======================= Страница поста ============================*/
.post {
	margin: 1em 0;
	background: #fff;
	border: var(--border-post);
	border-radius: 0.5em 0.5em 0 0;
	font: 0.875em Verdana;
	color: var(--color-text-post);
}
.post article {
	padding: 0.6em;
}
.post p {
	margin-bottom: 0.7em;
	text-indent: 1.2em;
}
.post .footer__bottom {
	background: #8a8985;
	border-radius: 0;
}


.post h1 {
	margin: 1.4rem 0 0.5rem;
	font: bold 2rem Tahoma;
}
.post h2 {
	margin: 1.4rem 0 0.5rem;
	font: bold 1.7rem Tahoma;
}
.post h3, .comments-form h3 {
	margin: 1.4rem 0 0.5rem;
	font: bold 1.4rem Tahoma;
}
.post h4 {
	margin: 1.4rem 0 0.5rem;
	font: bold 1.2rem Tahoma;
}
.post h5 {
	margin: 1.4rem 0 0.5rem;
	font: bold 1rem Tahoma;
}
.post h6 {
	margin: 1.4rem 0 0.5rem;
	font: bold 0.9rem Tahoma;
}

/*------------ Ссылки для загрузки -------------------*/
div.load {
	padding: 1em;
	border: 1px dotted #737373;
	text-align: center;
}
	div.load h4 {
		font: bold 1.5em 'Century Gothic';
		margin: 0 0 1.5em;
	}
	div.load a {
		display: inline-block;
		margin-right: 0.5em;
		font: 1em Georgia;
		text-decoration: none;
		text-transform: uppercase;
		padding: 0.5em 0.8em;
		border: 0;
		font-size: 1rem;
		color: white;
		border-radius: 0.5em;
		background: #57b;
		box-shadow: 0 0.4em #148;
		text-shadow: 1px 1px #148;
	}
	div.load a:hover {
		background: #cc353c;
		box-shadow: 0 0.4em #88111c;
	}
	div.load a:active {
		background: #b72229;
		transform: translateY(0.1em);
		box-shadow: 0 0.4em #88111c;
	}

/*------------------- Полезные материалы по теме -------------------------*/
.dop {
	padding: 1em 50px;
	border: var(--border-post);
	font: 0.875em Verdana;
	color: var(--color-text-post);
	position: relative;
}
	.dop h4 {
		text-align: center;
	    font: bold 1.5em 'Myriad Pro';
	    text-transform: uppercase;
	    color: #078f61;
	    margin-bottom: 1em;
	}

#galery {
    overflow: hidden;
    position: relative;
    height: 210px;
    border: 1px solid #d7d6d6;
}

#galery_img {
    display: flex;
    align-items: start;
    padding: 0.7em 0;
    position: absolute;
    left: 0;
    top: 0;
}
 #carousel a {
 	text-align: center;
    display: inline-flex;
    flex-direction: column;
	justify-content: space-between;
	align-items: center;
    width: 160px;
    text-decoration: none;
    font: bold 14px 'Myriad Pro';
    margin-right: 1em;
}
 #carousel a img {
 	width: 63%;
 	margin-bottom: 0.5em;
 }
 #carousel a figcaption.afisha {
 	background: #f2f08b;
	padding: 0.2em;
	text-align: center;
	color: #444;
	font: 1em Colibri;
 }
 #galery_img a img + strong {
 	color: #5e5d5d;
 	margin-bottom: 0.3em;
 }


.next, .prev {
    position: absolute;
    top: 55%;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #28a0e3;
    font-size: 24px;
    line-height: 24px;
    color: #2eadf4;
    display: block;
    cursor: pointer;
}
.next {
    right: 7px;
    padding: 3px 0 3px 5px;
}
.prev {
    left: 7px;
    padding: 3px 5px 3px 0;
}

.next:hover, .prev:hover {
    background: #07aeff;
    color: #fff;  
}
.next:active, .prev:active {
	transform: translateY(0.1em);
}



/*----------------------- Блок комментариев -----------------------------*/
.comments-form {
	border: var(--border-post);
	border-radius: 0.4em;
	padding: 0.4em;
	margin: 1rem auto;
	width: 90%;
}

.comments-form article {
    margin-bottom: 1rem;
}

.comments-form article > img {
    width: 55px;
    height: 55px;
    float: left;
    border: 1px solid #dad3d3;
    border-radius: 50%;
}

.komm {
    margin-left: 70px;
    border: 1px solid #dad3d3;
    background: #e6edf9;
    padding: 0.5em;
}
.comments-form article:nth-child(even) .komm {
	background: #f9f5e6;
}

.komm header {
	padding: 0 0.3em 0.2em;
    border-bottom: 1px solid #dad3d3;
    margin-bottom: 0.4em;
}

.komm header span {
    font: bold 0.9em Tahoma;
}

.comments-form time {
    float: right;
    font: 0.8em Tahoma;
	color: #535050;
}

.komm p {
    font: 0.9em Verdana;
    color: #575555;
    margin-bottom: 0.3em;
    text-indent: 1em;
}

.dop + h4, .post + h4 {
    font: 1.4em Roboto;
    color: #484848;
    margin: 1.2em 0 0.5em;
    text-align: center;
}
.dop + h4 span, .post + h4 span {
	font: 1rem Tahoma;
	margin-left: 1em;
	font
}

/*------------ Форма добавления комментариев -------------*/
#form_add_comm {
	display: none;
}

.form_comm {
	width: 60%;
	margin: 0 auto;
}

.form_comm .button.button-grey {
	margin-bottom: 3em;
}

.no-comments {
	color: var(--color-text-post);
	font: var(--font-text-main);
	padding: 1em 0;
	text-align: center;
}

/*-------------------------- Комментарии (в контакте) -------------------------------------*/

#vk_komm {
    min-width: 300px;
    border-top: 2px solid #2a598e;
    margin: 60px auto;
    padding-top: 20px;
}
    #vk_komm h3 {
        font: bold 20px Arial;
        color: #2a598e;
        text-align: center;
        margin-bottom: 20px;
        text-shadow: #737373 0px 0px 1px;
    }
    
    #vk_komm h6 {
        text-align: center;
        font: italic 11px Verdana;
        margin-bottom: 20px;
    }
    
#vk_comments, #vk_comments iframe {
    width: 90% !important;
}



/*------------------------ Гостевая --------------------------------*/
p.welcome {
    padding: 1em;
    border: 2px solid #34a7e8;
    width: 50%;
    margin: 0 auto;
	font: var(--font-text-main);
	color: var(--color-text-post);
	text-indent: 1em;
	margin-top: 1em;
}




/*========================== Страница вывода отдельных статей ======================*/
.grid.row {
	grid-template-columns: 1fr 1fr;
}
.grid.row article > div {
	overflow: hidden;
}
.grid.row article > div p {
	overflow: auto;
}
	.grid.row img {
		width: 8em;
		margin: 0 0.5em 0.4em;
	}

/*============================== Новости IT =====================================*/
section.it {
	border: 1px solid #e8e3e3;
	border-radius: 0.9em 0.9em 0 0;
	color: var(--color-text-post);
	font: var(--font-text-main);
	margin-bottom: 1em;
}
	section.it header {
		background: #40b2f3;
	    padding: 0.9em 0;
	    border-radius: 0.9em 0.9em 0 0;
	    text-align: center;
	    font: bold 0.95em Arial;
	    color: #fff;
	    text-shadow: #000000 0 0 0.2em;
	    margin-bottom: 1em;
	}
	section.it p {
		margin-bottom: 1em;
	}

section.it p.author_it {
	overflow: hidden;
	margin-bottom: 0;
	padding: 0.9em;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+1,f2f5f6+10,c8d7dc+27,c8d7dc+71,f2f5f6+93,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 1%, #f2f5f6 10%, #c8d7dc 27%, #c8d7dc 71%, #f2f5f6 93%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 1%,#f2f5f6 10%,#c8d7dc 27%,#c8d7dc 71%,#f2f5f6 93%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 1%,#f2f5f6 10%,#c8d7dc 27%,#c8d7dc 71%,#f2f5f6 93%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}
section.it p.author_it strong, section.it p.author_it b {
	text-shadow: 0px 0 2em #40b2f3;
}

section.it p.img img {
	border: none;
}

/*======================== Регистрация пользователей ==================================*/
form.reg {
	width: 98%;
	margin: 0 auto;
	padding: 1em;
	background: #f5f5f5;
	border: 1px solid #dfd9d9;     
}

	form.reg h3 {
		text-align: center; 
		margin: 0.4em 0 1.5em;
		font: bold 1.4em Tahoma;
		color: #09516d;
		border-bottom: 1px solid #dfd9d9;
		padding-bottom: 0.8em;
	}
	form.reg p {
		margin-bottom: 1em;
		font: 1em Tahoma;
		color: #404042;
	}
	form.reg p.textarea-block {
		display: flex;
		align-items: center;
	}
	form.reg span {
		display: inline-block;
		text-align: right;
		width: 20%;
		margin-right: 10%;
	}
	form.reg input, form.reg textarea {
		width: 65%;
		padding: 0.8em;
		border: 1px solid #cacaca;
		font: 0.9em Tahoma;
	}
	form.reg input[type=radio] {
		width: 3%;
	}
	form.reg label {
		margin-right: 1em;
		cursor: pointer;
	}
	form.reg input:focus, form.reg textarea:focus {
		border: 3px solid #cacaca;
		box-shadow:0 0 5px #3daff0;
	}
	form.reg small {
		color: #cc0000;
		margin-left: 1em;
	}
	form.reg input[type=submit], form.reg input[type=reset] {
		width: 30%;
		cursor: pointer;
		text-shadow: 0 0 0.1em #000;
		color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(152, 146, 146, 0.8);
	}
	form.reg input[type=submit] {
		margin-right: 1em;
		border: 1px solid #1682bf;
background: #42b5f6;
background: -moz-linear-gradient(top,  #42b5f6 0%, #299cdd 100%);
background: -webkit-linear-gradient(top,  #42b5f6 0%,#299cdd 100%);
background: linear-gradient(to bottom,  #42b5f6 0%,#299cdd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b5f6', endColorstr='#299cdd',GradientType=0 );
-webkit-box-shadow: 0px 3px 5px 0px rgba(152, 146, 146, 0.8);
-moz-box-shadow:    0px 3px 5px 0px rgba(152, 146, 146, 0.8);
	}
	form.reg input[type=submit]:hover {
		border: 1px solid #bc0707;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */

	 }
	 form.reg input[type=submit]:active,form.reg input[type=reset]:active {
		transform: translateY(0.1em);
	}
	form.reg input[type=reset] {
		border: 1px solid #a29797;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d6d6d6+0,a5a5a5+100 */
background: #d6d6d6; /* Old browsers */
background: -moz-linear-gradient(top,  #d6d6d6 0%, #a5a5a5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d6d6d6 0%,#a5a5a5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d6d6d6 0%,#a5a5a5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#a5a5a5',GradientType=0 ); /* IE6-9 */

	}
	form.reg input[type=reset]:hover {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5b5b5+0,666666+100 */
background: #b5b5b5; /* Old browsers */
background: -moz-linear-gradient(top,  #b5b5b5 0%, #666666 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b5b5b5 0%,#666666 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b5b5b5 0%,#666666 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#666666',GradientType=0 ); /* IE6-9 */

	}

/*=========================== Забыли пароль ======================================*/
.fon {
	background: #000;
	height: 100%;
	width: 100%;
	opacity: 0.8;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
}

.form-reg-user {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	text-align: center;
}

.form-reg-user form {
	position: relative;
	display: inline-block;
	background: #31a4e5;
	margin-top: 15%;
	padding: 0.7em;
	border: 1px solid #b9dce6;
	color: #201e1e;
	font: 0.9em Verdana;
}
	.form-reg-user form p {
		margin-bottom: 1.2em;
	}
	.form-reg-user h5 {
		margin-bottom: 1.3em;
		font: 1.1em Tahoma;
		text-transform: uppercase;
	}
	.form-reg-user form input[type=text], .form-reg-user form input[type=email] {
		width: 90%;
		margin-bottom: 0.95em;
		padding: 0.6em 0.7em;
		font: 0.95em Verdana;
		background: #d8dbdd;
		border: 1px solid #cacaca;
		border-radius: 0.35em;
		color: #404042;
		box-sizing: inherit;
		display: inline;
		font-size: 0.95em !important;
		text-align: left;
	}
	.form-reg-user form input[type=text]:focus, .form-reg-user form input[type=email]:focus {
		box-shadow: inset 0 0 3px #000;

	}
	.form-reg-user form input[type=submit] {
		padding: 0.4em 0.5em;
		border: 1px solid #918b8b;
		border-radius: 0.35em;
		cursor: pointer;
		color: #000;
		text-transform: uppercase;
		font-weight: bold;
	}
	.form-reg-user form input[type=submit]:hover {
		background: #d1dadb;
	}


.close, .close2 {
	position: absolute;
	right: -2em;
	top: -2em;
	width: 2em;
	height: 2em;
	opacity: 0.5;
	cursor: pointer;
}
.close:hover, .close2:hover {
	opacity: 1;
}
.close:before, .close2:before, .close:after, .close2:after {
	position: absolute;
	left: 0.95em;
	content: ' ';
	height: 2.1em;
	width: 2px;
	background-color: #cc0000;
}
.close:before, .close2:before {
	transform: rotate(45deg);
}
.close:after, .close2:after {
	transform: rotate(-45deg);
}

/*=================== Редактирование профиля пользователя ====================*/
.pa {
	padding: 1em 0;
	display: flex;
}
	.pa-left {
		text-align: center;
		width: 30%;
		border-right: 1px solid #d7d1d1;
	}
		.pa-left .avatar {
			display: block;
			margin: 0 auto;
			float: none;
		}
	.pa-left h4 {
		font: 2em Mistral;
	    margin: 0.3em 0 0.4em 0;
	    color: #000;
	}
	.pa-left h6 {
		font: 1.2em 'Monotype Corsiva';
	    margin: 0.3em 0 0.4em 0;
	    color: #087e99;
	}
	.pa-left h5 {
		font: 1em Arial;
	    color: #000;
	}
	form.reg .pa-left p {
		font: 0.9em Arial;
		margin-bottom: 0.4em;
	}
	.pa-left menu {
		padding: 0.5em 0;
		margin: 1.5em auto;
		background: #eee;
		text-align: left;
	}
		.pa-left menu a {
			display: block;
			text-decoration: none;
			padding: 0.5em 1em;
			color: #737373;
			font: 1em Tahoma;
			border-bottom: 1px solid #fff;
		}
		.pa-left menu a:hover {
			background: #d9d3d3;
			color: #000;
		}

.pa-right {
	width: 70%;
}
.pa-right ul {
	width: 100%;
	font: 0.9em Verdana;
}
.pa-right ul li {
	display: flex;
	padding: 0.6em 0;
	border-bottom: 1px dotted #737373;
	color: #444343;
}
	.pa-right ul li b {
		width: 40%;
	}
	.pa-right ul li span {
		width: 60%;
		text-align: center;
	}
	.pa-right ul li strong {
		cursor: pointer;
		margin-left: 1em;
	}

form.reg .pa-right p {
	font: 0.9em Verdana;
	padding: 1em;
	color: #86868a;
}


/*========================== Страница 404 =================================*/
div.fzf {
	text-align: center;
	color: #3d76a0;
	padding: 5em 0;
}
	div.fzf h1 {
		font: 14em Arial;
	}
	div.fzf h3 {
		font: 2em Arial;
		margin-bottom: 0.1em;
	}
	div.fzf p {
		color: #808080;
		font: 1em Arial;
	}

/*=================== Скорость интернета ============================*/
.speed iframe {
	width: 99%;
	height: 600px;
}

/*================== Всплывающее окно голосования ================*/
.conteiner {
	top: 0;
	right: 0;
	z-index: 12;
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
}
.grafic	{
	display: none;
	width: 40%;
	padding: 5px;
	background: #116ca4;
	border: 3px solid #063a59;
	z-index: 13;
	color: #d4cece;
	font: 0.9em Verdana;
	cursor: pointer;
}
	.grafic h5 {
		text-align: center;
		font: bold 16px Tahoma;
		margin-bottom: 5px;
		color: #f0feff;
	}

	.grafic table {
	    width: 98%;
	    margin: 0 auto;
	}
	.grafic table td:not(:nth-child(1)) {
		text-align: center;
	}

	 .grafic table, .grafic td { 
	    border: 1px solid #44494b;
	    border-collapse: collapse;
	    padding: 10px;
	}
	.grafic table tr:last-child td {
		text-align: center;
		font-weight: bold;
	}


/*======================= Страница добавления поста ======================================*/
.add-post {
	width: 98%;
	margin: 0 auto;
	color: #444;
	background: #e9eaea;
	padding: 1%;
}
.add-post strong {
	display: block;
	font: bold 0.9em Tahoma;
	color: #6a6666;
	margin-bottom: 0.2em;
}

.add-post h2 {
	margin: 0.5em 0 1.5em;
	font: bold 1.5rem Tahoma;
	color: #054c68;
}

.add-post input, .add-post textarea, .add-post select {
		width: 100%;
		padding: 0.6em;
		border: 1px solid #cacaca;
		font: 1em Tahoma;
	}
	.add-post select {
		cursor: pointer;
	}

	.add-post input:not([type=submit]):focus, textarea:focus {
		outline: none;
		box-shadow: inset 0 0 0.2em #b6b7bb;
	}
	.add-post p {
		margin: 1em 0;
	}

	.add-post input.load {
		width: 80%;
	}
	.add-post input.load + input[type=button] {
		width: 15%;
		margin-left: 4%;
		
	}
/*---------------------- Кнопка удаления ----------------------------*/
.del {
	display: inline-block;
	position: relative;
	width: 2em;
	height: 2em;
	opacity: 0.5;
	cursor: pointer;
	position: relative;
	top: 9px;
}
.del:hover, .del:hover {
	opacity: 1;
}
.del:before, .del:after {
	position: absolute;
	left: 0.95em;
	content: ' ';
	height: 2.1em;
	width: 2px;
	background-color: #cc0000;
}
.del:before {
	transform: rotate(45deg);
}
.del:after {
	transform: rotate(-45deg);
}


/*----------------- Кнопки редактирования -------------------*/
span.ok, span.edit, span.delete {
	display: block;
	position: absolute;
	right: -10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	color: #a20404;
	opacity: 0.2;
	z-index: 1;
}
span.ok:hover, span.edit:hover, span.delete:hover {
	opacity: 1;
}
span.ok {
	top: 10px;
}
span.edit {
	top: 45px;
}
span.delete {
	top: 78px;
}

/*========================= Вспомогательные селекторы ===============================*/
.txt-center {
	text-align: center !important;
}
.text-center {
	text-align: center !important;
}
	.text-center img  {
		width: 30%;
/*		min-width: 180px;*/
	}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.text-justify {
	text-align: justify !important;
}
.block {
	display: block !important;
}
.float-right {
	float: right !important;
}
.float-left {
	float: left !important;
}
.arrow::before {
	content: url('../images/arrow_h2.png');
	position: relative;
	top: 2px;
	margin-right: 0.5em;
	z-index: 0;
}
.width100 {
	width: 100%;
	min-width: 200px;
}
.padding-em {
	padding: 1em;
}
.padding-middle {
	padding: 0.6em;
}
.padding-middle p > img {
	/*width: 40%;*/
	display: block;
	margin: 0 auto;
}

.clearfix::after {
	display: block;
	content: " ";
	clear: both;
}

.button {
	font: 1em Tahoma;
	display: block;
	padding: 0.5em 0.6em;
	cursor: pointer;
	text-shadow: 0 0 0.1em #464545;
	color: #fff;
	margin: 1em auto;
	border: 1px solid #1682bf;
    background: #42b5f6;
    background: linear-gradient(to bottom,  #42b5f6 0%,#299cdd 100%);
	box-shadow: 0px 0px 3px 0px rgba(152, 146, 146, 0.8);
}
.button:hover {
	border: 1px solid #bc0707;
    background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 }
.button:active {
	transform: translateY(0.1em);
}
.button-grey {
	background: linear-gradient(to bottom,  #d6d6d6 0%,#a5a5a5 100%);
	border: 1px solid #a29797;
}
.button-grey:hover {
	background: linear-gradient(to bottom,  #b5b5b5 0%,#666666 100%);
	border: 1px solid #a29797;
}

.inline-block {
	display: inline-block;
}
.inline {
	display: inline !important;
}
.width15 {
	width: 15% !important;
}
.width30 {
	width: 30% !important;
}


.alert {
	padding: 1em;
	background: #d02828;
	color: #fff;
	border: 1px solid #6a0808;
	text-align: center;
	font: 0.9em Verdana;
}

.margin-2em {
	margin: 2em;
}


/*==================== изображения hgslide =========================*/
p.img {
	text-align: center;
	text-indent: 0;
}
p.img img {
	width: 45%;
	min-width: 300px;
	/*border: 1px solid #484845;*/
	cursor: zoom-in;
}

a.highslide {
	cursor: default;
}
.highslide {
	display: block;
	text-align: center;
}
.highslide img {
	width: 40%;
	min-width: 300px;
}
.highslide img:hover {
	cursor: zoom-in;
}

/*=========================== Изображения для Андроид ============================*/
.ikarus {
	overflow-x: auto;
    text-align: center;
    white-space: nowrap;
	margin: 2em auto;
}
	.ikarus img {
		height: 350px;
		cursor: zoom-in;
		max-width: 100%;
		border: 1px solid #eee;
	}

/*------------------- Всплывающие подсказки ------------------------*/
/* атрибут элемента с подсказкой */
[data-tooltip] {
  display:inline-block;
  position:relative;
  /* определяем вид курсора если это не ссылка */
  cursor: pointer; 
  z-index: 3;
 } 
/*  по умолчанию скрываем содержимое подсказки */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* формируем тело подсказки */
[data-tooltip]:before {
    background: #f4f3a8; /* фон для старых браузеров */
    top: 100%;
    margin-top: 6px;
    color: #595858;
    text-shadow:  0 0 1px #b9b3b3;
    content: attr(data-tooltip);/* Часть кода, определяющая содержимое всплывающей подсказки */
    font: 14px Verdana;
    width: 320px; /* устанавливаем необходимую фиксированную ширину, слова будут переноситься */
    right: -100px;
    padding: 7px 10px;
    position: absolute;/* обязательно позиционирум абсолютно */
    /* по желанию - скругляем углы тела подсказки */
    border-radius: 5px;
}
/* формируем указатель подсказки */
[data-tooltip]:after {
    border-bottom: 6px solid #f4f3a8;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    top: 100%;
    content: "";
    height: 0;
    width: 0;
    left: 25px;
    position: absolute;
}
/* Показываем подсказку с указателем при наведении */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  transition: all 0.4s ease-in-out; /* добавляем плавности перехода */
}

/*-----------------------------------------------------------*/

/*====================================== АДАПТАЦИЯ ========================================*/
@media screen and (max-width:1400px) {
	form.reg {
		width: 100%;
	}
	p.welcome {
	    width: 70%;
	}

	.grid.row {
		grid-template-columns: 1fr;
	}
	.form_comm {
	    width: 80%;
	}
}

@media screen and (max-width:1300px) {

	:root {
		font-size: calc(0.2em + 1vw);
	}
	p.welcome {
	    width: 90%;
	}
	#vk_comments, #vk_comments iframe {
	    width: 100% !important;
	}

}

@media screen and (min-width:840px) and (max-width:1030px) {

.wrapper {
	width: 99%;
}
p.welcome {
	width: 100%;
}	


aside.right {
    position: absolute;
    left: -50%;
    display: none;
}

.search {
	border-right: 5px solid #f2f2f2;
    width: 99.3%;
}

.breadcrumbs {
	position: relative;
}

#but {
	display: block;
}

}

@media screen and (min-width:531px) and (max-width:839px) {

:root {
	font-size: calc(0.5em + 1vw);
}

	p.welcome {
	    width: 100%;
	}

.wrapper {
	width: 100%;
	margin-top: 0.7em;
}

.tools h6 {
	cursor: pointer;
	padding: 0.6em 0;
	box-shadow: 0px 5px 10px #484747;
}

.install {
	display: none;
	background: #464545;
	box-shadow: 0px 0px 10px #000;
}	


aside {
    position: absolute;
    left: -50%;
    display: none;
    z-index: 2;
}

.search {
	border-right: 5px solid #f2f2f2;
	border-left: 5px solid #f2f2f2;
    width: 99%;
    margin: 0 auto;
}

.breadcrumbs {
	position: relative;
}

#but, #but2 {
	display: block;
}

.tools {
    float: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
	width: 50%;
	font-size: calc(0.3em + 1vw);
}

.logo-container p {
    width: 40%;
    text-align: right;
    float: right;
    padding-right: 1em;
}


}

@media screen and (min-width:319px) and (max-width:530px) {

:root {
	font-size: calc(0.6em + 1vw);
}
p.welcome {
    width: 100%;
}

iframe {
	width: 300px;
	height: 180px;
}

.wrapper {
	width: 100%;
	margin-top: 0.7em;
}
.wrap-nav {
	border: none;
	padding: 0;
}
.wrap-nav nav {
	padding: 0;
	position: relative;
}
	.wrap-nav nav a + a {
		margin: 0;
	}
	.wrap-nav nav a {
	    display: none;
	    padding: 1rem 0;
	    margin: 0;
	    text-decoration: none;
	    border-bottom: 1px solid #cbcbd5;
	}
	.wrap-nav nav a:hover {
		background: #2598d9;
		color: #fff;
	}

.wrap-nav nav h5, .on-footer h5 {
	display: block;
	padding: 0.8em 0;
	background: #0e557d;
	color: #fff;
	font: 15px Tahoma;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 5px #000;
}

.tools h6 {
	cursor: pointer;
	padding: 0.6em 0;
	box-shadow: 0px 5px 10px #484747;
}

.install {
	display: none;
	background: #464545;
	box-shadow: 0px 0px 10px #000;
}
.install a {
    margin: 0.3em;
    display: inline-block;

}	

aside {
    position: absolute;
    z-index: 3;
    left: -50%;
    display: none;
}

.search {
	border-right: none;

}

.breadcrumbs {
	padding: 3em 0.5em 0;
	position: relative;
}
.breadcrumbs a, .breadcrumbs b {
    margin-bottom: 0.7em;
    display: inline-block;
}

#but, #but2 {
	display: block;
}

.tools {
    float: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
	width: 100%;
	font-size: calc(0.4em + 1vw);
	float: none;
	clip-path: inherit;
	text-align: center;
	padding: 0;
}
.logo-container p {
    display: none;
}

.on-footer {
	display: block;
	padding: 0;
	text-align: center;
}
	.on-footer a {
		display: none;
		padding: 1em 0;
		text-decoration: none;
		border-bottom: 1px solid #b0d3f2;
	}
	.on-footer a:hover {
		background: #02659f;
		color: #fff;
	}

.sort {
    padding: 1em 0;
}
.sort a {
    margin-bottom: 0.8em;
}

.pager {
    font: 1em Tahoma;
}
.pager a, .pager span {
    margin-right: 0.5em;
}

.under-flex + footer {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 1.1em 0.4em;
    text-align: center;
}
.footer__links {
    width: 100%;
}
.footer__counter {
    width: 100%;
}

/*------------- Страница поста -------------------*/
table {
	width: 100%;
}
.comments-form {
	width: 100%;
}
.main {
	padding: 0;
}
.post p {
	text-indent: 0;
}
ul {
    padding: 0.5rem;
}

.comments-form {
	padding: 0;
}
.comments-form article > img {
	float: none;
}
.komm {
	margin-left: 0;
}



}