/*
Theme Name: Essency
Author: Port 80 Services
Author URI: https://port80.services/
Description: Customisations of Indigo theme for Essency
Template: indigo
Version: 1.0.0
Text Domain: essency
*/ 

/*temp addition - Designing Spaces banner advert*/
.design-spaces-wrap {
background: #EE0F14}

.design-spaces-wrap *{
padding: 0}

.design-spaces-wrap a, .design-spaces-wrap img{
display: block;
margin: auto;
text-align: center}

#popmake-1793{
padding: 0;
height: 600px}

#popmake-1793 .popmake-close {
font-size: 22px;
background: none;
box-shadow: none;	
top: -8px}
/*typography*/

@font-face {
 font-family:sportscenter;
 src:url(fonts/sportscenter.ttf)}


body:not(.home) #main .type-page > section:not(first-child) h1.mod-title {
font-size: 36px}

@media (max-width: 760px) {
.quadro-mod h1.mod-title {
word-spacing: 0;
font-size: 30px}

h1.page-title {
font-size: 36px }
}

/*header */

#masthead {
box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.10)}

#masthead .header-2nd-row .header-left {
display: flex;
width:100%;
justify-content: space-between}

#masthead .header-2nd-row .inner-header> div:not(.header-left ) {
display: none}

#msite-navigation {
background: #144B93}

#msite-navigation #menu-support li.label {
display: none }

ul#menu-support li:not(.label) a {
font-size: 10px;
letter-spacing: 1px;
text-decoration: underline}

nav ul.menu > li.label > a {
padding-left:5px;
opacity:.8!important}

nav ul.menu > li.label > a::after {
display: inline-block;
width: 6px;
height: 14px;
content: ':' }

nav ul.menu > li.label:hover > a {
filter: alpha(opacity=100);
opacity: 1; }

nav ul#menu-primary > li > a {
padding-left:5px;
opacity:.8!important}

nav ul.menu > li.separator:hover > a {
filter: alpha(opacity=100);
opacity: 1; }


#masthead .header-1st-row ul.menu ul {
top:30px}

#masthead .header-1st-row ul.menu ul li{
background: #144B93}

#masthead .header-1st-row ul.menu ul li a{
color:#fff}

/*mobile nav bug fix - stop cut-off on mobile landscape view*/
#msite-navigation >div.mm-navbar-bottom {
display: none}

#msite-navigation >div.mm-panels {
bottom: 20px}
/*ends*/

@media (min-width:960px) {

#site-navigation ul.menu{
display: flex}

#site-navigation #menu-primary >li:last-child {
margin-right: 0}

#site-navigation li:last-child a{
padding-right: 0}

#site-navigation li:last-child a::before{
right:0;}

#site-navigation li a {
opacity: 1;
position: relative;
white-space: nowrap;
box-sizing: border-box;
font-size: 13px;
letter-spacing: .5px}

#site-navigation .menu >li a:hover {
color:#F35A2D}

#masthead #site-navigation li> a::before {
position:absolute;
bottom: 5px;
left: 0;
content:"";
display: block;
border-bottom: 2px solid transparent;
opacity: 1}

#masthead #site-navigation li.current-menu-item >a::before, #masthead #site-navigation li.current-page-ancestor > a::before {
border-color: #F35A2D}

#masthead .header-1st-row .main-navigation li a::before {
display: none}

#masthead .header-1st-row .main-navigation li.current-menu-item> a{
text-decoration: underline}

body.home #masthead ul.menu li.menu-item-1350 >a, .page-id-511 #masthead ul.menu li.menu-item-1351 >a {
background: none}
	
body.home #masthead ul.menu li.menu-item-1350 >a:hover, .page-id-511 #masthead ul.menu li.menu-item-1351 >a:hover {
background: #F35A2D}
	
nav ul.menu > li.external > a::after {
width: 18px;
height: 18px;
top: 3px;
margin-left: 4px }

.header-right .main-navigation ul.menu > li.external > a {
padding-left: 3px }

.main-navigation ul#menu-support > li.label::before {
display: inline-block;
width: 12px;
height: 14px;
content: '|';
position:relative;
top: -1px }

.main-navigation ul#menu-support li.label a {
padding-left: 5px }

.header-right .main-navigation.secondary-navigation li.label, .header-right .main-navigation.secondary-navigation li.external {
margin-left: 1px }
	
#masthead  .main-navigation ul ul  {
left: -50%}
	
#masthead  .main-navigation ul ul ul {
left: -100%!important}
	
#masthead  .main-navigation ul ul li {
padding-left: 10px;
padding-right: 10px;
background: rgba(255,255,255,.9)}
	
#masthead  .main-navigation ul ul li a{
color: #000;
font-weight: 400;
text-transform: uppercase}

