/* var declarations */
:root {
  /* standard definitions required and used throughout the cms */
  --min-screen-width: 320px;
  --standard-width: 1450px;
  --sidebar-width: 300px;
  --sidebar-padding: 0 0 0 2rem;
  --brand-a: #3c1053; /* #bf202f;					/*main brand color used on backgrounds and buttons */
  --brand-a-color: white; /* text color used on main brand backgrounds */
  --brand-a-hover: #5f287c; /* main brand background color used on hover */
  --brand-a-hover-color: white; /* text color for above */
  --brand-b: #0a1718; /* secondary brand color. Used on secondary buttons and on menus, by default */
  --brand-b-color: #9a9da3;
  --brand-b-hover: #303031;
  --brand-b-hover-color: white;
  /*  header's height definitions  */
  --min-header-height: 100px;
  --max-header-height: 130px;
  --logo-min-width: 250px;
  --logo-max-width: 350px;
  /* add site-specific definitions here, these are not supported by the core cms */
}
/* Since we can't use var declarations for media query widths, use the following notation to mark where they exist in css files
;sidebar-cutoff; using 900px
;padded-standard-width; using 1232px (1200 + 2x16)
*/
/*********************** STANDARD ELEMENTS ****************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-weight: 400;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  font-family: "Poppins", "Verdana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  text-align: left;
  background: white;
  line-height: 1.45rem;
  min-width: var(--min-screen-width);
}
/* for the admin page editing area */
.mceContentBody {
  background-color: #ffffff !important;
  background-image: none;
}
/* TABLE FORMATTING */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 2rem;
}

th {padding: 0.8rem;
	font-size:1em;
text-align: center;}

td {
    padding: 0.8rem;
	font-size: 1em;
}

tr:nth-child(even) {
    background-color: #FFFFFF;
}

tr:nth-child(odd) {
    background-color: #EFEFEF;
}

tr:last-child {
    border-bottom: solid 1px #efefef;
}
/* GENERAL FORMATTING */
a,
a:visited {
  text-decoration: none;
  color: var(--brand-a-hover);
  font-weight: 500;
  transition: all 0.3s;
}
a:hover,
a:active {
  color: var(--brand-b);
  transition: all 0.3s;
}
button {
  font-weight: 600;
  font-size: 1rem;
}
strong {
  font-weight: 600;
}
em {
  font-weight: unset;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Prata", serif;
  line-height: 1.45em;
  font-weight: 500;
}
h1 {
  margin-bottom: 1.5rem;
  line-height: 1.35em;
  color: var(--brand-b);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--brand-b);
}
h2 {
  font-size: 2.3rem;
  font-weight: 500;
  /* color: var(--brand-a-hover); */
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.35em;
}
h3 {
  /* note that sidebar headings are all h3, these styles must work within that context 
	    use blog sidebar for reference */
  color: var(--brand-b);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  text-transform: unset;
}
img,
embed,
object,
video {
  max-width: 100%;
  border: 0 none;
}
p {
  color: var(--brand-b);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
ul,
#content ul,
ol,
#content ol {
  margin: 1.5rem 0 1.5rem 2.5rem;
}
ul li,
#content ul li,
ol li,
#content ol li {
  margin-bottom: 1rem;
}

#content ul li {
    list-style: none;
}

#content ul,
#content ol {
  margin: 1.5rem 0 1.5rem 3.5rem;
}

#content ul li::before {
  content: "";
  display: inline-block;
  height: 25px;
  width: 25px;
  background-image: url(../../images/bullet.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -38px;
  margin-right: 10px;
  vertical-align: middle;
}

