body{
background-image: url("images/background.jpg");
background-repeat:no-repeat;
 background-size:cover;
font-family:calibri;
}


header{float:left;}
.clear{clear:both;}
i {
    border: solid #330000;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
	
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.button2:hover{background-color:white; color:black;}
footer{width:100%;
color:white;}
a{text-decoration:none;}

@media screen and (min-width: 901px) {

main{width:70%; margin: 0 auto;
}
nav li{float:left;
	width:14%;
	list-style-type:none;}



 nav a {
	color: white;
	width:70%;
	height:30px;
	display:block;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	padding:10% 4% 10% 4%;
	margin-right:200px;
	transition:background-color 1s ease;
		
}

header img{display:block; margin:0 auto;}






section{width:45%;
float:left;
margin-top:20px; color: white;}

section img{width:30%; margin-right:5%; margin-top:20px;}

section p{margin-bottom:2%;}


article{width:45%;
float:right;
margin-top:20px; color: white;
margin-bottom:2%;
}
article img{width:30%; margin-right:5%; margin-top:20px;}
article p{margin-bottom:7%;}



.selma{width:45%;
float:left;
margin-top:20px; color: white;
	
}

.selma img{width:30%; margin-right:5%; margin-top:20px;
	
}
.button2 {
	font-size: .8em;
	color: #fff;
	width: 40%;
	line-height: 1.15;
	font-weight: 700;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: .75em 0;
	border-radius: .5em;
	background: #330000;
	margin: auto;
	
}






.selma p{margin-bottom:2%;}



.mateja{width:45%;
float:right;
margin-top:20px; color: white;
	
}

.mateja img{width:30%; margin-right:5%; margin-top:20px;
	
}

.mateja p{margin-bottom:2%;}



.jan{width:45%;
float:left;
margin-top:20px; color: white;
margin-bottom:50px;
}

.jan img{width:30%; margin-right:5%; margin-top:20px;
	
}





}

@media screen and (min-width: 501px) and  (max-width: 900px) {
	
main{width:70%; margin: 0 auto;
}
nav li{float:left;
	width:25%;
	list-style-type:none;}



 nav a {
	color: white;
	width:70%;
	height:30px;
	display:block;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	padding:10% 4% 10% 4%;
	margin-right:200px;
	transition:background-color 1s ease;
		
}

header img{display:block; margin:0 auto;}






section{width:45%;
float:left;
margin-top:20px; color: white;}

section img{width:30%; margin-right:5%; margin-top:20px;}

section p{margin-bottom:12%;}


article{width:45%;
float:right;
margin-top:20px; color: white;
margin-bottom:5%;
}
article img{width:30%; margin-right:5%; margin-top:20px;}
article p{margin-bottom:7%;}



.selma{width:45%;
float:left;
margin-top:20px; color: white;
	
}

.selma img{width:30%; margin-right:5%; margin-top:20px;
	
}

.selma p{margin-bottom:7%;}



.mateja{width:45%;
float:right;
margin-top:20px; color: white;
	
}

.mateja img{width:30%; margin-right:5%; margin-top:20px;
	
}

.mateja p{margin-bottom:11%;}



.jan{width:45%;
float:left;
margin-top:20px; color: white;
margin-bottom:50px;
}

.jan img{width:30%; margin-right:5%; margin-top:20px;
	
}
.button2 {
	font-size: .8em;
	color: #fff;
	width: 40%;
	line-height: 1.15;
	font-weight: 700;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: .75em 0;
	border-radius: .5em;
	background: #330000;
	margin: auto;
	
}






}

@media screen and (max-width: 500px) {
	main{width:100%; margin: 0 auto;
}

nav li{float:left;
	width:90%;
	list-style-type:none;}



 nav a {
	color: white;
	width:70%;
	height:30px;
	display:block;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	padding:10% 4% 10% 4%;
	margin-right:200px;
	transition:background-color 1s ease;
		
}

header img{display:block; margin:0 auto;}






section{width:100%;
float:left;
margin-top:20px; color: white;}

section img{width:30%; margin-right:5%; margin-top:20px;}

section p{margin-bottom:12%;}


article{width:100%;
float:left;
margin-top:20px; color: white;
margin-bottom:5%;
}
article img{width:30%; margin-right:5%; margin-top:20px;}
article p{margin-bottom:7%;}



.selma{width:100%;
float:left;
margin-top:20px; color: white;
	
}

.selma img{width:30%; margin-right:5%; margin-top:20px;
	
}

.selma p{margin-bottom:7%;}



.mateja{width:100%;
float:left;
margin-top:20px; color: white;
	
}

.mateja img{width:30%; margin-right:5%; margin-top:20px;
	
}

.mateja p{margin-bottom:11%;}



.jan{width:100%;
float:left;
margin-top:20px; color: white;
margin-bottom:50px;
}

.jan img{width:30%; margin-right:5%; margin-top:20px;
	
}
.button2 {
	font-size: .8em;
	color: #fff;
	width: 50%;
	line-height: 1.15;
	font-weight: 700;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: .75em 0;
	border-radius: .5em;
	background: #330000;
	margin: auto;
	
}




	
}