/*
    Template Name: boss-Portfolio landing teamplate
    Author: Themeturn
    Author URI: 
    Description: 
    Version: 1.0
*/

/* Table of Content
==================================================
1.  Global Styles
2.  Typography
3.  Common styles
4.  Navigation
5.  HEADER AREA
6.  SECTION ABOUT
7.  SECTION SERVICES
8.  SECTION PORTFOLIO
9.  SECTION FEATURES
10. SECTION TESTIMONIAL
11. SECTION CONTACT
12. SECTION FOOTER


*/

/* 1 - Google Font
------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,700,900,800);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,400italic,700,300italic,700italic);

@font-face {
    font-family: 'Simple-Line-Icons';
    src:url('http://themeturn.com/pro/boss/v2/css/fonts/Simple-Line-Icons.eot');
    src:url('http://themeturn.com/pro/boss/v2/css/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
        url('http://themeturn.com/pro/boss/v2/css/fonts/Simple-Line-Icons.woff') format('woff'),
        url('http://themeturn.com/pro/boss/v2/css/fonts/Simple-Line-Icons.ttf') format('truetype'),
        url('http://themeturn.com/pro/boss/v2/css/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 2 - General styles
------------------------------------------------------------------------*/
:-moz-selection {
    background-color: #e6ae49;
    color: #FFF;
}

::-moz-selection {
    background-color: #e6ae49;
    color: #FFF;
}

body {
    width: 100%;
    height: 100%;
    line-height: 24px;
    color: #6a6a6a;
    font-size: 13px;
    font-family: 'Oxygen', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
    /*font-family: "Arial", "�L�n���…颻 */
}

html {
    width: 100%;
    height: 100%;
}

.no-padding{
    padding: 0;
}



a, a:focus, a:active, a:link, img {
    outline: none;
}


