/* Notes: Main container has margin of 30px above 992px width and 3% below it, 
flex-row has a negative margin so flex coulmns have equal spacing */
:root {
  --Colour-1: #323232;
  --Colour-2: #e97312;
  --Colour-3: #999;
  --main-bg-color: #fff;
  --main-txt-color: #323232;
  --main-link-txt-color: #e97312;
  --main-active-txt-color:#999;
  --page-overlay-color: #000;
  --header-bg-color: #fff;
  --header-txt-color: #323232;
  --header-active-txt-color:  #e97312;
  --top-nav-bg-color: #323232;
  --top-nav-txt-color: #eee;
  --top-nav-active-txt-color: #e97312;
  --top-nav-icon-link-color:  var(--top-nav-txt-color);
  --top-nav-icon-active-color: var(--top-nav-active-txt-color);
  --top-nav-border-color: #ededed;
  --side-container-bg-color: #fff;
  --side-nav-border-color: #ededed;
  --side-nav-txt-color: var(--main-txt-color);
  --side-nav-active-txt-color:  #e97312;
  --side-nav-shadow-color: #3D5155;
  --footer-bg-color: #323232;
  --footer-txt-color: #E0E0E0;
  --footer-active-txt-color: #e97312;
  
  --input-bg-color: #fff;
  --input-txt-color: #222;
  --dialog-bg-color: #fff;
  --dialog-txt-color: #222;
  --image-border-color: #888;
  --contact-link-txt-color: #222;
  --contact-link-active-txt-color:  #e97312;
  --accorion-border-color: #ededed;
  --accordion-header-txt-color: #000;
  --button-bg-gradient-color1: #ffe19b;
  --button-bg-gradient-color2: #ffc439;
  --button-bg-gradient-active-color1: #fdcb55;
  --button-bg-gradient-active-color2: #fcb206;
  --button-txt-color: #222;
  --card-txt-color: #234;
  --feature-txt-colour:#000;
  --blue: #0277bd;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #cf000f;
  --orange: #ffc439;
  --yellow: #f7ca18;
  --green: #67a509;
  --teal: #478d97;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --success: #67a509;
  --info: #17a2b8;
  --warning: #f7ca18;
  --danger: #cf000f;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --header-height: 140px;
  --header-fixed-offset: calc(var(--header-height) + 20px);
}

* { 
  /*border: 1px solid red;*/
  box-sizing: border-box;
  margin: 0;
 /* padding: 0; */
}
body,
html {
  /*height: auto;*/
  font-family: arial, helvetica, sans-serif;
  /*font-size: 62.5%; for accessability based on browser (font normally 16px) - not used as gives problems with zoom on */
  /*font-size: 10px;*/
  font-size: 16px; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  font-weight: 400;
  line-height: 1.5;
  overflow: auto;
  text-align: left;
  width: 100%; 
}


/***********/
/* Genaric */
/***********/
h1 { 
  font-size: 1.8rem;
}
h2 {
  font-size: 1.7rem;
}
h3 {
  font-size: 1.6rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.4rem;
}
h6 {
  font-size: 1.3rem;
}
p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
/*@media screen and (min-width: 480px)
{
  p {
    text-align: justify;
  }
}*/
/*@media screen and (max-width: 480px) {
  html {
      font-size: 15px; 
  }
}
@media screen and (min-width: 480px) {
  html {
      font-size: 15px; 
  }
}
@media screen and (min-width: 768px) {
  html {
      font-size: 15px;
  }
}
@media screen and (min-width: 992px) {
  html {
      font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  html {
      font-size: 16px;
  }
}*/
h1, h2, h3, h4, h5, h6 {
  /*margin-bottom: 8px;
  font-family: inherit;*/
  font-weight: 400;
  /*line-height: 1.2;
  color: inherit;*/
}
a {
  -webkit-tap-highlight-color: transparent;
  color: var(--main-link-txt-color);
  text-decoration: none;
}
a:hover,
a:active {
  color: var(--main-active-txt-color);
}
.alternative-link-colors {
  color: var(--main-active-txt-color);
  text-decoration: none;
}
.alternative-link-colors:hover,
.alternative-link-colors:active {
 color: var(--main-link-txt-color);
}

