/* OpenSans Font Licence */
/*
Copyright 2010-2011 Google Corporation.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v36-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v36-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v36-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v36-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v36-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v36-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v36-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


html{
/* set to defaults */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0px;
	overflow-x: hidden;

	font-size: 18px;

	height: 100%;

	scroll-behavior: smooth;
}
/*
@media only screen and (min-width: 1600px) {
  html {
    font-size: 1vw;
  }
}
*/
body{
	margin: 0;
	width: 100%;
	height: 100%;

	color: #2D2D2D;
	/*color: #6A7075;*/
}

a{
	color: inherit;
	text-decoration: none;
}
a.light{
	font-weight: 400 !important;
}
p, li{
	margin-top: 0;
	color: #2D2D2D;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 600;
	color: #2D2D2D;
}
heavy{
	font-weight: 600;
}
h1 heavy,h2 heavy,h3 heavy,h4 heavy,h5 heavy,h6 heavy{
	font-weight: 700;
}
.extra-bold{
	font-weight: 800;
}
.margin-none{
	margin: 0 !important;
}
.margin-auto{
	margin: auto !important;
}
.padding-none{
	padding: 0 !important;
}
.border-box-none{
	-webkit-box-sizing: content-box;
		 -moz-box-sizing: content-box;
			box-sizing: content-box;
}

.inner-shadow{
	box-shadow: inset 0px 10px 8px -10px #AAA,
				inset 0px -10px 8px -10px #AAA;
}
.under-shadow{
	box-shadow: 0px 0px 2px 0px #AAA;
}

.float-right{
	float: right;
}
.float-left{
	float: left;
}
.flex-space-between{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
}
/*
.flex-space-between::after {
  content: "";
  flex: auto;
}*/

.flex-space-around{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style: none;
}
.flex-space-evenly{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	list-style: none;
}
.align-left{
  text-align: left;
}
.align-center{
  text-align: center;
}
.align-right{
  text-align: right;
}

