html, body {
  overflow: hidden;
height:100%;
width:100%;
max-width:100%;
max-height:100%;
}
body {
  position: relative
}

*
{

	font-family: 'neckar-bold';

}

.dragable-cont{
text-align:center;
width:50%;
height:150px;
background-color:#61C3BA;
border-radius:10px;
position:absolute;
top:55px;
left:5px;
box-shadow:-2.5px -2.5px 5px rgba(131,131,109,.8);
background:url('map-images/boy.png');
background-color:#FFFFF0;
box-shadow:-5px -5px 10px rgba(131,131,109,.8);
background-repeat: no-repeat;
background-position:5% center;
background-size:100% auto;
}
.dragable{
	
position: absolute;
width: auto;
min-width:25%;
min-height:20%;
max-width:25%;
max-height:20%;
font-size: 1.1rem;
font-size: 3.5vw;
height: auto;
color:black;
border: 1px solid rgba(255,255,255,0.9);
border-radius: 50%;
background-color:rgba(255,255,255,0.8);

display:none;

border-radius:50%;

}
.dragablePlaced{

font-size: 1.1rem ;
font-size: 4vw ;
}
.h1big{
color:#9368CD;
font-size:1.2rem;
font-size:4vw;
text-align:center;
z-index:100;
position: relative;
pointer-events: none;
}

.dropArea{
position:absolute;

/*border:2px solid #999;*/

border-radius:50%;
border:none;

 overflow:hidden;
     width: 20%;
    height: 0;
    padding-top: 20%;
   
}

#pal{
    left: 0px;
    top: 0px;
    z-index: 0;
    visibility: visible;
    position: absolute;
	width:100%;
	height:auto;

}
#nabWord{
	display:block;
}
#nab{

    left: 65%;
}
#jen{

    left: 63%;
}
#ram{
 width: 28%;
    left: 54%;
	padding-top: 15%;
}
#der{
 width: 16.5%;
 left: 2%;
 padding-top: 16.5%;
}
#bet{
 width: 28%;
    left: 60%;
	padding-top: 15%;
}
#tub{

    left: 77%;
}
#tul{
	width: 17%;
    left: 52%;
	padding-top: 20%;
}
#gaz{
	 width: 16.5%;
 left: 7%;
 padding-top: 16.5%;
}
#qud{
 width: 28%;
    left: 60%;
	padding-top: 15%;
}
#nor{
	 width: 16.5%;
 left: 12%;
 padding-top: 16.5%;
}
#raf{
 width: 16.5%;
 left: -5%;
 padding-top: 16.5%;
}
#qal{
	width: 17%;
    left: 50%;
	padding-top: 11%;
}
#sal{
	width: 17%;
    left: 52%;
	padding-top: 10%;
}
#heb{
 width: 25%;
    left: 48%;
	padding-top: 25%;
}
#jer{
	width: 16%;
    left: 82%;
	padding-top: 40%;
}
#kan{
 width: 16.5%;
 left: 0%;
 padding-top: 16.5%;
}
.cont{

}
#footer{
position:fixed;
left: 0;
bottom: 0;
width:100%;
height:100px;
pointer-events: none;
background-color:rgba(255,255,255,1);
background:url(images/footer.png);
background-position:center bottom;
background-repeat:no-repeat;
color:#EF6277;
text-align:center;
font-size:1rem;
/*box-shadow:0px -2.5px 5px rgba(131,131,109,.8);*/
box-sizing:border-box;
}
#footerInfo{
direction:rtl;
position:fixed;
left: 0;
bottom: 0;
width:100%;
height:auto;
pointer-events: none;
background-color:rgba(255,255,255,.8);

background-position:center bottom;

color:#EF6277;
text-align:center;
font-size:0.7rem;
/*box-shadow:0px -2.5px 5px rgba(131,131,109,.8);*/
box-sizing:border-box;
}
#footerInfo>strong{
	font-size:0.9rem;
}
#footerInfo>img{
	width:10%;
	height:auto;
	vertical-align: middle;
}

#chengeOrient img{
	width:200px;
}
div#chengeOrient{
position:fixed;
left: 0;
top: 0;
display:none;
width:100%;
height:100%;

max-width:100%;
max-height:100%;

