html {
	direction: rtl;
	width:100%;
	height:100%;
	background-color: #ffffff;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select:none;
	user-select:none;
	-o-user-select:none;
}
body {
	margin:0px;
	background-color: #000000;
	direction: rtl;
	overflow: hidden;
	font-family: 'Alef';
	font-weight: bold;
	font-size: 25px;
	width:100%;
	height:100%;
	color: white;
	position: relative;
}
    .preloader{
        z-index: 100000000;
        position: fixed;
        width: 100%;
        height: 100%;
        display: block;
        background-color: #fff;
    }
    .preloader img{
        position: absolute;
        top:0;
        left:0;
		right: 0;
		bottom: 0;
		margin: auto;
        
    }
p{
	font-weight: normal;
}
strong, b {
	font-weight: bold;
}
a{
	color: inherit;
}
.titlesize{font-size: 3.7vh;}
#animation_container,  #_preload_div_ {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#popups {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: rgba(0,0,0,0.10); */
	z-index: 1003;
	
}
#pop_welcom {
	position: absolute;
	z-index: 1003;
	width: 82vh;
	height: 80vh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
	background: url("../htimages/welcom_bg.jpg") top center no-repeat;
	background-size: contain;
	opacity: 1;
	padding: 1vw 2vw 1vw 2vw;
	box-sizing: border-box;
}
#pop_intro {

}
#pop_pitronim {

}
#pop_register {

}
#pop_login {

}
.pop{
	position: absolute;
	z-index: 120;
	width: 114.1vh;
	height: 72vh;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	margin: auto auto;
	color: #10559a;
}
.bt_x {
	background-image: url(../htimages/x.png);
	width: 50px;
	height: 50px;
	position: absolute;
	top: 16px;
	left: 12px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1000;
}

#pop_welcom .bt_x{
	position: absolute;
	top: 1.8vh;
	right: 3vh;
	width: 5.4vh;
}


h2{
	font-size:4vh;
	text-align: center;
}
.dan_sign{
	width: 180px;
}
.welcomBg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.73);
	z-index: 1002;
	display: block;
}
.text_container {
	position: absolute;
	width: 100%;
	height: 100%;
	padding-left: 92px;
	padding-right: 52px;
	padding-top: 11px;
	padding-bottom: 25px;
	overflow-x: hidden;
	overflow-y: scroll;
	/* top: 65px; */
	/* left: 40px; */
	box-sizing: border-box;
	color: #10559a;
	font-size: 2.1vh;
	font-weight: 100;
}
/*form reg*/
#pop_register form {
	position: absolute;
	text-align: left;
	top: 13vh;
	left: 41vh;
	height: 51vh;
	width: 72vh;
}
#pop_register form span {
	display: block;
	margin-bottom: 20px;
}
#pop_register form label {
	font-size: 3vh;
	line-height: 3vh;
	margin-left: 3vh;
}
#pop_register form input {
	font-size: 3vh;
	width: 36vh;
	height: 3.5vh;
	border-radius: 1vh;
	border: none;
	padding-right: 1vh;
	padding-left: 1vh;
	vertical-align: middle;
	margin-top: 0;
}
#sens_btn {
	background-color: #ffffff;
}
/*form log*/
#pop_login form {
	position: absolute;
	text-align: left;
	top: 17vh;
	left: 44vh;
	height: 20vh;
	width: 62vh;
}
#pop_login form span {
	display: block;
	margin-bottom: 20px;
}
#pop_login form label {
	font-size: 3.6vh;
	line-height: 3.5vh;
	margin-left: 3.5vh;
}
#pop_login form input {
		font-size: 3vh;
		width: 40vh;
		height: 4.6vh;
		padding-right: 1vh;
		padding-left: 1vh;
}
input{
	border-radius: 10px;
	border:none;
}
#sens_btn {
background-color: white;
}

.bt_register {
	position: absolute;
	left: 50px;
	bottom: 50px;
	background: url(../htimages/bt_register.png) top center no-repeat;
	background-size: cover;
	width:180px;
	height:75px;
	cursor: pointer;
}
.bt_register:hover{
	filter: brightness(1.3);
}
.bt_login{position: absolute;left: 50px;bottom: 50px;background: url(../htimages/bt_login.png) top center no-repeat;background-size: cover;width: 262px;height: 78px;cursor: pointer;}
.bt_login:hover{
	filter: brightness(1.3);
}

