/* Portfolio Area
=========================================== */
#portfolio{

}
#isotope-filter{
    padding:35px 0px;
}
#isotope-filter a{
color: #fff!important;
padding: 10px 15px;
}

/*Portfolio Caption
=========================================*/
#portfolio{
}
.portfolio-wrap{
    position: relative;
    display: block;
    width: 100%;
    margin: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    transition: height 450ms ease-out 0s;
    -webkit-transition: height 450ms ease-out 0s;
    -o-transition: height 450ms ease-out 0s;
}
.single-portfolio{
    display: block;
    overflow: hidden;
    float:left;
    left: 75px !important; 
    top: 0px; 
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    transform: translate3d(40px, 0px, 0px) scale3d(1, 1, 1); 
    opacity: 1;
}
.single-portfolio figure{
   padding: 0px;
}
.single-portfolio img{
   display: block;
   width: 100%;
   height: 100%;
}

.single-portfolio:hover figcaption{
    opacity:1;
    -webkit-transition: transform 0.35s ease 0s;
    -o-transition: transform 0.35s ease 0s;
    transition: transform 0.35s ease 0s;
   -webkit-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    cursor: pointer;
}

.single-portfolio:hover .single-portfolio img{
    opacity:.6;
}
.single-portfolio figcaption{
    bottom: 0px;
    height: 60%;
    width: 100%;
    color: #222;
    padding: 12px 15px;
    -webkit-transition: transform 0.35s ease 0s;
    -o-transition: transform 0.35s ease 0s;
    transition: transform 0.35s ease 0s;
    -webkit-transform: translate3d(0px, 100%, 0px);
    -ms-transform: translate3d(0px, 100%, 0px);
    -o-transform: translate3d(0px, 100%, 0px);
    transform: translate3d(0px, 100%, 0px);
    position: absolute;
    opacity: 0;

}

.single-portfolio figcaption .description{
    text-transform: none;
    font-size: 90%;
    padding-top: 50px;
    text-align: left;
}
.single-portfolio figcaption h5,.single-portfolio figcaption p{
    margin: 10px 0px;
}
.single-portfolio figcaption h5{
    float: left;
}

figcaption .links{
    float: right;
}

figcaption .links a{
   -webkit-transition: transform 0.35s ease 0s;
   -o-transition: transform 0.35s ease 0s;
   transition: transform 0.35s ease 0s;
   
-webkit-transform: translate3d(0px, 200%, 0px);
-ms-transform: translate3d(0px, 200%, 0px);
-o-transform: translate3d(0px, 200%, 0px);
transform: translate3d(0px, 200%, 0px);
text-decoration: none;
background: #fff;
color: #222;
padding: 8px 15px;
}


/* -- Isotope start -- */
#isotope{
    width:100%;
    margin-top:0;
}
.isotope-item{
    z-index:2;
}
.isotope-hidden.isotope-item{
    z-index:1;
}
.isotope,
.isotope .isotope-item{
/*transition-duration*/
-webkit-transition-duration:1s;
   -moz-transition-duration:1s;
     -o-transition-duration:1s;
        transition-duration:1s;
}
.isotope{
/*transition-property*/
-webkit-transition-property:height, width;
   -moz-transition-property:height, width;
     -o-transition-property:height, width;
        transition-property:height, width;
}
.isotope .isotope-item{
/*transition-property*/
-webkit-transition-property:0px opacity;
   -moz-transition-property:0px opacity;
     -o-transition-property:0px opacity;
        transition-property:0px opacity;
}
#isotope .col-sm-3{
    width:24.95%;
}
#isotope-filter{
    margin-bottom:40px;
}
#isotope-filter a{
    font-size:14px;
    font-weight:400;
    text-transform: capitalize;
    line-height: 40px;
}
#isotope-filter a.active,#isotope-filter a:hover,#isotope-filter a:focus{
}

#isotope-filter a:first-child:before{
    content:" ";
}

/*portfolio single bx slider
===================================*/
#banner{
    padding: 0px;
    margin: 0px;
}
#banner img{
    height: 450px;
    width: 100%;
}
#portfolio_single{
    margin-top: 100px;
    /*background: url("../images/slider/banner.jpg");*/
}
#portfolio-single{
    padding: 20px 0px 55px 0px;
}
.portfolio-header{
    background: #fff;
    padding: 30px 0px 0px 20px;
    /*margin-top: -40px;*/
    border-bottom: 1px solid#e5e5e5;
    margin-bottom: 30px;
}
.portfolio-header h2{
    font-size: 35px;
    line-height: 40px;
    font-weight: 400;

}
.portfolio-header .breadcrumb{
    background: #fff;
}

.portfolio-slider{}
#portfolio-slider li img{
    width: 100%!important;
    height: 400px!important;
}

.sidebar{
    padding: 0px 20px;
}

.portfolio-desc .btn-main{
    margin-top: 20px;
}
.portfolio-desc h4{
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}
.portfolio-desc h4:after{
    position: absolute;
    content: "";
    width: 40px;
    height: 3px;
    left: 0px;
    bottom: 0px;
}
.right-sidebar h4{
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}
.right-sidebar h4:after{
    position: absolute;
    content: "";
    width: 40px;
    height: 3px;
    left: 0px;
    bottom: 0px;
}
.circle{
    list-style-type: square;
    padding: 0px 20px;
}
.circle li{
   margin: 10px 0px;
}
.circle li span{
    text-transform: capitalize;
    margin-right: 20px;
}
#related{
   padding: 40px 0px;
}
.related h3{
    margin-bottom: 50px;
    text-transform: capitalize;
    position: relative;
    padding-bottom: 10px;
    font-weight:300!important;
}
.related h3:after{
    content: "";
    position: absolute;
    width: 60px;
    height: 4px;
    bottom: 0px;
    left: 47%;
}
.related .rel-post{
    margin-bottom: 30px;
    border: 1px solid#F5F5F5;
    width: 100%;
    background: transparent;
}
.rel-post .caption{
    padding: 15px;
}
.related .rel-post .caption p{
    font-style: italic;
    font-size: 12px;
    margin-top: 0px;
    color: #888;
}
.related .rel-post img{
    width: 100%;
    height: 175px;
}

/*bx slider*/
.bx-wrapper .bx-viewport{
    box-shadow: none !important;
    border: 0 !important;
    height: 400px!important;
}

.bx-wrapper .bx-next{
    right: 20px !important;
}

.bx-wrapper .bx-pager{
    
}
.bx-wrapper .bx-controls-direction a {
    top:62%;
}
.bx-wrapper .bx-pager.bx-default-pager a{
    border: 2px solid #fff;
    width: 14px !important;
    height: 14px !important;
    border-radius: 100% !important;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active{
    background: #222 !important;
    
}