min-width:100%;
min-height:100%;

background-color:rgba(20,20,20,.8);
color:white;
text-align:center;

z-index:200;
}
div#chengeOrient>div{
margin:auto;
font-size:0.7rem;
line-height:140%;
padding:10%;
}
div#chengeOrient>div>div{
float:right;
}


#aqSmall{
height:350px;
bottom:-10px !important;
}
#jorSmall{
height:400px;
display:block;
}
#lebSmall{
height:350px;
}

#seaSmall{
height:350px;
bottom:-10px !important;
}
#sySmall{
bottom:0px !important;
}
.ui-droppable{
-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

}

.ui-state-hover{

}
.ui-state-active{
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.ui-state-highlight{

}
body{
background-color:#FCFED0;
margin: 0px;
}

#drobable-box{
	/*
text-align:center;
box-sizing: border-box;
position:fixed;
left:0;
top:50px;
border:1px solid #777;
width:50%;
height:135px;
*/
/*
background:url('map-images/boy.png');
background-color:#FFFFF0;
box-shadow:-5px -5px 10px rgba(131,131,109,.8);
background-repeat: no-repeat;
background-position:5% center;
background-size:35% auto;
*/
padding-top: 5px;
}
@media (min-width:520px){
#drobable-box{	top:100px;
}
.dragable-cont{
	top:105px;
}
}
div#true-false{
position: relative;
width: 25%;
height: auto;
top: 30%;
text-align: center;
margin: auto;
pointer-events:none;
}
div#true-false img{
width: 100%;	
	
}
#grad1 {
z-index:105;
position: fixed;
width: 400px;
height: 400px;
top: calc(50% - 200px);
left: calc(50% - 200px);
text-align: center;
margin: auto;
pointer-events:none;
border-radius:50%;
    background: #fff; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0) 50%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)) 50%; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 50%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(255,255,255,1) , rgba(255,255,255,0) 50%); /* Standard syntax (must be last) */
	
	 -ms-transform: scale(0.1, 0.1); /* IE 9 */
    -webkit-transform: scale(0.1, 0.1); /* Safari */
    transform: scale(0.1, 0.1);
	-webkit-transition:  transform 7.5s; /* Safari */
    transition:  transform 7.5s;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
}
.gradScale{
	
	 -ms-transform: scale(15, 15) !important; /* IE 9 */
    -webkit-transform: scale(15, 15) !important; /* Safari */
    transform: scale(15, 15) !important;
	
	opacity: 1 !important;
	filter: alpha(opacity=100) !important; /* For IE8 and earlier */
-webkit-transition: transform 30.5s; /* Safari */
    transition:  transform 30.5s;
	
	
}
#tf-img{
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
-webkit-transition:  1.5s; /* Safari */
    transition:  1.5s;
	 -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
}
.imgHover{
opacity: 1 !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */
-webkit-transition:  1.5s; /* Safari */
    transition:  1.5s;
	 -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
}

#goodNext{
z-index:200;
box-sizing: border-box;
position: fixed;
width: 80%;
height: 60%;
top: 10%;
left: 10%;
text-align: center;
margin: auto;
pointer-events:none;
border-radius:18px;
border: 4px solid #00A89C;
background: #FAFCF8; /* For browsers that do not support gradients */

opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
-webkit-transition:  0.7s; /* Safari */
transition:  0.7s;
	
}
#goodNext .h1-1{
height:33.333%;
color:#8FC924;
font-size:2rem;
line-height:200%;
margin:0px;
}
#goodNext .h1-2{
height:33.333%;
color:#F06277;
font-size:1.5rem;
line-height:200%;
margin:0px;
}
#goodNext a{
display:block;
height:33.333%;
color:#fff;
font-size:2.5rem;
line-height:200%;
margin:0px;
background-color:#0CACA1;
text-decoration:none;
}
#goodNext a:active{
background-color:#6CACA7;
color:#eee;
text-decoration:underline;
}
#cityNameStrong{
	color:#00A79B;
}

.dropAreaHover{
	/*border:red;
	background-color:blue;*/
}
.finger{
	position:absolute;
	top:100%;
	left:25%;
}

/**** new style for level 2***/ 

/**** END new style for level 2***/