.position-relative{
	position: relative;
}
.vertical-center{
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

input:focus{
	outline-width: 0;
}




.background-light{
	background-color: #FEFEFE;
	/*color: #000;*/
}
.background-light-v{
	background-color: #FBFBFB;
	/*background-color: #F9F9F9;*/
	/*color: #000;*/
}
.background-dark{
	background-color: #222222;
	color: #f1f1f1;
}
.background-none{
	background: none;
	/*color: #f1f1f1;*/
}

.background-blue-transparent{
	background: rgba(83, 112, 249, 0.25);
}
.background-billboard{
	background: url("../images/isometric/bgBlue.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: cover;
}

white{
	color: white !important;
}
dark{
	color: #2D2D2D !important;
}
blue{
	color: #5370F9;
}
red{
	/*color: #F02522;*/
	color: #FC2F5C;
}
yellow{
	/*color: #FEAA6A;*/
	/*color: #F85F48;*/
	color: #FC9850;
}
green{
	color: #58D5C9;
}

.bd-blue{
	border: solid 1px #5370F9;
}
.bd-red{
	border: solid 1px #F02522;
}
.bd-yellow{
	border: solid 1px #FEAA6A;
}
.bd-green{
	border: solid 1px #58D5C9;
}
.bd-light{
	border: solid 1px #FEFEFE;
}
.bd-lightish{
	border: solid 1px #DDD;
}





/* response code */
.inner-container{
	width: 62%;
	max-width: 1400px;
	height: 100%;
	margin: auto;
}
@media screen and (min-width: 2200px){
	html{

	}
	.inner-container{
		width: 50%;
	}
	.billboard h1{
		font-size: 2vw;
	}
	.billboard h2{
		font-size: 1.6vw;
	}
}
@media screen and (max-width: 1680px){
	.inner-container{
		width: 86%;
	}
}
@media screen and (max-width: 1280px){
	.flex-space-between{
		display: block;
	}
	.inner-container{
		width: 90%;
	}
}
@media screen and (max-width: 767px){
  .align-left{
    text-align: center;
  }
  .align-center{
    text-align: center;
  }
  .align-right{
    text-align: center;
  }
}


.hide-on-small{
	display: none !important;
}
.show-on-small{
	display: inline-block !important;
}
.hide-on-mobile{
	display: none !important;
}
.show-on-mobile{
	display: block !important;
}
.hide-on-small-mobile{
	display: none !important;
}
.show-on-small-mobile{
	display: block !important;
}
@media screen and (min-height: 620px){
	.hide-on-small-mobile{
		display: inline-block !important;
	}
	.show-on-small-mobile{
		display: none !important;
	}
}
@media screen and (min-width: 767px){
	.hide-on-mobile{
		display: inline-block !important;
	}
	.show-on-mobile{
		display: none !important;
	}
}
@media screen and (min-width: 1400px){
	.hide-on-small{
		display: inline-block !important;
	}
	.show-on-small{
		display: none !important;
	}
}











input[type="submit"]{ -webkit-appearance: none; }
.button{
	display: block;
	width: max-content;
	min-width: 200px;
	text-align: center;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0.25px;
	cursor: pointer;
	margin: 4px 0;
	padding: 16px 28px;
	border-radius: 5px;

	box-shadow: inset 0 0 100vw 100vw rgba(0,0,0,0.0);

	-webkit-transition-duration: 	0.2s;
	-moz-transition-duration: 		0.2s;
	-ms-transition-duration: 		0.2s;
	-o-transition-duration: 		0.2s;
	transition-duration: 			0.2s;
}
.button.bd{
	padding: 15px 27px;
}
.button:hover{
	box-shadow: inset 0 0 100vw 100vw rgba(0,0,0, 0.05);
	/*transform: translateY(-2px);*/

	-webkit-transition-duration: 	0.2s;
	-moz-transition-duration: 		0.2s;
	-ms-transition-duration: 		0.2s;
	-o-transition-duration: 		0.2s;
	transition-duration: 			0.2s;
}
.button:active{
	transform: translateY(3px);

	-webkit-transition-duration: 	0.1s;
	-moz-transition-duration: 		0.1s;
	-ms-transition-duration: 		0.1s;
	-o-transition-duration: 		0.1s;
	transition-duration: 			0.1s;
}
input[type="submit"]{
	border: none;
	font-size: inherit;


}
.bg-blue{
	color: #FBFBFB;
	/*background: linear-gradient(to bottom left, #5370F9 0%, #7F99E9 100%);*/
	background: linear-gradient(to bottom left, #3C5BEF 0%, #6888E8 100%);
}
.bg-red{
	color: #FBFBFB;
	/*background: linear-gradient(to bottom left, #FC2F5C 0%, #FE9198 100%);*/
	background: linear-gradient(to bottom left, #F91635 0%, #FC7981 100%);
}
.bg-yellow{
	color: #FBFBFB;
	/*background: linear-gradient(to bottom left, #FEAA6A 0%, #FED691 100%);*/
	/*background: linear-gradient(to bottom left, #F85F48 0%, #FEAA6A 100%);*/
	background: linear-gradient(to bottom left, #FC9850 0%, #F9B181 100%);
}
.bg-green{
	color: #FBFBFB;
	/*background: linear-gradient(to bottom left, #58D5C9 0%, #87E5CA 100%);*/
	background: linear-gradient(to bottom left, #2EBDAD 0%, #87E5CA 100%);
}





.bg-blue-dark-solid{
	color: #FBFBFB;
	background: #425AC4;
}
.bg-red-dark-solid{
	color: #FBFBFB;
	background: #F91635;
}
.bg-yellow-dark-solid{
	color: #FBFBFB;
	background: #F85F48;
}
.bg-green-dark-solid{
	color: #FBFBFB;
	background: #2EBDAD;
}
.bg-blue-pattern{
	background-color: #5370f9;

}
/**/
.bg-blue-solid{
	color: #FBFBFB;
	background: #5370F9;
}
.bg-red-solid{
	color: #FBFBFB;
	background: #FC2F5C;
}
.bg-yellow-solid{
	color: #FBFBFB;
	background: #FEAA6A;
}
.bg-green-solid{
	color: #FBFBFB;
	background: #58D5C9;
}
/**/
.bg-blue-light-solid{
	background: #7F99E9;
}
.bg-red-light-solid{
	background: #FE9198;
}
.bg-yellow-light-solid{
	background: #FED691;
}
.bg-green-light-solid{
	background: #87E5CA;
}
/**/
.bg-blue-lighter-solid{
	background: #EAEDFD;
}
.bg-red-lighter-solid{
	background: #FFE0E5;
}
.bg-yellow-lighter-solid{
	background: #FFEFCE;
}
.bg-green-lighter-solid{
	background: #D2FAEF;
}
/**/
.bg-blue-light-grad{
	background: linear-gradient(to bottom, #EAEDFD, #FBFBFB);
}
.bg-red-light-grad{
	background: linear-gradient(to bottom, #FFE0E5, #FBFBFB);
}
.bg-yellow-light-grad{
	background: linear-gradient(to bottom, #FFEFCE, #FBFBFB);
}
.bg-green-light-grad{
	background: linear-gradient(to bottom, #D2FAEF, #FBFBFB);
}




.billboard{
	box-sizing: border-box;
	padding-top: 17vh;
	width: 100%;
	min-height: 100%;

	/*background: #EAEDFD;*/

	/*
	background: linear-gradient(270deg, #D2FAEF, #EAEDFD);
	background-size: 400% 400%;

	-webkit-animation: AnimationName 10s ease infinite;
	-moz-animation: AnimationName 10s ease infinite;
	animation: AnimationName 10s ease infinite;
	*/
}
@-webkit-keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
	@-moz-keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
	@keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
.billboard .inner-container{
	min-height: 100%;
	margin: auto;
}
h1{
	font-weight: 700;
	font-size: 48px;
}
.billboard.main-page h1{
	font-weight: 700;
	font-size: 3vw;
}
h2{
	font-weight: 600;
	font-size: 42px;
	margin-bottom: 16px;
}
.about-header h2{
	font-size: 36px;
}
.billboard.main-page h2{
	font-weight: 600;
	font-size: 2.2vw;
}
h3{
	font-size: 36px;
	/*margin-bottom: -16px;*/
}
p{
	line-height: 28px;
}
.billboard-img{
	width: 90%;
	height: auto;
}
@media screen and (max-height: 920px){
	.billboard-img{
		width: auto;
		height: 80vh;
	}
}





.line-separator{
	display: block;
	width: 100%;
	height: 3px;
	margin: 18px 0;
}
.line-separator.small{
	width: 100px;
}
@media screen and (max-width: 1120px){
	.billboard h1, .billboard.main-page h1{
		font-size: 4vw;
	}
	.billboard h2, .billboard.main-page h2{
		font-size: 3vw;
	}
	.billboard{
		padding-top: 14vw;
	}
	.billboard-img{
		max-width: 600px;
	}
}
@media screen and (max-width: 992px){
	.billboard{
		padding-top: 40px;
	}
	.billboard-img-container{
		text-align: center !important;
	}
	.billboard-img{
		width: 70%;
		height: auto;
	}
}
@media screen and (max-width: 767px){
	.billboard{
		padding-top: 22vw;
	}
	.billboard:not(.main-page){
		text-align: center;
	}
	.billboard:not(.main-page) h1{
		margin-bottom: 18px !important;
	}
	.billboard h1, .billboard.main-page h1{
		font-size: 8vw;
		width: 100%;
	}
	.billboard h2, .billboard.main-page h2{
		font-size: 8vw;
	}
	.billboard-img{
		width: 80%;
		height: auto;
	}

}
@media screen and (max-width: 620px){
	.billboard h1, .billboard.main-page h1{
		font-size: 12vw;
		width: 100%;
	}
	.billboard h2, .billboard.main-page h2{
		font-size: 10vw;
	}
}






.content{
	width: 100%;
}
.section-padding{
	margin: 80px 0 !important;
}


.service-header *{
	display: inline-block;
	vertical-align: middle;
}
.service-header h3{
	max-width: 70%;
}
.category-icon{
	width: 50px;
	height: 50px;
	margin-right: 12px;
	border-radius: 1000px;

	position: relative;
}
.category-icon img{
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.main-service ul{
	list-style: none;
	padding-left: 30px;
}
.main-service li{
	margin: 12px 0;
}
.main-service li .icon{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 12px;
	margin-bottom: 2px;
	border-radius: 1000px;

	position: relative;
}


.main-service .image-container.right{
	text-align: right;
}
.main-service .image-container.left{
	text-align: left;
}

.main-service .text-container{
	max-width: 500px;
}
.main-service .image-container img{
	width: 90%;
	max-width: 700px;
}

.service-desc{

}
@media screen and (max-height: 800px){
	.main-service .image-container img{
		max-width: 500px;
	}
}
@media screen and (max-width: 992px) {
	.section-padding{
		margin: 80px 0;
	}
	.line-separator.small{
		text-align: center;
		margin: 18px auto;
	}
	.main-service h1, .main-service h2, .main-service h3{
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
	.main-service li{
		margin: 12px -24px;
	}
	.main-service .button{
		margin: auto;
	}
	.category-icon{
		display: none;
	}

	.main-service .image-container,.main-service .image-container.left,.main-service .image-container.right{
		text-align: center;
	}
	.main-service .image-container img{
		width: 60%;
		max-width: 700px;
	}
	.main-service .text-container{
		max-width: 100%;
		text-align: center;
		margin: auto;
	}
	.main-service .text-container.float-right{
		float: none;
	}
	.limit-width-500{
		margin: auto;
	}
	.service-desc{
		text-align: center;
	}
}
@media screen and (max-width: 767px) {
	.main-service .button,.billboard .button{
		width: 100%;
	}

	.main-service .image-container{
		text-align: center;
	}
	.main-service .image-container img{
		width: 100%;
		max-width: 700px;
	}
}





.portfolio-brand-container{

}

.portfolio-brand{
	width: 20%;
	min-width: 260px;
	margin: 60px 40px;

	vertical-align: middle;
}












#home-portfolio{
	width: 100%;
}


.project-you-01 { grid-area: project-you-01;}
.project-piz-01 { grid-area: project-piz-01;}
.project-kit-01 { grid-area: project-kit-01;}
.project-pos-01 { grid-area: project-pos-01;}
.project-sbg-01 { grid-area: project-sbg-01;}
.project-fis-01 { grid-area: project-fis-01;}
.project-cfw-01 { grid-area: project-cfw-01;}
.project-ond-01 { grid-area: project-ond-01;}
.project-jha-01 { grid-area: project-jha-01;}
.project-ftd-01 { grid-area: project-ftd-01;}



.project-piz-01 .project-background{  background-image: url('../images/webp/projects/project_pizzarazzi.webp');  }
.project-kit-01 .project-background{  background-image: url('../images/webp/projects/project_kcuts.webp');  }
.project-pos-01 .project-background{  background-image: url('../images/webp/projects/project_ppot.webp');  }
.project-sbg-01 .project-background{  background-image: url('../images/webp/projects/project_sbgames.webp');  }
.project-fis-01 .project-background{  background-image: url('../images/webp/projects/project_fis.webp');  }
.project-cfw-01 .project-background{  background-image: url('../images/webp/projects/project_cfw.webp');  }
.project-ond-01 .project-background{  background-image: url('../images/webp/projects/project_ondo.webp');  }
.project-jha-01 .project-background{  background-image: url('../images/webp/projects/project_jhart.webp');  }
.project-ftd-01 .project-background{  background-image: url('../images/webp/projects/project_ftracked.webp');  }


#home-portfolio .grid-container {
	display: grid;
	grid-template-areas:
		'project-piz-01 project-piz-01 project-pos-01'
		'project-sbg-01 project-kit-01 project-kit-01';

	grid-gap: 34px;


	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 300px
						300px;
}
@media screen and (max-width: 992px) {
	#home-portfolio .grid-container {
		grid-template-areas:
			'project-piz-01'
			'project-kit-01'
			'project-pos-01'
			'project-sbg-01';

		grid-template-columns: 1fr;
		grid-template-rows: 300px
							300px
							300px
							300px;
	}
}



#port-portfolio .grid-container {
	display: grid;
	grid-template-areas:
		'project-piz-01 project-piz-01 project-pos-01'
		'project-fis-01 project-you-01 project-kit-01'
		'project-jha-01 project-cfw-01 project-cfw-01'
		'project-jha-01 project-sbg-01 project-ond-01'
		'project-ftd-01 project-ftd-01 project-ond-01';

	grid-gap: 34px;


	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 300px
						300px
						300px
						300px
						300px;
}
@media screen and (max-width: 992px) {
	#port-portfolio .grid-container {
		grid-template-areas:
			'project-piz-01'
			'project-kit-01'
			'project-pos-01'
			'project-fis-01'
			'project-you-01'
			'project-sbg-01'
			'project-cfw-01'
			'project-jha-01'
			'project-ftd-01'
			'project-ond-01';

		grid-template-columns: 1fr;
		grid-template-rows: 300px
							300px
							300px
							300px
							300px
							300px
							300px
							300px
							300px
							300px;
	}
}



.grid-container > .project-grid-item {
  text-align: center;
  border-radius: 8px;
  overflow: hidden;

  /*background-repeat: no-repeat;
  background-position: center;
  background-size: cover;*/

  position: relative;

  transition: 0.4s;
}
.project-background{
	position: absolute;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	transition: 0.4s;
}
.project-grid-item:hover .project-background{
	transform: scale(1.15);

	transition: 0.4s;
}
.project-info-overlay{
	position: absolute;
	z-index: 10;
	width: 100%;
	height: max-content;

	/*right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;*/

	top: 50%;
	transform: translateY(-50%);
	padding: 20px;

	transition: 0.4s;
}
.project-grid-item:hover .project-info-overlay{


	transition: 0.4s;
}
.project-info-overlay h3{
	color: #FBFBFB;
	font-weight: 700;
	margin: 12px 0;
}
.project-info-overlay .button{
	margin: auto;
}


.project-colour-overlay{
	width: 100%;
	height: 100%;
	opacity: 0.75;

	position: absolute;
	top: 0;
}





.about-header *{
	display: inline-block;
	vertical-align: middle;
}

.limit-width-500{
	max-width: 500px;
}








.promo-ribbon{
	padding: 20px 0 !important;
	font-size: 20px;
}
.promo-ribbon .button{
	 margin-left: 20px;
	 min-width: 220px;
}
#booking-panel{
	position: fixed;
	display: none;
	z-index: 400;

	left: 0;
	right: 0;
	top: 5vh;
	max-height: 90vh;
	overflow-y: auto;
	margin: auto;
	padding: 40px;
	width: 90%;
	max-width: 600px;

	text-align: center;
	border-radius: 5px;
}
@media screen and (max-width: 992px) {
	#booking-panel{
		padding: 30px 24px;
		width: 95%;
		max-width: 600px;
	}

	.promo-ribbon{
		padding: 28px 0 !important;
		font-size: 20px;
	}
	.promo-ribbon .button{
		 margin-left: 0;
		 width: 80%;
	}
}
@media screen and (max-width: 767px) {
	#booking-panel h3{
		font-size: 8vw;
		padding-bottom: 18px;
	}
}



#contact{
	padding-top: 10px;

}
#contact h3{
	font-size: 24px;
	padding-bottom: 8px;
}



.footer-nav{

}
.footer-nav p{
	margin-bottom: 4px;
}
.footer-nav p a{
	margin: 0;
}






#footer{
	padding: 18px 0;
}
#footer .footer-information{
	padding-bottom: 50px;
}
#footer .logo-img{
	max-width: 320px;
}
#footer .footer-sub-section{
	padding: 20px 0px;
	display: inline-block;
}
#footer .footer-sub-section p{
	vertical-align: top;
	margin: 6px;
}

