/*

Designed and Coded By: FAJIS
Date: 10/11/2014

*/


body{ margin:0px; font-family: 'pf_beausans_prolight'; font-size:14px; background:#fffff ; color:#4d4d4d; }
a{text-decoration:none; color:#666}
a:hover{text-decoration:none; color:#ef8328}

h1 { font-size:32px; color:#333333; text-align:left;  padding:20px 0px;  margin:60px 0px 30px 0px; font-family: 'pf_beausans_probold'; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position:relative}
h1::after {position: absolute;
content: "";
background-color: #ef8328;
height: 3px;
width: 11%;
bottom: -1px;
left: 2%; }

h2 { font-family: 'pf_beausans_prosemibold'; margin:0px; font-size:16px; color:#333; margin-bottom:15px}
h2 i { color:#ef8328; font-size:18px !important}

h3 { font-size:18px; color:#333333; text-align:left;  padding:20px 0px;  margin:60px 0px 30px 0px; font-family: 'pf_beausans_prosemibold'; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position:relative; text-transform:uppercase}
h3::after {position: absolute;
content: "";
background-color: #ef8328;
height: 3px;
width: 15%;
bottom: -1px;
left: 2%; }

p { color:#888; font-size: 17px;}

/*header area starts here*/

header { color:#666; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
header .top-area { background:#f4f4f4; padding:6px 0px; float:left; width:100%; height:auto; line-height:36px }
header .top-area a { margin-right:30px}

header .social-media {  float:right; letter-spacing:5px; }
header .social-media a { margin-right:0px; color:#999 }
header .social-media a:hover .facebook { color:#3B5998; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
header .social-media a:hover .google { color:#E14107; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
header .social-media a:hover .twitter { color:#00ACED; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
header .social-media a:hover .linkedin { color:#2ba3e1; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
header .social-media a:hover .youtube { color:#eb4723; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}


header .bottom-area { float:left; width:100%; border-bottom:solid 8px #f9f9f9 }


/*header area ends here*/


/*nav starts here*/
.nav-header {  }
.nav-header-border { background:#57ba47; }
.navbar-default{  border:none; padding:0;  }
.navbar-default .navbar-nav>li>a{ font-size:14px; color:#999;padding:35px 20px 30px 20px;  font-family: 'pf_beausans_proregular'; border-left:solid 1px #f9f9f9; text-transform:uppercase }

.no-margin { margin-right:0px !important; border-right:solid 1px #f9f9f9;}

.navbar-nav > li { text-align:center }
.navbar-collapse, .collapse{   padding:0px }
.navbar { position:relative; z-index:999; height:auto; margin-bottom:-10px}
.navbar-default{ background:none; }
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background:#ef8328;  color:#fff ; 
}
.border-bot {  border-bottom:solid 10px #c45a02;  position: relative; 	
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg); left:-2px}
.navbar-default .navbar-nav > li > a:hover{ color:#ef8328; transition:ease-out 0.3s; }
.navbar-default .navbar-brand{color:#fff; }
.navbar-collapse{border:none;}
.navbar-header{ background:#4d4d4d;  }
.navbar-default .navbar-nav{ margin:0px }

@media(max-width:1199px) and (min-width: 991px) {

}

@media(max-width:1199px) {
.logo { margin:0 auto !important}

}

@media(max-width:768px)  {



.navbar-default .navbar-nav>li>a{ font-size:14px; padding:16px 13px; border-bottom:solid 1px #fafafa; text-align:left}
.navbar-default .navbar-nav>li>a i { width:25px}
.navbar-default .navbar-nav { border:solid 1px rgba(146,154,155,0.2)}
header .bottom-area .pull-right { float:none !important}
header .bottom-area br { display:none}

}

/*Content starts here*/
.text-success { color:#ef8328 !important; font-family: 'pf_beausans_prosemibold'; font-size:16px}
.text-success:hover { color:#888 !important}
.content-img img:nth-child(1) { margin-bottom:25px }
.content-img img:nth-child(2) { margin-bottom:10px }
.content-img img { margin-right:15px}

/*footer starts here*/
footer { background:#f6f6f6 url(../images/footer-bg.png) repeat; font-size:14px; color:#666; padding-bottom:30px}

footer address i { line-height:24px !important}
footer address p { margin:0px 0px 0px 25px}

footer li {color:#666; line-height:30px}
footer li:hover {color:#ef8328}
footer .thumb-footer { float:left}
footer address {  color:#666; line-height:26px}
footer .thumb-footer img{ float:left; }
footer .thumb-footer img:hover { opacity:0.7; cursor:pointer; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}

footer .social-media {  float:right; margin-top:50px }
footer .social-media a { margin-right:0px; color:#999 }
footer .social-media .facebook { color:#3B5998; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
footer .social-media .google { color:#E14107; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
footer .social-media .twitter { color:#00ACED; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
footer .social-media .linkedin { color:#2ba3e1; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
footer .social-media .youtube { color:#eb4723; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}
footer .social-media a:hover  { opacity:0.7; transition:cubic-bezier(x1,y1,x2,y2) 0.2s}

.footer-bottom { background:#ef8328; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:16px 0px 8px 0px; }
.footer-bottom p { color:#333}
.footer-bottom p a{ color:#111}
.footer-bottom p a:hover{ color:#fff}

@media(max-width:360px)  { 
footer .social-media {  float:none !important; margin:0px 0px 15px 0px }
}


/* ------ filtrey
-----------------------------------------------*/
.project { background:#454545; margin:50px 0px 0px 0px; height:300px; overflow:hidden}
.project .space { width:12% !important; float:left !important; height:5px; border:none !important}
#filters {
padding:0px;
list-style:none;
background:#333333;
}

#filters li {
float:left;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding:16px 32px;		
text-decoration:none;
color:#e0e0e0;
cursor: pointer;
border-right:#454545 solid 1px ;
text-transform:uppercase;
font-size:14px;
font-family: 'pf_beausans_proregular';
}

#filters li span {
display: block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);

}

#filters li.active {
background: #454545;
color:#fff;
border-bottom:solid 3px #ef8328
}

#filters li:hover {
background: #ef8328;
color:#fff;
border-bottom:solid 3px #454545
}



#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
margin-bottom:50px
}

.portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}

.portfolio img {
max-width:100%;
position: relative;
}

.portfolio .label {
position: absolute ;
width: 100%;
height:40px;
bottom:-40px;
}

.portfolio .label-bg {
background: #ef8328;
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}

.portfolio .label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .label-text a { color:#fff}
.portfolio .label-text a:hover { color:#f0f0f0}

.portfolio .text-category {
display:block;
font-size:9px;
color:#e0e0e0
}






/* #Tablet (Portrait) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.project  { height:260px}
}

@media only screen and (max-width: 992px) {
.project  { height:450px}
}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

#filters li {

padding:14px 16px;		
font-size:13px;

}
.project .space { display:none}
.project { height:530px}
#portfoliolist .portfolio {
width:48%;
margin:1%;
margin-bottom:120px
}		

#ads {
display:none;
}

}

@media only screen and (max-width: 540px) {
.project { height:460px}	
#portfoliolist .portfolio {
margin-bottom:0px
}
}
/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

#ads {
display:none;
}

}

/*<!--project page -->*/
.inner {}
.inner .project { background:#fff; margin:50px 0px 50px 0px; height:auto; overflow:hidden; padding-bottom:1%}
.inner .project .space { width:12% !important; float:left !important; height:5px; border:none !important}
.inner #filters {
padding:0px;
list-style:none;
background:#f0f0f0;
}

.inner #filters li {
float:left;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding:16px 32px;		
text-decoration:none;
color:#4d4d4d;
cursor: pointer;
border-right:#fff solid 2px ;
text-transform:uppercase;
font-size:14px;
font-family: 'pf_beausans_proregular';
}

.inner #filters li span {
display: block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);

}

.inner #filters li.active {
background: #ef8328;
color:#fff;
border-bottom:solid 1px #ef8328
}

.inner #filters li:hover {
background: #454545;
color:#fff;
border-bottom:solid 1px #ef8328
}



.inner #portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;

}

.inner .portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}

.inner .portfolio img {
max-width:100%;
position: relative;
}

.inner .portfolio .label {
position: absolute ;
width: 100%;
height:40px;
bottom:-40px;
}

.inner .portfolio .label-bg {
background: #ef8328;
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}

.inner .portfolio .label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.inner .portfolio .label-text a { color:#fff}
.inner .portfolio .label-text a:hover { color:#f0f0f0}

.inner .portfolio .text-category {
display:block;
font-size:9px;
color:#e0e0e0
}

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

.project .space { display:none}	
}
@media only screen and (max-width: 992px) {
#filters li, .inner #filters li { width:100%; -webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);}
#filters li span, .inner #filters li span { webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);}	
}


/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.inner .container {
		width: 768px; 
	}
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.inner .container { 
		width: 95%; 
	}
	
.inner #portfoliolist .portfolio {
		width:48%;
		margin:1%;
	}		

.inner #ads, .inner .project .space  {
		display:none;
	}
	
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.inner .container {
		width: 70%;
	}
	
.inner #ads , .inner .project .space {
		display:none;
	}
	
}


/*<!--inner banner-->*/
.banner { background:url(../images/footer-bg.png) repeat #f2f2f2; padding-bottom:40px; border-bottom:solid 1px #e9e9e9}
.banner h1 { margin-bottom:15px}
.banner h1:after { left:45%}
.breadcrumb {background:#fff; margin:0px}
.breadcrumb-bg {box-shadow:0 2px 2px #e6e6e6; background:#fff}


/*<!--profile-->*/
.about { margin:60px 0px}
.about .top-img { border-top-left-radius: 75px 75px;}
.about img {  margin:0 0 30px 0;}
.about img:hover { opacity:0.7; transition:ease-in-out 1s; cursor:pointer}

/*<!--services-->*/
.services img{ margin:0px auto}
.services h3 { margin:0px 0px 20px 0px; padding:15px 0px}
.client p { padding:8px; margin:0px -6px 0px ; background:#4d4d4d; color:#fff}
.client .thumbnail { overflow:hidden; padding-bottom:0px}
.services address p { margin:-20px 0px 10px 30px; display:block}


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

}




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

}




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

}




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

}




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

}




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

}




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

}




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

}




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

}




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

}




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

}
.spl-txt{text-align:center; font-size:36px; padding:60px 0; color:#FFFFFF}