/*
	Template Name: Barrier - Responsive portfolio and Business Template
	Author: ThemeRox
	Author URI: http://themeforest.net/user/tripples
	Description: BArrier - Responsive portfolio and Business Template
	Version: 1.0
*/

/* Table of Content
==================================================
1.	Global Styles
2. 	Typography
3.	Common styles
4.	Header area
5.	Slideshow
6.	Intro area
7.	Services
8.	Practice area
9.	Content
10.	Facts
11.	Content bottom
12.	Clients
13. Footer
14.	Copyright
15.	Home 2
16.	Banner area
17.	Testimonials Page
18.	Attorneys
19.	Our Firm
20.	Action
21.	News Listing
22.	Sidebar
23.	Contact page
24.	Features
25.	Style Switcher (you can delete the css)

*/


@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700);
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:400,700,500,600);
@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic);



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

/* Global styles
================================================== */

html{
	overflow-x: hidden !important;
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body{
	border: 0;
	margin: 0;
	padding: 0;
	color: #333333;
	font-size: 14px;
	background: #fff;
	position: relative;
}

a{
	color: #444;

}

a:link,
a:visited{
    text-decoration: none;
}

a:hover{
	text-decoration: none;
	cursor: pointer;
}
a:focus{
	outline: 0;
}

section{
	position: relative;
}

.no-padding{
	padding: 0;
}

.gap-80 {
	clear: both;
	height: 80px;
}

.gap-40 {
	clear: both;
	height: 40px;
}

.gap-30 {
	clear: both;
	height: 30px;
}
.gap-20 {
	clear: both;
	height: 20px;
}

ul{
	list-style-type: none;
}

.m20{
	margin: 20px 0px;
}
.m30{
	margin: 30px 0px;
}
.m40{
	margin: 40px 0px;
}
.ml{
	margin-left: 40px;
}

/* Typography
================================================== */

body, p{
	font-family: 'Droid Serif', serif;
	font-weight: 400; 
	font-size: 14px;
	line-height: 20px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

h1{
    font-size: 36px;
    line-height: 48px;
}

h2{
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}

h3{
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
}

h4{
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
}

h5{
    font-size: 14px;
    line-height: 24px;
}

.btn-main{
	padding: 10px 35px;
	font-weight: 700;
	border-radius: 0px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease ;
	transition: all .3s ease-in-out ;
	margin: 10px 0px;
	text-transform: uppercase;
	background: transparent;
	font-size: 16px;
}
.btn-main:hover{
	color: #fff;
}
.btn-primary{
	border: 1px solid#fff;
	padding: 12px 32px;
	font-weight: 700;
	border-radius: 0px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease ;
	transition: all .3s ease-in-out ;
	margin: 10px 0px;
	text-transform: capitalize;
	background: transparent;
	font-size: 16px;
}
.btn-primary:hover{
	background: #fff;
	color: #555;
	border: 1px solid#fff;
}
.btn-black{
	padding: 12px 32px;
	font-weight: 700;
	border-radius: 0px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease ;
	transition: all .3s ease-in-out ;
	margin: 10px 0px;
	text-transform: capitalize;
	background: #555;
	font-size: 16px;
	color: #fff;
}
.btn-black:hover{
	background: #fff;
	color: #555;
	border: 1px solid#555;
}
.btn-white{
	padding: 12px 32px;
	font-weight: 700;
	border-radius: 0px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease ;
	transition: all .3s ease-in-out ;
	margin: 10px 0px;
	text-transform: capitalize;
	background: transparent;
	font-size: 16px;
	color: #fff;
	border: 1px solid#fff;
}
.btn-white:hover{
	background: #fff;
	color: #444;
}

#home,#profile,#service,#feature,#pricing,#blog,#contact,#work{
	padding-bottom: 70px;
}
#process,#skill-bar{
	padding: 70px 0px;
}

/*header title
=========================*/