#footer-information-container{
	width: 100%;
	color: #f5f5f5;
	min-height: 60px;
	letter-spacing: 1px;
}
#footer-information-container a{
	font-weight: 600;
}
#footer-information-container .inner-container{
	height: 100%;
}
#footer-information-container .footer-content{
	height: 100%;
	line-height: 60px;
}
@media screen and (max-width: 920px){
	#footer-information-container{
		min-height: 60px;
		padding: 14px 0;
		text-align: center;
	}
	#footer-information-container .inner-container .footer-content{
		padding-top: 20px;
		width: 100%;
		text-align: center;
		line-height: 24px;

		margin: auto;
	}
	#footer .footer-sub-section{
		display: block;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 520px){
	#footer-information-container{
		min-height: 0px;
	}
	#footer-information-container a.logo{
		width: 80%;
	}
	#footer-information-container a.logo img.logo-img{
		min-height: 60px;
		padding: 14px 0;
		text-align: center;
	}
	#footer .logo-img{
		max-width: 90%;
	}
}



















#privacy-policy{

}


#privacy-policy .navigation{
	position: relative;
	height: max-content;

	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 40px;
}

#privacy-policy .navigation a{
	display: block;
	padding: 20px;
	width: 100%;
}
#privacy-policy .navigation a:not(.header){
	cursor: pointer;
}
#privacy-policy .navigation a:not(.header):hover{
	display: block;
	padding: 20px;
	width: 100%;

	box-shadow: inset 0 0 100vw 100vw rgba(0,0,0, 0.05);
}

