/* GENERIC FONTS */

@font-face {
    font-family: 'FiraCode-Bold';
    src: url('../fonts/generic/FiraCode-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'FiraCode-Light';
    src: url('../fonts/generic/FiraCode-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'FiraCode-Medium';
    src: url('../fonts/generic/FiraCode-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'FiraCode-Regular';
    src: url('../fonts/generic/FiraCode-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'FiraCode-Retina';
    src: url('../fonts/generic/FiraCode-Retina.woff2') format('woff2');
}

@font-face {
    font-family: 'FiraCode-VF';
    src: url('../fonts/generic/FiraCode-VF.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/generic/Fraunces.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Black';
    src: url('../fonts/generic/Inter-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Bold';
    src: url('../fonts/generic/Inter-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-ExtraLight';
    src: url('../fonts/generic/Inter-ExtraLight.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Light';
    src: url('../fonts/generic/Inter-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Medium';
    src: url('../fonts/generic/Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('../fonts/generic/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-SemiBold';
    src: url('../fonts/generic/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter-Thin';
    src: url('../fonts/generic/Inter-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Bold';
    src: url('../fonts/generic/JetBrainsMono-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-BoldItalic';
    src: url('../fonts/generic/JetBrainsMono-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-ExtraBold';
    src: url('../fonts/generic/JetBrainsMono-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-ExtraBoldItalic';
    src: url('../fonts/generic/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-ExtraLight';
    src: url('../fonts/generic/JetBrainsMono-ExtraLight.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-ExtraLightItalic';
    src: url('../fonts/generic/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Italic';
    src: url('../fonts/generic/JetBrainsMono-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Light';
    src: url('../fonts/generic/JetBrainsMono-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-LightItalic';
    src: url('../fonts/generic/JetBrainsMono-LightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Medium';
    src: url('../fonts/generic/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-MediumItalic';
    src: url('../fonts/generic/JetBrainsMono-MediumItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Regular';
    src: url('../fonts/generic/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-SemiBold';
    src: url('../fonts/generic/JetBrainsMono-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-SemiBoldItalic';
    src: url('../fonts/generic/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-Thin';
    src: url('../fonts/generic/JetBrainsMono-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrainsMono-ThinItalic';
    src: url('../fonts/generic/JetBrainsMono-ThinItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/generic/OpenSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-BoldItalic';
    src: url('../fonts/generic/OpenSans-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-Italic';
    src: url('../fonts/generic/OpenSans-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../fonts/generic/OpenSans-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-LightItalic';
    src: url('../fonts/generic/OpenSans-LightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/generic/OpenSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('../fonts/generic/OpenSans-Semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenSans-SemiboldItalic';
    src: url('../fonts/generic/OpenSans-SemiboldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-Black';
    src: url('../fonts/generic/PlayfairDisplay-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-BlackItalic';
    src: url('../fonts/generic/PlayfairDisplay-BlackItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-Bold';
    src: url('../fonts/generic/PlayfairDisplay-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-BoldItalic';
    src: url('../fonts/generic/PlayfairDisplay-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-Italic';
    src: url('../fonts/generic/PlayfairDisplay-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplay-Regular';
    src: url('../fonts/generic/PlayfairDisplay-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-Black';
    src: url('../fonts/generic/PlayfairDisplaySC-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-BlackItalic';
    src: url('../fonts/generic/PlayfairDisplaySC-BlackItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-Bold';
    src: url('../fonts/generic/PlayfairDisplaySC-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-BoldItalic';
    src: url('../fonts/generic/PlayfairDisplaySC-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-Italic';
    src: url('../fonts/generic/PlayfairDisplaySC-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PlayfairDisplaySC-Regular';
    src: url('../fonts/generic/PlayfairDisplaySC-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/generic/Roboto-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-BlackItalic';
    src: url('../fonts/generic/Roboto-BlackItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/generic/Roboto-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url('../fonts/generic/Roboto-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/generic/Roboto-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-LightItalic';
    src: url('../fonts/generic/Roboto-LightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/generic/Roboto-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-MediumItalic';
    src: url('../fonts/generic/Roboto-MediumItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/generic/Roboto-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-RegularItalic';
    src: url('../fonts/generic/Roboto-RegularItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/generic/Roboto-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url('../fonts/generic/Roboto-ThinItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/generic/SpaceGrotesk.woff2') format('woff2');
}

@font-face {
    font-family: 'SpaceMono-Bold';
    src: url('../fonts/generic/SpaceMono-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'SpaceMono-BoldItalic';
    src: url('../fonts/generic/SpaceMono-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'SpaceMono-Italic';
    src: url('../fonts/generic/SpaceMono-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'SpaceMono-Regular';
    src: url('../fonts/generic/SpaceMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-black';
    src: url('../fonts/generic/lato-black.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-blackitalic';
    src: url('../fonts/generic/lato-blackitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-bold';
    src: url('../fonts/generic/lato-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-bolditalic';
    src: url('../fonts/generic/lato-bolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-hairline';
    src: url('../fonts/generic/lato-hairline.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-hairlineitalic';
    src: url('../fonts/generic/lato-hairlineitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-heavyitalic';
    src: url('../fonts/generic/lato-heavyitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-italic';
    src: url('../fonts/generic/lato-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-light';
    src: url('../fonts/generic/lato-light.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-lightitalic';
    src: url('../fonts/generic/lato-lightitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-medium';
    src: url('../fonts/generic/lato-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-mediumitalic';
    src: url('../fonts/generic/lato-mediumitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-regular';
    src: url('../fonts/generic/lato-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-semibold';
    src: url('../fonts/generic/lato-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-semibolditalic';
    src: url('../fonts/generic/lato-semibolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-thin';
    src: url('../fonts/generic/lato-thin.woff2') format('woff2');
}

@font-face {
    font-family: 'lato-thinitalic';
    src: url('../fonts/generic/lato-thinitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lora-bold';
    src: url('../fonts/generic/lora-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'lora-bolditalic';
    src: url('../fonts/generic/lora-bolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'lora-italic';
    src: url('../fonts/generic/lora-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'lora-regular';
    src: url('../fonts/generic/lora-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'merriweather-bold';
    src: url('../fonts/generic/merriweather-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'merriweather-italic';
    src: url('../fonts/generic/merriweather-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'merriweather-light';
    src: url('../fonts/generic/merriweather-light.woff2') format('woff2');
}

@font-face {
    font-family: 'merriweather-regular';
    src: url('../fonts/generic/merriweather-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'poppins-bold';
    src: url('../fonts/generic/poppins-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'poppins-light';
    src: url('../fonts/generic/poppins-light.woff2') format('woff2');
}

@font-face {
    font-family: 'poppins-medium';
    src: url('../fonts/generic/poppins-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'poppins-regular';
    src: url('../fonts/generic/poppins-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'poppins-semibold';
    src: url('../fonts/generic/poppins-semibold.woff2') format('woff2');
}

/* ROBOTO ALIASES (common-narrowcasting-v2.css) */

@font-face {
    font-family: 'RobotoLight';
    src: url('../fonts/generic/Roboto-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'RobotoLigth';
    src: url('../fonts/generic/Roboto-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'RobotoMedium';
    src: url('../fonts/generic/Roboto-Medium.woff2') format('woff2');
}

/* TEMPLATES */

/* broadcast fullscreen-image-title afbeelding */
.fullscreen-image-title .EPublisherNarrowcastingImage{
    top:0px;
    height: 100%;
    width: 100%;
    position:absolute; 
}
.fullscreen-image-title h1 {
    position:absolute;
    font-size: 7vh;
    margin:0;
    padding:6vh;  
    top:23vh;
    color: var(--button-font-color);
    background: rgb(232,124,13);
    background: linear-gradient(141deg, var(--button-background-color) 6%, var(--button-background-color) 49%, var(--button-background-color-transparent) 82%, var(--button-background-color) 100%);
} 

@media (orientation: portrait) {
    .fullscreen-image-title h1 {
        font-size: 7vw;
        margin:0;
        padding:6vw; 
    }
}

/* broadcast text-photo-rechts tekst afbeelding */
.text-photo-rechts .EPublisherNarrowcastingImage{
    top:0px;
    height: 100%;
    width: 100%;
    position:absolute;
    object-fit: cover;
}

.text-photo-rechts .EPublisherText {
    position: absolute;
    left: 0vw;
    height: 100vh;
    width: 42vw;
    background: rgb(232,124,13);
    background: linear-gradient(141deg, var(--button-background-color) 6%, var(--button-background-color) 70%, var(--button-background-color-transparent) 82%, var(--button-background-color) 100%);
    color: var(--button-font-color);
    font-size: 2.8vh;
    line-height: 4.2vh;
    padding: 2vh 4vw;
}

@media (orientation: portrait) {
    .text-photo-rechts .EPublisherText {
        font-size: 2.8vw;
        line-height: 4vw;
        padding: 2vw 4vh;
    }
}

.text-photo-rechts .EPublisherText h1 {
    line-height: 4.5vh;
}

/* text-photo-landscape */
.text-photo-landscape .EPublisherNarrowcastingImage{
    top:0px;
    height: 100%;
    width: 100%;
    position:absolute; 
}

.text-photo-landscape .EPublisherText {
    position: absolute;
    font-size: 2.8vh;
    bottom: 0vh;
    height: 50vh;
    background: rgb(232,124,13);
    background: linear-gradient(141deg, var(--button-background-color) 6%, var(--button-background-color) 70%, var(--button-background-color-transparent) 82%, var(--button-background-color) 100%);
    color: var(--button-font-color);
    width: 92vw;
    line-height: 4.2vh;
    padding: 2vh 4vw;
}

@media (orientation: portrait) {
    .text-photo-landscape .EPublisherText {
        width: 76vw;
        font-size: 2.8vw;
        line-height: 4.2vw;
        padding: 2vw 12vw;
    }
}

/* video-fullscreen-text */
.video-fullscreen-text .EPublisherVideo{
    top:0px;
    height: 100%;
    width: 100%;
    position:absolute; 
}

.video-fullscreen-text .EPublisherText {
    position: absolute;
    font-size: 2.8vh;
    bottom: 25vh;
    height: 50vh;
    background: rgb(232,124,13);
    background: linear-gradient(141deg, var(--button-background-color) 6%, var(--button-background-color) 70%, var(--button-background-color-transparent) 82%, var(--button-background-color) 100%);
    color: var(--button-font-color);
    width: 35vw;
    line-height: 4.2vh;
    padding: 2vh 4vw;
}

@media (orientation: portrait) {
    .video-fullscreen-text .EPublisherText {
        font-size: 2.8vw;
        width: 35vw;
        line-height: 4.2vw;
        padding: 2vw 8vw;
    }
}

@media (orientation: portrait) {
    .video-fullscreen-text .EPublisherText h1 {
        line-height: 4.5vh;
    }
}

/* website-fullscreen */
.website-fullscreen iframe{
    width: 100%;
    height: 100%;
    border:0;
    overflow: hidden;
}

.two-websites-screen{
    display: flex;
}

.two-websites-screen .n1,.two-websites-screen .n2{
    flex: 50%;
    border: 0;
}