/*end form*/
.w_title {
	font-size: 5vh;
	position: absolute;
	top: 2vw;
	right: 5vw;
}

#pop_questions{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	/* background-color: brown; */
	z-index: 1000;
	pointer-events: none;
}

.question1{
	position: absolute;
	width: 44vw;
	height: 30vw;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	left: 50%;
	display: block;
	z-index: 100;
}
.question2{
	position: absolute;
	width: 480px;
	height: 650px;
	top: 185px;
	right: 52%;
	display: block;
	z-index: 90;
}
.questionFrame{
	/* background: -webkit-linear-gradient(45deg, #5b313f 0, #5b313f 75%, #764052 100%); */
	background: -moz-linear-gradient(45deg, #5b313f 0, #5b313f 75%, #764052 100%);
	/* background: linear-gradient(45deg, #5b313f 0, #5b313f 75%, #764052 100%); */
	/* background-position: 50% 50%; */
	/* border-radius: 10px; */
	background: url(../htimages/question_bg.jpg)center center  no-repeat;
	background-size: 100% 100%;
	pointer-events: all;
}
.closeQuestion{
	position: absolute;
	top: 1vw;
	right: 1vw;
	width: 2.5vw;
	height: 2.5vw;
	cursor: pointer;
	background: url(../htimages/x.png) top center no-repeat;
	background-size: contain;
	display: block;
	z-index: 1000;
	/* background-color: white; */
}
.moreInfo .closeQuestion{
	top:20px;
	left:25px;
}
.questionTitle{
    font-family: "Alef_bold";
    font-size: 3.1vw;
    position: absolute;
    top: 2vw;
    right: 0;
    width: 100%;
    height: 3.8vw;
    text-align: center;
    color: #0556a9;
}
.questionText{
	font-family: "Alef";
	font-size: 2vw;
	position: absolute;
	top: 5.3vw;
	line-height: 2.2vw;
	right: 0;
	width: 100%;
	/* height:220px; */
	text-align: center;
	color: #0556a9;
}
.sendSolutionBTN{
	position: absolute;
	width:182px;
	height:76px;
	/* top:400px; */
	left: 37px;
	cursor: pointer;
	bottom: 29px;
}
.sendSolutionBTN:hover{
	filter: brightness(1.3);
}
.hintBtn{
	position: absolute;
	width:182px;
	height:76px;
	bottom: 29px;
	right: 1.7vw;
	cursor: pointer;
}
.hintBtn:hover{
	filter: brightness(1.3);
}
.contentBox{
	width:266px;
	height: 74px;
	background: url(../htimages/light_off.png);
	background-size: contain;
	/* top:260px; */
	left: 117px;
	cursor: pointer;
	position: absolute;
	bottom: 138px;
}
.contentBox:hover{
	background: url(../htimages/light_on.png);
	background-size: contain;
}
.moreBtn{
	position: absolute;
	width:180px;
	height:76px;
}
.moreBtn:hover{
	filter: brightness(1.3);
}
.moreInfo{
	position: absolute;
	width:1147px;
	height:671px;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: none;
	z-index: 150;
}
.check{
	position: absolute;
	width:107px;
	height:105px;
	top: 1vw;
	left: 1vw;
	/* right: 0; */
	/* margin: auto; */
	background: url(../htimages/vunsolved.png) top center no-repeat;
	background-size: contain;
}
.check_v{
	background: url(../htimages/vsolved.png) top center no-repeat;
	background-size: contain;
}
.check_x{
	background: url(../htimages/vwrong.png) top center no-repeat;
	background-size: contain;
}
.chamizer_sign{
	width: 150px;
	height: 90px;
	background: url(../htimages/sign.png) top center no-repeat;
	background-size: contain;
}
.greyOutQs{
	position: absolute;
	top:0;
	left:0;
	width:1920px;
	height: 1080px;
	background-color: rgba(0,0,0,0.87);
	display: none;
	z-index: 110;
}
.greyOut4Welcome{
	position: absolute;
	top:0;
	left:0;
	width:1920px;
	height: 1080px;
	background-color: rgba(0,0,0,0.87);
	display: none;
	z-index: 50;
}
.moreInfo_place{
	position: absolute;
	top:70px;
	/* left:50px; */
	width: 801px;
	height:540px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.hintScreen{
	position: absolute;
	width: 37vw;
	height: 17vw;
	top: 0;
	left: 54%;
	bottom: 0;
	/* right: 0; */
	background-size: cover;
	display: none;
	color: #4387c7;
	z-index: 1020;
	margin: auto;
	box-shadow: 0vw 0.6vw 3vw #000000d6;
}
#hint_text{
	font-family: "Alef";
	font-size:34px;
	position: absolute;
	top: 3.6vw;
	right:50px;
	width:600px;
}
.ansScreen{
	position: absolute;
	width: 597px;
	height: 342px;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: none;
	z-index: 150;
}
.ansSubmitNow{
    position: absolute;
    width: 260px;
    height: 78px;
    bottom: 19px;
    left: 14px;
    cursor: pointer;
}
.ansSubmitNow:hover{
	filter: brightness(1.3);
}
#ans_input{
    font-family: "Alef";
    font-size: 34px;
    width: 96%;
    margin: 0 2% 0% 2%;
    height: 42px;
    position: absolute;
    top: 150px;
}
/*#namePlace{
	position:absolute;
	top: 4.5vw;
	left: 33vw;
	width: 25vw;
	height: 2vw;
	color:#fff;
	font-size: 1.4vw;
	direction:rtl;
	text-align:left;
	font-weight:bold;
	z-index: 1002;
	display: none;
}
#namePlace > span{
	text-decoration:underline;
	color:#fff;
	cursor:pointer;
}*/
#forgotPassword{
	font-family: 'Alef';
	font-weight: normal;
	font-size:18px;
	color: inherit;
}

