/*
	Theme Name: TCN DESIGN
	Description: TCN WordPress Theme
	Version: 1.1.2
	Author: TCN
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/
body{font-family: 'Roboto', sans-serif; max-width: 1920px; margin: 0 auto; -webkit-text-size-adjust: 100%!important; font-weight:300; font-size: 14px;}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dynamic-height {
    overflow: hidden;
    position: relative;
}
.read > p {
    line-height: 25px;
    margin-bottom: 20px;
}
strong {
    font-weight: bold;
}
*:focus {
    outline: 0;
}
.text-detail > h2 {
    text-align: center;
}
.boxclose {
    background: url("img/button_close_20x23.png") no-repeat 15px 15px;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 100;
}
@media (max-width: 1023px) {
    .boxclose {
        background: url("img/button_close_white_20x23.png") no-repeat 15px 15px;
    }
}
.layer-menu {
    height: 10000px;
    position: fixed;
    top: 0;
    width: 10000px;
    z-index: 109;
    display: none;
}
.theme-socials a{
    color: #777;
    text-decoration: none;
    margin-left: 4px;
    display: inline-block;
    font-size: 18px;
}
.theme-socials a:hover,
.theme-socials a:focus{
    color: #fff;
}
@media (max-width: 640px){
    h2{
        -webkit-text-size-adjust: 100%!important;
    }
    .read {
        -webkit-text-size-adjust: 100%!important;
    }
}
.bx-wrapper{
    margin: 0;
    padding: 0;
}
.bx-wrapper .bx-viewport {
    background: none;
    border: none;
    box-shadow: none;
    left: 0;
    transform: none;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#loader, #loader-cus {
    background: none repeat scroll 0 0 #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#loader-cus{
    height: 102%;
    position: absolute;
    display: none;
}
#loader .spinner, #loader-cus .spinner {
    bottom: 0;
    height: 40px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
#loader .double-bounce1,#loader .double-bounce2, #loader-cus .double-bounce1,#loader-cus .double-bounce2  {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2s infinite ease-in-out;
    animation: bounce 2s infinite ease-in-out;
}

#loader .double-bounce2, #loader-cus .double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes bounce {
    0%,100% {
        -webkit-transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes bounce {
    0%,100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
/*--Header--*/
header{
    padding: 0 25px;
    background-color: #000;
    height: 63px;
    display: flex;
    align-items: center;
}
header .head-logo {
    /*float: left;*/
    padding: 5px 0;
    width: 115px;
    height: 100%;
}
header .head-logo img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
}
header .menu-wrapper {
    /*float: right;*/
    margin-left: auto;
}
@media (min-width: 1024px){
    header .menu-nav-desktop{
        height: 100%;
        height: 63px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .menu-nav{
        display: none;
    }
    .menu-wrapper .menu {
        display: table;
        height: 100%;
    }
    .menu-wrapper .menu > li {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 100px;
        border-top: 2px solid #000;
    }
    .menu-wrapper .menu > li.current-menu-item, .menu-wrapper .menu > li.current-menu-parent{
        border-color: #fff;
    }
    .menu-wrapper .menu > li > a {
        color: #777;
        display: table-cell;
        font-size: 13px;
        height: 63px;
        text-decoration: none;
        vertical-align: middle;
        width: 100px;
    }
    .menu-wrapper .menu > li.current-menu-item > a, .menu-wrapper .menu > li.current-menu-parent > a{
        color: #fff;
    }
    button.open{
        display: none;
    }
    /*sub menu*/
    header{
        position: relative;
    }
    header .sub-menu {
        height: 35px;
        position: absolute;
        right: 0;
        top: 63px;
        z-index: 201;
        display: none;
    }
    .menu-item-has-children:after{
        background-color: rgba(159, 156, 155, 0.8);
        bottom: -35px;
        content: "";
        height: 35px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 200;
        display: none;
    }
    .sub_after:after{
        background-color: rgba(159, 156, 155, 0.8);
        bottom: -35px;
        content: "";
        height: 35px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 100;
        display: block;
    }
    .sub-menu li {
        display: table;
        float: left;
        height: 100%;
        margin-right: 25px;
    }
    .sub-menu li > a {
        color: #fff;
        display: table-cell;
        font-size: 13px;
        text-decoration: none;
        vertical-align: middle;
    }
    .sub-menu li:first-child {
        margin-right: 40px;
    }
    .sub-menu li.current-menu-item > a{
        color: #000;
    }
    .menu-wrapper .menu > li:hover{
        border-color: #fff;
    }
    .menu-wrapper .menu > li:hover > a{
        color: #fff;
    }
    header .menu > li:hover > ul, .menu-item-has-children:hover:after{
        display: block;
    }
    .sub-menu li:hover > a{
        color: #000;
    }
}
@media (max-width: 1023px) {
    header{
        padding: 0 0 0 15px;
        height: 55px;
    }
    .menu-nav-desktop{
        display: none;
    }
    .head-logo img {
        width: 115px;
    }
    .theme-socials{
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .theme-socials a{
        color: #fff;
        font-size: 24px;
    }
    .menu-nav .menu li {
        border-bottom: 1px solid #bd5532;
        min-height: 55px;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .menu-nav .menu li.current-menu-item, .menu-nav .menu > li.current-menu-parent {
        background-color: #000;
        border-left: 2px solid #ccc;
    }
    .menu-wrapper .menu li > a {
        color: #fff;
        left: 15px;
        position: relative;
        text-decoration: none;
    }
    .menu-wrapper .menu li.current-menu-item > a, .menu-wrapper .menu li.current-menu-parent > a{
        color: #d14212;
    }
    body a.last{
        height: 100%;
    }
    .menu-wrapper {
        height: 100%;
        position: relative;
        /*right: 0;*/
        /*bottom: 0;*/
        /*top: 0;*/
        width: 0;
        z-index: 110;
    }
    .set-width{
        width: 50%;
    }
    .hide-sub {
        background-color: #872b0c;
    }
    .menu-wrapper .menu li.hide-sub > a {
        display: block;
        font-size: 15px;
        padding-left: 18px;
        position: relative;
    }
    .menu-wrapper .menu li.hide-sub > a:before {
        content: "\003C";
        font-size: 17px;
        left: 0;
        padding-right: 5px;
        position: absolute;
        top: 0;
    }
    .menu-wrapper .menu .menu-item-has-children > a {
        position: relative;
    }
    .menu-item-has-children > a:after {
        content: ">\0000a0";
        font-size: 18px;
        padding-left: 10px;
        position: absolute;
        top: 0;
    }
    .menu-nav {
        background: #ab370f;
        float: right;
        height: 100%;
        position: fixed;
        right: -100%;
        bottom: 0;
        top: 0;
        max-width: 245px;
        width: 0;
        transition: right 0.5s;
        -webkit-transition: right 0.5s;
    }
    /*button.open:after {*/
    /*background-color: #fff;*/
    /*box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;*/
    /*content: "";*/
    /*height: 3px;*/
    /*left: 10px;*/
    /*position: absolute;*/
    /*top: 14px;*/
    /*width: 30px;*/
    /*}*/
    button.open {
        background: url("img/button_menu_55.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #d14212;
        float: right;
        height: 55px;
        position: absolute;
        right: 0;
        width: 55px;
        transition: right 0.5s;
        -webkit-transition: right 0.5s;
        z-index: 111;
    }
    /* for high resolution display */

    @media only screen and (min--moz-device-pixel-ratio: 2),

    only screen and (-o-min-device-pixel-ratio: 2/1),

    only screen and (-webkit-min-device-pixel-ratio: 2),

    only screen and (min-device-pixel-ratio: 2) {

        button.open {

            background: url("img/button_menu.png") no-repeat 0 0;
            /* rest of your styles... */
            background-size: 55px 55px;
        }

    }
    /*Sub menu*/
    header .sub-menu {
        height: 100%;
        position: absolute;
        top: 0;
        width: 0;
        z-index: 200;
        right: -100%;
        background-color: #ab370f;
        transition: right 0.5s;
        -webkit-transition: right 0.5s;
    }

    header .sub-menu .current-menu-item{
        background-color: whitesmoke;
    }
    header .sub-menu .current-menu-item > a{
        color: maroon;
        font-weight: bold;
    }
}

/*--Home Page--*/
/*hover*/
#home .bxslider .effect:after {
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#home .bxslider .effect {
    position: relative;
}
#home .bxslider figcaption {
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#home .bxslider .fig-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#home .bxslider h2 {
    color: #fff;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
}
#home .bxslider .sub_title {
    font-size: 26px;
    font-weight: normal;
}
#home .bx-wrapper {
    position: relative;
}
.dotted-line:before {
    left: -245px;
}
.dotted-line:after {
    left: 11px;
}
.dotted-line {
    background-color: #fff;
    border-radius: 50%;
    display: block;
    height: 5px;
    margin: 15px auto 20px;
    position: relative;
    width: 5px;
}
#home .dotted-line:before, #home .dotted-line:after{
    background-color: rgba(255, 255, 255, 0.4);
}
.dotted-line:before, .dotted-line:after{
    background-color: rgba(1, 1, 1, 0.5);
    content: " ";
    height: 1px;
    position: absolute;
    top: 3px;
    width: 240px;
}
@media (max-width: 767px) {
    #home .bxslider h2 {
        font-size: 20px;
        line-height: 25px
    }
    #home .bxslider .sub_title {
        font-size: 17px;
    }
    .dotted-line:before, .dotted-line:after {
        width: 75px;
    }
    .dotted-line:before {
        left: -80px;
    }
    .dotted-line:after {
        left: 12px;
    }
}
/*bxslider*/
#home .bx-wrapper, #home .bx-viewport, #home .bxslider, #home .bxslider > li, #home .bxslider > li .effect, #home .bxslider img{
    height: 100%!important;
}
.bx-pager-custom > div {
    width: 20px;
    height: 20px;
}
.bx-pager-custom > div > a {
    background-color: #fff;
    border-radius: 50%;
    display: block;
    height: 5px;
    margin: 0 auto;
    width: 5px;
    position: relative;
    top: 8px;
}
.bx-pager-custom > div > a.active {
    background-color: transparent;
    border: 1px solid #fff;
    height: 10px;
    width: 10px;
    top: 5px;
}
.more-info {
    border: 1px solid #fff;
    color: #fff;
    font-size: 10px;
    padding: 5px;
    text-decoration: none;
    text-transform: uppercase;
}
@media (min-width: 1025px) {
    /*hover*/
    #home .bxslider .fig-content,#home .bxslider .effect:after, #home .dotted-line, #home .bx-pager-custom{
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        opacity: 0;
    }
    #home:hover .bxslider .effect:after, #home:hover .bxslider .fig-content, #home:hover .dotted-line, #home:hover .bx-pager-custom{
        opacity: 1;
    }
    /*bxslider*/
    #home .center-middle {
        display: table;
        height: 100% !important;
        position: absolute;
        right: 35px;
        top: 0;
    }
    #home .bx-pager-custom {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
    }
    .bx-pager-custom > div:hover > a {
        background-color: transparent;
        border: 1px solid #fff;
        height: 10px;
        width: 10px;
        top: 5px;
    }
}
@media (max-width:1024px) {
    /*get center of image*/
    #home .bxslider .effect{
        overflow: hidden;
    }
    #home .bxslider .effect > img{
        position: relative;
    }
    #home .bx-pager-custom {
        bottom: 30px;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    #home .bx-pager-custom > div {
        display: inline-block;
    }
}
@media (max-width: 640px) {
    #home .bx-pager-custom {
        bottom: 10px;
    }
    .dotted-line{
        margin: 10px auto;
    }
}
/*--Service Page--*/
#service {
    position: relative;
}
/*Hover*/
#service .bx-pager, #service .bx-pager .effect{
    height: 100%;
}
#service .bx-pager .effect:after {
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}
#service .bx-pager .effect {
    position: relative;
}
#service .bx-pager figcaption {
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#service .bx-pager .fig-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#service .bx-pager h2 {
    color: #fff;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
    font-size: 25px;
}

