@import "fontovi.css";

* {
	margin:          0;
	font-family:     Roboto-Light, Arial, sans-serif;
	font-size:       13pt;
	text-decoration: none; 
}

h1 {
	font-family:     Montserrat-Light;
	font-weight:     normal;
	font-size:       25pt;
	color:           #555555;
	margin:          0 0 20px 0;
}

h2 {
	font-family: Montserrat-Light;
	font-size:   21pt;
}

.iskljucena_selekcija {
	-moz-user-select:      none; /* Firefox */
	-ms-user-select:       none; /* Internet Explorer */
	-khtml-user-select:    none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select:   none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

#wrapper {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
	width:           100vw;
	height:          100vh;
}

#telo_stranice {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     center;
	padding:         15px;
}

header {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
	background:      #f4f4f4;
	
	height:          auto;
	padding:         12px 0 12px 30px;
}

header img {
	width:  50px;
	height: 50px;
	margin: 0 20px 0 0;
}

header #brand_name {
	font-family:     Montserrat-Light;
	font-weight:     normal;
	font-size:       28pt;
}

.narandzasti {
	color:     orange;
	font-size: inherit;
}

nav {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
	flex-wrap:       wrap;
	
	height:          auto;
	background:      none;
	padding:         28px 8px 0 12px;
}

nav a {
	font-family:   Roboto-Light, Inconsolata, Consolas, monospace;
	background:    #5966ee;
	color:         #ffffff;
	font-size:     10pt;
	padding:       1px 5px 1px 5px;
	margin:        0 5px 12px 5px;
	border-radius: 2px;
	text-align:    center;
}

nav a:hover {
	font-weight: bold;
}

.sredisnji {
	width:  80vw;
	height: auto;
	
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	
	margin:          0 0 24px 0;
}

.sredisnji_gornji {
	height:      50px;
	//background:  #aaaaaa;
	color:       #4455ee;
	
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
	border-bottom:          solid 1px #999999;
}

.sredisnji_gornji h2 {
	flex: 1;
}

.sredisnji_gornji img {
	width:  28px;
	height: 28px;
	margin: 0 10px 0 0;
}

.sredisnji_donji {
	height:      30%;
	font-family: Montserrat-Light;
	font-size:   14pt;
	padding:     10px 0 0 10px;
}

.sredisnji li {
	margin: 0 0 4px 12px;
}

/* -------------------------------- */
/* -          RESPONSIVE          - */
/* -------------------------------- */

@media only screen and (min-width: 300px) {
	nav a {
		padding:       4px 20px 4px 20px;
		margin:        0 5px 12px 5px;
		border-radius: 14px;
	}
}

@media only screen and (min-width: 768px) {
	h1 {
		font-size: 40pt;
		margin:    30px 0 40px 0;
	}
	
	header {
		height:     76px;
		min-height: 76px;
		padding:    0 0 0 30px;
		background: none;
	}
	
	header img {
		width:  50px;
		height: 50px;
		margin: 0 20px 0 0;
	}
	
	nav {
		height:     36px;
		min-height: 36px;
		background: #5966ee;
		padding:    0;
	}
	
	nav a {
		background: none;
		width:      120px;
		padding:    0;
		margin:     0;
		letter-spacing: 0.07em;
	}
	
	.sredisnji {
		width: 60vw;
	}
}

@media only screen and (min-width: 1400px) {
	.sredisnji {
		width: 40vw;
	}
}

@media only screen and (min-width: 1600px) {
	h1 {
		margin: 50px 0 50px 0;
	}
	
	.sredisnji {
		width: 30vw;
	}
}