/* CSS Document */
@import url(clasy.css);
body
{
	background-image:url('../galer/main.gif');
	background-repeat:repeat-x;
    background-position:top;
    background-attachment:fixed;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11pt;
	color:#191717;
}
:root
{

--image-size: 160px;

--gap: 1.5rem;

--text-color: #948080;

--primary-color: #2c3e50;
--accent-color: #e74c3c;

}
/* pohyblivá galerie */
     .gallery-container 
        {
            overflow-x: hidden;
            padding: 2rem 0;
            position: relative;
        }

        .scrolling-track 
        {
            display: flex;
            animation: scroll 40s linear infinite;
        }

        .gallery-item 
         {
            flex: 0 0 300px;
            height: 200px;
            margin: 0 15px;
            cursor: pointer;
            transition: transform 0.3s;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .gallery-item:hover 
        {
            transform: scale(1.05);
        }

        .gallery-item img 
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .modal-overlay 
         {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content 
        {
            position: relative;
            max-width: 90%;
            max-height: 90%;
        }

        .modal-nav 
         {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.8);
            padding: 1rem;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .modal-nav:hover 
        {
            background: var(--accent-color);
            color: white;
        }

        .prev { left: 2%; }
        .next { right: 2%; }
        .close-btn {
            position: absolute;
            top: 2%;
            right: 2%;
            color: white;
            font-size: 2rem;
            cursor: pointer;
        }
		     @keyframes scroll
       {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-300px * 10)); }
        }

        @media (max-width: 768px) 
      {
            .gallery-item 
           {
                flex: 0 0 200px;
                height: 150px;
            }
        }
    

/* nové tagy podle HTML 5 */
header
{
	margin:0 auto;
	width:960px;
	padding:6px; 
	color: #7b1d1a;
    font-weight:bold;
    font-style:italic;
    font-variant:small-caps;     
}
nav
{
   	margin:0 auto;
    height:40px;
	width:990px;
	padding:6px;
} 
main
{
	display:flex;  
    flex-flow: row wrap;
	margin:0 auto;
	width:990px;
}   
section
{
	display: grid;
    flex-basis:700px;
	align-self: start;
	padding-right:8px;
	line-height: 1.4em;	
}

aside
{
	flex-basis:200px;
	margin:3px;
	padding:6px;
}
 
footer
{
	
	margin:0 auto;
    max-width: 1000px;
	width: 980px;
	height: 80px;
	text-align: center;
    border:#cff thin inset;
    background-color:#d3b984;
    border-radius: 8px;
	clear: both;
}
span
{
color:rgb(39, 33, 9);
font-weight:bold;
}
a
{
	color:#CCC;
	text-decoration:none;
}
blockquote
{
	border-radius:4px;
    background-color:#ec8c70;
    border:#66ccff thin inset;
    color:black;
    max-width:700px;
    padding:4px;
}
code
{
    display:block;
    max-width: 700px;
    border-radius:6px;
    border:#66ccff thin inset;
    background-color:#b0d4ff;
    color:#000098;
    padding:2px;
    font-size:11pt;
}
/* kontextové selektory */
 
section p
{
    line-height: 1.8em;
}

section a 
{
    color: #EF6534;
}

/* pseudoelemnt */
a:link {text-decoration: none; color:#bb3232;}
a:visited {text-decoration: none; color:#211582;}
a:active {text-decoration: none; color:#19105c;}
a:hover {text-decoration: none; color:#b2322f; background-color: #cccccc; padding: 2px; border-radius: 4px;}

/* třídy flexboxu */ 
.box 
{
display: flex;
}
/* selektoroví třídy */
p.prava
{
text-align: right;
font-weight: bold;
padding-right: 40px;
}
section.plna
{
	display: grid;
    flex-basis:960px;
	align-self: start;
	padding-right:8px;
	line-height: 1.4em;	
}
h3.vyrazne
{
text-align: center;	
color: #19105c;
border-radius: 8px;
border: #66ccff thin inset;
padding: 4px;
}
h4.orientace
{
	margin-right: 10px;
	width: 650px;
text-align: center;	
color: #350417;
border-radius: 8px;
border: #66ccff thin inset;
padding: 4px 20px;	
}

/* selektorové identifikátory a třídy v navigačním menu*/
ul#hlmen
{
	position:relative;
	top: 20px;
	display:block;
	list-style-type:none;
	float:right;
	width:860px;
}
ul#hlmen li
{
	width:120px;
	float:left;
	position:relative;
	text-align:center;
	border-right:#2e1515 thin solid;
	border-bottom:#2e1515 thin solid;
	padding:2px;
}
ul#hlmen li.levram
{
	border-left:#2e1515 thin solid;
}
ul#hlmen li a
{
	text-decoration:none;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
}
/* konec navigačního menu */
   
/* rozbalovací popisný seznam */

dl.rozbal 
	        {
            grid-area: description;
            padding: 10px;
            background: #ad6767;
            border-radius: 8px;
            border-left: 4px solid #0d220e;
            }
        
dl.rozbal  dt
	        {
            font-weight: bold;
            margin-top: 15px;
            padding: 8px 15px;
            background-color: #a28d5c;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            }
        
     
        
dl.rozbal   dd 
	        {
            margin-left: 25px;
            padding: 6px 8px;
            display: none;
             }

dl.rozbal dt:hover
		 	{
            background-color: #7089a6;
            }   
/* konec rozbalovacího popisného seznamu */