@charset "utf-8";
/* CSS Document */
body{
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
}
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: black;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: black;
}

::-webkit-scrollbar-thumb
{
	background-color: orangered;
}

.pageContent{
	position: relative;
	min-height: 100%;
}
#gameContainer{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding: 0;
	margin: 0;
}

header{
	display: block;
	direction: rtl;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	margin: 0;
	height:5.1875vw;
	background-color: transparent;
	z-index: 1000;
	transition: 450ms all;

}
.filledHeader{
	background-color: rgba(7,7,3,.70);

}

header div.header {
	position: relative;
	direction: rtl;
}
header div.header .hamburger{
	display: none;
}
header div.header .mainLogo{
	display: inline-block;
	position: absolute;
	height:2.53vw;
	left:1.875vw;
	top:1.302vw;
	right: auto;
	padding: 0;
	margin: 0;
	z-index: 2;
}
header div.header  .mainLogo img{
	height:100%;
}
header div.header  nav{
	display: inline-block;
	position: absolute;
	margin:0;
	top:0;
	height:5.1875vw;
	right: 2.425vw;
	z-index: 1;
}
header div.header  nav a{
	display: inline-block;
	padding: 0vw 1vw;
	margin: 0vw 1vw 0;
	color:#fff;
	text-decoration: none;
	font-size:1.2vw;
	line-height: 5.1875vw;
	background:none;
	font-weight: bolder;
}
header div.header  nav a:hover{
	color: #ffcd17;
}
	.container{
		position: absolute;
		top:0;
		left:0;
		width:100%;
	}
