/*------------------------------------------------------------------
	Project:	PayamSalami.ir
	Version:	3
	coder :		Payam Salami
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
	Header
-------------------------------------------------------------------*/
#header-wrapper{
	height: 800px;
	background: #500083 url(../img/header-bg.jpg) no-repeat center top;
	background-attachment: fixed;
	-webkit-background-size: cover;
	background-size: cover;
	border: 5px solid #500083;
	border-right: none;
	border-left: none;
	position: relative;
}
#header-title{
	display: block;
	max-width: 90%;
	position: absolute;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 40%;
}
#header-arrow-down{
	display: block;
	position: absolute;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    bottom: 1%;
    text-align: center;
	font-size: 3em;
	color: #500083;
	text-shadow: 1px 1px 0 rgba(255,255,255,.2);
}
/*
 * Nav
 */
#header-nav{
	width: 90%;
	left: 0;
	position: absolute;
	margin-top: 40px;	
	background: rgba(255,255,255,.6);
	z-index: 2;
	-webkit-border-top-right-radius: 10px;
	   -moz-border-radius-topright: 10px;
			border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	   -moz-border-radius-bottomright: 10px;
			border-bottom-right-radius: 10px;
	-webkit-box-shadow: inset 0 1px rgba(255,255,255,.8), 0 3px 0 rgba(0,0,0,.2);
	   -moz-box-shadow: inset 0 1px rgba(255,255,255,.8), 0 3px 0 rgba(0,0,0,.2);
			box-shadow: inset 0 1px rgba(255,255,255,.8), 0 3px 0 rgba(0,0,0,.2);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
			transition: all .5s ease;
}
.navbar{
	margin: 0;
}
#header-nav.fixed{
	position: fixed;
	z-index: 99;
	top: 0;
	width: 100%;
	margin: 0;
	min-height: 50px;
	background: rgba(255,255,255,.8);
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
			border-radius: 0;
}
#header-nav.fixed #header-nav-links li{
	margin-top: 11px;
}
#header-nav.fixed #header-nav-social-icons{
	margin-top: 12px;
}
#header-nav-links{
		
}
#header-nav-links li{
	margin: 20px 10px;
}
#header-nav.fixed #header-nav-links li{
	margin: 10px;
}
#header-nav-links a .fa{
	margin-left: 3px;
	position: relative;
	top: 1px;
}
.navbar-default{
	border: none;
	background: transparent;
}
.navbar{
	border: none;
}
.navbar-default .navbar-nav>li>a{
	font-size: 1.2em;
	color: #500083;
	text-shadow: 1px 1px 0 rgba(255,255,255,.3);
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
			border-radius: 10px;
}
.navbar-default .navbar-nav>li>a:focus{
	color: #500083;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover{
	color: #FFF;
	background: #c41e64;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,.3);
	   -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.3);
			box-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
.nav>li>a{
	padding: 5px 10px;
}
.navbar-default .navbar-toggle{
	border-color: #d92773;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #d92773;
}
.navbar-default .navbar-toggle:focus{
	background-color: transparent;
}
.navbar-default .navbar-toggle:hover{
	background-color: #fedfec;	
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	
}
.navbar-collapse.in,.navbar-collapse.navbar-collapsing{
	overflow-y: hidden;
	position: relative;
	z-index: 99;
	padding-bottom: 20px;
}
/*
 * header social icons
 */
#header-nav-social-icons{
	margin: 22px 0 0 100px;
}
#header-nav-social-icons li{
	margin: 0 2px;
}
#header-nav-social-icons a{
	font-size: 1.5em;
	color: rgba(80,0,131,.4);
}
#header-nav-social-icons:hover a{
	opacity: .3;
}

#header-nav-social-icons a:hover{
	opacity: 1;
	color: rgba(80,0,131,.6);	
}
/*
 * media queries
 */
@media screen and (max-width:1400px){
	#header-nav{
		width: 95%;
	}
}
@media screen and (max-width:1200px){
	#header-nav-social-icons{
		display: none;
	}
	.navbar{
		float: none !important;
	}
}
@media screen and (max-width:600px){
	#header-wrapper{
		height: 500px;
	}
}
@media screen and (min-width:601px) and (max-width:1400px){
	#header-wrapper{
		height: 600px;
	}
}
@media screen and (min-width: 750px) and (max-width: 1050px){
	#header-nav-links li{
		margin-right: 5px;
		margin-left: 5px;
	}
	.navbar-default .navbar-nav>li>a{
		font-size: 1em;
	}
	.nav>li>a{
		padding: 5px;
	}
}

/*------------------------------------------------------------------
	Services
-------------------------------------------------------------------*/
#services-wrapper{
	background: #f7f7f7;
}
.service-box{
	padding: 10px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
			transition: all .5s ease;
}

.service-box{
	text-align: justify;
	font-size: .9em;
	font-family: tahoma;
	color: #969696;
	line-height: 170%;
}
.service-box .service-box-icon{
	float: right;
	margin: 0 0 0 15px;
}
.service-box h1{
	font-family: Yekan;
	font-size: 1.3em;
	color: #6c6c6c;
	margin: 12px 0 10px;
}
.service-box .service-box-text{
	margin-right: 65px;
}
.service-box .icon{
	-webkit-transition: all  .7s ease;
	   -moz-transition: all  .7s ease;
			transition: all  .7s ease;
}
.service-box:hover .icon{
	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(360deg);
			transform: rotate(360deg);
}

