/*
Theme Name: Modet-Theme
Theme URI: https://anywherestudio.design
Template: hello-elementor
Author: Anywhere Studio
Author URI: https://anywherestudio.design
Version: 2.2.3

*/

/* Page Transitions */

#fader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	pointer-events: none;
	background: #FCF9F6;
	animation-duration: 300ms;
	animation-timing-function: ease-in-out;
}
@keyframes fade-out {
	from {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
@keyframes fade-in {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
#fader.fade-out {
	opacity: 0;
	animation-name: fade-out;
}
#fader.fade-in {
	opacity: 1;
	animation-name: fade-in;
}
/* End Page Transitions */

/* Desktop Menu */

.site-header {
	background-color: #FCF9F6;
	width: 100%;
	max-width: 100% !important;
	transition: all .4s ease;
}
.home .site-header {
	background-color: transparent;
}
#navbar {
	position: fixed;
	z-index: 1000;
	padding: 30px 70px;
	transition: top .4s ease;
}
.top {
	top: 0px !important;
	transition: top .4s ease;
}
.hide {
	top: -100px;
}
.show {
	top: 0px;
}
.modet-nav {
	display: flex;
	width: 75%;
	margin-top: 7px;
	right: 70px;
	position: fixed;
}
.modet-logo {
	width: 170px;
	transition: all .2s ease;
}
.nav-logo {
	border-bottom: none !important;
}
.modet-nav-right .modet-nav-middle ul {
	list-style: none;
}
.modet-nav li {
	list-style: none;
	margin: 0;
	font-size: 22px;
	font-weight: 300;
	line-height: 29px;
	padding: 0px 22px;
	transition: all .2s ease;
}
.middle-nav {
	margin: auto;
}
.modet-nav-middle {
	width: 100%;
}
.modet-nav-middle ul {
	display: flex;
	justify-content: center;
}
.modet-nav-right ul {
	display: flex;
	float: right;
}
.modet-nav-right li {
	float: right;
}
.modet-nav-right li:last-child {
	padding: 0px 0px 0px 22px;
}
.modet-nav a {
	margin: 0;
	color: #262626 !important;
	font-size: 22px !important;
	font-weight: 300;
	line-height: 29px;
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	transition: all .2s ease;
}
.home .modet-nav a {
	color: #FCF9F6 !important;
	transition: all .4s ease;
}
.current_page_item a {
	border-bottom: 2px solid #E76F0A;
}
.modet-nav a:hover {
	border-bottom: 2px solid #E76F0A;
	transition: all .2s ease;
}
.mobile-toggle {
	display: none;
}
.site-header.menu-invert {
	background-color: #FCF9F6;
	transition: all .4s ease;
	color: #262626 !important;
}
.menu-invert a {
	color: #262626 !important;
	transition: all .4s ease;
}
.menu-invert .modet-logo {
	max-width: 120px;
}
.home .menu-invert a {
	color: #262626 !important;
	transition: all .4s ease;
}
.menu-invert .modet-nav {
	margin-top: 0px;
}
.menu-invert a:hover {
	border-bottom: 2px solid #E76F0A;
}
.menu-invert.current_page_item a {
	border-bottom: 2px solid #262626;
}
.home .stst {
	fill: white;
	transition: all .4s ease;
}
.home .menu-invert .stst {
	fill: #E76F0A;
	transition: all .4s ease;
	transition-delay: 1.3s;
}
.site-header.menu-invert path.stst {
	fill: #E76F0A !important;
	transition: all .4s ease;
	transition-delay: .4s;
}
.site-header.menu-invert polygon.stst {
	fill: #E76F0A !important;
	transition: all .4s ease;
	transition-delay: .4s;
}
.stst {
	fill: #E76F0A;
	transition: all .4s ease;
	transition-delay: .4s;
}

/* End Desktop Menu */

/* Interim Font Adjust */

@media only screen and (max-width: 1159px) and (min-width: 1026px) {
	.menu-item a {
		font-size: 18px !important;
	}
}

/* End Interim Font Adjust */

/* Mobile Menu */

