.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
/** initial setup **/
.nano {
position : relative;
width : 100%;
height : 100%;
overflow : hidden;
}
.nano > .nano-content {
position : absolute;
overflow : scroll;
overflow-x : hidden;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
.nano > .nano-content:focus {
outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
display: block;
}
.nano > .nano-pane {
background : rgba(0,0,0,.25);
position : absolute;
width : 10px;
right : 0;
top : 0;
bottom : 0;
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
opacity : .01;
-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}
.nano > .nano-pane > .nano-slider {
background: #444;
background: rgba(0,0,0,.5);
position : relative;
margin : 0 1px;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
visibility : visible\9; /* Target only IE7 and IE8 with this hack */
opacity : 0.99;
}
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@charset "UTF-8";
@import url(/assets/@dpgradio/creative/styles/fonts/qmusic-41c914cba260d1107f85f68964c4f9cd24ef56931785e81ed1c11c9d644f88af.css);
@font-face {
font-family: 'q-icons';
src: url(/assets/q-icons-b36c156471b838175f8486e3e09206374ccf59e31cb04bce340eeeffa34e9c1c.eot);
src: url(/assets/q-icons-b36c156471b838175f8486e3e09206374ccf59e31cb04bce340eeeffa34e9c1c.eot#iefix) format("embedded-opentype"), url(/assets/q-icons-58623ca5c93d48529551ada717bb90657949133aec1db084e531f455a1fc8b48.woff) format("woff"), url(/assets/q-icons-66bf4a313eed46ffd1518b311c28aae06ded5b5f870be5ad281028728852e5c6.ttf) format("truetype"), url(/assets/q-icons-e582aec00f569684a581e4e3df978ddab26aa6d24b01c1b7c7311cd2df05033d.svg#q-icons) format("svg");
font-weight: normal;
font-style: normal; }
[class^="qi-"]:before, [class*=" qi-"]:before {
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
transition: opacity 0.5s;
font-family: "q-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: inherit;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
.window-loaded [class^="qi-"]:before, .window-loaded [class*=" qi-"]:before {
opacity: 1; }
@layer site {
html.embedded body {
padding-top: 0;
background-color: white; }
html.embedded.js #body-content-wrap {
padding-top: 0; }
.site-base {
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/*
Animation example, for spinners
*/
/* this seems to work better */
/** icon animations **/
/**
* Everything grid related goes here
**/
/* boilerplate visuallyhidden */
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ }
.site-base .qi-kiss:before {
content: '\e800'; }
.site-base .qi-list-button:before {
content: '\e801'; }
.site-base .qi-mail:before {
content: '\e802'; }
.site-base .qi-player:before {
content: '\e803'; }
.site-base .qi-instagram:before {
content: '\e804'; }
.site-base .qi-power:before {
content: '\e805'; }
.site-base .qi-speed:before {
content: '\e806'; }
.site-base .qi-spotify-official:before {
content: '\e807'; }
.site-base .qi-spotify:before {
content: '\e808'; }
.site-base .qi-turd:before {
content: '\e809'; }
.site-base .qi-tv-button:before {
content: '\e80a'; }
.site-base .qi-tv:before {
content: '\e80b'; }
.site-base .qi-weather-rain:before {
content: '\e80c'; }
.site-base .qi-weather-snow:before {
content: '\e80d'; }
.site-base .qi-weather-storm:before {
content: '\e80e'; }
.site-base .qi-facebook:before {
content: '\e80f'; }
.site-base .qi-falling-star:before {
content: '\e810'; }
.site-base .qi-fastforward:before {
content: '\e811'; }
.site-base .qi-flower-tag:before {
content: '\e812'; }
.site-base .qi-gay:before {
content: '\e813'; }
.site-base .qi-gear:before {
content: '\e814'; }
.site-base .qi-glasses:before {
content: '\e815'; }
.site-base .qi-grin:before {
content: '\e816'; }
.site-base .qi-hannibal:before {
content: '\e817'; }
.site-base .qi-happy-tear:before {
content: '\e818'; }
.site-base .qi-happy:before {
content: '\e819'; }
.site-base .qi-headphones:before {
content: '\e81a'; }
.site-base .qi-heart:before {
content: '\e81b'; }
.site-base .qi-home:before {
content: '\e81c'; }
.site-base .qi-twitter:before {
content: '\e81d'; }
.site-base .qi-iron-man:before {
content: '\e81e'; }
.site-base .qi-joy:before {
content: '\e81f'; }
.site-base .qi-mailbox:before {
content: '\e820'; }
.site-base .qi-maximize:before {
content: '\e821'; }
.site-base .qi-menu:before {
content: '\e822'; }
.site-base .qi-mic:before {
content: '\e823'; }
.site-base .qi-microphone:before {
content: '\e824'; }
.site-base .qi-minimize:before {
content: '\e825'; }
.site-base .qi-music:before {
content: '\e826'; }
.site-base .qi-mute:before {
content: '\e827'; }
.site-base .qi-neutral:before {
content: '\e828'; }
.site-base .qi-next:before {
content: '\e829'; }
.site-base .qi-ninja:before {
content: '\e82a'; }
.site-base .qi-open-mouth:before {
content: '\e82b'; }
.site-base .qi-pause:before {
content: '\e82c'; }
.site-base .qi-phone:before {
content: '\e82d'; }
.site-base .qi-pizza:before {
content: '\e82e'; }
.site-base .qi-play-outline:before {
content: '\e82f'; }
.site-base .qi-play:before {
content: '\e830'; }
.site-base .qi-previous:before {
content: '\e831'; }
.site-base .qi-rec:before {
content: '\e832'; }
.site-base .qi-rewind:before {
content: '\e833'; }
.site-base .qi-rock:before {
content: '\e834'; }
.site-base .qi-diamond:before {
content: '\e835'; }
.site-base .qi-sad:before {
content: '\e836'; }
.site-base .qi-screen:before {
content: '\e837'; }
.site-base .qi-search:before {
content: '\e838'; }
.site-base .qi-settings-sliders:before {
content: '\e839'; }
.site-base .qi-sigh:before {
content: '\e83a'; }
.site-base .qi-simple-smile:before {
content: '\e83b'; }
.site-base .qi-skull:before {
content: '\e83c'; }
.site-base .qi-sleeping:before {
content: '\e83d'; }
.site-base .qi-smile:before {
content: '\e83e'; }
.site-base .qi-snapchat:before {
content: '\e83f'; }
.site-base .qi-soundcloud:before {
content: '\e840'; }
.site-base .qi-speaker:before {
content: '\e841'; }
.site-base .qi-squeezing:before {
content: '\e842'; }
.site-base .qi-star-eye:before {
content: '\e843'; }
.site-base .qi-stare:before {
content: '\e844'; }
.site-base .qi-stop:before {
content: '\e845'; }
.site-base .qi-sunglasses:before {
content: '\e846'; }
.site-base .qi-sweat-alt:before {
content: '\e847'; }
.site-base .qi-sweat:before {
content: '\e848'; }
.site-base .qi-thumbs-down:before {
content: '\e849'; }
.site-base .qi-thumbs-up:before {
content: '\e84a'; }
.site-base .qi-tired:before {
content: '\e84b'; }
.site-base .qi-tongue-closed-eyes:before {
content: '\e84c'; }
.site-base .qi-tongue-star:before {
content: '\e84d'; }
.site-base .qi-tongue-stare:before {
content: '\e84e'; }
.site-base .qi-tongue-wink:before {
content: '\e84f'; }
.site-base .qi-tongue:before {
content: '\e850'; }
.site-base .qi-tooth:before {
content: '\e851'; }
.site-base .qi-traffic:before {
content: '\e852'; }
.site-base .qi-plus:before {
content: '\e853'; }
.site-base .qi-umbrella:before {
content: '\e854'; }
.site-base .qi-upload:before {
content: '\e855'; }
.site-base .qi-vampire:before {
content: '\e856'; }
.site-base .qi-volume-down:before {
content: '\e857'; }
.site-base .qi-volume-up:before {
content: '\e858'; }
.site-base .qi-volume:before {
content: '\e859'; }
.site-base .qi-weary:before {
content: '\e85a'; }
.site-base .qi-weather-cloud-sun:before {
content: '\e85b'; }
.site-base .qi-weather-cloud-wind:before {
content: '\e85c'; }
.site-base .qi-weather-clouds:before {
content: '\e85d'; }
.site-base .qi-weather-hail-alt:before {
content: '\e85e'; }
.site-base .qi-weather-hail:before {
content: '\e85f'; }
.site-base .qi-weather-heavy-rain:before {
content: '\e860'; }
.site-base .qi-weather-min-max:before {
content: '\e861'; }
.site-base .qi-amazed:before {
content: '\e862'; }
.site-base .qi-anguished:before {
content: '\e863'; }
.site-base .qi-arrow-down:before {
content: '\e864'; }
.site-base .qi-arrow-left:before {
content: '\e865'; }
.site-base .qi-arrow-right:before {
content: '\e866'; }
.site-base .qi-arrow-up:before {
content: '\e867'; }
.site-base .qi-big-smile-closed-eyes:before {
content: '\e868'; }
.site-base .qi-big-smile:before {
content: '\e869'; }
.site-base .qi-blow:before {
content: '\e86a'; }
.site-base .qi-bolt:before {
content: '\e86b'; }
.site-base .qi-bottle:before {
content: '\e86c'; }
.site-base .qi-camera-alt:before {
content: '\e86d'; }
.site-base .qi-camera:before {
content: '\e86e'; }
.site-base .qi-cheeky:before {
content: '\e86f'; }
.site-base .qi-circle-notch:before {
content: '\e870'; }
.site-base .qi-clock:before {
content: '\e871'; }
.site-base .qi-confounded:before {
content: '\e872'; }
.site-base .qi-creepy-smile:before {
content: '\e873'; }
.site-base .qi-cry:before {
content: '\e874'; }
.site-base .qi-cyclops:before {
content: '\e875'; }
.site-base .qi-dead:before {
content: '\e876'; }
.site-base .qi-clock-empty:before {
content: '\e877'; }
.site-base .qi-drink:before {
content: '\e878'; }
.site-base .qi-weather-mist:before {
content: '\e879'; }
.site-base .qi-weather-night-cloud:before {
content: '\e87a'; }
.site-base .qi-weather-sun:before {
content: '\e87b'; }
.site-base .qi-weather-thermometer:before {
content: '\e87c'; }
.site-base .qi-weather-umbrella:before {
content: '\e87d'; }
.site-base .qi-weather-wind:before {
content: '\e87e'; }
.site-base .qi-whatsapp:before {
content: '\e87f'; }
.site-base .qi-x:before {
content: '\e880'; }
.site-base .qi-youtube-o:before {
content: '\e881'; }
.site-base .qi-youtube-official:before {
content: '\e882'; }
.site-base .qi-youtube-play:before {
content: '\e883'; }
.site-base .qi-youtube:before {
content: '\e884'; }
.site-base .qi-clock-hour:before {
content: '\e885'; }
.site-base .qi-clock-minute:before {
content: '\e886'; }
.site-base .qi-rocket:before {
content: '\e887'; }
.site-base .qi-audio:before {
content: '\e888'; }
.site-base .qi-audio-list:before {
content: '\e889'; }
.site-base .qi-calendar:before {
content: '\e88a'; }
.site-base .qi-gift:before {
content: '\e88b'; }
.site-base .qi-list:before {
content: '\e88c'; }
.site-base .qi-message:before {
content: '\e88d'; }
.site-base .qi-q:before {
content: '\e88e'; }
.site-base .qi-social:before {
content: '\e88f'; }
.site-base .qi-profile:before {
content: '\e890'; }
.site-base .qi-lock:before {
content: '\e891'; }
.site-base .qi-mail-button:before {
content: '\e892'; }
.site-base .qi-attachment:before {
content: '\e893'; }
.site-base .qi-radiobutton:before {
content: '\e894'; }
.site-base .qi-checkbox:before {
content: '\e895'; }
.site-base .qi-checkbox-checked:before {
content: '\e896'; }
.site-base .qi-radiobutton-selected:before {
content: '\e897'; }
.site-base .qi-arrow-down-alt:before {
content: '\e898'; }
.site-base .qi-heart-full:before {
content: '\e899'; }
.site-base .qi-tiktok:before {
content: '\e89A'; }
.site-base .animate-spin {
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
display: inline-block; }
.site-base .animate-spin:before {
display: block !important;
margin: 0 auto; }
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-moz-transform: rotate(359deg);
transform: rotate(359deg); } }
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-o-transform: rotate(359deg);
transform: rotate(359deg); } }
@-ms-keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@keyframes shake {
0% {
transform: translateX(0%); }
5% {
transform: translateX(-9.975%); }
10% {
transform: translateX(9.9%); }
15% {
transform: translateX(-9.775%); }
20% {
transform: translateX(9.6%); }
25% {
transform: translateX(-9.375%); }
30% {
transform: translateX(9.1%); }
35% {
transform: translateX(-8.775%); }
40% {
transform: translateX(8.4%); }
45% {
transform: translateX(-7.975%); }
50% {
transform: translateX(7.5%); }
55% {
transform: translateX(-6.975%); }
60% {
transform: translateX(6.4%); }
65% {
transform: translateX(-5.775%); }
70% {
transform: translateX(5.1%); }
75% {
transform: translateX(-4.375%); }
80% {
transform: translateX(3.6%); }
85% {
transform: translateX(-2.775%); }
90% {
transform: translateX(1.9%); }
95% {
transform: translateX(-0.975%); }
100% {
transform: translateX(0%); } }
@keyframes bounce {
0% {
transform: translateY(0%); }
10% {
transform: translateY(-24.75%); }
20% {
transform: translateY(0%); }
30% {
transform: translateY(-22.75%); }
40% {
transform: translateY(0%); }
50% {
transform: translateY(-18.75%); }
60% {
transform: translateY(0%); }
70% {
transform: translateY(-12.75%); }
80% {
transform: translateY(0%); }
90% {
transform: translateY(-4.75%); }
100% {
transform: translateY(0%); } }
@keyframes float {
0% {
transform: translate(0, 0); }
15% {
transform: translate(10%, -15%); }
30% {
transform: translate(-5%, -30%); }
45% {
transform: translate(17%, -45%); }
60% {
transform: translate(0%, -60%); }
90% {
transform: translate(0, 0); } }
@keyframes beat {
0% {
transform: scale(1); }
2% {
transform: scale(1.5); }
10% {
transform: scale(1.3); }
12% {
transform: scale(1.5); }
20% {
transform: scale(1.3); }
22% {
transform: scale(1.5); }
40% {
transform: scale(1); } }
@keyframes flip {
0% {
transform: rotateY(0); }
100% {
transform: rotateY(720deg); } }
@keyframes flash {
0% {
background: rgba(255, 255, 255, 0); }
1% {
background: white; }
5% {
background: rgba(255, 255, 255, 0.5); }
6% {
background: white; }
14% {
background: rgba(255, 255, 255, 0); } }
@keyframes grid-item-in {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.9); }
100% {
opacity: 1;
transform: translateY(0); } }
@media (min-width: 768px) {
.site-base .grid-embeds > div, .site-base .grid-2-embeds > div, .site-base .grid-3-embeds > div, .site-base .grid-4-embeds > div {
margin: 0;
padding: 0;
float: left; }
.site-base .grid-embeds iframe, .site-base .grid-2-embeds iframe, .site-base .grid-3-embeds iframe, .site-base .grid-4-embeds iframe {
display: inline;
margin: 0;
padding: 0; }
.site-base .grid-embeds:after, .site-base .grid-2-embeds:after, .site-base .grid-3-embeds:after, .site-base .grid-4-embeds:after {
content: '';
display: block;
clear: both; }
.site-base .grid-2-embeds > div {
width: 50%;
max-width: 50%;
width: 50%; }
.site-base .grid-2-embeds iframe {
width: 50%;
max-width: 50%;
width: 50%; }
.site-base .grid-3-embeds > div {
width: 33.3%;
max-width: 33.3%;
width: 33.3%; }
.site-base .grid-3-embeds iframe {
width: 33.3%;
max-width: 33.3%;
width: 33.3%; }
.site-base .grid-4-embeds > div {
width: 25%;
max-width: 25%;
width: 25%; }
.site-base .grid-4-embeds iframe {
width: 25%;
max-width: 25%;
width: 25%; } }
.site-base .hidden {
display: none !important;
visibility: hidden !important; }
.site-base .clearfix {
clear: both; }
.site-base .full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw; }
.site-base .center-embed iframe, .site-base .center-embed blockquote, .site-base .center-embed .instagram-media {
display: block;
margin: 0 auto !important; }
.site-base .center-embed .instagram-media {
position: relative !important; }
.site-base .aspect-ratio-div {
position: relative; }
.site-base .aspect-ratio-div iframe, .site-base .aspect-ratio-div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.site-base input[type=text].subject-field {
display: none; }
.site-base .text-center {
text-align: center; }
.site-base .text-right {
text-align: right; }
.site-base .text-justify {
text-align: justify; }
.site-base #admin-bar {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 32px;
background-color: black; }
.site-base #admin-bar h1 {
margin: 2px 10px;
font-size: 26px;
color: white;
display: inline-block;
float: left; }
.site-base #admin-bar ul {
margin: 2px 12px;
padding: 0;
float: left; }
.site-base #admin-bar ul.right {
float: right; }
.site-base #admin-bar ul li {
float: left;
list-style: none;
padding: 0px 6px; }
.site-base #admin-bar a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
line-height: 32px; }
.site-base #admin-bar a:hover {
color: #ed3624; }
.site-base html.admin-mode body {
padding-top: 82px; }
.site-base html.admin-mode #main-navigation, .site-base html.admin-mode #header {
top: 32px; }
.site-base html.admin-mode .menu-dropdown {
top: 102px; }
.site-base html.admin-mode.menu-expanded .menu-dropdown {
top: 144px; }
.site-base .content header {
z-index: 2;
position: relative; }
.site-base .content header img {
width: 100%;
display: block; }
.site-base .article-header {
margin-bottom: 10px; }
.site-base .article-header:before, .site-base .article-header:after {
content: " ";
display: table; }
.site-base .article-header:after {
clear: both; }
.site-base .article-header {
*zoom: 1; }
.site-base .article-header .big-play-button {
cursor: pointer;
display: block;
margin: 0.2em auto;
top: 50%;
left: 50%;
width: 2em;
line-height: 2em;
height: 2em;
text-align: center;
font-size: 3em;
background: #3d3d3d;
color: white;
border-radius: 100%; }
.site-base .article-header .big-play-button.qi-arrow-right {
padding-left: 0.2em; }
.site-base .article-header .big-play-button.qi-headphones {
line-height: 1.9em; }
.site-base .article-header iframe {
display: block;
max-width: 1000px;
margin: 0 auto; }
.site-base .article-header .media-container {
position: relative;
z-index: 1;
width: 100%; }
.site-base .article-header .media-container.video {
max-width: 1000px;
margin: 0 auto; }
.site-base .article-header .media-container.video iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.site-base .article-header .media-container.audio {
background: transparent; }
.site-base .article-header .article-image ~ .media-container {
position: absolute;
bottom: 0; }
.site-base .article-header .article-image ~ .big-play-button,
.site-base .article-header .media-container ~ .big-play-button {
position: absolute;
margin: -1em; }
.site-base .article-title,
.site-base .article-body {
position: relative;
margin-top: 1em; }
.site-base .article-title .fb-video,
.site-base .article-body .fb-video {
display: block;
text-align: center; }
.site-base .article-title h1,
.site-base .article-body h1 {
margin-top: 0; }
.site-base .article-body p, .site-base .cms-article-body p {
font-size: 1em;
margin-bottom: 1em;
line-height: 1.6em;
min-height: 1.6em; }
.site-base .article-body h1, .site-base .article-body h2, .site-base .article-body h3, .site-base .article-body h4, .site-base .article-body h5, .site-base .article-body h6, .site-base .cms-article-body h1, .site-base .cms-article-body h2, .site-base .cms-article-body h3, .site-base .cms-article-body h4, .site-base .cms-article-body h5, .site-base .cms-article-body h6 {
line-height: 1;
margin-bottom: 16px; }
.site-base .article-body h1, .site-base .cms-article-body h1 {
font-size: 2.2em; }
.site-base .article-body h2, .site-base .cms-article-body h2 {
font-size: 2em; }
.site-base .article-body h3, .site-base .cms-article-body h3 {
font-size: 1.8em; }
.site-base .article-body h4, .site-base .cms-article-body h4 {
font-size: 1.4em; }
.site-base .article-body h5, .site-base .cms-article-body h5 {
font-size: 1em; }
.site-base .article-body h6, .site-base .cms-article-body h6 {
font-size: 0.9em; }
@media screen and (min-width: 700px) {
.site-base .article-body h1, .site-base .cms-article-body h1 {
font-size: 2.8em; }
.site-base .article-body h2, .site-base .cms-article-body h2 {
font-size: 2.4em; }
.site-base .article-body h3, .site-base .cms-article-body h3 {
font-size: 2.2em; }
.site-base .article-body h4, .site-base .cms-article-body h4 {
font-size: 1.6em; }
.site-base .article-body h5, .site-base .cms-article-body h5 {
font-size: 1em; }
.site-base .article-body h6, .site-base .cms-article-body h6 {
font-size: 0.8em; } }
.site-base .article-body ul, .site-base .article-body ol, .site-base .cms-article-body ul, .site-base .cms-article-body ol {
margin: 1em 0;
padding: 0 0 0 1.4em;
line-height: 1.6em; }
.site-base .article-body li ul, .site-base .article-body li ol, .site-base .cms-article-body li ul, .site-base .cms-article-body li ol {
margin: 0; }
.site-base .article-body hr, .site-base .cms-article-body hr {
border: none;
border-top: 1px solid #e0e0e0;
margin: 2em 1em; }
.site-base .article-body a, .site-base .cms-article-body a {
text-decoration: underline;
cursor: pointer; }
.site-base .article-body a.c-button, .site-base .cms-article-body a.c-button {
text-decoration: none; }
.site-base .article-body blockquote, .site-base .cms-article-body blockquote {
border-left: 3px solid #d1d5db;
padding-left: 1em;
color: #6b7280;
font-style: italic;
margin: 1em 0; }
.site-base .article-body table, .site-base .cms-article-body table {
border-collapse: collapse;
width: 100%;
margin: 1em 0; }
.site-base .article-body td, .site-base .article-body th, .site-base .cms-article-body td, .site-base .cms-article-body th {
border: 1px solid #d1d5db;
padding: 6px 10px;
vertical-align: top;
text-align: left; }
.site-base .article-body th, .site-base .cms-article-body th {
font-weight: 600;
background: #f3f4f6; }
.site-base .article-body li > p,
.site-base .article-body td > p,
.site-base .article-body th > p, .site-base .cms-article-body li > p,
.site-base .cms-article-body td > p,
.site-base .cms-article-body th > p {
margin-bottom: 0; }
.site-base .article-body .image-block, .site-base .cms-article-body .image-block {
display: block;
margin: 8px 0; }
.site-base .article-body .image-block img, .site-base .cms-article-body .image-block img {
display: block;
max-width: 100%;
height: auto; }
.site-base .article-body .content-columns, .site-base .cms-article-body .content-columns {
display: flex;
flex-direction: row;
gap: 16px;
margin: 1em 0; }
.site-base .article-body .content-columns > .content-column, .site-base .cms-article-body .content-columns > .content-column {
flex: 1 1 0;
min-width: 0; }
.site-base .article-body .content-columns > .content-column > :first-child, .site-base .cms-article-body .content-columns > .content-column > :first-child {
margin-top: 0; }
.site-base .article-body .content-columns > .content-column > :last-child, .site-base .cms-article-body .content-columns > .content-column > :last-child {
margin-bottom: 0; }
@media (max-width: 640px) {
.site-base .article-body .content-columns, .site-base .cms-article-body .content-columns {
flex-direction: column; } }
.site-base .article-body .article-card, .site-base .cms-article-body .article-card {
position: relative;
margin: 1.5em 0;
padding: 1.6em;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
border: 1px solid var(--card-border);
border-radius: 12px;
background: var(--card-bg); }
.site-base .article-body .article-card__title, .site-base .cms-article-body .article-card__title {
margin: 0 0 12px;
font-size: 1.6em;
font-weight: bold;
line-height: 1.2;
color: var(--card-title); }
.site-base .article-body .article-card__title:empty, .site-base .cms-article-body .article-card__title:empty {
display: none; }
.site-base .article-body .article-card__body > :first-child, .site-base .cms-article-body .article-card__body > :first-child {
margin-top: 0; }
.site-base .article-body .article-card__body > :last-child, .site-base .cms-article-body .article-card__body > :last-child {
margin-bottom: 0; }
.site-base .article-body .article-card, .site-base .cms-article-body .article-card {
color: var(--card-text, #333); }
.site-base .article-body .article-card .article-card__title, .site-base .cms-article-body .article-card .article-card__title {
color: var(--card-title); }
.site-base .article-body .article-card .article-card__body a, .site-base .cms-article-body .article-card .article-card__body a {
color: var(--card-link, var(--card-title)); }
.site-base .article-body .article-card .article-card__body h1, .site-base .article-body .article-card .article-card__body h2, .site-base .article-body .article-card .article-card__body h3, .site-base .article-body .article-card .article-card__body h4, .site-base .article-body .article-card .article-card__body h5, .site-base .article-body .article-card .article-card__body h6, .site-base .cms-article-body .article-card .article-card__body h1, .site-base .cms-article-body .article-card .article-card__body h2, .site-base .cms-article-body .article-card .article-card__body h3, .site-base .cms-article-body .article-card .article-card__body h4, .site-base .cms-article-body .article-card .article-card__body h5, .site-base .cms-article-body .article-card .article-card__body h6 {
color: var(--card-text, #333); }
.site-base .article-body .article-card, .site-base .cms-article-body .article-card {
--card-bg: #ffffff;
--card-border: #e6e6e6;
--card-title: #E72413; }
.site-base .article-body .page-section, .site-base .cms-article-body .page-section {
--section-inset: 0px;
--section-reading-width: 780px;
--section-padding-y: 32px;
--section-padding-x: 20px;
--section-radius: 12px;
box-sizing: border-box;
margin: 1.5em 0;
margin-left: calc(-1 * var(--section-inset));
margin-right: calc(-1 * var(--section-inset));
background: var(--section-bg, transparent);
border-radius: var(--section-radius); }
.site-base .article-body .page-section__inner, .site-base .cms-article-body .page-section__inner {
max-width: var(--section-reading-width);
margin: 0 auto;
padding: var(--section-padding-y) var(--section-padding-x);
color: var(--section-fg, inherit); }
.site-base .article-body .page-section__inner > :first-child, .site-base .cms-article-body .page-section__inner > :first-child {
margin-top: 0; }
.site-base .article-body .page-section__inner > :last-child, .site-base .cms-article-body .page-section__inner > :last-child {
margin-bottom: 0; }
.site-base .article-body .page-section--a, .site-base .cms-article-body .page-section--a {
--section-bg: transparent;
--section-padding-y: 0px; }
.site-base .article-body .page-section--b, .site-base .cms-article-body .page-section--b {
--section-bg: var(--section-b-bg, #f2f4f6); }
.site-base .article-body .page-section--c, .site-base .cms-article-body .page-section--c {
--section-bg: var(--section-c-bg, #e9edf0); }
.site-base .article-body .page-section--d, .site-base .cms-article-body .page-section--d {
--section-bg: var(--section-d-bg, #dfe4e8); }
.site-base .article-body .page-section, .site-base .cms-article-body .page-section {
--section-b-bg: #E72413;
--section-c-bg: #f4f4f4;
--section-d-bg: #fdf6e3; }
.site-base .article-body .page-section--b, .site-base .cms-article-body .page-section--b {
--section-fg: #ffffff; }
.site-base .article-body .page-section--b a, .site-base .article-body .page-section--b h1, .site-base .article-body .page-section--b h2, .site-base .article-body .page-section--b h3, .site-base .article-body .page-section--b h4, .site-base .article-body .page-section--b h5, .site-base .article-body .page-section--b h6, .site-base .cms-article-body .page-section--b a, .site-base .cms-article-body .page-section--b h1, .site-base .cms-article-body .page-section--b h2, .site-base .cms-article-body .page-section--b h3, .site-base .cms-article-body .page-section--b h4, .site-base .cms-article-body .page-section--b h5, .site-base .cms-article-body .page-section--b h6 {
color: #ffffff; }
.site-base .o-article--full-width .page-section, .site-base .cms-article-container--full-width .page-section {
--section-inset: 40px;
--section-radius: 0px; }
.site-base .cms-article-container {
margin: auto;
max-width: 780px; }
.site-base .cms-article-container--full-width {
max-width: none;
padding-left: 40px;
padding-right: 40px; }
.site-base .article-time {
font-size: 0.8em;
color: #919191;
margin-bottom: 1em; }
@media screen and (max-width: 700px) {
.site-base .social-share .button {
font-size: 1.2em; }
.site-base .social-share .button.desktop[data-platform=whatsapp] {
display: none !important; } }
.site-base .social-share-image {
width: 400px; }
.site-base .social-share {
position: relative;
margin-top: 0.65em; }
.site-base .social-share .share-title {
float: left;
text-transform: uppercase;
font-weight: bold;
-moz-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
-o-transform: translateX(-100%) rotate(-90deg);
-webkit-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
margin: 0 -0.6em 0 0;
line-height: 0.9em;
font-size: 1.1em; }
.site-base .social-share .button.submission-share {
display: block;
margin: 20px auto;
width: 400px;
max-width: 90%;
text-decoration: none;
color: white; }
.site-base .social-share .btn-share {
float: left;
text-decoration: none;
font-size: 2em;
border-left: 1px solid #e7e7e7;
margin: 0;
padding: 0 0.2em;
height: auto;
line-height: 0.9em; }
.site-base .social-share .btn-share.desktop[data-platform=whatsapp] {
display: none; }
.site-base .social-share .btn-share[data-platform=twitter], .site-base .social-share .btn-share[data-platform=twitter]:hover {
color: #2eabe2; }
.site-base .social-share .btn-share[data-platform=facebook], .site-base .social-share .btn-share[data-platform=facebook]:hover {
color: #3b5898; }
.site-base .social-share .btn-share[data-platform=whatsapp], .site-base .social-share .btn-share[data-platform=whatsapp]:hover {
color: #059e00; }
footer.article-footer .site-base .social-share {
display: none;
float: left;
margin: 0 0 10px; }
footer.article-footer .site-base .social-share .btn-share {
color: #919191; }
.site-base .sponsors-list {
background: #3d3d3d;
white-space: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 3px; }
.site-base .sponsors-list:before, .site-base .sponsors-list:after {
content: " ";
display: table; }
.site-base .sponsors-list:after {
clear: both; }
.site-base .sponsors-list {
*zoom: 1; }
.site-base .sponsors-list .handle {
cursor: pointer;
text-align: center;
display: inline-block;
padding: 10px;
background: white;
margin: 3px 0 0; }
.site-base .sponsors-list .handle.no_padding {
padding: 0;
padding-right: 13px; }
.site-base .sponsors-list .handle .arrow {
display: none; }
.site-base .sponsors-list .handle img {
display: block;
height: 23px;
width: auto; }
.site-base .partner.inline .container {
padding: 10px 10px;
color: white;
min-height: 320px; }
.site-base .partner.inline .container a {
color: white; }
.site-base .hitlist-header .sponsors-list {
bottom: 65px; }
.site-base .sponsors-content {
color: white; }
.site-base .sponsors-content a {
color: white; }
.site-base .sponsors-content .overlay {
z-index: 100;
position: relative;
background: rgba(61, 61, 61, 0.9);
padding: 10px 0;
display: none;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.site-base .sponsors-content .overlay.single-image {
padding: 0; }
.site-base .sponsors-content .overlay.single-image .container,
.site-base .sponsors-content .overlay.single-image p {
padding: 0;
margin: 0;
max-width: none; }
.site-base .sponsors-content .overlay.current {
display: block; }
.site-base .sponsors-content .overlay {
position: absolute;
display: block;
top: 0;
left: 100%;
width: 100%;
height: 100%;
padding-top: 5%;
padding-bottom: 4%;
font-size: 1.2em; }
.site-base .sponsors-content .overlay.current {
left: 0; }
.site-base .sponsors-content .qmusic_be-partner-87 .close {
display: none; }
.site-base .sponsors-content .close {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
color: #3d3d3d;
background: white;
width: 1.8em;
line-height: 1.8em;
text-align: center;
border-radius: 100%;
z-index: 1; }
.site-base .sponsors-content .close.white-background {
color: #ed3624; }
.site-base .geluid {
background: #ed3624;
padding: 10px 0;
margin: 0;
color: white; }
.site-base .geluid:before, .site-base .geluid:after {
content: " ";
display: table; }
.site-base .geluid:after {
clear: both; }
.site-base .geluid {
*zoom: 1; }
.site-base .geluid h2 {
color: white;
margin: 0.3em 0; }
.site-base .geluid h2 strong {
color: #F9F3C5; }
.site-base .geluid ul.guesses {
padding: 0px; }
@media screen and (min-width: 900px) {
.site-base .geluid ul.guesses {
max-height: 400px;
overflow: auto; } }
.site-base .geluid li.guess {
list-style: none;
background-color: white;
padding: 0.4em;
margin-bottom: 0.6em;
border-radius: 5px; }
.site-base .geluid li.guess .answer {
color: #ed3624;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
font-weight: bold;
font-size: 1.6em;
text-transform: uppercase; }
.site-base .geluid li.guess .by {
line-height: 1;
color: #919191;
font-size: 0.8em; }
.site-base .broadcasted-contenders-wrapper {
background: #7CBAF7;
padding: 10px 0;
margin: 0; }
.site-base .broadcasted-contenders-wrapper:before, .site-base .broadcasted-contenders-wrapper:after {
content: " ";
display: table; }
.site-base .broadcasted-contenders-wrapper:after {
clear: both; }
.site-base .broadcasted-contenders-wrapper {
*zoom: 1; }
.site-base .broadcasted-contenders-wrapper h2 {
color: white;
margin: 0.3em 0; }
.site-base .broadcasted-contenders-wrapper h2 strong {
color: #ed3624; }
.site-base .broadcasted-contenders-wrapper ul.broadcasted-contenders {
padding: 0px;
max-height: 400px;
overflow: auto; }
.site-base .broadcasted-contenders-wrapper ul.broadcasted-contenders.hidden {
display: none; }
.site-base .broadcasted-contenders-wrapper li.broadcasted-contender {
list-style: none;
background-color: white;
padding: 0.25em 0.4em;
margin-bottom: 0.6em; }
.site-base .broadcasted-contenders-wrapper li.broadcasted-contender.already-broadcasted {
background-color: #ed3624; }
.site-base .broadcasted-contenders-wrapper li.broadcasted-contender.already-broadcasted .name {
color: white; }
.site-base .broadcasted-contenders-wrapper li.broadcasted-contender .name {
color: #ed3624;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
font-weight: bold;
font-size: 1.6em; }
.site-base .broadcasted-contenders-wrapper li.broadcasted-contender .remark {
margin-top: 1em; }
.site-base .user-login-placeholder {
background: #f5f5f5;
position: relative;
padding: 10px;
margin: 0 0 10px 0; }
.site-base .user-login-placeholder:before, .site-base .user-login-placeholder:after {
content: " ";
display: table; }
.site-base .user-login-placeholder:after {
clear: both; }
.site-base .user-login-placeholder {
*zoom: 1; }
.site-base .user-login-placeholder .button {
float: right; }
@media screen and (min-width: 700px) {
.site-base .btn-share.mobile[data-platform=whatsapp], .site-base .button.mobile[data-platform=whatsapp] {
display: none !important; }
.site-base .btn-share.desktop[data-platform=whatsapp] {
display: inline !important; }
.site-base .button.desktop[data-platform=whatsapp] {
display: block !important; }
.site-base .article-header .big-play-button {
font-size: 4em; }
.site-base .news-header .news-title {
max-width: 1000px;
margin: 2% auto; }
.site-base .article-title {
padding-right: 200px; }
.site-base .social-share {
font-size: 0.8em; }
.site-base .sponsors-list {
position: absolute;
right: 0;
bottom: 0;
padding: 0;
overflow: visible;
background: transparent;
text-align: right;
z-index: 2; } }
@media screen and (min-width: 900px) {
.site-base .article-header .big-play-button {
font-size: 5em; } }
@media screen and (min-width: 1000px) {
.site-base .sponsors-list .handle.qmusic_be-partner-87 img {
height: 75px; }
.site-base .sponsors-list .handle img {
height: 60px; } }
@media screen and (min-width: 1200px) {
.site-base .sponsors-list .handle.qmusic_be-partner-87 img {
height: 100px; }
.site-base .sponsors-list .handle img {
height: 75px; } }
.site-base footer.live_blog {
display: none;
border-bottom: none; }
.site-base article.live_blog {
padding-right: 10px;
border-bottom: 1px solid lightgray; }
.site-base article.live_blog:last-child {
border-bottom: none; }
.site-base article.live_blog:not(.main) {
margin-top: 2em; }
.site-base article.live_blog.main {
border-bottom: none; }
.site-base article.live_blog.main .social-share {
display: none; }
.site-base article.live_blog .social-share {
position: initial;
float: right;
margin: 5px 0; }
.site-base article.live_blog .timeago {
font-size: 15px; }
.site-base article.live_blog .timeago:not(.recent) {
color: gray; }
.site-base article.live_blog .timeago.recent {
font-weight: bold; }
.site-base article.live_blog h3 {
margin-top: 0px;
color: #ed3624;
text-transform: uppercase;
font-size: 2em;
line-height: 1em; }
.site-base article.live_blog .article-title {
padding: 0;
margin-top: 0px; }
.site-base article.live_blog .recent-tag {
letter-spacing: -0.03em;
background-color: red;
padding: 4px 8px;
font-family: 'Cervo';
color: white;
border-radius: 7px;
font-size: 14px; }
.site-base article.live_blog .recent-tag-wrapper {
display: inline; }
.site-base .time-header {
margin-bottom: 0.6em; }
@media (min-width: 700px) {
.site-base article.live_blog {
padding-left: 120px !important; }
.site-base article.live_blog .time-header {
position: absolute;
left: 0;
width: 120px;
display: table;
border-spacing: 0px 5px;
top: 0.2em; }
.site-base article.live_blog .time-header .timeago {
display: table-header-group; }
.site-base article.live_blog .time-header .recent-tag-wrapper {
display: table-footer-group; } }
.site-base .grid-item.live-blog {
text-transform: uppercase;
font-weight: 600; }
.site-base .grid-item.live-blog time {
display: block;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 0.1em; }
.site-base .grid-item.live-blog .highlight {
line-height: 0.9em;
font-size: 1.8em;
color: #3d3d3d; }
.site-base .grid-item.live-blog.odd .inner {
background-color: #ed3624; }
.site-base .grid-item.live-blog.odd .highlight {
color: #F9F3C5; }
.site-base .grid-item.live-blog .inner {
background-color: #7CBAF7;
padding: 10%; }
.site-base .grid-item.live-blog.title-tile {
text-align: center;
font-size: 6.3em;
line-height: 0.7em; }
.site-base .grid-item.live-blog.title-tile .highlight {
font-size: 1em;
line-height: 0.9em;
color: #ed3624; }
.site-base .grid-item.live-blog.title-tile .inner {
padding: 8%; }
.site-base .c-live-blog__footer {
text-align: center;
padding: 2em 0;
display: none; }
html.app-only .site-base .c-live-blog__footer {
display: block; }
.site-base .webform {
background: #ed3624;
padding: 10px 10px 20px;
margin: 0;
border-radius: 10px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center; }
.site-base .webform:before, .site-base .webform:after {
content: " ";
display: table; }
.site-base .webform:after {
clear: both; }
.site-base .webform {
*zoom: 1; }
.site-base .webform .container {
width: 100%; }
.site-base .webform h2 {
font-size: 2.5rem;
color: #ffffff;
text-align: center;
margin: 0.5em 0 0.2em; }
.site-base .webform h2.subtitle {
margin-top: 1em;
text-align: left; }
.site-base .webform.success-message {
display: block;
color: #ffffff;
font-size: 1.6em;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
text-align: center;
text-transform: uppercase; }
.site-base .webform ul.error {
list-style: none;
background-color: #ed3624;
color: #ffffff;
padding: 8px 12px;
font-size: 1.1em; }
.site-base .webform a {
color: #ffffff;
text-decoration: underline; }
.site-base .webform textarea {
height: initial; }
.site-base .form-item {
margin-bottom: 10px;
position: relative;
clear: both; }
.site-base .form-item .form-group {
position: relative; }
.site-base .form-item .jquery-validate-error {
color: #ffffff;
padding: 3px 10px; }
.site-base label {
font-size: 1.4em;
line-height: 1.2em;
margin-bottom: 5px;
color: #ffffff; }
.file .site-base label, .compact .site-base label {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
text-transform: uppercase;
gap: 3px;
overflow: hidden;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.site-base label abbr, .site-base .checkable-label abbr {
text-decoration: none; }
.site-base input[type="text"],
.site-base input[type="email"],
.site-base input[type="password"],
.site-base input[type="number"],
.site-base input[type="date"],
.site-base input[type="time"],
.site-base textarea,
.site-base select {
display: block;
background: #ffffff;
width: 100%;
border-radius: 0;
border: 0;
outline: 0;
height: 40px;
padding: 0 10px;
border-radius: 5px;
font-size: 1.2em;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.site-base input[type="file"] {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 10px 10px 10px;
border-radius: 5px;
border: 0;
outline: 0;
height: auto;
border: 1px dashed #ffffff;
margin: 10px 0;
color: #ffffff;
text-align: center;
font-size: 1em;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.site-base .checkable-group, .site-base .consent {
height: auto;
z-index: 1; }
.site-base .checkable-group label, .site-base .consent label {
font-size: 1em;
margin: 0; }
.site-base .checkable-group .checkable-label, .site-base .consent .checkable-label {
font-size: 1.4em;
line-height: 1.2em;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
text-transform: uppercase;
display: block;
float: left;
padding: 0;
color: #ffffff; }
.site-base .checkable-group .checkable-label .required,
.site-base .checkable-group .checkable-label [title="required"], .site-base .consent .checkable-label .required,
.site-base .consent .checkable-label [title="required"] {
color: #ffffff;
float: right;
margin-left: 0.2em; }
.site-base .checkable-group .webform-checkable, .site-base .consent .webform-checkable {
display: block;
clear: both;
position: relative;
padding: 0;
background: none;
margin-top: 2px; }
.site-base .checkable-group .webform-checkable input, .site-base .consent .webform-checkable input {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 30px;
height: 30px;
height: 100%;
opacity: 0; }
.site-base .checkable-group .webform-checkable input + label, .site-base .consent .webform-checkable input + label {
display: block;
min-height: 30px;
padding: 10px 10px 10px 40px;
color: #ffffff; }
.site-base .checkable-group .webform-checkable input + label:after, .site-base .consent .webform-checkable input + label:after {
content: " ";
position: absolute;
z-index: 2;
width: 30px;
height: 30px;
top: 50%;
left: 15px;
margin: -15px;
color: #ffffff;
font-family: "q-icons";
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 30px;
text-align: center;
content: "\e895"; }
.site-base .checkable-group .webform-checkable input[type="radio"] + label:after, .site-base .consent .webform-checkable input[type="radio"] + label:after {
content: "\e894"; }
.site-base .checkable-group .webform-checkable input:checked + label:before, .site-base .consent .webform-checkable input:checked + label:before {
background: #ffffff; }
.site-base .checkable-group .webform-checkable input:checked + label:after, .site-base .consent .webform-checkable input:checked + label:after {
content: "\e896"; }
.site-base .checkable-group .webform-checkable input[type="radio"]:checked + label:after, .site-base .consent .webform-checkable input[type="radio"]:checked + label:after {
content: "\e897"; }
.site-base .checkable-group .webform-checkable input:focus + label, .site-base .consent .webform-checkable input:focus + label {
color: #ffffff; }
.site-base .search-box-and-button,
.site-base .form-item .search-box-and-button {
display: block;
margin-right: 40px;
position: relative; }
.site-base .search-box-and-button input[type="text"],
.site-base .search-box-and-button button,
.site-base .form-item .search-box-and-button input[type="text"],
.site-base .form-item .search-box-and-button button {
height: 40px;
width: auto;
font-size: 1.2em;
padding: 0 10px; }
.site-base .search-box-and-button input[type="text"],
.site-base .form-item .search-box-and-button input[type="text"] {
display: block;
width: 100%;
border: 1px solid #3d3d3d; }
.site-base .search-box-and-button button,
.site-base .search-box-and-button [type="button"],
.site-base .search-box-and-button [type="submit"],
.site-base .form-item .search-box-and-button button,
.site-base .form-item .search-box-and-button [type="button"],
.site-base .form-item .search-box-and-button [type="submit"] {
background: #3d3d3d;
line-height: 40px;
width: 40px;
position: absolute;
right: -40px;
top: 0; }
.site-base .search-box-and-button .loader,
.site-base .form-item .search-box-and-button .loader {
position: absolute;
left: 0;
top: 0;
background: #3d3d3d;
color: #ffffff; }
@media screen and (min-width: 700px) {
.site-base .form-item {
margin-bottom: 20px; }
.site-base .form-item.half {
width: 50%;
float: left;
clear: none; }
.site-base .form-item.half:nth-of-type(odd) {
clear: left; }
.site-base .form-item.half:nth-of-type(odd) .form-group, .site-base .form-item.half:nth-of-type(odd):before {
margin-right: 10px; }
.site-base .form-item.half:nth-of-type(even) .form-group,
.site-base .form-item.half:nth-of-type(even) .checkable-label, .site-base .form-item.half:nth-of-type(even):before {
margin-left: 10px; }
.site-base .form-item.sinterklaas .sinterklaas {
display: flex;
gap: 10px;
margin-bottom: 10px; }
.site-base .form-item.sinterklaas .sinterklaas .gift,
.site-base .form-item.sinterklaas .sinterklaas .website {
flex: 2; }
.site-base .form-item.sinterklaas .sinterklaas .price {
flex: 1;
border-right: none; }
.site-base .form-item.sinterklaas .error {
float: left;
color: #ffffff; }
.site-base .form-item.sinterklaas .total-row {
text-align: right;
color: #ffffff;
border-top: 1px solid #ffffff;
padding-top: 10px;
margin-left: 84%; }
.site-base .form-item.sinterklaas .total-row .error {
float: none; } }
@keyframes image-radio-pop {
0% {
transform: scale(1); }
40% {
transform: scale(1.12); }
70% {
transform: scale(1.02); }
100% {
transform: scale(1.05); } }
.site-base .o-form__imageRadio {
--image-radio-accent: #ed3624;
--image-radio-bg: #ffffff;
--image-radio-text-color: #ffffff;
--image-radio-columns: 5;
--image-radio-font: Cervo, Helvetica, Arial, sans-serif;
--image-radio-gap: 12px;
display: grid;
grid-template-columns: repeat(var(--image-radio-columns), 1fr);
grid-gap: var(--image-radio-gap);
grid-auto-rows: min-content;
width: 100%;
clear: both;
padding-top: 1rem; }
@media screen and (max-width: 900px) {
.site-base .o-form__imageRadio {
--image-radio-columns: 3; } }
@media screen and (max-width: 700px) {
.site-base .o-form__imageRadio {
--image-radio-columns: 2; } }
.site-base .o-form__imageRadio-wrapper {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
border: 4px solid transparent;
transition: opacity 0.2s ease, border-color 0.2s ease; }
.site-base .o-form__imageRadio-wrapper input[type="radio"],
.site-base .o-form__imageRadio-wrapper input[type="checkbox"] {
position: absolute;
left: -90000px; }
.site-base .o-form__imageRadio-wrapper input:checked + label .o-form__imageRadio-label__checkbox {
opacity: 1;
background: var(--image-radio-accent); }
.site-base .o-form__imageRadio-wrapper.selected, .site-base .o-form__imageRadio-wrapper:has(input:checked) {
border-color: var(--image-radio-accent);
animation: image-radio-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: scale(1.05);
opacity: 1; }
.site-base .o-form__imageRadio-label {
position: relative;
display: block;
cursor: pointer;
aspect-ratio: 1;
text-transform: uppercase;
background: var(--image-radio-bg); }
.site-base .o-form__imageRadio-label:hover {
opacity: 0.9; }
.site-base .o-form__imageRadio-label__image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end; }
.site-base .o-form__imageRadio-label__text {
display: block;
width: 100%;
padding: 2rem 0.5rem 0.5rem;
color: var(--image-radio-text-color);
font-family: var(--image-radio-font);
font-size: 16px;
line-height: 1.2;
text-align: center;
text-wrap: balance;
background: linear-gradient(to top, rgba(43, 43, 43, 0.7) 0%, rgba(43, 43, 43, 0) 100%); }
.site-base .o-form__imageRadio-label__checkbox {
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--image-radio-accent);
background: rgba(255, 255, 255, 0.6); }
.site-base .o-form__footer {
display: flex;
justify-content: right; }
.site-base .o-form__footer .c-button {
padding: 24px 30px;
font-size: 1.3em; }
.site-base .o-form__imageRadio:has(input:checked) .o-form__imageRadio-wrapper {
opacity: 0.5; }
.site-base .grid {
font-size: 1em;
font-size: 4vw; }
.site-base .grid:before, .site-base .grid:after {
content: " ";
display: table; }
.site-base .grid:after {
clear: both; }
.site-base .grid {
*zoom: 1; }
.site-base .aspect {
position: relative;
padding-top: 56.25%; }
.site-base .grid-item {
display: block;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
font-size: 1.4em;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
-ms-transition: opacity 0.3s, -ms-transform 0.3s;
-o-transition: opacity 0.3s, -o-transform 0.3s; }
.site-base .grid-item.hidden {
display: none; }
.site-base .grid-item.fadeout {
opacity: 0;
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px); }
.site-base .grid-item.animate-in {
animation: grid-item-in 1 0.3s; }
.site-base .grid-item .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ed3624;
color: white;
text-decoration: none;
overflow: hidden; }
.site-base .grid-item .inner,
.site-base .grid-item .image {
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
.site-base .grid-item .image {
width: 37.5%;
height: 100%;
float: left;
position: relative; }
.site-base .grid-item .background {
position: absolute;
left: 0;
right: 0;
top: 0; }
.site-base .grid-item .background img {
display: block;
width: 100%; }
.site-base .grid-item .background .background-icon {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
font-size: 100px; }
.site-base .grid-item .content {
position: relative;
padding: 0.3em;
height: 100%; }
.site-base .grid-item .image ~ .content {
margin-left: 37.5%;
text-align: right; }
.site-base .grid-item:nth-child(odd) .image {
float: right; }
.site-base .grid-item:nth-child(odd) .image ~ .content {
margin-left: 0;
margin-right: 37.5%;
text-align: left; }
.site-base .grid-item .title-bar {
font-weight: 600;
display: block;
border-bottom: 1px dashed white;
padding: 0 10px 0.03em 10px;
margin: 0 -10px 0.15em -10px; }
.site-base .grid-item .title-bar {
text-transform: uppercase; }
.site-base .grid-item .author-bar {
display: block;
font-weight: 600;
font-size: 0.85em;
color: black;
text-transform: uppercase;
height: 2.5em;
line-height: 1em; }
.site-base .grid-item .author-bar .profile-picture {
width: 1.9em;
height: auto;
float: left;
margin: 0.1em 0.35em 0 0; }
.site-base .grid-item .author-bar .fullname {
color: #ed3624;
display: block; }
.site-base .grid-item .author-bar .username {
color: #3d3d3d;
display: block; }
.site-base .grid-item .subtitle {
display: block;
font-family: "Cervo", Helvetica, Arial, sans-serif;
text-transform: uppercase; }
.site-base .grid-item .icon {
position: absolute;
bottom: 0.3em;
right: 0.3em;
background: #ed3624;
color: #3d3d3d;
font-size: 0.8em;
font-weight: 600; }
.site-base .grid-item .icon:before {
float: right;
color: white;
font-size: 1.4em;
margin: -0.25em 0 0 0.2em; }
.site-base .grid-item .body-center {
white-space: nowrap; }
.site-base .grid-item .body-center:after {
content: ' ';
height: 59%;
display: inline-block;
vertical-align: middle; }
.site-base .grid-item .body {
display: inline-block;
vertical-align: middle;
white-space: normal;
font-size: 1.2em; }
.site-base .grid-item .published-at {
display: block;
font-size: 0.6em;
letter-spacing: default; }
.site-base .grid-item .overlay-title {
position: absolute;
bottom: -50px;
left: -50px;
right: -50px;
padding: 1em 60px 60px;
text-transform: uppercase;
background: black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );
/* IE6-9 */ }
.site-base .grid-item .overlay-title .title-wrap {
margin-right: 3em;
display: block;
font-size: 0.9em; }
.site-base .grid-item .overlay-title .program {
position: absolute;
margin: 0 0 0 60px;
top: 0.3em;
left: 0;
font-size: 0.6em;
padding: 0.12em 0.4em 0;
background: #7CBAF7; }
.site-base .grid-item .overlay-title .program.red {
background: #ed3624; }
.site-base .grid-item .overlay-title .program.yellow {
background: #F9F3C5; }
.site-base .grid-item .overlay-title .program.purple {
background: #FC68B6; }
.site-base .grid-item .overlay-title .program.green {
background: #A8D832; }
.site-base .grid-item .overlay-title .program.blue {
background: #7CBAF7; }
.site-base .grid-item .overlay-title .program.white {
background: #ffffff; }
.site-base .grid-item .overlay-title .program.carbon {
background: #3d3d3d; }
.site-base .grid-item .overlay-title .title-icon {
width: 0.9em;
float: left;
text-align: right;
margin-right: 0.2em;
line-height: 0.95em; }
.site-base .grid-item .overlay-title .title-icon:before {
font-size: 0.75em; }
.site-base .grid-item .overlay-title .title-icon ~ .program {
left: 2em; }
.site-base .grid-item .overlay-title .title-icon ~ .title-wrap {
margin-left: 1.33em; }
.site-base .grid-item .overlay-title .date-wrap {
position: absolute;
bottom: 60px;
right: 60px;
padding-right: 0.25em; }
.site-base .grid-item .overlay-title .article-date {
font-size: 0.6em;
color: inherit; }
.site-base .grid-item .time-clock {
top: 0.05em;
background-image: url(/assets/clock-empty-white-8ba45d14467229b00fa8736ca98d1a6d56e3312a2bc2b86ef5eb6f554074cc46.svg); }
.site-base .grid-item .time-clock .clock-hour {
background-image: url(/assets/clock-hour-white-ed2c9bb3f8c10ab76e12b658e432d8cc71a3c183d742a5872e8c72304188a6cb.svg); }
.site-base .grid-item .time-clock .clock-minute {
background-image: url(/assets/clock-minute-white-50f9b8ec05732a6ea646c365f1496e64c112ad7b9054ed0348ba3ddb40b2e715.svg); }
.homepage-header .site-base .inner,
.homepage-header .site-base .icon {
background-color: #F9F3C5; }
.site-base .instagram-tile .image,
.site-base .edition-track-tile .image {
width: 56.25%; }
.site-base .instagram-tile .image ~ .content,
.site-base .edition-track-tile .image ~ .content {
margin-left: 56.25%; }
.site-base .instagram-tile:nth-child(odd) .image ~ .content,
.site-base .edition-track-tile:nth-child(odd) .image ~ .content {
margin-right: 56.25%; }
.site-base .title-tile .inner,
.site-base .date-tile .inner {
background: #7CBAF7; }
.site-base .title-tile .title,
.site-base .date-tile .title {
margin: 0;
position: absolute;
width: 50%;
left: 50%;
top: 50%;
text-align: center;
font-weight: 600;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.site-base .title-tile .title.wide,
.site-base .date-tile .title.wide {
width: 80%; }
.site-base .title-tile .title span:nth-child(even),
.site-base .date-tile .title span:nth-child(even) {
color: #ed3624; }
.site-base .date-tile .inner {
background: #ed3624; }
.site-base .mgp-tile .inner {
background: #ed3624; }
.site-base .mgp-tile .mgp-title {
margin: 0;
font-size: 1em;
position: absolute;
width: 56.25%;
top: 100%;
left: 3%;
text-align: center;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top; }
.site-base .mgp-tile .song {
cursor: pointer;
float: left;
width: 40%;
margin: 4% 0 0 4%; }
.site-base .mgp-tile .song:first-of-type {
margin-left: 12%; }
.site-base .mgp-tile .song .cover {
position: relative;
padding-top: 100%; }
.site-base .mgp-tile .song .cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.site-base .mgp-tile .song .artist {
display: block;
font-weight: bold;
font-size: 0.6em; }
.site-base .mgp-tile .song .track {
display: block;
font-size: 0.5em; }
.site-base .mgp-tile .mgp-button {
position: relative;
line-height: 1.4em;
font-size: 0.9em;
text-align: center;
background: #ffffff; }
.site-base .mgp-tile .mgp-button .text {
position: relative;
color: #3d3d3d;
z-index: 2; }
.site-base .mgp-tile .mgp-button .text:before, .site-base .mgp-tile .mgp-button .text:after {
content: '\0000a0'; }
.site-base .mgp-tile .mgp-button .progress {
display: block;
position: absolute;
background: #F9F3C5;
left: 0;
top: 0;
height: 100%;
z-index: 1;
-moz-transition: linear width 0.2s;
-ms-transition: linear width 0.2s;
-o-transition: linear width 0.2s;
-webkit-transition: linear width 0.2s;
transition: linear width 0.2s; }
.site-base .mgp-tile.voted .mgp-button, .site-base .mgp-tile.finished .mgp-button {
cursor: auto; }
.site-base .mgp-tile.voted .cover, .site-base .mgp-tile.finished .cover {
opacity: 0.8; }
.site-base .mgp-tile.voted .song.voted .cover, .site-base .mgp-tile.finished .song.voted .cover {
opacity: 1; }
.site-base .mgp-tile.finished .cover {
opacity: 0.6; }
.site-base .mgp-tile.finished .song.winner .cover {
opacity: 1; }
.site-base .grid-item.edition-track-tile .image ~ .content {
text-align: center; }
.site-base .edition-track-tile .content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
.site-base .edition-track-tile .title-bar,
.site-base .edition-track-tile .subtitle {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch; }
.site-base .edition-track-tile .hitlist-position {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
min-height: 5em;
position: relative; }
.site-base .edition-track-tile .hitlist-position .current {
display: block;
font-size: 4em;
font-weight: bold;
position: absolute;
top: 50%;
line-height: 1em;
margin-top: -0.58em;
left: 0;
width: 100%; }
.site-base .edition-track-tile .hitlist-position .previous {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
font-size: 0.8em;
color: #570e07;
line-height: 0.9em;
text-transform: uppercase; }
.site-base .edition-track-tile .hitlist-position .previous:before {
color: white;
font-size: 0.7em;
display: inline-block;
vertical-align: bottom;
margin: -0.08em 0.2em 0 0; }
.site-base .grid-item .cover-buttons {
position: absolute;
bottom: 1em;
width: 100%;
text-align: center; }
.site-base .grid-item .cover-buttons a {
position: relative;
background: #3d3d3d;
border: 0.1em solid white;
color: white;
border-radius: 100%;
width: 2em;
height: 2em;
line-height: 1.8em;
display: inline-block;
vertical-align: middle;
overflow: hidden; }
.site-base .grid-item .cover-buttons a .progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #636363;
width: 0;
z-index: 1;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear; }
.site-base .grid-item .cover-buttons a:before {
position: relative;
z-index: 2; }
.site-base .grid-item .cover-buttons a.play {
position: relative;
padding-left: 0.1em; }
.site-base .grid-item .cover-buttons a.play.playing:before {
background: white;
position: absolute;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
border-radius: 13%;
text-indent: -999px;
overflow: hidden; }
.site-base .grid-item .cover-buttons a.active {
background: #ed3624; }
.site-base [data-role="grid-show-more"] {
display: block;
padding-top: 1em;
clear: both;
font-family: "Cervo", Helvetica, Arial, sans-serif;
letter-spacing: -0.03em;
text-align: right;
text-transform: uppercase;
text-decoration: none;
color: black; }
.site-base [data-role="grid-show-more"] .qi-arrow-down-alt {
color: #ed3624; }
@media screen and (max-width: 599px) {
.site-base .container .grid-item .inner {
margin: 2px 0; } }
@media screen and (min-width: 600px) {
.site-base #visual-radio-preview {
display: block; }
.site-base .grid {
padding: 2px;
font-size: 2vw; }
.site-base .homepage-header {
padding-bottom: 0; }
.site-base .homepage-grid {
padding-top: 0; }
.site-base .grid-item {
width: 50%;
float: left; }
.site-base .grid-item .inner {
margin: 2px; }
.site-base .grid-item .background {
margin: -2px;
-moz-transition: transform 0.3s;
-ms-transition: transform 0.3s;
-o-transition: transform 0.3s;
-webkit-transition: transform 0.3s;
transition: transform 0.3s; }
.site-base .grid-item .overlay-title {
-moz-transition: transform 0.3s;
-ms-transition: transform 0.3s;
-o-transition: transform 0.3s;
-webkit-transition: transform 0.3s;
transition: transform 0.3s; }
.site-base .grid-item:hover .background {
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05); }
.site-base .grid-item.edition-track-tile .image {
float: right; }
.site-base .grid-item.edition-track-tile .image ~ .content {
margin-left: 0;
margin-right: 56.25%; } }
@media screen and (min-width: 900px) {
.site-base .grid {
font-size: 1.3vw; }
.site-base .container .grid {
font-size: 1em; }
.site-base .grid-item {
width: 33.3%;
font-size: 1.5em; }
.site-base .homepage-header .grid-item {
width: 50%;
font-size: 2em; }
.site-base .grid-item .cover-buttons {
font-size: 1.1em; }
.site-base .grid-item .cover-buttons a.rate {
font-size: 0.8em; }
.site-base .grid-item .cover-buttons a.play {
font-size: 1em;
padding-left: 0.1em;
height: 2.2em;
width: 2.2em;
line-height: 2.1em; }
.site-base .grid-item:first-child .cover-buttons {
font-size: 1em; } }
@media screen and (min-width: 900px) and (max-width: 1499px) {
.site-base .homepage-grid .grid-item:nth-of-type(11n+1),
.site-base .homepage-grid .grid-item:nth-of-type(11n+4),
.site-base .homepage-grid .grid-item:nth-of-type(11n+6),
.site-base .homepage-grid .grid-item:nth-of-type(11n+7),
.site-base .homepage-grid .grid-item:nth-of-type(11n+9),
.site-base .programs-grid .grid-item:nth-of-type(11n+1),
.site-base .programs-grid .grid-item:nth-of-type(11n+4),
.site-base .programs-grid .grid-item:nth-of-type(11n+6),
.site-base .programs-grid .grid-item:nth-of-type(11n+7),
.site-base .programs-grid .grid-item:nth-of-type(11n+9) {
clear: left; }
.site-base .homepage-grid .grid-item:last-child,
.site-base .programs-grid .grid-item:last-child {
clear: none; }
.site-base .homepage-grid .grid-item:nth-of-type(11n+8) .aspect,
.site-base .programs-grid .grid-item:nth-of-type(11n+8) .aspect {
margin-top: -28.125%; }
.site-base .homepage-grid .grid-item:nth-of-type(11n+1),
.site-base .homepage-grid .grid-item:nth-of-type(11n+8),
.site-base .programs-grid .grid-item:nth-of-type(11n+1),
.site-base .programs-grid .grid-item:nth-of-type(11n+8) {
width: 66.6%;
font-size: 3em; }
.site-base .homepage-grid .grid-item:nth-of-type(11n+4),
.site-base .homepage-grid .grid-item:nth-of-type(11n+5),
.site-base .programs-grid .grid-item:nth-of-type(11n+4),
.site-base .programs-grid .grid-item:nth-of-type(11n+5) {
width: 50%;
font-size: 2em; }
.site-base .hitlist-grid .grid-item:first-child,
.site-base .news-grid .grid-item:first-child,
.site-base .events-grid .grid-item:first-child {
width: 66.6%;
font-size: 3em; }
.site-base .hitlist-grid .grid-item:nth-of-type(4),
.site-base .news-grid .grid-item:nth-of-type(4),
.site-base .events-grid .grid-item:nth-of-type(4) {
clear: left; }
.site-base .hitlist-grid .grid-item.hidden ~ .grid-item:nth-child(4),
.site-base .news-grid .grid-item.hidden ~ .grid-item:nth-child(4),
.site-base .events-grid .grid-item.hidden ~ .grid-item:nth-child(4) {
clear: none; }
.site-base .hitlist-grid.filtered .grid-item,
.site-base .news-grid.filtered .grid-item,
.site-base .events-grid.filtered .grid-item {
width: 33.3%;
font-size: 1.5em; } }
@media screen and (min-width: 1500px) {
.site-base .homepage-grid .grid-item:nth-of-type(16n+1),
.site-base .homepage-grid .grid-item:nth-of-type(16n+4),
.site-base .homepage-grid .grid-item:nth-of-type(16n+9),
.site-base .homepage-grid .grid-item:nth-of-type(16n+12),
.site-base .homepage-grid .grid-item:nth-of-type(16n+14),
.site-base .programs-grid .grid-item:nth-of-type(16n+1),
.site-base .programs-grid .grid-item:nth-of-type(16n+4),
.site-base .programs-grid .grid-item:nth-of-type(16n+9),
.site-base .programs-grid .grid-item:nth-of-type(16n+12),
.site-base .programs-grid .grid-item:nth-of-type(16n+14) {
clear: left; }
.site-base .homepage-grid .grid-item:last-child,
.site-base .programs-grid .grid-item:last-child {
clear: none; }
.site-base .homepage-grid .grid-item:nth-of-type(16n+16) .aspect,
.site-base .programs-grid .grid-item:nth-of-type(16n+16) .aspect {
margin-top: -28.125%; }
.site-base .homepage-grid .grid-item:nth-of-type(16n+4),
.site-base .homepage-grid .grid-item:nth-of-type(16n+16),
.site-base .programs-grid .grid-item:nth-of-type(16n+4),
.site-base .programs-grid .grid-item:nth-of-type(16n+16) {
width: 50%;
font-size: 2.25em; }
.site-base .homepage-grid .grid-item:nth-of-type(16n+5),
.site-base .homepage-grid .grid-item:nth-of-type(16n+6),
.site-base .homepage-grid .grid-item:nth-of-type(16n+7),
.site-base .homepage-grid .grid-item:nth-of-type(16n+8),
.site-base .homepage-grid .grid-item:nth-of-type(16n+12),
.site-base .homepage-grid .grid-item:nth-of-type(16n+13),
.site-base .homepage-grid .grid-item:nth-of-type(16n+14),
.site-base .homepage-grid .grid-item:nth-of-type(16n+15),
.site-base .programs-grid .grid-item:nth-of-type(16n+5),
.site-base .programs-grid .grid-item:nth-of-type(16n+6),
.site-base .programs-grid .grid-item:nth-of-type(16n+7),
.site-base .programs-grid .grid-item:nth-of-type(16n+8),
.site-base .programs-grid .grid-item:nth-of-type(16n+12),
.site-base .programs-grid .grid-item:nth-of-type(16n+13),
.site-base .programs-grid .grid-item:nth-of-type(16n+14),
.site-base .programs-grid .grid-item:nth-of-type(16n+15) {
width: 25%;
font-size: 1.1em; }
.site-base .hitlist-grid .grid-item,
.site-base .news-grid .grid-item,
.site-base .events-grid .grid-item {
width: 25%;
font-size: 1.1em; }
.site-base .hitlist-grid .grid-item:first-child,
.site-base .news-grid .grid-item:first-child,
.site-base .events-grid .grid-item:first-child {
width: 50%;
font-size: 2.25em; }
.site-base .hitlist-grid .grid-item:nth-of-type(6),
.site-base .news-grid .grid-item:nth-of-type(6),
.site-base .events-grid .grid-item:nth-of-type(6) {
clear: left; }
.site-base .hitlist-grid .grid-item.hidden ~ .grid-item:nth-child(6),
.site-base .news-grid .grid-item.hidden ~ .grid-item:nth-child(6),
.site-base .events-grid .grid-item.hidden ~ .grid-item:nth-child(6) {
clear: none; }
.site-base .hitlist-grid.filtered .grid-item,
.site-base .news-grid.filtered .grid-item,
.site-base .events-grid.filtered .grid-item {
width: 25%;
font-size: 1.1em; } }
.site-base * {
margin: 0;
padding: 0;
border: 0; }
.site-base *, .site-base *:before, .site-base *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behaviour: url(/../libs/boxsizing.htc); }
.site-base article, .site-base aside, .site-base details, .site-base figcaption, .site-base figure,
.site-base footer, .site-base header, .site-base hgroup, .site-base menu, .site-base nav, .site-base section {
display: block; }
.site-base iframe {
border: 0;
margin: 0;
padding: 0; }
.site-base h1 + .site-base h1, .site-base h2 + .site-base h1, .site-base h3 + .site-base h1, .site-base h4 + .site-base h1, .site-base h5 + .site-base h1, .site-base h6 + .site-base h1, .site-base h1 + .site-base h2, .site-base h2 + .site-base h2, .site-base h3 + .site-base h2, .site-base h4 + .site-base h2, .site-base h5 + .site-base h2, .site-base h6 + .site-base h2, .site-base h1 + .site-base h3, .site-base h2 + .site-base h3, .site-base h3 + .site-base h3, .site-base h4 + .site-base h3, .site-base h5 + .site-base h3, .site-base h6 + .site-base h3, .site-base h1 + .site-base h4, .site-base h2 + .site-base h4, .site-base h3 + .site-base h4, .site-base h4 + .site-base h4, .site-base h5 + .site-base h4, .site-base h6 + .site-base h4, .site-base h1 + .site-base h5, .site-base h2 + .site-base h5, .site-base h3 + .site-base h5, .site-base h4 + .site-base h5, .site-base h5 + .site-base h5, .site-base h6 + .site-base h5, .site-base h1 + .site-base h6, .site-base h2 + .site-base h6, .site-base h3 + .site-base h6, .site-base h4 + .site-base h6, .site-base h5 + .site-base h6, .site-base h6 + .site-base h6 {
margin-top: 0; }
.site-base h2 {
font-size: 2em;
text-transform: uppercase; }
.site-base h3 {
font-size: 1.7em; }
.site-base h4 {
font-size: 1.3em; }
.site-base h5 {
font-size: 1em; }
.site-base h6 {
font-size: 0.9em; }
.site-base p {
font-size: 1em;
margin-bottom: 1em;
line-height: 1.6em; }
.site-base hr {
background: #e0e0e0;
height: 1px;
margin: 2em 1em; }
.site-base ul, .site-base ol {
margin: 1em 0;
padding: 0 0 0 1.4em;
line-height: 1.6em; }
.site-base li ul, .site-base li ol {
margin: 0; }
.site-base button::-moz-focus-inner {
border: 0; }
.site-base a img {
border: none;
outline: none; }
.site-base img {
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto; }
.site-base svg:not(:root) {
overflow: hidden; }
.site-base #vague-svg-blur {
position: absolute;
left: -9999px;
width: 1px;
top: 0; }
.site-base .content-overflow {
width: 100%;
position: relative;
overflow: hidden; }
.site-base .desktop-only {
display: none; }
.site-base #fullscreen-logo {
position: fixed;
margin: 0;
top: 0;
right: 10px;
width: 40px;
padding-bottom: 60px;
z-index: 1200;
border-radius: 0 0 10px 10px;
background: url(/assets/q-music-logo-medium-white-a81da001881a12212dd08f256e24dcfa4a47dfe4ff554145acb334d31b00d4bc.png) center 88% no-repeat #ed3624;
background-size: 30px 36px;
display: none; }
.site-base #fullscreen-logo .title {
display: block;
height: 0;
width: 0;
overflow: hidden;
float: left;
text-indent: -9999px; }
.site-base #fullscreen-logo .close-button {
display: block;
color: black;
background: white;
width: 100%;
padding: 5px 0 3px;
line-height: 1.1em;
margin-bottom: -0.5em;
text-align: center;
font-size: 19.2px; }
.show-player-fullscreen .site-base #fullscreen-logo {
display: block; }
.site-base .container {
position: relative;
margin: 0 auto;
padding: 0 10px;
max-width: 1000px; }
.site-base .icon-button {
cursor: pointer;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block; }
.site-base .icon-button:focus {
text-decoration: none; }
.site-base .icon-button .icon {
display: block;
line-height: 1em;
min-width: 1em;
height: 1em;
text-align: center;
margin: 0 auto; }
.site-base .icon-button.big {
font-size: 2em; }
.site-base .icon-button.big .tooltip {
font-size: 0.5em; }
.site-base .icon-button.big-icon .icon {
font-size: 2.8em; }
.site-base .icon-button .icon-text {
line-height: 1.5em;
font-size: 1em; }
.site-base .icon-button .icon-text.under {
margin-top: 0.2em;
display: block;
text-align: center;
white-space: nowrap; }
.site-base .fit-text {
display: block;
line-height: 0.8em;
margin: 0.05em 0 -0.05em 0;
white-space: nowrap; }
.site-base .nano {
min-height: 200px; }
.site-base .nano .nano-content {
padding-right: 20px; }
.site-base .nano .nano-pane {
background: #FFFFFF;
width: 5px;
right: 1px;
margin: 0 5px; }
.site-base .nano .nano-pane .nano-slider {
background: #FF0000;
margin: 0;
box-shadow: inset 0 0 0 1px #FFFFFF; }
.site-base .loader {
padding: 0;
margin: 0;
font-size: 30px;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
color: black;
background: white;
border-radius: 100%; }
.site-base .loader.centered {
display: block;
margin: 10px auto; }
.site-base .modal-overlay {
background: #000000;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
position: fixed;
z-index: 5000; }
.site-base .modal-content {
position: relative;
margin: 5% auto;
padding: 30px 0 20px 0;
background: white; }
.site-base .modal-content .title {
margin: 0; }
.site-base .modal-close {
position: absolute;
top: -20px;
right: 0;
font-size: 3em;
color: #000000; }
.site-base .time-clock {
position: relative;
display: inline-block;
width: 0.9em;
height: 0.9em;
top: 0.1em;
background: url(/assets/clock-empty-gray-e3f9e804b9eb5a96c59384f1654b889d85fe83bf34504fa13e7cfe7b4bc82f94.svg) center no-repeat;
background-size: contain; }
.site-base .time-clock .arm {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/assets/clock-hour-gray-9d64a3c2c470761d61a710f5432f09cb0f845766ebfb53a64971e25af3301977.svg) center no-repeat;
background-size: contain; }
.site-base .time-clock .clock-minute {
background-image: url(/assets/clock-minute-gray-c14e6fb84d04fa781097f9a983979ccfa7b84af4873b59119368bce4f6d0129f.svg); }
.site-base .time-clock:before,
.site-base .time-clock .arm:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 1em; }
.site-base .breadcrumbs {
padding: 1em 0; }
.site-base .breadcrumbs a {
text-decoration: none;
color: #919191; }
.site-base .breadcrumbs a:after {
position: relative;
display: inline-block;
vertical-align: middle;
content: ' ';
width: 0.5em;
height: 0.5em;
margin: 0 0.2em;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 2px solid #919191;
border-top-color: transparent;
border-left-color: transparent; }
.site-base .fixed-nav-player {
position: fixed;
top: 4px;
right: 4px;
z-index: 1000; }
@media (max-width: 700px) {
.site-base .fixed-nav-player {
left: 4px;
top: 44px; } }
@media (max-width: 600px) {
.site-base .fixed-nav-player {
left: 0; } }
.site-base .menu-open .fixed-nav-player {
position: static; }
.site-base #theme-strip {
position: relative;
height: 11vw;
margin: .5vw 2px;
background-color: #ed3624;
z-index: -1; }
.site-base #theme-strip span {
z-index: -1;
position: absolute;
background-color: #3d3d3d;
width: calc(10vw + 4px);
height: 11vw;
padding: 20px; }
.site-base #theme-strip span:first-of-type {
border-right: 4px solid #fff; }
.site-base #theme-strip span:last-of-type {
right: 0;
border-left: 4px solid #fff; }
@media screen and (min-width: 700px) {
.site-base .mobile-only {
display: none; }
.site-base .desktop-only {
display: initial; }
.site-base h1 {
font-size: 2.8em; }
.site-base h2 {
font-size: 2.8em; }
.site-base h3 {
font-size: 2.2em; }
.site-base h4 {
font-size: 1.6em; }
.site-base h5 {
font-size: 1em; }
.site-base h6 {
font-size: 0.8em; } }
@media screen and (min-width: 1000px) {
.site-base #fullscreen-logo {
right: 30px;
background-position: center 83%;
background-size: 45px 54px;
width: 60px;
padding-bottom: 90px; }
.site-base #fullscreen-logo .close-button {
margin-bottom: -1.1em; }
.site-base #fullscreen-logo .close-button:before {
margin-left: -0.3em; } }
@media print {
.site-base img {
max-width: 100% !important; }
.site-base p, .site-base h2, .site-base h3 {
orphans: 3;
widows: 3; } }
.site-base .visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.site-base .visuallyhidden.focusable:active, .site-base .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.site-base .clearfix:before, .site-base .clearfix:after {
content: " ";
display: table; }
.site-base .clearfix:after {
clear: both; }
.site-base .tooltip {
position: absolute;
left: -9999px;
top: -9999px;
margin-bottom: 10px;
background: white;
line-height: auto;
padding: 4px 10px;
pointer-events: none;
color: black;
line-height: normal;
white-space: nowrap;
opacity: 0;
z-index: 3000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-moz-transition: 0s opacity 1s;
-ms-transition: 0s opacity 1s;
-o-transition: 0s opacity 1s;
-webkit-transition: 0s opacity 1s;
transition: 0s opacity 1s; }
.site-base :hover > .tooltip {
top: auto;
left: 50%;
bottom: 100%;
opacity: 1;
-moz-transition: 0.5s opacity 1s;
-ms-transition: 0.5s opacity 1s;
-o-transition: 0.5s opacity 1s;
-webkit-transition: 0.5s opacity 1s;
transition: 0.5s opacity 1s; }
.site-base :hover > .tooltip.right {
right: 0;
left: auto;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none; }
.site-base .instagram-media {
min-width: initial !important; }
.site-base .vjs-hidden, .site-base .vjs-big-play-button, .site-base .vjs-control-bar {
display: none; }
.site-base {
--primary-color: #E72413;
--secondary-color: #3D3D3D;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-yellow-yellow {
--primary-color: #F9F3C5;
--secondary-color: #F9F3C5;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-yellow {
--primary-color: #F9F3C5;
--secondary-color: #F9F3C5;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-purple {
--primary-color: #F9F3C5;
--secondary-color: #FC68B6;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-purple-yellow {
--primary-color: #FC68B6;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-green {
--primary-color: #F9F3C5;
--secondary-color: #A8D832;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-yellow {
--primary-color: #A8D832;
--secondary-color: #F9F3C5;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-blue {
--primary-color: #F9F3C5;
--secondary-color: #7CBAF7;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-blue-yellow {
--primary-color: #7CBAF7;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-red {
--primary-color: #F9F3C5;
--secondary-color: #ED3624;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-red-yellow {
--primary-color: #ED3624;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-purple-yellow {
--primary-color: #FC68B6;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-purple {
--primary-color: #F9F3C5;
--secondary-color: #FC68B6;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-purple-purple {
--primary-color: #FC68B6;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-purple-purple {
--primary-color: #FC68B6;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-purple-green {
--primary-color: #FC68B6;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-purple {
--primary-color: #A8D832;
--secondary-color: #FC68B6;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-purple-blue {
--primary-color: #FC68B6;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-blue-purple {
--primary-color: #7CBAF7;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-purple-red {
--primary-color: #FC68B6;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-purple {
--primary-color: #ED3624;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-green-yellow {
--primary-color: #A8D832;
--secondary-color: #F9F3C5;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-green {
--primary-color: #F9F3C5;
--secondary-color: #A8D832;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-purple {
--primary-color: #A8D832;
--secondary-color: #FC68B6;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-purple-green {
--primary-color: #FC68B6;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-green {
--primary-color: #A8D832;
--secondary-color: #A8D832;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-green {
--primary-color: #A8D832;
--secondary-color: #A8D832;
--tertiary-color: #3D3D3D;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-blue {
--primary-color: #A8D832;
--secondary-color: #7CBAF7;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-blue-green {
--primary-color: #7CBAF7;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-red {
--primary-color: #A8D832;
--secondary-color: #ED3624;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-red-green {
--primary-color: #ED3624;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-blue-yellow {
--primary-color: #7CBAF7;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-blue {
--primary-color: #F9F3C5;
--secondary-color: #7CBAF7;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-blue-purple {
--primary-color: #7CBAF7;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-purple-blue {
--primary-color: #FC68B6;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-blue-green {
--primary-color: #7CBAF7;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-blue {
--primary-color: #A8D832;
--secondary-color: #7CBAF7;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-blue-blue {
--primary-color: #7CBAF7;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-blue-blue {
--primary-color: #7CBAF7;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-blue-red {
--primary-color: #7CBAF7;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-blue {
--primary-color: #ED3624;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-yellow {
--primary-color: #ED3624;
--secondary-color: #F9F3C5;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-yellow-red {
--primary-color: #F9F3C5;
--secondary-color: #ED3624;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-red-purple {
--primary-color: #ED3624;
--secondary-color: #FC68B6;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-purple-red {
--primary-color: #FC68B6;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-green {
--primary-color: #ED3624;
--secondary-color: #A8D832;
--tertiary-color: #FFF;
--on-secondary-color: #3D3D3D; }
.site-base .q-green-red {
--primary-color: #A8D832;
--secondary-color: #ED3624;
--tertiary-color: #3D3D3D;
--on-secondary-color: #FFF; }
.site-base .q-red-blue {
--primary-color: #ED3624;
--secondary-color: #7CBAF7;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-blue-red {
--primary-color: #7CBAF7;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-red {
--primary-color: #ED3624;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-red-red {
--primary-color: #ED3624;
--secondary-color: #ED3624;
--tertiary-color: #FFF;
--on-secondary-color: #FFF; }
.site-base .q-orange-red {
--primary-color: #FF9700;
--secondary-color: #ED3624;
--tertiary-color: #FFFFFF;
--on-secondary-color: #FFFFFF; }
.site-base .q-all-blue {
--primary-color: nth($blue, 1);
--secondary-color: nth($blue, 1);
--tertiary-color: nth($blue, 2);
--on-secondary-color: nth($blue, 2); }
.site-base .q-all-blue .c-button--base {
background: #7CBAF7; }
.site-base .q-all-blue .c-button--base:hover {
background: #4ca1f4; }
.site-base .u-grid {
width: 100%;
clear: both;
display: flex;
flex-flow: wrap; }
.site-base .u-grid__item {
width: 100%;
margin-right: 1.4577259475%; }
.site-base .u-grid__item:last-child {
margin-right: 0; }
.site-base .u-grid--spacing .u-grid__item {
margin-bottom: 1.4577259475%; }
.site-base .u-grid--spacing\+ .u-grid__item {
margin-bottom: 2.915451895% !important; }
.site-base .u-grid--2\/4 {
display: grid;
grid-gap: 11px 1.4577259475%; }
@media (min-width: 61.25em) {
.site-base .u-grid--2\/4 {
grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46.25em) {
.site-base .u-grid--reset .u-grid__item {
margin-bottom: 0; } }
@media (min-width: 61.25em) {
.site-base .u-1\/3\@desktop {
width: 32.361516035%; } }
@media (min-width: 81.25em) {
.site-base .u-1\/3\@wide {
width: 32.361516035%; } }
@media (min-width: 61.25em) {
.site-base .u-2\/3\@desktop {
width: 66.1807580175%; } }
.site-base .u-2\/3\@wide.u-grid__item {
margin-right: 0; }
@media (min-width: 81.25em) {
.site-base .u-2\/3\@wide.u-grid__item {
width: 66.1807580175%;
margin-right: 1.4577259475%; } }
.site-base .u-h2 {
font-size: 45px; }
.site-base [hidden] {
display: none !important; }
@media (min-width: 46.25em) {
.site-base [hidden-tablet] {
display: none; } }
@media (max-width: 46.24em) {
.site-base [hidden-mobile] {
display: none; } }
.site-base .u-tooltip-aria {
position: relative; }
.site-base .u-tooltip-aria::after {
content: attr(aria-label);
display: none;
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
z-index: 5000;
pointer-events: none;
padding: 4px 8px;
line-height: 15px;
font-size: .75rem;
color: #fff;
white-space: nowrap;
background-color: #3D3D3D;
border-radius: 2px;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3); }
.site-base .u-tooltip-aria:hover::after, .site-base .u-tooltip-aria:focus::after {
display: block; }
.site-base .u-tooltip-aria[data-tooltip-position="left"]::after {
left: 0;
transform: translateX(0); }
.site-base .u-tooltip-aria[data-tooltip-position="right"]::after {
left: 100%;
transform: translateX(-100%); }
.site-base a {
color: #E72413;
text-decoration: underline; }
.site-base a:hover, .site-base a:focus {
text-decoration: none; }
.site-base a[target="_blank"]:not([class*="qi-"]):not([data-role="share"])::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
vertical-align: text-bottom;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat; }
.site-base a.c-button[target="_blank"]:not([class*="qi-"]):not([data-role="share"])::after {
background-image: url('data:image/svg+xml;utf8,'); }
.site-base body, .site-base .cms-article-container {
color: #3D3D3D;
font: 18px/1.2 "Qarla";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.site-base body {
background: #F2F2F2;
margin: 0; }
.site-base h1,
.site-base h2,
.site-base h3,
.site-base h4,
.site-base h5,
.site-base h6 {
letter-spacing: -0.23px;
line-height: 1em;
text-transform: uppercase;
font-family: "Cervo";
font-weight: bold; }
.site-base h3 {
line-height: 22px; }
.site-base .o-heading {
line-height: 1.6; }
.site-base h3.o-heading {
color: #3D3D3D;
font-size: 24px;
text-transform: uppercase; }
.site-base button {
cursor: pointer;
padding: 0;
background: none; }
.site-base select {
border: 1px solid #BCBEBF;
border-radius: 0;
-webkit-appearance: none;
font-size: 20px;
font-family: "Qarla";
cursor: pointer;
padding-right: 24px;
color: #3D3D3D; }
.site-base .o-form__field .o-form__text {
border: 1px solid #BCBEBF;
font-family: "Qarla";
font-size: 20px; }
.site-base :focus-visible:not(.site-base--cms *) {
outline: none;
/* disable native outline only for keyboard focus */
box-shadow: 0 0 0 4px rgba(59, 150, 241, 0.4), 0 0 0 2px #3B96F1;
border-radius: 5px; }
.site-base .o-icon {
width: 24px;
height: 24px;
display: inline-block; }
.site-base .o-icon--mini {
width: 0.725rem; }
.site-base .o-icon--audio {
width: 18px;
height: 27px; }
.site-base .o-icon--qsounds {
width: 100%;
max-width: 223px;
height: 100%;
max-height: 67px; }
.site-base .o-icon--google, .site-base .o-icon--apple {
width: 146px;
height: 50px; }
.site-base .o-icon--large {
width: 46px;
height: 46px; }
.site-base .o-page {
position: relative;
height: 100%; }
@media (min-width: 46.25em) {
.site-base .o-page > header {
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1000; } }
.site-base .o-page__content > *:last-child {
padding-bottom: 65px; }
.site-base .o-page__main {
display: flex;
flex-direction: column;
flex: 1 0 auto;
height: 100%; }
@media (min-width: 46.25em) {
.site-base .o-page__main {
margin-left: 185px; } }
@media (min-width: 61.25em) {
.site-base .o-page__main {
margin-left: 240px; } }
.site-base .o-page__content-wrapper {
flex: 1 0 auto; }
.site-base .o-page__footer {
flex-shrink: 0; }
.site-base .o-page__title {
text-align: center;
font-size: 24px;
font-weight: 400;
margin-bottom: 8px !important; }
@media (min-width: 46.25em) {
.site-base .o-page__title {
font-size: 55px; } }
.site-base .o-page__header {
background: linear-gradient(#E72413 100px, #FFFFFF 101px);
padding: 0 9px 32px;
margin-bottom: 0 !important; }
@media (min-width: 46.25em) {
.site-base .o-page__header {
background: linear-gradient(#E72413 300px, #FFFFFF 301px); } }
.site-base .o-media {
position: relative;
background: #FFF;
overflow: hidden;
font-family: "Cervo"; }
.site-base .o-media:hover .o-media__image img {
opacity: .96;
transform: scale(1.03); }
.site-base .o-media__header {
font-size: 16px;
padding: 12px 0 8px; }
.site-base .o-media__header .o-heading {
margin-bottom: 8px; }
.site-base .o-media__header h2.o-heading {
font-size: 27px; }
.site-base .o-media__image {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
overflow: hidden;
transform: translateX(0); }
.site-base .o-media__image img {
width: 100%;
transition: transform .3s; }
.site-base .o-media__tag {
font: normal 15px/1.3 "BlackBones";
margin: 0;
color: #E72413; }
.site-base .o-media__subtitle {
font-size: 16px;
margin-bottom: 0;
text-transform: uppercase; }
.site-base .o-media__title {
font-weight: 600;
text-transform: uppercase;
font-size: 18px; }
@media (min-width: 46.25em) {
.site-base .o-media__title {
font-size: 24px;
line-height: 1.2; } }
.site-base .o-media__link {
color: #3D3D3D;
text-decoration: none; }
.site-base .o-media__content {
padding: 8px; }
.site-base .o-media__category-icon {
position: absolute;
left: 6px;
color: #000;
opacity: .75;
font-size: 20px; }
.site-base .o-media__time {
font-size: 13px;
color: #3D3D3D;
margin-top: 4px; }
@media (min-width: 46.25em) {
.site-base .o-media__time {
font-size: 18px; } }
.site-base .o-media__button {
margin-left: auto; }
.site-base .o-media__play {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
width: 60px;
height: 60px;
fill: #FFF; }
.site-base .o-media--audio .o-media__content, .site-base .o-media--podcast .o-media__content, .site-base .o-media--music .o-media__content, .site-base .o-media--list .o-media__content, .site-base .o-media--date .o-media__content, .site-base .o-media--video .o-media__content, .site-base .o-media--win .o-media__content, .site-base .o-media--photo .o-media__content {
padding-left: 33px; }
.site-base .o-media--custom {
padding-top: 56.25%; }
.site-base .o-container {
margin: 0 auto; }
@media (min-width: 46.25em) {
.site-base .o-container {
padding: 0 8px; } }
@media (min-width: 61.25em) {
.site-base .o-container {
padding: 0 32px; } }
@media (min-width: 93.75em) {
.site-base .o-container {
padding: 0 50px; } }
.site-base .o-container\- {
max-width: 945px !important;
margin: 0 auto; }
.site-base .o-container\-- {
margin: 0 auto;
max-width: 798px !important; }
.site-base .o-container\--- {
margin: 0 auto;
max-width: 360px !important; }
.site-base .o-block-link, .site-base .c-nav__item {
position: relative; }
.site-base .o-block-link a:before, .site-base .c-nav__item a:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1; }
.site-base .o-channel {
display: flex;
background: #E72413;
color: #FFF;
width: 100%;
padding: 0 24px 0 0;
font-size: 15px;
align-items: center;
height: 60px;
background-size: cover;
transform: translateX(0);
min-width: 0;
position: relative;
/*&__play{
color: white !important;
border-radius: 50%;
border: none !important;
background: rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.3);
box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.3);
transition: box-shadow ease 0.2s, background-color ease 0.2s, transform ease 0.2s;
&:hover{
box-shadow: none;
background-color: rgba(0,0,0,0) !important;
transform: scale(1.05);
color: white !important;
}
}*/ }
@media (min-width: 46.25em) and (max-width: 81.24em) {
.site-base .o-channel {
padding: 60px 8px 8px;
height: auto; } }
@media (min-width: 81.25em) {
.site-base .o-channel {
height: auto;
flex: 1; } }
@media (min-width: 81.25em) {
.site-base .o-channel__logo {
min-width: 16%;
width: 16%; } }
@media (min-width: 46.25em) and (max-width: 81.24em) {
.site-base .o-channel__logo {
max-width: 70px;
max-height: 70px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0; } }
.site-base .o-channel__img {
width: 100%; }
.site-base .o-channel__title {
font-weight: 600; }
.site-base .o-channel__content {
min-width: 0;
text-transform: uppercase; }
.site-base .o-channel__title, .site-base .o-channel__artist {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: "Cervo";
font-size: 18px; }
@media (min-width: 81.25em) {
.site-base .o-channel__title, .site-base .o-channel__artist {
font-size: 1.2vw; } }
.site-base .o-channel__icon {
width: 30px;
min-width: 30px;
height: 30px; }
@media (min-width: 61.25em) {
.site-base .o-channel__icon {
width: 2.3vw;
min-width: 2.3vw;
height: 2.3vw; } }
.site-base .o-channel-block {
width: 33%; }
@media (max-width: 46.24em) {
.site-base .o-channel-block {
width: 50%; } }
.site-base .o-channel-block .o-channel__img {
width: 70px; }
.site-base .o-channel__action {
margin-left: auto;
width: 2.5rem;
height: 2.5rem;
background-color: #FFF;
border-radius: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition-duration: .3s;
transition-property: background-color;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.site-base .o-channel__action:hover {
background-color: rgba(255, 255, 255, 0.8); }
.site-base .o-channel__icon {
width: 1rem;
height: 1rem;
fill: #E72413; }
.site-base .o-header--full {
position: relative; }
@media (min-width: 61.25em) {
.site-base .o-header--full .o-header__content {
position: absolute;
left: 0;
top: 0;
padding: 8vw 6.9970845481% 0 40.8163265306%;
color: var(--tertiary-color); } }
@media (max-width: 61.24em) {
.site-base .o-header--full .o-header__title {
top: 20%;
position: absolute;
left: 40.8163265306%;
right: 6.9970845481%; }
.site-base .o-header--full .o-header__description {
font-weight: bold;
font-size: 16px;
padding: 8px; } }
@media (max-width: 61.24em) and (min-width: 46.25em) {
.site-base .o-header--full .o-header__description {
padding: 24px 40px; } }
.site-base .o-header--default {
text-align: center; }
@media (min-width: 46.25em) {
.site-base .o-header--default {
padding-top: 40px; } }
@media (min-width: 46.25em) {
.site-base .o-header--default .o-header--has-image .o-header__content {
max-width: 40.8163265306%; } }
@media (max-width: 61.24em) {
.site-base .o-header__content {
padding: 8px; } }
.site-base .o-header__title {
text-align: center; }
@media (min-width: 46.25em) {
.site-base .o-header__title {
font-weight: normal;
font-size: 24px; } }
@media (min-width: 61.25em) {
.site-base .o-header__title {
font-size: 3.05em; } }
.site-base .o-article {
position: relative;
background: #FFF; }
.site-base .o-article::before {
content: '';
background: #E72413;
width: 100%;
height: 100px;
position: absolute;
left: 0;
top: 0;
z-index: 1; }
@media (min-width: 46.25em) {
.site-base .o-article::before {
height: 300px; } }
.site-base .o-article--large-header::before {
display: none; }
.site-base .o-article__container {
margin: 0 auto;
max-width: 798px; }
.site-base .o-article__wrapper {
padding: 0 9px 32px;
margin: 0 auto;
max-width: 798px; }
.site-base .o-article--full-width .o-article__wrapper {
max-width: none;
padding-left: 40px;
padding-right: 40px; }
.site-base .o-article__image, .site-base .o-article__video {
padding-top: 56.256%;
position: relative;
overflow: hidden; }
.site-base .o-article__image .o-article__img, .site-base .o-article__image .o-article__video-wrapper, .site-base .o-article__video .o-article__img, .site-base .o-article__video .o-article__video-wrapper {
position: absolute;
left: 0;
display: block;
top: 0;
z-index: 1;
width: 100%; }
.site-base .o-article__header {
margin-bottom: 8px; }
@media (min-width: 46.25em) {
.site-base .o-article__header {
padding-top: 48px;
margin-bottom: 32px; } }
@media (min-width: 81.25em) {
.site-base .o-article__header {
padding-top: 62px;
margin-bottom: 32px; } }
.site-base .o-article__header--large {
padding-top: 0; }
@media (min-width: 46.25em) {
.site-base .o-article__header--large {
padding-top: 0; } }
@media (min-width: 81.25em) {
.site-base .o-article__header--large {
padding-top: 0; } }
.site-base .o-article__header-large {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
z-index: 2; }
@media (min-width: 46.25em) {
.site-base .o-article__header-large {
height: 400px; } }
.site-base .o-article__header-large-background {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover; }
.site-base .o-article__header-large-foreground {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
max-width: 798px;
height: 100%;
object-fit: contain; }
.site-base .o-article__title {
font-size: 24px;
font-weight: 100;
margin-bottom: 8px !important;
text-wrap: balance; }
.site-base .o-article__title strong {
font-weight: 600; }
@media (min-width: 46.25em) {
.site-base .o-article__title {
font-size: 55px; } }
.site-base .o-article__cta {
margin-bottom: 18px; }
.site-base .o-article__date {
text-transform: uppercase;
font-size: 16px;
font-family: "Cervo";
text-align: center;
line-height: 1; }
@media (min-width: 46.25em) {
.site-base .o-article__date {
font-size: 18px; } }
.site-base .o-article .article-body h2, .site-base .o-article .article-body h3, .site-base .o-article .article-body h4, .site-base .o-article .article-body h5 {
margin-bottom: 16px;
line-height: 1; }
.site-base .o-article__content-top {
text-align: center;
margin-bottom: 32px; }
.site-base .o-article__content-top > * {
margin-bottom: 8px; }
@media (min-width: 46.25em) {
.site-base .o-article__content-top > * {
margin-bottom: 16px; } }
@media (min-width: 46.25em) {
.site-base .o-article__top {
display: none; } }
.site-base .o-article--no-image .o-article__date {
margin-bottom: 0; }
.site-base .o-article--no-image .o-article__content-top {
background: #E72413;
padding: 8px 9px;
position: relative;
z-index: 2;
color: #FFF;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
min-height: 100px;
margin-bottom: 0; }
@media (min-width: 46.25em) {
.site-base .o-article--no-image .o-article__content-top {
min-height: 300px; } }
.site-base .o-hitlist::before {
content: '';
background: #E72413;
width: 100%;
height: 100px;
position: absolute;
left: 0;
top: 0;
z-index: 1; }
@media (min-width: 46.25em) {
.site-base .o-hitlist::before {
height: 300px; } }
.site-base .o-section {
margin: 0 0 16px; }
@media (min-width: 46.25em) {
.site-base .o-section {
margin: 16px auto 0; } }
.site-base .o-section__title {
font-size: 67px;
line-height: .7;
color: var(--primary-color); }
.site-base .o-section__title em {
display: block;
font-family: "BlackBones";
color: #3D3D3D;
text-transform: none;
font-size: 43px;
font-weight: 400;
position: relative;
z-index: 1;
font-style: normal; }
.site-base .o-section__program-title {
font-size: 40px;
color: var(--primary-color); }
.site-base .o-section__program-title em {
color: #3D3D3D;
font-size: 34px; }
.site-base .o-section__footer {
text-align: center;
padding-top: 11px; }
.site-base .o-section__header {
padding: 24px 0; }
@media (min-width: 46.25em) {
.site-base .o-section__header {
padding: 32px 0 24px; } }
@media (min-width: 46.25em) {
.site-base .o-section__header--inline {
display: flex;
align-items: center; } }
.site-base .o-section__header--inline .o-section__heading {
margin-right: 1.4577259475%; }
.site-base .o-section__header--inline .o-section__heading--light {
font-weight: 100; }
.site-base .o-section__header .o-form__field:last-child {
margin-left: auto; }
.site-base .o-section__button {
width: 100%;
justify-content: center; }
@media (min-width: 46.25em) {
.site-base .o-section__button {
width: 32.361516035%; } }
.site-base .o-list {
margin: 0;
padding: 0;
list-style: none;
text-transform: uppercase; }
.site-base .o-list__item-with-button {
margin-bottom: 10px;
font-size: 18px;
line-height: 25px; }
.site-base .o-list__item-with-button:last-child {
margin-bottom: 0; }
.site-base .o-list__link {
font-family: 'Cervo';
font-weight: bold;
text-decoration: none; }
.site-base .o-list__link:after {
margin-left: 5px;
content: '>';
transition: margin-left .1s ease-in; }
.site-base .o-list__link:hover:after {
margin-left: 10px; }
.site-base .o-timetable {
list-style: none;
margin: 0;
padding: 0;
font-family: "Cervo"; }
.site-base .o-timetable__link {
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: #3D3D3D; }
.site-base .o-timetable__link:hover {
color: #E72413; }
.site-base .o-timetable__time {
text-align: center;
width: 15.4518950437%;
font-size: 16px; }
.site-base .o-timetable__item {
background: #FFF;
border-bottom: 1px solid #3D3D3D;
line-height: 50px;
white-space: nowrap;
display: flex;
align-items: center;
position: relative;
transform: translateX(0); }
.site-base .o-timetable__item:last-child {
border-bottom: 0; }
.site-base .o-timetable__item--active {
color: #E72413; }
.site-base .o-timetable__item--active a {
color: #E72413; }
.site-base .o-dayswitch {
padding: 8px 0;
position: relative; }
.site-base .o-dayswitch__button {
width: 15%;
height: 100%;
background: none;
position: absolute;
top: 50%;
transform: translateY(-50%); }
.site-base .o-dayswitch__button:hover {
fill: #E72413; }
.site-base .o-dayswitch__next {
right: 0; }
.site-base .o-dayswitch__title {
text-align: center;
font-size: 18px;
line-height: 1.1; }
.site-base .o-dayswitch__title span,
.site-base .o-dayswitch__title a {
font-size: 30px;
display: block; }
.site-base .o-dayswitch__subtitle {
color: #E72413;
font-style: normal; }
.site-base .o-playlist {
background: #FFF;
box-shadow: 0 -1px 0 0 rgba(9, 76, 89, 0.1);
display: flex;
align-items: center;
padding: 1.4577259475%;
position: relative; }
.site-base .o-playlist__track-actions-icon {
fill: #FFF;
background: #E72413;
border-radius: 100%;
width: 24px;
height: 24px; }
.site-base .o-playlist__track-actions-icon use {
transform: scale(0.65);
transform-origin: center center; }
.site-base .o-playlist__position {
font-size: 16px;
text-transform: uppercase;
min-width: 38px;
color: #717180;
text-align: center;
padding-right: 1.4577259475%;
font-family: "Cervo"; }
@media (min-width: 46.25em) {
.site-base .o-playlist__position {
font-size: 24px; } }
.site-base .o-playlist__image {
width: 54px;
min-width: 54px;
height: 54px;
background: #717180; }
@media (min-width: 46.25em) {
.site-base .o-playlist__image {
width: 70px;
min-width: 70px;
height: 70px; } }
.site-base .o-playlist__image img {
display: block; }
.site-base .o-playlist__heading {
font-size: 32px;
line-height: 1;
margin: 8px 0; }
@media (max-width: 46.24em) {
.site-base .o-playlist__heading {
padding: 0 9px; } }
.site-base .o-playlist__stats {
margin: 0;
display: block;
line-height: 22px;
font-size: 14px;
font-family: "Cervo";
color: #717180; }
.site-base .o-playlist__textLabel {
text-transform: uppercase;
font-weight: 600; }
.site-base .o-playlist__movement {
font-size: 16px;
margin-left: 4px; }
.site-base .o-playlist__movement .o-icon {
width: 9px; }
.site-base .o-playlist__movement--new {
color: #01BFB3; }
.site-base .o-playlist__movement--raised {
color: #6DD400; }
.site-base .o-playlist__movement--raised .o-icon {
fill: #6DD400;
vertical-align: text-bottom; }
.site-base .o-playlist__movement--dropped {
color: #ED3624; }
.site-base .o-playlist__movement--dropped .o-icon {
fill: #ED3624;
vertical-align: middle;
transform: rotate(180deg); }
.site-base .o-playlist__movement--equal {
color: #FAD322; }
.site-base .o-playlist__movement--equal .o-icon {
fill: #FAD322;
vertical-align: middle; }
.site-base .o-playlist__previous {
display: inline-block;
width: 20px; }
.site-base .o-playlist__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.site-base .o-playlist__title:is(h3) {
font-size: 20px; }
@media (min-width: 46.25em) {
.site-base .o-playlist__title {
font-size: 24px; } }
.site-base .o-playlist__artist {
margin: 0;
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 1;
font-family: "Cervo"; }
@media (min-width: 46.25em) {
.site-base .o-playlist__artist {
font-size: 20px; } }
.site-base .o-playlist__content {
padding: 0 8px 0 16px;
min-width: 0; }
.site-base .o-playlist__actions {
white-space: nowrap;
margin-left: auto;
display: flex;
align-items: center; }
@media (min-width: 46.25em) {
.site-base .o-playlist__actions .o-like__group {
margin-left: 28px; } }
.site-base .o-playlist__actions .o-like__group .o-playlist__button {
width: 30px; }
.site-base .o-playlist__actions .o-like {
margin-left: 5px;
width: auto !important;
height: auto !important; }
@media (min-width: 46.25em) {
.site-base .o-playlist__actions .o-like {
margin-left: 20px; } }
.site-base .o-playlist__actions .o-actions-popper {
display: flex;
align-items: center; }
.site-base .o-playlist__actions .o-icon {
fill: #3D3D3D;
width: 20px;
height: 20px; }
@media (min-width: 46.25em) {
.site-base .o-playlist__actions .o-icon {
width: 30px;
height: 30px; } }
.site-base .o-playlist__actions .o-icon--track {
width: 30px;
height: 30px; }
@media (min-width: 46.25em) {
.site-base .o-playlist__actions .o-icon--track {
width: 40px;
height: 40px; } }
.site-base .o-playlist__button {
width: 20px;
height: 20px; }
@media (min-width: 46.25em) {
.site-base .o-playlist__button {
width: 40px;
height: 40px; } }
.site-base .o-playlist__button.o-preview {
width: 30px;
height: 30px; }
@media (min-width: 46.25em) {
.site-base .o-playlist__button.o-preview {
width: 40px;
height: 40px; } }
.site-base .o-playlist__message {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; }
.site-base .o-playlist__message p {
text-transform: uppercase;
font-weight: 600;
font-size: 24px;
font-family: "Cervo"; }
.site-base .o-playlist--highlight {
background: #E72413;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.5);
z-index: 3; }
.site-base .o-playlist--highlight * {
color: #FFF; }
.site-base .o-playlist--highlight .o-icon {
fill: #FFF !important; }
.site-base .o-form__field {
position: relative; }
.site-base .o-form__label {
position: relative;
display: block; }
.site-base .o-form__label--select:hover:after {
border-top-color: #000; }
.site-base .o-form__label--select:after {
content: '';
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #3D3D3D;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%); }
.site-base .o-like {
width: 32px;
height: 32px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: center; }
.site-base .o-like .icon {
stroke: #E72413;
fill: white !important;
stroke-width: 1.5px; }
.site-base .o-like .icon:hover {
stroke: #E72413;
fill: #E72413 !important;
stroke-width: 1.5px; }
.site-base .o-like--unlike .icon {
fill: #E72413 !important;
stroke: none; }
.c-playlist--large .site-base .o-like {
width: 40px;
height: 40px; }
.site-base .o-message {
background: #FFF;
border-radius: 2px;
padding: 16px;
font-size: 16px;
position: relative; }
.site-base .o-message--in {
margin-right: 36px; }
.site-base .o-message--out {
margin-left: 36px; }
.site-base .o-message__image {
position: absolute;
left: -36px;
width: 32px;
top: 0; }
.site-base .o-message:after {
content: attr(data-message-time);
color: #717180;
font-size: 11px; }
.site-base .o-heading__program-title {
position: relative;
line-height: 1;
color: var(--tertiary-color);
font-weight: bold;
font-size: clamp(1.5rem, 12cqi, 8rem);
text-wrap: balance; }
.site-base .o-heading__program-title em {
text-transform: none;
font: 300 26px "BlackBones";
color: var(--secondary-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
top: 0;
position: absolute;
transform: translateY(-58%);
width: 100%;
line-height: 1.4;
padding-left: 8px;
margin-left: -8px; }
@media (min-width: 46.25em) {
.site-base .o-heading__program-title em {
font-size: 4vw; } }
@media (min-width: 81.25em) {
.site-base .o-heading__program-title em {
font-size: 3vw; } }
.site-base .o-popover {
background: #FFF;
border-radius: 2px;
position: absolute;
box-shadow: 4px 4px 16px 0 rgba(18, 79, 91, 0.15) !important;
width: 300px !important;
text-align: left !important;
padding: 12px !important;
z-index: 1000; }
.site-base .o-popover--right {
right: 0; }
.site-base .popper {
position: absolute;
z-index: 200000; }
.site-base .popper .popper__arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 10px; }
.site-base .popper[x-placement^="top"] {
margin-bottom: 10px; }
.site-base .popper[x-placement^="top"] .popper__arrow {
border-width: 10px 10px 0 10px;
border-color: #fafafa transparent transparent transparent;
bottom: -10px;
left: calc(50% - 10px);
margin-top: 0;
margin-bottom: 0; }
.site-base .popper[x-placement^="bottom"] {
margin-top: 10px; }
.site-base .popper[x-placement^="bottom"] .popper__arrow {
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fafafa transparent;
top: -10px;
left: calc(50% - 10px);
margin-top: 0;
margin-bottom: 0; }
.site-base .popper[x-placement^="right"] {
margin-left: 10px; }
.site-base .popper[x-placement^="right"] .popper__arrow {
border-width: 10px 10px 10px 0;
border-color: transparent #fafafa transparent transparent;
left: -10px;
top: calc(50% - 10px);
margin-left: 0;
margin-right: 0; }
.site-base .popper[x-placement^="left"] {
margin-right: 10px; }
.site-base .popper[x-placement^="left"] .popper__arrow {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #fafafa;
right: -10px;
top: calc(50% - 10px);
margin-left: 0;
margin-right: 0; }
.site-base .o-vote {
text-align: left; }
.site-base .o-vote--disabled .o-vote__button {
color: rgba(255, 255, 255, 0.5);
cursor: default; }
.site-base .o-vote--disabled .o-vote__cover:before {
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 1; }
.site-base .o-vote__img {
width: 100%;
display: block; }
.site-base .o-vote__icon {
width: 16px;
height: 16px; }
.site-base .o-vote__content {
position: absolute;
left: 0;
bottom: 0;
color: #FFF;
right: 0;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.71) 98%);
padding: 4px; }
.site-base .o-vote__title, .site-base .o-vote__artist {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
line-height: 1; }
.site-base .o-vote__title {
font-size: 20px; }
.site-base .o-vote__cover {
width: 100%;
position: relative;
margin-bottom: 8px; }
.site-base .o-vote__button {
width: 100%;
justify-content: center; }
.site-base .o-vote__actions {
min-height: 36px; }
.site-base .o-vote .o-progressbar {
max-width: 70%; }
.site-base .o-progressbar {
background: #FFF;
height: 7px;
width: 200px;
flex: 1;
border-radius: 5px;
margin: 4px 0; }
.site-base .o-progressbar__track {
background: #E72413;
height: 7px;
border-radius: 5px; }
.site-base .o-select {
position: relative;
display: block;
margin: 0 10px; }
.site-base .o-select:hover:after {
border-top-color: #000; }
.site-base .o-select:after {
content: '';
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #E72413;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%); }
.site-base .o-select__field {
font-family: "Cervo";
border: 0;
padding: 0 24px 0 0;
height: auto;
color: #E72413;
font-size: 20px; }
@media (min-width: 46.25em) {
.site-base .o-select__field {
font-size: 45px; } }
.site-base .o-select option {
font-size: 18px; }
.site-base .c-menu {
width: 100%;
background: #FFF; }
@media (min-width: 46.25em) {
.site-base .c-menu {
border-top: 0;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
width: 185px;
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
display: flex;
flex-direction: column; }
.site-base .c-menu::-webkit-scrollbar {
display: none; }
.site-base .c-menu:after {
content: '';
width: 10px;
left: 0;
top: 0;
bottom: 0;
background: #E72413;
position: absolute; } }
@media (max-width: 46.24em) {
.site-base .c-menu {
top: 0;
z-index: 1000;
position: sticky;
width: 100%; } }
@media (min-width: 61.25em) {
.site-base .c-menu {
width: 240px; } }
.site-base .c-menu__top, .site-base .c-menu__main {
background: #FFF;
position: relative; }
@media (min-width: 46.25em) {
.site-base .c-menu__top, .site-base .c-menu__main {
padding-left: 10px; } }
@media (max-width: 46.24em) {
.site-base .c-menu__main {
transition: transform .4s ease-in-out;
z-index: 20;
position: fixed;
bottom: 0;
width: 85%;
top: 0;
transform: translateX(-100%);
padding-top: 78px;
border-top: 5px solid #E72413;
visibility: hidden; }
.site-base .c-menu__main:before {
content: '';
background: url(/assets/qmusic-a1d81a5f88375b3c5507cbc0b064ce1fc8778a076a245bddfd4f2a3e2417c330.png) no-repeat 0 0/cover;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6px;
width: 48px;
height: 57px; } }
@media (min-width: 46.25em) {
.site-base .c-menu__main {
flex: 1; } }
.site-base .c-menu__auth {
padding: 0 16px 24px 22px; }
@media (min-width: 46.25em) {
.site-base .c-menu__auth {
padding-right: 22px; } }
.site-base .c-menu__auth-button.c-button {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px 0 42px;
border-radius: 999px;
background: #3D3D3D;
color: #FFF;
position: relative; }
.site-base .c-menu__auth-button.c-button svg, .site-base .c-menu__auth-button.c-button img {
position: absolute;
left: 16px; }
.site-base .c-menu__auth-button.c-button .profile-button-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; }
.site-base .c-menu__auth-button.c-button:hover {
background: #000; }
.site-base .c-menu__auth-button.c-button.c-menu__auth-button--circle {
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
flex: 0 0 36px; }
.site-base .c-menu__auth-button.c-button.c-menu__auth-button--circle svg, .site-base .c-menu__auth-button.c-button.c-menu__auth-button--circle img {
position: static;
left: auto; }
.site-base .c-menu__auth-actions {
display: flex;
align-items: center;
gap: 8px;
width: 100%; }
.site-base .c-menu__auth-actions .c-menu__auth-button:not(.c-menu__auth-button--circle) {
flex: 1;
min-width: 0; }
.site-base .c-menu__logo {
margin: 6px auto;
display: block; }
@media (min-width: 46.25em) {
.site-base .c-menu__logo {
margin: 24px auto 32px; } }
@media (max-width: 46.24em) {
.site-base .c-menu__top {
border-top: 5px solid #E72413;
display: flex;
align-items: center;
height: 66px; } }
.site-base .c-menu__toggle {
position: absolute;
left: 8px;
background: none;
top: 50%;
transform: translateY(-50%);
padding: 10px 20px;
width: 32px;
height: 20px;
z-index: 30;
outline: none; }
@media (min-width: 46.25em) {
.site-base .c-menu__toggle {
display: none; } }
.site-base .c-menu__meta {
background: #FFF;
padding: 8px;
display: flex;
text-transform: uppercase;
align-items: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
font-family: "Cervo"; }
html:not(.homepage) .site-base .c-menu__meta {
display: none; }
@media (min-width: 46.25em) {
.site-base .c-menu__meta {
display: none; } }
.site-base .c-menu__meta-button {
flex: 1; }
.site-base .c-menu__meta-separator {
width: 10%;
text-align: center;
font-weight: bold; }
.site-base .c-menu--open {
bottom: 0; }
@media (max-width: 46.24em) {
.site-base .c-menu--open:after {
content: '';
left: 0;
top: 0;
right: 0;
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2; }
.site-base .c-menu--open .c-menu__main {
transform: translateX(0%);
visibility: visible; }
.site-base .c-menu--open .c-social {
position: absolute;
bottom: 0;
left: 0;
right: 0; } }
.site-base .c-nav {
list-style: none;
margin: 0;
padding: 0 0 24px; }
.site-base .c-nav__item {
position: relative;
padding: 0.5rem;
padding-left: 22px; }
.site-base .c-nav__link {
text-transform: uppercase;
font-size: 18px;
font-family: "Cervo";
text-decoration: none;
font-weight: 600;
z-index: 1;
transition: color 0.3s;
color: #3D3D3D; }
@media (min-width: 46.25em) {
.site-base .c-nav__link {
font-size: 24px; } }
.site-base .c-nav__link:hover, .site-base .c-nav__link:focus {
color: #E72413; }
.site-base .c-nav__link:focus {
text-decoration: none; }
.site-base .c-nav__link--active {
color: #E72413; }
.site-base .c-nav__link--active:after {
content: '';
position: absolute;
height: 36px;
width: 5px;
right: 0;
top: 50%;
transform: translateY(-50%);
border-right: 5px solid #E72413; }
.site-base .c-social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center; }
@media (min-width: 46.25em) {
.site-base .c-social {
margin: 0 0 40px; } }
.site-base .c-social li {
margin: 0 6px; }
.site-base .c-social a {
background: #3D3D3D;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 26px;
background: #FFF;
color: #3D3D3D;
text-decoration: none; }
.site-base .c-social a:hover {
color: #000; }
@media (min-width: 46.25em) {
.site-base .c-social a {
width: 26px;
height: 26px;
background: #3D3D3D;
color: #FFF;
font-size: 18px; }
.site-base .c-social a:hover {
background: #000;
color: #FFF; } }
@media (max-width: 46.24em) {
.c-menu--open .site-base .c-social {
padding: 8px;
background: #E72413; } }
.site-base .c-logo {
display: flex;
justify-content: center; }
.site-base .c-logo__link {
display: flex;
justify-content: center; }
.site-base .c-logo__img {
width: 33px;
height: 41px;
display: block; }
@media (min-width: 46.25em) {
.site-base .c-logo__img {
width: 67px;
height: 80px; } }
@media (min-width: 61.25em) {
.site-base .c-logo__img {
width: 84px;
height: 100px; } }
.site-base .c-icon--hamburger,
.site-base .c-icon--hamburger:after,
.site-base .c-icon--hamburger:before {
height: 3px;
background: #E72413;
width: 24px;
border-radius: 1px; }
.site-base .c-icon--hamburger {
position: absolute;
top: 50%;
left: 0;
transform: translateX(50%); }
.c-menu--open .site-base .c-icon--hamburger {
background: transparent; }
.site-base .c-icon--hamburger:before, .site-base .c-icon--hamburger:after {
content: '';
transform-origin: center center;
transition: transform .3s,background .3s; }
.site-base .c-icon--hamburger:before {
position: absolute;
top: -6px;
left: 0; }
.c-menu--open .site-base .c-icon--hamburger:before {
transform: translateY(6px) rotate(-45deg); }
.site-base .c-icon--hamburger:after {
position: absolute;
bottom: -6px;
left: 0; }
.c-menu--open .site-base .c-icon--hamburger:after {
transform: translateY(-6px) rotate(45deg); }
@media (min-width: 46.25em) {
.site-base .items-without-columns {
display: none; } }
.site-base .float-column {
width: 100%;
float: left;
padding: 0;
margin: 0;
display: none; }
.site-base .float-column:first-child {
display: block; }
@media (min-width: 46.25em) {
.site-base .float-column {
width: 49.271135%; }
.site-base .float-column:first-child {
margin-right: 1.45773%; }
.site-base .float-column:nth-child(2) {
display: block; } }
@media (min-width: 81.25em) {
.site-base .float-column {
width: 32.3615133333%; }
.site-base .float-column:first-child {
margin-right: 0; }
.site-base .float-column:nth-child(2) {
display: block;
margin: 0 1.45773% 1.45773%; }
.site-base .float-column:nth-child(3) {
display: block; } }
.site-base .c-media-list {
margin-bottom: 11px; }
.site-base .c-media-list:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden; }
.site-base .c-media-list .u-grid__item {
background: #FFF;
width: 100%;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
backface-visibility: hidden;
will-change: transform;
overflow: hidden;
margin: 0;
margin-bottom: 18px; }
@media (max-width: 46.24em) {
.site-base .c-media-list .u-grid__item {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
margin-bottom: 8px; } }
.site-base .c-media-list .u-grid__item--image-only {
background: transparent;
box-shadow: none !important; }
.site-base .c-media-list .u-grid__item .o-media__image {
padding-top: 56.256%;
position: relative; }
.site-base .c-media-list .u-grid__item .o-media__image img {
position: absolute;
left: 0;
display: block;
top: 0; }
.site-base .c-media-list ~ .o-section__footer {
clear: both; }
@-webkit-keyframes flash {
0% {
opacity: .6; }
100% {
opacity: 1; } }
@keyframes flash {
0% {
opacity: .6; }
100% {
opacity: 1; } }
.site-base .c-live-panel {
--radius: 4px;
--radius-pill: 9999px;
position: relative;
font-family: "Cervo"; }
.site-base .c-live-panel--contrast {
--tertiary-color: #3D3D3D; }
@media (max-width: 46.24em) {
.site-base .c-live-panel {
display: none; } }
.site-base .c-live-panel__main {
display: block;
padding-top: 45.77%;
background-size: cover;
background-repeat: no-repeat;
background-color: var(--primary-color);
background-image: url(/assets/live-panel-placeholder-184e04e69839b766c5d9544ac1454002c44401c1423ef4497fb53ff8846e8837.png); }
.site-base .c-live-panel__content {
position: absolute;
left: 43.7317784257%;
right: 0;
top: 15%;
z-index: 0;
container-type: inline-size; }
@media (min-width: 61.25em) {
.site-base .c-live-panel__content {
top: 25%; } }
.site-base .c-live-panel__timings {
margin: 0 0 16px 0;
color: var(--tertiary-color);
text-transform: uppercase;
line-height: 1; }
.site-base .c-live-panel__actions {
margin: 16px 0 24px; }
.site-base .c-live-panel__actions .c-button {
border-radius: var(--radius-pill);
color: var(--on-secondary-color);
background-color: var(--secondary-color);
margin-right: 16px; }
.site-base .c-live-panel__actions .c-button:hover {
background: var(--secondary-color); }
.site-base .c-live-panel__onair {
display: flex;
align-items: baseline;
color: var(--tertiary-color);
text-transform: uppercase;
font-weight: bold;
position: relative;
padding: 4px 16px 0 28px; }
.site-base .c-live-panel__onair-key {
white-space: nowrap; }
.site-base .c-live-panel__onair-value {
font-weight: normal;
margin-left: 4px; }
.site-base .c-live-panel__onair .o-icon {
margin-right: 8px;
position: absolute;
left: 0;
top: 0; }
.site-base .c-live-panel .o-icon {
fill: var(--tertiary-color); }
.site-base .c-live-panel__hitlist {
--border-width: 1px;
margin-left: calc(-1 * var(--border-width));
margin-right: 8px;
border-radius: var(--radius);
border: var(--border-width) solid oklch(from var(--primary-color) calc(0.9*l) c h);
overflow: hidden; }
.site-base .c-live-panel__button {
border-radius: var(--radius-pill);
background: #E72413; }
.site-base .c-live-panel__button:hover {
background: #242424; }
.site-base .c-live-panel__footer {
background: #FFF;
display: flex;
align-items: center;
position: relative;
z-index: 1;
padding: 1.4577259475% 2.915451895%; }
.site-base .c-live-panel__footer-wrapper {
display: flex;
align-items: baseline;
min-width: 0; }
.site-base .c-live-panel__footer-title {
font-size: 34px;
font-weight: bold;
text-transform: uppercase;
margin-left: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
color: #3D3D3D;
padding-right: 24px; }
.site-base .c-live-panel__footer-actions {
margin-left: auto;
white-space: nowrap; }
.site-base .c-live-panel__placeholder {
background-image: url(/assets/live-panel-placeholder-184e04e69839b766c5d9544ac1454002c44401c1423ef4497fb53ff8846e8837.png); }
.site-base .c-live-panel--vote {
display: block !important;
color: #FFF; }
.site-base .c-live-panel--vote__title {
color: #FFF; }
@media (max-width: 46.24em) {
.site-base .c-live-panel--vote .c-live-panel__main {
padding: 0;
background-image: none !important; } }
.site-base .c-live-panel--vote .c-live-panel__content {
left: 20px;
bottom: 26px;
top: auto;
display: flex;
flex-direction: column;
right: auto; }
@media (max-width: 46.24em) {
.site-base .c-live-panel--vote .c-live-panel__content {
display: none; } }
@media (min-width: 61.25em) {
.site-base .c-live-panel--vote .c-live-panel__content {
left: 48px; } }
.site-base .c-live-panel--vote .c-live-panel__actions {
margin: 0; }
.site-base .c-live-panel--vote .c-live-panel__actions .c-button {
margin-right: 4px;
margin-bottom: 4px; }
@media (min-width: 61.25em) {
.site-base .c-live-panel--vote .c-live-panel__actions .c-button {
margin-right: 8px; } }
.site-base .c-button {
background: #E72413;
color: #FFF;
display: inline-flex;
text-transform: uppercase;
cursor: pointer;
height: 36px;
line-height: 36px;
white-space: nowrap;
font-weight: bold;
font-size: 24px;
padding: 0 10px;
position: relative;
transition: background .1s ease-in;
align-items: center;
font-family: "Cervo";
text-decoration: none; }
@media (min-width: 46.25em) {
.site-base .c-button {
padding: 0 20px; } }
.site-base .c-button .o-icon {
fill: #FFF;
margin-right: 8px; }
.site-base .c-button--wide {
justify-content: center;
width: 100%; }
@media (min-width: 46.25em) {
.site-base .c-button--normal\@tablet {
width: auto; } }
.site-base .c-button--small {
font-size: 18px; }
.site-base .c-button--large {
font-size: 24px;
height: 42px;
line-height: 42px; }
@media (min-width: 46.25em) {
.site-base .c-button--large {
height: 50px;
line-height: 50px; } }
.site-base .c-button--large .o-icon {
width: 30px;
height: 30px; }
.site-base .c-button--rounded {
border-radius: 5px; }
.site-base .c-button:hover {
background: #b81d0f; }
.site-base .c-button--white {
background: #FFF;
color: #E72413 !important;
text-decoration: none !important; }
.site-base .c-button--white:hover {
background-color: #e6e6e6; }
.site-base .c-button--base {
background: #E72413; }
.site-base .c-button--base:hover {
background: #b81d0f; }
.site-base .c-button--base .o-icon {
fill: #FFF; }
.site-base .c-button--secondary {
background: #3D3D3D; }
.site-base .c-button--secondary:hover {
background: #242424; }
.site-base .c-button--tertiary {
background: #FAD424; }
.site-base .c-button--tertiary:hover {
background: #e6be05; }
.site-base .c-button--themed {
background: var(--secondary-color); }
.site-base .c-button--themed:hover {
background: var(--secondary-color); }
@media (max-width: 46.24em) {
.site-base .c-button--with-icon span {
display: none; }
.site-base .c-button--with-icon .o-icon {
margin-right: 0; } }
.site-base .c-button--circle {
background-color: #E72413;
color: #FFF; }
.site-base .c-button--circle .o-icon {
fill: #FFF; }
.site-base .c-button--icon {
width: 40px;
height: 40px; }
.site-base .c-button--disabled {
cursor: default; }
@media (max-width: 46.24em) {
.site-base .c-channels {
display: none !important; } }
@media (min-width: 81.25em) {
.site-base .c-channels {
display: flex;
flex-direction: column; } }
@media (max-width: 81.24em) {
.site-base .c-channels {
margin-top: 1.4577259475%; } }
@media (max-width: 81.24em) {
.site-base .c-channels__title {
display: none; } }
.site-base .c-channels__list {
display: flex; }
@media (min-width: 81.25em) {
.site-base .c-channels__list {
flex: 1;
flex-direction: column; } }
@media (min-width: 46.25em) {
.site-base .c-channels .c-button {
margin: 1.4577259475% 0 0 0; } }
@media (min-width: 46.25em) and (max-width: 81.24em) {
.site-base .c-channels .o-channel:nth-child(2) {
margin: 0 1.4577259475%; }
.site-base .c-channels .o-channel:nth-child(4) {
display: none; } }
@media (min-width: 81.25em) {
.site-base .c-channels .o-channel {
margin-bottom: 5px; }
.site-base .c-channels .o-channel:last-child {
margin-bottom: 0; } }
.site-base .c-footer {
position: relative;
text-align: center;
background: #E72413;
color: #FFF;
padding: 24px 0; }
@media (min-width: 46.25em) {
.site-base .c-footer {
text-align: left; } }
.site-base .c-footer a {
color: #FFF;
display: inline-block; }
.site-base .c-footer__logo {
fill: #FFF; }
.site-base .c-doormat {
font-family: "Cervo"; }
@media (min-width: 46.25em) {
.site-base .c-doormat {
display: flex;
flex-wrap: wrap;
align-items: center; } }
.site-base .c-doormat__item {
margin: 24px 0; }
@media (min-width: 46.25em) {
.site-base .c-doormat__item {
margin: 0 1.4577259475% 0 0; } }
@media (max-width: 81.24em) {
.site-base .c-doormat__item--logo {
text-align: center;
margin-bottom: 24px;
flex-basis: 100%; } }
@media (min-width: 81.25em) {
.site-base .c-doormat__item--logo {
width: 32.361516035%; } }
@media (min-width: 46.25em) {
.site-base .c-doormat__item--menu {
width: 57.7259475219%;
display: flex; } }
@media (min-width: 61.25em) {
.site-base .c-doormat__item--menu {
width: 40.8163265306%; } }
.site-base .c-doormat__item:last-child {
margin-right: 0;
margin-left: auto; }
.site-base .c-doormat--downloads {
width: 15.4518950437%; }
.site-base .c-doormat--downloads a {
display: inline-block; }
.site-base .c-doormat__title {
text-transform: uppercase;
font-size: 24px;
margin-bottom: 16px; }
@media (min-width: 46.25em) {
.site-base .c-doormat .o-list {
width: 49.2711370262%; } }
.site-base .c-playlist {
list-style: none;
padding: 0;
margin: 0; }
.site-base .c-playlist__item {
position: relative; }
.site-base .c-playlist__item--hidden {
margin-bottom: 32px; }
.site-base .c-playlist__item--hidden .o-playlist {
filter: blur(8px);
user-select: none; }
.site-base .c-player {
align-items: center;
display: flex;
color: #FFF;
cursor: pointer;
flex-direction: row;
position: relative;
z-index: 1;
padding: 0 8px 0 0;
height: 48px;
background-size: cover; }
@media (min-width: 46.25em) {
.site-base .c-player {
flex-direction: column;
height: 185px;
min-height: 155px;
text-align: center;
padding-left: 8px; } }
@media (min-width: 46.25em) {
.site-base .c-player {
height: 90px;
min-height: 90px;
position: relative;
width: 85%;
margin: auto;
left: 5px;
bottom: 10px;
flex-direction: row; } }
.site-base .c-player__channel {
width: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; }
@media (min-width: 46.25em) {
.site-base .c-player__channel {
display: none; } }
.site-base .c-player__channel-img {
width: 100%;
max-height: 48px;
display: inline-block; }
@media (min-width: 46.25em) {
.site-base .c-player__channel-img {
max-width: 90px; } }
.site-base .c-player__title, .site-base .c-player__artist, .site-base .c-player__now {
font-family: "Cervo";
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
@media (min-width: 46.25em) {
.site-base .c-player__title, .site-base .c-player__artist, .site-base .c-player__now {
text-align: left; } }
.site-base .c-player__now {
font-size: 20px;
display: none; }
@media (min-width: 46.25em) {
.site-base .c-player__now {
display: block;
margin-bottom: 4px; } }
@media (min-width: 20em) and (max-width: 46.24em) {
.site-base .c-player__artist {
margin-right: 4px; }
.site-base .c-player__artist:after {
content: ' - '; } }
.site-base .c-player__icon {
width: 22px;
height: 22px;
flex-shrink: 0; }
@media (min-width: 46.25em) {
.site-base .c-player__icon {
min-width: 32px;
width: 32px;
height: 32px; } }
@media (min-width: 61.25em) {
.site-base .c-player__icon {
width: 44px;
height: 44px; } }
.site-base .c-player__content {
flex: 1; }
@media (min-width: 20em) and (max-width: 46.24em) {
.site-base .c-player__content {
display: flex; } }
@media (min-width: 46.25em) {
.site-base .c-player__content {
margin-right: 4px; } }
.site-base .c-share {
display: flex;
align-items: center;
margin: 24px 0;
transition: opacity .35s ease-in-out; }
.site-base .c-share__title {
color: #3D3D3D;
font-weight: bold;
font-size: 24px;
margin-bottom: 0;
text-transform: uppercase;
font-family: "Cervo"; }
@media (max-width: 46.24em) {
.site-base .c-share__title {
display: none; } }
.site-base .c-share__link-icon {
font-size: 24px; }
@media (min-width: 46.25em) {
.site-base .c-share__link-icon {
font-size: 32px; } }
.site-base .c-share a {
text-decoration: none;
color: #E72413; }
.site-base .c-share > * {
margin: 0 24px 0 0; }
.site-base .c-vote {
padding: 40px 16px 16px;
text-align: center; }
@media (min-width: 46.25em) {
.site-base .c-vote {
position: absolute;
right: 0;
padding: 30px 0 0;
text-align: left;
width: 49.2711370262%;
bottom: 30px; } }
@media (min-width: 61.25em) {
.site-base .c-vote {
right: 30px; } }
.site-base .c-vote__title {
margin-bottom: 8px;
font-size: 24px;
white-space: nowrap;
color: var(--tertiary-color); }
@media (min-width: 61.25em) {
.site-base .c-vote__title {
margin-bottom: 24px;
font-size: 32px; } }
.site-base .c-vote__list {
display: flex;
align-items: flex-end; }
@media (max-width: 46.24em) {
.site-base .c-vote__list {
justify-content: center; } }
.site-base .c-vote__list-item {
margin-right: 1.4577259475%;
flex: 1;
max-width: 49.2711370262%;
/*@include mq(tablet) {
max-width: span(5 of 12);
}*/
width: 100%; }
.site-base .c-hitlist__header {
background: #FFF;
margin-bottom: 32px;
padding-bottom: 24px; }
.site-base .c-hitlist__header__title {
display: flex;
flex-direction: column;
justify-content: center; }
@media (min-width: 46.25em) {
.site-base .c-hitlist__header__title {
flex-direction: row; } }
.site-base .c-hitlist__header__title .o-page__title {
display: inline-flex; }
.site-base .c-hitlist__header .o-article__wrapper {
padding: 0; }
.site-base .c-hitlist__header .o-select {
max-width: 200px;
align-self: center; }
.site-base .c-hitlist__heading {
font-size: 32px; }
.site-base .c-hitlist__footer {
text-align: right; }
.site-base .c-hitlist__pagination {
display: inline-block; }
.site-base .c-hitlist__pagination_item {
display: inline; }
.site-base .c-hitlist__pagination_item a {
text-decoration: none;
font-family: Cervo;
font-weight: 600;
color: #3D3D3D;
margin-right: 8px;
font-size: 1.1em; }
.site-base .c-hitlist__pagination_item--active a {
color: #E72413; }
.site-base .c-hitlist__pagination_button a {
background-color: #3D3D3D;
color: #FFF;
padding: 4px 16px; }
.site-base .c-omnyplayer-wrapper {
--button-color: #E72413;
--text-color: #3D3D3D;
--background-color: #eee;
--highlight-color: #ddd; }
.site-base .c-login {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5000; }
.site-base .c-login__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6); }
.site-base .c-login__main {
position: relative;
z-index: 5001;
width: 500px;
padding: 30px;
margin: 30vh auto;
background-color: white; }
.site-base .trigger-change {
display: block; }
.site-base {
--newsletter-box-shadow: 0 2px 4px 0 rgba(#000000, 0.3);
--newsletter-background-color: #F2F2F2;
--button-color: #ed3624; }
.site-base .o-newsletter {
background-color: white;
min-height: 250px;
margin-bottom: 20px; }
@media screen and (max-width: 700px) {
.site-base .o-newsletter {
padding: 15px 10px; } }
.site-base .c-newsletter {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 32px 10px; }
@media (max-width: 700px) {
.site-base .c-newsletter {
padding: 10px; } }
.site-base .c-newsletter__title {
line-height: 1em; }
.site-base .c-newsletter__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%; }
.site-base .c-newsletter__form {
width: 100%;
display: grid;
overflow: hidden;
grid-template-columns: 1fr 150px;
grid-auto-rows: 40px;
grid-column-gap: 10px; }
@media (max-width: 700px) {
.site-base .c-newsletter__form {
grid-template-columns: 1fr;
grid-template-rows: 40px 40px;
grid-row-gap: 10px; } }
.site-base .c-newsletter__button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: end;
height: 100%;
background-color: var(--button-color); }
.site-base .c-newsletter__text {
margin: 0.5em;
font-size: 0.7em;
color: #717180; }
.site-base .c-newsletter__error, .site-base .c-newsletter__success {
min-height: 2em;
font-size: large; }
.site-base .c-newsletter input[type="text"] {
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 12px;
font-size: 1em;
font-family: "Qarla"; }
.site-base .c-newsletter-container {
margin: 0 auto;
padding: 50px 35px;
max-width: 780px;
max-height: 150px;
margin-bottom: 100px;
background-image: url(/assets/qmusic-background-newsletter-505f9dd919fe6e18774de0353f5275350bbcc8f8c663bd422f913240acf0e1dc.jpg);
box-shadow: var(--newsletter-box-shadow); }
@media screen and (max-width: 700px) {
.site-base .c-newsletter-container {
padding: 15px 10px;
margin: 0 10px 150px 0; } }
.site-base .c-newsletter-container .c-newsletter {
background-color: var(--newsletter-background-color);
box-shadow: var(--newsletter-box-shadow); }
.site-base .c-a11y-menu__link {
text-transform: uppercase;
display: inline-block;
font-weight: bold;
font-size: 1.375rem;
color: #3D3D3D;
font-family: "Cervo";
text-decoration: none;
padding: 0.313rem 1rem; }
.site-base .c-a11y-menu__link:focus {
color: #ed3624; }
.site-base .c-search {
border: 1px solid #8A8A8A;
padding: .5rem .75rem;
border-radius: 5px;
margin: 22px;
position: relative; }
.site-base .c-search:focus-within {
box-shadow: 0 0 0 4px rgba(59, 150, 241, 0.4), inset 0 0 0 1px #3B96F1;
border-color: #3B96F1; }
.site-base .c-search__input {
appearance: none;
-webkit-appearance: none;
font-size: 15px;
outline: none;
box-shadow: none;
background: transparent; }
.site-base .c-search__input:not(:valid) + .c-search__clear-button {
display: none; }
.site-base .c-search__button {
background: white; }
.site-base .c-search__button-icon {
width: 24px;
height: 24px; }
.site-base .c-search__clear-button {
position: absolute;
right: 2.25rem;
top: 0.188rem;
width: 2rem;
height: 2rem; }
.site-base .c-search__submit-button {
width: 2rem;
height: 2rem;
position: absolute;
right: 0.188rem;
top: 0.188rem; }
.site-base .c-sponsors {
position: relative;
cursor: default;
z-index: 2;
list-style: none;
margin: 0;
padding: 0 0 0 8px;
display: flex;
background-color: #3D3D3D; }
.site-base .c-sponsors__item {
text-transform: uppercase;
margin-left: 4px;
font-size: 16px;
font-family: "Cervo";
font-weight: 600;
color: #ffffff;
height: 28px; }
.site-base .c-sponsors__name {
cursor: pointer; }
.site-base .c-sponsors .c-sponsors__item:not(.c-sponsors__title):not(:last-child):after {
content: ", ";
margin-left: -2px; }
.site-base .c-partner {
z-index: 2;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center; }
.site-base .c-partner .c-banner {
width: 100%;
height: auto;
max-width: 798px; }
.site-base .c-partner .c-banner figure {
margin: 0; }
.site-base #c-partner-desktop {
display: none;
padding-top: 10px;
margin-bottom: -30px; }
@media (min-width: 46.25em) {
.site-base #c-partner-desktop {
display: flex; } }
.site-base #c-partner-desktop .c-banner--desktop_content {
margin: 0 20px; }
.site-base #c-partner-mobile {
display: flex; }
@media (min-width: 46.25em) {
.site-base #c-partner-mobile {
display: none; } }
.site-base #c-partner-mobile .c-banner--mobile_content {
margin: 0 20px; }
.site-base #c-partner-in-page {
padding-top: 20px;
padding-bottom: 20px;
background-color: white; }
.site-base #c-partner-in-page a {
border: none !important; }
.site-base .c-corporate-footer {
background: #FFF;
color: #3D3D3D;
font-size: 15px; }
.site-base .c-corporate-footer__content {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column; }
@media (min-width: 46.25em) {
.site-base .c-corporate-footer__content {
flex-direction: row; } }
.site-base .c-corporate-footer__details {
padding: 15px 0;
margin: 0;
display: flex;
align-items: center;
flex-direction: column;
line-height: 1; }
@media (min-width: 46.25em) {
.site-base .c-corporate-footer__details {
flex-direction: row; } }
.site-base .c-corporate-footer__img {
margin-bottom: 12px;
width: 67px; }
@media (min-width: 46.25em) {
.site-base .c-corporate-footer__img {
margin: 0 30px 0 0; } }
.site-base .c-corporate-footer span {
margin: 0 6px; }
@media (max-width: 46.24em) {
.site-base .c-corporate-footer span {
display: block;
text-indent: -9000px; } }
.site-base .embed-placeholder {
position: relative;
overflow: hidden;
max-width: 100%;
height: fit-content;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border: 1px solid #e6e6e6;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: left; }
.site-base .embed-placeholder__text {
margin-bottom: 0 !important; }
.site-base .embed-placeholder a {
width: fit-content; }
.site-base .partner-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: none;
justify-content: center;
align-items: center;
z-index: 900;
background-color: rgba(0, 0, 0, 0.7); }
.site-base .partner-overlay__close_button {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: 0;
height: 64px;
width: 60px; }
.site-base .partner-overlay__close_button svg {
pointer-events: none; }
.site-base .partner-overlay--show {
display: flex !important; }
.site-base .c-a11y-menu {
padding: 1rem 1.5rem;
position: fixed;
left: -99999rem;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2); }
.site-base .c-a11y-menu:focus-within {
background-color: #ffffff;
display: block;
z-index: 100000;
left: 0; }
.site-base .c-a11y-menu__link {
margin-right: 1rem; }
.site-base .c-a11y-menu__link:focus {
color: #ed3624; }
.site-base .c-a11y-menu__link:last-child {
margin-right: 0; }
.site-base .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; }
.site-base .c-accessibility h1, .site-base .c-accessibility h2, .site-base .c-accessibility h3 {
margin-top: 2em; }
.site-base .accessibility__list {
margin-left: 1vw; }
.site-base .accessibility__list dd {
margin-top: 8px;
margin-bottom: 4px;
margin-left: 1vw; }
.site-base .accessibility__list dt {
font-size: 20px;
font-weight: 800; }
.site-base .accessibility__header {
margin: 2rem 0;
font-size: 24px; }
.site-base .accessibility {
margin: 0 auto;
max-width: 70ch;
padding: 20px;
font-size: 18px; }
.site-base .accessibility__subtitle {
padding: 8px 0; }
.site-base .accessibility__updated {
font-size: smaller; }
@media (max-width: 46.24em) {
.site-base .admin-mode #admin-bar {
display: none; } }
.site-base .admin-mode body {
padding-top: 0px !important; }
@media (min-width: 46.25em) {
.site-base .admin-mode .c-menu {
top: 32px; }
.site-base .admin-mode body {
padding-top: 32px !important; } }
.site-base .formulate-input {
margin-bottom: 1.5em; }
.site-base .formulate-input .formulate-input-label {
display: block;
line-height: 1.5;
font-size: .9em;
font-weight: 600;
margin-bottom: .1em; }
.site-base .formulate-input .formulate-input-label--before + .formulate-input-help--before {
margin-top: -.25em;
margin-bottom: .75em; }
.site-base .formulate-input .formulate-input-element {
margin-bottom: .1em; }
.site-base .formulate-input .formulate-input-help {
color: #6d6d6d;
font-size: .7em;
font-weight: 400;
line-height: 1.5;
margin-bottom: .25em; }
.site-base .formulate-input .formulate-input-errors {
list-style-type: none;
padding: 0;
margin: 0; }
.site-base .formulate-input .formulate-input-error,
.site-base .formulate-input .formulate-file-upload-error {
color: #960505;
font-size: .8em;
font-weight: 300;
line-height: 1.5;
margin-bottom: .25em; }
.site-base .formulate-input:last-child {
margin-bottom: 0; }
.site-base .formulate-input[data-classification='text'] input {
appearance: none;
border: 1px solid #cecece;
box-sizing: border-box;
font-size: .9em;
padding: .75em;
display: block;
width: 100%;
font-weight: 400;
line-height: 1.2em;
margin: 0; }
.site-base .formulate-input[data-classification='text'] input::placeholder {
color: #ed3624;
line-height: normal; }
.site-base .formulate-input[data-classification='text'] input:focus {
outline: 0;
border: 1px solid #ed3624; }
.site-base .formulate-input[data-classification='text'] .formulate-input-element--date input,
.site-base .formulate-input[data-classification='text'] .formulate-input-element--month input,
.site-base .formulate-input[data-classification='text'] .formulate-input-element--week input,
.site-base .formulate-input[data-classification='text'] .formulate-input-element--datetime-local input {
min-height: 2.2em; }
.site-base .formulate-input[data-classification='text'] .formulate-input-element--search {
position: relative; }
.site-base .formulate-input[data-classification='text'] .formulate-input-element--search::before {
content: '';
width: 2em;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('data:image/svg+xml;utf8,');
background-size: 1em 1em;
background-repeat: no-repeat;
background-position: center;
pointer-events: none; }
.site-base .formulate-input[data-classification='text'] .formulate-input-element--search input {
padding-left: 2em; }
.site-base .formulate-input[data-classification='text'] input[type="color"] {
height: 1.1em;
box-sizing: content-box;
width: auto;
min-width: 5em; }
.site-base .formulate-input[data-classification='text'] input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0 0 0 1.5em;
display: flex;
align-items: center;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: .9em .9em;
background-position: left .1em; }
.site-base .formulate-input[data-classification='text'] input[type="color"]::-webkit-color-swatch {
display: block;
height: 1em;
border-radius: .2em;
border: 0;
flex: auto; }
.site-base .formulate-input[data-classification='text'] input[type="color"]::-moz-color-swatch {
display: block;
height: 1em;
border-radius: .2em;
border: 0;
flex: auto; }
.site-base .formulate-input[data-classification='slider'] .formulate-input-element--range {
display: flex;
align-items: center; }
.site-base .formulate-input[data-classification='slider'] .formulate-input-element-range-value {
font-size: .9em;
line-height: 1;
margin-left: .5em;
background-color: #efefef;
padding: .25em .3em;
border-radius: .25em;
color: #6d6d6d;
font-variant-numeric: tabular-nums; }
.site-base .formulate-input[data-classification='slider'] input {
appearance: none;
width: 100%;
font-size: 1em;
padding: .5em 0; }
.site-base .formulate-input[data-classification='slider'] input:focus {
outline: 0; }
.site-base .formulate-input[data-classification='slider'] input::-webkit-slider-thumb {
cursor: pointer;
appearance: none;
width: 1em;
height: 1em;
border-radius: 1em;
border: 0;
background-color: #ed3624;
margin-top: calc(-.5em + 2px); }
.site-base .formulate-input[data-classification='slider'] input::-moz-range-thumb {
cursor: pointer;
appearance: none;
width: 1em;
height: 1em;
border-radius: 1em;
border: 0;
background-color: #ed3624;
margin-top: calc(-.5em + 2px); }
.site-base .formulate-input[data-classification='slider'] input::-ms-thumb {
cursor: pointer;
appearance: none;
width: 1em;
height: 1em;
border-radius: 1em;
border: 0;
background-color: #ed3624;
margin-top: calc(-.5em + 2px); }
.site-base .formulate-input[data-classification='slider'] input::-webkit-slider-runnable-track {
appearance: none;
width: 100%;
height: 4px;
background-color: #efefef;
border-radius: 3px;
margin: 0;
padding: 0; }
.site-base .formulate-input[data-classification='slider'] input::-moz-range-track {
appearance: none;
width: 100%;
height: 4px;
background-color: #efefef;
border-radius: 3px;
margin: 0;
padding: 0; }
.site-base .formulate-input[data-classification='textarea'] textarea {
appearance: none;
border-radius: .3em;
border: 1px solid #cecece;
box-sizing: border-box;
font-size: .9em;
padding: .75em;
display: block;
width: 100%;
font-weight: 400;
line-height: 1.2em;
margin: 0; }
.site-base .formulate-input[data-classification='textarea'] textarea::placeholder {
color: #ed3624;
line-height: normal; }
.site-base .formulate-input[data-classification='textarea'] textarea:focus {
outline: 0;
border: 1px solid #ed3624; }
.site-base .formulate-input[data-classification='select'] .formulate-input-element {
position: relative; }
.site-base .formulate-input[data-classification='select'] .formulate-input-element::before {
content: '';
width: 0;
height: 0;
border: .3em solid transparent;
border-top-color: #cecece;
border-bottom-width: 0;
top: 50%;
margin-top: -.1em;
right: 1em;
position: absolute; }
.site-base .formulate-input[data-classification='select'] .formulate-input-element[data-multiple]::before {
display: none; }
.site-base .formulate-input[data-classification='select'] select {
appearance: none;
border-radius: .3em;
border: 1px solid #cecece;
box-sizing: border-box;
font-size: .9em;
padding: .75em;
display: block;
width: 100%;
font-weight: 400;
line-height: 1.2em;
margin: 0;
padding-right: 2em; }
.site-base .formulate-input[data-classification='select'] select::placeholder {
color: #ed3624;
line-height: normal; }
.site-base .formulate-input[data-classification='select'] select:focus {
outline: 0;
border: 1px solid #ed3624; }
.site-base .formulate-input[data-classification='select'] select option {
color: #000000; }
.site-base .formulate-input[data-classification='select'] select option:disabled {
color: #ed3624; }
.site-base .formulate-input[data-classification='select'] select[multiple] {
padding: 0;
overflow-y: auto; }
.site-base .formulate-input[data-classification='select'] select[multiple] option {
padding: 0.75em; }
.site-base .formulate-input[data-classification='select'] select[data-placeholder-selected] {
color: #ed3624; }
.site-base .formulate-input[data-classification='box'] .formulate-input-wrapper {
display: flex;
align-items: center; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element {
display: flex;
align-items: center; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input {
position: absolute;
left: -999px;
opacity: 0;
pointer-events: none; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element-decorator {
display: block;
width: 1em;
height: 1em;
border-radius: .25em;
border: 1px solid #cecece;
position: relative; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element-decorator::before {
content: '';
display: block;
background-size: contain;
background-position: right;
width: calc(100% - .125em);
height: calc(100% - .125em);
box-sizing: border-box;
position: absolute;
top: .0625em;
left: .0625em; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator {
border-radius: 1em; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator::before {
border-radius: 1em;
width: calc(100% - .5em);
height: calc(100% - .5em);
top: .25em;
left: .25em; }
.site-base .formulate-input[data-classification='box'][data-type="checkbox"] .formulate-input-label {
font-weight: normal; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"] ~ .formulate-input-element-decorator {
border-color: #ed3624; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"]:checked ~ .formulate-input-element-decorator::before {
background-color: #ed3624;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator {
border-color: #ed3624; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator::before {
background-color: #ed3624; }
.site-base .formulate-input[data-classification='box'] .formulate-input-element input:focus ~ .formulate-input-element-decorator {
border-color: #ed3624; }
.site-base .formulate-input[data-classification='box'] .formulate-input-label--after {
margin-left: 1.5em; }
.site-base .formulate-input[data-classification='box'] .formulate-input-label--before {
margin-right: .5em; }
.site-base .formulate-input[data-classification='group'] .formulate-input-group-item {
margin-bottom: .5em; }
.site-base .formulate-input[data-classification='group'] > .formulate-input-wrapper > .formulate-input-label {
margin-bottom: .5em; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] {
padding: 1em;
border: 1px solid #efefef;
border-radius: .3em; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-grouping {
margin: -1em -1em 0 -1em; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable {
padding: 1em 3em 1em 1em;
border-bottom: 1px solid #efefef;
position: relative; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove {
position: absolute;
display: block;
top: calc(50% - .65em + .5em);
width: 1.3em;
height: 1.3em;
background-color: #cecece;
right: .85em;
border-radius: 1.3em;
cursor: pointer;
transition: background-color .2s;
overflow: hidden;
text-indent: -1000px; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove[data-disabled] {
opacity: .2;
pointer-events: none; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove::before, .site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove::after {
content: '';
position: absolute;
top: calc(50% - .1em);
left: .325em;
display: block;
width: .65em;
height: .2em;
background-color: white;
transform-origin: center center;
transition: transform .25s; }
@media (pointer: fine) {
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove:hover {
background-color: #dc2c2c; }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove:hover::after, .site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove:hover::before {
height: .2em;
width: .75em;
left: .25em;
top: calc(50% - .075em); }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove:hover::after {
transform: rotate(45deg); }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable-remove:hover::before {
transform: rotate(-45deg); } }
.site-base .formulate-input[data-classification='group'] [data-is-repeatable] .formulate-input-group-repeatable:last-child {
margin-bottom: 1em; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area {
width: 33%;
height: 0;
margin: auto;
position: relative;
padding-bottom: 33%; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input {
cursor: pointer;
appearance: none;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area[data-has-files] {
padding: 0;
padding-bottom: 33%; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area[data-has-files] input {
display: none; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area-mask {
border-radius: .4em;
position: absolute;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 2px dashed #ed3624;
z-index: 2;
border-radius: 999px; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area-mask::before {
content: '';
background-color: #ed3624;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
width: 2em;
height: 2em;
position: absolute;
pointer-events: none; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask,
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask,
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask {
border-color: #ed3624; }
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask::before,
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask::before,
.site-base .formulate-input[data-classification="file"] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask::before {
background-color: #ed3624; }
.site-base .formulate-input[data-classification="file"] .formulate-files {
list-style-type: none;
margin: 0;
padding: 0; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-add {
appearance: none;
display: block;
min-width: 75px;
border: 1px solid #ed3624;
color: #ed3624;
padding: 5px;
border-radius: 5px;
text-align: center;
position: relative;
font-size: 13px;
cursor: pointer;
margin: .5em 0; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-add input {
position: absolute;
display: block;
cursor: pointer; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-add input::-webkit-file-upload-button {
display: none; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress {
background-color: #cecece;
height: .3em;
border-radius: 1.25em;
width: 5em;
overflow: hidden;
position: relative;
flex: 0 0 5em;
right: .75em;
bottom: 0;
transition: height .25s, width .25s, flex-basis .25s;
z-index: 2;
position: absolute; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
opacity: 0;
transform: scale(0.08);
background-color: #ffffff;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-size: 77%;
-webkit-mask-size: 77%;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
z-index: 3; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished] {
width: 1.25em;
height: 1.25em;
flex: 0 0 1.25em; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished]::before {
transition: transform .25s .2s, opacity .25s .2s;
transform: scale(1);
opacity: 1; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished] {
transition: height .25s, width .25s, left .25s, top, .25s, border-radius .25s;
width: .3em;
flex: 0 0 .3em;
height: 100%;
right: 0;
border-radius: 0 .23em .23em 0;
position: relative; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished]::before {
transition: opacity .1s;
opacity: 0; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress .formulate-file-progress-inner {
background-color: #ed3624;
width: 1%;
position: absolute;
left: 0;
bottom: 0;
top: 0;
z-index: 2; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-name {
padding-left: 1.5em;
padding-right: 2em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: auto;
display: none; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-name::before {
position: absolute;
left: .7em;
top: 50%;
margin-top: -.7em;
background-color: #ed3624;
content: '';
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
width: 1.25em;
height: 1.25em;
display: inline-block;
margin-right: .5em; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-remove {
width: 1.25em;
height: 1.25em;
border-radius: 1em;
border: 1px solid #ed3624;
background-color: #ed3624;
background-image: url('data:image/svg+xml;utf8,');
/*mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-size: .6em;
-webkit-mask-size: .6em;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;*/
background-position: center;
background-size: .6em;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
right: .75em;
z-index: 3;
transition: transform .25s;
bottom: 0;
background-color: #ed3624; }
@media (pointer: fine) {
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-remove:hover {
transform: scale(1.5); } }
.site-base .formulate-input[data-classification="file"] .formulate-files li {
display: block; }
.site-base .formulate-input[data-classification="file"] .formulate-files li[data-has-error] .formulate-file-progress {
background-color: #dc2c2c; }
.site-base .formulate-input[data-classification="file"] .formulate-files li[data-has-preview] .formulate-file-name:before {
display: none; }
.site-base .formulate-input[data-classification="file"] .formulate-files li + li {
margin-top: .5em; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file {
appearance: none;
border-radius: .3em;
border: 1px solid #cecece;
box-sizing: border-box;
font-size: .9em;
display: block;
width: 100%;
font-weight: 400;
line-height: 1.2em;
margin: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
border-radius: 999px;
padding-bottom: 100%; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file::placeholder {
color: #ed3624;
line-height: normal; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file:focus {
outline: 0;
border: 1px solid #ed3624; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file ::-webkit-progress-bar {
appearance: none;
height: .5em;
border-radius: .5em;
overflow: hidden; }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview {
width: 100%;
flex: 0 0 3em;
position: absolute;
padding-bottom: 100%;
z-index: 2;
left: 0;
top: 0;
box-shadow: 0 0 0 1px #efefef;
transition: transform .25s, box-shadow .25s, background-color .25s;
border-radius: 999px; }
@media (pointer: fine) {
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview:hover {
/* transition-delay: .2s;
transform: scale(3);
background-color: #ffffff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);*/ } }
.site-base .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview img {
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
top: 0;
object-fit: cover;
border-radius: 999px;
transition: all .25s; }
.site-base .formulate-input[data-classification="file"] [data-type="image"] .formulate-input-upload-area .formulate-input-upload-area-mask::before {
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.site-base .formulate-form-errors {
margin: .75em 0;
padding: 0;
list-style-type: none; }
.site-base .formulate-form-errors:first-child {
margin-top: 0; }
.site-base .formulate-form-errors:last-child {
margin-bottom: 0; }
.site-base .formulate-form-errors .formulate-form-error {
color: #960505;
font-size: .9em;
font-weight: 300;
line-height: 1.5;
margin-bottom: .25em; }
.site-base .formulate-form button.c-button {
width: 100%;
max-width: 15em;
text-align: center;
align-items: center;
justify-content: center; }
.site-base .c-profile-form {
max-width: 350px;
margin: auto; }
.site-base .c-profile-form label {
color: #3D3D3D; }
.site-base .c-profile-form .alert, .site-base .c-profile-form .c-alert-fail, .site-base .c-profile-form .c-alert-success {
text-align: center;
margin-bottom: 20px;
padding: 10px;
color: white; }
.site-base .c-profile-form .c-alert-fail {
background-color: #ed3624; }
.site-base .c-profile-form .c-alert-success {
background-color: #A8D832; }
.site-base .c-profile-form .c-house-number {
display: flex; }
.site-base .c-profile-form .c-house-number > :first-child {
margin-right: 1.5em; }
.site-base .c-article--joe-profile label {
padding: 0; }
.site-base .c-article--joe-profile.c-markup ul:not(.u-grid) li:before {
position: initial; }
.site-base .c-article--joe-profile.c-markup ul:not(.u-grid) li {
padding-left: 0; }
.site-base .c-article--joe-profile .c-profile-form {
margin-top: 5em; }
.site-base .c-article--joe-profile .c-profile-form .alert, .site-base .c-article--joe-profile .c-profile-form .c-alert-fail, .site-base .c-article--joe-profile .c-profile-form .c-alert-success {
margin-bottom: initial;
padding: initial;
font-weight: 500;
padding: 1em; }
.site-base .c-article--joe-profile .c-profile-form .c-alert-success {
color: inherit; }
@media screen and (max-width: 739px) {
.site-base .c-article--joe-profile .c-profile-form {
margin-top: 7em; } }
.site-base .c-article--joe-profile .formulate-input-element--select select {
width: 100%; }
.site-base .c-article--joe-profile .formulate-input[data-classification='box'] .formulate-input-element-decorator {
width: 25px;
height: 22.7px; }
.site-base .willy-profile select {
font-family: Mulish, sans-serif;
font-size: .9em;
padding: 0;
padding-left: .75em;
width: 100%;
font-weight: 400;
line-height: 1.2em; }
.site-base .willy-profile input[type=date] {
font-family: Mulish, sans-serif;
font-size: .9em;
padding: .9em;
padding-left: .75em;
font-weight: 400;
line-height: 1.2em; }
.site-base .app-only .c-article__header {
display: none; }
.site-base .app-only .profile-edit.c-page-header--basic {
min-height: 65px;
padding: 0; } }
.site-base #nprogress .bar {
background: #ed3624;
z-index: 3000; }
.site-base #nprogress .peg {
box-shadow: 0 0 10px #ed3624, 0 0 5px #ed3624; }
.site-base #nprogress .spinner-icon {
border-top-color: #ed3624;
border-left-color: #ed3624; }