#service .bx-pager .sub_title {
    font-size: 26px;
    font-weight: normal;
}
@media (min-width: 1024px) {
    #service .bx-pager .effect {
        width: 25%;
        transition: width 0.4s;
        -webkit-transition: width 0.4s;
        overflow: hidden;
        float: left;
    }
    #service .effect > img {
        position: relative;
    }
    /*show content*/
    #service .content-img {
        overflow: hidden;
    }
    #service .content-img > img {
        position: relative;
    }
}
@media (min-width: 1025px) {
    #service .bx-pager .pointer-sign {
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #service .bx-pager:hover .effect{
        width: 23.3333%;
    }
    #service .bx-pager .effect:hover{
        width: 30%;
    }
    #service .bx-pager .effect:hover:after, #service .bx-pager .effect:hover .text-content{
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #service .bx-pager .effect:hover .pointer-sign{
        height: auto;
        opacity: 1;
    }
}
@media (max-width: 1024px) {
    #service .bx-pager .pointer-sign {
        left: 45%;
        opacity: 1;
        top: 100%;
    }
    #service .effect>img{
        display: none;
    }
    #service .effect .service-img-mobile{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }
    #service .effect figcaption{
        z-index: 3;
    }
    #service .bx-pager .effect:after{
        z-index: 2;
    }
}
@media (max-width: 1023px) {
    #service .bx-pager {
        height: 100%;
    }
    #service .bx-pager .effect > img {
        height: 100%;
        width: 100%;
    }
    #service .show-detail .content-img > img{
        height: auto;
        width: 100%;
    }
}
@media (max-width: 640px) {
    h2 {
        font-size: 20px;
    }
    #service .bx-pager h2 {
        font-size: 20px;
        line-height: 23px;
    }
    #service .bx-pager .sub_title {
        font-size: 14px;
    }
}
/*Content Info*/
#service .show-detail {
    z-index: -1;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #fff;
}
#service .dotted-line {
    background-color: #000;
}
#service .bxslider h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
    text-transform: uppercase;
}
#service .bxslider .sub_title {
    font-size: 25px;
    font-weight: normal;
}
#service .dotted-line:before, #service .dotted-line:after {
    width: 30px;
}
#service .dotted-line:before {
    left: -36px;
}
#service .dotted-line:after {
    left: 11px;
}
#service .text-detail {
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    width: 60%;
    z-index: 1;
}
@media (min-width: 1024px) {
    #service .show-detail, #service-slide, #service-slide .owl-wrapper-outer, #service-slide .owl-wrapper-outer div, #service .content-img > img{
        height: 100%!important;
    }
    #service .show-detail .clearfix {
        overflow: hidden;
    }
    #service .content-info {
        background-color: #fff;
        height: 100%;
        padding: 10px 0;
        position: absolute;
        right: 0;
        top: 0;
        transform: skewX(18deg);
        -webkit-transform: skewX(18deg);
        width: 50%;
    }
    #service .content-info:after {
        background-color: #fff;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: skewX(-18deg);
        -webkit-transform: skewX(-18deg);
        width: 50%;
    }
    #service .text-detail{
        transform: skewX(-18deg);
        -webkit-transform: skewX(-18deg);
    }
}
#service .effect > img {
    height: 100%;
}
@media (max-width: 1023px) {
    #service .text-detail{
        margin: 30px auto;
        position: inherit;
    }
}
@media (max-width: 640px) {
    #service .bxslider .sub_title {
        display: block;
        font-size: 15px;
        margin-top: 5px;
    }
}
/*bxslider*/
#service .show-detail .bx-controls-custom {
    bottom: 0;
    position: absolute;
    width: 50%;
}
#service .show-detail .bx-direction-custom a {
    background: url("img/control-direction.jpg") no-repeat;
    border-radius: 50%;
    height: 50px;
    position: absolute;
    text-indent: 10000px;
    top: 0;
    width: 50px;
    z-index: 100;
}
#service .show-detail .bx-direction-custom a.bx-prev {
    left: 20px;
}
#service .show-detail .bx-direction-custom a.bx-next {
    right: 60px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
