:root {
    --portfolio-h: 500px;
    --portfolio-w: 100%;

    --portfolio-item-w: 10px;
    --portfolio-background-color: white; /* transparent; */

    --field-h: 30px;

    --item-color: #eee;
}

/* GENERAL */

.portfolio.diaporama {
    position: relative;
}

.portfolio.diaporama .portfolio-item {
    cursor: pointer;
    
    background-size: cover;
}

.portfolio.diaporama img {
    display: none;
}

.portfolio.diaporama .pagination {
    height: 50px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    position: absolute;
    top: 70%;
    left: auto;
    
    z-index: 200;
}

.portfolio.diaporama .pagination .bpage {
    width: 25px;
    height: 25px;
    min-height: 25px;
    min-width: 25px;
    
    border-radius: 90px;
    
    background-color: #333;
    filter: drop-shadow(0px 0px 2px white);

    cursor: pointer;
    
    z-index: 200;
}

.portfolio.diaporama .pagination .bpage.selected {
    background-color: white;
    filter: drop-shadow(0px 0px 2px #333);
}

.portfolio.diaporama .pagination .bpage:hover {
    background-color: #eee;
    filter: drop-shadow(0px 0px 2px #555);
}

.portfolio.diaporama .prev {
    left: 0;
}

.portfolio.diaporama .next {
    right: 0;
}

.portfolio.diaporama .bnavi {
    /* height: calc(100% - var(--field-h) - 20px); */
    height: 100%;
    
    display: flex;
    align-items: center;
    
    position: absolute;
    cursor: pointer;
    
    font-weight: bold;
    font-size: 72px;
    width: 72px;
    
    color: white;
    filter: drop-shadow(0px 0px 6px black);

    box-sizing: border-box;

    z-index: 200;
}

.portfolio.diaporama.slide .imglist > .portfolio-item:hover .img {
    filter: brightness(1.1);
}

.portfolio.diaporama .bnavi .material-icons {
    font-size: 72px;
}

.portfolio.diaporama .bnavi:hover {
    filter: drop-shadow(0px 0px 6px white);
}


/* .portfolio.diaporama .toolbar { */
/*     width: 100%; */
/*     height: 100%; */
    
/*     position: absolute; */
/*     z-index: 100; */
/* } */

/* .portfolio.diaporama .toolbar .prev { */
/*     left: 0; */
/* } */

/* .portfolio.diaporama .toolbar .next { */
/*     right: 0; */
/* } */

/* .portfolio.diaporama .toolbar > * { */
/*     height: 100%; */
    
/*     display: flex; */
/*     align-items: center; */
    
/*     position: absolute; */
/*     cursor: pointer; */

/*     font-weight: bold; */
/*     font-size: 72px; */
    
/*     color: white; */
/*     filter: drop-shadow(0px 0px 6px black); */

/*     box-sizing: border-box; */
/* } */

/* .portfolio.diaporama .toolbar > div:hover { */
/*     filter: drop-shadow(0px 0px 6px white); */
/* } */

.portfolio.diaporama .fields {
    height: var(--field-h);
    width: 100%;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    
    /* padding: 5px 0; */
    
    background-color: white;
}

.portfolio.diaporama .fields .field-item {
    height: 100%;
}

.portfolio.diaporama .fields .field-item:first-child {
    background-color: var(--item-color);
    border-radius: 9px;
}

.portfolio.diaporama .fields .field-item > .fieldname {
    display: none;
}

.portfolio.diaporama .fields .field-item > .fieldvalue {
    position: relative;
    
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* padding: 5px; */
    font-size: 16px;
    
    box-sizing: border-box;
    cursor: pointer;
    
    z-index: 150;
}

.portfolio.diaporama .fields .field-item.novalue {
    display: none !important;
}


/* SLIDE */

.portfolio.diaporama.slide {
    width: var(--portfolio-w);
    height: var(--portfolio-h);
    
    background-color: var(--portfolio-background-color);
    
    overflow: hidden;
}

.portfolio.diaporama.slide .fields {
    padding: 5px 0;
}

.portfolio.diaporama.slide .fields .field-item {
    padding: 5px;
}

.portfolio.diaporama.slide .imglist {
    position: relative;
    left: 0;
    
    width: max-content;
    height: 100%;

    transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out;
}

.portfolio.diaporama.slide .imglist > .portfolio-item {
    position: relative;
    /* left: 0; */
    
    width: var(--portfolio-item-w);
    height: var(--portfolio-h);
    
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    float: left;

    background-color: var(--item-color);

    z-index: 100;
    
    box-sizing: border-box;
}

.portfolio.diaporama.slide .imglist > .portfolio-item > .toolbar-item {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px;
    z-index: 30;
}

.portfolio.diaporama.slide .imglist .img {
    width: 100%;
    /* height: 100%; */
    min-height: max-content;
    height: -webkit-fill-available;
    
    max-width: 100%;
    /* max-height: calc(100% - 30px); */
    max-height: 100%;
    margin: auto;
    
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.portfolio.diaporama.slide .imglist .img > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* .portfolio.diaporama.slide .pagination { */
/*     position: absolute; */
/*     top: 75%; */
/*     left: auto; */
/* } */

/* .portfolio.diaporama.slide .toolbar { */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/*     gap: 10px; */
/* } */

/* .portfolio.diaporama.slide .toolbar > * { */
/*     cursor: pointer; */
/* } */

/* FADE */
.portfolio.diaporama.fade {
    width: var(--portfolio-w);
    height: var(--portfolio-h);

    background-color: var(--portfolio-background-color);
    
    overflow: hidden;
}

.portfolio.diaporama.fade .imglist {
    position: relative;
    opacity: 1;
    
    width: max-content;
    height: 100%;
}

.portfolio.diaporama.fade .imglist > .portfolio-item.selected {
    opacity: 1;
    z-index: 110;
}

.portfolio.diaporama.fade .imglist > .portfolio-item {
    opacity: 0;
    
    position: absolute;
    left: 0;
    
    /* width: var(--portfolio-item-w); */
    /* height: var(--portfolio-h); */
    
    transition: opacity 0.665s ease-in-out;
    overflow: hidden;
    /* background-color: var(--item-color); */
    
    width: var(--portfolio-item-w);
    height: var(--portfolio-h);
    
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    float: left;

    background-color: var(--item-color);
    
    z-index: 100;
    
    box-sizing: border-box;
}

.portfolio.diaporama.fade .imglist .img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio.diaporama.fade .imglist .img > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.portfolio.diaporama.fade .fields {
    position: absolute;
    /* top: 80%; */
    bottom: 0;
    
    height: max-content;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    
    /* background-color: transparent; */
    background-color: rgba(30, 30, 30, 0.6);
    
    gap: 5px;
    
    /* background-image: linear-gradient(to right, rgba(30,30,30,0) 30%, rgba(30,30,30,0.6), rgba(30,30,30,0.8), rgba(30,30,30,0.6), rgba(30,30,30,0) 70%); */
}

.portfolio.diaporama.fade .fields .field-item {
    /* background-color: rgba(30,30,30,0.2); */
    width: 100%;
    background-color: transparent;
    
    border-radius: 0;
}

.portfolio.diaporama.fade .fields .field-item .fieldvalue {
    display: inline-block;
    text-align: center;
    
    color: white;
    
    width: 100%;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* background-image: linear-gradient(to right, rgba(0,0,0,0.6), black, rgba(0,0,0,0.6)); */
    border-radius: 3px;
    
}

/* .portfolio.diaporama.fade .fields .field-item:nth-child(1) { */
/*     color: white; */
/* } */

/* .portfolio.diaporama.fade .fields .field-item:nth-child(2) { */
/*     color: rgba(255, 255, 255, 0.8); */
/* } */

/* .portfolio.diaporama.fade .fields .field-item:nth-child(3) { */
/*     color: rgba(255, 255, 255, 0.6); */
/* } */

.portfolio.diaporama.fade .bnavi {
    height: 100%;
}