.header-desc{
	margin-bottom: 60px;
}
.big-title{
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	text-transform: uppercase;
	border-right: 1px solid#ccc;
	border-left: 1px solid#ccc;
	width: 35%;
	margin:0 auto;
	padding: 40px 0px;
}
.sub-title{
	text-transform: uppercase;
	font-weight: 700;
	padding-top: 10px;
	margin-bottom: 25px;
	position: relative;
}
.sub-title:before{
	position: absolute;
	width: 40px;
	height: 2px;
	background: #444;
	left: 0px;
	top: 0px;
	content:"";
}
.header-content {
	border-bottom: 1px solid#ccc;
	margin-bottom: 30px;
}
.header-content span{
	color: #555;
	display: none;
}


/*GLobal styles
========================================*/

.navbar{
	margin-bottom: 0px;
}

#tf-menu {
	padding: 15px;
	transition: all 0.8s;
}
#tf-menu.navbar-default {
	background-color: rgba(248, 248, 248, 0);
	border-color: rgba(231, 231, 231, 0);
	border-bottom: 1px solid#ccc;
}
#tf-menu a.navbar-brand {
	text-transform: uppercase;
	font-size: 22px;
	color: #fff;
	font-weight: 900;
	border-right: 1px solid#ccc;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#tf-menu.navbar-default .navbar-nav > li > a {
	text-transform: uppercase;
	color: #FFF;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight: 700;
}
.on{
	background-color: #222222 !important;
	padding: 0px !important;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	background-color: transparent;
}
.on.navbar-default .navbar-brand{
	margin-left: -90px;
	padding-left: 90px;
}

/* Header area
================================================== */

/*-- Header solid fixed --*/


/*slider
=========================*/

#slider{
	padding: 0px;
	height: 700px;
	overflow: hidden;
}
.main-slide{
	position: relative;
	height: 100%;
}
.main-slide img{
	width: 100%;
}
.overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(../images/overaly.png);
	content:"";
}

.slider-content{
	top: 40%;
	margin-top: -70px;
	left: 0px;
	padding: 0px;
	text-align: center;
	position: absolute;
	width: 100%;
	color: #FFF;
	z-index: 2;
}
.slider-content h3{
	font-family: 'Lora', serif;
	line-height: 40px;
}
.slider-content h2{
	font-size: 70px;
	line-height: 70px;
	text-transform: uppercase;
}
.slider-content h5{
	font-family: 'Lora', serif;
	position: relative;
	width: 20%;
	margin: 20px auto;
	font-size: 14px;
	font-weight: 700;
}
.slider-content h5:before{
	content:"";
	position: absolute;
	width: 35px;
	height: 1px;
	background: #fff;
	left: 35px;
	top: 12px;
}
.slider-content h5:after{
	content:"";
	position: absolute;
	width: 35px;
	height: 1px;
	background: #fff;
	right: 35px;
	top: 12px;
}

.slider-content a{
	color: #fff;
	font-size: 30px;
	line-height: 50px;
	padding: 7px 15px;
	border: 1px solid#fff;
	border-radius: 50%!important;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	margin-top: 20px;
}
.slider-content a i{
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	margin-top: 20px;
}

