/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
#main-slider {
  position: relative;height: 500px; overflow:hidden;
  margin-bottom: 60px;
}
.carousel .green-btn{ margin-top:20px; background-color:#6ab560; color:#fff; font-size:14px; border-radius:0; padding:10px 17px;}
.carousel .green-btn:hover{ background-color:#7cbe73;}
#main-slider .carousel-indicators li{ border:2px solid #f6b511;}
#main-slider .carousel-indicators .active{ background-color:#f6b511;}
/* Since positioning the image, we need to help out the caption */
.c-caption { top:0;
  z-index: 10;
  position:absolute;
  padding:20px;
}
.c-caption h1{ font-size:60px; margin-top:30px;}
.c-caption h2{ font-size:20px; line-height:45px;}
#main-slider.carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  filter: alpha(opacity=0);
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  height: 600px;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}
#main-slider.carousel .item:first-child {
  top: auto;
  position: relative;
}
#main-slider.carousel .item.active {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
}
#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}
#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}
#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}


/* Declare heights because of positioning of img element */
#main-slider.carousel .item {
  height: 500px;

}
#main-slider.carousel .item{background-position: 50%;
  background-repeat:no-repeat;
  background-size: cover;}



#user-four .portfolio-wrapper{ position:relative; width:100%; height:160px; overflow:hidden;}
#user-four .img-responsive{height:160px;width:100%;}
#user-four .label-title{ position:absolute; color:#fff;width:100%; height:100%;bottom:-120px; left:0; text-align:center;  transition:all .3s ease-in-out;}
.label-title .label-text{ font-size:18px; }
#user-four .col-lg-3:hover .label-title{ bottom:0;}
#user-four .col-lg-3:hover .label-text{ margin-top:18px;}
#user-four .text-category{ padding-top:7px; display:inline-block;}
.text-category i{ background:url(../images/icon-bg.png) no-repeat; display:inline-block; float:left;}
#user-four .home{ background: rgba(155, 199, 56, 0.60);}
.home .text-category i{ background-position:0 -45px; width:35px; height:23px;}
.business .text-category i{background-position:0 -79px; width:35px; height:23px;}
#user-four .business{background: rgba(100, 207, 207, 0.60);}
#user-four .farming{background: rgba(109, 176, 91, 0.60);}
.farming .text-category i{background-position:0 -114px; width:40px; height:25px;}
#user-four .off-line{background: rgba(248, 173, 59, 0.60);}
.off-line .text-category i{background-position:0 -151px; width:40px; height:29px;}
#user-four .small-title{ font-size:12px; line-height:26px; padding:10px 18px 0; max-height:55px; overflow:hidden;}
#user-four .fa-plus-circle{ font-size:24px;}

#two-colum{ margin:60px 0;}
#two-colum .left-big-title{ background-color:#eee;}
#two-colum .left-big-title h2{ font-size:24px; color:#666;font-weight:bold; margin-top:10px;}
#two-colum .fa-question{ background-color:#88c480; font-size:30px; color:#fff; padding:10px 25px 10px 20px; float:left;  }
#two-colum .green-arrow{  display: block; content: "";   
    width: 13px; float:left;
    height: 13px; margin:17px 20px 0 -9px;
    background-color: #88c480;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-bottom: 10px;
}
#two-colum .txtblock{ font-size:14px; line-height:24px; margin-top:20px;}

#use-percent{ background:url(../images/slider/percent.png) no-repeat 50% 50%; padding:45px 0; background-size: cover;}
#use-percent .line-middle-title{ padding-left:0; padding-right:0;}
#use-percent .border-line{ background-color:#fff; margin:1.2em 0; width:100%; height:1px;}
#use-percent h1{ text-align:center;font-size:24px; color:#fff; margin-top:4px; margin-bottom:40px;}
#use-percent h1 span{  position:absolute; height:1px; background-color:#fff; display:inline-block;}
#use-percent .col-lg-3{ position:relative;}
#use-percent h3{ font-size:30px; color:#000; text-align:center; position:absolute; left:0; top:45px; width:100%;}
#use-percent h4{ color:#fff; font-size:14px;font-family:"宋体";}
#use-percent h4 i{ display:inline-block; width:22px; margin-right:8px; border-bottom:4px solid #99cc33; height:1px;}
#use-percent .business-use h4 i{ border-bottom:4px solid #54caca;}
#use-percent .farming-use h4 i{ border-bottom:4px solid #6ab560;}
#use-percent .offline-use h4 i{ border-bottom:4px solid #fbad37;}