/*
	RB Hungary KFT
	russ css3
*/

/*
	egy grid box 101x101px
	boxok között 9x9px táv
*/

html, body{
	background-color: #fff;
	text-align: center,
}

#page{
	width: 720px;
	margin: 0px auto 0px auto;
	background-image: url('pillango_hatter.png');
	background-position: bottom right;
	background-repeat: no-repeat;
}

#header{
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 10px 0px;
	height: 90px;
	text-align: left;
	background-image: url(intro_header.jpg);
	background-repeat: no-repeat;
}

#header p{
		margin-right: 170px;
		font-size: 10px;
		color: #999;
}

#header a{
	font-size: 10px;
	color: #999;
	text-decoration: none;
}

#grid{
	width: 651px;
	height: 541px;
	background-image: url('russ-intro-bg.png');
	z-index: 2;
}

#grid_thumb_01{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_01.png');
	background-repeat: no-repeat;
	margin-left: 221px;
	margin-top: 1px;
	animation:grid_thumb_01_animation 10s;
	-webkit-animation:grid_thumb_01_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_01_animation{
	0%		{opacity: 1.0;}
	60%		{opacity: 1.0;}
	80%		{opacity: 0.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_01_animation{
	0%		{opacity: 1.0;}
	60%		{opacity: 1.0;}
	80%		{opacity: 0.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_02{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_02.png');
	background-repeat: no-repeat;
	margin-left: 331px;
	margin-top: 1px;
	animation:grid_thumb_02_animation 10s;
	-webkit-animation:grid_thumb_02_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_02_animation{
	0%		{opacity: 1.0;}
	50%		{opacity: 1.0;}
	70%		{opacity: 0.0;}
	90%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_02_animation{
	0%		{opacity: 1.0;}
	50%		{opacity: 1.0;}
	70%		{opacity: 0.0;}
	90%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_03{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_03.png');
	background-repeat: no-repeat;
	margin-left: 441px;
	margin-top: 1px;
	animation:grid_thumb_03_animation 10s;
	-webkit-animation:grid_thumb_03_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_03_animation{
	0%		{opacity: 1.0;}
	55%		{opacity: 1.0;}
	75%		{opacity: 0.0;}
	95%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_03_animation{
	0%		{opacity: 1.0;}
	55%		{opacity: 1.0;}
	75%		{opacity: 0.0;}
	95%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_04{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_04.png');
	background-repeat: no-repeat;
	margin-left: 550px;
	margin-top: 1px;
	animation:grid_thumb_04_animation 10s;
	-webkit-animation:grid_thumb_04_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_04_animation{
	0%		{opacity: 0.0;}
	40%		{opacity: 0.0;}
	60%		{opacity: 1.0;}
	90%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_04_animation{
	0%		{opacity: 0.0;}
	40%		{opacity: 0.0;}
	60%		{opacity: 1.0;}
	90%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_05{
	float: left;
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_05.png');
	background-repeat: no-repeat;
	margin-left: 1px;
	margin-top: 111px;
	animation:grid_thumb_05_animation 10s;
	-webkit-animation:grid_thumb_05_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_05_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 0.0;}
	40%		{opacity: 1.0;}
	60%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_05_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 0.0;}
	40%		{opacity: 1.0;}
	60%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_06{
	float: left;
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_06.png');
	background-repeat: no-repeat;
	margin-left: 221px;
	margin-top: 111px;
	animation:grid_thumb_06_animation 10s;
	-webkit-animation:grid_thumb_06_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_06_animation{
	0%		{opacity: 1.0;}
	55%		{opacity: 1.0;}
	75%		{opacity: 0.0;}
	95%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_06_animation{
	0%		{opacity: 1.0;}
	55%		{opacity: 1.0;}
	75%		{opacity: 0.0;}
	95%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_07{
	float: left;
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_07.png');
	background-repeat: no-repeat;
	margin-left: 331px;
	margin-top: 111px;
	animation:grid_thumb_07_animation 10s;
	-webkit-animation:grid_thumb_07_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_07_animation{
	0%		{opacity: 1.0;}
	63%		{opacity: 1.0;}
	73%		{opacity: 0.0;}
	93%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_07_animation{
	0%		{opacity: 1.0;}
	63%		{opacity: 1.0;}
	73%		{opacity: 0.0;}
	93%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_09{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_09.png');
	background-repeat: no-repeat;
	margin-left: 221px;
	margin-top: 221px;
	animation:grid_thumb_09_animation 10s;
	-webkit-animation:grid_thumb_09_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_09_animation{
	0%		{opacity: 1.0;}
	45%		{opacity: 1.0;}
	65%		{opacity: 0.0;}
	85%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

@-webkit-keyframes grid_thumb_09_animation{
	0%		{opacity: 1.0;}
	45%		{opacity: 1.0;}
	65%		{opacity: 0.0;}
	85%		{opacity: 1.0;}
	100%	{opacity: 1.0;}
}

#grid_thumb_10{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_10.png');
	background-repeat: no-repeat;
	margin-left: 111px;
	margin-top: 331px;
	animation:grid_thumb_10_animation 10s;
	-webkit-animation:grid_thumb_10_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_10_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 1.0;}
	30%		{opacity: 1.0;}
	50%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_10_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 1.0;}
	30%		{opacity: 1.0;}
	50%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_11{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_11.png');
	background-repeat: no-repeat;
	margin-left: 221px;
	margin-top: 331px;
	animation:grid_thumb_11_animation 10s;
	-webkit-animation:grid_thumb_11_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_11_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 0.0;}
	40%		{opacity: 1.0;}
	60%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_11_animation{
	0%		{opacity: 0.0;}
	20%		{opacity: 0.0;}
	40%		{opacity: 1.0;}
	60%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_12{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_12.png');
	background-repeat: no-repeat;
	margin-left: 551px;
	margin-top: 331px;
	animation:grid_thumb_12_animation 10s;
	-webkit-animation:grid_thumb_12_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_12_animation{
	0%		{opacity: 0.0;}
	10%		{opacity: 0.0;}
	30%		{opacity: 1.0;}
	50%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_12_animation{
	0%		{opacity: 0.0;}
	10%		{opacity: 0.0;}
	40%		{opacity: 1.0;}
	50%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_13{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_13.png');
	background-repeat: no-repeat;
	margin-left: 1px;
	margin-top: 441px;
	animation:grid_thumb_13_animation 10s;
	-webkit-animation:grid_thumb_13_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_13_animation{
	0%		{opacity: 0.0;}
	58%		{opacity: 0.0;}
	68%		{opacity: 1.0;}
	78%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_13_animation{
	0%		{opacity: 0.0;}
	58%		{opacity: 0.0;}
	78%		{opacity: 1.0;}
	88%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

#grid_thumb_14{
	position: absolute;
	width: 99px;
	height: 99px;
	background-image: url('thumb_14.png');
	background-repeat: no-repeat;
	margin-left: 331px;
	margin-top: 441px;
	animation:grid_thumb_14_animation 10s;
	-webkit-animation:grid_thumb_14_animation 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 2;
}

@keyframes grid_thumb_14_animation{
	0%		{opacity: 0.0;}
	23%		{opacity: 0.0;}
	43%		{opacity: 1.0;}
	63%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes grid_thumb_14_animation{
	0%		{opacity: 0.0;}
	23%		{opacity: 0.0;}
	43%		{opacity: 1.0;}
	63%		{opacity: 0.0;}
	100%	{opacity: 0.0;}
}

.cegunkrol_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 111px;
	margin-top: 1px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.cegunkrol_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.hireink_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 551px;
	margin-top: 111px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.hireink_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.termekeink_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 1px;
	margin-top: 221px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.termekeink_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.forum_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 441px;
	margin-top: 221px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.forum_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.kapcsolat_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 331px;
	margin-top: 331px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.kapcsolat_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.partnereink_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 111px;
	margin-top: 441px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.partnereink_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

.webshop_gomb{
	position: absolute;
	width: 99px;
	height: 99px;
	margin-left: 441px;
	margin-top: 441px;
	box-shadow: 0px 0px 5px #666;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index: 2;
}

.webshop_gomb:hover{
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}

#russ_logo{
	background-image: url('russ_kocka_logo.png');
	background-repeat: no-repeat;
	position: absolute;
	width: 127px;
	height: 126px;
	margin-left: 551px;
	margin-top: 441px;
	z-index: 2;
}

#pillango{
	width: 65px;
	height: 77px;
	margin: 0px;
	animation:pillango 4s;
	-webkit-animation:pillango 4s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 0;
	background-image: url('pillango.png');
	background-repeat: no-repeat;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	display: block;
	position: absolute;
}

#pillango2{
	width: 65px;
	height: 77px;
	margin: 0px;
	animation:pillango2 4s;
	-webkit-animation:pillango2 4s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	z-index: 0;
	background-image: url('pillango.png');
	background-repeat: no-repeat;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	display: block;
	position: absolute;
}


@keyframes pillango{
	0%		{opacity: 0.0;}
	10%		{opacity: 1.0;}
	90%		{opacity: 1.0; transform: rotate(30deg);}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes pillango{
	0%		{opacity: 0.0; -webkit-transform: translate(0px,30px); }
	25%		{opacity: 1.0; -webkit-transform: translate(175px,120px) rotate(40deg);}
	50%		{opacity: 1.0; -webkit-transform: translate(350px,30px) rotate(-20deg);}
	75%		{opacity: 1.0; -webkit-transform: translate(525px,120px) rotate(40deg); }
	100%	{opacity: 0.0; -webkit-transform: translate(700px,30px) rotate(-20deg);}
}

@keyframes pillango2{
	0%		{opacity: 0.0;}
	10%		{opacity: 1.0;}
	90%		{opacity: 1.0; transform: rotate(30deg);}
	100%	{opacity: 0.0;}
}

@-webkit-keyframes pillango2{
	0%		{opacity: 0.0; -webkit-transform: translate(0px,300px); }
	50%		{opacity: 1.0; -webkit-transform: translate(350px,300px); }
	100%	{opacity: 0.0; -webkit-transform: translate(700px, 300px); }
}