#service .show-detail .bx-pager-custom {
    bottom: 30px;
    left: 46%;
    position: absolute;
    z-index: 100;
}
#service .show-detail .bx-pager-custom > div {
    float: left;
}
#service .show-detail .bx-pager-custom > div > a{
    background-color: #fff;
}
#service .show-detail .bx-pager-custom > div > a.active{
    background-color: transparent;
    border: 1px solid #fff;
}
@media (min-width: 1024px) {
    #service .show-detail .bx-controls-custom {
        height: 50px;
    }
}
@media (min-width: 1025px) {
    #service .show-detail .bx-pager-custom > div:hover > a{
        background-color: transparent;
        border: 1px solid #fff;
    }
}
@media (max-width: 1023px){
    #service .show-detail .bx-controls-custom {
        bottom: auto;
        top: 0;
        width: 100%;
    }
    #service .show-detail .bx-direction-custom a{
        top: 85%;
    }

}
@media (max-width: 640px){
    #service .show-detail .bx-direction-custom a.bx-next {
        right: 25px
    }
    #service .bxslider h2 {
        font-size: 15px;
        line-height: 15px;
    }
}
/*--Portfolio page --*/
#portfolio {
    position: relative;
    background-color: #fff;
}
/*hover*/
#portfolio .container .effect:after {
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
}
#portfolio .container .effect {
    float: left;
    overflow: hidden;
    transition: width 0.4s ease 0s;
    -webkit-transition: width 0.4s ease 0s;
    width: 33.333%;
    position: relative;
}
#portfolio .container figcaption {
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#portfolio .container .fig-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#portfolio .container h2 {
    color: #fff;
    font-weight: bold;
    line-height: 23px;
    text-transform: uppercase;
    font-size: 20px
}
#portfolio .container .sub_title {
    font-size: 26px;
    font-weight: normal;
}
#portfolio .container .pointer-sign > a > img{
    display: block;
    margin: 0 auto;
}
#portfolio .container .effect > a > img{
    width: 100%;
    height: 100%;
}
@media (min-width: 1025px) {
    #portfolio .container .pointer-sign {
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #portfolio .container .effect:hover:after, #portfolio .container .effect:hover .text-content{
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #portfolio .container .effect:hover .pointer-sign{
        height: auto;
        opacity: 1;
    }
}
/*bxslider*/
#portfolio .container {
    position: relative;
}
#portfolio .container .bx-direction-custom {
    background-color: #000;
    height: auto;
    position: fixed;
    right: 0;
    top: 45%;
}
#portfolio .container .bx-direction-custom > div {
    color: #fff;
    padding: 5px;
}
#portfolio .container .bx-next, #portfolio .container .bx-prev {
    background: none;
    color: #fff;
    display: block;
    margin: 5px 0 0 5px;
    text-decoration: none;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
