@charset "UTF-8";
/*!
 * e-nitio mediasign
 * Melatengürtel 125
 * 50825 Köln
 * www.e-nitio.com
 * info@e-nitio.com 
 */
.hotf-container {
  position: relative; }
  .hotf-container .hotf-box {
    padding-bottom: 10px;
    transition: margin-bottom 0.3s linear; }
    .hotf-container .hotf-box.hotf-box-inactive {
      margin-bottom: 0 !important; }
    .hotf-container .hotf-box.hotf-active {
      position: relative; }
      .hotf-container .hotf-box.hotf-active .hotf--inner::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -15px;
        border-style: solid;
        border-width: 0 10px 10px;
        border-color: transparent transparent #fff; }
    .hotf-container .hotf-box .hotf--inner {
      position: relative;
      cursor: pointer;
      padding-top: 66.4285714286%; }
    .hotf-container .hotf-box .hotf--img {
      position: absolute;
      top: 0;
      width: 100%;
      transition: opacity 0.5s ease;
      opacity: 0.75; }
      .hotf-container .hotf-box .hotf--img img {
        width: 100%;
        height: auto; }
    .hotf-container .hotf-box .hotf--inner:hover .hotf--img {
      opacity: 1; }
      .hotf-container .hotf-box.hotf-active .hotf--img {
        opacity: 1; }
  .hotf-container .hotf-dropDown {
    padding: 0 5px 0 5px;
    z-index: 5;
    position: absolute; }
    .hotf-container .hotf-dropDown.hotf-dropdown-inactive {
      display: none; }
      .hotf-container .hotf-dropDown .hotf-dropDown--inner .bp-default {
        padding-bottom: 84px; }
    .hotf-container .hotf-dropDown .btn {
      position: absolute;
      bottom: 20px; }
    .hotf-container .hotf-dropDown .hotf--img-container {
      height: 100%; }
      .hotf-container .hotf-dropDown .hotf--img-container .hotf--img {
        position: relative;
        height: 100%;
        overflow: hidden; }
        .hotf-container .hotf-dropDown .hotf--img-container .hotf--img img {
          position: absolute;
          width: auto;
          height: auto;
          max-width: none;
          min-width: 100%;
          min-height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }