@viewport {
   width: device-width;
   zoom:1;
}
@font-face {
  font-display: swap;
  font-family: 'source sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('https://www.oljo.de/fonts/source-sans-3-v9-latin_latin-ext-regular.woff2') format('woff2');
}
/* source-sans-3-600 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'source sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('https://www.oljo.de/fonts/source-sans-3-v9-latin_latin-ext-600.woff2') format('woff2');
}
/* source-sans-3-900 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'source sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('https://www.oljo.de/fonts/source-sans-3-v9-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
    font-family: 'source sans 3-fallback';
    size-adjust: 97.38%;
    ascent-override: 99%;
    src: local("arial");
}
/* roboto-condensed-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'roboto condensed';
  font-style: normal;
  font-weight: 300;
  src: url('https://www.oljo.de/fonts/roboto-condensed-v25-latin_latin-ext-regular.woff2') format('woff2');
}
/* roboto-condensed-700 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'roboto condensed';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.oljo.de/fonts/roboto-condensed-v25-latin_latin-ext-700.woff2') format('woff2');
}
/* orbitron-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'orbitron';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.oljo.de/fonts/orbitron-v31-latin-regular.woff2') format('woff2');
}
/* orbitron-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'orbitron';
  font-style: normal;
  font-weight: 600;
  src: url('https://www.oljo.de/fonts/orbitron-v31-latin-600.woff2') format('woff2');
}
/* orbitron-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'orbitron';
  font-style: normal;
  font-weight: 900;
  src: url('https://www.oljo.de/fonts/orbitron-v31-latin-900.woff2') format('woff2');
}
@font-face {
    font-family: 'orbitron-fallback';
    size-adjust: 97.38%;
    ascent-override: 99%;
    src: local("arial");
}
/* racing-sans-one-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'racing sans one';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/racing-sans-one-v15-latin-regular.woff2') format('woff2'); 
}
/* ==========================================================================
   html5 boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

/** * reset css */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0; 
}

strong {
	font-weight:900;
}
small { 
font-size: 90%
}
/* html5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}
body { 
    place-items: center;
    font-family: 'source sans 3','source sans 3-fallback', sans-serif;
    font-size: 13px;
    line-height: 1.23em;
    -webkit-font-smoothing: antialiased;
	color:#000;
  background-image: url("../bilder/videosbg2016.jpg");
}
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
#img-subject {
  filter: url(#sharpen);
}
.img-subject {
  filter: url(#sharpen);
}  
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse:collapse;
    border-spacing: 0;
}
img {
	max-width:100%;height:auto;display: block;margin: 0; padding: 0; 
}
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}


input[type=submit]:hover,
.button:hover {
	-webkit-appearance: button;
	background-color:#2e77bf;
	color:#fff;
}
html,
button,
input,
select,
textarea {
    color: #222;
}
h1.titel {
    display:inline;font-size: 1.3em;margin: 0;padding: 0;font-weight: 600; color: white;text-shadow: 3px 3px #000
}
.b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
           -moz-transition: opacity 500ms ease-in-out;
             -o-transition: opacity 500ms ease-in-out;
                transition: opacity 500ms ease-in-out;
                 max-width: 100%;
                   opacity: 0;
    }
    .b-lazy.b-loaded {
                   opacity: 1;
    }
.zentral-container { width: 100%;max-width: 1400px;margin-left: 0;margin-right: auto }
@media (min-width: 1401px) {
.zentral-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
}
        
.headoljopic {
width: 100%;
height: 80px;
background: url( 'https://www.oljo.de/main-Dateien/index_haupt_2025.jpg' ) no-repeat right top, -webkit-linear-gradient(left, #ba53a0, #fff);
  background: url( 'https://www.oljo.de/main-Dateien/index_haupt_2025.jpg' ) no-repeat right top, -o-linear-gradient(right, #ba53a0, #fff);
  background: url( 'https://www.oljo.de/main-Dateien/index_haupt_2025.jpg' ) no-repeat right top, -moz-linear-gradient(right, #ba53a0, #fff);
  background: url( 'https://www.oljo.de/main-Dateien/index_haupt_2025.jpg' ) no-repeat right top, linear-gradient(to right, #ba53a0, #fff);
border-bottom: 1px solid #333 
}
.hauptubera { width: 100%; height: auto; padding: 0 }
.hauptuberb { width: 100%  }
.havu { text-align: left;height: auto }
.adhead { 
float:left;
display: flex;
height: auto; 
width: 100%;
margin: 0 0 5px 0;
padding: 15px 0 0 0;
align-items: center;
justify-content: center;
background: url( 'https://www.oljo.de/main-dateien/generalwerbungef.png' ), #222;
background-repeat: no-repeat;
background-position: 2px 2px;
}
.adheadpic {
float: left;
width: 10px;
height: 90px;
float: left;
background: #fff;

}
.adheadgc {
float: left;
width: 728px;
height: auto;
}
a.zumvideo { line-height: 40px;color: #c2d9ff; }
a:hover.zumvideo { color: #fff }
span.hvu { 
color: #c3e8f4;
font-size: 75%;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
a.xx {
    color: #bee5fa;
}
a:hover.xx {
    color: #0ca0ef;
}
textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.gooad { 
    padding: 0;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center
}
nav.footernav {
    float: left;width: 100%;
}
.main-container { width: 100%;background: #fff; overflow-x: hidden  }
#promovid {
            float: left;
            padding: 0;
            margin:0;
            height: auto;
            line-height: 1em;
            font-size: 1em;
            color: #fff;
            width: 100%
          
}
#promovid
.tipp {
float: left;
width: 49%; 
min-height: 250px;
max-height: 250px;
margin: 2px 0 7px 0;
padding-top: 2px;
overflow: hidden
}
#promovid
.tippexxtra {
    float: left;
    width: 100%;
    margin: 38px 0;
    padding: 7.5% 0 0 0;
    background: #555;    
}
#promovid
.song a {
    font-size: 1.13em;
    color: #fff;
    font-weight: 900;
}
#promovid
.song a:hover {
    color: #ffd750;
}
#promovid .adbeezwerbung img.stdrt { border-radius: 5px 5px 0 0 }
#promovid .vidpicboxx { float: left;display: flex;align-items: center;width: 96%; margin:  0 2% }
#promovid .vidpic {
    width: 100%;
    height: 155px;
    background: url(../bilder/play299but.png) #efb20f;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: self-start;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    object-fit: cover;
    outline: 2px solid #5B5643;
    margin-bottom: 2px;
    border: 2px solid #000;
    border-radius: var(--mfy-radius);
}
#promovid .vidpic:hover { background: url(../bilder/play299but.png) #efb20f;background-repeat: no-repeat;background-position: center center; }
#promovid
img { height: auto;
    min-height: 220px;
    transform: scale(1.35) translateY(-25px);
    transfor-origin: center
 }
#promovid img:hover { -webkit-transition: all 800ms ease-in-out 0.1s;
    -moz-transition: all 800ms ease-in-out 0.1s;
    -o-transition: all 800ms ease-in-out 0.1s;
    transition: all 800ms ease-in-out 0.1s }   
#promovid .b-lazy.b-loaded { 
          -webkit-transition: all 800ms ease-in-out 0.1s;
    -moz-transition: all 800ms ease-in-out 0.1s;
    -o-transition: all 800ms ease-in-out 0.1s;
    transition: all 800ms ease-in-out 0.1s; 
}    
.beschnitt {  }  
.vidpic span {
    color: #fefefe !important;
    padding: 0 8px !important;
    background-color: hsla(0, 0%, 10%, 0.66);
    position: absolute;
    bottom: 5%;
    left: 82%;
    line-height: 2em;
} 
.vidpic img { clear: both;min-height: 220px;
    object-fit: cover;  }
.vidpic img:hover { transform:scale(1.2);
     -webkit-transition: all 800ms ease-in-out 0.1s;
    -moz-transition: all 800ms ease-in-out 0.1s;
    -o-transition: all 800ms ease-in-out 0.1s;
    transition: all 800ms ease-in-out 0.1s;
    z-index:1; }
.vidpic a { display: block }
#promovid .song {
        float: left;
        width: auto;
        min-height: 66px;
        margin: 0;
        padding: 5px 2.5%;
        line-height: 125%;
        color: #eee;
}                        
img.opacstand {
  width: 100%;
  height: auto;
  opacity: 0.99;
	filter: alpha(opacity=70)
	}
img.opacstand:hover {
	opacity: 0.50;
	filter: alpha(opacity=70)
	}

#linkad {
    padding: 5px 0; background: #38aeda;height: 92px;
}




/* Der Hauptcontainer */
.videosizing {
    position: relative;
    display: block;
    padding: 10px 0; /* Platz für die Balken */
    margin: 10px 0;
}

/* Die 4px Balken (Grau #ccc) */
.videosizing::before,
.videosizing::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #ccc;
    transition: opacity 0.9s ease;
    z-index: 99;
    pointer-events: none; /* WICHTIG: Erlaubt Klick auf das Video darunter */
}

.videosizing::before { top: 0; }
.videosizing::after { bottom: 0; }

/* Klasse zum Ausblenden, die per JS gesetzt wird */
.video-active::before,
.video-active::after {
    opacity: 0 !important;
}





/* ===== initializr styles ==================================================
   author: jonathan verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
.wrapper {
    width: 100%;
}

/* ===================
    all: oljo theme
   =================== */
