@media screen and (max-width:1024px) {
    .headerTop {
        margin-bottom: 100px
    }

    .headerText {
        font-size: 36px;
        line-height: 43px;
        width: 570px;
        margin-bottom: 107px
    }

    .socialHeading {
        margin-bottom: 27px
    }

    .share-button {
        margin-right: 25px
    }
}

@media screen and (max-width:767px) {
    .header {
        padding: 30px 0 50px
    }

    .headerTop {
        margin-bottom: 50px
    }

    .headerText {
        width: 330px;
        font-size: 21px;
        line-height: 26px;
        margin-bottom: 35px
    }

    .socialHeading {
        margin-bottom: 13px;
        letter-spacing: 1.07px;
        font-size: 14px
    }
}

@media screen and (max-width:400px) {
    .headerText {
        width: 250px
    }
    .socialText {
        font-size: 13px;
    }
}

@media screen and (min-device-pixel-ratio:1.5),
screen and (-webkit-min-device-pixel-ratio:2),
screen and (min-resolution:192dpi) {
    .projectDecadance {
        background-image: url(/images/slide3-bg@2x.jpg) !important
    }
}

@media screen and (max-width:1441px) {
    .projectImage {
        left: 35%
    }
}

@media screen and (max-width:1024px) {
    .project.slick-slide {
        height: 628px
    }

    .projectText {
        max-width: 55%
    }

    .projectDesc {
        margin-bottom: 20px
    }

    .projectDots {
        margin-top: 23px
    }

    .projectDesc p {
        font-size: 18px;
        line-height: 26px
    }

    .projectHeading {
        letter-spacing: 2px;
        margin-bottom: 15px
    }

    .projectImage {
        left: 40%
    }

    .projectImage img {
        width: 1400px
    }
}

@media screen and (max-width:800px) {
    .project.slick-slide {
        height: auto;
        padding: 100px 0
    }

    .projectImage {
        position: relative;
        left: auto !important;
        top: auto;
        margin: 0 -9% 20px;
        text-align: center
    }

    .projectImage img {
        width: 1000px
    }

    .projectText {
        position: relative;
        bottom: auto;
        max-width: 100% !important
    }

    .project .mbox {
        height: auto
    }

    .projectDesc {
        width: 100%
    }
}

@media screen and (max-width:767px) and (orientation:portrait) {
    .project.slick-slide {
        height: auto;
        padding: 50px 0
    }

    .projectImage img {
        width: 120%;
        margin-left: -5%
    }
}

@media screen and (max-width:580px) and (orientation:portrait) {
    .projectImage img {
        width: 150%;
        margin-left: -15%
    }
}

@media screen and (min-width:567px) and (max-width:767px) and (orientation:landscape) {
    .project.slick-slide {
        height: 370px;
        padding-bottom: 0
    }

    .project .mbox {
        height: 100%
    }

    .projectText {
        max-width: 55% !important;
        position: absolute;
        bottom: 125px;
        left: 0
    }

    .projectDesc {
        width: 84%
    }

    .projectHeading {
        margin-bottom: 20px
    }

    .projectDesc p {
        font-size: 15px;
        line-height: 18px
    }

    .projectDetails {
        font-size: 12px;
        letter-spacing: 2.5px
    }

    .projectImage {
        position: absolute;
        left: 44% !important;
        top: -60px !important;
        margin: 0;
        right: 0;
        overflow: hidden
    }
}

@media screen and (max-width:1024px) {
    .brandsList .mbox {
        width: 100%
    }

    .brandsListItem {
        margin-right: 6%;
        padding: 0;
        width: 17.5%
    }

    .brandsListItem:nth-child(4n+1) {
        margin-left: 6%;
        clear: left
    }
}

@media screen and (max-width:567px) {
    .brandsListItem {
        width: 32%;
        margin-right: 12%
    }

    .brandsListItem:nth-child(2n+1) {
        margin-left: 12%;
        clear: left
    }
}

@media screen and (max-width:767px) {
    .brandsHeading {
        letter-spacing: 2.5px
    }

    .brands {
        padding: 50px 0
    }

    .brandsListItem {
        margin-top: 50px
    }
}