/*------------------------------------------------------------------
	Portfolio
-------------------------------------------------------------------*/
#portfolio-wrapper{
	background: #f0f0f0 url(../img/portfolio-bg.png) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
			transition: all .5s ease;
}
#portfolio-boxs-wrapper{
	
}
/*
 * portfolio categories
 */
#portfolio-categories{
	margin: 20px 0 60px;
	text-align: center;
}
#portfolio-categories li{
	margin: 15px 0;
}
#portfolio-categories li a,
#portfolio-categories li a:visited{
	padding: 5px 10px;
	color: #9c9c9c;
	font-size: 1.1em;
	text-shadow: 1px 1px 0 rgba(255,255,255,.5);
	border: 2px solid #9c9c9c;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
			border-radius: 10px;
	-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,.4);
	   -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.4);
			box-shadow: 1px 1px 0 rgba(255,255,255,.4);
}
#portfolio-categories li a:hover,
#portfolio-categories li a.active{
	color: #c41e64;
	border-color: #c41e64;
}
#portfolio-boxs-wrapper .mix{
	display: none;
}
/*
 * portfolio box
 */
.portfolio-box{
	display: block;
	position: relative;
	margin-bottom: 25px;
	border: 1px solid #d9d9d9;
	overflow: hidden;
	background: #FFF url(../img/image-bg.png) center no-repeat;
	max-height: 230px;
}
.portfolio-box *{
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
			transition: all .5s ease-in-out;
}
.portfolio-box img{
	width: 100%;
	height: 100%;
}
.portfolio-box .mask{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	width: 100%;
	border: 0 solid rgba(0,0,0,.5);
}
.portfolio-box:hover .mask{
	border-width: 150px;
}
.portfolio-box .view-icon{
	opacity: 0;
	position: absolute;	
	z-index: 2;
	width: 100%;
	text-align: center;
	top: 10%;
}
.portfolio-box .view-icon .fa-circle{
	color: #999;
}
.portfolio-box:hover .view-icon{
	opacity: 1;
}
#more-portfolio{
	padding: 15px 70px;
	margin: 50px 0 0;
	display: inline-block;
	text-align: center;
	background: #dadada;
	color: #606060;
	text-shadow: 1px 1px 0 rgba(255,255,255,.5);
	border-color: #ababab;
}
/*
 * media queries
 */
@media screen and (min-width:350px){
	.portfolio-box .view-icon{
		top: 20%;
	}
}
@media screen and (min-width:500px){
	.portfolio-box .view-icon{
		top: 25%;
	}
}
@media screen and (min-width:1024px){
	.portfolio-box{
		height: 230px;
	}
	.portfolio-box .view-icon{
		top: 30%;
	}
}

/*------------------------------------------------------------------
	Skills
-------------------------------------------------------------------*/
#skills-wrapper{
	background: #303158 url(../img/skills-bg.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#skills-content{
	font-family: tahoma;
}
#skills-content .circle{
	margin-right: auto;
	margin-left: auto;
}


/*------------------------------------------------------------------
	Order
-------------------------------------------------------------------*/
#order-wrapper{
	background: #fbfbfb url(../img/order-bg.png);
}
/*
 * form
 */
#order-file-textbox{
	background: #fff;
	cursor: auto;
}
#order-file-select-btn{
	position: absolute;
	top: 7px;
	left: 10px;
}

/*------------------------------------------------------------------
	About
-------------------------------------------------------------------*/
#about-wrapper{
	background: #010c3a url(../img/about-bg.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#about-content{
	min-height: 180px;
	background: rgba(255,255,255,.7);;
	padding: 40px;
}
#about-avatar{
	text-align: center;
}
#about-avatar img{
	width:140px;
	height: 150px;
	border: 1px solid #fff;
	padding: 5px;
	background: #ececec;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
	-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.3);
	   -moz-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.3);
			box-shadow: 1px 1px 2px 0 rgba(0,0,0,.3);	
}
#about-text{
	text-align: justify;
	line-height: 200%;
	color: #111;
	text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}

/*------------------------------------------------------------------
	Contact
-------------------------------------------------------------------*/
#contact-wrapper{
	background: #222 url(../img/contact-bg.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#contact-links{
	color: #8d8d8d;
	text-align: center;
	padding: 30px 0;
	font-family: Tahoma;
	font-size: 1.2em;
}
#contact-email-phone{
	margin-bottom: 50px;	
}
#contact-email-phone li{
	margin: 10px;
}
#contact-email-phone .text,
#contact-email-phone .fa{
	direction: ltr;
	display: block;
	margin: 6px 0 0;
}
#contact-social-links a,
#contact-social-links a:visited{
	color: #535353;
}
#contact-social-links a:hover{
	color: #c41f65;
}
/*------------------------------------------------------------------
	Footer
-------------------------------------------------------------------*/
#footer-wrapper{
	background: #171717;	
	min-height: 50px;
}
#copyright-text{
	color: #707070;
	text-shadow: 1px 1px 0 #111;
	margin: 15px 0 0;
}