/*ul {
  list-style: disc outside;
}
ul, ol {
  margin-bottom: 20px;
}*/
*:focus:not(.focus-visible) {
  outline: none;
}
img { /* fix for 3px gap issue on images in IE */
	vertical-align: bottom;
}
.img-float-left-res {
	float: left;
	margin: .5% 3% 3% 0;
}
.img-float-right-res {
	float: right;
	margin: .5% 0 3% 3%;
}
.img-float-left {
	float: left;
	margin: 5px 10px 5px 0px;
}
.img-float-right {
	float: right;
	margin: 5px 0px 5px 10px;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.rotate-right-45 {
  transform: rotate(45deg); /* Standard syntax */
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari prior 9.0 */
}
.rotate-left-45 {
  transform: rotate(315deg); /* Standard syntax */
  -ms-transform: rotate(315deg); /* IE 9 */
  -webkit-transform: rotate(315deg); /* Safari prior 9.0 */
}
.no-scroll { /* apply to body to stop scrolling when overlay is on */
  overflow: hidden;
  position: fixed;
}
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.ml-5 { margin-left: 5px;}
.ml-10 { margin-left: 10px;}
.ml-20 { margin-left: 20px;}
.pl-5 { padding-left: 5px;}
.pl-10 { padding-left: 10px;}
.pl-20 { padding-left: 20px;}
.pr-10 { padding-left: 10px;}
.pr-20 { padding-left: 20px;}
.line-orange {
  background-color: #ff7300; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #753805, #ff7300, #753805); 
  height: 1px;
  width: 100%;
}
map area{
  outline: none;
  border: 0; /* prevent IE9 (and earlier) from displaying a border around the image (when the image is a link). */
}
.flex-row {
  display: flex;
  display: -webkit-flex;
  flex: 100%;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-around;
}
.flex-column { /* use padding left and right so border box calculation for width  margin for top and bottom so collapse */
  flex-direction: column;
  margin: 1.6% 0;
  padding: 0 1.6%;
}
@media screen and (min-width: 992px) {
  .flex-column {
    margin: 16px 0;
    padding: 0 16px;
  }
}

/* button */
button {
  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
  outline: 0;
  width: fit-content;
  border: 0;
  padding: 10px 22px;
  margin: 20px 0;
  color: var(--button-txt-color);
  font-size: 1.2rem;
  transition:          0.3s ease;
  -webkit-transition:  0.3s ease;
  -moz-transition:     0.3s ease;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  line-height: normal;
}

/* input */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  { /* Stop the auto complete sugestions for input box turning background blue */
  -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
  box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
}
input,
textarea {
  border-radius:        5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
  color: var(--input-txt-color);
  outline: 0;
  background-color: var(--input-bg-color);
  width: 100%;
  border: 0;
  border: 1px solid #aaa;
  padding: 5px 5px;
  box-sizing: border-box;
}



/*******************/
/* Modal container */
/*******************/
/* Add Zoom Animation */
.zoom-in {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
.modal-container {
  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
  color: black;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -200px;
  /*transform: translate(-50%, -50%); */
  position: fixed;
  display: none;
  z-index: 5;
  background-color: #fefefe;
  padding: 45px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  width: 360px;
}
.modal-container.active {
  display: block;
}
.modal-container button,
.modal-container .button {
  width: 100%;
  margin-top: 10px;
  text-decoration: none;
  font-family: "montserrat", verdana, "Lato", sans-serif;
}
.modal-container button:active,
.modal-container .button:active, 
.modal-container button:hover,
.modal-container .button:hover {
  color: black;
}
.modal-container .message {
  color: black;
  text-align: center;
}


/**************/
/* accordion  */
/**************/
.accordion {
  border-bottom: 1px solid var(--accorion-border-color);
  cursor: pointer;
  padding: 1.25rem;
  margin: 0;
}
.accordion-header {
  color: var(--accordion-header-txt-color);
  margin-bottom: 0;
  padding-left: 2.125rem;
  position: relative;
}
.accordion-content {
  background-color: inherit;
  max-height: 0;/*display: none;*/
  overflow: hidden;
  padding: .625rem 2.125rem 0;
  text-align: left;
  transition:          max-height 0.2s ease-out;
  -webkit-transition:  max-height 0.2s ease-out;
  -moz-transition:     max-height 0.2s ease-out;
}
.accordion-icon {
  left: 0;
  position: absolute;
  top: 0;
  line-height: 1.5;
  width: 1.5rem;
  text-align: center;
}
.accordion.active .fa-angle-up {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.accordion p {
  margin: 10px 0;
}
.youtube-wrapper { /* allows it to be responsive */
  position: relative;
  /*overflow: hidden;*/
  padding-bottom: 75%; /*56.25%;*/
  text-align: center;
}
.youtube-wrapper iframe { /* allows it to be responsive */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 640px) {
  .youtube-wrapper { /* allows it to be responsive */
    position: relative;
    overflow: none;
    padding: 0%; /*56.25%;*/
    margin: 0 auto;
  }
  .youtube-wrapper iframe { /* allows it to be responsive */
    position: relative;

      width: 640px;
      height: 480px;
      border: 0;
  }
}


/*************/
/* preloader */
/*************/
#preloader-wrapper {
  animation:         spin 2s linear infinite;
  -moz-animation:    spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  border: 16px solid #f3f3f3;
  border-radius:         50%;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
  border-top: 16px solid #444749;
  height: 150px;
  left: 50%;
  margin: -75px 0 0 -75px;
  position: absolute;
  top: 50%;
  width: 150px;
  z-index: 99;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/******************/
/* page-container */
/******************/
.page-container {
  background-color: transparent;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}
@media screen and (min-width: 1200px) {
  .page-container {
    margin: 0 auto;
    /*width: 960px;*/
  }
}



/****************/
/* page-overlay */
/****************/
.page-overlay {
  background-color: var(--page-overlay-color);
  height: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3; 
}
.show {
  animation:         show 500ms linear;
  -moz-animation:    show 500ms linear;
  -webkit-animation: show 500ms linear;
  animation-fill-mode: forwards;
}
.hide { /* not on when page first loads as it runs animation, so only on when first used */
  animation:         hide 500ms linear;
  -moz-animation:    hide 500ms linear;
  -webkit-animation: hide 500ms linear;
  animation-fill-mode: forwards;
}
@-webkit-keyframes hide {  /* Safari 4.0 - 8.0 */
    0% { opacity: .75; height:  100%; }
   99% { opacity:   0; height:  100%; }
  100% { opacity:   0; height: 0; }
}
@-webkit-keyframes show {  /* Safari 4.0 - 8.0 */
    0% { opacity:   0; height: 100%; }
  100% { opacity: .75; height: 100%; }
}
@keyframes hide {  /* Standard syntax */
    0% { opacity: .75; height:  100%; }
   99% { opacity:   0; height:  100%; }
  100% { opacity:   0; height: 0; }
}
@keyframes show {  /* Standard syntax */
    0% { opacity:   0; height: 100%; }
  100% { opacity: .75; height: 100%; }
}
.clickable {
  cursor: pointer;
}


/**********/
/* HEADER */
/**********/
.header { 
  background-color: var(--header-bg-color);
  box-shadow:         0 0 20px -5px black;
  -moz-box-shadow:    0 0 20px -5px black;
  -webkit-box-shadow: 0 0 20px -5px black;
  color: var(--header-txt-color);
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  top: 0;
  z-index: 2; /* using z-index for hiding overlay so make sure fixed header is on top */
}
.header a {
  color: inherit;
}
.header-hamburger {
  padding: 8px;
  position: absolute;
  text-align: center;
  height: 56px;
  width: 56px;
}
.header-logo {
  flex: 100%;
  -webkit-flex: 100%;
  padding: 1%;
  text-align: center;
  /*line-height: 0;*/  /* fudge to remove added pixels to bottom of <a> containing image */
}
.header-contact {
  align-items: center;
  background-color: var(--top-nav-bg-color);
  color: var(--top-nav-txt-color);
  display: flex;
  display: -webkit-flex;
  font-family: "quicksand",arial, helvetica, sans-serif;
  flex: 1;
  -webkit-flex: 1;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  padding: 1%;
}
.header-contact-message {
  margin: .5% 1%;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
.header-contact-type { 
  display: inline-block; /* Keep the icon and text as one item, stops them getting split up */
  font-size: 0.8rem;  /* make email address fit on small screens */
  padding: 0 1%;
  white-space: nowrap;
}
.header-contact-type a:active,
.header-contact-type a:hover {
  color: var(--header-active-txt-color);
}
@media screen and (min-width: 400px){ /* standard size font for message and contacts */
  .header-contact-type { 
    font-size: 1.0rem;
  }
}
@media screen and (min-width: 768px) { /* hamburger stacked message and contact */
  .header {
    height: var(--header-height); /* fix positioned header */
    position: fixed; 
  }
  .header-hamburger { /* no hamburger on 1200 screens */
    display: none;
  }
  .header-logo {
    align-items: center;
    flex: 0 0 300px;
    -webkit-flex: 0 0 300px;
    justify-content: center;
    padding: 10px;
    /*line-height: 0;*/  /* fudge to remove added pixels to bottom of <a> containing image */
  }
  .header-contact {
    background-color: var(--header-bg-color);
    color: var(--header-txt-color);
    padding: 10px;
  }
  .header-contact-message {
    margin: 5px 10px;
  }
  .header-contact-type { 
    padding: 0 10px;
  }
}



/**************/
/* menu icons */
/**************/
.icon-button,
.icon-link  {
  background-color: inherit;
  border-style: none;
  color: var(--top-nav-icon-link-color);
  cursor: pointer;
  font-size: 24px;
  height: auto;
  line-height: normal;
  min-width: 40px;
  padding: 0;
  text-decoration: none;
}
.icon-link {
  display: block;
}
.icon-button:active,
.icon-button:hover {
  color: var(--top-nav-icon-active-color);
}


/***********/
/* Top-nav */
/***********/
.top-nav {
  background-color: var(--top-nav-bg-color);
  border-top: 1px solid var(--top-nav-border-color);
  color: var(--top-nav-txt-color);
  display: none;
  font-family: "quicksand",arial, helvetica, sans-serif;
  font-weight: bold;
  padding: 5px 0;
  width: 100%;
}
.top-nav ul {
	border: 0 none;
	list-style: none outside none;
	text-align: center;
	padding: 0;
	position: relative;
}
.top-nav ul li {
  border: none;
  display: inline-block;
	margin: 0;
  padding: 0;
}
.top-nav ul li a {
  border: none;
  padding: 0;
	text-decoration: none;
	/*text-shadow: 1px 1px 1px var(--top-nav-shadow-color);*/
	/*text-transform: uppercase;*/
}
.top-nav ul li a:active,
.top-nav ul li a:hover {
  color: var(--top-nav-active-txt-color);
}
.top-nav ul li a span {
  padding: 0 10px;
}
@media screen and (min-width: 768px) {
  .top-nav {
    display: block;
  }
}


/********************************************/
/* Container for side menus for full height */
/********************************************/
.side-container {
  background-color: var(--side-container-bg-color);
  color: var(--side-nav-txt-color);
  display: block; 
  height: 100%;
  left: -100vw;
  overflow-x: hidden; /* Disable horizontal scroll */
  position: fixed; /* Stay in place */
  top: 0;
  transition:         transform .5s ease-in-out; /* transition when showing side-container */
  -webkit-transition: transform .5s ease-in-out;
  -moz-transition:    transform .5s ease-in-out;
  width: 100vw;
  z-index: 5;
}
.side-container.active {
  transform: translateX(100vw);
  -webkit-transform: translateX(100vw);
  -moz-transform: translateX(100vw);
}
@media screen and (min-width:300px) {
  .side-container {
    left: -300px;
    width: 300px;
  }
  .side-container.active {
    transform: translateX(300px);
        -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
  }
}
.side-nav {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
}
.side-nav-header {
  border-bottom: 1px solid var(--side-nav-border-color);
  width: 100%;
}
.side-nav-header img {
  display: block;
  margin: 10px auto;
}
.side-nav-item {
  background-color: inherit;
  width: 100%;
}
.side-nav-item a {  /* The navigation menu links and dropdown button*/
  background-color: inherit;
  border-bottom: 1px solid var(--side-nav-border-color);
  color: inherit;
  display: block;
  font-size: 1.3rem;
  padding: 10px;
  text-decoration: none;
  /*text-transform: uppercase;*/
  transition:         0.3s; 
  -webkit-transition: 0.3s;
  -moz-transition:    0.3s;
  width: 100%;
}
.side-nav-item a:active,
.side-nav-item a:hover {
  color: var(--side-nav-active-txt-color); 
}



/**************/
/* containers */
/*    Main    */
/**************/
.main {
  background-color: transparent; /* #fff;*/
  flex: 1 0 auto;  /* make the main fill available space set by height of page-container */
}
.anchor {
  display: block;
  position: relative;
  visibility: hidden;
}
@media screen and (min-width: 768px) { /* when we change to mobile menu system and moving header */
  .main {
    margin-top: var(--header-fixed-offset); /* For fixed header, starts main below */
  }
  .anchor {
    top: calc(0px - var(--header-fixed-offset));
  }
}
.resp-wrapper {
  width: 100%;
}
.resp-padding {
  padding-left: 1.6%;
  padding-right: 1.6%;
}
@media screen and (min-width: 992px) {
  .resp-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 992px; 
  }
  .resp-padding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/**********/
/* Footer */
/**********/
footer, 
.footer{
  background-color: var(--footer-bg-color);
  color: var(--footer-txt-color);
  display: flex;
  display: -webkit-flex;
  font-size: 0.87rem;
  flex-shrink: 0; /* stop the footer from shrinking */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 1.5%;
  width: 100%;
}
footer p, 
.footer p {
  margin-bottom: 0;
  text-align: left;
}
.footer-logos {
  align-items:  center;
  display: flex;
  display: -webkit-flex;
  flex: 100%;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 10px 0;
}

.footer-certass img {
  margin: 0 10px;
  width: 100px;
  height: auto;
}

.footer-payments img {
  border-radius: 4px;
  margin: 0 10px;
  text-align: center;
  width: 300px;
}

.footer h2 {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 5px 0;
}
.footer p {
  font-size: inherit;
}
.footer a {
  color: var(--footer-link-txt-color);
  text-decoration: none;
}
.footer a:active,
.footer a:hover {
  color: var(--footer-active-txt-color);
}
.footer-contact {
  flex: 100%;
  font-family: "quicksand",arial, helvetica, sans-serif;
  padding: 1.5%;
}
.footer-contact {
  align-items: center;
  display: flex;
  display: -webkit-flex;
  flex: 1;
  -webkit-flex: 1;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  font-weight: normal;
  justify-content: center;
  padding: 1%;
}
.footer-contact-message {
  color: var(--main-link-txt-color);
  font-size: 4.0vw;
  margin: .5% 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
.footer-contact-type { 
  color: var(--footer-txt-color);
  display: inline-block; /* Keep the icon and text as one item, stops them getting split up */
  font-size: 0.8rem;  /* make email address fit on small screens */
  padding: 0 1%;
  white-space: nowrap;
}
.footer-contact-type a { 
  color: var(--footer-txt-col);
}
.footer-contact-type a:active,
.footer-contact-type a:hover {
  color: var(--footer-active-txt-color);
}
.footer-social {
  display: none;  /* not required */
  flex: 100%;
  font-size: 1.5rem;
  margin: 10px;
  text-align: center;
}
.social-icon {
  padding: 0 20px;
}
.footer .copyright {
  color: var(--footer-txt-color);
  font-size: 0.8rem;
  line-height: 2.2rem;
  text-align: left; 
}
.footer .nav-link {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 2.2rem;
}
.footer .nav-link:after {
  content: "|";
  margin: 0 5px 0 10px;
}
.footer .nav-link:last-child:after {
  content: '';
  margin-right: -10px;
}
.footer .nav-link a{
  color: var(--footer-link-txt-color);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  width: 100%;
}
.footer .nav-link a:hover{
  color: var(--footer-active-txt-color);
}
@media screen and (max-width: 670px) { /* put links on seperate line if screen too small */
  .footer .copyright,
  .footer .nav-links {
    text-align: center;
    width: 100%;
  }
}
.all-rights-reserved { /* hide all rights reserved on smaller screens */
  display: none;
}
@media screen and (min-width: 400px){ /* standard size font for message and contacts */
  .footer-contact-type { 
    font-size: 1.0rem;
  }
}
@media screen and (min-width: 360px) {
  .all-rights-reserved { /* show all rights reserved on smaller screens */
    display: inline;
  }
}
@media screen and (min-width: 768px) { /* hamburger stacked message and contact */
  .footer {
    padding: 0 15px;
  }
  .footer-contact {
    display: none;  /* dont display contact on footer as fixed on header */
  }
}


















/***********/
/* common */
/***********/
h1,
h2 {
  color: var(--main-link-txt-color);
  /*font-family: "quicksand", arial, helvetica, sans-serif;*/
  font-weight: 700;
  line-height: normal;
  margin: 10px 0 5px 0;
  text-align: center;
}
.text-block {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  margin-bottom: 5%;
  padding: 0 2.5%;
  text-align: center;
}
/*@media screen and (min-device-width: 992px) 
{
  .text-block {
    margin: 0 auto 50px auto;
    padding: 0 25px;
    width: 992px;
  }
}*/
.photo img {
  height: auto;
  width: 100%;
}
.top-of-page {
  margin-top: 20px;
}



/******************************/
/* content for the index page */
/******************************/

/******************/
/* conservatories */
/******************/
.page-conservatories ul {
  margin: 0% auto;
  text-align: left;
  width: fit-content;
}

/**************/
/* Contact Us */
/**************/
.page-contact-us .flex-column {
  flex: 100%;
  max-width: 100%;
}
@media screen and (min-width: 812px)
{
  .page-contact-us .flex-column {
    flex: 50%;
    max-width: 50%;
  }
}
.page-contact-us .map-responsive {
  border: 1px solid #F9F9F9;
  overflow :hidden;
  padding-bottom: 100%;
  position: relative;
  height: 0;
}
.page-contact-us .map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
.page-contact-us .email { 
  font-size: 0.8rem;  /* reduce font size for small screens as so long it dosen't fit */
}
@media screen and (min-width: 400px){ /* standard size font for email */
  .page-contact-us .email { 
    font-size: 1.0rem;
  }
}

/*********/
/* Doors */
/*********/
.page-doors ul {
  margin: 0% auto;
  text-align: left;
  width: fit-content;
}


/******************/
/* Privacy Policy */
/******************/
.page-privacy-policy h1,
.page-privacy-policy h2 {
  text-align: left;
}
 
/***********/
/* Windows */
/***********/
.page-windows ul {
  margin: 0% auto;
  text-align: left;
  width: fit-content;
}