html,body{
  margin:0; padding:0;
  background-color: #1A1A1A;
}

$debug:false;
$pw:227.41mm;
$ph:207.26mm;
$mt:1cm;
$mb:1cm;
$me:1cm;
$mi:1cm;

#header{
  position: fixed;
  display: none;
}

#main{
  height:$ph;
  width:2.001*$pw;
  margin:0 auto;
  #page-left{
    float:left;
    // padding:$mt $mi $mb $me;
    // background-image: url("../../images/pages/01_anan.jpeg");
    background-position: right;
  }
  #page-right{
    float: right;
    // padding:$mt $me $mb $mi;
    // background-image: url("../../images/pages/02_TH.jpeg");
    background-position: left;
  }
  .page{
    position: relative;
    @if $debug {
      background-color: green;
    }
    width:$pw;
    height:$ph;

    background-repeat: no-repeat;
    background-size: contain;

    .overlay{
      position: relative;
      width:100%; height:100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 1;

      @if $debug {
        border: 1px solid blue;
      }

      // img{max-width: 100%;}
    }

    .maps{
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      z-index: 2;
      .map{
        position: absolute;
        background-color: rgba(50, 50, 50, 0.8);
        cursor: pointer;
      }
    }

    &.page-6 .overlay{
      background-image: url("../../images/vectos/04_chance-RB.svg")
    }
  }



}