@charset "utf-8";
@import "global.css";

@import "timeline.css";
@import "tiles.css";
@import "wheelFigure.css";

/*CSS Document */

/* – TABLE OF CONTENTS – */
/*   - I. GLOBAL SETTINGS  - outsourced */
/*     - I.I SETTINGS – OVERWRITE STYLES SETTINGS */
/*     - I.II SETTINGS – PRINT SETTINGS */
/*     - I.III SETTINGS – FOOTER ADJUSTMENT */
/*   - II. FIGURE – HISTORY/TIMELINE - outsourced */
/*   - 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 - deleted*/
/*   - VII. FIGURE – ECOTRON WEBSITE WHEEL - deleted */
/*   - VIII. TEXT ELEMENT – FLAGS */
/*   - IX. FIGURE – ORGANISATIONAL CHART */
/*   - IX. FIGURE – WHEEL FIGURE - outsourced */
/*     - IX.I CONFIGURATION – WHEEL FIGURE */
/*     - IX.II BUILD – WHEEL FIGURE */
/*   - X. RESEARCH AREAS 2020 */
/* – – – – – – – – – */


/* I. GLOBAL SETTINGS  */
/* – – – Outsourced to global.css, 20 Dec 2021 – – – – */


/* – – – – – – – – – */
/* II. FIGURE – HISTORY/TIMELINE */
/* – – – Outsourced to timeline.css – – – – */


/* – – – – – – – – – */
/* 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[summary="courseInformation"]  td {
  border: none;
}

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

table.courseWrapper table .open, table[summary="courseInformation"] .open { color: #75B241; }
table.courseWrapper table .closed, table[summary="courseInformation"] .closed { color: #ff0000; }

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

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

table.courseWrapper h1,
table[summary="courseInformation"] h1 {
  margin: 10px 0;
  padding: 0;
}
  
table.courseWrapper h2,
table[summary="courseInformation"] h2 {
  padding: 0 0 5px 0;
  margin: 0;
  font-size: 1em;
  border-bottom: 1px solid #000;
}

table.courseWrapper p {
  padding: 0;
}

table.courseInformation,
table[summary="courseInformation"] {
  border-top: 0;
  table-layout: fixed;
}


table.courseInformation tr:first-child td,
table[summary="courseInformation"] tr:first-child td {
  padding-bottom: 0;
  vertical-align: bottom;
}

table.courseInformation td,
table[summary="courseInformation"] td {
  padding: 0;
  background: transparent;
  border-left: 12px solid transparent;
}

table.courseInformation td:first-child,
table[summary="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;
}

.courseWrapper .circle-red,
.courseWrapper .circle-blue,
.courseWrapper .circle-green,
.courseWrapper .circle-yellow,
.courseWrapper .circle-black {
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.33);
  vertical-align: middle;
  margin-right: 5px;
}

.courseWrapper .circle-red { background-color: #DE2524; }
.courseWrapper .circle-blue { background-color: #4F8FCC; }
.courseWrapper .circle-green { background-color: #75B843; }
.courseWrapper .circle-yellow { background-color: #FFD600; }
.courseWrapper .circle-black { background-color: #4A5D67; }
    
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-program .slot-subtle {
  opacity: 0.33;
}

.idivConf-program .slot-subtle:hover {
  opacity: 0.8;
}

.idivConf-program .slot-subtle,
.idivConf-program .slot-subtle:hover {
  transition: all ease .33s;
}

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

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

.idivConf-slot.slot-intended,
.idivConf-slot.slot-intended-only {
  width: 96%;
  margin-left: 2%;
}

.idivConf-slot.slot-intended {
  border-top: 0;
}

.idivConf-slot.slot-intended-only {
  border-top: 1;
}

.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; }
.grey-border, .gray-border { border-left: 5px solid #627a87 !important; }

.yellow-border li:first-child, .green-border li:first-child, .blue-border li:first-child, .red-border li:first-child, .red-border li:first-child, .gray-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: #a8a8a8;
  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 {
  box-sizing: border-box;
  padding: .5em;
  border-right: 1px solid #a8a8a8;
  border-bottom: 1px solid #a8a8a8;
}

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

.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,
.idivConf-program .sessionInfo {
  line-height: 1.3em;
}

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

.idivConf-program .sessionTimeLocation {
  color: #7b7b7b;
  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-5 .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; }
.idivConf-program .location-5 .sessionLocation:before { background-color: #627a87; }

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

  .idivConf-program .slot-subtle {
    opacity: 0.5;
  }

  .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-gray:before, .square-gray: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 */
