@charset "utf-8";
/* CSS Document */

#stage {
	width: 900px;
	height: 480px;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	/* [disabled]margin-left: auto; */
	/* [disabled]margin-right: auto; */
	background-color: rgba(0,0,0,1.00);
}
p, h2, h3, div{
	cursor: default;
}

.welcome-image {
    margin: auto;
}

.welcome-title {
    font-size: 40px;
}

#next {
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	font-size: x-large;
	padding-top: 3px;
	padding-right: 11px;
	padding-bottom: 3px;
	padding-left: 11px;
	z-index: 15;
	display: none;
	opacity: 0;
    cursor: pointer;
}
#stageEmpty1 {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
	/* [disabled]display: none; */
}
#stageEmpty2 {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
	/* [disabled]display: none; */
}
#stageMap {
	position: absolute;
	top: 0px;
	left: 0px;
	transition: 1.5s;
	-webkit-transition: 1.5s;
	display: none;
	opacity: 0;
	-webkit-transform-origin: center;
	transform-origin: center;
}
#stage2 {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	opacity: 0;
	-webkit-transform-origin: center;
	transform-origin: center;
}
#stage #task {
	position: absolute;
	top: 0px;
	color: rgba(255,255,255,1.00);
	width: 290px;
	padding-top: 0px;
	padding-right: 11px;
	padding-bottom: 0px;
	padding-left: 11px;
	z-index: 15;
	font-size: medium;
	background-color: rgba(0,0,0,0.5);
	left: 0px;
	display: none;
	transform: translateZ(1001px)
}
#task h3 {
	margin-top: 3px;
	margin-bottom: 6px;
}
#task #description {
	/* [disabled]display: none; */
}
#stage1S {
	position: absolute;
	top: 0px;
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	text-align: center;
	padding-left: 33px;
	padding-right: 34px;
	display: none;
	right: 0px;
	font-size: x-large;
}
#stage1S h3 {
    cursor: pointer;
}
#baseImg {
	transition: 1.5s;
	-webkit-transition: 1.5s;
	position: absolute;
	left: 0px;
	opacity: 0;
	z-index: 0;
}
#paper {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
	background-image: url(images/paperBack.jpg);
	width: 900px;
	height: 480px;
	background-size: 450px auto;
}
#stage3arrow {
	position: absolute;
	top: 159px;
	left: 481px;
	transform: rotate(45deg);
	display: none;
	opacity: 0;
}
#stage3_attila {
	position: absolute;
	right: 16px;
	display: none;
	top: 426px;
	transform: translateZ(1000px)
}
.stage1cUsed  {
	/* [disabled]background-color: rgba(144,144,144,0.46); */

	color: rgba(132,132,132,1.00);
}

.stage2cUsed  {
	/* [disabled]background-color: rgba(144,144,144,0.46); */
	color: rgba(80,80,80,1.00);
}

body {
	font-family: "litania";
	background-color: rgba(0,0,0,1.00);
    margin: 0;
    transform: scale(1.022);
    transform-origin: top left;
    overflow: hidden;
    height: calc(100vh - 12px);
    justify-content: center;
    width: calc(100% - 18px);
    display: flex;
    align-items: center;
}

h1, h2, h3, h4, h5, strong, b {
    font-weight: 400;
}



.scaleUp {
	transform: scale(2,2);
	-webkit-transform: scale(2,2);
	-moz-transform: scale(2,2);
	-ms-transform: scale(2,2);
	-o-transform: scale(2,2);
	transform: scale(2,2);
}

.scaleUp2 {
	transform: scale(1.4,1.4);
	transition: 2s;
	-webkit-transition: 2s;
}

#galliaWhite {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}


#germanWhite {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}


#italiaWhite {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}


