html,
body {
  font-size: 18px;
}

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

p {
  font-family: 'Montserrat', sans-serif;
}

.thin{
  font-weight:200;
}
.top-space{
  margin-top:10px;
}

h1, h2 {
  font-size: clamp(1.7rem, 3vw, 60px);
  margin: 0;
  padding: 0;
}

h2 {
  font-size: clamp(1.5rem, 2vw, 48px);
  /* line-height:1.4em; */
}
h3{
  font-size: clamp(1.5rem, 1.5vw, 42px);
}

a:focus{
  outline:0px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 0px solid #c5c5c5;
  /* background: #ececec; */
}
#tab-list li:hover {
  background: #3398CA!important;
}
.ui-widget-content a{
  color:blue;
}
#tab-list li p{
  margin:0;
}
.row {
  padding: 0 !important;
  margin: 0 !important;
}

.col-md-6 {
  padding: 0 !important;
  margin: 0 !important;
}

img {
  width: 100%;
}
.divider-line{
  height:5px;
  width:15%;
  background-color:#3398CA;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  margin:10px 0;
}
.divider-line-center{
  height:5px;
  width:30%;
  background-color:#3398CA;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  margin:10px auto;
}
.r-container{
  max-width:1800px;
  padding:2%;
  margin:0 auto;
}
.main-hr {
  height: 0px;
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid #024382;
}

.lrg-hr {
  max-width: 80%;
  margin: 20px 0;
  border:1px solid #024382;
}

/* ----------------------------------- BTN Black ------------------------------------------ */

.reusable-btn {
  border-radius: 100px;
  text-align: center;
  display: inline-block;
  padding: 1.9rem 3.2rem;
  color: #fff;
  background: radial-gradient(ellipse at center, #024382, transparent 70%);
  font-family: 'Anton', sans-serif;
  letter-spacing: .2rem;
  transition: all .1s;
  font-size: 1.1rem;
}

.btn-drk {
  background: radial-gradient(ellipse at center, #4FA3F7 0%, transparent 70%);
  padding: 2rem 3.5rem;
}

.reusable-btn a {
  color: #fff;
}

.reusable-btn-white {
  color: #000;
}

.reusable-btn:hover {
  display: inline-block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  transform: scale(.98);
  text-decoration: none;
  color: #fff;
}

.hero-content{
  padding:8% 0 8% 20%;
}
.hero-content h2{
  padding:0 0 10px 0;
  /* border-bottom:2px solid #024382; */
  max-width:clamp(250px, 60vw, 500px);
}
.section-divider {
  background: #3398CA;
  color: #fff;
  text-align: center;
  padding: 1% 2% 1%;
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}

.section-divider h2 {
  text-transform: uppercase;
  letter-spacing: .18rem;
}
.hero{
  background-image: 
  url('/imageserver/Reusable/garage-doors-general/door1.png');
  background-repeat: no-repeat;
  background-size:cover;
  background-position:right;
}

.main-header{
  padding:2% 5%;
  text-align: center;
  background:#ececec;
}

#tabs{
  margin:0 auto;
  width:100%;
}

#tab-list{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  filter:drop-shadow(0px 10px 5px rgba(0,0,0,0.2));
  background:#ededed;
  padding:0 5vw 20px;
  justify-content:space-evenly;
  margin:0 auto;
  align-items:center;
  text-align:center;
}
#tab-list li{
  margin: 5px 0;
  min-width:300px;
  list-style-type: none;
  text-align: center;
  background:#11597D;
  border:1px solid #000;
  border-radius:5px;
  padding:15px ;
  filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3))
}

#tab-list li:hover{
  background:#ededed;
}
#tab-list li a{
  color: #fff;
  padding:0;
  margin:0;
  letter-spacing:.1em;
}
#tab-list li p{
  margin-bottom:0;
}
#tab-list li img{
  max-width:200px;
}
ul{
  padding:0;
}
.r-header{
  max-width:900px;
  margin:0 auto;
  padding:0 2%;
  text-align: center;
}

.product-descrip{
  max-width:50vw;
  margin-top:15px;
}
.product-descrip-left{
  max-width:50vw;
  margin-top:15px;
}
.product-list{
  text-align:center;
}
.advantages-list{
  margin-top:80px;
  text-align: center;
}
.advantages-list .section2{
  margin-top:50px;
}

