/*CSS Document */

/* CREATED BY STEFAN BERNHARDT, M.F.A. */
/* Version 160106-2 */

/* – TABLE OF CONTENTS – */
/*   - I. GLOBAL SETTINGS  */
/*     - I.I SETTINGS – OVERWRITE STYLES SETTINGS */
/*     - I.II SETTINGS – PRINT SETTINGS */
/*   - II. FIGURE – HISTORY/TIMELINE */
/*   - III. TABLE – YDIV TABLE FOR COURSES AND TRAINING */
/*   - IV. TABLE – TIMETABLE FOR PROGRAMMES */
/*   - V. TEXT ELEMENT – TEXT SQUARES COLOUR */
/*   - VI. TEXT ELEMENT – ALIGNMENT OF PUBLICATION ICONS */
/*   - VII. FIGURE – ECOTRON WEBSITE WHEEL */
/*   - VIII. TEXT ELEMENT – FLAGS */
/*   - IX. FIGURE – ORGANISATIONAL CHART */
/*   - IX.II FIGURE – WHEEL FIGURE */
/*     - IX.I CONFIGURATION – WHEEL FIGURE */
/*     - IX.II BUILD – WHEEL FIGURE */

/* – – – – – – – – – */
/* I. GLOBAL SETTINGS  */

h2 {
  line-height: 1.2em
}

.align-center {
  text-align: center;
}

/* – – – – – – – – – */
/* I.I SETTINGS – OVERWRITE STYLES SETTINGS */

.content table {
  width: 100%;
}

.content th {
  border-bottom: 1px solid #000000;
  vertical-align: top;
  text-align: left;
  padding: 5px 10px 5px 0;
}

div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
  margin-bottom: 10px;
}

div.csc-textpic div.csc-textpic-imagecolumn {
  margin-bottom: 20px;
}

.teaserNavigation i {
  cursor: pointer;
}

