/*
* Dealer Detail Styles
*/

.dealer-wrapper{

}


.grid-cols-1{
   grid-template-columns: repeat(1, 1fr);  
}

.grid-cols-2{
   grid-template-columns: repeat(2, 1fr);  
}

.grid-cols-3{
   grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4{
   grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5{
   grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6{
   grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7{
   grid-template-columns: repeat(7, 1fr);
}

.dealer-wrapper{
  max-width: 1000px;
  margin: 120px auto 80px auto;

}

.detail-wrapper{
  display: grid;
  width: 100%;
  grid-template-areas:
    "details map"
    "hours hours"
    "services services";
  grid-template-rows: auto auto auto;
  grid-template-columns: 0.5fr 0.5fr;
  
}


.dealer-details{
  grid-area: details;
  height: 350px;
}


.map_canvas{
  grid-area: map;
  height: 350px;

}


.hours-area{
  grid-area: hours;
  display: grid;
  width: 100%;
  grid-template-rows: auto;
}

.hours-header{
  display: grid;
  width: 100%;
}

.hours-wrapper{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}

.hours-wrapper.empty{
  grid-template-columns: repeat(1, 1fr);
}

.dealer-logo, .dealer-logo-m{
  display: none;
}

.dealer-logo.active, .dealer-logo-m.active{
  display: block;
}

.hours-block{
display: grid;
  width: 100%;
  grid-template-areas:
    "dept-name"
    "dept-hours";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

.defaults-hours{
  display: block;
}

.mobile-hours{
  display: none;
  grid-area: dept-days;
}

.hours-label{
  grid-area: dept-name;
}

.hours{
  grid-area:dept-hours;
}

.mobile-header{
  display: none;
}

.services-area{
  grid-area: services;
  display: grid;
  width: 100%;
  grid-template-rows: auto;
  
}

.services-header{
  display: grid;
  width: 100%;
  grid-template-rows: auto;
}

.services-wrapper{
  display: grid;
  width: 100%;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
}

.services-wrapper.empty{
  grid-template-columns: repeat(1, 1fr);
}

.service{
  padding: 10px;
}

.service-icon{
  float: left;
}

.service p{
  padding:14px 0px 0px 55px
}
@media (min-width: 768px) and (max-width: 1000px) {
    .detail-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 767px) {
 
.mob-grid-1{
   grid-template-columns: repeat(1, 1fr);  
}

  .mobile-header{
    display: grid;

  }

  .tabs-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    text-align: center;
    border-bottom: 2px solid black;
    margin-bottom: 20px;
  }

  .tab{
    background-color: white;
    color: #0165A3;
    padding: 15px;
    border: 2px solid #0165A3;
    border-radius: 15px 15px 0px 0px;
  }

  .tab.pb{
    background-color: white;
    color: #C42032;
    border: 2px solid #C42032;
  }

  .tab.active{
    background-color: #0165A3;
    color: white;
  }

  .tab.pb.active{
    background-color: #C42032;
    color: white;
  }

  .dealer-name-row{
    padding: 0px 40px;
  }

  .dealer-name{
    display: none;
  }

  .dealer-logo.active{
    display: none;
  }

  .detail-wrapper{
    display: grid;
    width: 100%;
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  
  }

  .dealer-details{
    display: none;
    grid-area: auto;
    padding: 40px;
  }
  .services-area{
    display: none;
    grid-area: auto;
    padding: 40px;
  }
  .services-wrapper{

    grid-template-columns: repeat(1, 1fr);
  }


  .hours-area{
    display: none;
    grid-area: auto;
    padding: 40px;
    grid-template-rows: auto;

  }

  .defaults-hours{
    display: none;
  }

  .hours-wrapper{
    grid-gap:30px;
    grid-template-columns: 1fr;
    
  }

  .hours-block{
    display: grid;
    width: 100%;
    grid-template-areas:
      "dept-name dept-name"
      "dept-days dept-hours";
    grid-template-rows: auto auto;
    grid-template-columns: .5fr .5fr;
  }

  .mobile-hours{
    display: block;
    grid-area: dept-days;
    padding-left: 30px;
  }

  .hours-label{
    grid-area: dept-name;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid black;
    font-family: 'Kenworth-Bold', Helvetica, sans-serif;
    margin-bottom: 10px;
    padding:10px 0px;
  }

  .hours{
    grid-area:dept-hours;
  }


  .dealer-details.active ,.services-area.active, .hours-area.active{
    display: grid;
   }


}

@media (max-width: 370px) {
    .hours-block {
        grid-template-columns: .5fr 1fr;
        column-gap: 10px;
    }

    .mobile-hours {
        padding-left: 20px;
    }
}