:root {
    --primary-color: #eb1c24;
    --primary-lighter-color: #f1444a;
    --primary-darker-color: #cd1c22;
    --secondary-color: #fa6a4b;
    --secondary-lighter-color: #ff967e;
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/open-sans-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src:
    url('/assets/fonts/open-sans-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-v20-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/open-sans-v20-latin-600.eot'); /* IE9 Compat Modes */
    src:
    url('/assets/fonts/open-sans-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-600.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-v20-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-v20-latin-700.eot'); /* IE9 Compat Modes */
    src:
    url('/assets/fonts/open-sans-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/open-sans-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-700.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/open-sans-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/open-sans-v20-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

* {
    margin: 0;
    padding: 0;
}

body, h1, h2, h3, h4, h5, h6, p, a {
    font-family: 'Open sans', sans-serif;
}

h1, h2 {
    font-weight: 700;
}

h3, h4, h5, h6 {
    font-weight: 600;
}

.detail-left h3, .detail-left h4, .detail-left h5, .detail-left h6 {
    font-weight: 700;
}

h1 {
    margin-top:0;
}

p, .detail li {
    font-weight: 400;
    line-height: 1.7;
    font-size: 18px; /* legacy */
    font-size: 1.125rem;
}

p strong {
    font-weight: bold;
}

input, textarea {
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 10px;
}

input[type="file"] {
    padding-left: 0;
    padding-right: 0;
    border-color: transparent;
}

button, input[type="button"], input[type="submit"] {
    border-radius: 3px;
    background: var(--primary-color);
    border: 0;
    padding: 5px 20px;
    color: white;
    font-weight: 700;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background: var(--primary-lighter-color);
}

button:active, input[type="button"]:active, input[type="submit"]:active {
    background: var(--primary-darker-color);
}

.pagination {margin-left: 20px;}
.pagination li a {color: var(--primary-color);}

#admin ul.admin_form li span.select2-selection__choice__remove {
    font-size: 23px !important;
    color: var(--primary-color);
    display: inline-block;
    float: left;
    margin-top: -6px;
    margin-right: 3px;
}

.half-page-ad {
    margin: 0 0 35px;
    border: 10px solid #fff;
}

@media screen and (min-width: 1025px) {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 17px;
        padding-right: 17px;
    }
}

.left {
    float:left;
}

.right {
    float:right;
}

.share-page, .date-page {
    font-size: 12px;
    color: #b2b2b2;
}

.author {
    width: 100%;
    text-align: right;
    margin: 2px 0 10px;
    line-height: 1;
}

.search_form  #form input.search_input {
    height: 35px;
}

.search_form  #form input.search_input:focus,
.search_form  #form input.search_submit:focus,
.search_form  #form input.search_input:hover,
.search_form  #form input.search_submit:hover {
    outline: 0;
}

.search_form #form input.search_submit:hover {
    border: var(--primary-color);
}

html {
    font-size: inherit;
}

html, body, #wrapper {
    height: 100%;
}

body > #wrapper {
    height: auto; min-height: 100%;
}

h1, .h1 {font-size:2.3em;}
h2, .h2 {font-size:1.8em;}
h3, .h3 {font-size:1.3em;}
h4, .h4 {font-size:1.0em;}

img {
    max-width: 100%;
    height:auto;
}

img[loading="lazy"] {
    background-color: #00000007;
}

a {
	color: var(--primary-color);
}

p a, .detail-left a {
    text-decoration: none;
}

p a:hover, .detail-left a:hover {
    text-decoration: underline;
}

a:hover {
    color: var(--primary-color);
    text-decoration:none;
}

a:focus {
    text-decoration: inherit;
}

blockquote {
    margin: 2.5em 0;
    padding: 0;
    border: none;
}

blockquote:before {
    content: "“";
    font-family: "Times New Roman", serif;
    font-size: 3rem;
    float: left;
    color: #707070;
    line-height: 0.85;
    margin-bottom: -1em;
}

blockquote:after {
    content: inherit;
}

blockquote p, blockquote p:last-child {
    margin: 1em 0 1em 35px;
    font-size: 1.3rem;
}

.detail-left h3 a {
    text-decoration: none;
}

.detail-left h3 a:hover {
    text-decoration: underline;
}

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

.detail-left ul, .detail-left ol {
	margin:0;
	padding-left:50px;
}

.detail-left ul {
	list-style-type:disc;
}

.button,._button,._button2,._button3 {
    background-color: #5c5c5c; /* IE fallback */
    background-color: var(--primary-color);
    background-image: linear-gradient(0deg, var(--primary-color), var(--secondary-color));
	position: relative;
  	color: #fff;
  	padding: 6px 20px;
  	height: auto;
  	line-height: 1;
  	display: inline-block;
  	font-weight: 600;
  	margin-top: 0;
  	z-index: 1;
  	text-transform: uppercase;
  	box-shadow: 0 0 0;
}

.button:hover,._button:hover,._button2:hover,._button3:hover {
    background-image: linear-gradient(0deg, var(--primary-lighter-color), var(--secondary-lighter-color));
}

._button-grijs {
    color: #757575;
    display: block;
    font-weight: normal;
    text-transform: uppercase;
    float:left;
    width: 100%;
    font-size: 7pt;
    text-align: center;
    padding-top: 10px;
    margin-top: -10px;
}

._button-grijs:hover {
    color:var(--primary-color);
	text-decoration: underline;
}

._button {
    background-color: #505050;
    text-align: center;
    color:#fff;
    padding:5px 15px;
    border:none;
    text-transform: none;;
}

._button:hover {
    background-color: var(--primary-color);
    color:#fff;
}

._button2 {
    background-color: var(--primary-color);
    text-align: center;
    margin: -14px auto 0 auto;
    display:block;
    box-shadow: 1px 0 15px 0 rgba(0, 0, 0, 0.3);
    width: 50%;              /* IE fallback */
    width: -moz-fit-content; /* Firefox fallback */
    width: fit-content;
}

._button3 {
    background-color: var(--primary-color);
    padding: 0 11px;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    position: relative;
    bottom: 0;
    margin: 0;
    transform: translate(-50%, 12px);
    left: 50%;
}

._button3:hover {
  background-color: var(--primary-color);
}

.button:hover,._button:hover,._button2:hover,._button3:hover,.button:focus,._button:focus,._button2:focus,._button3:focus {
  background-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
  }

._button2:hover {
  background-color: var(--primary-color);
}

#top, #top img {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.scrolled {
	box-shadow:0 0 15px rgba(0,0,0,0.2);
}

