/*--------------------------------------------------------------------------
 Filename:			DL-css.css
 Description:		Global CSS

 Contents:
   1. body (default)    
   2. standard para styles
		h1, h2, h3, h4, h5, h6, p 
   3. tables 
		td,th
   4. links
   5. images
   6. containers
        container
        container-indented
   7. header
   8. navigation bar
		topnav
		sidenav
   9. columns
  10. sidebar
  11. content
  12. footer
  13. buttons inc dropdown
  14. lists inc dropdown
  15. float/clear classes
  16. text styles
        palatino
        white
        footer-text
        photo-caption
        rental-prices
        sidebar-text
        to-check
  17. backgrounds
  18. images
  19. slideshow
        fixed
        sideswipe
  20. toggle show/hide (responsive)
  21. opening panel
  
------------------------------------------------------------------------- */



/*1. body
------------------------------------------------------------------------- */
body {
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    /*font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";*/
	/*font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";*/
    /*font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";*/
	font-family: Palatino, "Book Antiqua", serif;
	/*----------------N.B. NEED TO SET FONT FAMILY SEPARATELY FOR DROPBTN & ACCORDION--------------------------------*/
	letter-spacing: 0.05vw;
	word-spacing: .3vw;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #CCC;
	font-size: 1.4vw;
	font-weight: normal;
}
h1 {
	font-size: 2.8vw
}
h2 {
	font-size: 2.1vw
}

@media screen and (max-width: 800px) {
	body {
		font-size: 2.8vw
	}
	h1 {
		font-size: 4vw
	}
	h2 {
		font-size: 3vw
	}
	h5 {
		font-size: 2.5vw
	}
}
@media screen and (max-width: 480px) {
	body {
		font-size: 3.5vw
	}
	h1 {
		font-size: 6vw
	}
	h2 {
		font-size: 4.5vw
	}
	h5 {
		font-size: 4vw
	}
}


/*2. standard elements
------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p {
	margin-top: 15px;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	text-align: center;
	font-style: normal;
}


/*3. tables
------------------------------------------------------------------------- */
table {
	border: 1px solid black;
}
td,th {
	color: #000;
	font-size: 1.2vw;
	font-weight: bold;
}
.tabletextsmall {
	font-size: 1.1vw;
}

@media screen and (max-width: 800px) {
	td, th {font-size: 2.2vw}
	.tabletextsmall {font-size: 2vw}
}
@media screen and (max-width: 480px) {
	td, th {font-size: 3.5vw}
	.tabletextsmall {font-size: 3vw}
}

.tablewidth50 {
	width:50%;
}
.tablewidth75 {
	width:75%;
}
.tablewidth90 {
	width: 90%;
}

@media screen and (max-width: 800px) {
	.tablewidth50 {
		width: 70%
	}
}
@media screen and (max-width: 480px) {
	.tablewidth50 {
		width: 90%
	}
	.tablewidth75 {
		width: 90%
	}
}


/*4. links
------------------------------------------------------------------------- */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #000;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #848484;
	text-decoration: underline;
}


/*5. images
------------------------------------------------------------------------- */
.imagewidth5 {
	width:5%;
}
.imagewidth25 {
	width:25%;
}
.imagewidth30 {
	width:30%;
}
.imagewidth35 {
	width:35%;
}
.imagewidth50 {
	width:50%;
}
.imagewidth75 {
	width:75%;
}
.imagewidth90 {
	width: 90%;
}

@media screen and (max-width: 800px) {
    .imagewidth25 {
		width: 35%;
	}
	.imagewidth30 {
		width: 42%;
	}
	.imagewidth35 {
		width: 50%;
	}
	.imagewidth50 {
		width: 70%;
	}
}
@media screen and (max-width: 480px) {
    .imagewidth25 {
		width: 45%;
	}
	.imagewidth30 {
		width: 64%;
	}
	.imagewidth35 {
		width: 75%;
	}
	.imagewidth50 {
		width: 90%;
	}
	.imagewidth75 {
		width: 100%;
	}
	.imagewidth90 {
		width: 100%;
	}
}



