/* ==========================================================================
	Content
   ========================================================================== */

#main {

	a {
		// @include word-wrap(break-word);
		position: relative;
		color: $aqua;
		box-shadow: 0 2px 0 transparent;
		padding-bottom: 6px;
		transition: all .25s ease;

		&:hover {
			text-decoration: none;
			color: $aqua;
			box-shadow: 0 2px 0 $aqua;
			padding-bottom: 2px;
		}

		&.clear {
			@include clearlink;
		}

	}

	small {
		display: block;
		@include font-mixin(600, 16, 1.618, $font-body);
		margin-bottom: 5px;
		text-transform: uppercase;
		color: $grey-light;
	}

	.small {
		font-size: 80%;
	}

	mark {
		color: white;
		background-color: $aqua;
		padding: 0 2px;
	}

	ul {
		position: relative;
		margin: 0 0 30px;
		padding-left: 20px;

		@include media-breakpoint-down(sm) {
			margin-bottom: 20px;
		}

		&.clearlist {
			@include clearlist;
		}

		li {
			@include font-mixin(400, 16, 1.618, $font-body);
			/*letter-spacing: 0.01em;*/
			list-style: none;
			margin-bottom: 5px;

			&:before {
				display: block;
				position: absolute;
				content: "\f105";
				@include font-mixin(400, 16, 1.618, $fontawesome);
				text-align: center;
				color: $grey-55;
				margin: 0 0 0 -20px;
				border-radius: 10px;
				background: transparent;
			}

			&:after {
				margin-bottom: 0;
			}

			ul {
				margin: 5px 0;

				li {
					@include font-mixin(400, 16, 1.618, $font-body);
					margin-bottom: 5px;

					li {
						margin-bottom: 10px;
					}

				}

			}

		}

	}

	ol {
		position: relative;
		counter-reset: li;
		list-style: none;
		margin: 0 0 30px;
		padding-left: 32px;

		@include media-breakpoint-down(sm) {
			padding-left: 40px;
			margin-bottom: 20px;
		}

		li {
			@include font-mixin(400, 16, 1.618, $font-body);
			/*letter-spacing: 0.01em;*/
			list-style: none;
			margin-bottom: 5px;

			&:before {
				display: block;
				position: absolute;
				content: counter(li, decimal) "";
				counter-increment: li;
				@include font-mixin(600, 11, 18px, $font-heading);
				text-align: center;
				color: white;
				margin: 4px 0 0 -32px;
				border-radius: 11px;
				background: $grey-55;
				width: 18px;
				height: 18px;
			}

			&:last-child {
				margin-bottom: 0;
			}

			ol {
				margin: 10px 0 20px;

				li {
					&:before {
						content: counter(li, lower-roman) "";
						background: $grey-94;
						color: black;
					}

				}

			}

		}

	}

	.small-heading {
		@include font-mixin(700, 18, 1.272, $font-heading);
		letter-spacing: .15em;
	}

	h2 {
		position: relative;

		&.holiday {
			text-align: center;
			padding-top: 110px;

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

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

			&:before {
				content: "";
				position: absolute;
				background: url("../../dist/images/icon-holiday.svg") 50% 50%;
				background-size: cover;
				width: 90px;
				height: 90px;
				top: 0;
				left: 50%;
				margin-left: -45px;

				@include media-breakpoint-down(md) {
					width: 80px;
					height: 80px;
					margin-left: -40px;
				}

				@include media-breakpoint-down(sm) {
					width: 60px;
					height: 60px;
					margin-left: -30px;
				}

			}

		}

		&.bottom-clear{
			margin-bottom: -20px;
			@include media-breakpoint-down(md) {
				margin-bottom: 0;
			}
		}

		&.park-name{
			margin-bottom:0;
		}

		&.address{
			font-size: 2.15rem;
			@include media-breakpoint-down(sm) {
				font-size:1.6rem;
			}
		}

	}

	.banner {
		background: url("../../dist/images/billboard.jpg") 50% 50% no-repeat;
		background-size: cover;
		width: 100%;
		height: 80vh;
		margin-bottom: 30px;

		@include media-breakpoint-down(sm) {
			margin-bottom: 20px;
		}

	}

	.breadcrumb {
		margin: 0 0 30px;
		padding: 0;
		animation: fadeIn normal forwards 2s ease;

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

		span {
			float: left;
			display: block;
			position: relative;
			@include font-mixin(500, 12, 1.61803398875, $font-heading);
			letter-spacing: .1em;
			text-transform: uppercase;
			color: $blue;
			margin: 0;
			padding: 0 13px 0 11px;

			&:before {
				display: none;
			}

			&:after {
				display: block;
				position: absolute;
				content: "";
				color: $grey;
				border-top: 1px solid $grey;
			  	border-right: 1px solid $grey;
				width: 5px;
			  	height: 5px;
				top: 7px;
				right: 0;
			  	transform: rotate(45deg);
			}

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;

				&:after {
					display: none;
				}
			}

			a {
				color: $grey;
				box-shadow: 0 2px 0 transparent;

				&:hover {
					color: $blue;
					box-shadow: 0 2px 0 $blue;
				}

			}

		}

	}

	.listing {

		.list-item {
			position: relative;
			background: $grey-94;
			width: 100%;
			height: 100%;
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}

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

			.thumbnail {
				position: absolute;
				background: url("../../dist/images/billboard.jpg") 50% 50%;
				background-size: cover;
				width: 30%;
				height: 100%;
				top: 0;
				left: 0;

				@include media-breakpoint-down(md) {
					width: 33.3333333333%;
				}

				@include media-breakpoint-down(sm) {
					width: 33.3333333333%;
				}

				@include media-breakpoint-down(xs) {
					position: relative;
					width: 100%;
					height: 25vh;
				}

			}

			.inner {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 100%;
				min-height: 180px;
				margin-left: 30%;
				padding: 30px;

				@include media-breakpoint-down(md) {
					margin-left: 33.3333333333%;
				}

				@include media-breakpoint-down(sm) {
					margin-left: 33.3333333333%;
					padding: 20px;
				}

				@include media-breakpoint-down(xs) {
					margin-left: 0;
					padding: 20px;
				}

				article {
					height: 100%;

					h3 {
						@include font-mixin(600, 28, 1.272, $font-heading);
						margin-bottom: 5px;

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

						@include media-breakpoint-down(sm) {
							@include font-mixin(600, 21, 1.272, $font-heading);

						}
						.address {
							font-weight: 500;
						}

					}

					p {
						margin: 0;

						@include media-breakpoint-down(md) {
							margin-bottom: 15px;
						}

					}

					.btn {
						float: right;
						margin: 0;
						min-width: 145px;
						text-align: center;
						padding:0;

						@include media-breakpoint-down(md) {
							float: none;
						}

					}

				}

			}

		}

		&.things-to-do {
			.list-item .inner article .btn {
				float: none;
				margin-top: 15px;
			}
		}
	}

	.testimonials {
		background: $grey-94;

		.content {
			padding: 60px 0;

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

			@include media-breakpoint-down(md) {
				padding: 40px 0;
			}

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

		}

	}

	.testimonials-listing {
		position: relative;
		padding-left: 40px;
		padding-right: 40px;
		.tns-controls {
			outline: none;
			button[data-controls="prev"],
			button[data-controls="next"] {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 25px;
				height: 25px;
				background: transparent;
				text-indent: -9999px;
				border: none;
				border-top: 2px solid $grey;
				border-left: 2px solid $grey;
				transition: all 250ms ease-in-out;
				text-decoration: none;
				color: transparent;
				outline: none;
				padding:0;
				&:before {
					display: block;
					height: 200%;
					width: 200%;
					margin-left: -50%;
					margin-top: -50%;
					content: "";
					transform: rotate(45deg);
				}
			}
			button[data-controls="prev"] {
				transform: translateY(-50%) rotate(-45deg);
				left: -20px;
			}
			button[data-controls="next"] {
				transform: translateY(-50%) rotate(135deg);
				right: -20px;
			}
			@include media-breakpoint-down(sm) {
				button[data-controls="prev"] {
					left: 0;
					width: 20px;
				    height: 20px;
				}
				button[data-controls="next"] {
					right: 0;
					width: 20px;
				    height: 20px;
				}
			}
		}
	}

	.listing-accommodation {
		.thumbnail {
			height: 215px;
		}
		article {
			background: $aqua;
			h4 {
				color:white;
				margin-bottom:0;
				@include font-size-mixin(21);
				font-weight: 400;
			}
			text-align: center;
			padding: 14px 20px 20px;
			margin-bottom: 5px;
			text-transform: uppercase;
		}
	}

	.feature {

		.module {
			display: block;
			position: relative;
			text-align: center;
			color: white;
			box-shadow: none;
			height: 260px;
			background: $grey-94;
			margin-bottom: 30px;
			padding-bottom: 0;

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

			@include media-breakpoint-down(sm) {
				//height: 200px;
				margin-bottom: 20px;
			}

			@include media-breakpoint-down(xs) {
				margin-bottom: 15px;
			}

			.banner {
				position: relative;
				background: none;
				height: 220px;
				margin: 0;
				overflow: hidden;

				/*@include media-breakpoint-down(md) {
					height: 180px;
				}

				@include media-breakpoint-down(sm) {
					height: 160px;
				}*/

				&:before {
					content: "";
					position: absolute;
					background: url("../../dist/images/bike-riding.jpg") 50% 50% no-repeat;
					background-size: cover;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					transform: scale(1);
					transition: all .5s ease;
				}

			}

			h3 {
				//position: absolute;
				@include font-mixin(600, 21, 1.272, $font-heading);
				text-transform: uppercase;
				background: $aqua;
				color: white;
				width: 100%;
				min-height: 40px;
				margin: 0;
				padding: 8px 0;
				//bottom: 0;

				span{
					display:block;
					font-size: 2rem;
					font-weight: 400;
				}

				@include media-breakpoint-down(sm) {
					@include font-mixin(600, 18, 1.272, $font-heading);
				}
				@include media-breakpoint-down(xs) {
					font-size: 1.6rem;
					padding: 10px 0;
					span{font-size: 1.6rem;}
				}

			}

			&:hover {
				box-shadow: none;
				padding-bottom: 0;

				.banner {

					&:before {
						transform: scale(1.1);

						@include media-breakpoint-down(xs) {
							transform: scale(1);
						}

					}

				}

			}

			.image-gallery .tns-controls button[data-controls=prev],
			.image-gallery .tns-controls button[data-controls=next]{
				width: 20px;
                height: 20px;
				border-top: 3px solid #fff;
				border-left: 3px solid #fff;
				top:55%;
				@include media-breakpoint-down(sm) {
					width: 20px;
                    height: 20px;
				}
			}

		}

	}

	.events {
		background: $grey-94;
		padding: 20px 0;

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

		.module {
			display: block;
			position: relative;
			text-align: center;
			color: white;
			box-shadow: none;
			background: $grey-94;
			margin-bottom: 30px;
			padding-bottom: 0;

			@include media-breakpoint-down(sm) {
				margin-bottom: 20px;
			}

			.banner {
				position: relative;
				background: black;
				height: 260px;
				margin-bottom: 20px;
				overflow: hidden;

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

				@include media-breakpoint-down(sm) {
					height: 200px;
					margin-bottom: 10px;
				}

				&:before {
					content: "";
					position: absolute;
					background: url("../../dist/images/billboard.jpg") 50% 50% no-repeat;
					background-size: cover;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					transform: scale(1);
					transition: all .5s ease;
					opacity: .75;
					z-index: 10;
					@include media-breakpoint-down(sm) {
						opacity: 1;
					}
				}

				&:after {
					content: "More Info";
					position: absolute;
					@include font-mixin(600, 18, 1.272, $font-heading);
					@include font-line-height-mixin(40);
					text-transform: uppercase;
					background: $green;
					border-radius: 8px;
					width: 140px;
					height: 40px;
					margin: -20px 0 0 -70px;
					padding: 0 20px;
					top: 50%;
					left: 50%;
					z-index: 20;

					@include media-breakpoint-down(xs) {
						display: none;
					}

				}

			}

			h3 {
				@include font-mixin(600, 18, 1.272, $font-heading);
				text-transform: uppercase;
				margin: 0;

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

			}

			date {
				display: block;
				@include font-mixin(400, 18, 1.272, $font-body);
				color: $grey;

				@include media-breakpoint-down(sm) {
					@include font-mixin(400, 16, 1.272, $font-body);
				}

			}

			&:hover {
				box-shadow: none;
				padding-bottom: 0;

				.banner {

					&:before {
						transform: scale(1.1);

						@include media-breakpoint-down(xs) {
							transform: scale(1);
						}

					}

				}

			}

		}

	}
	a.book-now{
		margin-bottom:20px;
		display:inline-block;
	}
	.icon-small{
		display: inline-block;
		width:40px;
		svg g, svg path{
			fill:$aqua;
		}
	}
}


