body, html {
  height: 100%;
}

body, html, *, h1, h2, h3, h4, h5, h6, p, a, span, div {
  font-family: 'Open Sans', sans-serif;
}

h2, h3 {
  margin: 0;
  padding: 0;
}

.max_width {
  width: 100%;
  text-align: center;
}

.hidden_div {
  display: none;
}

.clear {
  clear: both;
}

/* Intro screen css */
#content_wrap {
  min-height: 100%;
  position: relative;
  background: url("../img/bg_faces_dark.png") repeat;
  padding-top: 20px;
}
#content_wrap #intro_screen, #content_wrap.outro {
  /*background: url(../img/bg_faces_light.png) repeat;*/
  background: url(../img/background.jpg) repeat;
}
#content_wrap #intro_screen.game_wrapper {
}
#content_wrap #div_logo {
  position: absolute;
  width: 320px;
  height: 176px;
  top: 212px;
  left: 220px;
}
#content_wrap #div_logo img {
  width: 100%;
}
#content_wrap #div_img {
  padding-top: 100px;
  margin-bottom: 12px;
}
#content_wrap #div_img img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 60px;
}
#content_wrap #div_img.finish_quickfix img {
  height: 80px;
}
#content_wrap #div_name {
  color: #fff;
  margin-bottom: 12px;
}
#content_wrap #div_rank {
  margin-bottom: 38px;
}
#content_wrap #div_rank img {
  height: 48px;
  margin-top: 12px;
}
#content_wrap #div_rank h3 {
  text-transform: uppercase;
  font-weight: 300;
  color: #fff;
  font-size: 15px;
}
#content_wrap #div_progress #progressbar {
  width: 200px;
  background: #4a4a4a;
  border: 2px solid #4a4a4a;
  box-shadow: 0 1px 2px #313131 inset;
  margin: 0 auto 16px;
  border-radius: 100px;
}
#content_wrap #div_progress #progressbar .ui-progressbar-value.ui-widget-header {
  border-radius: 100px;
}
#content_wrap #div_progress #progressbar .ui-widget-header {
  background: #5889ba url("../img/progress.png") repeat-x;
  border: none;
  border-radius: 100px 100px auto auto;
}
#content_wrap #div_progress p {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
#content_wrap #div_play {
  position: absolute;
  bottom: 72px;
}
#content_wrap #div_play a.button.play {
  border-radius: 100px;
  background-color: #37c754;
  color: #adf4c3;
  padding: 0.5em 1em;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 100px;
  border-bottom: 6px solid #268b3b;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 0 -1px #268b3b;
  padding: 8px 60px;
  text-decoration: none;
  margin-top: 2em;
  letter-spacing: 2px;
}
#content_wrap #div_play a.button.play:hover {
  background: #5ed376;
  color: #adf4c3;
  text-decoration: none;
}
#content_wrap #div_play a.button.play:active {
  background: #2c9f43;
}
#content_wrap #div_play a.button.play:active {
  position: relative;
  top: 6px;
  border-bottom: none;
}

.button {
  border-radius: 100px;
  background-color: #c12015;
  color: white;
  padding: 0.5em 1em;
  box-sizing: border-box;
  text-decoration: none;
}
.button:hover {
  background: #e72f22;
  color: white;
  text-decoration: none;
}
.button:active {
  background: #931810;
}
.button.share {
  border-radius: 100px;
  background-color: #002970;
  color: white;
  padding: 0.5em 1em;
  box-sizing: border-box;
  text-decoration: none;
  display: block;
  width: 260px;
  margin: 24px auto 0 auto;
  text-align: center;
}
.button.share:hover {
  background: #003ca3;
  color: white;
  text-decoration: none;
}
.button.share:active {
  background: #00163d;
}

button.button {
  border: none;
  border-radius: 100px;
  background-color: #37c754;
  color: white;
  padding: 0.5em 1em;
  box-sizing: border-box;
  text-decoration: none;
}
button.button:hover {
  background: #5ed376;
  color: white;
  text-decoration: none;
}
button.button:active {
  background: #2c9f43;
}

