/* Shared Vance Outdoors store-page facelift. Bootstrap 3 compatible. */
body {
     background-color: #ffffff;
     color: #222222;
     font-family: 'Open Sans', Arial, sans-serif;
}

.store-page {
     overflow-x: hidden;
}

.store-page h1,
.store-page h2,
.store-page h3,
.store-page h4,
.store-page .btn {
     font-family: 'Montserrat', Arial, sans-serif;
}

.store-page h2 {
     font-size: 30px;
     line-height: 1.25;
     margin-top: 0;
     margin-bottom: 15px;
}

.store-page h3 {
     font-size: 21px;
     line-height: 1.35;
     margin-top: 0;
}

.store-page p {
     line-height: 1.65;
}

.store-section {
     padding: 60px 0;
}

.store-section-sm {
     padding: 40px 0;
}

.bg-store-light {
     background-color: #f6f7f8;
}

.section-intro {
     max-width: 760px;
     margin: 0 auto 35px;
}

.section-eyebrow {
     display: inline-block;
     font-family: 'Montserrat', Arial, sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #8b1e1e;
     margin-bottom: 10px;
}

.text-white {
     color: #ffffff !important;
     text-decoration: none !important;
}

.btn-store-primary,
.store-page .btn-primary {
     background-color: #8b1e1e;
     border-color: #751818;
     border-radius: 3px;
     color: #ffffff !important;
     font-weight: 700;
     padding: 12px 20px;
     transition: background-color .2s ease, border-color .2s ease;
}

.btn-store-primary:hover,
.btn-store-primary:focus,
.store-page .btn-primary:hover,
.store-page .btn-primary:focus {
     background-color: #701717;
     border-color: #5f1313;
     color: #ffffff !important;
}

.btn-store-outline {
     background-color: #ffffff;
     border: 2px solid #1f2a33;
     color: #1f2a33 !important;
     font-weight: 700;
     border-radius: 3px;
     padding: 10px 18px;
}

.btn-store-outline:hover,
.btn-store-outline:focus {
     background-color: #1f2a33;
     color: #ffffff !important;
}

.store-page a:focus,
.store-page button:focus {
     outline: 3px solid #f0ad4e;
     outline-offset: 2px;
}

/* Hero */
.store-hero {
     position: relative;
     min-height: 520px;
     color: #ffffff;
     display: table;
     width: 100%;
     overflow: hidden;
     background-color: #111111;
}

.store-hero-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 1;
}

.store-hero:before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, .58);
     z-index: 2;
}

.store-hero-inner {
     position: relative;
     z-index: 3;
     display: table-cell;
     vertical-align: middle;
     padding: 70px 0;
}

.store-hero-content {
     max-width: 860px;
}

.store-hero-label {
     display: inline-block;
     background-color: rgba(139, 30, 30, .95);
     color: #ffffff;
     font-family: 'Montserrat', Arial, sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     padding: 8px 12px;
     margin-bottom: 18px;
     border-radius: 3px;
}

.store-hero h1 {
     font-size: 52px;
     line-height: 1.08;
     font-weight: 700;
     margin: 0 0 20px;
     text-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

.store-hero p {
     font-size: 19px;
     line-height: 1.65;
     max-width: 760px;
     margin-bottom: 28px;
}

.hero-actions .btn {
     margin-right: 10px;
     margin-bottom: 10px;
}

/* Quick information */
.quick-info-wrap {
     margin-top: -45px;
     position: relative;
     z-index: 4;
     padding-bottom: 35px;
}

.quick-info-card {
     background-color: #ffffff;
     border-radius: 4px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, .14);
     overflow: hidden;
}

.quick-info-item {
     padding: 26px 24px;
     border-right: 1px solid #eeeeee;
     min-height: 150px;
}

.quick-info-item:last-child {
     border-right: none;
}

.quick-info-title {
     display: block;
     font-family: 'Montserrat', Arial, sans-serif;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #8b1e1e;
     margin-bottom: 10px;
}

.quick-info-item p {
     margin: 0;
     font-size: 16px;
     line-height: 1.65;
     color: #222222;
}

.quick-info-item a {
     color: #1f2a33;
     font-weight: 700;
     text-decoration: underline;
}

/* Visit and map */
.visit-card {
     background-color: #ffffff;
     border-radius: 4px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
     overflow: hidden;
}

.visit-info {
     padding: 30px;
}

.visit-info h2 {
     margin-bottom: 20px;
}

.visit-detail {
     padding: 18px 0;
     border-bottom: 1px solid #eeeeee;
}

.visit-detail:first-of-type {
     padding-top: 0;
}

.visit-detail:last-child {
     border-bottom: none;
     padding-bottom: 0;
}

.visit-detail p {
     margin-bottom: 0;
}

.visit-info a {
     color: #1f2a33;
     font-weight: 700;
     text-decoration: underline;
}

.map-wrap {
     background-color: #e9ecef;
     min-height: 420px;
}

.map-wrap iframe {
     border: 0;
     display: block;
     height: 420px;
     width: 100%;
}

.map-button-wrap {
     padding: 15px;
     background-color: #ffffff;
     border-top: 1px solid #eeeeee;
}