.slider-content a:hover {
	cursor: pointer;
}
.slider-small-text-content{
	margin-bottom: 20px;
}
.slider-small-text-content h4{
	display: inline-block;
	font-family: 'Lora', serif;
	font-size: 14px;
}
.slider-small-text-content h4 i{
	margin-right: 5px;
}
/*carousel slider*/
#main-slide .carousel-indicators{
	top: 20%;
	height: 30px;
}
.carousel-indicators li{
	width: 50px;
}
.carousel-control{
	top: 40%;
	z-index: 2;
	opacity: 1;
}
.carousel-control.left,.carousel-control.right{
	background: transparent;
	background-image: none;
	background-repeat: no-repeat;
	text-shadow: none;
	transition: all 0.25s ease 0s;
	
}
.carousel-control.left span,.carousel-control.right span{
	font-size: 40px;
	color: #fff;
	
}
.carousel-control i{
	background: none;
	color: #fff;
	line-height: 56px;
	width: 56px;
	height: 56px;
	border: 1px solid #fff;
	border-radius: 100%;
	font-size: 36px;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.carousel-control.left{
	left: -78px;
	
}
.carousel-control.right{
	right: -76px;
}

/*main slide controls*/

#main-slide .carousel-control.left,
#main-slide .carousel-control.right {
	opacity: 0;
	filter: alpha(opacity=0);
	background-image: none;
	background-repeat: no-repeat;
	text-shadow: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

#main-slide:hover .carousel-control.left,
#main-slide:hover .carousel-control.right{
	opacity: 1;
	filter: alpha(opacity=100);
	
}
#main-slide:hover .carousel-control.left{
	left: -30px;
}
#main-slide:hover .carousel-control.right{
	right: -30px;
}


/*-- Animation */

.carousel .item.active .animated2{
	-webkit-animation: lightSpeedIn 1s ease-in 200ms both;
	animation: lightSpeedIn 1s ease-in 200ms both;
}

.carousel .item.active .animated3 {
	-webkit-animation: bounceInLeft 2s ease-in-out 800ms both;
	animation: bounceInLeft 1.5s ease-in-out 800ms both;
}

.carousel .item.active .animated4 {
	-webkit-animation: flipInX 2s ease-in 800ms both;
	animation: flipInX 2s ease-in 800ms both;
}

.carousel .item.active .animated5 {
	-webkit-animation: bounceInLeft 1s ease-in-out 100ms both;
	animation: bounceInLeft 1s ease-in-out 100ms both;
}

.carousel .item.active .animated6{
	-webkit-animation: bounceIn 1s ease-in 500ms both;
	animation: bounceIn 1s ease-in 500ms both;
}

.carousel .item.active .animated7{
	-webkit-animation: bounceIn 1s ease-in 500ms both;
	animation: bounceIn 1s ease-in 500ms both;
}

.carousel .item.active .animated8{
	-webkit-animation: bounceInDown 1s ease-in 800ms both;
	animation: bounceInDown 1s ease-in 800ms both;
}

/* Profile section 
======================================*/

.pro-list{}
.pro-list div{
	margin-bottom: 5px;
}
.pro-list div span{
	font-weight: 700;
	font-size: 16px;
	margin-right: 5px;
}
.socail-list a i{
	font-size: 25px;
	border: 1px solid#444;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	padding: 9px 0px 0px 11px;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.pro-pic img{
	height: 310px;
}


/*service section
=====================================*/
.icon-box .icon{
	font-size: 60px;
}
.service-content{
	margin-bottom: 50px;
}
.service-content h4{
	line-height: 10px;
	margin-top: 20px;
}
.service-content span{
	font-size: 12px;
	color: #ccc;
}
.service-content p{
	margin: 15px 0px;
}


/*Work process 
=========================*/
.sub-heading h4{
	color: #fff;
	font-family: 'Lora', serif;
	font-size: 28px;
	margin-bottom: 25px;
}
.sub-heading p{
	color: #fff;
	font-family: 'Lora', serif;
	margin-top: 20px;
}
.line{
	width: 60px;
	margin: 0 auto;
	height: 1px;
	background: #fff;
}
.process-desc{
	margin-top: 60px;
}
.process-timeline{
	width: 100%;
	height: 1px;
	background: none repeat scroll 0% 0% #eee;
	position: relative;
	top: 40px;
}
.single-process, .process-none{
	width: 16.5%;
	float: left;
}
.process-icon{
	position: relative;
}
.process-icon i,.process-none i{
	font-size: 35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	padding-top: 15px;
	background: #eee;
	-webkit-box-shadow: 0px 0px 0px 2px #ccc;
	box-shadow: 0px 0px 0px 5px #fff;
}

