/* ==========================================================================
   ==========================================================================
   Aleck Plumbing
   ==========================================================================
   ========================================================================== */










/* ==========================================================================
   ==========================================================================
   Header
   ==========================================================================
   ========================================================================== */

.header {
    width: 100%;
    min-width: 375px;
	height: 137px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
	background-color: #fff;
    transition: transform .3s ease;
}

.header:before {
	width: 587px;
    height: 100%;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: #205de9;
	clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 100%, 0% 100%);
}

.header:after {
	width: 43.944rem;
    height: 100%;
	content: '';
	position: absolute;
	top: 0;
	left: 337px;
	z-index: 0;
	background-image: url("../img/content/stripe-dark-blue.svg");
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.header--hide {
    transform: translate3d(0,-100%,0);
}

@media (max-width:980px) {
    
    .header {
		height: 115px;
    }

	.header:before {
		width: 438px;
		clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 100%, 0% 100%);
	}

	.header:after {
		width: 35.944rem;
		left: 252px;
	}
}

@media (max-width:760px) {
    
    .header {
		height: 93px;
    }

	.header:before {
		width: 305px;
    	clip-path: polygon(0 0, calc(100% - 39px) 0, 100% 100%, 0% 100%);
	}

	.header:after {
		width: 28.944rem;
		left: 168px;
	}
}

.header__wrapper {
	padding-top: 43px;
    width: 100%;
	height: 100%;
    z-index: 10;
}

.header__wrapper:after {
	width: 37rem;
    height: 100%;
	content: '';
	position: absolute;
	top: 0;
	left: 337px;
	z-index: 2;
	background-image: url("../img/content/stripe-light-blue.svg");
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	opacity: 0.8;
	pointer-events: none;
}

@media (max-width:980px) {
    
    .header__wrapper {
		padding-top: 41px;
    }

	.header__wrapper:after {
		width: 28rem;
		left: 252px;
	}
}

@media (max-width:760px) {
    
    .header__wrapper {
		padding-top: 39px;
    }

	.header__wrapper:after {
		width: 23rem;
		left: 168px;
		z-index: 0;
	}
}

.header__row {
	padding: 0 50px;
    width: 100%;
	flex-wrap: wrap;
	display: flex;
}

.header__row:first-child {
    height: 43px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	align-content: center;
	justify-content: flex-end;
	background-color: #000;
}

.header__row:last-child {
    height: 100%;
	z-index: 3;
	align-content: center;
    justify-content: space-between;
}

@media (max-width:980px) {
    
    .header__row {
		padding: 0 35px;
    }
	
	.header__row:first-child {
    	height: 41px;
	}
}

@media (max-width:760px) {
    
    .header__row {
		padding: 0 25px;
    }
	
	.header__row:first-child {
    	height: 39px;
	}
}





/* ==========================================================================
   Logo
   ========================================================================== */

.header-logo {
    width: 237px;
    height: auto;
    z-index: 20;
    display: flex;
}

@media (max-width:980px) {
    
    .header-logo {
    	width: 187px;
    }
}

@media (max-width:760px) {
    
    .header-logo {
    	width: 137px;
    }
}

.header-logo__img {
    width: 100%;
	height: auto;
}





/* ==========================================================================
   Top Menu
   ========================================================================== */

.top-menu {
	width: 100%;
}

.top-menu__list {
	width: 100%;
    justify-content: flex-end;
	display: flex;
}

@media (max-width:760px) {
    
    .top-menu__list {
    	justify-content: center;
    }
}

.top-menu .menu-item {
	margin-left: 0.833rem;
	padding-left: 0.833rem;
	display: flex;
}

.top-menu .menu-item:first-child {
	margin-left: 0;
	padding-left: 0;
}

.top-menu .menu-item:not(:first-child):before {
	color: #fff !important;
	font-size: 0.75rem;
	line-height: 100%;
	font-weight: 400 !important;
	content: '|';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%,-50%);
}

.top-menu .menu-item:last-child {
	padding-right: 0;
}

.top-menu .menu-item--desktop-only {
	display: flex;
}

.top-menu .menu-item--mobile-only {
	display: none;
}

@media (max-width:1420px) {

	.top-menu .menu-item--cal {
		display: flex;
	}
}

@media (max-width:1420px) {

	.top-menu .menu-item--desktop-only {
		display: none;
	}

	.top-menu .menu-item--mobile-only {
		display: flex;
	}
}