.uw-card2-row { min-height: 80px !important }
a.uw-card2-row:hover {}
.uw-sc-mask {  padding: 8px 4 px !important }
.uw-imgcont2 { float: left; width: 6% !important; min-width: 100px !important; max-width: 100px !important;min-height: 80px !important;background-position: center !important }
.uw-scroller-text { float: left; padding: 10px 1.5% !important; border: 2px solid #666 !important }
.uw-text, .uw-headline { font-size: 11pt !important; font-weight: 900 !important }
span.uw-text {
    display: block;
    font-size: 15.5pt !important;
    color: gold !important;
    text-shadow: -1px 0 #000, 0 1px #000, 2px 0 red, 0 -1px #000;
    line-height: 150%;
    text-transform: uppercase
}
.uw-sc-snippet { font-weight: 300 !important }
.uw-scroller-text {
    flex: 1;
    text-align: left;
    background: #d0e6fc
}
.uw-w-header, .uw-w-branding {
    background-color: #d0e6fc
}
.cc-window  { margin-bottom: 0px; }   
.scrollicon{
        text-align: center;
        text-decoration:none;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#ccc;
        opacity:0.7;
        position:fixed;
        bottom:6%;
        right:3%;
        display:none;
        border:2px solid #fff;
        z-index: 10;

    }
.scrollicon div { font-weight:bold; font-size:0.85em !important; color:#222 !important; padding-top: 15px; }
.header-container {  
    background: #69afe0;
    background-size: cover;
    line-height: 11px;
    max-width: 1400px;
    font-size: 14px;
}
.navundsuche { clear: both;float: left;display: block;width: 99.72%; height: auto;font-family: 'roboto condensed',sans-serif;font-size: 15px;border: 2px solid #fff;background: #d0e6fc;padding: 0 } 
.navundsuche a, .navundsuche strong, .navundsuche b { font-family: 'roboto condensed',sans-serif }
.toptext { font-size: 1.1em;line-height: 1.23em }
.aduebervideo { outline: 1px solid #efefef; }
.topadcont { float: left;width: 60%;max-width: 60%;min-height: 300px;max-height: 300px;display: flex;justify-content: center;padding: 15px 0;text-align: center;background:url( 'https://www.oljo.de/main-dateien/general-werbungef.png' ), #333;background-repeat: no-repeat;background-position: 2px 2px; outline: 1px solid #777;outline-offset: -1px }
.indexad970 { float: left;display: block;align-content: center;justify-items: center;width: 100%;min-height: 320px;margin: 0;padding: 15px 0 6px 0;background: url(https://www.oljo.de/main-dateien/general-werbungef.png), #333;background-repeat: repeat-y;background-position: 2px 2px }
.toggleMenu {
    display:  none;
    padding: 10px 11px 32px 11px;
    border: 1px solid #eee;
    color: #fff;
    position: absolute;
    top: 6px;
    right: 5px;font-weight: 900; text-decoration: none;
    background: url( '../../imgnews/menuebgpic.png' ) #000;
    background-repeat: no-repeat;
    z-index: 1000;
}
a.holenoben { font-size: 15px;line-height: 30px }
a.platzchart { color: #efefef;font-size: 1.03em;font-weight: 900 }
a:hover.platzchart { color: #ffd750 }  
.maintag { float: left;display: block;height: auto;margin: 12px 0.75%; width: 98.5%;padding: 0;background-image: linear-gradient(to top, #000, #332300);font-size: 13px;outline: 1px solid #af7900;outline-offset: -1px } 
.maintagwtr { float: left;display: block;height: auto;margin: 12px 0.75%; width: 98.5%;padding: 0; background-image: linear-gradient(to top, #000, #333);font-size: 13px;outline: 1px solid #8a8a8a;outline-offset: -1px } 
.aazwerbemain { float: left;padding: 0 0 3px 0; width: 348px; height: 285px; background: #fff }
.werbemainneu { margin: 0 auto;padding: 7px 0 0 0;width: 340px;height: 314px;background: #efefef }
.aazwerbe { float: left;height: 241px; width: 10px;padding-top: 10px; background: #fff }
.aazwerbeneu { float: left;width: 100%;max-height: 10px; padding: 4px 0 15px 0; background: #efefef !important;margin-bottom: 1px }
.iframemantel { float:left; display: block;width: 100%;margin-top: 10px }
.livepic {
    width: 340px !important;
    min-height: 60px;
    max-height: 60px;
    margin: 0 auto;
    border-top: 1px solid #000;
    overflow: hidden
}
.liveframe2017 {
    width: 340px;
    padding: 0;
    height: 853px;
    margin: 0 auto;
    background: #000;
}
.maintaguber { float: left; display: flex;align-items: center;justify-content: center;width: 100%;height: 72px;min-height: 72px;padding: 8px 0 0 0; color: #fff;text-align: center;background-image: linear-gradient(to top, rgba(85, 85, 85, 0.3), rgba(204, 204, 204, 0.3)); }
.maintaguber span.after { color: #f8d14c;font-weight: 900;font-size: 170%;line-height: 120% }
.maintaguber span.ahrget { font-size: 2em; font-weight: 900 } 
.footervidinfo { float: left; width: 100% }
.footervidinfo p { margin-top: 10px; padding: 0 3%; line-height: 120% }
.footerplatzierung { float: left; width: 100% } 
.infopic { width: 105px; height: 64px; float: left;padding-right: 5px; }
.infopic2 { width: 105px; height: 64px; float: left;padding-left: 5px; }
.top10picstag { float: left;height: auto; width: 100%; }
.artisttag { float: left;height: auto; width: 100%; }
.platztag {
    float: left;
    margin: 1% 0 0 1.4%;
    height: auto;
    min-height: 163px;
    width: 248px;
}
.bildtag {
    display: flex;
    align-items: center;
    float: left;
    width: 96%;
    margin: 0 2% 3px 2%;
    min-height: 43px;
    max-height: 43px;
    min-height: 125px;
    padding: 15px 0 0 0;
    max-height: 111px;
    outline: 1px solid #898989;
    background: #999 url(../bilder/play299but.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.videovorstellung { float: left;display: inline;align-content: center;width: 96%;min-height: 33px;max-height: 33px;padding: 0 2%;font-size: 13px;color: #f5db03 }
.bildtag img { min-height: 200px;transform: scale(1.3) translateY(-8px) !important;object-fit: cover }
.chainter { float: left; width: 100%; margin: 10px 0 0 0 }
.texttag { float: left;display: block;min-height: 43px;max-height: 43px; width: 92%; margin: 0 3%; padding: 7px 1% 4px 1% !important; color: #fff;text-align: center;overflow: hidden }
hr.stylecharts { margin: 5px 0;height: 6px;
    background: url( '../bilder/hr-12.png' ) repeat-x 0 0;
    border: 0 }
.info_genrepla h3 { font-size: 1.13em;color: #f8d14c;padding: 0 0 5px 0 }
.numbaonetopper { float: left;display: flex;justify-content: center;width: 100%;height: auto;margin: 0 !important;padding: 0 }
.numbaonevid { margin-bottom: 8px;
    border: 1px solid rgb(0 0 0 / 70%);
    padding: 0;
    background: #eee url(../bilder/play299but.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center;
    width: 195px;
    height: auto;
    overflow: hidden;
    border-radius: 5%;
    box-shadow: 0 0 4px 3px rgb(255 255 255 / 60%), 0 0 2px 3px rgb(250 15 247 / 30%), 0 0 20px 12px rgb(175 226 255 / 20%) }

 .numbaonespec img { margin: -10.7% 0;
    height: 165px;
    transform: scale(1.38);
    object-fit: cover }
.numbaonetxt { width: 96.2%; background: #000;padding: 3px 1.9% 3px 1.9%;margin: 0;font-size: 90% !important }
.numbaonetxtkbg { 
    float: left;
    display: block;
    width: 185px;
    min-height: 60px;
    margin: 0;
    padding: 4px 5px;
    font-size: 90% !important;
    line-height: 130%;
    border: 1px solid #4a1e52;
    background: rgba(0,0,0, 0.25);
    -webkit-box-shadow: 0 3px 3px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0, 0.25);
    box-shadow: 2px 3px 3px rgb(0 0 0 / 25%)  }
.numbaonetxtkbg span { color: #fdc94b;letter-spacing: 0.05em;font-weight: 900;margin:0 auto }
.salesplatz {
    line-height: 1.3em !important;padding: 0 0 8px 0; color: #efefef;font-size: 15px;line-height: 1.5em }
.salesplatz p {
    padding: 1px 0;margin: 0;line-height: 1.5em
}
.untervideo { display: inline-flex;align-items: flex-end;width: 100%; margin: 0;padding: 0;min-height: 44px;max-height: 44px;border-bottom: 4px solid #9c9c9c }
.ad468innerboxadpic { 
    display: flex;
    align-items: flex-end;
    width: 96.5%;
    height: auto;
    font-size: 98%;
    min-height: 48px;
    max-height: 48px;
    padding: 0 1% 0 2.5%;
    color: #bcbcbc;
    border-radius: 0 7px 0 0}
#magbtncontrol {
    
}
.magbtn {
  display: inline-block;
  padding: 7px 13px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-image: linear-gradient(to top, #0e5ff3, #5991f8);
  border: none;
  border-radius: 8px;
  box-shadow: 1px 4px #ccc;
  text-decoration: underline
}

.magbtn:hover { background-color: #4caf50 }

.magbtn:active {
  background-image: linear-gradient(to top, #73e377, #4caf50);
  box-shadow: 0 2px #888;
  transform: translatey(3px);
}
.magbtn:visited { background-color: #aaa }

#magbtncontrol:checked {
    background-image: linear-gradient(to top, #4caf50, #4caf50);
}
nav.videolinks {
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 0.9em;
        height: auto;
    }
nav.videolinks select {
  display: none;
}

.videolinks ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        }
.videolinks li {
        padding: 0;
        margin: 0;
        float: left;
        display: inline-block;
        }
        
.videolinks li a.menuli {
    display: block;
    text-align: center;
    align-content: center;
    color: #eee;
    font-weight: 600;
    font-size: 1em;
    min-width: 70px;
    height: 16px;
    padding: 4px 2px;
    background: #745a01;
    border: 2px solid #444;
    box-shadow: 2px 3px #111     
}
.videolinks li a:hover.menuli { 
color: #f5db03; 
background: #222;
border: 1px solid #fdebae;
transition: 0.3s;
}
.gentha {
    height: 26px; width: 84px; margin: 0 3px;
}
select { color: #efefef;padding: 4px 1px;background: rgb(52, 52, 52) !important; border-color: rgb(102, 102, 102) !important }

.footeroben { float: left;width: 94%;margin: 0 1.5%; padding: 20px 1.5% 5px 1.5%;font-size: 1.1em;color: #fff;border-top: 7px solid #4b4b4b }
.footeroben p { font-size: 1.1em }
.footeroben h3 { font-size: 1.3em } 


@media screen and (min-width: 1000px) {

.nav ul.sub { float:left;margin:0;padding: 26px 0 0 0  }
.nav li ul.sub { display: none; }
.nav li li.sub a { float: left;display: inline;padding: 4px 15px;height: 16px;line-height: 16px !important;font-size: 90%; }    
.nav li:hover > ul.sub { background: none;top: 25px;left: 4px;display: inline; max-height: 18px;width: 500%;   }
.nav li:hover.sub > ul.sub li.sub { display: inline-block;position: relative;height: 28px;font-size: 100%;border:none }

#promovid .tipp { width: 100% } 
.maintaguber { font-size: 110%; }    
}
/* ===================
    all: oljo theme
   =================== */
.footer-container { color: #fff }
.footer-container,
aside.right {
    width: 100%;background: #000
}
header { float: left;width: 100%;display: block; }
.header-video {
    float: left;
    background: #000;
    display: block;
    height: auto;
    width: 100%
}
.goad460neu {
       float: left;
       width: 97%;
       height: auto;
       display: flex;
       justify-content: center;      
} 
.footer-container,
aside.footer {
    background: #363636;
}
aside.left {
    background: #fff;
}

.title {
    color: white;
}
.menuenavi { float: left; width: 67px }
.platzierung { 
    float: left;display: flex;align-items: center;width: 100%;height: 34px;padding: 5px 0 0 0 ;font-size: 1em;color: #fff
}
.preisverglB { float: left;width: 99.2%;padding: 0 0.4%;background: #9c9c9c }
.vorwo {
    float: left;
    font-size: 1em;
    color: #ccc;
    width: 31.1%;
    padding-left: 1.5%
} 
.vidt100 {
    float: left;
    width: 33%;
    height: 26px;
    font-size: 1em;
    padding-bottom: 1px
}
.heute100 {
float: left;
width: 32.4%;
padding-right: 1.5%
}
.heupla {
    padding: 0;
    text-align: right;
    font-size: 0.8em;
    float: right;
    display: flex;
    align-items: center;
}

.livech {
    padding: 4px 0; background: #69afe0; text-align: center;font-weight: 900;
}
.livech h2 { margin: 0; font-size: 13px; }
.aazoben { margin: 0 auto;line-height: 0.8em;padding-right: 1%;background: #000 }
.numbaonemain { width: 70%; padding: 18% 15% 0 15%; }
.numbaoneextra {
    width: 66%;
    padding: 18.2% 17% 0 17%;
    background: url(../bilder/nummer1-2019b.png);
    background-repeat: no-repeat;
    background-position: -22px -35px;
    background-size: 115%;
}
.numbaone {
    width: 300px;
    margin: 3% auto;
    height: 285px;
    border-radius: 15%;
    box-shadow: inset 0 0 15px #fff, /* inner white */ inset 10px 0 30px #f0f, /* inner left magenta short */ inset -20px 0 30px #0ff, /* inner right cyan short */ inset 20px 0 150px #f0f, /* inner left magenta broad */ inset -20px 0 150px #0ff, /* inner right cyan broad */ 0 0 5px #fff, /* outer white */ -10px 0 30px #f0f, /* outer left magenta */ 1px 0 30px #0ff;
}
.untvidbox {
float: left;
width: 100%;
height: 43px;
padding: 4px 0 0 0;
}
.untviddwnbox {
float: left;
display: flex;
align-items: flex-end;
margin: 0 0.5% 0 0;
padding: 0;
width: 65.2%
}
.gesichtsbuchbox {
float: right;
display: inline;
margin:  0 0 4px 0;
padding: 2px 1% 0 8%;
height: 38px;
min-width: 198px;
max-width: 23.7%;    
     -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.gesichtsbuchbox:hover { background: #0b5bef;   
     -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    transition: 0.7s }
.gbbarrow {
float:left;
display: flex;align-items: center;
height: 40px;
width: 20px;
padding: 0 3px 0 24%;
text-align: right;
font-size: 160%
}
.preisboxinner { float: left;display: block;width: 100%;border-bottom: 4px solid #9c9c9c}
.songpreisbox {
float: left;
display: block;
align-content: center;
width: 65%;
min-height: 78px;
max-height: 78px;
margin: 0;
padding: 2px 0.5% 10px 0.5%;
background: url( 'https://www.oljo.de/main-dateien/general-werbungef.png' ), #333;
background-repeat: no-repeat;
background-position: 90% -60%;
overflow: hidden
} 
.songpreisboxstr {
    width: 95%;
    min-height: 46px;
    max-height: 46px;
    display: block;
    align-content: center;
    text-align: center;
    padding: 0 1.5% 0 3.5%;
    margin: 0
}
.linkstr {
float: left;
width: 100%;
display: block;
align-content: center;
min-height: 32px;
max-height: 32px;
padding: 0;
line-height: 1em;
text-align: center;
}
.albumpreisbox {
float: right;
display: inline-block;
align-content: center;
width: 32.5%;
min-height: 78px;
max-height: 78px;
padding: 2px 0.5% 10px 0.5%;
margin: 0 0 0 0.5%;
text-align: center;
background: url( 'https://www.oljo.de/main-dateien/general-werbungef.png' ), #333;
background-repeat: no-repeat;
background-position: 90% -60%;
outline: 4px solid #9c9c9c; 
overflow: hidden    
}
.albumtxtapb { float: left; display: block; width: 100%; align-content: center;min-height: 46px;max-height: 46px }
.apblink { width: 100%; float: left; min-height: 32px; max-height: 32px }
.linkad46815 {
    float: left;width: 99%; margin: 0 0 3% 0 !important; padding: 0 0.5% !important; background:#333;
                -webkit-border-radius: 7px 0 7px 7px;
    -khtml-border-radius: 7px 0 7px 7px;
    -moz-border-radius: 7px 0 7px 7px;
    border-radius: 7px 0 7px 7px
}
.ad46815werbung { float: right;width: auto;min-height: 13px;max-height: 13px; margin: 2.25% 4px 0 0; background: #fff; padding: 0; -webkit-border-radius: 7px 7px 0 0;
    -khtml-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0 }
.beeztextad { float: left;width: 320px !important; height: auto; padding: 0 2% ; border: 1px solid #1e67b0;margin-bottom: 10px }
                                                           
.adbeezwerbung { float:left;width: 100%; margin: 0 auto;height: auto; padding: 5px 0 0 0;background: #000 }
.adbeezwerbung img { float: right;padding: 0; margin: 0 2px 0 0; max-height: 11px; max-width: 60px;background: #aaa; -webkit-border-radius: 7px 7px 0 0;
    -khtml-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0 }

.suchboxbeez { float: left;display: flex;align-items: center;height: auto;padding: 0;margin: 10px 0;font-size: 12px }
.vsucheneu { float: left;display: inline;width: 100%;margin: 0height: auto;padding: 4px 0;line-height: 20px }
.vidsucheneu { height: auto; }
#___gcse_0 {
max-width: 110%;
padding: 3px 2px 14px 2px !important
}
input.gsc-input { margin-top: 1px;padding: 4px 6px !important 
}
td#gs_tti50 {
padding: 0;
}
.gsc-control-search-box-only { padding: 6px 2px !important }
.gsc-control-cse {
padding: 5px 2px;
}
td .gsc-search-button { padding: 4px 3px !important; height: 26px !important; }
td input.gsc-search-button {
border-color: #d0e6fc;  
background-color: #026a95;
color: #fff;
height: 26px !important;
padding: 5px 0 !important;
} 
.info_main {
    float: left;margin: 0; padding: 0; color: #efefef;
        -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.info_main p {
    padding: 10px 4% 0 4%;
    font-size: 1.03em;
    margin: 0;
    line-height: 1.43em;
} 
h3.uberinf { float: left;
display: inline;
align-content: center;
width: 95%;
min-height: 50px;
max-height: 50px;
margin: 0 0 1.5% 0;
padding: 5px 2.5% 0 2.5%;
font-size: 120%;
font-weight: 600;
color: #544203;
background: #edbd1a;
    -webkit-border-radius: 7px 7px 0 0;
  -khtml-border-radius: 7px 7px 0 0;
 -moz-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0; } 
.main { 
    padding: 0;width: 100%;background: #000;
}
.main article {
    background: #000;
    display: block;
    color: #eee;
}
aside.right {
    color: #fff;
    padding: 0;
}
aside.left { 
    color: #fff;
    padding:  0;
}
.ad468box {
float: left;
width: 100%;
margin: 0;
padding: 0;
height: auto;
background: #333;
    -webkit-border-radius: 7px 7px;
    -khtml-border-radius: 7px 7px;
    -moz-border-radius: 7px 7px;
    border-radius: 7px 7px;

}
.ad468innerbox {
float: left;
height: auto;
width: 100%;
margin: 0 auto;
padding: 0;
background:#000;
}

.provisons_hinweis { width: 94%;height: auto;min-height: 26px;padding: 9px 3% 5px 3%;color: #121212;background: #9c9c9c;outline: 4px solid #9c9c9c;border-radius: 0 7px 0 0 }
.footer-container footer {
    color: white;
    padding: 20px 0;
}
.aazoben { max-width: 349px;margin: 0 auto;line-height: 0.8em;padding-left: 0 }

/* ===============
    all: ie fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}




@media only screen and (min-width: 620px) {

/* ====================
    intermediate: menu
   ==================== */
.body { width: 100% !important }   
.menuetop { float: left;margin-left: 5px;width: 100%;float: left }
.videosizing {
width: 100%;
padding: 0;
}
.js-video {
height: 0;
padding-top: 24px; 
padding-bottom: 57%; 
position: relative;
overflow: hidden; 
}
 .js-video.widescreen {
padding-bottom: 57.25%;
}
 .js-video.vimeo {
padding-top: 0;
}
 .js-video.clipfish {
padding-top: 0; padding-left: 10% !important;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

/* ========================
    intermediate: ie fixes
   ======================== */


.songdownloadrechts {
    float: left;
    width: 41%;
    font-size: 1em;
    padding: 3px 0.5% 3px 0.5%;
    margin: 1px 2% 1px 1px;
    text-align: center;
    background: #655402;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.songdownloadneu {
    float: left;
    font-size: 0.7em;
    margin: 3px 0 17px 0;
    text-align: left;
    background: #000000;
    width: auto

}
}
@media only screen and (min-width: 768px) {
.header-container,
aside.left {
  }
.title {
        float: left;
    }
nav.top ul {
    margin: 0;
    padding: 0;
    background: #fff;
}
nav.videolinks {
        margin: 0; padding: 0;display: inline-block; font-size: 0.9em;height: auto;
}
.intchartframes {  float: left; width: 93%; padding: 0 3.5% 1% 3.5%;margin: 0 0 2% 0;background: url( '../bilder/wird-geladen2.gif' ) #4b4b4b; background-repeat: no-repeat; background-position: 50% 50%;    -webkit-border-radius: 0 0 7px 7px;
    -khtml-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
    display: flex;
    justify-content: center
}
.intchartframesb { float: left;text-align: center;width: 628px;margin: 0 auto; }
.untviddwnbox { width: 50.3%; margin: 0 16% 0 0 }
.ad468innerboxadpic { min-height: 25px;max-height: 25px;border-radius: 7px 7px 0 0 }
.hitsinternat {
float: left;
width: 313px;
padding: 10px 0 5px 0;
background: #4b4b4b;
}
.gesichtsbuchbox  { background: url( 'https://www.oljo.de/270vidpic/thumb-up.png' ),#000;
    background-repeat: no-repeat;
    background-position: 25% 25% } 
.gesichtsbuchbox:hover  { background: url( 'https://www.oljo.de/270vidpic/thumb-up-white.png' ),#0b5bef;
background-repeat: no-repeat;
    background-position: 20% 25%
} 
.platztag {
    float: left;
    margin: 1% 1.5% 1% 1.5%;
    height: auto;
    width: 30.2%;
} 
/* ============
    medium wide: main
   ============ */
}
@media all and (min-width: 620px) and (max-width: 768px) {
.platztag {
    float: left;
    margin: 1% 1.5% 1% 1.5%;
    height: auto;
    width: 30.2%;
}
.bildtag { width: 90.4% }
.intchartframes { float: left; width: 100%; background: url( '../bilder/wird-geladen2.gif' ) #4b4b4b; background-repeat: no-repeat; background-position: 50% 50%; margin: 0 }
.intchartframesb { float: left;width: 100% }
.hitsinternat { width: 313px;margin: 0 auto;padding: 10px 0 5px 0;
background: #4b4b4b }
#promovid img { border-radius: 0 }
.vidpic img { min-height: 150px }
.vidpic span { left: 72% }
}
/* ============
    wide: main
   ============ */
@media only screen and (min-width: 1000px) {
.header-video { margin: 10px 0 }
#cse-search-box { width: 100% }
.hauptubera h1.titel { font-size: 1.1em; }
.suchbox { float: right;display: block;width: 33.5% }
.vsuche { float: left; width: 83.5%; line-height: 15px; height: auto; display: block;margin: 0 2.5% 0 5%; }
.vidsuche { padding: 14px 28px;height: 20px; } 
.suchboxbeez { float: left;width: 100%;min-height: 181px;margin: 10px 0 14px 0;padding: 0;font-size: 12px;background: url( '../bilder/suchehgd.gif' );background-repeat: no-repeat;background-position: 20px 70%;outline: 7px solid #555;outline-offset: -7px }
.vsucheneu { float: left; width: 100%; line-height: 15px; height: auto; display: inline;margin: 0; }
.vidsucheneu { padding: 0 2px;height: auto; } 
    .main article {
        float: left;
        width: 58.3%;
        background: #000;
        color: #eee;
        margin-right: 0;
        padding-left: 0.7%
        
    }

    aside.right {
        float: right;
        width: 41%;
    }
    aside.left {
        float: left;
        width: 0%;
        background: #fff
    }
.aazoben { padding-top: 10px;background: #000 } 
.vidpic { min-height: 86px !important } 
#promovid .song { 
    display: block;
    margin: 4px 3% 0 3%;
    width: 89%;
    transition: background-color 0.7s ease, margin 0.7s linear }
#promovid .song:hover {  margin: 4px 5% 0 5%; background-color: #333 }
/* ===============
    maximal width
   =============== */

    .wrapper {
        width: 1400px; /* 1400px */
        margin: 0 auto;
    }
    footer.wrapper {
        width: 1400px; 
        margin: 0 auto;
        background: #111;
    } 
.platztag {
    float: left;
    margin: 1% 0.5% 1% 0.5%;
    height: auto;
    width: 19%;
}        
}

/* ==========================================================================
   helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
        color: #111
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * don't show links for bilder, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@media  all and (min-width: 10px) and (max-width:999px) {
.hidden-1000 { float: left; width: 100%;margin: 0;
}
a.qc-cmp-persistent-link { position: fixed !important; z-index: 100 !important;width: 98%; padding: 6px 1% !important; font-size: 85% }
.zentral-container {   
  position: absolute;
  left: 0px;
  top: 0px; }
.schieben-1000 {
        margin-left: -320px;
    }
.toptext { }
.toptextadfree { min-height: 70px; max-height: 70px }
.toptextadfree h1 { font-size: 1.3em;line-height: 1.1em }
.indexad970 { min-width: 300px;min-height: 90px;float: left;margin: 0 auto;text-align: center }  
.navundsuche { clear: both;display: block;width: 100%;height: auto;margin: 0;padding: none;border: none }
	.navlink {
    display:inline;
    float:right;
    color:#fff;
    text-decoration:none;
    padding:10px 0;
    background: #000;
}
.nav a { border: 1px solid #fff; border-bottom: none; line-height: 20px !important }
         
.wgoad {
       clear: both;
       display: block;
       width: 480px;
       height: 62px;
       margin: 5px 0 5px 2%;
}

.wgoadneu {
       clear: both;
       float: left;
       min-width: 455px;
       height: 62px;
}
.header-container {
       background: #38aeda;
}

.aazoben { margin-top: 10px }
.beez { margin-top: 3px } 
.tippsuber { font-size: 133% !important }
#promovid {
   width: 94%;
   background: #000;
   margin: 0 auto;
 } 
#promovid .vidpic { min-height: 70px !important }
.beez {
    float: left;
    background: #000;
    color: #fff;
    } 
.hotuber { 
clear: both;
float: left;
background: #fed92a;
border: 1px solid #888;
margin: 15px 0 2px 0; 
}
p.hotstuffuber {
    font-size: 1em;
    padding: 5px 0;
    line-height: 1.23em; 
}
.hotstuff {
    clear: both;
    text-align: left;
    padding: 4px;
    background: #fff;
    margin: 2px 0;
} 
div.untplatzz {
    font-size: 1.13em; background: #333; color: #fff;margin: 1.25% 2% 1.25% 2%;padding: 8px 10%; width: auto;
        -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
span.footerplatz {
font-size: 1.25em;
line-height: 2.5em;
color: #101010;
padding: 0 4px;
background: #fdc94b;
font-weight: 700;
border: 5px dotted #fdc94b;
     -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
white-space: nowrap;
-webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
 }   
}
@media only screen and (orientation: landscape) and (max-width:999px) {
.videosizing {
        width: 89%;
        margin: 5.5%;
        padding: 0;
    }
}
@media  all and (min-width: 10px) and (max-width:620px) {
small { 
font-size: 85%
}
.videosizing {
width: 100%;
}
.js-video { 
height: 0;
padding-top: 1px;
padding-bottom: 56.25%;
position: relative;
overflow: hidden;
}
 .js-video.widescreen {
padding-bottom: 57.25%;
}
 .js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.songdownloadrechts {
    float: left;
    width: 43%;
    font-size: 0.7em;
    padding: 3px 0.5% 3px 0.5%;
    margin: 1px 1px 1px 1px;
    text-align: center;
    background: #655402;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
} 
.hidden-768 {}
.toptext { display: block;word-wrap: break-word;height: auto; padding: 12px 0 }
.toptextadfree { display: block;font-size: 18px;word-wrap: break-word;height: auto; padding: 12px 0;border-top: 1px solid #ccc }       
.wgoad {
       clear: both;
       display: block;
       width: 480px;
       height: 62px;
       margin: 5px 0 5px 10%;
}
.ad468innerbox { height: auto; margin: 0 auto }
.goad460neu {
       float: left;
       display: inline-block;
       height: auto;
       width: 100%;
       margin: 0;
              padding: 0;-webkit-border-radius: 7px 7px;
    -khtml-border-radius: 7px 7px;
    -moz-border-radius: 7px 7px;
    border-radius: 7px 7px;
}
.intchartframes { 
    float: left;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    background: url( '../bilder/wird-geladen2.gif' ) #4b4b4b; 
    background-repeat: no-repeat; 
    background-position: 50% 50%
}
.intchartframesb {
    float: left;
    width: 96%;
    margin: 0 2%;
}
.hitsinternat {
width: 94%;
margin: 0 auto;
padding: 5px 0.5% 5px 5.5%;
display: flex;
justify-content: center;
background: #4b4b4b
}
.aaz {
    float: right;
    width: 65.6%;
    }
.beez {
    float: left;
    width: 34.4%;
    }
    
#promovid { width: 76% }
.info_main p {
    padding: 5px 3%; margin: 0 }    
}

@media  all and (min-width: 481px) and (max-width:768px) {
.topadcont { float: right;width: 100%;min-height: 100px;text-align: center;display: flex;align-items: center;justify-content: center }
.indexad970 { float: left;display: block }
#promovid .tipp { float: left; width: 70%;margin: 12px 15%  }  
}
@media  all and (min-width: 768px) and (max-width:999px) {
.zentral-container { }
  
.aaz {
    float: right;
    width: 47.4%;
    margin: 0 auto;
    background: #000;
    padding: 5px 0.8% 0 0;
    }   
.beez {
    float: left;
    padding: 0 2.1% 0 1.5%;
    width: 48.2%;
    }
.adhead { 
float: left;

}
.adheadpic {
float: left;
width: 10px;
height: 90px;
float: left;
background: #fff
}
.adheadgc {
float: right;
width: 728px;
height: auto;
}    
.suchboxbeez { float: left;min-height: 160px;max-height: 160px;height: auto;margin: 10px 0 45px 0;padding: 0 1.5%;min-width: 97%;font-size: 12px;outline: 5px solid #555;outline-offset: -5px }   
.vsucheneu {
        float: left;
        min-width: 97%;
        max-width: 97%;
        line-height: 40px;
        height: auto;
        display: inline;
        margin: 0;
        border: none;
        min-height: 90px;
        padding: 47px 1% 38px 1%;
        font-size: 12px;
        background: url( '../bilder/suchehgd.gif' ) #000;
        background-repeat: no-repeat;
        background-position: 100px 75%;
    }
#___gcse_0 {
min-width: 100%
} 
.tippsuber { margin-bottom: none }
#promovid { width: 99%;margin: 5px 0 10px 0;padding: 5px 0.5% 15px 0.5%;outline: 5px solid #444;outline-offset: -5px;background: #222 }
#promovid .tipp { float: left; width: 78%;margin: 5px 11%  }
#promovid .tippexxtra { margin: 0 0 15px 0;padding: 6% 0 3% 0; }  
#promovid .vidpicboxx {  }
#promovid .vidpic { margin: 0 }
#promovid .vidpic a { max-height: 159px }
#promovid .song { float: left;width: 91%;min-height: 50px;max-height: 50px;font-size: 0.9rem;line-height: 120%;background: #111;margin: 2.5% 2% 3% 2%;outline: 1px solid #555;border-radius: 10px; }
#promovid .song span {  }
.headoljopic {
height: 100px;
padding-top: 50px;
background:url( 'https://www.oljo.de/270vidpic/top-header481-768-150-2025.jpg' ); 
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: bottom left;
border-bottom: 1px solid #eee
}
.toggleMenu { top: 2% }
.topadcont { width: 100%;height: auto }    
}
@media  all and (min-width: 481px) and (max-width:620px) {
.headoljopic {
height: 115px;
background:url( 'https://www.oljo.de/270vidpic/top-header580-2025.jpg' );
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: bottom left;
border-bottom: 1px solid #eee
} 
a.toggleMenu { top: 1%; right: 16px }
}    
@media  all and (min-width: 621px) and (max-width:767px) {
.headoljopic {
height: 140px;
background:url( 'https://www.oljo.de/270vidpic/top-header580-2025.jpg' );
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: bottom left;
border-bottom: 1px solid #eee
} 
a.toggleMenu { top: 1.7%; right: 16px }
}
@media  all and (min-width: 10px) and (max-width:768px) {


.hidden-480 {
        display:none !important;
    }
#linkad {
    padding: 5px; text-align: center; background: #38aeda;height: 92px;
}    
.wgoad {
       clear: both;
       display: block;
       width: 480px;
       height: 62px;
       margin: 5px 0 5px 2%;
}
.preisverglB { width: 100%; padding: 0 }
.untervideo { display: inline-flex;align-items: flex-end;width: 100%; margin: 0;padding: 0;min-height: 78px;max-height: 78px }
.untvidbox {
float: left;
width: 100%;
height: auto;
padding: 4px 0 0 0
}
.untviddwnbox { float: left;width: 60%;padding: 0;margin: 0 }
a.holenbneu{ font-size: 12px !important;background: none !important;border: 1px solid transparent !important }
a.holenBneu:hover { color: #d4b107 !important }
.gesichtsbuchbox { float: right;display: inline;align-content: center;text-align: center;min-width: 32.5%;max-width: 32.5%;margin: 0 0 16px 5%;padding: 2px 1.5% 2px 1% !important;height: auto;min-height: 62px;max-height: 62px;background: none;overflow: hidden }
.magbtn {
    display: inline-block;
    padding: 22px 2px 25px 2px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-image: url( 'https://www.oljo.de/270vidpic/thumb-up.png' ),linear-gradient(to top, #043795, #043795);
    border: none;
    background-repeat: no-repeat;
    background-position: 50% 110%;
    border-radius: 50% 50%;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    width: 60px;
}    
.gbbarrow {
float:left;
height: 64px;
padding: 0;
font-size: 150%;
color: #bdd4ff;
font-weight: 900
}
.fbmain { display: flex;
  align-items: center; }
.preisboxinner { }

.songpreisboxstr {
}
.linkstr { }
small.linkstr { float: right }
h3.uberinf { color: #000 }
a.amasg { margin: 0 2px;padding: 2px 4px 5px 4px }

.albumpreisbox {
     
} 
.uw-scroller-text { font-size: 85% }
}
@media  all and (min-width: 621px) and (max-width:768px) {

aside.right { 
width: 100%;
float: left
}
.bildtag img {
    min-height: 170px;
    margin-top: -18%;
    transform: scale(1.3, 1.3) !important;
    object-fit: cover;
}
.adheadpic {
float: left;
min-width: 10px;
height: 60px;
float: left;
background: #fff
}
.adheadgc {
float: left;
max-width: 469px;
height: auto;
}      
.aaz {
    float: right;
    min-width: 58.5%;
    padding: 0;
    margin: 0
    }
.beez {
    float: left;
    max-width: 39.5%;
    margin: 0 0 0 2%;
    padding: 0;
    }
.suchboxbeez { float: left;width: 97%;height: auto;height: 145px;padding: 5px 1.5%;font-size: 12px;background: url( '../bilder/suchehgd.gif' );background-repeat: no-repeat;background-position: 20px 70%;outline: 5px solid #555;outline-offset: -5px }    
.vsucheneu { float: left;min-width: 98%;max-width: 98%;line-height: 40px; padding: 4px 2px; height: auto; display: inline;margin: 0 }    
.tippsuber { width: 96%; padding: 0 2% }    
.hidden-1000 { }
.ad46815werbung { float: right; }    
.linkad46815 {
    float: right;margin: 0 1% 1% 1%; min-width:91%; height: auto; padding: 0 3.5% 3px 3.5%; background:#fff;
} 
      
}

@media only screen and (min-width: 1000px) {

.hauptubera { width: 100%; float: left; padding: 0; }

h1.titel {
    margin: 0;width: 99.75%; font-size: 25px; line-height: 100%;color: white; padding: 0.25% 0 0 0.25%;font-weight: 600
}
.navundsuche { min-height: 50px }
#menuelader {
       display: block
}
.aaz {
    float: right;
    width: 61.3%;
    background: #000
    }
.beez {
    float: right;
    width: 35.1%;
    margin: 0;
    padding: 0 1.4% 0 2.2%;
    background: #000
    }
.wgoad {
       clear: both;
       display: block;
       height: 62px;
       margin: 5px 0 5px 10%;
}
.bew_txt {
    float: left;font-size: 0.93em;width: 64%;overflow: hidden;padding: 5px 0 3px 0;font-weight: 900; line-height: 1em;min-height: 14px
}
.numbaoneextra {  }
.numbaonevid { }
.numbaonetxtkbg { }
.numbaonetxtkbg span {
    font-size: 100%;line-height: 140%}    
.numbaone { }
.footeroben { width: 88%;margin: 0 1%; padding: 20px 5%; background: #212121 }
div.untplatzz {
display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 1.25% 10.5%;
    padding: 8px 1.5%;
    font-size: 1.3em;
    line-height: 1.7em;
    background: #2c2c2c;
    color: #fff;
    border: 1px solid #545454;
    -webkit-border-radius: 55px;
    -khtml-border-radius: 55px;
    -moz-border-radius: 55px;
    border-radius: 10px;
}
span.footerplatz {
    margin: 0 1.66%;
    padding: 3px 30%;
    font-size: 1.55em;
    line-height: 3em;
    color: #fefefe;
    background: #222;
    font-weight: 700;
    outline: 7px outset rgb(155, 214, 236, 90%);
    -webkit-border-radius: 40px / 40px;
    -khtml-border-radius: 40px / 40px;
    -moz-border-radius: 40px / 40px;
    border-radius: 40px / 40px;
    white-space: nowrap;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
 }
.indexad970 { width: 98%;margin: 0 1%;display: inline;align-content: center;justify-items: center } 
} 
.headvpic {
    float: right;padding: 2% 0 0 1.0%; width: 112px;
}
.headvpic img {
    border: 1px solid #1581a4;
}
.logopic {
    float: left; min-width: 148px;
}
.toptext { loat: left;display: block;align-content: center;width: 96%;height: auto;min-height: 86px;max-height: 86px;padding: 5px 2%;font-size: 115%  }
.toptextadfree { float: left;display: block;align-content: center;width: 96%;height: auto;min-height: 86px;max-height: 86px;padding: 5px 2%;font-size: 115% }
.headuberunter {
    font-size: 0.8em; color: #023958; line-height: 1em;padding-bottom: 4px;
}
.leftside {
    padding: 0; 
    width: 1px;
    background: #fff;

}
.liunterhome {
    padding: 4px 4px 2px 10px;font-size: 0.8em;
}
.livech {
    padding: 4px 0; 
    background: #69afe0;
    text-align: center;
    font-weight: 900
}
.livech h2 { margin: 0; font-size: 13px; }
.livesuch {
    padding: 5px 15px 0 15px; margin: 0; font-size: 0.9em;font-weight: 900;
}
.livelks {
    padding: 2px 1% 4px 1%%; line-height: 1.9em;
}
.livelks li {
    line-height: 1.5em;
}
.livelks li a { 
color: #111
}
.livelks li a:hover { 
color: #03506d
}
.hiwo {
    padding: 4px 0 4px 3%;
    background: #69afe0;
    font-size: 1em;
}
.hiwo h3 { margin: 0;font-size: 0.9em; }
.vt1 { text-align: center; height: 70px; }
a.vt100 {
       margin: 4px 6px;     
       padding: 8px; 
       color: #000000;
       text-decoration: underline;
       display: block;
       background: #fff;
       border-top: solid 1px #000;
       border-right: solid 2px #000;
       border-bottom: solid 2px #000;
       border-left: solid 1px #000;
       font-size: 1.2em;
       line-height: 1.1em;
       text-shadow: 3px 3px 3px #aaa;
       -webkit-border-radius: 20px;
       -khtml-border-radius: 20px;
       -moz-border-radius: 20px;
       border-radius: 20px;
    -webkit-box-shadow: 0 3px 3px #222;
       -moz-box-shadow: 0 3px 3px #222;
            box-shadow: 2px 3px 3px #222;       
}
a:hover.vt100 {
       color: #fff;
       background: #03506d;
       text-shadow: 3px 3px 3px #333;
       border-top: solid 1px #03506d;
       border-right: solid 2px #03506d;
       border-bottom: solid 2px #03506d;
       border-left: solid 1px #03506d;
}
.muvich {
    padding: 4px 0 4px 3%;
    background: #69afe0;
    font-size: 1em;
}

span.platz {
       font-size: 1.73em;color: #ffd750;padding: 0 0 0 5px;font-weight: 900
}
.pfeile_m {
     display: block;text-align: center;width: 100%;height: 55px; padding-bottom: 5px;
}
.pfeil_lire {
    float: left;font-size: 2em;padding: 8px 3% 0 10%;color: #caa805;font-weight: 600;
}
.siehstb {
    clear: both; margin: 0 1% 1px 1%; padding: 2px 0 2px 0;line-height: 1.0em;text-align: center; background: #213157; color: #fff;
}
.bewertung {
    text-align: right;padding: 5px 5px 10px 0;height: 24px;background-image: url("../bilder/fb-bg.jpg");border-bottom: 1px solid #888;
}
.bewertungb {
    clear: both; margin: 2px 1% 0 1%;text-align: right; padding: 4px 5px 5px 0;min-height: 23px;background: #1a3063;border: 1px solid #0b41bd;
}                                                                                       
.stern {
    float: left;padding-left: 10px;
}

.fbmain {
    float: right;padding: 3px 0 0 7px;width: auto;
}
.preisvergl {
    margin: 5px 2%; padding: 4px 6px; border: 1px solid #222; background: #6d5b06;
}
.preisverglb {
    clear: both;display: block;margin: 0; padding: 0; background: #000;
}
h2.pvuber {
    background: #fff; color: #111;padding-left: 21%;border: 1px solid #222;
}
h2.pvuberb {
    background: #d4b107; color: #111;padding-left: 6px; margin: 0;text-align: center; font-size: 100%;line-height: 1.5em;font-weight: 900
}

.infoboxv { 
float: left;
width: 100%;
margin: 5px 0 0 0;
font-size: 1.13em;
background: #222;
outline: 2px solid #edbd1a;
outline-offset: -2px;  
-webkit-border-radius: 7px 7px 0 0;
-khtml-border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0 }
.chartpositionen { float: left;margin: 0 5%;line-height: 1.33em }
.info_genrepla {
    clear: both; padding: 8px 0 8px 0; color: #efefef;font-size: 15px;

}
.info_genrepla p {
    padding: 0; font-size: 1.13em;line-height: 1.33em;margin: 0;
}

.info_genre {
clear: both;
float: left;
width: 90%;
margin: 2px 0.75% 15px 0.75%;
font-size: 1.13em;
background: #222;
padding: 8px 4.25% 6px 4.25%;
outline: 1px solid #ba9b3d;
outline-offset: -1px;
-webkit-border-radius: 0 0 7px 7px;
-khtml-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px
}
.info_genre p {
    padding: 0; font-size: 1em; line-height: 1.33em;
}
.uberinf {
    color: #ffd750;padding: 1% 0 0.7% 4px; 
}

.komment {
    background: #03506d; color: #4abee9;padding: 3px 8px;border-top: 1px solid #0687b7;border-bottom: 1px solid #0687b7;
}
.newsfooter { float: left;width: 100%;padding: 0 }
.linksfooter { float: left;width: 100%;margin: 0 }
.news_main {
    float: left;width: 98.5%; min-height: 600px; margin: 0; padding: 8px 0.75%; background: #265e97;font-size: 1em;
}
.news_main a { margin: 0;padding: 4px;color: #fff;font-size: 15px;font-weight: 900;line-height: 130%;text-decoration: none }
.news_main a:hover     { color: #111;
        border-bottom: 1px dotted #111;
        background: #38aeda; }
.feedburnerfeedblock { float: left; width: 90%;margin: 0 5%;padding: 10px 0 }
.feedburnerfeedblock li { display: block; min-height: 34px;margin-top: 9px }
.feedburnerfeedblock span.headline { display: block; min-height: 22px }
#creditfooter { max-height: 1px !important }
#creditfooter img { max-height: 1px }
#creditfooter a { border: none }
.newsundlinks { float: left;width: 98%; padding: 0 1%;background: #000 }
.lccl {
    float: left;display: flex;align-items: center;justify-content: center;width: 93%; min-height: 80px; max-height: 80px;margin: 0 0 1px 0; padding: 0 3.5%;font-size: 150%;color: #111;background: #fff; background:repeating-linear-gradient(45deg, #ededed, #fff 200px);    
    -webkit-border-radius: 7px 7px 0 0;
    -khtml-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
}
.lccl h3 { font-size: 120%;font-weight: 900;margin: 0; padding: 0 }
footer {float: left; width: 100% }
.lcclb {
    float: left;display: flex;align-items: center;justify-content: center; width: 93%;min-height: 80px; max-height: 80px;margin: 0 0 .2% 0; padding: 0 3.5%;font-size: 150%;color: #111;background: #fff; background: repeating-linear-gradient(45deg, #ededed, #fff 200px);    
    -webkit-border-radius: 7px 7px 0 0;
    -khtml-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
}
.lcclb h3 { font-size: 115%;margin: 0; padding: 0 }
.uw-scroller { border-radius: 0 0 10px 10px }
.uw-w-header { background: #d0e6fc !important }
#menueb
{
float: left;
font-weight: 900;
width: 96%;
padding: 13px 2%;
margin: 0;
height: fit-content;
text-align: left;
background-image: linear-gradient(to left, #313e4a, #3d5a74);
outline: 3px solid #dcdcdc;
outline-offset: -3px
}
#menueb ul li {
        padding: 0;
        }
#menueb ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        font-weight: 600;
        }
#menueb li {
        margin: 5px 0;
}
#menueb ul li a { float: left;display: block;max-width: 154px; min-width: 154px;margin: 14px 5px 0 15px;padding: 9px 4px;color: #fff;font-size: 1.3em;text-decoration: underline;border: 2px solid rgba(250, 250, 250, 0.4);border-radius: 9px;background: rgba(0, 0, 0, 0.3);text-align: center
        }
#menueb ul li a:hover {
        color: #111;
        background: #38aeda;
}
iframe {
    border: 0;
}
a.home {
    color: #e4d204;
}
a:hover.home {
    color: #fff;
}
a.live {
    color: #a9e5fb;
}
a:hover.live {
    color: #fff;
}
a.alblive {
    color: #000;
}
a:hover.alblive {
    color: #fff;
}
a.albliveneu {
    color: #000000;
    font-size: 1.13em;
    margin: 2px 3px;
    display: inline-block;
    background: #ffd750;
    padding: 5px 8px;
    font-weight: 900;
    text-align: center;
    min-width: 50px;
    border: 2px solid #000;
    border-radius: 8px
    
}
a:hover.albliveneu {
    color: #f5db03;
    background: #000;
    border: 2px solid #fdc94b 
}
a.trend100 {        
display: block;
    text-align: center;
    color: #f8d14c;
    font-weight: 600;
    font-size: 1.13em;
    min-width: 70px;
    height: 16px;
    padding: 3px 10px 5px 10px;
    border: 1px solid transparent       
}
a:hover.trend100 {
color: #eee;
background: hsla(42, 98%, 49%, 0.37);
border: 1px solid #f7ae02;
transition: 0.6s;
box-shadow: 1px 1px #222
}
#disqus_thread {
    background: #eee;
    color: #111;
    padding: 5px;
    margin: 9px;
    border: 1px solid #777;
}
.obervideo {
    float: left;display: flex;justify-content: center;width: 100%;min-height: 28px;max-height: 28px;margin: 0;padding: 19px 0 12px 0;font-size: 1.1em;background: url( 'https://www.oljo.de/videos/img/uberschriftvideolinksb.gif' ), #edbd1a;background-repeat: no-repeat;background-position: 50% 2px
}

.siehst {
    display: block;float: left;padding: 2px 0 4px 0;line-height: 1.2em;text-align: center;width: 55%;
}
.songdownload {
    width: 59%;font-size: 0.9em;color: #000;padding: 3px 1% 3px 1%;margin: 5px 20% 5px 21%;text-align: center;background: #d4b107;-webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}
.songdownloada {
    font-size: 0.9em;
    color: #000; 
    padding: 3px 1% 3px 1%;
    margin: 0 2% 5px 2%;
    text-align: center;
    background: #d4b107;
    -webkit-border-radius: 0 0 7px 7px;
    -khtml-border-radius:  0 0 7px 7px;
    -moz-border-radius:  0 0 7px 7px;
    border-radius:  0 0 7px 7px;
}
a.holen{
    color: #000;
    text-decoration: underline;
    display: block;
    background: #e7c41d; 
    border-top: solid 1px black;
    border-right: solid 2px black;
    border-bottom: solid 2px black;
    border-left: solid 1px black;
    font-size: 1em;
    text-shadow: 0 1px 2px #555;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
a:hover.holen{
    color: #fff;
    text-decoration: underline;
    display: block;
    background: #655402;
    border-top: solid 1px #655402;
    border-right: solid 2px #655402;
    border-bottom: solid 2px #655402;
    border-left: solid 1px #655402;
}
a.holenoben {
   text-decoration: underline;
   color: #fbd065;
   padding:  0 5px;
   margin-left: 1px;
}
a:hover.holenoben {
    color: #f1ae09;
    text-decoration: underline;
    background: #2b2001;
 }   
a.holenB {
    color: #111;
    text-decoration: underline;
    padding: 3px 3px 5px 3px;
    background: #ead53c;
    border: solid 1px #000;
    font-size: 11px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
a:hover.holenB {
    color: #f5db03;
    text-decoration: underline;
    background: #2b2601;
    border: solid 1px #a69402;
}
a.holenBneu{
    width: 92%;
    min-height: 57px;
    max-height: 57px;
    padding: 1px 4%;
    display: inline-block;
    align-content: center;
    background: #333;
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
    border-top: 4px solid #9c9c9c;
    border-right: 4px solid #9c9c9c;
    -webkit-border-radius: 0 10px 0 0;
    -khtml-border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}
a:hover.holenBneu{
    color: #121212;
    text-decoration: underline;
    background: #ffd750;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    transition: 0.6s
}
a.downloadb{
display: block;
margin: 0;
width: 95px;
height: 118px;
background-image: url( '../md/dwn2013.jpg' );
background-repeat: no-repeat;
}
a.downloadbneu{
display: block;
margin: 0;
width: 96px;
height: 59px;
background-image: url( '../md/dwn2016.jpg' );
background-size: contain;
}
a:hover.downloadb{
display: block;
margin: 0;
width: 95px;
height: 118px;
background-image: url( '../md/dwn2013over.jpg' );
background-repeat: no-repeat;   
}
a:hover.downloadbneu {
display: block;
margin: 0;
width: 96px;
height: 59px;
background-image: url( '../md/dwn2016over.jpg' );
background-size: contain;   
}
.home {
    text-align: center;
    padding: 9px 0;
    background: #000;
}
.tippsuber {
    width: 100%;
    min-height: 118px;
    max-height: 118px;
    margin-bottom: 10px;
    font-size: 120%;
    line-height: 107.5%;
    background: url( '../bilder/beez_pfeil2025.png' ), repeating-linear-gradient(-180deg, #5b5643, transparent 130px);
    background-repeat: no-repeat;
    background-position: right 0 bottom 2px;
    text-shadow: 2px 1px #000;
    border-radius: 10px;
}
.beezuber {
    width: 94%;
    padding: 6px 4% 2px 2%
}                                 
.beezuberzw {
    padding: 2px 2px 15px 4px;color: #fff;font-size: 1em
}
.neutrend {
    padding: 6px 0 6px 7%; background: #03506d;font-size: 1em;color: white
}
.uberad { 
    float: left; 
    display: block;
    align-content: center;
    height: 98px;
    margin: 25px auto;
    padding: 1px 24px 9px 23px;
    width: auto;
    font-size: 1.1em;
    line-height: 1.2em;
    color: #111;
    background-image: url('../bilder/singlecharts.jpg');
    background-repeat: round;
    background-size: cover;
    border: 1px solid #111;
}
small.linkstr { float: right;font-size: 100%;padding-right: 15% }
a.amasg{
    color: #000000;
    text-decoration: underline;
    background: #eeeeee;
    border: solid 1px black;
    font-size: 1.13em;
    padding: 2px 8px 5px 8px;
    margin: 0 10px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 3px #000;
       -moz-box-shadow: 0 3px 3px #000;
            box-shadow: 2px 3px 2px #000  
}
a:hover.amasg{
    color: #fff;
    background: #03696a;
    border: solid 1px #000
}
a.itsg{
    color: #000000;
    text-decoration: underline;
    background: #eeeeee;
    border: solid 1px black;
    font-size: 1.13em;
    padding: 2px 8px 5px 8px;
    margin: 0 5px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 3px #000;
       -moz-box-shadow: 0 3px 3px #000;
            box-shadow: 2px 3px 2px #000   
}
a:hover.itsg{
    color: #23ef0e;
    background: #0c6703;
    border: solid 1px #000
}
a.mlsg{
    color: #000000;
    text-decoration: underline;
    background: #eeeeee;
    border: solid 1px black;
    font-size: 1.0em;
    padding: 3px 8px 6px 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 3px #000;
       -moz-box-shadow: 0 3px 3px #000;
            box-shadow: 2px 3px 2px #000    
}
a:hover.mlsg{
    color: #fcf4e1;
    background: #c17512;
    border: solid 1px #000
}
.oljopreshead {
    margin: 5px 0 3px 0;
    background: #fed92a;
    border: 1px solid #888;
    padding: 0
}
.oljopres {
    margin: 0 0 10px 4px   
}
.oljopres img {
    padding-top: 22px;
    background: #222;
    border: 1px solid #222;
    -webkit-border-radius: 16px; color: #222;
    -khtml-border-radius:16px; color: #222;
    -moz-border-radius: 16px; color: #222;
    border-radius: 16px; color: #222;
}
.hotuber { 
clear: both;
float: left;
background: #fed92a;
border: 1px solid #888;
margin: 15px 7px 2px 7px; 
}
p.hotstuffuber {
    font-size: 1em;
    padding: 5px 0;
    line-height: 1.23em; 
}
.hotstuff {
    clear: both;
    text-align: left;
    padding: 4px;
    background: #fff;
    border: 1px solid #888;
    margin: 2px 7px
}
.hotstuff img { margin: 0 auto; }
.x11 {
    margin: 6px 0;height: 19px;
}
a.x1{
    color: #111;
    text-decoration: underline;
    background: #ffffff;
    border: solid 1px #343434;
    padding: 2px 6px;
}
a:hover.x1{
    color: #f96be3;
    background: #550248;
    border: solid 1px #c104a4;
}
p.untfoot { float: left;width: 100%;font-size: 1.25em; line-height: 2em;padding: 7px 0; border-top: 1px dotted #999; margin-top: 7px }
p.untfoot span { 
padding: 3px 0 !important;
border-radius: 5px
}
p.untplatz {
    font-size: 1em; line-height: 1.4em;
}                                                                                             
.ganzunt { float: left;padding: 20px 10px;font-size: 1.1em;line-height: 1.33em;outline: 2px dotted #aaa;background: #323232 }
.aaz h3, .aaz p {
    padding: 0 6px;
}
a.news{
    color: #fff;
    text-decoration: underline;
    background: #343434;
    border: solid 1px #343434;
    font-size: 0.8em;
    padding: 4px 6px;
}
a:hover.news{
    color: #000;
    background: #ccc;
    border: solid 1px #999;
}
.goad460 {
       float: left;
       width: 468px;
       height: 60px;
       border: 1px solid #bbb;
}
a.singlive{
    color: #111;
    text-decoration: underline;
    font-size: 1.1em;  
    line-height: 1.4em;
    padding: 1px 5px 2px 0;
}
a:hover.singlive{
    color: #fff;
    background: #111;
    border: solid 1px #111;
    padding: 1px 5px 2px 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
img.opacity:hover {
	opacity: 0.70;
	filter: alpha(opacity=70);
	}
  
@media  all and (min-width: 10px) and (max-width:620px) {
.cc-window  { margin-bottom: 78px; }
     h1.title {
         font-size: 1.1em;padding-left: 65px;line-height: 1.4em;
     }
.wgoad {
       clear: both;
       display: block;
       width: 480px;
       height: 62px;
       margin: 5px 0 5px 2%;
}
.toptext { border-top: 1px solid #eee;border-bottom: 1px solid #eee }

.ad46815werbung { float: right;padding: 0 1.5% 0 1.5%; background:#fff } 
.linkad46815 { 
float: left;display: inline;align-content: center;justify-items: center;height: auto;border-top: 1px solid #ddd;border-bottom: 1px solid #aaa;border-radius: 0
}
.aaz { 
width: 97%;
margin: 10px 1.5% 2% 1.5%;
padding: 1.25% 0;
min-width: 338px;
float: left;
background: #2b2b2b }
.aazoben { width: 100%;padding: 5px 0;margin: 0 auto;line-height: 1em;background: #4b4b4b }
.beez {
    float: left;
    width: 97%;
    margin: 0 1.5%;
    padding: 0
    }
.suchboxbeez { float: left;min-width: 97%;max-width: 97%;height: auto;padding: 5px 1.5%;font-size: 12px;background: #555 }    
.vsucheneu {
    float: left;
    min-width: 98%;
    max-width: 98%;
    line-height: 20px;
    height: auto;
    display: inline;
    margin: 0;
    border: none;
    min-height: 92px;
    padding: 10px 1% 1px 1%;
    font-size: 12px;
    background: url( '../bilder/suchehgd.gif' ) #000;
    background-repeat: no-repeat;
    background-position: bottom
}   
#___gcse_0 {
min-width: 100%
}     
.heute100 {
    float: left;
    align-self: center;
} 
 
#promovid {
float: left;
   width: 100%;
   background: #000;
   margin: 0 auto;
 }
 
.tipp {
   float: left; width: 50%;margin: 1.5% 0 5% 0;
   }
.maintaguber { height: auto;font-size: 1em }
.after::after {
            content: "\a";
            white-space: pre;
        }
.maintaguber span { font-size: 2em }
.maintaguber span.ahrget { font-size: 2em;font-weight: 900 } 
.platztag {
    float: left;
    width: 47.9%;
    margin: 2px 0.5% 10px 0.5%;
    padding: 0 0.5%;
}
#promovid .vidpicboxx {     
background-image: none !important;
    float: left;
    width: 98%;
    margin: 4px 0.5% 0 0.5%;
    padding: 0.5% 0.5%;
    background: #888;
    border-radius: 10px 10px 0 0 }
#promovid .vidpic { height: 155px;
border-radius: 10px 10px 0 0; 
-webkit-clip-path: none !important;
    clip-path: none !important }
#promovid .vidpic img {
    border-radius: 0 !important;
    object-fit: cover;
}
#promovid .vidpic span { color: #fefefe !important;
    padding: 0 8px !important;
    background-color: silver;
    background-color: hsla(0, 0%, 10%, 0.66);
    position: absolute;
    bottom: 83%;
    right: 0;
    left: 78%;
    top: 0;
    line-height: 2em;
    border-radius: 0 9px 0 9px;
    text-align: center }
#promovid .song { display: inline;align-content: center;width: 94%;margin: 1px 1.5% 0 1.5%;padding: 2.5% 0.5% 2.5% 2.5%;background: #ededed;color: #222;border-radius: 0 0 9px 9px;font-size: 0.84rem }
#promovid .song a { color: #111; }
#promovid .song a:hover { background: #222 }
.texttag { background: none !important;min-height: 64px;max-height: 64px;overflow: hidden }
.toptext { width: 92%;height: 135px;min-height: 135px;max-height: 135px;padding: 0 4% }
.topadfree { width: 100%;max-width: 100%;max-height: 300px !important }
.topadcont { width: 100%;max-width: 100%;max-height: 300px !important;background:url( 'https://www.oljo.de/main-dateien/general-werbungef.png' ), #555;background-position: top;background-repeat: no-repeat }

.top10picstag {
    float: left;
    height: auto;
    width: 84%;
    padding: 5% 8% 0 8%
}
.artisttag {
    float: left;
    height: auto;
    width: 84%;
    padding: 5% 8% 0 8%
}
.platztag {
    float: left;
    width: 150px;
    max-width: 45.9% !important;
    min-height: 200px;
    margin: 2px 0.5% 10px 0.5% !important;
    padding: 0 0.5% !important;
}
.songpreisbox { width: 58.5% } 
}  
@media  all and (min-width: 481px) and (max-width:620px) {
.hauptuberA { float: left;width: 90%;}
.tippsuber {
        font-size: 133% !important;
        justify-items: center;
        text-align: center;
        background-repeat: repeat-x;
    } 
#promovid { width: 80%;margin: 0 10% }
#promovid .vidpicboxx { width: 96%;margin: 4px 1.5% 0 1.5%; }
#promovid .tippexxtra { width: 80%;margin: 19px 8%;padding: 7.5% 2% 7.5% 2%; }
} 
@media  all and (min-width: 10px) and (max-width:480px) {
.headoljopic {
    height: 123px;
    min-height: 123px;
    max-height: 123px;
    padding-top: 1px;
    background: url('https://www.oljo.de/270vidpic/top-header481-240-2025e.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: bottom -20px left;
    border-bottom: 1px solid #333;
}
.hauptuberA { float: left;width: 85%;}
.toggleMenu { top: 96px }
.aaz { float: left;width: 100%; margin: 0;min-width: 1px !important }
.aazoben { float: left;max-width: none;width: 96%; margin: 0 2% }
.beez {
    float: left;
    width: 96%;
    margin: 0 2%
    }
.topadcont { clear: both; width: 100%;min-height: 30px;float: left;overflow: hidden;background-repeat: no-repeat }
.preisvergluber { margin: 0 0.5% 1px 0.5%;border-top: 5px solid #000;border-bottom: 1px solid #8d7e01; background: #2b2601; }
.preischeck { font-size: 0.9em;margin: 0;padding: 2px 0; text-align: center;background:#60551c }
.amasearcha { padding: 5px 1% 8px 1%;height: 31px;background:#60551c;text-align: center }
.htisinternat { width: 710px; height: 246px;padding-left: 14px; }
.aazwerbemain { float: left;padding: 0 0 3px 0; width: 348px; height: 285px; background: #fff }
.werbemainneu { margin: 2% 0.25%;padding: 2% 0 0 0; width: 99.5%;height: 303px;background: #efefef }
.aazwerbe { float: left;height: 241px; width: 10px;padding-top: 10px; background: #fff }
.livepic { clear: both; width: 338px; max-height: 60px; margin: 10px auto 4px auto; outline: 1px solid #000 }
.liveframe { width: 308px; padding: 0 15px; height: 774px; margin: 0 auto; background: #efe3a7 }
.iframemantel { float:left; display: block;width: 100%;background: #034266;padding: 10px 0;margin-bottom: 10px }
.liveframe2017 { width: 340px; padding: 0; height: 853px; margin: 0 auto; background: #000;outline: 1px solid #000; }
.numbaonetopper { background: hsla(271, 76%, 53%, 0.6);}
div#cookiechoiceinfo {
background-color: #333 !important;
color:#eee;
font-weight:bold;
font-size:14px;
font-family: georgia;
line-height: 1.43em;
border-bottom: 2px solid #b7b7b7;
}

.ad468box {
float: left;
width: 100%;
margin: 0;
height: auto;
padding: 0;
}
.adheadgc {
float: left;
width: 97%;
height: auto;
margin: 0 auto;
}
.adhead  { }
.indexad970 { margin: 0 }
.ad468innerbox {  }
.newsundlinks { font-size: 90% !important }
.newsfooter { float: left;width: 96%;margin: 10px 2% 0 2%;font-size: 0.9em }
.linksfooter { float: left;width: 100%; margin: 0 }
.lccl { }
#menueb ul li a { min-width: 160px;max-width: 160px;margin: 8px 5px 0 5px;padding: 10px 1px 12px 6px; }
.news_main a { font-size: 13px }
.ad468innerboxadpic { }
.provisons_hinweis { }
.goad460neu { height: 60px;max-height: 60px }
.trendcharts { width: 100%; height: auto;padding: 0 }
.info_genrepla { padding: 8px 0 8px 0; }
.salesplatz { padding: 0 0 8px 0; }
.bildtag img {
        min-height: 188px;
        transform: scale(1.4) translateY(-8px) !important;
        object-fit: cover;
}    
#promovid { width: 100%; margin: 0 }
#promovid .song { min-height: 71px }
.tipp { }
.chainter { width: 96%; margin: 0 2% }
.footer-container { float: left; padding: 0 2% 50px 2%; width: 96%; background: #000 }
.newsundlinks { width: 98%; margin: 0 }
.maintag { width: 98%; margin: 12px 1% }
.maintagwtr { width: 98%; margin: 12px 1% }
}
@media (max-width: 768px) {
nav.videolinks { 
    margin: 0 auto;
    padding: 0;
    font-size: 1.4em;
    height: auto;
    }
nav.videolinks ul     { display: none; }
nav.videolinks select { display: inline-block;border-radius: 7px }
.ad468innerboxadpic {
    display: flex;align-items: flex-end;
    width: 96%;
    height: auto;
    font-size: 90%;
    min-height: 48px;
    max-height: 48px;
    padding: 6px 1% 7px 3%;
    color: #cdcdcd;
    border-radius: 0 7px 0 0;
    outline: 4px solid #666;
    outline-style: double;
    outline-offset: -4px;
    overflow: hidden;
}
.footer-container { border: none }
}
@media  all and (min-width: 10px) and (max-width:999px) {
.hidden-999 {
        display:none !important;
    }
.linkblock728res {  float: left;display: flex;justify-content: center;width: 100%;margin: 0 0 10px;padding: 0 0 12px 0;background: url(https://www.oljo.de/main-dateien/general-werbungef.png), #333;background-repeat: no-repeat;background-position: 50% 0; }    
.hauptubera { float: left;width: 100%;max-height: 90px; color: #111 }
.hauptubera h1 { margin: 0;color: #fff;font-weight: 900 }
.toptext {  }
.bew_txt {
    float: left;width: 64%;overflow: hidden;padding: 0 0 3px 0;font-weight: 900; min-height: 14px
}
.headuberunter {
     padding: 1%; width: 98%;color: #fff;height: auto;
} 
.header-container {
    background: #fff;
    background-size: cover;
    line-height: 11px;
    max-width: 1400px
    font-size: 14px;
}
.chartpositionen { line-height: 1.5em;margin: 0 5%; }
.uberinf {
    color: #ffd750;padding: 2.5% 0 2.5% 6px;font-size: 15px;
    }
.preisverglb {
    margin: 0;
}
.news_main { width: 100%;padding: 0;margin-bottom: 10px }
.uw-scroller { min-height: 481px; border-radius: 0 0 10px 10px }    
#menueb
{
float: left;
width: 100%;
height: max-content;
padding: 10px 0;
margin: 5px 0 2% 0;
text-align: left;
background-image: linear-gradient(to left, #313e4a, #3d5a74);
font-weight: 900;
outline: 1px solid #999;
outline-offset: -1px;
border-radius: 0 0 10px 10px
}
.topadcont { float: left;width: 100%;min-height: 1px;display: flex; align-items: center;justify-content: center } 
footer.wrapper {
        width: 100%; 
        margin: 0 auto;
        background: #111;
    }                
}     
.b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
           -moz-transition: opacity 500ms ease-in-out;
             -o-transition: opacity 500ms ease-in-out;
                transition: opacity 500ms ease-in-out;
                 max-width: 100%;
                   opacity: 0;
    }
    .b-lazy.b-loaded {
                   opacity: 1;
    }
.videostopad { width: 320px; height: 100px; }


@media(min-width: 500px) { .videostopad { width: 320px; height: 100px; } }
@media(min-width: 800px) { .videostopad { width: 728px; height: 90px !important; } }     
@media (min-width: 10px) and (max-width: 480px) {
header-video { border-top: 1px solid #eee }
.uw-scroller-text { font-size: 75% }
.infoboxv { width: 99%;margin: 3px 0.5%; border-radius: 0 }
.info_genre { width: 86%; margin: 0 2% 8px 2% }
p.untfoot { line-height: 1em } 
p.untplatz { line-height: 1.5em }
.videovorstellung { display: inline; align-content: center; min-height: 44px; max-height: 44px }
#promovid .tippexxtra { width: 80%;margin: 12px 10% 35px 10%;padding: 2.5% 0 0 0;background: none }
}
@media only screen and (min-device-width: 200px) and (max-device-width: 620px) {
.topadcont { float: left;width: 100%;margin: 1px 0;min-height: 300px;max-height: 300px;text-align: center }
.newsfooter { width: 96%; margin: 0 2% }
.uw-card2-row {
    flex-direction: row !important;
}
span.uw-text { color: #111 !important; text-shadow: none;font-size: 17px !important;text-decoration: underline }
#menueb { min-height: 210px }
.albumpreisbox { width: 39% }
}
@media (min-width: 481px) and (max-width:999px) { 

.responsive_1 { width: 468px; height: 60px !important; } 
}
@media (min-width: 621px) and (max-width:999px) { 
.topadcont { float: left;width: 60%;margin: 1px 0;min-height: 1px;text-align: center }
}

@media (min-width: 769px) and (max-width:999px) {
.platztag {
        float: left;
        margin: 1% 1.5% 1% 1.5%;
        height: auto;
        width: 16.95%;
    }
.footervidinfo { float: left; width: 49.25%;margin-left: 0.75% }
.footerplatzierung { float: left; width: 50% }    
}
@media (min-width: 769px) { float: left;font-size: 1.0em;padding: 0;margin: 0;width: 100%;border-bottom: 4px solid #9c9c9c; }
@media (min-width: 1000px) { 
.responsive_1 { width: 800px; height: auto; } 
.linkblock728res { clear: both;float: left;margin: 0 0 20px 0 ;width: 100%;max-width: 100%;padding: 10px 0 5px 0;display: flex;justify-content: center; background: url(https://www.oljo.de/main-dateien/general-werbungef.png), #333;background-repeat: no-repeat;background-position: 90% 0; }  
.topadcont { min-height: 300px }
.numbaonetopper { margin: 1% 1% 15px 2% }
.lccl, .lcclb { background: repeating-linear-gradient(45deg, #ededed, #fff 400px) }
.header-container { min-height: 135px; max-height: 135px }
.footervidinfo { float: left; width: 49.25%;margin-left: 0.75% }
.footerplatzierung { float: left; width: 50% }
.songpreisbox { width: 49%;min-height: 58px;max-height: 58px; }
.songpreisboxstr { min-height: 26px;max-height: 26px; }
.albumpreisbox { width: 48.5%;min-height: 58px;max-height: 58px; }
.albumtxtapb { min-height: 26px;max-height: 26px; }
}
#menuelader {
       display: none;
}
.nav {
     
    list-style: none;
     *zoom: 1;
     background:#d0e6fc;
     color: #111; 
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {  
    padding: 0 6px 0 6px;
    min-height: 50px;
    color:#121212;
    font-size: 1em;
    font-weight: 900;
    text-decoration: none;
    border-right: 2px solid #fff;
    line-height: 16px !important;
}
.nav a.hatsub { padding-right: 20px; } 
.nav a:hover {     background: #2e77bf;
    color: #f2f2f2 }
.nav li {      
    position: relative;
    min-width: 98px;
    max-width: 115px;
    word-wrap: break-word;
    display: inline;
}
.nav li.sub a { min-height: 19px; max-height: 20px }
.nav > li { 
    float: left;

}
.nav > li > .parent {
    background-image: url("../../imgnews/downarrowb.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: flex;
    align-items: center
}
.nav li ul {
    position: absolute;
    left: -9999px;
}

.nav > li.hover > ul {
    left: 0;
    background: #2e77bf;
    color: #2f2f2f
}

.nav li li.hover ul { 
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #e9f4fe;
    position: relative;
    z-index:100;
    border: 1px solid #fff;
}
.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: auto;
}

@media all and (min-width: 10px) and (max-width:999px) {
.zentral-container { width: 100%; max-width: 100% }
    .active {
        display: block;
    }
    .nav a { border: none;width: 94%;max-height: 40px;  min-height: 20px !important;padding: 7px 0 5px 6%;border-bottom: 1px dotted #888 }
    .nav > li {
        float: none;
    }  
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url( 'https://www.oljo.de/imgnews/downArrowB.png' );
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
.before::before, .after::after { 
content: "";
white-space: none;
} 
}
/* ----- slider ------ */
:root {
    --mfy-gap: 12px;
    --mfy-radius: 12px;
}

.mfy-container {
    width: 100%;
    background: #000;
    padding: 10px 0 15px 0;
    overflow: hidden;
    font-family: sans-serif;
}

.mfy-header {
    padding: 0 16px;
    margin: 5px 0 9px 0;
    color: #fff;
    font-weight: bold;
    font-size: 1.15rem;
}

.mfy-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--mfy-gap);
    padding: 0 16px 11px 16px;
    scrollbar-width: none;
}
.mfy-track::-webkit-scrollbar { display: none; }

/* Responsive Card-Logik */
.mfy-card {
    position: sticky;
    top: 0;
    min-height: 233px;
    max-height: 233px;
    padding: 10px;
    flex: 0 0 78vw; /* Mobile Breite */
    scroll-snap-align: start;
    transition: transform 0.1s ease;
    background: #333;
}

@media (min-width: 768px) {
    .mfy-card { max-width: 175px;flex: 0 0 280px; } /* Desktop Breite */
}
@media (max-width: 768px) {
    .mfy-card { max-width: 220px;flex: 0 0 280px; } /* Desktop Breite */
}

/* Ratio-Umschaltung: Mobile 4:5 vs Desktop 16:9 */
.mfy-thumb {
    width: 100%;
    max-height: 180px;
    aspect-ratio: 4 / 5; /* Mobile Format */
    background: #111;
    border: 2px solid #000;
    outline: 2px solid #555;
    border-radius: var(--mfy-radius);
    overflow: hidden;
}
.mfy-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.55);
    margin: 0;
    overflow: hidden;
}
@media (min-width: 768px) {
    .mfy-thumb { aspect-ratio: 16 / 9; min-height: 160px } /* Desktop Format */
    .mfy-thumb img {    
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
    transform: scale(1.38) translateY(-6px);
    overflow: hidden;
    }
}



/* Text & Klickfläche */
.mfy-info { max-height: 50px;margin-top: 10px; color: #fff; }
.mfy-title { max-height: 50px;margin: 0;font-size: 0.8rem;font-weight: normal;line-height: 1.3; }
.mfy-link { max-height: 50px;color: inherit; text-decoration: none; }

.mfy-link::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;
}

.mfy-card:active { transform: scale(0.97); }

/* Spezial-Card */
.mfy-all-card {
    background: #111;
    border: 1px solid #222;
    border-radius: var(--mfy-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 45vw;
}
@media (min-width: 768px) { .mfy-all-card { flex: 0 0 160px; } }

.mfy-icon {
    width: 40px; height: 40px; background: #ff0050;
    border-radius: 50%; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
}



.mfy-thumb-box {
    width: 100%;
    aspect-ratio: 4 / 5; /* Hochformat für Mobile */
    background: var(--mfy-bg);
    border-radius: var(--mfy-radius);
    overflow: hidden;
}

/* Desktop-Anpassung (Ab Tablet/PC: 16:9) */
@media (min-width: 768px) {
    .mfy-thumb-box {
        aspect-ratio: 16 / 9; /* Schaltet auf Breitbild um */
    }
   
    .mfy-video-card {
        flex: 0 0 280px; /* Breite auf Desktop etwas großzügiger */
    }
}

.mfy-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet das YouTube-Bild immer passend zu */
    object-position: center;
    display: block;
}