/* --- GLOBAL --- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	
    --color001: #3CC2D2;  /* Sky blue */
    --color002: #003263; /* Dark blue */
    --color003: black;
    --color004: white;
    --color005: rgba(60, 194, 210, 0.75);  /* Sky blue - semi-transparent */
    
	--header-height: 11vw;
    --header-height-mob: 80px;
    
    --space-site: 3vw;
    --space-large: 2vw;
    --space-medium: 1vw;
    --section-padding: 40px;

   }

* { 
	box-sizing: border-box;
	border: 0;
}


html, body {

	margin: 0;
	padding: 0;
	
    background: linear-gradient(#ffffff 95%, var(--color001) 5%);
    color: var(--color004);
   
	overflow-x: hidden;
	
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 1em;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;

}

a {
	
	text-decoration: none;
	color: var(--color004);
}

	a:hover {
	
		color: #003263;
	
	}

h1 {
	
	font-weight: 600;
	font-size: 2.5em;
	line-height: 1.2em;	
	margin: 0;
	
}	

h2 {
	
	font-weight: 300;
	font-size: 1.5em;
	margin: 0;

}	

/* --- DESIGN ELEMENTS --- */

section {
	
	position: relative;
	
}
	section .wave_spacer {
		
		padding-bottom: 10px;
		
	}

	section::after { 
		
		content: url(../img/general/waves.svg);
		
		position: absolute;
		width: 64px;
			
		margin: auto;
		top: auto;
		left: 0;
		bottom: 10px;
		right: 0;
		
	}
	
	section.white::after { 
		
		content: url(../img/general/waves_on_white.svg);
		
	}
	
.watermark {
	
	position: absolute;
	
	width: 33%;
	right: -40px;
	
}

section img.HD {
	
	height: 44px; /*vw or % cause animation bug in FF*/
	margin-bottom: 24px;
	
}

.HD_angled {
	
	padding: var(--space-site);
	padding-bottom: 16px;
	background-color: var(--color001);
	background-image: url(../img/general/HD_bkg_angled.svg);
	background-repeat: no-repeat;
	background-position-x: 101%; /* Render bugs display line at 100% */
	background-size: auto 104%; /* Render bugs display line at 100% */
	
}

	.HD_angled.label{
		
		margin-top: var(--space-site);
		padding: 16px;
		font-weight: 600;
	}

.content {
	
	min-height: 100%;
	overflow-x: hidden;

	padding: var(--space-site);
    
}	
	
	.content .text.layer {
		
		position: absolute;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		
		padding: var(--space-large);
				
		background-color: var(--color005);
		
	}
		.content .text.layer * {
			
			flex: 0 0 100%;
			
		}
	
		.content .text.layer p:first-child {
		
			margin-top: 0;
		
		}
		
		.content .text.layer p:last-child {
		
			margin-bottom: 0;
		
		}
		
.column_dbl  {
	
	display: flex;
	align-items: flex-start;
	gap: var(--space-site);

}	

.column_dbl  > div  {
	
	flex: 50%;

}	


/* --- HEADER --- */

header {
	
	position: fixed;
	z-index: 1000;
	
	top: 0;
	
	height: var(--header-height);
	width: 100%;
	padding: 1vw;
	
	background: var(--color001);
	
}

	header > * {
		
		position: absolute;
	
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		
	}
	
	header .menu {
	
		position: absolute;
		
		left: var(--space-site);
		width: 3vw;
		
		top: 50%;
		transform: translateY(-50%);
		right: auto;
		bottom: auto;
		
		cursor: pointer;
		
	}
	
	header .banner {
		
		height: 65%;
		
	}

/* --- NAV --- */

nav {
	
	display: none;
	position: fixed;
	z-index: 1000;
	
	top: var(--header-height);
	
	height: calc( 100% - var(--header-height));
	width: 100%;
	
	background-color: var(--color001); 
	
}

	nav ul {
		
		list-style: none;
		margin: 0;

		padding: var(--space-site);
		
	}

		nav li {
			
			padding: var(--space-medium);
			padding-left: 0;
			
			font-size: 1.8em;
			font-weight: 500;
			
			cursor: pointer;
			
		}
	
/* --- HOME --- */

#home {
	
	position: relative;
	
	margin-top: var(--header-height);
	
	background-image: url(../img/home/bkg.jpg); 
	background-size: cover;
	
}

	#home .content {
	
		position: relative;
	 
	}		
	
	#home .shape_bkg {
		
	position: absolute;
	
	height: 100%;
	right: 32vw;
	
}	
	
/* --- FORM --- */	

form {

  width: 50%;	
  margin-top: 22px;
  
}

	form h2 {

		padding-bottom: var(--space-site);
	
	}	

