/*  
Theme Name: Morris & Cope Theme
Theme URI: http://sww.co.nz/
Description: Custom WordPress theme by Stellar Web Works
Version: 1.0
Author: Aidan Curran
Author URI: http://sww.co.nz/
*/

/* 
   Contents:
   0. Variables
   1. Basics
   2. Header
   3. Sticky Header
   4. Navigation Menus
   5. Dropdown Menu
   6. Lists
   7. Blockquotes
   8. Style classes for use in Editor
   9. Sections (Groups)
   10. Columns
   11. Cover Block
   12. Call to action
   13. Accordions
   14. Photo Layout
   15. Graphics with overlaid text
   16. Breadcrumbs
   17. Cards
   18. Blog Styles
   19. Comments   
   20. Footer
   21. Gutenberg overrides and workarounds
   22. Other

   R. Responsive Elements
   R1. Defaults
   R2. MEDIUM-WIDE SCREEN (max-width: 1200px)
   R3. MEDIUM-SMALL SCREEN (max-width: 1000px)
   R4. SMALL SCREEN (max-width: 700px)

*/

/* -------------------------------------------------------------------------------------------------------------------- 
   0. Variables
*/
:root {
   /* colour shortcuts */
   --dark-blue: var(--wp--preset--color--dark-blue);
   --blue: var(--wp--preset--color--blue);
   --light-blue: var(--wp--preset--color--light-blue);
   --dark-yellow: var(--wp--preset--color--dark-yellow);
   --yellow: var(--wp--preset--color--yellow);
   --light-yellow: var(--wp--preset--color--light-yellow);
   --light-grey: var(--wp--preset--color--light-grey);
   --grey: var(--wp--preset--color--grey);
   --dark-grey: var(--wp--preset--color--dark-grey);
   --grey-tint: var(--wp--preset--color--grey-tint);
   --blue-tint: var(--wp--preset--color--blue-tint);
   --dark: var(--wp--preset--color--dark);

   /* font size shortcuts */
   --xs: var(--wp--preset--font-size--x-small); /* 15-17px */
   --sm: var(--wp--preset--font-size--small); /* 17-22px */
   --m: var(--wp--preset--font-size--medium); /* 18-24px */
   --l: var(--wp--preset--font-size--large); /* 24-32px */
   --xl: var(--wp--preset--font-size--x-large); /* 32-48px */
   --xx: var(--wp--preset--font-size--xx-large); /* 32-64px */
   --xw: var(--wp--preset--font-size--xw-large); /* 16-64px */

   /* spacing shortcuts */
   --sp1: var(--wp--preset--spacing--10); /* 8-16px */
   --sp2: var(--wp--preset--spacing--20); /* 16-32px */
   --sp3: var(--wp--preset--spacing--30); /* 24-48px */
   --sp4: var(--wp--preset--spacing--40); /* 32-64px */
   --sp5: var(--wp--preset--spacing--50); /* 48-96px */
   --sp6: var(--wp--preset--spacing--60); /* 70-140px */
   --sp7: var(--wp--preset--spacing--70); /* 80-160px */

   --header-height-full: 150px;
   --header-height-mobile-full: 100px;
   --sticky-height: 80px;
}


/* -------------------------------------------------------------------------------------------------------------------- 
   1. Basics
*/
/* set a reasonable absolute max width for the entire site (for massive screens) */
body {
   max-width: 3000px;
   margin-left: auto;
   margin-right: auto;
   min-width: 300px;
}
/* Set content width as percentage when max width is not in play (because styles > spacing > padding does not get applied to content inside a full width block ) */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
   width: 90%;
}
/* cancel out above rule affecting image alignment block editor */
.block-editor-block-list__layout figure {
   width: auto;
}
h3 a {
   text-decoration: none;
   color: var(--dark);
}
h3 a:hover {
   color: var(--blue);
}


