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

main{width:70%; margin: 0 auto;
}
header{float:left;}

.clear{clear:both;}
.button2 {
	font-size: .8em;
	color: #fff;
	width: 50%;
	line-height: 1.15;
	font-weight: 700;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: .95em 0;
	border-radius: .5em;
	background: #330000;
	margin: auto;
}
.button2:hover{background-color:white; color:black;}
.button2:nth-child(1) {width:50%;}
i {
    border: solid #330000;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
	
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
@media screen and (min-width: 901px) {


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:2%;}


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

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

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



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

.igra img{width:50%; margin-right:5%; margin-top:20px;
	
}


	

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

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

.bogica img{width:18%; margin-right:5%; margin-top:20px;
	}

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

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

.vjestica img{width:18%; margin-right:5%; margin-top:20px;
	}

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





footer{width:100%;
color:white;
margin-top:200px;}



}
@media screen and (min-width: 501px) and  (max-width: 900px) {
	

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%;}



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

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

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



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

.igra img{width:50%; margin-right:5%; margin-top:20px;
	
}

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

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

.bogica img{width:18%; margin-right:5%; margin-top:20px;
	}

.bogica p{margin-bottom:1%;}





footer{width:100%;
color:white;
margin-top:200px;}
}
@media screen and (max-width: 500px) {

header{float:left;width:95%;}
header a img{width:90%;}

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:90%;
float:left;
margin-top:20px; color: white;}

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

section p{margin-bottom:12%;}


article{width:90%;
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%;}



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

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

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



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

.igra img{width:50%; margin-right:5%; margin-top:20px;
	
}

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


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

.bogica img{width:18%; margin-right:5%; margin-top:20px;
	}

.bogica p{margin-bottom:1%;}



footer{width:100%;
color:white;
margin-top:50px;}
}