#masthead  .main-navigation ul ul li a:hover, #masthead  .main-navigation ul ul li.current-menu-item >a{
color: #fff!important}
	
}

/*footer*/
/*
#colophon{
background: url('images/droplet-background.jpg') no-repeat bottom right #000!important}
*/
#colophon .inner-footer {
background: none;
padding: 60px 30px 10px}

#colophon .bottom-footer {
padding: 10px}

#colophon .bottom-footer .site-info {
letter-spacing: .5px;
text-align: left;
text-transform: none}

#colophon .footer-logo {
margin: -15px 0 20px;
width: 180px}

#colophon .widg-layout2 *{
font-size: 100%}

#colophon h1.widget-title {
letter-spacing: .5px;
font-size:18px}

#colophon h1.widget-title::after {
display: block;
content:"";
height: 1px;
margin: 8px 0 12px;
background: #6ECFF6}

#colophon ul.social-area li {
margin: 20px 0;}

#colophon ul.social-area li:not(:first-child) {
margin-left: 20px}

#colophon ul.social-area li a i {
font-size: 20px}

#colophon p.meta {
letter-spacing: .5px;
font-size: 70%}

#colophon .widget h5 {
margin-bottom:5px;
letter-spacing: .5px;
font-size: 14px}

#colophon .widget a.qbtn {
margin-top:15px;
letter-spacing: .5px;
font-size: 12px}

#colophon .widget a.qbtn:first-child {
margin-right: 20px }

@media (min-width:960px) {

#colophon .widg-layout2 {
box-sizing: border-box;
font-size: 90%;
padding: 0 30px}

}

#colophon p.p80-credit {
font-size: 70%}

#cn-notice-buttons a {
color: #ffffff;
background: #F35A2D}

a#p80{
text-decoration: none;
background: url(https://port80.services/img/port80-logo-sml.png) no-repeat 0 1px;
padding-left: 17px;
background-size: 17px 17px;
font-family: sans-serif;
line-height: 18px;
display: inline-block;
color: #484848!important}

a#p80 span{
font-size: inherit;
display: inline;
color: #0785c4}

/*modules*/

#main .mod-header {
padding-bottom:35px}

#main .quadro-mod .modheader-intro {
text-align:center;
max-width: 800px}

#main .quadro-mod .mod-title {
word-spacing: 8px;
max-width: 800px}

#main .qbtn, #main .qbtn a, #page input.wpcf7-submit {
color: #fff;
background: #F35A2D;
opacity: 1;
letter-spacing: .5px;
margin-top: 30px}

#main .qbtn:hover, #page input.wpcf7-submit:hover {
filter: brightness(120%)}

.home #main .mod-bottom-divider {
min-width: 4000px}

#main .quadro-mod ul.specs  {
margin:auto;
max-width: 600px}

#main .quadro-mod ul.specs li{
display: flex;
border-bottom: 1px dotted #ddd;
flex-wrap: wrap;
font-size: 90%;
list-style: disc;
justify-content: space-between;}

#main .quadro-mod ul.specs li strong {
font-weight: normal;}

@media (max-width: 759px) {
#main .quadro-mod ul.specs li{
font-size: 85%}
}

@media (min-width: 760px) {

#main .quadro-mod ul.specs li strong {
margin-left: 20px;
display: inline-block}
}


#main #post-162 h1.mod-title {
color: #fff}

#main .mod-content .gallery-icon{
width:100%}

#main .mod-content .gallery {
display: flex;
justify-content:center;
flex-wrap:wrap}

#main .mod-content .gallery .gallery-item {
margin: 10px;
float: none;
width: 230px;
border: 1px solid #6ECFF6}

#main .mod-content .gallery .gallery-item a img {
cursor: default;
height: 180px;
object-position: top;
object-fit:cover}


/* custom module - banner slider */
.type-banner-slider li .inner-slide .slide-content {
min-height: 300px;
max-width: 55%;
margin: 0 }

.type-banner-slider li .inner-slide .slide-content h2 {
margin-bottom: 0;
color: #fff }

.type-banner-slider li:last-child .inner-slide .slide-content h2 {
color: #000 }

.type-banner-slider li .slider-overlay {
position: absolute;
top: 10%;
right: 0 }

.type-banner-slider.margins-disable .mod-content {
padding: 0 !important }

.type-banner-slider.margins-disable .mod-content .inner-mod {
max-width: none }

.type-banner-slider .mod-content .inner-mod {
overflow: hidden }

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

  .type-banner-slider li .inner-slide .slide-content {
  left: 50px;
  right: 50px; }

  .type-banner-slider li .slider-overlay {
  max-width: 45% }
}

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

  .type-banner-slider li .inner-slide .slide-content {
  top: 40% }

  .type-banner-slider .slide-content h2 {
  font-size: 64px;
  line-height: 76px }
}

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

  .type-banner-slider li .inner-slide .slide-content {
  left: 0;
  right: 0;
  top: 25%;
  width: 100%;
  max-width: initial;
  text-align: center; }

  .type-banner-slider .slide-content h2 {
  font-size: 48px;
  line-height: 54px }

  .type-banner-slider li .slider-overlay {
  top: 50%;
  right: 30% }
}

