@import url("//hello.myfonts.net/count/288b14");



@font-face
{
  font-family: "Greta_Arabic";
  src: url('fonts/Greta_Arabic_Regular.eot');
  src: url('fonts/Greta_Arabic_Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Greta_Arabic_Regular.woff') format('woff'), url('fonts/Greta_Arabic_Regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face
{
  font-family: "Greta_Arabic";
  src: url('fonts/Greta_Arabic_Light.eot');
  src: url('fonts/Greta_Arabic_Light.eot?#iefix') format('embedded-opentype'), url('fonts/Greta_Arabic_Light.woff') format('woff'), url('fonts/Greta_Arabic_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}

@font-face
{
  font-family: "Greta_Arabic";
  src: url('fonts/Greta_Arabic_Medium.eot');
  src: url('fonts/Greta_Arabic_Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Greta_Arabic_Medium.woff') format('woff'), url('fonts/Greta_Arabic_Medium.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face
{
  font-family: "Greta_Arabic";
  src: url('fonts/Greta_Arabic_Bold.eot');
  src: url('fonts/Greta_Arabic_Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Greta_Arabic_Bold.woff') format('woff'), url('fonts/Greta_Arabic_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}


html, body{
	margin: 0;
	padding: 0;
}
body{
	background:#000;
	overflow-y:hidden;
	direction:rtl !important;
}
.tf_bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
}
.tf_bg img{
	position:absolute;
	top:0px; /*-482px;	 -(imgh/2 - wh/2) */
	left:0px;	/* calculate a negative value to center horizontally */
	width:100%;	/* windowwidth plus negative value of left */
	/*height:1650px; /* windowheight plus negative value of top */
	z-index: 1;
	display:none;
}
.tf_pattern{
	position:absolute;
	width:100%;
	height:100%;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}
.tf_content{
	position:absolute;
	bottom:50px;
	right:0px;
	z-index:10;
	display:none;
}
.tf_content h2{
	color: #FFF;
	font-size: 40px;
	padding: 0;
	margin: 0;
	font-family: 'Greta_Arabic', arial, serif;

	font-weight: 300;
	text-transform: uppercase;
	
}
.tf_content p{
	color:#000;
	padding:0;
	margin:0;
	background:transparent url(../images/bg_content.png) repeat top left;
	padding:10px;
	width:620px;
	font-family: 'Greta_Arabic', arial, serif;
	font-size:21px;
	line-height:20px;
	text-transform:none;
	/*text-shadow:2px 2px 1px #FFF;
	-moz-box-shadow:1px 1px 18px #CCCCCC;
	-webkit-box-shadow:1px 1px 18px #CCCCCC;
	box-shadow:1px 1px 18px #CCCCCC;
	border:4px solid #00000;*/
	opacity:0.9;
}


.tf_content p a:link {
	text-decoration: none;
	color: #00A7E3;
    font-size: 15px;
}
.tf_content p a:visited {
	text-decoration: none;
	color: #00A7E3;
}
.tf_content p a:hover {
	text-decoration: none;
	color: #00A7E3;
}
.tf_content p a:active {
	text-decoration: none;
	color: #00A7E3;
}

.article { width:35%;}

.article p{
	color:#000;
	padding:0;
	margin:0;
	background:transparent url(../images/bg_content.png) repeat top left;
	padding:10px;
	width: 100%;
	font-family: 'Greta_Arabic', arial, serif;
	font-size:20px;
	line-height:22px;
	text-transform:none;
/*	text-shadow:2px 2px 1px #FFF;
	-moz-box-shadow:1px 1px 18px #CCCCCC;
	-webkit-box-shadow:1px 1px 18px #CCCCCC;
	box-shadow:1px 1px 18px #CCCCCC;
	border:4px solid #00000;*/
	opacity:0.9;
}
.article h1{
	color:#FFF;
	font-size:40px;
	padding:0;
	margin:0;
	font-family: 'Greta_Arabic', arial, serif;
	font-weight:500;
	text-shadow:1px 1px 2px #000;
}
.article h2{
    line-height: 1;
	color:#FFF;
	font-size: 26px;
	padding: 10px;
	margin: 0;
	font-family: 'Greta_Arabic', arial, serif;
	font-weight: 900;
/*	text-shadow: 1px 1px 3px #000;*/
	width: 100%;
	text-transform: uppercase;

	background:transparent url(../images/bg_content02.png) repeat top left;
}

.tf_thumbs{
	position:absolute;	
	z-index:12;
	right:50px;
	bottom:6%;
	margin-top:-79px;
	border:4px solid #00000;
	-moz-box-shadow:1px 1px 5px #202020;
	-webkit-box-shadow:1px 1px 5px #202020;
	box-shadow:1px 1px 5px #202020;	
	-webkit-box-reflect:
		below 5px
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.6, transparent),
			to(rgb(18, 18, 18))
		);
}
.tf_thumbs img{
	display: block;

}
.tf_loading{
	position:fixed;
	top:50%;
	left:50%;
	margin:-30px 0px 0px -30px;
	width:60px;
	height:60px;
	background:#fff url(../images/loader.gif) no-repeat center center;
	z-index:999;
	opacity:0.7;
}
.tf_next,
.tf_prev{
	width:100px;
	height:100px;
	position:absolute;
/*	top:79%;
*/	right:45%;
	z-index:100;
	cursor:pointer;
	opacity:0.8;
}
.tf_next{
	background-position: left top;
	/*	margin-top:75px;
*/

	bottom: 2%;
	background-color: transparent;
	background-image: url(../images/fle_ne.png);
	background-repeat: no-repeat;
}
.tf_prev{
	background-position:0px 0px;
/*	margin-top:-55px;*/
	top:0%;
		background:transparent url(../images/fle.png) no-repeat top left;

}
.tf_next:hover,
.tf_prev:hover{
	opacity:1;
}

.tf_zoom,
.tf_fullscreen{
	width:250px;
	height:180px;
	position:absolute;
	top:6px;
	right:6px;
	cursor:pointer;
	z-index:100;
	opacity:0;
/*	background:transparent url(../images/icons.png) no-repeat top left;*/
}
.tf_zoom{
	background-position:0px -20px;
}
.tf_fullscreen{
	background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
	opacity:0.9;
}
.reference{
	position:fixed;
	bottom:0px;
	right:0px;
	background:#000;
	height:23px;
	text-align:right;
	width:100%;
	text-shadow:1px 1px 1px #000;
	z-index:999;
	opacity:0.8;
}
.description{
	position:fixed;
	top:5px;
	left:5px;
	/*text-shadow:1px 1px 1px #000;*/
	z-index:999;
	text-align:right;
}
.reference a, .description span{
	color: rgba(255,255,255,1);
	text-transform: uppercase;
	margin-left: 20px;
	text-decoration: none;
	font-family: Arial;
	font-size: 15px;
	vertical-align: middle;
	display: block;
	line-height: 21px;
	background-color: rgba(0,0,0,0.6);
	padding: 5px;
}
.logo{
	left: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
	bottom: 10px;
	overflow: visible;
	position:fixed;
	z-index:999;

}
a.last{
	float:left;
	line-height:23px;
}
.reference a:hover{
	text-shadow:0px 0px 1px #fff;
}
.titre {
	background-color:#000;
  color: #FFFFFF;
    font-family: 'Greta_Arabic',arial,serif;
	font-weight:700;
    font-size: 38px;
    right: 5px;
    line-height: 1.2;
    margin-top: 10px;
	margin-right: -4px;
    /*opacity: 0.8;*/
    padding: 10px 20px;
    position: inherit;
    text-align: right;
  /*  text-shadow: 2px 2px 6px #000000;*/
    text-transform: uppercase;
    top: 5px;
    width: auto;
	}

.titre span{
	background-color:#000;
  color: #FFFFFF;
    font-family: 'Greta_Arabic',arial,serif;
	font-weight:300;
    font-size: 38px;
    right: 5px;
    line-height: 1.2;
    margin-top: 10px;
	margin-right: -4px;
    /*opacity: 0.8;*/
    padding: 10px 20px;
    position: inherit;
    text-align: right;
  /*  text-shadow: 2px 2px 6px #000000;*/
    text-transform: uppercase;
    top: 5px;
    width: auto;
	}



 
 
 @media (max-width: 1200px) {
	 .titre {font-size: 30px;}
	 .titre span{font-size: 30px}
}
 
 
 @media (max-width: 1024px) {
	 .titre {font-size: 25px;}
	 .titre span{font-size: 25px}
	.article p{font-size: 14px;
    line-height: 20px;}
	.article h2{font-size: 22px;} 
	.article { width:30%;}
	
}