#overlay {
	position:fixed;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.2);
	z-index:9999999;
    display:none;
    transition: opacity 0.3s ease-in-out;
}

#overlay.show {
    animation: fadeIn .3s linear forwards;
}

#overlay.fadeOut {
    animation: fadeOut .3s linear forwards;
    display:block;
}

@keyframes fadeIn {
    0%{ opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fadeOut {
    0%{ opacity: 1 }
    100% { opacity: 0;}
}

/* ---- TOP MENU ---- */
#top {
    position: fixed;
    z-index: 100;
	width:100%;
	background:white;
    box-shadow: 0 0 15px rgba(0,0,0,0.35);
    touch-action: none;
}

#top [class*='col-']:first-child {
    text-align: left;
}

#top [class*='col-']:nth-child(2),
#top [class*='col-']:nth-child(3) {
    text-align: center;
}

#top [class*='col-']:last-child {
    text-align: right;
}

#top-logo img {
	max-height:100px;
}

@media (pointer:coarse) {
    #top-logo img:active {
        opacity:0.4;
    }
}

@media screen and (max-width: 991.9px) and (pointer:coarse) {
    #top-logo a:not(#search-top-mob):hover::after {
        content: "";
        position: fixed;
        width: 0;
        height: 3px;
        background-color: var(--primary-color);
        top: 70px;
        left: 0;
        display: block;
        animation: fillBar 10s cubic-bezier(0.04, 0.8, 0, 1);
        animation-fill-mode: both;
    }

    @keyframes fillBar {
        0% { width: 0; }
        100% { width: 95%; }
    }
}

/* Side menu search bar */

#top .search-form form {
    line-height: 1;
    text-align: left;
    padding: 0px 20px;
    display: flex;
    height: 30px;
    margin: 15px 0 10px 0;
}

#top .search-form form input, #top .topnav-item input[type="search"] {
    width: 100%;
    background: #f3f3f3ee;
    border: 0;
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 30px;
    margin-right: -30px;
    color: #272727;
    font-size: 0.8rem;
    outline: 0;
}

#top .search-form form button, #top .topnav-item button {
    border: 0;
    background: #f4f4f4;
    border-radius: 0 15px 15px 0;
    padding: 0 5px 0 0;
    color: #474747;
    font-size: 12px;
    width: 30px;
}

#top .search-form form button:hover, #top .topnav-item button:hover {
    background: #d2d2d2;
}

#top .search-form form button:active, #top .topnav-item button:active {
    background: #bdbdbd;
}

/* push */

#push {
    height: 140px;
}

.top>ul {
    text-align: right;
}

.wite .top>ul {
    margin-top:20px;
}

#search-top-mob {
    position: absolute;
    background-color: #f3f3f3;
    border: 1px solid #dddddd;
    height: 35px;
    width: 35px;
    line-height: 34px;
    color:#696969;
    text-align:center;
    top: 50%;
    right: 70px;
    transform: translateY(-50%);
}

#search-top-mob:hover {
    border-color:#888888;
}

#search-top-mob2 {
    position: absolute;
    background-color: #f3f3f3;
    border: 1px solid #dddddd;
    height: 35px;
    width: 35px;
    line-height: 34px;
    color:#696969;
    text-align:center;
    top: 17px;
    right: 110px;
}

#search-top-mob2:hover {
    border-color:#888888;
}

.header {
    background:var(--primary-darker-color);
    position:relative;
    z-index:0;
    background-repeat: repeat-x;
    background-position: left 70px;
    padding: 50px 0;
    box-shadow: 0 -10px 10px 10px rgba(0,0,0,0.4);
}

.header-inner>div {
    position:relative;
    z-index:1;
}

.header-inner h1{
	margin: -20px 0 30px 0;
    padding:0;
    line-height: 1.5em;
    color:white;
}

.headeritem {
    width: 100%;
    float: left;
    position: relative;
    z-index:1;
    transition: transform 0.3s cubic-bezier(0, 0.02, 0, 1.0);
}

.headeritem img {
    width: 100%;
    max-width: inherit;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: box-shadow 0.3s ease-in-out,
                transform 0.3s cubic-bezier(0, 0.02, 0, 1.0);
}

.headeritem:hover > img {
    box-shadow: 1px 6px 20px rgba(0,0,0,0.7);
}

@media (pointer:coarse) {
    .topper-item .headeritem:hover {
        transform: scale(1.02);
    }
}
@media screen and (max-width: 767.9px) and (pointer:coarse) {
    .topper-item:nth-child(2) .headeritem:hover img {
        transform: scale(1.02);
    }
}

@media screen and (min-width: 501px) and (max-width: 767.9px) {
    .topper-item:nth-child(2) .headeritem-text {
        padding-left: 25px;
    }
}
@media screen and (max-width: 767.9px) {
    .topper-item:nth-child(2) .headeritem img {
        width: 130px;
    }

    .topper-item:nth-child(2) .headeritem-text {
        background: inherit;
        margin-left: 130px;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
        transition: text-shadow 0.3s ease-in-out;
        padding-top: 0;
        padding-bottom: 0;
        padding-right:0;
        bottom: 50%;
        transform: translateY(50%);
        word-break: break-word;
    }

    .topper-item:nth-child(2) .headeritem:hover {
        transform: scale(1);
    }

    .topper-item:nth-child(2):hover .headeritem-text {
        text-shadow: 1px 1px 13px rgba(0,0,0,1);
    }

    .topper-item:nth-child(2) .headeritem.hasicon .headeritem-text span {
        padding-right:0;
    }

    .topper-item:nth-child(2) .icon-wrapper {
        width: 130px;
        padding-right:10px;
    }

    .topper-item:nth-child(2) .shorticon {
        font-size: 10px;
        width: 30px;
        height: 30px;
        line-height:30px;
    }
}

.topper-wrapper-icons {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}

.headeritem-text {
    background: #000;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%);
    padding: 10px 10px 10px 15px;
    line-height: 34px;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: 0;
}

.headeritem.hasicon .headeritem-text span {
    padding-right: 50px;
}

.headeritem.hasicon.has-two-icons .headeritem-text span {
    padding-right: 110px;
}

.headericon-tv, .headericon-video, .headericon-radio {
    background-color: var(--primary-color);
    padding: 5px 8px;
    border: 3px solid white;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 101;
    position: relative;
    float: right;
    margin: 0 10px;
}

.headericon-radio {
    padding:5px 6px;
}

.headericon-video {
    padding:5px 6px;
}

