/* Стандартный стиль кнопки (когда НЕ fullscreen) */
.catalog-fullscreen {
    position: absolute;
    right: calc(50% - 22.5px);
    z-index: 10;
    width: 43px;
    height: 43px;
    line-height: 1;
    transition: 0.5s;
    top: 0px;
    opacity: 0;
    cursor: auto;
}

/* Ховер, когда не в полноэкранном режиме */
.macroframecontainer:hover .catalog-fullscreen {
    transition: 0.5s;
    top: 9px;
    opacity: 1;
    cursor: pointer;
}

.catalog-fullscreen.fullscreen-active {
    position: fixed !important;
    z-index: 9999 !important;
    top: 9px !important;
    opacity: .4 !important;
    cursor: pointer !important;
    transition: 0.5s !important;
}

.catalog-fullscreen.fullscreen-active:hover {
    opacity: 1 !important;
}





.macro-catalog-main {
    display: block;
    width: 100%;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.macro-catalog-background-temporary {
    transition: 0.5s;
    z-index: 2;
}

.macro-catalog-main h3, .macro-catalog-main span {
    text-shadow: 0px 0px 5px #0000002e;
}

.macro-catalog-background-temporary-back {
    background: var(--bs-primary);
    opacity: 0.25;
    z-index: 1;
}

.macro-catalog-background-temporary-back-black {
    background: #000;
    opacity: 0.06;
    z-index: 2;
}

.macro-catalog-overlay {
    background: #00000015;
    opacity: 0;
    transition: 0.5s;
    z-index: 3;
}

.macro-catalog-main:hover .macro-catalog-overlay {
   opacity: 1;
   transition: 0.5s;
}

.macro-catalog-main:hover .macro-catalog-background-temporary {
    opacity: 0;
    transition: 0.5s;
 }