#portfolio .container .info-slide {
    border-bottom: 1px solid #4f4f4f;
    border-top: 1px solid #4f4f4f;
    font-size: 11px;
    height: 33px;
    line-height: 20px;
}
#portfolio .container .bx-direction-custom .red {
    color: red;
}
.data-slider{
    display: none;
}
@media (max-width: 1024px) {
    #aboutus .bx-viewport{
        height: 100%!important;
    }
    #portfolio .container .pointer-sign{
        opacity: 1;
        position: unset;
    }
    #portfolio .container .bx-direction-custom{
        display: none;
    }
}
@media (max-width: 1023px) {
    #portfolio .container .effect{
        width: 50%;
    }
    #cus-bx-prev_1 {
        right: 100px;
    }
    #cus-bx-next_1 {
        right: 67px;
    }
    #portfolio .boxclose{
        top: 0;
        right: 0;
        border: none;
    }
}
@media (max-width: 640px){
    #portfolio .container .effect{
        width: 100%;
    }
}
/*--Clienteles--*/
/*hover*/
#clientele{
    position: relative;
    background-color: #fff;
}
#clientele .container .effect {
    float: left;
    overflow: hidden;
    position: relative;
    transition: width 0.4s ease 0s;
    -webkit-transition: width 0.4s ease 0s;
    width: 33.333%;
}
#clientele .container .effect > a {
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
}
#clientele .container .effect > a > img {
    width: 100%;
    height: 100%;
}
@media (min-width: 1025px){
    #clientele .container .effect:hover:after{
        top: -10000px;
    }
    #clientele .container .effect:after {
        background-color: rgba(0, 0, 0, 0.5);
        content: "";
        height: 100%;
        opacity: 1;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
