* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: SassoonSans;
  src: url(fonts/SassoonSansCJFTwo-Regular_EDIT.ttf), url(fonts/SassoonSansCJFTwo-Regular_EDIT.eot);
  font-size: 1vh;
}
html,body {
  height: 100%;
  max-height: 100%;
}
body {
  font-family: SassoonSans;
  overflow: hidden;
  position: fixed;
  width: 100%;
  font-weight: 600;
  line-height: 0.8;
  font-size: 2vh;
}
.transparent {
  opacity: 0;
}
.hidden {
  display: none !important;
}
#stage {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-repeat: no-repeat;
  background-size: cover;
}
#loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#success{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.finished {
  position: absolute;
  top: 35%;
  left: 39.5%;
  width: 22%;
  height: 30%;
  z-index: 320;
  display: none;
}
.text-board {
  width: 75%;
  right: 0;
  padding: 0 2%;
}
.text-board, .words-board {
  display: inline-block;
  height: 100%;
  position: absolute;
}
.words-board {
  width: 25%;
  left: 1%;
}
.text-area {
  height: 90%;
  position: relative;
  width: 100%;
  top: 7%;
}
.control-panel {
  width: inherit;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.words-title, .text-title, .body-text, .control-panel, .words-list  {
  position: absolute;
}
.text-title {
  height: 5%;
  width: inherit;
  text-align: center;
  top: 4%;
  font-size: 3vh;
  font-weight: 800;
}
.body-text {
  top: 7%;
  line-height: 1.6;
  padding: 0 3%;
  height: 86%;
  /*overflow-y: auto;*/
  margin: 3% 0;
}
.words-list {
  top: 5%;
  width: 82%;
  height: 90%;
  left: 8%
}
.body-text, .word {
  font-size: 2.4vh;
}
.word {
  width: 94%;
  text-align: center;
  margin: 1.5% 3%;
  padding: 1% 2%;
  background: url("../images/SL_T08_TILE.png") no-repeat;
  background-size: 100% 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 5.2%;
  z-index: 20;
}
.btn {
  display: block;
  background-size: 100%;
  background-repeat: no-repeat;
}
.control-size {
  width: 40px;
  height: 40px;
  background-color: yellow;
  border: 2px solid black;
  border-radius: 50%;
  display: inline-block;
  font-size: 5.5vh;
  text-align: center;
}
.correct-word {
  padding: 0 5px;
  background-color: #a3f9a6;
}
#help {
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
}
/* buttons assets section start*/
[data-btn-id="playintro"] {
  background-image: url("../images/btn.playintro.static.png");
  background-size: 100%;
  position: absolute;
  width: 15%;
  height: 21%;
  top: 37.7%;
  left: 42.6%;
  z-index: 500;
  border-radius: 50%;
}
[data-btn-id="close"] {
  background-image: url("../images/btn.close.static.png");
  position: absolute;
  width: 5%;
  height: 5.5%;
  top: 21.1%;
  left: 79.4%;
  z-index: 1001; /*check z-index for #help before*/
}

[data-btn-id="retry"] {
  background: url("../images/btn.retry.static.png") no-repeat;
  background-size: 100%;
}
[data-btn-id="mute"] {
  background: url("../images/btn.mute.static.png") no-repeat;
  background-size: 100%;
}
[data-btn-id="unmute"] {
  background-image: url("../images/btn.unmute.static.png");
}
[data-btn-id="swapleft"] {
  background: url("../images/btn.swapleft.static.png") no-repeat;
  background-size: contain;
}
[data-btn-id="fullscreen"] {
  background: url("../images/btn.fullscreen.static.png") no-repeat;
  background-size: contain;
}
[data-btn-id="info"] {
  background: url("../images/btn.info.static.png") no-repeat;
  background-size: contain;
}
[data-btn-id="scale"] {
  background-image: url("../images/btn.scale.static.png");
  background-size: contain;
}
[data-btn-id="settings"] {
  background-image: url("../images/btn.settings.static.png");
  background-size: contain;
}
[data-btn-id="play-game"] {
  background: url("../images/btn.play-game.static.png") no-repeat;
  background-size: 100% 100%;
}
/* buttons assets section end*/
#settings, #game-board, #time-selector, #hero-select, #play-game, .modal-fade, #settings-header {
  width: 100%;
  position: relative;
  display: flex;
}
 #settings-header {
  height: 9%;
   font-size: 3.5vh;
   top: 5%;
   text-shadow: -1px -1px 0px rgba(45, 45, 45, 1);
}
#time-selector{
  height: 6.5%;
  width: 22%;
  display: block;
  margin: 0 auto;
  background: url("../images/SL_T08_TIMER_PANEL.png") no-repeat;
  background-size: 100% 100%;
}
#time-selector, #play-game {
  top: 10%;
}
#settings {
  height: 15%;
}