#pannoniaWhite {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}
#galliaName {
	position: absolute;
	top: 181px;
	left: 129px;
	font-size: large;
	font-style: italic;
	text-align: right;
	width: 146px;
	color: rgba(0,0,0,0.5)
}
#germanName {
	position: absolute;
	top: 60px;
	left: 450px;
	font-size: large;
	font-style: italic;
	text-align: right;
	width: 146px;
	transform: rotate(-7deg);
	color: rgba(0,0,0,0.5)
}
#italiaName {
	position: absolute;
	top: 318px;
	left: 375px;
	font-size: large;
	font-style: italic;
	text-align: right;
	width: 146px;
	transform: rotate(30deg);
	color: rgba(0,0,0,0.5)
}
#pannoniaName {
	position: absolute;
	top: 205px;
	left: 475px;
	font-size: large;
	font-style: italic;
	text-align: right;
	width: 146px;
	transform: rotate(22deg);
	color: rgba(0,0,0,0.6)
}

#bizancName {
	position: absolute;
	top: 422px;
	left: 534px;
	font-size: large;
	/* [disabled]font-style: oblique; */
	text-align: right;
	width: 220px;
	transform: rotate(6deg);
	color: rgba(0,0,0,0.5)
}

#frankName {
	position: absolute;
	top: 28px;
	left: 231px;
	font-size: large;
	/* [disabled]font-style: oblique; */
	text-align: right;
	width: 220px;
	transform: rotate(75deg);
	color: rgba(0,0,0,0.5)
}

#hunName {
	position: absolute;
	top: 90px;
	left: 452px;
	font-size: large;
	/* [disabled]font-style: oblique; */
	text-align: center;
	width: 220px;
	transform: rotate(-6deg);
	color: rgba(0,0,0,0.5)
}
#romanName {
	position: absolute;
	top: 384px;
	left: 295px;
	font-size: large;
	/* [disabled]font-style: oblique; */
	text-align: right;
	width: 220px;
	transform: rotate(-6deg);
	color: rgba(0,0,0,0.5)
}

