/* Reset */
html,
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

html {
    /* default is 16px, 62.5% makes 1rem == 10px, 66.666% from 1920 to 1280 screen.. so the magic number is: */
    font-size: 41.6%;
}

body {
    font-size: 1.6rem;
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: transparent;
}

a, a:link, a:visited {
    text-decoration: none;
}

img {
    max-width: 100%;
}

button, input {
    font-family: inherit;
}

/* Fonts */
@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 300;
    src: url('../assets/font/quicksand-light.woff2');
    font-display: fallback;
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    src: url('../assets/font/quicksand-regular.woff2');
    font-display: fallback;
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 500;
    src: url('../assets/font/quicksand-medium.woff2');
    font-display: fallback;
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    src: url('../assets/font/quicksand-semibold.woff2');
    font-display: fallback;
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 700;
    src: url('../assets/font/quicksand-bold.woff2');
    font-display: fallback;
}

/* Variables */
html {
    --color-primary: #E3C454;
    --color-primary-gradient: linear-gradient(90deg, #EACA7E 0%, #EDE085 34.12%, #BA9456 102.03%);
    --color-secondary: #131428;
    --color-secondary-light: #333552;
    --color-secondary-over: #1E1D2F;
    --color-secondary-selected: #a7a9cf;
    --color-active: #ffffff;
    --color-font: #ffffff;
    --color-link: var(--color-primary);
    --color-inactive-link: #bbbbbb;
    --color-exclusive: #EC1B23;
    --color-available-for: #E9C922;
    --color-new: #12C787;
    --color-extra: #7E559F;

    --shadow-focus: 0 0 0 0.4rem var(--color-active);
}

/* Global */
body {
    background-color: var(--color-secondary);
    color: var(--color-font);
    font-family: Quicksand, sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}

a, a:visited, a:active {
    color: var(--color-link);
}

a:focus {
    color: var(--color-active);
}

/* Cookie consent override */
#qc-cmp2-ui {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}

#qc-cmp2-ui *:focus {
    box-shadow: inset 0 0 0 0.1rem #131428, 0 0 0 0.3rem #131428;
}

#qc-cmp2-ui button span,
#qc-cmp2-ui h2 {
    line-height: 1.3;
}

#qc-cmp2-persistent-link {
    display: none;
}

#profil-page #qc-cmp2-persistent-link {
    display: flex;
}

#profil-page #qc-cmp2-persistent-link:focus {
    box-shadow: inset 0 0 0 0.4rem #FFFFFF;
}

/* Components */
.button {
    display: block;
    padding: 1.4rem 4rem;
    border: none;
    border-radius: 8rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: var(--color-secondary);
    background: var(--color-primary-gradient);
    font-family: Quicksand, sans-serif;
    white-space: nowrap;
}

a.button,
a.button:visited,
a.button:active {
    color: var(--color-secondary);;
}

.button--fluid {
    display: block;
    text-align: center;
}

.button--light {
    padding: 1rem 3.6rem;
    color: var(--color-primary);
    background: transparent;
    border: .4rem solid var(--color-primary);
}

.button--golden-grad-border {
    position: relative;
    padding: 1.3rem 4.1rem;
    border: none;
    background: var(--color-secondary);
}