/* – – – Deleted, 20 Dec 2021 – – – – */

/* – – – – – – – – – */
/* VII. FIGURE – ECOTRON WEBSITE WHEEL */
/* – – – Deleted, 20 Dec 2021 – – – – */

/* – – – – – – – – – */
/* 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#unit-welcomecentre .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-welcomeCentre.png'); }
.unit#unit-sciencePolicy .unitWrapper { background-image: url('https://www.idiv.de/fileadmin/content/HTML_module_files/Organisational_Chart/bg-sciencePolicy-2.png'); }


.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 */
/* – – – Outsourced to wheelFigure.css, 20 Dec 2021 – – – – */

/* – – – – – – – – – – – */
/* X. RESEARCH AREAS 2020 */
/* – – – Outsourced to wheelFigure.css, 20 Dec 2021 – – – – */
/* Bubble with icons to navigate and show the five research areas from 2020 */



.raWrapper {
    position: relative;
    list-style: none;
    padding: 1em 0;
    text-align: center;
}

.raLayout-2 {
    padding: 3em;
    box-sizing: border-box;
}

.hide-layout-2 {
    display: none;
}

.raLayout-2 .raLabel {
    position: absolute;
    z-index: 100;
    top: 7em;
    text-transform: uppercase;
}

.raLayout-2 .raItem:first-child .raLabel {
    top: -2em;
}

.raItem {
    position: relative;
    display: inline-block;
    width:9em;
    margin: 0;
    font-size: 14px;
    vertical-align: top;
}

.raLayout-2 .raItem {
    position: relative;
    height: 9em;
}

.raLayout-2 .raItem:after {
    position: absolute;
    content: '';
    top: -2em;
    left: -2em;
    width: 13em;
    height: 13em;
    border-radius: 50%;
    transition: all .33s ease;
    opacity: .3;
}

.raItem:nth-child(1) { z-index: 0; }
.raItem:nth-child(2) { z-index: 10; }
.raItem:nth-child(3) { z-index: 20; }
.raItem:nth-child(4) { z-index: 30; }
.raItem:nth-child(5) { z-index: 40; }

.raLayout-2 .raItem:first-child,
.raLayout-2 .raItem:last-child {
    display: block;
    left: 50%;
    margin-left: -4.5em;
}

.raLayout-2 #ra-3 {
    z-index: 100;
}

.raItem a,
.raItem a:link,
.raItem a:hover  {
    box-sizing: border-box;
    display: block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: #333333;
}

.raItem:hover,
.raItem.active {
    z-index: 100;
}

.raIcon {
    display: inline-block;
    width:105%;
    height: auto;
    padding: 0;
    margin: 0;
    background-color: rgb(95,122,135);
    background-color: rgba(95,122,135,.8);
    border-radius: 50%;
    transform: scale(1.1);
    z-index: 0;
    transition: all .33s ease;
}

.raIcon,
.raLayout-2 .raItem:after {
    background-color: rgb(95,122,135);
    background-color: rgba(95,122,135,.8);
    transition: all .33s ease;
}

.raLayout-2 .raIcon {
    position: relative;
    width: 60%;
    margin: 1.8em;
    z-index: 100;
}
  
.raItem:hover .raIcon,
.raItem.active .raIcon {
    transform: scale(1.2);
    transition: all .33s ease;
    box-shadow: 0 0 2em rgba(0,0,0,.2);
}