/*********************** MAIN DIVS ****************************/
#top {
  min-width: var(--min-screen-width);
  width: 100%;
}
#middle {
  position: relative;
  min-width: var(--min-screen-width);
  box-sizing: border-box;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.page-home #middle {
  margin-top: 0;
  margin-bottom: 0;
}
#middle:after {
  clear: both;
  display: table;
  content: "";
}
#middle.hasSidebar:after{
	display:none;
}
#middle.hasSidebar {
max-width: var(--standard-width);
grid-column-gap: 1rem;
grid-template-columns: 1fr 300px;
grid-template-rows: min-content 1fr;
grid-template-areas: "content sidebar" "content .";
width: 100%;
margin: 2em auto;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  #middle.hasSidebar {
  }
}
#bottom {
  width: 100%;
  position: relative;
  min-width: var(--min-screen-width);
  background: var(--brand-a);
}
/* end main divs */
/*  CONTENT and Sidebar */
#middle.hasSidebar #content {
  order: 2; /* put_in-middle_using_flex:; */
}
/* default sidebar behaviour (small screens or default if device has js disabled) */
.sidebarPart {
  /*common class for sidebar-top and sidebar_bottom */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#sidebar-top {
  order: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sidebar-bottom {
  order: 3;
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sb_widget {
  margin-left: 2em;
  margin-bottom: 2em;
}
/* Rules for putting sidebar on the side */
@media (min-width: 900px) {
  /* ;sidebar-cutoff; */
  #middle.hasSidebar {
    display: grid;
  }
  #middle.hasSidebar #content {
	grid-area:content;
	order:unset;
  }
  .sidebarPart {
    width: var(--sidebar-width);
  }
  #sidebar-top,
  #sidebar-bottom {
    display: block;
	position: sticky;
	grid-area: sidebar;
	top: var(--min-header-height);
  }
  #sidebar-bottom {
    margin-top: 0;
  }
  .sb_widget {
    margin-left: 0;
  }
}
.standard-width {
  max-width: var(--standard-width);
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  .standard-width {
    padding: 0;
  }
}
#middle.hasSidebar #content > .standard-width {
  
}
.full-width {
}
.mini-width {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1em;
}
.inset-width {
  width: 80%;
  max-width: calc(var(--standard-width) * 0.8);
  margin: 0 auto;
  padding: 0 1em;
}
@media (min-width: 1232px) {
  /* ;padded-standard-width; using 1232 */
  .standard-width {
    padding: 0 15px;
  }
}
/*  end CONTENT and Sidebar */
/*********************** Utility CLASSES ****************************/
/* divider-under is used in many modules and should be used within the site, for consistency
** 	- normally, this is added to a div or paragraph to replicate a styled <hr>
*/
.divider-under::after {
  border-bottom: 1px solid #f0efef;
  margin: 2em 0;
  content: "";
  display: block;
}
.clearAfter::after {
  display: "table";
  clear: "both";
  content: "";
}
.clear {
  clear: both;
}
.nobr,
.nowr {
  white-space: nowrap;
}
.whiteBG {
  background: white;
}
.blackBG {
  background: black;
}
.left {
  float: left;
}
.right {
  float: right;
}
.full {
  width: 100%;
}
.leftimg {
  clear: left;
  float: left;
  margin: 0.3em 2em 2em 0;
  font-style: italic;
}
.rightimg {
  clear: right;
  float: right;
  margin: 0.3em 0 2em 2em;
  font-style: italic;
}
.leftimg p,
.rightimg p {
  margin: 0.5em 0 0 0;
}
.fullimg {
  width: 100%;
  margin-bottom: 1em;
}
.half {
  width: 50%;
}
.halfleftimg {
  float: left;
  width: 48%;
  margin: 1em 0;
}
.halfrightimg {
  float: right;
  width: 48%;
  margin: 1em 0;
}
.imgfullwidth {
  width: 100%;
}
.side2sideleft {
  width: 49%;
  margin-right: 1%;
}
.side2sideright {
  width: 49%;
  margin-left: 1%;
}
.side3sideleft {
  width: 32%;
  margin-right: 1%;
}
.side3sidemid {
  width: 32%;
  margin-left: 1%;
  margin-right: 1%;
}
.side3sideright {
  width: 32%;
  margin-left: 1%;
}
.third {
  width: 35%;
}
.quarter {
  width: 25%;
}
.center {
  display: block;
  margin: 2em auto;
  text-align: center;
  font-style: italic;
  width: auto;
}
.noscale {
  max-width: none;
}
@media (max-width: 549px) {
  .left,
  .right {
    float: none;
  }
  .leftimg,
  .rightimg {
    float: none;
    margin: 2em auto;
    display: block;
    text-align: center;
    font-style: italic;
  }
  .half,
  .third,
  .quarter {
    width: auto;
  }
  .hideinmobile {
    display: none;
  }
}
.width25 {
  max-width: 25%;
  display: block;
}
.width50 {
  max-width: 50%;
  display: block;
}
.width75 {
  max-width: 75%;
  display: block;
}

.expandableItem {
  display: none;
}
/* JUSTIFY FLOATING DIVS */
ul.justify {
  font-size: 0 !important;
  line-height: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: justify;
  text-justify: distribute-all-lines;
}
ul.justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}
ul.justify li {
  display: inline-block;
  font-size: 1rem;
  line-height: 1rem;
  margin: 0 auto !important;
  padding: 0 !important;
}
/* (untested) IE hacks to make li's line up */
* + html ul.justify li {
  display: inline;
}
* html ul.justify li {
  display: inline;
}
@media screen and (max-width: 549px) {
  #content ul.justify {
    margin-left: 0;
  }
  #content ul.longList {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}
