

.slide{
    z-index: 0;
  }
  .carousel-indicators{
    right: 4%;
    left: auto;
    width: 70px;
    overflow: hidden;
  }
  .carousel-indicators li, .carousel-indicators li.active{
    color: #fff;
    display: block;
    width: 70px;
    text-indent: 0;
    background:none;
    text-align: right;
    border: 0;
    height: 66px;
    margin: 0;
  
  }
  .carousel-indicators li span{
    display: block;
    width: 70px;
    height: 2px;
    background: url(../img/slide-li-bg.png) no-repeat 62px 0;
    filter:alpha(opacity=50); 
    opacity:0.5;
    -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;
  }
  .carousel-indicators li.active span{
    background-position: 0px 0
  }
  .carousel-indicators li:hover span{
    background-position: -110px 0
  }
  .item img{
    width: 100%
  }
  
  
  #project{
    overflow: hidden;
    padding: 3% 3% 1% 3%;
  }
  #project .project-left{
    float: left;
    width: 280px;
    margin-right: 20px;
  }
  #project .project-left h1{
    border-left: 4px solid #c9151e;
    padding-left: 10px;
    font-family: Tahoma;
  }
  #project .project-left p{
    padding-left: 15px;
    font-size: 13px;
    margin-top: 30px;
  }
  #project .project-con{
    overflow: hidden;
  }
  #project .project-con .col-md-3{
    border: 1px solid #fff;
    padding: 0;
    overflow: hidden;
  }
  #project .project-con a{
    display: block;
    overflow: hidden;
  }
  #project .project-con a .p-list{
    overflow: hidden;
    position: relative;
  }
  #project .img-responsive{
    max-width: 135%;
    width:135%;
  }
  #project .project-con a .p-l-t{
    background: #d51720 url(../img/pro-t-bg.png) no-repeat 15px 15px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    filter:alpha(opacity=0); 
    opacity:0;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  #project .project-con a:hover .p-l-t{
    filter:alpha(opacity=100); 
    opacity:1;
  }
  #project .project-con a .p-l-t h4{
    position: absolute;
    bottom: 10px;
    color: #fff;
    font-family:Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
    padding: 15px;
    font-size: 14px;
    font-weight: 100;
    text-align: left;
    filter:alpha(opacity=0); 
    opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
  #project .project-con a:hover .p-l-t h4{
    filter:alpha(opacity=100); 
    opacity:1;
  }
  
  
  #project .project-con a h5{
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    padding-top: 20px;
    color: #000;
    font-family: Tahoma;
  }
  @media screen and (max-width: 1300px) { 
    #project .project-con a h5{
      font-size: 18px;
      line-height: 40px;
      padding-top: 15px;  
    }
  } 
  @media screen and (max-width: 1200px) { 
    #project .project-con a h5{
      font-size: 14px;
      line-height: 30px;
      padding-top: 10px;  
    }
  } 
  
  
  #project .project-con a i{
    font-size: 12px;
    border-top: 1px solid #e0e0e0;
    width: 68px;
    padding-bottom: 20px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    display: block;
    color: #828282;
    font-style: normal;
  }
  
  #tema{
    background: url(../img/tema-bg.jpg);
    overflow: hidden;
    padding: 3% 0 0 0;
  }
  
  #tema .container-fluid{
    padding: 0 3% 0 3%;
  }
  #tema h1{
    text-transform:uppercase;
    border-right: 4px solid #c9151e;
    padding-right: 1%;
    font-family: Tahoma;
    text-align: right;
    margin-bottom: 50px;
  }
  #tema .team-list{
    width: 25%;
    position: relative;
    float: left;
  }
  #tema .team-list a h2{
    text-align: center;
    font-size: 24px;
    line-height: 26px;
    height: 26px;
    padding-bottom: 7px;
    text-transform:uppercase;
    color: #2d2d2d;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #tema .team-list a h3{
    font-size: 18px;
    line-height: 20px;
    height: 20px;
    text-align: center;
    color: #2d2d2d;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  @media screen and (max-width: 1300px) { 
    #tema .team-list a h3{
      font-size: 14px;
      line-height: 16px;
      height: 16px;
    }
  } 
  
  #tema .team-list a h4{
    padding-top: 5px;
    background: url(../img/team-bg-01.png) no-repeat center bottom;
    padding-bottom: 105px;
    font-size: 12px;
    line-height: 16px;
    height: 32px;
    text-align: center;
    color: #2d2d2d;
    font-weight: 100;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  @media screen and (max-width: 1300px) { 
    #tema .team-list a h4{
      font-size: 12px;
      height: 24px;
    }
  } 
  #tema .team-list a h5{
    padding-top: 30px;
    padding-bottom: 126px;
    height: 40px;
    line-height: 20px;
    font-size: 18px;
    text-align: center;
    display: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  @media screen and (max-width: 1300px) { 
    #tema .team-list a h5{
    padding-top: 26px;
    }
  } 
  
  #tema .team-list a:hover h2{
    display: none;
  }
  #tema .team-list a:hover h3{
    display: none;
  }
  #tema .team-list a:hover h4{
    display: none;
  }
  #tema .team-list a:hover h5{
    display: block;
    background: url(../img/team-bg.png) no-repeat center bottom;
    color: #d51720;
  }
  
  
  
  #tema .team-list .t-list{
    position: relative;
    margin-top: -25px;
  }
  #tema .team-list .t-list img{
    margin: auto;
    width: 85%;
  }
  #tema .team-list .t-list .color{
    filter:alpha(opacity=0); 
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #tema .team-list a:hover .t-list .color{
    filter:alpha(opacity=100); 
    opacity:1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
  }
  
  #tema .team-list .t-list .gray{
    width: 100%;
    text-align: center;
  }
  
  
  #tema .team-list .t-list img{
    margin: 0 auto
  }
  
  #tema .carousel-control{
    width: auto;
  }
  #tema .carousel-control.left{
    background-image:none;
    left: 30px;
  }
  #tema .carousel-control.right{
    background-image:none;
    right: 30px;
  }
  
  
  
  #clients{
    margin-bottom: 30px;
  }
  #clients{
    overflow: hidden;
    padding: 3% 3% 1% 3%;
  }
  #clients .clients-left{
    float: left;
    width: 280px;
    margin-right: 20px;
  }
  #clients .clients-left h1{
    border-left: 4px solid #c9151e;
    padding-left: 10px;
    font-family: Tahoma;
  }
  #clients .clients-left p{
    padding-left: 15px;
    font-size: 13px;
    margin-top: 30px;
  }
  #clients .clients-con{
    overflow: hidden;
  }
  #clients .clients-con .col-md-3{
    border: 1px solid #fff;
    width: 20%;
    padding: 0;
    overflow: hidden;
  }
  #clients .clients-con a{
    display: block;
    overflow: hidden;
    border: 0px solid #e0e0e0;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #clients .clients-con a .c-list{
    overflow: hidden;
    position: relative;
  }
  #clients .clients-con a:hover{
    border: 0px solid #b0b0b0;
  }
  
  #clients .clients-con .c-list .color{
    filter:alpha(opacity=0); 
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #clients .clients-con a:hover .c-list .color{
    filter:alpha(opacity=100); 
    opacity:1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
  }
  
  #clients .clients-con .c-list .gray{
    width: 100%;
    text-align: center;
  }
  
  
  #clients .clients-con  .c-list img{
    margin: 0 auto
  }
  
  
  
      .framl-x{
        width:1382px; height:740px; border:0; margin: 0 auto;
      }
  
  
  
      .bg{
        width: 100%;
        height: 100%;
        background: #000;
        filter:alpha(opacity=80); 
        opacity:0.8;
       }
       .panels{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 999999999;
       }
       .active{
        display: block;
       }
       .panels-content{
        position: absolute;
        height: 740px;
        width: 1310px;
        left: 50%;
        top: 50%;
        margin: -370px 0 0 -691px;
        }
        .closed{
          color: #ccc;
          display: block;
          position: absolute;
          right: 30px;
          top: 0px;
          width: 45px;
          height: 45px;
          background: url(../img/closed.png);
          text-indent: -9999em;
          cursor: pointer;
        }
      @media screen and (max-width: 1450px) { 
        .panels-content{
        height: 580px;
        width: 1070px;
        left: 50%;
        top: 50%;
        margin: -290px 0 0 -535px;
        }
        .framl-x{
          width:1100px; height:580px; border:0; margin: 0 auto;
        }   
  
      }