body{
	/*font-family: "SegoeUI, Segoe UI";*/
	font-family: "arbfonts-janna";
	direction: rtl;
	text-align: right;
}

#header{
	background-image:url('../img/hbg.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	background-position:top ;
	padding-top: 2em;
	color:#fff;
	text-align: center;
}

#mapContainer{
	width:90%; 
	overflow:scroll;
	max-width:900px; 
}

@media (min-width: 1200px) {
	#header{
		min-height: 200px;
	}

}

@media (min-width: 1440px) {
	#header{
		min-height: 300px;
	}
}

@media (min-width: 1900px) {
	#header{
		min-height: 400px;
	}
}


@media (min-width: 2000px) {
	#header{
		min-height: 600px;
	}
}


#mainmenu{
	list-style: none;

}


#mainmenu li{
	list-style: none;
	display: inline-block;
	padding-right: 1em;
	padding-left: 1em;
}

#mainmenu li a{
	text-decoration: none;
	color:#fff;
}

#mainmenu li a:hover{
	text-decoration: underline;
}




/* Mobile Menu Styles */
.menu-toggle {
	display: none;
	cursor: pointer;
	/* background-color: bisque; */
}

.menu-toggle span {
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 5px;
	transition: all 0.3s;
}


#footermenu{
	list-style: none;

}


#footermenu li{
	list-style: none;
	padding-bottom: 0.5em;
}

#footermenu li a{
	text-decoration: none;
	color:#212529;
}

#footermenu li a:hover{
	text-decoration: underline;
}


#footweAddress{
	text-align: center;
}

#footweAddress .row{
	padding-bottom: 0.5em;
	text-align: center;
}

#footweAddress .row a{
	text-align: center;
	text-decoration: none;
	color:#212529;
}

#footweAddress .row a:hover{
	text-decoration: underline;
}


#loginLink:hover, #logoutLink:hover{
	text-decoration: underline;
}

#loginLink, #logoutLink{
	text-decoration: none;
	color:#fff;
	padding-right: 1em;
}

h1,h2{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

h1{
	font-size: 36px;
}


h2{
	font-size: 24px;
}


#footer{
	position:relative;
	padding-bottom: 30px;
	padding-top: 30px;
}
#footer footer{
	z-index: 1000;
	text-align: center;
}

#footerBG{
	width: 100%;
	position: absolute;
	top: -50px;
	z-index: -1;
	background-image: url('../img/footer.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	 /* 100%; */
	background-position: top;
}

#tabs, .ui-widget-header{
	background: transparent;
	border: none;
}

.ui-tabs .ui-tabs-panel{
	background-color: #fff;
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

#search{
	position: relative;
	padding-bottom: 10em;
}

#tabContaner{
	position: absolute;
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	top:-5em;
	z-index: 1000;
}

#tabs{
	direction: rtl;
	text-align: right;
}

#socialMedia img{
	max-width: 30px;
}

#content{
	background-color: #fff;
	padding-bottom: 2em;
}

#register{
	text-decoration: none;
	color:#212529;
}

#register:hover{
	text-decoration: underline;
}

.cards{
	display: none;
}

.dt-layout-start{
	margin-left: auto;
	margin-right: 0%;
}

.dt-layout-end{
	margin-right: auto;
	margin-left: 0%;
}

#cats li{
	list-style: none;
	margin-bottom: 0.2em;
}
#cats li input{
	margin-left: 1em;
}

#header .row{
	margin-left: 0px;
	margin-right: 0px;
	/* overflow-x: hidden; */
}

.container-fload{
	overflow-x: hidden;
}

#videoShow{
	/* width:1200px; */
	width:100%;
}

/* 
@media (max-width: 1440px) {
	#videoShow{
		width:720px;
	}
}
@media (max-width: 1200px) {
	#videoShow{
		width:640px;
	}
}

@media (max-width: 980px) {
	#videoShow{
		width:480px;
	}
} */

/* Mobile Responsive */
@media (max-width: 720px) {
/* 	
	#videoShow{
		width:320px;
	} 
	
	#header, #footerBG{
		background-size: 100% 100%;
	}
		*/
	#mapContainer{
		max-width:300px !important; 
	}

		
	#tabContaner{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}


	#mainmenu {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1000;
		padding: 1rem 0;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	}
	
	#mainmenu.active {
		display: flex;
	}
	
	#mainmenu li {
		margin: 0;
		width: 100%;
		text-align: center;
	}
	
	#mainmenu li a {
		display: block;
		padding: 2px 2px;
		color: #111;
	}
	
	.menu-toggle {
		display: flex;
		position: absolute;
		left: 20px;
		top: 25px;
		min-width: 20px;
		min-height: 20px;
	}

}

/* ---------------End mobbile menu ---------------  */


#companiesList .row {
  display: grid;
  grid-template-columns: auto auto auto;

}

#companiesList .row:nth-child(odd) {
	background-color: #f8f9fa;
}
#companiesList .row:nth-child(even) {
	background-color: #ffffff;
}


/*            ------- banners ------             */
.banner-container {
    position: relative;
	width: 100%;
    overflow: hidden;
}
.banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease-in-out;
	cursor: pointer;
}

.banner.active {
    opacity: 1;
    z-index: 2;
}

.banner.hidden {
    opacity: 0;
    z-index: 1;
}
/*            ----- end banners ----             */