#visiName {
	position: absolute;
	top: 255px;
	left: 82px;
	font-size: large;
	/* [disabled]font-style: oblique; */
	text-align: right;
	width: 220px;
	transform: rotate(4deg);
	color: rgba(0,0,0,0.5)
}
#taskStartTitle {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 155px;
	left: 450px;
	width: 300px;
	margin-left: -153px;
	color: rgba(255,255,255,1.00);
	font-size: x-large;
	text-align: center;
	padding-top: 11px;
	padding-right: 11px;
	padding-bottom: 11px;
	padding-left: 11px;
	display: none;
	transform: translateZ(1001px)
}
#taskStartTitle p {
	display: none;
}
.markGood {
	background-image: url(images/spritesheet4.png);
	width: 60px;
	height: 60px;
	position: absolute;
	display: none;
	opacity: 0;
	background-size: 130px auto;
	background-position: -66px -6px;
}
.markBad {
	background-image: url(images/spritesheet4.png);
	background-size: 130px auto;
	width: 60px;
	height: 60px;
	position: absolute;
	display: none;
	background-position: 0% 0%;
}
#markGoodGallia {
	top: 220px;
	left: 336px;
}
#markBadGallia {
	top: 220px;
	left: 336px;
}
#markGoodGerman {
	top: 136px;
	left: 484px;
}
#markBadGerman {
	top: 136px;
	left: 484px;
}
#markGoodItalia {
	top: 247px;
	left: 429px;
}
#markBadItalia {
	top: 247px;
	left: 429px;
}
#markGoodPannonia {
	top: 195px;
	left: 570px;
}
#markBadPannonia {
	top: 195px;
	left: 570px;
}
.infoBox {
	position: absolute;
	width: 288px;
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	padding-left: 18px;
	padding-right: 11px;
	font-size: large;
	z-index: 15;
	word-wrap: normal;
}
.infoBox h2 {
	margin-bottom: -7px;
	margin-top: 13px;
}
#infoGallia {
	top: 184px;
	left: 523px;
	display: none;
}
#infoGerman {
	top: 184px;
	left: 48px;
	display: none;
}
#infoItalia {
	top: 184px;
	left: 48px;
	display: none;
}
#infoPannonia {
	top: 184px;
	left: 48px;
	display: none;
}
#stage1 {
	/* [disabled]display: none; */
}
#hunWhite {
	position: absolute;
	top: 0px;
	right: 0px;
	display: none;
}
#bizancWhite {
	position: absolute;
	display: none;
	right: 0px;
	top: 257px;
}
#frankWhite {
	position: absolute;
	top: 125px;
	left: 363px;
	display: none;
}
#visiWhite {
	position: absolute;
	top: 206px;
	left: 289px;
	display: none;
}
#romanWhite {
	position: absolute;
	top: 171px;
	left: 218px;
	display: none;
}
#stage2S {
	position: absolute;
	top: 104px;
	/* [disabled]background-color: rgba(0,0,0,0.5); */
	color: rgba(0,0,0,1.00);
	text-align: center;
	padding-left: 0px;
	display: none;
	/* [disabled]right: 63px; */
	font-size: large;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	border-color: rgba(0,0,0,0.50);
	border-style: solid;
}
#stage2S h3 {
	padding-top: 14px;
	padding-right: 50px;
	padding-bottom: 14px;
	padding-left: 50px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    cursor: pointer;
}
#stage2cHun  {
	background-color: rgba(168,130,128,0.66);
}
#stage2cBizanc  {
	background-color: rgba(158,109,70,0.66);
}
#stage2cFrank  {
	background-color: rgba(117,127,121,0.66);
}
#stage2cRoman  {
	background-color: rgba(190,171,88,0.67);
}
#stage2cVisi  {
	background-color: rgba(167,139,86,0.66);
}
#stage2S #hunP {
	position: absolute;
	left: 227px;
	top: 104px;
}
#stage2S #bizancP {
	position: absolute;
	top: 1px;
	left: 239px;
}
#stage2S #romanP {
	position: absolute;
	left: 2px;
	top: 167px;
}
#stage2S #frankP {
	position: absolute;
	top: 53px;
	left: 26px;
}
#stage2S #visiP {
	position: absolute;
	top: 214px;
	left: 234px;
}
#markGoodVisi {
	position: absolute;
	top: 246px;
	left: 333px;
	display: none;
	opacity: 0;
}
#markGoodFrank {
	position: absolute;
	top: 140px;
	left: 405px;
	display: none;
	opacity: 0;
}
#markGoodRoman {
	position: absolute;
	top: 218px;
	left: 415px;
	display: none;
	opacity: 0;
}
#markGoodBizanc {
	position: absolute;
	top: 370px;
	left: 732px;
	display: none;
	opacity: 0;
}
#markGoodHun {
	position: absolute;
	top: 0px;
	left: 596px;
	display: none;
	opacity: 0;
}
#markBadVisi {
	position: absolute;
	top: 248px;
	left: 318px;
}
#markBadRoman {
	position: absolute;
	top: 220px;
	left: 416px;
}
#markBadFrank {
	position: absolute;
	top: 135px;
	left: 388px;
}
#markBadBizanc {
	position: absolute;
	top: 365px;
	left: 712px;
}
#markBadHun {
	position: absolute;
	top: 128px;
	left: 565px;
}
#infoBizanc {
	position: absolute;
	top: 125px;
	left: 54px;
	display: none;
}
#infoFrank {
	position: absolute;
	top: 71px;
	left: 524px;
	display: none;
}
#infoFrank p div {
	float: left;
	margin-right: 18px;
	margin-top: -14px;
	margin-bottom: 1px;
	margin-left: 3px;
}
#infoHun {
	position: absolute;
	top: 152px;
	left: 10%;
	display: none;
}
#infoRoman {
	position: absolute;
	top: 44px;
	left: 577px;
	width: 246px;
	display: none;
}
#infoRoman p div {
	float: left;
	margin-right: 19px;
}
#infoVisi {
	position: absolute;
	top: 41px;
	left: 541px;
	display: none;
}
#infoVisi p div {
	float: left;
	margin-right: 18px;
	margin-bottom: -10px;
}
#stage2Info img  {
	float: right;
}
#stage #demo {
	left: 289px;
	top: 218px;
	text-align: center;
	padding-top: 23px;
	padding-bottom: 23px;
	font-size: x-large;
	display: none;
}

.stage3 {
	transform: rotateX(60deg) rotateZ(-30deg) scale(2.7,2.7) translateX(-50px);

}
.stage6 {
	transform: rotateX(60deg) rotateZ(-5deg) scale(2.7,2.7) translateX(-150px) translateY(-50px);

}