/*6. containers
------------------------------------------------------------------------- */
.container {
	width: 95%;
	background-color: #CCC;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.container-indented {
	width: 70%;
	margin-left: 20%;
	background-color: #CCC;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}


/*7. header
------------------------------------------------------------------------- */
.header {
	background-color: #CCC;
	font-size: x-small;
	text-align: center;
}


/*8. navigation bar
------------------------------------------------------------------------- */
/*8a. topnav*/
.topnav {
  list-style-type: none;
	
  /*commence centering
  display: flex;
  align-items: center;
  justify-content: center;
  /*end centering*/
	
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: visible; /*---------changed from "hidden" to enable responsive click topnav*/
  background-color: #333;
}
.topnav a {
  float: left; 
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.topnav a:hover {
  background-color: #555;
  color: black;
}

@media screen and (max-width: 480px) {
  .topnav a {
    float: none;
/*  width: 100%;-----------DELETED FOR RESPONSIVE TOPNAV*/
	text-align: center;
  }
}

.topnav-active {  
  background-color: #4CAF50;
  color: white;
}
.topnav .icon {
  display: none;
}


/*8b. sidenav*/
.sidenav-bar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav-panel {
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav-bar a, .sidenav-panel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav-bar a:hover, .sidenav-panel a:hover {
  color: #f1f1f1;
}
.sidenav-bar .closebtn, .sidenav-panel .closebtn {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 24px;
  margin-left: 50px;
}
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}
.openbtn:hover {
  background-color:#444;
}

#main {
  transition: margin-left .5s;
  padding: 0;
}/*-----------------used by sidenav.js-------original padding: 16px-----*/

@media screen and (max-height: 450px) {
  .sidenav-bar {padding-top: 15px;}
  .sidenav-bar a {font-size: 18px;}
  .sidenav-panel {padding-top: 15px;}
  .sidenav-panel a {font-size: 18px;}
}


/*9. columns
------------------------------------------------------------------------- */
.leftcolumn{
  float: left;
  width: 11%;
  padding-bottom: 10px;
  background-color: #CCC;
  height: auto;
  page-break-after: auto;
  background-position: center center;
  clip: rect(auto,auto,auto,auto);
  color: #FFF;
}
.leftcolumn-light {
  float: left;
  width: 11%;
  padding-bottom: 10px;
  background-color: #EEE;
  height: auto;
  page-break-after: auto;
  background-position: center center;
  clip: rect(auto,auto,auto,auto);
  border: medium solid #E7E7E7;
  color: #000;
}
.leftcolumn-dark {
  float: left;
  width: 11%;
  padding-bottom: 10px;
  background-color: #AFAFAF;
  height: auto;
  page-break-after: auto;
  background-position: center center;
  clip: rect(auto,auto,auto,auto);
  border: medium solid #E7E7E7;
  color: #FFFFFF;  
}
.leftcolumn-dark a {
  color: #FFFFFF;
}
.rightcolumn {
  float: left;
  width: 80%;
  background-color: #CCC;
  padding-left: 20px;
}

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

@media screen and (max-width: 800px) {
  .leftcolumn, .leftcolumn-light, .leftcolumn-dark, .rightcolumn {
    width: 100%;
    border: none;
  }
	.rightcolumn {
		padding-left:0
	}
}


/*10. sidebars
------------------------------------------------------------------------- */
.sidebar1 {
	float: left;
	width: 11%;
	padding-bottom: 10px;
	background-color: #EEE;
	height: auto;
	page-break-after: auto;
	background-position: center center;
	display: marker;
	clip: rect(auto,auto,auto,auto);
	border: medium solid #E7E7E7;
	color: #000;
}
.sidebar2 {
	float: left;
	width: 11%;
	padding-bottom: 10px;
	background-color: #AFAFAF;
	height: auto;
	page-break-after: auto;
	background-position: center center;
	display: marker;
	clip: rect(auto,auto,auto,auto);
	border: medium solid #E7E7E7;
	color: #FFFFFF;
}
.sidebar2 a:link {
color: #FFFFFF;
}
	

/*11. content
------------------------------------------------------------------------- */
.content {
	padding: 10px 40px;
	width: 80%;
	float: left;
	font-style: normal;
}/*---------------floated left, i.e. for layout when sidebar is in lefthand column*/
.content-centred {
	padding: 10px 40px;
	width: 80%;
	float: left;
	margin-left: 10%;
	font-style: normal;
}

@media screen and (max-width: 800px) {
  .content {
	width: 90%;
    }
	.content-centred {
	width: 90%;
	margin-left: 5%;
	}
}
@media screen and (max-width: 480px) {
  .content {
	width: 100%;
    }
	.content-centred {
	width: 100%;
	margin-left: 0%;
	}
}


/*12. footer
------------------------------------------------------------------------- */
.footer {
	padding: 10px 0;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	background-color: #999;
}
.footer-indented {
	padding: 10px;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	background-color: #999;
}


/*13. 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 ";"*/
}
.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*/
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-family: inherit;
  letter-spacing: .1vw;
  word-spacing: .3vw;
  font-size: 1.2vw;/*---------------topnav button font-size*/
  border: none;
  margin: 0;
  width: 100%;/*------------------button width as % of placeholder (.dropdown)*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
/*min-width: 160px;*/
  width: inherit;/*------------------same width as parent (.dropdown)*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content-hover {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
/*min-width: 160px;*/
  width: inherit;/*------------------same width as parent (.dropdown)*/  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content-click {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
/*min-width: 160px;*/
  width: inherit;/*------------------same width as parent (.dropdown)but too big when inter-button spacing applied - doesn't work with topnav click, goes too narrow*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.topnav .dropdown-content-click{
  width: 14.7%;	
}
.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-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-content-click a {
  float: none;    /*--------ADDED FOR RESPONSIVE TOPNAV*/
  color: black;
  padding: 12px 16px;/*--------no bottom padding to reduce height-extent of dropdown*/
  font-size: 1.2vw; /*------dropdown links font size*/
  text-decoration: none;
  display: block;
  text-align: center;
}
.topnav .dropdown-content-click a {
  padding: 12px 16px 0px;      /*--------no bottom padding to reduce height-extent of dropdown from topnav*/
}
.dropdown:hover .dropbtn, .dropdown:focus .dropbtn {
  background-color: #3e8e41;
  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;
  /*position: relative;/*-------------ADDED by NDH, doesn't work with click dropnav, clickdown displaces text below*/
}
.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;
}
.menu-icon{
  font-size:2.2vw;
}