/* -------------------------------------------------------------------------------------------------------------------- 
   2. Header
*/
header.wp-block-group {
   background-color: var(--dark-blue);
   color: white;
   padding: 0;
}
#header-container {
   height: var(--header-height-full);
   display: flex;
   justify-content: space-between;
   align-items: center;
}
#headerleft {
   flex-grow: 0;
   flex-shrink: 1;
   position: relative;
   flex-basis: 300px;
}
#headerright {
   flex-grow: 1;
}
header #logo {
   display: block;
   max-width: 210px;
   width: 20vw;
   min-width: 200px;
   height: auto;
   transition: all 0.25s;
}
header #logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   overflow: hidden;
   transition: all 0.2s;
}
header #logo img:hover {
   scale: 1.02;
}
header #headertext {
   float: right;
   padding-bottom: 20px;
}
header #headertext a {
   text-decoration: none;
}
header #headertext .phone {
   font-size: 26px;
   font-weight: bold;
   color: var(--dark-blue);
}
header #headertext .email {
   margin: 0;
}
header #headertext .social {
   font-size: 32px;
   text-align: right;
}


/* --------------------------------------------------------------------------------------------------------------------
   3. Sticky Header
*/
/* The sticky class is added to the header with JS when it reaches its scroll position */
#header-sticky.sticky {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10;
   /*height: var(--sticky-height);*/
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
   background-color: rgba(255,255,255,0.9);
}
#header-sticky.sticky a {
   color: #000;
}
#header-sticky.mobile-menu-open {
   /*position: static;*/
   height: auto;
}
#header-sticky.sticky #header-container {
   max-height: var(--sticky-height);
}
#header-sticky.mobile-menu-open #header-container {
   max-height: var(--header-height-mobile-full);
}
.admin-bar #header-sticky {
   top: 32px;
}
@media screen and (max-width: 782px) {
   .admin-bar #header-sticky {
      top: 46px;
   }
}
@media screen and (max-width: 600px) {
   .admin-bar #header-sticky {
      top: 0;
   }
}
#header-sticky.sticky #logo {
   width: 130px;
}
#header-sticky.sticky #headertext {
   display: none;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
/* this should be equal to the initial header height */
#header-sticky.sticky + * {
   XXXpadding-top: var(--header-height-full);
}


/* --------------------------------------------------------------------------------------------------------------------
   4. Navigation Menus
*/
nav {
   text-align: center;
}
#topnav {
   float: right;
   clear: right;
   line-height: 30px;
}
nav a {
   margin: 0 var(--sp2);
   padding: 5px 0;
   text-decoration:none;
   font-weight: normal;
   font-size: var(--sm);
   display: inline-block;
   color: white;
   transition: all 0.4s ease;
}
nav a:hover {
   color: white;
}
#topnav a {
   position: relative;
}
#topnav a::before {
   height: 5px;
   position: absolute;
   content: '';
   transition: all 0.4s ease;
   background-color: white;
   width: 0;
   top: 0;
   left: 0;
}
#topnav a:hover::before,
#topnav .current_page_item > a::before,
#topnav .current_page_parent > a::before,
#topnav .current-page-ancestor > a::before {
   width: 100%;
}
#topnav li:first-child a {
   padding-left: 0;
   margin-left: 0;
}
#topnav li:last-child a {
   padding-right: 0;
   margin-right: 0;
}
nav ul, #subnav ul, footer nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
nav li, #subnav li, footer nav li {
   display: inline;
   list-style: none;
   margin: 0;
   padding: 0;
   background: none;
}


/* --------------------------------------------------------------------------------------------------------------------
   5. Dropdown Menu
*/
#topnav ul.sub-menu { 
	display: none; 
	position: absolute; 
	top: 30px;
   left: 0;
	min-width: 150px;
	z-index: 21;
   background-color: white;
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
   padding: 3px 20px;
}
.sticky #topnav ul.sub-menu { 
   background-color: rgba(250,250,250,0.9);
}
/* second sub level */
#topnav ul.sub-menu ul.sub-menu { 
   position: static;
   padding: 0 0 0 15px;
}
#topnav ul.sub-menu ul.sub-menu a { 
   padding: 0;
   margin: 0;
}
#topnav ul.sub-menu ul.sub-menu a::before { 
   content: " - ";
}
#topnav ul.sub-menu > li.menu-item-has-children > a {
   margin-bottom: 0;
}
#topnav ul.sub-menu li { 
   display: block;
   text-align: left;
}
#topnav ul.sub-menu.open {
	display: block;
}
#topnav ul.sub-menu a {
   opacity: 0.9;
}
#menu-main-menu > li {
	position: relative;
}
#menu-main-menu > li::before { /* to create hover buffer around menu item */
	position: absolute;
   content: '';
   width: 100%;
   height: 60px;
   top: -10px;
   left: 0;
   z-index: -1;
}
#topnav ul.sub-menu li { 
   margin:0;
}
#topnav ul.sub-menu a { 
   display: inline-block;
   padding: 2px 0;
   margin: 10px 0;
}
/*give the dropdowns an indicator arrow */
#topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
   font-family: 'icomoon';
	content: '\e90e';
   font-size: 14px;
	display: inline-block;
	padding-left: 10px;
}
.sticky #topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
   color: initial;
}
@media screen and (max-width: 700px) {
   #topnav ul:not(.sub-menu) > li.menu-item-has-children > a:after {
      color: initial;
   }
      
}

