.col-md-4 .hm-banner, .col-md-8 .hm-banner {
  height: 420px; }

.hm-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 44.7rem;
  background-color: #ccc;
  background-size: cover;
  background-repeat: no-repeat; }
  .hm-banner .container {
    position: relative;
    height: 100%; }
  .hm-banner__headline {
    font-size: 3.2rem; }
    @media (min-width: 480px) {
      .hm-banner__headline {
        font-weight: 300;
        font-size: 4.8rem; } }
  .hm-banner__cta {
    border: none;
    -webkit-transition: background 275ms ease-in-out;
            transition: background 275ms ease-in-out; }
.hm-banner__headline, .hm-banner__subheadline, .hm-banner__cta {
  display: table;
  padding: 1.5rem 2rem; }
.hm-banner__text {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 400;
  color: white;
  font-size: 1.8rem; }
@media (min-width: 480px) {
  .hm-banner__text {
    font-size: 2.4rem; } }
.hm-banner__text--right {
  right: 0; }
.hm-banner__text--right .hm-banner__headline, .hm-banner__text--right .hm-banner__subheadline, .hm-banner__text--right .hm-banner__cta {
  margin-left: auto; }



.hm-banner--schultaschen {
    background-image: url('https://media.hitmeister.de/images/banner/original/f903fe313c1dd0d1749d101628892bdc.jpg');
    background-position: 75% center; }
    .hm-banner--schultaschen .hm-banner__headline {
      background: #5c9fd6; }
    .hm-banner--schultaschen .hm-banner__subheadline {
      background: #2e7ab8; }
    .hm-banner--schultaschen .hm-banner__cta {
      background: #b61629; }
      .hm-banner--schultaschen .hm-banner__cta:hover, .hm-banner--schultaschen .hm-banner__cta:focus {
        background: #88111f; }