@media screen and (max-width:420px) {
    .brandsHeading {
        font-size: 16px
    }
}

@media screen and (max-width:1024px) {
    .worksFilterItem {
        margin-right: 45px
    }

    .worksHeader {
        padding: 30px 0 47px
    }
}

@media screen and (max-width:992px) {
    .worksHeader {
        padding: 30px 0 37px
    }
}

@media screen and (max-width:767px) {
    .worksHeader {
        padding: 20px 0
    }

    .worksFilter {
        white-space: nowrap;
        overflow: auto
    }

    .worksFilterItem {
        float: none;
        display: inline-block;
        margin-right: 13px;
        font-size: 16px
    }
}

@media screen and (max-width:568px) {
    .worksFilterItem {
        margin-right: 30px
    }
}

@media screen and (min-width:768px) {
    .work {
        width: 580px;
        max-width: 50%;
        margin: 0
    }
}

@media screen and (min-width:1140px) {
    .work {
        max-width: 33.333333%;
    }
    .work:nth-child(4n) {
        display: none!important;

    }
}

@media screen and (min-width:1520px) {
    .works-container .work {
        display: inline-block!important;
        max-width: 25%
    }
}
@media screen and (min-width:2560px) {
    .work {
        min-width: 25%
    }
}

@media screen and (max-width:1024px) {
    .testimonials {
        padding: 50px 0
    }

    .testimonialText {
        margin-bottom: 30px
    }

    .testimonialText p {
        color: #666;
        margin-bottom: 10px
    }

    .testimonialLogo {
        width: 20.5%
    }

    .testimonialContent {
        margin-left: 27%;
        min-height: 0
    }

    .testimonialAuthor {
        margin-bottom: 50px
    }

    .testimonialAuthorImage {
        width: 70px;
        height: 70px
    }

    .testimonialAuthorName {
        font-size: 36px;
        margin-bottom: 3px
    }

    .testimonialAuthorPost {
        font-size: 14px;
        letter-spacing: 2.5px
    }

    .testimonials .slick-dots {
        margin-left: 27%
    }
}

@media screen and (max-width:768px) {
    .testimonialLogo {
        float: none;
        margin-bottom: 30px
    }

    .testimonialContent,
    .testimonials .slick-dots {
        margin-left: 0
    }
}

@media screen and (max-width:767px) {
    .testimonialLogo {
        min-width: 90px
    }

    .testimonialText {
        margin-bottom: 25px
    }

    .testimonialText p {
        font-size: 16px;
        line-height: 18px;
        color: #000;
        margin-bottom: 10px
    }

    .testimonialAuthorImage {
        width: 50px;
        height: 50px;
        margin-right: 8px
    }

    .testimonialAuthorName {
        font-size: 24px
    }

    .testimonialAuthorPost {
        font-size: 10px;
        letter-spacing: 1.5px
    }

    .workComingSoon {
        margin-bottom: 5px
    }
}

@media screen and (max-width:1024px) {
    .company {
        height: 520px
    }

    .companyImage img {
        min-height: 0;
        max-width: 1024px
    }

    .companyContent {
        width: 515px;
        top: 285px
    }

    .companyHeading {
        margin-bottom: 16px;
        letter-spacing: 13px
    }

    .companyText {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 20px
    }
}

@media screen and (max-width:767px) {

    .companyHeading,
    .companyText {
        margin-bottom: 20px
    }

    .company {
        height: 320px
    }

    .companyHeading {
        letter-spacing: 7px
    }

    .companyContent {
        width: 320px;
        top: 135px
    }

    .companyContent p {
        font-size: 15px;
        line-height: 18px
    }

    .companyImage img {
        max-width: 767px
    }

    .more {
        font-size: 12px
    }
}

@media screen and (max-width:420px) {
    .company {
        height: 568px
    }

    .companyContent {
        width: 100%;
        top: 365px
    }

    .companyText {
        width: 260px;
        margin-bottom: 15px
    }

    .more {
        font-size: 12px
    }

    .companyImage img {
        max-width: 420px
    }
}

