#open-popup {padding:20px}




/* quick reset */

/* relevant styles */
.detail {

    /*position: relative;*/
    /*height: 300px;*/
    /*width: 407px;*/
    /*margin:10px;*/
    /*top:50%;*/
    /*left:50%;*/
    /*new design*/
    position: initial;
    height: 350px;
    padding: 2px;
    margin: 10px;
    width: 100%;
    top: 50%;
    left: 50%;
    background-size: cover;

    /*transform: translate(300px,200px);*/
    /*   background-size:cover; */
    /*animation: zoom-out1 1.2s ease-in-out;*/

}
.mfp-close-btn-in .mfp-close {
    background: blanchedalmond;
    color: #ef0909;
    font-size: 40px;
    font-weight: 600;
    font-family: monospace,serif;
}

.detail img,.ifram{
    width:100%;
    height:100%;
    border:25px double #000000;
    animation: zoom-out1 1.5s linear;
}

/*#tst::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 100%;*/
/*    width: 20%;*/
/*    height: 100%;*/
/*    background-color: #202629;*/
/*    clip-path: polygon(15% 0, 15% 39%, 27% 52%, 16% 60%, 16% 100%, 0 100%, 0 0);*/
/*}*/


@keyframes zoom-out1 {
    10%{
        width: 10%;
        height:max-content;
    }
    /*20%{*/
    /*    width: 20%;*/
    /*    height:max-content;*/
    /*}30%{*/
    /*     width: 30%;*/
    /*     height:max-content;*/
    /* }40%{*/
    /*     width: 40%;*/
    /*     height: max-content;*/
    /* }50%{*/
    /*      width: 50%;*/
    /*      height:max-content;*/
    /*  }*/
    /*60%{*/
    /*    width: 60%;*/
    /*    height: max-content;*/
    /*}70%{*/
    /*     width: 70%;*/
    /*     height:max-content;*/
    /* }80%{*/
    /*     width: 80%;*/
    /*     height: max-content;*/
    /* }90%{*/
    /*      width: 90%;*/
    /*      height:max-content;*/
    /*  }*/
    100%{
          width: 100%;
          height: max-content;
      }
}

.detail .title {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*   background: rgba(29, 106, 154, 0.72); */
    color: #fff;
    visibility: hidden;
    opacity: 0;
    text-align:center;

    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
}
.mfp-ready .mfp-figure {
    opacity: 0;
}
.mfp-container{

    background: transparent;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 60%;
    cursor: auto;
}

.mfp-content {
    width: 60%;
    position: relative;
    /*display: block;*/
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
    transition: all  0.8s ease-in-out;
}


.detail:hover .title {
    visibility: visible;
    opacity: 1;
    transform:translateY(-170px);
    transition: transform 0.8s;
}
.p-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    /*     transition: transform var(--d) var(--e); */
    z-index: 1;
}

.title h2{
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
}



.title:hover,.p-content:hover{
    color:#fff!important;
    transform:translateX(0);
}

.detail:hover img{
    /*   transform: translateY(-1px); */
    filter: brightness(40%);
    /*     transform: translateY(-50%); */
    /*     transition: transform calc(var(--d) * 2) var(--e); */
}