.button--golden-grad-border:before {
    content: "";
    background: linear-gradient(90deg, #EACA7E 0%, #EDE085 34.12%, #BA9456 102.03%);
    position: absolute;
    top: -0.4rem;
    left: -0.4rem;
    width: calc(100% + 2 * 0.4rem);
    height: calc(100% + 2 * 0.4rem);
    z-index: -1;
    border-radius: 8rem;
}

.button--without-border {
    padding: 1rem 3.6rem;
    color: var(--color-primary);
    background: transparent;
}

a.button.button--without-border:focus {
    color: var(--color-active);
    background: transparent;
}

a.button.button--light,
a.button.button--light:visited,
a.button.button--light:active,
a.button.button--without-border {
    color: var(--color-primary);
}

a.button.button--light:focus {
    color: var(--color-secondary);
    border: none;
}

.button:focus,
a.button:focus,
.button.button--light:focus,
a.button.button--light:focus {
    background: var(--color-active);
    color: var(--color-secondary);
    outline: none;
}

.layout {
    position: relative;
}

.layout__hero,
.layout__ribbons,
.layout__vertical-card,
.layout__zero-banner {
    padding: 0 4.8rem;
}

.layout__filter {
    padding: 0 4.8rem;
    margin: 4.4rem 0;
}

.layout__grid,
.layout__faq {
    padding: 0 19.1rem;
}

.layout__faq {
    margin-bottom: 4.8rem;
}

.layout__grid--paginated,
.layout__vertical-card--paginated {
    padding-top: 2.4rem;
}

.layout__search {
    padding-bottom: 4.8rem;
}

.layout__header--hidden {
    display: none;
}

.layout__profil {
    margin: 0 auto;
}

.layout__management {
    margin: 11.6rem auto;
}

.layout__privacy-statement {
    margin: 0 34.1rem;
}

.layout__navback {
    display: flex;
    justify-content: center;
}

.layout__logout {
    display: flex;
    min-height: 100vh;
}

.layout__premium-management {
    margin: 0 16.5rem;
}

.layout__modal {
    width: 100vw;
    height: 100vh;
    display: flex;
    margin: auto;
}

.input {
    padding: 2.4rem 4rem;
    width: 100%;
    border: none;
    border-radius: 5rem;
    color: var(--color-font);
    background-color: var(--color-secondary-light);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 150%;
}

.input--search {
    padding-left: 10.2rem;
    background-image: url("../assets/image/icon-search.svg");
    background-repeat: no-repeat;
    background-position: 4rem center;
    background-size: 4.2rem;

}

.header {
    position: relative;
    padding: 5.1rem 22.8rem;
    background-image: url('../assets/image/tv2play_brand_logo.png');
    background-position-x: -0.4rem;
    background-position-y: -2.7rem;
    background-size: 16.5rem;
    background-repeat: no-repeat;
}

.header__logo {
    position: absolute;
    top: -0.27rem;
    left: -0.4rem;
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__item {
    color: var(--color-inactive-link);
    margin: 0 5.4rem;
    padding-bottom: 1.2rem;
    font-weight: 500;
    font-size: 3.2rem;
    /*    line-height: 4rem; */
    border-bottom: 0.4rem solid transparent;
}

.nav__item:visited {
    color: var(--color-inactive-link);
}

.nav__item:focus {
    color: var(--color-active);
    font-weight: 700;
    border-color: 4px solid var(--color-active);
    outline-color: transparent;
}

.nav__item--selected {
    background: var(--color-primary-gradient);
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-bottom-color: var(--color-primary);
}

.nav__item--selected:focus {
    color: var(--color-active);
    -webkit-text-fill-color: var(--color-active);
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.hero--show {
    min-height: 55.2rem;
    padding: 0 14.3rem;
}

.hero__content {
    width: 59.1rem;
}

.hero__title {
    margin: 0;
    font-size: 3.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hero__title--show {
    font-size: 4.8rem;
    font-weight: 700;
    -webkit-line-clamp: 1;
}

.hero__subtitle {
    margin: 1.6rem 0;
    font-size: 2.4rem;
    font-weight: 700;
}

.hero__lead {
    margin: 0;
    font-size: 2.4rem;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hero__lead--show {
    font-size: 2.8rem;
    line-height: 3.6rem;
    -webkit-line-clamp: 4;
}

.hero__controls {
    display: flex;
}

.hero__control {
    margin: 3.6rem 2.4rem 0 0;
}

.hero__image {
    background: var(--bgimage);
    background-size: cover;
    border-radius: 1.2rem;
}

.hero__image-show {
    width: 90rem;
    height: 50.5rem;
    margin: 0 0 0 4.8rem;
}

.hero__image-videonext {
    width: 90rem;
    height: 50.5rem;
}

.hero__image-dashboard {
    width: 64.5%;
    height: 66.4rem;
}

/* ribbon */

.ribbon {
    margin-bottom: 2.2rem;
}

.ribbon__title {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 1.6rem;
}

.ribbon__track {
    display: flex;
}

.ribbon__track::after {
    content: '';
    display: block;
    flex-grow: 1;
}

.ribbon__item {
    /* for 4 items, 100% minus 'show all' width and spacing */
    width: calc((100% - 26.2rem - (4 * 2.4rem)) / 4 );
}

.ribbon__item + .ribbon__item {
    margin-left: 2.4rem;
}

.ribbon__item--all {
    display: flex;
    width: 26.2rem;
    border-radius: 1.2rem;
}

.ribbon__show-all-card__cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 26.2rem;
    padding: 4.4rem;
    border-radius: 1.2rem;
    background: var(--color-secondary-over, #1e1d2f);
}

.ribbon__show-all-card__cta:focus {
    box-shadow: var(--shadow-focus);
}

.ribbon__show-all-card__image {
    width: 9rem;
    height: 9.2rem;
    padding: 2.2rem;
    border-radius: .8rem;
    border: .6rem solid var(--color-primary);
}

.ribbon__show-all-card__title {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--color-font);
    margin-bottom: 3.6rem;
    white-space: nowrap;
}

.ribbon__show-all-card__title:visited {
    color: var(--color-font);
}

    /* card */
.card {
    --padding-for-items: 2.8rem;
    height: 44.9rem;
}
.card__cta {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: var(--color-secondary-over);
    color: var(--color-font);
}

.card__cta:visited {
    color: var(--color-font);
}

.card__cta:focus {
    box-shadow: var(--shadow-focus);
}

.card__img-container {
    position: relative;
    flex-shrink: 0;
    height: 24.6rem;
    background-image: var(--bgimage);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.card__img__logo {
    position: absolute;
    top: var(--padding-for-items);
    right: var(--padding-for-items);
    height: 2.2rem;
}

.card__img__live {
    position: absolute;
    top: var(--padding-for-items);
    left: 0;
    height: 3.2rem;
    background-color: white;
    border-radius: 0 0.4rem 0.4rem 0;
}

.card__img__age-restriction {
    position: absolute;
    bottom: var(--padding-for-items);
    left: var(--padding-for-items);
    width: 4rem;
}

.card__badge {
    position: absolute;
    top: var(--padding-for-items);
    font-size: 1.8rem;
    font-weight: 600;

    display: block;
    padding: .8rem 1.6rem;
    border-radius: 0 .4rem .4rem 0;
}

.card__badge--hidden {
    display: none;
}

.card__badge--exclusivity {
    background: var(--color-exclusive, #ec1b23);
}

.card__badge--available-for {
    color: #000000;
    background: var(--color-available-for);
}

.card__badge--new {
    color: #000000;
    background: var(--color-new);
}

.card__badge--extra {
    background: var(--color-extra);
}

.card__duration {
    position: absolute;
    bottom: var(--padding-for-items);
    right: var(--padding-for-items);
    font-size: 1.9rem;
    font-weight: 500;
    padding: .8rem 1.4rem;
    border-radius: 4rem;
    background: var(--color-secondary-over, #1e1d2f);
}

.card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 2.2rem 3.2rem 1.6rem;
}

.card__content__upper {
    flex-grow: 1;
}

.card__content__title {
    font-size: 2.4rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.card__content__golden-line {
    flex: 0.3rem 0 0;
    width: 12rem;
    margin: 0 0 1rem 0;
    background: var(--color-primary);
}

.card__content__lower {
    overflow: hidden;
    font-size: 2rem;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.card__content__premium {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10rem;
    height: 5.8rem;
}


.grid__title {
    margin: 2.4rem 0 3.2rem;
    font-size: 5.6rem;
    font-weight: 500;
}

.grid__title--hidden {
    display: none;
}

.grid__items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.grid__items--page {
    margin-top: 5.5rem;
}

.grid__item {
    margin-bottom: 2.2rem;
}

.grid__item + .grid__item {
    margin-left: 2.4rem;
}

.grid__item--4 {
    /* for 4 items, 100% minus spacings */
    width: calc((100% - (3 * 2.4rem)) / 4 );
    margin-bottom: 2.2rem;
}

.grid__item--4:nth-of-type(4n + 1) {
    margin-left: 0;
}

/* 6 column version */
.grid__item--6 {
    width: calc((100% - (5 * 2.4rem)) / 6 );
    margin-bottom: 2.2rem;
}

.grid__item--6:nth-of-type(6n + 1) {
    margin-left: 0;
}

.filter {
    width: 100%;
    height: 5.2rem;
    padding: 1.4rem 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8rem;
    border: 0.4rem solid transparent;
    background: var(--color-secondary-light);

    color: var(--color-primary);
    text-align: center;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem;
}

.filter--selected, .filter--selected:visited {
    background: var(--color-secondary-selected);
    color: var(--color-secondary);
}

.filter:focus {
    border-radius: 8rem;
    box-shadow: var(--shadow-focus);
    background: var(--color-active);
    color: var(--color-secondary);
}

.zero-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(0, rgba(19, 20, 40, 1) 4.69%, rgba(19, 20, 40, 0.75) 100%), url('../assets/image/zerobannerbg.jpg');
    background-size: cover;
}

.zero {
    padding: 7.9rem;
    background-image: linear-gradient(0, rgba(19, 20, 40, 0.9) 4.69%, rgba(19, 20, 40, 0.75) 100%), url('../assets/image/zerobg.jpg');
    text-align: center;
}

.zero--banner {
    padding: 0;
    background-image: none;
}

.zero__title {
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 8rem;
}

.zero__detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 9rem;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 3.6rem;
}

.zero__detail__text--line {
    flex-basis: 100%;
}

.zero__detail__logo {
    height: 2.8rem;
    margin: 0 0.8rem;
}

.zero__options {
    display: flex;
    justify-content: space-between;
    margin: auto;
    width:123.8rem;
}

.zero__options--highlighted {
    --border: 0.1rem solid #d9d9d9;
    padding: 4.8rem 0;
    border-top: var(--border);
    border-bottom: var(--border);
}

.zero__option {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    max-width: 55.4rem;
}

.zero__option__title {
    margin-bottom: 1.6rem;
    text-align: center;
    color: #99DAFF;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 4rem;
}

.zero__option__detail {
    flex-grow: 1;
    margin-bottom: 4.6rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 3.2rem;
}

.zero__option__control {
    margin: auto;
    width: 100%;
    max-width: 41.7rem;
}

.zero__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4.8rem;
}

.zero__link {
    margin-top: 2.8rem;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.2rem;
}

.scroll-bar-hider {
    width: 5rem;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: var(--color-secondary);
}

.loading-page {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.loading-page__logo {
    width: 100rem;
}