@media screen and (min-width:0px) and (max-width:420px) {
    .xs {
        display: block !important
    }

    .lg,
    .md,
    .sm {
        display: none !important
    }
}

@media screen and (min-width:421px) and (max-width:767px) {
    .sm {
        display: block !important
    }

    .lg,
    .md,
    .xs {
        display: none !important
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {
    .md {
        display: block !important
    }

    .lg,
    .sm,
    .xs {
        display: none !important
    }
}

@media screen and (min-width:1025px) {
    .work:not(.workComingSoon):hover .workDesc {
        visibility: hidden;
        opacity: 0
    }

    .work:not(.workComingSoon):hover:before {
        opacity: 0
    }

    .work:not(.workComingSoon):hover .workImage {
        -webkit-transform: scale3d(1.07, 1.07, 1.07);
        transform: scale3d(1.07, 1.07, 1.07)
    }

    .lg {
        display: block !important
    }

    .md,
    .sm,
    .xs {
        display: none !important
    }
}

@media screen and (min-width:768px) {
    .tablet {
        display: inline-block !important
    }

    .desktop,
    .phone {
        display: none !important
    }
}

@media screen and (min-width:1025px) {
    .desktop {
        display: inline-block !important
    }

    .phone,
    .tablet {
        display: none !important
    }
}

@media screen and (max-width:1024px) {
    .mainheading {
        font-size: 48px
    }

    .indexFooter {
        padding: 114px 0
    }

    .indexFooterHeading {
        margin-bottom: 45px;
        letter-spacing: 13px
    }

    .indexFooterContacts {
        margin-bottom: 53px
    }

    .indexFooterContact {
        margin-bottom: 16px
    }

    .indexFooterContactTitle {
        width: 80px;
        font-size: 18px;
        padding-top: 15px
    }

    .indexFooterContactText {
        margin-left: 87px;
        font-size: 38px;
        letter-spacing: -1px
    }

    .indexFooterContactText a {
        color: #000
    }
}

@media screen and (max-width:767px) {
    .mainheading {
        font-size: 27px
    }

    .indexFooter {
        padding: 55px 0
    }

    .indexFooterHeading {
        margin-bottom: 38px;
        letter-spacing: 7px
    }

    .indexFooterContacts {
        margin-bottom: 43px
    }

    .indexFooterContactTitle {
        width: 50px;
        font-size: 11px;
        padding-top: 11px
    }

    .indexFooterContactText {
        margin-left: 53px;
        font-size: 24px;
        font-weight: 400
    }

    .indexFooterSocial .socialItem {
        font-size: 20px;
        margin-right: 20px
    }
}

@media (min-width:2880px) {
    .projectDesc.tap_mafia {
        width: 73%
    }
}

@media (max-width:1024px) {
    .monsters__wrap::after {
        border-width: 628px 206px 0 0
    }

    .monster-bottom {
        position: absolute;
        width: 171px;
        right: -53px;
        bottom: -8px
    }

    .monster-top {
        position: absolute;
        width: 130px;
        left: 30px;
        top: -47px
    }
}

@media (max-width:800px) {
    .wrapper-monsrter {
        position: initial
    }

    .break-words {
        word-spacing: normal
    }

    .hidden-mobile-device {
        display: none !important
    }

    .visible-on-mobile {
        display: block
    }

    .grey-triangle,
    .monsters-photo {
        width: 100%
    }

    .grey-triangle {
        float: none;
        height: 352px;
        background: url(/images/square.png)
    }

    .monsters-photo {
        background-position: 50% 100%;
        float: none;
        height: 534px
    }

    .grey-triangle-absolute {
        background: url(/images/triangle.png) left bottom no-repeat;
        background-size: cover;
        position: absolute;
        top: -89px;
        left: -11px;
        width: 105%;
        height: 90px
    }

    .monster-bottom {
        width: 171px;
        right: 80px
    }

    .monsters__wrap::after {
        position: absolute;
        content: '';
        right: -206px;
        top: 0;
        width: 0;
        height: 0;
        border: none;
        border-width: 462px 206px 0 0
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 200px;
        left: 55px
    }
}

@media (max-width:768px) {
    .break-words {
        word-spacing: normal
    }

    .grey-triangle,
    .monsters-photo {
        width: 100%
    }

    .grey-triangle {
        float: none;
        height: 346px;
        background: url(/images/square.png)
    }

    .monster-bottom {
        width: 171px
    }

    .monsters-photo {
        background-position: 50% 100%;
        float: none;
        height: 534px
    }

    .monsters__wrap::after {
        position: absolute;
        content: '';
        right: -206px;
        top: 0;
        width: 0;
        height: 0;
        border: none
    }

    .grey-triangle-absolute {
        background: url(/images/triangle.png) left bottom no-repeat;
        background-size: cover;
        position: absolute;
        top: -89px;
        left: -11px;
        width: 105%;
        height: 90px
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 210px;
        left: 6%
    }
}

@media screen and (max-width:767px) and (orientation:portrait) {
    .project.slick-slide.tap-mafia {
        padding: 100px 0
    }
}

@media (max-width:640px) {
    .hidden-mobile-device {
        display: none !important
    }
}

@media screen and (max-width:767px) and (min-width:567px) and (orientation:landscape) {
    .project.tap-mafia-height {
        height: 466px
    }

    .grey-triangle {
        width: 40%;
        height: 100%;
        background: #3a4149;
        float: left
    }

    .monsters-photo {
        background: url(/images/main-bg-min.jpg) 40% 100% no-repeat;
        width: 60%;
        float: left;
        background-size: cover
    }

    .visible-on-mobile {
        display: none !important
    }

    .hidden-mobile-device {
        display: block !important
    }

    .h100.monsters-photo {
        height: 100%
    }

    .monsters__wrap::after {
        position: absolute;
        content: '';
        right: -142px;
        top: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: #3a4149 transparent transparent;
        z-index: 0;
        border-width: 466px 142px 0 0
    }

    .monster-bottom {
        width: 139px;
        right: -11px
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 0;
        left: 6%
    }

    .projectDesc.tapprojectText p {
        font-size: 15px;
        line-height: 18px
    }

    .mainheading.projectHeading.big-font-mobile {
        font-size: 27px
    }
}

@media (min-width:481px) and (max-width:566px) {
    .socialItem img {
        width: 30px;
    }
    .socialText {
        font-size: 13px;
    }
    .grey-triangle {
        float: none;
        height: 452px
    }

    .monsters-photo {
        background-position: 50% 100%;
        float: none;
        height: 302px
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 221px;
        left: 6%
    }

    .tap-mafia-box h2.mainheading {
        font-size: 27px
    }

    .tap-mafia-box .projectDesc p {
        font-size: 18px;
        line-height: 26px
    }

    .monster-bottom {
        width: 202px;
        right: 40px;
        bottom: -10px
    }
}

@media (max-width:480px) {
    .socialItem img {
        width: 30px;
    }
    .monster-bottom {
        width: 163px;
        bottom: -9px;
        right: -15px
    }

    .hidden-mobile-device {
        display: none !important
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 145px;
        left: 25px
    }

    .big-font-mobile.mainheading.projectHeading {
        font-size: 27px
    }

    .monsters-photo {
        background-position: 50% 100%;
        float: none;
        height: 470px
    }

    .grey-triangle {
        float: none;
        height: 336px
    }
}

@media (max-width:320px) {
    .big-font-mobile.mainheading.projectHeading {
        font-size: 27px
    }

    .hidden-mobile-device {
        display: none !important
    }

    .mbox.tap-mafia-box {
        position: absolute;
        bottom: 139px;
        left: 15px
    }

    .grey-triangle-absolute {
        top: -89px
    }

    .monster-bottom {
        width: 137px;
        bottom: -9px;
        right: -15px
    }
}

@media (max-width:2560px) {
    .projectImage.ht-prImage img.ht-franky {
        margin: 0 auto
    }
}

@media (min-width:2048px) and (max-width:2559px) {
    .projectImage.ht-prImage img.ht-franky {
        margin: 0 auto
    }
}

@media (min-width:1536px) and (max-width:2047px) {
    .projectImage.ht-prImage img.ht-franky {
        margin: 0 auto;
        height: 100%
    }
}

@media (min-width:1287px) and (max-width:1535px) {
    .projectImage.ht-prImage img.ht-franky {
        float: right;
        margin-top: 30px;
        max-width: 743px;
        width: 100%
    }

    .ht-animatedBlock {
        max-width: 440px
    }
}

@media (min-width:1136px) and (max-width:1286px) {
    .projectImage.ht-prImage img.ht-franky {
        margin-right: -80px;
        float: right;
        margin-top: 30px;
        max-width: 743px;
        width: 100%
    }

    .ht-animatedBlock {
        max-width: 440px
    }
}

@media (min-width:1025px) and (max-width:1135px) {
    .project .projectImage.ht-prImage img.ht-franky {
        margin-right: -80px;
        float: right;
        margin-top: 30px;
        max-width: 743px;
        width: auto;
        max-height: 100%;
        height: 87%
    }
}

@media (min-width:992px) and (max-width:1024px) {
    .project .projectImage.ht-prImage img.ht-franky {
        float: right;
        max-width: 538px;
        max-height: 100%
    }

    .ht-animatedBlock {
        max-width: 364px
    }
}

@media (min-width:801px) and (max-width:991px) {
    .project .projectImage.ht-prImage img.ht-franky {
        margin-right: -80px;
        float: right;
        max-width: 538px;
        max-height: 100%
    }

    .ht-animatedBlock {
        max-width: 364px
    }
}

@media (min-width:801px) {

    .ht-project.ht-blackSquare,
    .ht-projectHeadingText,
    .projectImage img.ht-pumpkin {
        display: none !important
    }

    .ht-projectHeadingImg {
        display: block !important
    }
}

@media (max-width:800px) {

    .ht-projectHeadingText,
    .projectImage img.ht-pumpkin {
        display: block !important
    }

    .ht-projectHeadingImg {
        display: none !important
    }
}

@media (min-width:768px) and (max-width:800px) {
    .projectImage.ht-prImage {
        height: 520px;
        overflow: inherit
    }

    .ht-blackSquare {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        height: 370px
    }

    .project.ht-project {
        background: 0 0;
        height: 789px
    }

    .project .projectImage.ht-prImage img.ht-franky {
        float: inherit;
        max-height: 589px;
        width: inherit;
        position: absolute;
        top: -42px;
        right: 84px;
        z-index: 2
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 500px;
        position: absolute;
        bottom: 0;
        left: 67px;
        z-index: 3;
        width: inherit
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-prImage {
        background: url(/images/trans-back.jpg) no-repeat #fff;
        background-size: cover
    }

    .ht-mbox.mbox {
        padding-top: 50px
    }
}

@media (min-width:567px) and (max-width:767px) {
    .projectImage.ht-prImage {
        height: 520px;
        overflow: inherit
    }

    .ht-blackSquare {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        height: 370px
    }

    .project.ht-project {
        background: 0 0;
        height: 840px
    }

    .project .projectImage.ht-prImage img.ht-franky {
        float: inherit;
        max-height: 570px;
        width: inherit;
        position: absolute;
        top: -42px;
        right: 63px;
        z-index: 2
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 500px;
        position: absolute;
        bottom: -2px;
        left: 79px;
        z-index: 3;
        width: inherit
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-prImage {
        background: url(/images/trans-back.jpg) no-repeat #fff;
        background-size: cover
    }

    .ht-transText {
        font-size: 18px
    }

    .ht-mbox.mbox {
        padding-top: 50px
    }

    .ht-projectHeadingText {
        font-size: 27px
    }
}

@media screen and (max-width:767px) and (min-width:567px) and (orientation:landscape) {
    .ht-blackSquare {
        display: none
    }

    .project.ht-project {
        background: 0 0;
        height: 435px
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 500px;
        position: absolute;
        bottom: 0;
        left: 67px;
        z-index: 3;
        width: inherit
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-prImage {
        background: url(/images/trans-back.jpg) no-repeat #fff;
        background-size: cover
    }

    .ht-mbox.mbox {
        padding-top: 50px
    }

    .projectImage.ht-prImage {
        height: 435px;
        position: absolute;
        left: 0 !important;
        top: 100px !important;
        margin: 0;
        right: 0;
        overflow: hidden
    }

    .projectText.ht-projectText {
        max-width: 58% !important;
        position: absolute;
        bottom: 125px;
        left: 0
    }

    .project .projectImage.ht-prImage img.ht-franky {
        max-height: 432px;
        width: initial;
        float: inherit;
        position: absolute;
        top: 3px;
        right: -25px;
        z-index: 2
    }

    .projectImage img.ht-pumpkin {
        display: none !important
    }

    .ht-projectHeadingText {
        font-size: 27px;
        line-height: 1em
    }
}

@media (min-width:481px) and (max-width:566px) {
    .projectImage.ht-prImage {
        height: 520px;
        overflow: inherit
    }

    .ht-blackSquare {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        height: 370px
    }

    .project.ht-project {
        background: 0 0;
        height: 840px
    }

    .project .projectImage.ht-prImage img.ht-franky {
        float: inherit;
        max-height: 570px;
        width: inherit;
        position: absolute;
        top: -42px;
        right: 63px;
        z-index: 2
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 500px;
        position: absolute;
        bottom: -2px;
        left: 79px;
        z-index: 3;
        width: inherit
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-prImage {
        background: url(/images/trans-back.jpg) no-repeat #fff;
        background-size: cover
    }

    .ht-transText {
        font-size: 18px;
        line-height: 26px
    }

    .ht-projectHeadingText {
        font-size: 27px
    }

    .ht-mbox.mbox {
        padding-top: 30px
    }
}

@media (min-width:321px) and (max-width:480px) {
    .min-height-for-iphone {
        min-height: 130px
    }

    .projectImage.ht-prImage {
        height: 450px;
        overflow: inherit
    }

    .ht-blackSquare {
        position: absolute;
        bottom: 25px;
        left: 0;
        right: 0;
        background: #000;
        height: 382px
    }

    .project.ht-project {
        background: 0 0;
        height: 805px
    }

    .project .projectImage.ht-prImage img.ht-franky {
        float: inherit;
        max-height: 419px;
        position: absolute;
        top: -49px;
        right: 41px;
        width: inherit;
        z-index: 2
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 448px;
        position: absolute;
        width: inherit;
        bottom: 0;
        left: 79px;
        z-index: 3
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-projectHeadingText {
        font-size: 27px
    }

    .ht-prImage {
        background: url(/images/trans-back480.jpg) no-repeat #fff;
        background-size: cover
    }

    .ht-transText {
        font-size: 18px;
        line-height: 26px
    }

    .ht-mbox.mbox {
        padding-top: 50px
    }
}

@media (max-width:320px) {
    .projectImage.ht-prImage {
        height: 290px;
        overflow: inherit
    }

    .ht-blackSquare {
        position: absolute;
        bottom: 25px;
        left: 0;
        right: 0;
        background: #000;
        height: 305px
    }

    .project.ht-project {
        background: 0 0;
        height: 570px
    }

    .project .projectImage.ht-prImage img.ht-franky {
        float: inherit;
        max-height: 278px;
        position: absolute;
        top: -27px;
        right: 33px;
        z-index: 2;
        width: initial
    }

    .projectImage.ht-prImage img.ht-pumpkin {
        display: block;
        float: inherit;
        max-height: 320px;
        position: absolute;
        bottom: -2px;
        left: 66px;
        width: initial;
        z-index: 3
    }

    .ht-animatedBlock {
        max-width: 100%
    }

    .ht-prImage {
        background: url(/images/trans-back320.jpg) no-repeat #fff;
        background-size: cover
    }

    .animatedBlock-left .projectDesc.ht-transText p {
        font-size: 15px;
        line-height: 18px
    }
}

@media only screen and (min-device-width:200px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) {

    .projects .slick-dots li:hover button,
    .testimonialsDots .slick-dots li:not(.slick-active):hover button {
        background: 0 0
    }
}