/* JAVASCRIPT */
/* PAGE: Artbonn */
/* AUTHOR: hyperstud.io */

@charset "UTF-8";

@font-face {
  font-family: "icons";
  src:url("../fonts/icons.eot");
  src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/icons.woff") format("woff"),
    url("../fonts/icons.ttf") format("truetype"),
    url("../fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;

}


body,html{
    margin:0;
    padding:0;
    background:#fff;
    width:100%;
    height:100%;
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:300;
    color:#5D6C73;

    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

}


a, a:visited, a:focus{
    color:#5D6C73;
    text-decoration: none;
    outline:none;
}

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;  
}

.onehalf, .onethird, .twothird,
.onefourth, .oneeight{
    display:inline-block;
    vertical-align: top;
    position: relative;
}

.onehalf{
    width:50%;
}

.onethird{
    width:33.33%;
}

.twothird{
    width:66.66%;
}

.onefourth{
    width:25%;
}

.oneeight{
    width:12.5%;
}


.table{
      display:table;
      width:100%;
      height:100%;
}

.table-cell{
      display:table-cell;
      vertical-align: middle;
      text-align:center;
}



#wrapper{
  width:100%;
  height:100%;  
}

#wrapper .onehalf{
  height:100%;
}

#wrapper .onehalf.first{
  position: fixed;
  top:0px;
  left:0px;
  right:420px;
  margin:0 auto;
  width:100%;
}

#wrapper .onehalf.first img{
  position: absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  width:9999px;
  height:9999px;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
}



#wrapper .onehalf.second{
  background:#fff;
  width:25%;
  position: absolute;
  top:0px;
  right:0px;
  width:420px;
  min-height:720px;
  padding:70px;
  overflow-y:scroll;
}

#wrapper .onehalf.second img.realart-1,
#wrapper .onehalf.second img.realart-2{
  height:25px;
}

#wrapper .onehalf.second img.realart-2{
  margin-top:20px;
  margin-bottom:20px;
}



#wrapper .onehalf.second .bottom{
  position: absolute;
  left:70px;
  right:70px;
  bottom:50px;
}

#wrapper .onehalf.second .bottom .address{
  display: block;
  margin-bottom:40px;
}


.symbol{
  display: inline-block;
  vertical-align: top;
  width:25px;
}


.zfs{
  font-size:0px;
}

.p1{
  font-size:20px;
  line-height: 1.5em;
  font-weight:500;
}

.p2{
  font-size:13px;
  line-height: 1.4em;
  font-weight:500;
}


.wide{
  letter-spacing:0.2em;
}


@media (max-width:768px) {

  body,html{
    height:auto;
  }


  #wrapper .onehalf.first{
    position: relative;
    top:auto;
    left:auto;
    right:auto;
    display: block;
    width:auto;
    height:auto;
  }

  #wrapper .onehalf.first img{
    position: relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:100%;
    height:auto;
  }

  #wrapper .onehalf.second{
    display: block;
    width:auto;
    position: relative;
    top:auto;
    right:auto;
    min-height:100%;
    padding:30px;
  }


  #wrapper .onehalf.second .bottom{
    position: relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:40px;
  }  

  .p1{
    font-size:18px;
  }


}