.headericon-tv img {
    left: 2px;
    top: -1px;
    position: relative;
}

.headericon-video img {
    left: 0;
    top: -1px;
    position: relative;
}

ul#social-bar {
    position: fixed;
    background: #000;
    top: 138px;
    right: -2px;
    padding: 10px;
    z-index: 3;
    border: 2px solid #fff;
    transition: ease all 0.3s;
}

ul#social-bar li {
    list-style: none;
    padding: 5px 0;
    display: block;
}

.content {
    padding-top: 35px;
    padding-bottom: 15px;
}

.grey {
    background-color: #e7e5e6;
    padding:30px 0;
    margin:0;
}

.content-white {
    background-color: #fff;
    padding: 30px 0 0;
    margin:0 0 -30px 0;
}

.grey ul, .content-white ul,
ul.filter-row {
    width:100%;
    display: block;
    text-align: left;
}

ul.filter-row {
    margin: 15px 0;
}

.grey ul.homepage, .content-white ul.homepage {
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 767.9px) {
    .grey ul.homepage, .content-white ul.homepage {
        display: inline-block;
        text-align: left;
    }
}

.grey li, .content-white li {
    flex: 1;
    white-space: nowrap;
    margin-left: 10px !important;
}

.grey li:first-of-type, .content-white li:first-of-type {
    margin-left: 0 !important;
}

.grey li a, .content-white li a {
    width: 100%;
    display: block;
}

.grey li, .content-white li, ul.filter-row li {
    display: inline-block;
    margin:6px 0;
}

.grey ul li a, .content-white ul li a, ul.filter-row li a {
    background-color: #2b2b2b;
    color:#fff;
    padding:5px 15px;
    font-size: 16px;
}
ul.layered-menu li.active a{
	background: var(--primary-color);
}

.grey ul li a:hover,
.grey ul li a.active,
.content-white ul li a:hover,
.content-white ul li a.active,
ul.filter-row li a:hover,
ul.filter-row li a:focus {
    background-color: var(--primary-color);
}
.content-white ul li.active a{
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 15px;
    font-size: 16px;
}

ul.layered-menu.layered-menu-items {
    margin: 0;
}

ul.layered-menu li a {
    line-height: 20px;
}

.banners {
    padding-top: 0;
    padding-bottom: 0;
    text-align:center;
}

.sidebar-banner {
	width: 100%;
	float:left;
	display: block;
    text-align: center;
    margin-bottom: 30px;
}

.frontpage-banner {
	background-color: #fff;
    float:left;
    display: block;
    width:100%;
    text-align:center;
}

.sidebar-banner img, .frontpage-banner img {
    box-shadow: 0 0 0 1px #AAAAAA;
    background: #00000007;
}

.adsbygoogle {
    background: #FAFAFA;
}

.video-home, .audio-home {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #1d1d1d;
    background-image: url('/assets/img/video-bg.svg');
    background-position: top center;
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,1),
                inset 0 -10px 10px -10px rgba(0,0,0,1);
    text-align:center;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    footer .row .col-sm-3 {
        padding: 0 5px;
    }
}

.video-home .row, .audio-home .row {
    display: -ms-flexbox; /* IE workaround */
    -ms-flex-wrap: wrap; /* IE workaround */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    grid-gap: 20px;
    margin: 0;
}

.video-home .row::before, .audio-home .row::before {
    content: none;
}

.audio-home .audio-item,
.video-home .video-item {
    float: none;
    width: initial;
    margin: 0;
    padding: 0;
    -ms-flex: 1 1 260px; /* IE workaround */
}

.audio-item a,
.video-item a {
    color: #5c5c5c;
}

.audio-item:hover a,
.video-item:hover a {
    color: #000;
}

.audio-home .audio-item:last-child,
.video-home .video-item:last-child {
    margin: 0;
}

.image-crop {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    display:block;
}

.image-crop img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.video-item .image-crop {
    padding-bottom:54%;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .audio-home .audio-item:last-child,
    .audio-home .audio-item:nth-last-child(2) {
        display: none;
    }
}

.audio {
    margin-bottom: 30px;
}

.banner {
    border:1px solid #fff;
}

.ad-rectangle {
    width:300px;
    height:250px;
}
@media (max-width:400px) { .ad-rectangle { width: 250px; } }

.news a.newsblock {
    display: block;
    background-color: #fff;
    height: 348px;
    border: 1px solid #f2f2f2;
    overflow: hidden;
    transition: ease all 0.2s;
    position: relative;
}

@media screen and (min-width: 992px) {
    .news a:after {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        content: "";
        background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
        height: 60px;
    }
}

.news a._button2 {
    display: inline-block;
    background-color: var(--primary-color);
    height: auto;
    border: 2px solid #fff;
    overflow: hidden;
    transition: ease all 0.2s;
    margin:0;
    transform: translate(-50%, 110%);
}

.news a._button2:after {
    display: none;
}

.news a._button2:hover {
    border: 2px solid #fff;
    background-color: var(--primary-color);
}

.auto-height{
    height: auto;
    line-height: 22px;
}

@media screen and (max-width: 991.9px) {
    .news a.newsblock {
        height: 290px;
    }
}

@media screen and (min-width: 768px) {
    .row.news article a {
        margin: 0 0 35px;
    }
}

.news div {
    position: relative;
    margin: 0 0 22px 0;
}

.news img.newspic {
    height:auto;
    max-width:100%;
    width:100%;
}

.news a:hover {
    border: 1px solid #cacaca;
}

.news a h3 {
    padding:0 10px;
    font-size: 15px;
    color:#333333;
    margin: -10px 0 5px 0;
    width: 100%;
    transition: ease all 0.2s;
    word-break: break-word;
}

.news a:hover h3 {
    color:var(--primary-color);
}

.news p.date {
    color:#b1b1b1;
    padding:0 10px;
    font-size: 11px;
    line-height: 1;
}

.news p.teasertext {
    color:#333;
    padding:0 10px;
    font-size: 13px;
    margin: 10px 0 15px 0;
    font-weight: 500;
    line-height: 1.8;
}

.news-icon-logo {
    position: absolute;
    border:1px solid #fff;
    bottom:-10px;
    left:10px;
}

@media screen and (max-width: 767.9px) {
    .news-icon-logo {
        left: 4px;
    }
}

.news-icon-video, .news-icon-tv, .news-icon-radio {
    border: 2px solid #fff;
    background-color: var(--primary-color);
    padding: 6px 3px;
    border-radius: 50px;
    float: right;
    transform: translateY(-50%);
    margin: 0 5px;
}

