/* @group Home Teaser Boxes */

h1.section-heading {
  font-size: 0.875em;
  font-weight: 700;
  line-height: 121.428571428571429%;
  color: #2e356c;
  margin-top: 0;
  margin-bottom: 11px;
}

div.home-section-wrap.wirtschaft-politik div.home-teaser-box.textbox {
  display: none;
}

div.home-section-wrap.wirtschaft-politik div.cycle-slideshow {
  overflow: hidden;
}

div.home-section-wrap.wirtschaft-politik div.element-item.article.cycle-slide.cycle-sentinel {
  position: relative !important;
  display: none !important;
}

div.home-section-wrap.wirtschaft-politik div.element-item.article.cycle-slide.cycle-slide-active {
  position: relative !important;
}

div.home-section-wrap.wirtschaft-politik .news-img-wrap .outer:first-of-type,
div.home-section-wrap.wirtschaft-politik .news-img-wrap .outer p.news-img-caption {
  display: none;
}

div.home-section-wrap.wirtschaft-politik .csc-default#c124 .news .article {
  display: none;
}

.boxwrapper {
  height: 440px;
  position: relative;
  background: #fff;
  color: #fff;
}

.home-section-wrap.wirtschaft-politik .cycle-slideshow .cycle-pager {
  display: none;
}

.selector-item {
  padding: 0 12px 18px;
  box-sizing: border-box;
  margin-top: -1px; /* damit bei hover/active der blaue Rand den oberen grauen 1px border-bottom der Nachbars-Box ueberdeckt */
  position: relative;
  z-index: 0;
}

span.cycle-pager-active .selector-item,
.selector-item:hover {
  border: 5px solid #00a1e5;
  padding: 13px 7px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.selector-item p {
  font-size: 14px;
  padding-left: 1em;
  color: #fff;
  border-top: 1px solid #9ea2bb;
  padding-top: 17px;
}

span.cycle-pager-active .selector-item p,
.selector-item:hover p {
  border-top: none;
  padding-top: 0;
}

.selector-item p::before {
  content: '›';
  margin-left: -1em;
  float: left;
}

.selector-list a {
  color: #fff;
}

.home-teaser-box,
.news .article {
  width: 32.489451476793249%; /* 308px/948 */
  height: 240px;
  margin-right: 1.265822784810127%;  /* 12px/948 */
  position: relative;
  float: left;
  box-sizing: border-box;
  overflow: hidden; /* damit cropped Rand des Bildes nicht angezeigt wird */
}

.home-teaser-box.bigteaser {
  height: 100%;
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  overflow: hidden; /* damit cropped Rand des Bildes nicht angezeigt wird */
}

.home-teaser-box a,
.home-teaser-box a:hover,
.news .article a,
.news .article a:hover {
  text-decoration: none;
}

.home-teaser-box .center-image,
.news .article .center-image {
  text-align: center;
}

.home-teaser-box.bigteaser img {
  width: 948px;
  height: 480px;
  /* Nachfolgend ein Trick, damit Bild bei Responsive gleichmaessig links + rechts abgeschnitten wird */
  /* betrifft die nachfolgenden 3 Zeilen */
  position: relative; /* allows repositioning */
  left: 100%; /* move the whole width of the image to the right */
  margin-left: -200%; /* magic! */
}

.home-teaser-box.big {
  width: 66.244725738396624%; /* 628px/948 */
  background-color: #00a1e5;
  margin-right: 1.265822784810127%; /* 12px/948 */
  float: left;
}

.home-section-wrap {
  margin-bottom: 25px;
}

.home-section-wrap::after {
  content: '';
    display: block;
    clear: both;
}

.home-section-wrap.wirtschaft-politik {
  margin-top: 15px;
}

.home-section-wrap.zuercher-handelskammer {
  margin-bottom: 50px;
}

.tags {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 18px); /* 100% - 12px linker Rand - 6px rechter Rand, Tags haben selbst jeweils 6px rechts */
}

