/* ==========================================================================
   ==========================================================================
   LEGACY RESIDENTIAL + D/G MARKETING
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   ==========================================================================
   Header
   ==========================================================================
   ========================================================================== */
.header {
	width: 100%;
	height: 100px;
	z-index: 999;
	background: rgba(8, 48, 94, .55);
	backdrop-filter: blur(0);
	transition: backdrop-filter .2s ease, background .2s ease;
}

.header--open {
	background: rgba(8, 48, 94, .95);
	backdrop-filter: blur(10px);
	transition: backdrop-filter .2s ease, background .3s ease;
}

.header:before {
	width: calc(4.5% + 200px);
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #f93526;
}

@media (max-width:980px) {
	.header {
		height: 80px;
	}
	
	.header:before {
		width: calc(6% + 175px);
	}
}

@media (max-width:760px) {
	.header {
		height: 60px;
	}
	
	.header:before {
		width: calc(5% + 150px);
		height: 4px;
	}
}

.header__wrapper {
	width: 100%;
	height: 100%;
}

@media (max-width:1200px) {
	.header--open .header__wrapper:before {
		height: 100vh;
	}
}

/* ==========================================================================
   Logo
   ========================================================================== */
.header__logo {
	width: 200px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 4.5%;
	z-index: 999;
	vertical-align: top;
	display: inline-block;
	transform: translateY(-50%);
}

@media (max-width:980px) {
	.header__logo {
		width: 175px;
		left: 6%;
	}
}

@media (max-width:760px) {
	.header__logo {
		width: 150px;
		left: 5%;
	}
}

.header__logo .header__logo-img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Main Menu
   ========================================================================== */
.menus {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
}

.menus__wrapper {
	width: 100%;
	height: 100%;
}

@media (max-width:1200px) {
	.menus {
		width: 100%;
		height: calc(100vh - 100px);
		top: 100px;
		left: 0;
		right: auto;
		transform: none;
		overflow: scroll;
		display: none;
	}
	
	.menus:before {
		width: 100%;
		height: calc(100vh - 100px);
		content: "";
		position: fixed;
		top: 100px;
		left: 0;
		background: #08305e;
		opacity: 0;
		transition: opacity .2s ease;
	}
	
	.menus--open:before {
		opacity: .95;
		transition: opacity .3s ease;
	}
	
	.menus__wrapper {
		transform: translateY(-20px);
		transition: transform .15s ease-in-out;
		transition-delay: 0s;
		will-change: transform;
	}
	
	.menus--open .menus__wrapper {
		transform: translateY(0);
		transition: transform .3s ease-in-out;
		transition-delay: .1s;
	}
}

@media (max-width:980px) {
	.menus {
		height: calc(100vh - 80px);
		top: 80px;
	}
	
	.menus:before {
		height: calc(100vh - 80px);
		top: 80px;
		left: 0;
	}
}

@media (max-width:760px) {
	.menus {
		height: calc(100vh - 60px);
		top: 60px;
	}
	
	.menus:before {
		height: calc(100vh - 60px);
		top: 60px;
	}
}