.stage7 {
	transform: rotateX(50deg) rotateZ(-55deg) scale(2.7,2.7) translateX(-100px) translateY(10px);

}

.stage10 {
	transform: rotateX(40deg) rotateZ(-20deg) scale(2.3,2.3) translateX(30px) translateY(15px);

}


.stage12 {
	transform: rotateX(40deg) rotateZ(28deg) scale(3.2,3.2) translateX(30px) translateY(100px);

}
#stage3_task   {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 20px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
	transform: translateZ(1000px)
}
#stage3_task p {
	font-size: large;
}
#stage3_answers {
	position: relative;
	height: 148px;
}
#stage3_answers p  {
	margin-top: 2px;
	text-align: center;
}
#stage3_reka {
	position: absolute;
	left: auto;
}
#stage3_krimhilda {
	position: absolute;
	left: 33%;
}
#stage3_honoria {
	position: absolute;
	left: 66%;
}
#stage3_reka *, #stage3_krimhilda *, #stage3_honoria * {
    cursor: pointer;
}
#markBadReka {
	top: 94px;
	left: 19px;
}
#markBadKrimhilda {
	top: 94px;
	left: 25px;
}
#stage4 {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	left: 48px;
	width: 757px;
	height: 346px;
	top: 82px;
	/* [disabled]-webkit-box-shadow: 0px 0px 90px 53px rgba(0,0,0,0.73); */
	/* [disabled]box-shadow: 0px 0px 90px 53px rgba(0,0,0,0.73); */
	display: none;
	opacity: 0;
	padding-top: 26px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 48px;
}

#stage4_droppable {
	top: 126px;
	position: absolute;
	display: none;
	opacity: 0;
}
.stage4_dropzone {
	height: 80px;
	width: 95px;
	display: inline-block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-right: 27px;
	margin-top: -3px;
	margin-bottom: -3px;
	margin-left: 27px;
	background-image: url(url);
	border-right: thin dotted rgba(255,255,255,0);
	border-top: thin dotted rgba(255,255,255,0);
	border-bottom: thin dotted rgba(255,255,255,0);
}
#stage4_zone4 {
	border-right-style: none;
}
.stage4_drop  {
	position: absolute;
	opacity: 0;

	display: none;
	background-size: 396px auto;
    background-image: url(images/paperBack.jpg);
}
.stage4_drop .sprite3 {
    cursor: pointer;
}
.stage4_be {
	display: inline-block;
	background-size: 403px auto;
	background-image: url(images/paperBack.jpg);
}
#stage4_drop1 {
	top: 20px;
	left: 497px;
}

#stage4_drop2 {
	top: 231px;
	left: 122px;
}
#stage4_drop3 {
	top: 230px;
	left: 413px;
}
#stage4_drop4 {
	top: 20px;
	left: 196px;
}
#stage4_markBad1, #stage4_markBad2, #stage4_markBad3, #stage4_markBad4 , #stage4_markGood1, #stage4_markGood2, #stage4_markGood3, #stage4_markGood4{
	top: 83px;
	margin-left: 45px;
	z-index: 30;
	opacity: 0;
}
.stage4_scale {
	transform: scale(1.2, 1.2);

}
#stage4_next {
	display: none;
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-left: 8px;
	background-color: rgba(255,255,255,0.61);
	z-index: 30;
    cursor: pointer;
}
.stage4_border {
	outline: 1px solid black;

}