#privacy-policy .policy-text{
	padding-left: 80px;
}
#privacy-policy h3{
	font-size: 32px;
}

#privacy-policy .nav-anchor{
	transform: translateY(-120px);
}

@media screen and (max-width: 992px) {
	#privacy-policy .policy-text{
		padding-left: 0px;
	}

}













/* Navbar */
#header{
	width: 100%;
	top: 0;
	z-index: 80;
}
#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
	z-index: 70;
	position: fixed;
	top: 0;
	width: 100%;
	height: 			120px;
	line-height: 	120px;


	/*box-shadow: 0 4px 5px -5px #111;*/
	-webkit-transition-duration: 	0.4s;
	-moz-transition-duration: 		0.4s;
	-ms-transition-duration: 		0.4s;
	-o-transition-duration: 		0.4s;
	transition-duration: 			0.4s;
}
#navbar .nav-item {
	display: inline-block;
	height: 100%;
}
#navbar .nav-item a, #navbar .nav-item span{
  display: block;
	height: 100%;
}

.topnav .nav-item.button{
	position: relative;
	height: 30px;
	line-height: 	30px;
	min-width: 180px;
	padding: 12px 24px;

	transform: translateY(-2px); /* Because magic*/
	margin-left: 32px;
	vertical-align: middle;

	cursor: pointer;
}
.topnav .nav-item.button a{
}
.topnav .nav-item a:not(.logo), .topnav .nav-item span:not(.logo){
		/*not logo to keep all page content aligned*/
    padding: 0px 18px;
		margin: 0 0.4vw;
}
.topnav .nav-item:not(.button):not(.dropdown) a:hover{
	background-color: #F6F6F6;
}

