body {
	background-image: url("../images/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-color: #351d09; 
	width:100%;
	height:100%;
}

.home-title {
	padding-top: 0.2em;
	height: 5.5vw;
}

.project {
	height:50vw;
}

#footer{
	text-align: center;
	color:#666;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: 0.9em;
	height: 3em;
	line-height: 3.5em;
	margin-top:10px;
	/*padding:0.5em;*/
}

#left_col , #right_col{
	height: 50vw;
}

.main-cont {
	overflow: hidden;
	height: 41vw;
	background-color: rgba(0, 0, 0, 0.6);
}

#main-content {
	color:#CCCCCC;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: 1.1em;
	direction: rtl;
	font-family: tahoma, arial, helvetica;
	padding: 3em;
	padding-top:1em;
	margin-top:1em;
}

.img-flow-left{
	float:left;
	margin-right: 3em;
	margin-left: 3em;
	margin-bottom: 2em;
}

#bldg_gallery{
	padding: 20px;
}
/* .video {
	position: absolute;
	object-fit: contain;
	width: auto; 
    height: auto;
} */
.cpanel{
	background-color: rgba(0,0,0,0.70);
	min-height: 8vw;
	margin-top: 1vw;
	color:#fff;
	padding:0.5vw;
	text-align: center;
}

/* .vCenter{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
} */

@media (min-width:1600px){
	.main-cont {
		overflow: hidden;
		height: 43vw;
		background-color: rgba(0,0,0,0.70);
	}

	.cpanel{
		background-color: rgba(0,0,0,0.70);
		min-height: 6vw;
		margin-top: 1vw;
		color:#fff;
		padding:0.5vw;
		text-align: center;
	}
}


.map_container {
	width: 1300px;
	height: 650px;
	/*height: 70vh;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	position: relative;
}
#map {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: calc((100% - 1290px)/2);
}
#saleh {
	z-index: 2;
	position: absolute;
	top: -25px;
	left: 440px;
}
#balad {
	z-index: 2;
	position: absolute;
	top: 172px;
	left: -20px;
}
#mekkah {
	z-index: 2;
	position: absolute;
	top: 380px;
	left: 60px;
}
#farasan {
	z-index: 2;
	position: absolute;
	top: 380px;
	left: 560px;
}
#diriya {
	z-index: 2;
	position: absolute;
	top: 175px;
	left: 740px;/* -webkit-filter: drop-shadow(5px 0px 0px #ffff00);
    filter:         drop-shadow(5px 0px 0px #ffff00);  */
}
#nabawy {
	z-index: 2;
	position: absolute;
	top: -25px;
	left: 40px;
}
#hi {
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
.hnabawy, .hbalad, .hmekkah, .hfarasan, .hdiriya, .hsaleh {
	display: none;
}
#hi2 {
/*    z-index: 3;
    position: absolute;
    top:422px;
    left:700px;*/
}
.loc {
/* cursor: pointer;*/
}
.title-a {
	font-family: 'Cairo';
	color: #ccff66;
	text-align: center;
}
.title-e {
	font-family: 'Cairo';
	color: #ccff66;
	text-align: center;
}
.navbar {
	margin-bottom:0px !important;
}

#main-content h3, #main-content h4{
	font-family: 'Cairo';
}

#main-content h3 {
	border-bottom: solid 1px #333;
	margin-bottom: 2em;
}

.project h1 {
	background-color: #61870d;
	color: #fff;
	text-align: center;
	font-family: 'Cairo';
	font-size: 2em;
	line-height: 1.6em;
	margin-top: 0px;
	font-weight: 600;
}

.main-cont img{
	width:100%;
}

.about-img{
	width:80%;
	margin: 10%;	
	margin-top:4em;
	margin-bottom: 2em;
}

.meth-img{
	width:40%;
	
	margin-top:0px;
	margin-bottom: 4em;
	margin-right:3em;
	float: left;
}

#main-content{
	line-height: 1.6em;
}

#mainView{
	height:18vw;
	width:100%;
}
 .desc {
	direction:rtl;
	text-align:right;
	/* height: 100%; */
	font-family:tahoma;
	background-color: #000;
	overflow-y: auto;
	margin-top:10px;
	padding:1em;
	opacity:0.5;
	color:#fff;
}

.desc h4{
	width:100%; 
	float:right;
	font-size:1.5em;
	font-family: 'Cairo';
	color:#ccff66;
}


.cpanel select {
	background-color: rgba(0,0,0,0.70);
	color:#fff;
	min-width: 10em;
	direction: rtl;
	border:1px solid #333;
	font-size: 12px;
}

.cpanel div{
	float:right;
	text-align:center;
	font-family: 'Cairo';
}

.icons_container{
	width:auto;
	margin-right: align-self;
	margin-left:auto;
}

