/* FONTS */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* OpenDyslexic3 */
@font-face {
  font-family: 'OpenDyslexic3';
  src: url("../fonts/OpenDyslexic3-Regular.woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenDyslexic3';
  src: url("../fonts/OpenDyslexic3-Bold.woff");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}

body.opendsylexic *{
  font-family: OpenDyslexic3!important;
}

body.contrast {
	background-color: #1a1a1a;
	color: white;
}


/* */
body { margin-top:18px; margin-bottom:18px; }
body.contrast .target, body.contrast #screenWrong, body.contrast #screenRight { color: #333; }
body.contrast .uputa { color: #838383; }


body.latin .target:active:hover{
	background-color: #d8a200;
}

/*poruka*/
#screenRight, #screenWrong {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
}

#screenRight .container, #screenWrong .container {
  display: block;
  width: auto;
  height: auto;
  background-color: transparent;
  text-align: center;
  /*min-height: 140px;*/
}
#screenRight .container .feedback,
#screenWrong .container .feedback {
  width:auto;
  height: auto;
  border-radius: 0;
  display: inline-block;
  background-color: white;
  border: 3px solid #ccc;
  border-radius: 10px;
  padding: 0.8rem 3rem;	
  font-size: 1.6rem;
  margin: auto;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
}
#screenRight .container .feedback { border-color: #00b600; color: #00b600; }
#screenWrong .container .feedback { border-color: #e25a4f; color: #e25a4f; }

/*ikone*/
body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url("../img/icons/kviz-kvacka.png") url("../img/icons/kviz-krizic.png");   /*preload*/
}
#screenRight .container .feedback:before,
#screenWrong .container .feedback:before {
  display: inline-block;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 2rem;
  height: 2rem;
  background-size: cover;
  border: 3px solid #666;
  border-width: 0 3px 3px 0;
  border-bottom-right-radius: 10px;
 }
 #screenRight .container .feedback:before {
  border-color: #00b600;
  background-image: url("../img/icons/kviz-kvacka.png");
 }
 #screenWrong .container .feedback:before {
  border-color: #e25a4f;
  background-image: url("../img/icons/kviz-krizic.png");
 }

#screenRight .container .feedback.rightMark,
#screenWrong .container .feedback.wrongCross {
  display: none;
}

/*position*/
.holder { position:relative; }


/*animate*/
.uputacontainer {
  min-height: 95px;
  
	display: block;
	text-align: center;
	margin-top: 2rem;
}
.uputa {
  transition: none;
  margin:auto;
  display: inline-block;
}

@media only screen and (max-width: 576px) {
  #screenRight, #screenWrong {
    width: 100%;
    font-size: 1rem;
  }
  #screenRight .container .feedback,
  #screenWrong .container .feedback {
    font-size: 1.2rem;
    padding: 0.2rem 1.2rem;
  }
  #screenRight .container .feedback:before,
  #screenWrong .container .feedback:before {
    width: 1.1rem;
    height: 1.1rem;
  }
  body.opendsylexic #screenRight .container .feedback,
  body.opendsylexic #screenWrong .container .feedback{
    font-size: 1rem;
  }
}