@media only screen and (max-width: 999px) {
    
    /* predmety */
    div.predmety-detail .image { width: 100%; text-align: center; margin: 1rem 0; }  
    div.predmety-detail .image img { width: 50%; max-width: 100px; } 


    
    div.mapa_argaan
    {
        width: 100%; 
        position: relative;
    }
    
    div.mapa_argaan img
    {
        width: 100%; 
    }

    div.mapa_argaan a
    {
        display: block;
        position: absolute;
        height: 1.6em;
        line-height: 1.6em;
        width: 5em; 
        background: #fff; 
        text-align: center;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        border-radius: 0.3em;
        opacity: 0.7; 
    }
    div.mapa_argaan a:hover { opacity: 0.9; }
    div.mapa_argaan a.stewark   { top: 22%; left: 10%; width: 5em; }
    div.mapa_argaan a.thorniara { top:  30px; left: 220px; width: 5em; }
    div.mapa_argaan a.dzungle   { top: 60%; left: 70%; width: 5em; }
    div.mapa_argaan a.panna     { top: 43%; left:  1%; width: 8em; }
    div.mapa_argaan a.krvave    { top: 30%; left: 30%; width: 7em; }
    div.mapa_argaan a.tooshoo   { top: 85%; left: 38%; width: 5em; }
    div.mapa_argaan a.klaster   { top: 90%; left: 70%; width: 5em; }
    div.mapa_argaan a.stribro   { top: 53%; left: 30%; width: 8em; }


    
    #g4bestiar div.item
    {  
        text-align: center;
    } 

    #g4bestiar div.item:hover
    { 
        background-color: #222;
    }  

    #g4bestiar div.item img
    { 
        margin-bottom: 0.5rem;
        border-radius: 5px;
        width: 100%; 
    } 

    #g4bestiar div.item span.beast-name
    {  
        font-weight: bold;
    }
    
}