/* #c0, #c1, #c3d, #c4, #c5, #c6 {
	display: inline-block;
}  */

.cpanel img:hover{
	/* width:120%;
	height:120%; */
opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

.cpanel button{
	background-color: darkolivegreen;
	color:#FFF;
	float: left;
	min-width: 4em;
	
}

.cpanel h3{
	margin-top: 0px;
	font-size:1.1em;
}

.cpanel h4{
	margin-top: 4px;
	font-size:0.9em;
}
.cpanel img{
	max-width:70px;
	max-height: 50px;
}
.b1, .b2{
	width:12%;
}
.b3{
	width:22%;
}
.b4{
	width:30%;
	border-right: solid 1px #333;
	padding-right: 1em;
}
.b5{
	width:12%;
}
.b6{
	width:12%;
}

.nav-link{
	margin-right:1em;
	margin-left: 1em;
	font-size: 1.2em;
	font-family: 'Cairo';
	color:#ccff66;
}

.compare_button{
	padding-left: 1.5em;
	padding-right: 1.5em;
	margin-top:0.3em;
	float: right !important;
    margin-right: 0.5em !important;
}

.b4 select {
	min-width: 70%;
	margin-top:0.3em;
}
.nav-item{
	
	text-align: center;
}
.map_container div:hover {
	text-shadow: 0 0 10px #FF0000;
}

.navbar-nav{
	float:right;
	margin-right: 5em;
}

.navbar-nav>li {
	float: right;
	margin-top: 1.4em;
}

.nav>li>a:hover{
	background-color:transparent;
	border-top: 2px  rgba(189,243,202,0.48) solid;
	color:#fff;
}

.nav>li>a{
	border-top: 2px  rgba(189,243,202,0) solid;
}

#compare_container{
	width:100%;
	background-color: #333;
	height:100%;
	/* margin-left: 50px; */
	position: relative;
}

#face_div {
	width: 100%;
	height: 100%;
	display: block;
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center; 
}

#right{
	/* background-image: url("images/bldgs/b24/side_textured_compare.jpg"); */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	width:100%;
	height:100%;            
	clip-path: inset(0px 0px 0px 0px);    
	position:absolute;    
	z-index: 2;
}

.bOver:hover{
	cursor: pointer;
	display: block;
}

#contact-form, #submit_container{
	width:80%;
	margin-right: 0%;
	float: right;
}

.phone{
	direction: ltr !important;
}

#contact_form input, #contact_form textarea{
	background-color: black;
	border: 1px solid #555;
	margin-bottom: 1em;
}

#left{
	/* background-image: url("images/bldgs/b24/side_wireframe_compare.jpg"); */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	width:100%;
	height:100%;            
	clip-path: inset(0px 0px 0px 0px);        
	position: relative;
	z-index: 1;
}

  .main-cont video {
	/* Make video to at least 100% wide and tall */
	/* min-width: 100%; 
	min-height: 100%;  */
	
	/* Setting width & height to auto prevents the browser from stretching or squishing the video */
	/* width: auto;
	height: auto; */
	
	/* Center the video */
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%); */
  }

/* cairo-300 - latin_arabic */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/cairo-v1-latin_arabic-300.eot'); /* IE9 Compat Modes */
	src: local('Cairo Light'), local('Cairo-Light'),  url('../fonts/cairo-v1-latin_arabic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('../fonts/cairo-v1-latin_arabic-300.woff2') format('woff2'), /* Super Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-300.woff') format('woff'), /* Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-300.ttf') format('truetype'), /* Safari, Android, iOS */  url('../fonts/cairo-v1-latin_arabic-300.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-regular - latin_arabic */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/cairo-v1-latin_arabic-regular.eot'); /* IE9 Compat Modes */
	src: local('Cairo'), local('Cairo-Regular'),  url('../fonts/cairo-v1-latin_arabic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('../fonts/cairo-v1-latin_arabic-regular.woff2') format('woff2'), /* Super Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-regular.woff') format('woff'), /* Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-regular.ttf') format('truetype'), /* Safari, Android, iOS */  url('../fonts/cairo-v1-latin_arabic-regular.svg#Cairo') format('svg'); /* Legacy iOS */
}
/* cairo-600 - latin_arabic */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/cairo-v1-latin_arabic-600.eot'); /* IE9 Compat Modes */
	src: local('Cairo SemiBold'), local('Cairo-SemiBold'),  url('../fonts/cairo-v1-latin_arabic-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('../fonts/cairo-v1-latin_arabic-600.woff2') format('woff2'), /* Super Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-600.woff') format('woff'), /* Modern Browsers */  url('../fonts/cairo-v1-latin_arabic-600.ttf') format('truetype'), /* Safari, Android, iOS */  url('../fonts/cairo-v1-latin_arabic-600.svg#Cairo') format('svg'); /* Legacy iOS */
}