:root {
  --primary-color: #852533;
}

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

img{
  width:100%;
}

.my-container{
  max-width:1600px;
  margin:0 auto;
  padding:0 2%;
}

.site_width{
  max-width:100%;
}

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

.maincontent_wrapper {
  padding-top: 0;
}

.myButton {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
    transition:.5s;
}
.myButton:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    color:#fff;
    transition:1.5s;
    text-decoration: none;
}
.myButton:active {
	position:relative;
	top:1px;
}

#hero{
    background-image: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%),url('/imageserver/Reusable/gideon-roofing/house2-min.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 300px 50px 20px 50px;
    color: #fff;
}

.title{
  margin:50px 30px; 
  text-decoration: underline;
}

#sec2{
    background-image: linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.7) 100%),url('/imageserver/Reusable/gideon-roofing/gallerybg.jpg');
background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
color: #fff;
padding: 70px 20px;
border-top: 5px solid var(--accent-color);
border-bottom: 5px solid var(--accent-color);
background-attachment: fixed;
}

/* ================== Accordion ============= */

.accordion {
    margin: 15px;
  }

  .accordion-group{
    height:100%;
    margin:30px 0;
  }
  
  .accordion-menu {
    padding: 10px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    position:relative;
  }

  .product-name{
    font-size:2rem;
    margin-right:30px;
    color:var(--primary-color);
  }
  
  .accordion-content {
    height: 0%;
    overflow: hidden;
    font-size: 14px;
  }

  .product-description{
    padding:2%;
  }
  
  .accordion-content.expanded {
    height: 0;
    overflow: hidden;
  }
  .accordion-plus,
  .accordion-minus{
    position:absolute;
    font-size:1.5rem;
    top:25%;
    right:8px;
  }
  p {
    margin: 10px;
  }

  .panel-image-wrapper{
    margin:10px auto;
    text-align: center;

  }

  .panel-image{
    max-width:400px;
    padding:2%;
  }

  .specs-wrapper{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
  }

  .color-brochure{
    display:flex;
    flex-direction: column;
    color:var(--primary-color);
  }

  .color-brochure-image{
    max-width: 200px;
  }

  .specs-image{
    position: relative;
    max-width:300px;
    max-height:125px;
  }

  ul li{
    list-style-type: none;
    display:inline;
    position: relative;
    margin:10px 20px;
    white-space:nowrap;
  }

  ul li::before{
    content:"";
    position: absolute;
    height:18px;
    width:16px;
    top:0;
    left:-20px;
    background-image:url('/imageserver/Reusable/gideon-roofing/check.png');
    background-size:cover;
    background-repeat:no-repeat;
  }


  /* ======================= */

.intro-title{
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: 400;
    max-width:800px;
    }

    .specs-wrapper a{
      position: relative;
      margin:5px 20px;
    }

    .specs-wrapper a::before{
      content:"";
      position: absolute;
      height:20px;
    width:20px;
    top:0;
    left:-20px;
    background-image:url('/imageserver/Reusable/gideon-roofing/pdf.png');
    background-size:cover;
    background-repeat:no-repeat;
    }
    
    .my-footer{
      background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('/imageserver/Reusable/gideon-roofing/footer-img-min.jpeg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 2%;
      color: #fff;
      min-height:400px;
      display:grid;
      place-content: center;
      place-items: center;
  }
  
  .my-footer h2{
      font-size:2rem;
      font-weight:700;
  }
  .my-footer p{
      max-width:800px;
      margin:0 auto;
      text-align: center;
      font-size:1.2rem;
  }

  @media screen and (max-width:600px) {
    .product-description h2,p{
      text-align: center;
    }
    .specs-wrapper{
      justify-content: center;
    }
    .title{
      text-align: center;
      font-size:1.5rem;
    }
    .product-description h2{
      font-size:1.3rem;
    }
    #hero{
      padding: 100px 50px 20px 50px;
    }
    .intro-title{
      font-size:1.2rem;
      text-align: center;
      max-width:400px;
      margin:0 auto;
    }
  }