$level1: '.level1';
$level2: '.level2';
$active-selector: '.active';
//@import url('https://fonts.googleapis.com/css?family=Ubuntu:300');
/* ubuntu-300 - latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'), /* Modern Browsers */
	url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
	url('../fonts/ubuntu-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
$mobile-font: 'Ubuntu', sans-serif;
$blackClr: #1D1D1D;
$redClr: #E52713;


// Temporary

.sub-menu {
	display: none;
}

//


@include media('>=md') {
	.navigation-container {
		box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.70);
		-webkit-box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.70);
		-moz-box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.70);
		background-color: #fff;
		position: sticky;
		z-index: 9999;
		will-change: transform;
		backface-visibility: visible;
		top: 0;
		transition: .3s ease-in-out;

		.header-modal-container {

			.minibasket-wrap {

				.basket-modal {
					position: absolute;
					right: 0;
					top: 50%;
					width: 400px;
				}
			}

			.modal-countries {
				max-height: 50vh;
				overflow-y: scroll;
				width: 20%;
				overflow-x: hidden;
				position: absolute;
				background-color: #fff;
				top: 50%;

				.country-item {
					padding: 10px 5px;
					font-size: 22px;
				}
			}

			.modal-login {
				position: absolute;
				width: 400px;
				background-color: #fff;
				top: 50%;
				right: 0;

				.modal-content {
					padding: 25px;
					h2 {
						font-size: 30px;
					}

					form {

						input[type=email], input[type=password] {
							width: 100%;
							padding: 10px;
							border: solid 1px $blackClr;
						}

						.title {
							padding: 10px;
							text-transform: capitalize;
						}

						.tools {
							display: flex;
							justify-content: space-around;
							padding: 15px 0;

							.remembermme {

								label {
									text-transform: capitalize;
								}

							}

							a {
								text-transform: capitalize;

								&:nth-child(2) {
									color: $redClr;
								}
							}
						}

						.buttons {
							display: flex;
							justify-content: space-around;

							a.btn {
								width: 45%;
								text-align: center;
							}

							button {
								width: 45%;

								&[type=submit] {
									background-color: $blackClr;
									color: #fff;
									font-size: 16px;

									&:hover {
										background-color: $redClr;
									}
								}
							}
						}
					}
				}
			}
		}
		.promo {
			transition: .3s ease-in-out;
			transform: translateY(0px);
		}
		&.nav-down {
			transform: translateY(0px);
		}
		&.nav-up {
			transform: translateY(-45px);
		}

		.logo {

			margin-right: 100px;

			img {
				max-width: 180px;
				height: auto;
			}
		}

		.marketing-strip {

			background-color: $blackClr;

			i {
				color: #fff;
			}

			a {

				color: #fff;

				strong {
					font-family: Helvetica,Arial,sans-serif;
				}
				&:first-child {
					text-align: right;
					margin-right: 20px;
				}
			}
		}

		.middle-strip {
			display: flex;
			padding: 10px 0;
			align-items: center;
			justify-content: space-around;

			.countries-panel {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.element {
					cursor: pointer;
				}

				div {
					padding: 0 20px;
				}

				.input-group {
					position: relative;
					display: flex;
					align-items: center;
					min-width: 300px;

					input {
						padding: 5px;
						color: $blackClr;
						width: 100%;
						position: relative;
					}
				}

				button {
					display: inline-block;
					text-transform: uppercase;
					color: $blackClr;
					background-color: transparent;
					border: none;
					position: absolute;
					left: 80%;
				}
			}

			.util-row {
				display: flex;
				justify-content: space-around;
				min-width: 250px;

				.element {
					padding: 12px;
					font-size: 24px;
					cursor: pointer;
				}
			}

			.mobile-trigger {
				display: none !important;
			}
		}

		.bottom-strip {
			.menu {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				list-style: none;
				padding: 10px 0;
				border-top: 1px solid #dadada;
				align-items: center;

				.menu-item {
					transition:  all 0.5s;


					a {
						text-transform: uppercase;
						font-size: 14px;
						letter-spacing: 1px;
						color: #000;

						&:hover {
							color: $redClr;
							transition: all 0.4s;
						}

						&:active {
							color: $redClr;
						}
					}

					.sub-menu.active {
						display: flex;
						position: absolute;
						background-color: #f3f3f3;
						width: 100%;
						left: 0;
						justify-content: flex-start;
						margin-top: 10px;

						.products {
							min-height: unset;
							text-align: left;
							margin: 0;
							padding: 0;

							li {
								padding: 10px 0;
								a {
									font-size: 14px;
									text-transform: capitalize;
								}
							}
						}

						.sub-menu-item {
							display: flex;
							flex-direction: column;
							padding: 0 40px 10px;

							.item-title {
								font-family: $m900;
								padding: 20px 0;
								text-align: left;
								justify-content: flex-start;

								a {
									text-transform: uppercase;
									font-size: 18px;
								}
							}

							.img-box {

								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.marketing-strip {
					display: none;
				}
			}
			.sub-strip {
				display: none;
			}
		}
		.marketing-strip {
			display: flex;
			justify-content: center;
			padding: 10px 0 15px 0;

			a {
				max-width: 400px;
				width: 100%;
			}

			a img {
				max-width: 20px;
			}

			.item {
				padding-left: 20px;
			}
		}
	}
	.sub-menu-owner {
		display: none;
	}
}

@include media('<=md') {

	.no-scroll {
		overflow-y: hidden;
	}

	.marketing-strip {
		display: none;
	}
	.navigation-container {
		box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.75);
		-webkit-box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 2px -9px 20px 0px rgba(0,0,0,0.75);
		background-color: #fff;
		position: sticky;
		z-index: 9999;
		top: 0;
		transition: .3s ease-in-out;

		.header-modal-container {

			.minibasket-wrap {

				.basket-modal {
					position: absolute;
					right: 0;
					top: 100%;
					width: 100%;
					left: 0;
				}
			}
			.modal-login {
				position: absolute;
				width: 100%;
				background-color: #fff;
				top: 100%;

				.modal-content {
					padding: 25px;
					h2 {
						font-size: 30px;
					}

					form {

						input[type=email], input[type=password] {
							width: 100%;
							padding: 10px;
							border: solid 1px $blackClr;
						}

						.title {
							padding: 10px;
						}

						.tools {
							display: flex;
							justify-content: space-around;
							padding: 15px 0;
						}

						.buttons {
							display: flex;
							justify-content: space-around;

							a.btn {
								width: 45%;
								text-align: center;
							}

							button {
								width: 45%;

								&[type=submit] {
									background-color: $blackClr;
									color: #fff;

									&:hover {
										background-color: $redClr;
									}
								}
							}
						}
					}
				}
			}
		}

		.promo {
			transition: .3s ease-in-out;
		}

		.logo {

			img {
				max-width: 140px;
				height: auto;
			}
		}

		.middle-strip {
			padding: 10px 5px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.countries-panel {
				display: flex;
				align-items: center;

				.element {
					display: none;
				}

				.mobile-trigger {
					font-size: 22px;

					.trigger1, .trigger2, .trigger3 {
						width: 25px;
						height: 3px;
						background-color: #333;
						margin: 6px 0;
						transition: 0.5s;


					}

					.trigger1.animated {
						-webkit-transform: rotate(-45deg) translate(-5px, 6px);
						transform: rotate(-45deg) translate(-5px, 6px);
					}
					.trigger2.animated {
						opacity: 0;
					}
					.trigger3.animated {
						-webkit-transform: rotate(45deg) translate(-6px, -8px);
						transform: rotate(45deg) translate(-6px, -8px);
					}
				}

				.input-group {
					position: absolute;
					display: flex;
					align-items: center;
					width: 100%;
					top: 101%;
					left: 0;
					border: solid 1px $blackClr;

					&.inactive {
						left: 100%;
						transition: all 0.5s ease;
					}

					input {
						padding: 5px;
						color: $blackClr;
						width: 100%;
						position: relative;
					}
				}

				button {
					display: inline-block;
					text-transform: uppercase;
					color: $blackClr;
					background-color: transparent;
					border: none;
					position: absolute;
					left: 90%;
				}
			}

			.util-row {
				display: flex;
				justify-content: space-around;

				.element {
					padding: 12px;
					font-size: 22px;
				}
			}
		}

		&.nav-down {
			transform: translateY(0px);
		}
		&.nav-up {
			transform: translateY(-50px);
		}

		.promo {
			padding: 15px;
			text-align: center;
			font-size: 0.9em;
			color: #fff;
			z-index: auto;
		}

		.bottom-strip {
			transform: translateX(-100%);
			transition: all 0.5s ease;
			height: 100vh;
			display: none;
			background-color: #fff;

			&.active {
				//transition: all 0.5s ease;
				display: flex;
				transform: translateX(0);
				height: 100vh;
			}
			.menu {
				flex-direction: column;
				justify-content: space-around;
				list-style: none;
				padding: 20px 0;
				border-top: 1px solid #dadada;
				overflow-y: scroll;
				background-color: #fff;
				width: 100%;
				height: 100vh;

				&::-webkit-scrollbar {
					width: 0px;
				}

				.marketing-strip {
					display: flex;
					flex-direction: column;
					padding: 15px 0;
					background-color: $blackClr;
					margin-top: 20px;

					.item {
						display: flex;
						padding-left: 10px;
						padding-bottom: 10px;
					}

					i {
						color: #fff;
						padding-right: 5px;
					}

					a {
						max-width: 100%;
						display: flex;
						align-items: center;
						color: #fff;

						strong {
							font-family: Helvetica,Arial,sans-serif;
							padding-right: 5px;
						}

						img {
							max-width: 30px;
						}
					}
				}

				&.active {
					//transition: all 0.5s ease;
					//display: flex;
					//transform: translateX(0);
				}

				.under-bar {
					display: none !important;
				}

				.menu-item {
					font-size: 20px;
					padding: 20px 5px;
					border-bottom: #bdbdbd solid 1px;
					position: relative;

					> a {
						font-weight: bold;
					}

					.menu-item-title {



						&::after {
							top: 0;
							font-size: 16px;
							position: absolute;
							display: block;
							font-family: 'FontAwesome';
							content: '\f054';
							color: $redClr;
							left: 90%;
							margin-top: 16px;
							transform: rotate(90deg);
							transition: 0.4s;
							height: 10px;
							width: 10px;
						}

						&.active::after {
							transform: rotate(270deg);
							transition: 0.4s;
							color: rgba(229,39,19, 0.5);
						}

					}

					.sub-menu {
						display: none;
						margin: 10px;

						&.active {
							display: block;
						}

						.products {
							display: none;
							list-style: none;
							padding: 10px 0;
							min-height: unset;
							text-align: left;
							transition: all 0.4s;

							li {
								padding: 20px 0;
								font-size: 16px;
							}

							&.active {
								display: block;
								transition: all 0.4s;
							}
						}

						.sub-menu-item {
							text-transform: uppercase;
							list-style: none;
							padding: 30px 5px 10px 5px;
							img.kot-image-destination {
								display: none !important;
							}


							.item-title {
								border: none !important;
								font-size: 18px;
								position: relative;

								&:after {
									content: '\f054';
									position: absolute;
									transform: rotate(90deg);
									font-weight: bold;
									top: 0;
									margin-left: 30px;
									font-size: 14px;
									font-family: 'FontAwesome';
									transition: 0.4s;
								}

								&.active:after {
									transform: rotate(270deg);
									color: #b2b2b2;
								}
							}
						}
					}
				}
			}
		}
	}
	.spacer {
		height: 5px;
	}
}