.mx-panel{display: flex;}
.mx-panel.column{flex-direction: column;}
/*.mx-panel.column.center{justify-content: center;}*/
.mx-panel.center{align-items: center;}
.mx-panel.space-between{justify-content: space-between;}
.mx-panel.centered{align-items: center; justify-content: center;}

.mx-panel.big{gap: 70px;}
.mx-panel.big:not(.inner){padding: 70px;}
.mx-panel.small{gap: 30px;}
.mx-panel.small:not(.inner){padding: 30px;}
.mx-panel.mini{gap: 14px;}
.mx-panel.mini:not(.inner){padding: 14px;}
.mx-panel.micro{gap: 5px;}
.mx-panel.micro:not(.inner){padding: 5px;}
.mx-panel.w100{
    max-width: 100%;
    overflow: auto;
}

.mx-dialog{display: none;}
.mx-combo > .combo-caption{cursor: pointer;}
.mx-banner{
    display: flex; flex-direction: column; align-items: center; position: fixed;
    left: 0; top: 0; height: 100vh; width: 100vw;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    padding: 70px; gap: 70px;
    z-index: 100;
}
.mx-banner.error{
    background-color: rgba(255, 0, 0, 0.2);
}

.mx-header-img{
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 350px;
}

.mx-carousel {
    display: flex;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    > * {
        transform: translateX(0);
        will-change: transform;
        max-width: 100%;
        min-width: 100%;
        &.mx-animate-left {animation: mx-scrolling-left .5s linear;}
        &.mx-animate-rigth {animation: mx-scrolling-right .5s linear;}
    }
}

@keyframes mx-scrolling-right {
    0% { transform: translateX(0); } 
    100% { transform: translateX(100%); }
}

@keyframes mx-scrolling-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

[carousel-left], [carousel-right]{
    position: absolute;
    top: 70px;
    font-size: 48px;
    color: gray;
    cursor: pointer;
    opacity: 0.7;
    &:hover{color: #ff9933;}
}
[carousel-left]{left: 30px;}
[carousel-right]{right: 30px;}

@media screen and (orientation: landscape) {
    [carousel-left]{left: -70px;}
    [carousel-right]{right: -70px;}
}

@media screen and (orientation: portrait) {
    .mx-panel.wrap-mobil{flex-wrap: wrap;}
    [carousel-left]{left: 30px;}
    [carousel-right]{right: 30px;}
}