#root .promotion-container, #root .slideshow {
    /* width:100%; */
}

#root .slideshow {
    position: relative;
    /* width:100%; */
    height: 100%;
}

#root .slideshow app-widget-host {
    /* width:100%; */
    height: 100%;
}

#root .promotion-container {
    /* width: 100%; */
    position: relative;
    /* float: right; */
}

.promotion-container:hover .promotion-card:not(:hover) {
    /* opacity: .75; */
}

#root .promotion-container .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--c-shade-b);
    pointer-events: none;
}

#root .promotion-container app-widget-host {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#root .promotion-card {
    flex: 1 1 320px;
    width: 100%;
    max-width: 320px;
    margin: 5px;
    position: relative;
    transition: all 0.2s ease-in-out;
    z-index: 1;
    overflow: hidden;
}

#root .promotion-card:hover {
    z-index: 5;
}

#root .promotion-card app-widget-host {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
}

#root .promotion-card .image {
    height: calc(100% - 60px);
    width: 100%;
    margin-top: auto;
}

#root .promotion-card img {
    height: 100%;
    width: 100%;
    margin-top: auto;
}

#root .promotion-card app-content-block {
    width: 100%;
    display: flex;
}

#root .promotion-card app-content-block div {
    display: inherit;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#root .promotion-card .title {
    background-color: var(--c-emphasis);
    height: 60px;
    margin-bottom: auto;
    box-shadow: 1px 2px 3px var(--c-primary-b)
}

#root .promotion-card .subtitle {
    background-color: yellow;
    height: 30px;
}

#root .promotion-card .description {
    background: linear-gradient(to bottom, orange, var(--c-emphasis));
    height: 0;
    transition: all .2s ease-in;
    position: absolute;
    bottom: 0px;
}

#root .promotion-card .description div {
    opacity: 0;
}

#root .promotion-card:hover .description {
    height: 100%;
    position: absolute;
    bottom: 0;
}

#root .promotion-card:hover .description div {
    opacity: 1;
}

#root .promotion-card:hover .promotion.link {
    width: 50px;
}

#root .promotion.link {
    position: absolute;
    width: 0px;
    height: 100%;
    right: -25px;
    background-color: var(--c-emphasis);
    transform: skewX(10deg);
    z-index: 5;
    transition: all .3s ease-out;
    box-shadow: -1px -1px 6px var(--c-primary-b);
    overflow: hidden;
}

#root .promotion.link::before {
    width: 24px;
    height: 24px;
    content: "";
    transform: skewX(-10deg) !important;
    background-image: url(/v1.02/r/images/site/icons/goarrow.svg);
    position: absolute;
    left: 10px;
    top: 10px;
}

#root.ui-overflow-hidden.active-promotion-modal .promotion-modal.ui-dialog {
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%)!important;
    width: 50%!important;
    bottom:unset
}

#root.ui-overflow-hidden.active-promotion-modal .promotion-modal.ui-dialog .ui-dialog-content > div {
    width: 100%;
    max-width:unset;
    padding:unset;
}

#root.ui-overflow-hidden.active-promotion-modal .mobile .promotion-modal.ui-dialog {
    width: 90%!important;
}

#root .promotion-modal.ui-dialog {
    top: 0px!important;
    transition: top 0.2s ease-in-out;
}

#root app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div {
    /* height: 0px; */
}

#root.ui-overflow-hidden app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-content, #root.ui-overflow-hidden app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-titlebar {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    width: 100%;
    max-height: 50vh;
    height: 100%;
    border: unset;
}

#root.ui-overflow-hidden .mobile app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-content {
    max-height: 100vh;
}

#root.ui-overflow-hidden .mobile app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-content > div, #root.ui-overflow-hidden .mobile app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-content > div > app-widget-host {
    height: 100%;
}

#root.ui-overflow-hidden app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-titlebar {
    text-align: left;
    background: linear-gradient(to right, var(--c-primary), var(--c-primary-b))
}

#root.ui-overflow-hidden app-modal .outer-hide-modal-overlay p-dialog .promotion-modal > div.ui-dialog-content {
    background: linear-gradient(to right, var(--c-background), var(--c-primary-d));
    overflow: hidden;
}

#root .promotion-content-container app-widget-host {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 300px;
}

#root .mobile .promotion-content-container app-widget-host {
    /* height:600px; */
}

#root .mobile .promotion-content-container app-widget-host {
    flex-direction: column;
    height: 100%
}

#root .promotion-content-container {
    height: 300px;
    position: relative;
    width: 100%;
}

#root .mobile .promotion-content-container {
    height: 80vh;
    color: var(--c-white-e);
}

#root .promotion-content-container .promotion-image {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    z-index: auto;
    transform: rotate3d(0.1, -0.1, 0, 45deg);
}

#root .mobile .promotion-content-container .promotion-image {
    height: unset
}

#root .promotion-content-container .promotion-image img {
    width: 100%;
}

#root .promotion-content-container .promotion-content, #root .promotion-content-container .promotion-description {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#root .promotion-content-container .promotion-content {
    align-items:flex-start
}
#root .mobile .promotion-content-container .promotion-description {
    height: 30%;
    min-height: 100px;
}

#root .promotion-content-container .promotion-content {
    background-color: var(--c-background);
    width: 60%;
    overflow: auto;
    position: relative;
    padding:15px;
}

#root .mobile .promotion-content-container .promotion-content {
    background-color: var(--c-primary-d);
}

#root .mobile .promotion-content-container .promotion-content {
    width: 100%;
    height: 70%;
}
#root  .promotion-content-container .promotion-content * {
    font-size:14px!Important;
}
#root .promotion-content-container .promotion-content div {
    /* top: 0px; */
    /* position: absolute; */
}

#root .promotion-content-container .promotion-description {
    width: 40%;
    background: linear-gradient(to bottom, transparent,var(--c-primary-d));
}

#root .mobile .promotion-content-container .promotion-description {
    width: 100%;
}

.product-menu ul li:last-child {
    /* display:none; */
}

.lang-en .product-menu ul li:last-child,
 .lang-de .product-menu ul li:last-child {
    display:flex;
}