﻿.app-content {
  overflow: visible;
}

#main-container {
  width:100%;
  height:100%;
  position:relative;
}

#animation-background {
  width: 42%;
  height: 60.3%;
  position:absolute;
  top: 7%;
  left: 56.3%;
  pointer-events:none;
}

#animation-background2 {
  width: 42.1%;
  height: 60.3%;
  position:absolute;
  top: 7%;
  left: 2.1%;
  pointer-events:none;
}

#arrow {
  width: 8%;
  height: 14.3%;
  position:absolute;
  top: 31%;
  left: 46.3%;
  pointer-events:none;
}

.swiffyAnimation {
  width: 21.3em;
  height: 14.95em;
  position:absolute;
  top: 5.7%;
  display:none;
}

#animation-1-swiffy {
  left: 56.3%;
}

#animation-2-swiffy {
  left: 2.1%;
}

.stopPlayButton {
  position:absolute;
  top:72%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  width: 3.3em;
  height: 3.3em;
  cursor:pointer;
}

#button1 {
  left: 74.2%;
}

#button2 {
  left: 19.2%;
}

.stopPlayButton.stop {
  background-image: url(../content/img/stop.png);
}

.stopPlayButton.play {
  background-image: url(../content/img/play.png);
}

.hemText {
  position:absolute;
  top: 90%;
  width: 42.3%;
  height:9%;
  color:black;
  font-size:1.15em;
  text-align:center;
}

#text1 {
  left: 56.3%;
}

#text2 {
  left: 2.4%;
}

.btn:focus {
  outline: 0;
}

.app-container {
  border:0 !important;
  background-color:transparent !important;
}

.app-help-wrapper {
  display:none !important;
}

.app-header {
  display: none !important;
}

.app-footer {
  display: none !important;
}
