@font-face {
 font-family: 'GloriaHallelujahRegular';
 src: url('../fonts/gloriahallelujah.eot');
 src: url('../fonts/gloriahallelujah.eot') format('embedded-opentype'),  url('../fonts/gloriahallelujah.woff2') format('woff2'),  url('../fonts/gloriahallelujah.woff') format('woff'),  url('../fonts/gloriahallelujah.ttf') format('truetype'),  url('../fonts/gloriahallelujah.svg#GloriaHallelujahRegular') format('svg');
}
@font-face {
 font-family: 'ComicSansMSRegular';
 src: url('../fonts/comicsansmsregular.eot');
 src: url('../fonts/comicsansmsregular.eot') format('embedded-opentype'),  url('../fonts/comicsansmsregular.woff2') format('woff2'),  url('../fonts/comicsansmsregular.woff') format('woff'),  url('../fonts/comicsansmsregular.ttf') format('truetype'),  url('../fonts/comicsansmsregular.svg#ComicSansMSRegular') format('svg');
}
/* ==========================================================================
  INTERFACE
   ========================================================================== */
body, html
{
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #74b441;
}
.hideOnStart
{
	display:none;
}
#loader
{
	width:100%;
	float:left;
	text-align:center;
	font-size:12px;
	color:#666666;
	text-align:center;
	line-height:30px;
	font-size:18px;
	text-align:center;
	color:#FFFFFF;
	font-family: 'ComicSansMSRegular', Arial, Helvetica, sans-serif;
	padding-bottom:20px;
	position:absolute;
	top:42.5%;
}
#bigContainer
{
	display: table;
	width: 100%;
	height: 100%;
}
#mediumContainer
{
	display: table-cell;
	vertical-align: top;
	width: 100%;
}
#smallContainer
{
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#startPage
{
	z-index: 20000;
	margin: 0;
	padding:0;
	overflow:hidden;
	position: absolute;
	background-position: center center;
	background-size: cover;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	background-image: url(../images/start.png);
}
#startPage .startButton
{
	background-image: url(../images/startGame.png);
	background-size: 100% 200%;
	height: 11%;
	left: 24%;
	position: absolute;
	top: 40%;
	cursor:pointer;
	width: 29%;
}
#startPage .title
{
	position: absolute;
	line-height:130%;
	text-align:center;
	cursor:pointer;
	font-family: 'ComicSansMSRegular', Arial, Helvetica, sans-serif;
	color: #734625;
    text-align: center;
    top: 24%;
	line-height:120%;
    width: 35%;
	left: 22%;	
}




#correctResult
{
	font-family: 'ComicSansMSRegular', Arial, Helvetica, sans-serif;
}
#startPage .startButton:hover
{
	background-position: center bottom;
}
#showSuccess
{
	cursor:pointer;
}
#gameWrapper
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding:0;
	overflow:hidden;
	position: relative;
	background-position: center center;
	background-size: cover;
	background-image: url(../images/playground.jpg);
}
#nav
{
	width:100%;
	position:absolute;
	bottom:10%;
	left:0%;
	z-index:100;
}
#title
{
	width:100%;
	position:absolute;
	top:22%;
	text-align:center;
	left:0%;
	z-index:100;
	color: #c32527;
	text-shadow: 1px 1px rgba(20, 20, 20, 0.4);
	font-family: 'GloriaHallelujahRegular';
}
#alerts span
{
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0%;
	width: 26.5%;
	text-indent:-9999px;
	z-index: 10;
	padding:4%;
	padding-top:19%;
	padding-bottom:19%;
	display:block;
	left:30%;
	top:15%;
	z-index:101;
	-webkit-transform: scale(0);
	transform: scale(0);
}
#alerts span em
{
	width:80%;
	left:10%;
	top:84%;
	cursor: pointer;
	position: absolute;
	padding:1%;
	padding-top:4.2%;
	padding-bottom:4.2%;
	text-indent:-9999px;
	z-index:102;
	background-size: 100% 200%;
	background-image: url(../images/odNowa.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#alerts span em:hover
{
	background-position: center 101%;
}
#alerts #successButton
{
	background-image: url(../images/success.png);
	-webkit-transform: scale(0);
	transform: scale(0);
}
#overlay
{
	bottom: 0;
	position: fixed;
	right: 0;
	background: url(../images/overlay.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width:auto;
	height:auto;
	z-index:100;
	display:none;
	opacity:0;
}
#nav span
{
	background-repeat: no-repeat;
	background-size: 100% 200%;
	cursor: pointer;
	position: absolute;
	top: 0%;
	width: 5%;
	text-indent:-9999px;
	z-index: 10;
	padding:1%;
	padding-top:2.2%;
	padding-bottom:2.2%;
	display:block;
	background-position: center top;
}
#nav span:hover
{
	background-position: center bottom;
}
#nav #restartButton
{
	background-image: url(../images/restart.png);
	left: 52%;
}
#nav #soundSwitcher
{
	background-image: url(../images/mute.png);
	left: 44%;
	background-size: 100% 300%;
}
#nav #soundSwitcher.enabled
{
	background-position: center top;
}
#nav #soundSwitcher.disabled
{
	background-position: center bottom;
}
#nav #soundSwitcher:hover
{
	background-position: center center;
}
#nav #soundSwitcher.disabled:hover
{
	background-position: center bottom;
}
.show
{
	opacity: 1;
	display: block;
}
.hide
{
	display: none;
	-webkit-transition: opacity 1s ease-out;
	opacity: 0;
}
#game h2
{
	text-align:center;
	color:#00aeef;
	padding:0px;
	font-size: 1.2em;
	font-weight: normal;
	margin:0px;
	font-family: 'ComicSansMSRegular', Arial, Helvetica, sans-serif;
	padding-bottom:1%;
}
#game
{
	left: 10%;
	position: absolute;
	top: 29%;
	width: 85%;
}
/* styles for the popup notifications */
.quizy-mg-notification-fly
{
	position:absolute;
	z-index:1000;
	left:46%;
	top:46%;
	display:none;
	padding:2.1%;
	padding-left:3.2%;
	padding-right:3.2%;
	text-indent:-9900px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.quizy-mg-notification-fly-neg
{
	background:url('../images/quizy-mg-notif-neg.png');
	background-repeat: no-repeat;
	background-size: 100% 99%;
}
.quizy-mg-notification-fly-pos
{
	background:url('../images/quizy-mg-notif-pos.png');
	background-repeat: no-repeat;
	background-size: 100% 99%;
}
 @keyframes animatedBackground
{
 from {
background-position: 0 0;
}
to
{
	background-position: 100% 0;
}
}
#animate-area
{
	width: 100%;
	height: 20%;
	background-image: url(../images/bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	background-size: cover;
	animation: animatedBackground 40s linear infinite;
}


/* zoom animatiom */
@-webkit-keyframes zoom
{
 0% {
-webkit-transform: scale(0);
transform: scale(0);
}
 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes zoom
{
 0% {
-webkit-transform: scale(0);
transform: scale(0);
}
 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes zoom
{
 0% {
-webkit-transform: scale(0);
transform: scale(0);
}
 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoom
{
 0% {
-webkit-transform: scale(0);
transform: scale(0);
}
 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.zoom
{
	-webkit-animation: zoom 0.5s forwards; /* Safari 4+ */
	-moz-animation:    zoom 0.5s forwards; /* Fx 5+ */
	-o-animation:      zoom 0.5s forwards; /* Opera 12+ */
	animation:         zoom 0.5s forwards; /* IE 10+, Fx 29+ */
}



/*eu*/
#eu-splash{
	width: 100%;
	position:fixed;
	left:0px;
	top:0px;
	height: 100%;
	background-color:#FFFFFF;
	text-align:center;
	vertical-align:middle;
	z-index: 20001;
	display: table-cell;
    vertical-align: middle;
	background-position: 0px 0px;
	background-repeat: repeat-x;
	background-size: cover;
	display:none;
	
}

#eu-splash img{
   margin: 0;
   height: auto;
   max-width: 100% !important;

}
/*eu*/