.news-icon-tv {
    padding: 5px 6px;
}

.news-icon-radio {
    padding: 5px 5px;
}

.video-home h2,
.audio-home h2,
section.content h2 {
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    color:#fff;
    font-weight: 300;
    text-align: left;
    margin:0 0 20px 0;
}

.video-home h2:before,
.audio-home h2:before,
section.content h2:before {
    content: "";
    display: inline-block;
    position: relative;
    margin-right: 15px;
    width: 3px;
    height: 30px;
    background-color: var(--primary-color);
}

section.content h2 {
    color: #2b2b2b;
}

.video-home article div, .video article div {
    height: 100%;
    background: rgba(101,101,101,0.3);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.video-home article:hover .image-crop img, .video article:hover .image-crop img {
    transform: scale(1.05);
}

.video-home article div h3 {
    font-size: 15px;
    text-align: left;
    padding:6px 12px;
    margin:0 0;
    line-height: 1.3;
    color: #ffffff;
}

.audio-home .audio-item a {
    display: -ms-grid; /* IE workaround */
    display: grid;
    -ms-grid-rows: auto 1fr; /* IE workaround */
    grid-template-columns: auto 1fr;
    height: 100%;
}

.audio-home div.audio-left, .audio div.audio-left {
    width:80px;
    height:100%;
    overflow:hidden;
    -ms-grid-column:1; /* IE workaround */
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.audio-home div.audio-right, .audio div.audio-right  {
    overflow:initial;
    -ms-grid-column:2; /* IE workaround */
    display: flex;
    display: -ms-grid; /* IE workaround */
    align-items: center;
}
.hidden{
    display: none;
}
.audio-date {
    background-color: rgba(41,41,41,0.75);
    color: #fff;
    font-size: 11px;
    line-height: 2.4;
    font-weight: 600;
    width: 100%;
    display: block;
    transition: background-color 0.2s ease;
}

.audio-right h3 {
    font-size: 15px;
}

.audio-icon {
    background-color: rgba(101,101,101,0.3);
    color:#fff;
    font-size: 28px;
    width:100%;
    height: calc(100% - 26px); /* extract audio-date + margin-top height */
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.audio-home a:hover .audio-icon {
    background-color: rgba(101,101,101,0.6);
}

.audio-home a:hover .audio-date {
    background-color: rgba(62,62,62,0.75);
}

.audio-home article div h3, .audio article div h3 {
    font-size: 15px;
    text-align: left;
    padding:0 0 0 10px;
    margin:3px 0;
    line-height:1.3;
    color: #ffffff;
}

.icon-wrapper {
    text-align: right;
    position: absolute;
    bottom: -8px;
    width: 100%;
    padding-right: 20px;
}
.shorticon.fas {
    background-color: var(--primary-color);
    background-image: linear-gradient(0deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 0;
    line-height: 25px;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 25px;
    font-size: 11px;
    display: inline-block;
    box-shadow: .5px .5px 2px 0 rgba(0, 0, 0, .15);
}

.side-news .shorticon.fas {
    font-size: 9px;
    height: 20px;
    width: 20px;
    line-height: 20px;
}

#loadmore {
    cursor: pointer;
}

/* video home for touch devices */
@media(pointer:coarse) and (max-width: 767.9px) {
    .video-home .container {
        padding-left:0;
        padding-right:0;
    }

    .video-home h2 {
        margin-left:15px;
        margin-right:15px;
    }

    .video-home .row {
        display:flex;
        overflow:scroll;
        padding-left:15px;
        grid-gap:inherit;
        padding-bottom: 10px;
        margin-bottom: -10px;
    }

    .video-home .video-item {
        flex: 0 0 250px;
        padding-right:15px;
    }

    .video-home article div {
        border:0;
    }

    .video-home .video-item a {
        color:white;
    }

    .video-home .video-item h3 {
        font-size:14px;
    }
}

@media(pointer:coarse) and (max-width: 500px) {
    .video-home .video-item {
        flex: 0 0 70%;
    }
}

/* ---- PAGE ---- */

.detail {
    margin-top:20px;
    padding-bottom: 50px;
    background-color: #FFFFFF;
    padding-top: 0;
    box-shadow:none;
}

.detail-left {
    background-color: #fff;
    padding:0 60px 30px 60px;
    float:left;
    width: 100%;
}

.detail-left iframe {
    margin: 10px 0 0 0;
}

.detail-left img {
    margin: 0 0 5px 0;
}

.detail h2 {
    font-size: 2.4em;
    margin: 1.1em 0 0.5em 0;
}

.detail-left h1 {
    font-size: 2.8em;
    margin: 5px 0 8px;
    width: 100%;
    text-transform: inherit;
    line-height: 1.2;
}

.detail .banner {
    margin-bottom: 25px;
}

.introtext {
    color:#2b2b2b;
    font-size: 18px;
    font-weight: 600;
    margin:20px 0 20px 0;
}

.date-page {
    color:#b2b2b2;
    margin: 8px 0 12px 0;
    display: block;
}

.fb-comments {
    display: inline-block!important;
    width: 100%;
    background-color: #fff;
    padding: 52px;
}

/* News detail */
.side-news {
	width: 100%;
	background-color: #fff;
	float:left;
	position: relative;
	display: block;
	margin: 0 0 30px;
}

.side-news h3 {
    line-height: 1;
    text-transform: uppercase;
    font-size: 15px;
    padding: 0;
    margin-top: 0;
}

.side-news h3:before {
    content: "";
    display: inline-block;
    position: relative;
    margin-right: 7px;
    width: 3px;
    height: calc(1em - 0.28em);
    background-color: var(--primary-color);
}

.side-item {
    border-bottom: 1px solid #e6e6e6;
    float:left;
    display: block;
    padding: 8px 0;
    position: relative;
    width: 100%;
}

.side-item:last-child {
    border-bottom: none;
}

.program-table {
    margin: 30px 0 0 0;
    border: 1px solid #f2f2f2;
}

.program-table .row {
    background-color: #fff;
    padding: 7px 0;
    margin: 0;
}

.program-table .row:nth-child(odd) {
    background-color: #f2f2f2;
}

.program-table .row a {
    font-weight: normal;
}

.picture {
    float:left;
    margin-right: 12px;
    position: relative;
}

.information {
    color:#2b2b2b;
    word-break: break-word;
}

.archief-item {
    float:left;
    color:#2b2b2b;
    padding: 15px 0;
}

.archief-item:hover {
    color: var(--primary-color);
}

.archief-item small {
    color: #999999;
    font-size: 70%;
}

.information:hover {
    color:var(--primary-color);
}

.pic {
    width:auto;
    height:60px;
}

.detail .side-news h4,
.side-news h4 {
    width:100%;
    height:auto;
    margin:0;
    font-size: 13px; /* legacy */
    font-size: 0.8rem;
    font-weight: normal;
    color:#000;
}

.side-news h4:hover {

    color:var(--primary-color);
}

.sidebar-icon-wrapper {
    position: absolute;
    bottom: -7px;
    right: 5px;
}

.button-center {
    width: 220px;
    margin: 0 auto;
    display: block;
}

.related-news {
    margin:10px 0;
    display: block;
    float:left;
    width:100%;
}

.related-news h3 {
    display:inline-block;
    text-transform: uppercase;
    color:#505050;
    font-size: 24px;
    line-height:30px;
    margin: 10px 0 0 0;
}

.related-news a {
    display:inline-block;
    margin-left: 10px;
    top: -4px;
}

.detail h2 {font-size: 1.8em;}
.detail h3 {font-size: 1.5em; font-size: 1.3rem;}
.detail h4 {font-size: 1.125rem;}

.detail h2 + p, .detail h3 + p, .detail h4 + p {
    margin-top: 0;
}

.swiper-container {width: 100%; height: auto; margin: 0 auto -1.5em auto;}

.swiper-container {
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
}
.swiper-wrapper, .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.swiper-wrapper {
    z-index: 1;
    display: flex;
    box-sizing: content-box;
}

#form label {
    width: 25%;
    float: left;
    line-height: 18px;
    font-size: 18px;
    vertical-align: middle;
    padding: 5px 0 0 0;
}

#form input, #form select {
    border: 1px solid #BBBBBB;
    border-radius: 0;
    height: 34px;
    width: 75%;
}

#form textarea {
    border: 1px solid #BBBBBB;
    border-radius: 0;
    width: 75%;
}