a {
    color:#555;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}


a {
    cursor: pointer;
    text-decoration: none;
    color: #323232;
    transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
}

    a:hover {
        color:#5E42A6;
        text-decoration: none;
        transition: all 0.25s ease 0s;
        -moz-transition: all 0.25s ease 0s;
        -webkit-transition: all 0.25s ease 0s;
        -o-transition: all 0.25s ease 0s;
    }

a:focus {
    outline:none;
    outline-offset:0;
}

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


p {
    line-height: 26px;
    font-size: 13px;
    font-weight: 400;
    color: #666;

}
.dark-bg {
    background: #323232;
    color: #fff;
}


img {
     height: auto;
    max-width: 100%;
    border: none;
    outline: none;
    transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

iframe,
audio {
    width: 100%;
    height: auto;
    border: none;
}

ul,li{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.parallax-overlay.white-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0% 0%;
}
.parallax-overlay.black-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(46, 46, 47, .5) none repeat scroll 0% 0%;
}

/* 2.1 - Headings 
--------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: #2a2a2a;
    text-transform: capitalize;
    font-family: 'Raleway',sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 10px;
}

h1 {
    font-size: 43px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 900;
}


h2 {
    font-size: 27px;
    line-height: 37px;
}

h3 {
    font-size: 21px;
    line-height: 32px;
}

  

h4 {
    font-size: 17px;
    line-height: 28px;
}



h5 {
    font-size: 15px;
    line-height: 23px;
}

h6 {
    font-size: 14px;
    line-height: 18px;
    
}


/* buttons style */
.btn{
    padding: 14px 30px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-container{
    margin-top: 35px;
}
.btn-primary{
    border:3px solid#5E42A6;
    background: #5E42A6;
    color:#fff ;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary:hover{
    background:#2A2A2A;
    border-color:#2A2A2A;
    color: #fff;
}

.btn-container{
    margin-top: 35px;
}
.btn-primary.black{
    background:#2A2A2A;
    border-color:#2A2A2A;
    color: #fff;
    padding: 12px 40px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary.black:hover{
    border-color: #333;
    background: #fff;
    color:#2A2A2A;
}

.btn-primary.white{
    background: #fff;
    color:#222 ;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    padding: 12px 40px;
    border: 2px solid#fff;
}
.btn-primary.white:hover{
    background:#5E42A6;
    border: 2px solid#5E42A6;
    color: #fff;

}

.btn-primary.grey{
    border-color:#ddd;
    background: transparent;
    color: #232323;
    padding: 12px 40px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-primary.grey:hover{
    background: #2A2A2A;
    color: #fff;
    border-color: #eee;
}


/*==================== section heading ========================*/
.section-padding{
    padding: 80px 0px;
}


/*======================================================
     navigation 
==========================================================*/

.navbar-brand {
    height: 40px;
    padding: 0px;
}

.navbar-custom{
    width: 100%;
    z-index: 9999;
}
.navbar-custom {
    margin-bottom: 0;
    text-transform: uppercase;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
}
.navbar-custom .navbar-brand  span{
    text-transform:capitalize!important;
}
.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:focus, .navbar-custom .navbar-nav > .active > a:hover {
    color:#5E42A6;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #232323;
    letter-spacing: 3px;
    font-size: 16px;
    font-weight: 600;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: #5E42A6!important;
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
    outline: 0;
}


@media(min-width:768px) {
     .navbar-custom {
        padding: 15px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: rgba(255, 255, 255, 0.97)!important;
        -webkit-box-shadow:  0px 0px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        border-radius: 0px;
    }

  

}
/*============================================
    SLIDER SECTION
===============================================*/
#home-section {
    background: url("../images/bg/fullscreen12.jpg")no-repeat fixed center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.slider-caption {
    z-index:2;
    text-align: center;
    margin: 0 auto;
    padding: 160px 0px;
    width: 70%;
}
.inner-content{
    padding: 50px 0px;
}
.slider-caption h2{
    font-size: 70px;
    line-height: 80px;
    letter-spacing: 4px;
    color: #fff;
}
.slider-caption p{
    margin: 10px auto;
    width: 70%;
    font-family: "lora",serif;
    font-style: italic;
    font-size: 15px;
    color: #fff;
}
.slider-caption a.btn{
    margin: 0px 6px;
}

.slider-caption p.subtitle{
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px;
}


/* ====================section portfolio========================*/

#section-portfolio .section-head p{
    margin:30px 0px 50px;
}
.portfolio-wrap{
    display: block;
    width: 100%;
    padding: 0px;
    margin: 0px;
    transition: height 450ms ease-out 0s;
    -webkit-transition: height 450ms ease-out 0s;
    -o-transition: height 450ms ease-out 0s;
}

.single-portfolio figure{
   position: relative;
   overflow: hidden;
}
.single-portfolio img{
   display: block;
   width: 100%;
   height: auto!important;
}
#isotope-filter{
    margin-bottom: 60px;
    
}

#isotope-filter a{
    font-size:14px;
    font-weight:400;
    line-height: 40px;
    padding: 12px 18px;
    font-weight: 600;
    border: 1px solid#eee;
}
#isotope-filter a.active,#isotope-filter a:hover,#isotope-filter a:focus{
    font-weight: 600;
}

#isotope-filter a:first-child:before{
    content:" ";
}
.single-portfolio:hover .single-portfolio img{
    opacity:.6;
}
.single-portfolio figcaption{
    top: -60px;
    height: 100%;
    width:100%;
    color: #222;
    padding: 32px 15px 0px 30px;
    left: 0px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    position: absolute;
    opacity: 0;
    background: rgba(255,255,255,.9);
}

.single-portfolio:hover figcaption{
    opacity:1;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    top: 0px;
}

.single-portfolio figcaption .figure-caption h4+p{
    color: #fff;
}

.single-portfolio figcaption a {
    width: 40px;
    height: 40px;
    color:#fff;
    line-height: 35px;
    display: inline-block;
    z-index: 1;
    position: relative;
    top: 0px;
    margin: 10px auto 0px;
    text-align: center;
    background: #5E42A6;
    border: 2px solid transparent;
}
.single-portfolio figcaption a:hover{
   border: 2px solid#5E42A6;

}
figcaption a.top{
    -webkit-transition: transform.9s ease 0s;
   -o-transition: transform .9s ease 0s;
   transition: transform .90s ease 0s;
}
figcaption a.btm{
    -webkit-transition: transform.9s ease 0s;
   -o-transition: transform .9s ease 0s;
   transition: transform .90s ease 0s;
}

