::-moz-selection {
    background-color: rgba(0,0,0,0.25);
    color: white;
}

::selection{
    background-color: rgba(0,0,0,0.25);
    color: white;
}

html { font-size: 10px; }

html,
body {
    height: 100vh;
    overflow: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Apax-Thin', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.4em;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss03" 1;
}

body[data-language="fr"] .de,
body[data-language="fr"] .en,
/*body[data-language="en"] .fr,*/
body[data-language="en"] .de,
body[data-language="de"] .en,
body[data-language="de"] .fr {
    display: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.clear:after {
    content: "";
    display: table;
    clear: both;
}

.button {
    cursor: pointer !important;
}

.invisible {
    opacity: 0 !important;
}

.black-text {
    color: black !important;
}

.unselectable {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#logo {
    width: 8rem;
    height: 8rem;
    padding: 2.15rem 2.5rem;
    position: absolute;
    z-index: 10000;
    color: white;
    font-family: 'Apax-Medium';
    font-weight: normal;
    transition: background-color .2s ease-in-out,
                transform 1s cubic-bezier(0.14, 0, 0.14, 1);
}

    #logo.out {
        transform: translateY(-100%);
    }

    #logo.invert {
        background-color: white;
    }

    #logo img {
        mix-blend-mode: difference;
    }

#list {
    width: calc(100% - 8rem);
    height: 8rem;
    position: absolute;
    top: 0;
    left: 8rem;
    z-index: 10;
    overflow: hidden;
}

    #list .container {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        transform: translateZ(0);
        transition: transform .75s cubic-bezier(0.14, 0, 0.14, 1);
        font-size: 0;
        white-space: nowrap;
        background-color: rgba(127, 127, 127, 0.8);
    }

        #list.out .container {
            transform: translateY(-100%);
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
        }

        #list .container:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #list .container .episode {
            display: inline-block;
            width: 16.666666667%;
            height: 100%;
            position: relative;
            background-color: black;
        }

            #list .container .current.episode {
                pointer-events: none;
            }

            #list .container .episode .thumbnail {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.5;
                transition: opacity 0.2s ease-in-out;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }

                #list .container .episode:hover .thumbnail,
                #list .container .current.episode .thumbnail {
                    opacity: 1;
                }

            #list .container .episode .person {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity 0.2s ease-in-out;
                color: white;
                font-size: 1.4rem;
                line-height: 8rem;
                text-align: center;
            }

                #list .container .episode:hover .person,
                #list .container .current.episode .person {
                    opacity: 0;
                }

