/*
	================================================
	www.igraonica.ba
	www.promocija.ba
	www.evento.ba

	www.kemalavdovic.ba
	Kemal Avdovic © 2017
	================================================

*/

/* -- General Styles -- */
/* Text and selection colour */
::selection { background: #0A364e; color: #FFF; }
::-moz-selection { background: #0A364e; color:#FFF; }
/* Links, Images and input fields colour */
a:link, a:visited { color: #312066; 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%/1.65 Open Sans, sans-serif; -webkit-font-smoothing: antialiased; color: #FFF; }
h1 { font-size: 3.2em; font-weight: bold; }
h2 { font-size: 2.2em; font-weight: bold; }
h3 { font-size: 1.2em; 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; }
.alpha { font-size: 2.875em; } /* 60px */
.beta { font-size: 2.25em; } /* 36px */
.gama { font-size: 1.75em; } /* 28px */
.delta { font-size: 1.625em; } /* 26px */
.epsilon { font-size: 1.5em; } /* 24px */
.zeta { font-size: 1.25em; } /* 20px */
.eta { font-size: 1.125em; } /* 18px */
.theta { font-size: 1em; } /* 16px */
.iota { font-size: 0.875em; } /* 14px */
.font-normal { line-height: normal; }
.font-condensed { line-height: 1; }
/* Font colors */
.font-purple { color: #312066; }
.font-grey { color: #4C4C4C; }

/* -- Main Layout -- */
body { margin: 0 auto; padding: 0; } /*Edit or remove background image*/
body > header { margin: 0 auto; width: 100%; height: 450px; }
body > footer { width: 80%; margin: 2em auto 0 auto; padding: 0;  }
.main { width: 80%; margin: 0 auto; }
.content { float: left; width: 100%; }
.sidebar { float: right; width: 28%; font-size: 0.9em; }
.content-top { padding: 3em 3em 1.5em 3em; }
.content-top p { padding: 0 0 1.5em 0; }

/* -- Header -- */
.header-top { margin: -10em auto 0 auto; width: 80%; }
/* Logo */ 
#logo { margin: 1.5em 3em; }
/* Main navigation */
nav { text-transform: uppercase; width: 50%; }
nav ul { width: 100%; }
nav ul li { width: 20%; }
nav ul li a:link, nav ul li a:visited { padding: 1em 0; color: #FFF; text-align: center; text-decoration: none; list-style-type: none; display: block; }
nav ul li a:hover, #nav ul li a:focus { color: #312066; }

/* -- Additional Styles -- */
/* Width */
.width-100 { width: 100%; }
.width-70 { width: 67.5%; }
.width-50 { width: 47.5%; }
.width-30 { width: 27.5%; }
.width-20 { width: 18%; }
/* Warp */
.flex-warp { display: flex; align-items: flex-start; flex-flow: row wrap; justify-content: space-between; }
.flex-horizontal-align-center { display: flex; align-items: center; justify-content: space-between; }
.flex-horizontal-align-centerr { display: flex; align-items: center; justify-content: space-between; }
.flex-horizontal-align-centerrr { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.flex-horizontal-align-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.flex-veritcal-align-top { display: flex; align-items: flex-start; flex-direction: column; }
.flex-veritcal-align-center { display: flex; align-items: center; flex-direction: column; justify-content: center; }
.flex-horizontak-row-reverse { display: flex; align-items: flex-start; flex-direction: row-reverse; justify-content: space-between; }
/* Colors */
.purple-color { background: #312066; }
.purple-color-trans { background: rgba(49, 32, 102, 0.8); }
.pink-color { background: #EF2D56; }
.pink-color-trans { background: rgba(239, 45, 86, 0.8); }
.blue-color { background: #0A369D; }
.blue-color-trans { background: rgba(10, 54, 157, 0.8); }
.green-color { background: #0B6E4F; }
.green-color-trans { background: rgba(11, 110, 79, 0.8); }
.white-color { background: #FFF; }
.grey-color { background: #E5E5E5; }
/* Margin */
.margin-main { margin: 3em auto; }
.margin-t2em { margin-top: 2em; }
.margin-b2em { margin-bottom: 2em; }
.margin-r2em { margin-right: 2em; }
.margin-l2em { margin-left: 2em; }
.margin-t1em { margin-top: 1em; }
.margin-b1em { margin-bottom: 1em; }
.margin-r1em { margin-right: 1em; }
.margin-l1em { margin-left: 1em; }
/* Padding */
.padding-1em { padding: 1em; }
.padding-2em { padding: 2em; }
/* Buttons */
.button { text-decoration:none; width: 48%; padding: 0.55em 0; cursor: pointer; text-align: center; }
a:link.button,a:visited.button { background: #FFF; color: #312066; }
a:hover.button, a:focus.button { background: #312066; color: #FFF; }
.button-purple { text-decoration:none; padding: 0.55em 0; cursor: pointer; text-align: center; }
a:link.button-purple,a:visited.button-purple { background: #312066; color: #FFF; }
a:hover.button-purple, a:focus.button-purple { background: #FFF; color: #312066; }
/* Text wight */
.text-300 { font-weight: 300; }
.text-400 { font-weight: 400; }
.text-600 { font-weight: 600; }
.text-700 { font-weight: 700; }
.text-800 { font-weight: 800; }




/* -- MEDIA QUERYS -- */
/* Media screen WIDTH:1000px; */
@media screen and (max-width:1281px) {
	.main { width: 80%; }
	.header-top { width: 80%; }
	body > footer { width: 80%; }
}
/* Media screen WIDTH:700px; */
@media screen and (max-width:1025px) {
	.main { width: 95%; }
	.header-top { margin: -20em auto 0 auto; width: 95%; }
	body > footer { width: 95%; }
	body { font-size: 90%; }
	.width-30, .width-50, .width-70 { width: 100%; }
	.flex-horizontak-row-reverse, .flex-veritcal-align-top, .flex-horizontal-align-centerr { flex-flow: row wrap; flex-direction: column; justify-content: center; }
	nav { width: 100%; }
	nav ul li { width: 50%; }
	nav ul li a:link, nav ul li a:visited { padding: 1em 2em; }
}
/* Media screen WIDTH:460px; */
@media screen and (max-width:460px) {
	body { font-size: 80%; }
	.content-top { padding: 1.5em 1.5em 0.5em 1.5em; }
}