#main-container {
  width:100%;
  height:100%;
  position:relative;
  background:#2A547C;
}

#sub-container {
  background-image: url(../content/img/bg.jpg);
  width: 92.3%;
  height: 85.6%;
  position: absolute;
  top: 7.5%;
  right: 3.8%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

body.en #sub-container, body.zh #sub-container , body.vi #sub-container {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.inactive {
  background-color:grey !important;
}

#manof-img {
  position: absolute;
  width: 4em;
  height: 4.1em;
  bottom: 15.9%;
  right: 28.7%;
}

#turbine-img {
  position: absolute;
  width: 4.4em;
  height: 2.6em;
  bottom: 31.6%;
  right: 56.5%;
}

.swiffy-container {
  position: absolute;
  pointer-events: none;
  display:none;
}

#animation1 {
  width: 9.8em;
  height: 26.2%;
  top: 62%;
  left: 28.4em;
}

#animation2 {
  width: 8.5em;
  height: 7.9%;
  top: 58.9%;
  left: 29.6em;
}

#animation3 {
  width: 3.5em;
  height: 14%;
  top: 51.5%;
  left: 23.7em;
}

#animation4 {
  width: 16%;
  height: 16%;
  top: -1.6%;
  left: 25.6em;
}

#animation5 {
  width: 20.3%;
  height: 30.7%;
  top: 10%;
  left: 6.1em;
}

#animation7 {
  width: 9.9em;
  height: 42%;
  top: 55.6%;
  left: 14em;
}

#animation7cjs {
  width: 9.9em;
  height: 40%;
  top: 54.7%;
  left: 14em;
  position:absolute;
  pointer-events: none;
  display:none;
}

.en #animation7 {
  width: 11.5em !important;
  top: 56% !important;
  left: 13.5em !important;
}

.zh #animation7 {
  width: 11.7em !important;
  top: 56% !important;
  left:29%;
}

.vi #animation7 {
  width: 10.8em !important;
  top: 55% !important;
  left: 13.9em !important;
}

#animation8 {
  width: 26%;
  height: 18%;
  top: 36%;
  left: 1%;
}

#sequence-animation {
  width: 48.7em;
  height: 98%;
  top: 1.3%;
  left: -1em;
  -moz-transform: scaleX(0.95) scaleY(1.03);
  -ms-transform: scaleX(0.95) scaleY(1.03);
  -o-transform: scaleX(0.95) scaleY(1.03);
  -webkit-transform: scaleX(0.95) scaleY(1.03);
  transform: scaleX(0.95) scaleY(1.03);
}

.en #sequence-animation, .zh #sequence-animation,  .vi #sequence-animation {
  width: 51.3em !important;
  height: 98%;
  top: 1.1% !important;
  left: -1.6em !important;
  -moz-transform: scaleX(0.97) scaleY(1.01) !important;
  -ms-transform: scaleX(0.97) scaleY(1.01) !important;
  -o-transform: scaleX(0.97) scaleY(1.01) !important;
  -webkit-transform: scaleX(0.97) scaleY(1.01) !important;
  transform: scaleX(0.97) scaleY(1.01) !important;
}

.ar #sequence-animation,.he #sequence-animation {
  width: 51.3em !important;
  height: 98%;
  top: 1.1% !important;
  left: -1.6em !important;
  -moz-transform: scaleX(0.97) scaleY(1.01) !important;
  -ms-transform: scaleX(0.97) scaleY(1.01) !important;
  -o-transform: scaleX(0.97) scaleY(1.01) !important;
  -webkit-transform: scaleX(0.97) scaleY(1.01) !important;
  transform: scaleX(0.97) scaleY(1.01) !important;
}

#animationscjs {
  width: 48.2em !important;
  height: 99%;
  top: 1.1% !important;
  left: -1em !important;
  position:absolute;
  -moz-transform: scaleX(0.97) scaleY(1.01) !important;
  -ms-transform: scaleX(0.97) scaleY(1.01) !important;
  -o-transform: scaleX(0.97) scaleY(1.01) !important;
  /* -webkit-transform: scaleX(0.97) scaleY(1.01) !important; */
  /* transform: scaleX(0.97) scaleY(1.01) !important; */
  pointer-events:none;
  display:none;
}

#text-container {
  display:none;
  position:absolute;
  padding: 0.6em;
  top:0.5em;
  right: 0.5em;
  width: 9.9em;
  height: 10.9em;
  background-color:white;
  border-radius:1em;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.samsung #text-container {
width:10.6em;
}

#text-title {
  position:absolute;
  top:0;
  width: 89%;
  text-align:right;
  direction:rtl;
  font-size: 1.2em;
  font-weight: bold;
  font-family: arial;
}

body.en #text-title {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 0.95em;
  top: 1em;
}

body.vi #text-title {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 0.9em;
  top: 1em;
}

body.zh #text-title {
    -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 1em;
  top: 1em;

}
body.ar #text-title {
 /* -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);*/
  direction: rtl;
  text-align: right;
  font-size: 1em;
  top: 1em;

}

#text-content {
  position:absolute;
  top: 1.5em;
  width: 89.6%;
  text-align:right;
  direction:rtl;
  font-size:1em;
}
body.en #text-content{
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 0.8em;
  top: 3em;
}

body.vi #text-content{
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 0.8em;
  top: 3em;
}

body.zh #text-content {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  direction: ltr;
  text-align: left;
  font-size: 0.9em;
  top: 3em;
}

body.ar #text-content {
  /*-moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);*/
  direction: rtl;
  text-align: right;
  font-size: 0.9em;
  top: 3em;
}

.blueButton {
  background-color:#0072BB;
  border: 0.15em solid white;
  border-radius:50%;
  width: 1.1em;
  height: 1.1em;
  text-align:center;
  vertical-align:middle;
  padding-bottom: 0em;
  position:absolute;
  cursor:pointer;
  font-size: 1.6em;
  color:white;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  line-height: 1.15;
}

body.en .blueButton, body.zh .blueButton, body.vi .blueButton {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.blueButton[data-text="1"] {
  top: 89%;
  left: 70%;
}

.blueButton[data-text="2"] {
  top: 69%;
  left: 82%;
}

.blueButton[data-text="3"] {
  top: 65%;
  left: 54%;
}

.blueButton[data-text="4"] {
  top: 27%;
  left: 68%;
}

.blueButton[data-text="5"] {
  top: 34%;
  left: 43%;
}

.blueButton[data-text="6"] {
  top: 33%;
  left: 35%;
}

.blueButton[data-text="7"] {
  top: 65.3%;
  left: 42.8%;
}

.en .blueButton[data-text="7"], .zh .blueButton[data-text="7"], .vi .blueButton[data-text="7"] {
  top: 69.3% !important;
  left: 34.9% !important;
}

.blueButton[data-text="8"] {
  top: 53%;
  left: 23%;
}

.blueButton[data-text="9"] {
  top: 41%;
  left: 1%;
}

.btn:focus {
  outline: 0;
}

.ipad #fullscreen {
  display:none;
}