.process-icon:before{
	content: "";
	position: absolute;
	height: 10px;
	width: 10px;
	background: #fff;
	top: 50%;
	left: 0px;
	border-radius: 50%;
	border: 2px solid#ccc;
}
.single-process h4,.process-none h4{
	text-transform: uppercase;
	font-family: 'Lora', serif;
	font-weight: 500;
	margin-top: 20px;
	color: #fff;
}



/*-- Portfolio page --*/

#work{
}
#portfolio{
	padding: 0 0 40px;
}

#portfolio-carousel .thumbnail {
    position:relative;
    overflow:hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
}

#portfolio-carousel .thumbnail .caption .caption-content{
	position: absolute;
	bottom: 25px;
}

#portfolio-carousel .thumbnail .caption i{
	border: 2px solid #FFFFFF;
	border-radius: 100%;
	color: #FFFFFF;
	display: inline-block;
	font-size: 18px;
	height: 46px;
	line-height: 40px;
	position: relative;
	text-align: center;
	top: -40px;
	width: 46px;
	z-index: 8;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

#portfolio-carousel .thumbnail .caption i.fa-link{
	margin-left: 10px;
}

 
#portfolio-carousel .caption {
	color: #fff;
	padding: 15px;
    position:absolute;
    bottom: -100%;
    right:0;
    /*background:rgba(235, 44, 51, 0.85);*/
    background: rgba(0, 0, 0, 0.8);
    width:100%;
    height:100%;
    text-align:left;
    z-index:2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#portfolio-carousel .thumbnail:hover .caption {
    bottom: 0%;
}

#portfolio-carousel .caption h3{
	font-size: 22px;
	font-weight: 400;
	text-align: left;
}

.barrier-carousel-controller{
	position: relative;
	margin-top: 20px;
	text-align: center;
}

.barrier-carousel-controller .left,
.barrier-carousel-controller .right, 
.owl-controls .owl-prev, 
.owl-controls .owl-next{
	cursor: pointer;
	background: transparent;
	width: 38px;
	height: 38px;
	line-height: 38px;
	color: #989898;
	opacity: 1;
	top: auto;
	text-shadow: none;
	display: inline-block;
	text-align: center;
	border-radius: 100%;
	border: 1px solid#ccc;
}
.owl-controls .owl-next{
	margin-left: 6px;
}

#portfolio-carousel .carousel-inner .col-md-3{
	/*width: 20%;*/
}
.barrier-carousel-controller .left:hover,
.barrier-carousel-controller .right:hover,
.owl-controls .owl-prev:hover, 
.owl-controls .owl-next:hover{
	color: #fff;
}

.owl-controls .owl-page, 
.owl-controls .owl-buttons div{
	display: inline-block;
}

#portfolio-carousel .carousel-inner{
	/*overflow: visible;*/
}

/*FEATURE section
===================================*/
#feature{
	background: #F7F7F6;
}
.main-fetaure{
	margin-top: 30px;
}
.feature-desc{
	margin-bottom: 35px;
}

.feature-icon{
	float: left;
	margin-right: 30px;
}
.feature-content p{
	font-size: 12px;
}
.feature-icon i{
	font-size: 40px;
	width: 90px;
	height: 90px;
	background: #fff;
	border-radius: 100%;
	line-height: 87px;
	text-align: center;
	border: 4px solid#F7F7F6;
	-webkit-box-shadow: 0px 0px 0px 3px #fff;
	box-shadow: 0px 0px 0px 3px #fff;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.feature-desc h4{
	text-transform: uppercase;
	margin: 15px 0px;
}

.feature-desc h4{
	text-transform: capitalize;
	font-weight: 500;
}

.feature-icon i:hover{
	color: #fff;
}