.top-menu .menu-item a {
	color: #fff !important;
	font-size: 0.778rem;
	line-height: 100%;
	font-weight: 400 !important;
	text-decoration: none;
	align-items: center;
	display: flex;
}

.top-menu .menu-item--tel a:before,
.top-menu .menu-item--cal a:before {
	margin-right: 0.444rem;
	height: 0.833rem;
	content: '';
	display: flex;
	background-size: 100% auto;
	background-position: center left;
	background-repeat: no-repeat;
}

.top-menu .menu-item--tel a:before {
	width: 0.667rem;
	background-image: url("../img/content/phone-icon.svg");
}

.top-menu .menu-item--cal a:before {
	width: 0.861rem;
	background-image: url("../img/content/calendar-icon.svg");
}

.no-touch-device .top-menu .menu-item a:hover,
.top-menu .menu-item.current-menu-item a {
	text-decoration: underline;
}

@media (max-width:760px) {

	.top-menu .menu-item a {
		font-size: 0.889rem;
		font-weight: 600 !important;
	}
}

.top-menu .menu-item a span {
	display: flex;
}





/* ==========================================================================
   Main Menu
   ========================================================================== */


.main-menu {
    display: block;
}

@media (max-width:1420px) {

    .main-menu {
		padding: 7.083rem 50px;
		width: 100%;
		min-height: calc(100vh - 43px);
		position: fixed;
		top: 43px;
		left: 100%;
		overflow: scroll;
		background-color: #00257d;
		transition: left .4s ease;
    }

    .main-menu:after {
		width: 100%;
		height: 7.083rem;
		content: '';
		position: fixed;
		top: 43px;
		left: 100%;
		background: linear-gradient(180deg, rgba(0,37,125,1) 50%, rgba(0,37,125,0) 100%);
		transition: left .4s ease;
		pointer-events: none;
	}
	
	.touch-device .main-menu {
		min-height: calc(100vh - 43px);
		min-height: -webkit-fill-available;
	}

    .main-menu--open,
	.main-menu--open:after{
		left: 0;
	}
}

@media (max-width:980px) {

    .main-menu {
		padding: 7.083rem 35px;
		min-height: calc(100vh - 41px);
		top: 41px;
    }
	
	.touch-device .main-menu {
		min-height: calc(100vh - 41px);
		min-height: -webkit-fill-available;
	}

    .main-menu:after {
		top: 41px;
    }
}

@media (max-width:760px) {

    .main-menu {
		padding: 7.083rem 25px;
		min-height: calc(100vh - 39px);
		top: 39px;
    }
	
	.touch-device .main-menu {
		min-height: calc(100vh - 39px);
		min-height: -webkit-fill-available;
	}

    .main-menu:after {
		top: 39px;
    }
}

.main-menu__wrapper {
	width: 100%;
}

.main-menu__list {
	flex-wrap: wrap;
	align-items: center;
    justify-content: flex-end;
    display: flex;
}

.main-menu .menu-item {
	margin-left: 1.222rem;
	display: flex;
}

.main-menu .menu-item--alt {
	margin-left: 2.222rem;
}

.main-menu .menu-item:first-child {
    margin-left: 0;
}

.main-menu .menu-item--desktop-only {
	display: flex;
}

.main-menu .menu-item--mobile-only {
	display: none;
}

@media (max-width:1640px) {

	.main-menu .menu-item--alt {
		display: none;
	}
}

@media (max-width:1420px) {
	
	.main-menu .menu-item {
		margin: 0;
		width: 100%;
	}
	
	.main-menu .menu-item:not(:first-child) {
		margin-top: 1.5rem;
	}

	.main-menu .menu-item--desktop-only {
		display: none;
	}

	.main-menu .menu-item--mobile-only,
	.main-menu .menu-item--alt {
		display: flex;
	}
	
	.main-menu .menu-item--alt {
		margin-top: 1.667rem;
	}
	
	.main-menu .menu-item:not(.menu-item--alt) + .menu-item--alt {
		margin-top: 2.5rem;
	}
}

.main-menu .menu-item a {
	padding: 0.278rem 0;
    font-family: 'Open Sans', sans-serif;
    color: #00257d !important;
    font-size: 0.889rem;
    line-height: 100%;
    font-weight: 600 !important;
    text-decoration: none !important;
	align-items: center;
    display: flex;
}