@media screen and (max-width: 600px) {
  .dropdown {
    width: inherit;
  }                       /*-------ADDED to put accordion width back to 100%*/
}
@media screen and (max-width: 800px) {
	.dropbtn, .accordion, .dropdown-content a, .dropdown-content-hover a, .dropdown-content-click a, .accordion-panel a {
		font-size: 1.8vw;
	}
	.menu-icon{
		font-size: 3vw;
	}
}
@media screen and (max-width: 600px) {
	.dropbtn, .accordion, .dropdown-content a, .dropdown-content-hover a, .dropdown-content-click a, .accordion-panel a {
		font-size: 2.2vw;
	}
	.menu-icon{
		font-size: 3.5vw;
	}
}
@media screen and (max-width: 480px) {
	.dropbtn, .accordion, .dropdown-content a, .dropdown-content-hover a, .dropdown-content-click a, .accordion-panel a {
		font-size: 2.8vw;
	}
	.menu-icon{
		font-size: 5vw;
	}
}
@media screen and (max-width: 600px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    display: block;
    float: right; /*----------was float:right*/
	margin-right: 44vw; /*------to center menu icon when visible*/
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
@media screen and (max-width: 480px) {
  .topnav a, .dropdown .dropbtn {
    display: none; 
  }
  .topnav a.icon {
    display: block;
    float: right; /*----------was float:right*/
	margin-right: 44vw; /*------to center menu icon when visible*/
  }
}

/*14. lists
Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector.
------------------------------------------------------------------------- */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
li {
  float: none;
}
li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover{
  background-color: #ccc;
  color: #eee;
}
li a:active, li a:focus{
  color: inherit;
}
.list-inline {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: center;
}
.list-inline li {
	display: inline-block;
	float: none;
}

@media screen and (max-width: 800px) {
	.list-inline li {
		display: block;
	}
}


/*15. miscellaneous float/clear classes 
------------------------------------------------------------------------- */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


/*16. text styles
------------------------------------------------------------------------- */
.palatino {
	color: #000;
	font-weight: bold;
	font-family: Palatino, "Book Antiqua", serif;
}
.white {
	color: #FFFFFF;
}
.footer-text {	
	color: #000;
	font-size: 1.4vw;
	font-weight: bold;
} 
.footer-text-white {	
	color: #FFFFFF;
	font-size: 1.4vw;
	font-weight: bold;
}
@media screen and (max-width: 480px) {
	.footer-text-white {font-size: 4vw}
	}
@media screen and (max-width: 800px) {
    .footer-text-white {font-size: 2.5vw}
}
.footer-text-white a:link {
	color:#FFFFFF;
}
.footer-text-white a:hover {
	color: #848484;
}
.photo-caption {	
	color: #000;
	font-size: 1.4vw;
	font-weight: bold;
	font-style: italic;
}
@media screen and (max-width: 480px) {
	.photo-caption {font-size: 3.5vw}
	}
@media screen and (max-width: 800px) {
    .photo-caption {font-size: 2.8vw}
}
.rentalprices {	color: #FF8040;
}
.sidebar-text {	
	color: #000;
	font-size: 1.5vw;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.indented10 {
	padding: 0 10%;
}
.indented15 {
	padding: 0 15%;
}
.indented20 {
	padding: 0 20%;
}
.indented25 {
	padding: 0 25%;
}

@media screen and (max-width: 480px) {
  .indented10, .indented15, .indented20, .indented25 {
	padding: 0;
    }
}
.tocheck {	color: #0000A0;
}


/*17. background
------------------------------------------------------------------------- */
.dark-background {
	background-color: #C0C0C0;
}
.darkest-background {
	background-color: #AFAFAF;
}


/*18. images
------------------------------------------------------------------------- */
.icon-image-size {
	width: 45%;
}
@media screen and (max-width: 800px) {
  .icon-image-size {
	width: 10%;
    }
}

img {
	vertical-align: middle;
} /*--------------------------------------------from slideshow stylesheet*/


/*19. slideshow
------------------------------------------------------------------------- */
/*19a. fixed--------------------------------*/
* {
	box-sizing: border-box;
}
.mySlides, .mySlides1, .mySlides2 {display: none} {
	display: none;
}/*----------------------add as many slideshows as required here*/
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.prevslide, .nextslide {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.nextslide {
  right: 0;
  border-radius: 3px 0 0 3px;
}/*-----------------------------Position the "next button" to the right */
.prevslide:hover, .nextslide:hover {
  background-color: rgba(0,0,0,0.8);
}/*------------------- On hover, add a black background color with a little bit see-through */
.caption-text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.slideshow-active, .dot:hover {
  background-color: #717171;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prevslide, .nextslide,.caption-text {font-size: 11px}
}

/*19b. sideswipe---------------------------*/
.slider {
  width: 70%;/*--------------------------was 300px*/
  margin-left: 15%;/*---------------------ADDED BY NDH*/
  text-align: center;
  overflow: hidden;/*----------------------was hidden, also works with auto*/
  display: block; /*---------------------ADDED BY NDH*/
}
.slides {
  display: flex;/*---------was flex*/
  overflow-x: auto;/*------was auto*/
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /*-----the following replaced by scroll-snap-type code above
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;/*-------------------SLIDE WIDTH - was 300px*/
  height: 40vw;/*------------------SLIDE HEIGHT - was 300px*/
  margin-right: 0px;/*-------------PADDING BETWEEN SLIDES*/
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}/*--------------------------- NDH amendment ".slide" replacing original ".slides > div"----*/
.slider img {
  object-fit: cover;/*---------------------original "cover" option crops image to fit container*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;/*--------------------------enlarges photo but stays within same-size container so cropped*/
}
/*buttons*/
.slider > a {
  display: inline-flex; /*--------------was inline-flex*/
  width: 2.5vw; /*---------------------was 1.5rem*/
  height: 2.5vw;/*---------------------was 1.5rem*/
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 1vw 0;/*---------------------was 0.5rem*/
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}/*-------------------- If don't need button navigation */

@media screen and (max-width: 800px) {
  .slider {
	width: 80%;
	margin-left: 10%;
    }
}
@media screen and (max-width: 480px) {
  .slider {
	width: 100%;
	margin-left: 0;
	}
   .slide {
	height: 60vw;
	}
}


/*20.toggle show/hide ---------------------------*/
.toggle-800 {
  display: none;
}
@media screen and (max-width: 800px) {
  .toggle-800 {
	display: block;
    }
}

.toggle-600 {
  display: none;
}
@media screen and (max-width: 600px) {
  .toggle-600 {
	display: block;
    }
}

.toggle-480 {
  display: none;
}
@media screen and (max-width: 480px) {
  .toggle-480 {
	display: block;
    }
}

/*21.opening panel-----------------------*/
.opening-panel {
  background-image: url("../pix/infinity-pool.jpg");
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/  
  background-position: center center;
  background-size: cover; /*-------for element-fill use "cover", for stretch-scaling use 100% 100%*/
  min-height: 70vw;
}
@media screen and (max-width: 800px) {
  .opening-panel {
	min-height: 80vw;
    }
}
@media screen and (max-width: 600px) {
  .opening-panel {
	min-height: 90vw;
    }
}
@media screen and (max-width: 480px) {
  .opening-panel {
	min-height: 100vw;
    }
}

/*-----------FOR PORTRAIT VIEWING--------------*/
@media only screen and (orientation: portrait) and (max-width:800px){
  .opening-panel {
    min-height: 120vw;
  }
}
@media only screen and (orientation: portrait) and (max-width:800px){
  .opening-panel {
    min-height: 150vw;
  }
}
@media only screen and (orientation: portrait) and (max-width:600px){
  .opening-panel {
    min-height: 180vw;
  }
}