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

}

position: relative; background-image: url("/imageserver/UserMedia/ids/servicesbg.jpg"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-top: 52px; padding-bottom: 50px; color: rgb(255, 255, 255);



.grid {	position: relative;	margin: 0 auto;	padding: 1em 0 4em;	list-style: none;	text-align: center;  display: flex;  flex-direction: row;  justify-content: space-around;  flex-wrap: wrap;}

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

.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: 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;
     margin-left:3em;
  }
    .user{
      padding:5px 5px;
      font-size:12px;
}
    
}