.stage4_playPart {
	position: absolute;
	right: 0px;
	bottom: 0px;
	opacity: 1;
    cursor: pointer;
}
#stage4_p2, #stage4_p3, #stage4_p4 ,  #stage4_p1{
	background-image: url(images/paperBack.jpg);
	display: none;
	margin-bottom: 31px;
	position: relative;
	width: 735px;
	height: 81px;
	background-size: 403px auto;
}
#stage4_narr {
	position: absolute;
	left: 58px;
	display: none;
	color: rgba(255,255,255,1.00);
	bottom: -3px;
	text-align: center;
}
#stage4_narr p {
	width: 707px;
}
#welcome {
	position: absolute;
	top: 2px;
	left: 75px;
	width: 750px;
	height: 295px;
	display: none;
	opacity: 0;
	text-align: center;
	z-index: 2;
}
#startBtn {
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	width: 133px;
	font-size: xx-large;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	margin-top: 31px;
    cursor: pointer;
    font-variant: small-caps;
}
#fullscreen {
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	width: 249px;
	font-size: xx-large;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	margin-top: 61px;
}
.artist {
    position: absolute;
    bottom: -40px;
    width: 93%;
    text-align: center;
    color: white;
}
/* #FSbtn {
	position: absolute;
	bottom: 0px;
	right: 5px;
	opacity: 0.48;
	z-index: 1000;
} */

#stageSelector {
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	width: 348px;
	font-size: xx-large;
	margin-left: auto;
	border-radius: 12px;
	margin-right: auto;
	margin-top: 28px;
    cursor: pointer;
    font-variant: small-caps;
}
.stageSelector {
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	width: 400px;
    text-align: left;
    padding: 0px 7px;
	font-size: large;
	margin-left: auto;
	border-radius: 12px;
	margin-right: auto;
	margin-top: 10px;
	display: none;
	opacity: 0;
    cursor: pointer;
}
#stage4_a1 {
	position: absolute;
	top: 146px;
	left: 193px;
	display: none;
}
#stage4_a2 {
	position: absolute;
	top: 146px;
	left: 335px;
	display: none;
}
#stage4_a3 {
	position: absolute;
	top: 146px;
	left: 512px;
	display: none;
}
#stage4_a4 {
	position: absolute;
	top: 146px;
	left: 655px;
	display: none;
}#stage5 {
	position: absolute;
	left: 55px;
	top: 146px;
	display: none;
	background-color: rgba(0,0,0,0.5);
	height: 211px;
	padding-top: 26px;
	padding-right: 26px;
	padding-bottom: 26px;
	padding-left: 26px;
	width: 745px;
}
#stage5 #stage5_2 {
	margin-top: 42px;
}
#stage5_2 , #stage5_1{
	display: none;
	background-image: url(images/paperBack.jpg);
	width: 743px;
	background-size: 406px auto;
}
#stage6_arrow {
	position: absolute;
	/* [disabled]z-index: 5; */
	top: 217px;
	left: 483px;
	display: none;
}

#stage6_task {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 20px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
	transform: translateZ(1000px)
}
#stage6_task p {
	font-size: large;
}
#stage6_honoria {
	position: absolute;
	left: 605px;
	top: 438px;
	display: none;
	transform: translateZ(1000px)
}
#stage6_2 {
	position: absolute;
	width: 800px;
	height: 380px;
	top: 80px;
	left: 50px;
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	display: none;
	transform: translateZ(1000px)
}
#stage6_2 h2 {
	margin-left: 21px;
	margin-top: 1px;
}
#stage6_2 h2 img {
	position: relative;
	top: 8px;
	left: 8px;

}
.note {
	width: 61px;
	height: 69px;
	position: absolute;
	/* [disabled]background-image: url(images/cruxNote.png); */
	background-repeat: no-repeat;
	display: none;
	background-size: 32px auto;
}
#note1 {
	top: 175px;
	left: 79px;
	display: inline;
}
#note2 {
	top: 107px;
	left: 139px;
}
#note3 {
	top: 107px;
	left: 201px;
}
#note4 {
	top: 107px;
	left: 259px;
}
#note5 {
	top: 107px;
	left: 312px;
}
#note6 {
	top: 107px;
	left: 368px;
}
#note7 {
	top: 107px;
	left: 426px;
}
#note8 {
	top: 107px;
	left: 481px;
}
#note9 {
	top: 107px;
	left: 548px;
}
#note10 {
	top: 107px;
	left: 604px;
}
#note11 {
	top: 107px;
	left: 665px;
}
#note12 {
	top: 107px;
	left: 721px;
}
#piano  {
	text-align: center;
}
#noteW1, #noteG1 {
	top: 53px;
	left: 79px;
	margin-left: -26px;
}
#noteW2, #noteG2 {
	top: 26px;
	left: 153px;
	margin-left: -26px;
}
#noteW3, #noteG3 {
	top: 26px;
	left: 210px;
	margin-left: -26px;
}
#noteW4, #noteG4 {
	top: 26px;
	left: 267px;
	margin-left: -26px;
}
#noteW5, #noteG5 {
	top: 26px;
	left: 320px;
	margin-left: -26px;
}
#noteW6, #noteG6 {
	top: 26px;
	left: 375px;
	margin-left: -26px;
}
#noteW7, #noteG7 {
	top: 26px;
	left: 433px;
	margin-left: -26px;
}
#noteW8, #noteG8 {
	top: 26px;
	left: 493px;
	margin-left: -26px;
}
#noteW9, #noteG9 {
	top: 26px;
	left: 558px;
	margin-left: -26px;
}
#noteW10, #noteG10 {
	top: 26px;
	left: 616px;
	margin-left: -26px;
}
#noteW11, #noteG11 {
	top: 26px;
	left: 677px;
	margin-left: -26px;
}
#noteW12, #noteG12 {
	top: 26px;
	left: 730px;
	margin-left: -26px;
}
#delete {
	position: absolute;
	top: 27px;
	left: 730px;
}