/** FORMS **/
form.cms-form label .fmrequire,
.fmrequire {
  color: #ff0000;
  margin-left: 3px;
}
form.cms-form input[type="submit"] {
  padding: 3px;
}
#fmMessage {
  padding: 1em;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  display: none;
}
#fmMessage.fmError {
  background: #fc6c6c;
}
#fmMessage.fmSuccess {
  background: #7cff8c;
}
form.cms-form div.fmCheckboxRow,
form.cms-form div.fmRadioRow {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  margin-bottom: 1rem;
}
form.cms-form div.fmCheckboxRow label,
form.cms-form div.fmRadioRow label {
  margin-left: 0;
}
form.cms-form div.fmRadioRow input[type="radio"] {
  margin-left: 1em;
}
form.cms-form input[type="text"],
form.cms-form input[type="email"],
form.cms-form input[type="password"],
form.cms-form input[type="date"],
form.cms-form select,
form.cms-form textarea {
  width: 100%;
  background: #ffffff;
  padding: 0.5rem;
  margin: 0 0 1rem 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  font-family: "Montserrat", sans-serif;
}
form.cms-form .selectType {
  width: 100%;
  padding: 1rem;
  margin: 0 0 1rem 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  color: #757579 !important;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.8em;
}
form.cms-form .selectType select,
form.cms-form select {
  color: #757579;
  padding: 0.5em;
  margin-bottom: 1rem;
}
form.cms-form textarea {
  margin-bottom: 1rem !important;
  min-height: 12em;
}
form.cms-form #form-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -1em;
}
@media screen and (min-width: 600px) {
  form.cms-form #form-bottom {
    justify-content: center;
  }
}
form.cms-form #captchaContainer {
  display: block;
  max-width: 330px;
}
form.cms-form #captcha-image-box {
  display: block;
  max-width: 300px;
  flex: 1 1 auto;
  margin-left: 1em;
}
form.cms-form img#captcha {
  width: 100%;
}
form.cms-form #captcha-button-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1em;
}
form.cms-form input[type="submit"],
form.cms-form input#button {
  padding: 0.7rem 1.5rem;
  text-transform: uppercase;
  font-size: 1.15em;
  border: 1px solid transparent;
  background: var(--brand-a-hover);
  color: white;
  font-weight: 400;
  /* xmargin:1rem 0 0 0; */
  letter-spacing: 0.12rem;
  /* font-family: 'Barlow', sans-serif; */
  font-family: "Poppins", "Verdana", sans-serif;
}
form.cms-form input[type="submit"]:hover,
form.cms-form input#button:hover,
form.cms-form input[type="submit"]:active,
form.cms-form input#button:active {
  background: #ebeae8;
  color: var(--brand-a-hover);
  cursor: pointer;
  border: 1px solid var(--brand-a-hover);
  transition: all 0.3s;
}
/* used in blog and probably other places when I find them (members, ecom come to mind) */
/* html structure: <input type=text class=".cms_button-search"><button class=".cms-button-search-submit" type="submit"></button> */
form.cms-form input.cms-search-input {
  /*override default behaviour to work with adjoining search button */
  width: calc(100% - 50px);
  padding: 1em;
  margin-bottom: 1em;
}
.cms-search-button {
  /* must use <button> instead of <input> because <input> isn't elligble for ::before */
  position: relative;
  width: 50px;
  height: 51px;
  box-sizing: border-box;
  vertical-align: top;
  background: var(--brand-a);
  color: var(--brand-a-color);
  border: none;
}
.cms-search-button:hover {
  background: var(--brand-a-hover);
}
/* to change the color of this svg on hover, create a duplicate of the image and change the stroke value to the appropriate colour in the new svg */
.cms-search-button::after {
  content: url("../../images/magnifying-glass-white.svg");
}
/* standard branded buttons used throughout the cms */
/* these button definitions *must* support a.cms_button_ and button.cms_button_ */
/* standard behaviour should be a button that conforms to the size of the content */
/* .cms_button_fullwidth is a button that conforms to the full width of the parent, all 3 basic buttons need to have a cms_button_fullwidth option */
.cms-button-a,
.cms-button-b,
.cms-button-cancel,
.cms-button-a:visited,
.cms-button-b:visited,
.cms-button-cancel:visited {
  font-family: "Prata", serif;
  padding: 1rem 2.5rem;
  /* margin-bottom: 1rem; */
  box-sizing: border-box;
  border: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  /* font-size: 0.9rem; */
  border-radius: 50px;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.719);
}
/* using svg after effect*/
/* active for action link and blog lists
	disabled for normal buttons, but uncomment below to enable for all buttons
.cms-button-a::after, .cms-button-b::after, .cms-button-cancel::after, */
.cms-action-link::before,
.blog_widget ul.blog-list li::before {
  content: url("../../images/gt-white.svg");
  display: inline-block;
  vertical-align: middle;
  margin: 0 -0.5rem 0 0.5rem;
  width: 1rem;
  height: auto;
}
.cms-action-link::before,
.blog_widget ul.blog-list li::before {
  content: url("../../images/gt-black.svg");
  margin: 0 0.3rem 0 0;
  width: 0.7rem;
  height: auto;
}
.cms-button-a,
.cms-button-a:visited {
  /* main button style for all content */
  background: var(--brand-a);
  color: var(--brand-a-color);
  /* border: 1px solid var(--brand-a); */
}

p.cms-button-a a,
p.cms-button-a a:visited {
  color: var(--brand-a-color);
}

.cms-button-a:hover {
  background: var(--brand-a-hover);
  border-color: var(--brand-a-hover);
  color: var(--brand-a-hover-color);
  border: 2px solid rgba(255, 255, 255, 0.37);
}

.cms-button-a.gld,
.cms-button-a.gld:visited {
  background: #d4b03f;
  color: #29210b;
  border: 1px solid #d4b03f;
}

.cms-button-a.gld:hover {
  background: #ffe181;
  border: 1px solid #ffe181;
}

.cms-button-b,
.cms-button-b:visited {
  /* not used in core cms, placeholder for sites that want an alternate button style for use in custom content. Note, more buttons can be added, but additional work will need to be undertaken to support them in tinymce */
  background: var(--brand-b);
  border: 2px solid var(--brand-b);
  color: var(--brand-b-color);
}
.cms-button-b:hover {
  background: var(--brand-b-hover);
  border-color: var(--brand-b-hover);
  color: var(--brand-b-hover-color);
}
button.cms-button-a,
button.cms-button-b,
button.cms-button-cancel,
button.cms-button-a:visited,
button.cms-button-b:visited,
button.cms-button-cancel:visited {
  border-width: 4px;
}
.cms-button-cancel {
  /* will be used in members */
  background: grey;
  color: white;
}
.cms-button-cancel {
  background: black;
}
.shoppingcart > svg {
  fill: green;
  transition: fill 1s;
  vertical-align: top;
}
.shoppingcart:hover > svg {
  fill: blue;
}


