* {
box-sizing: Border-box; }

html, body {
  overflow: hidden; }

body {
  position: absolute;
  padding: 0;
  margin: 0;
  font-size: 20pt;
  font-family: 'Helvetica Neue Light';
  /*background:white;*/
  /*background-image:url(assets/sandmann/background.jpg);*/
  /*background-size:contain;*/
  /*background-repeat:no-repeat;*/

  /*background: #5a656f url('assets/bg_app.jpg') no-repeat left top;
  background-size: 100% 100%;*/ }

#background_image {
  position:absolute;
  z-index:-5;
}

#app-container {
  position:absolute;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

#playerLoading {
  width:100%;
  height:100%;
  position:absolute;
  margin:0;
  background:black;
  z-index:10;
  display:none;
}

#loading {
  width:198px;
  height:198px;
  margin-left:auto;
  margin-right:auto;
  background-image:url(assets/sandmann/loading.gif);
}

#player {
  width:100%;
  height:100%;
  z-index:5;
  display:none;
}

#video-controls {
  width:100%;
  height:20%;
  position:absolute;
  margin:-15% 0 0 0;
  text-align: center;
  display:none;
}

#video-buttons {
  width:725px;
  height:145px;
  /*float:left;*/
  margin:auto;
}

#video-buttons .video-button {
  width:145px;
  height:145px !important;
  float:left;
  margin:0;
  background-repeat:no-repeat;
}

#video-buttons .video-button#video-button-01 {
  background:url(assets/sandmann/controls-sprite.gif) 0 -145px;
  /*background-image:url(assets/sandmann/close.png);*/
}

#video-buttons .video-button#video-button-02 {
  background:url(assets/sandmann/controls-sprite.gif) -145px 0;
}

#video-buttons .video-button#video-button-03 {
  background:url(assets/sandmann/controls-sprite.gif) -290px -290px;
}

#video-buttons .video-button#video-button-04 {
  background:url(assets/sandmann/controls-sprite.gif) -435px -580px;
}

#video-buttons .video-button#video-button-05 {
  background:url(assets/sandmann/controls-sprite.gif) -580px 0;
}

#video-leiste {
  width:100%;
  height:30%;
  float:left;
  margin:0;
  font-family:Arial;
  font-size:60%;
}

#current-time {
  width:3%;
  height:100%;
  float:left;
  margin:0;
  line-height:150%;
  text-align:center;
}

#end-time {
  width:3%;
  height:100%;
  float:left;
  margin:0;
  line-height:150%;
  text-align:center;
}

#progress-wrapper {
  width:94%;
  height:10%;
  float:left;
  margin:0.5% 0 0 0;
  background:white;
  border:1px solid black;
}

#progress-bar {
  height:100%;
  float:left;
  margin:0;
  background:black;
}

#karrussell-wrapper {
  width:100%;
  height:49%;
  margin:14.25% 0 0 0;
  position:absolute;
}

.karrussell-slot {
  width:18.65%;
  height:37.8%;
  float:left;
}

#karrussell-left {
  margin:7.3% 0 0 9.1%;
  background-size:cover;
}

#karrussell-center {
  width:40.05%;
  height:81.9%;
  margin:0 0 0 2.15%;
  background-size:cover;
}

#karrussell-right {
  margin:7.3% 0 0 2.15%;
  background-size:cover;
}

#title-field {
  width:100%;
  height:8%;
  position:absolute;
  margin:38% 0 0 0;
  font-family: Arial;
  text-align:center;
  line-height:160%;
  color:white;
  overflow:hidden;
  font-size:26px;
}

#controls-legende {
  width:90%;
  height:54px;
  position:absolute;
  margin:50% 0 0 5%;
}

#controls-legende .legende-item {
  width:20%;
  height:100%;
  float:left;
  margin:0 0 0 0;
}

#controls-legende .legende-item .legende-pic {
  height:50px;
  width:50px;
  float:left;
  margin:0;
  background-repeat:no-repeat;
}

#goHistoryDown {
  position: relative;
  color: white !important;
  width:100px;
  height:60px;
  position:absolute;
  margin:42% 0 0 47.8%;
  font-family: Arial;
  text-align:center;
  line-height:160%;
  color:white;
  overflow:hidden;
  font-size:26px;
  background-image:url(assets/sandmann/pfeil_down.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#goHistoryUp {

  color: white !important;
  width:100px;
  height:60px;
  position:absolute;
  margin:5% 0 0 47.8%;
  font-family: Arial;
  text-align:center;
  line-height:160%;
  color:white;
  overflow:hidden;
  font-size:26px;
  background-image:url(assets/sandmann/pfeil_up.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#boxHeadline {

  position: absolute;
  margin: 8% 0 0 0;
  color: white !important;
  width:100%;
  height:60px;
  font-family: Arial;
  text-align:center;
  line-height:160%;
  color:white;
  overflow:hidden;
  font-size:42px;
}

.selectedControl {
  box-shadow: 0px 0px 5px 5px #FFFFFF;
}

.notSelectedControl {
  box-shadow: none;
  background-color: .red !important;
}

#legende-text-01, #legende-text-02, #legende-text-03 {
   width: 100% !important;
   text-align: center !important;
}

