/**
 * Decoration */



#ctnr-content-predmetnik> .bubble-placeholder {
    background-image : url('../media/bubbles/bubbles_predmetnik_2.svg');
    height: calc(37vw + 30px);
    bottom: -145px;
    width: 97vw;
    right: -0px;
    }


 @media (min-width: 768px) {
    #ctnr-content-predmetnik> .bubble-placeholder {
        background-image : url('../media/bubbles/bubbles_predmetnik.svg');
        height  : 978px;
        bottom  : -411px;
        width   : calc(60vw + 70px);
        right   : 0px;
        z-index : 2;
    }
}

@media (min-width: 1200px) {
    #ctnr-content-predmetnik> .bubble-placeholder {
        display: none;
    }
}


 @media (min-width: 1400px) {
    #ctnr-content-predmetnik> .bubble-placeholder {
        background-image : url('../media/bubbles/bubbles_predmetnik.svg');
        height: 690px;
        bottom: -110px;
        width: 1310px;
        right: -0px;
        display: block;
        z-index: 2;
    }
}

#ctnr-content-predmetnik{
    margin-bottom: 200px;
}

@media (min-width: 768px) {
#ctnr-content-predmetnik{
    margin-bottom: unset;
}
}



.predmetnik-instrument-list-item {
    width  : 100%;
    height : 670px;
}

.predmetnik-instrument-container,
.predmetnik-instreflect-container {
    position : relative;
    width    : 100%;
}
.predmetnik-instrument-container {
    z-index  : 2;
    width    : 100%;
    height   : 460px;
    background-position : center bottom;
    background-size     : contain;
    background-repeat   : no-repeat;
}
.predmetnik-instreflect-container {
    z-index  : 1;
    height   : 100px;
    overflow : hidden;
    top      : 0px;

}
.predmetnik-instreflect-container > .reflection {
    background-image : linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0.7)), url("predmetnik_trobenta.png");
    height           : 460px;
    width            : 100%;
    background-position : center bottom;
    background-size     : contain;
    background-repeat   : no-repeat;
    -moz-transform   : scaleY(-1);
    -o-transform     : scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform        : scaleY(-1);
    filter           : FlipV;
    -ms-filter       : "FlipV";
}


.predmetnik-text-container { display : flex; position : relative; top : -60px; z-index: 3; }
.predmetnik-text-container > div { display : inline-block; position : relative; left : 25%; max-width: 90%; }
.predmetnik-text-container > div > .predmetnik-text-title {
    color       : var(--page-green);
}
.predmetnik-text-container > div > .predmetnik-text-title > i { margin-left : 15px; }