/********************************************************************************/
/* CUSTOM
/********************************************************************************/

/* Custom separators */
.hr {
	width: 100%;
	height: 1px;
	margin: 30px 0;
	clear: both;
	background: url('../img/white-dot.png') 0 0 repeat-x;
}
.dots-h {
	width: 100%;
	height: 1px;
	margin: 30px 0;
	clear: both;
	background: url('../img/black-dot.png') 0 0 repeat-x;
}
.white-dots {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABRJREFUeNpi/A8EDAwMjAxQABBgADnxA/8VN3ojAAAAAElFTkSuQmCC); 
}
@media only screen and (min-width : 1600px) {
	.dots-h {
		margin: 8% 0;
	}
}
/***/




/****************************************/
/* INTRO
/****************************************/


/* Intro BG */
#intro-fader:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 6;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	-webkit-transition: all 1s ease 1s;
			transition: all 1s ease 1s;
}
#intro.active-section #intro-fader:after {
	opacity: 1;
}
#intro.active-section #intro-fader.focused:after {
	opacity: 0;
	-webkit-transition: all 1s ease 0s;
			transition: all 1s ease 0s;
}

#intro .fader-next,
#intro .fader-prev {
	-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s;
			transition: 		transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s;	
}
#intro .fader-next {
	-webkit-transform: translateX(100px);
			transform: translateX(100px);
}
#intro .fader-prev {
	-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
}
#intro.active-section .fader-next,
#intro.active-section .fader-prev {
	-webkit-transform: none;
			transform: none;
}	
@media (min-width : 1200px) {
	#intro .fader-next,
	#intro .fader-prev {
		opacity: 0.7;
		-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s, opacity 0.2s ease 0;
				transition: 		transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s, opacity 0.2s ease 0;
	}
	#intro .fader-next:hover,
	#intro .fader-prev:hover {
		opacity: 1;
	}
}
/***/


/* Intro logo */
#intro-logo {
	max-width: 50%;
	margin-bottom: 10vh;
	opacity: 0;
    -webkit-transform: scale(1.1);
			transform: scale(1.1);
    -webkit-transition: all 1s ease 1s;
			transition: all 1s ease 1s;
    will-change: transform, opacity;
}
#intro.active-section #intro-logo {
	opacity: 1;
    -webkit-transform: none;
			transform: none;	
}
#intro-fader.focused ~ .section-main {
	-webkit-transform: translateY(-100vh);
			transform: translateY(-100vh);
	-webkit-transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
			transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
}
/***/


/* Intro down button */
#intro-btn {
	position: absolute;
	z-index: 9;
	left: 50%;
	bottom: 10px;
	width: 48px;
	height: 32px;
	margin-left: -24px;
	background: url('../img/intro-down-btn.png') 50% 50% no-repeat;
	-webkit-transform: translateY(100px);
			transform: translateY(100px);
	-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s;
			transition: 		transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s;
}
#intro.active-section #intro-btn {
	-webkit-transform: none;
			transform: none;
}
@media (min-width : 1200px) {
	#intro-btn {
		bottom: 20px;
		opacity: 0.7;
		-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s, opacity 0.2s ease 0;
				transition: 		transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s, opacity 0.2s ease 0;
	}
	#intro-btn:hover {
		opacity: 1;
	}
}
@media (min-width : 1600px) {
	#intro {
		margin-right: 0;
	}
}
/***/


/* Form lightbox */
#open-form-lightbox {
	position: absolute;
	z-index: 998;
	bottom: 10px;
	right: 10px;
	transition: all 0.4s;
	-webkit-transition: opacity 0.5s ease;
			transition: opacity 0.5s ease;
}
#open-form-lightbox img {
	width: 61px;
}
@media ( min-width : 1200px) {
	#open-form-lightbox {
		bottom: 30px;
		left: 100px;
		right: auto;
		opacity: 0;
		-webkit-transform: scale(0.7);
				transform: scale(0.7);
	}
	#intro.active-section #open-form-lightbox {
		opacity: 1;
		-webkit-transform: none;
				transform: none;
		-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s;
				transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s;	
	}
	#open-form-lightbox img {
		width: auto;
	}
}

