.itemdetails {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: RGBA(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: all 0.5s;
    overflow: hidden;
    z-index: 999;

}
.itemdetails.opened {
    max-height: 100vh;
}
.itemdetails.closed {
    max-height: 0;
}

.itemdetails_card {
    background-color: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    border-radius: 2px;
    padding: 20px;
    margin: 3vh;
    max-height:  calc(100vh - 6vh);
    max-width: calc(100vw - 6vh);
}
.itemdetails_contents {
    display: flex;
    overflow: auto;
    max-height: 100vh;
    max-width: 100vw;
}

.itemdetails_contents .image {
    max-height: 100%;
}

.itemdetails_contents .image img {
    max-height: calc(100vh - 12vh);
    margin: 20px;
}
.itemdetails_close {
    width: 20px;
    height:  20px;
    cursor: pointer;
    border: solid 3px #CCC;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    position: relative;
    margin-left: calc(100% - 8px);
    margin-top: -18px;
    background-color: #FFF;
    border-radius: 3px;
    transition: all 0.5s;

}
.itemdetails_close:hover {
    border-color: #F00;
    color: #F00;
}
.itemdetails_close::after {
    content: 'X';
}