/* ----------------------------------------------------------------
Variables
---------------------------------------------------------------- */

:root { --brand-colour: #00b0b9; }

/*
00aec7
00bfb3
*/

/* ----------------------------------------------------------------
HEADER > 
---------------------------------------------------------------- */

.header {
	position: fixed;
	width: 100%;
	background-color: #212322;
	top: 0;
	z-index: 2;
}

.scroll .header {
	background-color: rgba(0,0,0,0.8);
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header li .icon-open,
.header li .icon-close {
	height: 1rem;
	max-width: 1.25rem;
	vertical-align: top;
}

.nav-click .icon-open,
.enquiry-click .icon-open {
	color: var(--brand-colour);
	fill: var(--brand-colour);
}

@media (hover: hover) and (pointer: fine) {
    
	.nav-click:hover .icon-open,
	.enquiry-click:hover .icon-open {
		color: #212322;
		fill: #212322;
	}
}

.nav-open .nav-click .icon-close,
.enquiry-open .enquiry-click .icon-close {
	color: #212322;
	fill: #212322;
}

.nav-toggle,
.enquiry-toggle {
	flex: 0 1 0;
	min-width: 140px;
	transition: 0.5s;
}

.nav-toggle {
	text-align: left;
}

.enquiry-toggle {
	text-align: right;
}

.nav-click,
.enquiry-click {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
	padding: 17px;
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    
	.nav-click:hover,
	.enquiry-click:hover {
		color: #212322;
		background-color: #fff;
	}
}

.nav-open .nav-click,
.enquiry-open .enquiry-click {
	color: #212322;
	background-color: #fff;
}

.nav-click .nav-text,
.nav-click .nav-close,
.enquiry-click .nav-text,
.enquiry-click .nav-close {
	display: inline-block;
	vertical-align: top;
	line-height: 1;
	padding-left: 5px;
}
/*
.enquiry-click .nav-text {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	from { opacity: 1.0; }
	50% { opacity: 0.5; }
	to { opacity: 1.0; }
}
*/
.nav-click .icon-close,
.nav-click .nav-close,
.nav-open .nav-click .icon-open,
.nav-open .nav-click .nav-text,
.enquiry-click .icon-close,
.enquiry-click .nav-close,
.enquiry-open .enquiry-click .icon-open,
.enquiry-open .enquiry-click .nav-text {
	display: none;
}

.nav-open .nav-click .icon-close,
.nav-open .nav-click .nav-close,
.enquiry-open .enquiry-click .icon-close,
.enquiry-open .enquiry-click .nav-close {
	display: inline-block;
}



/* ----------------------------------------------------------------
LOGO 
---------------------------------------------------------------- */

.logo {
	flex: 1 0 0;
	text-align: center;
}

.logo-click {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 7px 5px;
}

.logo-click svg {
	color: #fff;
	fill: #fff;
}

.logo-click:hover svg {
	color: var(--brand-colour);
	fill: var(--brand-colour);
}

.logo-image {
	display: block;
	width: auto;
	height: 36px;
	transition: 0.5s;
}


/* ----------------------------------------------------------------
NOTICE 
---------------------------------------------------------------- */

.notice {
	display: none;
	background-color: #fff;
}

.notice-show {
	display: block;
}

@media (max-width:1023px) {
	.nav-open .notice-show,
	.enquiry-open .notice-show {
		display: none;
	}
}

.notice-message {
	padding: .5rem 3rem;
	text-align: center;
	position: relative;
	min-height: 2rem;
	font-size: 0;
}

.notice-red { background-color: #df4661; }
.notice-green { background-color: #78aa43; }
.notice-blue { background-color: var(--brand-colour); }

.notice-text {
	display: inline-block;
	vertical-align: top;
	font-size: .875rem;
	line-height: 1rem;
	color: #fff;
}

.notice-click {
	padding: .5rem;
	width: 2rem;
	height: 2rem;
	position: absolute;
	right: 0;
	top: 0;
	text-align: center;
}

.notice-click .icon-close {
	display: inline-block;
	height: 1rem;
	max-width: 1rem;
	vertical-align: top;
	color: #fff;
	fill: #fff;
}



/* ----------------------------------------------------------------
481 > 
---------------------------------------------------------------- */

@media (min-width:481px) {
	
}



/* ----------------------------------------------------------------
768 >
---------------------------------------------------------------- */

@media (min-width:768px) {
	
	.logo a {
		padding: 20px 10px;
	}
	
	.scroll .logo a {
		padding: 7px 5px;
	}
	
	.logo-image {
		height: 60px;
	}
	
	.scroll .logo-image {
		height: 36px;
	}
	
	.nav-toggle,
	.enquiry-toggle {
		min-width: 200px;
	}
	
	.scroll .nav-toggle,
	.scroll .enquiry-toggle {
		min-width: 140px;
	}
	
	.nav-click,
	.enquiry-click {
		padding: 40px 42px;
	}
	
	body:not(.scroll) .nav-click .nav-text,
	body:not(.scroll) .nav-click .nav-close,
	body:not(.scroll) .enquiry-click .nav-text,
	body:not(.scroll) .enquiry-click .nav-close {
		font-size: 20px;
		line-height: 20px;
	}
	
	body:not(.scroll) .header li.nav-toggle .icon-open,
	body:not(.scroll) .header li.nav-toggle .icon-close,
	body:not(.scroll) .header li.enquiry-toggle .icon-open,
	body:not(.scroll) .header li.enquiry-toggle .icon-close {
		height: 20px;
	}
	
	.scroll .nav-click,
	.scroll .enquiry-click {
		padding: 17px;
	}
	
}



/* ----------------------------------------------------------------
1024 > 
---------------------------------------------------------------- */

@media (min-width:1024px) {
	 
}


/* ----------------------------------------------------------------
1280 >
---------------------------------------------------------------- */

@media (min-width:1280px) {
	
}



/* ----------------------------------------------------------------
1920 >
---------------------------------------------------------------- */

@media (min-width:1920px) {
	
	.nav-click,
	.enquiry-click {
		color: #212322;
		background-color: #fff;
		cursor: not-allowed;
	}
	
	.nav-click .icon-open,
	.enquiry-click .icon-open {
		color: #212322;
		fill: #212322;
	}
	
	.nav-open .nav-click .icon-close,
	.nav-open .nav-click .nav-close,
	.enquiry-open .enquiry-click .icon-close,
	.enquiry-open .enquiry-click .nav-close {
		display: none;
	}
	
	.nav-open .nav-click .icon-open,
	.nav-open .nav-click .nav-text,
	.enquiry-open .enquiry-click .icon-open,
	.enquiry-open .enquiry-click .nav-text {
		display: inline-block;
	}
	
}