h1{
        color: green;
}
.table{
        width: 60%;
}
#kapi { 
        /*background: url("../img/yapim-asamasinda.png") no-repeat center; 
        /*margin: 100px auto;
        width: 1280px;
        height: 768px; 
        /*border: solid 3px #006baf; */
        height: 420px;
        text-align: center;
        position: relative;  
        overflow: hidden;
}

@media (min-width: 1401px) {
   #kapi{
        margin-top: 40px;
        height: 100%;
  }
}
@media (min-width: 1300px) and (max-width: 1400px) {
   #kapi{
        margin-top: 10px;
        height: 100%;
  }
}

@media (min-width: 577px) and (max-width: 992px) {
   #kapi{
        margin-top: 10px;
        height: 100%;
  }
}
@media (max-width: 767px) {
   #kapi{
        margin-top: 150px;
        height: 100%;
  }
}

.doorText { 
        background-color: rgba(253,217,33,0.50);
        color: #333; 
        font-family: Verdana, sans-serif; 
        font-size: 24px; 
        font-weight: bold; 
        line-height: 45px; 
        height: 145px; 
        border:solid 1px rgba(0,0,0,0.15); 
        border-width:1px 0;
        position: absolute; 
        top: 50%;  
        padding: 0 0 0 20px; 
        left: 1px; 
        right: 1px; 
        margin-top: -75px; 
        text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}
.doorHoverLeft  { 
        position: absolute; 
        left: 0%; 
        top: 0; 
        bottom: 0; 
        width: 50%; 
        transition: 3s ease-in-out;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.40); 
        background-color: #6a533e;
        z-index: 9999;
}
.doorHoverRight { 
        position: absolute; 
        right: 0%; 
        top: 0; 
        bottom: 0; 
        width: 50%; 
        transition: 3s ease-in-out;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.40); 
        background-color: #6a533e;
        z-index: 9999;
}
#kapi:hover .doorHoverLeft { 
        left: -50%;
        
}
#kapi:hover .doorHoverRight { 
        right: -50%; 
}