#pop_correct{
	position: absolute;
	width: 49vw;
	height: 25vw;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: none;
	z-index: 1005;
}
.correct_place{
	font-size: 1.6vw;
	color: #0556a9;
	text-align: center;
}
#pop_correct > .w_title{
	position: relative;
	text-align: center;
	right:0;
	font-weight: bold;
	font-family: 'Alef_bold';
	font-size: 3vw;
	color: #0556a9;
}
.wrongAnsScreen{
	position: absolute;
	width:827px;
	height:442px;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
margin: auto;
	display: none;
	z-index: 150;
}
.wrong_text{
	font-family: "Alef";
	font-size: 1.6vw;
	position: absolute;
	top: 4vw;
	right: 4vw;
	width: 34vw;
	color: #0556a9;
	text-align: center;
}

/* screllers */
::-webkit-scrollbar {
 width: 8px;
}

::-webkit-scrollbar-track {
 //
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
 background-color: rgb(18, 31, 30);
 background-color: rgb(3, 37, 39);
}

::-webkit-scrollbar-thumb {
 border-radius: 10px;
 //
 background-color: rgb(130, 92, 2);
 background-color: rgb(0, 255, 255);
}
.resizeByRight{}
.skipresize{}
.resizeByBottom{}
.resizeFullScreenHeight{}
.resizeFullScreenWidth{}
.ltrme{}
.ltrme:focus{direction: ltr;}
#metatron{
	position:absolute;
	display:block;
 	z-index:1111111;
 	width:100%;
	border:none;
}
#metatronDIV{
	position:absolute;
	top:80%;
	left:0px;
	width:1.4%;
	height:6.8%;
	 z-index:1000000000;
	opacity: 0.4;
	 transition: linear 0.5s;
 }
#metatronDIV:hover{
	opacity: 1;
	transition: linear 0.5s;
}

button{
	float: left;
	font-size: 22px;
	width:180px;
	background-color: rgb(255, 255, 255);
    border: 0;
    color: black;
	border-radius: 9px;
	margin-left: 10px;
	cursor: pointer;
}
.radiob{
	width:50px !important;
}
.radios .select{
	display: block;
	position: absolute;
	top: 0;
	left: 397px;
	width: 50px;
	height: 50px;
	font-size: 25px;
}



.bgimage{

filter: hue-rotate(94);
}