/*PRICING
=======================================*/
.panel-pricing{
	border-radius: 3px;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.panel-pricing .panel-heading .panel-title{
	font-size: 25px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.panel-pricing .panel-heading{
	border-color: #555;
	padding: 35px 0px;
	background: transparent;
	border-bottom: 1px solid#ccc;
	-webkit-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
}
.plan{
	font-size: 50px;
	padding: 30px 0px 20px 0px;
}
.panel-pricing .panel-body{
}

.panel-pricing .panel-body p{
	font-size: 50px;
}

.plan-desc{
	margin-left: -20px;
}
.plan-desc li{
	text-transform: capitalize;
	font-size: 14px;
	padding: 10px 0px;
}
.plan-desc li:last-child{
	border: 0px;
}
.panel-pricing .panel-footer{
	background: transparent;
	-webkit-transition: all .3s ease-in 0s;
	-o-transition: all .3s ease-in 0s;
	transition: all .3s ease-in 0s;
}

.panel-pricing:hover .panel-heading{
	color: #fff;
}
.panel-pricing:hover .btn-black{
	border-color: #fff;
	background: transparent;
	color: #fff;
}


/*TESTIMONIAL section
====================================*/
#testimonial{
	padding: 60px 0px 110px 0px;
}
#testimonial-carousel{
	color: #fff;
	width: 70%;
	margin: 0px auto;
}
#testimonial-carousel p{
	margin: 30px 0px;
}
#testimonial-carousel h3{
	text-transform: uppercase;
	font-weight: 700;
}
#testimonial-carousel  span{
	font-style: italic;
	color:#ccc;
}
.test-icon i{
	font-size: 40px;
	margin-bottom: 30px;
	background: #fff;
	color: #555;
	padding: 15px;
}

.owl-carousel{
	display: block!important;
}
.testimonial-thumb img{
	border: 1px solid #8E8E8E;
	padding: 3px;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	margin: 0 auto;
}
#testimonial-carousel .carousel-indicators {
    bottom: -70px!important; 
    padding-bottom: 10px;
}



/*BLOG section
================================*/


.blog-content h4.blog-title{
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 0px;
}
.blog-meta{
	margin: 5px 0px;
}
.blog-meta span{
	margin-right: 10px;
	color: #888;
}
.blog-meta span i{
	padding: 10px;
}

.blog-content p{
	margin: 15px 0px;
}

.blog-social{
	margin-top: 40px;
}
.blog-social h4{
	margin-bottom: 20px;
}
.blog-desc img{
	padding: 5px;
}
.blog-desc{
	position: relative;
}


.blog-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.blog-overlay a{
	color: #fff;
	padding: 15px 18px;
	border: 1px solid#fff;
	border-radius: 100%;
}

.blink{
	top: -20px;
	position: absolute;
	left: 40%;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.bsearch{
	bottom: -20px;
	position: absolute;
	right: 40%;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}
.blog-desc:hover .blog-overlay{
	opacity: 1;
}
.blog-desc:hover .blink{
	top: 40%;
}
.blog-desc:hover .bsearch{
	bottom: 40%;

}

/*CONTATCT section
======================================*/

.parallax4 .header-desc ,#contact-form label{
	color: #fff;
}
#contact-form label{
	margin-bottom: 10px;
}

#contact-form input{
	border-radius: 0px;
	height: 50px;
}
 .form-control{
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
	border-radius: 0px;
}

#contact #contact-form, #contact .header-desc{
	z-index: 3;
	color: #fff;
}


/*MAp wrapper
==============================*/
.map-wrapper{
	position: relative;
}

.map {
	height: 400px;
	z-index: 1;
}

.contact-info-inner h3{
	font-weight: 700;
	margin-bottom: 25px;
	font-size: 24px;
	color: #fff;
}

.contact-info h3{
	margin-top: 42px;
	font-weight: 700;
	font-size: 24px;
}

.contact-info p{
	font-size: 18px;
}

.contact-info i{
	font-size: 18px;
	margin-right: 10px;
}