@media (max-width: 1023px){
    #clientele .container .effect{
        width: 50%;
        height: auto;
    }
}
@media (max-width: 767px){
    #clientele .container .effect{
        width: 100%;
    }
}
/*bxslider*/
#clientele .container .bx-direction-custom {
    background-color: #000;
    height: auto;
    position: fixed;
    right: 0;
    top: 45%;
}
#clientele .container .bx-direction-custom > div {
    color: #fff;
    padding: 5px;
}
#clientele .container .bx-next, #clientele .container .bx-prev {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #fff;
    display: block;
    margin: 5px 0 0 5px;
    text-decoration: none;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
#clientele .container .info-slide {
    border-bottom: 1px solid #4f4f4f;
    border-top: 1px solid #4f4f4f;
    font-size: 11px;
    height: 33px;
    line-height: 20px;
}
#clientele .container .bx-direction-custom .red {
    color: red;
}
#clientele .container .bx-prev {
    background: none;
    color: #fff;
    display: block;
    margin: 5px 0 0 5px;
    text-decoration: none;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
/*show detail*/
#clientele .container{
    /*display: none;*/
}
#clientele .show-detail {
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: -1;
    bottom: 0;
}
#clientele .text-detail {
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 66%;
    z-index: 1;
    padding: 10px 0;
}
#clientele .detail-slide h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
    text-transform: uppercase;
}
#clientele .detail-slide .sub_title {
    font-size: 25px;
    font-weight: normal;
}
#clientele .dotted-line {
    background-color: #000;
}
#clientele .dotted-line:before {
    left: -36px;
}
#clientele .dotted-line:before, #clientele .dotted-line:after {
    width: 30px;
}
#clientele .dotted-line:after {
    left: 11px;
}
.link .effect {
    display: none;
}
@media (min-width: 1024px) {
    #clientele .content-info:after {
        background-color: #fff;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: skewX(-18deg);
        -webkit-transform: skewX(-18deg);
        width: 50%;
    }
    #clientele .content-info {
        background-color: #fff;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: skewX(18deg);
        -webkit-transform: skewX(18deg);
        width: 50%;
    }
    #clientele .text-detail {
        transform: skewX(-18deg);
        -webkit-transform: skewX(-18deg);
        top: 110px;
    }
    #clientele .content-img {
        overflow: hidden;
    }
    #service .show-detail .clearfix{
        overflow: hidden;
    }
}
@media (min-width: 1025px) {
    #clientele .text-detail {
        top: 110px;
    }
}
@media (max-width: 1024px) {
    #clientele .container .bx-direction-custom {
        display: none;
    }
}
@media (max-width: 1023px) {
    #clientele .content-img > img {
        width: 100%;
    }
    #clientele .text-detail{
        margin: 30px auto;
        position: unset;
    }
}

