/* var declarations */
:root {
  /* standard definitions required and used throughout the cms */
  --min-screen-width: 320px;
  --standard-width: 1200px;

  --sidebar-width: 300px;
  --sidebar-padding: 2rem;

  --brand-a: #fcee21; /* #bf202f;					/* main brand color used on backgrounds and buttons */
  --brand-a-color: white; /* text color used on main brand backgrounds */
  --brand-a-hover: #5070a4; /* 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;



  /* FORMs default colors definitions */
  --brand-form-color: #757579;
  --brand-form-placeholder-color: #c2c2c2;


  /*  header's height definitions  */
  --min-header-height: 110px;
  --max-header-height: 180px;


  /* 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: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  text-align: left;
  background: white;
  line-height: 1.45rem;
  min-width: var(--min-screen-width);
  position:relative;
}

/* for the admin page editing area */
.mceContentBody {
  background-color: #ffffff !important;
  background-image: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* GENERAL FORMATTING */

a,a:visited {
  text-decoration: none;
  color: var(--brand-a-hover);
  font-weight: 500;
  transition: color 1s ease;
}

a:hover,a:active {
  color: var(--brand-b);
  transition: color 1s ease;
}

button {
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
}

strong {
  font-weight: 700;
}

em {
  font-weight: unset;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
  line-height: 1.45em;
  font-weight: 500;
}

h1 {
  margin-bottom: 1.2rem;
  line-height: 1.35em;
  color: var(--brand-b);
  font-size: 2.4rem;
  font-weight: 400;
  color: #5070a4;
}

h2 {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--brand-a-hover);
  margin-bottom: 1rem;
  line-height: 1.35em;
  color: #000000;
}

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.2rem;
  margin-bottom: 1rem;
  font-weight: 500;
  text-transform: unset;
}


img,embed,object,video {
  max-width: 100%;
  border: 0 none;
}

p {
  color: var(--brand-b);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

ul,ol {
  margin: 1.5rem 0 1.5rem 2.5rem;
  list-style-type: none;
  list-style-image: url(../../images/check_ul-li.png);
}

ul li,
ol li {
  margin-bottom: 1rem;
}

/*********************** MAIN DIVS ****************************/
#middle {
  position: relative;
  min-width: var(--min-screen-width);
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#middle:after {
  clear: both;
  display: table;
  content: "";
}

#middle.hasSidebar {
  max-width: var(--standard-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1em;
  display: flex;
  flex-direction: column;
}

/* ;padded-standard-width; using 1232 */
@media (min-width: 1232px) {
  
  #middle.hasSidebar {
    padding: 0;
  }
}

#bottom {
  width: 100%;
  position: relative;
  min-width: var(--min-screen-width);
  background: black;
  border-top: 10px solid #fcee21;
}
/* 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,
#sidebar-bottom{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
#sidebar-top {
	order: 1;
}
#sidebar-bottom {
	order: 3;
	margin-top: 3rem;
}

.sb_widget {
  min-width: calc(var(--sidebar-width) - var(--sidebar-padding));
  flex:1;
}

/* Rules for putting sidebar on the side */
/* ;sidebar-cutoff; */
@media (min-width: 900px) {
  
  #middle.hasSidebar {
    display: block;
  }
  #middle.hasSidebar #content {
    width: calc(100% - var(--sidebar-width));
    float: left;
  }
  #sidebar-top, #sidebar-bottom {
    float: right;
    width: var(--sidebar-width);
    padding-left: var(--sidebar-padding);
	display: block;
  }

  #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;
}



#middle.hasSidebar #content > .standard-width {
  padding: 0;
}

.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;
}


/* ;padded-standard-width; using 1232 */
@media (min-width: 1232px) {
  
  .standard-width {
    padding: 0;
  }
}



/*  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;
  this-will-center-single-objects: ;
  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: red;
  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="date"],
form.cms-form input[type="password"],
form.cms-form textarea {
  width: 100%;
  background: #fff;
  padding: .75rem;
  margin: 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  /* border: none; */
  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: inherit;
  font-family: 'Open Sans', sans-serif;
}

.page-home form.cms-form input[type="text"],
.page-home form.cms-form input[type="email"],
.page-home form.cms-form input[type="date"],
.page-home form.cms-form input[type="password"],
.page-home form.cms-form textarea {
  width: 100%;
  background: #fff;
  padding: 1rem;
  margin: 0;
  vertical-align: middle;
  /* border: 1px solid #c0c0c0; */
  border: none;
  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: inherit;
  font-family: 'Open Sans', sans-serif;
}

form.cms-form input[type="date"],
form.cms-form input::placeholder,
form.cms-form textarea::placeholder {
  text-transform: uppercase;
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
}

form.cms-form .selectType {
  width: 100%;
  padding: 1rem;
  margin: 0 0 1rem 0;
  vertical-align: middle;
  border: 1px solid #c0c0c0;
  color: var(--brand-form-color);
  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: var(--brand-form-color);
  padding: 0.5em;
  margin-bottom: 1rem;
}

form.cms-form textarea {
  margin-bottom: 1rem;
  min-height: 12em;
}

form.cms-form #form-bottom {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

form.cms-form #captchaContainer {
  display: block;
  max-width: 330px;
}

form.cms-form #captcha-image-box {
  display: block;
  max-width: 300px;
  flex: 1 1 auto;
}

form.cms-form img#captcha {
  width: 100%;
}

form.cms-form #captcha-code{
	margin: 0;
}

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;
  letter-spacing: 0.12rem;
  font-family: inherit;
  transition: color 1s ease, background 1s ease;
}

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: color 1s ease, background 1s ease;
}

