* { box-sizing: border-box; }

h2{
	line-height: 34px;
	font-size: 26px;
}
.note{
	color: #fff;
	font-size: 12px;
	text-align: left;
	padding: 10px 20px;
}

.mapbg{
	background-image: url('../images/map.png'); 
	background-position: 0 0;
	background-size: cover;
	background-repeat: no-repeat;
    border: 0px solid #002b4e;
    height: 750px;
    margin: 0 auto;
}

#nablus{
    left: 462px;
    top: 232px;
	position: relative;
}
#jenin{
    left: 167px;
    top: 157px;
	position: relative;
}
#qalqilya{
    left: 250px;
    top: 273px;
	position: relative;
}
#salfit{
    left: 259px;
    top: 298px;
	position: relative;
}
#ramallah{
    left: 288px;
    top: 302px;
	position: relative;
}
#tulkarm{
    left: 235px;
    top: 233px;
	position: relative;
}
#jerusalem{
    left: 198px;
    top: 408px;
	position: relative;
}
#bethlehem{
	left: 290px;
    top: 346px;
	position: relative;
}
#gaza{
	left: 145px;
    top: 642px;
	position: relative;
}


#hebron{
	left: 266px;
    top: 450px;
	position: relative;
}
#jericho{
    left: 610px;
    top: 253px;
	position: absolute;
}

#tubas{
	left: 450px;
    top: 152px;
	position: absolute;
}

.popup{
	display: none;
	padding: 10px;
	width: 300px;
	height: 400px;
	position: absolute;
	float: left;
	background: rgba(255, 255, 255,0);
	top: -190px;
	left: 38px;
}
.point{
	padding:8px;
	background-image: url('../images/pin.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent;	
	color:#fff;
	border-radius: 0px;
	width: 40px;
	height: 40px;
	border:none;
	outline: none;
}
.point:hover{
	background-image: url('../images/pin.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent;
}
.point.active{
	background-image: url('../images/pin.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent;
}
.contents{
	float:left;
	color: #002b4e;
	font-family: 'Droid Arabic Kufi', serif;
	width: 712px;
	position: relative;
	top: 280px;
	left: 90px;
	font-size:12px;
}
.content{
	width: 100%;
	height: 650px;
	margin: 0px;	
	position: relative;
}
.buttons{
	position: relative;
	left: 224px;
	top: 42px;
}
.buttons ul{
	margin:0;
	list-style: none;
	float:left;
}
.buttons ul li{
	float:left;
	margin:0px;
	margin-right:10px;
}
button{
	cursor: pointer;
}

.btn1:hover{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 0px 0px;
}

.btn2:hover{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 240px 0px;
}


.btn1.active{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 0px 0px;
}

.btn2.active{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 240px 0px;
}

.btn1{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 0px 53px;
}

.btn2{
	width: 240px;
	height: 53px;
	outline:none;
	border:none;
	background: url('images/buttons.png') 240px 53px;
}

.scroll::-webkit-scrollbar {  
    width: 12px; 
    cursor: pointer;  
}  
.scroll::-webkit-scrollbar-track {  
    background-color: #A1A0A5; 
    cursor: pointer;   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 0px;
}  
.scroll::-webkit-scrollbar-thumb {  
    background-color: #ffce00;
    cursor: pointer; 
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  
}  
.scroll::-webkit-scrollbar-thumb:hover {  
    background-color: #ffce00; 
    cursor: pointer;    
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}  

.yellow{
	color: #ffce00;
}

.modal-content {   
    background-color: rgba(0,0,0,0.8);  
    color: #fff; 
}

.modal-content h4{
	color: #fff; 
	line-height: 28px;
}

.mb-20{
	margin-bottom: 20px;
}

.p-20{
	padding: 20px;
}

.p-10{
	padding: 10px;
}

.p-0{
	padding: 0px;
}

.loading h2, .loading h3{
	color: #ffce00;
}

#results{
	max-height: 300px;
	overflow-y: auto;	
	overflow-x: hidden;
	padding: 0 0 0 10px;
}

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid transparent;
  border: 2px solid #ffce00;
  border-radius: 20px;
}

.close {   
	float: left;
    color: #fff;
    opacity: .8;
    filter: alpha(opacity=80);
}

.icon-img{
	max-width: 100%
}

.btn-primary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-primary:hover {
    color: #000;
    background-color: #ffce00;
    border-color: #ffce00;
}

.btn-primary:focus {
    color: #000;
    background-color: #ffce00;
    border-color: #ffce00;
}


.bold{
	font-weight: bold;
}

.list-header th{
	background-color: white;
	color: #000;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    vertical-align: middle;  
}



@media (min-width: 768px){
	.modal-dialog {	   
	    margin: 70px auto 30px;
	}
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.mapbg{
		background-image: url('../images/map_mobile.png'); 
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 450px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 225px;
    	top: 130px;
		position: relative;
	}
	#jenin{
	    left: 30px;
    	top: 45px;
		position: relative;
	}
	#qalqilya{
	    left: 55px;
    	top: 100px;
		position: relative;
	}
	#salfit{
	    left: 30px;
    	top: 135px;
		position: relative;
	}
	#ramallah{
	    left: 0px;
    	top: 180px;
		position: relative;
	}
	#tulkarm{
	    left: 95px;
	    top: 40px;
	    position: relative;
	}
	#jerusalem{
	    left: 155px;
    	top: 185px;
		position: relative;
	}
	#bethlehem{
		left: 200px;
    	top: 220px;
		position: relative;
	}
	#gaza{
		left: -240px;
    	top: 310px;
		position: relative;
	}
	#hebron{
		left: 125px;
   		top: 275px;
		position: relative;
	}
	#jericho{
	    left: 275px;
    	top: 200px;
		position: absolute;
	}

	#tubas{
		left: 250px;
    	top: 90px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
