/* ibm-plex-sans-condensed-300 - latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ibm-plex-sans-condensed-v6-latin-300.eot'); /* IE9 Compat Modes */
  src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'),
       url('../fonts/ibm-plex-sans-condensed-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-300.svg#IBMPlexSansCondensed') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-condensed-regular - latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'),
       url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.svg#IBMPlexSansCondensed') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-condensed-500 - latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-condensed-v6-latin-500.eot'); /* IE9 Compat Modes */
  src: local('IBM Plex Sans Condensed Medium'), local('IBMPlexSansCond-Medium'),
       url('../fonts/ibm-plex-sans-condensed-v6-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-500.svg#IBMPlexSansCondensed') format('svg'); /* Legacy iOS */
}

/* ibm-plex-sans-condensed-700 - latin */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans-condensed-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local('IBM Plex Sans Condensed Bold'), local('IBMPlexSansCond-Bold'),
       url('../fonts/ibm-plex-sans-condensed-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ibm-plex-sans-condensed-v6-latin-700.svg#IBMPlexSansCondensed') format('svg'); /* Legacy iOS */
}


body {
  font-family: 'IBM Plex Sans Condensed',sans-serif;
  font-weight: 400;
}

/*
=================================
Layout
=================================
*/

.emu-container-y {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}

.emu-main-container {
  flex: 1 0 auto;
}

.emu-header-area {
  padding-top: 5rem;
  padding-bottom: 1.5rem;
}

/*
=================================
other Styles
=================================
*/

.emu-logo {
  max-width: 13rem;
  position: relative;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 375px) {
  .emu-logo {
    max-width: 16rem;
  }
}

@media (min-width: 576px) {
  .emu-logo {
    max-width: 22rem;
  }
}

a.externer-link::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 8 8'%3E%3Cpath d='M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z' style='fill:%23007bff;'/%3E%3C/svg%3E") left no-repeat;
    /* open-iconic-master - external-link.svg */
}

a.externer-link:hover::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 8 8'%3E%3Cpath d='M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z' style='fill:%230056b3;'/%3E%3C/svg%3E") left no-repeat;
}

/* Icons */

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  stroke: currentColor;
  stroke-width: 0;
  width: 1em;
}

/* footer area */

.emu-footer-area {
  font-size: 0.875rem;
}

/*
=================================
Farbtafel Isotope
=================================
*/

/* ---- grid Farbtafel ---- */

.farbtafel {
  padding: 1px;
}

/* clear fix */
.farbtafel:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .elemente ---- */

.elemente {
  position: relative;
  float: left;
  width: calc(33.3333% - 0.16875rem);
  margin: 1px;
  padding: 10px;
}

.elemente:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.elemente:hover, .elemente:focus {
  cursor: pointer;
  opacity: 0.7;
}

.elemente > * {
  margin: 0;
  padding: 0;
}

.elemente .symbol {
  position: absolute;
  left: 8px;
  top: 4px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: white;
}

