body {	
	margin:0;
	padding:0;
	background-image: url("http://gallery.artronweb.cz/html5-banner3/img/seznam.png");
	background-repeat: no-repeat;
	background-position: top left;
	height: 1200px;
}
#banner {
	position: absolute;
	top: 780px;
	left: 640px;
	width:480px;
	height:300px;
	/*position:relative;*/
	overflow:hidden;
	padding:0;	
	margin:0;
	border:1px solid #999;
	font-family: Arial, Helvetica, sans-serif;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0.1) 100%);
}
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:5px;
	left:30px;	
	width: 80px;
	height: auto;	
}
.text0 {
	color: #d8ae04;	
	font-weight: regular;
	font-size:18px;	
	position:absolute;
	letter-spacing: 2px;
	top:30px;
	left:130px;
}
.text1 {
	color: #05a643 ;
	font-weight: bold;
	font-size:18px;
	position:absolute;
	top:8px;
	left:130px;
	white-space:nowrap;
	letter-spacing: 7px;
	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 {
	margin: 0 8px;
	height: 235px;
	position: relative;
}
.item {
	border: 1px solid #999;
	height: 115px;
	width: 150px;
	margin-top: 10px;
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding-top: 10px;
	background-color: #fff;
	font-size: 14px;
}
.one {
	left: 0px;
	top: 0px;
}
.two {
	left: 157px;
	top: 0px;
}
.three {
	left: 313px;
	top: 0px;
}
.four {
	left: 0px;
	top: 120px;
}
.five {
	left: 157px;
	top: 120px;
}
.six {
	left: 313px;
	top: 120px;
}
.item img {
	max-width:100%;
	height: auto;
}
.nazev {
	position: absolute;
	background-color: #d8ae04;
	color: #fff;
	bottom: 0px;
	width: 100%;
	text-align: center;
	padding: 2px 0px;
	font-size: 12px;
	transition: all 1s ease-in-out;
}
.cena {
	position: absolute;
	background-color: #05a643;
	color: #fff;
	top: 0px;
	padding: 2px 4px;
	right: 0;
}
.popis {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
	bottom: 18px;
	padding: 2px 0px;
	right: 0;
	font-size: 10px;
	width: 100%;
	text-align: center;
	transition: all 1s ease-in-out;
}

/* 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,
.s20 .text0 { 
	opacity: 0;
}
.s2 .text0
.s3 .text0,
.s4 .text0,
.s5 .text0,
.s6 .text0,
.s7 .text0,
.s8 .text0,
.s9 .text0,
.s10 .text0,
.s11 .text0,
.s12 .text0,
.s13 .text0,
.s14 .text0,
.s15 .text0,
.s16 .text0,
.s17 .text0,
.s18 .text0,
.s19 .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,
.s10 .text1,
.s11 .text1,
.s12 .text1,
.s13 .text1,
.s14 .text1,
.s15 .text1,
.s16 .text1,
.s17 .text1,
.s18 .text1 { 
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);		
	opacity: 1;
}
.s19 .text1 { 
	-webkit-transform:scale(2);
	-moz-transform:scale(2);
	-ms-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
	opacity: 1;
}
.s20 .text1 { 
	opacity: 0;
}

/* PRODUKTY */

.s0 .item {
	opacity: 0;
}
.s1 .item {
	opacity: 1;
}
.s20 .item { 
	opacity: 0;
}
.s2 .item.one,
.s3 .item.one { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s2 .item.one .nazev,
.s3 .item.one .nazev {
	font-size: 18px;
}
.s2 .item.one .popis,
.s3 .item.one .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s4 .item.one {
	z-index: 2;
}
.s5 .item.two,
.s6 .item.two { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	left: 0px;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s5 .item.two .nazev,
.s6 .item.two .nazev {
	font-size: 18px;
}
.s5 .item.two .popis,
.s6 .item.two .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s7 .item.two {
	z-index: 2;
}
.s8 .item.three,
.s9 .item.three { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	left: 0px;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s8 .item.three .nazev,
.s9 .item.three .nazev {
	font-size: 18px;
}
.s8 .item.three .popis,
.s9 .item.three .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s10 .item.three {
	z-index: 2;
}
.s11 .item.four,
.s12 .item.four { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s11 .item.four .nazev,
.s12 .item.four .nazev {
	font-size: 18px;
}
.s11 .item.four .popis,
.s12 .item.four .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s13 .item.four {
	z-index: 2;
}
.s14 .item.five,
.s15 .item.five { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s14 .item.five .nazev,
.s15 .item.five .nazev {
	font-size: 18px;
}
.s14 .item.five .popis,
.s15 .item.five .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s16 .item.five {
	z-index: 2;
}
.s17 .item.six,
.s18 .item.six { 
	-webkit-transform:width 1s ease-in-out;
	-moz-transform:width 1s ease-in-out;
	-ms-transform:width 1s ease-in-out;
	-o-transform:width 1s ease-in-out;
	transform:width 1s ease-in-out;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 1;
	z-index: 2;
	font-size: 18px;
	padding-top: 0px;
}
.s17 .item.six .nazev,
.s18 .item.six .nazev {
	font-size: 18px;
}
.s17 .item.six .popis,
.s18 .item.six .popis {
	transform:translateY(-7px);
	font-size: 16px;
}
.s19 .item.six {
	z-index: 2;
}