.qodef-fullscreen-menu-opener {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	
	.qodef-open-icon {
		position: relative;
		visibility: visible;
	}
	
	.qodef-close-icon {
		position: absolute;
		top: 0;
		left: 0;
		visibility: hidden;
	}
	
	&.qodef-fullscreen-menu-opener--icon-pack {
		font-size: 35px;
		
		* {
			display: inline-block;
			line-height: inherit;
			
			&:before {
				display: inline-block;
				line-height: inherit;
			}
		}
	}
	
	&.qodef-fullscreen-menu-opener--svg-path {
		
		span {
			position: relative;
			
			> * {
				vertical-align: middle;
			}
			
			> *,
			path {
				fill: currentColor;
				stroke: currentColor;
			}
		}
	}
	
	&.qodef-fullscreen-menu-opener--predefined {
		line-height: 1;
		
		.qodef-circles {
			color: $heading-color;
		}
		
		@extend %sidearea-circles;
		
		&:hover {
			
			.qodef-open-icon {
				@include qodefOpenerCirclesHover();
			}
		}
		
		.qodef-close-icon {
			@include qodefCloseCircles();
		}
	}
	
	.qodef-header--light:not(.qodef-fullscreen-menu--opened) & {
		
		&.qodef-fullscreen-menu-opener--predefined .qodef-circles {
			color: #fff;
		}
		
		&.qodef-fullscreen-menu-opener--icon-pack .qodef-side-area-opener-icon {
			color: #fff;
		}
		
		&.qodef-fullscreen-menu-opener--svg-path .qodef-side-menu-icon {
			
			> *,
			path {
				fill: #fff;
				stroke: #fff;
			}
		}
	}
	
	.qodef-header--dark:not(.qodef-fullscreen-menu--opened) & {
		
		&.qodef-fullscreen-menu-opener--predefined .qodef-circles {
			color: #000;
		}
		
		&.qodef-fullscreen-menu-opener--icon-pack .qodef-side-area-opener-icon {
			color: #000;
		}
		
		&.qodef-fullscreen-menu-opener--svg-path .qodef-side-menu-icon {
			
			> *,
			path {
				fill: #000;
				stroke: #000;
			}
		}
	}
}

.qodef-fullscreen-menu-holder{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden !important;
	visibility: hidden;
	opacity: 0;
	z-index: 99; /* smaller than header, bigger than content */
	background-color: $box-background-color;
	
	&.qodef-has-bg-image {
		background-position: center;
	}
	
	.qodef-fullscreen-menu-holder-inner{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.qodef-content-grid{
		height: 100%;
		
		nav.qodef-fullscreen-menu {
			width: 100%;
			
			ul {
				display: table;
				
				> li {
					display: table;
				}
			}
		}
	}
	
	nav.qodef-fullscreen-menu {
		position: relative;
		top: 0;
		margin: 0 auto;
		text-align: left;
		
		ul {
			position: relative;
			list-style: none;
			padding: 0 0 0 58px;
			margin: 0;
			
			li {
				margin: 0;
				padding: 0;
				text-align: left;
				
				a {
					position: relative;
					display: inline-block;
					vertical-align: middle;
					margin: 1px 0 2px;
					font-size: 55px;
					line-height: 1.381818181818182em;
					letter-spacing: -.01em;
					font-weight: 700;
					color: $heading-color;
					transition: all .35s ease-out, padding .3s ease;
					
					@media only screen and (min-width: $screen-size-1025) and (max-width: $screen-size-1440) {
						font-size: 44px;
					}
					
					@media only screen and (min-width: $screen-size-1025) {
						&:hover {
							color: rgba($heading-color, .5);
						}
					}
					
					@include qodefScreenSize1024 {
						font-size: 35px;
					}
				}
				
				&.current-menu-ancestor > a,
				&.current-menu-item > a {
					color: rgba($heading-color, .5);
				}
				
				ul {
					padding: 5px 0 1px 2px;
					
					&.sub-menu {
						display: none;
					}
					
					li {
						&.current-menu-ancestor > a,
						&.current-menu-item > a {
							color: $text-color;
							padding-left: 10px;
						}
						
						a {
							font-size: 16px;
							font-weight: 400;
							text-transform: none;
							margin: 7px 0 6px;
							color: $additional-text-color;
							transition: all .3s ease-in-out;
							
							&:hover {
								color: $text-color;
								padding-left: 10px;
							}
						}
						
						ul {
							li a {
								font-size: 16px;
								font-weight: 600;
							}
						}
						
						&:last-child {
							ul {
								&:last-child {
									padding-bottom: 0;
								}
							}
						}
					}
				}
			}
		}
		
		ul.menu {
			
			&:hover {
				
				> li {
					
					&:hover {
						
						> a {
							color: $heading-color;
						}
					}
					
					> a {
						color: rgba($heading-color, .5);
					}
				}
			}
		}
	}
}


.qodef-fullscreen-menu--opened {
	
	.qodef-fullscreen-menu-opener {
		
		.qodef-open-icon {
			visibility: hidden;
		}
		
		.qodef-close-icon {
			visibility: visible;
		}
	}
	
	&.qodef-header--light {
		
		.qodef-fullscreen-menu-opener {
			
			&.qodef-fullscreen-menu-opener--predefined {
				color: #fff;
				
				.qodef-close-icon {
					
					.qodef-circles-row {
						
						.qodef-circle {
							background-color: $heading-color;
						}
					}
				}
			}
		}
	}
	
	&.qodef-header--dark {
		
		.qodef-fullscreen-menu-opener {
			
			&.qodef-fullscreen-menu-opener--predefined {
				color: $heading-color;
				
				.qodef-close-icon {
					
					.qodef-circles-row {
						
						.qodef-circle {
							background-color: $heading-color;
						}
					}
				}
			}
		}
	}
	
	#qodef-page-header,
	#qodef-page-mobile-header{
		visibility: hidden;
	}
	
	.qodef-header-logo-link,
	.qodef-mobile-header-logo-link,
	.qodef-header-logo-image.qodef--customizer,
	.qodef-fullscreen-menu-opener {
		visibility: visible;
	}
	
	#qodef-page-header .qodef-header-logo-link img{
		&.qodef--dark{
			opacity: 1;
		}
		
		&.qodef--main,
		&.qodef--light{
			opacity: 0;
		}
	}
}

@keyframes fullscreen-fade-out {
	0% {
		opacity: 1;
		visibility: visible
	}
	100% {
		opacity: 0;
		visibility: hidden
	}
}

@keyframes fullscreen-fade-in {
	0% {
		opacity: 0;
		visibility: hidden
	}
	100% {
		opacity: 1;
		visibility: visible
	}
}
.qodef-fullscreen-menu-animate--in{
	.qodef-fullscreen-menu-holder {
		animation: fullscreen-fade-in .25s linear both;
	}
}

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