.addSpaceOfHeader{
	position: relative;
	height:5.1875vw;
}
	/******** main project view *********/
	.mainProject{
		position: absolute;
		direction: rtl;
		top:0;
		left:0;
		width:100%;
		z-index: 10;
	}
	.mainProject .imageBG .BG{
		position: relative;
		top:0;
		left:0;
		width:100%;
		z-index: 1;
	}
	.mainProject .imageBG .BG_grid{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
    	background-size: 4px 4px;
		background-image: -webkit-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -webkit-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: -o-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -o-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: linear-gradient(to right, rgba(50,50,50,.5) 1px, transparent 1px), linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		z-index: 2;
	}

	.mainProject .imageBG .BG_gradient_left{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: -webkit-linear-gradient(right, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		background: -o-linear-gradient(right, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		background: linear-gradient(to left, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5000000', endColorstr='#21000000',GradientType=1 );
		z-index: 3;
	}
	.mainProject .imageBG .BG_gradient_bottom{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.34) 54%, rgba(0,0,0,0.96) 89%, rgba(0,0,0,0.96) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 54%,rgba(0,0,0,0.96) 89%,rgba(0,0,0,0.96) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 54%,rgba(0,0,0,0.96) 89%,rgba(0,0,0,0.96) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f5000000',GradientType=0 );
		z-index: 4;
	}
	.mainProject .videoBG{
		text-align: left;
	}
	.mainProject .videoBG .BG{
		position: relative;
		top:0;
		left:0;
		width:75vw;
		z-index: 1;
	}

	.mainProject .videoBG .BG_grid{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
    	background-size: 4px 4px;
		background-image: -webkit-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -webkit-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: -o-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -o-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: linear-gradient(to right, rgba(50,50,50,.5) 1px, transparent 1px), linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		z-index: 2;
	}

	.mainProject .videoBG .BG_gradient_left{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 3;
		background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 56%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
	}
	.mainProject .videoBG .BG_gradient_bottom{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 4;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 82%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}
	.mainProject .projectInformation{
		position: absolute;
		width:38vw;
		height:23.38vw;
		right: 4.425vw;
		top:10.30vw;
		z-index: 10;
	}
	.mainProject .projectInformation .keyWordsPlace{
		position: absolute;
		top:0;
		right:0;
		color:#ff3300;
		font-size:0.95vw;
		letter-spacing: -2px;

	}
	.mainProject .projectInformation .keyWordsPlace a{
		font-size:1.25vw;
		text-decoration: none;
		color:#ff3300;
		letter-spacing: normal;
	}
	.mainProject .projectInformation .keyWordsPlace a:hover{
		text-decoration: underline;
	}
	.mainProject .projectInformation h1{
		position: relative;
		margin:0;
		padding: 0;
		padding-top:3vw;
		display: block;
		width:100%;
		height:7vw;
		text-align: center;
		right:0;
		color:#fff;

	}
	.mainProject .projectInformation h1 img{
		height:100%;
	}
	.mainProject .projectInformation p{
		color:#fff;
		font-weight: normal;
		font-size: 1.05vw;
		line-height: 1.50vw;
		text-shadow: 0.1vw 0.1vw 0.3vw #000;
		margin-top:2vw;
	}
	/******** end of main project view *********/
	.subContainer{
		position: absolute;
		top: 45.45vw;
		width:100%;
		z-index: 11;
		direction: rtl;
		background-color: black;
	}

	/******* sub project view *****/
	.subProject{
		position: relative;
		direction: rtl;
		top:-2vw;
		left:0;
		width:100%;
		z-index: 10;
		max-height: 45vw;
		overflow: hidden;
		display: none;
	}
	.subProject .imageBG .BG{
		position: relative;
		top:0;
		left:0;
		width:100%;
		z-index: 1;
	}
	.subProject .imageBG .BG_grid{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
    	background-size: 4px 4px;
		background-image: -webkit-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -webkit-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: -o-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -o-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: linear-gradient(to right, rgba(50,50,50,.5) 1px, transparent 1px), linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		z-index: 2;
	}

	.subProject .imageBG .BG_gradient_left{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: -webkit-linear-gradient(right, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		background: -o-linear-gradient(right, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		background: linear-gradient(to left, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.13) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5000000', endColorstr='#21000000',GradientType=1 );
		z-index: 3;
	}
	.subProject .imageBG .BG_gradient_bottom{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.34) 54%, rgba(0,0,0,0.96) 89%, rgba(0,0,0,0.96) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 54%,rgba(0,0,0,0.96) 89%,rgba(0,0,0,0.96) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 54%,rgba(0,0,0,0.96) 89%,rgba(0,0,0,0.96) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f5000000',GradientType=0 );
		z-index: 4;
	}
	.subProject .videoBG{
		text-align: left;
	}
	.subProject .videoBG .BG{
		position: relative;
		top:0;
		left:0;
		width:75vw;
		z-index: 1;
	}

	.subProject .videoBG .BG_grid{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
    	background-size: 4px 4px;
		background-image: -webkit-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -webkit-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: -o-linear-gradient(left, rgba(50,50,50,.5) 1px, transparent 1px), -o-linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		background-image: linear-gradient(to right, rgba(50,50,50,.5) 1px, transparent 1px), linear-gradient(rgba(50,50,50,.5) 1px, transparent 1px);
		z-index: 2;
	}

	.subProject .videoBG .BG_gradient_left{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 3;
		background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 56%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
	}
	.subProject .videoBG .BG_gradient_bottom{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 4;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 82%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 82%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}
	.subProject .projectInformation{
		position: absolute;
		width:27vw;
		height:23.38vw;
		right: 4.425vw;
		top:3.30vw;
		z-index: 10;
	}
	.subProject .projectInformation .keyWordsPlace{
		position: absolute;
		top:0;
		right:0;
		color:#ff3300;
		font-size:0.95vw;
		letter-spacing: -2px;

	}
	.subProject .projectInformation .keyWordsPlace a{
		font-size:1.25vw;
		text-decoration: none;
		color:#ff3300;
		letter-spacing: normal;
	}
	.subProject .projectInformation .keyWordsPlace a:hover{
		text-decoration: underline;
	}
	.subProject .projectInformation h1{
		position: relative;
		margin:0;
		padding: 0;
		padding-top:3vw;
		display: block;
		width:100%;
		height:8vw;
		text-align: right;
		right:0;
		color:#fff;
	}
	.subProject .projectInformation h1 img{
		height:100%;
	}
	.subProject .projectInformation p{
		color:#fff;
		font-size: 1.25vw;
		line-height: 1.50vw;
		text-align: justify;
	}
.subProject .projectInformation p a{
	color:#fff;
}
/**** end of projects ***/

/*** start of about us ***/
.aboutRightSide{
	position: absolute;
	top: 9.6125vw;
	right: 4.425vw;
	width:41.15vw;
	height:38.541vw;
	direction: rtl;
	z-index: 5;
	opacity: 0;
}
.aboutRightSide h1{
	font-size:1.575vw;
	margin:0;
	padding: 0;
	font-weight: bold;
	color:#e6171e;
}
.aboutRightSide p{
	font-size: 1.1vw;
	color:#fff;
	text-align: justify;
}
.aboutLeftSide{
	position: absolute;
	top: 9vw;
	left: 4.425vw;
	width:46vw;
	direction: rtl;
	z-index: 5;
	opacity: 0;
}
.aboutLeftSide h1{
	font-size:1.5vw;
	margin:0;
	padding: 0;
	font-weight: bold;
	color:#e6171e;
}
.aboutLeftSide p{
	font-size: 1vw;
	line-height: 1.3vw;
	color:#fff;
	text-align: justify;
	margin:0.7vw 0;
}
.aboutLeftSide img{
	height:31vh;
	padding:0;
	margin: 0;
	padding-right:3vh;
}
/*** end of about us ***/

/*** start of contact us ***/

.contactRightSide{
	position: absolute;
	top: 9.6125vw;
	right: 4.425vw;
	width:41.15vw;
	height:38.541vw;
	direction: rtl;
	z-index: 5;
}
.contactLeftSide{
	position: absolute;
	top: 9.6125vw;
	left: 4.425vw;
	width:41.15vw;
	height:38.541vw;
	direction: rtl;
	z-index: 5;
	}
.contactLeftSide h1{
	font-size:1.575vw;
	margin:0;
	padding: 0;
	font-weight: bold;
	color:#e6171e;
}
.contactLeftSide p{
	font-size: 1vw;
	color:#fff;
	text-align: justify;
	margin: 0.2vw 0 1vw 0;
}
.contactLeftSide .errorMessage{
	display: block;
	color:#e6171e;
	height:1.5vw;
	opacity: 0;
	font-size:0.9vw;
	line-height: 1.5vw;
	padding: 0 1vw 0 0;
}

.contactLeftSide input{
	display: block;
	font-size:1vw;
	font-family: 'Heebo', sans-serif;
	width:24vw;
	height:2.3vw;
	border-radius: 1vw;
	border:0.1vw #fff solid;
	margin:0;
	padding:0 1vw;
	outline: none;
	background-color: #fff;
}
/*.contactLeftSide input:focus,.contactLeftSide textarea:focus{
	border-color:#e6171e !important;
}*/
.contactLeftSide .errorField{
	border-color:#e6171e !important;
}
.contactLeftSide textarea{
	outline: none;
	font-size:1vw;
	font-family: 'Heebo', sans-serif;
	width:24vw;
	height:6.5vw;
	border-radius: 1vw;
	border:0.1vw #fff solid;
	margin:0;
	padding:0 1vw;
	resize: none;
}
.contactLeftSide button{
	font-size:1vw;
	font-family: 'Heebo', sans-serif;
	width:6vw;
	margin:0 20vw 0 0;
	height:2.5vw;
	border-radius: 1vw;
	border:0.1vw #fff solid;
	background-color: #fff;
	font-weight: bold;
	outline: none;
	cursor: pointer;
}
.contactLeftSide button:hover{
	border-color:#e6171e !important;
}
.ltrme:focus{
	direction: ltr;
}
/*** end of contact us ***/
/*** start of homepage ***/
.homePageLeftSide{
	position: absolute;
	top: 9.6125vw;
	left: 4.425vw;
	width:35.78125vw;
	height:38.541vw;
	direction: rtl;
	z-index: 5;
	text-align: center;
}

.homePageLeftSide img{
	width:90%;
	margin:1vw 0 1vw;
	display: block;


}

#loader{
	position: fixed;
	top:0;
	left:0;
	background-color: #000;
	width:100%;
	height:100%;
	display: block;
	z-index: 10000;
}
#loader img{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom: 0;
	margin: auto;
	width:224px;
	height:70px;

}
#loader1{
	display: block;
}
#loader2{
	display: none;
}
/*** end of homepage ***/



