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

#global-header {
	position: relative;
	width: 100%;

	.logo {
		//float: left;
		//margin-top: 30px;
		width:150px;

		/*@include media-breakpoint-down(sm) {
			margin-top: 10px;
		}*/

		img {
			width: auto;
			height:53px;
			@include media-breakpoint-down(sm) {
				height:48px;
			}

		}

	}

	.menu-bar {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;


		background: $grey-94;
		width: 100%;
		height: 110px;

		& > .container-fluid{
			padding:0 40px;
			height:100%;
			& > .clearfix{
				height:100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:after{
					display:none;
				}
			}
			@include media-breakpoint-down(md) {
				padding: 0 20px;
			}
			@include media-breakpoint-down(sm) {
				padding: 0 15px;
			}
		}

		@include media-breakpoint-down(md) {
			height: 90px;
		}

		@include media-breakpoint-down(sm) {
			height: 70px;
		}
		/* The sticky class is added to the header with JS when it reaches its scroll position */
		&.sticky {
		}

		/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
		& + .billboard-container {
			margin-top: 110px;
			@include media-breakpoint-down(md) {
				margin-top: 90px;
			}

			@include media-breakpoint-down(sm) {
				margin-top: 70px;
			}
		}
	}

	.book-now {
		display: inline-block;
		font: 600 1.6rem "calibri",sans-serif;
		background: $light-blue;
		color: white;
		margin-left: 30px;
		color: white;
		padding: 6px 30px;
		border-radius: 8px;
		text-transform: uppercase;
	}


	.billboard-container {
		.billboard {
			position: relative;
			width: 100%;
			height: calc(66.6666666667vh - 130px);
			overflow: hidden;
			&.contains-secondary {
				padding-bottom: 135px;
			}
			&.small-billboard {
				&:before {
					background: $light-blue !important;
				}
				height: 130px !important;
				@include media-breakpoint-down(md) {
					height: 120px !important;
				}

				@include media-breakpoint-down(sm) {
					height: 80px !important;
				}
			}

			@media (max-height: $screen-height-md) {
				height: calc(75vh - 130px);
			}

			@media (max-height: $screen-height-sm) {
				height: calc(60vh - 70px);
			}

			@media (max-height: $screen-height-xs) {
				// height: calc(100vh - 130px);
			}

			&.image-bg {

				&:before {
					content: "";
					position: absolute;
					background: url("../../dist/images/billboard.jpg") 50% 50%;
					background-size: cover;
					width: 100%;
					height: 100%;
					animation: billboard-zoom normal forwards 1.5s ease;
				}

			}

			.overlay {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				z-index: 100;

				article {
					text-align: center;
					width: 100%;
					z-index: 50;

					h1 {
						color: white;
						margin: 0;
					}

				}

				&.cursive {
					justify-content: center;

					article {
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 20px 40px;
						animation: floatInUp normal forwards 1s ease;
						animation-delay: .5s;
						opacity: 0;

						h1 {
							@include font-mixin(italic 600, 73, 1.272, $font-heading-alt);
							text-shadow: 0 5px 5px rgba(0,0,0,.4);
							text-transform: none;

							@include media-breakpoint-down(md) {
								@include font-mixin(italic 600, 55, 1.272, $font-heading-alt);
							}

							@include media-breakpoint-down(sm) {
								@include font-mixin(italic 600, 42, 1.272, $font-heading-alt);
							}

						}

						@include media-breakpoint-down(sm) {
							margin-bottom: 15%;
						}

					}

					&.internal {
						padding-bottom: 140px;

						@include media-breakpoint-down(lg) {
							padding-bottom: 120px;
						}

						@include media-breakpoint-down(md) {
							padding-bottom: 100px;
						}

						@include media-breakpoint-down(sm) {
							padding-bottom: 0;
						}

					}

				}

				&.standard {
					justify-content: top;

					article {
						display: flex;
						flex-direction: column;
						justify-content: center;
						background: $light-blue;
						min-height: 140px;
						padding: 20px 40px;
						transform: translate3d(0, -100%, 0);
						animation: slideInDown normal forwards 1s ease;
						animation-delay: .5s;

						@media (max-height: $screen-height-md) {
							min-height: 120px;
							padding: 20px 40px;
						}

						@include media-breakpoint-down(md) {
							min-height: 120px;
							padding: 20px 30px;
						}

						@include media-breakpoint-down(sm) {
							min-height: 70px;
							padding: 20px;
							h1{font-size: 2.8rem;}
						}

					}

				}

			}
			.top-bar{
				position: relative;
				top: 0;
				left: 0;
				z-index: 1;
				width:100%;
				text-align: center;
				text-transform: uppercase;
				letter-spacing: 2px;
				color:white;
				background-color: $navy;
				padding: 0.5rem 0;
                font-weight: bold;
				@include media-breakpoint-down(sm) {
					font-size: 4vw;
				}
			}

		}
		.secondary-nav {
			position: absolute;
			bottom: 0;
			z-index: 100;
			width: 100%;
			background: transparentize(#70CDE4, 0.3);
			ul {
				display: flex;
				justify-content: space-between;
				@include clearlist;
				li {
					background: $aqua;
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					&:nth-child(1) { background: #00BDC8; }
					&:nth-child(2) { background: #70CDE4; }
					&:nth-child(3) { background: #70CDCA; }
					&:nth-child(4) { background: #00BDC8; }
					&:nth-child(5) { background: #70CDE4; }
					&:nth-child(6) { background: #70CDCA; }
					&:nth-child(7) { background: #70CDE4; }
					a {
						color: white;
						text-transform: uppercase;
						padding: 50px 0;
						display: block;
						line-height: 1.2;
						@include font-size-mixin(21);
						@include media-breakpoint-down(md) {
							font-size: 1.6rem;
						}
					}
					&.current_page_item a{
						font-weight: bold;
					}
				}
			}
			&.booking {
				.warning {
					border: 2px solid red !important;
				}
				ul {
					li {
						padding: 20px 10px;
						display: flex;
						justify-items: center;
						align-items: center;
						width:17.5%;
						&.short{width:10%;}
						.field-container {
							width: 100%;
						}
						select {
							margin: 0;
						}
						label {
							@include font-size-mixin(16);
							color: white;
							text-align: left;
							margin-bottom: 15px;
						}
						input {
							margin: 0;
						}
					}
				}
			}
			.secondary-select {
				padding: 20px;
				position: absolute;
				bottom: 0;
				z-index: 100;
				width: 100%;
				background: $aqua;
			}
		}
		@include media-breakpoint-down(sm) {
			.billboard.contains-secondary {
				padding-bottom: 0;
			}
			.secondary-nav {
				position: relative;
				ul {
					flex-wrap: wrap;
					li {
						background: $aqua !important;
					}
				}
				&.booking {
					ul {
						li {
							padding: 10px 20px 0;
							width:100%!important;
							label {
								@include font-size-mixin(14);
								margin-bottom: 10px;
							}
							&.search-btn {
								padding-top: 15px;
								padding-bottom: 15px;
								label {
									display: none;
								}
								.btn {
									background: $navy;
									color: white;
								}
							}
						}
					}
				}
			}
		}

	}

}

.menu-btn {
	vertical-align: middle;
	padding: 25px 0;
	line-height: 0;
	margin-top: 0;
	float: right;
	#toggle-menu-btn {
		@include hamburger($width: 26px, $thickness: 2px, $gap: 6px, $color: $navy, $tint_text: true, $anim: cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.33s);
		&:hover {
			@include hamburger_tint($color: $aqua, $tint_text: true);
		}
		.menu-active &,
		&:checked {
			@include hamburger_tint($color: $aqua, $tint_text: true);
			&:hover {
				@include hamburger_tint($color: $aqua, $tint_text: true);
			}
		}
	}
}

.mm-spn {
	&.mm-spn--light {
		background: $navy;
		color: white;
		// --mm-spn-item-height: 90px;
		// --mm-ocd-max-width: 500px;
	}
	&.mm-spn--navbar {
		&:before { // arrow on left
			z-index: 100;
			opacity: 1;
			top: calc(70px / 2);
		}
		&:after {
			display: none;
			@include font-mixin(400, 18, 1.1, $font-heading);
			// text-transform: uppercase;
			background: $navy;
			opacity: 1;
			line-height: 70px;
			height: 70px;

			// color: $mm_textColor !important;


		}
		&.mm-spn--main::after {
			/*text-transform: uppercase;*/
		}
		ul {
			top: 70px + 1;
			&:before {
				display: none;
			}
		}
	}
	ul {
		background: $navy;
	}
	li {
		&:hover {
			background: $aqua;
		}
		&:before { // arrow on right
			opacity: 1;
		}
		&:after { // border-top
			border-top: none;
		}
		&.menu-item-has-children { // disable click on parent
			> a {
				pointer-events: none;
			}
		}
	}
	a:not(:last-child)::after {
		border: none; // border under navbar
	}
	a.mobile-menu-close { // close button
		position: absolute;
		right: 12px;
		right: 20px;
		top: 12px;
		top: calc((70px - 25px) / 2);
		width: 25px;
		height: 25px;
		opacity: 1;
		cursor: pointer;
		z-index: 200;
		padding: 0;
		background: none;
		&:before,
		&:after {
			position: absolute;
			left: 12.5px;
			content: ' ';
			height: 25px;
			width: 2px;
			opacity: 1;
			background-color: white;
		}
		&:before {
			transform: rotate(45deg);
		}
		&:after {
			transform: rotate(-45deg);
		}
	}
}

.mm-ocd--open .mm-spn {
	ul.mobile-menu {
		&:not(.mm-spn--parent) {
			> li {
				opacity: 0;
				display: none;
				animation: floatInDown .15s ease forwards;
				// animation-delay: .15s;
				@for $i from 1 to 20 {
					&:nth-child(#{$i}) { animation-delay: $i * 0.05s; }
				}
			}
		}
		&.mm-spn--open:not(.mm-spn--parent) {
			> li {
				display: block;
			}
		}
		&.mm-spn--parent .mm-spn--open .mm-spn--open > li{
			    opacity: 0;
				display: none;
				animation: floatInDown .15s ease forwards;
				// animation-delay: .15s;
				@for $i from 1 to 20 {
					&:nth-child(#{$i}) { animation-delay: $i * 0.05s; }
				}
		}
		&.mm-spn--parent .mm-spn--open .mm-spn--open > li{
				display: block;
		}
	}
}