#exitApp .legende-pic {
   align-content: center !important;
   margin-left: 20% !important;

}

#exitApp .legende-text {
   align-content: center !important;
   margin-left: 20px !important;
   width: 40% !important;
}

#controls-legende .legende-item .legende-pic#legende-pic-01 {
  background-image:url(assets/sandmann/pfeil_links.png);
  background-position:0 0;
}

#controls-legende .legende-item .legende-pic#legende-pic-02 {
  background-image:url(assets/sandmann/impressum_pfeil_up.png);
  background-position:0 4px;
}

#controls-legende .legende-item .legende-pic#legende-pic-03 {
  background-image:url(assets/sandmann/impressum_pfeil_down.png);
  background-position:0 0;
}

#controls-legende .legende-item .legende-text {
  width:75%;
  height:100%;
  float:left;
  font-family: Arial;
  font-size:26px;
  line-height: 54px;
  color:white;
}

#impContainer {
  position:absolute;
  width:67.8%;
  height:63.5%;
  margin:10.84% 0 0 16%;
  display:none;
}

#impTextWrapper {
  width:100%;
  height:100%;
  float:left;
  overflow:hidden;
}

#impText {
  width:100%;
  float:left;
  margin:0;
  padding:0 2% 0 2%;
  font-family: Arial;
  font-size:23px;
}

#datContainer {
  position:absolute;
  width:67.8%;
  height:63.5%;
  margin:10.84% 0 0 16%;
  display:none;
}

#datTextWrapper {
  width:100%;
  height:100%;
  float:left;
  overflow:hidden;
}

#datText {
  width:100%;
  float:left;
  margin:0;
  padding:0 2% 0 2%;
  font-family: Arial;
  font-size:23px;
}

#scrollButtonsWrapper {
  width:100%;
  height:10%;
  float:left;
  margin:2% 0 0 -1%;
}

#impBackText {
  width:40%;
  height:100%;
  float:left;
  margin:0;
  font-family: Arial;
  line-height:220%;
  color:white;
  font-size:24px;
}

#optOutTrigger {
  width:48%;
  height:100%;
  float:left;
  margin:0;
  font-family: Arial;
  line-height:200%;
  color:white;
  font-size:24px;
}

#optOutPic {
  width:20px;
  height:50px;
  float:left;
  background-image:url(assets/sandmann/pfeil_rechts.png);
  background-repeat:no-repeat;
  background-position:-19px 0;
}

#optOutText {
  width:90%;
  height:100%;
  float:left;
  overflow:hidden;
}

#scrollUp {
  width:44px;
  height:42px;
  float:right;
  margin:4px 0 0 0;
  background-image:url(assets/sandmann/impressum_pfeil_up.png);
  visibility:hidden;
}

#scrollDown {
  width:44px;
  height:42px;
  float:right;
  margin:4px 0 0 0;
  background-image:url(assets/sandmann/impressum_pfeil_down.png);
  visibility:hidden;
}

.app-main-container {
  position: relative;
  width: inherit;
  height: inherit;
  overflow: hidden;
}

.app-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: #000000; }

.app-overlay-message {
  color: #e8e8e8;
  text-align: center;
  margin-top: 25%; }

.content-load-spinner {
  margin: 6em auto;
  font-size: 10px;
  position: absolute;
  top: 220px;
  left: 580px;
  z-index: 600;
  text-indent: -9999em;
  border-top: 1.2em solid rgba(255, 255, 255, 0.2);
  border-right: 1.2em solid #ffffff;
  border-bottom: 1.2em solid #ffffff;
  border-left: 1.2em solid #ffffff;
  -webkit-animation: spin 1.3s infinite linear;
  -moz-animation: spin 1.3s infinite linear;
  animation: spin 1.3s infinite linear; }

.content-load-spinner, .content-load-spinner:after {
  border-radius: 50%;
  width: 15em;
  height: 15em; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

@media (-webkit-min-device-pixel-ratio: 1.5) {
  .player-controls-button-back {
    position: absolute;
    display: block;
    float: left;
    top: 10px;
    left: 30px; }

  .detail-row-container-buttons {
    bottom: 10px; }
 }