@font-face {
    font-family: 'Awesome';
    src: url('../fonts/Awesome.eot');
    src: url('../fonts/Awesome.eot') format('embedded-opentype'),
         url('../fonts/Awesome.woff2') format('woff2'),
         url('../fonts/Awesome.woff') format('woff'),
         url('../fonts/Awesome.ttf') format('truetype'),
         url('../fonts/Awesome.svg#Awesome') format('svg');
}

*{
	font-family: 'Archivo Narrow', sans-serif;
}

h1{
	font-family: 'Awesome';
	color: #4fa190 !important;
	font-size: 40px;
}

.subhead{
	color:black;
}

.naslov_intro{
	padding-top: 10%;
    text-align: center;
}

.zacni_intro{	
	padding-top: 190px;
}

b{
    color:#466063;
    font-size:16px;
}

body{
	margin: 0;
	padding: 0;
    /*background: url('../img/glow.png') #4ea190;*/
    background:#519d8d;
    background-repeat: no-repeat;
	color: #fff;
}

.start, .solve, .check {
    color: #466063;
    padding: 10px 80px;
    font-size: 22px;
    border: 0;
    background: red;
    background: -webkit-linear-gradient(#f9f9f9, #cccccc);
    background: -o-linear-gradient(#f9f9f9, #cccccc);
    background: -moz-linear-gradient(#f9f9f9, #cccccc);
    height: 55px;
    background: #519e8e;
    color:white;
}

.next{
   padding: 10px 75px;   
   font-size: 22px;
   
}

.solve{
    padding:10px 50px;
    font-size: 22px;
}

.container{
	padding-top:150px;
}

.qnum{
    width: 50px;
    height: 50px;
    color:#519e8e;;
    font-size: 26px;
    margin: 10px;
    top: 15px;
}

.detective{
    position: absolute;
    right: -50px;
    width: 257px;
    height: 78px;
    background: -webkit-linear-gradient(#7e888d, #485960);
    background: -o-linear-gradient(#7e888d, #485960);
    background: -moz-linear-gradient(#7e888d, #485960);
    background: linear-gradient(#7e888d, #485960);
    border-radius: 58px;
    top: 20px;
    font-family: 'Awesome';
    box-shadow: 9px 5px 15px 0px #242424;
}

.detimg{
    width: 68px;
    height: 69px;
    background: #81bbaf;
    border-radius: 51px;
    margin: 5px 5px;
    float:left;
    padding: 1px 9px;
}

.dettext{
   float: right;
   font-size: 16px;
   line-height: 1;
   padding-top: 8px;
   padding-left: 10px;;
}

.dettext span{
   font-size: 42px;
}

.qt{
    color:#466063; 
    font-size: 18px;
}

.hide{
    display:none;
}

.options{
    background: white;
    color: #466063;
    padding: 7px 25px;
    font-size:13px;
    padding: 0;
}

.options i{
    font-size: 18px;
    line-height: 2;
}

.options hr{
    padding: 0;
    margin: 5px;    
	margin-left: 0;	
    margin-bottom: 0;
}

.options p{
    padding-left: 0px;
    font-size:16px;    
    line-height: 2.2;
}

.qta{
    padding-left: 25px;
}

.imgq{
     margin: 0 auto;   
}

.check-bgr{
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.48);
    padding: 10px 10px 10px 15px;
    margin-left:-5px;   
    border-radius: 6px;
}


.font-v{
    font-family: 'Awesome';
    color: #fff;
    font-size: 3em;
}

.green{
    color:#4fa190;
}

.black{
    color:#32373b;
    font-size: 2em;
}

.black-font{
	color:black !important;
}

.white{
    color:#ffffff;
    font-size: 3em;
}

.box{
    background: rgba(11, 11, 11, 0.31);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 7px;
}

.boxic{
    background: rgba(0, 0, 2, 0.32);
    width: 313px;
    padding: 7px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.boxic img{
    display:inline;
    float:left;
    padding-right: 7px;
}


.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #519e8e;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress {
    height: 10px;
}

.question-text{
	color:black;
	font-size:18px;
}

hr{
	background: black;
	margin-left: -15px;
    margin-bottom: 0;    
   margin-top: 0 !important;
}

.head-text{
	font-size:25px !important;	
}

.mobile{
	display:none;
}

@media screen  and (max-width: 991px) {
    
    .mobile{
		display:block;
	}
	.desktop{
		display:none;
	}
    .fa-circle-o {
            float: left;
		    padding-right: 5px !important;
		    cursor: pointer;
		    padding-left: 10px !important;
		    padding-top: 38px !important;
	}	
	.explain{		
   		margin-bottom: -20px;
	}
	.options span p{
		padding-left: 50px !important;
	}
	
	h1 {
	    font-family: 'Awesome';
	    color: #fff;
	    font-size: 80px !important;
	}
	.subhead{
		font-size: 40px !important;
	}
	
	form .text-center img{
		width:200px;
	}
	.zacni_intro {
    	padding-top: 40px;
	}
	.start,.check{
		font-size:50px;
		width:100%;
		height:100px;
	}
	
	.mobilehide{
		display:none;
	}
	.head-text{
		font-size:35px !important;	
	}
	
	.buttons{
		margin-left: -15px;
   		margin-right: -15px;
	}
	.question-text{
		font-size:29px;
	}
	
	.dettext{
		font-size:28px;
	}
	
	.options p{
		font-size:25px;
		line-height: 1.2;
	}	
	.explain-text{
		font-size:23px !important;	
	}
	.green{
		font-size: 67px !important;
	}	
	.finish p{			
   		font-size:30px !important;	
	}	
	.finish img{			
   		width: 200px !important;
	}	
	.finish3 img{			
   		width: 200px !important;
	}
	.finish .endimg {
	    width: 425px !important;
	}
	.endtitle p{
		font-size:46px !important;	
	}
	
	.finish2 p{			
   		font-size:30px !important;	
	}	
	.finish2 img{			
   		width: 200px !important;
	}	
	.finish2 img{			
   		width: 300px !important;
	}
	img.nagrada {
	    width: 425px !important;
	}
	.finish3 p,.finish3 b{			
   		font-size:40px !important;	
	}	
	.finish3 input{
		width: 100% !important;
	    height: 100px !important;
	    font-size: 40px !important;
	}
	.score{
		font-size:23px;
	}
	.dettext{
		    margin-top: -43px;
	}
	.qnum{
		font-size: 44px;
	}
}