.cursor {
	position: absolute;
	width: 35px;
	height: 35px;
	// background: red;
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform ease-in .3s;
	@include media-breakpoint-down(sm) {
		display: none;
		pointer-events: inherit;
	}
	&.left {
		transform: translate(-50%, -50%) rotate(180deg);
	}
	&.show-cursor {
		opacity: 1;
		visibility: visible;
	}
	&.hide-cursor {
		display: none;
	}
	&:before {
		display: block;
		position: absolute;
		content: "\f061";
		@include font-mixin(400, 40, 35px, $fontawesome);
		text-align: center;
		color: black;
		background: transparent;
		z-index: 200;
	}
}
/*
// width
::-webkit-scrollbar {
	width: 10px;
}

// Track
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

// Handle
::-webkit-scrollbar-thumb {
	background: #888;
}

// Handle on hover
::-webkit-scrollbar-thumb:hover {
	background: #555;
}
*/
$easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);
$easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);

.reveal-box,
.reveal-box__inner,
.reveal-box__content,
.reveal-box__image {
	width: 100%;
	height: 100%;
}
.reveal-box {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
  }

.reveal-box__inner{
	width: 100%;
	height: 100%;
	overflow: hidden;
  }

.reveal-box__content{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.reveal-box__image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srevealed .animate-from-left-simple .reveal-box {
	.reveal-box__inner { animation: 0.9s $easeInOutQuart 0s both paused slide-in-right; }
	.reveal-box__content { animation: 0.9s $easeInOutQuart 0s both paused slide-in-left; }
}
.srevealed .animate-from-left .reveal-box{
	.reveal-box__inner{ animation: 0.9s $easeInOutQuart 0.05s both paused slide-in-right; }
	.reveal-box__content{ animation: 0.9s $easeInOutQuart 0.05s both paused slide-in-left-50; }
	.reveal-box__image{ animation: 1.5s $easeInOutQuart 0.35s both paused scale-in-down; }
}

.srevealed .animate-from-right .reveal-box{
	.reveal-box__inner{ animation: 0.9s $easeInOutQuart 0.05s both paused slide-in-left; }
	.reveal-box__content{ animation: 0.9s $easeInOutQuart 0.05s both paused slide-in-right-50; }
	.reveal-box__image{ animation: 1.5s $easeInOutQuart 0.35s both paused scale-in-down; }
}

.srevealed .animate-scale-in .reveal-box{
	animation: 0.9s $easeInOutQuart 0s both paused scale-in-up;
	.reveal-box__inner{ animation: 0.9s $easeInOutQuart 0s both paused fade-in; }
	.reveal-box__image{ animation: 0.9s $easeInOutQuart 0s both paused scale-in-down-2; }
}

.reveal-box.leave{
	.reveal-box__inner{ animation: 0.9s $easeInOutQuart 0s both paused slide-out-right; }
	.reveal-box__content{ animation: 0.9s $easeInOutQuart 0s both paused slide-out-left-50; }
}

.reveal-box.animate{
	animation-play-state: running !important;
	.reveal-box__inner{ animation-play-state: running !important; }
	.reveal-box__content{ animation-play-state: running !important; }
	.reveal-box__image{ animation-play-state: running !important; }
}



  @keyframes slide-in-right {
	0%   { transform: translate3D(-100%, 0, 0); }
	100% { transform: translate3D(0, 0, 0); }
  }

  @keyframes slide-out-right {
	0%   { transform: translate3D(0, 0, 0); }
	100% { transform: translate3D(100%, 0, 0); }
  }

  @keyframes slide-in-right-50 {
	0%   { transform: translate3D(-50%, 0, 0); }
	100% { transform: translate3D(0, 0, 0); }
  }

  @keyframes slide-in-left {
	0%   { transform: translate3D(100%, 0, 0); }
	100% { transform: translate3D(0, 0, 0); }
  }

  @keyframes slide-out-left {
	0%   { transform: translate3D(0, 0, 0); }
	100% { transform: translate3D(-100%, 0, 0); }
  }

  @keyframes slide-in-top {
	0%   { transform: translate3D(0, -100%, 0); }
	100% { transform: translate3D(0, 0, 0); }
  }

  @keyframes slide-out-left-50 {
	0%   { transform: translate3D(0, 0, 0); }
	100% { transform: translate3D(-50%, 0, 0); }
  }

  @keyframes slide-in-left-50 {
	0%   { transform: translate3D(50%, 0, 0); }
	100% { transform: translate3D(0, 0, 0); }
  }

  @keyframes scale-in-down {
	0%   { transform: scale(1.3); }
	100% { transform: scale(1); }
  }

  @keyframes scale-in-down-2 {
	0%   { transform: scale(1.5); }
	100% { transform: scale(1); }
  }

  @keyframes scale-in-up {
	0%   { transform: scale(0.7); }
	100% { transform: scale(1); }
  }

  @keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
  }