@media only screen and (max-width:519px) {
  .type-banner-slider li .slider-overlay {
  max-width: 80%;
  left: 0;
  right: 0;
  margin: 0 auto }
}

/*insights*/

#main .type-insights .insight-content {
text-align:left;
vertical-align: top}

.product-header.type-insights li.insight{
align-items: center;
display: flex}

.product-header.type-insights li.insight img{
align-self: flex-end;
max-height: 500px;
display: block;
margin: 0 auto;
width: auto;
object-fit: contain}

.home #main .type-banner-slider li.quadro-slide .qbtn a::before, .home #main .type-insights li.insight .qbtn a::before, #post-135 a.qbtn::before, #main div.qbtn.video-button a::before, .product-header a.qbtn::before, #main div.qbtn.video-button a::before {
content:"\f144";
display: inline-block;
padding-right: 3px;
font-family: "Font Awesome 5 Free";
font-weight: 900}

#main .type-insights .insight-content ul li {
list-style-position: inside}

@media (max-width: 760px) {

.product-header.type-insights li.insight{
flex-wrap: wrap}
}

@media (min-width: 960px) {

.home #post-29 .insight{
height: 75vh}

.home #post-29.type-insights .insight-title{
font-size: 60px}

.home #post-299.type-insights .insight-content{
width:55%}

.home #post-299.type-insights .insight img{
width:45%}

#post-513 .insight-content {
padding-top:0}

#content .type-insights.home-news .insight-content{
width:65%}

#content .type-insights.home-news .insight img{
width:35%}


}


/*services*/
#main #post-34 .mod-header {
padding-bottom:0px}

#post-34.type-services h1.mod-title, .home #main .type-columns h1.mod-title, .home #main .type-columns h3,#main  h1.mod-title, .home #main .type-cta h1 {
color: #144B93}

.home #main .type-services ul.quadro-services , #post-296.type-services ul.quadro-services {
flex-wrap: wrap;
display: flex;
justify-content: center}

#post-34.type-services ul.quadro-services li {
transition: .6s;
float: none;
width:160px;
margin: 20px 20px 60px}

#post-34.type-services ul.quadro-services .service-icon{
margin: 0;
width:100%}

#post-34.type-services ul.quadro-services li img{
transition: .6s;
width:100%}

#post-34.type-services ul.quadro-services li .service-content {
color: #6ECFF6;
font-weight: bold;
font-size: 18px;
line-height: normal}

#post-73.type-services ul.quadro-services li {
float: none;
margin: 20px;
width: 20%;}

#post-73.type-services ul li .service-title {
color: #fff;
font-weight: bold;
font-size: 90%}

#post-73.type-services ul.quadro-services li img,#post-296.type-services ul.quadro-services li img{
width:100px;
height: 100px;
display: block;
margin: auto}

#main .type-services.two-columns .quadro-services {
display:flex;
flex-wrap:wrap;
justify-content: center}

#post-221.type-services.two-columns .quadro-services li {
padding: 30px;
margin: 0;
position: relative;
text-align: left;}

#main #post-309.type-services.two-columns .quadro-services li {
background: rgba(255,255,255,.6);
float: none;
margin: 20px;
width:100%;
padding: 20px 30px}

#main #post-309.type-services.two-columns .service-icon {
color: #6ECFF6}

@media (min-width: 760px){
.home #main #post-73.type-services ul.quadro-services {
flex-wrap: nowrap}

#main #post-309.type-services.two-columns .quadro-services li {
width: 42%}
}

#main #post-309.type-services.two-columns .quadro-services li .service-content a {
color: #f35a2d;
pointer-events: none}
#main #post-309.type-services.two-columns .quadro-services li .service-content a.active {
pointer-events: initial }

#post-576 li.quadro-service	{
background: #144B93;
padding:40px}

#post-576 li.quadro-service	a{
text-decoration: underline}

#post-576 li.quadro-service	a:hover{
text-decoration: none}

#post-576 li.quadro-service:last-child	{
background:#6ecff6}

.products-landing-page .quadro-service {
padding: 15px 15px 60px;
border: 2px solid #144b93;
border-radius: 15px; }

.products-landing-page .quadro-service .service-icon img {
height: 300px;
width: auto;
margin: 0 auto }

.products-landing-page .quadro-service .service-content-wrapper {
padding: 0 50px }