input[type=text] {
	
	margin-bottom: var(--space-medium);	
	padding: 10px 15px;
	
	background: var(--color005);
	border: 0;
	display: block;
	outline: none;
	width: 100%;
	
	font-family: inherit;	
	font-size: inherit;
	
}

textarea {
	
  background: var(--color005);
  border: 0px;
  margin-bottom: 3px;
  outline: none;
  padding: 10px 15px;
  width: 100%;
  margin-bottom: 5px;
  min-height: 150px;
  resize: none;
  
  font-family: inherit;  
  font-size: inherit;
 
 
 }
  
.email {
	
  display: none;
  
}

::placeholder {
	
  color: #ffffff;
  opacity: 1; 
  font-family: inherit;
  
}

::-ms-input-placeholder {
	
  color: #ffffff;
  opacity: 1; 
  font-family: inherit;
  
}

.submit {
	
	background: var(--color005);
	color: #fff;
	font-size: 16px;
	margin: 5px 0 0 0;
	outline: 0;
	padding: 8px 30px;
	border: none;
	cursor: pointer;
	transition: all 0.5s;
	
 }

.submit:hover {
	
  background-color: var(--color001);

}

.post-message {

	width: 50%;
	padding: 5px;
	margin-top: 40px;
	
	text-align: center;
	background: var(--color003);
	color: white;
	
	font-size: 34px;
	font-weight: 300;
   
 }


/* --- BUILDING --- */

.building .pic {

	width: 100%;
	display: block;
	
}	
	
.building .content {

	position: absolute;
	width: 100%;
	
}	

.building .text img {
	
	width: 33%;
	
}	

#building-1 .text {
		
	bottom: 64px;
	width: 24vw;

}
	
#building-2 .pic:first-child {
	
	padding-top: var(--space-medium);
	padding-bottom: var(--space-medium);

}
	
/* --- SPECIFICATION --- */

#specification  {
		
z-index: 900;

}


#specification,  #specification .content { /*Added to content to fix line bug on follwing section */
	
	background: var(--color001);
	    
}

#specification h2 {
	
	color: var(--color002);
	font-weight: 400;

}

	#specification h2 + p {
		
		margin-top: 4px;
	}

#specification table {
	
	width: 100%;
	margin-bottom: var(--space-site);
	
}	
	#specification table, td {
		
		font-weight: 500;

	}
	
	#specification table, th, td {
		
		border: 2px solid white;
		border-collapse: collapse;
		padding: 8px;
		
	}
	
	#specification table th:first-child, table td:first-child {
		
		width: 15%;
		
	}
	
	#specification table th:not(:first-child) {
		
		text-align: center;
		
	}
	
	#specification table td:not(:first-child) {
		
		color: var(--color002);
		text-align: center;
		font-weight: 600;
		
	}

#specification .info {
	
	padding-right: 4vw;

}

#specification .infographics {
	
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(4, 140px 40px 20px);
	align-items: baseline;
	
}	

	#specification .infographics > div {
		
		height: 100%;
		position: relative;
		font-size: 20px;
		
	}
	
	
	#specification .infographics > div img {
		
		position: absolute;
		bottom: 4px;
		
	}
	
	#specification .infographics .label {
		
		display: flex;
		align-items: center;

	}
	

/* --- ACCOMODATION --- */

	#accomodation-1 .title_slide { /*  Fix gap on animation */
			
		position: absolute;
		z-index: -1;
		top: -64px;
		height: 80px;
		width: 100%;
		background-color: var(--color001);
	}	

	#accomodation-1 .content {
	
		background: white;
	    
	}

.accomodation .plans img {

	width: 100%;	

}	

.accomodation .plans .column {

	padding: 3vw;

}	

.accomodation .plans div:nth-child(1) {

	padding-left: 5vw;

}	

.accomodation .plans div:nth-child(2) {

	padding-right: 5vw;

}

#accomodation-2 .content, #accomodation-2 .column {
	
	padding-top: 0;
	
}

/* --- LOCAL --- */

:root {
	
	--gallery-gap: 8px;
	
}	


#local .gallery img  {
	
	width: 100%;
	flex: 1 auto;

}	

#local .column_dbl {
	
	gap: var(--gallery-gap);
	align-items: initial;

}	

	#local .column_dbl > div {
		
			flex: auto;
	
	}	

#local .block1 .column {
	
	display: flex;
	flex-direction: column;

}	

 #local .pic_1 {
	
	flex: auto;
	display: flex;

}	

#local .pic_1, #local .pic_4 {
	
	padding-bottom: var(--gallery-gap);
	
}	

#local .block2 {
	
	display: flex;
	gap: var(--gallery-gap);
	margin-top: var(--gallery-gap);
	margin-bottom: var(--gallery-gap);
	
}	

	#local .block2 img {
		
		width: 45%;
		
	}	

/* --- LOCATION--- */