#form input[type=submit] {
    border: none;
    height: 24px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 20px 20px 20px;
    cursor: pointer;
    margin: 0;
    border-radius: 0;
    line-height: 8px;
    -webkit-appearance: none;
}

/* ---- FOOTER ---- */
.white {
    background-color: #fff;
	width:100%;
    padding:30px 0 20px 0;
}

.black {
    width:100%;
    background-color: #1d1d1d;
    background-image: url('/assets/img/video-bg.svg');
    background-repeat: repeat;
    background-position: top center;
    padding:30px 0 0 0;
}

footer {
	width:100%;
	background:#131313;
}

footer .topnav {
	line-height: 85px;
    margin-bottom: 16px;
}

footer .top li a {
	padding:0 33px;
}

footer h3 {
    color:var(--primary-color);
    font-size: 16px;
    text-transform: uppercase;
	margin:0;
}

footer nav>ul>li {
    display: inline-block;
}


footer nav>ul>li>a {
    display: inline-block;
    height: 100%;
    padding: 0 27px;
    font-size: 24px;
    text-transform: uppercase;
    color: #2b2b2b;
    font-weight: bold;
}

footer nav ul li a:hover, footer .active, footer nav li.current-menu-item a, footer nav li.current_page_item a {
    color: var(--primary-color);
    text-decoration: none;
}

footer nav>ul>li:last-child a {
	padding-right:0;
}

footer nav>ul>li:before {
	content:"";
	height:18px;
	width:2px;
	background-color:var(--primary-color);
	display: inline-block;
	right:0;
	position: relative;
}

footer nav>ul>li:first-child:before {
	display: none;
}

/* youtube */
.video-home iframe {width: 100%; height: 200px;}
.youtube iframe, .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0 0 0 0;
}
.youtube, .video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 20px;
}

.video.aspect-1-1 {
    padding-bottom: 100%;
}
.video.aspect-4-3 {
    padding-bottom: 100%;
}

.swiper-slide .youtube {
    margin: 0;
    padding-top: 0;
    width: 100%;
}

/* MOBILE */
@media (max-width:767.9px) {
    body {
        background-color: #ffffff;
    }

    .header {
        padding: 30px 0 10px 0;
    }
    .topper-item {
        margin: 0 0 20px 0;
    }

    .content {
        padding: 20px;
    }

    .content-white {
        background-color: #ffffff;
    }

    .eq-height {
      display: block;
    }

    .topnav a {
        background-color: var(--primary-color);
        width: 29px;
        line-height: 29px;
        padding: 4px 0 4px 0;
    }

    p, .detail li {
        line-height: 1.5;
        font-size: 16px; /* legacy */
        font-size: 1rem;
    }

    .header, .header-inner>div {
        height:auto;
    }

    .header-inner {
        width:100%;
        transform: translateY(0);
    }

    .topnav div {
        margin-top: 6px;
    }

    .topnav a {
        border: 1px solid #fff;
        background-color: var(--primary-color);
        width: auto;
        line-height: 28px;
        display: inline-block;
        float: left;
        padding: 0;
        margin: 0;
    }

    .topnav a#radio-top:before, .topnav a#tv-top:before, .topnav a#mail-top:before, .topnav a#search-top:before {
        background-color: #2b2b2b;
        padding: 0 21px 0 10px;
        font-size: 13px;
        color: #fff;
        width: auto;
        display: inline-block;
        float: left;
        text-transform: uppercase;
        border-right: 1px solid #fff;
    }

    .grey {
        margin: 0 0 0 0;
    }

    .black {
        width: 100%;
        background: #131313;
    }

    .news article {
        margin-bottom:50px;
    }

    .news div div {
        position: relative;
        padding:0;
        float: left;
        margin: 0;
        flex: 0 0 auto;
    }

    .news img.newspic {
        margin-right: 15px;
        width:130px;
    }

    .news a.newsblock {
        height: auto;
        overflow: inherit;
        width: 100%;
        float:left;
        border:0;
        display: flex;
        align-items: center;
    }

    .news a h3 {
        font-size: 15px;
        color:#333333;
        display: inherit;
        vertical-align: middle;
        width: auto;
        margin:0;
    }

    .news a:visited h3 {
        color: #777777;
    }

    .news a:hover h3 {
        color:var(--primary-color);
    }

    .news p.date {
        color:#b1b1b1;
        padding:0 10px;
        font-size: 13px;
        margin-top:-12px;
    }

    .news p.teasertext {
        color:#333;
        padding:0 10px;
        font-size: 15px;
    }

    .news-icon-logo {
        border:1px solid #fff;
    }

    .icon-wrapper > img {
        border: 1px solid #fff;
        transform: translateY(50%);
        margin: 0 2px;
        right: inherit;
        bottom: inherit;
        float: right;
    }

    .news-icon-video, .news-icon-tv, .news-icon-radio {
        border: 2px solid #fff;
        background-color: var(--primary-color);
        padding: 4px 2px;
        border-radius: 50px;
    }

    .news-icon-tv {
        padding: 3px 4px;
    }

    .news-icon-radio {
        padding: 3px;
    }

    .audio {
        text-align: center;
    }

    .audio article {
        margin-bottom:30px;
        width:322px;
        float: left;
    }

    footer .topnav {
         line-height: 25px;
    }

    #footer-logo {
        margin-top:5px;
        display: inline-block;
    }

    .detail-left {
        background-color: #fff;
        padding: 0 0 30px 0;
    }

    .detail-left h1, .overzicht h1 {
        font-size: 21px; /* legacy */
        font-size: 1.3rem;
    }

    .detail-left h2 {
        font-size: 1.3rem;
    }

    .detail-left h3 {
        font-size: 1.15rem;
    }

    .detail-left h4 {
        font-size: 1rem;
    }

    .introtext {
        color: #2b2b2b;
        font-size: 16px;
        font-weight: 600;
        margin: 20px 0 20px 0;
    }

    .related-news h3 {
        display:inline-block;
        text-transform: uppercase;
        color:#505050;
        font-size: 16px;
        line-height: 30px;
        margin: 10px 0 0 0;
    }

    .related-news a {
        display:inline-block;
        margin-left: 10px;
        top: -4px;
        font-size: 12px;
        margin-top: 0;
    }

    #form label {
        width: 100%;
        float: left;
        line-height: 18px;
        font-size: 18px;
        vertical-align: middle;
        padding: 5px 0 0 0;
        margin:0 0 10px 0;
    }

    #form input, #form select {
        border: 1px solid #BBBBBB;
        border-radius: 0;
        height: 34px;
        width: 100%;
    }

    #form textarea {
        border: 1px solid #BBBBBB;
        border-radius: 0;
        width: 100%;
    }
}