.main-menu {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.main-menu__wrapper {
	position: static;
}

@media (max-width:1200px) {
	.main-menu {
		padding-top: 15px;
		top: auto;
		left: auto;
		transform: none;
	}
}

@media (max-width:980px) {
	.main-menu {
		padding-top: 15px;
	}
}

.main-menu .main-menu__list {
	list-style: none;
	text-align: center;
	position: static;
	justify-content: center;
	display: flex;
}

@media (max-width:1200px) {
	.main-menu .main-menu__list {
		text-align: left;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

.main-menu .main-menu__list > .menu-item {
	padding: 0 13px;
	position: static;
}

@media (max-width:1200px) {
	.main-menu .main-menu__list > .menu-item {
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
		display: block;
		opacity: 0;
		transition: opacity .15s ease-in-out;
		will-change: opacity;
	}
	
	.menus--open .main-menu .main-menu__list > .menu-item {
		opacity: 1;
		transition: opacity .3s ease-in-out;
	}
	
	.menus--open .main-menu .main-menu__list > .menu-item:nth-child(1) {
		transition-delay: .1s;
	}
	
	.menus--open .main-menu .main-menu__list > .menu-item:nth-child(2) {
		transition-delay: .15s;
	}
	
	.menus--open .main-menu .main-menu__list > .menu-item:nth-child(3) {
		transition-delay: .2s;
	}
	
	.menus--open .main-menu .main-menu__list > .menu-item:nth-child(4) {
		transition-delay: .25s;
	}
	
	.main-menu .main-menu__list > .menu-item:first-child {
		margin-top: 0 !important;
	}
}

@media (max-width:760px) {
	.main-menu .main-menu__list > .menu-item {
		margin: 0 !important;
	}
}

.main-menu .main-menu__list > .menu-item > a {
	padding: 10px 5px;
	color: #fff !important;
	font-size: 14px;
	line-height: 100%;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none !important;
	display: block;
}

.main-menu .main-menu__list > .menu-item > a:before {
	width: 0;
	height: 2px;
	content: "";
	position: absolute;
	left: 0;
	top: calc(100% - 5px);
	background: #f93526;
	transform: translateY(-50%);
	transition: width .3s ease-in-out;
	will-change: width;
}

.no-touch-device .main-menu .main-menu__list > .menu-item.menu-item--current > a:before, .no-touch-device .main-menu .main-menu__list > .menu-item > a:hover:before {
	width: 100%;
}

@media (max-width:1200px) {
	.main-menu .main-menu__list > .menu-item > a {
		padding: 25px 18% !important;
		font-size: 22px;
	}
	
	.main-menu .main-menu__list > .menu-item > a:before {
		display: none;
	}
	
	.main-menu .main-menu__list > .menu-item > a:after {
		width: calc(100% - 36%);
		height: 1px;
		content: "";
		position: absolute;
		left: 18%;
		bottom: -.5px;
		background: #335695;
		opacity: 1;
		transition: opacity .3s ease-in-out;
		will-change: opacity;
	}
	
	.main-menu .main-menu__list > .menu-item.menu-item--current > a:after {
		opacity: 0;
	}
}

@media (max-width:980px) {
	.main-menu .main-menu__list > .menu-item > a {
		padding: 25px 12% !important;
		font-size: 22px;
	}
	
	.main-menu .main-menu__list > .menu-item > a:after {
		width: calc(100% - 24%);
		left: 12%;
	}
}

@media (max-width:760px) {
	.main-menu .main-menu__list > .menu-item > a {
		padding: 25px 10% !important;
		font-size: 22px;
	}
	
	.main-menu .main-menu__list > .menu-item > a:after {
		width: calc(100% - 20%);
		left: 10%;
	}
}

.main-menu__list > .menu-item > a span {
	display: block;
}

/* Sub Menu
   ========================================================================== */
.main-menu .sub-menu__list {
	width: 100%;
	justify-content: center;
	position: absolute;
	top: 67px;
	left: 0;
	display: flex;
	background: #f93526;
}

@media (max-width: 1200px) {
	.main-menu .sub-menu__list {
		padding: 10px calc(18% - 5px);
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		top: auto;
	}
}

@media (max-width: 980px) {
	.main-menu .sub-menu__list {
		padding: 10px calc(12% - 5px);
	}
}

@media (max-width: 760px) {
	.main-menu .sub-menu__list {
		padding: 10px calc(10% - 5px);
	}
}

.main-menu .sub-menu__list > .menu-item {
	padding: 15px;
	opacity: 0;
	transform: translateY(-10px);
	transition: transform .15s, opacity .15s;
	transition-delay: 0s;
	will-change: transform, opacity;
}

.main-menu .sub-menu__list--open > .menu-item {
	opacity: 1;
	transform: translateY(0);
	transition: transform .3s, opacity .3s;
	transition-delay: .15s;
}

@media (max-width: 1200px) {
	.main-menu .sub-menu__list > .menu-item {
		padding: 2.5px 0;
		width: 33.33%;
	}
}

@media (max-width: 980px) {
	.main-menu .sub-menu__list > .menu-item {
		padding: 2.5px 0;
		width: 33.33%;
	}
}

@media (max-width: 760px) {
	.main-menu .sub-menu__list > .menu-item {
		width: 50%;
	}
}

.main-menu .sub-menu__list > .menu-item > a {
	padding: 10px 5px;
	color: #fff !important;
	font-size: 14px;
	line-height: 100%;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none !important;
	display: block;
}

@media (max-width: 980px) {
	.main-menu .sub-menu__list > .menu-item > a {
		padding: 10px 5px;
	}
}

.main-menu .sub-menu__list > .menu-item > a > span {
	display: block;
}

/* ==========================================================================
   Secondary Menu
   ========================================================================== */
.secondary-menu {
	position: absolute;
	top: 50%;
	right: 4.5%;
	transform: translateY(-50%);
}

@media (max-width:1200px) {
	.secondary-menu {
		padding: 28px 18% 40px;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
	}
	
	.secondary-menu .main-menu__list > .menu-item {
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
		display: block;
		opacity: 0;
		transition: opacity .15s ease-in-out;
		will-change: opacity;
	}
	
	.menus--open .secondary-menu .main-menu__list > .menu-item {
		opacity: 1;
		transition: opacity .3s ease-in-out .25s;
	}
}

@media (max-width:980px) {
	.secondary-menu {
		padding: 28px 12% 40px;
	}
}

@media (max-width:760px) {
	.secondary-menu {
		padding: 28px 10% 40px;
	}
}

.secondary-menu .main-menu__list > .menu-item > a {
	padding: 15.5px 15px;
	color: #fff !important;
	font-size: 14px;
	line-height: 100%;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none !important;
	display: block;
	background: #f93526;
	transition: color .3s ease-in-out, background .3s ease-in-out;
	will-change: color, background;
}

.no-touch-device .secondary-menu .main-menu__list > .menu-item > a:hover {
	color: #f93526 !important;
	background: #fff;
}

@media (max-width:1200px) {
	.secondary-menu .main-menu__list > .menu-item > a {
		vertical-align: top;
		display: inline-block;
	}
}

/* ==========================================================================
   Toggle Button
   ========================================================================== */
.main-menu__toggle-btn {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	right: calc(4.5% - 12.5px);
	z-index: 20;
	transform: translateY(-50%);
	display: none;
}

@media (max-width:1200px) {
	.main-menu__toggle-btn {
		display: block;
	}
}

@media (max-width:980px) {
	.main-menu__toggle-btn {
		right: calc(6% - 12.5px);
	}
}

@media (max-width:760px) {
	.main-menu__toggle-btn {
		right: calc(5% - 12.5px);
	}
}

.main-menu__toggle-btn:before, .main-menu__toggle-btn:after {
	width: 25px;
	height: 1px;
	position: absolute;
	left: 50%;
	content: "";
	background: #fff;
	transform: translateX(-50%);
	transition: transform .3s ease, width .3s ease, left .3s ease, top .3s ease, bottom .3s ease, opacity .3s ease, background .3s ease;
	will-change: transform, left, top, bottom, opacity, background;
}

.main-menu__toggle-btn:before {
	top: calc(50% - 5px);
}

.main-menu__toggle-btn--close:before {
	width: 22px;
	top: calc(50% - .5px) !important;
	transform: translateX(-50%) rotate(135deg);
}

.main-menu__toggle-btn:after {
	bottom: calc(50% - 5px);
}

.main-menu__toggle-btn--close:after {
	width: 22px;
	bottom: calc(50% - .5px) !important;
	transform: translateX(-50%) rotate(-135deg);
}