Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Navigationselemente Kachelnavigation

Bei Rubriken mit vielen Unter-/ Nebenseiten ermöglicht die Kachelnavigation einen schnellen übersichtlichen Überblick und Einstieg in die weiteren Inhalte.

Verwendung

Verlinkung von Unterseiten oder Seiten derselben Navigationsebene.

Hinweis

Der Einsatz der Kachelnavigation ermöglicht auch für mobile Endgeräte eine komfortable Bedienung der Webseite durch große Klickflächen und ist als Navigationselement einer Linkliste vorzuziehen.

Vorschau

HTML

                
                  <div class="tileset_references schoeck_tileset">
  <div class="container">
    <div class="row tiles_row">
      <div class="tile col-sm-6 col-xs-12">
        <a href="#">
          <span class="image">
            <span class="call_to_action"></span>
            <img alt="Gesamtansicht des Forum Gold und Silber" title="Gesamtansicht des Forum Gold und Silber" height="304" width="541" src="/img/dummy/541x304.png">
          </span>
          <div class="content_wrapper">
            <h2 class="header">Forum Gold und Silber</h2>
            <div class="location">Schwäbisch Gmünd, DE</div>
            <div class="content">
              <ul class="products">
                <li>Schöck Isokorb®</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-sm-6 col-xs-12">
        <a href="#">
          <span class="image">
            <span class="call_to_action"></span>
            <img alt="Seitenansicht, Embassy Gardens" title="Seitenansicht, Embassy Gardens" height="304" width="541" src="/img/dummy/541x304.png">
          </span>
          <div class="content_wrapper">
            <h2 class="header">Ambassador Building, Embassy Gardens</h2>
            <div class="location">London, UK</div>
            <div class="content">
              <ul class="products">
                <li>Schöck Isokorb®</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-sm-6 col-xs-12">
        <a href="#">
          <span class="image">
            <span class="call_to_action"></span>
            <img alt="Frontansicht des Gästehauses Coblenz" title="Frontansicht des Gästehauses Coblenz" height="304" width="541" src="/img/dummy/541x304.png">
          </span>
          <div class="content_wrapper">
            <h2 class="header">Schloss Montabaur</h2>
            <div class="location">Montabaur, DE</div>
            <div class="content">
              <ul class="products">
                <li>Schöck Isokorb®</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-sm-6 col-xs-12">
        <a href="#">
          <span class="image">
            <span class="call_to_action"></span>
            <img alt="Gesamtansicht des Pandion Balance" title="Gesamtansicht des Pandion Balance" height="304" width="541" src="/img/dummy/541x304.png">
          </span>
          <div class="content_wrapper">
            <h2 class="header">Pandion Balance</h2>
            <div class="location">Köln, DE</div>
            <div class="content">
              <ul class="products">
                <li>Schöck Isokorb® R</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<br/>
<div class="schoeck_tileset tileset_multicol tileset_products">
  <div class="container">
    <div class="row tiles_row">
      <div class="tile col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="#">
          <div class="row">
            <span class="col-sm-12 col-xs-6 col-image">
              <span class="image">
                <img alt="Schöck Isokorb® Typ KXT: Wärme- und Trittschalldämmelement für frei auskragende Stahlbetonbalkone" title="Schöck Isokorb® Typ KXT" height="130" width="231" src="/img/dummy/231x130.png">
              </span>
            </span>
            <div class="col-sm-12 col-xs-6 col-headline-content">
              <h2 class="header">Isokorb® Typ KXT</h2>
              <div class="content cms_content">
                <p>Wärmedämmelement für frei auskragende Stahlbetonbalkone.</p>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="#">
          <div class="row">
            <span class="col-sm-12 col-xs-6 col-image">
              <span class="image">
                <img alt="Schöck Isokorb® Typ KFXT: Wärme- und Trittschalldämmelement für Fertigteilwerke" title="Schöck Isokorb® Typ KFXT" height="130" width="231" src="/img/dummy/231x130.png">
              </span>
            </span>
            <div class="col-sm-12 col-xs-6 col-headline-content">
              <h2 class="header">Isokorb® Typ KFXT</h2>
              <div class="content cms_content">
                <p>Wärmedämmelement für frei auskragende Balkone, speziell für die Anforderungen im Fertigteilwerk in geteilter Ausführung.</p>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="#">
          <div class="row">
            <span class="col-sm-12 col-xs-6 col-image">
              <span class="image">
                <img alt="Schöck Isokorb® Typ EXT: Wärmedämmelement für Balkone über Außenecken" title="Schöck Isokorb® Typ EXT" height="130" width="231" src="/img/dummy/231x130.png">
              </span>
            </span>
            <div class="col-sm-12 col-xs-6 col-headline-content">
              <h2 class="header">Isokorb® Typ EXT</h2>
              <div class="content cms_content">
                <p>Wärmedämmelement für Balkone über Außenecken.</p></div>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="#">
          <div class="row">
            <div class="col-sm-12 col-xs-6 col-headline-content">
              <h2 class="header">Isokorb® Typ KXT-HV</h2>
              <div class="content cms_content">
                <p>Wärmedämmelement für frei auskragende Balkone mit Höhenversatz.</p>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="tile col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="#">
          <div class="row">
            <div class="col-sm-12 col-xs-6 col-headline-content">
              <h2 class="header">Isokorb® Typ KXT-HV</h2>
              <div class="content cms_content">
                <p>Wärmedämmelement für frei auskragende Balkone mit Höhenversatz.</p>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

