:root{
  --tline-blue:#18346A;
  --gaf-red:#D71921;
}

body,html{
  box-sizing: border-box;
  margin:0;
  padding:0;
  font-size:18px;
  font-family: 'Poppins', sans-serif;

}
.maincontent{
  max-width:100%;
  padding:0;
  margin:0;
}
.maincontent_wrapper{
  padding-top:0;
}


.site_button{
 margin:20px 0!important;
}
.site_button a{
color:#000;
}
/* =========== my code ================== */
.warrantySection{
  padding:0 2%;
}
.warranty-body {
  /* padding: 5px; */
  border: 1px solid #000;
  margin-top: 20px;
}

.grid5{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}
.grid4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}

.flex-group{
  display:grid;
  grid-template-columns: .65fr 1fr;
  margin:10px 0;
  padding:8px 3px;
}

.flex-group:nth-child(even){
  background-color:#ececec;
}

.flex-item:first-child{
  width:150px;
}

.flex-item{
  text-align:left;
  font-weight:700;
}

.flex-item p{
  /* max-width:400px; */
  font-weight:400;
}


/* ============ end my code ============= */
button.btn {
  font-size: 16px;
  color: #d71920;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  width: 100%;
  text-align: left;
  outline: none;
  padding: 20px;
  background: transparent;
  border: none;
}

button.btn.collapsed:before {
  content: "+";
  float: right !important;
  padding-right: 5px;
  font-size: 35px;
  color: #000;
  margin-top: -20px;
  outline: none;
}

button.btn:before {
  content: "-";
  float: right !important;
  padding-right: 5px;
  font-size: 35px;
  color: #000;
  margin-top: -20px;
  outline: none;
}

.btn {
  white-space: inherit !important;
}

h2.warranty-title.text-dark {
  text-decoration: none;
  color: #D71920;
  text-transform: uppercase;
  font-weight: 900;
}

a.warranty-link:hover {
  text-decoration: none;
  color: #000;
}


.Qualifying-Shingles {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  margin: 20px 0;
  /* text-align: center; */
}

.Qualifying-Shingles h4 {
  font-size: 16px;
  font-weight: 800;
  width: 80%;
  margin: 20px auto;
}

.astericks {
  border-bottom: 2px solid #000;
}

.astericks p {
  font-size: 12px;
  color: #999;
  width: 90%;
  margin: 20px auto;
  text-align: left;
}

.site_button {
  padding: 16px 28px;
  border-radius: 0;
  background: var(--accent-color);
  border: none;
  box-shadow: 0 4px 5px -3px #333;
  transition: 0.5s;
  font-weight: bold;
  transition: ease-out 0.4s;
  margin-top: 20px;
}

@media (max-width:1400px) {
  .flex-group{
      display:block;
  }
  .flex-item:first-child{
      width:100%;
      border-bottom:1px solid black;
      display:table-cell;
      text-align:left;
  }
}

@media (max-width:992px) {
  .grid5, .grid4{
      grid-template-columns: repeat(2, 1fr);
  }
  .grid-col{
      margin:20px 0;
  }
  a.btn.collapsed:before {
      margin-top: 0 !important;
  }

  a.btn:before {
      margin-top: 0 !important;
  }
}
@media (max-width:600px) {
  .grid5, .grid4{
      display:block;
  }
}