/* --------------------------------------------------------------------------------------------------------------------
   6. Lists
*/
ul.is-style-fancy,
ul.is-style-checkmark {
   list-style-type: none;
   padding-left: 20px;
}
ul.is-style-fancy li,
ul.is-style-checkmark li {
   margin: 15px 0;
   padding-left: 30px;
   position: relative;
}
ul.is-style-fancy li::before,
ul.is-style-checkmark li::before {
   font-family: 'icomoon';
   content: '\ea1e';
   color: var(--dark-blue);
   padding-right: 10px;
   position: absolute;
   left: 0;
   top: 3px;
}
ul.is-style-fancy li a {
   text-decoration: none;
}
ul.is-style-fancy li a:hover {
   text-decoration: underline;
}
ul.is-style-checkmark li {
   padding-left: 2rem;
}
ul.is-style-checkmark li::before {
   content: '\ea52';
   top: 4px;
}

/* --------------------------------------------------------------------------------------------------------------------
   7. Blockquotes
*/
blockquote.is-style-fancy {
   position: relative;
}
blockquote.is-style-fancy::before {
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(images/quotes.svg) left center no-repeat;
}
.has-dark-background-color blockquote.is-style-fancy {
   background-image: linear-gradient(to right, #191919, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0));
   color: var(--light-grey);
}
.has-dark-background-color blockquote.is-style-fancy-dark::before {
   background: url(images/quotes-dk.svg) left center no-repeat;
}


/* --------------------------------------------------------------------------------------------------------------------
   8. Style classes for use in Editor
*/
/* icons */
.fb-icon::before {
   font-family: 'icomoon';
   content: '\e904';
   display: inline-block;
   padding-right: 6px;
}
.phone-icon::before {
   font-family: 'icomoon';
   content: '\e942';
   display: inline-block;
   padding-right: 6px;
}
.mobile-icon::before {
   font-family: 'icomoon';
   content: '\e91c';
   display: inline-block;
   padding-right: 6px;
}
.mail-icon::before {
   font-family: 'icomoon';
   content: '\e903';
   display: inline-block;
   padding-right: 6px;
}
/* .plain-links */
.plain-links a {
   text-decoration: none;
   color: black;
}
.plain-links a:hover {
   color: var(--dark-blue);
}
/* balance the length of lines in a block of text */
.balance {
   text-wrap: balance;
}
/* additional flex spacing options missing from gutenberg */
.is-layout-flex.space-evenly {
   justify-content: space-evenly;
}
.is-layout-flex.space-around {
   justify-content: space-around;
}
/* Applied to columns block unsed for Service headers on Services page */
.service-head {
   border-radius: var(--sp3);
}
.service-head figure {
   max-width: 260px;
   margin: 0;
}
.service-head p {
   margin-top: 0;
}
.service-head p strong{
   font-weight: 500;
}
/* .nounderline */
.nounderline a {
   text-decoration: none;
   font-weight: 500;
}
.nounderline a:hover {
   text-decoration: underline;
}
/* .next - for links with 'next' arrow */
.next a {
   text-decoration: none;
   font-weight: 500;   
}
.next a::after {
   font-family: 'icomoon';
   content: '\e90a';
   display: inline-block;
}
.prev a {
   text-decoration: none;
   font-weight: 500;   
}
.prev a::before {
   font-family: 'icomoon';
   content: '\e90d';
   display: inline-block;
}

/* .steps */
@media (max-width: 800px) {
   .steps.is-layout-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (max-width: 460px) {
   .steps.is-layout-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }
}
@media (max-width: 600px) {
   .service-head {
      padding-left: var(--sp1);
      padding-right: var(--sp2);
      gap: var(--sp2) !important;
   }
   .service-head .wp-block-column:first-child {
      flex-basis: 33% !important;
   }
   .service-head .wp-block-column:last-child {
      flex-basis: 67% !important;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   9. Sections (Groups)
*/

.wp-block-group.is-style-no-padding {
   padding: 0;
}

/* --------------------------------------------------------------------------------------------------------------------
   10. Columns
*/
@media (max-width: 781px) {
   .wp-block-columns.is-style-2col-image-right {
        flex-direction: column-reverse;
   }
   .wp-block-columns.is-style-2col-image-right .wp-block-column > figure,
   .wp-block-columns.is-style-2col-image-left .wp-block-column > figure {
      max-width: 400px;
      margin:auto;
   }
}


/* --------------------------------------------------------------------------------------------------------------------
   11. Hero / Cover Block
*/
.wp-block-cover.topheader {
   padding: 0;
   height: clamp(200px, 25vw, 300px);
   min-height: 200px;
}
.wp-block-cover.topheader h1 {
   padding: var(--sp2) var(--sp4);
   border-radius: 25px;
   width: max-content;

}
.hero {
   height: 35vw;
   max-height: 610px;
   min-height: 420px;
}

/* --------------------------------------------------------------------------------------------------------------------
   12. Call to action
*/
.wp-block-cover.cta {
   padding-top: var(--sp7);
   padding-bottom: var(--sp7);
}
.wp-block-cover.cta p {
   font-size: var(--xl);
   border-left: var(--sp3) solid var(--dark-blue);
   padding-left: var(--sp3);
   text-shadow: 0 0 10px black; 
}

/* --------------------------------------------------------------------------------------------------------------------
   13. Accordions
*/

summary {
   color: var(--blue);
   font-weight: 500;
}



.faqs details {
   transition: all 1s;
}
.faqs details[open] {
   transition: all 1s;
   height: fit-content; /* to allow transition to work */
}
.faqs summary {
   outline: 0;
   display: block;
   cursor: pointer;
   border-top: 1px solid var(--grey);
   position: relative;
   padding-top: 15px;
   padding-right: 50px;
   font-weight: 500;
}
.faqs details p {
   padding-right: 50px;
}
.faqs summary::after {
   font-family: "icomoon";
   content: "\e90e";
   display: block;
   position: absolute;
   height: 30px;
   top: 20px;
   right: 0;
   transition: all 0.2s;
}
.faqs details[open] summary::after {
  /*content: '\e90f';*/
  transform: rotate(-180deg);
}
.faqs details {
   margin-top: 15px;
}



/* For smooth animation of details element opening & closing */
details > div {
  overflow: hidden;
  display: grid;
  /* intentionally independent from .animation as Safari 16
  would otherwise ignore the expansion animation. */
  animation-duration: 0.25s;
}
details > .animation {
  animation-name: grid-expand;
  animation-timing-function: ease-out;
}
details > .collapsing {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}
details > div > div {
  min-height: 0;
}
@keyframes grid-expand {
  0% {
    grid-template-rows: 0fr;
  }
  100% {
    grid-template-rows: 1fr;
  }
}


/* --------------------------------------------------------------------------------------------------------------------
   14. Photo Layout
       using grid layout for photos, e.g. Tasman Carter
       Remove if not used
*/
.photo-layout .wp-block-image {
   height: 100%;
}
.photo-layout .wp-block-image img {
   height: 100%;
   object-fit: cover;
}

/* photo section at bottom of home page */
.photo-section .photo-layout {
   max-width: 2800px;
   margin-left: auto;
   margin-right: auto;
}
@media screen and (max-width: 1400px) {
   .photo-section .photo-layout .wp-block-group.is-layout-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .photo-section .photo-layout .wp-block-group.is-layout-grid .stack2 {
      display: none;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   15. Graphics with overlaid text
*/
.graphic {
   border-radius: 20px;
   font-family: "Noto Sans";
}
#graphic2 {
   min-height: 260px;
}
@media screen and (max-width: 1200px) {
   #graphic3 {
      padding-bottom: 50% !important;
   }   
}
@media screen and (max-width: 782px) {
   #graphic1 {
      padding-left: 25% !important;
   }
   #graphic2 {
      padding-top: 25% !important;
      padding-left: 25% !important;
   }   
}
@media screen and (max-width: 500px) {
   #graphic2 {
      padding-top: 40% !important;
   }   
}