#main .image-gallery {
	position: relative;
	overflow: hidden;
	// display:flex;
	.img {
		height: 400px;
	// 	width: 25%;
	}
	// @include media-breakpoint-down(sm) {
	// 	.img {
	// 		display: none;
	// 		&:first-child {
	// 			display: block;
	// 			width: 100%;
	// 		}
	// 	}
	// }
	.tns-nav {
		text-align: center;
		margin: 15px 0;
		button {
			outline: none;
			border: none;
			width: 12px;
			height: 12px;
			border-radius: 12px;
			background-color: $light-blue;
			margin: 0 4px;
			&.tns-nav-active {
				background-color: $aqua;
			}
		}
	}
	.tns-controls {
		outline: none;
		button[data-controls="prev"],
		button[data-controls="next"] {
			appearance: none;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 25px;
			height: 25px;
			background: transparent;
			text-indent: -9999px;
			border: none;
			border-top: 2px solid white;
			border-left: 2px solid white;
			transition: all 250ms ease-in-out;
			text-decoration: none;
			color: transparent;
			outline: none;
			z-index: 100;
			user-select: none;
			padding:0;
			/*&:before {
				display: block;
				height: 200%;
				width: 200%;
				margin-left: -50%;
				margin-top: -50%;
				content: "";
				transform: rotate(45deg);
			}*/
		}
		button[data-controls="prev"] {
			transform: translateY(-50%) rotate(-45deg);
			left: 20px;
		}
		button[data-controls="next"] {
			transform: translateY(-50%) rotate(135deg);
			right: 20px;
		}
		@include media-breakpoint-down(sm) {
			button[data-controls="prev"],
			button[data-controls="next"]{
				width: 20px;
			    height: 20px;
			}
		}
	}
}



