body,html{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size:18px;
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
.btn-wrapper{
    margin-top:20px;
}
.myButton {
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
	border:1px solid #1D506A;
	display:inline-block;
    background-color:#389ED1;
	cursor:pointer;
	color:#fff;
	font-size:19px;
	padding:10px 27px;
	text-decoration:none;
    transition:.3s;
}
.myButton:hover {
	background-color:#3595C4;
    color:#fff;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    transform:scale(.99);
    text-decoration: none;
    transition:.3s;
}
.myButton:active {
	position:relative;
	top:1px;
}

 /* blue #1D506A rgba(29,80,106,1) */
.hero{
    background-image: linear-gradient(rgba(29,80,106,.5) 0%, rgba(29,80,106,.5) 100%), url('/imageserver/Reusable/metal-roofing22/Banner.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}
.hero-container{
    padding:8% 6% 10%;
    color:#fff;
    text-align: center;
}
#hero-logo{
    max-width:300px;
    padding:2%;
    background-color: #fff;
}
.section1{

}
.sec1-container{
    max-width:1500px;
    padding:3% 5%;
    margin:0 auto;
    text-align: center;
}
.sec1-container p{
    max-width:1000px;
    margin:0 auto;
}
.sec2-container{
    max-width:1500px;
    padding:3% 5%;
    margin:0 auto;
}
.grid-5050{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
}
.grid-left{
    place-self: center;
}
.main-img{
    max-width:600px;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}
.section3{
    background-image: linear-gradient(rgba(29,80,106,.5) 0%, rgba(29,80,106,.5) 100%), url('/imageserver/Reusable/metal-roofing22/home_products.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin:2% 0;
    border:2px solid #000;
    border-left:0;
    border-right:0;
}
.sec3-container{
    padding:8%;
    text-align: center;
    color:#fff;

    margin:0 auto;
}
.sec3-container p{
    font-size:1.3rem;
}
.section4{
    margin:5% 0;
}
.main-hr{
    position: relative;
    border: 0; 
    max-width:60%;
    margin:60px auto;
  height: 2px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #1D506A, #f0f0f0);
}
.sec4-container{
    text-align:center;
    max-width:1800px;
    padding:0 5%;
}
.product-group{
    margin:50px 0;
}
.product-flex{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    flex-wrap:wrap;
}
.flex-item p{
    font-size:1.3rem;
    margin-left:20px;
    color:#000;
    position: relative;
}
.product-img{
    max-width:300px;
    margin-top:-30px;
    margin-bottom:-40px
}

.section5{
    background-image: linear-gradient(rgba(29,80,106,.5) 0%, rgba(29,80,106,.5) 100%), url('/imageserver/Reusable/metal-roofing22/burgundy-min.jpeg');
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin:2% 0;
    border:2px solid #000;
    border-left:0;
    border-right:0;
}
.sec5-container{
    padding:8%;
    text-align: center;
    color:#fff;
    max-width:1300px;
    margin:0 auto;
}
.sec5-container p{
    font-size:1.3rem;
}

@media screen and (max-width:992px) {
    .grid-5050{
        display:block;
        text-align: center;
    }
}

iframe {
width:100% !important;
height:315px !important;
max-width:560px;
}