* {
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
	margin: 0;
	padding: 0;
	font-size: 17px;
	color: #b1b1b1;
	background-color: #1b1b1b;
}
a {
	color: #ffffff;
	text-decoration: none;
}


.section {

}
.wrap {
	max-width: 1670px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.row {
	display: flex;
	flex-wrap: wrap;
}


.header-section {
	background-color: #252525;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #404040;
}
.topmenu-section {
	background-color: #252525;
	padding-top: 10px;
	padding-bottom: 15px;
	border-bottom: 1px solid #404040;
}
.content-section {
	margin-top: 15px;
}
.footer-section {
	clear: both;
	margin-top: 15px;
	background-color: #252525;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #404040;
}


.header-wrap {

}
.topmenu-wrap {

}
.content-wrap {

}
.footer-wrap {

}


.header-brand {
	flex: 0 0 50%;
	max-width: 50%;
}
.header-brand-link {
	display: inline-block; 
	text-align: center; 
	text-decoration: none;
}
.header-brand-ico {
	display: inline-block;
	width:20px;
	height: 20px;
	background-color: #9a8c68;
	border-radius: 10px;
	margin-right: 5px;
}
.header-brand-title {
	display: inline-block;
	font-size: 28px;
}
.header-brand-desc {
	display: inline-block;
	font-size: 17px;
	color: #b1b1b1;
}
.header-search {
	flex: 0 0 50%; 
	max-width: 50%; 
	text-align: right;
}
.header-search-form {
	height: 100%; 
	padding-top: 4px; 
	padding-bottom: 4px;
}
.header-search-form-input {
	height: 100%; 
	width: 400px; 
	border-radius: 2px; 
	outline: none; 
	border: none; 
	font-weight: normal;
}
.header-search-form-button {
	height: 100%; 
	padding-left: 10px; 
	padding-right: 10px; 
	background-color: #9a8c68; 
	color: #ffffff; 
	border: none; 
	cursor: pointer; 
	border-radius: 2px; 
	font-weight: normal;
}


.topmenu {
	flex: 0 0 100%; 
	max-width: 100%;
}
.topmenu-list {
	list-style-type: none; 
	margin: 0; 
	padding: 0;
}
.topmenu-item {
	display: inline-block; 
	margin-right: 10px; 
	padding: 7px; 
	border: 1px solid #333333; 
	border-radius: 2px;
	margin-top: 5px;
}
.topmenu-item:hover {
	background-color: #333333;
}
.topmenu-link {
	color: #9a8c68; 
	font-size: 13px;
}


.page-title {
	flex: 0 0 100%; 
	max-width: 100%; 
	padding-top: 5px; 
	padding-bottom: 20px; 
	border-bottom: 2px solid #2c2c2c;
	margin-bottom: 15px;
}
.page-title-h {
	margin: 0; 
	padding: 0; 
	font-weight: normal;
}


.search-title {
	flex: 0 0 100%; 
	max-width: 100%; 
	padding-top: 5px; 
	padding-bottom: 20px; 
	border-bottom: 2px solid #2c2c2c;
	margin-bottom: 15px;
}
.search-title-h {
	margin: 0; 
	padding: 0; 
	font-weight: normal;
}


.row-item {
	display: flex;
	flex-wrap: wrap;
	margin-right: -3px;
	margin-left: -3px;
	margin-top: -3px;
	margin-bottom: -3px;
}
.column-item {
	flex: 0 0 20%;
	max-width: 20%;
	
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.item {
	background-color: #151515;
	border: 2px solid #151515;
	border-radius: 2px;
}
.item:hover {
	border: 2px solid #252525;
	background-color: #252525;
}
.item-thumb {

}
.item-thumb-link {
	display: block;
}
.item-thumb-img {
	width: 100%;
	vertical-align: middle;
	border-radius: 2px;
}
.item-title {
	white-space: nowrap;
	overflow: hidden;
	padding: 8px;
	text-overflow: ellipsis;
	text-align: center;
}
.item-title-link {
	color: #b1b1b1;
}


.record-title {
	flex: 0 0 100%; 
	max-width: 100%; 
	padding-top: 5px; 
	padding-bottom: 20px; 
	border-bottom: 2px solid #2c2c2c;
}
.record-title-h {
	margin: 0; 
	padding: 0; 
	font-weight: normal;
}

.record-main {
	flex: 0 0 64.6%; 
	max-width: 64.6%; 
	margin-top: 15px;
}
.record-video {
	width: 100%; 
	position: relative; 
	display: block; 
	background-color: #151515;
	border-radius: 2px;
}
.record-tags {
	margin-top: 10px; 
	margin-bottom: 10px;
}
.record-tag-list {
	list-style-type: none; 
	margin: 0; 
	padding: 0;
}
.record-tag-item {
	display: inline-block; 
	margin-right: 10px;
}
.record-tag-link {
	color: #9a8c68;
}

.record-aside {
	flex: 0 0 35.4%; 
	max-width: 35.4%; 
	margin-top: 15px; 
	padding-left: 10px;
}
.row-aside {
	display: flex;
	flex-wrap: wrap;
	margin-right: -4px;
	margin-left: -4px;
	margin-top: -4px;
	margin-bottom: -4px;
}
.column-aside-item {
	flex: 0 0 50%;
	max-width: 50%;
	
	padding-right: 4px;
	padding-left: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.aside-item {
	background-color: #151515;
	border-radius: 2px;
}
.aside-item:hover {
	background-color: #252525;
}
.aside-item-thumb {

}
.aside-item-thumb-link {
	display: block;
}
.aside-item-thumb-img {
	width: 100%;
	vertical-align: middle;
	border-radius: 2px;
}
.aside-item-title {
	white-space: nowrap;
	overflow: hidden;
	padding: 8px;
	text-overflow: ellipsis;
	text-align: center;
	color: #585858;
}
.aside-item-title-link {
	color: #585858;
}

.related-records-title {
	flex: 0 0 100%; 
	max-width: 100%; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	border-top: 2px solid #2c2c2c;
}
.related-records-title-h {
	margin: 0; 
	padding: 0; 
	font-weight: normal;
}

.related-records {
	flex: 0 0 100%; 
	max-width: 100%;
}


.pagination {
	flex: 0 0 100%; 
	max-width: 100%;
	margin-top: 15px;
}
.pagination-list {
	list-style-type: none; 
	margin: 0; 
	padding: 0;
}
.page-item {
	display: inline-block;
	margin-right: 7px;
	border: 1px solid #333333;
	border-radius: 2px;
}
.page-active {
	background-color: #333333;
}
.page-link {
	display: inline-block;
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 7px;
	padding-bottom: 7px;
	color: #b1b1b1;
}
.page-link:hover {
	background-color: #333333;
}


.footer {
	text-align: center; 
	padding: 10px;
}


@media (max-width: 1700px) {
	.column-item {
		flex: 0 0 20%;
		max-width: 20%;
	}
	.header-search-form-input {
		width: 400px;
	}

	.record-main {
		flex: 0 0 64.6%; 
		max-width: 64.6%; 
	}
	.record-aside {
		flex: 0 0 35.4%; 
		max-width: 35.4%; 
	}
}
@media (max-width: 1500px) {
	.column-item {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.header-search-form-input {
		width: 350px;
	}

	.record-main {
		flex: 0 0 65.2%; 
		max-width: 65.2%; 
	}
	.record-aside {
		flex: 0 0 34.8%; 
		max-width: 34.8%; 
	}
}
@media (max-width: 1200px) {
	.column-item {
		flex: 0 0 33.33%;
		max-width: 33.33%;
	}
	.header-search-form-input {
		width: 300px;
	}

	.record-main {
		flex: 0 0 66.4%; 
		max-width: 66.4%; 
	}
	.record-aside {
		flex: 0 0 33.6%; 
		max-width: 33.6%; 
	}
}
@media (max-width: 992px) {
	.column-item {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.header-search-form-input {
		width: 250px;
	}

	.record-main {
		flex: 0 0 100%; 
		max-width: 100%; 
	}
	.record-aside {
		flex: 0 0 100%; 
		max-width: 100%; 
		padding-left: 0;
	}
	.related-records-title {
		margin-top: 15px;
	}
}
@media (max-width: 768px) {
	.column-item {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.header-brand {
		flex: 0 0 100%; 
		max-width: 100%; 
		text-align: center;
	}
	.header-search {
		flex: 0 0 100%; 
		max-width: 100%; 
		text-align: center;
	}

	.header-search-form {
		display: flex;
  		height: 52px;
  		margin-top: 10px;
	}
	.header-search-form-input {
		flex-grow: 1;
		margin-right: 4px;
	}

	.record-main {
		flex: 0 0 100%; 
		max-width: 100%; 
	}
	.record-aside {
		flex: 0 0 100%; 
		max-width: 100%; 
		padding-left: 0;
	}
	.related-records-title {
		margin-top: 15px;
	}
}