@charset "windows-1251";
* {
	box-sizing: border-box;
}
@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto.ttf);
}
@font-face {
    font-family: Robotobold;
    src: url(fonts/Robotobold.ttf);
}

html, body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto', arial, sans-serif;
}

body {
	color: #000;
	font-size: 16px;
	display: flex;
	flex-direction: column;
}
h1, .razdel1 {
	font-size:30px;
	font-weight: bold;
	margin-top:30px;
	margin-bottom:20px;
	padding-bottom:8px;
	color: #f34841;
	line-height: 2rem;
}
h2, .razdel2 {
	font-size:24px;
	font-weight:bold;
	margin-top:20px;
	margin-bottom:20px;
	color: #f34841;
}
h3, .razdel3 {
	font-size:21px;
	font-weight:bold;
	margin-top:30px;
	margin-bottom:20px;
	color: #f34841;
}

main {
	display: block;
	padding: 1rem 7rem;
	line-height: 1.7rem;
	background-color: #eeeeee;
	min-height: 600px;
}
info {
	display: block;
	padding: 0 7rem;
	background: url(pic-design/fon.gif) repeat, url(pic-design/slider-fon.jpg) no-repeat top center / contain;
	border-bottom: 4px solid #f34841;
}
heading {
	display: flex;
	align-items: center;
	flex-direction: row;	
}
.heading-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.heading-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: auto;
	justify-content: flex-end;
}
slider img {
	text-align: center;
	margin-bottom: -8px;
	width: 100%;
}
#logo {
	margin-right: 3rem;
}
#logo img {
	margin: 1.5rem 0;
}
#nametext {
	font-family: 'Robotobold';
	font-size: 1.3rem;
	padding-top: 0.5rem;
}
#tel {
	font-family: 'Roboto';
	font-size: 1.5rem;
	margin-right: 3rem;
	margin-left: 1rem;
	text-align: right;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	white-space: nowrap;
}
#tel img {
	margin-left: 1rem;
	vertical-align: bottom;
}
#tel a {
	color: #000;
}
#korz {
	font-family: 'Roboto';
	font-size: 1.5rem;
	width: 8rem;
	text-align: right;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	white-space: nowrap;
}
#korz img {
	margin-left: 1rem;
	vertical-align: bottom;
}
nav {
	color: #fff;
	padding: 0 7rem;
	background-color: #f34841;
}
header {
		background-color: #f34841;
}
footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #fff;
	padding: 1rem 7rem;
	background-color: #4ca0b2;
}
footer a {
	color: #FFFFFF;
}
footer > div {
	flex: 1;
	margin-bottom: 1rem;
}
#footer-right {
	text-align: right;
}

#trigger {
  display: none;
}
#tovary {
	display: flex;
	flex-wrap: wrap;
}
.tovary-pole  {
	display: flex;
	flex-direction: column;
	width: 304px;
	height: 680px;
	background-color: #fff;
	padding: 14px;
	margin: 0 15px 15px 15px;
}
.tovary-pole:hover  {
	box-shadow: 10px 10px 9px 0px rgba(122,122,122,0.3);
}
.pole-img  {
	width: 276px;
	height: 395px;
	overflow: hidden;
	margin-bottom: 14px;
	background-color: #F7F7F7;
}
.pole-img img  {
	text-align: center;
	height: inherit;
}
.pole-name  {
	margin-bottom: 14px;
	line-height: 20px;
	height: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: bold;
	color: #ba0801;
}
.pole-avtor:before  {
	/* content: " автор: ";
	color: #9A9A9A;
	font-size: 0.8rem; */
}
.pole-avtor  {
	height: 20px;
	line-height: 20px;
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #00a5b9;
}	
.pole-text {
	height: 80px;
	line-height: 20px;
	margin-bottom: 14px;
	background-color: #F7F7F7;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pole-kn  {
	background-color: #00a5b9;
	text-decoration: none;
	text-align: center;
	margin-top: auto;
	padding: 20px; 
	color: #fff;
	font-weight: bold;
}
.pole-kn:hover  {
	background-color: #f34841;
}

/* ---------- menu gorizontal begin ------------------*/

.menu-horizontal {
	display: block;
	font-family: 'Robotobold';
    font-size: 1.2rem;
	position: relative;
    text-align: center;
    width: 100%;
    z-index: 999999;
}