#location {
	
	background: var(--color001);
	padding-bottom: var(--section-padding);
	    
}

#location .column img {
	
	width: 100%;
	flex: 1 auto;

}	

	#location .column img.map {
		
		height: 38vw;
		width: auto;
	
	}	

#location .column.car {
	
	width: 12%;
	flex: initial;

}	

#location .driving .column.car,  #location .driving .column.car img {
	
	width: 5vw;
	flex: initial;

}

#location .driving .locations {

	gap: 0;

}	

#location .driving .roads {

	width: 28%;
	flex: initial;

}

#location .column p, #location .driving .column.car img {
	
	margin-top: var(--space-medium);

}	

/* ---CONTACT --- */

#contact {
	
	background: var(--color001);
	    
}

#contact .watermark {
	
	position: absolute;
	
	width: 78%;
	right: -20px;
	
}


#contact .column.logo, #contact .column.logo img {
	
	width: 14vw;
	flex: initial;

}

#contact .column.contacts, #contact .column.logo img {
	
	margin-top: var(--space-large);

}		
	#contact .column.contacts  p:first-child {
		
		margin-top: 0;
	
	}		

#contact .disclaimer {
	
	color: black;
	font-size: 0.8em;
	margin-top: 128px;
	
}

/* --- MEDIA QUERIES --- */

@media screen and (max-width: 1850px) {
	
		#home .watermark {
	
			width: 40%;
		
		}
		
}	

@media screen and (max-width: 1150px) {
	
	/* --- DESIGN ELEMENTS --- */
		
	section img.HD {
		
		height: 26px;
		
	}
		
	.column_dbl {
		
		display: block;
		
	}
	
	.HD_angled.mobile {
	
		background-position-x: 180%;	
		
	}
		
	/* --- HEADER  --- */
	
	header {

		height: var(--header-height-mob);
		
	}
	
	header .menu {

		width: 5vw;
		
	}
	
	header .banner {
		
		height: 100%;
		width: auto;
		padding: 1vw;
		
	}
	
	/* --- HOME --- */
	
	#home {
		
		margin-top: var(--header-height-mob);
		
	}
	
	#home .watermark {
	
		display: none;	
		
	}
		
	#home .shape_bkg {
		
		
		left: 0;
		right: auto;	
	
	}		
	
	.post-message {
	  
	   width: 100%;
	   
	 }

	form {
		
	  width: 100%;
	 
	} 
	
	/* --- BUILDING --- */
	
	#building-1 .text {
		
		display: block;
		margin-top: -10px;
		width: 100%;
		position: relative;
		bottom: auto;

	}
	
		#building-1 .text img {
		
			display: none;

		}
	
	/* --- SPECIFICATION --- */
	
	#specification .info_container {	
		
		display: block;
		
	}	
	
	#specification .infographics {	
		
		padding: 8px;
		
	}	
	
	
	/* --- ACCOMODATION --- */

	.accomodation .column_dbl {
	
		margin-bottom: 48px;	
	
	}
	
	/* --- LOCAL --- */
	
	#local .gallery {	
		
		padding-bottom: 10px;
		
	}	
	
	#local .gallery img {
	
		margin-bottom: var(--gallery-gap);
	
	}	
	
	#local .pic_1, #local .pic_4 { 
	   
	   padding-bottom: 0;
	   	
	 }	
	 
	 #local .block2 {
		 
		flex-direction: column; 
		margin-top: 0;
		gap: 0;
		margin-bottom: var(--space-site);
		
	}	

		#local .block2 img {
			
			width: 100%;
			
		}
		
		
	/* --- LOCATION  --- */	
		
	#location .column img.map {
	
		width: 100%;
		height: auto;
	
	}
	
	#location .driving .locations {

		display: flex;

	}	
		
		#location .driving .locations .roads {

			width: 40%;

		}	
		
	
	/* --- CONTACT  --- */
	
	#contact {
		
		padding-bottom: var(--section-padding);
		
	}
	
	#contact .column.logo, #contact .column.logo img {
	
		width: 44vw;

	}
	

}	

/* --- SCROLL ANIMATION FEATURE  --- */

.js-scroll {
	
    opacity: 0;
    transition: opacity 500ms;
    
}

.js-scroll.scrolled {
	
    opacity: 1
    
}

.scrolled.fade-in-bottom {
	
    animation: fade-in-bottom 1s ease-in-out both;
    
}

/* ---  PAGE 1 ANIMATION FEATURE--- */

@keyframes fade-in-bottom {
	
    0% {
	    
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
        
    }

    100% {
	    
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
        
    }
    
}

.nudge-bottom {
	
    animation: nudge-bottom 1s ease-in-out both;
    
}

@keyframes nudge-bottom {
	
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);

    }

    100% {
	    
        -webkit-transform: translateY(0);
        transform: translateY(0);

    }
    
}