body, h1, p  {
	margin:0;
}

body {
	margin:0;
	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:14px;
	background-color: #b3b3b3;	
}

#wrapper {
	margin: 0 auto;
	width: 960px;
	background: #FFF;
	position:relative;
}

#header {
	background:linear-gradient(to left, #ff0000 0%, #999999 65%);
	height: 80px;	
}

#header h1 {
	
	position:absolute;
	top:20px;
	left:180px;
	color:#000000;
}

.logo {
	margin-left:30px;
}

#menu {
	background: #3C3C3C;
	height: 40px;
}

.nav {
	font-size:14px;
	color:#333333;
	padding: 10px 20px 0 0;
	float:right;
}	
.nav ul {
	padding:0px;
	margin:0px;
	list-style:none;
	float:left;
}

.nav ul li {
	
	float:left;
	padding:0 13px;
}
	
.nav ul li a {
	display:block;
	float:left;
	color:#eeeeee;
	text-decoration:none;	
	letter-spacing:1px;
}
.nav ul li a:hover {
	color:#ff0000;
	
}

.banner {
	margin-bottom:15px;
	position:relative;
}

.slika  {
	width:960px;
	height:350px;
}

.text {
	padding:15px;
	position:absolute;
	bottom:16px;
	left:0px;
	margin-left:30px;
	margin-right:30px;
	background:#ff3333;
	opacity:0.7;
	color:#000000;
	font-family:"Arial Black", Gadget, sans-serif;
}

.massage {
	padding: 20px;
	font-size: 16px;
	text-align:center;
	font-weight: bold;
	border:3px solid #ff0000;
}

.container-product ul {
	margin:0px;
	padding:25px;
}

.container-product  li {
	list-style:none;	
}

.picture {
	padding-bottom:15px;
	width:290px;
	height:190px;
}

.product {
	width:290px;
	margin-right:20px;
	float:left;
	position: relative;
}

.product-last {
	width:290px;
	margin-right:0px;
	float:left;
	position: relative;
}

.clear {
	clear: both;
}

.naslov {
	padding:20px 50px;
	background-color:#ff0000;
	font-size:20px;
	color:#000000;
	opacity: 0.8;
	position:absolute;
	top:100px;
	left:0;
}

#footer {
	background: linear-gradient(to right, #ff0000 0%, #999999 65%);
	height: 80px;
	margin-top:25px;
}

#footer  h2 {
	font-size:18px;
	text-align:center;
	color: #000000;
	margin:0;
	padding-top: 28px;
}

.tekst1 {
	font-size:23px;
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
}

.reklama {
	
}

.tekst2 {
	font-size:23px;
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
}

.tekst3{
	width:480px;
	margin-right:0px;
	float:left;
	position: relative;
	font-size:24px;
}

.xgames {
	float:right;
}

.tekst4 {
	font-size:23px;
	margin-left:10px;
	margin-right:10px;
	margin-top:30px;
	margin-bottom:10px;
}


/*-------------------Responsive Tablet ---------------*/

@media (max-width:899px){
	#wrapper{
		width:100%;
		}
	
	.banner {
		 width:100%;
		 height:auto; 
		 
		}
	.slika {
		 width:100%;
		}
	
	.naslov1 {
		width:30%;
		}
	
	.naslov {
		position:absolute;
		top:100px;
		left:15px;
		width:30%;
		}
		 .container-product ul {
		 width:100%;
		 height:auto;
		 padding:0;
		}
	 .container-product li {
		width:33%;
		height:auto;
		padding: 0;
		margin: 0;
		}
	.container-product img {
		 width:100%; 
		}

	
	
	
	
}

/*------------------------Responsive Mobile------------------*/

@media (max-width:640px){
	#wrapper{
		width:100%;
	}
	.nav{
		display:none;
	}
	.naslov1{
		display:none;
	}
	.container-product ul{
		padding: 25px 0;
		margin:0;
	}
	.container-product li{
		
		width:100%;
		height:auto;
		padding:0;
		margin:0;
	}
	.naslov{
		position:absolute;
		top:100px;
		left:0;
		width:100%;
		padding:20px 0;
		text-align:center;
	}
	.clear{
		clear:both;
	}
}