/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/*  toggleExpandable DIVS, start  */
.toggleExpandable {
  cursor: pointer;
  border-top: 1px solid #ababab;
  /* padding-top: .8rem; */
  position: relative;
  padding-left: 1.5rem;
}
.toggleExpandable h3 {
  margin: 0.5rem;
}
.toggleExpandable::before {
  /* content: '\0025BC'; */
  content: "\00002B";
  margin-right: 0.75rem;
  float: left;
  width: 15px;
  text-align: center;
  font-weight: 500;
  font-size: 1.2rem;
  top: 0.7rem;
  transition: all 0.3s;
  display: block;
  position: absolute;
  left: 0;
}
.toggleExpandable.open::before {
  /* content: '\0025B2'; */
  content: "\00002D";
  font-size: 1.75rem;
  transition: all 0.3s;
}
.expandableItem {
  display: none;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.toggleExpandable.lasttoggleExpandable {
  border-bottom: 1px solid #ababab;
  margin-bottom: 1.5rem;
}
.toggleExpandable.lasttoggleExpandable.open {
  border-bottom: none;
  margin-bottom: 0;
}
.toggleExpandable.lasttoggleExpandable.open + .expandableItem {
  border-bottom: 1px solid #ababab;
}
.toggleExpandable h2 {
  margin-top: 0.35rem;
}
/*  toggleExpandable DIVS, finish  */
.page-home h1 {
  font-size: 2.6rem;
  margin: 0;
}
.page-home h2 {
  font-size: 2.3rem;
  margin: 3rem auto;
}
/*  COLUMN TEXT DIVs, start  */
.column-text {
  display: flex;
}
.column-text > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}
/*
  .column-text > div p {
	text-align: center;
  }
*/
.column-text > div p:last-child {
  margin-bottom: 0;
}

/*  COLUMN TEXT DIVs, finish  */
/*  Homepage Features BLOG section, start  */
.page-home .div-home-blog h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.3rem;
  text-transform: uppercase;
}
.page-home .div-home-blog p {
  text-transform: uppercase;
  text-align: center;
}
.page-home .div-home-blog p.p-blog-title {
  max-width: 296px;
  margin: 0 auto 1rem;
}
/*  Homepage Features BLOG section, finish  */
/*  Homepage FULL WIDTH section, start  */
.div-home-full-width {
  padding: 3rem 1rem;
  background: url(../../uploads/content/bg2.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  min-height: 400px;
}
.div-home-full-width .standard-width {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  width: 100%;
}

.div-home-full-width .standard-width > div {
  min-width: 50%;
}

.page-home .div-home-full-width h2,
.page-home .div-home-full-width h3,
.page-home .div-home-full-width p {
  /* width: 50%; */
  color: white;
  text-align: left;
  margin-left: 0;
}

.page-home .div-home-full-width h3 {
  font-size: 1.8rem;
}
.page-home .div-home-full-width p {
  font-size: 1.2rem;
  line-height: 2rem;
}
.page-home .div-home-full-width p:last-child {
  margin-top: 2rem;
  margin-bottom: 0;
}

/*  Homepage FULL WIDTH section, finish  */
/*  Homepage TESTIMONIALS section, start  */
.div-home-testimonials {
  padding: 1rem 1rem 2rem;
  display: flex;
  flex-direction: column;
}
.page-home .div-home-testimonials h2 {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  /* color: #231f20; */
  font-size: 2.2rem;
  text-transform: uppercase;
  font-weight: 500;
}
.div-home-testimonials h2::after {
  position: absolute;
  display: block;
  content: "\201C";
  /* content: '\201D'; */
  font-family: "Poppins", "Verdana", sans-serif;
  font-size: 300%;
  color: #00884c;
  bottom: 0;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
}
.div-home-testimonials p {
  font-weight: 300;
  text-align: center;
}
.div-home-testimonials .testimonial-name {
  font-style: italic;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
}
.testimonial-name {
  margin-bottom: 2rem;
}
/*  Homepage TESTIMONIALS section, finish  */
/*  Homepage CONTACT US section, start  */
.div-home-contact-us-container {
  padding: 2rem;
  background: #ebebeb;
}
.div-home-contact-us-container h2 {
  text-align: center;
  font-weight: 600;
}
.home-contact-us {
  width: 39%;
  margin: 0 auto;
}
.home-contact-us label {
  color: black;
}
.home-contact-us .fmrequire {
  display: none;
}
.home-contact-us form.cms-form #captcha-button-box {
  display: block;
  margin-left: 0;
  text-align: center;
}
.home-contact-us form.cms-form #captcha-button-box .cms-button-a {
  margin-bottom: 0;
}
.home-contact-us form.cms-form #captcha-image-box {
  margin-left: 0;
}
.home-contact-us form.cms-form #form-bottom {
  margin-top: 2rem;
  margin-left: 0;
  display: block;
}
/*  Homepage CONTACT US section, finish  */
/*  Head Line Menu, start  */
/****************************************************************/
/****************************************************************/
.head-line-menu {
  background: #11879b;
  width: 100%;
  height: 39px;
  color: white;
  font-weight: 500;
  border-bottom: 1px solid #17613b;
  display: flex;
  align-items: center;
  display: none;
}
.head-line-menu > .standard-width {
  width: 100%;
  display: flex;
}
.head-line-menu .contact-container,
.head-line-menu .price-container {
  flex: 1;
}
.head-line-menu .contact-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-left: 1rem;
}
.head-line-menu .price-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.head-line-menu .contact-container a {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  margin-right: 0.5rem;
  transition: all 0.3s;
}
.head-line-menu .contact-container a:hover {
  color: var(--brand-a-hover);
  transition: all 0.3s;
}
.head-line-menu .contact-container a:nth-of-type(1) img {
  width: 18px;
  vertical-align: sub;
  margin-right: 0.3rem;
}
.head-line-menu .contact-container a:nth-of-type(2) img {
  width: 20px;
  vertical-align: middle;
  margin-right: 0.3rem;
}
.head-line-menu .contact-container a.btn-top-header {
  padding: 0.2rem 0.75rem;
  color: #231f20;
  text-transform: uppercase;
}
.btn-top-header-join {
  background: #d5dc30;
}
.btn-top-header-shop {
  background: #e84924;
}
.btn-top-header-donate {
  background: #8cc143;
}
.price-container .alert-price {
  color: #231f20;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
}
.price-container .alert-price.flags-price a {
  height: 17px;
  transition: all 0.3s;
}
.price-container .alert-price.flags-price a:hover {
  opacity: 0.6;
  transition: all 0.3s;
}
@media only screen and (max-width: 1185px) {
}
#widgetBar > div {
  margin: 0 1rem !important;
}
@media screen and (max-width: 1275px) {
  .shopAccount {
    margin-right: 0 !important;
  }
}
/****************************************************************/
/****************************************************************/
/*  Head Line Menu, finish  */
/* BLOG page styles, start */
.page-blog #middle {
  padding-bottom: 3rem;
}
.blogcontent-homepage {
  margin-bottom: 3rem;
}
.blog_widget ul.blog-list li {
  position: relative;
  padding-left: 1rem;
}
.blog_widget ul.blog-list li::before {
  position: absolute;
  top: 2px;
  left: 0;
}
/* BLOG page styles, finish */
/****************************************************************/
/****************************************************************/
/*********************** Main styles ****************************/
/****** before inserting this code, re-write file js/functions.js ******/
/****** before inserting this code, re-write file template/inc-header.php ******/
/****** before inserting this code, re-write file template/inc-bottom.php ******/
/****** before inserting this code, MOVE <div id="hamburger-wrap"> before <nav id='top-nav' class='cms-nav'> in template/inc-top-menu.php ******/
/****** before inserting this code, CHANGE line #455 from '600px' to '1186px' in template/css/atf.navigation.css ******/
/****** for footer styles, overwrite file template/css/btf.footer.css ******/
/****** for dropdown menu styles, in template/css/atf.navigation.css line #101 change "width: 100%" to "width: calc(100% + 195px);" - "plus LOGO width" ******/
/***** Adding margin-top for header and height nopgbanner in case of E-comm top line *****/
.nopgbanner {
  height: var(--max-header-height) !important;
}
/* #header {
		margin-top: 40px;
	} */