.raAllOn .raItem:nth-child(1) .raIcon,
.raItem:nth-child(1):hover .raIcon,
.raItem:nth-child(1).active .raIcon,
.raLayout-2.raAllOn .raItem:nth-child(1):after,
.raLayout-2 .raItem:nth-child(1).active:after,
.raLayout-2 .raItem:nth-child(1):hover:after { background-color: #e3bf00; }

.raAllOn .raItem:nth-child(2) .raIcon,
.raItem:nth-child(2):hover .raIcon,
.raItem:nth-child(2).active .raIcon,
.raLayout-2.raAllOn .raItem:nth-child(2):after,
.raLayout-2 .raItem:nth-child(2).active:after,
.raLayout-2 .raItem:nth-child(2):hover:after { background-color: #acbb20; }

.raAllOn .raItem:nth-child(3) .raIcon,
.raItem:nth-child(3):hover .raIcon,
.raItem:nth-child(3).active .raIcon,
.raLayout-2.raAllOn .raItem:nth-child(3):after,
.raLayout-2 .raItem:nth-child(3).active:after,
.raLayout-2 .raItem:nth-child(3):hover:after { background-color: #74b841; }

.raAllOn .raItem:nth-child(4) .raIcon,
.raItem:nth-child(4):hover .raIcon,
.raItem:nth-child(4).active .raIcon,
.raLayout-2.raAllOn .raItem:nth-child(4):after,
.raLayout-2 .raItem:nth-child(4).active:after,
.raLayout-2 .raItem:nth-child(4):hover:after { background-color: #61a386; }

.raAllOn .raItem:nth-child(5) .raIcon,
.raItem:nth-child(5):hover .raIcon,
.raItem:nth-child(5).active .raIcon,
.raLayout-2.raAllOn .raItem:nth-child(5):after,
.raLayout-2 .raItem:nth-child(5).active:after,
.raLayout-2 .raItem:nth-child(5):hover:after { background-color: #4e8fcc; }

.raLayout-2.raAllOn .raItem:nth-child(1):after,
.raLayout-2 .raItem:nth-child(1).active:after,
.raLayout-2 .raItem:nth-child(1):hover:after { opacity: .6; }

.raLayout-2.raAllOn .raItem:nth-child(2):after,
.raLayout-2 .raItem:nth-child(2).active:after,
.raLayout-2 .raItem:nth-child(2):hover:after { opacity: .6; }

.raLayout-2.raAllOn .raItem:nth-child(3):after,
.raLayout-2 .raItem:nth-child(3).active:after,
.raLayout-2 .raItem:nth-child(3):hover:after { opacity: .6; }

.raLayout-2.raAllOn .raItem:nth-child(4):after,
.raLayout-2 .raItem:nth-child(4).active:after,
.raLayout-2 .raItem:nth-child(4):hover:after { opacity: .6; }

.raLayout-2.raAllOn .raItem:nth-child(5):after,
.raLayout-2 .raItem:nth-child(5).active:after,
.raLayout-2 .raItem:nth-child(5):hover:after { opacity: .6; }

.raIcon img {
    width: 56%;
    margin: 22% 0;
}

.raLabel {
    font-family: 'Roboto', sans-serif;
    display: block;
    width: 80%;
    font-size: .9em;
    font-weight: 400;
    line-height: 1.2em;
    margin-left: 10%;
    padding-top: 2em;
    text-decoration: none;
    transition: all .33s ease;
}
    
.raItem:hover .raLabel,
.raItem.active .raLabel {
    font-weight: 700;
    transition: all .33s ease;
}

.only-mobile { display: none; }

@media (max-width: 768px) {

    .raWrapper {
        padding: 1em 0;
        width: 100%;
    }

    .raItem { width: 20%; }

    .raIcon { width: 100%; }

    .raLabel {
        padding-top: 1em;
        font-size: 1.6em;
    }

    .hide-mobile { display: none; }

    .raLayout-2 {
        padding: 1em;
        box-sizing: border-box;
    }

    .raLayout-2 #ra-3 {
        z-index: 20;
    }

    .raLayout-2 .raItem,
    .raLayout-2 .raItem:first-child,
    .raLayout-2 .raItem:last-child {
        display: block;
        margin: 0;
        left: 0;
        width: 100%;
    }

    .raLayout-2 .raItem a {
        display: block;
        text-align: left;
    }

    .raLayout-2 .raItem:after {
        display: none;
    }

    .raLayout-2 .raIcon {
        width: 9em;
        text-align: center;
    }

    .raLayout-2 .raLabel,
    .raLayout-2 .raItem:first-child .raLabel,
    .raLayout-2 .raIcon {
        display: inline-block;
        position: relative;
        top: 0;
        vertical-align: top;
        margin: 0;
    }

    .raLayout-2 .raLabel,
    .raLayout-2 .raItem:first-child .raLabel {
        width: auto;
        margin: 1em 0 0 1em;
    }

}