.tags::after {
  content: '';
    display: block;
    clear: both;
}

.tags a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

.tag {
  color: #fff;
  background-color: #2e356c;
  background-color: #363A7B;
  width: auto;
  /* border: 1px solid #fff; Outline deaktiviert */
  padding: 2px 6px; /* war 2px 10px*/
  margin-right: 2px; /* war 6px */
  margin-bottom: 2px; /* war 6px */
  float: left;
  font-size: 0.625em;  /* 10px/16 */
  line-height: 120%; /* 12px */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-teaser-box h2.content,
.news .article h2.content {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 85%;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.375em; /* 22/16px */
  line-height: 121.739130434782609%;
  font-weight: 800;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  /* letter-spacing kleiner */
  letter-spacing: -0.009rem;
  letter-spacing: -0.5px;
}

.home-section-wrap.wirtschaft-politik .slideshow-wrapper {
  position: relative;
}

.home-section-wrap.wirtschaft-politik .home-teaser-box .headline-wrapper {
  width: 70%;
  position: absolute;
  left: 42px;
  bottom: 112px;
  z-index: 10;
}

.home-section-wrap.wirtschaft-politik .home-teaser-box h2.content {
  font-size: 1.875em !important; /* 30/35px */
  line-height: 116.666666666666667%;
  position: static;
  width: 100%;
}

.home-section-wrap.wirtschaft-politik .home-teaser-box .news-list-date {
  font-size: 13px;
  line-height: 125%;
  margin-bottom: 5px;
  display: block;
}

.home-section-wrap.wirtschaft-politik .home-teaser-box .news-list-date::after {
  display: none !important;
}

.home-section-wrap.wirtschaft-politik #slideshow-2 {
  width: calc(100% - 70px);
  height: 88px;
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 0;
  z-index: 100;
}

.home-section-wrap.wirtschaft-politik #slideshow-2 p.title-topnews {
  color: #fff;
  margin-bottom: 15px;
  font-size: 11px;
  line-height: 120%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-section-wrap.wirtschaft-politik #slideshow-2 .cycle-slide {
  vertical-align: top;
  padding-right: 14px;
}

.home-section-wrap.wirtschaft-politik #slideshow-2 .cycle-slide h3 {
  white-space: normal;
  font-size: 0.75em; /* 12px */
  line-height: 133%;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  border-top: 1px solid #fff;
  padding-top: 8px;
  margin-top: 2px;
  margin-bottom: 0;
  cursor: pointer;
}

.home-section-wrap.wirtschaft-politik #slideshow-2 .cycle-slide.cycle-slide-active h3,
.home-section-wrap.wirtschaft-politik #slideshow-2 .cycle-slide:hover h3 {
  border-top: 3px solid #fff;
  margin-top: 0;
}

.home-section-wrap.wirtschaft-politik #slideshow-1 a,
.home-section-wrap.wirtschaft-politik #slideshow-2 a {
  color: #fff;
  text-decoration: none;
}

.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-prev,
.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-next {
  font-size: 22px;
  line-height: 1;
  text-indent: -99999px;
  display: block;
  width: 30px;
  position: absolute;
  bottom: 50px;
  left: 12px;
  z-index: 2000;
}

.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-next {
  left: auto;
  right: 12px;
}

.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-prev::before,
.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-next::before {
  content: "‹";
  text-align: left;
  text-indent: 0;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
}

.home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav a.cycle-next::before {
  content: "›";
  text-align: right;
}

.article h2.content p.news-list-date {
  font-size: 10px; /* war 9px */
  margin-bottom: 0; /* in Kacheln sollte überall Datum angezeigt werden, bspw. "Das könnte sie auch interess..." usw */
  line-height: 150%; /* in Kacheln sollte überall Datum angezeigt werden, bspw. "Das könnte sie auch interess..." usw */
}