.page-home #header-fixed {
  position: fixed; /*  in case of ALERT BAR change 'fixed' position to 'relative'!!!  */
  background: transparent !important;
  /* position: relative; */
  /* box-shadow: 0 0 7px #828282; */
}

#header-fixed {
  position: fixed;
  background: transparent !important;
}

.fixedContainer-opacity {
  position: absolute;
  width: 100%;
  height: var(--max-header-height);
  /* top: 0; */
  /* top: 40px; */ /***** Adding 40px top in case of E-comm top line *****/
  left: 0;
  background: var(--brand-a);
  opacity: 1;
  /* background: url("../../images/bg_header.jpg") center no-repeat;
		background-size: cover; */
    transition: all .5s;
}

.page-home .fixedContainer-opacity {
  opacity: 0;
}

.opacity-none {
  opacity: 1 !important;
  transition: all 0.1s;
}
.fixedContainer-opacity.opacity-none {
  height: var(--min-header-height) !important;
  transition: all 0.5s;
}
.topMenuBG {
  width: 100%;
  height: var(--max-header-height);
}
.topMenuBG > .standard-width {
  display: flex;
}
#topMenuBG #header-logo {
  width: var(--logo-max-width);
  height: var(--max-header-height);
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}
#topMenuBG #header-logo:hover {
  opacity: 0.9;
  transition: all 0.3s;
}
#topMenuBG #header-logo a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1186px) and (max-width: 1290px) {
  #topMenuBG #header-logo {
    margin-left: 1em;
  }
}
#topMenuBG #header-logo.logoWidthSmall {
  width: var(--logo-min-width) !important;
  height: var(--min-header-height);
  transition: all 0.3s;
}
#topMenuBG #header-logo.logoWidthSmall a {
  transition: all 0.3s;
}
#topMenuBG #header-logo a img {
  height: auto;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 70%;
}
#topMenuBG #headerRight {
  display: flex;
  flex: 1;
  height: var(--max-header-height);
  position: relative;
  align-items: flex-end;
  margin: 0 0 0 1rem;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1186px) and (max-width: 1290px) {
  #headerRight {
    margin-right: 1em;
  }
}
#topMenuBG.opacity-none,
#topMenuBG.opacity-none #headerRight {
  height: var(--min-header-height);
}
#topMenuBG #headerRight .topHeaderContact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* flex: 1; */
  margin-bottom: 3px;
  display: none;
}
#topMenuBG #headerRight .topHeaderContact a.cms-button-a,
#topMenuBG #headerRight .topHeaderContact p.cms-button-a {
  margin-left: 1rem;
}
.topHeaderContact a.cms-button-a {
  font-size: 1.3rem;
  font-weight: 500;
}
/****************************************/
/* this line, in case no up-menu buttons */
@media (min-width: 1186px) {
  /* #topMenuBG #headerRight .topHeaderContact {
			display: none;
		} */
     #topMenuBG #headerRight {
        flex-direction: row-reverse;
        align-items: center;
    }
}
#headerRight .topHeaderContact p {
  margin-bottom: 0;
  /* margin-top: 0.5rem; */
}
#top-nav-wrap {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}
.div-phone-icon {
  display: none;
}
/****** before inserting this code, COMMENTed OUT all .insetLarge and .insetSmall in template/modules/galleries/frontend/btf.displaygallery.css ******/
/****** before inserting this code, COMMENTed OUT all .insetLarge in template/css/atf.banner.css ******/
/**********************************************************************/
/*********************** insetSmall, insetLarge Areas, start ****************************/
.insetSmall,
.insetLarge {
  width: 100%;
  height: calc(100% - 120px);
  /* height: calc(100% - 0px); */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* margin-top: 119px; */
}
.insetSmall > .standard-width,
.insetLarge > .standard-width {
  width: 100%;
}
.insetSmall .banner-header,
.insetLarge .banner-header {
  font-family: "Prata", serif;
  /* color: white; */
  font-size: 3rem;
  font-weight: 400;
  /* text-align: center; */
  /* text-shadow: 0 0 5px white; */
  line-height: 1.35em;
  /* text-transform: uppercase; */
}
.banner-header-wraper {
  text-align: center;
}

