@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap');

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#map-wrap {
	display: flex;
	height: 100%;
	/*background: red;*/
	justify-content: end;
}
#left-panel {
	display: flex;
	width: 521px;
	background: #fff;
	flex-wrap: wrap;
}
#ymaps-map {
	width: calc(100% - 521px);
	/*background: blue;*/
}

#logo {
	width: 100%;
	height: 129px;
	display: flex;
	background: #2763c3;
	margin-bottom: 2px;
}
#toplogo {
	padding: 20px;
}
.top {
	display: flex;
	flex-direction: column;	
	justify-content: center;
	width: 90%;
}
.top1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 22px;
	text-transform: uppercase;
	color: #ffffff;
}
.top2 {
    font-family: 'Roboto', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	color: #ffffff;
}
.home {
	display: flex;
	flex-direction: column;	
	justify-content: space-between;
	padding: 10px;
}

#tabs {
	display: flex;
	width: 100%;
	height: 104px;
	justify-content: space-between;
}
#tabs>a {
	width: 33%;
	padding: 0px;
	background: #90c45c;
	margin-bottom: 2px;
	margin-right: 2px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
    font-family: 'Roboto', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#tabs>a#tab3 {
	margin-right: 0px;
}
#tabs a span {
	display: none;
}
#tabs a:hover, #tabs a.active {
	background: #dd127b;
}
#tabs a:hover span, #tabs a.active span {
	display: inline;
}
#tabs a:hover img, #tabs a.active img {
	display: none;
}

#panels {
	height: calc(100% - 129px - 104px);
	width: 100%;
	overflow: auto;
}
#panels>div {
	display: none;
	margin: 20px;
heig-ht: 100%;
}
#panels>div.active {
	display: block;
}


.push #ymaps-map {
	width: calc(100% - 67px);
}
.push #left-panel {
	width: 67px;
}
.push #logo {
	height: 67px;
	margin-bottom: 0px;
}
.push #toplogo {
	padding: 10px;
}
.push #toplogo img {
	width: 47px;
	height: auto;
}
.push .top, .push .home {
	display: none;
}
.push #tabs {
	flex-direction: column;
	height: calc(100% - 67px);
	background: #2763c3;
	justify-content: start;
}
.push #tabs a {
	width: 100%;
	padding: 0px;
	margin-right: 0px;
}
.push #tabs a img {
	margin: 10px;
	width: 32px;
	height: auto;
}
	
.push #tabs a:hover, .push #tabs a.active {
	background: #90c45c;
}
.push #tabs a:hover span, .push #tabs a.active span {
	display: none;
}
.push #tabs a:hover img, .push #tabs a.active img {
	display: inline;
}
	
.push #panels {
	display: none;
}


@media screen and (max-width: 1000px){
	#ymaps-map {
		width: calc(100% - 67px);
	}
	#left-panel {
		width: 67px;
	}
	#map-wrap.pop #left-panel {
		width: 521px;
		max-width: 100%;
		position: absolute;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0px;
		z-index: 2000;
	}
	#map-wrap:not(.pop) #logo {
		height: 67px;
		margin-bottom: 0px;
	}
	#map-wrap:not(.pop) #toplogo {
		padding: 10px;
	}
	#map-wrap:not(.pop) #toplogo img {
		width: 47px;
		height: auto;
	}
	#map-wrap:not(.pop) .top, #map-wrap:not(.pop) .home {
		display: none;
	}
	#map-wrap:not(.pop) #tabs {
		flex-direction: column;
		height: calc(100% - 67px);
		background: #2763c3;
		justify-content: start;
	}
	#map-wrap:not(.pop) #tabs a {
		width: 100%;
		padding: 0px;
		margin-right: 0px;
	}
	#map-wrap:not(.pop) #tabs a img {
		margin: 10px;
		width: 32px;
		height: auto;
	}
	
	#map-wrap:not(.pop) #tabs a:hover, #map-wrap:not(.pop) #tabs a.active {
		background: #90c45c;
	}
	#map-wrap:not(.pop) #tabs a:hover span, #map-wrap:not(.pop) #tabs a.active span {
		display: none;
	}
	#map-wrap:not(.pop) #tabs a:hover img, #map-wrap:not(.pop) #tabs a.active img {
		display: inline;
	}
	
	#map-wrap:not(.pop) #panels {
		display: none;
	}
	
}
@media screen and (max-height: 500px){
	#left-panel {
		overflow: auto;
	}
	#panels {
		height: auto;
		overflow: initial;
	}
}


#panels #panel1 {
	margin: 0px;
}
.category {
	display: flex;
	justify-content: space-between;	
	cursor: pointer;
	background: #eef1f8;
	padding: 20px 0px 20px 0px;
	color: #0a429c;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
	font-size: 18px;
}
.category:hover {
	background: #2763c3;
	color: #ffffff;
}
.category:before {
	content: '';
	width: 30px;
}
.category:after {
	content: '';
	background: url(img/a-bottom.png) center no-repeat;
	width: 50px;
}
.category.active:after {
	background-image: url(img/a-top.png);
}
.category .c-image {
	width: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.category .c-name {
	width: calc(100% - 80px - 30px - 50px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 18px;
}

.category + div {
	display: none;
}
.category.active + div {
	display: block;
}

.sub-category div {
	display: flex;
	justify-content: space-between;	
	cursor: pointer;
	color: #30333b;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
	font-size: 15px;	
}
.sub-category div:before {
	content: '';
	width: 30px;
}
.sub-category div:after {
	content: '';
	width: 30px;
}
.sub-category div:hover {
	background: #60a8f0;
	color: #ffffff;
}
.sub-category div .c-image {
	width: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid #dfe3ed;
	padding: 20px 0px 20px 0px;
}
.sub-category div .c-name {
	width: calc(100% - 80px - 30px - 30px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid #dfe3ed;
	padding: 20px 0px 20px 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
	font-size: 15px;	
}
.sub-category div:last-child .c-image, .sub-category div:hover .c-image {
	border-bottom: none;
}
.sub-category div:last-child .c-name, .sub-category div:hover .c-name {
	border-bottom: none;
}