/*! whldm, Compiled at 2026-10-01 15:36:10 */
/**
 * Projectname
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  201X infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     XXX
 * @since      dd.mm.yyyy
 * @version    $Id$
 **/
/*  =========================================================
basic config
generic grid system
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* default font settings */
/* hide elements */
.hide {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* center elements */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.centered--horizontal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.centered--vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* transitions */
.transition {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*  =========================================================
generic grid system
========================================================= */
/* different part length grid versions */
.h-grid:not([class*='h-grid-lg-']) {
  /* max 1572 */
}
@media (min-width: 1024px) {
  .h-grid:not([class*='h-grid-lg-']).h-grid-noMargin {
    width: 100%;
  }
  .h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 93.57142857%;
  }
  .h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) [class*='h-el-lg'] {
    margin-right: 5px;
  }
  .h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']),
  .h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0 {
    margin-left: 5px;
  }
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-1 {
  width: -webkit-calc(8.333333333333334% - 0px - 0px);
  width: calc(8.333333333333334% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-1 {
  margin-left: -webkit-calc(8.333333333333334% + 0px);
  margin-left: calc(8.333333333333334% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-2 {
  width: -webkit-calc(16.666666666666668% - 0px - 0px);
  width: calc(16.666666666666668% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-2 {
  margin-left: -webkit-calc(16.666666666666668% + 0px);
  margin-left: calc(16.666666666666668% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-3 {
  width: -webkit-calc(25% - 0px - 0px);
  width: calc(25% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-3 {
  margin-left: -webkit-calc(25% + 0px);
  margin-left: calc(25% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-4 {
  width: -webkit-calc(33.333333333333336% - 0px - 0px);
  width: calc(33.333333333333336% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-4 {
  margin-left: -webkit-calc(33.333333333333336% + 0px);
  margin-left: calc(33.333333333333336% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-5 {
  width: -webkit-calc(41.66666666666667% - 0px - 0px);
  width: calc(41.66666666666667% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-5 {
  margin-left: -webkit-calc(41.66666666666667% + 0px);
  margin-left: calc(41.66666666666667% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-6 {
  width: -webkit-calc(50% - 0px - 0px);
  width: calc(50% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-6 {
  margin-left: -webkit-calc(50% + 0px);
  margin-left: calc(50% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-7 {
  width: -webkit-calc(58.333333333333336% - 0px - 0px);
  width: calc(58.333333333333336% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-7 {
  margin-left: -webkit-calc(58.333333333333336% + 0px);
  margin-left: calc(58.333333333333336% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-8 {
  width: -webkit-calc(66.66666666666667% - 0px - 0px);
  width: calc(66.66666666666667% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-8 {
  margin-left: -webkit-calc(66.66666666666667% + 0px);
  margin-left: calc(66.66666666666667% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-9 {
  width: -webkit-calc(75% - 0px - 0px);
  width: calc(75% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-9 {
  margin-left: -webkit-calc(75% + 0px);
  margin-left: calc(75% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-10 {
  width: -webkit-calc(83.33333333333334% - 0px - 0px);
  width: calc(83.33333333333334% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-10 {
  margin-left: -webkit-calc(83.33333333333334% + 0px);
  margin-left: calc(83.33333333333334% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-11 {
  width: -webkit-calc(91.66666666666669% - 0px - 0px);
  width: calc(91.66666666666669% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-11 {
  margin-left: -webkit-calc(91.66666666666669% + 0px);
  margin-left: calc(91.66666666666669% + 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-el-lg-12 {
  width: -webkit-calc(100% - 0px - 0px);
  width: calc(100% - 0px - 0px);
}
.h-grid:not([class*='h-grid-lg-']).h-grid-noMargin .h-off-lg-12 {
  margin-left: -webkit-calc(100% + 0px);
  margin-left: calc(100% + 0px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-1 {
  width: -webkit-calc(8.333333333333334% - 5px - 5px);
  width: calc(8.333333333333334% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-1 {
  margin-left: -webkit-calc(8.333333333333334% + 5px);
  margin-left: calc(8.333333333333334% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-2 {
  width: -webkit-calc(16.666666666666668% - 5px - 5px);
  width: calc(16.666666666666668% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-2 {
  margin-left: -webkit-calc(16.666666666666668% + 5px);
  margin-left: calc(16.666666666666668% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-3 {
  width: -webkit-calc(25% - 5px - 5px);
  width: calc(25% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-3 {
  margin-left: -webkit-calc(25% + 5px);
  margin-left: calc(25% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-4 {
  width: -webkit-calc(33.333333333333336% - 5px - 5px);
  width: calc(33.333333333333336% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-4 {
  margin-left: -webkit-calc(33.333333333333336% + 5px);
  margin-left: calc(33.333333333333336% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-5 {
  width: -webkit-calc(41.66666666666667% - 5px - 5px);
  width: calc(41.66666666666667% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-5 {
  margin-left: -webkit-calc(41.66666666666667% + 5px);
  margin-left: calc(41.66666666666667% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-6 {
  width: -webkit-calc(50% - 5px - 5px);
  width: calc(50% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-6 {
  margin-left: -webkit-calc(50% + 5px);
  margin-left: calc(50% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-7 {
  width: -webkit-calc(58.333333333333336% - 5px - 5px);
  width: calc(58.333333333333336% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-7 {
  margin-left: -webkit-calc(58.333333333333336% + 5px);
  margin-left: calc(58.333333333333336% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-8 {
  width: -webkit-calc(66.66666666666667% - 5px - 5px);
  width: calc(66.66666666666667% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-8 {
  margin-left: -webkit-calc(66.66666666666667% + 5px);
  margin-left: calc(66.66666666666667% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-9 {
  width: -webkit-calc(75% - 5px - 5px);
  width: calc(75% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-9 {
  margin-left: -webkit-calc(75% + 5px);
  margin-left: calc(75% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-10 {
  width: -webkit-calc(83.33333333333334% - 5px - 5px);
  width: calc(83.33333333333334% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-10 {
  margin-left: -webkit-calc(83.33333333333334% + 5px);
  margin-left: calc(83.33333333333334% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-11 {
  width: -webkit-calc(91.66666666666669% - 5px - 5px);
  width: calc(91.66666666666669% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-11 {
  margin-left: -webkit-calc(91.66666666666669% + 5px);
  margin-left: calc(91.66666666666669% + 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-el-lg-12 {
  width: -webkit-calc(100% - 5px - 5px);
  width: calc(100% - 5px - 5px);
}
.h-grid:not([class*='h-grid-lg-']):not(.h-grid-noMargin) .h-off-lg-12 {
  margin-left: -webkit-calc(100% + 5px);
  margin-left: calc(100% + 5px);
}
@media (min-width: 1024px) {
  .h-grid-lg-12 {
    /* max 1572 */
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-el-lg-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid-lg-12.h-grid-noMargin .h-off-lg-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-el-lg-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid-lg-12:not(.h-grid-noMargin) .h-off-lg-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .h-grid-lg-12.h-grid-noMargin {
    width: 100%;
  }
  .h-grid-lg-12:not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 93.57142857%;
  }
  .h-grid-lg-12:not(.h-grid-noMargin) [class*='h-el-lg'] {
    margin-right: 5px;
  }
  .h-grid-lg-12:not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']),
  .h-grid-lg-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0 {
    margin-left: 5px;
  }
}

/**
 * Projectname
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  201X infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     XXX
 * @since      dd.mm.yyyy
 * @version    $Id$
 **/
/*  =========================================================
basic config
generic grid system
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* default font settings */
/* hide elements */
.hide {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* center elements */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.centered--horizontal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.centered--vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* transitions */
.transition {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*  =========================================================
generic grid system
========================================================= */
@media (max-width: 1023px) {
  /* different part length grid versions */
  .h-grid:not([class*='h-grid-md-']) {
    /* max 960 */
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-el-md-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin .h-off-md-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-el-md-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) .h-off-md-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}
@media (max-width: 1023px) and (min-width: 481px) {
  .h-grid:not([class*='h-grid-md-']).h-grid-noMargin {
    width: 100%;
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 94.11764706%;
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-md'] {
    margin-right: 5px;
  }
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid:not([class*='h-grid-md-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0 {
    margin-left: 5px;
  }
}
@media (max-width: 1023px) and (min-width: 481px) {
  .h-grid-md-12 {
    /* max 960 */
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-el-md-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid-md-12.h-grid-noMargin .h-off-md-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-el-md-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid-md-12:not(.h-grid-noMargin) .h-off-md-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}
@media (max-width: 1023px) and (min-width: 481px) and (min-width: 481px) {
  .h-grid-md-12.h-grid-noMargin {
    width: 100%;
  }
  .h-grid-md-12:not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 94.11764706%;
  }
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-md'] {
    margin-right: 5px;
  }
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid-md-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0 {
    margin-left: 5px;
  }
}

/**
 * Projectname
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  201X infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     XXX
 * @since      dd.mm.yyyy
 * @version    $Id$
 **/
/*  =========================================================
basic config
generic grid system
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* default font settings */
/* hide elements */
.hide {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* center elements */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.centered--horizontal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.centered--vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* transitions */
.transition {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*  =========================================================
generic grid system
========================================================= */
@media (max-width: 480px) {
  /* different part length grid versions */
  .h-grid:not([class*='h-grid-sm-']) {
    /* max 960 */
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-el-sm-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin .h-off-sm-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-el-sm-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) .h-off-sm-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}
@media (max-width: 480px) and (min-width: 321px) {
  .h-grid:not([class*='h-grid-sm-']).h-grid-noMargin {
    width: 100%;
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 94.11764706%;
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-md'],
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-sm'] {
    margin-right: 5px;
  }
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-lg-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-md-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-sm-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-sm-0,
  .h-grid:not([class*='h-grid-sm-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-sm-0 {
    margin-left: 5px;
  }
}
@media (max-width: 480px) and (min-width: 321px) {
  .h-grid-sm-12 {
    /* max 960 */
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-el-sm-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid-sm-12.h-grid-noMargin .h-off-sm-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-el-sm-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid-sm-12:not(.h-grid-noMargin) .h-off-sm-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}
@media (max-width: 480px) and (min-width: 321px) and (min-width: 321px) {
  .h-grid-sm-12.h-grid-noMargin {
    width: 100%;
  }
  .h-grid-sm-12:not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 94.11764706%;
  }
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-md'],
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-sm'] {
    margin-right: 5px;
  }
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-lg-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-md-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-sm-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-sm-0,
  .h-grid-sm-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-sm-0 {
    margin-left: 5px;
  }
}

/**
 * Projectname
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  201X infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     XXX
 * @since      dd.mm.yyyy
 * @version    $Id$
 **/
/*  =========================================================
basic config
generic grid system
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* default font settings */
/* hide elements */
.hide {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* center elements */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.centered--horizontal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.centered--vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* transitions */
.transition {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*  =========================================================
generic grid system
========================================================= */
@media (max-width: 320px) {
  /* different part length grid versions */
  .h-grid-ty-12,
  .h-grid:not([class*='h-grid-ty-']) {
    /* max 336 */
  }
  .h-grid-ty-12.h-grid-noMargin,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin {
    width: 100%;
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-1,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-1 {
    width: -webkit-calc(8.333333333333334% - 0px - 0px);
    width: calc(8.333333333333334% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-1,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-1 {
    margin-left: -webkit-calc(8.333333333333334% + 0px);
    margin-left: calc(8.333333333333334% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-2,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-2 {
    width: -webkit-calc(16.666666666666668% - 0px - 0px);
    width: calc(16.666666666666668% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-2,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-2 {
    margin-left: -webkit-calc(16.666666666666668% + 0px);
    margin-left: calc(16.666666666666668% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-3,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-3 {
    width: -webkit-calc(25% - 0px - 0px);
    width: calc(25% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-3,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-3 {
    margin-left: -webkit-calc(25% + 0px);
    margin-left: calc(25% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-4,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-4 {
    width: -webkit-calc(33.333333333333336% - 0px - 0px);
    width: calc(33.333333333333336% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-4,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-4 {
    margin-left: -webkit-calc(33.333333333333336% + 0px);
    margin-left: calc(33.333333333333336% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-5,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-5 {
    width: -webkit-calc(41.66666666666667% - 0px - 0px);
    width: calc(41.66666666666667% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-5,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-5 {
    margin-left: -webkit-calc(41.66666666666667% + 0px);
    margin-left: calc(41.66666666666667% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-6,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-6 {
    width: -webkit-calc(50% - 0px - 0px);
    width: calc(50% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-6,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-6 {
    margin-left: -webkit-calc(50% + 0px);
    margin-left: calc(50% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-7,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-7 {
    width: -webkit-calc(58.333333333333336% - 0px - 0px);
    width: calc(58.333333333333336% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-7,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-7 {
    margin-left: -webkit-calc(58.333333333333336% + 0px);
    margin-left: calc(58.333333333333336% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-8,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-8 {
    width: -webkit-calc(66.66666666666667% - 0px - 0px);
    width: calc(66.66666666666667% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-8,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-8 {
    margin-left: -webkit-calc(66.66666666666667% + 0px);
    margin-left: calc(66.66666666666667% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-9,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-9 {
    width: -webkit-calc(75% - 0px - 0px);
    width: calc(75% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-9,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-9 {
    margin-left: -webkit-calc(75% + 0px);
    margin-left: calc(75% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-10,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-10 {
    width: -webkit-calc(83.33333333333334% - 0px - 0px);
    width: calc(83.33333333333334% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-10,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-10 {
    margin-left: -webkit-calc(83.33333333333334% + 0px);
    margin-left: calc(83.33333333333334% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-11,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-11 {
    width: -webkit-calc(91.66666666666669% - 0px - 0px);
    width: calc(91.66666666666669% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-11,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-11 {
    margin-left: -webkit-calc(91.66666666666669% + 0px);
    margin-left: calc(91.66666666666669% + 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-el-ty-12,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-el-ty-12 {
    width: -webkit-calc(100% - 0px - 0px);
    width: calc(100% - 0px - 0px);
  }
  .h-grid-ty-12.h-grid-noMargin .h-off-ty-12,
  .h-grid:not([class*='h-grid-ty-']).h-grid-noMargin .h-off-ty-12 {
    margin-left: -webkit-calc(100% + 0px);
    margin-left: calc(100% + 0px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin),
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) {
    max-width: 1680px;
    width: 90.32258065%;
  }
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg'],
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md'],
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md'],
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm'],
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm'],
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty'],
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty'] {
    margin-right: 5px;
  }
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']):not([class*='h-off-ty']),
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-lg-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-lg-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-lg-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-lg-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty'].h-off-lg-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty'].h-off-lg-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-md-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-md-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-md-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-md-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty'].h-off-md-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty'].h-off-md-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-sm-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-sm-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-sm-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-sm-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-sm-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-sm-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty'].h-off-sm-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty'].h-off-sm-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-lg'].h-off-ty-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-lg'].h-off-ty-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-md'].h-off-ty-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-md'].h-off-ty-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-sm'].h-off-ty-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-sm'].h-off-ty-0,
  .h-grid-ty-12:not(.h-grid-noMargin) [class*='h-el-ty'].h-off-ty-0,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) [class*='h-el-ty'].h-off-ty-0 {
    margin-left: 5px;
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-1,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-1 {
    width: -webkit-calc(8.333333333333334% - 5px - 5px);
    width: calc(8.333333333333334% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-1,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-1 {
    margin-left: -webkit-calc(8.333333333333334% + 5px);
    margin-left: calc(8.333333333333334% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-2,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-2 {
    width: -webkit-calc(16.666666666666668% - 5px - 5px);
    width: calc(16.666666666666668% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-2,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-2 {
    margin-left: -webkit-calc(16.666666666666668% + 5px);
    margin-left: calc(16.666666666666668% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-3,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-3 {
    width: -webkit-calc(25% - 5px - 5px);
    width: calc(25% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-3,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-3 {
    margin-left: -webkit-calc(25% + 5px);
    margin-left: calc(25% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-4,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-4 {
    width: -webkit-calc(33.333333333333336% - 5px - 5px);
    width: calc(33.333333333333336% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-4,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-4 {
    margin-left: -webkit-calc(33.333333333333336% + 5px);
    margin-left: calc(33.333333333333336% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-5,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-5 {
    width: -webkit-calc(41.66666666666667% - 5px - 5px);
    width: calc(41.66666666666667% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-5,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-5 {
    margin-left: -webkit-calc(41.66666666666667% + 5px);
    margin-left: calc(41.66666666666667% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-6,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-6 {
    width: -webkit-calc(50% - 5px - 5px);
    width: calc(50% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-6,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-6 {
    margin-left: -webkit-calc(50% + 5px);
    margin-left: calc(50% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-7,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-7 {
    width: -webkit-calc(58.333333333333336% - 5px - 5px);
    width: calc(58.333333333333336% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-7,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-7 {
    margin-left: -webkit-calc(58.333333333333336% + 5px);
    margin-left: calc(58.333333333333336% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-8,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-8 {
    width: -webkit-calc(66.66666666666667% - 5px - 5px);
    width: calc(66.66666666666667% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-8,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-8 {
    margin-left: -webkit-calc(66.66666666666667% + 5px);
    margin-left: calc(66.66666666666667% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-9,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-9 {
    width: -webkit-calc(75% - 5px - 5px);
    width: calc(75% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-9,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-9 {
    margin-left: -webkit-calc(75% + 5px);
    margin-left: calc(75% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-10,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-10 {
    width: -webkit-calc(83.33333333333334% - 5px - 5px);
    width: calc(83.33333333333334% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-10,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-10 {
    margin-left: -webkit-calc(83.33333333333334% + 5px);
    margin-left: calc(83.33333333333334% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-11,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-11 {
    width: -webkit-calc(91.66666666666669% - 5px - 5px);
    width: calc(91.66666666666669% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-11,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-11 {
    margin-left: -webkit-calc(91.66666666666669% + 5px);
    margin-left: calc(91.66666666666669% + 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-el-ty-12,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-el-ty-12 {
    width: -webkit-calc(100% - 5px - 5px);
    width: calc(100% - 5px - 5px);
  }
  .h-grid-ty-12:not(.h-grid-noMargin) .h-off-ty-12,
  .h-grid:not([class*='h-grid-ty-']):not(.h-grid-noMargin) .h-off-ty-12 {
    margin-left: -webkit-calc(100% + 5px);
    margin-left: calc(100% + 5px);
  }
}

/**
 * Projectname
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  201X infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     XXX
 * @since      dd.mm.yyyy
 * @version    $Id$
 **/
/*  =========================================================
basic config
horizontal grid
vertical grid
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* default font settings */
/* hide elements */
.hide {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* center elements */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.centered--horizontal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.centered--vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* transitions */
.transition {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/*  =========================================================
horizontal grid
========================================================= */
@media screen {
  .h-grid {
    clear: both;
    display: block;
    margin: 0 auto;
  }
  [class*='h-grid'] [class*='h-el'] {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
  }
}
@media screen {
  [class*='h-grid-lg-'] {
    clear: both;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1023px) {
  [class*='h-grid-md-'] {
    clear: both;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 480px) {
  [class*='h-grid-sm-'] {
    clear: both;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 320px) {
  [class*='h-grid-ty-'] {
    clear: both;
    display: block;
    margin: 0 auto;
  }
}
/*  =========================================================
vertical grid
========================================================= */
@media screen and (min-width: 1024px) {
  .v-el-1 {
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 481px) and (max-width: 1023px) {
  .v-el-1 {
    padding-bottom: 110px;
  }
}
@media screen and (max-width: 480px) {
  .v-el-1 {
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1024px) {
  .v-el-2 {
    padding-bottom: 50px;
  }
}
@media screen and (min-width: 481px) and (max-width: 1023px) {
  .v-el-2 {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 480px) {
  .v-el-2 {
    padding-bottom: 20px;
  }
}