@charset "utf-8";
:root {
	--sirka: 1100px;
	--gridmezi: 40px;
	--btxt: #555;
	--bline: #ddd;
	--marbot: 20px;
	--marbotvetsi: 40px;
}

main											{margin: auto; max-width: var(--sirka); font-size: 0;}
main h1											{font-family: 'Times New Roman', Times, serif; font-size: 25px; text-align: left; color: var(--btxt); margin-bottom: var(--marbot);}
main h2 										{display: block; font-size: 15px; font-weight: 400; margin-bottom: var(--marbot); color: #111;}

main menu										{text-align: left; list-style: none; padding: 10px 0px 10px 40px;}
main menu li									{display: inline; margin-right: 10px;}
main menu li:first-of-type::before 				{content: ""; padding-right: 0;}
main menu li::before 							{content: ">"; padding-right: 8px; color: var(--btxt); font-size: 16px; font-weight: bold;}
main menu a 									{font-size: 14px; color: var(--btxt); text-decoration: underline;}

main>div										{padding: 20px 0px 40px 0px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "obrazky popis"; column-gap: var(--gridmezi); align-items: start; border-bottom: 1px solid var(--bline); margin-bottom: var(--marbotvetsi);}
main>div>div									{position: sticky;}
main>div>div:first-of-type						{top: calc((1564px - 100vh) * -1);}
main>div>div:last-of-type						{top: calc((1209px - 100vh) * -1);}
main>div>div:first-of-type img					{width: 100%; height: auto; margin-bottom: var(--marbot);}
main>div>div:first-of-type video				{width: 100%; height: auto; margin-bottom: var(--marbot);}
main>div>div:first-of-type :nth-last-child(2)	{margin-bottom: 0px;}
main>div>div section.nahledy					{display: none;}
main>div>div section.barvy						{width: 100%; padding: 10px 0px; text-align: left; margin-bottom: var(--marbot);}
main>div>div section.barvy svg					{width: 40px; height: auto; margin: 0px calc((100% - 360px) / 18); margin-bottom: 18px;}
main>div>div section.barvy svg:hover 			{transform: scale(1.8,1.8); transition: transform 0.3s;}
main>div>div section.cena						{background-color: #f0f0f0; width: 100%;}
main>div>div section.cena>div					{display: inline-block; vertical-align: middle; }
main>div>div section.cena>div:nth-of-type(1)	{width: 80%; font-size: 35px; font-weight: 400; padding: 13px 0px 13px 20%; color: var(--btxt);}
main>div>div section.cena>div:nth-of-type(2)	{width: 20%;}
main>div>div section.cena small					{font-size: 16px;}
main>div>div section.cena form button			{display: inline-flex; justify-content: space-between; align-items: center; column-gap: 6px; height: 32px; background-color: #d9d9d9; font-size: 14px; border-radius: 25px; border: 0;}
main>div>div section.cena form button.czk		{padding: 0px 2px 0px 12px;}
main>div>div section.cena form button.eur		{padding: 0px 12px 0px 2px;}
main>div>div section.cena form button span		{display: inline-block; width: 28px; height: 28px; border-radius: 25px; border: 0px; background-color: #fff; cursor: pointer;}
main>div>div section.cena form:hover button		{cursor: pointer; color: blue; border: 1px solid #bbb; }
main>div>div section.cena form:hover button	span	{border: 1px solid #aaa;}
main>div>div>form button		 				{display: inline-block; width: 100%; padding: 16px 20px; font-family: 'Times New Roman', Times, serif; text-align: center; font-size: 27px; font-weight: 400; transition: all .3s; text-decoration: none; border: 2px solid #e60b2d; color: #FFFFFF; background-color: #e60b2d;}
main>div>div>form button svg 					{width: 23px; margin-left: 10px;}
main>div>div>form button svg path 				{fill: #fff; transition: all .3s;}
main>div>div>form button:hover 					{background-color: #e5c4bd; color: #e60b2d; cursor: pointer;}
main>div>div>form button:hover svg path 		{fill: #e60b2d;}
main>div>div section.dodani						{width: 100%; padding: 10px 0px; display: inline-flex; justify-content: center; align-items: center;}
main>div>div section.dodani	img					{width: 45px; margin-right: 20px;}
main>div>div section.dodani	span				{font-size: 16px; font-weight: 400; color: green;}
main>div>div section.dodani span.v 				{color: #D45C5C;}
main>div>div section.hodnoceni					{width: 100%; padding: 10px 0px; margin-bottom: var(--marbot); display: inline-flex; justify-content: center; align-items: center;}
main>div>div section.hodnoceni svg				{margin-left: 10px; margin-right: 10px;}
main>div>div section.hodnoceni span				{font-size: 16px; font-weight: 400; color: var(--btxt);}
main>div>div section.hodnoceni abbr				{font-size: 16px; font-weight: 400;}
main>div>div section.hodnoceni abbr:nth-of-type(1)	{color: #4285f4;}
main>div>div section.hodnoceni abbr:nth-of-type(2)	{color: #ea4335;}
main>div>div section.hodnoceni abbr:nth-of-type(3)	{color: #fbbc05;}
main>div>div section.hodnoceni abbr:nth-of-type(4)	{color: #4285f4;}
main>div>div section.hodnoceni abbr:nth-of-type(5)	{color: #34a853;}
main>div>div section.hodnoceni abbr:nth-of-type(6)	{color: #ea4335;}
main>div>div section.specifikace				{width: 100%; padding: 20px 0px 20px 0px; text-align: left; margin-bottom: var(--marbot); border-top: 1px solid var(--bline); border-bottom: 1px solid var(--bline);}
main>div>div section.specifikace>div 			{width: 100%; column-count: 2; column-gap: 10px;}
main>div>div section.specifikace label			{display: block; font-size: 14px;  color: var(--btxt); margin-bottom: 10px;}
main>div>div section.specifikace label b 		{font-size: inherit; font-weight: 400;}
main>div>div section.popis						{padding-right: 20px; text-align: left;}
main>div>div section.popis hr 					{width: 100%; margin-bottom: var(--marbot); border-style: solid; border-width: 0px 0px 1px 0px; border-color: var(--bline);}
main>div>div section.popis p 					{margin-bottom: var(--marbot); font-size: 14px; color: var(--btxt);}
main>div>div section.popis p:last-of-type 		{margin-bottom: 0px;}
main>div>div section.popis p b 					{font-weight: 400; color: #333;}
main>div>div section.popis span 				{display: inline-block; width: 20%; margin-top: 20px; margin-bottom: 40px; margin-left: 50px; vertical-align: top;}
main>div>div section.popis span:first-of-type	{margin-left: 0px;}
main>div>div section.popis span img 			{width: 100%; height: 100%;}
main>div>div section.popis span label			{margin-top: 15px; display: block; font-size: 14px; text-align: center;}

main section.recenze				{display: inline-block; width: 100%; text-align: left; margin-bottom: var(--marbotvetsi);}
main section.recenze figure			{display: inline-block; width: calc((100% - (var(--marbotvetsi) * 3)) / 4); margin-right: var(--marbotvetsi); text-align: center; vertical-align: top;}
main section.recenze figure:last-of-type			{margin-right: 0px;}
main section.recenze figure h3		{font-size: 15px; font-weight: 400; margin-bottom: 15px;}
main section.recenze figure svg		{margin: 15px 0px;}
main section.recenze figure span	{display: block; font-size: 15px; color: #777; margin-bottom: 15px;}
main section.recenze figure p		{font-size: 15px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 7; display: -webkit-box; margin-bottom: 15px;}
main section.recenze figure p b 	{font-size: inherit; font-weight: 400;}

main section.podobne				{display: inline-block; width: 100%; text-align: left; margin-bottom: var(--marbotvetsi);}
main section.podobne a 				{margin-right: 20px;}
main section.podobne img			{width: calc((100% - 100px) / 6);}