/* SMALL MOBILE */
@media (max-width:500px) {
	.newscol {margin-bottom: 15px;}

    .news article {
        margin: 0 0 15px;
        position: relative;
    }

    .news a h3 {
        font-size:14px;
        padding: 0 0;
    }

    .audio-home article div h3, .audio article div h3 {
        font-size: 14px;
    }

    .grey li, .content-white li, ul.filter-row li {
        margin: 3px 0;
    }

    .grey ul li a, .content-white ul li a, ul.filter-row li a {
        background-color: #2b2b2b;
        color: #fff;
        padding: 1px 12px;
        font-size: 14px;
    }

    .news-icon-video, .news-icon-tv, .news-icon-radio {
        bottom: -13px;
        right: 22px;
    }
}

/* TABLET AND GREATER */
@media (min-width:768px) {
    footer .black {
		padding-bottom:19px;
	}
}

/* TABLET AND SMALL DESKTOP */
@media (min-width: 768px) and (max-width: 1199px) {
    .banners article:nth-child(1) .frontpage-banner {
        margin-bottom:10px;
    }
}

/* DESKTOP AND GREATER*/
@media (min-width: 992px) {
	#top {
		line-height:55px;
		height:140px;
	}

    #top-logo {
        line-height: 140px;
        height: 140px;
        transition: line-height 0.2s ease-in-out;
    }

	#top-logo img {
		padding:10px 0;
	}

	#top.scrolled {
        line-height:85px;
		height:90px;
        padding:0;
	}

    #top.scrolled #top-logo {
        line-height:90px;
		height:90px;
	}

	#top.scrolled img {
        max-height:75px;
	}

    #top.scrolled .topnav {
		display: none !important;
	}

    	/* ---- TOP NAV ---- */
	#top nav>ul>li:hover>ul {
		display:block;
        min-width: 100%;
    }

    #top nav>ul>li.last:hover>ul {
        left: initial;
        right: -12px;
    }

	#top nav>ul>li>a {
		display: inline-block;
		height: 100%;
		padding:0 38px;
		font-size:24px;
		color:#2b2b2b;
	}

	#top nav>ul>li:first-child a {
		padding: 0 38px 0 0;
	}

	#top nav>ul>li:last-child a {
		padding-right:0;
	}

	#top nav li:hover,
	#top .active,
	#top nav li.current-menu-item,
	#top nav li.current_page_item {
		color:var(--primary-color);
	}

	#top nav li:hover>a,
	#top .active,
	#top nav li.active > a,
	#top nav li.current_page_item a {
		color:var(--primary-color);
		text-decoration:none;
	}

	#top nav>ul>li>ul {
		top: 95%;
		left: 0;
		background:white;
	    box-shadow: 0 12px 10px rgba(0,0,0,0.3);
	}

    #top nav>ul>li>ul>li>ul {
        background:white;
    }

	#top .menu-item-has-children:after{
		content:'';
		display:block;
		position:absolute;
		top:50%;
		margin-top:-3px;
		right:10px;
		border-top:6px solid white;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
	}

    #top .menu-item-has-children .menu-item-has-children:after {
        border-top:6px solid var(--primary-color);
    }
    #top .menu-item-has-children .menu-item-has-children:hover:after {
        border-top:6px solid white;
    }
    #top .menu-item-has-children .menu-item-has-children>a {
        padding-right:15px;
    }

	#top nav>ul>li>ul a {
		color:#2b2b2b;
		font-size: 15px;
	}

	#top nav>ul>li>ul a:hover {
		color:var(--primary-color);
	}

	#top nav>ul>li>ul>li {
		line-height:30px;
		padding:0 10px;
	}

	#top nav>ul>li>ul>li:hover>ul {
		display:block;
	}

    #top nav>ul>li>ul>li>ul>li>a{
        padding:0 15px;
    }

}

/* DESKTOP */
@media (min-width: 992px) and (max-width:1199px) {
    .topnav form input {
        font-size: 13px;
    }

    .topnav a#radio-top:before, .topnav a#tv-top:before, .topnav a#mail-top:before, .topnav a#search-top:before {
        padding: 0 10px 0 10px;
        font-size: 12px;
    }

    .topnav a#radio-top:before {
        content: "live radio";
    }



    .topnav a#tv-top:before {
        content: "live televisie";
    }

    .topnav a#mail-top:before {
        content: "tip de redactie";
    }

    .topnav a#search-top:before {
        content: "zoeken";
        padding: 6px 50px 4px 10px;
    }

    .headeritem-text {
        font-size: 20px;
    }

}