.elemente .name {
  position: absolute;
  left: 8px;
  bottom: 36px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.elemente .gruppe {
  position: absolute;
  left: 8px;
  bottom: 26px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  font-weight: 300;
  line-height: 1;
}

.elemente .number {
  position: absolute;
  right: 8px;
  top: 4px;
}

.elemente .masse {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.elemente .vorkommen {
  position: absolute;
  right: 22px;
  bottom: 8px;
  font-size: 0;
}

.nat /*1*/ {
  background: url(../template-images/natuerlich.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

.radio /*2*/ {
  background: url(../template-images/radioaktiv.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

.synth /*3*/ {
  background: url(../template-images/synthetisch.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

.elemente .aggregat {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 0;
}

.fest /*1*/ {
  background: url(../template-images/fest.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

.fluessig /*2*/ {
  background: url(../template-images/fluessig.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

.gas /*3*/ {
  background: url(../template-images/gas.svg) left no-repeat;
  width: 10px;
  height: 10px;
}

@media (min-width: 576px) {
  .elemente {
    width: calc(20% - 0.15rem);
  }

  .elemente .symbol {
    font-size: 42px;
  }
}

@media (min-width: 768px) {
  .elemente {
    width: calc(16.6666% - 0.15rem);
  }

  .elemente .name {
    bottom: 40px;
    font-size: 12px;
  }

  .elemente .gruppe {
    bottom: 28px;
    font-size: 10px;
  }
}

@media (min-width: 992px) {
  .btn-secondary {
    font-size: 1rem;
  }

  .elemente {
    width: calc(11.111111% - 0.140625rem);
  }

  .elemente .name {
    bottom: 36px;
  }

  .elemente .gruppe {
    bottom: 25px;
    font-size: 9px;
  }
}

@media (min-width: 1200px) {
  .elemente {
    width: calc(10% - 0.141rem);
  }

  .elemente .name {
    bottom: 40px;
  }

  .elemente .gruppe {
    bottom: 28px;
    font-size: 10px;
  }
}

/*
=================================
Farbtafel Modal
=================================
*/

.modal-footer {
  justify-content: center;
}

.close {
  font-size: 2.5rem;
  font-weight: 400;
}

.modal-header .close {
  padding: 0.5rem 1rem 1rem;
}

.emu-cell {
  display: inline-block;
  width: 50%;
}

.emu-cell-1 {
  margin-right: -0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
}

.emu-cell-2 {
  font-weight: 500;
  padding: 0.25rem;
}

.cell-bg-color {
  background-color: #f7f7f7;
}

@media (min-width: 576px) {
  .emu-cell {
    display: table-cell;
    width: auto;
  }
  .table-100 {
    width: 100%;
  }
}

/*
=================================
Legende
=================================
*/

.cat {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.leg-symbol {
  display: inline-block;
  margin-right: 0.375rem;
}

h3.modul-title {
  display: inline-block;
  font-size: 1rem;
  padding: 0.25rem 1rem;
}

.legende {
  font-size: 0.875rem;
}

/*
=================================
Canvas - Info & Navi
=================================
*/


/* Info Icon (Canvas Trigger) und Styleswitcher: */

.btn-toggle {
  border-radius: 0 0 0 0.25rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 1;
}

.icon-info, .icon-close {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 992px) {
  .btn-toggle {
    border-radius: 0.25rem 0 0 0.25rem;
    top: 2.75rem;
  }
}

/* Menu Styles */

.emu-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.emu-menu a,
.emu-menu .btn {
  border-bottom: none;
  line-height: 1;
  text-decoration: none;
  display: block;
  padding: 0.7rem 1rem;
  transition-property: none;
}

.emu-menu input,
.emu-menu select,
.emu-menu a,
.emu-menu button {
  margin-bottom: 0;
}

.emu-menu input {
  display: inline-block;
}

/* Navbar (Off Canvas), kommt von rechts. */

.emu-canvas-right {
  background: #f2f3f8;
  flex: 1 1 auto;
  position: fixed;
  top: 0;
  width: 100%;
  right: -101%;
  height: 100%;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: 0.25s ease;
  -moz-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease;
/*  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);*/
  overflow-y: auto;
  z-index: 20;
}

.emu-canvas-right.active {
  -webkit-transform: translate(-100%, 0px);
  -moz-transform: translate(-100%, 0px);
  -o-transform: translate(-100%, 0px);
  -ms-transform: translate(-100%, 0px);
  transform: translate(-101%, 0px);
}

/*@media (min-width: 992px) {
  .emu-canvas-right {
    width: 40rem;
    right: -40rem;
  }

  .emu-canvas-right.active {
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-40rem, 0px);
  }
}*/

/* Hauptnavigation (Primary Nav) Menüpunkte. */

.emu-primarynav {
  display: flex;
  flex-flow: column nowrap;
  text-transform: uppercase;
  font-size: 1.125rem;
  margin-top: 8rem;
}

.emu-primarynav li {
  border-top: 1px solid #1e467b;
  display: inline-block;
  list-style: outside none none;
}

.emu-primarynav>li:last-child {
  border-bottom: 1px solid #1e467b;
}

.emu-primarynav a {
  padding: 1rem 1.5rem;
  color: #1e467b;
  position: relative;
  letter-spacing: 1px;
  text-decoration: none;
}

.emu-primarynav a:hover,
.emu-primarynav a:focus {
  background-color: #285ea6;
  color: #eee;
  /*transition: all 0.35s ease;*/
}

.emu-primarynav li.active a {
  background-color: #193b67;
  color: #eee;
  cursor: default;
}

.emu-primarynav li.active a:focus {
  color: red;
}

/*
=================================

=================================
*/