@charset "utf-8";
/*
/*	Copyright 2012. ThemeMarket.
/*

/**************************************************/
/*	LIST OF SECTION :
		
		1) HEADER
		2) NAV
		3) TITLE
		4) ABOUT
		5) SERVICE
		6) WORKS
		7) TEAM
		8) CONTACT
		9) FOOTER
/**************************************************/
.body-wrapper, #header, #about, #services, #works, #team, #contact, #footer {
	width:100%;
	margin:0;
	padding:0;
	float:left;
	z-index:9999;
	position:relative;
}
.body-wrapper{
	background:#23272a;
}
#about, #works, #contact, #services, #team{
	background:#FFF url(../img/pattern2.png) repeat;
}
#footer{
	background:#000f17 url(../img/pattern.png) repeat;
}
#loading-mask {
    background-color: #000;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999999;
	text-align:center;
	opacity:0.9;
}
#loading-mask p{
	color:#FFF;
	margin:400px 0 0 0;
	background:#000;
	text-align:center;
	font-size:20px;
}
/*------------------------------------------------------------------*/ 
/*	0) BG
/*------------------------------------------------------------------*/
.bg-mask h2{
	margin:160px 0;
	color:#FFF;	
	
}
.bg-mask h2 span{
	background:url(../img/blackpixel.png) repeat;
	padding:10px 40px;
	border-radius:5px;
}
.bg-mask{
	width:100%;
	height:100%;
	background:url(../img/pattern3.png) repeat;
	float:left;
	position:absolute;
	text-align:center;
}
#parallax1{
	width:100%;
	height:400px;
	float:left;
	clear:both;
	background:#CCC;
	z-index: 9999;
	position:relative;
}
#parallax1 .bg1 {
	background: url(../img/parallax/1.jpg) 50% 0 repeat fixed;
	height: 400px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 9999;
	
}
#parallax2{
	width:100%;
	height:400px;
	float:left;
	clear:both;
	background:#CCC;
	z-index: 9999;
	position:relative;
}
#parallax2 .bg2 {
	background: url(../img/parallax/2.jpg) 50% 0 repeat fixed;
	height: 400px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 9999;
	
}
#parallax3{
	width:100%;
	height:400px;
	float:left;
	clear:both;
	background:#CCC;
	z-index: 9999;
	position:relative;
}
#parallax3 .bg3 {
	background: url(../img/parallax/3.jpg) 50% 0 repeat fixed;
	height: 400px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 9999;
	
}
#parallax4{
	width:100%;
	height:400px;
	float:left;
	clear:both;
	background:#CCC;
	z-index: 9999;
	position:relative;
}
#parallax4 .bg4 {
	background: url(../img/parallax/4.jpg) 50% 0 no-repeat fixed;
	height: 400px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 9999;
	
}

/*------------------------------------------------------------------*/ 
/*	1) Header
/*------------------------------------------------------------------*/
.headermask{
	width:100%;
	height:100%;
	float:left;
	z-index:11;
	background:url(../img/pattern3.png) repeat;
	position:fixed;
}
.header-title{
	text-align:center;
	z-index:10;
}
.header-title span{
	font-size:39px;
	background:url(../img/blackpixel.png) repeat;
	color:#000;
	padding:10px 40px;
	line-height:111px;
	border-radius:5px;
}
.header-title span.big{
	font-size:100px;
}
.header-title a.enter{
	background:#000f17;
	margin:30px auto;
	width:auto;
	display:block;
	width:180px;
	text-decoration:none;
	color:#FFF;
	padding:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	border-radius:5px;
}
.logo {
	text-align:center;
	position: relative;
	top: 15%;
	background: rgba(217, 207, 195, 0.6);
	height: 230px;
}


#sa{
	clear:both;
}
.slider{
	width:100%;
	float:left;
	position:absolute;
}

