/*  FAN DECK  */

.mod-fd {
    display: none;
}

.mfd-head .bttClose {
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.mod-fd.open {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: 100;
}

.mfd-head .bttClose .ico {
    height: 1rem;
    width: 1rem;
    cursor: pointer;
}


.mod-fd .back {
    width: 100%;
    height: 100%;
    background-color: #505050e6;
}

.mod-fd .front {
    background-color: #fff;
    position: absolute;
    box-shadow: 0rem 0.1875rem 0.375rem #00000029;
    width: calc(100% - 2rem);
    max-width: 1213px;
    height: calc(100% - 2rem);
    max-height: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mfd-main {
    width: 100%;
    height: calc(100% - 2.1875rem);
    display: flex;
}

.mfd-head {
    height: 2.1875rem;
}

/*--*/

/* --- --- fanDeck --- ---*/
.mfd-holder {
    height: 100%;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mfd-pageholder {
    position: absolute;
    left: 320px;
    /* top: 10px; */
    cursor: pointer;
    height: 417px;
    width: 92px;
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
}

.mfd-page {
    border-radius: 0px 0px 120px 120px;
    border: 1px solid #33333380;
    background-color: #fff;
    display: block;
    position: absolute;
    width: 90px;
    height: 415px;
    transform-origin: 10px 30px;
    -webkit-transform-origin: 10px 30px;
    -moz-transform-origin: 10px 30px;
    -ms-transform-origin: 10px 30px;
    -o-transform-origin: 10px 30px;
    transition-duration: 0.6s;
    transition-property: transform;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.mfd-pageholder .fpc {
    border-radius: 0px 0px 0px 0px;
}

.mfd-pc {
    width: 100%;
    height: calc(100% - 10px);
    position: relative;
    cursor: pointer;
    transform-origin: 10px 30px;
    -webkit-transform-origin: 10px 30px;
    -moz-transform-origin: 10px 30px;
    -ms-transform-origin: 10px 30px;
    -o-transform-origin: 10px 30px;
    transform: scale(1.0);
}

.mfd-pc .txt {
    width: calc(100% - 2px);
    overflow: hidden;
    height: 10px;
    line-height: 10px;
    font-size: 10px;
    color: #000;
    text-align: end;
    margin-right: 2px;
    padding-top: 2px;
}

.mfd-pc .txt.f-w {
    color: #fff;
}

.mfd-pc .txt.f-b {
    color: #000;
}

.mfd-ch {
    width: auto;
    height: 11%;
}

.mfd-cs {
    width: 100%;
    height: 2rem;
    position: absolute;
    border: 1px solid;
}

.mfd-sl {
    width: 100%;
    height: 2rem;
    position: absolute;
    cursor: pointer;
}

.mfd-sl .ui-slider {
    height: 2rem;
}

.mfd-sl .ui-slider-horizontal .ui-slider-handle {
    top: 0px;
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
    background: transparent;
    margin-left: -20px;
    outline: none;
    cursor: pointer;
}

.mfd-csp {
    height: 2rem;
    left: 0px;
    top: 0px;
    position: absolute;
}

.mfd-fandeck {
    width: 830px;
    height: 510px;
    position: relative;
    /* 	left: calc(50% - 415px);
	top: calc(50% - 285px); */
    /* background-color: antiquewhite; */
}

.mfd-slider {
    /* 	top: calc(50% + 228px);
	left: calc(50% - 401px); */
    position: relative;
    margin-top: 20px;
    height: 2rem;
}

/* --- ---   fanDeck end --- ---*/

@media (min-width: 992px) {
    /* DESKTOP ONLY */
}

@media (min-width: 768px) {
    /* DESKTOP AND TABLET */
}

@media (min-width: 768px) and (max-width: 991px) and (min-height: 481px) {

    /* TABLET ONLY */
    .mod-fd .front {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        max-height: calc(100% - 2rem);
    }
}

@media (orientation: portrait) and (max-width: 768px) and (max-height: 1280px) {
    /* PHONE HOCH */

    .mod-fd .front {
        top: 13.0625rem;
        transform: inherit;
        left: 0px;
        width: 100%;
        height: auto;
        bottom: 3rem;
        box-shadow: none;
    }

    .mod-fd .back {
        background-color: #50505030;
    }

    .mod-fd .mfd-head {
        height: 2.1875rem;
    }

    .mod-fd .mfd-head .txt {
        display: none;
    }
}

@media (orientation: landscape) and (max-width: 915px) and (max-height: 480px) {
    /* PHONE QUER */

    .mod-fd .back {
        background-color: #50505030;
    }

    .mod-fd .front {
        right: 3.375rem;
        width: auto;
        left: 12rem;
        transform: inherit;
        top: 3rem;
        bottom: 0rem;
        height: auto;
    }

    .mod-fd .mfd-head .txt {
        display: none;
    }
}