.banner-buttons {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  max-width: 780px;
  margin: 0 auto;
  margin-top: 30px;
}

.insetSmall p,
.insetLarge p {
  font-family: "Prata", serif;
  margin: 0.5rem auto;
  /* color: white; */
  /* text-align: center; */
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 2.5rem;

}
.insetSmall p:last-child,
.insetLarge p:last-child {
  margin-top: 2rem;
  margin-bottom: 0;
  text-shadow: none;
}
#header .insetSmall p a.btn,
#header .insetLarge p a.btn {
  color: white;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  text-transform: uppercase;
  text-shadow: none;
  background: #39b3e4;
  border: 1px solid #39b3e4;
  white-space: nowrap;
  line-height: 1.35rem;
  transition: all 0.3s;
}
#header .insetSmall p a.btn:hover,
#header .insetLarge p a.btn:hover {
  background: white;
  color: black;
  border: 1px solid #39b3e4;
  transition: all 0.3s;
}
@media only screen and (max-width: 1290px) {
  .insetSmall .standard-width,
  .insetLarge .standard-width {
    /* padding: 1.5rem; */
    width: calc(100% - 3rem);
  }
  .insetSmall .banner-header,
  .insetLarge .banner-header {
    font-size: 4vw;
  }
  .insetSmall p,
  .insetLarge p {
    font-size: 3vw;
  }
}

