/* ==========================================================================
   Full Screen Menu styles
   ========================================================================== */

#qodef-fullscreen-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: $additional-background-color;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow-x: hidden !important;
	visibility: hidden;
	opacity: 0;
	z-index: 99; /* smaller than header, bigger than content */

	.qodef-menu-item-wave {
		display: none;
	}

	.qodef-menu-has-numbers {

		> ul {
			counter-reset: counter;

			> li {

				> a {

					.qodef-menu-item-text {
						position: relative;

						@include qodefScreenSize1024() {
							padding-left: 50px;
						}

						&:before {
							@include qodefMenuNumbersStyle();
							position: absolute;
							top: 32px;
							left: -117px;
							transition: color $transition-timing;

							@media only screen and (min-width: $screen-size-1025) and (max-width: $screen-size-1440) {
								top: 20px;
								left: -80px;
							}

							@include qodefScreenSize1280 {
								left: -60px;
							}

							@include qodefScreenSize1024() {
								top: 20px;
								left: 0;
							}

							@include qodefScreenSize480() {
								font-size: 22px;
								top: 8px
							}
						}
					}

					&:hover {

						.qodef-menu-item-text {

							&:before {
								color: var(--qode-main-color);
								font-weight: 400;
							}
						}
					}
				}

				&.current-menu-ancestor,
				&.current-menu-item {

					> a {

						.qodef-menu-item-text {

							&:before {
								color: var(--qode-main-color);
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}

	.qodef-content-grid {
		height: 100%;

		.qodef-fullscreen-menu {
			width: 100%;
			padding-left: 0;
		}
	}

	.qodef-fullscreen-menu-animate--in & {
		animation: qode-fade-in .25s linear both;
	}

	.qodef-fullscreen-menu-animate--out & {
		animation: qode-fade-out .25s linear both;
	}
}

#qodef-fullscreen-area-inner {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
}

#qodef-fullscreen-widget-area {
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	max-width: 50%;

	img {
		max-width: 25vw;
	}

	@include qodefScreenSize768() {
		top: auto;
		bottom: 50px;
		right: 7%;
		transform: none;
		max-width: 100%;

		img {
			display: none
		}
	}
}

$menu-top-bottom-spacing: 14px 0 5px;
$menu-level-two-left-spacing: 20px;

.qodef-fullscreen-menu {
	position: relative;
	top: 0;
	margin: 0 auto;
	text-align: left;
	width: 100%;
	padding-left: 243px;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			padding: 0;
			margin: 0 0 18px 0;

			@include qodefScreenSize1024() {
				margin: 0 0 25px 0;
			}

			&:last-child {
				margin: 0;
			}

			a {

				.qodef-menu-item-arrow {
					display: none;
				}
			}

			&.qodef--hide-link {

				> a {
					cursor: default;
				}
			}
		}

		&.sub-menu {
			display: none;
		}
	}

	.qodef-menu-item-icon {
		margin-right: 5px;
	}

	.qodef-mega-menu-widget-holder {
		display: none;
	}

	> ul {

		> li {

			> a {
				@include qodefMenuLevelOneInitialStyle(h1, $color: var(--qode-main-color));
				display: block;
				font-size: 120px;
				width: auto;

				@include qodefScreenSize1440() {
					font-size: 80px;
				}

				@include qodefScreenSize1366() {
					font-size: 70px;
				}

				@include qodefScreenSize480() {
					font-size: 38px;
				}

				&:hover {
					@include qodefMenuLevelOneHoverStyle();
					font-family: $meta-font;
					font-weight: 400;
					width: 100%;
				}
			}

			&.current-menu-ancestor,
			&.current-menu-item {

				> a {
					@include qodefMenuLevelOneHoverStyle();
					font-family: $meta-font;
					font-weight: 400;
				}
			}
		}
	}

	.qodef-drop-down-second-inner {

		> ul {
			padding: $menu-top-bottom-spacing;
		}

		ul {
			padding-left: 10px;

			@include qodefScreenSize1024 {
				padding-left: 53px;
			}

			li {
				margin: 0 10px 0 0;

				&:last-child {
					margin-bottom: 13px;

					@include qodefScreenSize1024 {
						margin-bottom: 0;

						> a {
							margin: 0;
						}
					}
				}

				> a {
					@include qodefMenuLevelTwoInitialStyle();
					color: var(--qode-main-color);
					font-family: $heading-font;
					overflow: unset;
					text-transform: uppercase;
					font-size: 30px;
					font-weight: 700;
					margin: 0 0 19px 0;

					@include qodefScreenSize1366() {
						margin: 0 0 10px 0;
					}

					@include qodefScreenSize680 {
						font-size: 24px;
					}

					.qodef-menu-item-text {

						.item-text {
							padding: 0 0 3px;
							@include qodefUnderline($height: 2px, $with-hover: true);
						}
					}

					&:hover {

						.item-text {
							@include qodefUnderlineActive();
						}
					}
				}

				&.current-menu-ancestor,
				&.current-menu-item {

					> a {
						.item-text {
							@include qodefUnderlineActive();
						}
					}
				}
			}
		}
	}
}