/*
	Todd Motto Labs
	URL: www.toddmotto.com
*/

/*------------------------------------*\
    Flaunt JS Navigation
\*------------------------------------*/

:root {
	--nav-color-primary: var(--color-primary, #009055);
	--nav-color-hover: #154f96;
	--nav-color-bg: var(--color-primary, #009055);
}

.nav {
	position: relative;
	display: inline-block;
	font-size: 14px;
}
.nav-list {
	text-align: left;
}
.nav-item {
	float: left;
	zoom: 1;
	position: relative;
}
/* На десктопе используется штатный дропдаун `.top-navi_drop`.
   `nav-submenu` — это мобильная структура (раскрывается кликом через JS),
   поэтому на большом экране НЕ показываем её по hover. */
.nav-item:hover .nav-submenu {
	display: none;
}

/* Navigation submenu */
.nav-submenu {
	display: none;
	position: absolute;
	left: 0;
	width: 180px;
}
.nav-submenu-item a {
	/* background: #8B2770; */
	border-bottom: 1px solid green;
	display: block;
	padding: 15px;
}
.nav-submenu-item a:hover {
	background: var(--nav-color-hover);
}

/* Mobile navigation */
.nav-mobile {
	display: none; /* Hide from browsers that don't support media queries */
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	border-left: solid 1px var(--nav-color-primary);
	background: var(--nav-color-bg) url(../img/nav.svg) no-repeat center center;
	background-size: 18px;
	height: 50px;
	width: 50px;
}

/* Mobile navigation, clickable area for revealing <ul> */
.nav-click {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	border-left: solid 1px var(--nav-color-primary);
	height: 49px;
	width: 50px;
	cursor: pointer;
}
.nav-click i {
	display: block;
	height: 48px;
	width: 48px;
	background: url(../img/drop.svg) no-repeat center center;
	background-size: 20px;
}
.nav-click:hover {
	background-color: var(--nav-color-bg);
}
.nav-rotate {
	transform: rotate(180deg);
}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

ul.nav-submenu {
	display: none;
}

@media only screen and (max-width: 890px) {
	.f-nav {
		z-index: 9999 !important;
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		width: 100%;
	}
	.header .top-navi {
		height: auto !important;
	}
	.top-navi_link {
		float: none !important;
	}
	.top-navi_item {
		padding: 0 !important;
		background: none;
	}
	.top-navi_item:hover .top-navi_drop {
		display: none !important;
	}
	.nav-mobile {
		display: block;
	}
	.nav {
		width: 100%;
		padding: 50px 0 0;
	}
	.nav-list {
		display: none;
	}
	.nav-item {
		width: 100%;
		float: none;
	}
	.nav-item > a {
		padding: 15px;
	}
	.nav-click {
		display: block;
	}
	.nav-mobile-open {
		border-radius: 5px 5px 0 0;
	}
	.nav-item:hover .nav-submenu {
		display: none;
	}
	.nav-submenu {
		position: static;
		width: 100%;
	}
	.nav-item a {
		display: block;
		color: #FFF;
	}
	.search-block {
		left: 10px;
		top: 157px !important;
		z-index: 300 !important;
		background-color: white;
		position: absolute;
	}
	.personal-cabinet-link {
		top: 110px !important;
		z-index: 300 !important;
		left: 250px;
		background-color: var(--nav-color-primary);
		right: auto !important;
	}
	.oneplus {
		top: 110px !important;
		z-index: 300 !important;
		left: 380px;
		height: 25px !important;
	}
	.twoplus {
		top: 110px !important;
		z-index: 300 !important;
		left: 420px;
		height: 25px !important;
	}
	#nullp {
		left: 318px;
		top: 10px !important;
		right: auto !important;
	}
	#table_soc_icons1 {
		left: 350px !important;
		top: 10px !important;
	}
	.logo {
		width: 52vw !important;
	}
	#logo {
		width: 52vw !important;
		height: auto !important;
		max-height: 120px !important;
		object-fit: contain !important;
	}
	#mobile {
		display: none !important;
	}
	.lang {
		left: 250px;
		top: 10px !important;
		right: auto !important;
	}
	.upp {
		text-transform: uppercase;
	}
	.tab {
		padding-left: 30px !important;
	}
}

@media only screen and (max-width: 525px) {
	.small-only {
		display: table;
		width: 100%;
	}
	th.st-head-row {
		border-top: 2px solid green;
	}
	.large-only {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	.logo {
		font-size: 5vw;
		width: 70vw;
	}
	.twoplus {
		display: none;
	}
}

@media only screen and (max-width: 375px) {
	#table_soc_icons1 {
		left: 250px !important;
		top: 82px !important;
	}
	.header .logo {
		top: 3px !important;
	}
}

.small-only {
	display: none;
}
.large-only {
	display: table;
}