@media only screen and (max-width: 1040px) {
  .insetSmall p,
  .insetLarge p {
    margin: 0 auto;
    /* line-height: 1.5rem; */
    line-height: 6vw;
    /* font-size: 1rem; */
  }
  #header .insetSmall p a.btn,
  #header .insetLarge p a.btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  .insetSmall p a.cms-button-a,
  .insetSmall p a.cms-button-a:visited,
  .insetLarge p a.cms-button-a,
  .insetLarge p a.cms-button-a:visited {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 899px) {
  .insetSmall,
  .insetLarge {
    height: 100%;
    /* margin-top: 0; if there is no ecomm top line */
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {

  .insetSmall p:last-child,
  .insetLarge p:last-child {
    width: 100%;
    margin-top: 0.5rem;
  }
  .insetSmall p a.cms-button-a:nth-of-type(1),
  .insetLarge p a.cms-button-a:nth-of-type(1) {
    margin-right: 0.5rem;
  }
  .table-mint {
    width: 100%;
  }
  .div-home-video,
  .div-home-promote {
    min-height: auto;
  }
  .freight-quote-form {
    width: calc(100% - 3rem);
  }
}
@media only screen and (max-width: 550px) {
  #header .insetSmall p a.btn,
  #header .insetLarge p a.btn {
    padding: 0.3rem 0.6rem;
  }
}
@media only screen and (max-width: 500px) {
  .btn-top-header-join,
  .btn-top-header-donate {
    display: none;
  }
}
@media only screen and (max-width: 360px) {
  .insetSmall .standard-width,
  .insetLarge .standard-width {
    padding: 0;
  }
}
/***********************************************************************/
/*********************** insetSmall, insetLarge Areas, finish ****************************/
/*********************** Main styles, Responsiveness ****************************/
@media only screen and (max-width: 1400px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1185px) {
  .nopgbanner {
    height: var(--min-header-height) !important;
  }
  .column-text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-gap: 3rem 0;
  }
  .scrolled #top .jsGallery {
    margin-top: 0;
  }
  #header-fixed {
    position: fixed;
    /* position: relative; */
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    top: 0;
    background: #fff;
    box-shadow: 0 0 7px #828282;
  }
  .page-home .fixedContainer-opacity,
  .fixedContainer-opacity {
    opacity: 1;
    height: var(--min-header-height);
  }
  #topNav {
    display: block !important;
    order: 3;
  }
  #topMenuBG #header-logo {
    width: var(--logo-min-width);
    height: var(--min-header-height);
  }
  #header-logo a {
    width: 340px;
  }
  .topHeaderContact {
    display: none;
  }
  #headerRight {
    margin-right: 0.5rem;
    float: right;
    flex: 1;
    position: relative;
    right: unset;
    display: block;
  }
  #headerRight .topHeaderContact p {
    display: none;
  }
  #headerRight .topHeaderContact {
    border-bottom: none;
    position: absolute;
    right: calc(25px + 1.25rem);
    margin: 0;
    z-index: 100;
  }
  #topMenuBG #headerRight .topHeaderContact {
    margin-bottom: 0;
  }
  #topMenuBG #headerRight {
    height: var(--min-header-height);
    right: 0;
  }
  #top-nav-wrap {
    /* display: block !important; */
    position: relative;
    margin-top: var(--min-header-height);
    clear: both;
  }
  #hamburger-wrap {
    clear: both;
    display: block !important;
    width: 25px;
    float: right;
    /* position: relative; */
    position: absolute;
    top: 0;
    right: 0;
    background: transparent !important;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
    color: #2c2a28;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0.4em 0 0.4em 0;
    line-height: 34px;
    transform: translateY(calc(0px - (var(--min-header-height) / 2) - 10px));
  }

  .topMenuBG {
    height: var(--min-header-height);
  }
  .div-phone-icon {
    display: block;
    width: 25px;
    height: 25px;
  }
  .div-phone-icon a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .div-home-blog .column-text > div:nth-of-type(3) {
    display: none;
  }
}
@media only screen and (max-width: 1080px) {
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 899px) {
  .fixedContainer-opacity {
    opacity: 1;
    height: var(--min-header-height);
  }
  .home-contact-us {
    width: 75%;
  }
  #sidebar-top {
    display: none;
  }

  .banner-buttons a.cms-button-a {
    padding: 1.5rem;
    min-width: 170px;
  }
}
@media only screen and (max-width: 800px) {
  .div-home-full-width .standard-width > div {
      min-width: unset;
  }
}
@media only screen and (max-width: 768px) {

   .banner-buttons a.cms-button-a {
    padding: 1rem;
    min-width: 150px;
  }

}
@media only screen and (max-width: 679px) {
  h1 {
    font-size: 1.7rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  h3 {
    font-size: 1.2rem !important;
  }
  .company-info p.green {
    font-size: 1.2rem;
    margin: 0 0 1rem;
  }
  .page-home #middle {
    margin-top: 0;
  }
  .div-home-full-width {
    min-height: auto;
  }
  .head-line-menu .contact-container a span {
    display: none;
  }
  .div-home-testimonials {
    padding: 0rem 1.5rem 2rem;
  }
  .column-text {
    display: block;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 1rem;
  }
  .column-text > div {
    padding: 1rem 0;
  }
  .page-home h1,
  .page-home h2 {
    margin-bottom: 1rem;
  }
  .page-home h2 {
    /* text-align: left; */
  }
  .div-home-blog .column-text > div:nth-of-type(3) {
    display: block;
  }
  .div-home-contact-us-container {
    padding-top: 1rem;
  }
  .div-home-contact-us-container h2 {
    text-align: center;
  }

  .banner-buttons {
    flex-direction: column;
    max-width: 300px;
  }

  .banner-buttons a.cms-button-a {
    padding: .5rem;
  }

}
@media only screen and (max-width: 576px) {
  .home-contact-us {
    width: 65%;
  }
   .page-home .div-home-full-width h2,
  .page-home .div-home-full-width h3,
  .page-home .div-home-full-width p {
    text-align: center;
    width: 90%;
    margin: 1rem auto;
  }
}
@media only screen and (max-width: 499px) {
  .banner-buttons a.cms-button-a {
    padding: .2rem;
  }
}
@media only screen and (max-width: 485px) {
}
@media only screen and (max-width: 479px) {
  .fixedContainer-opacity {
    height: var(--min-header-height) !important;
  }
  .topMenuBG {
    height: var(--min-header-height) !important;
  }
  #header-logo {
    height: 180px !important;
  }
  .home-contact-us {
    width: 95%;
  }
}
@media only screen and (max-width: 375px) {
  #mobileMenu {
    margin: 0 0.5rem 0 0;
  }
}
/* ============================================ Main programming ============================================ */

/* Info text after banner - homepage */
.company-info {
  padding: 2rem 0 3rem;
  background-color: #f8f8f9;
}
.company-info .column-text > div {
  gap: 15px;
}
.company-info .text {
  padding-left: 80px;
  position: relative;
   z-index: 2;
}
.company-info .sub-title {
  font-family: "Prata", serif;
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 15px 0;
  font-weight: 500;
}

.company-info p {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7rem;
}

.company-info h1 {
  font-weight: 500;
}

.company-info > div > p {
  max-width: 900px;
  opacity: 0.8;
  text-align: center;
  font-size: 0.9rem;
}

.company-info img {
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
}

@media only screen and (max-width: 1000px) {
  .company-info .column-text > div {
    gap: 0;
  }
}

@media only screen and (max-width: 679px) {
  .company-info .text {
    padding-left: unset;
  }
}