/* Service and information cards */
.service-grid {
     display: flex;
     flex-wrap: wrap;
}

.service-grid > [class*="col-"] {
     display: flex;
     margin-bottom: 30px;
}

.service-card,
.info-card {
     width: 100%;
     background-color: #ffffff;
     border: 1px solid #e7e7e7;
     border-radius: 4px;
     padding: 26px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.service-card h3 {
     color: #1f2a33;
     font-weight: 700;
     margin-bottom: 12px;
}

.service-card h3 a {
     color: #1f2a33;
     text-decoration: underline;
}

.service-card p {
     margin-bottom: 0;
}

/* Marine feature */
.marine-card {
     background-color: #ffffff;
     border-radius: 4px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
     overflow: hidden;
}

.marine-card img {
     width: 100%;
}

.marine-info {
     padding: 30px;
}

/* Departments */
.department-grid {
     display: flex;
     flex-wrap: wrap;
}

.department-grid > [class*="col-"] {
     display: flex;
}

.dept-feature {
     position: relative;
     background-size: cover;
     background-position: center;
     min-height: 275px;
     width: 100%;
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 30px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
}

.dept-feature .dept-overlay {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, .58);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     text-align: center;
     padding: 24px;
}

.dept-feature h2 {
     color: #ffffff;
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 10px;
     text-transform: uppercase;
}

.dept-feature span {
     color: #ffffff;
     display: block;
     font-size: 15px;
     line-height: 1.5;
     margin-bottom: 16px;
}

.dept-feature a {
     min-width: 125px;
}

/* FAQ */
.faq-panel-group {
     max-width: 920px;
     margin: 30px auto 0;
}

.faq-panel-group .panel {
     margin-bottom: 12px !important;
     border: 1px solid #e2e2e2;
     border-radius: 4px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.faq-panel-group .panel-heading {
     padding: 0;
     background-color: #ffffff !important;
}

.faq-panel-group .panel-title {
     font-weight: 700;
}

.faq-panel-group .panel-title a {
     display: block;
     position: relative;
     padding: 18px 50px 18px 20px;
     text-decoration: none;
     color: #1f2a33;
     line-height: 1.4;
}

.faq-panel-group .panel-title a:after {
     content: "+";
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     color: #8b1e1e;
     font-size: 24px;
     line-height: 1;
}

.faq-panel-group .panel-title a[aria-expanded="true"]:after {
     content: "-";
}

.faq-panel-group .panel-title a:hover,
.faq-panel-group .panel-title a:focus {
     color: #8b1e1e;
     background-color: #f8f8f8;
}

.faq-panel-group .panel-body {
     padding: 18px 20px;
     background-color: #ffffff;
     border-top: 1px solid #eeeeee !important;
     font-size: 16px;
     line-height: 1.65;
}

/* Nearby stores */
.about-grid {
     display: flex;
     flex-wrap: wrap;
}

.about-grid > [class*="col-"] {
     display: flex;
     margin-bottom: 30px;
}

.info-card h2 {
     color: #1f2a33;
     font-weight: 700;
}

.info-card .list-group {
     margin-bottom: 12px;
}

.info-card .list-group-item {
     border-color: #e5e5e5;
     transition: background-color .2s ease, border-color .2s ease;
}

.info-card .list-group-item:hover,
.info-card .list-group-item:focus {
     background-color: #f7f7f7;
     border-color: #cccccc;
}

@media (max-width: 991px) {
     .store-hero {
          min-height: 480px;
     }

     .quick-info-wrap {
          margin-top: 0;
          padding: 25px 0;
          background-color: #f6f7f8;
     }

     .quick-info-item {
          border-right: none;
          border-bottom: 1px solid #eeeeee;
          min-height: 0;
     }

     .quick-info-item:last-child {
          border-bottom: none;
     }

     .map-wrap,
     .map-wrap iframe {
          min-height: 340px;
          height: 340px;
     }

     .service-grid > [class*="col-"],
     .department-grid > [class*="col-"],
     .about-grid > [class*="col-"] {
          display: block;
     }
}

@media (max-width: 767px) {
     .store-section {
          padding: 42px 0;
     }

     .store-hero {
          min-height: 520px;
     }

     .store-hero-inner {
          padding: 55px 0 95px;
     }

     .store-hero h1 {
          font-size: 36px;
     }

     .store-hero p {
          font-size: 16px;
     }

     .store-page h2 {
          font-size: 25px;
     }

     .quick-info-wrap {
          padding: 20px 0;
     }

     .quick-info-item {
          padding: 20px;
     }

     .hero-actions .btn {
          display: block;
          width: 100%;
          margin-right: 0;
     }

     .visit-info,
     .marine-info,
     .info-card,
     .service-card {
          padding: 22px;
     }

     .dept-feature {
          min-height: 230px;
     }

     .faq-panel-group .panel-title a {
          padding: 16px 45px 16px 16px;
     }
}

@media (prefers-reduced-motion: reduce) {
     .store-page *,
     .store-page *:before,
     .store-page *:after {
          scroll-behavior: auto !important;
          transition: none !important;
     }
}