/*
	================================================
	================================================

*/

/* -- General Styles -- */
/* Text and selection colour */
::selection { background: #9580D6; color: #FFF; }
::-moz-selection { background: #9580D6; color:#FFF; }
/* Links, Images and input fields colour */
a:link, a:visited { color: #DED4FF; font-weight: bold; text-decoration: none; }
a:hover, a:focus { color: rgba(51,51,51,1); }
img, img a, embed, object, video, iframe { max-width: 100%; }
input[type="text"], input[type="password"], input[type="email"], input[type="radio"], input[type="checkbox"], input[type="submit"], select, textarea { font-family: 'Noticia Text', Georgia, serif; outline: none; } /*Edit font inside input fields*/
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, input[type="submit"]:focus, select:focus, textarea:focus { background: rgba(230,230,230,1); }
/* Additional CSS effects: transitions, border radius... */
.transition, a:link, a:visited { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; }
.border-radius { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.border-radius-top { border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.border-radius-bottom { border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; }
.border-radius-right{ border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; }
.border-radius-left { border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; }

/* -- Typography -- */
body { font: normal 100% open-sans, sans-serif; -webkit-text-stroke: 0.2px; }
h1 { font-size: 2.5em; font-weight: bold; }
h2 { font-size: 1.8em; font-weight: bold; }
h3 { font-size: 1.3em; font-weight: bold; }
mark { font-size: 1.25em; font-weight: bold; text-align: center; margin: 4%; }
b, strong { font-weight: bold; }
i { color: #999; font-style: italic; } /*Edit italic colour*/
em { color: #333; font-style: italic; }  /*Edit emphasis colour*/
small { font-size: 0.85em; }
blockquote { float: left; font-size: 1.125em; font-style: italic; text-align: center; color: #666; margin: 2%; quotes: "\201C" "\201D"; display: block; } /*Edit blockquote colour*/
blockquote:before { content: open-quote; font-weight: bolder; }
blockquote:after { content: close-quote; font-weight: bolder; }
blockquote p { display: inline; }

/* -- Main Layout -- */
body { margin: 0 auto; padding: 0; background: url(images/sp-background.png) repeat; } /*Edit or remove background image*/
body > header { width: 100%; height: 400px; margin: 0 auto; background: url(images/sarajevo-background.png) no-repeat center; background-size: cover; position: relative; }
body > footer { width: 100%; margin: 2em auto 0 auto; padding: 2em 12.5%; background: #5A4098 url(images/logo-footer.png) no-repeat 86.5% 50%;; color: #FFF; }
.onama { width: 100%; margin: 2em auto 0 auto; padding: 2em 12.5% 2em 30%; background: #FFF url(images/onama.png) no-repeat 5% 50%; }
.usluge { width: 100%; margin: 2em auto 0 auto; padding: 2em 12.5% 2em 30%; background: #FFF url(images/usluge.png) no-repeat 5% 50%; }
p { padding: 0.5em 0 0.5em 0; line-height: 1.55em; } /* paragraph setup */
.centertext { padding: 0.5em 10%; text-align: center; font-style: italic; }
.bavimose { font-size: 0.7em; }
.naslov { width: 100%; font-weight: 300; color: rgba(90,64,152,1); }
.podnaslov { width: 100%; padding: 0.5em 0 1em 0; font-weight: 300; }
/* -- Header -- */
/* Logo */ 
.logo { width: 100%; padding: 0.5em 0; position: absolute; top: 30%; text-align: center; }
.tagline { width: 100%; padding: 0.2em 0; position: absolute; bottom: 10%; background: rgba(255,255,255,0.9); color: rgba(90,64,152,1); font-size: 3em; text-align: center; font-weight: 700; }

/* -- MEDIA QUERYS -- */
/* Media screen WIDTH:1024px; */
@media screen and (max-width: 1024px) {
	.onama { width: 100%; margin: 2em auto 0 auto; padding: 18em 12% 2em 12%; background: #FFF url(images/onama.png) no-repeat 50% 2%; }
	.usluge { width: 100%; margin: 2em auto 0 auto; padding: 18em 12% 2em 12%; background: #FFF url(images/usluge.png) no-repeat 50% 2%; }
}
/* Media screen WIDTH:750px; */
@media screen and (max-width: 750px) {
}

/* Media screen WIDTH:640px; */
@media screen and (max-width: 640px) {
	.tagline { font-size: 2em; }
	.onama { padding: 18em 5% 2em 5%; }
	.usluge { padding: 18em 5% 2em 5%; }
}

/* Media screen WIDTH:500px; */
@media screen and (max-width: 500px) {
	body { font-size: 0.9em; }
	body > footer { background-image: none; }
	h1 { font-size: 2em; }
	.logo img { padding: 1em; }
}