#main .products-landing-page .quadro-service .service-content-wrapper a.qbtn {
margin: 0 auto;
position: absolute;
bottom: 20px;
right: 0;
left: 0;
max-width: 100px; }

/*slogan */

#main .type-slogan .inner-mod{
display: flex;
justify-items: flex-start;
justify-content:center;
align-items: center;}

#main .type-slogan .mod-content{
height: 50vh}

#main .type-slogan .mod-content .slogan-wrapper{
position: static;
margin: 0;
transform: none}

#main .type-slogan .mod-content img {
filter: drop-shadow(1px 1px 1px #333);
width: 400px}

/*columns - home page*/

@media (min-width: 760px) {

.home #main .type-columns .modules-columns > div {
width: 42%}

.home #main .type-columns .modules-columns > div:nth-child(2) {
width: 16%}

}

.home #main .type-columns .type-image img {
width: auto}

.home #main .type-sl-insights h1.mod-title {
color: #fff}

@media (min-width: 760px) {
.home #main .type-sl-insights .sl-insight{
justify-content: center;
display: flex!important}
}

.home #main .type-sl-insights .sl-insight-text{
padding-left: 0;
text-align: left}

.home #main .type-sl-insights .sl-insight-text{
text-align: left}

.home #main .type-sl-insights .sl-insight-text h4{
text-transform: uppercase;
font-size: 36px;
color: #6ECFF6;}


.home #main .type-sl-insights .sl-insight img {
height: 350px;
margin:10px auto;
display: block;
width:auto;}

@media (min-width:768px) {
.home #main .type-sl-insights .sl-insight img {
margin: 0 60px 0 0;
height: 500px;}
}

#main .type-sl-insights .flex-control-nav {
top: initial;
bottom: 0;
left: 0}

#main .type-sl-insights .flex-control-nav li {
margin:auto}

#main .type-sl-insights .flex-control-nav li a{
display:block;
color: transparent!important;
border: none;
width: 20px;
padding-right: 20px;
cursor: pointer;
position: relative}

#main .type-sl-insights .flex-control-nav li a::before{
display: block;
content: "";
width: 20px;
height: 20px;
background: none;
border: 1px solid  #fff;
border-radius: 100%}

#main .type-sl-insights .flex-control-nav li a.flex-active::before {
background: #F35A2D;
border-color: #F35A2D}

#main .type-sl-insights.nav-numbered .flex-direction-nav {
display: block }

#main .type-sl-insights .flex-direction-nav li a {
background: none;
font-size: 30px;
height: 60px;
width: 40px;}

#main .type-sl-insights .flex-direction-nav li a::before {
line-height: 60px;
width: 20px;}

/*faq - accordion*/

#main .sp-easy-accordion .sp-ea-single .ea-body{
padding:30px;
font-size: 90%}

#main .sp-easy-accordion .sp-ea-single .ea-body ul{
margin: 20px 0 20px 20px}

#main .sp-easy-accordion .sp-ea-single .ea-body img {
height:auto!important;
width: 100%!important}

#main .sp-easy-accordion .sp-ea-single .ea-header a{
padding:10px;
font-size: 18px;
line-height:normal;
color: #144B93}

/*Portfolio - reviews page*/

/*CTA*/

.home #main .type-cta .mod-content{
min-height: 55vh;
display: flex;
align-items: center}

.home #main .type-cta .cta-content-wrapper {
font-weight: 400;
font-size: 120% }

.home #main .type-cta .cta-content-wrapper h1 {
font-size: 50px; }

#main #post-145.type-columns .modules-columns  {
align-items: center}

#main .type-columns .type-canvas .mod-content p, #main .type-columns .type-canvas .mod-content li {
font-size: 16px}

#main .where-buy #where-to-buy  h1 {
text-align: center;
margin-bottom: 40px;
width: 100%}

#main .where-buy #where-to-buy {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: auto;
box-sizing: border-box;
padding: 80px 20px}

#main .where-buy #where-to-buy >div {
width: 100%;	
box-sizing: border-box}

#main .where-buy #where-to-buy .image-col {
text-align: center}

#main .where-buy #where-to-buy .text-content p{
font-weight: 400;
margin-bottom: 25px}

@media (min-width: 768px) {
#main .where-buy #where-to-buy .text-content {
width: 60%}

#main .where-buy #where-to-buy .image-col {
width: 35%;
padding-left: 5%;}

#main .where-buy #where-to-buy .text-content p{
font-size: 120%}
}

#main #where-to-buy a.qbtn {
padding: 18px 30px;
display: table;
margin: auto;	
border: none}

/*ipad parallax issue*/

@media only screen and (min-device-width: 834px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)  {

#page .type-page > section.quadro-mod  {
background-attachment: scroll!important}

}