.showbox {
  float: left;
  margin: 4em 1em;
  width: 100px;
  height: 60px;
  border: 2px solid green;
  background-color: #fff;
  line-height: 60px;
  text-align: center;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
.showbox.slideright:hover {
  -webkit-transform: translate(3em,0);
  transform: translate(3em,0);
}

/* – – – – – – – – – */
/* I.II SETTINGS – PRINT SETTINGS */

@media only print {
  .idivConf-program,
  .content .csc-default .idivConf-program p,
  .content .csc-default .idivConf-program span,
  html,
  body
  { font-size: 14px !important; }

  .socialBar,
  .socialFooterContainer,
  .mobileSubMenu.mobile,
  .topRightHeader,
  footer {
    display: none;
  }
    
  .fceZweiSpaltig .spalte {
      width: 45%;
      margin: 0 10% 0 0;
      position: relative;
      float: left;
  }
    
    .fceVierSpaltig .spalte {
      width: 20.5%;
      margin: 0 6% 0 0;
      position: relative;
      float: left;
  }
    
  .fceDreiSpaltig .spalte {
      width: 30%;
      margin: 0 5% 0 0;
      position: relative;
      float: left;
  }
    
  .idivConf-slot h3,
  .idivConf-slot h4,
  .idivConf-slot li,
  .idivConf-slot li:first-child,
  .idivConf-slot.slot-blue h3,
  .idivConf-slot.slot-blue h4,
  .idivConf-slot.slot-blue li,
  .idivConf-slot.slot-blue li:first-child {
    border: 1px solid #ddd !important;
    background: none;
    color: #000;
  }

    .idivConf-program ul {
    display: table;
    table-layout: fixed;
  }

  .idivConf-program li {
    display: table-cell;
  }

  .idivConf-program .slot-half {
    width: 50%;
    box-sizing: border-box;
  }

  .idivConf-program .slot-quater {
    width: 25%;
    box-sizing: border-box;
  }

  .idivConf-program .slot-third {
    width: 33.333333%;
    box-sizing: border-box;
  }

  .idivConf-slot li.yellow-border { border-left: 5px solid #fed426 !important; }
  .idivConf-slot li.green-border { border-left: 5px solid #70b74f !important; }
  .idivConf-slot li.blue-border { border-left: 5px solid #558ec7 !important; }
  .idivConf-slot li.red-border { border-left: 5px solid #bd101e !important; }

  .yellow-border li:first-child, .green-border li:first-child,  .blue-border li:first-child, .red-border li:first-child { border-left: 0 !important; }
}

/* – – – – – – – – – */
/* II. FIGURE – HISTORY/TIMELINE */

.idiv-tml-wrapper {
  position: relative;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.idiv-tml-wrapper p {
  margin: 0;
  padding: 0;
}

.idiv-tml-wrapper:after {
  position: absolute;
  content: '';
  z-index: 0;
  left: 34%;
  top: 0;
  height: 100%;
  border-left: 1px dotted #333;
}

.idiv-tml-wrapper li {
  position: relative;
  z-index: 100;
  display: table;
  width: 100%;
  min-height: 50px;
  padding: 10px 0;
}

.idiv-tml-wrapper li:before {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 34%;
  margin: -3px 0 0 -3px;
  z-index: 0;
}

.idiv-tml-wrapper li:after {
  position: absolute;
  content: '';
  width: 80px;
  height: 80px;
  background-color: #333;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  top: 50%;
  left: 34%;
  margin: -40px 0 0 -40px;
  z-index: 10;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .66s ease-out;
  transition: transform .66s ease-out;
}

.idiv-tml-dfg:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/dfg.png'); }
.idiv-tml-gma_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/gma_1.png'); }
.idiv-tml-biocity:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/biocity.png'); }
.idiv-tml-website_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/website_1.png'); }
.idiv-tml-ydiv_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/ydiv_1.png'); }
.idiv-tml-ydiv_2:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/ydiv_2.png'); }
.idiv-tml-splot:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/splot.png'); }
.idiv-tml-uniLeipzig:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/UL-logo-1.png'); }
.idiv-tml-pereira:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/pereira.png'); }
.idiv-tml-hpc:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/hpc.png'); }
.idiv-tml-mie_eie:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/mie_eie.png'); }
.idiv-tml-ess:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/ess_1.png'); }
.idiv-tml-canopy_crane:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/canopy_crane.png'); }
.idiv-tml-bioSyn_phyDiv:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/bioSyn_phyDiv.png'); }
.idiv-tml-theory:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/theory.png'); }
.idiv-tml-summerSchool_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/summerSchool_1.png'); }
.idiv-tml-summerSchool_2:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/summerSchool_2.png'); }
.idiv-tml-annualLecture_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/annualLecture_1.png'); }
.idiv-tml-celebration_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/celebration_1.png'); }
.idiv-tml-conference_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/conference_1.png'); }
.idiv-tml-conference_2:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/conference_2.png'); }
.idiv-tml-knight_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/knight_1.png'); }
.idiv-tml-macroEcoSociety:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/macroEcoSociety.png'); }
.idiv-tml-ercGrant:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/ercGrant.png'); }
.idiv-tml-dfg_visit_2016:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/dfg_visit_2016.png'); }
.idiv-tml-celebration_2016:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/celebration_2016.png'); }
.idiv-tml-sabineMatthiae:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/sabineMatthiae.png'); }
.idiv-tml-geoBonConf_1:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/geoBonConf_1.png'); }
.idiv-tml-1000participants:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/1000participants.png'); }
.idiv-tml-1000publications:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/1000publications.png'); }
.idiv-tml-ecotronOpening:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/ecotronOpening.png'); }
.idiv-tml-visitTillich201706:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/visitTillich201706.png'); }
.idiv-tml-summerSchool_3:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/summerSchool_3.png'); }
.idiv-tml-conference_3:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/conference_3.png'); }
.idiv-tml-sab2017:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/sab2017.png'); }
.idiv-tml-twitter_1000followers:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/twitter_1000followers.png'); }
.idiv-tml-roofing_ceremony:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/roofing_ceremony.png'); }
.idiv-tml-groundbreaking:after { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/iDiv_Timeline/groundbreaking.png'); }


.idiv-tml-time,
.idiv-tml-event {
  display: table-cell;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.idiv-tml-wrapper .idiv-tml-time {
  width: 34%;
  padding-right: 20px;
  text-align: right;
  -webkit-transition: padding-right .66s ease-out;
  transition: padding-right .66s ease-out;
}

.idiv-tml-time time {
}

.idiv-tml-wrapper .idiv-tml-event {
  width: 66%;
  padding-left: 20px;
  -webkit-transition: padding-left .66s ease-out;
  transition: padding-left .66s ease-out;
}

.idiv-tml-wrapper .idiv-tml-event p {
  width: 400px;
  max-width: 80%;
}

.idiv-tml-wrapper li:hover .idiv-tml-time,
.idiv-tml-wrapper li.active .idiv-tml-time {
  padding-right: 60px;
  -webkit-transition: padding-right .66s ease-out;
  transition: padding-right .66s ease-out;
}

.idiv-tml-wrapper li:hover .idiv-tml-event,
.idiv-tml-wrapper li.active .idiv-tml-event {
  padding-left: 60px;
  -webkit-transition: padding-left .66s ease-out;
  transition: padding-left .66s ease-out;
}

.idiv-tml-wrapper li:hover:after,
.idiv-tml-wrapper li.active:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .66s ease-out;
  transition: transform .66s ease-out;
}

@media (max-width: 768px) {

  .idiv-tml-wrapper:after {
    left: 33.3333%;
  }

  .idiv-tml-wrapper li {
    table-layout: fixed;
  }

  .idiv-tml-wrapper li:after {
    max-width: 80px;
    max-height: 80px;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  .idiv-tml-wrapper li .idiv-tml-time,
  .idiv-tml-wrapper li:hover .idiv-tml-time {
    width: 33.3333%;
    padding-right: 10%;
  }

  .idiv-tml-wrapper li .idiv-tml-event,
  .idiv-tml-wrapper li:hover .idiv-tml-event {
    width: 66.6666%;
    padding-left: 10%;
  }

}

/* – – – – – – – – – */
/* III. TABLE – YDIV TABLE FOR COURSES AND TRAINING*/

table.courseWrapper {
  position: relative;
  display: table;
  padding: 10px 0;
  background: transparent;
  border-collapse: separate;
  border-top: 2px solid #000;
}

table.courseWrapper:first-child {
  border-top: 0;
}

table.courseWrapper tr:nth-child(2n) td {
  background: transparent;
}
  
table.courseWrapper table {
  width: 100%;
  margin-top: 10px;
  border-collapse: separate;
}

table.courseWrapper table .open { color: #75B241; }
table.courseWrapper table .closed { color: #ff0000; }

table.courseWrapper td {
  border-bottom: 0;
}

table.courseWrapper table:first-child {
  margin-top: 0;
}

table.courseWrapper h1 {
  margin: 10px 0;
  padding: 0;
}
  
table.courseWrapper h2 {
  padding: 0 0 5px 0;
  margin: 0;
  font-size: 1em;
  border-bottom: 1px solid #000;
}

table.courseWrapper p {
  padding: 0;
}

table.courseInformation {
  border-top: 0;
  table-layout: fixed;
}


table.courseInformation tr:first-child td {
  padding-bottom: 0;
  vertical-align: bottom;
}

table.courseInformation td {
  padding: 0;
  background: transparent;
  border-left: 12px solid transparent;
}

table.courseInformation td:first-child {
  border-left: 0;
}
    
table.courseDescription,
table.lectorerInformation {
  position: relative;
  display: table;
  background-color: transparent;
  padding: 0;
}

table.courseWrapper table.courseDescription ul li {
  display: list-item;
  list-style: disc outside;
  color: black;
  margin: 0 0 5px 10px;
}
    
table.lectorerInformation td {
  padding: 10px 5px 0 5px;
}
    
table.lectorerInformation td:first-child {
  position: relative;
  width: 33.333333%;
  padding: 10px 5px 0 0;
  float: none;
  display: table-cell;
}
    
table.lectorerInformation td:first-child img {
  max-width: 100%;
}

table.courseTable {
  table-layout: fixed;
  width: 100%;
}

table.courseTable td {
  border-bottom: 1px solid #000;
  padding: 5px 10px;
}

table.courseTable td:nth-child(1) { width: 22%; }

table.courseTable td:nth-child(2) { width: 31%; }

table.courseTable td:nth-child(3) { width: 27%; }

table.courseTable td:nth-child(4) { width: 15%; }

table.courseTable td:nth-child(5) { width: 5%; }

table.courseTable tr:first-child td {
  border-bottom: 2px solid #000;
}

table.courseTable tr:nth-child(2n) {
  background: #f5f5f5;
}

table.courseTable h2 {
  padding: 0;
  margin: 0;
  font-size: 1.125em;
}

/* – – – – – – – – – */
/* IV. TABLE – TIMETABLE FOR PROGRAMMES */

.idivConf-program {
  position: relative;
  max-width: 873px;
  margin: 0 auto;
}

.idivConf-slot {
  margin-bottom: .75em;
  border-top: 1px solid #ddd;
}

.slot-noButtonSpace {
  margin-bottom: 0;
}

.idivConf-slot.slot-intended {
  width: 96%;
  margin-left: 2%;
  border-top: 0;
}

.idivConf-slot ul h3,
.idivConf-slot ul h4 {
  margin-bottom: .3em;
}

.idivConf-slot .slot-blue h3,
.idivConf-slot .slot-blue h4 {
  background: #558ec7;
  color: #fff;
  font-weight: 400;
}

.idivConf-slot .slot-blue li:first-child {
  border-left-color: #558ec7;
}

.idivConf-slot .slot-blue li {
  border-right-color: #558ec7;
  border-bottom-color: #558ec7;
}

.idivConf-slot .slot-yellow h3,
.idivConf-slot .slot-yellow h4 {
  background: #fed426;
  color: #000;
  font-weight: 400;
}

.idivConf-slot .slot-yellow li:first-child {
  border-left-color: #fed426;
}

.idivConf-slot .slot-yellow li {
  border-right-color: #fed426;
  border-bottom-color: #fed426;
}

.yellow-border { border-left: 5px solid #fed426 !important; }
.green-border { border-left: 5px solid #70b74f !important; }
.blue-border { border-left: 5px solid #558ec7 !important; }
.red-border { border-left: 5px solid #bd101e !important; }

.yellow-border li:first-child, .green-border li:first-child, .blue-border li:first-child, .red-border li:first-child { border-left: 0 !important; }

.idivConf-slot .active {
  height: auto;
}

.idivConf-slot .inactive {
  height: 0;
  overflow: hidden;
}

.idivConf-program h2 {
  line-height: 1.2em;
}

.idivConf-program h3,
.idivConf-program h4 {
  background: #ddd;
  padding: .25em .5em;
  margin: 0;
  line-height: 1.2em;
}

.idivConf-program h2.green,
.idivConf-program h3.green,
.idivConf-program h4.green {
  background-color: #70b74f;
  color: #fff;
  font-weight: 500;
}

.idivConf-program h2.blue,
.idivConf-program h3.blue,
.idivConf-program h4.blue {
  background-color: #558ec7;
  color: #fff;
  font-weight: 500;
}

.idivConf-program h2.yellow,
.idivConf-program h3.yellow,
.idivConf-program h4.yellow {
  background-color: #fed426;
}

.idivConf-program p {
  margin: 0;
  padding: 0;
}

.idivConf-program ul {
  position: relative;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.idivConf-program li {
  padding: .5em;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.idivConf-program li:first-child {
  border-left: 1px solid #ddd;
}

.idivConf-program li p {
  padding-bottom: .5em;  
}

.idivConf-program .sessionTitle,
.idivConf-program .sessionMain {
  font-size: 1.25em;
  line-height: 1.3em;
  font-weight: bold;
}
.idivConf-program .sessionSpeaker {
  line-height: 1.3em;
}

.idivConf-program .sessionComment {
  font-size: .8em;
  line-height: 1.3em;
}

.idivConf-program .sessionTimeLocation {
  color: #aaa;
  font-size: .8em;
  min-height: 1.5em;
}

.idivConf-program .sessionTimeLocation time,
.idivConf-program .sessionTimeLocation span,
.idivConf-program .sessionLocation {
  color: #333;
  position: relative;
}


.idivConf-program .location-1 .sessionLocation:before,
.idivConf-program .location-2 .sessionLocation:before,
.idivConf-program .location-3 .sessionLocation:before,
.idivConf-program .location-4 .sessionLocation:before,
.idivConf-program .location-1-2 .sessionLocation:before,
.idivConf-program .location-1-3 .sessionLocation:before,
.idivConf-program .location-2-3 .sessionLocation:before,
.idivConf-program .location-1-2 .sessionLocation:after,
.idivConf-program .location-1-3 .sessionLocation:after,
.idivConf-program .location-2-3 .sessionLocation:after {
  content: '';
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: .75em;
  width: .75em;
  margin-right: .25em;
}

.idivConf-program .location-1-2 .sessionLocation:before,
.idivConf-program .location-1-3 .sessionLocation:before,
.idivConf-program .location-2-3 .sessionLocation:before {
  margin-right: .75em;
}

.idivConf-program .location-1-2 .sessionLocation:after,
.idivConf-program .location-1-3 .sessionLocation:after,
.idivConf-program .location-2-3 .sessionLocation:after {
  position: absolute;
  z-index: 10;
  left: .5em;
  top: 50%;
  margin-top: -.375em;
}

.headerGroup {
  display: table-header-group;
}

.idivConf-program .location-1 .sessionLocation:before, .idivConf-program .location-1-2 .sessionLocation:before, .idivConf-program .location-1-3 .sessionLocation:before { background-color: #fed426; }
.idivConf-program .location-2 .sessionLocation:before, .idivConf-program .location-2-3 .sessionLocation:before, .idivConf-program .location-1-2 .sessionLocation:after { background-color: #558ec7; }
.idivConf-program .location-3 .sessionLocation:before, .idivConf-program .location-1-3 .sessionLocation:after, .idivConf-program .location-2-3 .sessionLocation:after { background-color: #70b74f; }
.idivConf-program .location-4 .sessionLocation:before { background-color: #bd101e; }

@media screen and (min-width: 768px) {
  .idivConf-program ul {
    display: table;
    table-layout: fixed;
  }

  .idivConf-program li {
    display: table-cell;
  }

  .idivConf-program .slot-half {
    width: 50%;
    box-sizing: border-box;
  }

  .idivConf-program .slot-quater {
    width: 25%;
    box-sizing: border-box;
  }

  .idivConf-program .slot-third {
    width: 33.333333%;
    box-sizing: border-box;
  }

  .idivConf-program .noBorder-bottom {
    border-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .idivConf-program li {
    border-bottom: 1px solid #aaa;
    /*border-left: 1px solid #aaa;*/
  }

  .mobileNone {
    display: none;
  }
}

/* – – – – – – – – – */
/* V. TEXT ELEMENT – TEXT SQUARES COLOUR */
/* Creates little coloured squares infront of and behind a paragraph */


.square-before,
.square-after {
  position: relative;
}

.square-before:before,
.square-after:after {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 .25em;
  vertical-align: -.1em;
  border: 1px inset rgba(0,0,0,.33);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.square-blue:before, .square-blue:after { background: #ABC0E2; }
.square-grey:before, .square-grey:after { background: #ccc; }
.square-green:before, .square-green:after { background: #70b74f; }
.square-yellow:before, .square-yellow:after { background: #FFE8A9; }

/* – – – – – – – – – */
/* VI. TEXT ELEMENT – ALIGNMENT OF PUBLICATION ICONS */

.fundingSelector label img,
.publicationFunding img {
  vertical-align: -4px;
}

/* – – – – – – – – – */
/* VII. FIGURE – ECOTRON WEBSITE WHEEL */

#idivEcotron-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 325px;
  margin: 65px 0;
}

#idivEcotron-wrapper > div {
  position: relative;
  display: table-cell;
  width: 100%;
  background: url('https://www.idiv.de/fileadmin/content/HTML_module_files/ecotron/bg-ecotron.png') no-repeat center;
  background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/ecotron/bg-ecotron.svg');
  vertical-align: middle;
  text-align: center;
}

.idivEcotron-nav {
  position: relative;
  height: 100%;
  list-style: none;
  padding: 0;
}

.idivEcotron-nav li {
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
  height: 96px;
  width: 96px;

  -webkit-transform: scale(0);
  transform: scale(0);

  -webkit-transition: .33s ease-in;
  transition: .33s ease-in;
}

@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.25); }
  100% { -webkit-transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.pulse {
  -webkit-animation: pulse .5s linear 1;
  animation: pulse .5s linear 1;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-delay: .33s;
  animation-delay: .33s;
}

.idivEcotron-nav li a {
  display: table-cell;
  background: #3C3C3B;
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  font-weight: 400;
  color: #fff !important;
  text-decoration: none !important;

  box-shadow: 0 2px 0 rgba(0,0,0,.2);

  -webkit-transform: scale(1);
  transform: scale(1);

  -webkit-transition: -webkit-transform .33s ease-in;
  transition: transform .33s ease-in;
}

.idivEcotron-nav li a:hover,
.idivEcotron-nav li a.active {
  background-color: #fed426;
  color: #3C3C3B !important;

  -webkit-transform: scale(1.25);
  transform: scale(1.25);

  -webkit-transition: .33s ease-in;
  transition: .33s ease-in;
}

#idivEcotron-nav_1 {
  top: 50%;
  margin-top: -212px;
  left: 50%;  
  margin-left: -48px;
}

#idivEcotron-nav_2 {
  top: 50%;
  margin-top: -130px;
  left: 50%;  
  margin-left: 95px;
}

#idivEcotron-nav_3 {
  top: 50%;
  margin-top: 35px;
  left: 50%;  
  margin-left: 95px;
}

#idivEcotron-nav_4 {
  top: 50%;
  margin-top: 114px;
  left: 50%;  
  margin-left: -48px;
}

#idivEcotron-nav_5 {
  top: 50%;
  margin-top: 35px;
  left: 50%;  
  margin-left: -190px;
}

#idivEcotron-nav_6 {
  top: 50%;
  margin-top: -130px;
  left: 50%;  
  margin-left: -190px;
}

@media (max-width: 768px) {
  #idivEcotron-wrapper {
    margin: 20% 0;
  }

  #idivEcotron-wrapper > div {
    background-size: contain;
  }

  .idivEcotron-nav li {
    width: 120px;
    height: 120px;
  }

  .idivEcotron-nav li a {
    font-size: .75em;
  }

  #idivEcotron-nav_1 {
    margin-top: -282px;
    margin-left: -60px;
  }

  #idivEcotron-nav_2 {
    margin-top: -172px;
    margin-left: 132px;
  }

  #idivEcotron-nav_3 {
    margin-top: 50px;
    margin-left: 132px;
  }

  #idivEcotron-nav_4 {
    margin-top: 160px;
    margin-left: -60px;
  }

  #idivEcotron-nav_5 {
    margin-top: 50px;
    margin-left: -250px;
  }

  #idivEcotron-nav_6 {
    margin-top: -172px;
    margin-left: -250px;
  }

}

.fadeElementclosed {
  display: none;
}

/* – – – – – – – – – */
/* VIII. TEXT ELEMENT – FLAGS */
/* Element to highlight content */
/* e.g. iDiv Ecotron website */

.iDivFlag {
  position: relative;
  margin: 2em 0;
}

.iDivFlag > p {
  position: relative;
  background: blue;
  padding: .5em;
  display: inline-block;
  -webkit-box-shadow: 0 2px 1px rgba(0,0,0,.25);
  box-shadow: 0 2px 1px rgba(0,0,0,.25);
  background-color: rgb(85,142,199);
  font-weight: 400;
}

.iDivFlag > p:after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1em;
  content: '';
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid rgb(85,142,199);
}

.flag_left { text-align: left; }
.flag_center { text-align: center; }
.flag_right { text-align: right; }

.flag_blue > p { background-color: rgb(85,142,199); }
.flag_blue > p:after { border-top-color: rgb(85,142,199); }
.flag_lightblue > p { background-color: rgb(176,196,230); }
.flag_lightblue > p:after { border-top-color: rgb(176,196,230); }
.flag_yellow > p { background-color: rgb(254,212,38); }
.flag_yellow > p:after { border-top-color: rgb(254,212,38); }
.flag_lightyellow > p { background-color: rgb(255,239,175); }
.flag_lightyellow > p:after { border-top-color: rgb(255,239,175); }
.flag_green > p { background-color: rgb(112,183,79); }
.flag_green > p:after { border-top-color: rgb(112,183,79); }
.flag_lightgreen > p { background-color: rgb(194,219,165); }
.flag_lightgreen > p:after { border-top-color: rgb(194,219,165); }
.flag_gray > p { background-color: rgb(60,60,60); color: white; }
.flag_gray > p:after { border-top-color: rgb(60,60,60); }

/* – – – – – – – – – */
/* IX. FIGURE – ORGANISATIONAL CHART */

.idivOrganisationChart h1,
.idivOrganisationChart h2,
.idivOrganisationChart h3,
.idivOrganisationChart h4,
.idivOrganisationChart h5 {
  padding: 0;
  margin: 0;
}

.organisationalUnit {
  position: relative;
  border: 2px solid #6f6f6e;
  max-width: 960px;
}

.organisationalUnit header > a,
.organisationalUnit header > h3 {
  display: block;
  color: #fff;
  padding: 1em;
  text-decoration: none;

  transition: background .2s ease-in;
  background: #6f6f6e;
}

.organisationalUnit header a:hover,
.organisationalUnit header a:focus {
  cursor: pointer;

  transition: background .2s ease-in;
  background: #000;
}

.organisationalUnit header a:active {
  cursor: pointer;

  transition: background .033s ease-in;
  background: #404040;
}

.leadPosition {
  margin: 0;
  padding: 1em 1em 0 1em;
}

.leader {
  padding: 0;
  margin: 0;
}

.structuralUnit {
  padding: 0 1em 1em 0;
  margin: 0;
}

.organisationalUnit li {
  list-style: none;
  float: left;
  padding: 1em 0 0 1em;
  width: 50%;
  box-sizing: border-box;
}

.unit .unitWrapper,
.unit a {
  position: relative;
  display: inline-block;
  min-height: 8em;
  width: 100%;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  text-decoration: none !important;
  color: #000;
  font-size: 1em;
  background-color: #c6c6c5;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

.unit a:link,
.unit a:visited {
  cursor: pointer;

  transition: background-color .2s ease-in, box-shadow .2s ease-in, transform .2s ease-in, -webkit-transform .2s ease-in;
  background-color: #c6c6c5;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transform: scale(1);
  -webkit-transform: scale(1);
}

.unit a:hover,
.unit a:focus {
  color: #000;
  cursor: pointer;

  transition: background-color .2s ease-in, box-shadow .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out;
  background-color: #b0c4e6;
  box-shadow: 0 2px 1px rgba(0,0,0,0.2);
  transform: scale(1.025);
  -webkit-transform: scale(1.025);
}

.unit a:active {
  cursor: pointer;

  transition: background-color .033s ease-in, box-shadow .033s ease-in, transform .033s ease-in, -webkit-transform .033s ease-in;
  background-color: #558ec7;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transform: scale(1);
  -webkit-transform: scale(1);
}

.unit#unit-bdu .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-bdu.png'); }
.unit#unit-biu .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-biu.png'); }
.unit#unit-branch .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-branch.png'); }
.unit#unit-extcoo .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-extcoo.png'); }
.unit#unit-it .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-it.png'); }
.unit#unit-outreach .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-outreach.png'); }
.unit#unit-scicoo .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-scicoo.png') }
.unit#unit-sdiv .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-sdiv.png'); background-position: right top; }
.unit#unit-ydiv .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-ydiv.png'); background-position: right top; }


.unit h5 {
  font-size: 1.25em;
  font-weight: bold;
  padding-bottom: 5em;
  cursor: pointer !important;
}

.unit .leader {
  position: absolute;
  bottom: 1em;
  cursor: pointer !important;
}

.structuralUnit:before,
.structuralUnit:after {
  content: "";
  display: table;
}
.structuralUnit:after {
  clear: both;
}

@media (max-width: 768px) {
  .organisationalUnit header {
    float: none;
  }

  .organisationalUnit li {
    width: 100%;
  }

  .unit h5 {
    padding-bottom: 4em;
  }
}

/* – – – – – – – – – – – */
/* IX. FIGURE – WHEEL FIGURE */
/* Figure displays departments or research groups in form of a wheel with an outer an inner ring */

/* – – – – – – – – – – – */
/* IX.I CONFIGURATION – WHEEL FIGURE */
/* Modify font-sizes to change global size of figure */
/* All dimensions are relative to the font sizes */

.wheelWrapper {
  /* DEFINES GLOBALE DIMENSIONS FOR DESKTOP AND TABLET VIEW */
  font-size: 8px;
}

.outerWheelWrapper figcaption > p,
.innerWheelWrapper a {
  /* DEFINES SIZE IN CAPTION OF OUTER AND INNER WHEEL FOR DESKTOP AND TABLET VIEW */
  font-size: 14px;
}

@media (max-width: 768px) {
  .wheelWrapper {
    /* DEFINES GLOBALE DIMENSIONS FOR MOBILE VIEW */
    font-size: 12px;
  }

  .outerWheelWrapper .bubbleLink figcaption > p {
    /* DEFINES SIZE IN CAPTION OF OUTER WHEEL FOR MOBILE VIEW */
    font-size: 18px !important;
  }

  .innerWheelWrapper a {
    /* DEFINES SIZE IN CAPTION OF INNER WHEEL FOR MOBILE VIEW */
    font-size: 18px;
  }
}

/* – – – – – – – – – – – */
/* IX.II BUILD – WHEEL FIGURE */

.wheelWrapper {
  position: relative;
  width: 100%;
  height: 40em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 10em 0;
}

.wheelHexagon {
  background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/wheel_figure/bg-hexagon.svg');
}

.wheelHeptagon {
  background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/wheel_figure/bg-heptagon.svg');
}

.innerWheelWrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.innerWheelWrapper li {
  position: absolute;
  display: block;
  height: 12em;
  width: 12em;

}

.innerWheelWrapper #wheelBubble_1 {
  top: -13em;
  left: -6em;
}

.innerWheelWrapper #wheelBubble_2 {
  top: -6em;
  left: 1em;
}

.innerWheelWrapper #wheelBubble_3 {
  top: 1em;
  left: -6em;
}

.innerWheelWrapper #wheelBubble_4 {
  top: -6em;
  left: -13em;
}

.innerWheelWrapper li > p {
  display: table;
  width: 100%;
  height: 100%;
}

.innerWheelWrapper a {
  position: relative;
  display: table-cell;
  border-radius: 50%;
  padding: 1em; 
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;

  transition: tranform .33s ease-out, -webkit-transform .33s ease-out, background-color -33s ease-out, z-index .33s ease-out;
  transform: scale(1);
  -webkit-transform: scale(1);
  background-color: rgba(0,0,0,.8);
  z-index: 0;
}

.innerWheelWrapper a:hover {
  transition: tranform .33s ease-out, -webkit-transform .33s ease-out, background-color -33s ease-out, z-index .33s ease-out;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  background-color: rgba(50,50,50,.9);
  z-index: 10;

}

.innerWheelWrapper li > p,
.innerWheelWrapper a,
.innerWheelWrapper a:link {
  color: #fff;
  line-height: 1.5em;
  text-decoration: none;
}

.outerWheelWrapper {
  position: relative;
  list-style: none;
  width: 50%;
  margin-left: 50%;
  top: 50%;
  padding: 0;
}

.outerWheelWrapper li {
  display: none;
  position: absolute;
  margin-left: -4em;
  margin-top: -4em;
}

.outerWheelWrapper figure {
  position: relative;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.outerWheelWrapper figcaption {
  position: absolute;
  line-height: 4em;
  display: block;
  top: 2em;
  left: 8em;
  padding-left: 1em;
  white-space: nowrap;
  transition: padding-left .33s ease-out;
}

.capt_left figcaption {
  left: auto;
  right: 8em;
  padding-right: 1em;
  text-align: right;
  transition: padding-right .33s ease-out;
}

.capt_right figcaption {
  right: auto;
  left: 8em;
  padding-left: 1em;
  text-align: left;
  transition: padding-left .33s ease-out;
}

.capt_bottom figcaption {
  top: 8em;
  left: 50%;
  right: auto;
  text-align: center;
  padding: 1em 0 0 0;
  margin-left: -10em;
  width: 20em;
  white-space: pre-wrap;
  line-height: 2.3em;
  transition: padding-top .33s ease-out;
}

.capt_top figcaption {
  top: auto;
  bottom: 8em;
  left: 50%;
  right: auto;
  text-align: center;
  padding: 0 0 1em 0;
  margin-left: -10em;
  width: 20em;
  white-space: pre-wrap;
  line-height: 2.3em;
  transition: padding-bottom .33s ease-out;
}

.outerWheelWrapper figcaption > p,
.innerWheelWrapper a {
  margin: 0;
}

.outerWheelWrapper img {
  position: relative;
  height: 8em;
  border-radius: 50%;
  cursor: pointer;
}

.wheelHexagon .outerWheelWrapper #group_1 {
  display: block;
  top: -20em;
  left: 0;
}

.wheelHexagon .outerWheelWrapper #group_2 {
  display: block;
  top: -10em;
  left: 17.5em;
}

.wheelHexagon .outerWheelWrapper #group_3 {
  display: block;
  top: 10em;
  left: 17.5em;
}

.wheelHexagon .outerWheelWrapper #group_4 {
  display: block;
  top: 20em;
  left: 0em;
}

.wheelHexagon .outerWheelWrapper #group_5 {
  display: block;
  top: 10em;
  left: -17.5em;
}

.wheelHexagon .outerWheelWrapper #group_6 {
  display: block;
  top: -10em;
  left: -17.5em;
}

