/* ------ Header ------ */

.header {
	background-color: #fff;
	border-bottom: 1px solid #ededed;
	position: absolute;
	width: 100%;
	z-index: 20;
	top: 0;
}

.header-inner {
	max-width: 1440px !important;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 100px;
}

.header .logo {
	display: block;
	float: left;
	padding: 0px 38px 6px 0;
	text-decoration: none;
	width: 270px;
	z-index: 3;
}

.header .logo img {
	z-index: 3;
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #fff;
}

.header li a {
	display: block;
	padding: 0;
	text-decoration: none;
}

.header li {
	display: block;
	margin: 20px 34px 0 40px;
	text-decoration: none;
}

.header .logo,
.header.transparent .logo {
	display: block;
	float: left;
	font-size: 2em;
	padding: 10px 20px;
	text-decoration: none;
	margin-left: -3px;
	z-index: 3;
}


/* ------ Light Header ------ */

.header.transparent {
	background-color: transparent !important;
	border-bottom: 1px solid #ffffff30;
	position: absolute;
	width: 100%;
	z-index: 20;
	top: 0;
}

.header.transparent .logo {
	display: block;
	float: left;
	font-size: 2em;
	padding: 10px 20px;
	text-decoration: none;
	margin-left: -3px;
	z-index: 3;
	position: absolute;
}

.header.transparent li {
	display: block;
	margin: 20px 34px 0 40px;
	text-decoration: none;
}

.header.transparent .menu li a {
	color: #fff;
	opacity: .94;
}

.header.transparent .menu li a:hover {
	color: #fff;
	opacity: 1;
}

.header.transparent .social-menu i {
	font-size: 24px;
	margin-right: 24px;
	color: #fff;
}

.header .mailto a i {
  font-size: 24px;
  margin-top: -3px;
}

/* hedaer menu icon */

.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 50px 30px 28px 20px;
	;
	position: relative;
	user-select: none;
	z-index: 3;
}

.header .menu-icon .navicon {
	background: #333;
	display: block;
	height: 3px;
	position: relative;
	transition: background .2s ease-out;
	width: 28px;
	position: absolute;
	z-index: 3;
	right: 30px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.header .menu-icon .navicon:before {
	top: 8px;
}

.header .menu-icon .navicon:after {
	top: -8px;
}


/* ------ Header Menu ------ */

.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
	text-align: right;
	margin-right: 38px;
	padding-top: 24px;
	margin-bottom: -1px;
	background: transparent;
}

.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

.header .menu li.active {
	border-bottom: 1px solid #65A7BD;
	padding-bottom: 36px;
}

.header .menu li.active-green {
	border-bottom: 1px solid #2A73B8;
	padding-bottom: 36px;
}

.social-menu,
.social-menu.light {
	display: none;
}

.header.transparent .menu-icon .navicon {
	background: #fff;
}

.header.transparent .menu-icon .navicon:before,
.header.transparent .menu-icon .navicon:after {
	background: #fff;
}

.header.transparent .menu-btn:checked~.menu {
	max-height: 100vh;
	background: #125E8A !important;
	height: 100vh;
	width: 100%;
	text-align: left;
	padding-top: 163px;
	position: absolute;
	top: 0;
}


/* ------ Menu Button ----- */

.header .menu-btn {
	display: none;
}

.header .menu-btn:checked~.menu {
	max-height: 100vh;
	background: rgba(255, 255, 255, 1);
	height: 100vh;
	width: 100%;
	text-align: left;
	padding-top: 60px;
	position: absolute;
	top: 103px;

}

.header .menu-btn:checked~.menu-icon .navicon {
	background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
	transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
	transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
	top: 0;
}




/* ------ Media Queries ------ */

@media (min-width: 992px) {
	.header li,
	.header.transparent li {
		float: left;
	}
	.header li a {
		font-weight: 500;
		letter-spacing: .8px;
		font-size: 14px;
		color: #1d1d1d;
		display: block;
	}
	.header.transparent li a {
		font-weight: 500;
		letter-spacing: .8px;
		font-size: 14px;
		color: #fff;
		display: block;
	}
	.header .menu,
	.header.transparent .menu {
		clear: none;
		float: right;
		max-height: none;
		margin-top: 0;
		z-index: 9999;
	}
	.header .menu-icon,
	.header.transparent .menu-icon {
		display: none !important;
	}


}


@media (max-width: 991px) {



	.social-menu {
		position: absolute;
		bottom: 243px;
		left: 24px;
	}
	.header.transparent .social-menu {
		position: absolute;
		bottom:143px;
		left: 24px;
	}
	.social-menu.light i {
		font-size: 28px;
		margin-right: 36px;
		color: #fff;
	}
	.social-menu i {
		font-size: 24px;
		margin-right: 24px;
		color: #1d1d1d;
	}
	.header .menu li.active,
	.header .menu li.active-green {
		border-bottom: 0 solid #fff;
		padding-bottom: 18px;
	}
	.header .menu-btn:checked~.menu .social-menu,
	.header .menu-btn:checked~.menu .mailto {
		display: block;
	}
	.header .menu li.active a {
		color: #2478B5;
	}
	.header .menu li.active-green a {
		color: #2A73B8;
	}
	.header .menu li {
		padding-bottom: 18px;
	}
	.header li {
		margin: 20px 30px 0 30px !important;
	}
	.header li a {
		font-weight: 800;
		letter-spacing: 1.2px;
		font-size: 28px;
		color: #1d1d1d;
	}
	.header li a:hover {
		color: #2478B5;
	}
	.header li.mailto {
		position: absolute;
		bottom: 225px;
		right: 3px;
		display: none;
	}


	.header.transparent li.mailto {
		position: absolute;
		bottom: 125px;
		right: 3px;
		display: none;
	}
	.header li.mailto i {
		font-size: 28px ;

	}

	.header,
	.header.transparent {
		z-index: 20px;
		position: fixed;
		-webkit-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 0.04);
		-moz-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 0.04);
		box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 0.04);
	}
	.header.transparent {
		border-bottom: 0 !important;
		background: #125E8A !important;
	}
	.header .menu {
		transition: none;
		text-align: left;
	}
}