/*store locator*/
#post-180 .wpgmza_map {
float: none!important;
width:100%!important}

#post-180 .locator-wrap {
margin-top: 40px;}

.page-content .locator-wrap .paginationjs-pages li.active > a {
background: #F35A2D}

img.supplier-logo {
display: block;
width:180px;
margin:0 auto 20px}

#content .supplier-intro a.qbtn {
display: table;
margin: 0 auto 60px}

@media (min-width: 960px){

	/*
#post-180 .locator-wrap {
display: flex;
flex-wrap:wrap;
justify-content: space-between}

#post-180 .wpgmza_map {
order: 2;
width:55%!important}

#post-180 .wpgmza_marker_list_class {
width: 35%!important;
order: 1}

#post-180 .wpgmza-pagination {
width: 35%!important;
margin-top: 20px;
order: 3}
*/
}

#post-180 .wpgmza_map .gm-style >div >div> div>img {
height: 30px!important }

#content .wpgmza-radius-container, #content .wpgmza-reset {
display: none}

#content .wpgmza_marker_list_class {
margin-top: 30px;
columns: 400px 2;
column-gap: 5rem;}

#content .legend ul {
margin: 0;	
list-style: none}

#content .legend ul li{
display: flex;
align-items: center}

#content li.essency-icon::before {
background-image: url(https://essencyhome.com/wp-content/uploads/2025/03/Essency-icon-2.webp)}

#content .legend li.prol-icon::before {
background-image: url(https://essencyhome.com/wp-content/uploads/2025/03/pro_league_icon.webp)}

#content .legend {
display: table;	
margin: 30px auto;
border: 1px solid #d9d9d9;
padding: 10px 40px;
border-radius: 4px;
background: #f5f5f5}

#content .legend li:before {
content: "";
margin-right:8px;	
height: 26px;
width: 26px;	
display: inline-block;
background-position:center;	
background-repeat:no-repeat;	
background-size: contain}

/*terms conditions*/
ol.terms, ol.terms ol {
margin: 0;
counter-reset: item}

ol.terms li {
margin: 8px 0 20px 10px;
list-style: none;
position: relative;
padding-left: 27px;
font-size: 16px;
counter-increment: item}

ol.terms >li::before {
content: counters(item, ".") ". ";
display: inline-block;
padding-right: 8px;
font-size: 26px;
color: #144B93}


ol.terms> li ol >li {
padding-left:40px}

ol.terms> li ol >li::before {
color: #144B93;
position: absolute;
left: 0;
content: counters(item, ".") ". "}

ol.terms ol.alpha li::before {
content: counter(item, lower-alpha)".";}

ol.terms li h3, ol.terms li h4 {
line-height: normal;
color: #144B93;
display: inline}

/*new home banner */
#main #post-335  .inner-mod{
max-width: 100%}

#main #post-335 .insights{
position: relative;
height: 85vh}

#main #post-335 .insights li{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://demos.port80.services/essency/wp-content/uploads/2021/04/sunset-bg.jpg) no-repeat center center;
background-size: cover}

#main #post-335 .insights li:last-child .insight-content{
animation-duration: 3s;
animation-delay: 10s;}

@keyframes fadeLoop{
0%{opacity:0}
25%{opacity:0}
45%{opacity:1}
80%{opacity:1}
100%{opacity:0}
}

#main #post-335 .insights li:last-child {
opacity: 0;
background-image: url(https://demos.port80.services/essency/wp-content/uploads/2021/01/laundry-room-banner.jpg);
animation: fadeLoop 25s infinite;
background-size: cover}

#post-335 li.insight {
align-items: center;
display: flex}

#post-335 li.insight img {
align-self: flex-end;
max-height: 97%;
object-fit: contain}

#post-335 .insight-title {
font-size: 35px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2),0 0 30px rgba(20,20,20,0.8);
line-height: normal}

#post-335 .insight-content{
padding: 60px;
text-align: left}

#post-335 li.insight a.qbtn::before  {
content:"\f144";
display: inline-block;
padding-right: 3px;
font-family: "Font Awesome 5 Free";
font-weight: 900}

@media (max-width: 760px) {

#post-335 .type-insights li.insight{
flex-wrap: wrap}
}

@media (min-width: 960px) {
#post-335 .insight-title{
font-size: 60px}

}

#main #post-120 .mod-header {
padding-top:0;}

#main #post-120 .mod-content figure {
display:block;
text-align:center;
margin: 30px auto}

#main #post-120 .mod-content figure img {
max-width: 100%!important}

@media (min-width: 960px) {
#main #post-120 .mod-content figure {
float: right;
width: 350px!important;
margin: 0 0 30px 30px}
}

/*product page */
#post-147 .mod-content img {
height: 500px}

