@charset "UTF-8";
html {
  height: 100%;
}

body{
  font-family:sans-serif;
  font-size:45px;
  color:#fff;
  background-image: url("pic/bkgjapan.png"),linear-gradient(to bottom, #c9f7ff, #fff,#f4baa4) ;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode:multiply;
  perspective: 2200px;
  perspective-origin: 50% 50%;
  width: 100%;
  height: 100%; 
  min-height: 100%;
  overflow: hidden;
}

#butcont{
	
    width: 100%;
	height: 100%;
	border: solid 0px #000;
	position: absolute;
	display: none;
}

#discl{
	
    width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;

}

#mail{
	
	left: 0;
    bottom: 0;
    
	width:214px;
	height: 120px;
	background-image: url("pic/botmail.png");
	background-size:contain;
	margin: 20px; 
	background-repeat: no-repeat;
	position: absolute;
	
   	display: flex;
   	z-index: 9999;
}

#linkedin{
	right: 0;
    bottom: 0;
    
	width:190px;
	height: 120px;
	background-image: url("pic/botlnk.png");
	background-size:contain;
	background-repeat: no-repeat;
	
	position: absolute;
	margin: 20px; 
   	display: flex;
   	z-index: 9999;
	
}


#lnkBlk{
	
	width:50%;
	height: 50%;
	margin-left:25%;
	margin-top: 5%;
	position: relative;
	
	background-color: aqua;
}


.bdiscl{
	
	width: 500px;
	height: 900px;
	margin-left: -50px;
	background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
	
}

zoom{
  reset;
} 

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}	

#xD{
float:left;
position: absolute;
margin-top:0px; 
}

#yD{
float:left;
position: absolute;
margin-top:45px; 
}

#zD{
float:left;
position: absolute;
margin-top:90px; 
}


#main{
  width: 100%;
  height: 100%;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

#objm {	
  width: 200px;
  height: 200px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  display: none;
}


.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  transform-style: preserve-3d;
}

.objr {
  transform-style: preserve-3d;
}

.shop {
  width: 1132px;
  height: 1119px;
  background-image: url("pic/woodshoptrio.png"); 
  transform: translate3d(0px, 54px, -150px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.floor {
  width: 1430px;
  height: 207px;
  background-image: url("pic/floor.png"); 
  transform: translate3d(0px, 607px, -158px) rotateX(90deg) rotateY(0deg) rotateZ(0deg); 
}

.boderfloor {
  width: 1419px;
  height: 37px;
  background-image: url("pic/borderfloor.png"); 
  transform: translate3d(0px, 624px, -58px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.okamiback {
  width: 396px;
  height: 276px;
  background-image: url("pic/okami-back.gif");
  transform: translate3d(380px, 466px, -100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.okamifront {
  width: 280px;
  height: 510px;
  background-image: url("pic/okami-front.png");
  transform: translate3d(325px, 350px, -85px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.productos {
  width: 191px;
  height: 307px;
  background-image: url("pic/products.png");
  transform: translate3d(-380px, 84px, -158px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.toldo {
  width: 1062px;
  height: 211px;
  background-image: url("pic/toldo.png");
  transform: translate3d(0px, -355px, 10px) rotateX(37deg) rotateY(0deg) rotateZ(0deg); 
}

.borlas {
  width: 1056px;
  height: 52px;
  background-image: url("pic/toldoborlas.png"); 
  transform: translate3d(0px, -246px, 74px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.marquesina {
  width: 1480px;
  height: 424px;
  background-image: url("pic/marquesinatrio.png");
  transform: translate3d(0px, -606px, -20px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.repisa {
  width: 778px;
  height: 238px;
  background-image: url("pic/repisitaduo.png");
  transform: translate3d(86px, 202px, -132px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.cartelvigas {
  width: 1520px;
  height: 1200px;
  background-image: url("pic/cartelvigastrio.png");
  transform: translate3d(40px, 22px, -200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
  content: '';
  z-index: 1;
}


.fondoshop {
  width: 1100px;
  height: 700px;
  background-image: url("pic/bkgproducts.png");
  transform: translate3d(-5px, -240px, -240px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}


.c4p4 {
  width: 410px;
  height: 410px;
  background-image: url("pic/c4p4.png"); 
  transform: translate3d(-103px, 34px, -167px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.blink {
  width: 300px;
  height: 204px;
  background-image: url("pic/blink.png"); 
  background-position: 300px;
  transform: translate3d(93px, -190px, -236px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
}

.bltxt {
  width: 305px;
  height: 56px;
  background-image: url("pic/blacktext.png"); 
  background-position: 0px -11px;	
  transform: translate3d(-384px, -136px, -148px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
 }
  




/* backstage */

.black1{
	
  width: 1100px;
  height: 400px;
  background-color: #000; 
  background-image: url("pic/bkgproductsdown.png");
  transform: translate3d(5px, 272px, -247px) rotateX(12deg) rotateY(0deg) rotateZ(0deg); 
	
}
.black2{
	
  width: 1060px;
  height: 260px;
  background-color: #000;
  transform: translate3d(0px, -519px, -152px) rotateX(51deg) rotateY(0deg) rotateZ(0deg); 
	
}

.black3{
	
  width: 200px;
  height: 1100px;
  background-color: #000;
  transform: translate3d(526px, -45px, -255px) rotateX(0deg) rotateY(90deg) rotateZ(0deg); 
	
}

.black4{
	
  width: 200px;
  height: 1100px;
  background-color: #000;
  transform: translate3d(-526px, -45px, -255px) rotateX(0deg) rotateY(90deg) rotateZ(0deg); 
	
}