body {	
	margin:0;
	padding:0;
}
#banner {
	width:480px;
	height:300px;
	position:relative;
	overflow:hidden;
	padding:0;	
	margin:0;
	border:1px solid #999;
	font-family: Arial, Helvetica, sans-serif;
}
a img {
	border: 0;  /* obrazky v odkazu kolem sebe nemaji ramecek */
}
a {
	text-decoration:none; /* odkazy nechceme podtrhavat */
}
.container {
	position: absolute;
	width: 100%;
	height: 100%;
}
.click { 
	width: 100%; /* proklik pres celou plochu banneru */
	height: 100%;
	display: block;
	overflow: hidden;  
	position: absolute;
}
.logo {
	position:relative;
	top:10px;
	left:40px;	
	width: 80px;
	height: auto;	
}
.text0 {
	color: #d8ae04;	
	font-weight: regular;
	font-size:20px;	
	position:absolute;
	letter-spacing: 0px;
	top:25px;
	left:125px;
}
.text1 {
	color: #05a643 ;
	font-weight: bold;
	font-size:20px;
	position:absolute;
	top:25px;
	left:285px;
	white-space:nowrap;
	letter-spacing: 10px;
	z-index:10;
}

.text1 p, .text0 p {
	padding:0;
	margin:0;	
}
.car {
	position:absolute;
	width: auto; /* protoze chceme rozmery modifikovat podle rozmeru banneru, definujeme je v CSS */
	height: 320px;
	top:-40px; 
	right:-600px; 
	z-index:0;
	
}
.grid {
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	margin: 10px;
}
.item {
	border: 1px solid #000;
	position: relative;
	height: 110px;
}
.item img {
	width: 140px;
	max-height: 110px;
}
.nazev {
	position: absolute;
	background-color: #d8ae04;
	color: #fff;
	bottom: 0px;
	width: 100%;
	text-align: center;
	padding: 2px 0px;
	font-size: 14px;
}
.cena {
	position: absolute;
	background-color: #05a643;
	color: #fff;
	top: 0px;
	padding: 2px 4px;
	right: 0;
	font-size: 14px;
}

/* ANIMACE ----------------------------------------------------------------- */

.text0, .text1, .item {
	-webkit-transition: all 1s cubic-bezier(0.735, 0.005, 0.250, 1.000); /* Saf3.2+, Chrome */
	-moz-transition: all 1s cubic-bezier(0.735, 0.005, 0.250, 1.000); /* FF4+ */
	-ms-transition: all 1s cubic-bezier(0.735, 0.005, 0.250, 1.000); /* IE10 */
	-o-transition: all 1s cubic-bezier(0.735, 0.005, 0.250, 1.000); /* Opera 10.5+ */
	transition: all 1s cubic-bezier(0.735, 0.005, 0.250, 1.000);	
} 

/* PŘEDVÁNOČNÍ */

.s0 .text0,
.s1 .text0,
.s10 .text0 { 
	opacity: 0;
}
.s2 .text0
.s3 .text0,
.s4 .text0,
.s5 .text0,
.s6 .text0,
.s7 .text0,
.s8 .text0,
.s9 .text0 {	
	opacity: 1;
}

/* NABÍDKA */

.s0 .text1 { 
	-webkit-transform:scale(4);
	-moz-transform:scale(4);
	-ms-transform:scale(4);
	-o-transform:scale(4);
	transform:scale(4);	
	opacity: 0;
}
.s1 .text1,
.s2 .text1
.s4 .text1,
.s5 .text1,
.s6 .text1,
.s7 .text1,
.s8 .text1,
.s9 .text1 { 
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);		
	opacity: 1;
}
.s8 .text1 { 
	-webkit-transform:scale(2);
	-moz-transform:scale(2);
	-ms-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
	opacity: 1;
}
.s10 .text1 { 
	opacity: 0;
}

/* PRODUKTY */

.s0 .item {
	opacity: 0;
}
.s1 .item,
.s2 .item,
.s3 .item,
.s4 .item,
.s5 .item,
.s6 .item,
.s7 .item,
.s8 .item,
.s9 .item { 
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);		
	opacity: 1;
}
.s10 .item { 
	opacity: 0;
}
.s2 .item.one { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}
.s3 .item.two { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}
.s4 .item.three { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}
.s5 .item.four { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}
.s6 .item.five { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}
.s7 .item.six { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 1;
}