@charset "utf-8";
/* 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');
}

.wheelOctagon {
  background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/wheel_figure/bg-octagon.svg');
  margin: 15em 0;
}

.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;
}

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

.wheelOctagon .outerWheelWrapper #group_2 {
  display: block;
  top: -14.5em;
  left: 14.5em;
}

.wheelOctagon .outerWheelWrapper #group_3 {
  display: block;
  top: 0;
  left: 19.5em;
}

.wheelOctagon .outerWheelWrapper #group_4 {
  display: block;
  top: 14.5em;
  left: 14.5em;
}

.wheelOctagon .outerWheelWrapper #group_5 {
  display: block;
  top: 20em;
  left: 0em;
}

.wheelOctagon .outerWheelWrapper #group_6 {
  display: block;
  top: 14.5em;
  left: -14.5em;
}

.wheelOctagon .outerWheelWrapper #group_7 {
  display: block;
  top: 0;
  left: -19.5em;
}

.wheelOctagon .outerWheelWrapper #group_8 {
  display: block;
  top: -14.5em;
  left: -14.5em;
}

.wheelOctagon .outerWheelWrapper #group_center {
  display: block;
  top: -2em;
  left: -2em;
}

#group_center img {
  height: 12em;
}

#group_center.capt_bottom figcaption { top: 12em; }
#group_center.capt_top figcaption { bottom: 12em; }


.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;*/
    margin-left: -8em;
    width: 16em;
    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;*/
    margin-left: -8em;
    width: 16em;
    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;
  }

}