.main-menu .menu-item--alt a {
	padding: 0 1.944rem;
	height: 2.778rem;
    color: #fff !important;
	background-color: #205de9;
	border-radius: 1.389rem;
	transition: background .4s ease;
}

.no-touch-device .main-menu .menu-item--alt a:hover,
.touch-device .main-menu .menu-item--alt a.touch-active {
	background-color: #0cadec;
}

.main-menu .menu-item:not(.menu-item--alt) a:before {
	width: 100%;
	height: 0.111rem;
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.278rem;
	background-color: #205de9;
	opacity: 0;
    transition: bottom .4s ease, opacity .4s ease;
	pointer-events: none;
}

.no-touch-device .main-menu .menu-item:not(.menu-item--alt) a:hover:before,
.touch-device .main-menu .menu-item:not(.menu-item--alt) a.touch-active:before,
.main-menu .menu-item.current-menu-item:not(.menu-item--alt) a:before {
	bottom: 0;
	opacity: 1;
}

@media (max-width:1420px) {

	.main-menu .menu-item a {
		padding: 0.5rem 0;
    	color: #fff !important;
		font-size: 1.75rem;
	}

	.main-menu .menu-item:not(.menu-item--alt) a:before {
		width: 100%;
		height: 0.208rem;
		content: '';
		position: absolute;
		left: 0;
		bottom: -0.5rem;
		background-color: #205de9;
		opacity: 0;
		transition: bottom .4s ease, opacity .4s ease;
		pointer-events: none;
	}

	.main-menu .menu-item--alt a {
		padding: 0 1.667rem;
		min-width: 17.5rem;
		height: 2.917rem;
		font-size: 0.917rem;
		justify-content: center;
		background-color: #0cadec;
		border-radius: 1.458rem;
	}

	.no-touch-device .main-menu .menu-item--alt a:hover,
	.touch-device .main-menu .menu-item--alt a.touch-active {
		background-color: #205de9;
	}

	.main-menu .menu-item--alt.menu-item--tel a:before,
	.main-menu .menu-item--alt.menu-item--cal a:before {
		margin-right: 0.444rem;
		height: 0.833rem;
		content: '';
		display: flex;
		background-size: 100% auto;
		background-position: center left;
		background-repeat: no-repeat;
	}

	.main-menu .menu-item--alt.menu-item--tel a:before {
		width: 0.667rem;
		background-image: url("../img/content/phone-icon.svg");
	}

	.main-menu .menu-item--alt.menu-item--cal a:before {
		width: 0.861rem;
		background-image: url("../img/content/calendar-icon.svg");
	}
}

@media (max-width:760px) {

	.main-menu .menu-item--alt a {
		font-size: 1rem;
	}
}






/* ==========================================================================
   Toggle Button
   ========================================================================== */

.main-menu__toggle-btn {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 50%;
    right: 50px;
    z-index: 999;
    display: none;
    transform: translateY(-50%);
}

@media (max-width: 1420px){

    .main-menu__toggle-btn {
        display: block;
    }
}

@media (max-width: 980px){

    .main-menu__toggle-btn {
    	right: 35px;
    }
}

@media (max-width: 760px){

    .main-menu__toggle-btn {
    	right: 25px;
    }
}

.main-menu__toggle-btn:before,
.main-menu__toggle-btn:after,
.main-menu__toggle-btn span {
    width: 100%;
    height: 0.083rem;
    position: absolute;
    left: 0;
    content: '';
    background-color: #00257d;
    transition: transform .4s ease, left .4s ease, top .4s ease, bottom .4s ease, background .4s ease, opacity .4s ease;
    will-change: transform, left, top, bottom, opacity;
}

.main-menu__toggle-btn--close:before,
.main-menu__toggle-btn--close:after,
.main-menu__toggle-btn--close span {
    background-color: #fff;
}

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

.main-menu__toggle-btn--close:before {
    top: 50%;
    transform: rotate(135deg);
}

.main-menu__toggle-btn:after {
    top: calc(50% + 0.333rem);
}

.main-menu__toggle-btn--close:after {
    top: 50%;
    transform: rotate(-135deg);
}

.main-menu__toggle-btn span {
    position: absolute;
    left: 0;
    top: 50%;
}

.main-menu__toggle-btn--close span {
    opacity: 0;
}