@media only screen and (max-width: 1025px) {
	#fader {
		background: #FCF9F6;
	}
	#navbar {
		padding: 30px 20px;
	}
	.site-header {
		width: 100%;
		max-width: 100% !important;
		background-color: #FCF9F6;
	}
	.home .site-header {
		background-color: transparent;
	}
	.modet-nav {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 0px;
		width: 100%;
		margin-top: 0px;
		display: block;
		overflow: hidden;
		transition: all .4s ease;
		background-color: #E76F0A;
		z-index: -5;
	}
	.modet-nav.open {
		height: 100vh;
		transition: all .4s ease;
	}
	.modet-logo {
		width: 100px;
		margin-left: 0px;
		margin-top: 0px;
		transition: all .4s ease;
	}
	.modet-nav-right .modet-nav-middle ul {
		list-style: none;
	}
	.modet-nav li {
		list-style: none;
		margin: 0;
		font-size: 22px;
		font-weight: 300;
		line-height: 29px;
		padding: 10px 22px;
		transition: all .2s ease;
		color: #FCF9F6;
		transform: translate(-20px, 0px);
		opacity: 0;
	}
	li.animate {
		transform: translate(0px, 0px);
		opacity: 1;
	}
	.modet-nav li a {
		color: white !important;
	}
	.home .modet-nav a {
		color: white!important;
	}
	.modet-nav.open li a {
		transition: all .4s ease;
		color: white !important;
	}
	.current_page_item a {
		border-bottom: 2px solid white;
	}
	.middle-nav {
		margin: auto;
	}
	.modet-nav-middle {
		margin-top: 55px;
		width: 100%;
		padding-left: 40px;
	}
	.modet-nav-middle ul {
		display: block;
		width: 100vw;
		justify-content: left;
		margin-top: 15vh;
	}
	.modet-nav-right ul {
		display: block;
		width: 100vw;
		justify-content: left;
		padding-left: 40px;
	}
	.modet-nav-right li {
		float: none;
	}
	.modet-nav-right li:last-child {
		padding: 10px 22px 10px 22px;
	}
	.modet-nav a {
		margin: 0;
		font-size: 22px;
		font-weight: 300;
		line-height: 29px;
		padding-bottom: 5px;
		transition: all .2s ease;
	}
	.modet-nav a:hover {
		border-bottom: none;
		transition: all .2s ease;
	}
	.mobile-toggle {
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 30px;
		right: 20px;
		border: none;
		padding: 0;
		outline: none;
	}
	button {
		color: transparent;
	}
	.bar {
		height: 2px;
		width: 30px;
	}
	.nav-icon-1 {
		margin-bottom: 6px;
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.nav-icon-2 {
		margin-bottom: 6px;
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.nav-icon-3 {
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.home .nav-icon-1 {
		margin-bottom: 6px;
		background: white;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.home .nav-icon-2 {
		margin-bottom: 6px;
		background: white;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.home .nav-icon-3 {
		background: white;
		transition: all .2s ease;
		transition-delay: .1s;
	}
	.home .menu-invert .nav-icon-1 {
		margin-bottom: 6px;
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .2s;
	}
	.home .menu-invert .nav-icon-2 {
		margin-bottom: 6px;
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .2s;
	}
	.home .menu-invert .nav-icon-3 {
		background: #E76F0A;
		transition: all .2s ease;
		transition-delay: .2s;
	}
	.nav-icon-1.active {
		background: #FCF9F6 !important;
		transform: translateY(8px);
		transition: transform .1s ease;
		transition-delay: 0s !important;
	}
	.nav-icon-2.active {
		background: #FCF9F6 !important;
		margin-bottom: 6px;
		transition: transform .1s ease;
		transition-delay: 0s !important;
	}
	.nav-icon-3.active {
		background: #FCF9F6 !important;
		transform: translateY(-8px);
		transition: transform .1s ease;
		transition-delay: 0s !important;
	}
	.mobile-toggle {
		transform: rotate(0deg);
		transition: all .6s ease;
		background-color: transparent;
		outline: none;
	}
	.mobile-toggle:focus {
		background-color: transparent;
		outline: none;
	}
	.mobile-toggle:hover {
		background-color: transparent;
		outline: none;
	}
	.mobile-toggle.open {
		transition: all .3s ease;
		background-color: transparent;
		outline: none;
	}
	.noscroll {
		overflow: hidden;
	}
	.site-header.menu-invert {
		background-color: #FCF9F6;
		transition: all .4s ease;
	}
	.site-header.menu-invert.mobile-active {
		background-color: #E76F0A;
		transition: all .2s ease;
	}
	.site-header.menu-invert.mobile-active path.stst {
		fill: #FCF9F6 !important;
		transition: all .4s ease;
	}
	.site-header.menu-invert.mobile-active polygon.stst {
		fill: #FCF9F6 !important;
		transition: all .4s ease;
	}
	.mobile-active .stst {
		fill: #FCF9F6 !important;
		transition: all .4s ease;
	}
	.stst {
		fill: #E76F0A;
		transition: all .4s ease;
		transition-delay: .4s;
	}
}

/* End Mobile Menu */