/*
Template Name: fontanero

Description: HTML5 / CSS3 Multi Page
Version: 1.0
Develop by: uiCookies.com
*/

/*------------------------------------------------------------------
[Layout]

* body
  + wrapper / #wrapper
    + offcanvas-pusher /
      + content-wrapper /
        + container /
          - header
            -header-wrapper
              -header-top
              -main-nav-bar
        + container-fluid
          -banner-section
            -carousel / slide
              -carousel-indicators
              -carousel-inner
        + container /
          -welcome-section
        + container /  
          -service-section
            -tablist
            -tab-content
        + container /
          -service-activity
            -activity-head
            -activity-list-items
              -activity-list
        + quote-section /
          - container 
          - quote
        + container / 
          -our-clients-carousel
            -our-client-thumb
              -item
        + container /
          -footer-top
          -footer

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
  [Color codes]


# Background   : #ffffff
# Content      : #888888
# Header h1    : #888888
# Header h2    : #888888
# Footer       : #888888

# a (standard) : #ffffff
# a (visited)  : #fdc312
# a (active)   : #fdc312
-------------------------------------------------------------------*/


/*
   * What follows is the result of much research on cross-browser styling.
   * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
   * Kroc Camen, and the H5BP dev community and team.
   */

/* ==========================================================================
     Base styles: opinionated defaults
========================================================================== */

/*--------------------------------------------
  Service section style
--------------------------------------------*/
.service-section{
  overflow: hidden;
  padding-bottom: 5em;
}


.tablist{
  padding: 1.5em 0;
  border: 1px solid rgba(0, 0, 0, .05);
  border-left:0;
  border-right:0;
  margin-bottom: 5em;
 overflow-x: auto;
   overflow-y:hidden;
   flex-wrap: nowrap;
}

/*.service-section li:first-child{
  font-size: 1.571em;
  margin-right: 9.286em;
  padding: 0;
  border:0;
}*/
.service-section li{
  border-radius: 0;   
  padding: 0 1em;
  display: inline-block;
  /*border-bottom: 2px solid rgba(0,0,0,.3);*/
 
}
.service-section li:last-child{
 /* border-right: 2px solid rgba(0,0,0,.3);*/
}
.service-section li a{
    border-radius: 0;
    border: 0;
    margin: 0;
    color: #888888;
   /* font-weight: bold;*/
   /* font-size: 1.571rem;
    text-transform: uppercase;*/
    padding-bottom: 1em;
    
}
.service-section .nav-tabs .nav-link.active, 
.service-section .nav-tabs a:focus, 
.service-section .nav-tabs a:hover  
{
  color: #fab700;
  background: #ffffff;
  border-bottom: 2px solid #fab700;
  border-color: #fff #fff  #fab700 #fff;
   
}
.service-section li a:hover{
  color: #fab700;
  background: #ffffff;
  border-bottom: 2px solid #fab700;
}

.service-item{
  position: relative;
  margin-bottom:2.1em;
}
.service-item::before{
  content: " ";
  position: absolute;
  width:100%;
  height: 100%;
  left:0;
  top:0;
  background: #fab700;
  opacity: 0;
  -webkit-transition : all 0.3s ease 0s;
  -moz-transition    : all 0.3s ease 0s;
  -o-transition      : all 0.3s ease 0s;
  transition         : all 0.3s ease 0s;
}

.service-item:hover::before{
  opacity: .9;
}
.service-description{
  position: absolute;
  left:0;
  bottom: 0;
  padding: 0 2.8em 4.0em;
}
.service-description h3{
    color: #000000;
    border-left: 5px solid #fab700;
    line-height: 1.4rem;
    padding-left:.4em;
    text-transform: uppercase;
}
.service-description p{
  color:#ffffff;
  opacity: 0;
  visibility: hidden;
  margin-bottom: -7em;
  -webkit-transition : all 0.3s ease 0s;
  -moz-transition    : all 0.3s ease 0s;
  -o-transition      : all 0.3s ease 0s;
  transition         : all 0.3s ease 0s;
}

.service-item:hover p{
    opacity: 1;
    visibility: visible;
    margin-bottom: 0;
}
.service-item:hover .service-description h3{
    border-left: 5px solid #ffffff;
}

@media(max-width: 767px){
  .service-section li:first-child {
    margin-right: 0;
  }
  .service-section li a {
    font-size: 1rem;
  }
  
}
@media(min-width: 480px) and (max-width: 991px){
  .service-section li:first-child {
    margin-right: 2rem;
  }

}