.mapbg{
		background-image: url('../images/map_mobile.png'); 
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 450px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 225px;
    	top: 130px;
		position: relative;
	}
	#jenin{
	    left: 30px;
    	top: 45px;
		position: relative;
	}
	#qalqilya{
	    left: 55px;
    	top: 100px;
		position: relative;
	}
	#salfit{
	    left: 30px;
    	top: 135px;
		position: relative;
	}
	#ramallah{
	    left: 0px;
    	top: 180px;
		position: relative;
	}
	#tulkarm{
	    left: 95px;
	    top: 40px;
	    position: relative;
	}
	#jerusalem{
	    left: 155px;
    	top: 185px;
		position: relative;
	}
	#bethlehem{
		left: 200px;
    	top: 220px;
		position: relative;
	}
	#gaza{
		left: -240px;
    	top: 310px;
		position: relative;
	}
	#hebron{
		left: 125px;
   		top: 275px;
		position: relative;
	}
	#jericho{
	    left: 275px;
    	top: 200px;
		position: absolute;
	}

	#tubas{
		left: 250px;
    	top: 90px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
.mapbg{
		background-image: url('../images/map_mobile.png'); 
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 450px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 225px;
    	top: 130px;
		position: relative;
	}
	#jenin{
	    left: 30px;
    	top: 45px;
		position: relative;
	}
	#qalqilya{
	    left: 55px;
    	top: 100px;
		position: relative;
	}
	#salfit{
	    left: 30px;
    	top: 135px;
		position: relative;
	}
	#ramallah{
	    left: 0px;
    	top: 180px;
		position: relative;
	}
	#tulkarm{
	    left: 95px;
	    top: 40px;
	    position: relative;
	}
	#jerusalem{
	    left: 155px;
    	top: 185px;
		position: relative;
	}
	#bethlehem{
		left: 200px;
    	top: 220px;
		position: relative;
	}
	#gaza{
		left: -240px;
    	top: 310px;
		position: relative;
	}
	#hebron{
		left: 125px;
   		top: 275px;
		position: relative;
	}
	#jericho{
	    left: 275px;
    	top: 200px;
		position: absolute;
	}

	#tubas{
		left: 250px;
    	top: 90px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	.mapbg{
		background-image: url('../images/map.png'); 
		background-position: 50% 50%;
		background-size: cover;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 565px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 300px;
    	top: 68px;
		position: relative;
	}
	#jenin{
	    left: 60px;
   		top: 13px;
		position: relative;
	}
	#qalqilya{
	    left: 150px;
    	top: 98px;
		position: relative;
	}
	#salfit{
	  	left: 147px;
    	top: 125px;
		position: relative;
	}
	#ramallah{
	   	left: 155px;
    	top: 120px;
		position: relative;
	}
	#tulkarm{
	    left: 145px;
    	top: 70px;
		position: relative;
	}
	#jerusalem{
	  	left: 50px;
    	top: 193px;
		position: relative;
	}
	#bethlehem{
		left: 110px;
    	top: 150px;
		position: relative;
	}
	#gaza{
		left: 15px;
    	top: 365px;
		position: relative;
	}
	#hebron{
		left: 80px;
    	top: 220px;
		position: relative;
	}
	#jericho{
	  	left: 420px;
    	top: 90px;
		position: absolute;
	}

	#tubas{
		left: 285px;
    	top: 10px;
		position: absolute;
	}	

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
.mapbg{
		background-image: url('../images/map_mobile.png'); 
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 450px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 225px;
    	top: 130px;
		position: relative;
	}
	#jenin{
	    left: 30px;
    	top: 45px;
		position: relative;
	}
	#qalqilya{
	    left: 55px;
    	top: 100px;
		position: relative;
	}
	#salfit{
	    left: 30px;
    	top: 135px;
		position: relative;
	}
	#ramallah{
	    left: 0px;
    	top: 180px;
		position: relative;
	}
	#tulkarm{
	    left: 95px;
	    top: 40px;
	    position: relative;
	}
	#jerusalem{
	    left: 155px;
    	top: 185px;
		position: relative;
	}
	#bethlehem{
		left: 200px;
    	top: 220px;
		position: relative;
	}
	#gaza{
		left: -240px;
    	top: 310px;
		position: relative;
	}
	#hebron{
		left: 125px;
   		top: 275px;
		position: relative;
	}
	#jericho{
	    left: 275px;
    	top: 200px;
		position: absolute;
	}

	#tubas{
		left: 250px;
    	top: 90px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
	/* Styles */
	.mapbg{
		background-image: url('../images/map.png'); 
		background-position: 0 0;
		background-size: cover;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 750px;
	    margin: 0 auto;
	}

	#nablus{
	    left: 462px;
	    top: 232px;
		position: relative;
	}
	#jenin{
	    left: 167px;
	    top: 157px;
		position: relative;
	}
	#qalqilya{
	    left: 250px;
	    top: 273px;
		position: relative;
	}
	#salfit{
	    left: 259px;
	    top: 298px;
		position: relative;
	}
	#ramallah{
	    left: 288px;
	    top: 302px;
		position: relative;
	}
	#tulkarm{
	    left: 235px;
	    top: 233px;
		position: relative;
	}
	#jerusalem{
	    left: 198px;
	    top: 408px;
		position: relative;
	}
	#bethlehem{
		left: 290px;
	    top: 346px;
		position: relative;
	}
	#gaza{
		left: 145px;
	    top: 642px;
		position: relative;
	}
	#hebron{
		left: 266px;
	    top: 450px;
		position: relative;
	}
	#jericho{
	    left: 610px;
	    top: 253px;
		position: absolute;
	}

	#tubas{
		left: 450px;
	    top: 152px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.point{
		padding:8px;
		background-image: url('../images/pin.png');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: transparent;	
		color:#fff;
		border-radius: 0px;
		width: 40px;
		height: 40px;
		border:none;
		outline: none;
	}
	.point:hover{
		background-image: url('../images/pin.png');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: transparent;
	}
	.point.active{
		background-image: url('../images/pin.png');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: transparent;
	}
	.contents{
		float:left;
		color: #002b4e;
		font-family: 'Droid Arabic Kufi', serif;
		width: 712px;
		position: relative;
		top: 280px;
		left: 90px;
		font-size:12px;
	}
	.content{
		width: 100%;
		height: 650px;
		margin: 0px;	
		position: relative;
	}
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
.mapbg{
		background-image: url('../images/map.png'); 
		background-position: 50% 50%;
		background-size: cover;
		background-repeat: no-repeat;
	    border: 0px solid #002b4e;
	    height: 810px;
	    margin: 0 auto;
	}

	.logo {
	    text-align: center;
	    margin: 10px 0 10px 0;
	}

	.logo img{
		width: 180px;
	}

	.slogan {
	    margin: 0px;
	    margin-top: 10px;
	    line-height: 18px;
	}
	.slogan h2{
		font-size: 24px;
	}
	.text-left{
		text-align: center;
	}
	.content {
	    width: 100%;
	    height: auto; 
	    margin: 0px;
	    position: relative;
	}

	#nablus{
	    left: 435px;
    	top: 112px;
		position: relative;
	}
	#jenin{
	    left: 140px;
    	top: 38px;
		position: relative;
	}
	#qalqilya{
	    left: 245px;
    	top: 165px;
		position: relative;
	}
	#salfit{
	    left: 253px;
    	top: 190px;
		position: relative;
	}
	#ramallah{
	    left: 290px;
    	top: 190px;
		position: relative;
	}
	#tulkarm{
	    left: 230px;
	    top: 123px;
	    position: relative;
	}
	#jerusalem{
	    left: 155px;
    	top: 290px;
		position: relative;
	}
	#bethlehem{
		left: 255px;
    	top: 225px;
		position: relative;
	}
	#gaza{
		left: 100px;
    	top: 530px;
		position: relative;
	}
	
	#hebron{
		left: 230px;
   		top: 325px;
		position: relative;
	}
	#jericho{
	    left: 530px;
    	top: 125px;
		position: absolute;
	}

	#tubas{
		left: 415px;
    	top: 33px;
		position: absolute;
	}

	.popup{
		display: none;
		padding: 10px;
		width: 300px;
		height: 400px;
		position: absolute;
		float: left;
		background: rgba(255, 255, 255,0);
		top: -190px;
		left: 38px;
	}
	.head-border{
		border-bottom: 4px solid #000;
    	outline: 4px solid #fff;
	}

	.modal-content h4 {
	    color: #fff;
	    line-height: 24px;
	    font-size: 14px;
	}
}