/* Contact inside Map */
.contact-info-inner {
	position: absolute;
	color: #fff;
	top: 0;
	bottom: 0;
	z-index: 2;
	background: rgba(0,0,0,.7);
	padding: 25px 30px;
	max-width: 400px;
	max-height: 400px;
	text-align: left;
	right: 70px;
}

.contact-info-inner p{
	overflow: hidden;
	margin-bottom: 25px;
}

.contact-info-inner p strong{
	display: block;
}

.contact-info-inner i{
	margin-right: 20px !important;
	font-size: 24px;
	margin-top: 5px;
}


/*FOOTER
==========================*/
#footer{
	padding: 60px 0px;
	/*background: #e8e8e8;*/
	background: #333;
	/*border-bottom: 10px solid#222;*/
}
.footer-desc .logo{
	margin-bottom: 30px;
	font-size: 30px;
	text-transform: uppercase;
	color: #fff;
}
.footer-desc .socail-list a i{
	padding-left: 0px;
	color: #e8e8e8;
	border-color: #e8e8e8;
}
.footer-desc{}
.footer-desc .socail-list{}

.copyright-info {
	color: #e8e8e8;
}
.copyright-info span a{
	color: #fff;
	font-weight: 700;
}


/*BAck to TOP
=====================*/
#back-to-top {
	right: 40px;
	top: auto;
	z-index: 1;
	-webkit-backface-visibility: hidden;
}

#back-to-top.affix {
	bottom: 60px;
}

#back-to-top .btn.btn-primary{
	border-radius: 100%;
	padding: 0;
	font-size: 18px;
	width: 36px;
	height: 36px;
	background: rgba(0,0,0,.3);
	border: 2px solid transparent;
	color: #fff;
	opacity: .5;
}

#back-to-top .btn.btn-primary:hover{
	color: #fff;
	opacity: 1;
	background: #D9534F;
}


/*index2 style
====================================*/

#counter-area{
    background: url('../images/bg/bg2.jpg') no-repeat fixed 50% 0px / cover transparent;
    position: relative; 
    margin: 0 auto;
    width: 100%;
    overflow:hidden;
    z-index:2;
    padding:80px 0px 80px 0px;
    color: #fff;
}

.facts-wrap{
    width: 220px;
    margin: 0px auto;
    text-align: left;
}

.facts-wrap h6{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size: 20px; 
    line-height:18px;
}
.facts-wrap-num{
    font-size: 50px; 
    line-height:60px;
    width:100%;
    margin:10px auto;
    position: relative;
}  

.fact-content{
    float: left;
}
.facts-wrap .icon-box{
	width: 16%;
	float: left;
	font-size: 40px;
	padding: 16px 60px 16px 0px;
	margin-right: 25px;
	border-right: 1px solid #CCC;
	margin-top: 20px;
}


/*TEAM members
===========================*/
#team{
	/*padding: 60px 0px;*/
	padding-bottom: 70px;
	background: #F6F6F8;
}

.single-member{
	text-align: center;
	position: relative;
}
.single-member img{
	width: 100%;
}
.single-member h4{
	text-transform: uppercase;
	margin-bottom: 20px;
}
.member-content{
	background: #fff;
	padding: 20px 0px;
}
.member-desc h4{
	text-transform: uppercase;
}
.member-desc h5{
	color: #888;
	font-style: italic;
}
.member-socail{
	margin-top: 30px;
}
.member-socail li{
	border-right: 1px solid#ccc;
	padding: 0px 10px;
}
.member-socail li:last-child{
	border: 0px;
}

.form-control{
	background: transparent;
}

.member-overlay{
	position: absolute;
	top: -50px;
	padding: 35px 20px 0px 20px;
	color: #fff;
	opacity: 0;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	height: 100%;
}
.member-overlay .member-desc h5{
	color: #fff;
}
.member-overlay p{
	margin: 30px 0px;
}
.single-member:hover .member-socail li i,.single-member:hover .member-socail li{
	color: #fff;
	border-color: #fff;
}
.single-member:hover .member-overlay{
	opacity: 1;
	top: 0px;
}