#stage7_task   {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 458px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
	transform: translateZ(1000px)
}
#stage7_task p {
	font-size: large;
}
#stage7_answers {
	position: relative;
	height: 148px;
}
#stage7_answers p  {
	margin-top: 2px;
	text-align: center;
}
#stage7_brutus {
	position: absolute;
	left: auto;
}
#stage7_florian {
	position: absolute;
	left: 33%;
}
#stage7_aetius {
	position: absolute;
	left: 66%;
}
#stage7_brutus *,
#stage7_florian *,
#stage7_aetius * {
    cursor: pointer;
}
#markBadBrutus {
	top: 88px;
	left: 19px;
}
#markBadFlorian {
	top: 88px;
	left: 25px;
}
#stage7_arrow {
	position: absolute;
	top: 128px;
	left: 453px;
	display: none;
	opacity: 0;
}
#stage8 {
	width: 800px;
	height: 380px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	left: 50px;
	top: 56px;
	color: rgba(255,255,255,1.00);
	display: none;
}
#stage8 h2 {
	margin-left: 26px;
}
#stage8_task p {
	text-align: center;
	font-size: x-large;
}
#stage8_next {
	display: none;
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-left: 8px;
	background-color: rgba(255,255,255,0.61);
	z-index: 30;
    color: black;;
    cursor: pointer;
}
#stage8_narr {
	position: absolute;
	bottom: -5px;
	left: 0px;
	text-align: center;
	width: 100%;

}
#stage8_narr {
    cursor: pointer;
}
#stage8_narr img {
    cursor: pointer;
}
.forditas {
	color: rgba(253,253,253,1.00);
	position: absolute;
	left: 300px;
	top: 187px;
	text-align: center;
	width: 200px;
	transition: 1.5s;
	-webkit-transition: 1.5s;
	display: none;
	opacity: 0;
}

.stage8_score {
	background-image: url(images/paperBack.jpg);
	display: none;
	margin-left: 175px;
	width: 450px;
	background-size: 403px auto;
}
.stage8_scoreEnd {
	background-image: url(images/paperBack.jpg);
	display: none;
	margin-left: 97px;
	width: 605px;
	background-size: 400px auto;
}
.stage8_s1 {
	top: 180px;
	left: 90px;
}
.stage8_s2 {
	top: 180px;
	left: 245px;
}
.stage8_s3 {
	top: 180px;
	left: 396px;
}