CSS

              .schoeck_tileset.tileset_multicol .tiles_row .tile {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile {
    margin-top: 12px;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile:first-child {
    margin-top: 0;
  }
}
.schoeck_tileset.tileset_multicol .tiles_row .tile a {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  display: block;
  min-height: 180px;
  padding: 15px 15px 107px;
  position: relative;
  transition: .2s border-color ease;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a {
    transition: none;
  }
}
.schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
  content: "\e922";
  font-family: 'schoeck' !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
  bottom: 40px;
  color: #b3b3b3;
  font-size: 33px;
  left: 50%;
  line-height: 33px;
  position: absolute;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transition: 0.2s color ease;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    transition: none;
  }
}
.schoeck_tileset.tileset_multicol .tiles_row .tile a > .row {
  display: block;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .image {
  display: block;
  margin-bottom: 30px;
  text-align: center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .image img {
  height: auto;
  max-width: 100%;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .col-headline-content {
  padding-left: 30px;
  padding-right: 30px;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 22px;
  line-height: 1.375rem;
  text-align: center;
  transition: .2s color ease;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
    transition: none;
  }
}
.schoeck_tileset.tileset_multicol .tiles_row .tile a .subheader {
  color: #0069b4;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 20px;
  line-height: 1.25rem;
  margin-top: 15px;
  text-align: center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
  color: #7c7c7b;
  display: block;
  font-size: 13px;
  font-size: .8125rem;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-top: 15px;
  text-align: center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content a {
  font-size: 14px;
  font-size: .875rem;
  line-height: 18px;
  line-height: 1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content a.caret_link:before {
  top: 0;
  margin-right: 2px;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content p {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content ul,
.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content ol {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:hover,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:focus,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:active {
  border-color: #b3b3b3;
  box-shadow: 0 2px rgba(0, 0, 0, 0.1);
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:hover:after,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:focus:after,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:active:after {
  color: #f9b200;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a {
    min-height: 0;
    padding: 15px;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
    margin-bottom: 0;
    text-align: left;
  }
}
@media screen and (max-width: 767px) and (max-width: 550px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
    display: none;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a h2.header {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .col-headline-content {
    padding-right: 38px;
    padding-left: 15px;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    content: "\e926";
    font-family: 'schoeck' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    display: block;
    font-size: 13px;
    height: 13px;
    left: auto;
    line-height: 13px;
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .image {
    margin-bottom: 0;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
    margin-bottom: 15px;
    text-align: left;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row {
    display: table;
    table-layout: fixed;
    width: calc(100% + 30px);
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row:before {
    content: none;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row .col-image,
  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row .col-headline-content {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: middle;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:hover .header,
  .schoeck_tileset.tileset_multicol .tiles_row .tile a:focus .header {
    color: #f9b200;
  }
}
@media print, screen and (min-width: 768px) {
  .schoeck_tileset.tileset_multicol .tiles_row {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
  }
}
@media print, screen and (min-width: 768px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile {
    display: flex;
    float: none;
  }
}
.schoeck_tileset.tileset_references .tiles_row .tile {
  margin-top: 30px;
}

@media print, screen and (min-width: 768px) {
  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(2) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(2n) + .tile {
    clear: both;
  }
}
@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_references .tiles_row .tile {
    margin-top: 15px;
  }

  .schoeck_tileset.tileset_references .tiles_row .tile:first-child {
    margin-top: 0;
  }
}
.schoeck_tileset.tileset_references .tiles_row .tile a {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  display: block;
  overflow: hidden;
  padding: 6px 6px 45px 6px;
  position: relative;
  transition: .2s border-color ease;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_references .tiles_row .tile a {
    transition: none;
  }
}
.schoeck_tileset.tileset_references .tiles_row .tile a .image {
  display: block;
  text-align: center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 100px 0 #000;
  display: block;
  height: 50px;
  left: 50%;
  margin-top: -22px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transition: 0.4s opacity ease, 0.4s margin-top ease;
  width: 50px;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action:before {
  content: "\e922";
  font-family: 'schoeck' !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action:before {
  color: #fff;
  font-size: 50px;
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image img {
  max-width: 100%;
  height: auto;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper {
  background-color: #fff;
  bottom: 0;
  left: 0;
  max-height: 100%;
  padding: 12px;
  position: absolute;
  transform: translateY(100%) translateY(-45px);
  transition: 0.4s transform ease, 0.4s padding ease;
  width: 100%;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .header {
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
  padding-bottom: 15px;
  text-align: center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .subheader {
  color: #0069b4;
  font-size: 15px;
  font-size: .9375rem;
  line-height: 21px;
  line-height: 1.3125rem;
  padding-bottom: 15px;
  text-align: center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location {
  color: #7c7c7b;
  font-family: 'CorpidCd_TT5', Arial;
  font-size: 13px;
  font-size: .8125rem;
  font-style: normal;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  text-align: center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location a {
  font-size: 14px;
  font-size: .875rem;
  line-height: 18px;
  line-height: 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location a.caret_link:before,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ul.link_list li a:before {
  margin-right: 2px;
  top: 0;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content p {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ul,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ol {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content {
  color: #7c7c7b;
  display: block;
  font-family: 'CorpidCd_TT5', Arial;
  font-size: 13px;
  font-size: .8125rem;
  font-style: normal;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  padding-bottom: 5px;
  text-align: center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content a {
  font-size: 14px;
  font-size: .875rem;
  line-height: 18px;
  line-height: 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content a.caret_link:before,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ul.link_list li a:before {
  margin-right: 2px;
  top: 0;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content p {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ul,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ol {
  margin: 9px 0;
  margin: .5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li {
  display: inline-block;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li:after {
  content: ',\00a0';
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li:last-child:after {
  content: none;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:not(:hover):not(:focus):not(:active) .image .call_to_action {
  margin-top: 0 !important;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:hover,
.schoeck_tileset.tileset_references .tiles_row .tile a:focus,
.schoeck_tileset.tileset_references .tiles_row .tile a:active {
  border-color: #b3b3b3;
}

@media print, screen and (min-width: 768px) {
  .schoeck_tileset.tileset_references .tiles_row .tile a:hover .content_wrapper,
  .schoeck_tileset.tileset_references .tiles_row .tile a:focus .content_wrapper,
  .schoeck_tileset.tileset_references .tiles_row .tile a:active .content_wrapper {
    transform: translateY(0);
  }
}
.schoeck_tileset.tileset_references .tiles_row .tile a:hover .image .call_to_action,
.schoeck_tileset.tileset_references .tiles_row .tile a:focus .image .call_to_action,
.schoeck_tileset.tileset_references .tiles_row .tile a:active .image .call_to_action {
  opacity: 1;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.schoeck_tileset.tileset_references .button_wrapper {
  margin-top: 50px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_references .button_wrapper {
    margin-top: 30px;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(1), .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2n) + .tile {
    clear: both;
  }
}
@media print, screen and (min-width: 992px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(3) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(3n) + .tile {
    clear: both;
  }
}
.schoeck_tileset.tileset_subpages .tiles_row .tile a {
  min-height: 180px;
  padding: 48px 15px 107px;
}

@media screen and (max-width: 767px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile a {
    min-height: 0;
    padding: 15px;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2n) + .tile {
    clear: both;
  }
}
@media screen and (max-width: 1199px) and (min-width: 992px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3n) + .tile {
    clear: both;
  }
}
@media print, screen and (min-width: 1200px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(4) {
    margin-top: 0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(4n) + .tile {
    clear: both;
  }
}

SCSS

              .schoeck_tileset.tileset_multicol .tiles_row .tile {
  margin-top:30px
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile {
    margin-top:12px
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile:first-child {
    margin-top:0
  }
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a {
  background-color:#fff;
  border:solid 1px #e6e6e6;
  border-radius:6px;
  box-shadow:0 2px rgba(0, 0, 0, 0.05);
  display:block;
  min-height:180px;
  padding:15px 15px 107px;
  position:relative;
  transition:.2s border-color ease;
  width:100%;
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a {
    transition:none
  }
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
  content:"\e922";
  font-family:'schoeck' !important;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:1;
  text-transform:none;
  speak:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
  bottom:40px;
  color:#b3b3b3;
  font-size:33px;
  left:50%;
  line-height:33px;
  position:absolute;
  transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  transition:.2s color ease
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    transition:none;
  }
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a > .row {
  display:block;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .image {
  display:block;
  margin-bottom:30px;
  text-align:center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .image img {
  height:auto;
  max-width:100%;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .col-headline-content {
  padding-left:30px;
  padding-right:30px;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
  font-size:20px;
  font-size:1.25rem;
  line-height:22px;
  line-height:1.375rem;
  text-align:center;
  transition:.2s color ease;
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
    transition:none
  }
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .subheader {
  color:#0069b4;
  font-size:18px;
  font-size:1.125rem;
  line-height:20px;
  line-height:1.25rem;
  margin-top:15px;
  text-align:center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
  color:#7c7c7b;
  display:block;
  font-size:13px;
  font-size:.8125rem;
  line-height:17px;
  line-height:1.0625rem;
  margin-top:15px;
  text-align:center;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content a {
  font-size:14px;
  font-size:.875rem;
  line-height:18px;
  line-height:1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content a.caret_link:before {
  top:0;
  margin-right:2px;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content p {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content ul,
.schoeck_tileset.tileset_multicol .tiles_row .tile a .content .cms_content ol {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:hover,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:focus,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:active {
  border-color:#b3b3b3;
  box-shadow:0 2px rgba(0, 0, 0, 0.1);
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:hover:after,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:focus:after,
.schoeck_tileset.tileset_multicol .tiles_row .tile a:active:after {
  color:#f9b200;
}

.schoeck_tileset.tileset_multicol .tiles_row .tile a:active {
  box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a {
    min-height:0;
    padding:15px;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
    margin-bottom:0;
    text-align:left;
  }
}

@media screen and (max-width:767px) and (max-width:550px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .content {
    display:none;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a h2.header {
    margin-bottom:0;
  }
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile a .col-headline-content {
    padding-right:38px;
    padding-left:15px
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    content:"\e926";
    font-family:'schoeck' !important;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1;
    text-transform:none;
    speak:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:after {
    display:block;
    font-size:13px;
    height:13px;
    left:auto;
    line-height:13px;
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .image {
    margin-bottom:0;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a .header {
    margin-bottom:15px;
    text-align:left;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row {
    display:table;
    table-layout:fixed;
    width:calc(100% + 30px);
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row:before {
    content:none;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row .col-image,
  .schoeck_tileset.tileset_multicol .tiles_row .tile a > .row .col-headline-content {
    display:table-cell;
    float:none;
    height:100%;
    vertical-align:middle;
  }

  .schoeck_tileset.tileset_multicol .tiles_row .tile a:hover .header,
  .schoeck_tileset.tileset_multicol .tiles_row .tile a:focus .header {
    color:#f9b200;
  }
}

@media print, screen and (min-width:768px) {
  .schoeck_tileset.tileset_multicol .tiles_row {
    align-content:flex-start;
    display:flex;
    flex-wrap:wrap;
  }
}

@media print, screen and (min-width:768px) {
  .schoeck_tileset.tileset_multicol .tiles_row .tile {
    display:flex;
    float:none;
  }
}

.schoeck_tileset.tileset_references .tiles_row .tile {
  margin-top:30px;
}

@media print, screen and (min-width:768px) {
  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(2) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_references .tiles_row .tile:nth-child(2n) + .tile {
    clear:both;
  }
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_references .tiles_row .tile {
    margin-top:15px;
  }

  .schoeck_tileset.tileset_references .tiles_row .tile:first-child {
    margin-top:0;
  }
}

.schoeck_tileset.tileset_references .tiles_row .tile a {
  background-color:#fff;
  border:solid 1px #e6e6e6;
  border-radius:6px;
  box-shadow:0 2px rgba(0, 0, 0, 0.05);
  display:block;
  overflow:hidden;
  padding:6px 6px 45px 6px;
  position:relative;
  transition:.2s border-color ease;
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_references .tiles_row .tile a {
    transition:none
  }
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image {
  display:block;
  text-align:center
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action {
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:50%;
  box-shadow:0 0 100px 0 #000;
  display:block;
  height:50px;
  left:50%;
  margin-top:-22px;
  opacity:0;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transition:0.4s opacity ease, 0.4s margin-top ease;
  width:50px;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action:before {
  content:"\e922";
  font-family:'schoeck' !important;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:1;
  text-transform:none;
  speak:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image .call_to_action:before {
  color:#fff;
  font-size:50px;
  line-height:50px;
  text-shadow:0px 0px 5px rgba(0, 0, 0, 0.5)
}

.schoeck_tileset.tileset_references .tiles_row .tile a .image img {
  max-width:100%;
  height:auto
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper {
  background-color:#fff;
  bottom:0;
  left:0;
  max-height:100%;
  padding:12px;
  position:absolute;
  transform:translateY(100%) translateY(-45px);
  transition:0.4s transform ease, 0.4s padding ease;
  width:100%
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .header {
  font-size:16px;
  font-size:1rem;
  line-height:22px;
  line-height:1.375rem;
  padding-bottom:15px;
  text-align:center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .subheader {
  color:#0069b4;
  font-size:15px;
  font-size:.9375rem;
  line-height:21px;
  line-height:1.3125rem;
  padding-bottom:15px;
  text-align:center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location {
  color:#7c7c7b;
  font-family:'CorpidCd_TT5', Arial;
  font-size:13px;
  font-size:.8125rem;
  font-style:normal;
  font-weight:normal;
  line-height:17px;
  line-height:1.0625rem;
  text-align:center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location a {
  font-size:14px;
  font-size:.875rem;
  line-height:18px;
  line-height:1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location a.caret_link:before,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ul.link_list li a:before {
  margin-right:2px;
  top:0;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content p {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ul,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .location .cms_content ol {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content {
  color:#7c7c7b;
  display:block;
  font-family:'CorpidCd_TT5', Arial;
  font-size:13px;
  font-size:.8125rem;
  font-style:normal;
  font-weight:normal;
  line-height:17px;
  line-height:1.0625rem;
  padding-bottom:5px;
  text-align:center;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content a {
  font-size:14px;
  font-size:.875rem;
  line-height:18px;
  line-height:1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content a.caret_link:before,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ul.link_list li a:before {
  margin-right:2px;
  top:0;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content p {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ul,
.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content .cms_content ol {
  margin:9px 0;
  margin:.5625rem 0 1.125rem;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li {
  display:inline-block;
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li:after {
  content:',\00a0';
}

.schoeck_tileset.tileset_references .tiles_row .tile a .content_wrapper .content ul.products li:last-child:after {
  content:none;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:not(:hover):not(:focus):not(:active) .image .call_to_action {
  margin-top:0 !important;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:hover,
.schoeck_tileset.tileset_references .tiles_row .tile a:focus,
.schoeck_tileset.tileset_references .tiles_row .tile a:active {
  border-color:#b3b3b3;
}

@media print, screen and (min-width:768px) {
  .schoeck_tileset.tileset_references .tiles_row .tile a:hover .content_wrapper,
  .schoeck_tileset.tileset_references .tiles_row .tile a:focus .content_wrapper,
  .schoeck_tileset.tileset_references .tiles_row .tile a:active .content_wrapper {
    transform:translateY(0);
  }
}

.schoeck_tileset.tileset_references .tiles_row .tile a:hover .image .call_to_action,
.schoeck_tileset.tileset_references .tiles_row .tile a:focus .image .call_to_action,
.schoeck_tileset.tileset_references .tiles_row .tile a:active .image .call_to_action {
  opacity:1;
}

.schoeck_tileset.tileset_references .tiles_row .tile a:active {
  box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.schoeck_tileset.tileset_references .button_wrapper {
  margin-top:50px;
  text-align:center
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_references .button_wrapper {
    margin-top:30px;
  }
}

@media screen and (max-width:991px) and (min-width:768px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(1), .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2n) + .tile {
    clear:both;
  }
}

@media print, screen and (min-width:992px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(3) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_subpages .tiles_row .tile:nth-child(3n) + .tile {
    clear:both;
  }
}

.schoeck_tileset.tileset_subpages .tiles_row .tile a {
  min-height:180px;
  padding:48px 15px 107px
}

@media screen and (max-width:767px) {
  .schoeck_tileset.tileset_subpages .tiles_row .tile a {
    min-height:0;
    padding:15px;
  }
}

@media screen and (max-width:991px) and (min-width:768px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2n) + .tile {
    clear:both;
  }
}

@media screen and (max-width:1199px) and (min-width:992px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3n) + .tile {
    clear:both;
  }
}

@media print, screen and (min-width:1200px) {
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(1),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(2),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(3),
  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(4) {
    margin-top:0;
  }

  .schoeck_tileset.tileset_products .tiles_row .tile:nth-child(4n) + .tile {
    clear:both;
  }
}