.TextOnImage{
  clear: both;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  height: 400px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.TextOnImage img {
  top: 0;
  left: 0;
  3
  margin-top: -50%;
  margin-left: -50%;
  
}

.TextOnImage .TextOnImageText {
  text-align: right;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-2%, -50%);
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 15px;
  color: #fff;
  width: 33%;
}
.TextOnImage .TextOnImageText h1{
  text-align: right;
  color: #fff;
}
.TextOnImage .TextOnImageText p{
  text-align: right;
  color: #fff;
}
.TextOnImage .TextOnImageText a{
  text-align: right;
  text-decoration: none;
}
.TextOnImage .TextOnImageText a:hover{
  color: #fff;
  text-decoration: none;
}
@media only screen and (max-width: 500px) {
  .TextOnImage .TextOnImageText {
    width: 97%;
  }
}