/* --------------------------------------------------------------------------------------------------------------------
   16. Breadcrumbs
       Remove if not used
*/
.breadcrumbs {
   font-size: var(--xs);
   background-color: var(--grey-tint);
   padding: 7px 0;
}
.breadcrumbs a {
   text-decoration: none;
}


/* --------------------------------------------------------------------------------------------------------------------
   17. Cards
*/
.cards .wp-block-group {
   background-color: var(--light-blue);
   border-radius: var(--sp2);
}
.cards .wp-block-group h4 {
   padding: var(--sp1) 0;
   margin: 0;
}
.cards .wp-block-group h4 a {
   color: var(--dark);
   font-size: var(--m);
   text-decoration: none;
}
.cards .wp-block-group {
   position: relative;
   transition: all 0.25s;
}
.cards .wp-block-group h4 a::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
.cards .wp-block-group:hover {
   scale: 1.015;
}
@media screen and (max-width: 900px) {
   .cards .wp-block-group {
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
   }
}
@media screen and (max-width: 600px) {
   #services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   18. Blog Styles
       Remove if not used
*/
#blog-posts,
#single-blog-post,
#category-heading {
   padding-top: var(--sp4);
}
#featured-image {
   height: 500px;
   max-height: 50vh;
   overflow: hidden;
}
#featured-image img {
   object-fit: cover;
   object-position: 50% 20%;
   height: 100% !important;
   width: 100%;
}
.postmeta {
   color: #808080;
   font-size: 16px;
   margin: 2px 0;
}
div.postmeta {
   margin-top: 50px;
   padding-top: 20px;
   border-top: 1px solid #ccc;
}
.postdate {
   color: #808080;
   font-size: 16px;
}
/* blog categories list */
#blog-categories {
   background-color: #f9f9f9;
   padding: 30px 0;
}
#blog-categories ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#blog-categories li {
   display: inline;
   list-style: none;
   margin: 0 20px 0 0;
   padding: 0;
   background: none;
   color: #ccc;
}
#blog-categories li.current-cat a {
   font-weight: bold;
}
#blog-posts article {
   position: relative;
   display: flex;
   min-height: 360px;
   margin-bottom: 50px;
   box-shadow: 0 6px 24px rgba(11, 11, 11, 0.05);
   border: 1px solid #eeeeef;
   border-radius: 4px;
}
#blog-posts article .article-image {
   flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
}
#blog-posts article .article-summary {
   flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
   padding: 30px;
   align-self: center;
}
#blog-posts .article-summary h2 {
   font-size: var(--l);
   font-weight: bold;
   margin-top: 0;
   transition: all 0.3s;
}
#blog-posts .article-summary h2 a {
   text-decoration: none;
   color: black;
}
#blog-posts .article-summary h2 a:hover {
   color: var(--dark-blue);
}
#blog-posts article .article-image img {
   object-fit: cover;
   height: 100%;
   width: 100%;
   transition: all 300ms linear 0ms;
}
#blog-posts article .article-image img:hover {
   transform: scale(1.1);
}
#blog-posts article::after {
   content: "";
   display: block;
   clear: both;
}
@media screen and (max-width: 900px) {
   #blog-posts article {
      flex-direction: column;
   }
   #blog-posts article .article-image {
      aspect-ratio: 120/63;
   }
}
@media screen and (max-width: 500px) {
   #blog-posts .article-summary h2 {
      font-size: 22px;
   }
}
#blog-posts a.more-link {
   text-decoration: none;
   font-weight: bold;
   color: var(--blue);
}
#blog-posts a.more-link:hover {
   transform: scale(1.05);
   color: var(--dark-blue);
}
#blog-posts a.more-link::after {
   font-family: 'icomoon';
   content: '\e90a';
   display: inline-block;
}
div.back {
   margin: 30px 0;
   text-align: center;
}
div.back a {
   font-size: 24px;
   text-decoration: none;
}
div.back a::before {
   font-family: 'icomoon';
   content: '\e90d';
   padding-right: 5px;
}