.topnav .logo{

}
.topnav .logo-img{
	height: 30px;
	box-sizing: border-box;
	margin: auto 0;
	top: 0;
	bottom: 0;
	position: absolute;
	/*padding: 44px 0;*/
}


@media screen and (min-width: 1201px){
	#mobile-navbar{ display: none; }
}
@media screen and (max-width: 1200px){
	#navbar{ display: none; }
	/*#navbar-balancer{ display: none; }*/
}

/* Mobile Navbar */
#mobile-navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;

	z-index: 110;

	position: fixed;
	width: 100%;
	top: 0;

	height:				70px;
	line-height: 	70px;

	-webkit-transition-duration: 	0.2s;
	-moz-transition-duration: 		0.2s;
	-ms-transition-duration: 		0.2s;
	-o-transition-duration: 		0.2s;
	transition-duration: 			0.2s;
}
#mobile-navbar li:not(.button) a, #mobile-navbar li span{
	display: block;
	text-decoration: none;
	height: 70px;
}
#mobile-navbar li a:not(.logo), #mobile-navbar li span:not(.logo) {
	text-align: center;
}
#mobile-navbar #mobile-buttons{
	display: none;
	overflow-x: hidden;
	overflow-y: auto;

	padding: 10px 0 20px 0;

	position: absolute;
	width: 100%;
	max-height: 80vh;
}
#mobile-navbar .button{
	display: block;
	left: 0;
	right: 0;
	margin: 16px auto;
	width: 80%;
	height: 30px;
	line-height: 30px;
}
#mobile-navbar .logo{
	padding: 0 5%;
}
#mobile-navbar .logo-img{
	height: 30px;
}