/* 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: 52px;
  box-sizing: border-box;
  vertical-align: top;
  background: var(--brand-a-hover);
  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");
}

.cmsDebug .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 {
  padding: 0.5rem 1.25rem;
  box-sizing: border-box;
  border: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  /* border-radius: 5px; */
}

/* using svg after effect*/
.cms-action-link::before,
.blog_widget ul.blog-list li::before {
  content: url("images/gt-black.svg");
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.3rem 0 0;
  width: 0.7rem;
  height: auto;
}

.cmsDebug .cms-action-link::before,
.cmsDebug .blog_widget ul.blog-list li::before {
  content: url("../../images/gt-black.svg");
}

.cms-button-a,
.cms-button-a:visited {
  /* main button style for all content */
  background: transparent;
  color: white;
  border: 2px solid var(--brand-a);
  border-radius: 10px;
  transition: color 1s ease, background 1s ease, border 1s ease;
  font-size: .9325rem;
  /* font-weight: 400; */
  text-transform: uppercase;
  letter-spacing: .05rem;
}
.cms-button-a:hover {
  background: var(--brand-a-hover);
  border-color: var(--brand-a-hover);
  color: var(--brand-a-hover-color);
  transition: color 1s ease, background 1s ease, border 1s ease;
}

.page-schedule-an-estimate .cms-button-a,
.page-contact .cms-button-a,
.page-blog .cms-button-a {
  color: var(--brand-a-hover);
}

.page-schedule-an-estimate #topHeaderContact .cms-button-a,
.page-contact #topHeaderContact .cms-button-a,
.page-blog #topHeaderContact .cms-button-a {
  color: white;
}

.page-schedule-an-estimate .cms-button-a:hover,
.page-contact .cms-button-a:hover,
.page-blog .cms-button-a:hover {
  color: white;
}

.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: 2px;
}

.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::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;
  display: block;
  position: absolute;
  left: 0;
  transition: font-size 1s ease;
}
.toggleExpandable.open::before {
  /* content: '\0025B2'; */
  content: "\00002D";
  font-size: 1.75rem;
  transition: font-size 1s ease;
}
.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  */



/*  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:first-child{
	padding-left:0;
}
.column-text > div:last-child{
	padding-right:0;
}

.column-text > div p:last-child {
  margin-bottom: 0;
}

.column-text > div p a {
  font-weight: 600;
}
/*  COLUMN TEXT DIVs, finish  */


.back-to-top {
  display: none;
  position: fixed;
  bottom: 0;
  right: 1rem;
  text-align: center;
  cursor: pointer;
  z-index: 789;
  background: black;
  padding: 0.35rem 0.35rem 0;
  border-radius: 5px;
  border: 1px solid black;
}

.back-to-top img {
  width: 38px;
  height: 57px;
}

.homestars-link {
    display: inline-block;
    width: 100px;
    top: 15px;
    position: relative;
}

.custom-blue-bg-text {
  background: #5070a4;
  color: #f8ed24;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 1.5rem;
}



p.btn-call-wrapper {
  margin: 3rem auto;
  text-align: center;
}

p.btn-call-wrapper > a {
    display: inline-block;
    height: 100%;
    padding: .5rem 1.5rem .5rem 4rem;
    color:#000000;
    font-weight: 600;
    font-size: 1rem;
    background: #f8ed24;
    transition: background 1s ease;

    position: relative;
}

p.btn-call-wrapper > a:hover {
  background: black;
  transition: background 1s ease;
}

p.btn-call-wrapper > a::before {
  display: block;
  position: absolute;
  content: '';
  width: 24px;
  height: 22px;
  top: 50%;
  left: 23px;
  transform: translateY(-50%);
  background: url(images/phone_icon.png) center no-repeat;
}
.cmsDebug p.btn-call-wrapper > a::before {
  background-image: url(../../images/phone_icon.png);
}

.ul-rows {
  columns: 4;
  width: 50%;
  margin: 1.5rem auto;
}


form.cms-form input[type="text"]::placeholder,
form.cms-form input[type="email"]::placeholder,
form.cms-form input[type="date"]::placeholder,
form.cms-form input[type="password"]::placeholder, 
form.cms-form textarea::placeholder {
  font-size: 15px;
  text-transform: capitalize;
}

.page-residential-exterior-painting button.cms-button-a,
.page-residential-interior-painting button.cms-button-a {
  color: black;
}

.page-residential-exterior-painting button.cms-button-a:hover,
.page-residential-interior-painting button.cms-button-a:hover {
  background: var(--brand-a-hover);
  color: white;
}

.outline-cta {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 3rem 0;
  background: #fcee21;
  padding: 1.5rem;
  line-height: 1.45em;
}

/********************************************************************************/
/*********************** Main styles, Responsiveness ****************************/

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



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



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

  .column-text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-gap: 3rem 0;
  }

}

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

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

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

}

@media only screen and (max-width: 768px) {
  .ul-rows {
    columns: 3;
  }
}

@media only screen and (max-width: 679px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  .column-text {
    display: block;
    margin-bottom: 1rem;
  }

  .column-text > div {
    padding: 1rem 0;
  }

  .ul-rows {
    columns: 2;
  }
}

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

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

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

@media only screen and (max-width: 425px) {
  .ul-rows {
    columns: 2;
  }
}

@media only screen and (max-width: 375px) {
  .ul-rows {
    columns: 1;
  }
}



.page-schedule .jobber-inline-work-request iframe {
  width: 100% !important;
}