#intro {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: black;

}

    #intro.out {
        opacity: 0;
        z-index: -1;
        transition: opacity 1s ease-in-out, z-index 0s 1s;
    }

    #intro_video {
        width: 177.77777778vh;
        min-width: 100%;
        height: 100%;
        min-height: 56.25vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.6;
        transition: opacity 1s ease-in-out;
    }

    #intro_logo {
        width: 30%;
        max-width: 50rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 1s ease-in-out;
        color: white;
        font-family: 'Apax-Medium';
        font-weight: normal;
    }

    #intro_tagline,
    #intro_language {
        position: absolute;
        top: 5rem;
        left: 50%;
        transform: translateX(-50%);
        transition: opacity 1s ease-in-out;
        color: white;
        font-size: 1em;
        font-weight: normal;
        text-align: center;
    }

    #intro_language {
        top: auto;
        bottom: 5rem;
    }

    #intro_list {
        width: 100%;
        height: 8rem;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        transform: translateZ(0);
        transition: transform .75s cubic-bezier(0.14, 0, 0.14, 1);
        font-size: 0;
        white-space: nowrap;
        background-color: rgba(127, 127, 127, 0.8);
    }

        #intro_list.out {
            transform: translateY(100%);
        }

        #intro_list:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #intro_list .episode {
            display: inline-block;
            width: 16.666666667%;
            height: 100%;
            overflow: hidden;
            position: relative;
            background-color: black;
            transform-origin: bottom;
            transform: translateZ(0);
            transition: transform 0.2s ease-in-out;
        }

            #intro_list:not(.out) .episode:hover {
                transform: scaleY(1.5);
            }

            #intro_list .episode .thumbnail {
                width: 100%;
                height: 150%;
                position: absolute;
                top: 50%;
                left: 0;
                opacity: 0.5;
                transform: translateY(-50%);
                transition: opacity 0.2s ease-in-out,
                            transform 0.2s ease-in-out;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }

                #intro_list:not(.out) .episode:hover .thumbnail {
                    opacity: 1;
                    transform: translateY(-50%) scaleY(0.666666667);
                }

            #intro_list .episode .person {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity 0.3s ease-in-out 0.1s;
                color: white;
                font-size: 1.4rem;
                line-height: 8rem;
                text-align: center;
            }

                #intro_list .episode:hover .person {
                    opacity: 0;
                    transition-delay: 0s;
                    transition-duration: 0s;
                }

    #intro_quotes {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
    }

        #intro_quotes.out {
            z-index: -1;
        }

        #intro_quotes .quote,
        #intro_last {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateZ(0);
            transition: opacity 0.3s ease-in-out 0.3s;
            color: white;
            font-family: "Apax-Medium";
            background-color: black;
        }

        #intro_last {
            opacity: 1;
            z-index: 0;
            transition-delay: 0s;
            background-color: transparent;
        }

            #intro_last.out {
                z-index: -1;
                opacity: 0;
            }

            #intro_quotes .current.quote {
                z-index: 1;
                opacity: 1;
                transition-delay: 0s;
            }

            #intro_quotes .quote .background {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                opacity: 0.6;
            }

            #intro_quotes .quote .season-number,
            #intro_quotes .quote .episode-number,
            #intro_last .season-number,
            #intro_last .episode-number {
                padding-left: 1rem;
                padding-bottom: 0.1rem;
                position: absolute;
                top: 3rem;
                left: 12rem;
                line-height: 0.8em;
                border-left: 0.2rem solid white;
            }

            #intro_quotes .quote .episode-number,
            #intro_last .episode-number {
                left: 75%;
            }

            #intro_quotes .quote .person,
            #intro_quotes .quote .city,
            #intro_last .person,
            #intro_last .city {
                padding-left: 1rem;
                position: absolute;
                top: 25%;
                left: 12rem;
            }

            #intro_quotes .quote .city,
            #intro_last .city {
                left: 75%;
            }

                #intro_quotes .quote .person:after,
                #intro_last .person:after,
                #intro_last .city:after {
                    content: "";
                    display: block;
                    width: 3rem;
                    height: 0.2rem;
                    position: absolute;
                    bottom: -12.5vh;
                    left: 1.4rem;
                    background-color: white;
                }

            #intro_quotes .quote blockquote,
            #intro_last .watch,
            #intro_last .read {
                width: 75%;
                /*max-width: 1000px;*/
                padding-left: 1rem;
                position: absolute;
                top: 50%;
                left: 12rem;
                transition: transform 0.5s ease-in-out,
                            opacity 0.5s ease-in-out;
                font-size: 5vw;
                line-height: 1.1em;
            }

            #intro_last .watch,
            #intro_last .read {
                width: auto;
                cursor: pointer;
            }

            #intro_last .read {
                left: 75%;
            }

                #intro_quotes .quote blockquote.out,
                #intro_last .watch.out,
                #intro_last .read.out {
                    opacity: 0;
                    transform: translateY(4rem);
                }

            #intro_quotes_playing,
            #intro_quotes_reading {
                padding-left: 1rem;
                position: absolute;
                top: 50%;
                left: 12rem;
                z-index: 1;
                transition: transform 0.5s ease-in-out .2s,
                            opacity 0.5s ease-in-out .2s;
                color: white;
                font-family: "Apax-Medium";
                font-size: 5vw;
                line-height: 1.1em;
            }

                #intro_quotes_playing.out,
                #intro_quotes_reading.out {
                    opacity: 0;
                    transform: translateY(-4rem);
                }

