@charset "UTF-8";
/* ====== Table of content Start =====*/
/*
Project Name: Quizo
File        : CSS Base
Version     : 1.0.0
Author      : jthemes (https://themeforest.net/user/jthemes)
*/
/* ====== Table of content End =====*/
/* Default transition start*/
/*Default transition end*/


.wrapper {
  width: 100%;
  min-height: 100vh;

  background-image: linear-gradient(to right, rgb(0 104 156 / 82%) , rgb(0 104 156 / 88%) ), url(../images/background/fpe.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-size: content;
  background-color: #252c4a;
  position: relative;
  overflow: hidden;
}


.text-dugmica {
	 color: #ffffff!important;
}

.logo_area img {
  margin: 4rem 0rem 0rem 5rem;
}
.login_area  {
text-align: right;    
margin-top: 4.5rem;    
margin-right: 4.5rem;    
display: inline-block;    
right: 10px;   
position: absolute;
}

.fbloginbtn{
font-size: 0.9rem;
padding: 0.2rem 2rem;
	border-radius: 3px;
	  outline: none;
  border: none;
	
}

.tvojrezultat{
	color: #fff;
    font-size: 1rem;
    margin-top: 14px;
    margin-left: 21px;
}


.tajmer {
	display: block;    
	position: fixed;   
	z-index: 999;   
	width: 100%;   
	height:15px; 
	background: #84c2ff;
	
}


.tajmerpozadina {
	width: 100%;
    display: block;
    background: #00000047;
    position: fixed;
    z-index: 9999;
    height: 15px;
}

	
.porukerazne {
	color: azure;
    font-family: arial, sans-serif;
    display: block;
    background: #00000038;
    padding: 10px;
    border-radius: 11px;
    line-height: initial;
    font-size: 0.9rem;
}

.porukeraznenaslovi {

display: block;
    margin-top: 4px;
    font-weight: 100;
    font-family: "Russo One", sans-serif;
	text-shadow: -2px 3px 13px black;
	
}

.ikonicamenija {
	
	display: inline;
    font-size: 1.6rem;
    vertical-align: middle;
    color: #fff;
    margin-left: 10px;
    cursor: pointer;
}

.imeigraca {
font-family: "Russo One", sans-serif;
    color: #82bef9;

}

.multisteps_form_panel {
  display: none;
}


.pitanjaurezultatima {
	    font-size: 1.3rem;
    font-family: "Russo One", sans-serif;
    font-weight: 100;
}


.content_box {
  margin: 0 auto;
  position: relative;
}

.progress {
  width: 100%;
  height: 3.5rem;
  background-color: #31395c;
  position: relative;
}
.progress .far {
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #7d86ac;
  font-size: 1.5625rem;
  position: absolute;
  z-index: 1;
}

.progress-bar {
  height: 2rem;
  padding-top: -0.5rem;
  background: -webkit-gradient(linear, left top, right top, from(#fb506e), to(#b66ef5));
  background: linear-gradient(to right, #fb506e, #b66ef5);
  z-index: 3;
  margin-top: 0.8rem;
}


.footerbims {
bottom: 6px;  
position: absolute;  
right: 0px;  
margin-right: 16px;   
color: #ffff;   
font-family: arial,sans-serif;
font-size: 13px;
}

.footerbims a {   
color: #4590ff;   
}

.vrijeme {
    color: #7d86ac;
    font-size: 1.5625rem;
	}
	
	.vrijemespan {
	min-width: 80px;
    margin-left: 6px;
    margin-top: 6px;
    background: #232a48;
    padding: 9px 9px 9px 10px;
    text-align: center;
    line-height: 28px;
    height: 45px;
    border-radius: 51px;
	
	}
	
	
.question_number span {
  font-size: 1.3125rem;
}
.question_number p {
  color: #6c7498;
  font-size: 0.5rem;
}

.question_title h1 {
  font-size: 2.4375rem;
  font-weight: 400;
}

.form_items label {
  width: 75%;
  
    font-weight: 400;
    padding: 1rem 3rem;
    margin-top: 0.625rem;
    border: 5px solid #00000054;
    cursor: pointer;
    font-family: arial;
    line-height: 1.5rem;
    background: #00000029;
  
}
.form_items label:before {
  content: "";
  width: 2.3125rem;
  height: 2.3125rem;
  top: 50%;
  right: 13px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  border: none;
  border-radius: 100%;
}
.form_items label:after {
  
	
	content: "";
    width: 1.2rem;
    height: 1.2rem;
    top: 50%;
    right: 22px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    border: 5px solid #ffffff;
    border-radius: 100%;
	display: none;
	
}

.text-providan {
	color: #ffffff45!important;
}

.form_items label input {
  display: none;
}

.form_items label.active {
  background: #2f98ff;
}

.form_items label.active:after {
  display: block;
}

.f_btn {
  font-size: 1.25rem;
  padding: 1.3rem 2.5rem;
  outline: none;
  border: none;
}

.share_btn {
  font-size: 1.25rem;
  padding: 1.3rem 2.5rem;
  outline: none;
  border: none;
  background-color: #32407a;
}


.prev_btn {
  top: 42%;
  left: 3%;
  background-color: #214466;
}
.prev_btn:hover {
  background-color: #2f98ff;
}

.next_btn {
  top: 42%;
  right: 3%;
  background-color: #2f98ff;
}
.next_btn:hover {
  background-color: #214466;
}

body {
  line-height: 1.65;
  font-display: swap;
  font-family: "Russo One", sans-serif;
      max-width: 100%;
    overflow-x: hidden;
}

a,
button,
input {
  cursor: pointer;
  text-decoration: none;
}
a:hover,
button:hover,
input:hover {
  text-decoration: none;
}
a:focus,
button:focus,
input:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

img {
  height: auto;
  max-width: 100%;
}

.nazivkviza {
font-weight: 400;
}

.centrirajp {
	display: grid;
	margin-bottom: 0.7rem;
}

.tekstispodnalosva {
	font-family: arial, sans-serif;
    color: #d7d7d7;
}

.ikonicanaslov {
	font-size: 2rem;
    color: #2892fa
}


.brojstavki {
	background: #2892fa7a;
    padding: 2px 5px 2px 5px;
    font-size: 0.7rem;
    vertical-align: middle;
    border-radius: 5px;
}


.lista1 {
font-weight: 400;
background: #0000004d;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
	border: 1px solid #000000;
}


.respuestas {
	font-size: 1.5em;
}

.respuesta-incorrecta {
	color: red;
}

.respuesta-correcta {
  color: #00ff00;
}

/* transition - start
================================================== */
a,
button {
  -webkit-transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ikonicameni {
	color: #4d5b99;
}


.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  white-space: nowrap;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* transition - end
================================================== */
.animate_25ms {
  -webkit-animation-delay: 25ms;
          animation-delay: 25ms;
}

.animate_50ms {
  -webkit-animation-delay: 50ms;
          animation-delay: 50ms;
}

.animate_75ms {
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
}

@media (min-width: 1500px) {
  .container {
    max-width: 1510px;
  }
}
/* ==================================================
*   01 - media screen and (max-width: 1500px)
*   02 - media screen and (max-width: 1200px)
*	03 - media screen and (max-width: 992px)
*	04 - media screen and (max-width: 768px)
*	05 - media screen and (max-width: 576px)
*	06 - media screen and (max-width: 480px)
*	07 - media screen and (max-width: 360px)
*	08 - media screen and (max-width: 320px)
*   XX-Large devices (larger desktops)
*   No media query since the xxl breakpoint has no upper bound on its width
================================================== */
@media screen and (max-width: 1499.98px) {
  .question_number p {
    display: none;
  }
}
@media screen and (max-width: 1199.98px) {
  .progress {
    height: 2.5rem;
  }

  .progress-bar {
    height: 1.5rem;
    margin-top: 0.5rem;
  }

  .question_title h1 {
    font-size: 2rem;
  }

  .form_items label {
    width: 100%;
    font-size: 1rem;
    padding: 1rem 2rem;
  }

  .f_btn {
    font-size: 1rem;
    padding: 1rem 2rem;
  }
   .share_btn {
    font-size: 1rem;
    padding: 1rem 1rem;
  }
 
}
@media screen and (max-width: 991.98px) {
  .question_number span {
    font-size: 1rem;
  }

  .question_title h1 {
    font-size: 1.5rem;
    padding: 0rem 0rem;
  }

  .f_btn {
    font-size: 0.8rem;
    padding: 0.8rem;
  }
  
  .share_btn {
    font-size: 0.8rem;
    padding: 0.8rem;
  }
}
@media screen and (max-width: 767.98px) {
  .logo_area {
    display: block;
  }
  
  .logo_area img {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
	margin-top: 0.45rem !important;
    width: 110px;

  }
  
  .fbime {
	white-space: nowrap;
	display: table-cell;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 10ch;
	  
  }
  
  .login_area  {
    text-align: center;
    margin-top: 0px;
    margin-right: 10px;
    display: inline-block;
    right: 0px;
	float: right;
    position: initial;
	

	
}

.imeigraca {

	font-size: 0.8rem;
	
	white-space: nowrap;
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14ch;
}


.vrijeme {
    font-size: 1.2rem;
	}
	
	.vrijemespan {
min-width: 80px;
    margin-left: 3px;
    margin-top: 3px;
    background: #232a48;
    padding: 5px 5px 5px 5px;
    text-align: center;
    line-height: 26px;
    height: 35px;
    border-radius: 51px;
	
	}


.sidenav a {
  padding: 1px 8px 8px 32px;
  font-size: 19px;

}

.fbloginbtn{
font-size: 0.7rem;
    padding: 0.2rem 0.8rem;

	
}

  .content_box {
    padding-left: 0rem !important;
  }

  .question_number {
    text-align: center;
  }

  .question_title {
    text-align: center;
  }
  .question_title h1 {
    font-size: 1.3rem;
  }

  .form_items {
    
  }

  .f_btn {
 
  }

  .prev_btn {
    bottom: 10%;
    left: 17%;
  }

  .next_btn {
    bottom: 10%;
    right: 17%;
  }
}
@media screen and (max-width: 575.98px) {
  .progress {
    width: 80%;
    margin: auto;
  }
  
  


  .form_items {
    text-align: center;
  }
  .form_btn {
  text-align: center;
}
  
  .nazivkviza {
font-weight: 400;
 text-align: center;
 margin-top: 20px;
 margin-bottom: 0px;
 line-height: 1;
}

.trenutnopitanje {
background: #0f7dea;
    padding: 3px 9px 3px 9px;
    border-radius: 11px;
    margin-bottom: 13px;
    display: inline-block;
    font-size: .9rem !important;
}


	
  .lista1 {
font-weight: 400;
 text-align: center;
 margin-top: 10px;
}

.tekstispodnalosva {
	 text-align: center;;
}

.ikonicanaslov {
    font-size: 1.6rem;
}

.centrirajp {
	 text-align: center;
	 margin-bottom: 0rem;
}

.tvojrezultat{
	font-size: 0.8rem;
    margin-top: 10px;
}

.pitanjaurezultatima {
	    font-size: 1.1rem;
   
}

.tajmer {

	height:10px; 

}

.tajmerpozadina {

	height:10px; 

}


  .form_items label {
    width: 100%;
  }
}