.menu-horizontal>ul {
    display: inline-block;
}
.menu-horizontal ul {
	display:block;
	z-index:9999;
	padding: 0;
	margin: 0;
	list-style:none;
}
.menu-horizontal>ul>li {
    float: left;
}
.menu-horizontal ul ul {
	position:absolute;
	background-color:#EF7D7C;
}
.menu-horizontal>ul>li>ul>li {
	border-top:1px solid #fff;
	text-align:left;
}
.menu-horizontal>ul>li>ul>li>a {
    padding: 0.9rem;
}
.menu-horizontal>ul>li>a {
    height: inherit;
    padding: 1.6rem;
}
.menu-horizontal a {
	display:block;
	text-decoration:none;
	color:#fff;
	margin: 0;
}
.current2 > a:link, .current2 > a:visited {
	color:#fff !important;
	background-color:#00a5b9 !important; /* #67cc67 */
}
.menu-horizontal a:hover {
	background-color:#8ce68c;	/* text-decoration:underline; */
}

/* ---------- menu gorizontal end ------------------*/
.obyortka {
	overflow: auto;
	position: relative;
}
.obyortka table {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.max-w-h {
	height: 6rem;
}
/* -------------------------------------------- */
.img100 {
	width: 100%;
}
.img50 {
	width: 50%;
}
.img30 {
	width: 30%;
}
.img25 {
	width: 25%;
}
.img50-r {
	width: calc(50% - 2rem);
	margin: 0 2rem 1.5rem 0;
}
.img30-r {
	width: calc(30% - 2rem);
	margin: 0 2rem 1.5rem 0;
}
.img25-r {
	width: calc(25% - 2rem);
	margin: 0 2rem 1.5rem 0;
}
.img-left {
	float: left;
}
.img-right {
	float: right;
}
.pole-kn1 {
  display: inline-block;
  background-color: #00a5b9;
  text-align: center;
  padding: 20px;
  color: #fff;
  font-weight: bold;
}
.pole-kn1:hover  {
	background-color: #f34841;
}
/* -------------------------------------------- */
/* ################################################################################################ */
@media screen and (max-width: 1280px) {
	img50, .img30, .img25 {
		width: calc(50% - 2rem);
	}
	.img50-r, .img30-r, .img25-r {
		width: calc(50% - 2rem);
	}

}
/* ################################################################################################ */
@media screen and (max-device-width: 270mm), screen and (max-width: 800px) {

	#trigger {
	  display: block;
	}
/* ---------- menu gorizontal begin ------------------*/
		.menu-horizontal {
			display:none;
			font-size: 1.1rem;
		}
		.menu-horizontal ul {
			width:100%;
			display:block !important;
		}
		.menu-horizontal li {
			width:100%;
			border-top:1px solid #FFF;
		}
		.menu-horizontal ul ul {
			position: relative;
		}
		.menu-horizontal > ul > li {
			float: none;
		}
		.menu-horizontal > ul > li > a {
			padding: 0.9rem;
		}	
		.menu-horizontal > ul > li > ul > li > a {
			text-align: center;
		}	
/* ---------- menu gorizontal end ------------------*/
.pole-name  {
	margin-bottom: 14px;
	line-height: 20px;
	height: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pole-avtor  {
	height: 20px;
	line-height: 20px;
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}	
.pole-text {
	height: 80px;
	line-height: 20px;
	margin-bottom: 14px;
	background-color: #F7F7F7;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
	header {
		order: -1;
	}

	heading {
		flex-direction: column;	
		flex-wrap: wrap;
	}
	.heading-left {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.heading-right {
		flex-wrap: wrap;
		flex-direction: column;
		margin-left: 0;
	}
	slider img {
		margin-bottom: -24px;
	}
	#nametext {
		text-align: center;
		margin-bottom: 1rem;
	}
	#logo {
		margin-right: 0;
	}
	#logo img {
		margin: 0;
	}
	#tel {
		margin-right: 0;
		margin-left: 0;
	}
	#tel img {
		width: 2rem;
	}
	#korz {
		text-align: center;
		width: inherit;
		margin-bottom: 1rem;
		color: #000;
		/*text-decoration: ;*/
	}
	#korz img {
		width: 2rem;
	}
	main {
		display: block;
		padding: 1rem;
	}
	info {
		padding: 1rem 0;
	}
	nav {
		padding: 0 1rem;
	}
	footer {
		display: flex;
		flex-direction: column;
		padding: 1rem;
	}
	#footer-left {
		text-align: center;
	}
	#footer-right {
		text-align: center;
	}
/* -------------------------------------------- */
	.img100, .img50, .img30, .img25 {
		width: 100%;
	}
	.img50-r, .img30-r, .img25-r {
		width: calc(100% - 2rem);
	}
/* -------------------------------------------- */

}