/*CLIENTS section
=============================*/
#client{
	padding: 60px 0px;
	background: #F6F6F8;
}
.client-desc{
	border-bottom: 1px solid#ccc;
}
.btm-client{
	padding-top: 10px;
}
.client-desc li,.btm-client li{
	padding: 20px 30px;
	border-right: 1px solid#ccc;
	border-left: 1px solid#ccc;
	margin-left: -5px;
}
.client-desc li a img,.btm-client li a img{
	opacity: .6;
}
.client-desc li a img:hover,.btm-client li a img:hover{
	opacity: 1;
}

#client .header-desc{
	width: 50%;
	margin: 20px auto;
	margin-bottom: 50px;
}
#client .header-desc .line{
	width: 50px;
	height: 3px;
}




/*placeholder
======================*/

.form-level ::-webkit-input-placeholder {
   color: #fff;
   text-transform: capitalize;
}

.form-level :-moz-placeholder { /* Firefox 18- */
   color: #fff;  
   text-transform: capitalize;
}

.form-level ::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
   text-transform: capitalize;
}

.form-level :-ms-input-placeholder {  
   color: #fff;  
   text-transform: capitalize;
}

/*video section
=============================*/
/*VIDEO*/

#video{
	padding: 70px 0px;
}
.video-background{
    width: 100%;
}
.video-background-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.hero-buttons a{
    margin-right: 10px;
}
.hero-content .btn-main{
    background: #E44C4C;
    margin-top: 20px;
    color: #fff;
}
.hero-content .btn-main:hover{
    background: transparent;
    color: #fff;
}
.hero-section {
    height: 100%;
    overflow: hidden;
}
.hero-section .container {
    height: 100%;
}

.hero-content {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    color: #fff;
}

.hero-content .btn-primary{
	margin: 35px 0px 20px 0px;
}


/*SKILL bar section
=======================================*/

#skill-bar{
	padding: 70px 0px;
}
#skill-bar .sub-heading {
	margin-bottom: 50px;
}
.skill-percentage{
	text-align: center;
}
.percentage#circle{
	border-color:#5BC0DE;
}
.percentage#circle1{
	border-color: #5CB85C;
}
.percentage#circle2{
	border-color: #337AB7;
}
.percentage#circle3{
	border-color: #F97DB1;
}
.percentage#circle4{
	border-color: #C71110;
}
.percentage#circle5{
	border-color: #C88B5E;
}

.percentage{
	width: 120px;
	height: 120px;
	border-radius: 100%;
	border: 4px solid#ccc;
	font-size: 30px;
	padding-top: 28%;
	font-weight: 700;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin: 0 auto;
	-webkit-box-shadow: 0px 0px 0px 4px #ccc;
	box-shadow: 0px 0px 0px 4px #ccc;
	color: #fff;
}
.skill-name{
	font-weight: 700;
	text-transform: uppercase;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin: 20px 0px;
	color: #fff;
}
.skill-content{
	margin-top: 20px;
}
.skill-content p{
	color: #EBEBEB;
}

.col2{
	width: 20%;
	padding: 0px 8px;
}

.circle-text{
}
/*parralax
=============*/

.parallax-overlay{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/overaly.png);
}

.parallax1{
	background: url(../images/bg/bg5.jpg) fixed 50% 50%;
}
.parallax2{
	background: url(../images/parallax/parallax5.jpg) fixed 50% 50%;
}
.parallax3{
	background: url(../images/parallax/parallax2.jpg) fixed 50% 50%;
}
.parallax4{
	background: url(../images/parallax/contact-bg.jpg) fixed 50% 50%;
}

#skill-bar{
	background: url("../images/parallax/parallax6.jpg") no-repeat fixed 50% 50% ;
	-webkit-background-size: cover;
	background-size: cover;
}
.color-overlay{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .95;
}


/*Nav feature-tab
=========================================*/

