html.no-js {margin: 0 !important;    overflow-x: hidden;}
.dis-flex { display: flex; flex-wrap: wrap;}
body .modal-body iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 20px; }
body .modal-body { position: relative; padding: 0; padding-top: calc(56.25% + 17px); }
.portfolio-section .slick-slide.slick-current.slick-active { position: relative; z-index: 9; }
.back-btn { position: fixed; right:20px; top: 70px; width: 60px; z-index: 99;transition: all .25s ease-out 0s; }
.back-btn:hover{transform: scale(1.1);}

.portfolio-section .post-item { width: 25%;    border: 0.5px solid #e5e5e5; margin-bottom: -2px;background-color:#fff;transition: transform .25s; }
.portfolio-section .post-header h3 { color: #6fbb44; font-size: 36px; line-height: 1.1; margin-top: 0;font-family: 'latolight';font-weight:300;    margin-bottom: 5px; }
.portfolio-section .post-topic{font-size: 16px; color: #666766; font-weight: 400;  font-family: 'latoregular'; margin: 0;    letter-spacing: 2.5px;}
.portfolio-section .client-name { color: #666766;    text-transform: uppercase; font-size: 20px; font-weight: 700; font-family: 'Lato',sans-serif; line-height: 1.2; margin-bottom:4px; }
.portfolio-section .post-header { border-bottom: 1px solid #cccccb; padding-bottom: 18px; }
.portfolio-section .post-body * { font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important; font-family: 'latoregular' !important; margin: 0!important; padding: 0!important; display: inline-block!important; text-decoration: none!important; color: #666766!important; }
.portfolio-section .post-body { padding-top: 20px; }
.portfolio-section .wrapper-post-content { padding: 30px 38px 45px; }
.portfolio-section .featured-image-wrapper { width: calc(100% + 1px); position: relative; left: -0.5px;    overflow: hidden; }
.portfolio-section .featured-image-wrapper img{width:100%;}
.portfolio-section .featured-image-wrapper:before { position: absolute; content: ""; height: 100%; width: 100%; background: rgba(0,0,0,.05); }
.portfolio-section  a.post-link { text-decoration: none !important;display: block; }


.portfolio-main { text-align: center; padding: 60px 0px 45px; }
.portfolio-blog .portfolio-main{padding-top: 10px;}
.portfolio-main h2{font-size: 30px;padding-left:15px;padding-right:15px;line-height: 1; margin-bottom: 22px;}
.portfolio-main h1{padding-left:15px;padding-right:15px;}
.portfolio-main .portfolio-nav ul { display: flex !important; justify-content: center; font-size: 16px; line-height: 1.25;    border-bottom: 1px solid #cccccb;    letter-spacing: 1px; }
.portfolio-main .portfolio-nav ul li a { display: inline-block; color: #666766;    text-decoration: none;    padding: 20px 10px;    font-family: 'latoregular'; position:relative;    white-space: nowrap;}
.portfolio-main .portfolio-nav ul li { padding: 0px 15px; }
.portfolio-main .portfolio-nav ul li a:after { position: absolute; content: ""; width:0; height: 4px; background: #6fbb44; bottom: -1px; left: 0;transition: all .25s ease-out 0s; }
.portfolio-main .portfolio-nav ul li a:hover:after,.portfolio-main .portfolio-nav ul li.active a:after {width: 100%; }
.portfolio-main .portfolio-nav .hs-menu-wrapper,.portfolio-main .portfolio-nav .hs-menu-wrapper *{width:auto;} 
.portfolio-main .detail-content { max-width: 1560px;padding:0 15px;margin: auto;margin-top:25px; }
.portfolio-main .detail-content p { font-size: 18px; line-height: 1.65; }
.portfolio-main .detail-content > *:last-child { margin-bottom: 0; }


.portfolio-gallery > img{width:100%;}
.portfolio-gallery .wrapper-video { position: relative;display:block; z-index:1;}
.portfolio-gallery .wrapper-video .play-icon { position: absolute;  top: 50%; left: 50%; display: block; width: 85px;transform: translate(-50%,-50%);z-index:9;transition: all .25s ease-out 0s; cursor: pointer; }
.portfolio-gallery .wrapper-video .play-icon img{width:100%;}
.portfolio-gallery .wrapper-video .play-icon:hover{    transform: translate(-50%,-50%) scale(1.1);}
.portfolio-gallery .wrapper-video:before { position: absolute; content: ""; height: 100%; width: 100%; background: rgba(0,0,0,.05); }


.portfolio-content .title{ width: 100%; order: 2; color: #6fbb44; font-size: 36px; line-height: 1.1; }
.portfolio-content > h1{display: flex; flex-wrap: wrap;margin-top: 0;}
.portfolio-content .client-name { width: 100%; color: #666766; font-size: 20px; font-weight: 700; font-family: 'Lato', sans-serif; line-height: 1.2; margin-bottom: 7px; }
.portfolio-content > h2,.main-content > h2{font-size: 16px; color: #666766; font-weight: 700; font-family: 'Lato',sans-serif; margin: 0;    letter-spacing: 2.5px;}
.portfolio-content .main-content h3 { font-size: 24px; line-height: 1.25; margin-top: 0; font-weight: 400; font-family: 'latolight'; }
.portfolio-content .main-content { margin-top: 11px; }
.portfolio-content .main-content > span > *:last-child{margin-bottom:0;}
.part.top0 { top: 50px !important; }

.two-col-social { display: flex; flex-wrap: wrap; align-items: center;padding: 43px 0 16px; }
.two-col-social .right-part {justify-content: flex-end; }
.two-col-social > div { width: 50%; }
.two-col-social .left-part .social { margin: 0; list-style-type: none; padding: 0;align-items: center; }
.two-col-social li.vertical a { padding: 0 10px; font-size: 18px; }
.two-col-social li.vertical:first-child a{padding-left:0;} 
.two-col-social .right-part > div:not(:first-child) { margin-left: 25px; }
.two-col-social .right-part a { font-family: 'latoblack'; font-weight: 900; font-size: 14px; text-transform: uppercase;display: inline-block; }

.summary-content { padding: 15px 0 20px; border-bottom: 1px solid #cccccb; border-top: 1px solid #cccccb; }
.summary-content > h3{font-size: 18px; color: #666766; margin: 0; font-family: 'Lato',sans-serif; font-weight: 700; line-height: 1.35;margin-bottom: 3px;}
.summary-content p{margin-top: 0; font-size: 18px; color: #666766; line-height: 1.35;font-family: 'latoregular';font-weight: 400;}
.summary-content .detail-content > p{margin-bottom:0;}

.wrapper-detail-content { padding: 20px 0 0; }
.wrapper-detail-content > div:not(:first-child){margin-top:35px;}
.two-col-section { padding: 20px 25px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.two-col-section .dis-flex{max-width: 800px; width: 100%; margin: auto;align-items: center;}
.two-col-section .right-content h3{font-size: 36px; text-transform: uppercase;    margin-bottom: 15px; line-height: 1; font-weight: 700; font-family: 'Lato',sans-serif; margin-top: 0;}
.two-col-section .right-content { width: 50%;    padding-left: 30px; }
.two-col-section .image { width: 50%; }
.two-col-section .wrapper-cta a { text-align: center;text-decoration: none;color: #fff; text-transform: uppercase; font-size: 16px; display: inline-block; font-weight: 700; font-family: 'Lato',sans-serif; line-height: 1.9; border-radius: 2px; padding: 10px 20px; }
.two-col-section .wrapper-cta a:hover{background-color:#fff;}
.full-width-content p,.full-width-content ol, .full-width-content ul  { font-size: 18px; line-height: 1.65; margin-bottom: 25px;margin-top:0; }
.full-width-content ul{padding: 0 0 0 27px; border-left: 3px solid #6fbb1f; margin: 35px 0; list-style: none;}
.full-width-content ul li{padding: 0 0 12px 14px; position: relative; list-style: none; border: 0;}
.full-width-content ul li:before{content: ''; position: absolute; top:11px; left: 0; width: 6px; height: 6px; background: #6fbb1f;}
.full-width-content ul li:last-child { padding-bottom: 0;}
.full-width-content ol li { margin-bottom: 10px; }
.full-width-content.swap .left-part { order: 2;padding: 10px 0 10px 10px; }
.full-width-content .right-part > *:last-child { margin-bottom:0; }
.full-width-content.dis-flex { margin-top: 0 !important; }

.full-width-content > *:last-child{margin-bottom:0;}
.full-width-content strong,.full-width-content  h2,.full-width-content  h3,.full-width-content  h4 {font-weight: 700;font-family: 'Lato',sans-serif;line-height:1.65;margin-bottom: 0;}
.full-width-content .cta_button { border-radius: 3px !important; font-weight: 700!important; font-family: 'Lato',sans-serif!important; display: inline-block !important; background: #6fbb1f !important; text-decoration: none !important; padding: 15px 20px !important; font-size: 20px !important; line-height: 1.2 !important;    color: #fff !important; }
.full-width-content .cta_button:hover{background: #89e824;}
.full-width-content .left-part {padding: 10px 10px 10px 0;}
.wrapper-feture-video{display: flex; align-items: center; justify-content: center;max-width: 680px; margin: auto;width: 100%; position: relative;}
.wrapper-feture-video .wrapper{ padding-top: 56.66%; position: relative;    width: 100%; }
.wrapper-feture-video iframe, .wrapper-feture-video video { max-width: 100%; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; padding: 20px; background: #fff; border-radius: 5px; }
.wrapper-feture-video .mfp-close { font-size: 40px !important; right: -10px !important; top: -10px !important;}


@media(min-width:768px){
  .portfolio-main .toggle-arrow{display:none;}
}

@media(min-width:569px){
  .portfolio-section .hover-text {position: absolute; top: 50%;  transition: all .25s ease-out 0s; transform: translateY(-50%);right: -100%; color: #fff; text-transform: uppercase; font-weight: 700; font-family: 'Lato',sans-serif; font-size: 14px; padding-right: 50px; }
  .portfolio-section span.angle-right { background: #6fbb44; height: 80px; width: 80px; display: inline-flex; margin: 0; border-radius: 50%; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); align-items: center; padding-left: 15px; font-size: 24px; }
  .portfolio-section .post-item:hover .hover-text {right:0;}
  .portfolio-section .post-item:hover { transform: scale(1.05); z-index: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
  .portfolio-section .post-item:before {position: absolute; content: "";width:0; height: 4px; background: #6fbb44; top: -1px; left: -0.5px; z-index: 1;    transition: all .25s ease-out 0s; }
  .portfolio-section .post-item:hover:before {width: calc(100% + 1px);}
  .portfolio-section .post-item:hover .featured-image-wrapper:before { background: rgba(0,0,0,.6); }
  /*   .portfolio-section .post-item { position: absolute;} */
  .portfolio-section { padding-bottom: 25px; }
}

@media(min-width:1024px){
  .footer-container-wrapper { position: relative; }
  .main {position: relative;}
  .part.scrollable.fixed {position: fixed;bottom:49px;}
  .part.A {left: 0 !important;float: left;bottom:0;}
  .part.B {right: 0 !important;float: right;bottom:0;}
  .portfolio-gallery{width:50%;float:right;right:0;bottom:50px;transition: all 0.5s ease;}
  .portfolio-content{width:50%;float:left;left:0;bottom:50px;padding: 63px 20px 60px 40px;display: inline-block;vertical-align: top;transition: all 0.5s ease;}
  .wrapper-video.responsive{display:none !important;}
  .portfolio-gallery .grid-item{width:50%;}
  .portfolio-gallery .images img{width:100%;}
  .portfolio-gallery .wrapper-video img { width: 100%; }
}

@media(max-width:1366px) and (min-width:1024px) {
  .part.scrollable.fixed {bottom:60px;}
  .part.top0 { top: 36px !important; }
}

@media(max-width:1680px){
  .portfolio-section .wrapper-post-content { padding: 30px 25px 35px; }
}

@media(max-width:1530px){
  .portfolio-main .portfolio-nav ul { justify-content:flex-start;overflow-x: scroll;overflow-y: hidden; } 
  .portfolio-nav { overflow-x: hidden; }
}

@media(max-width:1440px){
  .portfolio-content {padding: 60px 20px;}
  .mCSB_scrollTools {right: 28px;}
  .back-btn {right: 10px;top:62px;}
}

@media(max-width:1280px){
  .portfolio-section .post-item { width: 33.33%;}
}

@media(max-width:1200px){
  .two-col-social .right-part > div:not(:first-child) { margin-left: 15px; }
  .two-col-section .right-content h3 { font-size: 30px;}
  .two-col-section .right-content{padding-left:20px;}
  .two-col-social { padding: 35px 0 10px; }
  .two-col-social .right-part a { font-size: 12px;line-height: 1.1; }
  .two-col-section { padding: 20px; }
  .two-col-section .wrapper-cta a { font-size: 14px;line-height: 1.3; padding: 12px 20px; }
}

@media(max-width:1024px){
  .portfolio-section .post-item { width:50%;}  
  .portfolio-main h1 { font-size: 36px; }
  .portfolio-main h2 { font-size: 26px;line-height: 1.1; }
  .portfolio-main .portfolio-nav ul li a { padding: 15px 0px; }
  .portfolio-main .portfolio-nav ul {font-size: 12px;}
  .portfolio-main .portfolio-nav ul li { padding: 0px 12px; }
  .portfolio-main .portfolio-nav ul{ padding: 0px 3px; }
  .portfolio-content .main-content h3 { font-size: 20px; }
}

@media(max-width:1023px){
  div#mCSB_2_container { top: 0 !important; }
  .back-btn { width: 35px;}
  .portfolio-main .detail-content p , .full-width-content p,.full-width-content ol, .full-width-content ul  { font-size: 16px; line-height: 1.5; }
  .portfolio-gallery *{ outline: none !important; }
  .portfolio-gallery{ width: 100%; order: 1; }
  .portfolio-gallery .desktop{ display:none !important;}
  .portfolio-gallery .wrapper-video.responsive > img,.portfolio-gallery .images img { height:300px!important;}
  .portfolio-gallery .slick-next:before,.portfolio-gallery .slick-prev:before,.portfolio-gallery .slick-next:before,.portfolio-section .slick-prev:before { font-size: 0; }
  .portfolio-gallery .slick-arrow{ top:150px; z-index: 2; height: 25px; width: 25px;}
  .portfolio-gallery .slick-prev { left: 10px; }
  .portfolio-gallery .slick-next { right: 10px; }
  .portfolio-gallery .images.grid-item { transform: translate3d(0px, 0px, 0px) !important; }
  .wrapper-images.single-items{ height: 300px !important;overflow-y:hidden; }
  .portfolio-detail-section{ display: flex; flex-wrap: wrap; }
  .wrapper-detail-content>div:not(:first-child) { margin-top: 22px; }
  .portfolio-content { width: 100%; order: 2; padding: 25px 20px 40px; }
  .portfolio-content .title,.portfolio-section .post-header h3{ font-size: 30px;line-height: 1.32; }
  .portfolio-content .client-name,.portfolio-section .client-name { font-size: 14px; }
  .portfolio-content>h2,.portfolio-section .post-topic { font-size: 14px; letter-spacing: 1.5px; }
  .summary-content>h3,.summary-content p { font-size: 16px;line-height: 1.25; }
}

@media(max-width:767px){
  .two-col-section .right-content h3 { font-size:24px; }
  .portfolio-section .wrapper-post-content { padding: 20px 15px 35px; }
  .portfolio-blog .portfolio-main { padding-top: 20px; }
  .portfolio-main h1 { font-size: 30px; }
  .portfolio-main h2 { font-size: 22px; margin-bottom: 8px; }
  .portfolio-main { text-align: left; padding: 60px 0px 5px; }
  .portfolio-main .toggle-arrow { text-align: center; font-size: 40px; color: #6fbb44; cursor: pointer; }
  .portfolio-main .detail-content { margin-top: 0;display:none; }
  .portfolio-main .toggle-arrow .fa{ transition: all .25s ease-out 0s; }
  .portfolio-main .detail-content.rotate + .toggle-arrow .fa{ transform: rotate(180deg); }
  .portfolio-section .slick-arrow{ top: 100px; z-index: 2; height: 35px; width: 35px; }
  .portfolio-section .slick-prev { left: 10px;  }
  .portfolio-section .slick-next { right: 10px; }
  .portfolio-section .slick-next:before,.portfolio-section .slick-prev:before { font-size: 0; }
  .portfolio-gallery .wrapper-video.responsive > img,.portfolio-gallery .images img,  .wrapper-images.single-items{ height:230px!important; }
  .portfolio-gallery .slick-arrow{ top:115px; }
  .portfolio-gallery .wrapper-video .play-icon { width: 50px; }
  .full-width-content ul li {padding: 0 0 6px 13px; }
}

@media(max-width:640px){
  .two-col-section { padding: 22px; text-align: center; }
  .two-col-section .right-content { width: 100%; padding-left: 0; }
  .two-col-section .image { width: 100%; margin-bottom: 10px; }
  .two-col-social { padding: 5px 0 20px; }
  .two-col-social > div { width: 100%; }
  .two-col-social .left-part .social { justify-content: center; }
  .two-col-social .left-part { padding: 13px 0; border-bottom: 1px solid #cccccb;}
  .two-col-social .right-part { justify-content: center; padding: 10px 0; border-bottom: 1px solid #cccccb; }
  .two-col-social > div > div { max-width: 83px; text-align: center; }
  .summary-content { border: 0; background: #cccccb; padding: 20px; }
  .full-width-content .left-part { padding: 0; margin: 0 auto 20px; }
  .full-width-content .right-part { width: 100% !important;order:2 !important; }
  .full-width-content.swap .left-part{padding:0;}
}

@media(max-width:568px){
  .portfolio-section .post-item { width: 100%; position: static!important; top: 0 !important; margin-bottom: 0; border:0; }
  .portfolio-section .featured-image-wrapper{height: 200px; display: flex; align-items: center;}
  .portfolio-section .hover-text{ display:none; }
  .portfolio-gallery .wrapper-video.responsive > img,.portfolio-gallery .images img,.wrapper-images.single-items{ height: 180px!important; }
  .portfolio-gallery .slick-arrow{ top:90px; }
  .portfolio-section > .post-listing { height:auto !important; }
  .portfolio-section .featured-image-wrapper:before {display:none; }
  .portfolio-section .featured-image-wrapper img {min-height: 200px; object-fit: cover; }
}