/* Start Content Pattern Styling */
#home-main-content .slick-dots li button::after {
    content:'';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 15px 16px;
    border-color: transparent transparent #222222 transparent;
    transition: bottom 0.3s;
  }
  #home-main-content .slick-dots li button:active::after,
  #home-main-content .slick-dots li button:hover::after,
  #home-main-content .slick-dots li.slick-active button::after {
    bottom:0;
  }
  /* End Content Pattern Styling */
  
  
  /* Start Layout Pattern Styling */
  #rotating-main-content {
      width: 800px;
      max-width: 100%;
      margin: auto;
  }
  /* Prevent .view-all links from being clicked for inactive slides */
  #rotating-main-content .slick-slide .view-all {
      visibility: hidden;
  }
  #rotating-main-content .slick-slide.slick-active .view-all {
      visibility: visible;
  }
  
  /* ------- DOTS / PAGER ------- */
  
  #home-main-content ul.slick-dots {
      margin: 0 auto;
        padding: 0;
      list-style: none;
      text-align: center;
      border-bottom: 2px solid #222;
      overflow: hidden;
  }
  #home-main-content .slick-dots li {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      padding: 0 10px; /* White space in between buttons*/
      margin-bottom: 0;
  }
  #home-main-content .slick-dots li:first-child {
      padding-left: 0;
  }
  #home-main-content .slick-dots li:last-child {
      padding-right: 0;
  }
  #home-main-content .slick-dots li button {
      position: relative;
      height: 60px;
      width: 100%;
      padding: 10px 10px 15px;
      line-height: 0;
      white-space: normal; /* Prevents inherited nowrap behavior from parent div on mobile */
      background-color: transparent;
      border-radius: 0;
      text-transform: uppercase;
      text-align: left;
      font-size: 14px;
      color: #222;
      transition: 0.2s;
  }
  #home-main-content .slick-dots li span {
      display: inline-block;
      vertical-align: bottom;
      line-height: 1.05em;
  }
  
  /* --- Dots / Pager: Icons --- */
  #home-main-content .slick-dots li button::before {
      display: none;
  }
  
  /* Add custom icons per design and IDs*/
  /*
  .slick-dots #air-conditioning-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-ac.png');
  }
  */
  
  @media all and (max-width: 570px) {
      #home-main-content .slick-dots li button::after {
          border-width: 0 13.5px 10px 13.5px;
      }
  }
  
  /* CODELIBENTRY_ENTRY: 40 */
  
  /* ------- SLICK RESETS ------- */
  
  #rotating-main-content-nav button::-moz-focus-inner {
      border: 0;
  }
  #rotating-main-content-nav button:focus,
  .slick-slider div:focus,
  .slick-slider a:focus {
      outline: none !important;
  }
  #home-main-content {
    position: relative;
    z-index: 0;
  }
  
  /* ------- SCROLLING ARROWS ------- */
  
  #rotating-main-content-nav {
      position: relative;
  }
  .scroll-btn,
  .scroll-btn:hover,
  .scroll-btn:active {
      position: absolute;
      top: 0;
      width: 30px;
      height: 100%;
      overflow: hidden;
      padding: 0;
      opacity: 1;
      background-color: #fff;
      border-radius: 0;
      font-size: 1px;
      line-height: 1px;
      color: transparent;
      z-index: 10;
      transition: 0.2s;
  }
  .scroll-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      background-size: 16px auto;
      background-repeat: no-repeat;
      background-position: center;
      transition: 0.2s;
  }
  
  /* --- Scrolling Arrows: Previous --- */
  .scroll-btn.scroll-prev {
      left: 0;
  }
  .scroll-btn.scroll-prev::before {
      background-image: url('/assets/templates/main/images/icons/icon-arrow-left-plain.png');
  }
  
  /* --- Scrolling Arrows: Next --- */
  .scroll-btn.scroll-next {
      right: 0;
  }
  .scroll-btn.scroll-next::before {
      background-image: url('/assets/templates/main/images/icons/icon-arrow-right-plain.png');
      right: 0;
  }
  
  /* --- Scrolling Arrows: Hovers --- */
  .scroll-btn:hover::before,
  .scroll-btn:active::before {
      opacity: 0.6;
  }
  
  /* --- Scrolling Arrows: Disabled --- */
  .scroll-btn.hidden {
      pointer-events: none;
      cursor: default;
  }
  .scroll-btn.hidden::before,
  .scroll-btn.hidden:hover::before,
  .scroll-btn.hidden:active::before {
      opacity: 0;
  }
  
  
  /* ------- MEDIA QUERIES ------- */
  
  /* Hide buttons until mobile */
  @media all and (min-width: 571px) {
      .scroll-btn {
          visibility: hidden;
          pointer-events: none;
      }
  }
  
  /* Responsive Styling: Non-Mobile */
  @media all and (min-width: 571px) and (max-width: 800px) {
      #home-main-content .slick-dots li {
          width: 25%;
          margin: auto -3px;
      }
      #home-main-content .slick-dots li button {
          font-size: 13px;
          text-align: center;
          padding: 0 10px 5px;
      }
      #home-main-content .slick-dots li button::before {
          position: static;
          width: 100%;
          height: 35px;
          margin: auto;
          background-size: auto 23px;
      }
  }
  
  /* Responsive Styling: Mobile */
  @media all and (max-width: 570px) {
      #rotating-main-content-nav {
          margin: auto -15px; /* To remove width limiter padding */
      }
      #home-main-content .slick-dots-container {
          padding: 0 30px; /* Equals width of arrows */
      }
      #home-main-content .slick-dots {
          overflow-y: hidden;
          overflow-x: scroll;
          white-space: nowrap;
          padding: 0 0 5px; /*Add some padding between content and scroll bar */
      }
      #home-main-content .slick-dots li {
          padding: 0 5px;
      }
      #home-main-content .slick-dots li button {
          height: 50px;
          max-width: 160px;
          padding: 10px 10px 5px;
          font-size: 13px;
      }
      #home-main-content .slick-dots li button::before {
          background-size: auto 36px;
          left: 50%;
          transform: translateX(-50%);
          background-position: top 10px center;
          height: 100%;
      }
      #rotating-main-content {
        padding: 0 15px; /* Extra padding to align content with pager */
      }
      #home-main-content .slide-main-content {
          padding: 0;
      }
  }
  
  #home-main-content {
    padding: 30px 15px;
  }
  .h1 {
    display: block;
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
    margin: auto auto 40px;
  }
  p.view-all {
    text-align: left;
    font-style: normal;
    font-weight: bold;
  }
  p.view-all a:link,
  p.view-all a:visited {
    padding: 0;
    color: #222;
    text-decoration: underline;
  }
  h2 a:hover,
  h2 a:active,
  p.view-all a:hover,
  p.view-all a:active {
    color: #aaa;
    text-decoration: underline;
  }
  p.view-all a::after {
      content: "  \00bb";
      padding: 0;
  }
  .slick-dots button {
    font-weight: bold;
  }
  .slick-dots #air-conditioning-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-ac.png');
  }
  .slick-dots #heating-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-heating.png');
  }
  .slick-dots #electrical-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-electrical.png');
  }
  #rotating-main-content-nav .slick-dots #commercial-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-commercial.png');
  }
  .slick-dots #plumbing-btn::before {
      background-image: url('/assets/templates/main/images/icons/service-icon-plumbing.png');
  }
  
  
  @media all and (max-width: 800px) {
    .h1 {
      font-size: 27px;
      margin-bottom: 20px;
    }
  }
  /* End Layout Pattern Styling */