#form-lightbox {
	direction: rtl;
}
#form-lightbox .lightbox-content {
	position: absolute;
    top: 50%;
    left: 50%;
	width: 100%;
	max-width: 480px;
	height: auto;
    padding: 0 15px;
    -webkit-transform: translateY(-50%) translateX(-50%);
			transform: translateY(-50%) translateX(-50%);
	background: none;
}
#form-lightbox .close-lightbox {
	top: auto;
	bottom: 100%;
    right: 5px;
}
#form-lightbox .form-container {
	padding: 45px 30px 5px 30px;
	background: #fff;
	color: #000;
	text-align: center;
}
#intro-contact-form {
	margin: 0 -8px;
}
#intro-contact-form p {
	padding: 0 8px;
	font-weight: 400;
	font-size: 1.25em;
}
#intro-contact-form .form-field {
	padding: 0 8px;
}
#intro-contact-form input[type="submit"] {
	padding: 0.45em 1em;
}
#intro-contact-form ~ .form-return {
	padding: 100px 30px 30px 30px;
}

@media (orientation : landscape) and (max-width : 1200px) {
	#intro-contact-form .form-field {
		width: 50%;
		float: right;
	}
	#intro-contact-form .submit-field {
		clear: both;
	}
}
@media (min-width : 1200px) {
	#form-lightbox .form-container {
		padding: 30px;
	}
}

/* Popup phone no */
#popup-phone-no {
	text-align: center;
}
#popup-phone-no > span {
	font-size: 2.3333em;
	line-height: 0.85em;
	letter-spacing: -2px;
}
#popup-phone-no span span {
	margin-right: 0.1em;
	margin-left: -0.1em;
	vertical-align: -0.25em;
}
/***/

/***/






/****************************************/
/* ABOUT
/****************************************/
#about {
}

#about .section-img-caption {
    top: 8%;
}
#about .counters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
#about .counter {
    padding: 1em 0.75em;
    background: rgba(32,123,118,0.8);
    color: #fff;    
}
#about .counter:first-child {
    padding-inline-start: 2.5em;
}
#about .counter:last-child {
    padding-inline-end: 2.5em;
}

#about .counter.animate {
    opacity: 0;
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
	-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
}
#about .counter.animated {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
}

#about .counter-number {
    font-size: 4em;
    font-weight: 100;
}




/****************************************/
/* COMMUNITY
/****************************************/
#community {
}





/****************************************/
/* LOCATION
/****************************************/

#location {
}

/* Mini map */
#mini-map {
	width: fit-content;
	position: relative;
	margin: 1em auto;
}
#mini-map-button {
	position: absolute;
	right: -47px;
	bottom: 0;
	width: 47px;
	height: 47px;
	background: url('../img/magnifier.png');
}
#mini-map-button-alt {
    white-space: nowrap;
}
#mini-map-button-alt > span {
    display: inline-block;
    vertical-align: middle;
    width: 47px;
	height: 47px;
	margin: 0 0.25em;
	background: url('../img/magnifier.png');
	perspective: 100px;
	-webkit-transition: all 0.5s ease;
        	transition: all 0.5s ease;
}
#mini-map-button-alt:hover > span {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

@media (min-width : 1200px) {
	#mini-map-button {
		opacity: 0.8;
		-webkit-transition: opacity 0.2s ease;
				transition: opacity 0.2s ease;
	}
	#mini-map-button:hover {
		opacity: 1;
	}
}
/***/




/****************************************/
/* GALLERY
/****************************************/
#gallery {
}

#gallery .section-bg {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
			transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
}
#gallery.active-section .section-bg {
    opacity: 1;
    -webkit-transform: none;
            transform: none;    
}


/****************************************/
/* DEVELOPER
/****************************************/

#developer .section-img-caption {
    border: 1px solid var(--grey-color);
    padding: 1em 2em;
    background: rgba(32,123,118,0.8);
    color: #fff;
}


/****************************************/
/* CONTACT
/****************************************/

#contact {
}

#contact-form-container {
}
#contact-form-container form {
	font-family: 'Heebo', sans-serif;
}

#contact-details {
	font-family: 'Heebo', sans-serif;
}
#contact-details a {
	white-space: nowrap;
}
#contact-details a:hover {
}

@media (min-width : 1200px) {
	#contact-form-container {
		border-left: 1px solid;
		padding-left: 20px;
	}	
	#contact-form-container .form-field:last-child {
		margin-bottom: 0;
	}
	
	#contact-details {
		padding-right: 30px;
	}
}





/****************************************/
/* MISC.
/****************************************/

#accessibility-statement {
    width: 100%;
	height: 100%;
	overflow: auto;
    padding: 2em 1em;
    text-align: initial;
}

#disclaimer-text {
    padding-left: 4em;
    text-align: initial;
}


/********************************************************************************/