/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}


.container {
    margin: 0 40px !important;
    width: auto !important;
}
.header-menu{
    display: block;
    padding: 18px 0 10px;

    -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
.header-menu.small-nav-menu{
    display: block;
    padding: 8px 0 0;
    
    -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease; 
}

.header-menu .label-logo{
    font-size: 27px;
    font-weight: bold;
    padding: 0;
    margin: -3px 0 8px;
    color: #0094df;
}
.header-menu .label-logo .detail {
    float: left;
    font-size: 22px;
    margin: 7px 0 0 9px;
}
.header-menu .label-logo .small {
    color: #000;
    font-size: 13px;
    letter-spacing: 6.4px;
}
.header-menu .label-logo:hover{
    color: #0094df;
}
.header-menu .label-logo img{
    width: 50px;
    float: left;
}
.header-menu.small-nav-menu .label-logo{
    font-size: 30px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 8px;
}
.header-menu.small-nav-menu .label-logo img{
    width: 40px;
}

.portfolio{
    margin-bottom: 30px;
    color: inherit;
    display: block;
}
.portfolio .desc{
    display: block;
}
.portfolio h4{
    margin: 0;
    font-weight: bold;
}
.portfolio .box-height{
    height: 195px;
    overflow: hidden;
    margin-bottom: 15px;
}
.portfolio .border-img{
    height: 210px;
    max-width: 100%;

    display: table-cell;
    vertical-align: middle;
}
.img-portfolio {
    margin-bottom: 10px;
    max-width: 100%;
    width: 100%;
}

.img-hover:hover {
    opacity: 0.8;
}

.thum-related-product{
    text-align: center;
    color: inherit;
    font-weight: bold;
    display: block;
}
.thum-related-product .box-img{
    height: 144px;
    overflow: hidden;

    display: table-cell;
    vertical-align: middle;
}
.thum-related-product .box-img img{
    max-width: 100%;
    width: 100%;
}


.thumb-all-portfolio .box-height{
    height: 207px;
    overflow: hidden;
    margin-bottom: 10px;
}
.thumb-all-portfolio .box-img{
    height: 207px;
    width: 100%;

    display: table-cell;
    vertical-align: middle;
}

.thumb-all-portfolio .box-img img{
    max-width: 100%;
    width: 100%;
}

.thumb-all-portfolio{
    margin-bottom: 20px;
}
.thumb-all-portfolio h3{
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow: ellipsis; 
}


.hero-feature{
    position: relative;
}
.hero-feature a{
    display: block;
}
.thumb-highlight .box-height{
    height: 130px;
    overflow: hidden;
    margin-bottom: 10px;
}
.thumb-highlight .box-img{
    height: 130px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;

    display: table-cell;
    vertical-align: middle;    
}
.thumb-highlight img{
    max-width: 100%;
    width: 100%;
}


.page-header a{
    color: inherit;
    text-decoration: none;
}
/* Home Page Carousel */

header.carousel {
    height: 240px;
    margin-top: 34px;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
    border-bottom: 3px solid orange;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}


.mb-50{
    margin-bottom: 50px !important;
}

.det-content{
    width: 100%;
    margin-bottom: 10px;
}
.title-detail-products{
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    text-decoration: underline;
    margin: 15px 0 3px;
}

.page-header {
    margin: 64px 0 20px !important;
}
.navbar-nav>li>a{
    text-transform: uppercase;
}
.dropdown-menu li a{
    text-transform: capitalize;
}
.navbar-nav>li>.dropdown-menu {
    margin-top: 10px !important;
}
.navbar-nav > li > a{
    padding: 34px 15px !important;
    margin: -19px 0 -11px !important;
}

.navbar-default.small-nav-menu .navbar-nav>li>a, 
.navbar-default.small-nav-menu .navbar-nav>li>a:hover{
    padding: 34px 15px 20px !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a{
    color: #FF5722 !important;
    background-color: #e7e7e7;
    border-bottom: 4px orange solid;
    padding: 34px 15px 30px !important;
}
.dropdown-menu li a:hover{
    background-color: orange !important;
    color: #fff !important;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}


/*.navbar-nav > li > a.active,
.navbar-nav > .open > a,
.navbar-nav > li > a:hover{
    background-color: orange !important;
    color: #fff !important;
}
*/
.pagination>.selected>a, .pagination>.selected>a:focus, .pagination>.selected>a:hover, .pagination>.selected>span, 
.pagination>.selected>span:focus, .pagination>.selected>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination .first,
.pagination .last{
    display: none;
}



/* Footer Styles */

footer {
    margin: 50px 0 0;
}
#footer {
    background:  #f7f7f7;
    color: #cccecf;
    padding: 40px 0 18px;
}

footer .block-content p a{
    background-color: #ea5503;
    color: white;
    margin-bottom: 30px;
    font-size: 23px;
    font-weight: bolder;
    padding: 19px 23px 14px 23px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 23px 50%;
    text-transform: uppercase;
    max-width: 100%;
    white-space: nowrap;
}
footer .block-content p a:hover{
    text-decoration: none;
}
footer span.btn a{
    color: #fff;
    text-decoration: none;
}
footer span.btn{
    padding: 5px 0;
    font-size: 20px;
    width: 45px;
    opacity: 0.5;
    margin-top: 20px;
    margin-right: 5px;

    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
footer span.btn:hover{
    padding: 5px 0;
    font-size: 20px;
    width: 45px;
    opacity: 1 !important;

    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
footer h3.title{
    margin: -12px 0 17px;
    color: #FFF;
    border-bottom: #FFF solid 2px;
    padding-bottom: 8px;
    font-weight: bold;
}
footer ul{
    margin: 0;
    padding: 0;
}
footer ul li {
    list-style: none;
    margin-bottom: 5px;
}
footer ul li a{
    color: #cccecf;
}
footer ul li a:hover{
    color: #cccecf;
    text-decoration: underline;
}
footer .copyright{
    text-align: center;
	color: #666666 ;
}

footer .btn-top-webs {
  background: #9E9E9E;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  display: block;
  float: right;
  height: 40px;
  text-align: center;
  width: 40px;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  top: -24px;
  cursor: pointer;
}
footer .btn-top-webs:hover {
  background: #000;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
footer .btn-top-webs .glyphicon {
    color: #fff;
    margin: 11px 0 0 -2px;
    vertical-align: top;
}

/*Nav bar search*/
.search-active {
    position: absolute;
    right: -19px;
    opacity: initial;
    padding: 0;
    top: 3px;
    display: none;
}
.search-active .close {
    position: absolute;
    right: 50px;
    z-index: 1;
    top: 14px;
}
.search-active form {
  height: 100%;
  margin: 0;
  position: relative;
  width: 100%;
}
.search-active .search-string,
.search-active .search-string:hover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
    color: #1e1e1e;
    font-size: 24px;
    height: 100%;
    line-height: 30px;
    margin: 0;
    padding: 7px 105px 7px 18px;
    width: 100%;    
}
.search-active .search-string:focus {
  border-color: #ccc;
  outline: 0;
  outline: thin dotted \9;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.search-active .search-submit {
    background: none;
    border: none;
    height: 30px;
    line-height: 1;
    margin: 0;
    outline: none;
    padding: 0;
    position: absolute;
    right: 1px;
    top: 9px;
    width: 40px;
    border-left: 1px solid rgba(158, 158, 158, 0.36);

    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.search-active .search-submit svg {
  margin-top: 2px;
}
.search-active .search-submit svg path {
  fill: #1e1e1e;
}
.search-active .search-submit:hover {
  opacity: .5;
  filter: alpha(opacity=50);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}



.hero-feature h3{
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;     
}


/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}
@media(min-width:991px) {
    body > .container{
        min-height: 499px;
    }
}

@media(max-width: 950px){
    .container {
        width: auto !important;
        margin: 15px !important;
    }
}

@media(min-width: 767px) and (max-width: 950px){
    .header-menu .label-logo img {
        float: left;
        margin-right: 8px;
        width: 50px;
    }
    .header-menu .label-logo div {
        float: left;
        font-size: 19px;
        line-height: 19px;
        padding: 5px 0 0;
        width: 170px;
    }
    .header-menu .label-logo .detail {
        float: left;
        font-size: 22px;
        margin: -10px 0 0;
    }
    .header-menu .label-logo .small {
        color: #000;
        font-size: 12px;
        letter-spacing: 1.7px;
        padding: 0;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }

    .header-menu .label-logo img {
        float: left;
        margin-right: 10px;
    }
    .header-menu .label-logo .detail {
        float: left;
        font-size: 22px;
        margin: -10px 0 0;
    }
    .header-menu .label-logo div {
        float: left;
        font-size: 22px;
        line-height: 22px;
        padding: 5px 0 0;
        width: 315px;
    }

    .search-active {
        position: absolute;
        right: 0;
        opacity: initial;
        padding: 0;
        display: none;
        bottom: -14px;
        top: inherit;
    }
}

@media(max-width:500px) {
    .thumb-all-portfolio .box-img {
        height: auto;
        margin-bottom: 0;
    }
    .thumb-all-portfolio h3 {
        margin-top: 10px;
    }
}

@media(max-width:450px) {
    .header-menu .label-logo {
        margin: 0 0 8px;
    }
    .header-menu .label-logo img {
        width: 37px;
    }
    .header-menu .label-logo div {
        float: left;
        font-size: 22px;
        line-height: 22px;
        padding: 5px 0 0;
        width: 210px;
    }
    .header-menu .label-logo .small {
        color: #000;
        font-size: 13px;
        letter-spacing: 1.8px;
        padding: 0;
    }
}