/*------------------------------------------------------------------*/ 
/*	2) Nav
/*------------------------------------------------------------------*/
#nav{
	width:100%;
	background:#000f17;
	height:45px;
	float:left;
	clear:both;
	z-index:10000;
	position:relative;
	border:none;
}
#nav ul.menu{
	list-style-type:none;
	text-align:center;
	margin:13px 0 0 10px;
	padding:0;
	float:left;
	
}
#nav ul.menu li{
	display:inline-block;
	margin:0 20px 0 0;
	font-size:14px;
	line-height:1;
	font-family:Arial, Helvetica, sans-serif;
}
#nav ul.menu li a{
	text-decoration:none;
	color:#FFFFFF;
	-webkit-transition:color 0.7s ease-in;  
	-moz-transition:color 0.7s ease-in;  
	-o-transition:color 0.7s ease-in;  
	transition:color 0.7s ease-in; 
	
}
#nav ul.menu li.current a{
	color:#374852;
}
#nav ul.menu li a:hover{
	color:#374852;
}
.sticky-wrapper{
	float:left;
	width:100%;	
}
ul.social{
	list-style-type:none;
	text-align:center;
	margin:0;
	padding:0;
	float:right;
	border:none;
	position:relative;
}
ul.social li{
	width:45px;
	height:45px;
	float:left;
	margin:0;
	padding:0;
}
a.head-icons{
	width:45px;
	height:45px;
	display:block;
}
a.head-facebook { background:url(../img/minicons/facebook.png) no-repeat center; }
a.head-twitter { background:url(../img/minicons/twitter.png) no-repeat center; }
a.head-skype { background:url(../img/minicons/skype.png) no-repeat center; }
a.head-linkedin { background:url(../img/minicons/linkedin.png) no-repeat center; }
a.head-vimeo { background:url(../img/minicons/vimeo.png) no-repeat center; }

/*------------------------------------------------------------------*/ 
/*	3) Title
/*------------------------------------------------------------------*/
.title-white{
	padding:14px 0 2px 0;
	border-bottom:1px solid #374852;
	float:left;
	margin-bottom:30px;
	text-align:left;
}
.title-white h1{
	color:#374852;
	margin:0;
	padding:0;
	font-family:'League', Arial, sans-serif;
}
.title-black{
	padding:14px 0 2px 0;
	border-bottom:1px solid #374852;
	float:left;
	margin-bottom:30px;
	text-align:center;
}
.title-black h1{
	color:#374852;
	margin:0;
	padding:0;
	font-weight:bold;
	font-family:'League', Arial, sans-serif;
}

/*------------------------------------------------------------------*/ 
/*	4) About
/*------------------------------------------------------------------*/
ul.skills{
	list-style-type:none;
	margin:0;
	padding:0;
}
ul.skills li{
	width:100%;
	background:#F1F1F1;
	padding:0;
	margin:0 0 3px ;
}
ul.skills li div{
	padding:5px 0;
	background:#374852;
}
ul.skills li div p{
	margin:10px 0 10px 20px;
	color:#FFF;
}
.worker{
	text-align:center;
	border-bottom:1px solid #FFF;
	padding-bottom:20px;
}
.worker:hover{
	border-bottom:1px solid #374852;
	background:#F1F1F1;
}
.worker img{
	max-width:100%;
}
.worker-content{
	margin:15px 10px 0 10px;
}
p.job-title{
	margin:-20px 0 15px 0;
	padding:0;
	font-style:italic;
	color:#999
}
ul.worker-social{
	list-style-type:none;
	margin:0;
	padding:10px 0 0 0;
}
ul.worker-social li{
	display:inline-block;
	margin:0 2px;
}
ul.worker-social a{
	width:20px;
	height:20px;
	padding:6px 6px 4px 6px;
	display:block;
	background:#374852;
	border-radius:5px;
	float:left;
	margin:0;
}