#game-board {
  height: 85%;
  width: 97%;
  top: 14%;
  left: 1.5%;
  background: url("../images/SL_T08_PANEL.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
}
#hero-select {
  height: 54%;
  top: 7%;
}
#play-game {
  height: 9%;
  top: 12%
}
#game-board {
  display: none;
}
#settings, #time-selector, #hero-select, #play-game, #settings-header, .how-to-play-tab {
  justify-content: center;
  align-items: center;
  color: white;
}
.play-btn {
  width: 21%;
  height: 100%;
  font-size: 3vh;
  margin: 1%;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  opacity: 0.3;
}
.timer{
  height: 9%;
  position: absolute;
  top: -1%;
  width: 98%;
  left: 0;
  display: flex;
  justify-content: space-around;
}
.hero {
  font-size: 3vh;
  width: 63%;
  text-align: center;
  height: 100%;
  background: url("../images/SL_T08_CHARACTERS_PANEL.png") no-repeat;
  background-size: contain;
  border-radius: 4%;
}
.hero-logo {
  width: 16.5%;
  height: 37%;
  display: inline-flex;
  margin: 1% 0.5%;
  position: relative;
}
.hero-title {
  padding: 2%;
}

#avatar0 {
  background-image: url("../images/SL_T08_CHARACTERS_OLLAI.png");
}
#player-circle0 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_OLLAI.png");
}
#player-image0 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_OLLAI.png");
}
#winner0 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_OLLAI.png");
}
#avatar1 {
  background-image: url("../images/SL_T08_CHARACTERS_FIONN.png");
}
#player-circle1 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_FIONN.png");
}
#player-image1 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_FIONN.png");
}
#winner1 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_FIONN.png");
}
#avatar2 {
  background-image: url("../images/SL_T08_CHARACTERS_BEITI.png");
}
#player-circle2 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_BEITI.png");
}
#player-image2 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_BEITI.png");
}
#winner2 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_BEITI.png");
}
#avatar3 {
  background-image: url("../images/SL_T08_CHARACTERS_BAGUN.png");
}
#player-circle3 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_BAGUN.png");
}
#player-image3 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_BAGUN.png");
}
#winner3 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_BAGUN.png");
}
#avatar4 {
  background-image: url("../images/SL_T08_CHARACTERS_SADHBH.png");
}
#player-circle4 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_SADHBH.png");
}
#player-image4 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_SADHBH.png");
}
#winner4 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_SADHBH.png");
}
#avatar5 {
  background-image: url("../images/SL_T08_CHARACTERS_SALANN.png");
}
#player-circle5 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_SALANN.png");
}
#player-image5 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_SALANN.png");
}
#winner5 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_SALANN.png");
}
#avatar6 {
  background-image: url("../images/SL_T08_CHARACTERS_HOLLAI.png");
}
#player-circle6 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_HOLLAI.png");
}
#player-image6 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_HOLLAI.png");
}
#winner6 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_HOLLAI.png");
}
#avatar7 {
  background-image: url("../images/SL_T08_CHARACTERS_CAT.png");
}
#player-circle7 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_CAT.png");
}
#player-image7 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_CAT.png");
}
#winner7 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_CAT.png");
}
#avatar8 {
  background-image: url("../images/SL_T08_CHARACTERS_ALI.png");
}
#player-circle8 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_ALI.png");
}
#player-image8 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_ALI.png");
}
#winner8 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_ALI.png");
}
#avatar9 {
  background-image: url("../images/SL_T08_CHARACTERS_SAM.png");
}
#player-circle9 {
  background-image: url("../images/SL_T08_CHARACTER_CIRCLE_SAM.png");
}
#player-image9 {
  background-image: url("../images/SL_T08_CHARACTER_CHOSEN_SAM.png");
}
#winner9 {
  background-image: url("../images/SL_T08_CHARACTER_WIN_SAM.png");
}

