@font-face {
	font-family: 'regular';
	src        : url('../font/A1Serif-Regular.ttf');
}

@font-face {
	font-family: 'bold';
	src        : url('../font/A1Serif-Bold.ttf');
}

body {
	display              : block;
	font-size            : 25px;
	font-family          : 'regular';
	color                : #1a293c;
	width                : 100%;
	background-image     : url("../img/desktopBgr.svg");
	background-position  : center;
	background-repeat    : no-repeat;
	background-size      : cover;
	background-attachment: fixed;
	margin               : 0;
	z-index              : 1000;
}

body div {
	display: none;
}

.container {}

#quiz {
	padding: 250px 15px 0 15px;

}

.tasteri {
	text-align : center;
	padding-top: 250px;
}

button {
	font-size    : 24px;
	width        : 100%;
	border-width : 0;
	border-style : outset;
	border-color : #0000;
	border-image : initial;
	border-radius: 2px;
}

a button {
	color: black;
}

a {
	color          : black;
	cursor         : pointer;
	text-decoration: none;
}

.izaberi {
	background-color: #a7b8cd;
	border-radius   : 0;
	box-shadow      : inset -2px 2px 1px 1px #8a99a8, 0 1px 1px hsl(0deg 0% 100% / 80%);
	display         : inline-block;
	height          : 40px;
	position        : relative;
	width           : 300px;
	margin-bottom   : 25px;
}

input[type="radio"] {
	z-index         : -5;
	background-color: #ddd;
	background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0, 0%, 100%, .7), transparent 80%),
		-webkit-linear-gradient(90deg, transparent 20%, hsla(0, 0%, 100%, .7), transparent 80%);
	border-radius     : 0;
	cursor            : pointer;
	display           : inline-block;
	height            : 40px;
	position          : relative;
	width             : 300px;
	-webkit-appearance: none;
	-webkit-box-shadow: inset -2px 2px 4px 0px hsl(0deg 0% 0% / 40%), 0 1px 1px hsl(0deg 0% 100% / 80%);
	-moz-box-shadow   : inset -2px 2px 4px 0px hsl(0deg 0% 0% / 40%), 0 1px 1px hsl(0deg 0% 100% / 80%);
	box-shadow        : inset -2px 2px 1px 1px hsl(0deg 0% 0% / 40%), 0 1px 1px hsl(0deg 0% 100% / 80%);
}

input[type="radio"]:after {
	background-color: #a7b8cd;
	border-radius   : 0;
	box-shadow      : inset -2px 2px 1px 1px #8a99a8, 0 1px 1px hsl(0deg 0% 100% / 80%);
	content         : '';
	display         : block;
	height          : 40px;
	position        : relative;
	width           : 300px;
}

input[type="radio"]:checked:after {
	background-color: #d0d7e2;
	box-shadow      : 0 0 5px 3px hsl(211deg 35% 80%), 0 1px 1px hsl(0deg 0% 100% / 80%);
}

.question {
	text-align : center;
	font-family: 'bold';
}

.answers {
	font-family  : 'regular';
	font-size    : 22px;
	margin-top   : 45px;
	font-weight  : 300;
	margin-bottom: 45px;
}

.answers label {
	text-align   : center;
	display      : block;
	margin-bottom: 5px;
	height       : 50px;
}

.answers label span {
	position: relative;
	top     : -40px;
}

#submit {
	font-family     : 'regular';
	background-color: #e9e9e9;
	color           : #000;
	padding         : 14px;
	cursor          : pointer;
	width           : 100%;
	margin-bottom   : 40px;
}

#submit:hover {
	background-color: #a7b8cd;
}

#submit:parent {
	text-align: center;
}

.logo {
	display      : none;
	margin-top   : -12px;
	width        : 100%;
	height       : auto;
	position     : fixed;
	z-index      : 100;
	margin-bottom: 25px;
}

#results {
	margin-left: 35px;
	font-family: regular, serif;
	text-align : left;
	color      : black;
	font-size  : 16px;
	position   : relative;
	bottom     : 40px;
	border     : 0;
}

#results .broj1 {
	font-family: regular, serif;
	text-align : left;
	color      : #f46c2b;
	font-size  : 20px;
	position   : relative;
	bottom     : 5px;
	border     : 0;
}

#results .broj2 {
	font-family: regular, serif;
	text-align : left;
	color      : black;
	font-size  : 20px;
	position   : relative;
	bottom     : 5px;
	border     : 0;
}



/* TABLET MS */

@media screen and (max-width: 801px) {
	body {
		background-image: url("../img/bgr.svg");
		font-size       : 40px;
	}

	body div {
		display: block;
	}

	.logo {
		margin-top: -27px;
		display   : block !important;

	}

	#quiz {
		padding: 450px 30px 0 30px;
	}

	.question {
		padding-left: 10px;
		margin-top  : 130px;
	}

	.answers {
		font-size    : 35px;
		margin-top   : 50px;
		margin-bottom: 240px;
	}

	.answers label {
		margin-bottom: 40px;
		height       : 60px;
		text-align   : inherit;
		position     : relative;
	}

	.answers label span {
		top              : -65px;
		-webkit-box-align: center;
		-webkit-box-pack : center;
		display          : -webkit-box;
	}

	input[type="radio"] {
		height   : 60px;
		width    : 82%;
		left     : 50%;
		transform: translateX(-51%);
	}

	input[type="radio"]:after {
		height: 60px;
		width : 100%;
		;
	}


	.tasteri {
		padding-top: 550px;
	}

	button {
		font-size: 33px;
	}

	.izaberi {
		height: 68px;
		width : 610px;
	}

	#subpar {
		margin-top: -170px;
		margin-bottom: 65px;
	}

	#submit:hover {
		background-color: #556f8f;
		color: #f5f5f9;
	}

	#results {
		font-size  : 28px;
		margin-left: 100px;
		bottom     : 100px;
	}

	#results .broj1 {
		font-size: 32px;
	}

	#results .broj2 {
		font-size: 32px;
	}

}

/* TELEFON */

@media screen and (max-width: 360px) {
	body {
		background-image: url("../img/bgr.svg");
		z-index         : none;
		display         : block;
	}

	body div {
		display: block;
	}

	.logo {
		margin-top: -17px;
		display   : block !important;
	}

	.tasteri {
		padding-top: 250px;
	}
}