/* 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: #232323;
	color: white;
}



.input{ padding: 0; text-transform: uppercase; font-size: 5.4vmin;}
.field { position: relative; }
.questionmark{
	 position: absolute;
	 background-color: red;
	 color: white;
	 border-radius: 0;
	 z-index: 10;
	 left:0;
	 top:0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
.positionUp{ margin-top: auto; width: calc(100% - 1px); height: 60%; top: -60%; border-radius: 10px 10px 0 0;}
.positionLeft{ margin-left: auto; width: 60%; height: calc(100% - 1px); left: -60%; border-radius: 10px 0 0 10px;}

/*TEST*/
.containerbig { position: relative; width: 550px; max-width:100%; height: auto; left: auto; top: auto; transform: none; margin: 40px auto; }
.containerbig:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

/*buttons*/
button.button{
	/*reset*/
	position: static;
	
	/*display: inline-block;*/
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	user-select: none;
	padding: 0.4em 1.6em;
	border: 3px solid transparent;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

	background-color: #666;
	color: #fff;
	cursor: pointer;
	font-weight: 600;

	text-transform: uppercase;
	font-size: .9rem;
	padding: 10px 14px;
	border-radius: 10px;
}
button.button.netocno, button.button.izvrsno {
	width:auto;
	margin:auto;
	color:#ccc;
	background-color: transparent!important;
	border: 3px solid #ccc;
	border-radius: 10px;
	padding: 0.8rem;	
	font-size: 1.6rem;
	line-height: 1;
	text-transform: none;
} 


button.button.netocno { color: #e25a4f; border-color: #e25a4f; } 
button.button.netocno:hover { color: #c94f47; border-color: #c94f47; } 
button.button.izvrsno { color: #00b600; border-color: #00b600; } 
button.button.izvrsno:hover { color: #009c00; border-color: #009c00; } 

body{padding: 6%; padding-top:1rem;}
@media only screen and (max-width: 576px) {
	body {margin: 0;}
}


/* LANG v2 */
.questionmark{ background-color: #333; }

.latin .field { background-color: #947552; }
.latin .questionmark{ background-color: #a33255; }
.latin .questionmark:hover,
.latin .questionmark.highlight{ background-color: #d8a200!important; }
.latin button.button { background-color: #9c724a; }
.latin button.button:hover { background-color: #7d552e; }

.german .field { background-color: #ec9b35; }
.german .questionmark:hover,
.german .questionmark.highlight{ background-color: #b20000!important; }
.german button.button { background-color: #b20000; }
.german button.button:hover { background-color: #cc0000; }

.italian .field { background-color: #e3724b; }
.italian .questionmark:hover,
.italian .questionmark.highlight{ background-color: #628c3a!important; }
.italian button.button { background-color: #628c3a; }
.italian button.button:hover { background-color: #7c982c; }

.italian5 .field { background-color:  #77b5dd; }
.italian5 .questionmark:hover,
.italian5 .questionmark.highlight{ background-color: #ff8000!important; }
.italian5 button.button { background-color: #53b2c3; }
.italian5 button.button:hover { background-color: #3d91a0; }