[data-btn-id="blue"]  {
  background-image: url("../images/btn.blue.static.png");
}
[data-btn-id="green"]  {
  background-image: url("../images/btn.green.static.png");
}
[data-btn-id="red"]  {
  background-image: url("../images/btn.red.static.png");
}
[data-btn-id="orange"] {
  background-image: url("../images/btn.orange.static.png");
}

.player-selector {
  width: 15%;
  height: 100%;
  margin: 0 2%;
  color: white;
  font-size: 2vh;
}
.avatar, .hero-logo, .player-selector, .player-container {
  background-size: contain;
  background-repeat: no-repeat;
}
.avatar, .points {
  width: 28%;
  height: 80%;
  display: inline-block;
  position: absolute;
  left: 5%;
  top: 9%;
  border-radius: 50%;
  background-size: cover;
}
.heroes-wrap {
  position: relative;
  width: 100%;
  height: 84%;
  top: 10%
}
.player-selector, .player-selector-panel {
  display: flex !important;
  display: -webkit-flex !important;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.player-selector-panel {
  width: 100%;
  height: 10%;
  position: absolute;
  top: 84%;
}
.drop-area {
  width: 86%;
  height: 20%;
  position: relative;
  top: 70%;
  left: 7%;
}
.checkbox-btn {
  width: 25%;
  height: 70%;
  background: url("../images/SL_T08_TIMER_BTN_STATIC.png") no-repeat;
  background-size: contain;
  border-radius: 50%;
}


.modal-fade {
  background-color: black;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.4;
}
.modal-alert {
  width: 50%;
  height: 50%;
  margin: 0 auto;
  background-color: white;
  opacity: 1;
  position: absolute;
  left: 25%;
  top: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vh;
}

.bubble {
  position: absolute;
  top: -140%;
  left: 10%;
  background-image: url('../images/SL_T08_TIME PENALTY.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #656565;
  width: 50%;
  height: 100%;
}
#settings-modal {
  position: absolute;
  width: 74%;
  height: 74%;
  left: 13%;
  top: 15%;
  background: url("../images/SL_T08_SETUP_PANEL.png") no-repeat;
  background-size: contain;
}

.game-selector {
  display: inline-flex;
  width: 100%;
  height: 45%;
  justify-content: space-between;
  align-items: center;
  margin: 1%;
}
#time-selector .game-selector {
  height: 90%;
  border: none;
}
.game-type {
  font-size: 2vh;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  width: 80%;
  height: 100%;
  margin: 1% 0;
}
.player {
  width: 23%;
  height: 100%;
  position: relative;
  background: url("../images/SL_T08_TIMER.png") no-repeat;
  background-size: 100% 100%;
}

[data-btn-id="playintro"] {
  background-image: url("../images/btn.playintro.static.png");
  background-size: 100%;
  position: absolute;
  z-index: 500;
  border-radius: 50%;
  width: 15%;
  height: 21%;
  position: absolute;
  top: 44.8%;
  left: 42.6%;
}
[data-btn-id="close"] {
  background-image: url("../images/btn.close.static.png");
  position: absolute;
  width: 5%;
  height: 5.5%;
  top: 21.1%;
  left: 79.4%;
  z-index: 1001; /*check z-index for #help before*/
}

[data-btn-id="retry"] {
  background: url("../images/btn.retry.static.png") no-repeat;
  background-size: 100%;
}

[data-btn-id="swapleft"] {
  background: url("../images/btn.swapleft.static.png") no-repeat;
  background-size: contain;
}
[data-btn-id="fullscreen"] {
  background: url("../images/btn.fullscreen.static.png") no-repeat;
  background-size: contain;
}
[data-btn-id="info"] {
  background: url("../images/btn.info.static.png") no-repeat;
  background-size: contain;
}
/* buttons assets section end*/