#post-140 .mod-header, #post-544 .mod-header {
padding-left: 30px}

#post-140 h1.mod-title, #post-544 h1.mod-title  {
text-align: left}


/* contact us */
#main .wpcf7-form > * {
margin-bottom: 15px }

#main .wpcf7-form *:not(.wpcf7-submit):not(.wpcf7-response-output) {
border-radius: 2px;
border-color: #666}

#main .wpcf7-form .wpcf7-submit {
font-size: 13px}

#main .wpcf7-form label {
font-size: 15px }

#main .wpcf7-form .container {
display: flex }

#main .wpcf7-form .container > label:first-of-type {
margin-right: 10px }

#main .wpcf7-form .wrapper div p {
margin-bottom: 5px }

#main .wpcf7-form div.notice {
margin-bottom: 5px;
font-weight: bold;
font-size: 14px }

#content .prod-award-msg {
display: flex;
flex-wrap:wrap;
align-items:center}
/*Promo popup*/

/*Keep this at all times - makes it actually appear...*/

html.pum-open body.home  .pum-overlay {
opacity:1!important;
display: block!important}


/*customisation of cutting edge theme for edison awards popup*/
.pum-theme-cutting-edge .pum-container {
background: linear-gradient(#0D1440, #15478E)}

.pum-theme-cutting-edge .pum-container .pum-content {
padding:  0}

.pum-theme-cutting-edge .pum-container h2{
text-transform: uppercase;
font-weight: bold;
font-size: 21px;	
text-align: center;
color: #6DCFF6}

.pum-theme-cutting-edge .pum-container p{
text-align: center;
color: #fff}

.pum-theme-cutting-edge .pum-container .tank img{
display: block;
height: auto;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
object-fit: cover}

.pum-theme-cutting-edge .pum-container img.badge{
width: 60%!important;
width: auto;
display: block;
margin: auto;}

.pum-theme-cutting-edge .pum-container .wrap-outer{
display: flex;
align-items:flex-start;
justify-content:space-between}

.pum-theme-cutting-edge .pum-container .wrap-inner{
width: 60%;
align-self: center}



.pum-theme-cutting-edge .pum-close{
font-family: sans-serif!important}

/*customisation of find installer theme for service whale*/
.pum-theme-find-installer .pum-container .pum-content {
padding:  0}

.pum-theme-find-installer .pum-container h2{
font-weight: 300;
font-size: 28px;	
text-align: center;
color: #144B93;
padding: 24px 24px 6px }

.pum-theme-find-installer .pum-container p{
text-align: center;
color: #fff}

.pum-theme-find-installer .pum-container .tank, .pum-theme-find-installer .pum-container .servicer{
width: 20%;
display:none}

.pum-theme-find-installer .pum-container .tank img, .pum-theme-find-installer .pum-container .servicer img{
display: block;
height: 100%;
max-height: 328px;
width: auto;
object-fit: contain}

.pum-theme-find-installer .pum-container .wrap-outer{
display: flex;
aspect-ratio: 16/5;
justify-content:space-between}

.pum-container:has(#installer-popup) {
margin-bottom: 0;	
padding: 0;
border-radius: 15px}

.pum-theme-find-installer .pum-container .wrap-inner{
align-self:center}

.pum.pum-theme-find-installer .pum-close{
background:none!important;
box-shadow: none;
font-size: 30px;
padding-top: 0;
color:#999;	
font-family: sans-serif!important}

.pum.pum-theme-find-installer .pum-close:hover{
color: #333 !important }

.pum-theme-find-installer .pum-container .button-wrap a, .pum-theme-find-installer .pum-container .button-wrap button{
background:#F46A41;	
color:#fff;
font-size: 15px;
margin-bottom:20px}

.pum-theme-find-installer .pum-container .button-wrap a:hover, .pum-theme-find-installer .pum-container .button-wrap button:hover{
color:#F46A41!important;	
background:none}

.pum-theme-find-installer .pum-container .buttons-wrapper >div.button-section{
text-align:center}

.pum-theme-find-installer .pum-container .buttons-wrapper div.desc{
font-size:90%;	
margin-bottom: 20px;	
padding:0 10px}


.pum-theme-find-installer .pum-container .disclaimer{
text-align:center;
font-style: italic;
font-size: 80%;	
margin-top:20px;
width: 100%}

@media(min-width: 850px){
.pum-theme-find-installer .pum-container .wrap-inner{
width: 60%}	

.pum-theme-find-installer .pum-container .buttons-wrapper{
display: flex;
flex-wrap:wrap;
justify-content:center}
	
.pum-theme-find-installer .pum-container .tank, .pum-theme-find-installer .pum-container .servicer {
display: block}	
	
.pum-theme-find-installer .pum-container .buttons-wrapper >div.button-section{
width: 33.33% }	
}


/* next steps */
ul.next-steps {
list-style: none }

/* blog */

.header.white-text .slogan-wrapper {
max-width:100%;
padding-bottom:30px;
width: 700px}

#main .header.white-text.type-slogan .inner-mod {
align-items:flex-end}

.header.white-text .slogan-wrapper *{
line-height:normal;
font-size: 24px;
color: #fff}

.header.white-text .slogan-wrapper h1{
font-size:46px}

#post-600.type-blog h1 a, .header.white-text .widget-title {
color: #144B93}

#post-600.type-blog .posted-on a{
color: #999;
font-size:14px;}

#post-600.type-blog article {
padding-top: 0;
margin-bottom:80px}

#post-600.type-blog article:not(:last-child)::after {
border-bottom:1px solid;
margin: 20px 0;
display:block;
content:"";
position:absolute;
left:0;
bottom: -60px;
width: 100%;}

#post-597 #secondary aside:first-child{
margin-bottom:0}

#post-597 #secondary aside a{
color:#F35A2D}

body.single-post #main .entry-header {
background: #F5F5F5!important}

body.single-post #main .entry-content img.wp-post-image {
display: block;
width: 100%;
max-width: 400px;
margin:20px auto}

body.single-post blockquote, body.single-post blockquote.wp-block-quote {
border: none }

body.single-post .entry-meta .meta-separator {
display: none }

/* products, pros, help pages */

#content .type-columns.column-centered {
text-align: center}

