.horiz_menu ul, .horiz_menu menu{list-style:none;	margin:0; padding:0;}
.horiz_menu ul li, .horiz_menu menu li{float:left;}

/* ==================== #mainmenu ==================== */
#mainmenu {
	/*style*/
	color: white; 
	font-size: 1em; 
	line-height: 1.22em;
	text-align: center;
}
.menu-phone-wrapper {
	/*layout*/
	display: table;
	width: 100%;
	height: 100%;
	visibility: collapse;
}
.menu-phone {
	/*layout*/
	display: table-cell;
	width: 100%;
	height: 100%;
	padding-left: 57px;
	vertical-align: middle;

	/*style*/
	text-align: center;
	color: white;	
}
.menu-phone a,
.menu-phone a:hover,
.menu-phone a:active,
.menu-phone a:focus {
	/*style*/
	color: white;
	text-decoration: none;
}
@media screen and (max-width: 819px) {
	.menu-phone-wrapper {
		/*layout*/
		visibility: visible;
	}
	#menu_backdrop_mobile {
		/*layout*/
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 200;
		display: none;
		
		/*style*/
		background: rgba(255, 255, 255, .75);
	}
	#wrapper_mainmenu {
		/*layout*/
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 58px;
		z-index: 201;
		
		/*style*/
		color: white;
		font-size: 1.2em;
	}
	#wrapper_mainmenu.opened {
		/*layout*/
		height: 100%;
		overflow-y: scroll;
	}
	#mainmenu {
		/*layout*/
		position: relative;
		width: 100%;
		height: 58px;
		margin: 0;
		
		/*style*/
		background: #048EBB;
		color: white;
		font-size: 1.2em;
	}
	#mainmenu_expand_button {
		/*layout*/
		position: absolute;
		width: 50px;
		height: 50px;
		box-sizing: border-box;
		left: 4px;
		top: 4px;
		
		/*style*/
		background: transparent;
		border: 2px solid white;
		
		/*dynamic*/
		transition: background 0.2s ease-in;
	}
	#mainmenu_expand_button.opened {
		/*layout*/
		top: 4px;
	
		/*style*/
		background: white;
	}
	#mainmenu_expand_button .stripe {
		/*layout*/
		position: absolute;
		left: 11px;
		top: 22px;
		width: 24px;
		height: 2px;
		
		/*style*/
		background-color: rgba(255, 255, 255, 1);
		
		/*dynamic*/
		transition: background-color 0.2s ease-in,
					left 0.2s ease-in;
	}
	#mainmenu_expand_button.opened .stripe {
		/*layout*/
		left: -11px;
		
		/*style*/
		background-color: rgba(255, 255, 255, 0);
	}
	#mainmenu_expand_button .stripe::before, #mainmenu_expand_button .stripe::after {
		/*layout*/
		content: " ";
		display: block;
		position: absolute;
		width: 24px;
		height: 2px;
		left: 0;
		transform: rotate(0deg);
		
		/*style*/
		background-color: white;
						
		/*dynamic*/
		transition: left 0.2s ease-in,
					top 0.2s ease-in,
					transform 0.2s ease-in;
	}
	#mainmenu_expand_button .stripe::before {
		/*layout*/
		top: -7px;
	}
	#mainmenu_expand_button .stripe::after {
		/*layout*/
		top: 7px;
	}
	#mainmenu_expand_button.opened .stripe::before, #mainmenu_expand_button.opened .stripe::after {
		/*layout*/
		left: 22px;
		top: 0px;
				
		/*style*/
		background-color: rgb(50, 5, 96);
	}
	#mainmenu_expand_button.opened .stripe::before {
		/*layout*/
		transform: rotate(-405deg);
	}
	#mainmenu_expand_button.opened .stripe::after {
		/*layout*/
		transform: rotate(-315deg);
	}
	#mainmenu ul.menu {
		/*layout*/
		position: absolute;
		width: calc(100% - 105px);
		min-width: 218px;
		top: 58px;
		margin: auto;
		height: 0;
		transform: scale(0, 0);
		transform-origin: top left;
			
		/*style*/
		opacity: 0;
		border-top: 1px solid white;
		
		/*dynamic*/
		transition: height 0.2s ease-in,
					transform 0.2s ease-in,
					opacity 0.2s ease-in;
	}
	#mainmenu_expand_button.opened ~ ul.menu {
		/*layout*/
		height: 100%;
		transform: scale(1, 1);
		
		/*style*/
		opacity: 1;
	}
	#mainmenu li {
		/*layout*/
		width: 100%;
		max-width: 100%;
	}

	.menu-phone a:last-child, .menu-phone span{ display: none; }
}
@media screen and (min-width: 820px) {
	#mainmenu {
		/*layout*/
		position: relative;
		margin: 5px auto 0;
		padding-top: 0px;
	}
	#mainmenu_expand_button {
		/*layout*/
		display: none;
	}
}
@media screen and (min-width: 1391px) {
	#mainmenu {
		/*layout*/
		    width: 665px;
    		right: calc(85px - 4vw);
	}
}
@media screen and (min-width: 1275px) and (max-width: 1390px) {
	#mainmenu {
		/*layout*/
		    width: 665px;
    		right: calc(85px - 4vw);
	}
}
@media screen and (min-width: 1116px) and (max-width: 1276px) {
	#mainmenu {
		/*layout*/
		width: 600px;
		right: calc(23% - 6vw);
	}
}
@media screen and (min-width: 971px) and (max-width: 1115px) {
	#mainmenu {
		/*layout*/
		width: 550px;
		right: calc(200px - 9vw);
	}
}
@media screen and (min-width: 820px) and (max-width: 970px) {
	#mainmenu {
		/*layout*/
		min-width: 400px;
		right: calc(200px - 17vw);
	}
}
@media screen and (min-width: 820px) {
	#mainmenu .menu {
		/*layout*/
		min-height: 100px;
		display: block;
		display: -webkit-flex; /* оптимизация для Safari */
		-webkit-justify-content: center; /* оптимизация для Safari */
		-webkit-flex-wrap: wrap;
		-webkit-align-items: center;
		-webkit-align-content: center;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		text-align: center; /* IE10-, Firefox 12-22 */
		text-align-last: center; /* IE10-, Firefox 12-22 */

	}
}

#mainmenu li {
	/*layout*/
	display: table;
	padding: 6px;
	box-sizing: content-box;
	
	/*style*/
	border: 2px solid white;
    background: #048EBB;
}
@media screen and (min-width: 820px) {
	#mainmenu li {
		/*layout*/
		max-width: 120px;
	}
}

#mainmenu li a, #mainmenu li .current_item{
	/*style*/
	display: table-cell;
	vertical-align: middle;
	height: 32px;
	
	/*style*/
	color: white;
	text-align: center;
	font-weight: bolder;
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
}
#mainmenu li:hover {
    /*style*/
	border: 2px solid #048EBB;
    transition: 0.8s;
	background: #094456;
}

#mainmenu li a:hover, #mainmenu li.current_item {
	/*style*/
    text-decoration: none;
}
#mainmenu .current {
	/*style*/
	background: #094456;
}
#mainmenu .current_item:active {
    /*style*/
	color: white !important;
}

.menu--el{ display: inline-block; width: 100%; height: 150px; background-size: cover; border: 1px solid #e2e2e2; text-decoration: none;}
.menu--el .h3 { align-items: center; width: 100%; padding: 10px 2px; margin: 0; background-color: rgba(49,48,51,0.9); color: #fff; text-align: center;}

.menu--el:hover { box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.18); text-decoration: none;}