#player {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

    #player.inactive {
        cursor: none;
    }

    #player_video {
        width: 177.77777778vh;
        min-width: 100%;
        height: 100%;
        min-height: 56.25vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #player_controls {
        width: calc(100% - 13.5rem);
        height: 3.4rem;
        position: absolute;
        bottom: 3.4rem;
        left: 13.5rem;
        z-index: 10;
        transition: transform .2s ease-in-out;
        color: white;
        background-color: rgba(127, 127, 127, 0.8);
    }

        #player.inactive #player_controls {
            transform: translateY(200%);
        }

        #player_controls_play {
            width: 6.6rem;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: background-color 0.2s ease-in-out;
        }

            #player_controls_play:hover {
                background-color: rgba(255, 255, 255, 0.3);
            }

            #player[data-state="paused"] #player_controls_play:before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) translateX(0.2rem);
                border-top: 0.6rem solid transparent;
                border-bottom: 0.6rem solid transparent;
                border-left: 1.2rem solid white;
            }

            #player[data-state="playing"] #player_controls_play:before,
            #player[data-state="playing"] #player_controls_play:after {
                content: "";
                display: block;
                width: 0.3rem;
                height: 1.2rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) translateX(-0.3rem);
                background-color: white;
            }

            #player[data-state="playing"] #player_controls_play:after {
                transform: translate(-50%, -50%) translateX(0.3rem);
            }

        #player_controls_playbar {
            width: calc(100% - 6.6rem - 16rem);
            height: 100%;
            position: absolute;
            top: 0;
            left: 6.6rem;
        }

            #player_controls_playbar_progress {
                width: 100%;
                height: 100%;
                transform-origin: left;
                transform: scaleX(0);
                background-color: rgba(0, 0, 0, 0.5);
            }

                #player_controls_playbar_progress.animate {
                    transition: transform 1s ease-in-out;
                }

            #player_controls_playbar_time {
                height: 100%;
                padding: 0.7rem 2rem;
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
            }

                #player_controls_playbar_time_duration {
                    opacity: 0.3;
                }

            #player_controls_playbar_title {
                height: 100%;
                padding: 0.7rem;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                pointer-events: none;
            }

        #player_controls_extra {
            width: 16rem;
            height: 100%;
            padding: 0.7rem;
            position: absolute;
            top: 0;
            right: 0;
            text-align: center;
            border-left: rgba(255, 255, 255, 0.3) 1px solid;
        }

            #player_controls_extra_volume {
                display: inline-block;
                width: 2.5rem;
                height: 60%;
                margin-top: -0.2rem;
                margin-right: 1rem;
                vertical-align: middle;
                text-align: left;
            }

                #player_controls_extra_volume .volume-indicator {
                    display: inline-block;
                    float: left;
                    width: 0.4rem;
                    height: 100%;
                    margin-right: 0.1rem;
                    background-color: white;
                    transition: transform 0.1s ease-in-out;
                }

                    #player_controls_extra_volume .volume-indicator:hover {
                        transform: scaleY(1.2);
                    }

            #player_controls_extra_language {
                display: inline-block;
            }

                #player_controls_extra_language .button {
                    opacity: 0.3;
                    transition: opacity 0.2s ease-in-out;
                }

                    #player_controls_extra_language .button:hover {
                        opacity: 1;
                    }

                body[data-language="fr"] #player_controls_extra_language .button[data-language="fr"],
                body[data-language="en"] #player_controls_extra_language .button[data-language="en"],
                body[data-language="de"] #player_controls_extra_language .button[data-language="de"] {
                    opacity: 1;
                }

    #player_selection {
        width: 100%;
        height: 3.4rem;
        position: absolute;
        bottom: 3.4rem;
        left: 0;
        transition: transform .2s ease-in-out;
    }

        #player.inactive #player_selection {
            transform: translateY(200%);
        }

        #player_selection_select {
            width: 13.5rem;
            height: 3.4rem;
            padding: 0.7rem 2rem;
            position: absolute;
            left: 0;
            bottom: 0;
            color: #2C3E50;
            background-color: #E4E5E6;
        }

            #player_selection[data-state="closed"] #player_selection_select:after {
                content: "episodes";
            }

            #player_selection[data-state="opened"] #player_selection_select:after {
                content: "close";
            }

            #player_selection_select .icon {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                margin-top: -0.2rem;
                margin-right: 1rem;
                vertical-align: middle;
                position: relative;
            }

                #player_selection_select .icon:before,
                #player_selection_select .icon:after {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 0.6rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) translateY(-0.4rem);
                    /*transition: height 0.4s ease-in-out,
                                transform 0.4s ease-in-out,
                                border-top-width 0.2s ease-in-out,
                                border-bottom-width 0.2s ease-in-out;*/
                    border-top: 0.2rem solid #C0C5CB;
                    border-bottom: 0.2rem solid #C0C5CB;
                }

                #player_selection_select .icon:after {
                    transform: translate(-50%, -50%) translateY(0.4rem);
                }

                #player_selection[data-state="opened"] #player_selection_select .icon:before {
                    height: 0;
                    border-top-width: 0rem;
                    transform: translate(-50%, -50%) rotate(135deg);
                    transition-delay: 0s, 0s, 0.2s, 0.2s;
                }

                #player_selection[data-state="opened"] #player_selection_select .icon:after {
                    height: 0;
                    border-bottom-width: 0rem;
                    transform: translate(-50%, -50%) rotate(-135deg);
                    transition-delay: 0s, 0s, 0.25s, 0.25s;
                }

        #player_selection_list {
            width: 100%;
            height: 8rem;
            position: absolute;
            bottom: 3.4rem;
            left: 0;
            overflow: hidden;
        }

            #player_selection_list .container {
                width: 100%;
                height: 100%;
                overflow-x: auto;
                transform: translateZ(0);
                transition: transform .2s ease-in-out;
                font-size: 0;
                white-space: nowrap;
                background-color: rgba(127, 127, 127, 0.8);
            }

                #player_selection[data-state="closed"] #player_selection_list .container {
                    transform: translateY(100%);
                }

                #player_selection_list .container:before {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    background-color: rgba(0, 0, 0, 0.5);
                }

                #player_selection_list .container .episode {
                    display: inline-block;
                    width: 16.666666667%;
                    height: 100%;
                    position: relative;
                    background-color: black;
                }

                    #player_selection_list .container .current.episode {
                        pointer-events: none;
                    }

                    #player_selection_list .container .episode .thumbnail {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0.5;
                        transition: opacity 0.2s ease-in-out;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                        #player_selection_list .container .episode:hover .thumbnail,
                        #player_selection_list .container .current.episode .thumbnail {
                            opacity: 1;
                        }

                    #player_selection_list .container .episode .person {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        transition: opacity 0.2s ease-in-out;
                        color: white;
                        font-size: 1.4rem;
                        line-height: 8rem;
                        text-align: center;
                    }

                        #player_selection_list .container .episode:hover .person,
                        #player_selection_list .container .current.episode .person {
                            opacity: 0;
                        }

