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;
}


.reusable img{
    width:100%;
}
.mobile-reusable img{
    width:100%;
}
.highlight{
  font-weight:700;
  cursor:pointer;
}
.r-container{
    max-width:1400px;
    padding:2%;
    margin:0 auto;
    background-color:#F3F3F3;
}
.r-header{
  text-align: center;
}
#title{
  font-weight:700;
}
#description{
  font-weight:300;
}
.roof-system{
  padding:3%;
  max-width:1000px;
  margin:0 auto;
  background-color:#fff;
}
.caption{
  cursor:pointer;
  text-align: right;
  margin-top:-5px;
  font-weight:300;
font-size:.8em;
}
.caption-row{
  height:50px;
}
.smbox{
  height:8px;
  width:8px;
  background-color:#000;
  transform:rotate(45deg);
  margin:0 auto;
  position: relative;
  z-index:10;
}
.smbox-col{
  position: relative;
  height:100%;
  /* width:15px; */
}
.smbox-col::after{
  position: absolute;
  content:"";
  height:100%;
  width:1px;
  background-color:#000;
  top:0;
  left:50%;
}
.smbox::before{
  position: absolute;
  /* content:""; */
  height:14px;
  width:14px;
  border:1px solid #000;
  top:-3px;
  left:-3px;
  /* display:none; */
}
.smbox-col{
  position: relative;
}
.caption:hover{
  color:#D41A1E;
  }
  .hover{
  background-color:#D41A1E;
}
.outline{
  outline: 1px solid #000;
  outline-offset:2px;
  transition:.3s;
}
  .check{
    max-width:33px;
    max-height:35px;
  }
  .check-m{
    max-width:25px;
    margin-left:10px;
    margin-bottom:10px;
    /* max-height:35px; */
  }
  .fineprint{
    font-size:.8rem;
  }
  .my-header{
    display:flex;
    flex-direction: row;
    align-items: center;
    margin-bottom:20px;
    max-width:900px;
  margin:0 auto;
  }
  .shingle-image p{
    margin:0;
  }
 
  /* =============== Mobile ================ */
  .mobile-reusable{
    display:none;
    text-align: center;
  }
  .mobile-reusable p{
    margin:5px ;
  }
  .mobile-reusable .my-header{
    justify-content: center;
  }
  .warranty-type{
    text-align: center;
  }
  .my-hr{
    max-width:75%;
    margin:0 auto 20px;
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
  }
  .warranty-type-group{
    margin-block:10px;
    padding-block:8px;
    /* border-bottom:2px solid #000; */
  }
  @media screen and (max-width:1050px) {
    .reusable{
      display:none;
    }
    .mobile-reusable{
      display:block;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    table, thead, tbody, th, td, tr {
        /* display: block; */
        height: auto;
        text-align: center;
        /* width: 100%; */
        margin: 0px auto;
    }
}