* {
   font-family: 'Poppins',  'Montserrat', sans-serif;
}
.myButton {
	background-color:transparent;
	border-radius:3px;
	border:1px solid var(--accent-color);
	display:inline-block;
	cursor:pointer;
	color:black;
	font-size:18px;
	padding:6px 24px;
	text-decoration:none;

}

.myButton:hover {
	background-color:var(--accent-color);
        color:white;
        text-decoration:none;
}
.myButton:active {
        color:white;
	position:relative;
	top:1px;
}

.myButton2 {
	background-color:transparent;
	border-radius:3px;
	border:1px solid white;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-size:18px;
	padding:6px 24px;
	text-decoration:none;

}

.myButton2:hover {
	background-color:white;
        color:black;
        text-decoration:none;
}
.myButton2:active {
        color:black;
	position:relative;
	top:1px;
}

.float-right img {
  padding: .5em;
  float: right;
}

.main {
  background-image: url("/imageserver/Reusable/remodeling2020/renovations-bg.jpg"); background-attachment: scroll; background-position: 0% 0%; background-repeat: repeat; background-size: cover; padding:100px 60px;
}

.second {
  background-image: url("/imageserver/Reusable/remodeling2020/renovations-bg2.jpg"); background-attachment: scroll; background-position: 0% 0%; background-repeat: repeat; background-size: cover; padding:100px 60px;
}

.material-box {
  box-shadow: 3px 5px 10px #edaf87;
  margin-left:-200px;
  margin-top:20px;
  background-color:white;
  padding:10px 30px;
  max-width:500px;
  clear:right;
}

.material-box2 {
  position:relative;
  z-index:1;
  box-shadow: 3px 5px 10px #edaf87;
  margin-top:20px;
  margin-right:-200px;
  background-color:white;
  padding:10px 30px;
  max-width:500px;
  clear:left;
}

.material-mobile {
  display:none;
}

.material-mobile img {
  z-index: 1;
}

.material-box-mobile {
  position:relative;
  max-width:650px;
  background-color:white;
  padding:10px 20px 20px 20px;
  box-shadow: 5px 0px 18px #888888;
  margin-top:-35px;
  z-index:999999;
}

.modal{
  margin-top:100px;
}

.overlay {
  position: relative;
  width:100%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  cursor:pointer;
  width:75%;
}

.overlay:hover .image {
  opacity: 0.3;
}

.overlay:hover .middle {
  opacity: 1;
  cursor:pointer;
}
.middle h2 a{
  font-size:22px!important;
}
.text {
  font-size: 16px;
  padding: 16px 32px;
}

@media only screen and (max-width: 992px) {
  .material {
    display:none;
  }
  .material-mobile {
    display:block;
  }
}

@media only screen and (max-width: 762px) {
  .middle p{
    font-size:14px!important;
  }
}

@media only screen and (max-width: 500px) {
  .middle {
    display:none;
  }
}

@media only screen and (max-width: 600px) {
  .material-box-mobile {
    margin-top:0;
  }
}