/* Default CSS */
			

			
			/*debug option to turn on div borders*/
			div {
				/*border: 1px solid red;*/
			}
			
			/*required for Responsive Web Design - Grid-View*/
			* {
				box-sizing: border-box;
			}
			
			/* For mobile phones: */
			[class*="col-"] {
			  width: 100%;
			}
			
			@media only screen and (min-width: 600px) {
			  .review-table {}
				
			}
			
			@media only screen and (min-width: 768px) {
			  .review-table {display: flex;}
			}

			@media only screen and (min-width: 600px) {
			  /* For tablets: */
			  .col-s-1 {width: 8.33%;}
			  .col-s-2 {width: 16.66%;}
			  .col-s-3 {width: 25%;}
			  .col-s-4 {width: 33.33%;}
			  .col-s-5 {width: 41.66%;}
			  .col-s-6 {width: 50%;}
			  .col-s-7 {width: 58.33%;}
			  .col-s-8 {width: 66.66%;}
			  .col-s-9 {width: 75%;}
			  .col-s-10 {width: 83.33%;}
			  .col-s-11 {width: 91.66%;}
			  .col-s-12 {width: 100%;}
			}


			@media only screen and (min-width: 768px) {
			  /* For desktop: */
			  .col-1 {width: 8.33%;}
			  .col-2 {width: 16.66%;}
			  .col-3 {width: 25%;}
			  .col-4 {width: 33.33%;}
			  .col-5 {width: 41.66%;}
			  .col-6 {width: 50%;}
			  .col-7 {width: 58.33%;}
			  .col-8 {width: 66.66%;}
			  .col-9 {width: 75%;}
			  .col-10 {width: 83.33%;}
			  .col-11 {width: 91.66%;}
			  .col-12 {width: 100%;}
			}

			
			/*float RWD columns left*/
			[class*="col-"] {
			  float: left;
			  padding: 1px;
			  /*border: 1px solid red;*/
			}

			/* For mobile phones: */
			[class*="col14-"] {
			  width: 100%;
			}

			@media only screen and (min-width: 600px) {
			  /* For tablets: */
			  .col14-s-1 {width: 7.14%;}
			  .col14-s-2 {width: 14.28%;}
			  .col14-s-3 {width: 21.43%;}
			  .col14-s-4 {width: 28.57%;}
			  .col14-s-5 {width: 35.71%;}
			  .col14-s-6 {width: 42.86%;}
			  .col14-s-7 {width: 50%;}
			  .col14-s-8 {width: 57.14%;}
			  .col14-s-9 {width: 64.28%;}
			  .col14-s-10 {width: 71.43%;}
			  .col14-s-11 {width: 78.57%;}
			  .col14-s-12 {width: 85.71%;}
			  .col14-s-13 {width: 92.86%;}
			  .col14-s-14 {width: 100%;}
			}


			@media only screen and (min-width: 768px) {
			  /* For desktop: */
			  .col14-1 {width: 7.14%;}
			  .col14-2 {width: 14.28%;}
			  .col14-3 {width: 21.43%;}
			  .col14-4 {width: 28.57%;}
			  .col14-5 {width: 35.71%;}
			  .col14-6 {width: 42.86%;}
			  .col14-7 {width: 50%;}
			  .col14-8 {width: 57.14%;}
			  .col14-9 {width: 64.28%;}
			  .col14-10 {width: 71.43%;}
			  .col14-11 {width: 78.57%;}
			  .col14-12 {width: 85.71%;}
			  .col14-13 {width: 92.86%;}
			  .col14-14 {width: 100%;}
			}

			
			/*float RWD columns left*/
			[class*="col14-"] {
			  float: left;
			  padding: 1px;
			  /*border: 1px solid red;*/
			}

			/* For mobile phones: */
			[class*="col8-"] {
			  width: 100%;
			}

			@media only screen and (min-width: 600px) {
			  /* For tablets: */
			  .col8-s-1 {width: 12.5%;}
			  .col8-s-2 {width: 25%;}
			  .col8-s-3 {width: 37.5%;}
			  .col8-s-4 {width: 50%;}
			  .col8-s-5 {width: 62.5%;}
			  .col8-s-6 {width: 75%;}
			  .col8-s-7 {width: 87.5%;}
			  .col8-s-8 {width: 100%;}
			}


			@media only screen and (min-width: 768px) {
			  /* For desktop: */
			  .col8-1 {width: 12.5%;}
			  .col8-2 {width: 25%;}
			  .col8-3 {width: 37.5%;}
			  .col8-4 {width: 50%;}
			  .col8-5 {width: 62.5%;}
			  .col8-6 {width: 75%;}
			  .col8-7 {width: 87.5%;}
			  .col8-8 {width: 100%;}
			}

			
			/*float RWD columns left*/
			[class*="col8-"] {
			  float: left;
			  padding: 1px;
			  /*border: 1px solid red;*/
			}




			/*clear after RWD columns in a row*/
			.row::after {
			  content: "";
			  clear: both;
			  display: table;
			}
			
			/*RWD image resize*/
			img {
			  max-width: 100%;
			  height: auto;
			}

			/*alternate responsive image class if above doesn't work*/
			.responsive-img {
			  max-width: 100%;
			  height: auto;
			}			

			html{
			  min-height: 100%;
			  position:relative;
			}

            body
            {
				background-image: var(--background-image);
				background-size: cover;
				background-repeat: no-repeat;
				width: 100%;
				min-height: 100%;
				font-family: var(--myfont);
				font-size: calc(10px + 0.8vw);
                color: var(--body-font-color);
				padding: 0;
				margin: 0;
				
				/* flexbox code*/
				display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
			    display: -moz-box;      /* OLD: Firefox (buggy) */
			    display: -ms-flexbox;   /* MID: IE 10 */
			    display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
			    display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

			    -webkit-box-align: center; -moz-box-align: center; /* OLD… */
			    -ms-flex-align: center; /* You know the drill now… */
			    -webkit-align-items: center;
			    align-items: center;

			    -webkit-box-pack: center; -moz-box-pack: center;
			    -ms-flex-pack: center;
			    -webkit-justify-content: center;
			    justify-content: center;

			    margin: 0;
			    height: 100%;
			    width: 100% /* needed for Firefox */
				
            }

			/* for Flexbox */
			h1 {
			   display: -webkit-box; display: -moz-box;
			   display: -ms-flexbox;
			   display: -webkit-flex;
			   display: flex;
			   -webkit-box-align: center; -moz-box-align: center;
			   -ms-flex-align: center;
			   -webkit-align-items: center;
			   align-items: center;

			   height: 10rem;
			}

            input
            {
				font-family: var(--myfont);
				font-size: calc(10px + 0.8vw);
                color: var(--body-font-color);
				
            }
			
			textarea
            {
				font-family: var(--myfont);
				font-size: calc(10px + 0.8vw);
                color: var(--body-font-color);
				
            }

			det
			{
				font-size: calc(7px + 0.5vw);
			}
			
			.announce
			{
				/*background-color: var(--background-color);*/
				/*background-image: var(--background-image);*/
				font-family: var(--myfont);
				font-size: calc(25px + 2vw);
                color: var(--body-font-color);
				text-align:center;
				padding-bottom: 2vw;
				
            }
			
			.announce-no-pad
			{
				/*background-color: var(--background-color);*/
				/*background-image: var(--background-image);*/
				font-family: var(--myfont);
				font-size: calc(30px + 1.5vw);
                color: var(--body-font-color);
				text-align:center;
				padding-bottom: 0.8vw;
				
            }			

			.sub-announce
			{
				/*background-color: var(--background-color);*/
				/*background-image: var(--background-image);*/
				/*font-family: 'Girassol', cursive;*/
				font-family: var(--myfont);
				font-size: calc(20px + 1vw);
                color: var(--body-font-color);
				text-align:center;
				padding-bottom: 1vw;
				
            }
			
			/*#facebook {
				display: none;
			}

			@media screen and (min-width: 722px) {	*/
			/*facebook page plugin has min width of 180px so only display on screens that can accomodate (4xmin width)*/
			/*#facebook
			{
				font-family: 'Titillium', sans-serif;
				font-size: 1.3vw;
				font-weight: 900;
				background-color: #3b5998;	
				display: block;
			}
			}	*/		
			
			.gmap-container {
				overflow:hidden;
				padding-bottom:75%;
				position:relative;
				height:0;
			}

			.gmap-container iframe {
				left:0;
				top:0;
				height:100%;
				width:100%;
				position:absolute;
			}
			
			/* emulate table */
			/*#table{ 
				display: table; 
			}
			.tr{ 
				display: table-row; 
			}
			.td{ 
				display: table-cell; 
			}*/
			
			
            /* Default Anchor Style */
            body a
            {
                color: var(--anchor-color);
                outline-style: none;
                text-decoration: none;
            }
            body a:hover
            {
                color: var(--anchor-color);
            }
			



			.header
			{
				font-size: calc(20px + 1.3vw);
				text-align: center;
				font-weight: 900;
				color: var(--header-font-color);
			}	

			.header2
			{
				font-size: calc(11px + 0.9vw); 
				text-align: center;
				font-weight: 600;
				color: var(--header2-font-color);
			}	
			
			.header3
			{
				font-size: calc(10px + 0.8vw); 
				font-weight: 500;
				color: var(--header3-font-color);
			}	

            .titlebox
            {
                /*background-color: var(--titlebox-background-color);
				/*background-image: var(--titlebox-background-image);*/
                /*border: 0.1vw solid #162053;*/
				/*background-color: var(--background-color);*/
				/*background-image: linear-gradient(to right, var(--background-color), var(--alt-background-color));*/
                padding: 1vw;
				font-size: calc(11px + 0.9vw); 
				font-weight: 600;
				color: var(--titlebox-font-color);
            }

            /*.tablerow
            {
                background: rgba(192,192,192,.5); 
				
				
				/*background-color: var(--background-color);
				background-image: linear-gradient(to right, var(--background-color), var(--alt-background-color));
                padding: 1vw;
				color: var(--body-font-color);
            }*/
			
            /*.alttablerow
            {
                background-color: var(--alt-background-color);
				background-image: linear-gradient(to bottom left, var(--alt-background-color), var(--background-color));
                padding: 1vw;
				color: var(--body-font-color);
            }		*/	
			
            .subtitlebox
            {
                background-color: #3e2463;
				background-image: linear-gradient(to bottom right, #4c2043, #3e2463);
                /*border: 0.1vw solid #3e2463;*/
                padding: 1vw;
				font-size: calc(11px + 0.9vw); 
				font-weight: 600;
				color: var(--header2-font-color);
            }

			.highlightbox
            {
                background-color: var(--highlightbox-background-color);
				background-image: var(--highlightbox-background-image);
                /*border: 0.1vw solid #fbaf19;*/
                padding: 1vw;
				font-size: calc(11px + 0.9vw); 
				font-weight: 600;
				color: var(--highlightbox-font-color);
            }
			
			.alertboxsmall
            {
                background-color: var(--alertbox-background-color);
				background-image: var(--alertbox-background-image);
                /*border: 0.1vw solid #fbaf19;*/
                padding: 0.1vw;
				font-family: var(--myfont);
				font-size: calc(8px + 0.6vw);
				font-weight: 400;
				color: var(--alertbox-font-color);
            }
			
			.alertbox
            {
                background-color: var(--alertbox-background-color);
				background-image: var(--alertbox-background-image);
                /*border: 0.1vw solid #fbaf19;*/
                padding: 1vw;
				font-size: calc(11px + 0.9vw); 
				font-weight: 600;
				color: var(--alertbox-font-color);
            }			
			
			.bookbox
            {
                background-color: var(--bookbox-background-color);
				background-image: linear-gradient(to top left, #e75527, #fbaf19);
                padding: 1vw;
				font-size: calc(10px + 0.8vw); 
				font-weight: 600;
				color: var(--bookbox-font-color);
            }			

            .bookbox a
            {
                color: var(--bookbox-font-color);
                outline-style: none;
                text-decoration: none;
            }
            .bookbox a:hover
            {
                text-decoration: underline;
            }

			
            .greybox
            {
                background-color: var(--greybox-background-color);
                border: 0.1vw solid #cccccc;
                color: var(--greybox-font-color);
                padding: 1vw;
            }
            .bluebox
            {
                background-color: var(--bluebox-background-color);
                border: 1vw solid #d4dae8;
                color: var(--greybox-font-color);
                padding: 1vw;
            }
            .infobox
            {
                background-color: var(--infobox-background-color);
                border: 1vw solid #E6E6E6;
                color: var(--infobox-font-color);
                padding: 1vw;
            }
            .errorbox
            {
                background-color: var(--errorbox-background-color);
                border: 1vw solid #dd3c10;
                color: var(--errorbox-font-color);
                padding: 1vw;
            }
            .yellowbox
            {
                background-color: var(--yellowbox-background-color);
                border: 1vw solid #fafaac;
                color: var(--yellowbox-font-color);
                padding: 1vw;
            }

			a.my-button{
			 background-color: rgba(228, 231, 239, 0.7); 
			 color: #132e3d;
			 font-family: var(--myfont);
			 /*font-size: calc(13px + 1vw);*/
			 padding: calc(2px + 0.1vw) calc(2px + 0.1vw);
			 border: 0px solid #000;
			 border-radius: calc(13px + 1vw);
			 display: inline-block;
			 box-shadow: 1px 4px 19px 2px var(--color12);
			 }
			a.my-button:hover{
			 background-color: rgba(228, 231, 239, 1); 
			}
			a.my-button:active{
			 transform: scale(0.95);
			}

			button.my-button{
			 background-color: rgba(228, 231, 239, 0.7); 
			 color: #132e3d;
			 font-family: var(--myfont);
			 /*font-size: calc(13px + 1vw);*/
			 padding: calc(2px + 0.1vw) calc(2px + 0.1vw);
			 border: 0px solid #000;
			 border-radius: calc(13px + 1vw);
			 display: inline-block;
			 box-shadow: 1px 4px 19px 2px var(--color12);
			 }
			button.my-button:hover{
			 background-color: rgba(228, 231, 239, 1); 
			}
			button.my-button:active{
			 transform: scale(0.95);
			}
			
			.container {
			  display: flex;
			}
			.container > div {
			  flex: 1; /*grow*/
			}
			
			.footer {
			   position: fixed;
			   left: 0;
			   bottom: 0;
			   width: 100%;
			   background-color: yellow;
			   color: black;
			   text-align: center;
			}   
			   
			  #logo {
				/*margin: 1em auto;*/
				width: 682px;
				height: 210px;
			  }

			  #logo a {
				position: absolute;
			  }
			  #logo a img {
				/*padding: 10px;
				border: 1px solid #ccc;
				background: #fff;*/
			  }

			  #logo a:nth-of-type(1) {
				animation-name: fader;
				animation-delay: 0.5s;
				animation-duration: 0.5s;
				z-index: 20;
			  }
			  #logo a:nth-of-type(2) {
				z-index: 10;
			  }
			  #logo a:nth-of-type(n+3) {
				display: none;
			  }

			  @keyframes fader {
				from { opacity: 1.0; }
				to   { opacity: 0.0; }
			  }
/*disorganised paper stack */
.paper {
  background: #fff;
  padding: 30px;
  position: relative;
}

.paper,
.paper::before,
.paper::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}

/*#cycler{position:relative;height:500px;width:500px;}*/
#cycler{position:relative;height:auto;width:100%;}

@media only screen and (min-width: 600px) {
#cycler{position:relative;height:33vw;width:33vw;}
}

#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  /*width: 240px; 
  height: 240px; */
  width: 500px; 
  height: 500px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

@media only screen and (min-width: 600px) {
#slideshow { 
  margin: 50px auto; 
  position: relative; 
  /*width: 240px; 
  height: 240px; */
  width: 33vw; 
  height: 33vw; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--background-color);
  background-image: var(--background-image);
}

/*special settings for responsive contact form*/
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

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

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

.contactformcontainer {
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

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

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}