/*------------------------------------------------------
  Service activity style
---------------------------------------------------*/
.service-activity{
  padding: 5em 0;
}
.activity-head{
    padding: 0 20em;
    text-align: center;
}
.activity-head h2{
  line-height: 1.5em;
  font-weight:400;
  color:#888888;
}
.activity-head h2 span{
  color:#fab700;
  text-transform: uppercase;
}
.activity-list-items{
  padding:5em 0;
  overflow: hidden;
}
.activity-list{
  overflow: hidden;
}
.activity-icon{
  float: left;
  width: 17%;
  padding-right: 1.5em;
  text-align: center;
}
.activity-icon i{
    background: #fab700;
    padding: 0.52em;
    font-size: 1.5rem;
    color:#ffffff;
}
.activity-details{
  float:right;
  width:83%;
}
.activity-details h4{
  color: #333333;
  font-size: 1rem;
}

@media(max-width: 767px){
  .service-activity {
    padding: 0;
  }
  .activity-head {
    padding: 0;
  }
  .activity-head h2{
      font-size: 1.5em;
  }
  .activity-list{
    margin-bottom: 2em;
  }
}
@media(min-width: 768px) and (max-width: 1199px){
  .activity-head {
    padding: 0 6em;
  }
  .activity-icon {
    width: 20%;
  }
  .activity-details {
    width: 80%;
  }
}


/*--------------------------------------------------
  Service style
-------------------------------------------------*/
.residential-plumb{
  overflow: hidden;
  padding: 5em 0;
}
.residential-plumb h2, 
.commercial-plumb h2{
  margin-bottom: 1.5em;
  padding-left: .5em;
  text-transform: uppercase;
}
.residential-plumb .service-description p,
.commercial-plumb .service-description p{
  color:#ffffff;
  opacity: 0;
  visibility: hidden;
  margin-bottom: -12em;
  -webkit-transition : all 0.3s ease 0s;
  -moz-transition    : all 0.3s ease 0s;
  -o-transition      : all 0.3s ease 0s;
  transition         : all 0.3s ease 0s;
}
.residential-plumb .service-item:hover p,
.commercial-plumb .service-item:hover p{
    opacity: 1;
    visibility: visible;
    margin-bottom: 0;
}
.residential-plumb .service-description,
.commercial-plumb .service-description{
  padding: 5.2em 1.5em 1.5em 1.8em;
  bottom: 1.5em;
}
.service-description h2{
  visibility: visible;
  opacity: 1;
}
.residential-plumb .service-description a,
.commercial-plumb .service-description a{
  visibility: hidden;
  opacity: 0;
  color:#666666;
  text-transform: uppercase;
  background: #ffffff;
  padding: 0.5em 0.857em;
  font-weight: 600;
  margin-top: 1em;
  display: inline-block;
}
.residential-plumb .service-item:hover .service-description a,
.commercial-plumb .service-item:hover .service-description a{
    opacity: 1;
    visibility: visible;
}
.residential-plumb .service-item:hover .service-description a:hover,
.commercial-plumb .service-item:hover .service-description a:hover{
  background: #3c4461;
  color:#ffffff;
  border-color: #3c4461;
}
.residential-plumb.service-item:hover .service-description,
.commercial-plumb .service-item:hover .service-description{
    border: 2px solid #ffffff;
    overflow: hidden;
    margin: 1.5em;
    opacity: 1;
    visibility: visible;
    bottom: 0;
    padding: 5.2em 0 1.5em 1.8em;
}
.commercial-plumb{
  overflow: hidden;
  padding: 5em 0;
  border:1px solid rgba(0,0,0, .05);
  border-left: 0;
  border-right: 0; 
}

@media(max-width: 480px){
  .residential-plumb h2, 
  .commercial-plumb h2{
    font-size: 1.7rem;
  }
  .residential-plumb .service-item:hover .service-description, 
  .commercial-plumb .service-item:hover .service-description {
    margin: 0.5em;;
    padding: 2.6em 0 0.5em 1em;
  }
}
@media(min-width:600px) and (max-width: 767px){
  .residential-plumb .service-item:hover .service-description, 
  .commercial-plumb .service-item:hover .service-description {
    margin: 4.5em;
    padding: 9.6em 2em 2.5em 2em;
  } 
}
@media(min-width:768px) and (max-width: 991px){
  .residential-plumb .service-item:hover .service-description, 
  .commercial-plumb .service-item:hover .service-description {
    padding: 4.5em 0 1.5em 0.8em;
  } 
}
@media(min-width:992px) and (max-width: 1199px){
  .residential-plumb .service-item:hover .service-description, 
  .commercial-plumb .service-item:hover .service-description {
    margin: 0.5em;
    padding: 1.6em 0 1.5em 1.8em;
  } 
}

/*-----------------------------------------------------------
 Single-page style 
---------------------------------------------------------*/
.single-details{
  padding:5em 0;
  overflow: hidden;
}

@media(max-width: 991px){
  .single-thumb{
    width:100%;
    margin-bottom:4em;
    padding:0;
  }
  .single-content{
    width:100%;
  }
}