.repair-product-header{
  background:
  linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/door-repair.png');

}
.repair-product-header-left{
  background:
  linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/door-repair.jpg');
 
}
.r-grid{
  display:grid;
  grid-template-columns: 40% 60%;
}
.maintenance-product-header{
  background:
  linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/maintenance.png');
 
}
.maintenance-product-header-left{
  background:
  linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/maintenance3.png');
}

.install-product-header{
  background:
  linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/new-door2.png');
}
.install-product-header-left{
  background:
  linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/new-door1.png');
}
.openers-product-header{
  background:
  linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/openers.png');
}
.openers-product-header-left{
  background:
  linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), 
  url('/imageserver/Reusable/garage-doors-general/opener-hero.png');
}
.product-header-left{
  background-position:left top;
  background-repeat: no-repeat;
  background-size:60%;
  border-top:1px solid #000;
  padding:8% 8vw;
}
.product-header{
  background-position:right top;
  background-repeat: no-repeat;
  background-size:60%;
  border-bottom:1px solid #000;
  padding:8% 8vw;
}

.section3{
  padding:2% 0;
}
.r-flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  margin-top:30px;
}
.r-flex-item{
  max-width:400px;
  text-align: center;
}
.r-flex-item-img img{
  max-width:75px;
}
.section4{
  background-image:linear-gradient(to bottom,rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,1) 100%), url('/imageserver/Reusable/garage-doors-general/new-door3.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding:5% 8%;
  text-align: center;
  margin-bottom:50px;
  color:#000;
  
}

.section4 p{
  margin-top:20px;
  max-width:1400px;
  margin:10px auto 0;
}

@media screen and (max-width:1300px){
  .repair-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/door-repair.png');
    background-repeat: no-repeat;
    
  }
  .repair-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/door-repair.jpg');
    background-repeat: no-repeat;
    background-position:-200px 0 -200px 0;
  }
  .maintenance-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/maintenance.png');
  }
  .maintenance-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/maintenance3.png');
    background-position:-400px 0 -200px 0;
  }
  
  .install-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,1) 40%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/new-door2.png');
  }
  .install-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/new-door1.png');
  }
  .openers-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/openers.png');
  }
  .openers-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%), 
    url('/imageserver/Reusable/garage-doors-general/opener-hero.png');
  }
  .product-header-left{
    background-size:cover;
    padding:8% 8vw;
    background-repeat: no-repeat;
  }
  .product-header{
    background-size:cover;
    padding:8% 8vw;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width:992px){
  .hero-content{
    padding:8%;
    text-align: center;
  }
  .hero-content h2{
    padding:0 0 10px 0;
    /* border-bottom:2px solid #024382; */
    max-width:clamp(250px, 60vw, 500px);
    margin:0 auto;
  }
  .repair-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/door-repair.png');
    background-repeat: no-repeat;
    
  }
  .repair-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/door-repair.jpg');
    background-repeat: no-repeat;
    background-position:-200px 0 -200px 0;
  }
  .maintenance-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/maintenance.png');
  }
  .maintenance-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/maintenance3.png');
    background-position:-400px 0 -200px 0;
  }
  
  .install-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,.8) 30%, rgba(255,255,255,.8) 100%), 
    url('/imageserver/Reusable/garage-doors-general/new-door2.png');
  }
  .install-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/new-door1.png');
  }
  .openers-product-header{
    background:
    linear-gradient(to right, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/openers.png');
  }
  .openers-product-header-left{
    background:
    linear-gradient(to left, rgba(255,255,255,.9) 30%, rgba(255,255,255,.9) 100%), 
    url('/imageserver/Reusable/garage-doors-general/opener-hero.png');
  }
  .product-header-left{
    background-size:cover;
    padding:8% 8vw;
    background-repeat: no-repeat;
    text-align: center;
  }
  .product-header{
    background-size:cover;
    padding:10%;
    background-repeat: no-repeat;
    text-align: center;
  }
  .r-grid{
    display:block;
    text-align: center;
  }
  .product-descrip{
    max-width:100%;
    margin-top:15px;
  }
  .product-descrip-left{
    max-width:100%;
    margin-top:15px;
  }
  .divider-line{
    margin:10px auto;
  }
}
@media screen and (max-width:768px) {
body, html{
    font-size: 16px;
  }
  .section2-heading{
    text-align:center;
  }
  .product-descrip{
    max-width:100%;
  }
  .section2-heading{
    padding:10% 8% 2%;
  }
}
@media only screen and (max-width: 550px) {
  html, body{
    font-size:14px;
  }
  .system-options{
    text-align:center;
    padding:4% 5%;
    min-height:150px;
  }
}