@charset "UTF-8";
/*  -------------------------------------------------- */
/*  ----- (((((( MOBILE :: screen < 768px )))))) ----- */
/*  -------------------------------------------------- */
/* ----- PRIMARY NAVIGATION ----- */
#navBOX {
	display: flex;
	flex-direction: column;
	height: 65px;
	width: 100vw;
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	background-color: rgba(var(--ccBlue), 0.9);
	border-bottom: 5px solid rgb(var(--ccAqua));
	transition: top 0.5s ease-out;
}
	/* BUTTONs only for screens <768px */
#menuBTN,
#closeBTN {
	position: absolute;
	color: rgb(var(--ccYellow));
	cursor: pointer;
	top: 20px;
	right: 20px;
	width: 20px;
	height: 20px;
}
#menuBTN {
	display: block;
	background-image: url("../images/btnHAMBURGER.svg");
}
#closeBTN {
	display: none;
	background-image: url("../images/btnCROSS.svg");
}
	/* mobile & primary navigating grounps */
#primaryNAV {display: none;}
#mobileNAV {
	transform: translate(0,-240px);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: auto;
	margin-bottom: auto;
}
#mobileNAV .p {
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1;
}
#mobileNAV button {
	display: block;
	width: auto;
	height: 40px;
	padding: 0 5vw;
	color: rgb(var(--ccYellow));
	cursor: pointer;
}
#mobileNAV button:focus,
#mobileNAV button:hover,
#mobileNAV button:active {
	box-shadow: 0 -3px 0 0 rgb(var(--ccRed)) inset;
	outline: none;
}

/* === BUTTON::BACK TO TOP === */
#upBTN {visibility: hidden;}

#upBTN a,
.upSVG {
	border: none;
	position: fixed;
	z-index: 9990;
	left: calc(100vw - 4.5rem);
	bottom: 5vh;
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
	background-color: transparent;
	box-shadow: 0 2px 10px -1px rgba(0,0,0,0.2);
}

/* ---------------------------------------------------- */
/*  ----- (((((( TABLET :: screen => 768px )))))) ----- */
/* ---------------------------------------------------- */
@media only screen and (min-width: 768px) {

	#navBOX {
		display: flex !important;
		flex-direction: column;
		height: 65px !important;
		width: 100vw !important;
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		background-color: rgba(var(--ccBlue), 0.9);
		border-bottom: 5px solid rgb(var(--ccAqua));
		transition: top 0.5s ease-out;
	}
	/* mobile navigation */
	#menuBTN,
	#closeBTN {display: none !important;}
	#mobileNAV {display: none;}

	/* primary navigation */
	#primaryNAV {
		transform: translate(0,0) !important;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 0;
		margin-bottom: 0;
	}
	#primaryNAV .p {
		font-weight: 600;
		font-size: 0.8rem;
		line-height: 1;
	}
	#primaryNAV button {
		display: block !important;
		width: auto;
		height: 65px;
		padding: 0 3ch;
		color: rgb(var(--ccYellow));
		cursor: pointer;
	}
	#primaryNAV button:focus,
	#primaryNAV button:hover,
	#primaryNAV button:active {
		background-color: rgba(var(--ccAqua), 0.2);
		box-shadow: 0 5px 0 0 rgb(var(--ccRed)) inset;
		outline: none;
	}

		/* dropdown list (ONLY "display" for SCREEN >768px) */
	.subNAV {position: relative;}
			/* pointing up ▲ and down ▼ symbols setup */
	._tab:before {
		content: "▲ ";
		font-size: 0.8rem;
	}
			/* the list setup */
	._dropdown button {text-align: left;}
	._dropdown {
		position: absolute;
		top: 60px;
		left: -5px;
		width: auto;

		display: none; /* initially set to hide */
		flex-direction: column !important;
		justify-content: center;
		background-color: rgba(var(--ccBlue), 0.9);
		border-left: 5px solid rgb(var(--ccAqua));
	}
		/* mouse over and focus effects on the list
		.subNAV:hover ._tab:before,.subNAV:hover ._dropdown,*/
	.subNAV:focus-within ._tab:before {content: "▼ ";}

	.subNAV:focus-within ._dropdown {display: flex;}
	.subNAV:not(.subNAV:focus-within) ._dropdown {display: none;}
}

/* ------------------------------------------------------ */
/*  ----- (((((( DESKTOP :: screen => 1100px )))))) ----- */
/* ------------------------------------------------------ */
@media only screen and (min-width: 1100px) {
	/* BUTTON::back to top */
	#upBTN a,
	.upSVG {
		left: calc(50vw + 500px - 3rem);
		bottom: 10vh;
	}
}