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:40px;	
	width: 80px;
	height: auto;	
}
.text0 {
	color: #d8ae04;	
	font-weight: regular;
	font-size:20px;	
	position:absolute;
	letter-spacing: 0px;
	top:20px;
	left:130px;
}
.text1 {
	color: #05a643 ;
	font-weight: bold;
	font-size:20px;
	position:absolute;
	top:20px;
	left:290px;
	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 {
	margin: 0 10px;
	height: 230px;
	position: relative;
}
.item {
	border: 1px solid #999;
	height: 110px;
	width: 147px;
	margin-top: 10px;
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding-top: 15px;
	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;

}
.cena {
	position: absolute;
	background-color: #05a643;
	color: #fff;
	top: 0px;
	padding: 2px 4px;
	right: 0;
}

/* 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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.s19 .item.six {
	z-index: 2;
}