/* Quiz css */
.game_wrapper {
  width: 760px;
  height: 600px;
  position: relative;
  margin: auto;
  overflow: hidden;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 4px #a6a6a6;
}
.game_wrapper #header {
  height: 60px;
  background: #002970;
}
.game_wrapper #header .leftside #user_info_wrap, .game_wrapper #header .leftside img {
  float: left;
}
.game_wrapper #header .leftside img {
  margin: 8px 12px 0 8px;
  border-radius: 100px;
  box-shadow: 0 1px 1px #00163d;
}
.game_wrapper #header .leftside #user_info_wrap {
  padding-top: 16px;
}
.game_wrapper #header .leftside #user_info_wrap h2, .game_wrapper #header .leftside #user_info_wrap h3 {
  color: white;
  display: block;
}
.game_wrapper #header .leftside #user_info_wrap h2 {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
}
.game_wrapper #header .leftside #user_info_wrap h3 {
  margin: 0;
  font-size: 10px;
  font-weight: normal;
  padding-top: 4px;
  text-transform: uppercase;
  color: #d9d9d9;
}
.game_wrapper #header > img {
  display: block;
  position: absolute;
  left: 50%;
  top: -24px;
  margin-left: -90px;
  padding-right: 325px;
}
.game_wrapper #header #soundbar {
  position: absolute;
  width: 40px;
  height: 40px;
  right: 10px;
  top: 10px;
  background: url(../img/soundon.png) left center no-repeat;
}
.game_wrapper #header #soundbar.off {
  background: url(../img/soundoff.png) left center no-repeat;
}
.game_wrapper #static_content {
  position: relative;
}
.game_wrapper #static_content #question_countdown {
  height: 85px;
  position: absolute;
  right: 10px;
  top: -10px;
  z-index: 9999999;
}
.game_wrapper #static_content #progress_wrap {
  width: 255px;
  height: 20px;
  margin: 20px auto 0;
  position: relative;
}
.game_wrapper #static_content #progress_wrap div {
  display: inline;
}
.game_wrapper #static_content #progress_wrap #progress {
  /* max 225px */
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 20px;
}
.game_wrapper #static_content #progress_wrap #progress_gray {
  position: absolute;
  top: 0;
  right: 30px;
  background: #d3d3d3;
  height: 20px;
}
.game_wrapper #static_content #progress_wrap #progress_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 225px;
  height: 20px;
  background: url(../img/toplomer.png) left top no-repeat;
}
.game_wrapper #static_content #progress_wrap #question_number_wrap {
  height: 20px;
  float: right;
  text-align: right;
}
.game_wrapper #questions_ul {
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
  width: 3800px;
  position: relative;
}
.game_wrapper #questions_ul > li {
  float: left;
  position: relative;
  width: 760px;
  height: 500px;
}
.game_wrapper #questions_ul > li .question_wrap {
  background: white;
}
.game_wrapper #questions_ul > li .question_wrap .question, .game_wrapper #questions_ul > li .question_wrap .answers {
  padding: 1em;
}
.game_wrapper #questions_ul > li .question_wrap .question {
  text-align: center;
  color: #58595b;
  font-size: 14px;
  padding-top: 2em;
}
.game_wrapper #questions_ul > li .question_wrap .question h2 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: bold;
  color: #c12015;
  text-transform: uppercase;
}
.game_wrapper #questions_ul > li .question_wrap .question .politician_info {
  color: #002970;
}
.game_wrapper #questions_ul > li .question_wrap .question .politician_img {
  width: 100px;
  height: 100px;
  margin: auto;
}
.game_wrapper #questions_ul > li .question_wrap .question .politician_img img {
  border-radius: 100%;
  width: 100px;
  max-height: 100px;
}
.game_wrapper #questions_ul > li .question_wrap .answers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f3f3f3;
  border-top: 1px solid #d9d9d9;
}
.game_wrapper #questions_ul > li .question_wrap .answers a {
  width: 40%;
  margin: auto;
  display: block;
  background: #002970;
  margin-bottom: 1em;
  padding: 0.5em;
  border-radius: 100px;
  color: white;
  border: 5px solid #cdcdcd;
  text-align: center;
  float: left;
  margin-left: 50px;
}
.game_wrapper #questions_ul > li .question_wrap .answers a:hover {
  text-decoration: none;
  background: #003ca3;
}
.game_wrapper #questions_ul > li .question_wrap .answers a.odg_tacan {
  background: #37c754;
  border-color: #72d887;
  font-weight: bold;
  text-shadow: 0 -1px 0 #2c9f43;
}
.game_wrapper #questions_ul > li .question_wrap .answers a.odg_netacan {
  background: #c12015;
  border-color: #e94439;
  text-shadow: 0 -1px 0 #931810;
}
.game_wrapper #questions_ul > li .question_wrap .answers a.odg_izabran {
  border-color: #002970;
}
.game_wrapper #modal_prepare {
  padding: 0;
}
.game_wrapper #modal_prepare h3 {
  text-align: center;
  padding: 0.8em 0 0.8em 0;
  color: #002970;
  margin: 0;
  border-radius: 6px 0 0 6px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e6e6e6;
}
.game_wrapper #modal_prepare #game_info {
  padding: 1em;
}
.game_wrapper #modal_prepare #game_info h4 {
  margin-top: 1em;
  text-align: center;
  color: #002970;
}
.game_wrapper #modal_prepare #game_info h2 {
  text-align: center;
  margin: 24px auto;
}
.game_wrapper #modal_prepare #game_info img {
  display: block;
  margin: auto;
}
.game_wrapper #modal_prepare #close_rank {
  display: block;
  margin: 24px auto 0;
  width: 100px;
  text-align: center;
  background: #37c754;
}
.game_wrapper #modal_prepare .modal-content {
  padding-top: 0;
  margin: 24px auto;
  padding-bottom: 2em;
}
.game_wrapper #modal_prepare #start_countdown {
  width: 150px;
  margin: 0 auto;
}
.game_wrapper #modal_prepare #start_game {
  text-align: center;
  width: 250px;
  display: block;
  margin: auto;
  font-weight: bold;
}
.game_wrapper #outro_screen {
   	background: url(../img/background.jpg) repeat; 
}
.game_wrapper #outro_screen #div_img {
  padding-top: 24px !important;
}
.game_wrapper #outro_screen #div_rank {
  margin-bottom: 36px !important;
}
.game_wrapper #outro_screen #game_details {
  margin-top: 48px;
}
.game_wrapper #outro_screen #game_details h1, .game_wrapper #outro_screen #game_details h2 {
  color: #002970;
  font-size: 20px;
  font-style: 300;
}
.game_wrapper #outro_screen #game_details h1 .big {
  font-size: 36px;
}
.game_wrapper #outro_screen #game_details h2 .big {
  font-size: 24px;
}
.game_wrapper #link_deklaracija {
  display: block;
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.game_wrapper #link_deklaracija a {
  display: block;
  font-size: 12px;
  color: #002970;
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
}

#modal_answer .modal-content {
  background: url(../img/bg_faces_light.png) repeat #f3f3f3;
}
#modal_answer #modal_html {
  padding: 1em;
}
#modal_answer #modal_html img {
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin: auto;
  border-radius: 50%;
  width: 150px;
  margin-top: 40px;
}
#modal_answer #modal_html h2 {
  margin: 1em;
  text-align: center;
  color: #002970;
}
#modal_answer #modal_html p {
  text-align: center;
  color: #002970;
  padding: 1em;
}
#modal_answer #modal_html .merac img {
  border-radius: 0;
  box-shadow: none;
}
#modal_answer button {
  display: block;
  margin: 2em auto;
}