.backDoor
{
  /*background-color: lightgrey;*/
  position:fixed;
  width:100%;
  height:100%;
  z-index: 3;
  margin: 0 auto;
  margin-top:0px;

}

.door
{
  background-color: brown;
  position:absolute;
  top:0px;
  width:50%;
  height:100%;
  
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
  z-index: 2;
  
}
.door1{
left:0px;
   background: url(../image/door/md1.jpg) center left no-repeat #ee4955;
  transform-origin: left;
background-size: 100%;
}
.door2{
right:0px;
transform-origin: right;
 
 background: url(../image/door/md2.jpg) center right no-repeat #ee4955;
 background-size: 100%;
}


.doorOpen1
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1300px) translateZ(0px) translateX(0px) translateY(0px) rotateY(90deg);
}
.doorOpen2
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1300px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-90deg);
}
.body{
  overflow: hidden;
}

.wall {
    /*animation: animate 5s forwards;*/
     opacity:1;
    background:#000;
    width: 100%;
    height: 100%;
    top:0;
    left: 0; 
    position: absolute;
    z-index: 1;
     transition: opacity 1.9s linear;
  -webkit-transition: opacity 1.9s linear;
  -o-transition: opacity 1.9s linear;
  -moz-transition: opacity 1.9s linear;
  -ms-transition: opacity 1.9s linear;
}



  

@media (min-width: 1200px) {

  .door1{
left:0px;
   background: url(../image/door/d1.png) center center no-repeat #ee4955;
  transform-origin: left;
 background-size: 100%;
}
.door2{
right:0px;
transform-origin: right;
 
 background: url(../image/door/d2.jpg) center right no-repeat;
 background-size: cover;
}
.door2:before{
  content: "";
  position: absolute;
  width:100%;
  height:100%;
  left: 0;
  right: 0;
   background: url(../image/door/d2.png) center bottom no-repeat;
   background-size: 100%;
}
 
}