/***********************
    Carosuel Style
************************/
.carousel-style-1 {position: relative}
.carousel-style-1 .owl-nav {}
.carousel-style-1 .owl-nav > div {
    background: #3fc58f none repeat scroll 0 0;
    color: #feffff;
    float: left;
    font-size: 24px;
    height: 60px;
    line-height: 58px;
    margin-left: -15px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width: 60px;
}
.carousel-style-1 .owl-nav > .owl-next {float: right; margin-right: -15px;}
.carousel-style-1 .owl-nav > div:hover {
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.carousel-style-2 .owl-nav {
    color: #333333;
    font-weight: 700;
    position: absolute;
    top: -41px;
    width: 100%;
}
.carousel-style-2 .owl-prev {float: left; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
.carousel-style-2 .owl-next {float: right; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
.carousel-style-2 .owl-nav i {color: #00a8ff; font-size: 24px; position: relative; top: 4px;}
.carousel-style-2 .owl-prev i {padding-right: 6px;}
.carousel-style-2 .owl-next i {padding-left: 6px;}
.carousel-style-2 .owl-nav > div:hover {color: #00a8ff;}

/*----------------------------------------*/
/*  7. Portfolio Area
/*----------------------------------------*/
.portfolio-area, .portfolio-two-area {position: relative;}
.portfolio-area:before, .portfolio-image-wrapper:before {
    background: #333 none repeat scroll 0 0;
    content: "";
    height: 485px;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% - 323px);
}
.portfolio-ball-wrapper {bottom: -35px; height: 100%; left: 0; position: absolute; width: 300px; z-index: 2;}
.portfolio-ball-1, .portfolio-ball-2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 164px 109px 0 rgba(221, 221, 221, 0.9);
    height: 300px;
    left: -92px;
    position: absolute;
    width: 300px;  
}
.portfolio-ball-1:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(80deg, #f5f7fa, #c3cfe2) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(10deg, #f5f7fa, #c3cfe2) repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: none;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-animation-name: spin;
            animation-name: spin;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; 
}
.portfolio-ball-2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    bottom: 178px;
    box-shadow: rgba(0, 0, 0, 0) linear-gradient(10deg, #f5f7fa, #c3cfe2) repeat scroll 0 0;
    height: 210px;
    left: 80px;
    width: 210px;
}
.portfolio-ball-2:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(80deg, #f5f7fa, #c3cfe2) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(10deg, #f5f7fa, #c3cfe2) repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: none;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-animation-name: spin;
            animation-name: spin;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; 
}
.portfolio-text-wrapper {float: left; width: 34.3%;}
.portfolio-text-title {
    background: #ffffff none repeat scroll 0 0;
    padding: 100px 25px 95px;
    position: relative;
    box-shadow: 0px 21px 250px 0px rgba(0, 0, 0, 0.2);
    z-index: 2
}
.portfolio-text-title > h3 {
    color: #212121;
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 16px;
    margin-bottom: 38px;
    text-transform: uppercase;
}
.portfolio-text-title p {margin-bottom: 0;
}
.portfolio-image-wrapper {
    float: left;
    padding-left: 50px;
    padding-top: 150px;
    position: relative;
    width: 65.7%;
    z-index: 2;
}
.portfolio-image-wrapper:before {opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; width: 100%;}
.portfolio-menu, .grid-menu-three, .p-section-menu {
    line-height: 0;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}
.portfolio-menu button, .grid-menu-three button, .p-section-menu button {
	border:0;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fefefe;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 10px;
    margin: 0 8px;
    padding: 0 10px;
    text-transform: uppercase;
}
.portfolio-menu button:nth-of-type(1), .grid-menu-three button:nth-of-type(1), .p-section-menu button:nth-of-type(1), .grid-menu-three button:nth-of-type(1) {
    margin-left: 0;
    padding-left: 0;
}
.portfolio-menu button.active, .grid-menu-three button.active, .p-section-menu button.active {color: #3fc58f;}
.portfolio-row {margin-left: -15px; margin-right: -15px}
.portfolio-column {padding-left: 15px; padding-right: 15px; width: 50%; float: left}
.portfolio-item {overflow: hidden; position: relative;}
.portfolio-item > a {display: block; position: relative;}
.portfolio-item > a:after {
    background: #00a8ff none repeat scroll 0 0;
    content: "";
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.portfolio-hover-effect {
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.portfolio-item:hover .portfolio-hover-effect {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.portfolio-item:hover > a:after {
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.portfolio-item > a img {width: 100%;}
.portfolio-hover-text {
    bottom: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    padding: 28px 30px;
    position: absolute;
    width: 100%;
}
.portfolio-item:hover .portfolio-hover-text {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
.portfolio-hover-text > h3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 2px;
    text-transform: uppercase;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.portfolio-hover-text > h3 a:hover {color: #cccccc;}
.portfolio-hover-text > span {
    color: #ffffff;
    display: block;
    font-weight: 600;
    padding-top: 8px;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;
}
.portfolio-item:hover .portfolio-hover-text > h3, .portfolio-item:hover .portfolio-hover-text > span {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
}
.portfolio-icon {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    color: #00a8ff;
    display: inline-block;
    font-size: 16px;
    height: 39px;
    line-height: 39px;
    margin: 0 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    width: 39px;
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    -webkit-transition: all 250ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
    transition: all 250ms cubic-bezier(1, -0.6, 0.57, -0.15) 0s;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition-delay: .2s;
            transition-delay: .2s
}
.portfolio-icon.img-popup {-webkit-transition-delay: .4s;transition-delay: .4s}
.portfolio-item .portfolio-icon:hover {
    background: #00a8ff none repeat scroll 0 0;
    color: #ffffff;
}
.portfolio-item:hover .portfolio-icon {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1);
            transform: scale(1);
    visibility: visible;
}
.portfolio-filter-carousel .owl-nav > .owl-prev, .portfolio-filter-carousel .owl-nav > .owl-next {
    float: left;
    margin: 0 5px;
}
.portfolio-filter-carousel .owl-nav {bottom: 67px; left: -174px; overflow: hidden; position: absolute;}
.portfolio-container > .row {overflow: hidden;}
 
 
 
 
/* Large desktop :1920px. */
@media (min-width: 1920px) {/* Normal desktop :992px. */

    .portfolio-text-carousel {padding: 100px 100px 95px;}
    .portfolio-filter-carousel .owl-nav {bottom: 205px; left: -295px;}
    .portfolio-area:before {width: calc(100% - 323px);}
    .portfolio-image-wrapper {padding-left: 100px;}
    .portfolio-text-title {padding: 100px 100px 95px;}
}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {   
    .portfolio-text-wrapper {width: 36%;}
    .portfolio-text-title {padding: 70px 25px 65px;}
    .portfolio-text-title > h3 {margin-bottom: 25px;}
    .portfolio-area:before {height: 366px;}
    .portfolio-image-wrapper {width: 64%; padding-left: 30px;}
    .portfolio-filter-carousel .owl-nav {bottom: 96px; left: -185px;}
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .portfolio-area:before, .what-about-do-area:after {display: none;}
    .portfolio-text-wrapper, .accordion-column, .portfolio-full-column {width: 100%;}
	.portfolio-text-title {padding: 50px 25px 35px;}
    .portfolio-image-wrapper:before {height: calc(100% - 160px); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
    .portfolio-image-wrapper {padding-left: 0; width: 100%; padding-top: 90px;}
    .portfolio-menu {margin-bottom: 65px; padding: 0 30px;}

    .portfolio-filter-carousel .owl-nav {bottom: -91px; left: 0; margin: auto; right: 0; text-align: center;} 
    .portfolio-image-wrapper {padding-bottom: 90px;}
    .portfolio-filter-carousel .owl-nav > .owl-prev, .portfolio-filter-carousel .owl-nav > .owl-next {
        display: inline-block;
        float: none;
    }
    .portfolio-two-area .portfolio-filter-carousel .owl-nav > .owl-prev {float: left;}
    .portfolio-two-area .portfolio-ball-2 {bottom: 145px; height: 150px; width: 150px;}
    .portfolio-two-area .portfolio-ball-1 {height: 210px; width: 210px;}
}

/* small mobile :320px. */
@media (max-width: 767px) { 

    .portfolio-text-wrapper {
        width: 100%;
    }
    .portfolio-image-wrapper:before {height: 100%; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
    .portfolio-image-wrapper {padding-bottom: 122px; padding-left: 0; padding-top: 50px; width: 100%;}
    .portfolio-menu {margin-bottom: 35px; padding: 0; text-align: center;}

    .portfolio-filter-carousel .owl-nav {bottom: -61px; left: 0; margin: auto; right: 0; text-align: center;} 
    .portfolio-filter-carousel .owl-nav > .owl-prev, .portfolio-filter-carousel .owl-nav > .owl-next {
        display: inline-block;
        float: none;
    }

    .portfolio-menu button, .portfolio-menu button:nth-of-type(1) {margin: 0 1px;}
    .portfolio-two-area .portfolio-filter-carousel .owl-nav > .owl-prev {float: left;}
    .portfolio-two-area .grid-item {margin-bottom: 30px;}

    .portfolio-section .grid-menu-three button:first-child {margin: 0 3px; padding: 0 4px;}

}


 
 
 /**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */

.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(http://www.jingshangad.com/js/portfolio003/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}