#main .layout {
	#image-gallery {
		cursor: zoom-in;
		max-height: 400px;
		height:400px;
	}
	.image-gallery .img{
		height:400px;
		cursor:grab;
	}
	.img {
		transition: transform .25s;
		transform-origin: 50% 50%;
		height: 100%;
		&:before {
			content: "";
			position: absolute;
			// background: url("../images/tagliatelle.jpg") 50% 50%;
			background-size: cover;
			background-position: center;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
			transition: all ease .25s;
			z-index: 5;
		}
		&.overlay .reveal-box__image:after {
			content: "";
			position: absolute;
			background: rgba(0,0,0,0.25);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
			transition: all ease .25s;
			z-index: 10;
		}
	}
	&.accommodation_info {
		padding:30px 0;
		.col-text{
		h2{
			font-size: 3.5rem;
            font-weight: bold;
			margin-bottom: 0;
		}
		h3 {
			font-size: 2.4rem;
			font-weight: normal;
			text-transform: uppercase;
		}
	    }
		.col-image{
			text-align: right;
		}
		@include media-breakpoint-down(xs) {
			padding:10px 0 30px;
			.col-text{
				h2{font-size: 3rem;}
				h3{font-size: 2rem;}
				margin-bottom: 30px;
			}
			.col-image{
				a.book-now{display: block;text-align: center;}
			}
		}
	}
	&.full,
	&.two_column,
	&.three_column {
		h2 {
			text-align: center;
		}
		/*p:last-child {
			margin-bottom: 0;
		}*/
	}
	&.feature_block {
		.content-inner {
			background: transparentize(#70CDE4, 0.7);
			padding: 30px;
		}
	}
	&.feature_block {
		padding:10px 0 30px;
		.content {
			* { text-align: center;}
		}
	}
	&.locations_map {
		height: 846px;
		background: #C1DCE9;
		margin-top:-20px;
		@include media-breakpoint-down(sm) {
			display: none;
		}
		*{
			transition: none;
		}
		.text-overlay {
			//position: 	absolute;
			background-color: white;
			width: 100%;
			z-index: 10;
			pointer-events: none;
			.content{
				padding-top:0;
			h2 {
				@include font-size-mixin(35);
				color: #6d6e70;
				font-weight: 300;
				line-height: 1.1;
				text-align: center;
				margin-bottom: 0;
			}
		}
		}
	}
	&.listing{
		margin-bottom: 30px;
	}
	&.facilities_icons{
		@include media-breakpoint-down(md) {
			margin-bottom: 50px;
		}
	}
	&.form{
		.gform_wrapper .gform_fields{
			display:grid;
			margin: 0 0 15px 0;
		}
	}
}