/* --------------------------------------------------------------------------------------------------------------------
   19. Comments
       Remove if not used
*/
#comments {
   margin-top: 100px;
   color: #333;
   background: #f3f3f3;
   padding: 10px 20px;
   clear:both;
}
#comments .navigation {
	padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0;
}
h3#comments-title {
	padding-bottom: 24px;
}
.commentlist {
	list-style: none;
	margin: 0;
   padding: 0;
}
.commentlist li.comment {
	border-bottom: 1px solid #e7e7e7;
	line-height: 24px;
	margin: 0 0 24px 0;
	padding: 0 0 0 56px;
	position: relative;
}
.commentlist li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
	margin-bottom: 18px;
}
#comments .comment-body p:last-child {
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
	margin-bottom: 24px;
}
.commentlist ol {
	list-style: decimal;
}
.commentlist .avatar {
	position: absolute;
	top: 4px;
	left: 0;
}
.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
}
.comment-author .says {
	font-style: italic;
}
.comment-meta {
	font-size: 14px;
	margin: 0 0 18px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
	text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
	color: #ff4b33;
}
.reply {
	font-size: 14px;
	padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
	color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
	color: #ff4b33;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li {
	border: none;
	margin: 0;
}
.nopassword,
.nocomments {
	display: none;
}
#comments .pingback {
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
	margin-top: -6px;
}
#comments .pingback p {
	color: #888;
	display: block;
	font-size: 14px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url {
	font-size: 14px;
	font-style: italic;
}
/* Comments form */
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}
#respond p {
	margin: 0;
}
#respond .comment-notes {
	margin-bottom: 1em;
   font-style: italic;
   color: #999;
}
.form-allowed-tags {
	line-height: 1em;
}
.children #respond {
	margin: 0 48px 0 0;
}
h3#reply-title {
	margin: 18px 0;
}
#comments-list #respond {
	margin: 0 0 18px 0;
}
#comments-list ul #respond {
	margin: 0;
}
#cancel-comment-reply-link {
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
}
#respond .required {
	display:none;
}
#respond label {
	color: #888;
	font-size: 14px;
   width: 80px;
   display: block;
   float: left;
   text-align: right;
   padding-right: 10px;
}
#respond input {
	margin: 0 0 9px;
	width: 500px;
}
#respond textarea {
	width: 500px;
}
#respond .form-allowed-tags {
	color: #888;
	font-size: 14px;
	line-height: 18px;
}
#respond .form-allowed-tags code {
	font-size: 14px;
}
#respond .form-submit {
	margin: 12px 0;
}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
}


