@import 'https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,700,800,900';

body {
	margin: 0 auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
.hero {
position: relative;
width: 100%; max-width: 1200px;margin: 0 auto;
  height: 0;
  padding-bottom: 40%;
  background: linear-gradient(#0006, #0006), url("jerusalem.jpg");
/*   background-image: url(https://source.unsplash.com/2600x1200?city); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
/*   background-color: #eee; */
  justify-content: center;
  align-items: center;
}

.hero-inner {
/*   text-align: center; */
  padding: 0 1.5rem; /* Das ist vor allem bei responsive wichtig, damit es nicht an die Kante stosst! */
  font-family: 'Montserrat', sans-serif;
    position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1000px;
}
.hero-inner img {
  width: 100%;
  max-width: 200px;
}
.tw-button-blue {
    font-family: 'Montserrat', sans-serif;
	font-size: 1.9em;
	font-weight: 600;
    color: #FFF;
    text-decoration: none;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}
.tw-button-blue:hover {
    color: #4eadf6;
}
@media screen and (max-width: 600px) {
.hero-inner {
  top: 50%;
  left: 50%;
}
.tw-button-blue {
	font-size: 1em;
	}
.hero-inner img {
	width: 100%;
	max-width: 100px;
	}
}