#main .gm-style .gm-style-iw-c {
	width: 350px !important;
	top: 0 !important;
	left: 0px !important;
	min-width: 480px !important;
	// min-height: 200px;
	padding: 20px !important;
	background: white;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	overflow: inherit;
	.btn {
		margin-bottom: 0;
		margin-right: 15px;
		margin-bottom: 4px;
	}
	.gm-style-iw-d {
		overflow: auto !important;
		width: 100%;
	}
}

#main .gm-ui-hover-effect,
#main .close-btn {
	background: $navy !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	height: 30px !important;
	right: -7px !important;
	top: -7px !important;
	width: 30px !important;
	border: none !important;
	opacity: 1;
	&:before {
		@include custom_arrow;
		@include custom_arrow_prev;
		left: 15px;
		border-color: white;
	}
	&:after {
		@include custom_arrow;
		@include custom_arrow_next;
		right: 15px;
		border-color: white;
	}
	img {
		display: none;
	}
}

#main .cluster {
	background: $aqua;
	border-radius: 40px;
	img { display: none; }
	div {
		color: white !important;
		font-size: 18px !important;
	}
}
body.signup-body {
	background: #70CDE4;
}
#wrapper .signup-container {
	background: #70CDE4;
	&, iframe {
		// height: 106px;
	}
	iframe {
		width: 100%;
		border: none;
	}
	@media (max-width: 1006px) {
		&, iframe {
			height: 86px;
		}
	}
	@media (max-width: 910px) {
		&, iframe {
			height: 109px;
		}
	}
	@media (max-width: 783px) {
	// @include media-breakpoint-down(sm) {
		&, iframe {
			height: 215px;
		}
	}
}
/* Sign up form */
#wrapper .signup {
	background: #70CDE4;
	.content{
		padding:30px 0;
	.gform_wrapper {
		margin: 0;
		form {
			display: flex;
			flex-wrap: wrap;
			max-width: 1100px;
			margin: auto;
			.gform_body {
				flex: 0 0 75%;
				max-width: 75%;
				p {
					text-align: center;
					margin-bottom: 0;
					@include font-size-mixin(21);
					font-weight: 600;
					line-height: 1.1;
					text-transform: uppercase;
					color: $navy;
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					li {
						flex: 0 0 33.33%;
						max-width: 33.33%;
						margin: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						.ginput_container {
							margin: 0;
							text-align: center;
							width: 100%;
							input {
								margin: 0;
								max-width: 211px;
								line-height: 1.6!important;
							}
						}
					}
					@include media-breakpoint-down(md) {
						margin-left:0;
						margin-right:0;
					}
				}
			}
			.gform_footer {
				flex: 0 0 25%;
				max-width: 25%;
				margin: 0;
				padding: 0;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn {
					width: 100%;
					max-width: 211px;
					background: white;
					color: $navy;
					&:hover {
						color: white;
					}
				}
				ul {
				}
			}
			@include media-breakpoint-down(sm) {
				.gform_body {
					flex: 0 0 100%;
					max-width: 100%;
					margin-bottom: 20px;
					ul {
						li {
							flex: 0 0 50%;
							max-width: 50%;
							display: block;
							&:first-child {
								flex: 0 0 100%;
								max-width: 100%;
								margin-bottom: 20px;
							}
							padding-left:0;
							padding-right: 15px;
							&#field_1_2 {
								padding: 0;
							}
							.ginput_container {
								input {
									width: 100%;
									max-width: 100%;
								}
							}

						}
					}

				}
				.gform_footer {
					flex: 0 0 100%;
					max-width: 100%;
					.btn {
						width: 100%;
						max-width: 100%;
						background: $navy;
						color: white;
					}
				}
			}
		}
	}
    }
}