.stage8_m1 {
	left: 137px;
	top: 240px;
}
.stage8_d1 {
	left: 137px;
	top: 280px;
    cursor: pointer;
}
.stage8_m2 {
	left: 294px;
	top: 240px;
}
.stage8_d2 {
	left: 294px;
	top: 280px;
    cursor: pointer;
}
.stage8_m3 {
	left: 479px;
	top: 240px;
}
.stage8_d3 {
	left: 479px;
	top: 280px;
    cursor: pointer;
}
.stage8_T {
	display: none;
	margin-left: 170px;
	margin-right: 14px;
}
#stage8_drop1 {
	left: 95px;
	top: 115px;
	position: absolute;
	width: 150px;
	height: 32px;
	border-color: rgba(255,255,255,1.00);
	border-style: solid;
	display: none;
}
#stage8_drop2 {
	left: 535px;
	top: 115px;
	position: absolute;
	width: 150px;
	height: 32px;
	border-color: rgba(255,255,255,1.00);
	border-style: solid;
	display: none;
}
#stage8_drop3 {
	left: 315px;
	top: 115px;
	position: absolute;
	width: 150px;
	height: 32px;
	border-color: rgba(255,255,255,1.00);
	border-style: solid;
	display: none;
}
#stage8_bad {
	text-align: center;
	position: absolute;
	top: 246px;
	width: 100%;
	font-size: x-large;
	display: none;
}
#stage8_good {
	text-align: center;
	position: absolute;
	top: 216px;
	width: 100%;
	font-size: x-large;
	display: none;
}
#stage9 {
	width: 80%;
	position: absolute;
	left: 8%;
	top: 89px;
	display: none;
	background-color: rgba(0,0,0,0.5);
	height: 275px;
	padding-top: 26px;
	padding-right: 26px;
	padding-bottom: 26px;
	padding-left: 26px;
}
#stage9 #stage9_2 {
	margin-top: 22px;
}
#stage9_2 , #stage9_1{
	display: none;
	background-image: url(images/paperBack.jpg);
	background-size: 450px 240px;
}

#stage10_arrow {
	position: absolute;
	/* [disabled]z-index: 5; */
	top: 228px;
	left: 310px;
	display: none;
}

#stage10_task {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 20px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
	transform: translateZ(1000px)
}
#stage10_task p {
	font-size: large;
}
#stage10_aetius {
	position: absolute;
	left: 605px;
	top: 438px;
	display: none;
	transform: translateZ(1000px)
}
#stage11 {
	width: 800px;
	left: 50px;
	height: 320px;
	top: 118px;
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.00);
	display: none;
}
.stage11_noteSelector {
	/* [disabled]background-color: rgba(255,255,255,0.48); */
	width: 25px;
	height: 20px;
	position: absolute;
	border-radius: 47px;
	opacity: 0.4;
    cursor: pointer;
}
.stage11_noteSelectorB {
	/* [disabled]background-color: rgba(255,255,255,0.48); */
	width: 25px;
	height: 20px;
	position: absolute;
	border-radius: 47px;
	opacity: 0.4;
	display: none;
    cursor: pointer;
}
#stage11_note1 {
	top: 110px;
	left: 104px;
}
#stage11_note2 {
	top: 104px;
	left: 138px;
}
#stage11_note3 {
	top: 110px;
	left: 183px;
}
#stage11_note4 {
	top: 112px;
	left: 210px;
}
#stage11_note5 {
	top: 105px;
	left: 251px;
}
#stage11_note6 {
	top: 110px;
	left: 292px;
}
#stage11_note7 {
	top: 106px;
	left: 331px;
}
#stage11_note8 {
	top: 100px;
	left: 356px;
}
#stage11_note9 {
	top: 96px;
	left: 380px;
}
#stage11_note10 {
	top: 110px;
	left: 420px;
}
#stage11_note11 {
	top: 111px;
	left: 460px;
}
#stage11_note12 {
	top: 115px;
	left: 500px;
}
#stage11_note13 {
	top: 119px;
	left: 527px;
}
#stage11_note14 {
	top: 110px;
	left: 568px;
}
#stage11_note15 {
	top: 115px;
	left: 605px;
}
#stage11_note16 {
	top: 114px;
	left: 648px;
}

#stage11_note17 {
	top: 111px;
	left: 672px;
}
#stage11_note18 {
	top: 108px;
	left: 696px;
}
#stage11_narr {
	position: absolute;
	bottom: 0px;
	text-align: center;
	width: 100%;
	opacity: 0;
}
#stage11_narr img {
    cursor: pointer;
}
#stage11_next {
	background-color: rgba(255,255,255,0.59);
	color: rgba(0,0,0,1.00);
	width: 71px;
	text-align: center;
	position: absolute;
	bottom: 3px;
	height: 26px;
	right: 5px;
	display: none;
    cursor: pointer;
}
#stage11_score2 {
	display: none;
	text-align: center;
}

