/*for analysis see excel spreadsheet css.xlsx, line numbers matching lines below*/

@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 1000;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	transition: all 0.2s ease-in-out;
	height: auto;
	background-color:transparent;	
}

.bar-background-color {
	background-color: rgba(25,77,116,1.00);	/*background colour of header bar when scrolled down - see script in source code /*SCROLL-DOWN EFFECTS*/	*/
}

.topbar {	
}

.buttons {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-button {
	border: none;
	color: white;
	padding: 1.03vw 2.2vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.1vw;
	margin: .275vw .1375vw;
	cursor: pointer;
	background-color: transparent;
}
@media screen and (max-width: 1000px) {
	.header-button {
		font-size: 1.5vw ;
		padding: 1.87vw 1.5vw ;
		margin: .5vw .25vw ;
	}
}
@media screen and (max-width: 800px) {
	.header-button {
		font-size: 1.7vw ;
		padding: 1.87vw 1.1vw ;
		margin: .5vw .25vw ;
	}
}
@media screen and (max-width: 600px) {
	.header-button {
		display: none;
	}
}
@media screen and (max-width: 480px) {
	.header-button {
		display: none;
	}
}

.header-button a {
	text-decoration: none;
	color: inherit;
}

.header-button-topleftcorner {
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.1vw;
	margin: 0vw .1375vw;
	cursor: pointer;
	background-color: transparent;
}

.header-button-topleftcorner-home{
	padding: 0vw 6vw 0vw 0vw;
	width: 100%;	
}
@media screen and (max-width: 600px) {
	.header-button-topleftcorner-home {
		padding: 0vw 18vw 0vw 0vw;
	}
}

.header-button-topleftcorner-home img{
	width: 12%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-home img{
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-home img{
		width: 22%;
	}
}
@media screen and (max-width: 600px) {
	.header-button-topleftcorner-home img{
		width: 20%;
	}
}

.header-button-topleftcorner-accommodation{
	padding: 0vw 6vw 0vw 0vw;
	width: 50%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-accommodation {
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-accommodation {
		width: 55%;
	}
}

.header-button-topleftcorner-experiences{
	padding: 0vw 6vw 0vw 0vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-experiences {
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-experiences {
		width: 55%;
	}
}

.header-button-topleftcorner-reviews{
	padding: 0vw 6vw 0vw 0vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-reviews {
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-reviews {
		width: 55%;
	}
}

.header-button-topleftcorner-gallery{
	padding: 0vw 6vw 0vw 0vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-gallery {
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-gallery {
		width: 55%;
	}
}

.header-button-topleftcorner-contact{
	padding: 0vw 6vw 0vw 0vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-topleftcorner-contact {
		width: 20%;
	}
}
@media screen and (max-width: 800px) {
	.header-button-topleftcorner-contact {
		width: 55%;
	}
}

.header-button-toprightcorner {
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.1vw;
	margin: 0vw 0vw;
	cursor: pointer;
	background-color: transparent;
}

.header-button-toprightcorner-home{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 600px) {
	.header-button-toprightcorner-home {
		padding: 0vw 0vw 0vw 18vw;
	}
}

.header-button-toprightcorner-home img{
	width: 60%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-home img{
		width: 85% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-home img{
		width: 95% ;
	}
}
@media screen and (max-width: 600px) {
	.header-button-toprightcorner-home img{
		width: 80% ;
	}
}

.header-button-toprightcorner-accommodation{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-accommodation {
		width: 20% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-accommodation {
		width: 50% ;
	}
}

.header-button-toprightcorner-experiences{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-experiences {
		width: 20% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-experiences {
		width: 50% ;
	}
}

.header-button-toprightcorner-reviews{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-reviews {
		width: 20% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-reviews {
		width: 50% ;
	}
}

.header-button-toprightcorner-gallery{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-gallery {
		width: 20% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-gallery {
		width: 50% ;
	}
}

.header-button-toprightcorner-contact{
	padding: 0vw 0vw 0vw 6vw;
	width: 100%;	
}
@media screen and (max-width: 1000px) {
	.header-button-toprightcorner-contact {
		width: 20% ;
	}
}
@media screen and (max-width: 800px) {
	.header-button-toprightcorner-contact {
		width: 50% ;
	}
}

body{
	 font-family: 'Afacad Flux';
}

.centred-bullets {
	text-align: center;	
}

.container{
	width: 100%;
/*	height: 100vh;	*/
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper{
	width: 100%;
	height: 100vh;
}
@media screen and (orientation: portrait) { /*adjusting height of images in all portrait orientations, esp mobile*/
	.swiper{ 
		height: 40vh ; /*swiper slideshow reduced in height*/
	}
}

.swiper-slide img{
	width: 100vw; 
	height: 125vh; 
}
@media screen and (max-width: 1000px) {
	.swiper-slide img{
		height: 110vh ;	
	}
}
@media screen and (orientation: portrait) { /*adjusting height of images in all portrait orientations, esp mobile*/
	.swiper-slide img{ 
		height: 100% ;
	}
}

.column .swiper{ /*adjusting width of slideshow in 2-column format*/
	width: 80%;
}

.column .swiper .swiper-wrapper .swiper-slide img{ /*making sure 2-column slideshow includes full images in slides*/
	height: 65% ;	
	width: 100% ; /*see lines 857-867 */
}
@media screen and (orientation: portrait) { /*adjusting height of images in all portrait orientations, esp mobile*/
	.column .swiper .swiper-wrapper .swiper-slide img{ /*making sure 2-column slideshow includes full images in slides*/
		height: 85% ;	/*see lines 857-867 */
	}
}


.swiper .swiper-button-prev, .swiper .swiper-button-next{
	color: #fff;
}

.swiper .swiper-pagination-bullet-active{
	background: #fff;
}

.text-overlay{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	position: fixed;
	background: transparent;
	color: #fff;
	z-index: 2;
}
.disappearing {
	display: none;	/*text overlay wording disappears when scrolled down - see script in source code lines 167-175*/
}
.text-overlay h1{
	font-family: 'Cactus Classical Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 3.85vw;
}
@media screen and (max-width: 1000px) {
	.text-overlay h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 5.25vw;
	}
}
@media screen and (max-width: 800px) {
	.text-overlay h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 6vw;
	}
}
@media screen and (max-width: 600px) {
	.text-overlay h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 7vw;
	}
}

.text-overlay p{
	font-size: 2.06vw;
}
@media screen and (max-width: 1000px) {
	.text-overlay p{
		font-size: 3vw;
	}
}
@media screen and (max-width: 800px) {
	.text-overlay p{
		font-size: 2vw ;
		display: none ;
	}
}

.text-overlay-mobile{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	position: fixed;
	background: transparent;
	color: #fff;
	z-index: 2;
}

.text-overlay-mobile p{
	font-size: 2.06vw;
	display: none ;
}
@media screen and (max-width: 1000px) {
	.text-overlay-mobile p{
		font-size: 2.5vw;
		display: none ;
	}
}
@media screen and (max-width: 800px) {
	.text-overlay-mobile p{
		font-size: 3.2vw;
		padding: 0vw 6vw;
		display: block ;
	}
}

.overview{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	color: #000000;
	}

.overview h1{
	font-family: 'Cactus Classical Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 2.8vw;
}
@media screen and (max-width: 1000px) {
	.overview h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 3vw;
	}
}
@media screen and (max-width: 800px) {
	.overview h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 3.5vw;
	}
}
@media screen and (max-width: 600px) {
	.overview h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 4vw;
	}
}

.overview h2{
	font-size: 1.6vw;
	font-weight: 400;
	padding: 0vw 6vw;
}
@media screen and (max-width: 1000px) {
	.overview h2{
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 800px) {
	.overview h2{
		font-size: 2.2vw;
	}
}
@media screen and (max-width: 600px) {
	.overview h2{
		font-size: 3vw;
	}
}

.overview p{
	font-size: 1.6vw;
	line-height: 1.8;
	padding: 0vw 20vw;
}
@media screen and (max-width: 1000px) {
	.overview p{
		font-size: 1.8vw;
		padding: 0vw 15vw;
	}
}
@media screen and (max-width: 800px) {
	.overview p{
		font-size: 2.2vw;
		padding: 0vw 12vw;
	}
}
@media screen and (max-width: 600px) {
	.overview p{
		font-size: 3.1vw;
		padding: 0vw 9vw;
	}
}

.overview ul{
	font-size: 1.6vw;
	line-height: 1.8;
	padding: 0vw 20vw;
	display: inline-block;
	text-align: left;
}
@media screen and (max-width: 1000px) {
	.overview ul{
		font-size: 1.8vw;
		padding: 0vw 15vw;
	}
}
@media screen and (max-width: 800px) {
	.overview ul{
		font-size: 2.2vw;
		padding: 0vw 12vw;
	}
}
@media screen and (max-width: 600px) {
	.overview ul{
		font-size: 3.1vw;
		padding: 0vw 9vw;
	}
}

.portrait{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	color: #000000;
	display:none;
	}
@media screen and (orientation: portrait) { /*to display only when viewed in portrait*/
	.portrait{ 
		display: inline;
	}
}

.portrait h1{
	font-family: 'Cactus Classical Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 4vw;
}

.portrait h2{
	font-weight: 400;
	padding: 0vw 6vw;
	font-size: 3vw;
}

.portrait p{
	line-height: 1.8;
	font-size: 3.1vw;
	padding: 0vw 9vw;
}

.portrait ul{
	line-height: 1.8;
	display: inline-block;
	text-align: left;
	font-size: 3.1vw;
	padding: 0vw 9vw;
}

/*Buttons inc dropdown
------------------------------------------------------------------------- */
.dropdown {
	float: left;/*------------ALIGNMENT OF BUTTONS, LEFT OR RIGHT (can only center with padding-left which makes links wider than parent button, or margin-left which loses menu icon)*/
	overflow: hidden;
/*position:relative;------------DELETED FOR RESPONSIVE TOPNAV*/
	width: 100%;/*-------------------button placeholder width, 100% for sidenav, 15% for topnav, see below*/
	display: inline-block;/*----not "inline" as links then wider than parent button--note asterisks before "display" and after ";"*/
}

.dropbtn-menu-icon {
	display: flex;
	color: white;
	background-color: transparent ;
	justify-content: center;
	align-items: center;
	display: none;
	padding: 5px 0px;
	font-family: inherit;
	letter-spacing: .1vw;
	word-spacing: .3vw;
	font-size: 6vw;
	border: none;
	margin: 0;
	justify-content: center;
	align-content: center;
	width: 10%;
	cursor: pointer;
	z-index: 1;
}
@media screen and (max-width: 600px) {
	.dropbtn-menu-icon {
		display: flex;
		color: white;
		justify-content: center;
		align-items: center;
	}
}

.topnav > .dropdown {
	width: 15%;/*-------------------button placeholder width, 15% for topnav, 100% for sidenav, see above*/
}
.dropdown-spacer {
	float: left;
	overflow: hidden;
	width: 1%;
	*display: inline-block;	
}/*---------------------------N.B. With spacer have to manually adjust dropdown-content-click width from "inherit" to 14.7% etc, see below*/

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #fff;
/*min-width: 160px;*/
	width: inherit;/*------------------same width as parent (.dropdown)*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 2000;
}
.dropdown-content a {
	float: none;	 /*--------ADDED FOR RESPONSIVE TOPNAV*/
	color: black;
	padding: 12px 16px;
	font-size: 1.2vw; /*------dropdown links font size*/
	text-decoration: none;
	display: block;
	text-align: center;
}

.dropdown-content-click {
	display: none;
	position: relative;
	background-color: rgba(255,255,255,.8);/*background color of dropdown links*/
	width: 50% ;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
	z-index: 10000;
	justify-content: center;
	align-content: center ;
	cursor: pointer;
}
.dropdown-content-click a {
	float: none;	 /*--------ADDED FOR RESPONSIVE TOPNAV*/
	color: black;
	padding: 0px 26px;/*--------no bottom padding to reduce height-extent of dropdown*/
	font-size: 3vw; /*------dropdown links font size*/
	text-decoration: none;
	display: block;
	text-align: center;
	justify-content: center;
	align-content: center ;
}
.topnav .dropdown-content-click{
	width: 50%;
	justify-content: center;
	align-content: center ;
}
.topnav .dropdown-content-click a {
	padding: 0px 26px;		/*--------no bottom padding to reduce height-extent of dropdown from topnav*/
}

.dropdown-content-hover {
	display: none;
	position: absolute;
	background-color: #fff;
/*min-width: 160px;*/
	width: inherit;/*------------------same width as parent (.dropdown)*/	
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 2000;
}
.dropdown-content-hover a {
	float: none;	 /*--------ADDED FOR RESPONSIVE TOPNAV*/
	color: black;
	padding: 12px 16px;
	font-size: 1.2vw; /*------dropdown links font size*/
	text-decoration: none;
	display: block;
	text-align: center;
}

.dropdown:hover .dropbtn, .dropdown:focus .dropbtn {
	background-color: transparent;
	color: white;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown:hover .dropdown-content-hover {
	display: block;
}
.dropdown-content a:hover, .dropdown-content a:focus {
	background-color: #ddd;
	color: black;
}
.dropdown-content-hover a:hover {
	background-color: #ddd;
	color: black;
}
.dropdown-content-click a:hover {
	background-color: #ddd;
	color: black;
}

.show {
	display: block;
 }

.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-family: inherit;
	font-size: 1.2vw;
	transition: 0.4s;
}
.accordion:hover {
	background-color: #ccc; 
}
.accordion-panel {
	padding: 0 18px;/*-------indentation of accordion links*/
	display: none;
	background-color: white;
	overflow: hidden;
}
.accordion-panel a {
	float: none;	 /*--------ADDED FOR RESPONSIVE TOPNAV*/
	color: black;
	padding: 12px 16px;
	font-size: 1.2vw; /*------dropdown links font size*/
	text-decoration: none;
	display: block;
	text-align: left;
}
.accordion-panel a:hover {
	color: #818181;
}
.accordion-panel a:active, .accordion-panel a:focus {
	color: black;
}

 /*------gallery photo grid */
div.gallery {
/*	border: 1px solid #ccc; */
}

div.gallery:hover {
/*	border: 1px solid #777; */
}

div.gallery img {
	width: 100%;
 /* height: 35vh; */
	height: auto;
	padding: 5px 0;  /*if no description box*/
}

div.desc {
	padding: 15px;
	text-align: center;
}

* {
	box-sizing: border-box;
}

.responsive {
	padding: 0 6px;
	float: left;
	width: 24.99999%;
}

@media only screen and (max-width: 1000px) {
	.responsive {
		width: 33.3%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 700px) {
	.responsive {
		width: 49.99999%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
	}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}


/*------responsive 1-2 column setting */
* {
	box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column {
	float: left;
	text-align: center;
	height: 75vh; /*to ensure both columns are same height as slideshow - see line 359*/
}
@media screen and (orientation: portrait) {
	.column {
		height: 90vh; /*to ensure both columns are same height as slideshow - see line 364 */
	}
}

.left40-image {
	width: 40%;
	padding: 4vw 4vw 4vw 4vw;
}
.left40-text {
	width: 40%;
	padding: 4vw 1vw 4vw 1vw;
}
.left50-image {
	width: 50%;
	padding: 4vw 4vw 4vw 4vw;
}
.left50-text {
	width: 50%;
	padding: 4vw 1vw 4vw 1vw;
}
.left60-image {
	width: 60%;
	padding: 4vw 0vw 4vw 4vw;
}
.left60-text {
	width: 60%;
	padding: 4vw 1vw 4vw 1vw;
}

.right40-image {
	width: 40%;
	padding: 4vw 4vw 4vw 4vw;
}
.right40-text {
	width: 40%;
	padding: 4vw 1vw 4vw 1vw;
}
.right50-image {
	width: 50%;
	padding: 4vw 4vw 4vw 4vw;
}
.right50-text {
	width: 50%;
	padding: 4vw 1vw 4vw 1vw;
}
.right60-image {
	width: 60%;
	padding: 4vw 4vw 4vw 4vw;
}
.right60-text {
	width: 60%;
	padding: 4vw 1vw 4vw 1vw;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.column {
		width: 100%;
		height: auto;
	}
}

.column-text-centred {
	text-align:center;
}


/* create 2-column text format based on "Overview" with padding adjusted to 50% of "Overview" padding */

.two-column{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	color: #000000;
	height: auto; /* to reduce container heights of containers */
	}

.two-column h1{
	font-family: 'Cactus Classical Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 2.8vw;
}
@media screen and (max-width: 1000px) {
	.two-column h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 3vw;
	}
}
@media screen and (max-width: 800px) {
	.two-column h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 3.5vw;
	}
}

@media screen and (max-width: 600px) {
	.two-column h1{
		font-family: 'Cactus Classical Serif';
		font-style: normal;
	 	font-weight: 400;
		font-size: 4vw;
	}
}

.two-column h2{
	font-size: 1.6vw;
	font-weight: 400;
	padding: 0vw 3vw;
}
@media screen and (max-width: 1000px) {
	.two-column h2{
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 800px) {
	.two-column h2{
		font-size: 2.2vw;
	}
}
@media screen and (max-width: 600px) {
	.two-column h2{
		font-size: 3vw;
	}
}

.two-column p{
	font-size: 1.6vw;
	line-height: 1.8;
		padding: 0vw 1vw;
}
@media screen and (max-width: 1000px) {
	.two-column p{
		font-size: 1.8vw;
		padding: 0vw 1vw;
	}
}
@media screen and (max-width: 800px) {
	.two-column p{
		font-size: 2.2vw;
		padding: 0vw 1vw;
	}
}
@media screen and (max-width: 600px) {
	.two-column p{
		font-size: 3.1vw;
		padding: 0vw 2vw;
	}
}

.two-column ul{
	font-size: 1.6vw;
	line-height: 1.8;
	padding: 0vw 10vw;
	display: inline-block;
	text-align: left;
}
@media screen and (max-width: 1000px) {
	.two-column ul{
		font-size: 1.8vw;
		padding: 0vw 7.5vw;
	}
}
@media screen and (max-width: 800px) {
	.two-column ul{
		font-size: 2.2vw;
		padding: 0vw 6vw;
	}
}
@media screen and (max-width: 600px) {
	.two-column ul{
		font-size: 3.1vw;
		padding: 0vw 4.5vw;
	}
}


.two-column-mobile{
	font-family:'Afacad';
	font-style: normal;
	font-weight: 400;
	color: #000000;
}

.two-column-mobile h2{
	font-size: 1.8vw;
 	padding: 0vw 3vw;
	display: none ;
}

@media screen and (max-width: 600px) {
	.two-column-mobile h2{
		font-size: 3vw;
		line-height: 1.8vw;
	 	display: block ;
	}
}

.two-column-mobile p{
	font-size: 1.8vw;
 	padding: 0vw 4.5vw;
	display: none ;
}

@media screen and (max-width: 600px) {
	.two-column-mobile p{
		font-size: 3.1vw;
		line-height: 1.8vw;
	 	display: block ;
	}
}

/*embedded map*/
.map {
	width: 100%;
	height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.iframe {
	width: 100%;
	height: 100vh;
}

/*contact form*/
input[type=text], select, textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}

input[type=submit] {
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #45a049;
}

/* Style the container/contact section */
.container3 {
	width: 100%;
	height: 100vh;
	background-color: #f2f2f2;
	display: flex;
	/*align-items: center;*/
	justify-content: center;
}

form {
	display: flex;
	flex-direction: column;
	padding: 2vw 4vw;
	width: 90%;
	max-width: 600px;
	border-radius: 10px;
}

form h2{
	align-items: center;
	font-weight: 800;
	margin-bottom: 20px;
}

form input, form textarea{
	border: 0;
	margin: 10px 0;
	padding: 20px;
	outline: none;
	font-size: 16px;
} 

form button{
	padding: 15px;
	background: #ff5361;
	color: #fff;
	font-size: 18px;
	border: 0;
	outline: none;
	cursor: pointer;
	width: 150px;
	margin: 20px auto 0;
	border-radius: 30px;
}

/* reviews scroll-based animation */
.container-reviews{	
	width: 100%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}	
.container-reviews-large{	
	width: 100%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}	

.reviewer {
	opacity: 0.15; /* initial opacity */
	translate: -50%;
	transition: opacity 0.5s ease-in-out;
	transition: translate 0.5s ease-in-out;
}

.reviewer.visible {
	opacity: 1; /* fully visible */
	translate: 0%;
}

.review {
	font-size: 1.8vw;
	margin-top: 2vh;
	opacity: 0;
	transition: opacity 500ms ease-in, transform 500ms ease-in;
	transform: translateX(20vw);
}
@media screen and (max-width: 600px) {		
	.review {	
		font-size: 3vw;
	}	
}		

.review.visible {  /*for image files*/
	opacity: 1; /* fully visible */
    transform: translateX(0px);
}

.in-view {  /*for text*/
	opacity: 1;
	transform: translateX(0px);
}

.container-reviews-small {
	overflow-x: hidden;
}
.container-reviews-medium {
	overflow-x: hidden;
}
.container-reviews-large {
	overflow-x: hidden;
}

.container-reviews-small .two-column .row .left40-image{
	height: 30vh;
	padding: 0 0 0 0;	
}
.container-reviews-small .two-column .row .right60-text{
	height: 30vh;
	padding: 0vh 5vw 0 0;	
}
.container-reviews-medium .two-column .row .left40-image{
	height: 60vh;
	padding: 0 0 0 0;	
}
.container-reviews-medium .two-column .row .right60-text{
	height: 40vh;
	padding: 0vh 5vw 0 0;	
}
.container-reviews-large .two-column .row .left40-image{
	height: 75vh;
	padding: 0 0 0 0;	
}
.container-reviews-large .two-column .row .right60-text{
	height: 75vh;
	padding: 5vh 5vw 0 0;	
}

@media screen and (max-width: 600px) {		
	.container-reviews-small .two-column .row .left40-image{
		height: auto;
		width: 100%;
		padding: 0 0 0 0;	
	}
}
@media screen and (max-width: 600px) {		
	.container-reviews-small .two-column .row .right60-text{
		height: auto;
		width: 100%;
		padding: 0 5vw 10vh 5vw;
	}	
}
@media screen and (max-width: 600px) {		
	.container-reviews-medium .two-column .row .left40-image{
		height: auto;
		width: 100%;
		padding: 0 0 0 0;	
	}
}
@media screen and (max-width: 600px) {		
	.container-reviews-medium .two-column .row .right60-text{
		height: auto;
		width: 100%;
		padding: 0 5vw 0 5vw;
/*		margin-top: 15vh;  to push text down in 1-column format */
	}	
}
@media screen and (max-width: 600px) {		
	.container-reviews-large .two-column .row .left40-image{
		height: auto;
		width: 100%;
		padding: 10vh 0 0 0;  /* space between thisimage and the next image */
		margin-top: -10vh;
	}
}
@media screen and (max-width: 600px) {		
	.container-reviews-large .two-column .row .right60-text{
		height: auto;
		width: 100%;
		padding: 0 5vw 10vh 5vw;
/*		margin-top: 25vh;  to push text down in 1-column format */
	}
}