/* --------------------------------------------------------------------------------------------------------------------
   20. Footer
*/
footer {
   background: var(--dark-blue);
   color: var(--light-blue);
   overflow: hidden;
   font-size: var(--sm);
}
#footer-container {
   padding: 80px 0;
}
#footerlogo {
   text-align: center;
}
#footerlogo img { 
   padding: 0; 
   z-index: 10;
}
footer h4 {
   color: var(--light-blue);
   margin-bottom: 5px;
}
footer a {
   color: var(--light-blue);
   text-decoration:none;
}
footer a:hover {
   color: white;
}
.footercols {
   display: flex;
}
.footercol {
   flex-basis: 33.33%;
}
footer nav ul {
   text-align: center;
}
footer nav li {
   display: block;
   padding: 0;
   text-align: left;
   line-height: 1.5em;
}
footer nav li a {
   padding: 0;
   margin: 0;
   font-weight: normal;
}
footer .phone {
   font-size: 24px;
   font-weight: bold;
   margin: 1em 0;
}
footer .email {
   font-size: 20px;
   font-weight: bold;
   margin: 1em 0;
}
footer .social a {
   font-size: var(--xl);
   margin-right: var(--sp2);
}
footer .social a:hover {
   color: white;
}
#credits {
   text-align: center;
   font-size: 14px;
   background-color: var(--dark-blue);
   padding: 25px 0;
   width: 100%;
   opacity: 0.6;
}
#credits a {
   text-decoration: none;
   color: var(--light-blue);
}
#credits a:hover {
   text-decoration: underline;
}
a.scrollup {
	width: 67px;
	height: 67px;
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: none;
	text-indent: -9999px;
	background: url('images/top.png') no-repeat;
	opacity: 0.3;
}
@media screen and (max-width: 750px) {
   .footercols {
      flex-direction: column;
      text-align: center;
   }
   .footercols ul {
      width: fit-content;
      margin: auto;
   }
}