.wheelHeptagon .outerWheelWrapper #group_1 {
  display: block;
  top: -20em;
  left: 0;
}

.wheelHeptagon .outerWheelWrapper #group_2 {
  display: block;
  top: -12.5em;
  left: 15.5em;
}

.wheelHeptagon .outerWheelWrapper #group_3 {
  display: block;
  top: 4.5em;
  left: 19.5em;
}

.wheelHeptagon .outerWheelWrapper #group_4 {
  display: block;
  top: 18em;
  left: 8.7em;
}

.wheelHeptagon .outerWheelWrapper #group_5 {
  display: block;
  top: 18em;
  left: -8.7em;
}

.wheelHeptagon .outerWheelWrapper #group_6 {
  display: block;
  top: 4.5em;
  left: -19.5em;
}

.wheelHeptagon .outerWheelWrapper #group_7 {
  display: block;
  top: -12.5em;
  left: -15.5em;
}

.wheelWrapper a.bubbleLink,
.wheelWrapper a.bubbleLink:link,
.wheelWrapper a.bubbleLink:visited {
  color: #000;
}


.wheelWrapper a.bubbleLink img {
  transition: transform .33s ease-out, -webkit-transform .33s ease-out, box-shadow .33s ease-out;
  transform: scale(1);
  -webkit-transform: scale(1);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  cursor: pointer;
}