#wrapper .booking-form {
	background: transparentize(#70CDE4, 0.7);
	padding-left: 20px;
    padding-right: 20px;
	ul {
		margin: 0;
		padding: 0;
		margin-bottom: 20px;
		li {
			&:before {
				display:none;
			}
			select, input {
				background-color: white;
				margin-bottom: 0;
			}
		}
	}
}

.single-accommodation .booking_form{
	display: none;
}

#main .park-info {
	padding-top:50px;
	padding-bottom: 50px;
	.park-logo{
		max-width: 300px;
		display: block;
		margin-bottom: 20px;
	}
	.right-column {
		text-align: right;
	}

	.icon-wrap{
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20px;
			border-bottom: 1px solid $grey-light;
			h3{
				color: grey;
                font-weight: normal;
                font-size: 2rem;
                margin-bottom: 0;
                text-transform: uppercase;
			}
		}
	}

	@include media-breakpoint-down(sm) {
		padding-top:30px;
	    padding-bottom: 30px;
		.right-column {
			text-align: left;
			padding-bottom: 20px;
		}
	}
	@include media-breakpoint-down(xs) {
		padding-top:10px;
	}
}

#main .facilities_icons {
	.content.with-bg {
		margin-bottom: -30px;
	}
}
#main {
	// background: rgba(112,205,228,.7);
	.facilities-icons {
		display: flex;
		margin: 0;
		padding: 0;
		justify-content: center;
		flex-wrap: wrap;
		&.accommodation-icons {
			justify-content: flex-start;
			//margin-bottom: 30px;
			li{
				margin:0;
			    width: 20%;
				border-bottom: 1px solid $grey-light;
				padding: 0 0 20px;
				text-align: center;
				&.single-icon{
					padding:10px 0;
				}
				svg g, svg path{
					fill: #00bdc8;
				}
				.icon-label,.icon-number {
					color:#00bdc8;
				}
				
			}
			@include media-breakpoint-up(sm) {
				li:nth-child(5n+1):nth-last-child(-n+5),
                li:nth-child(5n+1):nth-last-child(-n+5) ~ li {
                    border:none;
                }
			}
			@include media-breakpoint-down(xs) {
				li{
				    width: 25%;
				    &:nth-child(4n+1):nth-last-child(-n+4),
				    &:nth-child(4n+1):nth-last-child(-n+4) ~ li {
					    border:none;
				    }
					.icon-label{font-size: 1.4rem;}
			    }
			}
		}
		li {
			margin: 0;
			display: block;
			// padding: 6px;
			position: relative;
			text-align: center;
			margin:auto 5px;
			.icon-number {
				/*position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: -5px;
				z-index: 10;*/
				width: 100%;
				text-align: right;
				display: block;
				text-align: center;
			}
			.icon-label {
				// position: absolute;
				display: block;
				bottom: 0;
				left: 0;
				z-index: 10;
				width: 100%;
				text-align: center;
				margin-top: -10px;
				line-height: 1;
			}
			svg,img {
				width: 80px;
				height: 80px;
			}
			&:nth-child(1) { background: $aqua; }
			&:nth-child(2) { background: $light-blue; }
			&:nth-child(3) { background: $light-aqua; }
			&:nth-child(4) { background: $aqua; }
			&:nth-child(5) { background: $light-blue; }
			&:nth-child(6) { background: $light-aqua; }
			&:nth-child(7) { background: $aqua; }
			&:nth-child(8) { background: $light-blue; }
			&:nth-child(9) { background: $light-aqua; }
			&:nth-child(10) { background: $aqua; }
			&:nth-child(11) { background: $light-blue; }
			&:nth-child(12) { background: $light-aqua; }
			&:nth-child(13) { background: $aqua; }
			&:nth-child(14) { background: $light-blue; }
			&:nth-child(15) { background: $light-aqua; }
			&:nth-child(16) { background: $aqua; }
			&:nth-child(17) { background: $light-blue; }
			&:nth-child(18) { background: $light-aqua; }
			&:nth-child(19) { background: $aqua; }
			&:nth-child(20) { background: $light-blue; }
			&:before {
				display: none;
			}
		}
	}
	@include media-breakpoint-down(md) {
		.content {
			margin-bottom: -20px;
		}
		/*.facilities-icons {
			li {
				&:not(.single-icon){
				&, img, svg {
					width: 70px;
					height: 70px;
				}
			    }
			}
		}*/
	}
	@include media-breakpoint-down(sm) {
		.content {
			margin-bottom: -20px;
		}
		/*.facilities-icons {
			li {
				.icon-label {
					display: none;
				}
				&:not(.single-icon){
				&, img, svg {
					width: 60px;
					height: 60px;
				}
			    }
			}
		}*/
	}
}

