@media only screen and (max-width: 999px) {
  
    /* vedomostni kvizy */
    .test fieldset
    {
        border-radius: 10px;
        background: #222;
        color: #aaa;
        padding: 1rem; 
        margin: 1rem 0;
        border: 0;
    }
     
    
    .test fieldset ol
    {              
        list-style-type: upper-latin;
        margin: 1rem 0 1rem 2rem !important;
    }
    
    .test fieldset li
    {              
        margin: 0.5rem 0;
    }    
    
    /* custom radio button styling 
    from https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
    .test fieldset label { 
        display: grid;
        grid-template-columns: 1em auto;
        gap: 0.5em;
        font-size: 1.1rem;
    }

    .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: 1.2rem;
        font-weight: normal;
        margin: 0 0 1rem 0;
    }
    
    .test div.vysledek
    {
        width: 100%;
        aspect-ratio: 529 / 300; 
        position: relative;
        background-repeat: no-repeat;
        margin: 0 auto;  
        border-radius: 1rem;
        background-size: 100% 100%;
    }
    
    .test div.vysledek p.vysledek
    {           
        position: absolute;
        z-index: 5;
        top: 65%; left: 2rem;
        margin: 0;
        padding: 0;
        color: #ff4f4f;
        font-size: 2.5rem;   
    }

    .test div.vysledek p span { font-size: 1.5rem; }

    .test p.hodnoceni
    {            
      font-size: 110%;
      color: #fff;  
    }
    
    .test p.vysvetleni
    {             
      color: #fff;  
    }
    
    .test .submit 
    {
      display: block;
      margin: 0 auto;
      padding: 1.5rem;
      width: 100%;
      text-align: center;
      color: #bbb;
      background: #333;
      border: 3px solid #bbb;
      border-radius: 10px;
      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: #336;
      color: #ccf;
      padding: 0.3rem 0.5rem; 
      display: inline-block; 
      border-radius: 10px;
      margin: 0.3rem 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"); }
    
    
    
    .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; }
}