#content section.section-heading {
padding-bottom: 0 }

#content .type-columns.has-video  .canvas-content p:first-child {
position: relative;
padding-bottom: 56.25% }

#content .type-columns.has-video iframe, #content .type-columns.has-video .type-canvas img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0 }

#content .type-columns:not(.white-text) .type-services h2 a, #content .type-columns.column-centered h2 {
color: #144B93;
font-size: 20px }

#content section.white-text *, #content .type-columns.column-centered.white-text h2 {
color: #ffffff !important }


#content .type-columns.column-centered .canvas-content {
margin-bottom: 30px }

#content .type-columns .type-services ul.quadro-services {
margin:0 }


@media (min-width:960px) {

/*
	#main .small-header header.mod-header {
	    padding-top: 20px;
	    padding-bottom: 25px }
	#main .small-header header.mod-header h1 {
    font-size: 36px	}
*/
		#content .type-columns.column-centered .canvas-content {
			min-height: 330px }
}

/*Careers section*/

/*4 values careers insight*/

.type-insights.our-values li.insight {
display: flex;
align-items: center}

.type-insights.our-values li.insight h4, .type-insights.careers-schools li.insight h4, .type-services.career-roles h2 {
color: #144B93}

@media (max-width: 760px) {
.type-insights.our-values li.insight {
display: flex;
flex-wrap: wrap}
	
.type-insights.our-values li.insight img{
order: 2}
}
#content .type-columns.careers-eq-columns {
margin: 30px 0;}

#content .type-canvas.gender-eq .mod-header {
padding: 0 0 0 30px;}

#content .type-canvas.gender-eq .mod-header h1{
margin: 0;
text-align:left}

#content .careers-offers {
padding: 60px 0}

#content .careers-offers .insight-content{
Padding-top: 0}

#content .careers-map img {
width: 100%;
margin: 60px 0 10px}

#content .type-slogan.cta-banner * {
color: #fff!important}

#content .type-services.office-locations ul.quadro-services {
display: flex;
flex-wrap: wrap;
justify-content: center}

#content .type-services.office-locations ul.quadro-services li:first-child .service-icon i{
color: #0092b1!important}


/*careers - single job posting */

.single-jobs #content .inner-mod {
width: 1000px;
padding: 0 15px;
max-width: 100%;
padding-top: 60px}

.single-jobs #content .inner-mod h1{
text-align: center;}

.single-jobs #content .job-info div {
text-align: center;
margin: 40px 0;
box-sizing: border-box;
padding: 10px}

@media (min-width: 480px) {
.single-jobs #content .job-info {
display:flex;
flex-wrap: wrap;
justify-content: space-between}

.single-jobs #content .job-info div {
width: 48%}

.single-jobs #content .job-info div:nth-child(odd) {
border-right: 1px solid}
}

@media (min-width: 768px) {
.single-jobs #content .job-info div {
width: 24%;
border-right: 1px solid}
}

.single-jobs #content .job-info div:last-child {
border: 0}

.single-jobs #content .job-info div span{
display:block;
font-weight: bold}

.single-jobs #content .job-info div::before {
content: "\f041";
display: block;
font-family: "FontAwesome";
font-size: 30px;
color: #F35A2D}

.single-jobs #content .job-info div.sector::before {
content: "\f200"}