/*------------------------------------------------------------------*/ 
/*	5) Service
/*------------------------------------------------------------------*/
.icon-wrapper{
	width:100%;
	background:#374852;
	text-align:center;
	margin-bottom:20px;
	height: 160px;
}
/*------------------------------------------------------------------*/ 
/*	6) WORKS
/*------------------------------------------------------------------*/
.work-item{
	margin-bottom:15px;
	height:auto;
}
.view-item{
	width:280px;
	height:180px;
	border:10px solid #f1f1f1;
	box-shadow:0 0 2px #666666;
	margin-bottom:20px;
}
.view-item img{
	width:100%;
	height:100%;
}
.mask{
	width:100%;
	height:100%;
}
.work-item h3{
	text-align:center;
	margin-bottom:7px;
}
.work-item p{
	text-align:center;
	margin-top:0;
}
.view-item {
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background:#374852;
   
}
.view-item .mask,.view-item .content {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view-item img {
   display: block;
   position: relative;
}
/*------------------------------------------------------------------*/ 
/*	7) TEAM
/*------------------------------------------------------------------*/


/*------------------------------------------------------------------*/ 
/*	8) Contact
/*------------------------------------------------------------------*/
.map{
	width:920px;
	height:400px;
	border:10px solid #f1f1f1;
	float:left;
	clear:both;
	margin:0 0 25px 10px;
}

span.company-text{
	background:url(../img/company.png) no-repeat left top;
	padding:0 0 0 30px;
	clear:both;
	display:block;
}

span.address-text{
	background:url(../img/home.png) no-repeat left top;
	padding:0 0 0 30px;
	clear:both;
	display:block;
}
span.email-text{
	background:url(../img/message.png) no-repeat left top;
	padding:0 0 0 30px;
	clear:both;
	background-position:0 3px;
	display:block;
}
span.phone-text{
	background:url(../img/phone.png) no-repeat left top;
	padding:0 0 0 30px;
	clear:both;
	display:block;
}
.form{
	margin:0 0 15px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333333;
}
.input-section{
	float:left;
	clear:both;
	width:100%;
	margin:0 0 20px 0;
	padding:0;
}
.input-section input{
	float:left;
	width:438px;
	height:18px;
	border:1px solid #f1f1f1;
	background:#FFFFFF;
	padding:10px 10px;
	box-shadow:0 1px 1px #999999;
	-moz-box-shadow:0 1px 1px #999999;
	-webkit-box-shadow:0 1px 1px #999999;
}
.input-section textarea{
	float:left;
	width:438px;
	height:100px;
	border:1px solid #f1f1f1;
	background:#FFFFFF;
	padding:10px;
	resize:vertical;
	box-shadow:0 1px 1px #999999;
	-moz-box-shadow:0 1px 1px #999999;
	-webkit-box-shadow:0 1px 1px #999999;
	font-family:inherit;
	font-size:14px;
}
.input-section label{
	margin:0 0 3px 0;
	float:left;
	width:100%;
}
.input-section a.send{
	width:440px;
	height:20px;
	text-align:center;
	background:#374852;
	display:block;
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 10px 8px 10px;
	box-shadow:0 1px 1px #19242a;
	-moz-box-shadow:0 1px 1px #19242a;
	-webkit-box-shadow:0 1px 1px #19242a;
	border-bottom:1px solid #19242a;
}
.alertMessage ul li{
	margin:0 0 15px 0;
	color:#a13600;
	font-size:12px;
}
.alertMessage ul{
	margin:0 0 0 15px;
	padding:0;
}
/*------------------------------------------------------------------*/ 
/*	9) Footer
/*------------------------------------------------------------------*/
#footer{
	text-align:center;
	padding:20px 0;
}
#footer p{
	color:#4b4e51;
	font-family:'Exoregular', Arial, sans-serif;
	font-size:14px;
	margin:5px 0 0 0;
}
#footer p a{  
	color:#4b4e51; 
	text-decoration:none;
	-webkit-transition:color 1s ease-in;  
	-moz-transition:color 1s ease-in;  
	-o-transition:color 1s ease-in;  
	transition:color 1s ease-in;  
}  
#footer p a:hover{color:#FFF;}
#footer ul{
	list-style-type:none;
	text-align:center;
	margin:10px 0;
	padding:0;
}
#footer ul li{
	width:35px;
	height:35px;
	display:inline-table;
}
a.foot-icons{
	width:30px;
	height:30px;
	display:block;
}
a.foot-facebook { background:url(../img/minicons/facebook.png) no-repeat center; }
a.foot-twitter { background:url(../img/minicons/twitter.png) no-repeat center; }
a.foot-skype { background:url(../img/minicons/skype.png) no-repeat center; }
a.foot-linkedin { background:url(../img/minicons/linkedin.png) no-repeat center; }
a.foot-vimeo { background:url(../img/minicons/vimeo.png) no-repeat center; }