@media only screen and (min-width: 1000px) {
  
    body { background-image: url("/images/design/background/serie.jpg"); }

    #logo
    {
        top: 30px;
        left: -20px;
        width: 422px;
        height: 123px;
    }

    #logo a { background-image: url("/images/design/logo_serie.png"); }


    /* vedomostni kvizy */
    .test fieldset
    {              
        background: #1c1c1c;
        border: 10px solid #191919;
        margin: 15px auto;
        color: #bbb;
        border-radius: 5px;
    }     
    
    .test fieldset ol 
    {       
        list-style-type: upper-latin;
        margin: 10px 0 10px 30px !important;
    }
    
    .test fieldset li
    {              
        margin: 5px 0px;
    }
        
    /* custom radio button styling 
    from https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
    .test fieldset label {
        line-height: 1.1;
        display: grid;
        grid-template-columns: 1em auto;
        gap: 0.5em;
    }

    .test fieldset label input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: #1c1c1c;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: 50%;
        display: grid;
        place-content: center;
    }

    .test fieldset label input[type="radio"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #aa3;
    }

    .test fieldset label input[type="radio"]:checked::before {
        transform: scale(1);
    }
      
    
    .test fieldset h4
    {               
        color: #ddbe92;
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 10px 0;
    }
    
    .test fieldset span
    {               
        color: #ddbe92;
        font-weight: normal;
    }
    
    .test div.vysledek
    {
        width: 529px;
        height: 300px;
        position: relative;
        background-repeat: no-repeat;
        margin: 0 auto;  
        border-radius: 20px;
    }
    
    .test div.vysledek p.vysledek
    {           
        position: absolute;
        z-index: 5;
        top: 190px; left: 40px;
        margin: 0;
        padding: 0;
        color: #ff4f4f;
        font-size: 50px;
    }
    
    
    .test div.vysledek p span { font-size: 24px;}

    .test p.hodnoceni
    {            
        font-size: 110%;
        color: #fff;  
    }
    
    .test p.vysvetleni
    {             
        color: #fff;  
    }
    
    .test .submit 
    {
        display: block;
        margin: 0 auto;
        width: 20rem;
        padding: 0.5rem;
        color: #bbb;
        background: #333;
        border: 3px solid #bbb;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;  
    }
    
    .test fieldset span.ok { font-weight: bold; color: #0c0; }
    .test fieldset span.ko { font-weight: bold; color: #c00; }
    
    
    .test fieldset span.noanswer { 
        font-weight: bold; 
        background: #224;
        color: #ccf;
        padding: 5px 10px; 
        display: inline-block; 
        border-radius: 5px;
        margin: 10px 0 0 0;
    }

    div.test div.fields {
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    
    .test div.g1_bg0 { background-image: url("/images/test/g1_test0.jpg"); }
    .test div.g1_bg1 { background-image: url("/images/test/g1_test1.jpg"); }
    .test div.g1_bg2 { background-image: url("/images/test/g1_test2.jpg"); }
    .test div.g1_bg3 { background-image: url("/images/test/g1_test3.jpg"); } 
    
    .test div.g3_bg0 { background-image: url("/images/test/g3_test0.jpg"); }
    .test div.g3_bg1 { background-image: url("/images/test/g3_test1.jpg"); }
    .test div.g3_bg2 { background-image: url("/images/test/g3_test2.jpg"); }
    .test div.g3_bg3 { background-image: url("/images/test/g3_test3.jpg"); } 
    
    .test div.g2mesto_bg0 { background-image: url("/images/test/g2mesto-0.jpg"); }
    .test div.g2mesto_bg1 { background-image: url("/images/test/g2mesto-1.jpg"); }
    .test div.g2mesto_bg2 { background-image: url("/images/test/g2mesto-2.jpg"); }
    .test div.g2mesto_bg3 { background-image: url("/images/test/g2mesto-3.jpg"); }
    .test div.g2mesto_bg4 { background-image: url("/images/test/g2mesto-4.jpg"); }
    .test div.g2mesto_bg5 { background-image: url("/images/test/g2mesto-5.jpg"); }
    .test div.g2mesto_bg6 { background-image: url("/images/test/g2mesto-6.jpg"); }
    .test div.g2mesto_bg7 { background-image: url("/images/test/g2mesto-7.jpg"); }
    .test div.g2mesto_bg8 { background-image: url("/images/test/g2mesto-8.jpg"); }
    
    .test div.g2okolimesta_bg0 { background-image: url("/images/test/g2okoli-mesta0.jpg"); }
    .test div.g2okolimesta_bg1 { background-image: url("/images/test/g2okoli-mesta1.jpg"); }
    .test div.g2okolimesta_bg2 { background-image: url("/images/test/g2okoli-mesta2.jpg"); }
    .test div.g2okolimesta_bg3 { background-image: url("/images/test/g2okoli-mesta3.jpg"); }
    .test div.g2okolimesta_bg4 { background-image: url("/images/test/g2okoli-mesta4.jpg"); }
    .test div.g2okolimesta_bg5 { background-image: url("/images/test/g2okoli-mesta5.jpg"); }
    .test div.g2okolimesta_bg6 { background-image: url("/images/test/g2okoli-mesta6.jpg"); }
    .test div.g2okolimesta_bg7 { background-image: url("/images/test/g2okoli-mesta7.jpg"); }
    .test div.g2okolimesta_bg8 { background-image: url("/images/test/g2okoli-mesta8.jpg"); }
    
    .test div.g2hornicke_bg0 { background-image: url("/images/test/g2hornicke0.jpg"); }
    .test div.g2hornicke_bg1 { background-image: url("/images/test/g2hornicke1.jpg"); }
    .test div.g2hornicke_bg2 { background-image: url("/images/test/g2hornicke2.jpg"); }
    .test div.g2hornicke_bg3 { background-image: url("/images/test/g2hornicke3.jpg"); }
    .test div.g2hornicke_bg4 { background-image: url("/images/test/g2hornicke4.jpg"); }
    .test div.g2hornicke_bg5 { background-image: url("/images/test/g2hornicke5.jpg"); }
    .test div.g2hornicke_bg6 { background-image: url("/images/test/g2hornicke6.jpg"); }
    .test div.g2hornicke_bg7 { background-image: url("/images/test/g2hornicke7.jpg"); }
    .test div.g2hornicke_bg8 { background-image: url("/images/test/g2hornicke8.jpg"); }
    
    .test div.g2jharkendar_bg0 { background-image: url("/images/test/g2jharkendar0.jpg"); }
    .test div.g2jharkendar_bg1 { background-image: url("/images/test/g2jharkendar1.jpg"); }
    .test div.g2jharkendar_bg2 { background-image: url("/images/test/g2jharkendar2.jpg"); }
    .test div.g2jharkendar_bg3 { background-image: url("/images/test/g2jharkendar3.jpg"); }
    .test div.g2jharkendar_bg4 { background-image: url("/images/test/g2jharkendar4.jpg"); }
    .test div.g2jharkendar_bg5 { background-image: url("/images/test/g2jharkendar5.jpg"); }
    .test div.g2jharkendar_bg6 { background-image: url("/images/test/g2jharkendar6.jpg"); }
    .test div.g2jharkendar_bg7 { background-image: url("/images/test/g2jharkendar7.jpg"); }
    .test div.g2jharkendar_bg8 { background-image: url("/images/test/g2jharkendar8.jpg"); }
    
    
    
    div.pbs a 
    { 
      position: relative; 
      display: block; 
      width: 95px; 
      margin: 1px; 
      float: left ;
      text-decoration: none;
      color: #fff;
    }
    div.pbs a img {border: 1px solid #444; }
    div.pbs a span 
    {
      position: absolute;
      z-index: 5;
      width: 105px;
      height: 16px;
      line-height: 16px;
      background: #000;
      top: 80px;
      left: -5px;
      text-align:center;
      border: 1px solid #aaa;   
      font-size: 90%;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      filter: alpha(opacity=80);  
      -moz-opacity: 0.8;  
      -khtml-opacity: 0.8;  
      opacity: 0.8;  
    }
    
    .side-container .pbs a { width: 55px; margin: 1px; line-height: 0; }
    .side-container .pbs a img { width: 55px; border: 0; }
    .side-container .pbs a span { display: none !important; }
    
    
    
    
    /* BEST SCREEN */
    #bestscreen_container div.item { width: 214px; margin: 0px 5px 10px 5px; }
    #bestscreen_container div.item img.thumb { width: 212px; height: 170px; }
    #bestscreen_container div.item div.thumb-container { width: 212px; height: 172px; }
    #bestscreen_container div.item div.thumb-container div.info-container { width: 192px; }
    #bestscreen_container div.item div.thumb-container div.info-container a.picture-link { right: 10px; }
}