*{
	margin:0;
	padding:0;
}
html{
	box-sizing:border-box;
	scroll-behavior:smooth;
}
.clr{
	clear:both;
}


nav{
	background-color:#000000;
	text-align:center;
	height:200px;
	padding:0;
}

.navLogo{
	margin-top:-20px;
	width:330px;
	text-align:center;
}
.obrt{
	
	color:white;
	margin-top:-60px;
	font-size:1em;
	text-transform:uppercase;
	letter-spacing: 2px;
	
}
nav a{
	text-decoration:none;
	font-weight:bold;
}
nav a:hover{
	cursor:pointer;
}

main{
	padding:50px 100px;
}

.hero{
	height:500px;
	margin:auto;
	background-image:url("slike/hero.jpg");
	background-size:cover;
	background-position:left;
	text-transform:uppercase;
	color:white;
	font-weight:700;
	padding:50px 300px;
	font-size:3em;
	line-height:150px;
}

article{
	margin:100px;
}
article p{
	text-align:center;
	line-height:50px;
	font-size:2em;
}
header{
	padding:50px;
	text-align:center;
	line-height:2em;
	font-size:3em;
}

.kontakt{
	
}

footer{
	margin:0;
	background-color:#000000;
	text-align:center;
	padding-top:15px;
	color:white;
	position:relative;
	bottom:0;
	text-transform:uppercase;
	font-size:0.8em;
}
h3{
	border-bottom:1px solid gray;
	margin-bottom:10px;
	padding:5px;
}

footer a{
	color:white;
	text-decoration:none;
	display:block;
	padding-bottom:10px;
}
footer a:hover{
	text-transform:uppercase;
	font-size:1em;
	text-decoration:underline;
}
footer aside{
	color:black;
	background:gray;
	position:relative;
	bootom:0;
	padding:5px;
	margin:50px 0 0 0;
}



/*--------------responsive rules---------------*/
@media (max-width:1023px){
	
}

@media (max-width:767px){
	article{
	    margin:0;

	}
	article p{
	    font-size:1.4em; 
	}
}

@media (max-width:479px)
{
    main{
        padding:10px;
         font-size:0:5em;
    }
	.hero{
		font-size:2em;
		line-height:100px;
		padding:50px;
		height:50%;	
	   	}
		
		
	article{
		padding:10px;
		margin:0;
		}
	article p{
	    font-size:1.4em;
	}
}