body {
    margin: 0;
    font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

img {max-width:100%;height:auto}
h2 {font-size:2rem}
h3 {font-size:1.75rem}
h4 {font-size:1rem}


a:visited {text-decoration:none; color:#96a762;} 
a:link { text-decoration:none; color:#96a762; }
a:hover{ color:#6296A7; }

hr {width:100%}

* {box-sizing: border-box;}/*sets all elements width & height to include padding and border*/

.floatRight{
  float:right;
	padding-right:1rem;}
	
.floatLeft{
  float:left;
	padding-right:1rem;}
	
.mb0 {margin-bottom:0}
.mt0 {margin-top:0}
/*Hide items for small screen*/
@media screen and (max-width: 500px) {
.hideSmall {display:none}
}

/*--TOP HEADER-------------------------------------------------------------------*/
/*Top Header*/
	header {
  padding: 0px;
  font-size: 1.2em;
  color: #666;
  background-color: #fff;
	height:62px;
	position:relative
}
/*text in top header*/
.theSquare /*Vertically centres text and aligns to the right*/
{ margin: 0;
  position: absolute;
	left:80px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	float:right;
	}


/*--*BIG "HERO" HEADING FOR HOME PAGE--------------------------------------------*/
.hero{
  background-image: url("../images/parwich-view-header.jpg");
  background-color: #96a76290; /*50% landscape green*/
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;}

.hero-text{
	padding: 2rem 2rem;
	text-align: center;
	color: white;
	text-shadow: 3px 3px 5px black;}

/*All instances of h1 inside hero-text in big heading*/
.hero-text h1{font-size: 3rem}
.hero-text h2{font-style:italic;font-face: "Times New Roman", Georgia, Serif}

/*smaller heading for small screens*/
@media screen and (max-width: 700px) {
.hero-text h1 {font-size:2rem;} /*style of h1 which is within .hero-text*/
.hero-text h2 {font-size:1.25rem}
.hero {height: 250px}
}

/*and for Galaxy Fold*/
@media screen and (max-width: 340px) {
.hero-text h1 {font-size:2rem;padding: 0;margin-bottom:.75rem;margin-top:.75rem} 
.hero-text h2 {font-size:1.2rem;padding: 0;margin:0;font-style:italic}
.hero {height: 250px}
}


/*--FRONT PAGE 2 COLUMN TEXT AND IMAGE "SHOWCASE"--------------------------------*/
/*2 column area showcase*/
.column-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));/*Minimum size 280 as size of Galaxy Fold*/
  background-color: #fff;
}

.backgroundim {background-image: url("https://www.jillstudholme.com/test/images/dogs-peak-district-cottage.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
	min-height: 22rem;
	}
	
.showcase-text{
padding:3rem
}


/*--CARD PANELS - Box with Image with text underneath, used on home page----------*/

/*Sets width etc of columns for panels. Used 280 as minimum width of Galaxy Fold*/
.column-panels {background-color: #eee;color:#333;text-align:center;grid-column-gap:2rem;padding:0 3rem;display: grid;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

/*style for the "card" image*/
.cardpanel-img {
    display: block;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
		margin-top:0;
}

/*style for the card text*/
.cardpanel-body {
    padding: 1.25rem;
}

/*surrounding panel style*/
.panel {border: 1px solid #ccc;background:white;max-width:460px;margin: 0 auto;margin-top:2rem;margin-bottom:2rem;}

/*From three "cards" to one for smaller screens*/
@media screen and (max-width: 808px){
.column-panels {display: grid;  grid-template-columns: 1fr;}
}


/*--ONE COLUMN - USED ON MOST INSIDE PAGES---------------------------------------*/

.column-1 {
    display: grid;
    grid-template-columns: minmax(auto, 900px); /*Sets maximum width to 900px*/
    justify-content: center;
    padding: 2rem 1rem;
}



/*--FOOTER-----------------------------------------------------------------------*/
/*multi-column footer*/
.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /*wraps the columns at mobile - min size of each column is 280px, */
  background-color: #fff;
  border-top: 1px solid #999;
  color:#333;
}

/*Use divs for each column in the footer*/
.footer > div {
  text-align: center;
  padding: 20px 0;
}

/*Hides third column in smaller screens so not uneven footer*/
@media screen and (max-width: 900px) and (min-width: 600px){
.hide3col {
  display:none
}
}


/*--iframe Calendar--------------------------------------------------------------*/

iframe:focus {    outline: none;}
iframe[seamless] {    display: block;}
#luxcal { width:100%; height:800px; margin:0px; border-style:solid; border-width:1px; border-color:grey; }
#lcmini {position:absolute; left:200px; width:450px; height:350px; overflow:hidden; }

/*-------------------------------------------------------------------------------*/



/*--NAVIGATION MENUS-------------------------------------------------------------*/
/* Add a green background color to the top navigation */
.topmenu {
  background-color: #96a762; /*landscape green*/
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Hide the link that should open and close the topmenu on small screens */
.topmenu .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topmenu */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #96a762; /*landscape green*/
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a different background on topmenu links and the dropdown button on hover */
.topmenu a:hover, .dropdown:hover .dropbtn {
  background-color: #c0c0cc;  /*stone */
  color: white;
}

/* Add a lighter background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #c0c0cc;  /*stone */
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topmenu (.icon) */
@media screen and (max-width: 700px) {
  .topmenu a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topmenu a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topmenu with JavaScript when the user clicks on the icon. This class makes the topmenu look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topmenu.responsive {position: relative;}
  .topmenu.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topmenu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topmenu.responsive .dropdown {float: none;}
  .topmenu.responsive .dropdown-content {position: relative;}
  .topmenu.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/*--END NAVFIGATION MENU STYLES-------------------------------------------------------*/


/*-FORMS------------------------------------------------------------------------------*/


.form-group {
  margin-bottom: 1rem;
}.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

/*Highlights selected form field*/
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}


.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}


select.form-control[size], select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:hover {
  color: #212529;
  text-decoration: none;
  background-color:#96a762;
  color:white;
}

/*--SLIDESHOW - updated version of the code you used previously------------------*/


.mySlides {display: none;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
	background-color: #96a76290;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: black; ;
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 1.25rem;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
	width: 100%;
  text-align: center;
  text-shadow: 2px 2px 4px #000000;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.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}
}