@charset "UTF-8";
/* CSS Document
Client: Associated Distributors
Company: Informatics, Inc
Author: Jeff S
Date: February 2019

*/

/* Variables */
:root {
  --primary: #0155a5;
  --secondary: #7ac142;
  --secondary-aa: #64A234;
  --orange: #f27a30;
  --yellow: #fec53e;
  --dark: #333;
  --bkg: #f9f9f9;
  --bold: 'Montserrat', sans-serif;
  --body: 'Muli', sans-serif;
  --shadow: 15px 15px 25px rgba(0,0,0,.2);
}

/* TYPOGRAPHY */
body {
font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.5; color: #555; background: var(--bkg); width: 100hw; overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
border-top: 3px solid var(--primary);
}
html {
    font-size: unset;
}
h1, h2, h3, h4, h5 {font-family: var(--body); font-weight: 300; color: var(--primary);}
h1 {font-size: 38px; letter-spacing: -1px; font-weight: 700;}
h2 {font-size: 32px; letter-spacing: -.5px; font-weight: 300; color: var(--primary);}
h3 {font-size: 21px; font-weight: 700;}
h4 {font-size: 14px; text-transform: uppercase; color: var(--secondary); letter-spacing: 1px; font-family: var(--bold); font-weight: 800;}
p, ul, ol {margin-bottom: 1.5em;}
strong {color: #333;}
.lead {font-size: 24px; font-weight: 300; letter-spacing: -.5px; color: #222; margin-bottom: 1.5rem;}
.lead + .icon-item {margin-top: 25px;}
img {max-width: 100%; height: auto;}
.img-right, .img-left {margin: 0 0 25px 0;}
.green-bold {color: var(--secondary); font-weight: 700;}
.border-left {border-left: 3px solid #eee; padding-left: 20px; margin: 15px 0 35px 0;}

.check-list ul, .box ul {padding: 0; margin: 0; list-style: none;}
.check-list li, .box ul li {padding: 15px 0 15px 25px; display: block; border-bottom: 1px dotted #ccc; position: relative;}
.check-list li:before, .box ul li:before {position: absolute; left: 0; top: 15px;content: "\f00c"; font-family: FontAwesome; color: var(--secondary); margin: 0 5px 0 0;}
.check-list li:last-of-type, .box ul li:last-of-type {border: none;}

hr {border-color: #ccc; margin: 30px 0; position: relative;}
.quote {border-left: 5px solid var(--primary); padding: 0 var(--spacer) 0 50px; background: url(../img/quote.png) right center no-repeat;}
.hgroup, .hdr-center {padding: 15px 0; max-width: 830px; margin: 0 auto;}
.preheader {font-family: var(--bold); text-transform: uppercase; color: var(--secondary); margin: 5px 0; font-size: 14px; letter-spacing: 1px; position: relative; display: inline-block;}
.preheader + h2 {margin-top: 0;}
.preheader {text-transform: uppercase; font-family: var(--body); letter-spacing: 2px; color: var(--secondary); margin: 0 0 5px 0; font-weight: 700; font-size: 12px; display: inline-block; position: relative;}
.preheader:after {width: 40px; height: 2px; background: var(--secondary); margin: -1px 0 0 15px; display: block; content: ""; position: absolute; left: 100%; top: 50%;}
img + .preheader {margin-top: 25px;}

.hdr-center .preheader:before, .preheader[style="text-align: center;"]:before, .feature .preheader:before {width: 40px; height: 2px; background: var(--secondary); margin: -1px 15px 0 0; display: block; content: ""; position: absolute; right: 100%; top: 50%;}
.hdr-center {text-align: center;}
.clean-list {list-style: none; padding: 0; margin: 10px 0 25px 0;}
.clean-list a {display: block; padding: 10px; border-top: 1px dotted #ccc;}
.clean-list a:hover {padding: 10px 5px 10px 15px;}
.skinny {max-width: 900px; margin: 0 auto;}
.skinny img {margin: 0 0 25px 0;}
.blog-summary {padding: 15px 0 0px 0; border-bottom: 1px dotted #ccc; overflow: hidden; margin-bottom: 35px; font-size: 24px; text-align: center; color: #111;}
.hdr-center + .row {margin-top: 25px;}

figure.img-circle {position: relative; background: url(../img/green-circle.png) 95% 45px no-repeat; border-radius: 0; background-size: 65px; margin-bottom: 80px;}
figure.img-circle:before {display: block; width: 40px; height: 40px; content: ""; position: absolute; right: 18%; top: 30px; background: var(--primary); border-radius: 50%; opacity: .7;}
figure.img-circle:after {display: block; width: 100px; height: 100px; content: ""; position: absolute; left: 25px; bottom: 30px; background: var(--secondary); border-radius: 50%; opacity: .7;}
figure.img-circle img {width: 100%; border-radius: 50%; border: 10px solid var(--bkg);}
figure.img-circle img + img {position: absolute; width: 200px; right: 50px; bottom: -75px; border: 10px solid var(--bkg);}

.box {padding: 15px 25px; background: var(--primary); color: #fff; border-top: 5px solid var(--secondary); font-size: 15px; margin-bottom: 25px;}
.box h2, .box h3 {color: #fff; font-weight: 700;}
.box .lead {color: #fff;}
.box ul {margin: 0 0 15px 0;}
.box ul li {color: #fff; border-color: rgba(255,255,255,.2); font-size: 16px; padding: 10px 10px 10px 20px;}
.box p strong {color: #fff;}
p.focus {display: block; background: rgba(0,0,0,.25); padding: 10px; font-size: 18px;}
.box .focus {text-align: center; font-weight: bold; display: block;}

/* LINKS */
a {color: var(--primary);}
a:hover {color: var(--secondary);}
a:visited {opacity: .8;}
a.btn-theme, .btn-theme > a, span.btn-theme, button.btn-theme {border: none; background: var(--secondary); color: #fff; font-weight: 700; padding: 10px 20px; font-size: 15px; display: inline-block; position: relative; overflow: hidden; z-index: 5; border-radius: 25px; font-family: var(--bold); font-weight: 800; box-shadow: 4px 4px 8px rgba(0,0,0,.2), 0 0 0 2px rgba(255,255,255,0);}
a.btn-theme:after, .btn-theme > a:after, span.btn-theme:after {position: absolute; left: -10px; top: 50%; margin-top: -5px; bottom: 0; height: 10px; width: 10px; content: ""; display: block; background: var(--primary); z-index: -1; border-radius: 50%; transform: scale(0,0);}
a.btn-theme:hover, .btn-theme > a:hover {text-decoration: none; color: #fff; border-color: var(--primary);}
a.btn-theme:hover:after, .btn-theme a:hover:after, span.btn-theme:hover:after {transform: scale(50,50); left: 5%;}

.btn-text > a {text-transform: uppercase; font-weight: 900; color: var(--secondary); padding: 5px; letter-spacing: 1px; display: inline-block; font-size: 14px;}
.btn-text > a:after {content: "\f061";font-family: FontAwesome; margin: 0 0 0 5px;}
.btn-text > a:hover:after {margin-left: 10px;}
.btn-text > a:hover {background: none; text-decoration: none;}

/* Animate */
.ccm-page a, #cutout:after, #cutout .inner, .news-item .btn-theme  {
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
#menu a, .cta-links i {
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
transition: all .1s linear;
}

.ease, .icon-bar, #menu, .btn-theme:after, .btn-theme a:after, .btn-text a:after, #menu a:after, #menu .menu-dropdown *, .page-link *, form *, .toggle-popover, .feature, .feature *, .feature:after, .feature-price:after, #hdr-finder *, .compare-item button {
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
  
/* ----------------------*/
/* --  GLOBAL STYLES  -- */
/* ----------------------*/
:root {--spacer: 20px;}
.container {position: relative; padding: 0; width: 100%; max-width: 1200px;}
.content {z-index: 5;}
.content section {padding: var(--spacer);}
.content section > hr:first-of-type {margin-top: 0; margin-bottom: var(--spacer);}

/* HERO */
#hero {position: relative; padding: 0; width: 100%; margin: 0 auto; background: #111;}
#hero figure img {top: -35px; position: relative; width: 100%; height: calc(100% + 35px); object-fit: cover;}
#hero .text-wrapper {height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center;}
/* BLUE */
#hero .text-wrapper:after {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 5;
background: -moz-linear-gradient(left, rgba(6,108,178,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(6,108,178,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(6,108,178,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6066cb2', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}
#hero .text {z-index: 10; position: relative; padding: 25px;}
#hero .text p.preheader {color: var(--secondary); margin: 0 0 10px 0; font-size: 14px;}
#hero .text h1 {color: #fff; font-size: 46px; margin: 0 0 15px 0; letter-spacing: -2px; font-weight: 700; font-family: var(--bold); text-shadow: 3px 3px 5px rgba(0,0,0,.1);}
#hero .text h1 strong {position: relative; z-index: 5; color: #fff;}
#hero .text h1 strong:after {position: absolute; bottom: 5px; left: 0; z-index: -1; width: 100%; height: calc(100% - 25%); background: var(--secondary); content: ""; opacity: .8;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}
#hero .text p {color: #fff; font-size: 18px; font-weight: 400;}
#hero .text p strong {color: #fff;}
#hero .text .btn-theme {margin: 0;}
#hero .text .btn-theme > a {font-size: 18px; font-weight: 700; padding: 10px 25px; box-shadow: 5px 5px 5px rgba(0,0,0,.1);}
#hero figure {height: 100%; width: 100%; overflow: hidden; position: absolute; left: 0; top: 0;}
#hero figure img {width: 100%; height: calc(100% + 45px); object-fit: cover; opacity: 1; object-position: center top;}

.full-cta {text-align: left; background: var(--primary); position: relative; top: -1px;}
.full-cta h3 {color: #fff; margin: 0; font-size: 17px; font-weight: 400;padding: 20px;}
.full-cta h3 a {color: var(--secondary);}

#cutout {color: #fff; font-size: 14px;font-size: 13px; opacity: 0; position: relative; display: block;}
#cutout .fa {position: absolute; z-index: 50; left: 18px; top: calc(50% - 23px); font-size: 45px;}
#cutout .inner {background: var(--secondary); padding: 25px 25px 25px 90px;}
#cutout p {margin: 0;}
#cutout strong {display: block; text-transform: uppercase;}
#cutout h3 {margin: 0 0 5px 0; font-size: 18px; font-weight: 800; padding: 0; width: auto;}

.full-width {background: #f1f1f1; position: relative;}
.full-width .text {padding: 25px 45px 25px 0;}
.full-width .container {z-index: 50;}
.full-width.employee img {display: none;}

/* Page Header */
#page-header {background: var(--primary); overflow: hidden; position: relative;}
#page-header:before {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 5;
background: -moz-linear-gradient(left, rgba(6,108,178,0.95) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(6,108,178,0.95) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(6,108,178,0.95) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6066cb2', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}
/* #page-header:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 5; background: url(../img/waves.png) 0 0 repeat-y; opacity: .1; background-size: auto 50%;} */
#page-header .header-content {position: relative;}
#page-header img {position: absolute; top: -40px; width: 100%; height: calc(100% + 50px); object-fit: cover; object-position: top center;}
#page-header h1 {color: #fff; margin: 0 0 5px 0; padding: 0;}
#page-header p {margin: 0; color: #fff; font-size: 21px; font-style: italic; opacity: .8; max-width: 500px;}
#page-header .text {padding: 50px 25px; z-index: 50; position: relative;}
#page-header .text .breadcrumb {background: rgba(0,0,0,.35); margin: 0 0 10px 0; padding: 5px 10px; display: inline-block; font-size: 13px; color: rgba(255,255,255,.8);}
#page-header .text .breadcrumb a {color: var(--secondary);}

#page-header nav {background: rgba(102,186,35,1); position: relative; z-index: 150;}
#page-header nav ul {list-style: none; padding: 0; margin: 0;}
#page-header nav ul a {display: block; padding: 15px 20px; color: #fff; font-weight: 700;}
#page-header nav ul a:hover {background: rgba(0,0,0,.25); text-decoration: none;}
#page-header nav .nav-path-selected a {background: rgba(0,0,0,.25); position: relative;}
#page-header nav ul ul {display: none;}

#page-header #hdr-finder {background: var(--primary); font-weight: 700; text-align: left; box-shadow: 5px 5px 10px rgba(0,0,0,.2); border-radius: 5px; padding: 15px 20px 15px 50px; z-index: 150; margin: 10px; display: block; color: #fff; position: relative;}
#page-header #hdr-finder i {color: var(--secondary); position: absolute; left: 18px; top: 18px; font-size: 35px;animation: wobble 8s 2s infinite both;}
#page-header #hdr-finder span {display: block; font-size: 14px; opacity: .8; text-transform: none; letter-spacing: normal; font-weight: 500;}
#page-header #hdr-finder span.reveal {opacity: 0; font-weight: bold; color: var(--secondary); position: relative; left: 10px; display: none;}
#page-header #hdr-finder:hover {bottom: 0; text-decoration:  none;}
#page-header #hdr-finder:hover span.reveal {opacity: 1; left: 0;}

.text-cta-btn {background: #dde5e9; display: flex; flex-direction: column; justify-content: center; padding: 25px; text-align: center;}
.text-cta-btn .btn-theme {text-align: center;}

.icon-item {position: relative; padding: 0 0 0 60px; font-size: 14px; margin: 15px 0 25px 0;}
.icon-item img, .icon-item i {position: absolute; left: 0; top: 0; font-size: 40px; color: #222; width: 50px; text-align: center; color: var(--secondary);}
.icon-item h3 {margin: 0 0 10px 0;}

.check-line {position: relative; padding: 0 15px 0 0;}
.check-line:before {content: "\f00c";font-family: FontAwesome; position: absolute; left: -10px; top: -7px; font-size: 25px; color: var(--secondary);}
.check-line p {border-left: 1px solid #ccc; padding: 0 0 0 25px; font-size: 14px;}
.check-line h3 {padding: 0 0 0 25px;}

h2 + .page-link-flex {margin-top: 35px;}
.page-link {display: block; position: relative; background: #333; box-shadow: 5px 5px 10px rgba(0,0,0,.1); overflow: hidden; margin: 0 auto 25px auto; max-width: 300px;}
.page-link img {opacity: .6; width: 100%;}
.page-link .text {position: absolute; bottom: 0; z-index: 5; padding: 25px 25px 50px 25px; color: #fff; font-size: 14px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

.page-link .text h3 {color: var(--secondary); text-shadow: 2px 2px 5px rgba(0,0,0,.4);}
.page-link .btn-theme {display: block; border-radius: 0; padding: 12px 25px; font-size: 16px; font-weight: 700;}
.page-link span.btn-theme:after {left: -15px;}
.page-link:hover {text-decoration: none;}
.page-link:hover .btn-theme {text-decoration: none;}
.page-link:hover img {transform: scale(1.1,1.1); opacity: .55;}
.page-link:hover span.btn-theme:after {transform: scale(50,50); left: 30%;}

#cta {width: 100%; text-align: center; background: var(--primary); position: relative; z-index: 5;}
#cta img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .35; mix-blend-mode: multiply;}
#cta h2 {color: #fff;}
#cta h2 span {font-weight: 700; color: var(--secondary);}
#cta p {color: #fff; font-size: 18px; max-width: 800px; margin: 0 auto 25px auto;}
#cta .btn-theme a {border-radius: 5px; padding: 14px 25px; margin: 5px; font-size: 16px;}

.cta a.phone {color: #fff; font-size: 24px; display: block; font-weight: 300; margin: 0 0 20px 0;}
.cta a.phone i {color: var(--secondary);}
.cta span {margin: 0 25px 0 20px; position: relative; z-index: 5; opacity: .5; display: none; color: #fff;}
.cta span:before {position: absolute; left: 8px; top: -23px; height: 20px; width: 1px; background: #fff; opacity: .4; content: ""; z-index: -6;}
.cta span:after {position: absolute; left: 8px; bottom: -26px; height: 20px; width: 1px; background: #fff; opacity: .4; content: ""; z-index: -6;}

#residential-cta {background: url(../img/bkg-graphics.jpg) var(--primary); padding: 0;}
#residential-cta .col {position: relative; padding: 35px;}
#residential-cta .col:nth-of-type(2) {background: rgba(0,0,0,.1);}
#residential-cta .text {padding: 0 25px 0 35px; position: relative;}
#residential-cta .text:before {position: absolute; left: 0; bottom: 0; top: 60px; width: 1px; background: #fff; content: ""; opacity: .2;}
#residential-cta i {position: absolute; font-size: 40px; left: -25px; top: 5px; transform: rotate(-5deg); color: var(--secondary); animation: wobble 6s 2s infinite both; width: 50px; text-align: center;}
#residential-cta p {color: #fff;}
#residential-cta h2 {color: #fff; margin-top: 0;}
#residential-cta h2 span {color: var(--secondary); font-weight: 700;}
#residential-cta .btn-theme:after {background: var(--orange);}

.feature {background: var(--primary); color: #fff; display: block; text-align: center; box-shadow: 5px 5px 10px rgba(0,0,0,.15); margin: 15px auto; max-width: 400px; position: relative;}
.feature .text {padding: 20px;border-top: 5px solid var(--secondary); overflow: hidden;}
.feature p.preheader {margin: 0 0 10px 0; font-size: 12px;}
.feature ul, .compare-view table ul, .check-list {width: 100%; text-align: left; list-style: none; padding: 0; font-size: 15px;}
.feature ul li:before, .compare-view table ul li:before, .check-list li:before {content: "\f00c"; font-family: FontAwesome; color: var(--secondary); margin: 0 5px 0 0;}
.feature h3 {color: #fff; font-size: 27px; margin: 5px 0 25px 0; min-height: 60px; display: flex; flex-direction: column; justify-content: center;}
.feature ul li:before {position: absolute; left: 0; top: 8px;}
.feature ul li {padding: 8px 5px 8px 25px; border-top: 1px dotted rgba(255,255,255,.2); position: relative;}

.feature .starting-at {text-transform: uppercase; font-size: 12px; letter-spacing: 2px;}
.feature-price {display: flex; background: rgba(0,0,0,.2); padding: 15px; position: relative; overflow: hidden;}
.feature .number {font-size: 50px; line-height: 46px; font-weight: 300;}
.feature .number sup {font-size: 35%; top: -1.25em;}
.feature .number:before {content: "\f155";font-family: FontAwesome; color: var(--secondary); font-size: 30px; position: relative; top: -5px; left: -5px;}
.feature .blurb {border-left: 1px dotted rgba(255,255,255,.5); padding: 0 15px; margin: 0 0 0 15px; font-size: 13px; text-align: left; line-height: 18px; display: flex; flex-direction: column; justify-content: center; font-style: italic;}
.feature:after {position: absolute; right: 0; top: 0; width: 60%; height: 100%; background: rgba(255,255,255,.15); content: ""; mix-blend-mode: overlay;
opacity: .15;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
-webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);}
.feature:hover {text-decoration: none; color: #fff; transform: scale(1.05,1.05);}
.feature:hover:after {right: -50px;}
.feature:hover .feature-price {background: rgba(0,0,0,.35);}
.feature-price:after {position: absolute; left: 0; top: 100%; width: 100%; height: 100%; content: "Get Started"; text-align: center; color: #fff; background: var(--secondary); font-size: 24px; display: flex; flex-direction: column; justify-content: center;}
.feature:hover .feature-price:after {top: 0;} 
.feature .text p a {color: var(--secondary); font-weight: 700; background: rgba(0,0,0,.2); display: block; padding: 5px 10px;}
.feature .btn-theme {display: block;}
.feature .btn-theme:after {display: none;}
.feature .btn-theme:hover {background: var(--secondary-aa);}

/* Search Layout */
.ccm-search-block-form h3 {font-size: 28px; border-bottom: 1px solid #ccc; padding: 15px 0; margin: 15px 0;}
.ccm-search-block-form input {width: 75%; float: left; height: 50px; background: #f4f4f4; border: 1px solid #ccc; padding: 10px;}
.ccm-search-block-form .btn {width: 23%; float: right; height: 50px; background: var(--secondary-aa); color: #fff; font-weight: bold; border: none; font-size: 18px;}
.ccm-search-block-form #searchResults {display: block; padding: 15px 0; width: 100%; overflow: hidden;}
#searchResults .searchResult h3 {border-bottom: 1px dotted #ccc; font-size: 22px;}
#searchResults .searchResult p br {display: none;}

/* SEC NAV STACKED */
#sec-col ul {list-style: none; padding: 0; margin: 0 0 25px 0;}
#sec-col ul a {display: block; padding: 15px; border-bottom: 1px dotted #ccc; border-right: 1px dotted #ccc;
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.015) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.015) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.015) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=1 ); /* IE6-9 */}
#sec-col ul li:first-of-type {border-top: 1px dotted #ccc;}
#sec-col ul > li.nav-path-selected > a {color: var(--secondary-aa); font-weight: bold; border-right: none; background: none;}
#sec-col ul a:hover {background: rgba(0,0,0,.025); padding: 15px 10px 15px 20px; color: var(--secondary-aa);}

.news-item {display: block; border-bottom: 1px dotted #ccc; padding: 25px 0;}
.news-item p.description {color: #555; font-size: 15px;}
.news-item .btn-theme {box-shadow: none;}
.news-item:hover .btn-theme {background: var(--primary);}
.news-entry-header a {display: inline-block; padding: 5px 10px; background: #f4f4f4; font-size: 14px; border: 1px solid #ddd; margin: 10px 0 0 0;}

/* --------------
/* TABLETS */
@media (min-width: 768px) {
:root {--spacer: 50px;}
.img-right {max-width: 50%; float: right; margin: 0 0 25px 25px;}
.img-left {max-width: 50%; float: left; margin: 0 25px 25px 0;}
#hero {min-height: 550px; height: calc(85vh - 200px);}
#hero .text-wrapper {position: absolute;}
#hero .text {width: 75%;}
/* #hero .text-wrapper:before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 5; background: url(../img/waves.png) 0 0 no-repeat; opacity: .1;} */
#hero .text h1 {font-size: 66px;line-height: 62px; }
#hero .text p {font-size: 24px;}

.full-cta h3 {width: 60%;}
#cutout {position: absolute; right: 0; bottom: -1px; z-index: 50; max-width: 375px;}
#cutout .fa {left: 75px;}
#cutout .inner {background: var(--secondary); padding: 25px 35px 25px 125px; 
-webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);}
#cutout:after {position: absolute; left: 99%; top: 0; height: 100%; width: 800px; content: ""; display: block; background: var(--secondary);}
#cutout:hover {text-decoration: none; right: -5px;}
#cutout:hover .inner {background: #64a73a;}
#cutout:hover:after { background: #64a73a;}

/* Page Header */
#page-header img {height: calc(100% + 100px);}
#page-header nav {background: rgba(102,186,35,.8);}
#page-header nav ul {display: flex;}
#page-header nav ul a {border-left: 1px solid rgba(255,255,255,.15);}
#page-header nav ul li:last-of-type a {border-right: 1px solid rgba(255,255,255,.15);}

#page-header #hdr-finder {position: absolute; margin: 0; bottom: -25px; right: 10px; padding: 15px 20px 20px 50px; border-radius: 5px 5px 0 0; width: 200px;}
#page-header #hdr-finder span.reveal {display: block;}

.full-width .flex-grid {display: flex; flex-wrap: wrap;}
.flex, .flex-grid {display: flex;}
.flex * {flex-grow: 1;}
.flex-grid-three, .flex-grid-two {display: flex; justify-content: space-between; margin: 40px 0 0 0;}
.flex-grid-three + .flex-grid-three, .flex-grid-two + .flex-grid-two {margin-top: 0;} 
.flex-grid-two .icon-item {width: 48%;}
.flex-grid-three .icon-item {width: 31%;}

.cta {padding-bottom: 25px; display: flex; align-items: center; justify-content: center; margin-top: 25px;}
.cta span {display: inline-block;}
.cta a.phone, #cta .cta p {display: inline-block; margin: 0;}
/* .cta .btn-theme {top: 20px; position: relative;} */

.page-link-flex {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -1%;}
.page-link-flex .page-link {flex-basis: 48%; margin: 0 1% 25px 1%;}

#residential-cta {display: flex;}
#residential-cta .col {flex: 1; padding: 50px;}
#residential-cta .text {width: 100%; max-width: 540px; float: right; }
#residential-cta .col:nth-of-type(2) .text {float: left;}

/* THREE ITEMS */
.page-link:nth-child(1):nth-last-child(3),
.page-link:nth-child(2):nth-last-child(2),
.page-link:nth-child(3):nth-last-child(1) { flex-basis: 31%; }

}

/* --------------
/* SMALL DESKTOPS */
@media (min-width: 992px) {

#hero .text {width: 55%;}
.flex-grid {display: flex; flex-wrap: wrap;}

.page-link img {opacity: .8;}
.page-link .text {position: absolute; top: calc(100% - 38px); padding: 0 15px 15px 15px; width: 100%;}
.page-link .text h3 {font-size: 24px; display: block; position: absolute; bottom: 100%; width: 100%; left: 0; padding: 15px 25px;
background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
}
.page-link .text p {opacity: 0; font-size: 14px;}
.page-link:hover p {opacity: 1; transition-delay: .25s;}
.page-link:hover .text {top: 70%;}
.page-link:hover img {opacity: .25;}
.page-link-flex .page-link {flex-basis: 23%; max-width: 325px;}

#page-header p {max-width: 650px;}

/* TWO ITEMS */
.page-link:nth-child(1):nth-last-child(2),
.page-link:nth-child(2):nth-last-child(1) { flex-basis: 48%; }

  
#page-header #hdr-finder {width: auto;}
#page-header::after {background-size: auto 100%;}
}


/* LARGE DESKTOPS */
@media (min-width: 1250px) {
#hero .text {width: 55%; padding-left: 0;}
.full-cta h3 {padding-left: 0;}

#page-header .text {padding: 65px 0px;}

.full-width.employee img {position: absolute; left: calc(50% + 350px); top: -30px; height: calc(100% + 30px); object-fit: cover; display: block; object-position: top left;}

.page-link .text {padding: 0 25px 25px 25px;}
.page-link .text p {font-size: 15px;}
.page-link:hover .text {top: 70%;}

#residential-cta i {font-size: 60px; left: -30px; top: -5px; width: 60px;}
#residential-cta .text {padding: 0 25px 0 50px;}
#residential-cta h2 {margin-bottom: 15px;}
}

/* MEGA DESKTOPS */
@media (min-width: 1400px) {

}
/* WIDE AND TALL */
@media (min-height: 900px) and (min-width: 1200px) {

}

/* ----------------------*/
/* -- MENU AND HEADER -- */
/* ----------------------*/
/* ONLY MOBILE */
@media (max-width: 850px) {
#site-header {}
#btn-menu {position: absolute; top: 5px; right: 10px; z-index: 10; border: 0; padding: 20px 20px 15px 20px; background: none; color: #333; display: flex; flex-direction: column; justify-content: center; font-size: 12px; float: right;}
#btn-menu .icon-bar {display: block; height: 4px; background: var(--primary); width: 100%; margin: 0 0 5px 0; float: right;}
#btn-menu .icon-bar:nth-of-type(2) {width: 75%;}
#btn-menu:hover .icon-bar:nth-of-type(2) {width: 100%;}
#btn-menu.open .icon-bar {background: var(--secondary);}

#menu {background: #fff; padding: 40px 25px; position: absolute; top: 15px; left: 0; width: 100vw; visibility: hidden; opacity: 0; display: flex; flex-direction: column; justify-content: center;}
#menu.open {opacity: 1; top: 0; visibility: visible;}
#menu h4 {display: none;}
#menu ul a:hover {background: none; padding: 5px 2px 5px 7px; opacity: .8;}
#hdr-tools button {display: block; width: 100%;}
#menu img, #menu .menu-content {display: none;}
}

/* HEADER */
#site-header {width: 100%; position: relative; z-index: 50; padding: 15px;position: relative;}
#logo {/*box-shadow: 15px 15px 25px rgba(0,0,0,.2); */ display: inline-block; width: 75px;animation: blip .35s ease-in-out 1 both;}
#logo:hover {animation: blip .35s ease-in-out 1 both;}
#menu ul {list-style: none; padding: 0; margin: 0 0 20px 0;}
#menu ul a {display: block; color: #333; font-size: 16px; padding: 5px; font-weight: 700;}
#menu ul ul a {font-size: 13px; color: var(--primary); font-weight: 400;}
#hdr-tools button, .support-link {border: none; background: none; color: #333; font-weight: 700; text-align: left; padding: 10px; margin: 0 0 5px 0; background: #f4f4f4;}
#hdr-tools button i, .support-link i {color: var(--secondary); font-size: 25px; vertical-align: middle; margin: 0 10px 0 0; width: 25px; border-right: 1px solid #ccc; text-align: left;}
#hdr-tools button:hover, .support-link:hover {background: none; color: var(--primary);}
#menu .res-tools a {text-shadow: 0 0 5px #FFFFFF;}
#menu .res-tools i {color: var(--secondary); width: 15px; text-align: right; margin: 0 5px 0 0;}

/* TOGGLE POPOVERS */
.toggle-popover {position: fixed; left: 0; top: 10px; right: 0; padding: 25px; background: var(--primary); z-index: 100; border-top: 3px solid var(--secondary); visibility: hidden; opacity: 0; height: 100vh;}
.toggle-popover h2, .toggle-popover h3 {color: #fff; font-size: 26px; margin-bottom: 25px;}
.toggle-popover p {color: #fff; opacity: .7; font-size: 15px;}
.toggle-popover ul {list-style: none; margin: 0; padding: 0;}
.toggle-popover ul a:before {content: "\f0da";font-family: FontAwesome; color: var(--secondary); margin: 0 5px 0 0}
.toggle-popover ul a {color: #fff; font-weight: 700; font-size: 14px; padding: 5px; display: block; opacity: .8;}
.toggle-popover ul a:hover {opacity: 1; text-decoration: none;}

.toggle-popover .phone li {font-size: 14px; display: block; color: #fff; padding: 5px 0; overflow: hidden; border-bottom: 1px dotted rgba(255,255,255,.25);}
.toggle-popover .phone li a {float: right; color: #fff; padding: 0;}
.toggle-popover .phone li a:before {display: none;}
.toggle-popover .phone li a strong {color: #fff;}

.toggle-popover form {position: relative; margin: 15px 0;}
.toggle-popover form input {width: 100%; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; padding: 15px; background: rgba(255,255,255,.9);}
.toggle-popover form input:focus {background: #fff; box-shadow: 0 0 0 2px var(--secondary);}
.toggle-popover form button {position: absolute; right: 0; top: 0; padding: 13px 20px; border: none; color: var(--secondary); font-size: 22px; background: none;}
.toggle-popover.open {opacity: 1; visibility: visible; top: -3px;}
.toggle-popover .box-close {border: none; background: none; color: var(--secondary); font-size: 30px; position: absolute; right: 0; top: 0; font-weight: 300; width: 75px; height: 75px; border-radius: 50%; font-size: 40px; text-align: center; display: block;}

/* FOOTER */
.footer {padding: var(--spacer); padding-bottom: 25px; font-size: 14px; border-bottom: 15px solid #222; background: #fff; border-top: 1px solid #eee;}
.footer .col img {margin: 0 0 15px 0;}
.footer .flex {margin: 0 -25px;}
.footer .flex .col {padding: 0 25px;}
.footer .flex:last-of-type {border-top: 1px solid #ccc; padding: 25px 0 0 0; margin: 0;}
.footer .flex:last-of-type .col {padding: 0;}
.footer hr {margin: 40px 0;}
.footer ul, .footer ul.nav, #purchase .contact ul {list-style: none; padding: 0; margin: 0 0 25px 0;}
.footer ul li, .footer ul.nav li, #purchase .contact ul li {padding: 2px 0;}
.footer ul li a {padding: 0;}
.footer ul li a:hover {color: var(--secondary-aa); text-decoration: underline; background: none;}
.footer ul + ul {margin-top: -25px;}
.footer ul strong, #purchase .contact ul strong {float: right; color: #555;}
.footer h3 {color: #222; margin: 0 0 15px 0; font-size: 18px;}
.footer p a {color: #333;}
.footer .copy {font-size: 12px; margin: 15px 0;}
.footer .copy span {position: absolute; left: 0; bottom: -12px;}
.social a {display: inline-block; width: 45px; height: 45px; font-size: 22px; background: var(--secondary); color: #fff; text-align: center; margin: 0 5px 0 0; opacity: .9; line-height: 45px; text-align: center; padding: 0; border-radius: 50%;}
.social a i {color: #fff; margin: 0}
.social a:hover {background: var(--primary); opacity: 1;}

@media (min-width: 850px) {
/* Header & Nav */
#site-header {padding: 0 25px; position: relative; z-index: 155; background: var(--bkg);}
#logo {position: absolute; left: 25px; top: 12px; width: 100px;}
#btn-menu {display: none;}
#menu {display: flex; justify-content: space-between; padding-left: 110px;}

#hdr-tools {margin-right: 90px;}
#hdr-tools button, .support-link {background: none; display: inline; font-size: 10px; margin: 0 10px; height: 100%; padding: 0 0 2px 0}
#hdr-tools button i, .support-link i {display: block; margin: 0; border: 0; width: auto;}
#hdr-phone {position: absolute; right: 30px; top: 0; display: flex; flex-direction: column; justify-content: center;}

#menu > ul {display: flex;}
#menu ul {margin: 0;}
#menu ul li {margin: 0;}
#menu > ul > li > a {font-size: 14px; padding: 40px 10px; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative;}
#menu > ul > li > a:after {position: absolute; margin-right: -25px; right: 0; bottom: -3px; z-index: 50; width: 50px; height: 6px; background: var(--secondary); content: ""; opacity: 0; box-shadow: 4px 4px 8px rgba(0,0,0,.2);}
#menu > ul > li:hover > a:after, #menu > ul > li.nav-path-selected > a:after {right: 50%; opacity: 1;}
#menu > ul > li:hover > a, #menu > ul > li.nav-path-selected > a {color: var(--primary); text-decoration: none;}

#menu ul li {position: relative;}
#menu ul .menu-dropdown {position: absolute; top: -800px; min-height: 300px; width: 650px; background: #fff; padding: 35px; overflow: hidden; opacity: 0; visibility: hidden; box-shadow: 0 0 55px rgba(0,0,0,.3); border: 5px solid #fff;transition-duration: 0;}
#menu ul .menu-dropdown img {position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2,1.2); object-position: center top;}
.menu-content h2 {margin: 0 0 10px 0; }
#menu ul .menu-dropdown ul, #menu ul .menu-dropdown .menu-content {position: relative; z-index: 5;}
#menu ul ul a {font-size: 18px; font-weight: 400; padding: 10px 15px;}
#menu ul ul {border-left: 1px solid rgba(0,0,0,.25); padding: 0 15px; position: relative; top: 10px; opacity: 0;}
.menu-content {position: relative; left: -30px; opacity: 0;}
#menu ul ul a:hover {padding: 10px 10px 10px 20px; color: var(--secondary);}
#menu .menu-content h2 a {font-size: 32px; color: var(--primary); padding: 0; font-weight: 300;}
#menu .menu-content h2 a:hover {color: var(--secondary); text-decoration: none;}

#menu > ul > li:hover .menu-dropdown {visibility: visible; opacity: 1; top: 100%;}
#menu > ul > li:hover .menu-dropdown img {transform: scale(1.0,1.0); transition-duration: 500ms;}
#menu > ul > li:hover .menu-dropdown .menu-content {left: 0; opacity: 1; transition-delay: 20ms; transition-duration: 1s;}
#menu > ul > li:hover .menu-dropdown ul {opacity: 1; transition-delay: 150ms; top: 0;}
#menu:hover > ul > li.nav-path-selected > a {opacity: .65;}
#menu:hover > ul > li.nav-path-selected > a:after {opacity: 0;}
#menu:hover > ul > li.nav-path-selected:hover > a:after {opacity: 1;}
#menu:hover > ul > li.nav-path-selected:hover > a {opacity: 1;}

.toggle-popover {position: fixed; padding: 50px; width: 45%; left: auto; right: -40%; top: 0; height: 100vh; box-shadow: 0 0 25px rgba(0,0,0,.25); bottom: 0; background: url(../img/btm-menu.jpg) left bottom no-repeat var(--primary);}
.toggle-popover.open {right: 0; top: 0;}
.toggle-popover ul {overflow: hidden;}
.toggle-popover ul li {width: 50%; float: left;}
.toggle-popover ul a {font-size: 16px;}
.toggle-popover .phone {margin-top: 25px; padding-top: 15px; border-top: 1px dotted rgba(255,255,255,.25); overflow: hidden;}
.toggle-popover .phone ul li {width: 100%; font-size: 14px;}


.footer .copy {text-align: right; font-size: 12px;}

}

@media (min-width: 992px) {
#hdr-tools {margin-right: 125px;}
#hdr-tools button, .support-link {font-size: 12px; color: #666;}
#hdr-tools button i, .support-link i {display: inline; margin: 0 5px;transform: scale(1,1);}
#hdr-tools button:hover, .support-link:hover {color: var(--secondary);}
#hdr-phone {flex-direction: row; align-items: center;}

.toggle-popover {width: 45%;} 
}

#social-link a{
    display: inline-block;
    width: 45px;
    height: 45px;
    font-size: 22px;
    background: #337ab7;
    color: #fff;
    text-align: center;
    margin: 0 5px 0 0;
    opacity: .9;
    line-height: 45px;
    text-align: center;
}

#social-link {padding: 10px;}


@media (min-width: 1250px) {
#site-header {max-width: 1200px; margin: 0 auto; padding: 0;}
#logo {left: 0;}
#menu ul .menu-dropdown {left: 0;}
#menu > ul > li > a {font-size: 16px;}
#hdr-tools {margin-right: 150px;}
#hdr-tools button, .support-link {font-size: 13px;}

.footer .flex:first-of-type .col {border-left: 1px solid #ccc;}
.footer .flex:first-of-type .col:first-of-type {border: none;}
.footer .flex:last-of-type {justify-content: space-between;}
.footer .flex .col.two-col {flex-basis: 500px;}
.footer .flex .col.two-col ul {columns: 2;-webkit-columns: 2;-moz-columns: 2;}

.footer ul strong {margin-left: 50px;}

.height-600 > * {min-height: 600px;}
.height-800 > * {min-height: 800px;}

}

/* New Evant Page. */
.ccm-block-tags-wrapper .ccm-block-tags-header h5 {
    font-family: var(--bold) !important;
    text-transform: uppercase !important;
    color: var(--secondary) !important;
    margin: 5px 0px 16px !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    position: relative !important;
    display: inline-block !important;
}

.ccm-block-tags-wrapper .ccm-block-tags-header h5:after {
    width: 70px !important;
    height: 2px !important;
    background: var(--secondary) !important;
    margin: -1px 0 0 15px !important;
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
}

.ccm-block-tags-wrapper {
    margin-bottom: 20px;
}

.news-entry-header .preheader {
	text-transform: unset;	
}

/*For the purchase_secondary template formidable form.*/
.formidable_column .required:after {
    content: none !important;
}
.formidable_column .checkbox input {
	width: unset !important;
}
.formidable_column.col-sm-12 {
	padding-right: 0px !important;
	padding-left: 0px !important;
}
.formidable_column .buttons.col-sm-9 {
	padding-left: 0px !important;	
}
.formidable_column input.error {
	border-color: #a94442;
	box-shadow: 0px 0px 5px #cb8281;
}
.formidable_column span.required {
    color: red;
}

@media (min-width: 425px) {
	.formidable .form-control.firstname {
		width: 49% !important;
	}
	.formidable .form-control.lastname {
		width: 48% !important;
	}
}

@media (min-width: 1080px) {
	.formidable .form-control.firstname {
		margin-right: 14px !important;
	}
}

@media (max-width: 1079px) and (min-width: 992px) {
	.formidable .form-control.firstname {
		margin-right: 12px !important;
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	.formidable .form-control.firstname {
		margin-right: 15px !important;
	}
}

/**
 * ----------------------------------------
 * wobble
 * ----------------------------------------
 */
@-webkit-keyframes wobble {
  0%,
  15%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  3% {
    -webkit-transform: translateX(-4px) rotate(-15deg);
            transform: translateX(-4px) rotate(-15deg);
  }
  6% {
    -webkit-transform: translateX(3px) rotate(6deg);
            transform: translateX(3px) rotate(6deg);
  }
  9% {
    -webkit-transform: translateX(-3px) rotate(-3.6deg);
            transform: translateX(-3px) rotate(-3.6deg);
  }
  12% {
    -webkit-transform: translateX(2px) rotate(2.4deg);
            transform: translateX(2px) rotate(2.4deg);
  }
  15% {
    -webkit-transform: translateX(-1px) rotate(-1.2deg);
            transform: translateX(-1px) rotate(-1.2deg);
  }
}
@keyframes wobble {
  0%,
  15%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  3% {
    -webkit-transform: translateX(-4px) rotate(-15deg);
            transform: translateX(-4px) rotate(-15deg);
  }
  6% {
    -webkit-transform: translateX(3px) rotate(6deg);
            transform: translateX(3px) rotate(6deg);
  }
  9% {
    -webkit-transform: translateX(-3px) rotate(-3.6deg);
            transform: translateX(-3px) rotate(-3.6deg);
  }
  12% {
    -webkit-transform: translateX(2px) rotate(2.4deg);
            transform: translateX(2px) rotate(2.4deg);
  }
  15% {
    -webkit-transform: translateX(-1px) rotate(-1.2deg);
            transform: translateX(-1px) rotate(-1.2deg);
  }
}

@media (max-width: 992px) and (min-width: 768px) {

/* -- FIX TABLET LAYOUTS */
.tablet-stack-four .row {display: grid; grid-template-columns: 1fr 1fr;}
.tablet-stack-four .row .col-sm-3 {width: 100%;}
.tablet-stack-four .row:before, .tablet-stack-four .row:after {display: none;}
.page-template-secondary .col-sm-8 .col-sm-6, .page-template-landing .col-sm-8 .col-sm-6 {width: 100%;}
.page-template-secondary .col-sm-7 .col-sm-6, .page-template-landing .col-sm-7 .col-sm-6 {width: 100%;}

}

.pad-all {
    padding: 20px;
}
.remove-row .row {
    margin-left:0;
    margin-right:0;
}
.remove-row iframe {
    width: auto;
    height: auto;
    margin-bottom: 10px;
}
.pad-all button.btn-theme.submit {
    margin-top: 20px;
}
.pad-all button.btn-theme {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

@media only screen and (max-width: 500px) {
    .col.captcha-input {
        transform:scale(0.77);
        transform-origin:0 0;
    }
}

.formidable .checkbox input[type=checkbox], .formidable .checkbox-inline input[type=checkbox], .formidable .radio input[type=radio], .formidable .radio-inline input[type=radio] { margin-left: 0; }
.row.mt-2 { padding-left: 15px; }
.text-danger { color: red; }
.formidable .col {
    margin-bottom: 10px;
    margin-left: 15px;
}
#rates.collapse.in {
    display: inline-table !important;
}
.btn-square {
	border-radius: unset !important;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  font-size: inherit;
  opacity: unset;	
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 450px;
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 79%;
    left: -10%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--primary) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.no-border {
    border-bottom: unset !important;
    border-top: unset !important;
    border-left: unset !important;
    border-right: unset !important;
    z-index: 0;
}

.on-icon {
    bottom: 120% !important;
    left: -80% !important;
    width: 150px;
}

.form-select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    height: auto !important;
    border-radius: unset !important;
}

.ui-autocomplete {
    z-index: 9999999 !important;
}

.mt-4 {
    margin-top: 80px;
}