.home-teaser-box .inner-box,
.news .article .inner-box {
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.home-teaser-box.big h2.content {
  width: 90%;
}

.home-teaser-box.big.two-cols {
  background-color: #fff;
  border: 5px solid #00a1e5;
}

.home-teaser-box.big.two-cols h2 {
  text-shadow: none;
}

.home-teaser-box.big.two-cols h2.content {
  position: relative;
  bottom: 0;
  left: 0;
}

.home-teaser-box.big.two-cols div.event-datum h2 {
  text-transform: uppercase;
  left: 8px;
}

.home-teaser-box.big.two-cols div.event-datum h1 {
  font-size: 10.8125em;
  line-height: 80.346820809248555%;
  margin-top: 0;
  margin-bottom: 0;
  color: #00a1e5;
}

.home-teaser-box.big.two-cols h2 {
  color: #00a1e5;
}

.home-teaser-box.big.two-cols div.arrow {
  color: #2e356c;
}

.home-teaser-box.big.two-cols:hover {
  border-color: #0081B7;
}

.home-teaser-box.big.two-cols:hover::after {
  content: none;
}

.home-teaser-box.big.two-cols:hover h1,
.home-teaser-box.big.two-cols:hover h2 {
  color: #0081B7 !important;
}

.home-teaser-box div.arrow,
.news .article div.arrow {
  position: absolute;
  bottom: 20px;
  right: 12px;
  color: #fff;
  font-size: 2.25em;
  line-height: 52.777777777777778%;
  margin-top: 0;
  margin-bottom: 0;
}

.home-section-wrap.wirtschaft-politik .home-teaser-box h2.content span::after {
  content: "»";
  font-size: 126.666666666666667%; /* 38px */
  display: inline-block;
  padding-left: 0.3em;
}

.home-teaser-box img,
.news .article img {
    width: auto;
  max-width: none;  
    height: 100%;
}

.news .article img {
  position: relative;
  left: 100%;
  margin-left: -200%;
}

.home-teaser-box .event-datum {
  width: 45%;
  position: absolute;
  left: 8px;
  bottom: 12px;
}

.home-teaser-box .event-titel {
  width: 45%;
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding-right: 30px;
}

.home-section-wrap.netzwerk-events .news .article {
  margin-right: 0;
}

.home-teaser-box.mitgliedernews {
  margin-right: 0;
}

.home-teaser-box.big.services {
  margin-right: 0;
}

.home-teaser-box.big.services h2 {
  text-shadow: none;
}

.home-teaser-box.team {
  margin-right: 0;
}

.homev2 .home-teaser-box.events,
.jubilaeum .home-teaser-box.events {
  width: 32.489451476793249%;
  margin-right: 0;
}

.homev2 .home-teaser-box.events .event-datum,
.jubilaeum .home-teaser-box.events .event-datum {
  width: 90%;
  position: relative;
  margin-top: 70px;
}

.homev2 .home-teaser-box.events div.event-datum h1,
.jubilaeum .home-teaser-box.events div.event-datum h1 {
  font-size: 6.875em;
  display: inline-block;
  width: 60%;
}

.homev2 .home-teaser-box.events div.event-datum h2,
.jubilaeum .home-teaser-box.events div.event-datum h2 {
  display: inline-block;
  width: 35%;
  font-size: 1.4375em;
  margin-left: 3%;
  text-align: left;
}

.homev2 .home-teaser-box.events .event-titel,
.jubilaeum .home-teaser-box.events .event-titel {
  left: 12px;
  width: 90%;
}

.homev2 .home-teaser-box.events h2.content,
.jubilaeum .home-teaser-box.events h2.content {
  font-size: 1em;
}

.homev2 .home-teaser-box.events,
.jubilaeum .home-teaser-box.events {
  width: 32.489451476793249%
}

/* @end */

/* @group Media Queries */

@media only screen and (max-width: 899px) {
    
  .selector-item {
    padding: 0 12px 12px;
  }
  
  span.cycle-pager-active .selector-item,
  .selector-item:hover {
    padding: 7px;
  }
  
  .selector-item p {
    font-size: 13px;
    padding-top: 11px;
  }  
  
  .home-teaser-box.big.two-cols div.event-datum h2 {
    left: 0;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box,
  div.home-section-wrap.teaser.events .home-teaser-box,
  div.home-section-wrap.netzwerk-events .news .article,
  div.home-section-wrap.services .home-teaser-box,
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box {
    width: 49.044585987261146%; /* 308px/628 */
    margin-right: 1.910828025477707%; /* 12px/628 */
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box:nth-of-type(2),
  div.home-section-wrap.teaser.events .home-teaser-box:nth-of-type(2),
  div.home-section-wrap.netzwerk-events .news .article,
  div.home-section-wrap.services .home-teaser-box:nth-of-type(2),
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box:nth-of-type(2) {
    margin-right: 0;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box:nth-of-type(3),
  div.home-section-wrap.services .home-teaser-box:nth-of-type(3),
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box:nth-of-type(3) {
    display: none;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum,
  div.home-section-wrap.teaser.events .home-teaser-box .event-datum {
    position: static;
    width: 90%;
    margin-top: 40px;
    margin-left: 12px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum h1,
  div.home-section-wrap.teaser.events .home-teaser-box .event-datum h1 {
    font-size: 3.4375em !important; /* 55px/16 */
  }

  .homev2 div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum h1,
  .jubilaeum div.home-section-wrap.teaser.events .home-teaser-box .event-datum h1 {
    font-size: 6.875em !important; /* 55px/16 */
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-titel,
  div.home-section-wrap.teaser.events .home-teaser-box .event-titel {
    width: 90%;
    left: 12px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-titel h2,
  div.home-section-wrap.teaser.events .home-teaser-box .event-titel h2 {
    font-size: 1.125em; /* 18px/16  */
  }

}

@media only screen and (max-width: 680px) {

  div.home-section-wrap.netzwerk-events .home-teaser-box,
  div.home-section-wrap.teaser.events .home-teaser-box,
  div.home-section-wrap.netzwerk-events .news .article,
  div.home-section-wrap.services .home-teaser-box,
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box {
    height: 211px; /* Seitenverhaeltnis Boxen ist 308/240 = 1.28333... hier gerechnet: Breite 272 / 1.28333px */
  }
    
  .boxwrapper .home-teaser-box.bigteaser {
    width: 100%;
  }

  .home-section-wrap.wirtschaft-politik .home-teaser-box .headline-wrapper {
    width: calc(100% - 24px);
    left: 12px;
    bottom: 42px;
  }  

  .home-section-wrap.wirtschaft-politik #slideshow-2,
  .home-section-wrap.wirtschaft-politik #slideshow-1 .cycle-nav {
    display: none;
  }

  div.home-section-wrap.wirtschaft-politik .cycle-slideshow .cycle-pager {
    width: 100%;
    height: 28px;
    text-align: center;
    left: 0;
    top: auto;
    bottom: 0;
    display: block;
  }
      
  div.home-section-wrap.wirtschaft-politik div.home-teaser-box.textbox {
    display: block;
    float: none; 
    height: auto;
    min-height: 100px;
    width: 100%;
    background-color: #131c59;
    margin-right: 0;
  }
  
  div.home-section-wrap.wirtschaft-politik div.home-teaser-box.textbox img {
    display: none;
  }
  
  div.home-section-wrap.wirtschaft-politik div.home-teaser-box.textbox div.tags {
    overflow: auto;
    position: relative;
    margin-bottom: 30px;
  }
  
  div.home-section-wrap.wirtschaft-politik div.home-teaser-box.textbox h2.content {
    position: relative;
  }      
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-titel h2,
  div.home-section-wrap.teaser.events .home-teaser-box .event-titel h2 {
    font-size: 0.875em !important; /* 14px/16  */
  }
  
  .home-teaser-box h2.content,
  .news .article h2.content {
    width: 85% !important;
    font-size: 1.25em !important; /* 20/16px */
  }

}

@media only screen and (max-width: 640px) {
  
  div.home-section-wrap.netzwerk-events .home-teaser-box,
  div.home-section-wrap.teaser.events .home-teaser-box,
  div.home-section-wrap.netzwerk-events .news .article,
  div.home-section-wrap.services .home-teaser-box,
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box {
    height: 199px; /* Seitenverhaeltnis Boxen ist 308/240 = 1.28333... hier gerechnet: Breite 256...px / 1.28333... */
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum h1,
  div.home-section-wrap.teaser.events .home-teaser-box .event-datum h1 {
    font-size: 2.5em !important; /* 40px/16 */
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum h2,
  div.home-section-wrap.teaser.events .home-teaser-box .event-datum h2 {
    width: 100% !important;
    margin-left: 0;
  }
  
  .home-teaser-box h2.content,
  .news .article h2.content {
    font-size: 1.125em !important; /* 18/16px */
  }
  
  .home-teaser-box div.arrow {
    font-size: 1.875em; /* 30px/16 */
    bottom: 18px;
  }

  .homev2 div.home-section-wrap.netzwerk-events .home-teaser-box .event-datum h1,
  .jubilaeum div.home-section-wrap.teaser.events .home-teaser-box .event-datum h1 {
    font-size: 3.4375em !important; /* 55px/16 */
    margin-left: 0;
  }
  
}

@media only screen and (max-width: 580px) {
  
  .home-teaser-box.bigteaser img {
    max-width: none;
  }
    
}

@media only screen and (max-width: 540px) {
    
  div.home-section-wrap.netzwerk-events .home-teaser-box,
  div.home-section-wrap.teaser.events .home-teaser-box,
  div.home-section-wrap.netzwerk-events .news .article,
  div.home-section-wrap.services .home-teaser-box,
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
    height: 240px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box.big.two-cols,
  div.home-section-wrap.teaser.events .home-teaser-box.big.two-cols {
    height: auto;
    min-height: 240px;
  }

  div.home-section-wrap.netzwerk-events .home-teaser-box.big.two-cols.events,
  div.home-section-wrap.teaser.events .home-teaser-box.big.two-cols.events {
    height: auto;
    height: 300px;
    min-height: 240px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box.big.two-cols div.tags,
  div.home-section-wrap.teaser.events .home-teaser-box.big.two-cols div.tags {
    position: relative;
    overflow: auto;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box div.event-datum,
  div.home-section-wrap.teaser.events .home-teaser-box div.event-datum {
    position: relative;
    left: 0;
    bottom: 0;
    margin-left: 12px;
    margin-top: 0;
    padding-top: 20px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box div.event-titel,
  div.home-section-wrap.teaser.events .home-teaser-box div.event-titel {
    position: relative;
    margin-top: 30px;
  }
  
  div.home-section-wrap.netzwerk-events .home-teaser-box:nth-of-type(3),
  div.home-section-wrap.teaser.events .home-teaser-box:nth-of-type(3),
  div.home-section-wrap.services .home-teaser-box:nth-of-type(3),
  div.home-section-wrap.zuercher-handelskammer .home-teaser-box:nth-of-type(3) {
    display: block;
  }
  
  .home-teaser-box h2.content,
  .news .article h2.content {
    font-size: 1.375em !important; /* 22/16px */
  }

  .home-section-wrap.wirtschaft-politik .home-teaser-box h2.content {
    font-size: 1.5625em !important; /* 25px */
  }  
  
  div.home-section-wrap.netzwerk-events .home-teaser-box .event-titel h2,
  div.home-section-wrap.teaser.events .home-teaser-box .event-titel h2 {
    font-size: 1.4375em !important;
  }
  
  .home-teaser-box.big.two-cols div.event-datum h1 {
    font-size: 10.8125em !important;
    margin-left: -8px;
  }
  
  .home-teaser-box div.arrow {
    font-size: 2.25em;
    bottom: 20px;
  }
  
}

/* @end */