body, h1, p  {
	margin:0;
}
body {
	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:16px;
	background: url(../images/background.jpg);
}
a{
	text-decoration:none;
	color:black;
}
#wrapper {
	margin: 0 auto;
	width: 960px;
	background: #FFF;
	box-shadow: 0px 0px 46px 12px rgba(0,0,0,0.77);
}
#header {
	height: 100px;
	width:960px;
	background: linear-gradient(to right, black, black, #ce0101, #dd0303);
}
#header h1 {
	color:#dd0303;
	padding:10px;
	font-size: 60px;
	font-family:"Matura MT Script Capitals", Elephant, Berlin Sans FB Demi;
}
#header img, h1{
	float:left;
}
#menu {
	background:url(../images/movie-tape.jpg);
	height: 40px;
	width:960px;
}
.nav {
	font-size:15px;
	padding: 10px 0;
	float:right;
}
.nav ul{
	padding:0;
	margin:0;
	list-style:none;
}
.nav ul li {
	float:left;
	width:124px;
	padding:0 6.5px;
}
.nav ul li a{
	display: block;
	color:black;
	text-align:center;
	text-decoration:none;
	letter-spacing: 2px;
	font-family:"Matura MT Script Capitals", Elephant, Berlin Sans FB Demi;
	transition:0.3s;
}
.nav ul li a:hover {
	color:	#dd0303;
	transform:scale(1.3);
}
.banner{
	top:-2px;
	position:relative;
}
.banner img{
	width:960px;
	height:350px;
}
.text{
	position:absolute;
	bottom:15px;
	margin:0 20px;
	background: rgba(255, 255, 255, 0.5);
	color: black;
	padding: 10px;
	width: 900px;
	border-radius:8px;
}
.glavni-naslov{
	position:absolute;
	top:20px;
	right:0px;
	padding:20px;
	background: rgba(255, 255, 255, 0.5);
	color: black;
	border-top-left-radius:8px;
	border-bottom-left-radius:8px;
}
.poruka {
	position:absolute;
	left:15px;
	top:0px;
	letter-spacing:2px;
	font-size:35px;
	color:white;
	background-color:red;
	padding:15px;
	border-radius:10px;
	text-decoration:underline;
}
.container-product ul{
	margin:10px 0;
	padding:0;
}
.product{
	background: rgba(255, 0, 0, 0.3);
	position: relative;
	list-style:none;
	width: 300px;
	margin-left:15px;
	margin-bottom:15px;
	float: left;
	border-radius:8px;
}
.picture{
	width:300px; 
	height:200px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.naslov{
	color:black;
	position:absolute;
	top:110px;
	left:0;
	padding:20px 20px;
	font-size:25px;
	font-weight:bold;
	background: rgba(255, 255, 255, 0.5);
	border-top-right-radius:8px;
	border-bottom-right-radius:8px;
}
.naslov:hover{
	color:#dd0303;
}
.text1{
	padding:7px;
	color: black;
	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
}
.genre{
	font-size:15px;
	color:white;
	font-weight:bold;
}
.clear{
	clear:both;
}
.text2{
	margin:30px;
}
.text2 h2{
	font-family:"Matura MT Script Capitals", Elephant, Berlin Sans FB Demi;
	font-size:30px;
	padding-left:30px;
}
.text2 h2:hover{
	color:#dd0303;
}
.text2 p{
	text-indent: 50px;
}
.table{
	width:900px;
	margin:30px;
	text-align:left;
	vertical-align: center;
	font-size:18px;
	background: rgba(255, 0, 0, 0.7);
	border-radius:10px;
	color:white;
	border-collapse: collapse;
}
.head{
	font-size:22px;
	text-decoration: double underline;
}
.head th{
		padding:5px;
}
.data td{
	border-bottom: 1px solid white;
	padding:5px;
}
.data:hover{
	background:rgba(255, 255, 255, 0.3);
}
h3{
	margin-left:30px;
	font-size:20px;
}
.imp1{
	margin:30px;
	position:relative;
	width:900px;
	height:300px;
}
.img1{
	height:300px;
	width:45%;
}
.imp1 p, .imp1 ul{
	position:absolute;
	left:48%;
	top: 0;
	height:300px;
}
.imp1 p{
	padding:8px;
}
.imp1 ul li {
	padding:5px;
}
.imp2{
	margin:30px;
	position:relative;
	width:900px;
	height:300px;
}
.imp2 p{
	width:45%;
	padding:8px;
	height:300px;
}
.img2{
	position:absolute;
	left:48%;
	top: 0;
	height:300px;
	width:52%;
}

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

@media (max-width:899px){
	
	#wrapper, #header, #menu{
		width:100%;
	}
	#menu{
		background:100% url(../images/movie-tape-resp.jpg);
	}
	.nav ul li{
		width:110px;
	}
	.nav ul li a:hover{
		transform:scale(1);
		color:black;
	}
	.banner, .banner img{
		width:100%;
	}
	.text{
		margin:0;
		width:100%;
		border-radius:0;
	}
	.naslov:hover{
		color:black;
	}
	.product{
		margin:0;
		border-radius:0;
		width:33.33%;
		background:white;
	}
	.picture{
		border-radius:0;
		width:100%;
	}
	.genre{
		color:red;
	}
	.text2 h2:hover{
		color:black;
	}
	.imp1, .imp2{
		margin:30px 0;
		width:100%;
	}
	.data:hover{
		background:transparent;
	}
	.table{
		margin:20px 0;
		border-radius:0;
		width:100%;
	}
}

/*--------Responsive Mobilni---------*/

@media (max-width:640px){

	#header{
		background:black;
	}
	#header h1{
		letter-spacing:-3px;
		padding:20px 0;
		font-size: 50px;
	}
	.nav{
		display:none;
	}
	.product{
		width:100%;
	}
	.picture{
		height:300px;
	}
	.naslov{
		top:200px;
	}
	.img1{
		width:100%;	
		background: rgba(255, 255, 255, 0.5);
		opacity:0.5;
	}
	.imp1 p, .imp1 ul{
		position:absolute;
		left:0;
		top: 0;
	}
	.imp2 p{
		width:100%;
		position:absolute;
		left:0;
		top: 0;
	}
	.img2{
		position:absolute;
		left:0;
		top: 0;
		width:100%;
		opacity:0.5;
	}
	.imp1, .imp2{
		margin:0;
	}
}

#footer{
	background:#353535;
	height:60px;
}
#footer p{
	color:#dd0303;
	text-align:center;
}