.single-jobs #content .job-info div.sector::before {
content: "\f200"}

.single-jobs #content .job-info div.contract::before {
content: "\f56c"}

.single-jobs #content .job-info div.time::before {
content: "\f017"}

.single-jobs #content .job-details ul li {
margin: 0 0 15px 5px}

.single-jobs #content .job-apply {
text-align: center;
margin:30px 0 60px}

.single-jobs #content .job-apply a.qbtn{
color: #fff}

/*job search table */
#content section.form-wrapper .inner-mod {
max-width: 1000px; }

#content section.form-wrapper form {
max-width: 1000px;
background-color: #144b93;
margin: 0 auto;
padding: 10px }

#content section.form-wrapper form .field {
width: 100%}

#content section.form-wrapper form .field {
padding: 10px 20px;
box-sizing: border-box}

#content section.form-wrapper form .field select, #content section.form-wrapper form .field input:not(.button){
height: 40px;
background-color:#fff!important;	
width: 100%}

#content section.form-wrapper  table.jobs {
padding: 5px 0 30px;
border: 0!important}

#content section.form-wrapper  table.jobs td, #content section.form-wrapper  table.jobs th{
padding: 20px  10px}
 
#content section.form-wrapper  table.jobs ul{
margin: 0}


#content section.form-wrapper  table.jobs tr:nth-child(even) td{
background: #f9f9f9}

#content section.form-wrapper  table.jobs tr:last-child td{
border: 0}

@media (min-width: 960px) {

#content section.form-wrapper form,#content section.form-wrapper form .row {
display: flex;
justify-content: space-between}
	
	
#content section.form-wrapper form >div  {
width: 100%}

#content section.form-wrapper form .row.align-left {
justify-content: flex-start; }
}
 

.single-locations #results-loading {
display: block;
text-align: center}

.single-locations #job-search-results {
padding-bottom: 30px }

.single-locations #job-search-results .no-results{
padding-top: 30px }

.single-locations #job-search-results #pagination {
text-align: center; }

.single-locations #job-search-results #pagination span {
margin: 0 5px;
padding: 5px;
display: inline-block;
background: #eee;
font-size:14px;
transition: .3s;	
height: 30px;
width: 30px;
line-height:30px;	
border-radius: 100%;
text-align: center;}

.single-locations #job-search-results #pagination span > a {
display: block;
border-radius: 100%;	
font-size: inherit}

.single-locations #job-search-results #pagination span.current, .single-locations #job-search-results #pagination span:hover {
background: #ff6b00;
color: #fff}

.single-locations #job-search-results #pagination span:hover a{
color: #fff}


/*contact form 7*/
#content div.wpcf7  {
max-width:100%}

#content .wpcf7 input:not(.wpcf7-submit), #content .wpcf7 textarea {
border: 1px solid #bbb!important;
transition: .4s;
border-radius: 2px;
background: #fff}

#content .wpcf7 select {
border: 1px solid #eee;
transition: .4s;
border-radius: 2px}

#content .wpcf7 input:not(.wpcf7-submit):focus, #content .wpcf7 textarea:focus {
border-color: #000}

#content .wpcf7 label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px}


@media (min-width: 850px) {
#content form.wpcf7-form >div:not(.wpcf7-response-output) {
display: flex;
align-items:flex-start;
margin-bottom:15px;
justify-content: space-between}
}

/*Find my Essency page */

header.page-header {
background: none}

.page-id-1324 .page-inner-header {
padding-bottom: 0}

h1.page-title {
color: #144B93}

.wp-block-columns.boxed-narrow {
display: block;
width: 1000px;
margin: auto;
max-width: 100%}

.wp-block-columns p.modheader-intro {
text-align: center;
max-width: 800px}

/*service pages - installer directory header*/

#content .servicing-header {
background: #F0F4F8;	
text-align:center;	
display:flex;
margin: 0 auto 60px;	
flex-wrap:wrap;
width:700px;
box-sizing: border-box;
max-width:100%;	
align-items: flex-end;	
padding: 20px}

#content .servicing-header h2 {
font-size: 24px;	
color: #144B93}

#content .servicing-header img {
display: none;
margin-top:-20%;
width:25%}

#content .servicing-header a.qbtn {
margin:0 0 20px;
font-size: 14px}

.mod-content .button-wrapper > div {
display: inline-block }

.mod-content .button-wrapper a.qbtn {
margin: 0 0 20px; }

@media (min-width:640px) {
#content .servicing-header {
padding: 30px 40px 0 0}

#content .servicing-header img {
display: block}
#content .servicing-header div {
width:75%}
}

.header-right .main-navigation ul#menu-support > li.find-contractor > a {
background-color: #F35A2D;
padding: 0 15px;
text-decoration: none }