body {
  margin: 0px;
}
.hidebefore{
  display: none;
}
.webgl-content * {
  border: 0;
  margin: 0;
  padding: 0;
}

#weglContainer {
  width: 800px;
  height: 480px;
}

#gameContainer {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
}

#canvas {
  width: 800px;
  height: 480px;
  background-image: url(../img/MODEL-PLA.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

#screens,
.screen-2,
.screen-3,
.screen-4,
.screen-5 {
  display: none;
}

#screens {
  width: 800px;
  height: 480px;
  cursor: default;
}

#initial {
  background-image: url(../img/01_TITLE_BG.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 480px;
  background-size: cover;
}

#initial img,
#instruct img {
  width: 100%;
  height: 100%;
}

#instruct {
  background-image: url(../img/Inst_page.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 480px;
  background-size: cover;
}

.paragra {
  text-align: justify;
  padding: 252px 431px;
  border: 21px;
  font-size: 22px;
  position: absolute;
  top: -151px;
  right: 911px;
  left: -204px;
}

.paragra p{
  width: 350px;
}

.btn {
  border: none;
  background: none;
  position: relative;
  cursor: pointer;
}

.btn.start {
  top: -100px;
  left: 310px;
}

.btn.instructnext {
  bottom: -75%;
  left: 328px;
}

.header {
  height: 48px;
  padding: 10px;
  position: absolute;
  z-index: 9999;
}

.btn.audio {
  top: -10px;
  left: -7px;
}

.btn.close {
  top: 0px;
  left: 748px;
  position: absolute;
}

.btn.games.vedio-walk {
  position: absolute;
  left: 700px;
  top: 401px;
}

.btn.games.vedio-walk img {
  width: 53%;
}

.btn.brond.logo {
  position: absolute;
  left: 5px;
  top: 392px;
}

.screens-inventory {
  float: left;
  top: 400px;
  position: absolute;
  left: 125px;
  background: #031225;
  height: 72px;
  padding-top: 0;
  width: 550px;
}

.screens-inventory .btn.si {
  float: left;
  top: 12px;
}

.screens-inventory .inv-item {
  background-image: url(../img/inv_butt.png);
  width: 75px;
  text-align: center;
  display: flex;
  float: left;
  height: 75px;
  background-size: 100% 100%;
  margin: auto 2px;
}

.screens-inventory .inv-item img {
  width: 65%;
  height: 65%;
  margin: 15%;
}

.inventory-items {
  overflow: hidden;
  float: left;
  margin: auto 25px auto 15px;
  width: 385px;
  display: -webkit-inline-box;
  display: -webkit-box;
}

.screens-area {
  float: left;
}

.screens-area img.sc {
  width: 680px;
}

.arrownext {
  position: absolute;
  top: 194px;
  left: 742px;
  width: 46px;
}

.arrow-left {
  top: 194px;
  left: 2px;
  width: 46px;
}

.arrow-down {
  transform: rotate(90deg);
  bottom: -28%;
  left: 43%
}
.arrow-down1 {
  transform: rotate(90deg);
  bottom: -33%;
  left: 43%;
  }

.arrownext img {
  width: 100%;
}

.arrow-left img {
  transform: rotate(180deg);
}

.arrow-left img {
  transform: rotate(180deg);
}


.screen-opensctip-wood1 {
  background-image: url(../img/wood2.png);
  width: 794px;
  float: left;
  height: 392px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-wood1 img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}




.screen-opensctip-highclue {
  background-image: url(../img/highclue.png);
  width: 794px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -391px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-highclue img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}

.screen-opensctip-colorc {
  background-image: url(../img/colorc.png);
  width: 792px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-colorc img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}

.screen-opensctip-knifeaction1 {
  background-image: url(../img/knifeaction2.png);
  width: 792px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-knifeaction1 img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}


.screen-opensctip-scroll {
  background-image: url(../img/paper.png);
  width: 794px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -391px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-scroll img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}



.screen-opensctip-crap0001 {
  background-image: url(../img/crap0002.png);
  width: 795px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -391px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 3px;
}
.screen-opensctip-crap0001 img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}





.screen-opensctip-bone {
  background-image: url(../img/bone.png);
  width: 792px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-bone img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}


.screen-opensctip-book {
  background-image: url(../img/book.png);
  width: 792px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-book img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}


.screen-opensctip-scroll1 {
  background-image: url(../img/paper1.png);
  width: 792px;
  float: left;
  height: 393px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-scroll1 img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}

.screen-opensctip-machin {
  background-image: url(../img/machin.png);
  width: 793px;
  float: left;
  height: 392px;
  background-repeat: no-repeat;
  top: -389px;
  position: relative;
  /* background-size: 50% 50%; */
  background-position: 46% 50%;
  text-align: right;
  background-color: #271539;
  left: 4px;
}
.screen-opensctip-machin img {
  cursor: pointer;
  height: 42px;
  width: 42px;
}


.backdrop {
  background-color: rgb(0, 0, 0, 0.7);
  position: absolute;
  width: 794px;
  height: 395px;
}

.dragaware.draggable_clone {
  width: 25% !important;
  height: 100%;
}

/* because of ads */
.backdropadds { 
  background-color: black;
  /* background-color: rgb(0, 0, 0, 0.7); */
  position: absolute;
  width: 800px;
    height: 480px;
    z-index: 1;
   
}



/* Ads Integrate Start */
#pausedrop { 
  background-color: rgb(0, 0, 0, 0.7);
  position: absolute;
  width: 800px;
  height: 480px;
  z-index: 1;
}
.btn.pause {
  top: 0px;
  left: 688px;
  position: absolute;
}
/* Ads Integrate End */