@font-face {
  font-family: 'tip-gallery';
  src: url(#);
  src: url(#) format('embedded-opentype'),
  url(#) format('woff'),
  url(#) format('truetype'),
  url('/fonts/tip-gallery_73084532.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url(#) format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "tip-gallery";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.tip-gallery-icon-left-open:before { content: '\e800'; } /* '' */
.tip-gallery-icon-right-open:before { content: '\e801'; } /* '' */

/**
* Tipp Galerie
*
* @desc Stylings for the Tipp Galerie module
* default-color: turqoise: #33b0be, rgb(51, 176, 190)
* @author [HZ]
* @dependency none
*/

.tip-gallery {
  position: relative;
  padding: 40px 0;
  font-size: 14px;
}
.tg-stage {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #33b0be;
}
.magazin .tg-stage {
  background: #ff9900;
}
.markenwelt .tg-stage {
  background: #cc2c1d;
}
.unterhaltung .tg-stage {
  background: #7e4b96;
}
.tv .tg-stage {
  background: #8bb22a;
}
.tg-logo {
  display: block;
  position: absolute;
  right: 20px;
  top: 450px;
  z-index: 2;
}
.tg-tip-list {
  list-style: none;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
}
.tg-animate {
  transition: left cubic-bezier(.35,.46,.49,1.21) 0.5s;
  will-change: left;
}
.tg-tip-list li.tg-li {
  display: block;
  float: left;
}
.tg-tip-list img {
  max-width: 100%;
}
.tg-tip-list figcaption {
  background: inherit;
  color: #fff;
  display: block;
  padding: 50px 65px;
  box-sizing: border-box;
}
.tg-tip-list figcaption h2 {
  color: #fff;
  margin-top: 0;
}
.tg-tip-list figcaption a {
  color: #fff;
}
.tg-tip {
  margin: 0;
}
.tg-counter {
  position: absolute;
  color: #fff;
  font-weight: bold;
  right: 20px;
  top: 67%;
  z-index: 10;
}
.tg-control {
  position: absolute;
  background: none;
  border: 0;
  width: 55px;
  height: 45px;
  display: block;
  cursor: pointer;
  bottom: 20px;
  color: #fff;
  overflow: hidden;
  font-size: 3em;
  /*background: rgba(51, 176, 190, 0.4);*/
  transform: scale(1);
  transition: all 0.1s;
}
.tg-control:hover, .tg-control:focus {
  transform: scale(1.2);
  transition: all 0.2s;
  outline: 0;
}
.tg-control span {
  position: absolute;
  z-index: -5;
}
.js-tg-left {
  left: -5px;
}
.js-tg-right {
  right: 10px;
}


/* HLT specific */
.tip-gallery .dk_options_inner {
  width: 100%;
}
.tip-gallery .dk_container {
  width: auto !important;
  display: inline-block !important;
  overflow: hidden;
}
.tip-gallery .dk_open {
  overflow: visible !important;
}
.tip-gallery a.dk_toggle {
  width: 100% !important;
  box-sizing: border-box;
  padding-right: 20px;
  background-position: 99% 11px;
  line-height: 0;
  padding-top: 5px;
}

/* helpers */
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

/* media queries */
@media (max-width: 360px) {

  .tg-tip-list figcaption {
    padding: 25px 25px;
  }
  .tg-control[style] {
    bottom: auto !important;
    top: 160px;
  }
  .js-tg-left {
    left: -5px;
  }
  .js-tg-right {
    right: 0;
  }
}