/* control panel start*/
.control-panel {
  position: absolute;
  top: -12%;
  opacity: 0.2;
  right: 1%;
  height: 11%;
  width: 45%; /*26% for 3 buttons control bar, 33% - for 4buttons*/
  background: url("../images/5_BUTTON_TRAY.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  z-index: 3;
}
.control-panel.active {
  opacity: 1;
  top: 2.8%;
}
.control-panel .btn {
  width: 21%; /*27% for 3 buttons control bar, 21% - for 4buttons*/
  height: 78%;
  display: inline-block;
  position: relative;
  top: 12%;
  margin-right: 2%; /*2% for 3 buttons control bar, 1% - for 4buttons*/
}
div.btn.swap {
  border-radius: 1%;
  width: 13%;  /*17% for 3 buttons control bar, 13% - for 4buttons*/
  left: 3%; /*4% for 3 buttons control bar, 3% - for 4buttons*/
  position: absolute;
}
.btn-wrapper{
  width: 80%;
  height: 100%;
  position: absolute;
  top: 6%;
  left: 18%; /*23% for 3 buttons control bar, 21% - for 4buttons*/
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}
/* control panel end*/

.checkbox-btn:active, .checkbox-btn.selected:active {
  background-image: url("../images/SL_T08_TIMER_BTN_DOWN.png");
}
.checkbox-btn.selected {
  background-image: url("../images/SL_T08_TIMER_BTN_ACTIVE.png");
}
.characters {
  width: 100%;
  height: 48%;
}
.characters-left, .characters-right {
  width: 20%;
  height: 45%;
  position: absolute;
  top: 42%;
}
.characters-left {
  left: 3%;

}
.characters-right {
  right: 3%;
}
.player-container {
  width: 100%;
  height: 100%;
  background-position:100% 100%;
}
#player-area1, #player-area3 {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#player-area0, #player-area1, #player-area2, #player-area3 {
  width: 60%;
  height: 80%;
  position: absolute;
  opacity: 0;
}
#player-area0 {
  top: 20%;
  right: 0;
  z-index: 1;
}
#player-area2 {
  top: 0%;
  left: 0;
}
#player-area1 {
  top: 20%;
  left: 0;
  z-index: 1;
}
#player-area3 {
  top: 0%;
  right: 0;

}
.clock {
  display: inline-flex;
  width: 60%;
  height: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
  right: 5%;
  font-size: 3vh;
  top: 1%;
  font-size: 3vh;
}
.active-player {
  transform: scale(1.3);
  box-shadow: 0 0 0 rgba(44, 240, 56, 0.9);
  transition: transform 1s;
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(44, 240, 56, 0.9);
  }
  70% {
    -webkit-box-shadow: 0 0 0 1.5vh rgba(44, 240, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(44, 240, 56, 0.9);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(44, 240, 56, 0.9);
    box-shadow: 0 0 0 0 rgba(44, 240, 56, 0.9);
  }
  70% {
    -moz-box-shadow: 0 0 0 1.5vh rgba(44, 240, 56, 0);
    box-shadow: 0 0 0 1.5vh rgba(44, 240, 56, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(44, 240, 56, 0);
    box-shadow: 0 0 0 0 rgba(44, 240, 56, 0);
  }
}

#settings-modal [data-btn-id="close"]{
  position: absolute;
  width: 7%;
  height: 9.5%;
  top: 0;
  left: auto;
  right: 0;
  z-index: 1;
}
.winner-area {
  width: 30%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: -30%;
}
.winner {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#winner-timer {
  width: 70%;
  height: 4%;
  left: 15%;
  position: absolute;
  top: 70%;
  color: white;
  font-size: 5vh;
  display: flex;
  display: -webkit-flex;;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  text-shadow: -1px -1px 0px rgba(45, 45, 45, 1);
  opacity: 0;
}
.border-shadow {
  -webkit-box-shadow: 0px 0px 3px 3px rgba(252,252,0,1);
  -moz-box-shadow: 0px 0px 3px 3px rgba(252,252,0,1);
  box-shadow: 0px 0px 3px 3px rgba(252,252,0,1);
}
.batton {
  position: absolute;
  width: 100%;
  height: 2%;
  top: 0;
  background: url('../images/SL_BATTON.png') no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
.logo {
  position: absolute;
  width: 9.5%;
  height: 5%;
  top: 4%;
  left: 2.5%;
  background: url("../images/00_LOGO_CJF.png") no-repeat;
  background-size: contain;
  z-index: 1;
}
/* unit ribbon section start*/
.unit-wrapper {
  position: absolute;
  display: block;
  bottom: 18%;
  left: 34%;
  width: 33.5%;
  height: 12.8%;
  background: url(../images/orientation_banner.png) no-repeat;
  background-size: contain;
  opacity: 0;
  text-align: center;
  color: white;
}
.unit-text {
  position: absolute;
  display: flex;
  top: 0%;
  left: 13.5%;
  width: 70%;
  height: 65%;
  font-size: 3vh;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
/* unit section ribbon end*/

.complete-btn {
  position: absolute;
  bottom: 1%;
  right: 1%;
  width: 16%;
  height: 8%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2.5vh;
}