/*show detail bxslider*/
#clientele .show-detail .bx-direction-custom a.bx-prev {
    left: 20px;
}
#clientele .show-detail .bx-direction-custom a {
    background: url("img/control-direction.jpg") no-repeat 0 0;
    border-radius: 50%;
    height: 50px;
    position: absolute;
    text-indent: 10000px;
    top: 0;
    width: 50px;
    z-index: 100;
}
#clientele .show-detail .bx-controls-custom {
    bottom: 0;
    position: absolute;
    width: 50%;
}
#clientele .show-detail .bx-pager-custom {
    bottom: 30px;
    left: 46%;
    position: absolute;
    display: none;
}
#clientele .show-detail .bx-pager-custom > div {
    float: left;
}
#clientele .show-detail .bx-pager-custom > div > a.active {
    background-color: transparent;
    border: 1px solid #666666;
}
#clientele .show-detail .bx-pager-custom > div > a {
    background-color: #666666;
}
#clientele .show-detail .bx-direction-custom a.bx-next {
    right: 70px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
@media (min-width: 1024px) {
    #clientele .show-detail .bx-controls-custom {
        height: 50px;
    }
}
@media (min-width: 1025px) {
    #clientele .show-detail .bx-pager-custom > div:hover > a{
        background-color: transparent;
        border: 1px solid #666666;
    }
}
@media (max-width: 1024px) {
    #clientele .show-detail .bx-pager-custom{
        display: none;
    }
}
@media (max-width: 1023px) {
    #clientele .show-detail .bx-controls-custom {
        bottom: auto;
        top: 0;
        width: 100%;
    }
    #clientele .show-detail .bx-direction-custom a {
        top: 85%;
    }
    #clientele .show-detail .bx-direction-custom a.bx-next{
        right: 25px;
    }
}
/*--Contact Us Page --*/
/*hover*/
#contact .container .effect {
    position: relative;
}
#contact .container, #contact .container .effect{
    height: 100%;
}
#contact .container figcaption {
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#contact .container .fig-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#contact .container h2 {
    color: #fff;
    font-weight: bold;
    line-height: 35px;
    text-transform: uppercase;
}
#contact .container .sub_title {
    font-size: 26px;
    font-weight: normal;
}
#contact .dotted-line {
    background-color: #000;
}
#contact .dotted-line:before, #contact .dotted-line:after {
    width: 30px;
}
#contact .dotted-line:before {
    left: -36px;
}
#contact .dotted-line:after {
    left: 11px;
}
#contact .view-map {
    margin: 35px;
    text-align: center;
}
#contact .view-map a {
    border: 1px solid #000;
    padding: 5px 15px;
    text-decoration: none;
    color: #616161;
    text-transform: uppercase;
}
@media (min-width: 1024px) {
    #contact .container .effect {
        width: 50%;
        transition: width 0.4s;
        -webkit-transition: width 0.4s;
        overflow: hidden;
        float: left;
    }
    #contact .container .effect > img {
        position: relative;
    }
}
@media (min-width: 1025px) {
    #contact .container .pointer-sign {
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #contact .container:hover .effect{
        width: 40%;
    }
    #contact .container .effect:hover{
        width: 60%;
    }
    #contact .container .effect:hover:after, #contact .container .effect:hover .text-content{
        height: 0;
        opacity: 0;
        transition: opacity 0.4s;
        -webkit-transition: opacity 0.4s;
        overflow: hidden;
    }
    #contact .container .effect:hover .pointer-sign{
        height: auto;
        opacity: 1;
    }
}
/*form*/
#contact #recaptcha_area {
    margin: auto;
}
#contact .form-customer {
    height: 100%;
}
#contact .form-customer .content-info.cont-img {
    padding-bottom: 0;
}
#contact .form-customer .content-info {
    background-color: #fff;
    float: left;
    position: relative;
    width: 50%;
    padding-bottom: 10px;
}
#contact .form-customer .text-detail {
    margin: 30px auto 0;
    text-align: center;
    width: 75%;
    z-index: 1;
    line-height: 20px;
}
#contact .wpcf7-form {
    margin: 0 auto;
    width: 90%;
}
#contact .wpcf7-form > div {
    margin-top: 15px;
}
#contact .wpcf7-form > div.style-float > span {
    display: block;
    float: left;
    width: 49%;
}
#contact  hr {
    background: #e3e3e3;
    border: medium none;
    height: 1px;
}
#contact .wpcf7-form textarea {
    border: 1px solid #e3e3e3;
    font-family: 'Roboto', sans-serif;
    height: 100px;
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
#contact .wpcf7-form .phone {
    margin-right: 2%;
}
#contact .wpcf7-form input {
    font-family: 'Roboto Condensed', sans-serif;
    border: 1px solid #e3e3e3;
    height: 40px;
    padding: 4px 10px;
    width: 100%;
    font-size: 14px;
}
#contact .wpcf7-form .contact-send {
    background: none;
    border: 1px solid #000;
    color: #616161;
    cursor: pointer;
    font-size: 13px;
    height: 28px;
    margin-left: 20px;
    width: 132px;
}
#contact .text-detail > h2 {
    text-transform: uppercase;
    font-weight: bold;
}
#contact .container .effect > img {
    position: relative;
    height: 100%;
}
#contact .read {
    color: #616161;
}
#contact .read a {
    color: #dd8663;
}
#contact .wpcf7-form #recaptcha_response_field {
    height: 20px;
    font-size: 13px;
    border: none;
}
@media (min-width: 1024px) {
    #contact .text-detail > h2 {
        font-size: 30px;
        line-height: 45px;
    }
    #contact .form-customer .content-info{
        height: 100%;
    }
    #contact .content-info .wp-post-image{
        height: 100%;
        left: -50%;
        position: relative;
    }
}
@media (max-width: 1024px) {
    #contact .container .pointer-sign{
        opacity: 1;
        top: 0;
    }
    #contact .wpcf7-form > div.style-float span{
        float: none;
        width: 100%;
    }
    #contact .wpcf7-form .phone {
        margin: 15px 0;
    }
}
@media (max-width: 1023px) {
    #contact.dynamic-height {
        overflow: inherit;
    }
    #contact .boxclose {
        background: url("img/button_close_20x23.png") no-repeat 15px 15px;
    }
    #contact .form-customer .content-info{
        float: none;
        width: 100%;
    }
    #contact .content-info .wp-post-image {
        width: 100%;
    }
    #contact .form-customer .text-detail > h2{
        line-height: 30px
    }
}
@media (max-width: 479px) {
    #contact .form-customer .text-detail, #contact .wpcf7-form{
        width: 100%;
    }
    #contact .wpcf7-form input, #contact .wpcf7-form textarea, #contact hr{
        width: 90%;
    }
}
/*--About Us --*/
#aboutus{
    position: relative;
}
#aboutus .text-detail {
    text-align: center;
    width: 66%;
}
#aboutus .bx-pager-custom {
    bottom: 30px;
    position: absolute;
    width: 100%;
}
#aboutus .detail-slide h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 32px;
    text-transform: uppercase;
}
#aboutus .detail-slide .sub_title {
    font-size: 25px;
    font-weight: normal;
}
#aboutus .dotted-line {
    background-color: #000;
}
#aboutus .dotted-line:before, #aboutus .dotted-line:after {
    width: 30px;
}
#aboutus .dotted-line:before {
    left: -36px;
}
#aboutus .dotted-line:after {
    left: 11px;
}
#aboutus .bx-pager-custom > div {
    display:inline-block;
}
#aboutus .bx-pager-custom > div > a.active{
    background-color: transparent;
    border: 1px solid #6c6c6c;
}
#aboutus .bx-pager-custom > div > a {
    background-color: #6c6c6c;
}
#aboutus .content-info {
    padding-bottom: 60px;
}