#reader {
    width: 100%;
    height: calc(100% - 8rem);
    overflow: hidden;
    position: absolute;
    top: 8rem;
    left: 0;
    z-index: 100;
    transition: transform 1s cubic-bezier(0.14, 0, 0.14, 1);
}

    #reader[data-state="closed"] {
        transform: translateY(100%) translateY(-3.4rem);
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
    }

    #player.inactive ~ #reader[data-state="closed"] {
        transform: translateY(100%) translateY(3.4rem);
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
    }

    #reader[data-state="opened"] {
        transform: translateY(0);
    }

    #reader_keywords {
        width: 100%;
        height: 3.4rem;
        position: absolute;
        top: 0;
        left: 0;
    }

        #reader_keywords_read {
            width: 13.5rem;
            height: 3.4rem;
            padding: 0.7rem 2rem;
            position: absolute;
            left: 0;
            top: 0;
            color: white;
            background-color: #0B0A09;
        }

            #reader[data-state="closed"] #reader_keywords_read:after {
                content: "read";
            }

            #reader[data-state="opened"] #reader_keywords_read:after {
                content: "close";
            }

            #reader_keywords_read .icon {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                margin-top: -0.2rem;
                margin-right: 1rem;
                vertical-align: middle;
                position: relative;
            }

                #reader_keywords_read .icon:before,
                #reader_keywords_read .icon:after {
                    content: "";
                    display: block;
                    width: 60%;
                    height: 0.2rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform-origin: left center;
                    transform: translate(0, -50%) translateY(0.5rem) rotate(-135deg);
                    background-color: white;
                }

                #reader_keywords_read .icon:after {
                    transform: translate(0, -50%) translateY(0.5rem) rotate(-45deg);
                }

                #reader[data-state="opened"] #reader_keywords_read .icon:before {
                    transform: translate(0, -50%) translateY(-0.3rem) rotate(135deg);
                }

                #reader[data-state="opened"] #reader_keywords_read .icon:after {
                    transform: translate(0, -50%) translateY(-0.3rem) rotate(45deg);
                }

        #reader_keywords_list_fr,
        #reader_keywords_list_de {
            width: calc(100% - 13.5rem);
            height: 3.4rem;
            position: absolute;
            top: 0;
            left: 13.5rem;
            z-index: 10;
            transition: transform .2s ease-in-out;
            color: white;
            background-color: rgba(127, 127, 127, 0.8);
        }

            #reader_keywords_list_fr .keyword,
            #reader_keywords_list_de .keyword {
                float: left;
                width: 12.5%;
                height: 100%;
                padding: 0.7rem 1.4rem;
                overflow: hidden;
                transition: height 0.2s ease-in-out;
                color: #2C3E50;
            }

                #reader_keywords_list_fr .current.keyword,
                #reader_keywords_list_de .current.keyword {
                    height: 200%;
                }

            #reader_keywords_list_fr .keyword:nth-of-type(even),
            #reader_keywords_list_de .keyword:nth-of-type(even) {
                background-color: #F5F6F4;
            }

            #reader_keywords_list_fr .keyword:nth-of-type(odd),
            #reader_keywords_list_de .keyword:nth-of-type(odd) {
                background-color: #BABFBF;
            }

    #reader_content_fr,
    #reader_content_de {
        width: 100%;
        height: calc(100% - 3.4rem);
        position: absolute;
        top: 3.4rem;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: white;
    }

        #reader_content_fr img,
        #reader_content_de img {
            display: block;
            max-width: 100%;
            height: auto;
        }