.row {
    margin-left: 0;
    margin-right: 0;
}

#gallery_section {
    padding-top: 30px;
    padding-bottom: 125px;
    text-align: center;
    overflow: hidden;
}
#gallery_section h2 {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 0 auto 50px;
}
#gallery_section .h2-inner {
    padding: 0 10px;
}
#gallery_section h2::before,
#gallery_section h2::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 3px;
    background-color: var(--red);
}
#gallery_section h2::before {
    right: 100%;
}
#gallery_section h2::after {
    left: 100%;
}
.gallery {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}
.gallery-item {
    background: #eee;
    min-height: 300px;
    background-size: cover;
    background-position: center;
}
.gallery-item-sm {
    grid-row: auto / span 2;
}
.gallery-item-lg {
    grid-row: auto / span 3;
}
#gallery_item_1 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_100.webp);
}
#gallery_item_2 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_110.webp);
}
#gallery_item_3 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_120.webp);
}
#gallery_item_4 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_130.webp);
}
#gallery_item_5 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_140.webp);
}
#gallery_item_6 {
    background-image: url(/imageserver/UserMedia/powcoroofing/mitigation_gallery_150.webp);
}

@media (max-width: 981px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    #gallery_item_5 {
        grid-row: auto / span 4;
    }
}

@media (max-width: 550px) {
    .gallery {
        display: block;
    }
    .gallery-item {
        margin: 10px auto;
    }
}





.hero-global.homedamage-hero {
    background-image: linear-gradient(rgba(25, 25, 25, .88) 0 0), url(/imageserver/UserMedia/powcoroofing/IMG_5857.jpeg);
}

.col-md-11 {
    width: 100%;
    box-sizing: border-box;
}

.homedamage-intro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
    row-gap: 30px;
    flex-wrap: wrap;
    padding: 50px 0;
}

.homedamage-intro-image-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    max-width: 80vw;
    max-height: calc(0.7 * 80vw);
}

.homedamage-intro-image-wrap::before {
    position: absolute;
    height: 20%;
    width: 20%;
    border-left: double 8px var(--red);
    border-top: double 8px var(--red);
    top: -12px;
    left: -12px;
    content: '';
}

.homedamage-intro-image-wrap::after {
    position: absolute;
    height: 20%;
    width: 20%;
    border-right: double 8px var(--red);
    border-bottom: double 8px var(--red);
    bottom: -12px;
    right: -12px;
    content: '';
}

.homedamage-intro-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.homedamage-intro-content {
    width: 700px;
    max-width: 90vw;
}

#mitigation_section h2{
    margin: 0 0 10px 0;
    font-size: 30px;
    color: var(--red);
    text-align: left;
}

#mitigation_section h3 {
    margin: 0 0 10px 0;
    position: relative;
    color: black;
    font-size: 24px;
    text-align: left;
}

.homedamage-intro-content p {
    font-size: 18px;
    margin: 10px 0;
    text-align: left;
}

@media (max-width: 1440px) {
    .homedamage-intro {
        flex-direction: column;
    }

    .homedamage-intro-content {
        width: 80vw;
        max-width: 80vw;
    }

    .homedamage-intro-image-wrap {
        width: 70vw;
    }
}



.maincontent {
    padding: 0 0 24px;
    border: none;
}

.grid {	
    position: relative;	
    margin: 0 auto;	
    padding: 1em 0 4em;	
    list-style: none;	
    text-align: center;  
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: center;
}

@media (max-width: 980px) {
    .grid {
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 625px) {
    .grid {
        grid-template-columns: repeat(1, auto);
    }
}

.grid figure {	
    position: relative;	
    float:left;	
    overflow: hidden;	
    margin: 10px;   
    min-width:250px;	
    max-width: 300px;	
    max-height: 300px;	
    width: 48%;	
    background: #000;	
    text-align: center;	
    cursor: pointer;
    border-radius: 10px;   
    justify-self: center; 
}

.grid figure img {	position: relative;	display: block;	min-height: 100%;	max-width: 100%;	opacity: 0.4;}

.grid figure figcaption {	padding: 2em;	color: #fff;	text-transform: uppercase;	font-size: 1.25em;	-webkit-backface-visibility: hidden;	backface-visibility: hidden;}

.grid figure figcaption::before,.grid figure figcaption::after {	pointer-events: none;}

.grid figure figcaption,.grid figure figcaption > a {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}

.grid figure figcaption > a {	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}

.grid figure h2 {	word-spacing: -0.15em;	font-weight: 300;}

.grid figure h2 span {	font-weight: 800;}

.grid figure h2,.grid figure p {	margin: 0;}

.grid figure p {	letter-spacing: 1px;	font-size: 68.5%;}

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(81,145,194,0) 0%, rgba(81,145,194,0.8) 75%);
	background: linear-gradient(to bottom, rgba(81,145,194,0) 0%, rgba(81,145,194,0.8) 75%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {	position: absolute;	top: 50%;	left: 0;	width: 100%;	color: #FFf;	-webkit-transition: -webkit-transform 0.35s, color 0.35s;	transition: transform 0.35s, color 0.35s;	-webkit-transform: translate3d(0,-50%,0);	transform: translate3d(0,-50%,0);}

figure.effect-sadie figcaption::before,figure.effect-sadie p {	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;}

figure.effect-sadie p {	position: absolute;	bottom: 0;	left: 0;	padding: 2em;	width: 100%;	opacity: 0;	-webkit-transform: translate3d(0,10px,0);	transform: translate3d(0,10px,0);}

figure.effect-sadie:hover h2 {	color: #fff;	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}

figure.effect-sadie:hover figcaption::before ,figure.effect-sadie:hover p {	opacity: 1;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);}




.user {
     background-image:url('/imageserver/Reusable/homeDamage2020/cloud-bg2.png');
     background-size:cover;
     width:100%;
     padding:40px 100px;
     color:white;
     font-family:'Poppins',  'Montserrat', sans-serif;

}

.services{
    background-image:url('');
    background-size:cover;
}

.user img {
  padding: .5em;
  float: right;
}
@media screen and (max-width: 1084px) {
	.grid figure {margin: 10px auto;    }
  }
@media screen and (max-width: 1024px) {
	.grid figure {float:unset;	margin: 10px auto;    }
  }

@media screen and (max-width: 625px) {
  figure h2 {
    font-size:18px;
  }   
}

@media screen and (max-width: 625px) {
  .user h3{
   font-size:1.2em;
   line-height:1.5;
   padding:5px 5px;
   
  }   
   .grid figure{
     margin:10px auto;
  }
}

@media screen and (max-width: 450px) {
   .grid figure{
     min-width:150px;
    
  }
    .user{
      padding:5px 5px;
      font-size:12px;
}
    
}