.shingle {
  max-width:600px;
}

.myButton {
	background-color:transparent;
	border-radius:5px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#000;
        letter-spacing:1.5px;
	font-size:14px;
	padding:12px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#44C294;
        transform: scale(1.05);
        color:white;
	text-decoration:none;

}
.myButton:active {
	position:relative;
	top:1px;
}


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

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

.middle {
  color:white;
  opacity: 1;
  position: absolute;
  bottom:0%;
  left: 0%;
  width:100%;

  text-align: center;
  background-color:rgba(0,0,0,0.8);
  padding:10px 20px 30px 20px;
}

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

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

.middle2 {
  color:black;
  opacity: 1;
  position: absolute;
  bottom:0%;
  left: 0%;
  max-width:600px;
  text-align: center;
  background-color:white;
  padding:10px 20px 10px 20px;
}

.middle3 {
  display:none;
}

.text {
  font-size: 16px;
  padding: 16px 32px;
}

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