.wheelWrapper a.bubbleLink:hover img,
.wheelWrapper a.bubbleLink:active img,
.wheelWrapper a.bubbleLink:focus img {
  transition: transform .33s ease-out, -webkit-transform .33s ease-out, box-shadow .33s ease-out;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  box-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

.wheelWrapper .capt_right a.bubbleLink:hover figcaption,
.wheelWrapper .capt_right a.bubbleLink:active figcaption,
.wheelWrapper .capt_right a.bubbleLink:focus figcaption {
  transition: padding-left .33s ease-out;
  padding-left: 1.5em;
}

.wheelWrapper .capt_left a.bubbleLink:hover figcaption,
.wheelWrapper .capt_left a.bubbleLink:active figcaption,
.wheelWrapper .capt_left a.bubbleLink:focus figcaption {
  transition: padding-right .33s ease-out;
  padding-right: 1.5em;
}

.wheelWrapper .capt_bottom a.bubbleLink:hover figcaption,
.wheelWrapper .capt_bottom a.bubbleLink:active figcaption,
.wheelWrapper .capt_bottom a.bubbleLink:focus figcaption {
  transition: padding-top .33s ease-out;
  padding-top: 1.5em;
}

.wheelWrapper .capt_top a.bubbleLink:hover figcaption,
.wheelWrapper .capt_top a.bubbleLink:active figcaption,
.wheelWrapper .capt_top a.bubbleLink:focus figcaption {
  transition: padding-bottom .33s ease-out;
  padding-bottom: 1.5em;
}

@media (max-width: 768px) {

  .wheelWrapper {
    margin: 10em 0em;
  }

  .outerWheelWrapper figcaption > p {
    margin: 0;
  }

  .innerWheelWrapper a {
    font-weight: 400;
  }

  .outerWheelWrapper figcaption {
    top: 2em;
    left: 8em;
    padding-left: 0;
  }

  .capt_mobile_bottom figcaption {
    top: 8em;
    left: 50%;
    right: auto;
    text-align: center;
    padding: .25em 0 0 0;
    margin-left: -10em;
    width: 20em;
    white-space: pre-wrap;
    line-height: 2.3em;
    transition: padding-top .33s ease-out;
  }

  .capt_mobile_top figcaption {
    top: auto;
    bottom: 9.5em;
    left: 50%;
    right: auto;
    text-align: center;
    padding: 0 0 1em 0;
    margin-left: -10em;
    width: 20em;
    white-space: pre-wrap;
    line-height: 2.3em;
    transition: padding-bottom .33s ease-out;
  }

  .wheelWrapper .capt_mobile_right a.bubbleLink:hover figcaption,
  .wheelWrapper .capt_mobile_right a.bubbleLink:active figcaption,
  .wheelWrapper .capt_mobile_right a.bubbleLink:focus figcaption {
    transition: padding-left .33s ease-out;
    padding-left: 1.5em;
  }

  .wheelWrapper .capt_mobile_left a.bubbleLink:hover figcaption,
  .wheelWrapper .capt_mobile_left a.bubbleLink:active figcaption,
  .wheelWrapper .capt_mobile_left a.bubbleLink:focus figcaption {
    transition: padding-right .33s ease-out;
    padding-right: 1.5em;
  }

  .wheelWrapper .capt_mobile_bottom a.bubbleLink:hover figcaption,
  .wheelWrapper .capt_mobile_bottom a.bubbleLink:active figcaption,
  .wheelWrapper .capt_mobile_bottom a.bubbleLink:focus figcaption {
    transition: padding-top .33s ease-out;
    padding-left: 0;
    padding-top: 1.5em;
  }

  .wheelWrapper .capt_mobile_top a.bubbleLink:hover figcaption,
  .wheelWrapper .capt_mobile_top a.bubbleLink:active figcaption,
  .wheelWrapper .capt_mobile_top a.bubbleLink:focus figcaption {
    transition: padding-bottom .33s ease-out;
    padding-left: 0;
    padding-bottom: 1.5em;
  }

}