html,body{width:100%;min-height:100%;margin:0;direction:rtl;font-family: 'Assistant', sans-serif;}
a img{border:0}


@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?aqom1t');
    src:    url('fonts/icomoon.eot?aqom1t#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?aqom1t') format('truetype'),
        url('fonts/icomoon.woff?aqom1t') format('woff'),
        url('fonts/icomoon.svg?aqom1t#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-fax:before {
    content: "\e906";
}
.icon-email:before {
    content: "\e905";
}
.icon-fb:before {
    content: "\e902";
}
.icon-phone:before {
    content: "\e904";
}
.icon-info:before {
    content: "\e901";
}
.icon-globe:before {
    content: "\e903";
}
.icon-camera:before {
    content: "\e900";
}




#bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:#000;
	z-index:1;
	
}
#fader{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:2;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.15+0,0+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}

#bg div{
	float:left;
	width:16%;
	height:100%;
}

#bg .blue{
	background:#3366FF;
	width:20% !important;
}

#bg .red{
	background:#FE0000;
}
#bg .purple{
	background:#CC99FE;
}
#bg .green{
	background:#00FF01;
}
#bg .turkiz{
	background:#00FFFF;
}
#bg .yellow{
	background:#FFFF00;
}

#wrap{
	position:relative;
	z-index:3;
	color:#fff;
	width:100%;
}

#header{
	height:850px;
	background:#000;
	box-shadow:-1px 2px 3px #000;
	text-align:center;
	position:relative;
}

.stripe{margin-top:90px;}

.content{
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 8px rgba(0,0,0,0.7);
	border:1px rgba(0,0,0,0.0) solid;
	box-sizing:border-box;

	
}
#header .slogen{
	width:100%;
	position:absolute;
	bottom:70px;
	left:0;
	font-size:78px;
	font-family: 'Suez One', serif;
	padding:0 66px;
	box-sizing:border-box;
	white-space: nowrap;
}

#header .slogen img{
	margin-bottom:70px;
}



#header .fader{
	width:100%;
	height:100%;
	position:absolute;
	top:0;left:0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+59,1+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}



.title{
	font-size:64px;
	font-family: 'Suez One', serif;
	font-weight:normal;
	padding-bottom:40px;
	color:#000;
}
	
.text{
	font-size:24px;
	line-height:33px;
	font-family: 'Assistant', sans-serif;
	color:#444;
	text-align:justify;
	font-weight:200;
}

#about{

	color:#000;
}

#projects{
	color:#444;
	
}

#projects .name{
	font-family: 'Suez One', serif;
	font-size:26px;
}

#projects .img{
	text-align:center
}

#projects .prj{
	height:340px;
}

#projects .icons{
	padding-top:15px;
}
#projects .icons span{
	font-size:20px;
	margin-left:10px;
}

#projects .icons .icon-info{
	color:#3366FF;
}


#projects .icons .icon-globe{
	color:#F90000;
}

#projects .icons .icon-camera{
	color:#C493F5;
}

#contact .input, #contact textarea{
	width:100%;
	display:block;
	margin:25px 0;
	height:40px;
	border-radius:5px;
	box-sizing:border-box;
	padding-right:10px;
	font-family: 'Assistant', sans-serif;
	border: 1px solid #c7c7c7;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    outline: none;
    color:#000;
   font-size:24px;
   transition:border 0.5s;
}

#contact .input:focus, #contact textarea:focus{
	border: 1px solid #3366FF;
}

.button {
	color: #fff !important;
	text-decoration: none !important;
	font-family: 'Assistant', sans-serif;
	border-radius: 5px;
	box-shadow: 0 1px 0px rgba(255,255,255,0.3) inset, 0 0px 1px rgba(0,0,0,0.7);
	font-size:21px;
	background: #191919;
	border: 1px solid #141414;
	padding: 10px 25px;
}
.button:active, .button:focus, .button:hover {
	box-shadow: 0 0 0 transparent inset;
	text-decoration: none;
}


#clients img{
	margin:35px;
	width:90px;
}


@keyframes glow {
    0% {
		-webkit-filter: saturate(0%);
		filter: saturate(0%);
    }
    50% {
		-webkit-filter: saturate(250%);
		filter: saturate(250%);
    }

    100% {
		-webkit-filter: saturate(0%);
		filter: saturate(0%);
    }
}

.prj b{font-weight:400;}