.mainmenu{
	position:absolute;
	top: 0;
	left: 0;
	width: 45vw;
	height: 3.6vw;
	/* background: url("../htimages/topmenu_bg.png") no-repeat fixed center;  */
	background-image: url("../htimages/topmenu_bg.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	z-index: 1001;
	text-align: right;
	/* padding-top: 0.6vw; */
	padding-right:3vw;
	box-sizing: border-box;
}
.mainmenu a{
	margin-left: 5.3vw;
	font-size: 1.4vw;
	line-height: 3.6vw;
	cursor: pointer;
	top: 0;
	margin-top: 0px;
	position: relative;
}
.mainmenu a:last-child{
	margin-left: 0;
}
#namePlace{
	margin-left: 5.3vw;
	font-size: 1.4vw;
	display: none;
	line-height: 3.6vw;
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	max-width: 200px;
}
#namePlace span{
	text-decoration: underline;
	cursor:pointer;
}
.linebar{
	z-index: 11;
	position: absolute;
	left: 4.9vw;
	bottom: 0vw;
	width: 49.7vw;
	height: 3.6vw;
	box-sizing: border-box;
	overflow: hidden;
}
.tickerBox{
	z-index: 12;
	position: absolute;
	left: 4.9vw;
	bottom: -0.7vw;
	width: 49.2vw;
	height: 3.1vw;
	white-space: nowrap;
	overflow: hidden;
	text-align: right;
}
.tickerBox .textline{
	width: 95%;
	height: 1.6vw;
	position: absolute;
	font-size: 1.2vw;
	line-height: 1vw;
	z-index: 129;
	display: block;
	top: 0vw;
	right: 0;
	color: white;
	top: 0;
}
.tickerBox .textline span{
	position: relative;
	top: 0;
	margin: 0;
	position: relative;
	display: inline;
}


.gbuttons{
	background-color: rgba(255, 0, 0, 0);
	position: absolute;
	top: 3.7vw;
	left: 6vh;
	width: 90vh;
	/* padding-left: 6vh; */
	/* padding-right: 121.1vh; */
	box-sizing: border-box;
	height: 82vh;
	display: flex;
	z-index: 1001;
	flex-wrap: wrap;
	/* overflow-y: scroll; */
}

