body
{
   background-color: #8EBB8E;
   color: #008000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #0000FF;
   text-decoration: none;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: none;
}
#wb_Line3
{
   font-size: 0;
}
#Line3
{
   border-width: 0;
   height: 122px;
   width: 8px;
}
#wb_Line2
{
   font-size: 0;
}
#Line2
{
   border-width: 0;
   height: 8px;
   width: 388px;
}
#Line2
{
   animation: animate-fade-in-right 3000ms linear 0ms 1 normal both;
}
#wb_Line1
{
   font-size: 0;
}
#Line1
{
   border-width: 0;
   height: 344px;
   width: 311px;
}
#wb_Line2
{
   position: absolute;
   left: 602px;
   top: 590px;
   width: 380px;
   height: 2px;
   z-index: 1;
}
#wb_Line1
{
   position: absolute;
   left: 231px;
   top: 138px;
   width: 303px;
   height: 336px;
   z-index: 2;
}
#wb_Line3
{
   position: absolute;
   left: 645px;
   top: 299px;
   width: 2px;
   height: 114px;
   z-index: 0;
}
@media only screen and (max-width: 969px)
{
body
{
   background-color: #8FBC8F;
   background-image: url('images/index_bkgrnd480.png');
}
#wb_Line3
{
   left: 645px;
   top: 299px;
   visibility: hidden;
   display: none;
}
#wb_Line2
{
   left: 602px;
   top: 590px;
   visibility: hidden;
   display: none;
}
#wb_Line1
{
   left: 231px;
   top: 138px;
   visibility: hidden;
   display: none;
}
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.door {
  position: relative;
  width: 170px;
  height:270px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(2500px);
}

.door-front {
  width: 170px;
  height:270px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: 30px 0 50px rgba(0,0,0,0.2);
  position: absolute;
  background-color: #924500;
  z-index:1;
  transition: .5s;
}

.door-front:before, .door-front:after {
  content:"";
  position: absolute;
  background-color: #924500;
  width: 105px;
  height: 75px;
  border: 10px ridge #b05500;
  left:22.5px;
}

.door-front:before {
  top:25px;
}

.door-front:after {
  top:155px;
}
.knob {
  position: absolute;
  width: 20px;
  height:30px;
  background-color: #eeba0b;
  top:122px;
  left:145px;
  border-radius:2px;
}

.knob:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #f1c83c;
  width:18px;
  height:18px;
  left:-1px;
  box-shadow: 2px 2px rgba(0,0,0,0.2);
}

.knob:after {
  content:"";
  position: absolute;
  width:4px;
  height:7px;
  background-color: #333;
  top:20px;
  left:8.5px;
}

.door:hover .door-front {
  transform: rotateY(-160deg); 
}

.door-back {
  position: relative;
  background-color:#edf2f4;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 22px solid #edf2f4;
}


.jacket {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #e7d7c1;
  border-radius:50%;
  top:120px;
  left:137px;
  box-shadow: 0 20px #e7d7c1;
}

.jacket:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #a78a7f;
  left:-10px;
  top:40px;
}