/* DESKTOP LARGE */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
        width:inherit;
    }
}

@media (min-width: 768px) and (max-width: 991.9px) {
    .banners .container {
        width:100%;
    }
    .banners article {
        overflow-x: auto;
    }
}

/* ---- TOP NAV ---- */
#top li {
	position:relative; /* to absolute position the arrow */
	white-space: nowrap;
}

/* FIRST LEVEL */
#top nav>ul>li {
	display: inline-block;
	font-weight: 600;
}

/* SECOND LEVEL */
#top nav>ul>li>ul {
	display:none;
	position:absolute;
	text-align: left;
}

#top nav>ul>li>ul>li {
	display:block;
}

/* THIRD LEVEL */
#top nav>ul>li>ul>li>ul {
	display:none;
	position:absolute;
	top:0;
	left:100%;
}

@media (min-width:768px){
	/* ---- FOOTER NAV ---- */
	.pull, footer span:first-child {
		display:block;
		margin-bottom:15px;
		font-weight:bold;
	}

	footer ul {
		margin-bottom:30px;
	}

	footer ul li a {
		color:#fff;
		font-weight: 600;
		line-height: 24px;
		font-size: 15px;
	}

	footer ul li a:hover {
		color:#fff;
		text-decoration: underline;
	}

}

/* NAV */
#nav-full {text-align: right!important;}
#top nav > #nav-full > li > a {padding: 0 12px;}
#top nav > #nav-full > li.first > a {padding: 0 12px 0 12px;}
#top nav > #nav-full > li.last > a {padding: 0 0 0 12px;}
#nav-full > li > ul {left: 0;}

/* MOBILE AND TABLET */
@media (max-width:991.9px) {
    #top, #top-logo {
        line-height:70px;
        height:70px;
    }

    #top-logo img {
        max-height:100%;
        padding: 15px;
        float: left;
    }

    #push {
        height:70px;
    }

    #top nav {
		position: fixed;
		top: 0;
		left: -100%;
		height: 100%;
		width:75%;
		max-width:300px;
		background: #fff;
		z-index: 999999999999999;
        overflow: auto;
        transition: left 0.3s ease-in-out;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    }

    #top nav.open {
        left:0;
    }

	#top nav li, footer li {
		position:relative;
		display:block;
	}

	#top nav li a, footer li a {
		display:block;
        line-height: 2;
	}

	#top nav li a {
		color:#2b2b2b;
		text-decoration:none;
        white-space: normal;
	}

	#top nav li a:hover, footer li a:hover  {
		text-decoration:none;
		color:var(--primary-color);
        background-color: #f4f4f4;
	}

	#top nav>ul {
		height: auto;
		width:100%;
	}

	#top nav>ul>li {
		display:block;
	}

	#top nav a {
		border-bottom:1px solid #f6f6f6;
	}

	#top nav>ul>li>a {
		width: 100%;
		text-align: left;
		padding-left:15px;
		padding-right:15px;
        font-size: 1rem;
	}

    /* Second level */
    #top nav>ul>li>ul {position:relative;}
	#top nav>ul>li>ul>li>a {padding-left:30px;}
    /* Third level */
    #top nav>ul>li>ul>li>ul {position:relative; left:0;}
    #top nav>ul>li>ul>li>ul>li>a {padding-left:45px;}

    /* PULL */
    .side-pull {
        position: absolute;
        top: 0;
        display: block;
        width: 2.5em;
        height: 100%;
        cursor: pointer;
        margin: 0 auto;
        float: none;
        transition: all 0.3s;
    }

    .side-pull.left {	left:15px;}
    .side-pull.right {	right:15px;}

    .side-pull > span {
        position: absolute;
        top: 50%;
        display: block;
        width: 100%;
        height: 4px;
        transform: translateY(-50%);
        background-color: #303030;
        border-radius: 0;
    }

      .side-pull > span:before,
      .side-pull > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #303030;
        border-radius: 0;
        -webkit-transition: all 0.3s;
                  transition: all 0.3s;
      }

      .side-pull > span:before {
        transform: translateY(-16px);
      }

      .side-pull > span:after {
        transform: translateY(16px);
      }

      /* OPENED */
      .side-pull.open {
        -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
      }

      .side-pull.open > span:before {
        -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
      }

      .side-pull.open > span:after {
        -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
      }

      /* ---- TOP NAV ---- */
      #top .row>div {
          padding-left:0;
          padding-right:0;
      }

      /* TOP-NAV */
    #top nav > #nav-full > li > a,
    #top nav > #nav-full > li.first > a,
    #top nav > #nav-full > li.last > a {padding: 5px 20px;}
    #top nav > ul > li > ul {display:block; font-size: 0.9em;}
    #top nav > ul > li > ul > li a {
        font-size: 0.8rem;
        padding: 0 20px 0 35px;
        font-weight: normal;
        text-transform: none;
    }

    .icon-wrapper {
        bottom:5px;
    }

    /* headline */
    .topper-item:first-child {
        margin: 0 0 30px 0;
    }

    .headeritem-text {
        line-height: 1.5;
        font-size: 16px;
    }
}

@media (max-width:991.9px) and (pointer:none),
       (max-width:991.9px) and (pointer:fine),
       (min-width:768px) and (max-width:991.9px) and (pointer:coarse) {
    /* video */
    .video-home .row article:nth-child(5),
    .video-home .row article:nth-child(6),
    .video-home .row article:nth-child(7),
    .video-home .row article:nth-child(8) {
        display:none
    }

}
@media (max-width:991.9px) {
    /* audio */
    .audio-home .row article:nth-child(5),
    .audio-home .row article:nth-child(6),
    .audio-home .row article:nth-child(7),
    .audio-home .row article:nth-child(8) {
        display:none
    }

}

@media only screen and (max-width : 767.9px) {
    /* article */
    .detail-left img {
        margin: 0 -15px 5px;
        width: calc(100% + 30px);
        max-width: inherit;
    }

    .detail-left .swiper-container img {
        width:100%;
        margin:0;
    }

    .swiper-container {
        width:calc(100% + 30px);
        margin-left:-15px;
        margin-right:-15px;
    }

    .youtube, .video {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        max-width: inherit;
        padding-top:16.875px;
    }

    .swiper-slide .author {
        margin-right: 15px;
    }
}

