* {padding: 0; margin: 0; font-size: 14px;}
body {background: #fff; color: #2a2d2f; font-family: 'Open Sans', sans-serif;}

@font-face {
  font-family: 'Open Sans';
  font-variation-settings: 'wght' 400; /* počiatočná hrúbka 400 (regular) */
  src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}

.container {margin: auto; max-width: 1366px;}

header 	{float: left; width: 100%; background: #0c0c0e; background-image: url(img/header.webp); background-repeat: no-repeat; background-size: contain;}
main 	{float: left; width: 100%; margin-top: 25px;}
footer 	{float: left; width: 100%;}

	a 	{text-decoration: none; cursor: pointer;}
	p 	{ font-size: 13px;}
	
	h1 	{font-size: 22px; color: #fff; letter-spacing: 0px;}
	h2 	{font-size: 15px; color: #fff;}
	h3 	{font-size: 15px;}

#header-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 35px 0;
}

	#logo {display: block; text-align: center; padding: 0 15px; }
	#logo h1 {color: #fff;}
	#logo p {color: #839299; font-size: 13px; font-weight: normal;}

	.menu 		{display: block; padding: 25px 0 15px 0; margin: auto;}
	.menu ul    {display: flex; flex-wrap: wrap; justify-content: center;}
	.menu ul li {display: block; text-align: center; margin: 10px;}
	
	.menu a 	{display: block; min-width: 150px; padding: 10px 5px; background: #e1e1e1; border-radius: 5px;}
	.menu h2 	{font-weight: 600; color: #222;}
	.menu p  	{font-weight: 400; color: #555;}
	
		.menu a:hover  {background: #ab1d20;}
			.menu a:hover h2 {color: #fff;}
				.menu a:hover p {color: #fff;}
		
		#selected {background: #ab1d20;}
			#selected h2 {color: #fff;}
				#selected p {color: #fff;}

	#copyright {
		display: block;
		margin: auto;
		padding: 35px 0 70px 0;
		text-align: center;
	} #copyright p {color: #505960;}
		#copyright a {font-size: 13px; color: #505960;}
	
	#ico {
		display: block;
		margin-top: 15px;
	} #ico p {font-size: 11px;}
		
/************* produkt *************/

.produkt-group {display: flex; flex-wrap: wrap; flex-direction: column;}
.produkt-title {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: center; margin: auto;}
	
	.produkt-title h3 {display: inline-block; margin: 10px 5px;}
	.produkt-title h3 p {display: block; font-weight: normal; color: #555;}

	.produkt-katalog {display: block; margin: 0 15px;}
	.produkt-katalog img {display: block; margin: 5px auto; width: 130px;}
	.produkt-katalog a {display: block; text-align:center; margin: 5px auto; padding: 8px 10px; color: #fff; font-weight: 600; border-radius: 5px;}

			.btn-erkado a {background: #cf4343;} .btn-erkado a:hover {background: #7e0505;}
			.btn-dre a {background: #BD580A;} .btn-dre a:hover {background: #8F420A;}
			.btn-vivneto a {background: #797979;} .btn-vivneto a:hover {background: #353535;}
			
.produkt-list  {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: 25px auto; padding-bottom: 55px;  border-bottom: solid 1px #d8d8d8;}
	.produkt-list figure {display: inline-block; min-width: 130px; margin: 5px;}
	.produkt-list a {display: block; width: max-content; margin: auto;}
	.produkt-list img {width: 30vw; max-width: 100px; padding: 10px; border: solid 1px #e1e1e1;}
	.produkt-list img:hover {border: solid 1px #575757;}
	
	.produkt-popis {text-align: center;}
	.model {display: block; padding: 5px 0;}
	.model p {display: inline-block; color: #555; font-weight: normal;}
		
	.cena {display: block; padding: 5px 0; margin-bottom: 5px; background: #eaeaea; border-radius: 5px;}
	.cena p {display: inline-block; color: #11790d;}
	
	.produkt-popis a {display: block; background: #636363; width: auto; color: #fff; font-weight: 600; padding: 5px; max-width: 130px; border-radius: 5px;}
	.produkt-popis a:hover {background: #3f3f3f;}
		
/************* služby *************/

.services {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: 25px auto;}
	
	.services section {display: block; width: 300px; height: max-content; margin: 10px; border: solid 1px #e1e1e1;}
	.services h3 {display: block; color: #fff; text-align: center; padding: 30px 0; background: #e1e1e1;}
	.services h3 p {display: block; color: #cfcfcf; font-weight: 600;}
	
		#doprava {background-image: url('img/doprava.webp'); background-size: cover; background-position: center;}
		#montaz {background-image: url('img/montaz.webp'); background-size: cover; background-position: center;}
	
		.services ul {display: block; font-size: 13px;}
		.services li {display: block; font-weight: 600; padding: 15px 15px; border-bottom: solid 1px #e1e1e1;}
		.services li p {display: block; color: #11790d; float: right;}
	
	
.services-info {display: block; max-width: 300px; margin: auto; padding: 15px; text-align: center;}
.services-info p {display: block; margin-bottom: 15px;}
.services-info a {display: block; width: 165px; background: #cf4343; font-weight: 600; color: #fff; padding: 10px 15px; margin: 5px auto 0 auto; border-radius: 5px;}
.services-info a:hover {background: #7e0505;}
		
/************* predajňa *************/

.showroom {display: block; width: max-content; margin: auto;}

.showroom-info {display: inline-block; width: max-content; min-width: 158px; border: solid 1px #e1e1e1; padding: 15px 25px; margin: 15px;}
		.showroom-info ul {display: block; color: #9aa4ab; padding: 10px 0;}
			.address-info {text-align: left;}
			.open-info {text-align: left;}
		
			.showroom-info-title 	{text-align: left; font-size: 15px; font-weight: bold; color: #313131 !important; padding: 0 35px 10px 0 !important;}
				.showroom-info li 	{display: block; padding: 1px 0; color: #575757;}
				.showroom-info li b 	{display: inline-block; float: right; color: #575757;}

.showroom-pics {display: block; padding: 10px 0; text-align: center;}	
		.showroom-pics a {display: inline-block;}
			.showroom-pics img {display: block; width: 120px; opacity: 0.85; filter: saturate(0.75);}
				.showroom-pics a:hover img {opacity: 1; filter: saturate(1);}
	
/************* responsivity *************/

@media screen and (max-width: 1600px) {
* {font-size: 13px;}
}

@media screen and (max-width: 1366px) {
.container{max-width: 1366px;}
* {font-size: 13px;}
}

@media screen and (max-width: 1024px) {
.container{max-width: 1024px;}
}

@media screen and (max-width: 960px) {
header {background-size: contain; background-position: bottom;}
.container{max-width: 960px;}
.produkt-title{max-width: 540px;}
.produkt-list{max-width: 540px;}
}

@media screen and (max-width: 768px) {
.container{max-width: 768px;}
}

@media screen and (max-width: 685px) {
.container{max-width: 685px;}
.menu {margin: auto; padding: 25px 0; max-width: 300px;}

.produkt-title{max-width: 300px; flex-direction: column;}
.produkt-title p {margin-top: 5px;}

.produkt-katalog img {display: inline-block; float: left; margin-right: 5px;} .produkt-katalog a {display: inline-block;}

.produkt-list{max-width: 400px;}

.showroom-pics {width: 185px;}
.showroom-pics img {width: 90px;}
}

@media screen and (max-width: 480px) {
#logo {width: 250px;}
.container{max-width: 480px;}
.produkt-list figure {min-width: 80px;}
.produkt-list img {width: 20vw;}
	* {font-size: 13px;}
}