#stage11_next p {
	margin-top: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
	margin-left: 4px;
}




#stage11 h2 {
	margin-left: 19px;
}
#stage11_score {
	background-image: url(images/paperBack.jpg);
	background-size: 450px 240px;
	margin-left: 26px;
	margin-right: 26px;
}
#stage11_noteB1 {
	top: 84px;
	left: 260px;
	height: 133px;
}
#stage11_noteB2 {
	top: 84px;
	left: 296px;
	height: 133px;
}
#stage11_noteB3 {
	top: 88px;
	left: 333px;
	height: 133px;
}
#stage11_noteB4 {
	top: 90px;
	left: 358px;
	height: 133px;
}
#stage11_noteB5 {
	top: 82px;
	left: 397px;
	height: 133px;
}
#stage11_noteB6 {
	top: 86px;
	left: 431px;
	height: 133px;
}
#stage11_noteB7 {
	top: 83px;
	left: 466px;
	height: 133px;
}
#stage11_noteB8 {
	top: 81px;
	left: 491px;
	height: 133px;
}
#stage11_noteB9 {
	top: 80px;
	left: 516px;
	height: 133px;
}
#stage11_score2  {
	background-image: url(images/paperBack.jpg);
	background-size: 450px auto;
	display: none;
	width: 425px;
	margin-left: auto;
	margin-right: auto;
}

#stage12_task {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 20px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
	transform: translateZ(1000px)
}
#stage12_task p {
	font-size: large;
}
#stage12_theuderich {
	position: absolute;
	left: 605px;
	top: 438px;
	display: none;
	transform: translateZ(1000px)
}

#stage12_arrow {
	position: absolute;
	/* [disabled]z-index: 5; */
	top: 156px;
	left: 340px;
	display: none;
}
#stage13 {
	width: 80%;
	position: absolute;
	left: 8%;
	top: 89px;
	display: none;
	background-color: rgba(0,0,0,0.5);
	height: 275px;
	padding-top: 26px;
	padding-right: 26px;
	padding-bottom: 26px;
	padding-left: 26px;
}#stage13_1, #stage13_2, #stage13_3 {
	display: none;
	background-image: url(images/paperBack.jpg);
	margin-bottom: 20px;
	background-size: 410px auto;
}


#stage14_task {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 347px;
	color: rgba(255,255,255,1.00);
	top: 73px;
	left: 20px;
	padding-left: 28px;
	padding-right: 26px;
	display: none;
}
#stage14_task p {
	font-size: large;
}
#stage14_leo {
	position: absolute;
	left: 519px;
	display: none;
	top: 630px;
}


.ui-state-active a, .ui-state-hover a, .ui-page, .ui-page-theme-a, .ui-page-active {
    outline: none;
}
#stage6_2 div #score {
	margin-top: -7px;
}
#stage6_2 div #clef {
	width: 72px;
	position: absolute;
	top: 39px;
	left: 7px;
}
#stage #stage6_2 #stage6_2_narr {
	text-align: center;
	margin-top: 64px;
}
#stage #stage6_2 #stage6_2_narr .choice {
	display: inline-block;
	border: thin solid rgba(255,255,255,1.00);
	-webkit-box-shadow: 0px 0px 13px;
	box-shadow: 0px 0px 13px;
	margin-top: 17px;
	margin-right: 17px;
	margin-bottom: 17px;
	margin-left: 17px;
	padding-left: 15px;
	padding-right: 15px;
    cursor: pointer;
}
.easy {
	color: rgba(30,164,74,1.00);
    cursor: pointer;
    font-weight: 600;
}
.hard {
	color: rgba(179,23,25,1.00);
    cursor: pointer;
    font-weight: 600;
}
#stage #loader {
	position: absolute;
	top: 165px;
	left: 307px;
	display: none;
	opacity: 0;
	z-index: 68;
}