main				{width: 100%;}
main div.baner		{background-image: url('../img/jana-lukas-uvod-pc.webp'); background-repeat: no-repeat; background-position: 40% 0%; background-size: cover; height: calc(100vh - 100px); display: flex; align-items: center;}
/*background-image: url('../img/hrad-pc.webp'); background-position: center 35%; height: 500px;*/
main div.baner>div						{display: inline-block; width: 400px; height: 75%; margin-left: calc(((100% - (var(--strsire))) / 2) + 0%); background-color: rgba(255, 255, 255, 0.7);}
main div.baner>div>section				{height: calc(100% - 55px); white-space: nowrap; overflow: hidden;}
main div.baner>div>section article		{display: inline-block; width: 400px; padding: 40px; white-space: normal; vertical-align: top;} /* +5% bylo *//*bylo: width: 600px; max-heigth nebylo*/
main div.baner>div>section article h2	{font-size: 25px; width: 100%; margin: 0px 0px 25px 0px; color: var(--modr); text-align: left;}
main div.baner>div>section article p	{font-size: 18px; width: 100%; color: var(--modr); text-align: justify; margin-bottom: 25px; }
main div.baner>div>section article a 	{display: inline-block; padding: 10px 20px; color: var(--modr); border: 2px solid var(--modr); font-size: 20px;}
main div.baner>div>section article a:hover 	{color: var(--bila); background-color: var(--modr);}
main div.baner>div>section article.bp 		{animation: banerslider 0.5s forwards;}
main div.baner>div>div 			        {width: 100%; padding: 20px; text-align: center;}
main div.baner>div>div span 	        {cursor: pointer; height: 15px; width: 15px; margin: 0px 5px; border-radius: 50%; display: inline-block; background-color: var(--modr); transition: background-color 0.6s ease;}
main div.baner>div>div span.ozn	        {background-color: var(--bila);}
@keyframes banerslider
{
    0%      {transform: translateX(0%);}
    100%    {transform: translateX(-100%);}
}

.rollc 		{scroll-margin-top: 100px;}

main>h2				{margin: auto; width: var(--strsire); font-size: 35px; text-align: center; color: var(--modr); padding-top: 40px; margin-bottom: 25px;}
main>hr 			{margin: auto; width: 410px; border: 1px solid var(--cerv); margin-bottom: 45px;}
main span.uvod		{display: block; margin: auto; width: var(--strsire); font-size: 16px; color: var(--modr); padding: 0px 100px; margin-bottom: 45px; text-align: justify; }
main span.uvod b 	{font-size: 16px; font-weight: 500;}

main>section		{display: block; margin: auto; width: var(--strsire); text-align: center;}
main>section>a 		{display: inline-block; width: 500px; height: 220px; border-width: 0px; border-style: solid; border-color: var(--modr); margin: 40px 20px;}
main>section>a>div 	{display: inline-block; padding: 15px; vertical-align: top; width: 40%; border-right: 2px solid var(--cerv);}
main>section>a>ul {display: inline-block; padding: 15px; vertical-align: top; width: 60%; padding-left: 30px;}
main>section>a>div>img 	{display: block; margin: 25px auto 30px auto; width: 60px;}
main>section>a>div>img path	{fill: #CCC;}
main>section>a>div>h3	{font-size: 20px; color: var(--modr); text-align: center;}
main>section>a>ul>li 	{font-size: 15px; text-align: left; color: var(--modr); margin-bottom: 5px;}
main>section>a:hover {border-color: var(--cerv);}
main>section>a:hover>div>h3	{color: var(--cerv);}
main>section>a:hover>div>li	{color: var(--cerv);}

main div.tym	{width: 100%; background-color: var(--modr);}
main div.tym h2		{color: var(--bila); font-size: 35px; text-align: center; padding-top: 40px; margin-bottom: 25px;}
main div.tym>div 	{margin: auto; width: var(--strsire); text-align: center; padding-bottom: 30px;} 
main div.tym>div a 	{display: inline-block; width: 300px; margin: 0px 40px;}
main div.tym>div a>div {margin-bottom: 15px; border-bottom: 2px solid var(--cerv);}
main div.tym>div a>div>img {width: 100%; filter: grayscale(100%); height: auto;}
main div.tym>div a>h3 	{font-size: 22px; color: var(--bila);}
main div.tym>div a>span	{font-size: 20px; font-weight: 500; color: var(--bila);}
main div.tym>div a>i 	{display: block; font-size: 16px; font-style: normal; color: var(--modr);}
main div.tym>div a:hover>div>img 	{filter: none;}
main div.tym>div a:hover>i 		{color: var(--bila);}