html { font-size: 62.5%; }
body {
    background: url('img/pattern2.jpg') repeat center center transparent;
    margin: 0;
    width: 100%;
}
html, body, #main { height: 100%; }
a img {
  border: 0;
}
#main {
    text-align: center;
}
.logo {
    position: absolute;
        top: 0;
        left: 0;
}
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 502px; height: 430px;
  top: 25%;
}
.option img { width: 100%; height: 100%; }
.option {
  position: absolute;  
  transform: skewX(-45deg);
  width: 378px;
  height: 430px;
}
.option.link_habitat {
    height: 285px;
    width: 251px;
}
.option:first-child {
  left: 0;
  transform-origin: 100% 0;
}
.option:last-child {
  right: 0;
  transform-origin: 0 100%;
}
.option img { opacity: 1; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
  transform: skewX(45deg);
  transform-origin: inherit;
}
.option:after {
  position: absolute;
  margin: .5em 1.65em;
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }

.link_site:hover {
    background: url('img/btn-commerce-hover.png') no-repeat center center transparent;
}
.link_habitat:hover {
    background: url('img/btn-habitat-hover.png') no-repeat center center transparent;
}