/* our services */
.images-section {
  display: grid;
  gap: 10px;
	grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
.images-section > div {
  max-width: 320px;
  text-align: center;
  width: 100%;
}
.images-section p.title {
  font-family: "Prata", serif;
  margin: 0;
  padding: 10px 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.9rem;
}

.images-section p.price {
  font-weight: 400;
  font-size: 1.1rem;
}
.images-section a {
  color: black;
  transition: all 0.5s;
}
.images-section a:hover {
  color: var(--brand-a);
  transition: all 0.5s;
}
.images-section-wrapper .section-title {
  padding: 40px 0;
}
.images-section-wrapper {
  padding-bottom: 40px;
  padding-top: 20px;
}

.images-section-wrapper .hdr {
  margin: 40px 0 30px;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.images-section-wrapper .hdr > div:first-child {
  width: 350px;
}

.images-section-wrapper .hdr > div:last-child {
  flex: 1;
}

.page-home .images-section-wrapper .hdr h2 {
    margin: 0;
}

.images-section img {
  opacity: 1;
  transition: all 1s;
}
.images-section img:hover {
  opacity: 0.6;
  transition: all 1s;
}

@media only screen and (max-width: 1086px) {
  .images-section {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 780px) {
  .images-section {
    grid-template-columns: repeat(2, 1fr);
  }
  .images-section p.title {
      font-size: 1.2rem;
      line-height: 1.4rem;
  }
  .images-section p.price {
    font-size: 1rem;
  }

  .images-section-wrapper .hdr {
    flex-direction: column;
  }
}

@media only screen and (max-width: 470px) {
  .images-section {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* tributes recent section */
.tributes-recent-wrapper {
  padding: 2rem 0 3rem;
  background-color: #f2f2f7;
}

.tributes-recent {
    display: flex;
    gap: 15px;
    justify-content: space-evenly;
    text-align: center;
    margin: 40px auto;
    flex-wrap: wrap;
}

.tributes-recent > div {
  max-width: 250px;
}

.tributes-recent .image {
  position: relative;
  width: 250px;
  height: 330px;
  overflow: hidden;
  margin-bottom: 20px;
}

.tributes-recent .photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tributes-recent .image .frame {
  position: absolute;
    z-index: 2;
    top: -2px;
    left: -2px;
    min-width: calc(100% + 4px);
    min-height: calc(100% + 4px);
    height: calc(100% + 4px);
    width: calc(100% + 4px);
}

.tributes-recent .p-blog-title a {
  font-family: "Prata", serif;
  color: black;
  text-align: center;
  font-size: 1.3rem;
}



/* Resources section OLD */
.text-section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.text-section p {
  font-size: 0.9rem;
  font-weight: 300;
  margin: 0;
}
.text-section p.title {
  color: var(--brand-a);
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.text-section .text a {
  padding-top: 10px;
  color: black;
  display: block;
  font-weight: 600;
}
.text-section > div {
  flex: 45%;
  display: flex;
  align-items: flex-start;
}
.text-section .text {
  padding: 10px;
}
.text-section img {
  padding-top: 20px;
}
.text-section-wrapper {
  margin: 20px 0 40px;
}
@media only screen and (max-width: 800px) {
  .text-section > div {
    flex: 100%;
  }
}
/* Send Funeral Flowers OLD */
.flowers {
  background-image: url("../../images/homepage/hp-banner-bottoml.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 290px;
  position: relative;
  margin: 20px 0 60px;
}
.flowers .text {
  position: absolute;
  background-color: white;
  max-width: 500px;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  padding: 30px;
}
.flowers .text h2 {
  margin: 0;
  padding-bottom: 15px;
}
.flowers .text p {
  font-weight: 600;
  margin: 0;
  text-align: center;
}
/* Footer */
.footer-logo img {
  max-width: 200px;
  width: 100%;
}
@media only screen and (max-width: 1186px) {
  #headerRight {
    margin-left: 150px !important;
  }
}
/* Special table style for pricing */
table#pricing {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
table#pricing th,
table#pricing td {
  text-align: left;
  padding: 16px;
}
table#pricing td:last-child {
  text-align: right;
  /* width: 90px; */
  width: fit-content;
}
table#pricing tr:nth-child(even) {
  background-color: #f4f4f4;
}

.topHeaderContact .cms-button-a a {
  color: black;
  font-weight: 600;
}


/* Form */
#fmForm_3 #fieldId-18,
#fmForm_3 #fieldId-43,
#fmForm_3 #fieldId-49,
#fmForm_3 #fieldId-53,
#fmForm_3 #fieldId-68,
#fmForm_3 #fieldId-76,
#fmForm_3 #fieldId-85,
#fmForm_3 #fieldId-86 {
  font-family: "Prata", serif;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 1.5rem 0;
  line-height: 1.35em;
}


.two-in-row {
  display: flex;
  gap: 20px;
}

.two-in-row > div {
  width: 50%;
}


@media only screen and (max-width: 1200px) {

  .two-in-row {
    flex-direction: column;
  }

  .two-in-row > div {
    width: 100%;
  }
}

  .page-home #header-logo #logo-white {
    display: block;
  }

  .page-home #header-logo #logo-dark {
    display: none;
  }

/* homepage overriding */
@media only screen and (min-width: 1186px) {
  .page-home #topMenuBG:not(.opacity-none) .cms-nav a {
    color: black;
  }

  .page-home #header-logo #logo-white {
    display: none!important;
  }

  .page-home #topMenuBG.opacity-none #header-logo #logo-white {
    display: block!important;
  }

  .page-home #header-logo #logo-dark {
    display: block!important;
  }

  .page-home #topMenuBG.opacity-none #header-logo #logo-dark {
    display: none!important;
  }
}