/*** services**/
.sboxesContainer{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;
}
.sboxesContainer .sbox{

	width: 230px;

	height: 230px;

	text-align: center;
}
.sboxesContainer .sbox .icon{

	width: 145px;

	height: 145px;

	left: 0;

	right: 0;

	margin: auto;

	border: solid 1px white;

	border-radius: 50%;
}
.sboxesContainer .sbox .icon img{
	width: 105px;
	height: 105px;
	padding: 0;
	margin-top: 25px;
}
.sboxesContainer .sbox .text{

}
.sboxesContainer .sbox .text .title{color: red;font-weight: bold;font-size: 21px;}
.sboxesContainer .sbox .text .inf{
color: white;
font-size: 15px;
}
/***end services***/

@media only screen and (max-width: 600px){
	body{
		/* background: url('../images/ang2.gif'); */
		background-size: cover;
	}
	header{
		height: 10vw;
	}
	header div.header .mainLogo{
		height: 7.6vw;
	}
	header div.header .hamburger{
		display: block;
		position: absolute;
		top: 1vw;
		right: 1vw;
		width: 8vw;
		height: 8vw;
	}
	header div.header .hamburger img{
		width: 100%;
		height: 100%;
		filter: invert(1);
	}
	header div.header .hamburger img path {
		fill: white;
	}
	
    header div.header nav{
		display: none;
		width: 40vw;
		position: absolute;
		top: 10vw;
		right: 1vw;
		height: auto;
		background-color: #f13000;
		padding: 2vw;
    }
    header div.header nav a{
		display: block;
		font-size: 5vw;
 	   	line-height: 7vw;
	}
	/* .mainProject .projectInformation p{
		font-size: 2.7vw;
		line-height: 2.8vw;
		margin-top: 0vw;
	} */
	.mainProject .projectInformation {
        width: 60vw;
    }
    .mainProject .projectInformation p {
        font-size: 2.7vw;
        line-height: 2.8vw;
        margin-top: 0vw;
	}
	
	.aboutLeftSide{
		width: 92vw;
		opacity: 1;
	}
	.aboutLeftSide h1 {
		font-size: 4vw;
	}
	.aboutLeftSide p {
		font-size: 3vw;
		line-height: 3.6vw;
	}
	.pageContent{
		position: absolute;
		top: 0;
		background-color: black;
    	width: 100%;
		opacity: 1;
	}
	.aboutRightSide{
		opacity: 1;
		width: 100%;
		right: 0;
		padding-top: 6vw;
	}
}