@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* #Site Styles
================================================== */

/* #Font-Face
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body { font-family: 'Roboto', sans-serif; font-size: 12px; color: #000; }
input,select,textarea { font-family: 'Roboto', sans-serif; font-size: 12px; color: #000; }
body { background: #fff; }
img { border: 0; display: block; }
ul,li { list-style: none; }
:focus { outline: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 400; }
fieldset { border: none; }



select.go { height: 28px; width: calc(100% - 166px); border: 1px solid #aaa; color: #345852; padding: 3px 5px; font-size: 16px; background: #fff; appearance: none; -o-appearance: none; -webkit-appearance: none; -ms-appearance: none; border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; }



/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; max-width: 1283px; position: relative; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

	/* ### main container ### */
	#mainCntr { width: 100%; overflow: hidden; }

	/* ### header container ### */
	#headerCntr { position: relative; width: 100%; height: 343px; }

		/* ### top box ### */
		.topBox { width: 100%; height: 70px; background: #fff; }
		.topBox ul { width: 330px; float: right; }
		.topBox li { margin: 15px 0 0 15px; font-family: 'PT Sans',sans-serif; font-weight: 400; border: 1px solid #ababab; display: block; float: left; -webkit-border-radius: 5px; border-radius: 5px; }
		.topBox li a { float: left; }
		.topBox .select { position: relative; width: 124px; height: 36px; display: inline-block; overflow: hidden; }


		.topBox .select select { width: 100%; padding: 0 5px; height: 36px; font-family: 'PT Sans',sans-serif; font-size: 15px; color: #41afe7; margin: 0; display: inline-block; border: none; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; background: #fff; }


		#topBox .select:after { content: url('../images/select_arrow.png'); position: absolute; top: 0; right: 0; }

		.topBox .label { padding: 9px 3px 9px 8px; float: left; font-family: 'PT Sans',sans-serif; font-size: 15px; color: #333333; }

		/* ### header box ### */
		.headerBox { height: 196px; width: 100%; overflow: hidden; background: #2455a5; }
		.headerBox .inner { padding: 0 25px; overflow: hidden; }

		.headerBox .logo { margin-top: 40px; padding: 0 34px 55px 58px; width: 40%; float: left; background: url( "../images/logo.png") left bottom no-repeat; font-family: 'PT Sans',sans-serif; font-size: 36px; color: #fff; text-decoration: none; font-weight: 700; }
		.headerBox .logo span { font-size: 18px; color: #f6bd00; display: block; font-weight: 400; }


		.headerBox .logoar { margin-top: 40px; padding: 0 34px 55px 58px; width: 40%; float: left; background: url( "../images/logo.png") left bottom no-repeat; font-family: 'PT Sans',sans-serif; font-size: 36px; color: #fff; text-decoration: none; font-weight: 700; text-align: right;}
		.headerBox .logoar span { text-align: right; font-size: 18px; color: #f6bd00; display: block; font-weight: 400; }


		.headerBox .logo a { text-decoration: none; color: #fff;}
		.headerBox .logo a span { text-decoration: none; color: #f6bd00;}


		.headerBox .logoar a { text-align: right; text-decoration: none; color: #fff;}
		.headerBox .logoar a span { text-align: right;text-decoration: none; color: #f6bd00;}



		.headerBox .logo img { max-width: 100%; }
		.headerBox .banner { padding: 2px 137px 0 0; width: 60%; float: left; }
		.headerBox .banner img { width: 100%; }

		/* ### menu box ### */
		#headerCntr .menuBox { padding: 10px 0; width: 100%; float: left; background: #e7e6e7; }
		#headerCntr .menuBox ul { margin-right: -25px; padding: 0 25px; list-style: none; }
		#headerCntr .menuBox li { padding: 0 25px 0 0; float: left; position: relative; }
		#headerCntr .menuBox li a { padding: 0 11px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 18px; color: #6395d2; text-decoration: none; display: inline-block; line-height: 32px; border: 1px solid #aaa; -webkit-border-radius: 5px; border-radius: 5px; background: #fff; }
		#headerCntr .menuBox li:hover > a,#headerCntr .menuBox li.active a { border: 1px solid #4a97ca; color: #fff; background: #7cc2e3; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#7cc2e3),color-stop(51%,#63b0d8),color-stop(53%,#64afd8),color-stop(58%,#70bbdf),color-stop(100%,#7cc2e3)); background: -webkit-linear-gradient(top,#7cc2e3 0%,#63b0d8 51%,#64afd8 53%,#70bbdf 58%,#7cc2e3 100%); }

		#headerCntr .menuBox li.selected a { border: 1px solid #4a97ca; color: #fff; background: #7cc2e3; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#7cc2e3),color-stop(51%,#63b0d8),color-stop(53%,#64afd8),color-stop(58%,#70bbdf),color-stop(100%,#7cc2e3)); background: -webkit-linear-gradient(top,#7cc2e3 0%,#63b0d8 51%,#64afd8 53%,#70bbdf 58%,#7cc2e3 100%); }



		#headerCntr .menuBox ul li:hover ul { display: block; }
		#headerCntr .menuBox ul li ul { padding: 5px; list-style: none; position: absolute; top: 33px; width: 200px; z-index: 999; display: none; border: 1px solid #aaa; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; background: #fff; }
		#headerCntr .menuBox ul li ul li { padding: 0; float: none; }
		#headerCntr .menuBox ul li ul li a { border: none; display: block; }
	#headerCntr .mobileMenu { display: none; }

	/* ### content container ### */
	#contentCntr { padding: 35px 0 70px; width: 100%; overflow: hidden; background: #fff; }
.space { padding: 0 25px; overflow: hidden; }

	/* ### intro container ### */
	#introCntr { width: 100%; overflow: hidden; }
	#introCntr .left { padding: 0 135px 0 25px; width: 60%; float: left; }
	#introCntr .right { width: 40%; float: right; }

		/* ### intro box ### */
		.introBox { width: 100%; overflow: hidden; }
		.introBox h2 { font-size: 30px; color: #039; font-weight: 400; }
		.introBox h2 span { display: block; font-size: 18px; color: #69c; font-weight: 600; }
		.introBox p { padding: 32px 0 15px; font-size: 17px; color: #333333; line-height: 26px; }

		.introBox h3 {padding: 5px 0 20px;  font-size: 17px; color: #2657a6; font-weight: 700; text-decoration: none; }

		.introBox a { font-size: 18px; color: #6395d2; text-decoration: none; font-weight: 400; }
		.introBox a:hover { text-decoration: underline; }



		.introBoxar h1 {text-align: right; }
		.introBoxar h2 { font-size: 30px; color: #333333; font-weight: 400;text-align: right; }
		.introBoxar h2 span { display: block; font-size: 18px; color: #69c; font-weight: 700;text-align: right; }
		.introBoxar p { padding: 32px 0 15px; font-size: 17px; color: #333333; line-height: 22px;text-align: right; }

		.introBoxar h3 {padding: 5px 0 20px;  font-size: 17px; color: #2657a6; font-weight: 700; text-decoration: none; text-align: right; }

		.introBoxar a { font-size: 17px; color: #2657a6; font-weight: 700; text-decoration: none;text-align: right; }
		.introBoxar a:hover { text-decoration: underline;text-align: right; }

		/* ### step box ### */
		.stepBox { padding: 65px 0 60px; width: 100%; overflow: hidden; }
		.stepBox ul { list-style: none; }
		.stepBox li { position: relative; width: 33.3%; float: left; }
		.stepBox .block { padding: 0 0 37px; background: url(images/shadow.png) left bottom no-repeat; }
		.stepBox .block .shadow { position: absolute; right: -27px; top: 0; z-index: 3; width: 26px; height: 100%; background: url(images/shadow_right.png) left bottom no-repeat; }
		#stepBox a { position: absolute; left: 24px; top: 0; cursor: pointer; padding: 6px 63px 0 76px; height: 118px; font-size: 24px; color: #333; text-decoration: none; border: 1px solid #6395d2; border-bottom: none; -webkit-border-radius: 48px; border-radius: 48px; background: #e4e4e4; }
		.stepBox p { position: absolute; left: 24px; top: 0; padding: 6px 63px 0 76px; height: 118px; font-size: 24px; color: #333; text-decoration: none; border: 1px solid #6395d2; border-bottom: none; -webkit-border-radius: 48px; border-radius: 48px; background: #e4e4e4; }

		.stepBox .image { border-right: 1px solid #fff; border-bottom: 1px solid #fff; margin: 45px 0 0; position: relative; }
		.stepBox .image img { width: 100%; }
		.stepBox .number { z-index: 2; position: absolute; left: 0; top: -8px; width: 90px; height: 90px; background: #2657a6; -webkit-border-radius: 100%; border-radius: 100%; padding: 9px; }
		.stepBox .number span { display: block; width: 100%; line-height: 73px; text-align: center; font-size: 55px; color: #f6bd00; font-weight: 800; -webkit-border-radius: 100%; border-radius: 100%; background: #fff; }
		.stepBox .arrow { display: block; position: absolute; right: -75px; top: 50%; z-index: 9; margin: -73px 0 0; width: 76px; height: 146px; background: url(images/arrow1.png) left top no-repeat; }
		.stepBox .arrow2 { display: block; position: absolute; right: -75px; top: 50%; z-index: 9; margin: -73px 0 0; width: 76px; height: 146px; background: url(images/arrow2.png) left top no-repeat; }

		/* ### login box ### */
		.loginBox { z-index: 9999; position: relative; margin-top: 28px; width: 100%; min-height: 250px; border: 1px solid #6395d2; -webkit-border-radius: 20px; border-radius: 20px; background: url(/1images/loginB.png) repeat; }
		.loginBox .tab { width: 100%; border-bottom: 8px solid #2657a6; float: left; background: #9bc8f1; }

		.loginBox .tab a { margin-top: -28px; padding: 8px 48px 8px 25px; display: block; font-size: 24px; color: #2657a6; text-decoration: none; border: 1px solid #6395d2; border-bottom: none; -webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0; background: #9bc8f1; }
		.loginBox .tab .signup { margin-left: -1px; float: left; }
		.loginBox .tab .login { margin-right: -1px; float: right; }
		.loginBox .tab a:hover,.loginBox .tab a.active { color: #fff; background: #2657a6; }
		.loginBox .detail { padding: 23px 33px 6px 24px; overflow: hidden; }
		.loginBox .detail .block { overflow: hidden; }
		.loginBox .row { padding: 0 0 14px; width: 100%; float: left; }
		.loginBox input.field { float: left; padding: 3px 5px; height: 28px; font-size: 17px; color: #345852; border: 1px solid #aaa; -webkit-border-radius: 3px; border-radius: 3px; width: -webkit-calc(100% - 166px); width: calc(100% - 166px); }
		

		.loginBox input.btn { font-size: 18px; color: #333333; font-weight: 700; margin-top: 9px; padding: 0 25px; line-height: 35px; height: 35px; display: block; float: right; border: 1px solid #c59701; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; background: #ffd54b; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffd54b),color-stop(49%,#fdc407),color-stop(51%,#eab401),color-stop(100%,#ffcf32)); background: -webkit-linear-gradient(top,#ffd54b 0%,#fdc407 49%,#eab401 51%,#ffcf32 100%); }
		.loginBox input.btn:hover { text-decoration: underline; }

		.loginBox .label { font-size: 17px; color: #345852; width: 166px; float: left; line-height: 28px; }

		#loginBox .label { font-size: 17px; color: #345852; width: 156px; float: left; line-height: 28px; }

		.loginBox .label span { color: #039; }

		.loginBox .labelar { font-size: 17px; color: #345852; width: 166px; float: left; line-height: 28px; text-align: right; }
		.loginBox .labelar span { color: #039; }


		.loginBox .icon { float: left; }
		.loginBox .detail .block.logindetail { display: none; }

		/* ### block box ### */
		.blockBox { padding: 61px 0 37px; width: 100%; overflow: hidden; }
		.blockBox img { width: 100%; }
		.blockBox .img1 { display: block; }
		.blockBox .img2 { display: none; }

	/* ### bottom container ### */
	#bottomCntr { width: 100%; overflow: hidden; }
	#bottomCntr .left { padding: 0 46px 0 0; width: 65%; float: left; }
	#bottomCntr .right { width: 35%; float: left; }

		/* ### news box ### */
		.newsBox { width: 100%; overflow: hidden; }
		.newsBox h2 { padding: 0 0 24px; font-size: 24px; color: #2657a6; }
		.newsBox ul { list-style: none; }
		.newsBox li { padding: 0 0 25px; overflow: hidden; }
		.newsBox .date { padding: 0 0 3px; width: 37px; float: left; font-size: 24px; color: #333; border: 1px solid #dde0e5; text-align: center; }
		.newsBox .date span { margin-bottom: 3px; font-size: 15px; font-weight: 400; color: #fff; margin: -1px -1px 0; display: block; line-height: 23px; height: 23px; background: #f6bd00; }
		.newsBox .detail { padding: 0 0 0 17px; overflow: hidden; }
		.newsBox .title { font-size: 18px; color: #6395d2; text-decoration: none; font-weight: 400; }
		.newsBox .title:hover { text-decoration: underline; }

		.newsBox p { padding: 0 0 18px; font-size: 17px; color: #333333; line-height: 26px; }

		.newsBox p.arabic { padding: 0 0 18px; font-size: 17px; color: #333333; line-height: 26px;text-align: right; }


		.newsBox a.btn {  text-decoration: none; font-size: 18px; color: #333333; font-weight: 700;margin-top: 9px; padding: 0 25px; line-height: 35px; height: 35px; display: block; float: right; border: 1px solid #c59701; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; background: #ffd54b; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffd54b),color-stop(49%,#fdc407),color-stop(51%,#eab401),color-stop(100%,#ffcf32)); background: -webkit-linear-gradient(top,#ffd54b 0%,#fdc407 49%,#eab401 51%,#ffcf32 100%); }
		.newsBox a.btn:hover { text-decoration: underline; }


		.newsBox h3 { padding: 0 0 24px; font-size: 24px; color: #2657a6; text-align: right;}


		/* ### list box ### */
		.listBox { padding: 0 0 26px; width: 100%; overflow: hidden; }
		.listBox .title { padding: 0 0 16px; font-size: 24px; color: #2657a6; }

		.listBox .titlear { padding: 0 0 16px; font-size: 24px; color: #2657a6;text-align: right; }


		.listBox ul { list-style: none; }
		.listBox li { padding: 0 0 0 22px; line-height: 25px; background: url(images/right.png) left 7px no-repeat; }

		.listBox li a { font-size: 17px; color: #333333; font-weight: 400; text-decoration: none; }
		.listBox li a:hover { text-decoration: underline; }

		.listBox ul.arabic { list-style: none; text-align: right; }
		.listBox li.arabic { padding: 0 22px; line-height: 25px; background: url(images/right.png) right 7px no-repeat; }
		.listBox li.arabic a { font-size: 17px; color: #333333; font-weight: 400; text-decoration: none;text-align: right; }
		.listBox li.arabic a:hover { text-decoration: underline; }



	/* ### left container ### */
	#leftCntr { padding: 0 40px 0 25px; float: left; width: 65%; }

/* ### content BOx ### */
		.contentBox { width: 100%; overflow: hidden; }
		.contentBox h2 { padding: 0 0 30px; font-size: 30px; color: #039; font-weight: 400; }
		.contentBox h3 { padding: 0 0 11px; font-size: 22px; color: #69c; font-weight: 400; }
		.contentBox p { padding: 0 0 22px; font-size: 17px; color: #333333; line-height: 26px; }
		.contentBox a { text-decoration: underline; color: #333333; font-weight: 700; }
		.contentBox a:hover { text-decoration: none; }


		.contentBox a.btn { height: 33px; color: #333333; line-height: 33px; font-weight: 700; font-size: 18px; text-decoration: none; display: inline-block; padding: 0 12px; border: 1px solid #c59701; -webkit-border-radius: 3px; border-radius: 3px; background: #ffd54b; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffd54b),color-stop(49%,#fdc407),color-stop(51%,#eab401),color-stop(100%,#ffcf32)); background: -webkit-linear-gradient(top,#ffd54b 0%,#fdc407 49%,#eab401 51%,#ffcf32 100%); }
		.contentBox a.btn:hover { text-decoration: underline; }


		.contentBox ul.list { padding: 0 0 30px; list-style: none; }
		.contentBox ul.list li { padding: 0 0 0 38px; font-size: 17px; color: #333333; line-height: 26px; background: url(../images/dic.png) 22px 10px no-repeat; }
		.contentBox ul.list2 { padding: 0 0 30px; list-style: none; overflow: hidden; }
		.contentBox ul.list2 li { font-size: 17px; color: #333333; line-height: 26px; }
		.contentBox ul.list2 li span { width: 190px; float: left; color: #69c;font-weight: 400; }
		.contentBox ul.list2 li .detail { overflow: hidden; }

		.contentBox ul.list3 { padding: 0 0 30px; list-style: none; overflow: hidden; }
		.contentBox ul.list3 li { font-size: 17px; color: #333333; line-height: 34px; }
		.contentBox ul.list3 li span { width: 180px; float: left; }
		.contentBox ul.list3 li .detail { overflow: hidden; font-weight: 700; }

		.contentBox .graph { width: 100%; overflow: hidden; }
		.contentBox .graph .left { width: 50%; padding: 0 60px 0 0; float: left; }
		.contentBox .graph .right { width: 50%; float: left; padding: 0 0 0 60px; }
		.contentBox .graph img { width: 100%; }


		.contentBox h2.arabic { padding: 0 0 30px; font-size: 30px; color: #039; font-weight: 400; text-align: right;}
		.contentBox h3.arabic { padding: 0 0 11px; font-size: 20px; color: #69c; font-weight: 700; text-align: right;}
		.contentBox p.arabic { padding: 0 0 22px; font-size: 17px; color: #333333; line-height: 26px; text-align: right;}

		.contentBox ul.listarabic { padding: 0 0 30px; list-style: none; text-align: right }
		.contentBox ul.listarabic  li { padding: 0 20px; font-size: 17px; color: #333333; line-height: 26px; background: url(../images/dic.png) right 10px no-repeat; }

		.contentBox ul.list2arabic { padding: 0 0 30px; list-style: none; overflow: hidden; text-align: right; }
		.contentBox ul.list2arabic li { font-size: 17px; color: #333333; line-height: 26px; }
		.contentBox ul.list2arabic li span { width: 180px; float: right; font-weight: 700; }
		.contentBox ul.list2arabic li .detail { overflow: hidden; }

		.contentBox p.question { color: #039; padding: 0 0 10px;}
		.contentBox p.answer { padding: 0 0 10px 10px;}
		.contentBox p.question:hover { cursor: pointer;}


/* ### network BOx ### */
		.networkBox { width: 100%; overflow: hidden; }
		.networkBox h2 { padding: 0 0 30px; font-size: 30px; color: #039; font-weight: 400; }
		.networkBox h3 { padding: 0 0 11px; font-size: 18px; color: #69c; font-weight: 700; }
		.networkBox p { padding: 0 0 22px; font-size: 17px; color: #333333; line-height: 26px; }
		.networkBox ul { margin-right: -155px; padding: 0 55px; position: relative; }
		.networkBox li { width: 50%; float: left; padding: 80px 155px 0 0; }
		.networkBox img { width: 100%; }

		.networkBox label { padding-right: 10px; box-sizing: border-box; color: #333333; font-size: 17px; line-height: 29px; float: left; width: 26%; }
		.networkBox input[type="text"] { padding: 5px 10px; font-size: 17px; color: #333333; width: 60%; float: left; height: 30px; box-sizing: border-box; border: 1px solid #8e8e8e; border-radius: 4px; -webkit-border-radius: 4px; background: #f8f8f8; }

		.networkBox select { height: 30px; cursor: pointer; padding: 0 5px; box-sizing: border-box; font-size: 17px; color: #333333; line-height: 28px; box-sizing: border-box; border: 1px solid #8e8e8e; border-radius: 4px; -webkit-border-radius: 4px; position: absolute; left: 0px; top: 0px;  background: #f8f8f8 }
		.networkBox span.drop { width: 60%; height: 30px; position: relative; float: left; }



/* ### contact BOx ### */
		.contactBox { width: 100%; overflow: hidden; }
		.contactBox .holder { margin-right: -40px; }
		.contactBox .block { padding: 0 40px 0 25px; width: 33.3%; float: left; }
		.contactBox h2 { padding: 0 0 30px; font-size: 30px; color: #039; font-weight: 400; }
		.contactBox h3 { padding: 0 0 20px; font-size: 18px; color: #69c; font-weight: 700; }
		.contactBox address { padding: 0 0 20px; font-size: 17px; color: #333333; line-height: 25px; font-weight: 400; font-style: normal; }
		.contactBox .detail { padding: 30px 13px; border: 1px solid #e6e6e6; -webkit-border-radius: 10px; border-radius: 10px; background: #fff; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f2f3f3)); background: -webkit-linear-gradient(top,#fff 0%,#f2f3f3 100%); }
		.contactBox p { padding: 0 0 24px; font-size: 17px; color: #333333; line-height: 26px; }
		.contactBox .label { padding: 0 0 9px; display: block; font-size: 17px; color: #333333; line-height: 26px; }
		.contactBox input.field { width: 100%; padding: 3px; border: 1px solid #a9a9a9; background: #fff; }
		.contactBox .image img { width: 100%; }

		.contactBox p.arabic { padding: 0 0 24px; font-size: 17px; color: #333333; line-height: 26px; text-align: right; }

/* ### question BOx ### */
		.questionBox { padding: 0 40px 0 0; width: 100%; overflow: hidden; }
		.questionBox h2 { padding: 0 0 24px; font-size: 30px; color: #039; font-weight: 400; }
		.questionBox h3 { padding: 0 0 12px; font-size: 20px; color: #69c; font-weight: 400; }
		.questionBox ul { padding: 0 0 60px; list-style: none; border-top: 1px solid #efefef; }
		.questionBox li { border-bottom: 1px solid #efefef; }
		.questionBox li a { padding: 7px 0 7px 35px; font-weight: 500; display: inline-block; line-height: 25px; font-size: 17px; color: #333333; text-decoration: none; background: url("../images/bullet.png") left 7px no-repeat; }
		.questionBox .contentdetail { padding: 5px 0 10px 35px; overflow: hidden; display: none; }
		.questionBox p { font-size: 17px; color: #333333; line-height: 26px; }
		.questionBox li a:hover,.questionBox li a.active { color: #2657a6; background: url("../images/bullet.png") left 7px no-repeat; }


		.questionBox h2.arabic { padding: 0 0 24px; font-size: 30px; color: #039; font-weight: 400; text-align: right; }
		.questionBox h3.arabic { padding: 0 0 12px; font-size: 20px; color: #69c; font-weight: 400; text-align: right; }
		.questionBox li.arabic { border-bottom: 1px solid #efefef;text-align: right; }
		.questionBox li.arabic a { padding: 7px 35px 7px; font-weight: 500; display: inline-block; line-height: 25px; font-size: 17px; color: #333333; text-decoration: none; background: url("../images/bullet.png") right 7px no-repeat; }
		.questionBox li.arabic a:hover,.questionBox li.arabic a.active { color: #2657a6; background: url("../images/bullet.png") right 7px no-repeat; }

	/* ### right container ### */
	#rightCntr { float: right; width: 35%; }

		/* ### image box ### */
		.imageBox { padding: 43px 0 0; margin-bottom: -32px; width: 100%; }
		.imageBox img { width: 100%; }
		.imageBox.image { padding: 43px 0 10px; margin: 0; width: 100%; }

	/* ### footer container ### */
	#footerCntr { overflow: hidden; width: 100%; }

		/* ### footer box ### */
		.footerBox { padding: 30px 0 40px; width: 100%; overflow: hidden; background: #039; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#039),color-stop(100%,#2657a6)); background: -webkit-linear-gradient(top,#039 0%,#2657a6 100%); background: -o-linear-gradient(top,#039 0%,#2657a6 100%); background: -webkit-gradient(linear,left top,left bottom,from(#039),to(#2657a6)); background: -webkit-linear-gradient(top,#039 0%,#2657a6 100%); background: -o-linear-gradient(top,#039 0%,#2657a6 100%); background: -webkit-gradient(linear,left top,left bottom,from(#039),to(#2657a6)); background: -webkit-linear-gradient(top,#039 0%,#2657a6 100%); background: -o-linear-gradient(top,#039 0%,#2657a6 100%); background: -webkit-gradient(linear, left top, left bottom, from(#039), to(#2657a6)); background: -webkit-linear-gradient(top, #039 0%, #2657a6 100%); background: -o-linear-gradient(top, #039 0%, #2657a6 100%); background: linear-gradient(to bottom,#039 0%,#2657a6 100%); }
		.footerBox .holder { margin-right: -20px; }
		.footerBox .block { padding: 0 20px 0 0; width: 33.3%; float: left; }
		.footerBox .title { padding: 0 0 14px; font-size: 24px; color: #f6bd00; }
		.footerBox address { width: 233px; padding: 11px 0 0; font-size: 17px; color: #fff; line-height: 26px; font-style: normal; background: url(/1images/border.png) left top repeat-x; }
		.footerBox .email { padding: 16px 0 22px; width: 100%; display: block; background: url(images/border.png) left bottom repeat-x; }
		.footerBox .email a { font-size: 17px; font-weight: 400; color: #f6bd00; text-decoration: none; }
		.footerBox .email a:hover { text-decoration: underline; }
		.footerBox ul { list-style: none; }
		.footerBox li { padding: 0 0 0 15px; background: url("../images/bullet.png") left 10px no-repeat; }
		.footerBox li a { font-size: 17px; line-height: 26px; text-decoration: none; color: #fff; }
		.footerBox li a:hover { text-decoration: underline; }

		.footerBox .titlear { padding: 0 0 14px; font-size: 24px; color: #f6bd00; text-align: right;}
		.footerBox ul.arabic { list-style: none; text-align: right;}
		.footerBox li.arabic { padding: 0 15px; background: url("../images/bullet.png") right 10px no-repeat; text-align: right;}
		.footerBox li.arabic a { font-size: 17px; line-height: 26px; text-decoration: none; color: #fff;}
		.footerBox li.arabic a:hover { text-decoration: underline;}

		/* ### copyright box ### */
		.copyrightBox { width: 100%; overflow: hidden; background: #fff; }
		.copyrightBox p { font-size: 17px; color: #333333; text-align: center; line-height: 37px; }

/* #Media Queries
================================================== */
		.stepBox { display: block; }
		.mobilestepBox { display: none; }

@media only screen and (max-width: 1282px) {

	.center { padding: 0 10px; }
	.headerBox { height: 228px; }
	.headerBox .banner { padding: 44px 0 0; }
	#headerCntr .menuBox ul { padding: 0; }
	#introCntr .left { padding: 0 30px 0 0px; }
	#leftCntr { width: 60%; padding-right: 20px; padding-left: 0px;}
	#rightCntr { width: 40%; }
	.networkBox ul { padding: 0 30px; margin-right: -50px; }
	.networkBox li { padding-right: 50px; }
	.contactBox .holder { margin-right: -30px; }
	.contactBox .block { padding-right: 30px; padding-left: 0px;}

}

@media only screen and (max-width: 1023px) {

	.space { padding: 0; }
	.headerBox { height: 178px; }
	#headerCntr .menuBox li { padding-right: 7px; }
	#headerCntr .menuBox li a { font-size: 17px; }

.headerBox .logo {background: url(images/spacer.gif)}
.headerBox .logo { padding: 0px 0 0 20px;}


.headerBox .logoar {background: url(images/spacer.gif)}
.headerBox .logoar { padding: 0px 0 0 20px;}

	#introCntr .left { padding-left: 0; }
	#introCntr .left { width: 50%; }
	#introCntr .right { width: 50%; }
	#bottomCntr .left { padding-right: 26px; }
	.loginBox .detail { padding: 23px 15px 6px; }
	.loginBox .tab a { font-size: 20px; }
	.loginBox .label { font-size: 17px; width: 166px; }
	.loginBox input.field { width: -webkit-calc(100% - 166px); width: calc(100% - 166px); }
	.contentBox .graph .left { padding: 0 30px 0 0; }
	.contentBox .graph .right { padding: 0 0 0 30px; }
	.networkBox ul { padding: 0 30px; margin-right: -30px; }
	.networkBox li { padding-top: 40px; padding-right: 30px; }
	.contactBox .block { padding-bottom: 50px; width: 50%; }
	.contactBox h2 { padding-bottom: 20px; }
	.contactBox h3 { padding-bottom: 20px; }
	#headerCntr { height: auto; }
	#stepBox li { width: 50%; }

#stepBox p { position: absolute; left: 24px; top: 0; padding: 6px 63px 0 76px; height: 118px; font-size: 24px; color: #333333; text-decoration: none; border: 1px solid #6395d2; border-bottom: none; -webkit-border-radius: 48px; border-radius: 48px; background: #e4e4e4; }


.stepBox p { position: absolute; left: 24px; top: 0; padding: 10px 33px 0 76px; font-size: 18px; }

.stepBox .arrow {transform:scale(0.75);right: -65px;}
.stepBox .arrow2 {transform:scale(0.75);right: -65px;}

}

@media only screen and (max-width: 767px) {



	#headerCntr .menuBox { display: none; }
	#headerCntr .mobileMenu { display: block; position: absolute; top: 15px; left: 15px; }
	#headerCntr { height: auto; }
	.headerBox { height: auto; }
	.headerBox .logo { padding: 0px 0 0; width: auto; float: none;}

	.headerBox .logoar { padding: 0px 0 0; width: auto; float: none;}

	.headerBox .banner { padding: 24px 0 0; width: auto; float: none; }
	#introCntr .left { height: auto; width: 100%; float: none; }
	#introCntr .right { width: 100%; float: none; }
	#introCntr .right { padding: 15px 0 0; }
	#bottomCntr .left { padding-right: 0; width: 100%; }
	#bottomCntr .right { padding-right: 0; width: 100%; }
	.footerBox .block { padding: 0 0 30px; width: 100%; }
	#leftCntr { width: 100%; padding-right: 0; }
	#rightCntr { width: 100%; }
	.contentBox ul.list2 li span { width: 100%; padding: 7px 0; }
	.contentBox ul.list2 li .detail { width: 100%; float: left; }

	.contactBox .holder { margin-right: 0; }
	.contactBox .block { padding-right: 0; padding-bottom: 50px; width: 100%; }
	.questionBox { padding: 0; }
	.stepBox { display: none; }


	.contentBox ul.list2arabic li span { width: 100%; padding: 7px 0; }
	.contentBox ul.list2arabic li .detail { width: 100%;  }


	.mobilestepBox { display: block; padding: 80px 0 42px; width: 100%; overflow: hidden; background: url(images/shadow2.png) left bottom no-repeat; }
	.mobilestepBox ul { list-style: none; }
	.mobilestepBox li { position: relative; width: 100%; }
	.mobilestepBox .block { position: relative; overflow: hidden; }
	.mobilestepBox .shadow { position: absolute; left: 90px; bottom: -35px; z-index: 3; width: 100%; height: 36px; z-index: 4; background: url(images/mobile_shadow.png) left bottom no-repeat; }
	.mobilestepBox p { position: absolute; left: 5px; top: -46px; padding: 53px 90px 0 89px; display: block; height: 100px; font-size: 24px; color: #fff; text-decoration: none; border: 1px solid #6395d2; border-bottom: none; -webkit-border-radius: 48px; border-radius: 48px; z-index: 1; background: #2657a6; }
	.mobilestepBox .image { border-bottom: 1px solid #fff; position: relative; }
	.mobilestepBox .image img { width: 100%; }
	.mobilestepBox .number { z-index: 2; position: absolute; left: 0; top: -45px; width: 90px; height: 90px; background: #2657a6; -webkit-border-radius: 100%; border-radius: 100%; padding: 9px; }
	.mobilestepBox .number span { display: block; width: 100%; line-height: 73px; text-align: center; font-size: 55px; color: #f6bd00; font-weight: 800; -webkit-border-radius: 100%; border-radius: 100%; background: #fff; }
	.mobilestepBox .arrow { display: block; position: absolute; right: 0; bottom: -75px; z-index: 9; margin: 0; width: 144px; height: 76px; background: url(images/mobile_arrow.png) left top no-repeat; }
	.mobilestepBox .arrow2 { display: block; position: absolute; right: 0; bottom: -75px; z-index: 9; margin: 0; width: 144px; height: 76px; background: url(images/mobile_arrow2.png) left top no-repeat; }

}

@media only screen and (max-width: 479px) {

select.go { width: 100%;}

	.loginBox .tab a { font-size: 18px; }
	.loginBox .label { width: 100%; }
	.loginBox input.field { width: 100%; }
	.loginBox .detail .block { height: auto; }
	#headerCntr .mobileMenu { left: 7px; }
	.topBox ul { width: 270px; }
	.topBox li { margin-left: 5px; }
	.topBox .label { padding-left: 5px; }
	.topBox .select { width: 94px; }
	.topBox .select select { padding: 0 5px; }
	.introBox h2 { font-size: 26px; }
	.introBox h2 span { font-size: 17px; }
	.blockBox .img1 { display: none; }
	.blockBox .img2 { display: block; }
	.contentBox .graph .left { padding: 30px 0 0; width: 100%; }
	.contentBox .graph .right { padding: 30px 0 0; width: 100%; }
	.networkBox ul { margin-right: 0; }
	.networkBox li { width: 100%; padding-top: 40px; padding-right: 0; }
	.mobilestepBox .shadow { left: 70px; }
	#mobilestepBox a { position: absolute; left: 5px; top: -56px; width: 65%; padding: 64px 20px 0 68px; display: block; height: 100px; font-size: 17px; }
	.mobilestepBox .image { border-bottom: 1px solid #fff; position: relative; }
	.mobilestepBox .image img { width: 100%; }
	.mobilestepBox .number { top: -35px; width: 70px; height: 70px; padding: 5px; }
	.mobilestepBox .number span { display: block; width: 100%; line-height: 60px; text-align: center; font-size: 45px; color: #f6bd00; font-weight: 800; -webkit-border-radius: 100%; border-radius: 100%; background: #fff; }
	.mobilestepBox .arrow { display: block; position: absolute; right: 0; bottom: -51px; z-index: 9; margin: 0; width: 100px; height: 53px; background: url(images/mobile_arrow1.png) left top no-repeat; }
	.mobilestepBox .arrow2 { bottom: -51px; width: 100px; height: 53px; background: url(images/mobile_arrow2_2.png) left top no-repeat; }

	.mobilestepBox p { padding: 53px 90px 0 75px; font-size: 18px; }

	.footerBox li a { line-height: 28px;}
	.footerBox li.arabic a { line-height: 28px;}
}