.gbuttons .gbt:hover{
	border: solid 0.01vw white;
}
.gbuttons .gbt{
	position: relative;
	width: auto;
	height: 2.3vh;
	border: solid 0.01vw black;
	/* display: block; */
	font-size: 2.1vh;
	line-height: 2.4vh;
	/* margin: 1vw; */
	padding: 1.7vh;
	margin: 0.9vh;
	flex: auto;
	text-align: center;
	color: white;
	background-image: linear-gradient(to top, #0750ab,#009cff);
	cursor: pointer;
}
.used{
	background-image: linear-gradient(to top, #55678873,#27275261) !important;
	color: #6b7f8c;
}
.gmaelogo{
	position: absolute;
	width: 36vw;
	height: 24vw;
	top: 0;
	right: 0;
	z-index: 13;
}
.gmaelogo img{
	width: 100%;
	height: auto;
}
.logos{
	position: absolute;
	width: 26.9vw;
	height: 17.1vw;
	bottom: 0;
	right: 0;
	z-index: 13;
}
.logos img{
	width: 100%;
	height: auto;
}
.dclogos{
	position: absolute;
	width: 3.5vw;
	height: 3.5vw;
	bottom: 0vw;
	left: 0.3vw;
	z-index: 13;
}
.dclogos img{
	width: 100%;
	height: auto;
}

.gamemap{
	position: absolute;
	left: 95vh;
	top: 2vw;
	width: 66.5vh;
	height: 94.1vh;
	/* max-height: 41vw; */
	/* min-height: 84vh; */
	z-index: 1002;
	/* max-width: 29vw; */
	/* min-width: 58vh; */
	/* background-color: #663399ad; */
}
.gamemap .basemap{
	width: 100%;
	height: 100%;
}
.gamemap .basemap img{
	width: 100%;
	height: auto;
}

.gamemap .piece{
	position: absolute;
	width: 34.8%;
	height: auto;
	pointer-events:none;
}

.gamemap .piece img{
	width: 100%;
	height: auto;
	pointer-events:none;
	filter: hue-rotate(0.5);
}
.piece .area{
	position: absolute;
	margin: auto auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #82465a;
	width: 2.7vw;
	height: 2vw;
	cursor: pointer;
	pointer-events:all;
	opacity: 0;
}

div.piece.p1{top: -1.1%;left: 21%;}
div.piece.p2{top: 3%;left: 24.8%;}
div.piece.p3{top: 4.3%;left: 16.1%;}
div.piece.p4{top: 5.3%;left: 6.8%;}
div.piece.p5{top: 9.3%;left: 19%;}
div.piece.p6{top: 11%;left: 8.4%;}
div.piece.p7{top: 13.9%;left: 24%;}
div.piece.p8{top: 15.9%;left: 12.4%;}
div.piece.p9{top: 20.2%;left: 27.5%;}
div.piece.p10{top: 21.9%;left: 12.6%;filter: hue-rotate(90);/* filter: brightness(0.5); */}

div.piece.p11{top: 25.6%;left: 32.3%;}
div.piece.p12{top: 28.2%;left: 13.1%;}
div.piece.p13{top: 31.3%;left: 36.5%;}
div.piece.p14{top: 35.1%;left: 16.6%;}
div.piece.p15{top: 38.4%;left: 41.2%;}
div.piece.p16{top: 39.7%;left: 28.5%;}
div.piece.p17{top: 42.9%;left: 12.1%;}
div.piece.p18{top: 46%;left: 46.7%;}
div.piece.p19{top: 48.8%;left: 36.4%;}
div.piece.p20{top: 49.8%;left: 21.3%;}

div.piece.p21{top: 55.9%;left: 46.9%;}
div.piece.p22{top: 58.4%;left: 34.6%;}
div.piece.p23{top: 63.9%;left: 54.8%;}
div.piece.p24{top: 66%;left: 45.2%;}
div.piece.p25{top: 74.2%;left: 58.3%;}

.relit{position: relative !important;/* float: right; *//* margin-top: 1.8vw; */}
.btn-blue,.btStyle{
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 13.2vw;
	height: 4.5vw;
	cursor: pointer;
	/* padding: 10px 20px; */
	border: solid 1px #559dd9;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	font: inherit;
	font-size: 2.1vw;
	text-align: center;
	line-height: 4.1vw;
	color: rgba(255,255,255,0.9);
	-o-text-overflow: clip;
	text-overflow: clip;
	background: #559dd9;
	-webkit-box-shadow: -3px -3px 16px 3px #afe2fd inset;
	box-shadow: -3px -3px 16px 3px #afe2fd inset;
	/* position: relative; */
	bottom: 1.3vw;
	/* right: 2vw; */
	/* float: right; */
	/* margin-top: 2vw; */
	}

.btn-blue:hover {
	filter: brightness(1.3);
}

.dropplace{
	position: absolute;
	background: url(../htimages/dropplace.png) center center no-repeat;
	background-size: 100% 100%;
	width: 15vw;
	height: 4vw;
	bottom: 8.5vw;
	left: 14.8vw;
	text-align: center;
	font-size: 1.9vw;
	font-weight: bold;
	line-height: 4vw;
	text-shadow: 0vw 0vw 1vw white;
}
.drop-a{
	color:#b3cce6;
}
.drop-b{
	color:#0d1889;
}

.ui-state-highlight{
	filter: brightness(0.8);
}
.gbuttons .solved{
	color: #dddddd;
	opacity: 0.5;
	background-color: #034a96;
	background-image: none;
}
#triesLeft{
	position: absolute;
	font-family: "Alef";
	font-size: 1vw;
	top: 21.3vw;
	line-height: 2.2vw;
	right: 0;
	width: 100%;
	/* height:220px; */
	text-align: center;
	color: #0556a9;
}
.red{
	color:red;
}
#pop_welcom .wellcomText{
	position: absolute;
	top: 0;
	/* right: 20vh; */
	width: 90%;
	font-size:2.2vh;
	color: #0d1889;
}
#pop_welcom .btn-blue{
	bottom: 3vw;
	top: auto;
	position: absolute;
	left: 5vw;
}
.passwordExplain{
	font-size: 1.5vh;
	text-align: right;
	width: 37vh;
}


@media (max-aspect-ratio: 2/1) {
	.gbuttons{
		width: 77vh;
	}
	.gamemap {
		left: 82vh;
	}
	.gbuttons .gbt {
		font-size: 1.9vh;
		line-height: 2vh;
		height: 1.7vh;
	}
  }

  @media (max-aspect-ratio: 11/6) {
	.gamemap{
		width: 56.5vh;
		height: 79.9vh;
		top: 2vw;
	}
  }
.factListContainer{
	position: absolute;
	top:0;
	bottom: 0;
	right:0;
	left:0;
	margin:auto;
	
	width:50vw;
	height:39.5vw;
	z-index: 1001;
}