#feature-tab{}
#feature-tab .nav-tabs{
	margin-bottom: 70px;
	/*border-top: 1px solid#DDD;*/
}
#feature-tab .nav-tabs li{
	width: 50%;
	margin: 0 auto;
}
#feature-tab .nav-tabs li a{
	border-radius: 0px;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 50px 0px;
	border-top: 0px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	border: 0px;
}
#feature-tab .nav-tabs li:last-child a{
	border-right: 0px;
}
#feature-tab  .nav-tabs > li.active > a{
	background: #fff;
	border-color: #CF4F4B;
	color: #CF4F4B;
}

.clear{
	float: none;
}

#feature-tab .nav-tabs li a .feature-icon{
	margin-bottom: 20px;
}

#feature-tab  .nav-tabs > li.active > a .feature-icon i{
	background: #D9534F;
	box-shadow: 0px 0px 0px 4px #D9534F;
	color: #fff;
}



/*progress bar
===========================*/
#skill-bar{}
#skill-bar .sub-heading h2{
	text-transform: uppercase;
	color: #fff;
}
.col2{
	/*width: 20%;*/
	float: left;
}
.skill-content{
	width: 100%;
	margin: 0 auto;
}

.skill-name{
	text-align: center;
	width: 100%;
	font-size: 20px;
	margin-top: 5px;
}



/*SINGLE portfolio
===================================*/


/*WORK section
==========================*/
.portfolio-wrap{
	margin-top: 30px;
}
.portfolioFilter{
	margin-bottom: 60px;
	margin-top: 10px;
}

.portfolioFilter a{
	padding: 10px 15px;
	font-size: 17px;
	text-transform: uppercase;
	-webkit-box-shadow: 0px 0px 0px 3px #e7e7e7;
	box-shadow: 0px 0px 0px 3px #e7e7e7;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	margin-right: 10px;
}

.grid{
	width: 20%;
	float: left;
	margin-bottom: -5px;
	margin-right: -1px;
	margin-left: 0px;
}

.effect-oscar{
	position: relative;
}
.effect-oscar img{
	width: 100%;
}
.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	background: #3085a3;
	text-align: center;
	width: 100%;
	height: 100%;
}
.effect-oscar figcaption{
	position: absolute;
	top: 10px;
	left:18%;
	text-align: center;
	opacity: 0;
	background: rgba(0,0,0,.5);
	bottom: 10px;
}
.effect-oscar h3 {
	font-size: 16px;
	color: #fff;
}
.effect-oscar figcaption a {
	background: #fff;
	padding: 10px 13px;
	border-radius: 2px;
	color: #444;
}
figure.effect-oscar {
	background: #000;
	background: rgba(0,0,0,.8);
}
figure.effect-oscar figcaption {
	padding: 2.5em;
	background-color: rgba(0,0,0,0.1);
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
	position: absolute;
	top: 10px;
	right: 20px;
	bottom: 10px;
	left: 20px;
	border: 1px solid #fff;
	content: '';
}

figure.effect-oscar a.link i{
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar a {
	opacity: 0;
	-webkit-transition: all 0.35s, -webkit-transform 0.35s;
	transition: all 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

figure.effect-oscar:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover h3,
figure.effect-oscar:hover a {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


figure.effect-oscar:hover figcaption {
	background-color: rgba(0,0,0,0.5);
	opacity: 1;
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}




/*ISotope
====================*/
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
 
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}


#work-section{
	padding-bottom: 150px;
}


#port-slider{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 450px;
	/*background: url("../images/portfolio/portfolio-bg3.jpg") 50% 50%;*/
}

#port-slider img{
	width: 100%;
}
.slider-content{
	position: absolute;
	color: #fff;
	/*top: 200px;*/
}

#inner-title{


}
.inner-title-content{
	background: none repeat scroll 0% 0% #D9534F;
	padding: 20px 0px;
	width: 100%;
	color: #fff;
	margin-top: -50px;
}