/* --------------------------------------------------------------------------------------------------------------------
   21. Gutenberg overrides and workarounds
*/
/* fix for fixed cover background issue on ipad */
@supports (-webkit-touch-callout: inherit) {
   .wp-block-cover .has-parallax {
      background-attachment: scroll !important;
   }
}
.wp-block-cover {
   overflow: hidden;
}
main .wp-block-cover .wp-block-cover__image-background {
   margin: auto;
}
.wp-block-spacer {
   margin: 0 !important;
}
.wp-block-button__link:hover {
   scale: 1.05;
}

/* --------------------------------------------------------------------------------------------------------------------
   22. Other
*/
.has-grey-tint-background-color hr.wp-block-separator {
   background-color: white;
   color: white;
}

/* --------------------------------------------------------------------------------------------------------------------
   R. Responsive Elements
*/

/* R1. Defaults: computer monitors, tablets in landscape, standard and large screens (typically wider than 1024px), old browsers */
#mobile-menu-btn { display: none; }
img {
   max-width: 100%; 
   height: auto; 
}
   
/* R2. MEDIUM-WIDE SCREEN */
/* width 900px - 1200px */
@media screen and (max-width: 1200px) {


}

/* R3. MEDIUM-SMALL SCREEN */
/* width 700px - 1000px */
@media screen and (max-width: 1000px) {	
   header #header-container {
      flex-direction: column;
      align-items: stretch;
      height: var(--header-height-mobile-full);
   }
   #headerleft {
      height: var(--header-height-mobile-full);
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      flex-basis: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
   }   
   #topnav {
      background-color: #fff;
   }
   #header-sticky.sticky #headerleft {
      height: var(--sticky-height);
   }
   #header-sticky.sticky + * {
      padding-top: var(--header-height-mobile-full);
   }
   #header-container {
      width: 100%;
   }
   #mobile-menu-btn { 
      display: inline-block;
      width: 32px;
      height: 32px;
      padding: 4px;
      cursor: pointer;
      position: absolute;
      top: -60px;
      right: 30px;
   }
   #mobile-menu-btn::after { 
      font-family: 'icomoon';
      content: '\e910';
      font-size: 36px;
      color: white;
      display: inline-block;
   }
   header.mobile-menu-open #mobile-menu-btn::after {
      content: '\e911';
   }   
   #topnav { 
      float: none; 
      width: auto; 
      clear: both;
      position: relative;
      z-index: 9999;
   }
   #topnav a::before { 
      display: none;
   }
   #headertext {
      display: none;
   }      
   #header-sticky.sticky #topnav {
      padding-top: 0;
   }   
   #topnav .menu { 
      padding-bottom: 15px;
   }
   #topnav ul { display:none; }
   #topnav ul#menu-main-menu.open {  
     width: 100%;  
     display: block;  
     height: auto;  
     padding-top: 0;
     margin-top:0;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
   }  
   #topnav li {  
     width: auto;  
     float: none;  
     position: relative;  
   }  
   #topnav li a {  
     display: block;
     color: var(--dark-blue);
     margin: 0;
     padding: 6px 0px;
     text-align: left;  
     width: 100%;  
     text-indent: 25px;  
     line-height: 30px;
     border-left: 15px solid rgba(255,255,255,0);
   }
   #topnav li.current_page_item > a,
   #topnav li a:hover {
      border-left: 15px solid var(--dark-blue);
   }
   #topnav ul.sub-menu { 
      display: block; 
      position: static; 
      background-color: transparent !important;
      padding: 3px 10px;
      box-shadow: none;
   }
   #topnav ul.sub-menu a {
      margin: 0 0 0 10px;
      padding: 0;
   }
   #topnav ul li.menu-item-has-children > a:after {
      content: '';
      padding: 0;
   }

}


/* R4. SMALL SCREEN */
/* width 320px - 700px */
@media screen and (max-width: 700px) {	

}