#hamburger-button{
	padding: 0 5%;
	z-index: 200;
}





#navbar .dropdown:hover, #mobile-navbar .dropdown:hover{
	background-color: #F6F6F6;
	cursor: pointer;
}
#navbar .dropdown:hover .dropdown-content{
	display: block;
}
#navbar .dropdown-content a, #navbar .dropdown-content span{
	height: 80px;
	line-height: 80px;
	transition: 0.2s;
}
#navbar .dropdown-content a:hover{
	background-color: #F6F6F6;
	/*background-color: inherit;*/

	height: 120px;
	line-height: 120px;

	transition: 0.2s;
}
#navbar .dropdown-content{
	display: none;
	position: absolute;

	/*transform: translateX(6px);*/
}



/*#mobile-navbar .dropdown:hover .dropdown-content{
	display: block;
}*/
#mobile-navbar .dropdown-content{
	display: none;
}





#menu-fader{
	position: fixed;
	display: none;
	z-index: 90;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}




















/* Contact */
#outer-container{
	width: 60%;
}
@media screen and (max-width: 1080px){
	#outer-container{
		width: 100%;
	}
}

#contact a{
	font-weight: 600;

}



#contact-form{
	text-align: center;
	width: 100%;
	display: inline-block;
	letter-spacing: 0px;
}
#contact-form label{
	font-weight: 600;
	display: block;
	text-align: left;
}
.text-field{
	color: #222; /* customise this */
	background: #FBFBFB; /* customise this */
	border: none;
	border-left: 6px solid #5370F9; /* customise this */
	border-radius: 0;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;

	margin: 8px 0px 16px 0px; /*top right bottom left (-4px to counter padding)*/
	padding: 12px 10px 12px 10px;
	box-sizing: border-box;
    text-overflow: ellipsis;
	word-wrap: break-word;
    word-break: break-all;

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.text-field.blue{
	border-color: #5370F9;
}
.text-field.red{
	border-color: #FC2F5C;
}
.text-field.yellow{
	border-color: #FEAA6A;
}
.text-field.green{
	border-color: #58D5C9;
}
.text-field.valid{
	border-left: 6px solid #2ECC71;
}
.text-field.invalid{
	border-left: 6px solid #E74C3C;
}
.text-field:valid{
	/*color: #D4AF37;*/
}
.text-field:focus{
	box-shadow: none;
	outline-width: 0;
	/*color: #D4AF37;*/
	/*border-left: 6px solid #5370F9; /* customise this */

	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.input-container .invalid-text{
	display: none;
	font-size: 14px;
	color: #E74C3C;

	text-align: left;
}
.invalid + .invalid-text{ /* text that comes after valid inputs */
	display: block;
}

.input-container{
	width: 100%;
	display: inline-block;
}
.small-text-fields .input-container{
	width: 49%;
}
.large-text-fields .input-container{
	width: 100%;
}
.text-field{
	width: 100%;
}
textarea{
	resize: vertical;
}
.text-field-container{
	width: 100%;
}
.text-field-container.flex-space-between{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
}
.submission-section-element{
	vertical-align: top;
	width: 100%;
	display: block;
}
small.submission-section-element {
	width: 100%;
	margin-bottom: 14px;
}
.grecaptcha-badge {
    visibility: hidden;
}

@media screen and (max-width: 1080px){
	#contact-form{
		display: block;
	}
	#contact-form .input-container{
		display: block;
		width: 100%;
	}
}

@media screen and (max-width: 767px){
	.submission-section-element .button{
		margin: auto;
	}
}


#contact-output{
	padding: 14px 0;
	display: block;

	color: #E74C3C;
}
#contact-output.success{
	color: #2ECC71;
}



.loader{
	display: none;
	position: absolute;
	border: 5px solid #f3f3f3; /* Light grey */
	border-top: 5px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin-left: 14px;
	animation: spin 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes spin{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}