﻿section {
  width: 100%;
  height: 540px;
  overflow: hidden;
}
section .fadeIn {
  opacity: 0;
  /* make things invisible upon start */

  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}
section .popping {
  -webkit-animation: scalePop 1s;
  -moz-animation: scalePop 1s;
  -o-animation: scalePop 1s;
  animation: scalePop 1s;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
section .poppingDown {
  -webkit-animation: scalePopDown 1s;
  -moz-animation: scalePopDown 1s;
  -o-animation: scalePopDown 1s;
  animation: scalePopDown 1s;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
section .away {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
section .closeWidgetButton {
  position: absolute;
  top: 42px;
  left: 912px;
  width: 36px;
  height: 35px;
  background-image: url('../img/close-icon.png');
  z-index: 100;
}
section .closeWidgetButton:hover {
  cursor: pointer;
}
section#how-is-used {
  background-image: url('../img/pattern_green.jpg');
  color: #fff;
}
section#how-is-used .background-image-container {
  background: url('../img/01-how-is-used-background-xl.png') no-repeat 50% 0%;
}
section#how-is-used .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#how-is-used .video_masker {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto 0 auto;
  background-image: url('../img/video_masker.png');
  width: 960px;
  height: 540px;
  z-index: 10;
}
section#how-is-used .hiu-playtoggle {
  position: absolute;
  background-image: url('../img/video_play_green.png');
  top: 400px;
  left: 820px;
  width: 50px;
  height: 50px;
  z-index: 10;
}
section#how-is-used .hiu-playtoggle:hover {
  cursor: pointer;
}
section#how-is-used .video-bubble {
  position: absolute;
  top: 134px;
  left: 685px;
  z-index: 100;
}
section#how-many-plants {
  background-color: #daf0fc;
}
section#how-many-plants .howContainer {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 100%;
}
section#how-many-plants .jvectormap-label {
  position: absolute;
  top: 100px;
  left: 10px;
  display: none;
  width: auto;
  padding: 5px 10px 5px 10px;
  height: auto;
  font-size: 14px;
  line-height: 21px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #105a39;
  color: #fff;
  background-color: #105a39;
  font-family: sans-serif, Verdana;
}
section#how-many-plants span {
  font-weight: bold;
}
section#how-many-plants .jvectormap-zoomin,
section#how-many-plants .jvectormap-zoomout {
  position: absolute;
  right: 25px;
  color: white;
  font-size: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background-image: url('../img/plus-icon-green.png');
}
section#how-many-plants .jvectormap-zoomin {
  top: 426px;
  background-image: url('../img/plus-icon-green.png');
}
section#how-many-plants .jvectormap-zoomout {
  top: 483px;
  background-image: url('../img/min-icon-green.png');
}
section#nuclear-fuel-cycle {
  background-image: url('../img/pattern_blue.jpg');
  color: #fff;
}
section#nuclear-fuel-cycle .background-image-container {
  background: url('../img/01-how-is-used-background-xl.png') no-repeat 50% 0%;
}
section#nuclear-fuel-cycle .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#nuclear-fuel-cycle .video_masker {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto 0 auto;
  background-image: url('../img/video_masker.png');
  width: 960px;
  height: 540px;
  z-index: 10;
}
section#nuclear-fuel-cycle .nfc-playtoggle {
  position: absolute;
  background-image: url('../img/video_play_blue.png');
  top: 400px;
  left: 820px;
  width: 50px;
  height: 50px;
  z-index: 10;
}
section#nuclear-fuel-cycle .nfc-playtoggle:hover {
  cursor: pointer;
}
section#nuclear-fuel-cycle .video-bubble {
  position: absolute;
  top: 134px;
  left: 685px;
  z-index: 100;
}
section#what-is-fision {
  background-image: url('../img/pattern_blue.jpg');
  color: #fff;
}
section#what-is-fision .background-image-container {
  background: url('../img/01-how-is-used-background-xl.png') no-repeat 50% 0%;
}
section#what-is-fision .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#what-is-fision .video_masker {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto 0 auto;
  background-image: url('../img/video_masker.png');
  width: 960px;
  height: 540px;
  z-index: 10;
}
section#what-is-fision .wif-playtoggle {
  position: absolute;
  background-image: url('../img/video_play_blue.png');
  top: 400px;
  left: 820px;
  width: 50px;
  height: 50px;
  z-index: 10;
}
section#what-is-fision .wif-playtoggle:hover {
  cursor: pointer;
}
section#what-is-fision .video-bubble {
  position: absolute;
  top: 134px;
  left: 685px;
  z-index: 100;
}
section#how-much-waste {
  background: url('../img/pattern_blue.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#how-much-waste .background-image-container {
  background: url('../img/05-how-much-waste-background-xl.png') no-repeat 50% 0%;
}
section#how-much-waste .plant-back {
  background-image: url('../img/hmw-plantback.png');
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 1910px;
  color: #000;
  z-index: 5;
}
section#how-much-waste .nuclearplant {
  background-image: url('../img/hmw-nuclearplant.png');
  position: absolute;
  height: 540px;
  width: 868px;
}
section#how-much-waste .coalplant {
  position: absolute;
  background-image: url('../img/hmw-coalplant.png');
  height: 540px;
  width: 940px;
  left: auto;
  right: 0;
}
section#how-much-waste .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#how-much-waste .showcoalplant {
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('../img/hmw-tocoal.png');
  z-index: 10;
}
section#how-much-waste .showcoalplant:hover {
  cursor: pointer;
}
section#how-much-waste .showcoalplantimage {
  position: absolute;
  width: 103px;
  height: 103px;
  background-image: url('../img/hmw-tocoal-image.png');
  z-index: 10;
}
section#how-much-waste .showcoalplantimage:hover {
  cursor: pointer;
}
section#how-much-waste .shownuclearplant {
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('../img/hmw-tonuclear.png');
  z-index: 10;
}
section#how-much-waste .shownuclearplant:hover {
  cursor: pointer;
}
section#how-much-waste .shownuclearplantimage {
  position: absolute;
  width: 103px;
  height: 103px;
  background-image: url('../img/hmw-tonuclear-image.png');
  z-index: 10;
}
section#how-much-waste .shownuclearplantimage:hover {
  cursor: pointer;
}
section#how-much-waste .hmw-imagecircle {
  width: 174px;
  height: 174px;
  z-index: 15;
}
section#how-much-waste .hmw-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-green.png');
  z-index: 15;
}
section#how-much-waste .hmw-infobutton:hover {
  cursor: pointer;
}
section#how-much-waste .hmw-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #6ddca9;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
  z-index: 15;
}
section#how-much-waste .hmw-infotext:hover {
  cursor: pointer;
}
section#how-much-waste .hmw-infotext.right {
  left: -280px;
}
section#how-much-waste .hmw-infotext.left {
  left: 42px;
}
section#how-much-waste .hmw-infotext.top {
  top: 16px;
}
section#how-much-waste .hmw-infotext.bottom {
  top: 16px;
}
section#what-plutonium {
  background: url('../img/pattern_blue.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#what-plutonium .background-image-container {
  background: url('../img/06-what-plutonium-background-xl.png') no-repeat 50% 0%;
}
section#what-plutonium .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#what-plutonium .wp-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-blue.png');
  z-index: 10;
}
section#what-plutonium .wp-infobutton:hover {
  cursor: pointer;
}
section#what-plutonium .wp-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #69d2e7;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
}
section#what-plutonium .wp-infotext:hover {
  cursor: pointer;
}
section#what-plutonium .wp-infotext.right {
  left: -280px;
}
section#what-plutonium .wp-infotext.left {
  left: 42px;
}
section#what-plutonium .wp-infotext.top {
  top: 16px;
}
section#what-plutonium .wp-infotext.bottom {
  top: 16px;
}
section#what-is-uranium {
  background: url('../img/pattern_green.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#what-is-uranium .background-image-container {
  background: url('../img/07-what-is-uranium-background-xl.png') no-repeat 50% 0%;
}
section#what-is-uranium .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#what-is-uranium .wu-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-green.png');
  z-index: 10;
}
section#what-is-uranium .wu-infobutton:hover {
  cursor: pointer;
}
section#what-is-uranium .wu-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #6ddca9;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
}
section#what-is-uranium .wu-infotext:hover {
  cursor: pointer;
}
section#what-is-uranium .wu-infotext.right {
  left: -280px;
}
section#what-is-uranium .wu-infotext.left {
  left: 42px;
}
section#what-is-uranium .wu-infotext.top {
  top: 16px;
}
section#what-is-uranium .wu-infotext.bottom {
  top: 16px;
}
section#ionizing-radiation {
  background: url('../img/pattern_pink.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#ionizing-radiation .background-image-container {
  background: url('../img/08-ionizing-radiation-background-xl.png') no-repeat 50% 0%;
}
section#ionizing-radiation .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#ionizing-radiation .ir-line-empty {
  position: absolute;
  left: 75px;
  top: 202px;
  width: 815px;
  height: 136px;
  background-image: url('../img/ir-line-empty.png');
}
section#ionizing-radiation .ir-line {
  position: absolute;
  left: 175px;
  top: 202px;
  width: 613px;
  height: 136px;
  background-image: url('../img/ir-line.png');
}
section#ionizing-radiation .ir-imagecircle {
  width: 165px;
  height: 165px;
  z-index: 10;
}
section#ionizing-radiation .ir-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-red.png');
  z-index: 10;
}
section#ionizing-radiation .ir-infobutton:hover {
  cursor: pointer;
}
section#ionizing-radiation .ir-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #c02942;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
}
section#ionizing-radiation .ir-infotext:hover {
  cursor: pointer;
}
section#ionizing-radiation .ir-infotext.right {
  left: -280px;
}
section#ionizing-radiation .ir-infotext.left {
  left: 42px;
}
section#ionizing-radiation .ir-infotext.top {
  top: 16px;
}
section#ionizing-radiation .ir-infotext.bottom {
  top: 16px;
}
section#source-radioactivity {
  background: url('../img/pattern_pink.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#source-radioactivity .background-image-container {
  background: url('../img/09-source-radioactivity-background-xl.png') no-repeat 50% 0%;
}
section#source-radioactivity .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#source-radioactivity .sr-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-red.png');
  z-index: 10;
}
section#source-radioactivity .sr-infobutton:hover {
  cursor: pointer;
}
section#source-radioactivity .sr-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #c02942;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
}
section#source-radioactivity .sr-infotext:hover {
  cursor: pointer;
}
section#source-radioactivity .sr-infotext.right {
  left: -280px;
}
section#source-radioactivity .sr-infotext.left {
  left: 42px;
}
section#source-radioactivity .sr-infotext.top {
  top: 16px;
}
section#source-radioactivity .sr-infotext.bottom {
  top: 16px;
}
section#banana-dose {
  background: url('../img/pattern_pink.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 540px;
}
section#banana-dose .background-image-container {
  background: url('../img/10-banana-dose-background-xl.png') no-repeat 50% 0%;
}
section#banana-dose .overall-container {
  position: relative;
  margin: 0 auto 0 auto;
  height: 540px;
  width: 964px;
  color: #000;
  z-index: 10;
}
section#banana-dose .draggableDiv {
  position: relative;
  left: -50;
  top: 0;
  height: 540px;
  width: 1362px;
  color: #000;
  z-index: 5;
  background: none;
}
section#banana-dose .bd-titel {
  background: url('../img/bd_titel.png');
  position: relative;
  width: 265px;
  height: 265px;
  left: -50px;
  top: 100px;
  z-index: 10;
}
section#banana-dose .bd-imagecircle {
  width: 165px;
  height: 165px;
  z-index: 10;
}
section#banana-dose .bd-valuecircle {
  width: 85px;
  height: 86px;
  z-index: 10;
}
section#banana-dose .bd-infobutton {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('../img/plus-icon-red.png');
  z-index: 10;
}
section#banana-dose .bd-infobutton:hover {
  cursor: pointer;
}
section#banana-dose .bd-infotext {
  position: relative;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  width: 250px;
  height: auto;
  background-color: #c02942;
  font-size: 14px;
  line-height: 21px;
  padding: 10px 10px 10px 15px;
  text-align: left;
  overflow: hidden;
}
section#banana-dose .bd-infotext:hover {
  cursor: pointer;
}
section#banana-dose .bd-infotext.right {
  left: -280px;
}
section#banana-dose .bd-infotext.left {
  left: 42px;
}
section#banana-dose .bd-infotext.top {
  top: 16px;
}
section#banana-dose .bd-infotext.bottom {
  top: 16px;
}