figcaption a:hover{
    background: #fff;
    color: #222;
}

figure img, figure figcaption:before, figure figcaption:after, figure a {
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
}

.figure-caption{
    position: absolute;
    top: 40px;
    left: 0px;
}
.figure-caption h4{
    color: #fff!important;
}
.single-portfolio:hover figcaption .figure-caption{
    left: 30%;
}

/* -- 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 .col-sm-3{
    width:24.95%;
}

/*====================section Features=============================*/
#section-features{
    background: #F9F9F9;
    padding: 70px 0px;
}
.feature-inner i{
    width: 55px;
    height: 55px;
    font-size: 28px;
    line-height: 30px;
    border: 3px solid#444;
    display: inline-block;
    text-align: center;
    color: #ccc;
    padding-top: 10px;
    float: left;
    margin-right: 30px;
}
.feature-inner h3{
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
}
.feature-inner p{
    display: block;
    margin-top: 25px;
}


/* =====================Section About Me==================*/

.section-head{
    width: 80%;
    margin-bottom: 50px;
    padding-top: 20px;
}
.section-head h2{
    color: #2a2a2a;
    font-size: 40px;
    line-height: 40px;
}

.head-subtitle{
    font-family: "Raleway",sans-serif;
    color: #ccc;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 15px;
    text-transform: capitalize;
    margin-bottom: 10px;
    font-weight: 500;
}



/*section about-------------*/
.skills-wrap h4{
    margin-bottom: 20px;
}


/*----------------*/
/*  Skills Bar      
/*---------------*/
.skillbar {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 30px;
}

.skillbar-bar:before {
    background: #eee;
    content: "";
    height: 3px;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.skillbar-bar {
    height: 3px;
    width: 0px;
    background: #323232;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.skillbar-title {
    display: inline-block;
}

.skillbar-title, .skill-bar-percent {
    color: #323232;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}


.skill-bar-percent {
    float: right;
    display: inline-block;
}


.panel-default > .panel-heading{
    border: 0px;
    background: transparent;
}

.panel-group .panel{
    margin-bottom: 30px;
}

.panel{
    background: transparent;
    border: 0px;
    box-shadow: none;
}
.panel-group{
    position: relative;
}
.panel-title{
    position: relative;
    
}
.panel-title a:before{
    position: absolute;
    content:"";
    width: 45px;
    height: 45px;
    background: #999;
    border-radius: 100%;
    top: -10px;
    left: 0px;
    z-index: 3;
   border: 3px solid#5E42A6;
}
.panel-group:after{
    position: absolute;
    content:"";
    width: 2px;
    background: #777;
    top: 10px;
    left: 37px;
    height:90%;
    z-index: 1;
}
.panel-title a,.panel-body{
    margin-left: 70px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 0px;
    margin-bottom: 10px;
}
.panel-title a{
    color: #5E42A6;
}
.panel-title a.collapsed{
    color:#232323;
}

.panel-title:before{}

.panel-title a.collapsed::before{
    background:#fff;
}
.panel-title a::before{
    background:#5E42A6;
}


/*==================section services ==================*/

.services-inner{
    text-align: center;
    padding: 30px 0px;
}
.services-inner i{
    font-size: 60px;
    color: #5E42A6;
}
.services-inner h2{
    letter-spacing: 3px;
    margin: 15px 0px;
}
.services-inner p {
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 3px;
    font-size: 16px;
    line-height: 16px;
    margin: 25px 0px;
}
.services-inner p span{
    padding: 7px 10px;
}

/*=========================Section counter===================*/

#counter-area{
   background: #FAFAFA;
    background: url("../images/bg/counter.jpg")fixed 50% 50%;
    background-size: cover;
    position: relative; 
    margin: 0 auto;
    width: 100%;
    overflow:hidden;
    z-index:2;
    padding:80px 0px 80px 0px;
}

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


.facts-wrap-num{
    font-size: 40px; 
    line-height:60px;
    width:100%;
    margin:20px auto 0px;
    position: relative;
    font-weight: 400;
    color: #222;
    font-family: "Roboto-condensed",sans-serif;
}  


.counter-icon i{
    float: left;
    font-size: 40px;
    margin-right: 30px;
    color: #5E42A6;
}

.facts-wrap p{
    color: #333;
    font-weight: 600;
    font-size: 16px;
}




/*=======================Section clients====================*/

#section-clients{
    background: #f8f8f7;
    background-size: cover;
    position: relative;
}