.acf-map {
    width: 100%;
    height: 500px;
    border: #ccc solid 1px;
	@include media-breakpoint-down(md) {
		height:300px;
	}
}

// Fixes potential theme css conflict.
.acf-map img {
   max-width: inherit !important;
}

#main .contact{
	.container-fluid{
		.contact-wrap{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding:40px 0;
			.contact-text{
				width:50%;
				.text-wrap{
					width:80%;
					margin:auto;
				h2.h3{
					margin-bottom:0;
				}
				h2.address{
					margin-top:5px;
					margin-bottom: 20px;
				}
				p{
					margin-bottom: 0;
					font-size: 1.8rem;
					&.address{
						margin-bottom: 20px;
						line-height: 1;
					}
					&.phone{line-height: 1.4;margin-bottom: -10px;}
					a{
						color: $grey;
						margin: 0;
						padding: 0;
						&:hover{
							box-shadow:none;
							opacity:0.7;
						}
					}
				}
				.extra{
					p{
					font-size:1.6rem;
					&.title{
						font-size: 1.8rem;
						font-weight: bold;
						margin-bottom: 5px;
					}
				    }
					ul{
						padding-inline-start: 0;
						margin-bottom: 0;
						li{
							margin-bottom: 0;
						    &::before{display:none;}
						}
					}
				}
				a{
					display: inline-block;
					//margin-top:20px;
					padding-bottom: 0;
				}
			    }
			}
			.contact-map{
				width:50%;
				min-height:450px;
			}
			@include media-breakpoint-down(md) {
				padding:40px 20px;
				.contact-map{
					width:100%;
					height:500px;
				}
				.contact-text{
					width:100%;
					margin-bottom: 30px;
					.text-wrap{
						width:100%;
						h2.address{margin-bottom:10px;}
					}
				}
			}
			@include media-breakpoint-down(sm) {
				padding: 10px 0 30px;
				.contact-text{
					.text-wrap{
						h2{font-size: 1.8rem;}
						h2.address{margin-bottom:10px;}
					}
				}
				.contact-map{min-height:auto;height:300px;}
			}
			@include media-breakpoint-down(xs) {
				.contact-text{
					.text-wrap{
						p.phone,p.address{font-size: 1.6rem;flex-wrap: wrap;}
					}
				}
			}
		}
	}
}

#main .property-block{
	display: block;
	background-color: $aqua;
    padding-bottom: 0;
    height: 100%; 
    overflow: hidden;
	.thumbnail-wrap{
		width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
		.thumbnail{
			position: relative;
			background-size: cover;
			width: 100%;
			height: 100%;
		}
	}
	&:hover{box-shadow: none;padding-bottom: 0;}
	.inner{
		padding:20px;
		.price{font-size: 2.4rem;margin-bottom:10px;color:white;}
		.title{font-size: 2.1rem;margin-bottom: 10px;color:white;}
		p{color:white;line-height: 1.2;}
		.icons{
			color:white;
			.icon{
				position: relative;
				&:not(:last-child){
					margin-right:50px;
				}
				span{
					display: block;
					&::after{
					position: absolute;
					top:50%;
					right:-30px;
					transform: translateY(-50%);
					width: 80%;
					height: 80%;
					}
				}
				&.bedroom span::after{
					content:url("../../dist/images/icons/bedroom.svg");					
				}
				&.bathroom span::after{
					content:url("../../dist/images/icons/bathroom.svg");					
				}
				&.carspace span::after{
					content:url("../../dist/images/icons/car_space.svg");
					width:100%;					
				}
			}
		}
	}
}