/* DESKTOP */
@media (min-width: 992px) and (max-width:1199px) {
    #top nav>ul>li>a {
        padding: 0 24px;
        font-size: 20px;
    }

    #top nav>ul>li:before {
        height: 14px;
    }

}

/* MAIN */
p {margin: 1.5em 0;}
div#top.scrolled .topnavigation {
    opacity: 0;
    margin-top: -53px;
}

.topnavigation {
    margin-top: 20px;
    height: 55px;
    opacity: 1;
    transition: margin 0.2s ease-in-out, opacity 0.2s ease;
}

.catgroup {margin-bottom: 20px;}
.catgroup li {display: inline-block; margin-right: 5px;}
.catgroup li a {background-color: #2b2b2b; color: #fff; padding: 5px 15px; font-size: 13px;}

body.radio {margin:0; padding: 0;}
.spacer  {margin-top: 30px;}
.spacer-bottom  {margin-bottom: 30px;}
.news {margin-bottom: 5px; }
.news a h3 {margin-top: 0;line-height: 1.3;}
.pagination > li > a {position: inherit;}

.embedsection iframe {width: 100%;}

.topnav-item {
    display: inline-flex;
    margin-left: 5px;
}

.topnav-item a {
    font-weight: bold;
    padding: 5px 15px;
    background: var(--primary-color);
    background-image: linear-gradient(0deg, var(--primary-color), var(--secondary-color));
    width: auto;
    color: #fff!important;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    border-radius: 15px;
    font-size: 0.9em;
}

.topnav-item a:hover {
    background-image: linear-gradient(0deg, var(--primary-lighter-color), var(--secondary-lighter-color));
}

#top .topnav-item input[type="search"] {
    height: 30px;
}

#top .topnav-item form {
    line-height: 1;
    text-align: left;
    display: flex;
    height: 30px;
}

.hiddenFields {
    display: none;
}

/* TOPNAV BUTTON */
#top .topnav-item button {
    margin-right: 8px;
}

/* TOP SEARCH FORM PC */
.topnav-item:last-child {
    flex-direction: row-reverse;
    align-items: center;
}

#toggle-search {
    display: none;
}

#toggle-search + label {
    line-height: 1;
    margin: 0;
    width: 18px;
    text-align: center;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    cursor: pointer;
}

#toggle-search + label:after {
    content: "\f002";
}

#toggle-search:checked + label:after {
    content: "\f00d";
}

#toggle-search + label:hover {
    color: var(--primary-color);
}

#toggle-search + label + form {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width .2s ease-in-out, opacity .15s ease-in-out .05s;
}

#toggle-search:checked + label + form {
    width: 180px;
    opacity: 1;
}

/* SEARCH RESULTS */
.searchresults h3 {margin-top: 0; font-size: 16px;}
.searchresults p {font-size: 13px; line-height: 150%;}

/* JSOCIAL */
.jssocials-share {
    text-align:center;
    border-radius:50%;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 0 0;
    width:36px;
    height:36px;
    line-height: 34px;
}
.jssocials-share:last-child {
    margin-right: 0;
}
.jssocials-share-logo {
    width: 1em;
    vertical-align: middle;
    font-size: 1.5em;
}
img.jssocials-share-logo {
    width: auto;
    height: 1em;
}
.jssocials-share-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.jssocials-share a {color: #fff;}
.jssocials-share-twitter {background-color: #55acee ; color: #fff;}
.jssocials-share-facebook {background-color: #3b5998; color: #fff;}
.jssocials-share-linkedin {background-color: #0077b5; color: #fff;}
.jssocials-share-whatsapp {background-color: #33CC66; color: #fff;}
.jssocials-share-email {background-color: #6E6E6D; color: #fff;}
#socials-share {
    margin:1.5em 0 0;
}

/* TOPPER ITEM */
.topper-item {position: relative;}
.topper-item .icon-wrapper {bottom: -20px;  z-index: 99;}
.topper-item .shorticon {font-size: 17px; margin-left: 10px; border-radius: 50px; line-height:45px; height: 45px; width: 45px; box-shadow: 1px 6px 11px 0 rgba(0,0,0,0.3); transition: box-shadow 0.3s ease-in-out;}
.topper-item:hover .shorticon {box-shadow: 1px 6px 20px 0 rgba(0,0,0,0.6);}

.special-container {
    background: #f8f8f8;
    border: 1px solid #ccc;
    padding: 15px 20px;
    line-height:1.5;
    margin: 1.5em 0 10px;
    font-size: 0.9rem;
}

.special-container li {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* FOOTER */
footer  {color: #fff; line-height: 24px; font-size: 15px; word-break: break-word;}
footer a {color: var(--primary-color); }

/* MEDIA */
@media (max-width: 480px){
    .headeritem-text {font-size: 14px;}
	.catgroup li {margin-bottom: 15px;}
}

/* playlist */
.playlist-title {
    margin: 2em 0 1em;
    color: black;
}

.playlist-title h2 {
    font-size: 1.1rem;
}

.playlist-scroll {
    display: flex;
    overflow-x: auto;
    gap: 20px;
}

.playlist-scroll .playlist-item {
    flex: 0 0 55%;
    max-width: 276px;
    margin-bottom: 5px;
    scroll-snap-align: start;
}

.playlist-item a {
    text-decoration: none;
    color: black;
    transition: color 0.2s ease-in-out;
}

.playlist-item:hover .image-crop img {
    transform: scale(1.05);
}

.playlist-item:hover a {
    text-decoration: none;
    color: var(--primary-color);
}

.detail-left .playlist-item img {
    margin: 0;
    width: 100%;
}

.playlist-item .show-more {
    position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: 0 0 5px black;
    text-decoration: none;
    font-size: 18px
}

.playlist-item .show-more-filter {
    filter: brightness(0.6) contrast(0.8);
}

@media (max-width: 768px) {
    .playlist-scroll {
        margin-right: -15px;
    }

    .playlist-scroll .playlist-item:last-child {
        padding-right: 15px;
        box-sizing: content-box;
    }
}

@media (hover: hover) and (pointer: fine) {
    .playlist-scroll::-webkit-scrollbar {
        background: #ffffff;
        height: 8px;
        border-radius: 5px;
    }

    .playlist-scroll::-webkit-scrollbar-thumb {
        background: #d4d4d4;
        border-radius: 5px;
    }

    .playlist-scroll:hover::-webkit-scrollbar-thumb {
        background: #bbbbbb;
    }

    .playlist-scroll:active::-webkit-scrollbar-thumb {
        background: #aaaaaa;
    }
}