/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.microsite h1 {
   text-align: center; 
   color: #113c5b; 
   font-size: 36px; 
   line-height: 42px;
   font-weight: 400;
   text-transform: initial;
}

.microsite p {
   font-size: 1.2rem !important;
   line-height: 1.4 !important;
}
.microsite .center {
   display: flex;
   justify-content: center;
   align-items: center;
}
.microsite .content-area {
   padding: 1rem 0;
}
.microsite .m4 {
   margin: 4rem 0;
}
.microsite #faqs .content-area {
   margin-bottom: 2rem;
}
.microsite #resources, .microsite #faqs, .microsite #how-to .wrapper-blue:first-of-type {
   padding-top: 40px;
}
.microsite .logo-wrap {
   margin: 3rem auto;
}
.microsite .woocommerce-tabs .resp-tabs-list li {
   font-size: 1.2rem;
   padding: 6px 20px !important;
   background-color: rgb(17, 60, 91) !important;
   color: #fff !important;
   border-radius: 4px 4px 0 0;
}
.microsite .woocommerce-tabs .resp-tabs-list li:hover {
   background-color: rgb(201, 220, 80) !important;
   color: rgb(17, 60, 91) !important;
}
.microsite .woocommerce-tabs .resp-tabs-list li.resp-tab-active, .wrapper-blue .button.cta {
   background-color: rgb(201, 220, 80) !important;
   color: rgb(17, 60, 91) !important;
   display: inline-block;
   max-width: 100%;
   white-space: normal;
}
.microsite .woocommerce-tabs .resp-tabs-list li.resp-tab-active:hover, .wrapper-blue .button.cta:hover {
   background-color: rgb(212, 232, 92) !important;
   color: rgb(29, 72, 113) !important;
}
.microsite .woocommerce-tabs .tab-content {
   padding: 0;
   background: none;
   border-top: none;
}
.microsite .video-container {
   min-height: 200px;
   width: 100%;
}
.microsite .hidden {
   display: none;
}
.acf-map {
   width: 100%;
   height: 400px;
   border: #ccc solid 1px;
   margin: 0;
}
.acf-map img {
  max-width: inherit !important;
}
.microsite .acf-map p {
   color: #0a0a0a !important;
}
.microsite .image-box {
   display: flex;
   justify-content: center;
   align-items: center;
}
.microsite .col-md-3 .image-box img {
   max-width: 80%;
   margin-bottom: 25px;
}
@media (min-width: 768px) { /* tablet and greater */
   .microsite .row > div {
      padding: 0 40px 40px;
   }
   .microsite .overlay-blue {
      width: 60%;
   }
}
@media (max-width: 767px) { /* mobile */
   .microsite .row > div {
      padding: 10px 20px 40px;
   }
   .microsite .overlay-blue {
      width: 90%;
   }
}
.wrapper-blue {
   background-color: #113c5b !important;
   color: #fff !important;
}
.hero-wrapper .hero {
   min-height: 400px;
   width: 100%;
}
.hero-wrapper .hero h1 {
   line-height: 3rem;
   letter-spacing: 4px;
   font-weight: 700;
   font-size: 42px;
   text-transform: uppercase;
}
.hero-wrapper .overlay-blue {
   padding: 40px 0;
   background-color: rgb(17, 60, 91);
   min-height: 280px;
   margin: 60px auto;
}
.hero-wrapper {
   display: flex;
   align-items: center;
   flex-direction: column;
}
.wrapper-blue .container h1, 
.wrapper-blue .container p, 
.wrapper-blue .container > *,
.wrapper-blue .hero h1 {
   color: #fff !important;
}
.gradient-bar {
   background-image: url("/wp-content/plugins/microsite-pages/public/images/aeroseal-gradient.jpg");
   background-size: cover;
   height: 10px;
   width: 100%;
}