@media (min-width: 1024px) {
    #aboutus .content-info:after {
        background-color: #fff;
        content: "";
        height: 100%;
        position: absolute;
        right: -190px;
        top: 0;
        transform: skewX(-22deg);
        -webkit-transform: skewX(-22deg);
        width: 100%;
    }
    #aboutus .content-info {
        background-color: #fff;
        height: 100%;
        position: absolute;
        right: 135px;
        top: 0;
        transform: skewX(22deg);
        -webkit-transform: skewX(22deg);
        width: 40%;
    }
    #aboutus .text-detail {
        left: 45%;
        position: absolute;
        top: 60px;
        transform: skewX(-22deg);
        -webkit-transform: skewX(-22deg);
        z-index: 1;
    }
    #aboutus .bx-pager-custom {
        padding-left: 20%
    }
}
@media (min-width: 1025px){
    #aboutus .bx-pager-custom > div:hover > a {
        background-color: transparent;
        border: 1px solid #6c6c6c;
    }
}
@media (max-width: 1024px){
    #aboutus .bx-pager-custom {
        padding-left: 20%
    }
    #aboutus .text-detail {
        width: 75%;
    }
}
@media (max-width: 1023px) {
    #aboutus .content-img > img {
        height: auto !important;
        width: 100%;
    }
    #aboutus .text-detail {
        margin: 25px auto 0;
    }
    #aboutus .bx-pager-custom {
        text-align: center;
        padding: 0;
    }
}
@media (max-width: 640px){
    #aboutus .text-detail {
        text-align: center;
        width: 80%;
    }
    #aboutus .detail-slide h2{
        font-size: 15px;
        line-height: 17px
    }
}

/*--Footer--*/
footer {
    background-color: #000;
    padding: 15px 25px;
}
footer p {
    color: #d5613b;
}
@media (max-width: 1023px){
    footer{
        text-align: center;
    }
}
.bwp-recaptcha {text-align: center;}
.bwp-recaptcha > div {width: auto !important;}