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

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

#root{
  height:$ph;
  margin:0 auto;
  position: relative;
  width:$tranchew+5+2.001*$pw;
}

#header{
  display: absolute;
  top: 0; left:0;
  width: $tranchew; height: 100%;
  background-color: white;

  h1{
    margin: 0; padding:0.3em;
    position: absolute;
    bottom:0; left:0;
    transform-origin: 0% 0%;
    transform: rotate(270deg);
  }
}

#main{
  position: absolute;
  top:0; right:0;
  width:2.001*$pw;

  #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")
    }
  }

  #navigation{
    position:absolute; z-index: 3;
    bottom:0; width:100%; // height:2cm;
    padding:2mm 0;
    background-color: rgba(26, 26, 26, 0.7);
    overflow: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    &:hover{opacity: 1;}
  }

  #pagination{
    color:#fff;
    font-size: 1em;
    padding: 0 0 2mm 0;
    div{
      display: inline-block;
      width:49%;
      &.wrapper-l{left:0; text-align: left;}
      &.wrapper-r{right:0; text-align: right;}
      span.p{

      }
      span.l{
        cursor: pointer;
        line-height: -1;
      }
    }
  }

  #railway{
    ul{
      padding:1mm; margin:0;
      li{
        display: inline-block; vertical-align: middle;
        background-color: white;
        width:1mm; height:7mm;
        margin-left: 0.5mm;
        background-position: center;
        background-size: cover;
        &.active{
          width:7mm; cursor: pointer;
        }
        &.page-right{
          margin-right: 1mm;
        }
        opacity:0.2;
        transition: opacity 0.3s ease-in-out;
        &.current, &.active:hover{opacity: 1;}
      }
      &:hover li{opacity: 1;}
    }
  }

}