.client-box{
    border: 1px solid#eee;
    text-align: center;
    padding: 40px 0px;
    margin-bottom: 20px;
}

.testimonial-col{
    background: url("../images/bg/32.jpg");
    background-size: cover;
    padding: 140px 50px;
}

.carousel-content{
    background: rgba(255,255,255,.9);
    padding: 50px;
    text-align: center;
    position: relative;
    -webkit-box-shadow: 0px 0px 4px #c9c9c9;
    box-shadow: 0px 0px 4px #c9c9c9;
}
.carousel-content i{
    width: 75px;
    height: 75px;
    text-align: center;
    background: #5E42A6;
    color: #fff;
    font-size: 30px;
    padding-top: 25px;
    line-height: 30px;
    border-radius: 100%;
    margin-bottom: 20px;
}
.carousel-content p{
    font-family: "Lora",sans-serif;
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    margin: 15px 0px 25px;
}
.carousel-content h4{
    color: #5E42A6;
}
.carousel-content h4 span{
    font-size: 14px;
    text-transform: capitalize;
    color: #444;
    margin-top: 15px;
}



/*===============Section Footer============*/
#section-footer{
     background: #111111;
     padding: 50px 0px;
}
.footer-item h4{
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0px;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 20px;
}
.footer-item p{
    margin-bottom: 30px;
}
.footer-socail li a{
    font-size: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid#292929;
    display: block;
    padding-top: 3px;
    color: #fff;
    text-align: center;
     -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.footer-socail li a:hover{
    background:#5E42A6;
}
.footer-form .form-control{
    box-shadow: none;
    border-radius: 0px;
    height: 48px;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.btn-footer{
    padding: 10px 30px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Footer bottom =================*/
#section-footer-btm{
    padding: 25px 0px;
    background: #3288b6;
}

.footer-copy h6,.footer-link ul li a{
    text-transform: uppercase;
    color: #eee;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
}


/*============== Section Contact =======================*/

.contact-form-wrap{
    box-shadow: 0 9px 21px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    background: #fff;
    padding: 30px 30px;
    border-radius: 3px;
}


.contact-info{
    background: #fff; 
    padding: 35px 30px;   
    border-radius: 3px;
    box-shadow: 0 9px 21px 0 rgba(0, 0, 0, 0.15)
}
.contact-info ul li{
     -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    margin-bottom: 30px;
}
.contact-socail a{
    border: 1px solid   #ddd;
    display: block;
    width: 25px;
    height:25px;
    text-align: center;
    background: #ddd;    
    border-radius: 3px;
}
#contact-form{
    margin-top: 50px;
}
#contact-form .form-control{
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #ddd;
}
#contact-form .form-group{
    margin-bottom: 25px;
}

.form-control:hover,.form-control:focus{
    border-color: #e1e1e1;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#contact-form .col-md-4, #contact-form .col-md-9 {
    position: relative;
}


#contact input.contact-form-field, #contact input.contact-form-field:focus, #contact textarea#cfmessage {
    background-repeat: no-repeat;
}
#contact input[type="text"], #contact input[type="email"] {
    width: 100%;
    margin-bottom: 40px;
}
#cfname {
    background-image: url("http://themeturn.com/pro/boss/v2/images/contact-form/name.png");
}
.cffield-upper {
    height: 50px;
}
.contact-form-field:focus{
    background: #F5F5F5;
}
.contact-form-field {
    border-radius: 2px;
    color: #444;
    background-color: transparent;
    font-family: "Muli",sans-serif;
    font-size: 13px;
    padding-left: 26px;
    line-height: 20px;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}

.form-text{
    border: 1px solid#ddd;
}
.form-text .contact-form-field{
    border: 0px;
}