.slick-list,
.slick-slider,
.slick-track {
    position: relative
}

.slick-list:focus,
.slick-vertical .slick-slide:focus,
a:focus,
button,
button:focus {
    outline: 0
}

.slick-list,
.slick-slider,
.slick-track {
    display: block
}

.clearfix:after,
.slick-loading .slick-slide,
.slick-loading .slick-track {
    visibility: hidden
}

.slick-list {
    overflow: hidden
}

.desktop-picture {
    display: none
}

#wrapper:before {
    content: "";
    width: 106px;
    height: 307px;
    background: url(https://www.htmlpanda.com/assets-new/images/bannerImage.png) no-repeat;
    position: absolute;
    top: 0;
    right: 0
}

.header {
    transition: all .5s ease-out
}

.fixed-header {
    animation-name: sticky;
    -webkit-animation-name: sticky;
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

@-webkit-keyframes sticky {
    from {
        top: -100%
    }

    to {
        top: 0
    }
}

@keyframes sticky {
    from {
        top: -100%
    }

    to {
        top: 0
    }
}

.banner {
    padding: 66px 0 17px
}

.banner-wrapper {
    padding: 35px 21px 28px
}

.banner h1 {
    padding: 0 0 0 1px;
    font-size: 22px;
    color: #131928;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 10px;
    position: relative
}

.banner h2 {
    padding: 15px 20px 0 1px;
    margin-bottom: 33px;
    font-weight: 700;
    font-size: 24px;
    color: #131928;
    line-height: 1.1;
    position: relative
}

.banner h2:before {
    content: "";
    width: 23px;
    height: 2px;
    background: #ff2601;
    position: absolute;
    top: 0;
    left: 3px
}

.underline {
    text-decoration: underline
}

.price-wrapper strong {
    float: left;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #131928;
    padding-right: 18px;
    line-height: 1.29;
    margin-bottom: 20px
}

.price-text {
    padding-left: 2px;
    letter-spacing: -.2px
}

.price-text span {
    display: block
}

.price-wrapper strong.price {
    font-size: 35px;
    color: #ff2601;
    font-family: Aleo, serif;
    line-height: 1.25
}

.price:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 36px;
    background: #dedede;
    vertical-align: top;
    margin: 1px 18px 0 0
}

a.place-order {
    text-transform: uppercase;
    display: inline-block;
    font-size: 15.72px;
    color: #fff;
    line-height: 1.29;
    background: #ff2601;
    padding: 19px 34px 19px 33px;
    border: 2px solid transparent;
    border-radius: 32px;
    letter-spacing: -.1px;
    box-shadow: 5px 6px 32px 0 rgba(255, 38, 1, .45)
}

.banner-right {
    display: none
}

.money-back {
    margin: 28px 7px 0 0;
    position: relative
}

.money-back span {
    display: inline-block;
    color: #858585;
    font-size: 13px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -.1px;
    position: relative
}

.money-back:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 1px
}

ul.points {
    margin: 0 auto;
    overflow-x: scroll;
    white-space: nowrap;
    display: flex;
    display: -ms-flexbox;
    padding-left: 16px
}

ul.points li {
    font-size: 16px;
    font-family: Lato, sans-serif;
    color: #0c0c0c;
    position: relative;
    padding: 8px 8px 6px 84px;
    margin-bottom: 21px;
    margin-right: 23px;
    font-weight: 600;
    letter-spacing: -.15px
}

ul.points li:last-child {
    margin-bottom: 0
}

ul.points li.code {
    margin-bottom: 16px
}

ul.points li.voucher {
    margin-bottom: 15px
}

ul.points li span {
    display: block
}

.bdr {
    border-bottom: 2px solid #534db8;
    padding-bottom: 5px
}

ul.points li i[class^=icon-points-] {
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0
}

.icon-points-cash {
    background-position: -110px -20px
}

.icon-points-code {
    background-position: -329px -22px
}

.icon-points-voucher {
    background-position: -220px -20px;
    margin: 4px 0 0 1px
}

.icon-points-approval {
    background-position: -275px -20px;
    margin: 1px 0 0 1px
}

.steps-wrapper {
    background: #534db8;
    padding: 24px 28px 12px;
    position: relative
}

.steps-btn {
    display: block;
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #534db8;
    position: absolute;
    top: -24px;
    right: 0;
    left: 0;
    margin: 0 auto
}

.steps-btn:hover {
    background: #fff;
    border-color: #534db8
}

.steps-btn span {
    font-size: 0;
    width: 11px;
    height: 11px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border-radius: 2px;
    position: absolute;
    top: 11.5px;
    left: 13px
}

.steps-btn:hover span {
    border-color: #534db8
}

.steps-head {
    padding-top: 25px;
    text-align: center
}

.steps-head h2 {
    color: #fff;
    margin-bottom: 15px
}

.steps-head span {
    color: #dcdbf8;
    display: block;
    font-size: 18px;
    margin-bottom: 15px
}

ul.steps {
    padding: 25px 0 0 0
}

ul.steps li {
    margin-bottom: 46px
}

.arrow-btn,
.stepsdot,
ul.steps li i[class^=icon-steps-] {
    display: none
}

.steps-heading {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 18px
}

.steps-heading a {
    color: #fff
}

.steps-heading strong {
    display: block
}

ul.steps li p {
    color: #dcdbf8;
    padding-left: 2px;
    margin-bottom: 0;
    line-height: 1.23;
    font-family: Lato, sans-serif
}

ul.steps li.step3 p {
    margin-left: 3px
}

[class*=open-],
[class^=open-] {
    background-image: url(https://www.htmlpanda.com/assets-new/images/development-sprite.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    text-indent: -9999px;
    width: 20px
}

.open-wp-development {
    background-position: -10px -12px;
    width: 58px;
    height: 58px
}

.open-drp-development {
    background-position: -86px -12px;
    width: 50px;
    height: 58px
}

.open-woo-development {
    background-position: -160px -22px;
    width: 66px;
    height: 48px
}

.open-sph-development {
    background-position: -250px -18px;
    width: 52px;
    height: 58px
}

.open-mg-development {
    background-position: -332px -19px;
    width: 50px;
    height: 57px
}

.open-crt-development {
    background-position: -412px -22px;
    width: 61px;
    height: 45px
}

.heading-flex {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.heading-flex h3 {
    margin: 0 0 0 30px
}

.web-services {
    padding: 46px 36px 68px 50px
}

.web-services h2 {
    margin: 0 4px 18px 0
}

.web-services p {
    margin-bottom: 0
}

.services {
    background: #f6f6f6;
    padding: 99px 0 35px;
    position: relative
}

ul.services-list {
    position: absolute;
    width: 95%;
    left: 0;
    top: -26px;
    padding-left: 13px;
    display: flex;
    justify-content: space-between
}

ul.services-list li {
    width: 30%;
    border-radius: 4px;
    transition: all .5s ease;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    padding: 38px 20px 7px 10px;
    position: relative
}

ul.services-list li.frontEnd {
    background: #ff2601
}

ul.services-list li.cms {
    background: #8f87f8
}

ul.services-list li.ecommerce {
    background: #f4af1b
}

li.frontEnd.active,
li.frontEnd:hover {
    box-shadow: 5px 9px 32px 0 rgba(255, 38, 1, .45)
}

li.cms.active,
li.cms:hover {
    box-shadow: 5px 9px 32px 0 rgba(143, 135, 248, .45)
}

li.ecommerce.active,
li.ecommerce:hover {
    box-shadow: 5px 9px 32px 0 rgba(244, 175, 27, .45)
}

ul.services-list li.active {
    padding-top: 44px;
    margin-top: -6px
}

ul.services-list li.active:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: absolute;
    right: 13px;
    bottom: 13px
}

.slick-track {
    display: flex
}

.box-wrapper .slick-track {
    margin-bottom: 20px
}

.services-slider .draggable {
    padding: 0 22px
}

.services-slider .slick-track {
    margin-left: -22px
}

.slides {
    background: #fff;
    min-height: 314px !important;
    box-shadow: 2px 3px 8px 0 rgba(0, 1, 1, .04);
    border-radius: 4px;
    padding: 38px 25px 32px 36px;
    margin-left: 15px;
    position: relative;
    overflow: hidden;
    transition: all .5s ease
}

.slides::before {
    content: "";
    width: 80px;
    height: 169px;
    border-radius: 0 0 71px 71px;
    transform: rotate(-45deg) translateY(-200px);
    position: absolute;
    top: -53px;
    right: 32px;
    transition: all .4s ease
}

.slides:hover::before {
    transform: rotate(-37deg) translateY(0)
}

.slides:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: 0;
    background: 0 0;
    transform-origin: 0 100%;
    transform: scaleX(0) translateZ(0);
    transition: transform 1s cubic-bezier(.23, 1, .32, 1)
}

.slides:hover:after {
    transform: scaleX(1) translateZ(0)
}

#tab-frontend .slide1:hover::before,
#tab-frontend .slide1:hover:after {
    background: #150e3f
}

#tab-frontend .slide2:hover::before,
#tab-frontend .slide2:hover:after {
    background: #f4b459
}

#tab-frontend .slide3:hover::before,
#tab-frontend .slide3:hover:after {
    background: #2a226b
}

#tab-cms .slide1:hover::before,
#tab-cms .slide1:hover:after {
    background: #21759b
}

#tab-cms .slide2:hover::before,
#tab-cms .slide2:hover:after {
    background: #0077c0
}

#tab-cms .slide3:hover::before,
#tab-cms .slide3:hover:after,
#tab-ecommerce .slide3:hover::before,
#tab-ecommerce .slide3:hover:after {
    background: #24c2f1
}

#tab-ecommerce .slide1:hover::before,
#tab-ecommerce .slide1:hover:after {
    background: #f46f25
}

#tab-ecommerce .slide2:hover::before,
#tab-ecommerce .slide2:hover:after {
    background: #7fc029
}

.services-slider button {
    padding: 0;
    position: absolute;
    top: -36px
}

.services-slider button.next {
    right: 31px
}

.services-slider button.previous {
    right: 81px
}

.services-slider button i[class^=icon-] {
    width: 22px;
    height: 16px;
    font-size: 0;
    vertical-align: middle
}

.portfolio-slider .slick-arrow {
    width: 15px;
    height: 15px;
    padding: 0;
    position: absolute;
    top: -25px
}

.previous {
    right: 30px;
    z-index: 2
}

.next {
    right: 10px
}

.portfolio-slider .slick-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: solid rgba(0, 0, 0, .5);
    border-width: 3px 3px 0 0;
    top: 0
}

.slick-prev::before {
    left: 0;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.icon-prev {
    display: none;
    background-position: 0 -122px;
    transform: rotate(-180deg)
}

.slick-disabled i.icon-prev {
    background-position: -22px -122px;
    transform: rotate(0)
}

.slick-next::before {
    right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.icon-next {
    display: none;
    background-position: 0 -122px
}

.slick-disabled i.icon-next {
    background-position: -22px -122px;
    transform: rotate(-180deg)
}

.slides i[class^=icon-slide-] {
    width: 63px;
    height: 74px;
    font-size: 0;
    position: absolute;
    top: 22px;
    right: 14px;
    transform: perspective(1px) translateZ(0)
}

.icon-slide-html,
.icon-slide-sketch {
    background-position: -819px -173px
}

.services-slider .slide1:hover .icon-slide-html,
.services-slider .slide2:hover .icon-slide-sketch {
    background-position: -946px -173px;
    width: 60px
}

.icon-slide-email {
    background-position: -882px -173px
}

.services-slider .slide3:hover .icon-slide-email {
    background-position: -1006px -177px
}

.icon-slide-wordpress {
    background-position: -189px -173px
}

.services-slider .slide1:hover .icon-slide-wordpress {
    background-position: -378px -173px
}

.icon-slide-drupal {
    background-position: -252px -173px
}

.services-slider .slide2:hover .icon-slide-drupal {
    background-position: -63px -173px
}

.icon-slide-mobile {
    background-position: -693px -173px
}

.services-slider .slide3:hover .icon-slide-mobile {
    background-position: -756px -173px
}

.icon-slide-magento {
    background-position: 0 -173px
}

.icon-slide-shopify {
    background-position: -567px -173px
}

.services-slider .slide2:hover .icon-slide-shopify {
    background-position: -630px -173px
}

.icon-slide-opencart {
    background-position: -441px -173px
}

.services-slider .slide3:hover .icon-slide-opencart {
    background-position: -504px -173px
}

.slides h3 {
    font-size: 18.13px;
    line-height: 1.22;
    margin-bottom: 12px
}

.slides h3 a {
    color: #131928
}

.slides h3 span {
    display: block
}

span.pricee {
    display: inline-block;
    font-weight: 600;
    background: #fff;
    font-family: Lato, sans-serif;
    vertical-align: middle;
    padding: 2px 6px 4px 5px;
    border-radius: 32px;
    font-size: 11px;
    letter-spacing: .7px;
    line-height: 1;
    margin-bottom: 13px;
    margin-right: 10px;
    border: 2px solid transparent
}

.start-txt {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    color: #8f8c8c;
    font-style: italic
}

#tab-frontend span.pricee {
    color: #ff2601;
    border-color: #ff2601
}

#tab-cms span.pricee {
    color: #7d78c5;
    border-color: #7d78c5
}

#tab-ecommerce span.pricee {
    color: #f4af1b;
    border-color: #f4af1b
}

span.pricee:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 5px 2px 0
}

#tab-frontend span.pricee:before {
    background: #ff2601
}

#tab-cms span.pricee:before {
    background: #7d78c5
}

#tab-ecommerce span.pricee:before {
    background: #f4af1b
}

.slides p {
    font-size: 16px;
    font-family: Lato, sans-serif;
    color: #616161;
    line-height: 1.6;
    padding: 0 23px 0 1px;
    margin-bottom: 16px
}

.order-now {
    display: block;
    color: #131928;
    font-size: 11.6px;
    font-weight: 700;
    font-family: Lato, sans-serif;
    text-transform: uppercase;
    position: absolute;
    bottom: 37px;
    left: 36px;
    width: calc(100% - 61px);
    transition: all .2s ease
}

a.order-now:after {
    content: "";
    width: 7px;
    height: 7px;
    border: solid rgba(19, 25, 40, .5);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: absolute;
    top: 3px;
    right: 3px;
    border-radius: 2px;
    transition: all .7s ease
}

.services-slider .slides:hover a.order-now {
    font-weight: 900
}

.services-slider .slides:hover a.order-now:after {
    border-color: #131928;
    right: 3px
}

a.order-now:hover:after {
    border-color: #7d78c5
}

#tab-frontend .slide1 a.order-now:hover {
    color: #fdbb45
}

#tab-frontend .slide2 a.order-now:hover {
    color: #f4b459
}

#tab-frontend .slide3 a.order-now:hover {
    color: #f8ca4c
}

#tab-cms .slide1 a.order-now:hover {
    color: #21759b
}

#tab-cms .slide2 a.order-now:hover {
    color: #0077c0
}

#tab-cms .slide3 a.order-now:hover,
#tab-ecommerce .slide3 a.order-now:hover {
    color: #24c2f1
}

#tab-ecommerce .slide1 a.order-now:hover {
    color: #f46f25
}

#tab-ecommerce .slide2 a.order-now:hover {
    color: #7fc029
}

#tab-frontend .slide1 a.order-now:hover:after {
    border-color: #fdbb45
}

#tab-frontend .slide2 a.order-now:hover:after {
    border-color: #f4b459
}

#tab-frontend .slide3 a.order-now:hover:after {
    border-color: #f8ca4c
}

#tab-cms .slide1 a.order-now:hover:after {
    border-color: #21759b
}

#tab-cms .slide2 a.order-now:hover:after {
    border-color: #0077c0
}

#tab-cms .slide3 a.order-now:hover:after,
#tab-ecommerce .slide3 a.order-now:hover:after {
    border-color: #24c2f1
}

#tab-ecommerce .slide1 a.order-now:hover:after {
    border-color: #f46f25
}

#tab-ecommerce .slide2 a.order-now:hover:after {
    border-color: #7fc029
}

.services-slider.slick-slider {
    display: none
}

.services-slider.slick-slider.active {
    display: block
}

#tab-frontend .slide1:hover span.pricee {
    background: #fdbb45;
    border-color: #fdbb45
}

#tab-frontend .slide2:hover span.pricee {
    background: #f4b459;
    border-color: #f4b459
}

#tab-frontend .slide3:hover span.pricee {
    background: #f8ca4c;
    border-color: #f8ca4c
}

#tab-cms .slide1:hover span.pricee {
    background: #21759b;
    border-color: #21759b
}

#tab-cms .slide2:hover span.pricee {
    background: #0077c0;
    border-color: #0077c0
}

#tab-cms .slide3:hover span.pricee,
#tab-ecommerce .slide3:hover span.pricee {
    background: #24c2f1;
    border-color: #24c2f1
}

#tab-ecommerce .slide1:hover span.pricee {
    background: #f46f25;
    border-color: #f46f25
}

#tab-ecommerce .slide2:hover span.pricee {
    background: #7fc029;
    border-color: #7fc029
}

#tab-cms .slides:hover span.pricee,
#tab-ecommerce .slides:hover span.pricee,
#tab-frontend .slides:hover span.pricee {
    color: #fff
}

#tab-cms .slides:hover span.pricee:before,
#tab-ecommerce .slides:hover span.pricee:before,
#tab-frontend .slides:hover span.pricee:before {
    background: #fff
}

.services-slider .slides:hover i[class*=icon-slide-] {
    -webkit-animation-name: icon-pop;
    animation-name: icon-pop;
    -webkit-animation-duration: .4s;
    animation-duration: .4s
}

@-webkit-keyframes icon-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes icon-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.about {
    margin-bottom: 66px
}

.graphics-img {
    display: none
}

.about-btn {
    display: none
}

.about .container {
    padding-top: 67px;
    position: relative
}

.about .container:before {
    content: "";
    width: 41px;
    height: 252px;
    background: url(https://www.htmlpanda.com/assets-new/images/aboutImage.png) no-repeat;
    position: absolute;
    top: 43px;
    left: 0
}

.inner-wrapper {
    padding: 0 13px 0 76px;
    margin-bottom: 38px
}

.inner-wrapper h2 {
    margin: 0 0 20px 1px
}

.inner-wrapper h2 span {
    display: block
}

.inner-wrapper p {
    margin: 0 1px 10px 4px
}

.inner-wrapper p:last-child {
    margin-bottom: 0
}

.list-wrap {
    margin-bottom: 41px;
    padding-left: 36px
}

ul.about-list li {
    font-size: 16px;
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #131928;
    position: relative;
    padding: 11px 0 12px 61px;
    margin-bottom: 24px
}

ul.about-list li:last-child {
    margin-bottom: 0
}

ul.about-list li.layout,
ul.about-list li.rating {
    margin-bottom: 27px
}

ul.about-list li.admin,
ul.about-list li.gt {
    margin-bottom: 25px
}

ul.about-list li.browser {
    margin-bottom: 23px
}

ul.about-list li.speed {
    margin-bottom: 23px
}

ul.about-list li.support {
    margin-bottom: 28px
}

ul.about-list li.agreement,
ul.about-list li.browser,
ul.about-list li.gt,
ul.about-list li.support {
    padding-left: 62px
}

ul.about-list li.admin,
ul.about-list li.guarantee {
    padding: 14px 0 9px 61px
}

ul.about-list li span {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 1px
}

ul.about-list li.browser span,
ul.about-list li.device span,
ul.about-list li.gt span,
ul.about-list li.rating span {
    left: 0
}

li.device span {
    background: #f6cf80
}

li.rating span {
    background: #80d8ee
}

li.gt span {
    background: #f4a179
}

li.browser span {
    background: #a89cc4
}

li.admin span {
    background: #ebb3b6
}

li.speed span {
    background: #8ca4d4
}

li.layout span {
    background: #f8cad7
}

li.agreement span {
    background: #6deee7
}

li.support span {
    background: #a9ceac
}

li.guarantee span {
    background: #eac896
}

ul.about-list li i[class^=icon-about-] {
    font-size: 0;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%)
}

.icon-about-device {
    background-position: 0 -70px
}

.icon-about-rating {
    background-position: -32px -69px
}

.icon-about-gt {
    background-position: -63px -70px
}

.icon-about-browser {
    background-position: -96px -70px
}

.icon-about-admin {
    background-position: -128px -71px
}

.icon-about-speed {
    background-position: -160px -72px
}

.icon-about-layout {
    background-position: -191px -70px
}

.icon-about-turnaround {
    background-position: -472px -32px;
    width: 26px !important;
    height: 30px !important
}

.icon-about-agreement {
    background-position: -223px -71px
}

.icon-about-support {
    background-position: -256px -69px
}

.icon-about-guarantee {
    background-position: -289px -69px
}

.icon-about-transparent-communication {
    background-position: -917px -276px;
    width: 30px;
    height: 32px
}

.icon-about-goal-methodology {
    background-position: -974px -278px;
    width: 31px;
    height: 28px
}

.link-wrapper {
    text-align: center
}

a.about-us {
    display: inline-block;
    padding: 15px 23px 16px 30px
}

a.about-us:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: solid #5952c9;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    margin: 0 0 2px 23px
}

a.about-us:hover,
a.read:hover {
    background: #5952c9;
    color: #fff;
    border-color: transparent
}

a.about-us:hover:after {
    border-color: #fff
}

.portfolio {
    padding: 0 13px 90px
}

.portfolio h2 {
    text-align: center;
    margin-bottom: 34px
}

.port1,
.port2 {
    display: none !important
}

.portfolio1,
.portfolio2 {
    margin-bottom: 39px
}

.portfolio2 a.button.visit-btn {
    display: none
}

img.mac {
    max-width: 100%;
    display: block
}

ul.view {
    margin-bottom: 23px
}

ul.view li {
    color: #3f3f3f
}

ul.view li.creads {
    margin-bottom: 37px;
    padding-left: 21px;
    line-height: 1.1
}

ul.view li strong {
    display: block;
    font-size: 20px;
    color: #000
}

ul.view li a {
    display: inline-block;
    color: #373737;
    font-size: 12px;
    font-weight: 700;
    font-family: Lato, sans-serif;
    text-transform: uppercase;
    transition: all .4s ease
}

ul.view li:hover a {
    color: #ff2601
}

ul.view li a:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: solid #858585;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-vertical-align: middle;
    margin: 0 0 2px 8px
}

ul.view li:hover a:after {
    border-color: #ff2601
}

ul.view li.viewcss a:after {
    margin-left: 15px
}

.flex-view {
    display: flex
}

.flex-view li {
    margin: 0 5px
}

ul.portfolio-menu li {
    float: left;
    width: 30%;
    padding: 10px 11px 13px 12px;
    min-height: 136px;
    color: #fff;
    font-size: 16px;
    border-radius: 6px;
    margin-right: 13px
}

ul.portfolio-menu li.w3c-box {
    padding: 10px 9px 13px 13px
}

ul.portfolio-menu li.mobile-box {
    padding: 11px 7px 13px 10px
}

ul.portfolio-menu li:last-child {
    margin-right: 0
}

li.speed-box {
    background: #8f87f8
}

li.w3c-box {
    background: #ffc240
}

li.mobile-box {
    background: #fc7fbb
}

ul.portfolio-menu li span {
    display: block
}

ul.portfolio-menu li span.row1 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 12px
}

ul.portfolio-menu li.w3c-box span.row1 {
    margin-left: 1px
}

ul.portfolio-menu li.mobile-box span.row1 {
    margin-left: 2px
}

.btn-wrap2,
ul.portfolio-menu li span.speed-line {
    display: none
}

ul.portfolio-menu li sub {
    font-size: 13px;
    display: inline-block;
    margin-left: 6px
}

ul.portfolio-menu li span.row2 {
    line-height: 1;
    padding-left: 1px;
    font-family: Lato, sans-serif
}

span.num {
    font-size: 24px;
    margin-bottom: 10px
}

.icons-wrapper {
    text-align: right;
    margin-bottom: 5px
}

li.w3c-box .icons-wrapper {
    margin-bottom: 11px
}

li.mobile-box .icons-wrapper {
    margin-bottom: 10px
}

ul.portfolio-menu li i[class^=icon-view-] {
    width: 32px;
    height: 32px;
    font-size: 0
}

.icon-view-speed {
    background-position: -159px -70px
}

.icon-view-w3c {
    background-position: -320px -70px
}

.icon-view-mobile {
    background-position: -384px -70px
}

.btn-wrap1,
.btn-wrap2 {
    text-align: center
}

.view-btn,
.visit-btn {
    color: #fff;
    background: #ff2601;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: 32px;
    box-shadow: 5px 9px 32px 0 rgba(255, 38, 1, .45)
}

.view-btn {
    display: inline-block;
    padding: 20px 33px 20px 34px;
    font-size: 15.72px;
    margin-right: 3px
}

.visit-btn {
    display: none;
    font-size: 17px;
    font-weight: 700
}

.quote-btn:hover,
.view-btn:hover,
.visit-btn:hover,
a.place-order:hover {
    background: #fff;
    color: #ff2601;
    border: 2px solid #ff2601;
    box-shadow: none
}

.number-wrapper {
    padding-bottom: 81px
}

.numbers {
    padding: 0 14px 0 28px
}

.dotline {
    font-size: 18px;
    font-family: Lato, sans-serif;
    line-height: 1;
    float: left;
    margin-bottom: 35px;
    padding: 0 8px
}

.dotline:last-child {
    padding-right: 0;
    margin-bottom: 0
}

.project {
    padding-left: 0
}

.client {
    padding-left: 38px
}

.years {
    padding: 0 20px 0 0
}

.dotline sup {
    font-size: 29px;
    font-weight: 500;
    vertical-align: super
}

.dotline span {
    display: block;
    font-size: 50px;
    font-family: Aleo, serif
}

.project span {
    color: #8f87f8
}

.client span {
    color: #ffc240
}

.years span {
    color: #fc7fbb
}

.repeatClient span {
    color: #8578f1
}

.engineers span {
    color: #fdc143
}

.clients {
    background: #f2f2f2;
    padding: 36px 20px 0;
    position: relative
}

.clients h2 {
    position: relative;
    text-align: center;
    margin-bottom: 40px
}

.grid-wrapper {
    transition: all .5s ease;
    overflow: hidden;
    height: 200px
}

.grid-item {
    position: static !important;
    margin: 0 15px 20px
}

.grid-item img {
    display: block;
    width: 98px;
    height: 92px
}

[class*=br-],
[class^=br-] {
    background-image: url(https://www.htmlpanda.com/assets-new/service-images/client-sprites.png);
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    text-indent: -9999px
}

.grid-item {
    margin: 0 10px 20px
}

.grid-item i {
    width: 98px;
    height: 92px
}

.br-aclu {
    background-position: -5px -547px
}

.br-intel {
    background-position: -718px -5px
}

.br-drivania {
    background-position: -329px -547px
}

.br-hp {
    background-position: -437px -547px
}

.br-clearrate {
    background-position: -113px -547px
}

.br-huawei {
    background-position: -545px -547px
}

.br-rg {
    background-position: -718px -311px
}

.br-uniliver {
    background-position: -718px -413px
}

.br-philips {
    background-position: -718px -209px
}

.br-necco {
    background-position: -718px -107px
}

.br-cooper {
    background-position: -221px -547px
}

.grid-btn {
    width: 281px;
    height: 55px;
    background: #666566;
    position: absolute;
    border: 3px solid transparent;
    bottom: 0;
    left: 50%;
    margin-left: -138px;
    border-radius: 4px 4px 0 0;
    transition: all .5s ease
}

.grid-btn:hover {
    background: #f24c4c
}

.btn-arrow {
    width: 18px;
    height: 18px;
    border: solid #fff;
    border-width: 0 5px 5px 0;
    border-radius: 2px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    position: absolute;
    left: 50%;
    margin-left: -12px;
    top: 23px;
    font-size: 0
}

.rotate {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    top: 15px
}

.testimonial {
    padding: 57px 12px 49px;
    text-align: center;
    position: relative
}

.testimonial.about-testimonial {
    padding-bottom: 122px
}

.client-img,
.testimonial-dots,
.testimonial-left {
    display: none
}

.testimonial h3 {
    margin-bottom: 18px
}

p.client-rating {
    text-indent: 19px
}

span.rating {
    display: inline-block;
    background: #e23939;
    border-radius: 6px;
    color: #fff;
    text-indent: 0;
    line-height: 1;
    padding: 1px 4px
}

p.review {
    font-family: Lato, sans-serif;
    line-height: 1.7;
    font-size: 16px;
    color: #616161;
    word-spacing: .2px;
    padding: 0 15px;
    margin-bottom: 35px
}

.info-wrapper {
    margin-bottom: 40px
}

.jet {
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    margin: 0 15px 34px 0
}

.jetimg-wrapper {
    display: inline-block
}

.jet img {
    width: 100%
}

.open-crearrate {
    background-position: -132px -89px;
    width: 90px;
    height: 28px
}

.open-bronco {
    background-position: -242px -91px;
    width: 94px;
    height: 34px
}

.open-wowasia {
    background-position: -365px -91px;
    width: 72px;
    height: 50px
}

.open-paradis {
    background-position: -10px -157px;
    width: 78px;
    height: 53px
}

.open-nutcache {
    background-position: -114px -157px;
    width: 98px;
    height: 20px
}

.open-worxout {
    background-position: -231px -153px;
    width: 87px;
    height: 22px
}

.open-360 {
    background-position: -97px -325px;
    width: 82px;
    height: 82px
}

.info {
    display: inline-block;
    margin-left: 18px
}

.info span {
    display: block
}

span.name {
    font-size: 17.25px;
    color: #131928;
    margin-bottom: 6px;
    text-align: left
}

span.chairman {
    font-size: 13.88px;
    font-family: Lato, sans-serif
}

span.chairman strong {
    font-weight: 700;
    color: #131928;
    display: block
}

a.read {
    display: inline-block;
    padding: 15px 41px 16px 41px;
    line-height: normal;
}

.testimonial-slider ul.slick-dots {
    position: absolute;
    left: 50%;
    bottom: -25px;
    margin-left: -86px
}

.testimonial-slider ul.slick-dots li {
    float: left;
    margin-right: 15px;
    transition: all .4s ease
}

.testimonial-slider ul.slick-dots li:last-child {
    margin-right: 0
}

.testimonial-slider ul.slick-dots li button {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
    background: #c5c5c5;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    font-family: Montserrat, sans-serif
}

.testimonial-slider ul.slick-dots li.slick-active button,
.testimonial-slider ul.slick-dots li:hover button {
    background: #ff2601;
    color: #fff
}

.work {
    text-align: center;
    position: relative;
    box-shadow: 5px 9px 32px 0 rgba(89, 82, 201, .45)
}

.work .container {
    background: url(https://www.htmlpanda.com/assets-new/images/formBackground.png) no-repeat right top;
    background-color: #5952c9;
    padding: 44px 31px 49px 32px
}

.work h4 {
    color: #fff;
    margin-bottom: 8px
}

span.text {
    display: block;
    margin-bottom: 32px;
    font-size: 16px;
    font-family: Lato, sans-serif;
    color: rgba(255, 255, 255, .7);
    line-height: 1.35
}

.name-wrapper {
    margin-bottom: 15px
}

.form-row1 {
    margin-bottom: 23px
}

.selectBox-dropdown {
    width: 270px !important;
    padding: 5px 10px
}

select option {
    color: #000
}

.form-row2 {
    margin-bottom: 40px
}

.work-form ::placeholder,
.work-form input,
.work-form select,
.work-form textarea {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 17px
}

.work-form input,
.work-form textarea {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    width: 100%
}

.select-wrapper {
    text-align: left
}

.required-service {
    width: 100%;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
    transition: all .3s linear;
    font-family: Lato, sans-serif;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

.drop-select {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px
}

.drop-select:after {
    content: "";
    width: 7.4px;
    height: 7.4px;
    border: solid rgba(255, 255, 255, .72);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
    pointer-events: none
}

.work-form input {
    padding: 13px 0
}

.work-form select {
    width: 100%;
    padding: 13px 0;
    -webkit-appearance: none;
    -moz-appearance: none
}

.custom-file-upload {
    cursor: pointer;
    display: block;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    padding: 13px 0 14px 0;
    position: relative;
    font-family: Lato, sans-serif
}

.custom-file-upload:before {
    content: "";
    width: 21px;
    height: 20px;
    position: absolute;
    right: 20px;
    background: url(https://www.htmlpanda.com/assets-new/images/sprite.png) no-repeat 0 -153px
}

.work-form textarea {
    height: 41px;
    padding: 6px 0 6px
}

.quote-btn {
    height: 59px;
    color: #fff;
    background: #ff2601;
    border-radius: 32px;
    font-weight: 500;
    letter-spacing: .3px;
    border: 2px solid transparent;
    font-size: 17px;
    text-transform: uppercase
}

.updates {
    padding: 56px 0 100px;
    position: relative
}

.updates .container {
    padding: 0 15px
}

.btn-post {
    display: inline-block;
    border: 1px solid #5952c9;
    color: #5952c9;
    font-size: 15px;
    padding: 16px 30px 13px;
    position: absolute;
    left: 50%;
    bottom: 47px;
    border-radius: 40px;
    transform: translateX(-50%)
}

.btn-post:hover {
    background: #5952c9;
    color: #fff
}

.blog-head {
    margin-bottom: 22px
}

.updates h2 {
    text-align: center
}

.updates-img {
    height: 132px;
    background-size: cover;
    background-position: center center;
    border-radius: 6px 6px 0 0
}

.box {
    box-shadow: 2px 3px 8px 0 rgba(0, 1, 1, .12);
    border-radius: 3px;
    margin-right: 29px
}

.box-wrapper .active-width {
    transition: all 1s ease
}

.box-wrapper .draggable {
    padding: 0 22px
}

.box-wrapper .active-width .exceprt-more,
.box-wrapper .active-width .title-more {
    display: none
}

.text-wrapper {
    min-height: 260px;
    padding: 31px 15px 20px 25px
}

.text-wrapper h3 {
    margin-bottom: 16px
}

.text-wrapper h3 a {
    display: block;
    letter-spacing: -.52px;
    font-size: 0;
    font-weight: 700;
    color: #131928
}

.hidden-text.title-hidden,
.title_1 {
    font-size: 19px
}

.text-wrapper p {
    margin-bottom: 0;
    font-size: 16.18px;
    line-height: 1.5;
    font-family: Lato, sans-serif
}

.hidden-text {
    display: none
}

.box2 p {
    padding-right: 10px
}

.box-wrapper .slick-current.active-width .show-text {
    display: none
}

.questions {
    background: #5952c9;
    padding: 40px 16px 0;
    position: relative
}

.questions .container {
    padding-bottom: 60px;
    position: relative
}

.question-btn {
    display: none
}

.questions h3 {
    color: #fff;
    margin-bottom: 26px;
    padding: 0 1px;
    text-align: center;
    line-height: 1.23
}

ul.faq-list {
    margin-bottom: 5px
}

ul.faq-list li {
    color: #131928;
    background: #fff;
    margin-bottom: 33px;
    border-radius: 3px;
    padding: 30px 33px 20px 33px;
    line-height: 1.42;
    position: relative
}

ul.faq-list li:last-child {
    margin-bottom: 0
}

ul.faq-list li.ques2 {
    padding-bottom: 15px
}

ul.faq-list li.ques3 {
    margin-bottom: 31px
}

.answer {
    display: block;
    padding-left: 41px;
    position: relative;
    margin-top: 14px
}

li.ques2 span.answer {
    margin-top: 11px
}

li.ques3 span.answer,
li.ques4 span.answer {
    margin-top: 13px
}

span.icon-wrapper {
    display: inline-block;
    border-radius: 50%;
    position: absolute
}

span.question-wrapper {
    width: 26px;
    height: 26px;
    background: #ff725a;
    top: -13px;
    left: 16px
}

span.check-wrapper {
    width: 18px;
    height: 18px;
    background: #30ce42;
    left: 2px;
    top: 3px
}

ul.faq-list li i[class^=icon-faq-] {
    font-size: 0;
    width: 10px;
    height: 15px
}

.icon-faq-questionmark {
    background-position: 0 -138px;
    margin-left: 8px
}

.icon-faq-checkmark {
    background-position: -10px -138px;
    margin: 0 0 8px 4px
}

.button-wrapper {
    text-align: center
}

button.view-more {
    padding: 0;
    color: #fff;
    font-weight: 700;
    font-size: 17px
}

@-moz-document url-prefix() {

    .work-form select,
    .work-form textarea {
        color: #fff;
        font-family: Lato, sans-serif;
        font-size: 17px
    }
}

.work-form textarea {
    transition: .4s linear;
    min-height: 100px;
    overflow: hidden
}

.work-form textarea.active {
    height: 100px
}

.form-faq-block {
    background: #f2f2f2;
    padding: 0
}

.form-cell {
    background-color: #5952c9;
    padding: 40px 20px;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center
}

.form-cell .container {
    max-width: 100%;
    padding: 0
}

.form-cell h4 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 11px
}

.form-cell h4 br {
    display: none
}

.form-cell span.text {
    margin-bottom: 22px;
    text-align: center
}

.form-cell .work-form {
    width: 100%
}

.form-cell .form-row1,
.form-cell .form-row2 {
    margin-bottom: 0
}

.form-cell .custom-file-upload,
.form-cell .email-wrapper,
.form-cell .name-wrapper {
    width: 100%;
    margin-bottom: 22px
}

.form-cell .phone-wrapper {
    margin-bottom: 26px
}

.form-cell .quote-btn {
    position: static;
    margin: 20px 0 0 0;
    font-weight: 700
}

.icon-contact-send {
    background-position: -135px -726px;
    width: 27px;
    height: 23px;
    margin: -4px 0 0 8px;
    text-indent: -9999px
}

.quote-btn:hover .icon-contact-send {
    background-position: -162px -725px
}

.faq-cell {
    padding: 40px 20px
}

.faq-cell h3 {
    font-size: 20px;
    margin-bottom: 36px
}

.faq-list {
    margin-bottom: 38px
}

.faq-cell .faq-list li,
.faq-cell .faq-list li.ques2 {
    padding-left: 27px;
    padding-right: 27px
}

.faq-cell .question-wrapper {
    left: 17px
}

.faq-cell .question {
    padding-right: 0
}

.faq-cell .answer {
    position: relative;
    right: auto;
    top: 10px;
    padding-left: 27px;
    left: 0
}

.faq-cell .check-wrapper {
    left: 0
}

.faq-head {
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    margin-bottom: 20px;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center
}

.faq-cell h3 {
    margin-bottom: 0
}

.faq-head h3 span {
    display: inline-block
}

.faq-btn {
    border: 1px solid #5952c9;
    height: 100%;
    color: #5952c9;
    font-weight: 700;
    font-size: 16px;
    line-height: 40px;
    padding: 0 17px;
    cursor: pointer;
    font-family: Lato, sans-serif;
    transition: all .4s ease
}

.faq-btn:hover {
    background: #5952c9;
    color: #fff
}

.faq-btn:after {
    content: "";
    border: solid #5952c9;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    margin-top: 6px;
    margin-left: 4px;
    transform: rotate(-45deg);
    transition: all .5s linear
}

.faq-btn:hover:after {
    border-color: #fff
}

.exclusive-content {
    margin-bottom: 23px
}

.exclusive-ques {
    display: block;
    background-color: #fff;
    color: #131928;
    font-size: 15px;
    border-radius: 40px;
    position: relative;
    padding: 18px 45px 17px 23px;
    box-shadow: 0 2px 5px 0 rgba(0, 1, 1, .07)
}

.exclusive-ques:after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50%;
    width: 10px;
    height: 10px;
    border: solid #5f6168;
    border-width: 0 2px 2px 0;
    z-index: 1;
    padding: 4px;
    transform: translateY(-50%) rotate(45deg);
    overflow: hidden
}

.exclusive-content.active .exclusive-ques:after,
.exclusive-content:hover .exclusive-ques:after {
    transform: translateY(-50%) rotate(-135deg)
}

.answer-blog {
    background-color: #131928;
    padding: 40px 17px 21px;
    margin-bottom: 15px;
    border-radius: 0 0 20px 20px;
    margin-top: -29px;
    display: none
}

.answer-blog p {
    color: #fff;
    font-size: 15px;
    line-height: 1.38;
    margin-bottom: 0
}

.exclusive-content.active .answer-blog,
.exclusive-content:hover .answer-blog {
    display: block
}

button.view-more {
    padding: 0;
    color: #000;
    font-weight: 700;
    font-size: 17px;
    display: none
}

.technology-tabs li {
    float: left;
    margin-right: 20px;
    width: 45%;
    width: auto;
    margin-right: 0;
    text-align: center;
    opacity: .5
}

.technology-tabs li {
    display: block;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #fff;
    position: relative;
    font-family: Lato, sans-serif
}

.technology-tabs li:after {
    content: "";
    position: absolute;
    top: 100%;
    display: none;
    width: 12px;
    height: 12px;
    margin-top: 41px;
    background: #5952c9;
    border: 1px solid #fff;
    border-left: none;
    border-top: none;
    z-index: 1;
    left: 8px;
    margin: -5px 0 0;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.technology-tabs li.current.upload-design:after {
    left: auto;
    right: 8px
}

.technology-tabs li.current:after {
    display: block
}

.technology-tabs li.current {
    color: #fff;
    opacity: 1
}

.tabbing-links li:first-child a {
    padding-left: 0
}

.tech-content span {
    font-size: 12px;
    color: #fff;
    font-style: italic;
    position: absolute;
    top: 100%;
    margin-top: 4px
}

.relative {
    position: relative
}

.use-txt {
    color: #a9a6de;
    font-size: 16px;
    bottom: 0;
    left: 11px;
    top: 100%;
    margin-top: 15px;
    letter-spacing: 1px
}

.icon-contact-link {
    background-position: -237px -718px;
    right: 20px;
    margin-top: -14px;
    width: 27px;
    height: 23px;
    position: absolute;
    top: 50%;
    font-size: 0
}

.tabbing-links {
    margin-bottom: 8px
}

.form-cell .custom-file-upload {
    margin: 12px 0 3px;
    float: none;
    border: none
}

.link-intro {
    position: relative
}

.tabs.animated-fade.input-wrapper {
    margin: 36px 0 15px
}

.tab {
    display: none
}

.tab.active {
    display: block
}

.tech-hor {
    display: none
}

.tech-hor.current {
    display: block
}

#framework {
    position: relative
}

#html_element {
    margin-top: 37px
}

.captcha-flex {
    display: flex;
    display: -ms-flexbox;
    height: 100%;
    margin-bottom: 30px
}

.work-form .captcha-flex h4 {
    font-size: 22px;
    margin-bottom: 0;
    margin-right: 15px
}

.work-form .answer-box {
    padding: 0 0 0 10px;
    width: auto;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}

.hor-flex {
    display: block
}

.digital-value span {
    font-size: 17px;
    color: #fff;
    display: block;
    margin-bottom: 7px;
    font-family: Lato, sans-serif
}

#status {
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    font-style: italic;
    font-family: Lato, sans-serif
}

#progressBar {
    width: 100% !important;
    background: 0 0;
    border: 1px solid rgba(255, 255, 2552, .17);
    height: 13px
}

#g-recaptcha-error {
    color: #ff2601;
    font-size: 15px;
    font-family: Lato, sans-serif
}

.alertCls::-webkit-input-placeholder {
    color: #ee3124
}

.alertCls::-moz-placeholder {
    color: #ee3124
}

.alertCls:-ms-input-placeholder {
    color: #ee3124
}

.alertCls:-moz-placeholder {
    color: #ee3124
}

.panda-form-list li {
    margin-bottom: 40px
}

.input-wrap input {
    border: none;
    font-size: 16px;
    padding: 5px 10px;
    display: block;
    width: 100%
}

.input-global {
    position: relative;
    font-family: Lato, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 2552, .17)
}

.join-textarea {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    padding: 5px 10px;
    font-family: Lato, sans-serif
}

.input-global label {
    position: absolute;
    font-size: 16px;
    left: 10px;
    top: 8px;
    color: #fff;
    font-weight: 400;
    transition: all .3s linear;
    font-family: Lato, sans-serif
}

.focused label {
    top: -15px;
    color: #fff;
    opacity: .8
}

.banner-form .tooltip-box {
    position: relative
}

.tooltip-box {
    position: absolute;
    top: 100%;
    margin-top: 11px;
    left: 0;
    background: #ddd;
    color: rgba(0, 0, 0, .83);
    font-size: 15px;
    font-family: Lato, sans-serif;
    -webkit-border-radius: 4PX;
    -moz-border-radius: 4PX;
    border-radius: 4PX;
    padding: 0 15px;
    line-height: 28px;
    z-index: 1;
    display: none
}

.tooltip-box::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 35px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ddd
}

.placeholder-show::-webkit-input-placeholder {
    color: transparent;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show::-moz-placeholder {
    color: transparent;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show:-ms-input-placeholder {
    color: transparent;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show:-moz-placeholder {
    color: transparent;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show:focus::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .5);
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show:focus::-ms-input-placeholder {
    color: rgba(255, 255, 255, .5);
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.placeholder-show:focus::-moz-placeholder {
    color: rgba(255, 255, 255, .5);
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.portfolio-wrapper {
    padding: 40px 0;
    position: relative
}

.portfolio-wrapper:after {
    content: "";
    display: block;
    max-width: 1363px;
    width: 90%;
    height: 1px;
    margin: 0 auto;
    background-color: #e7e7e7
}

.text-indent {
    text-indent: -9999px;
    font-size: 0
}

.text-center {
    text-align: center
}

.d-flex {
    display: flex;
    display: -ms-flexbox
}

.portfolio-wrapper .container {
    position: relative;
    padding: 0 15px
}

.background-box {
    position: absolute;
    width: 260px;
    height: 260px;
    top: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #ff2601;
    z-index: -1
}

.portfolio-wrapper h2 {
    margin-bottom: 22px
}

.portfolio-slider .draggable {
    padding-top: 55px;
    min-height: 688px !important
}

.portfolio-slider .slick-slide {
    padding-bottom: 40px
}

.portfolio-img {
    width: 240px;
    margin: 0 auto 30px
}

.portfolio-content {
    padding: 60px 0 40px
}

.portfolio-heading {
    font-size: 18px;
    color: #3f3f3f;
    margin-bottom: 22px;
    display: inline-block
}

.new-btn-wrap button,
.red-button {
    background-color: #ff2601;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 50px;
    padding: 0 28px;
    border: 2px solid transparent;
    border-radius: 40px;
    transition: all 1s ease;
    font-family: Lato, sans-serif;
    display: inline-block
}

.portfolio-heading strong {
    display: block;
    font-size: 24px;
    color: #000;
    line-height: 1.1;
    margin-bottom: 4px
}

.portfolio-visit {
    margin-bottom: 22px
}

.portfolio-visit li {
    margin-right: 12px
}

.portfolio-visit li:last-child {
    margin-right: 0
}

.portfolio-visit a {
    color: #373737;
    font-size: 17px;
    font-weight: 700;
    transition: all 1s ease;
    font-family: Lato, sans-serif
}

.portfolio-img {
    width: 240px;
    margin: 0 auto 30px;
    display: block
}

.portfolio-img img {
    width: 100%;
    height: 100%
}

.portfolio-visit a:hover {
    color: #ff2601
}

.portfolio-performance {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 30px
}

.portfolio-performance li {
    color: #fff;
    padding: 17px 0;
    border-radius: 4px;
    white-space: normal;
    flex: 0 0 30%;
    margin: 0 12px 0 0;
    position: relative;
    overflow: hidden;
    text-align: center
}

.portfolio-bg1 {
    background-color: #8f87f8
}

.portfolio-bg2 {
    background-color: #ffc240
}

.portfolio-bg3 {
    background-color: #fc7fbb
}

.performance-icon {
    display: block;
    margin-bottom: 10px;
    min-height: 31px
}

.srv-view-speed {
    background-position: -5px -178px;
    width: 26px;
    height: 22px
}

.srv-view-w3c {
    background-position: -40px -178px;
    width: 24px;
    height: 24px
}

.srv-view-mobile {
    background-position: -79px -178px;
    width: 25px;
    height: 29px
}

.performance-detail {
    font-size: 22px;
    margin-bottom: 13px;
    line-height: 1;
    display: block
}

.performance-detail sub {
    font-size: 12px
}

.performance-line {
    display: block;
    background-color: #6f68d2;
    height: 1px;
    width: 100px;
    position: relative;
    line-height: 1;
    margin: 0 auto 8px
}

.performance-line:after {
    content: "";
    position: absolute;
    width: 78%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #ffc240
}

.performance-title {
    font-family: Lato, sans-serif;
    font-size: 15px
}

.portfolio-slider .slick-arrow {
    width: 15px;
    height: 15px;
    padding: 0;
    position: absolute;
    top: 21%;
    z-index: 2
}

.portfolio-slider .previous {
    left: 10px
}

.portfolio-slider .next {
    right: 10px
}

.portfolio-slider .slick-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: solid rgba(0, 0, 0, .5);
    border-width: 3px 3px 0 0;
    top: 0
}

.portfolio-slider .slick-prev:before {
    left: 0;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.portfolio-slider .slick-next:before {
    right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.portfolio-slider .slick-arrow i {
    display: none
}

.feed-left {
    margin-bottom: 45px
}

.feed-box img {
    display: block;
    width: 100%;
    height: 100%
}

.feed-content {
    background-color: #fff;
    padding: 30px 20px 38px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 65px 0 rgba(0, 1, 1, .26)
}

.feed-content a {
    display: block;
    font-weight: 700;
    color: #131928;
    font-size: 18px;
    margin-bottom: 17px
}

.feed-content p {
    color: #616161;
    line-height: 1.5;
    font-size: 18px;
    margin-bottom: 0;
    font-family: Lato, sans-serif
}

@media (min-width:473px) and (max-width:575px) {
    a.place-order {
        position: relative;
        z-index: 2
    }

    .price-wrapper strong {
        margin-top: 12px
    }

    p.client-rating {
        text-indent: 0
    }
}

@media (min-width:375px) {
    .banner h2 {
        font-size: 36px
    }

    ul.view li strong {
        font-size: 26px
    }

    ul.view li a {
        font-size: 14px
    }

    .flex-view li {
        margin: 0 16px 0 0
    }

    .technology-tabs li {
        font-size: 17px
    }

    .portfolio-visit a:after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border: solid #858585;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-vertical-align: middle;
        margin: 0 0 2px 5px
    }

    .answer-blog p,
    .exclusive-ques {
        font-size: 16px
    }
}

@media (min-width:576px) {
    .banner-wrapper {
        padding: 35px 32px 28px
    }

    .banner h2 {
        max-width: 550px
    }

    .price-wrapper strong {
        padding: 13px 25px 10px 0;
        margin-bottom: 0
    }

    ul.points {
        padding: 0 0 10px;
        overflow: auto;
        white-space: nowrap;
        width: 600px;
        margin: 0 auto
    }

    ul.points li {
        display: inline-block;
        margin: 0;
        padding-right: 30px
    }

    ul.points li.code,
    ul.points li.voucher {
        margin: 0
    }

    .web-services {
        padding: 40px 40px 60px
    }

    .services {
        padding-top: 90px
    }

    ul.services-list {
        padding-left: 24px
    }

    ul.services-list li {
        font-size: 13px
    }

    .services-slider {
        margin-left: 20px
    }

    .slides {
        margin: 0 12.5px
    }

    .slides p {
        padding: 0
    }

    .slides i.icon-slide-email {
        right: 2px;
        top: 11px
    }

    .slides i.icon-slide-mobile {
        top: 15px;
        right: 3px
    }

    .about {
        margin-bottom: 40px
    }

    .inner-wrapper {
        padding: 0
    }

    .list-wrap {
        padding: 0
    }

    .about-wrapper {
        padding: 0 60px
    }

    ul.about-list li,
    ul.about-list li.admin,
    ul.about-list li.agreement,
    ul.about-list li.browser,
    ul.about-list li.gt,
    ul.about-list li.layout,
    ul.about-list li.rating,
    ul.about-list li.speed,
    ul.about-list li.support {
        margin-bottom: 18px
    }

    ul.about-list li.guarantee {
        margin-bottom: 0
    }

    .portfolio {
        padding: 0 35px 40px
    }

    ul.view li {
        float: left
    }

    ul.view li.creads {
        margin-bottom: 0;
        padding-left: 0
    }

    .img-wrapper1 {
        margin-bottom: 10px
    }

    .portfolio1 {
        margin-bottom: 30px
    }

    .portfolio h2 {
        margin-bottom: 20px
    }

    .inner-wrapper1 {
        padding-left: 0
    }

    img.mac {
        max-width: 68%;
        margin-left: 0
    }

    .numbers {
        text-align: center
    }

    .dotline {
        font-size: 15px;
        display: inline-block;
        margin-right: 16px;
        padding: 0;
        float: none
    }

    .dotline:last-child {
        margin-right: 0
    }

    .client,
    .engineers,
    .project,
    .repeatClient,
    .years {
        margin-bottom: 0
    }

    .dotline span {
        margin: 0;
        line-height: 1;
        font-size: 35px
    }

    p.client-rating {
        padding: 0 20px;
        text-indent: 0
    }

    .work .container {
        padding: 44px 60px 49px
    }

    .box-wrapper {
        margin-left: 28px
    }

    .text-wrapper {
        min-height: 290px;
        padding: 26px 15px 20px 20px
    }

    .questions {
        padding: 40px 30px 0
    }

    ul.faq-list li {
        padding: 25px 33px 20px 33px
    }

    .answer {
        margin-top: 8px
    }
}

@media only screen and (min-width:667px) {
    .portfolio-slider .previous {
        left: 15%
    }

    .portfolio-slider .next {
        right: 15%
    }

    .portfolio-performance li {
        max-width: none;
        width: 145px;
        flex: inherit
    }
}

@media (min-width:768px) {
    #wrapper {
        overflow: hidden
    }

    .banner {
        padding-bottom: 50px
    }

    .banner-wrapper {
        padding: 55px 40px 33px
    }

    .banner h1 {
        font-size: 24px;
        margin-bottom: 8px
    }

    .banner h2 {
        font-size: 38px;
        padding-right: 0;
        padding-top: 9px;
        max-width: 580px
    }

    .money-back {
        margin-top: 22px
    }

    ul.points {
        overflow: hidden;
        white-space: normal;
        width: 100%;
        text-align: center;
        display: flex;
        display: -ms-flexbox;
        padding: 0 15px;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    ul.points li i[class^=icon-points-] {
        position: static;
        margin-bottom: 15px
    }

    ul.points li {
        width: 25%;
        font-size: 14px;
        padding: 0 20px
    }

    .icon-points-voucher {
        margin: 0
    }

    .steps-wrapper {
        padding: 35px 4% 0
    }

    .steps-head span {
        margin-bottom: 50px
    }

    ul.steps {
        display: flex;
        display: -ms-flexbox;
        padding: 0 0 45px 0;
        margin-bottom: 45px;
        border-bottom: 1px solid #655fbf
    }

    ul.steps:last-child {
        border: none;
        margin-bottom: 0
    }

    ul.steps li {
        width: 33.33%;
        float: left;
        padding-right: 4%;
        margin-bottom: 0
    }

    ul.steps li p {
        padding-left: 0
    }

    ul.steps li.step2 h2,
    ul.steps li.step3 h2,
    ul.steps li.step3 p {
        margin-left: 0
    }

    ul.services-list li {
        font-size: 15px;
        padding-bottom: 19px
    }

    ul.services-list li.active::after {
        bottom: 27px
    }

    .services-slider .slick-track {
        margin-left: 0
    }

    .services-slider .slick-track {
        display: flex;
        display: -ms-flexbox
    }

    .slides {
        min-height: 300px !important
    }

    .services-slider .draggable {
        padding-left: 0;
        padding-right: 0
    }

    .slides p {
        font-size: 14px
    }

    .slides i.icon-slide-email,
    .slides i.icon-slide-mobile {
        right: 14px;
        top: 22px
    }

    a.order-now {
        font-size: 13px;
        bottom: 37px
    }

    .services {
        padding-bottom: 0
    }

    .services .container {
        background: #f6f6f6 url(https://www.htmlpanda.com/assets-new/images/servicesBackground.jpg) no-repeat right;
        min-height: 349px
    }

    .services-slider .slides:hover a.order-now:after {
        right: 70px
    }

    .inner-wrapper,
    .list-wrap {
        padding: 0
    }

    .inner-wrapper h2,
    .inner-wrapper p {
        margin-left: 0
    }

    .left-list,
    .right-list {
        width: 50%;
        float: left
    }

    ul.about-list li.admin {
        margin-bottom: 0
    }

    .portfolio {
        position: relative
    }

    .portfolio::before {
        width: 47%;
        height: 1px;
        left: 0;
        display: none
    }

    .portfolio::after {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        left: 46.7%
    }

    .portfolio::after,
    .portfolio::before {
        content: "";
        position: absolute;
        top: 50%;
        background: #eee;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .about {
        border-bottom: 1px solid #f1f1f1
    }

    .laptop,
    img.mac {
        max-width: 68%
    }

    .img-wrapper2 {
        text-align: right
    }

    ul.view {
        margin-bottom: 30px
    }

    ul.view li {
        font-size: 20px;
        line-height: 1.1;
        float: left
    }

    .flex-view li {
        margin: 0 35px 0 0
    }

    .flex-view li:last-child {
        margin-right: 0
    }

    ul.view li a {
        font-size: 16px
    }

    .flex-view li {
        padding: 0
    }

    ul.view li.creads {
        margin-bottom: 0;
        padding-left: 0
    }

    ul.view li strong {
        font-size: 30px
    }

    .portfolio {
        border-bottom: 1px solid #e9e9e9
    }

    .portfolio2 {
        padding-bottom: 28px
    }

    ul.portfolio-menu li {
        width: 155px;
        min-height: 143px;
        padding: 17px 20px 13px 25px;
        margin-right: 29px
    }

    span.num {
        margin-bottom: 2px
    }

    ul.portfolio-menu li.w3c-box {
        padding: 16px 14px 13px 21px;
        margin-right: 28px
    }

    ul.portfolio-menu li.mobile-box {
        padding: 18px 18px 13px 19px
    }

    ul.portfolio-menu li span.row1 {
        font-size: 28px;
        margin-bottom: 14px
    }

    li.w3c-box span.row2 {
        margin-left: 1px
    }

    li.mobile-box span.row2 {
        margin-left: 2px
    }

    .icons-wrapper {
        margin-bottom: 13px
    }

    li.w3c-box .icons-wrapper {
        margin-bottom: 14px
    }

    li.mobile-box .icons-wrapper {
        margin-bottom: 12px
    }

    .icon-view-mobile {
        background-position: -352px -70px
    }

    ul.portfolio-menu li span.speed-line {
        font-size: 0;
        position: relative;
        display: block;
        width: 66px;
        height: 3px;
        background: #6f68d2;
        margin: 0 0 9px 1px
    }

    .speed-line:before {
        content: "";
        position: absolute;
        width: 60px;
        height: 3px;
        background: #ffc240;
        top: 0;
        left: 0
    }

    .speed-line,
    .speed-line:before {
        border-radius: 4px
    }

    .number-wrapper {
        padding-top: 34px
    }

    .dotline {
        font-size: 18px;
        margin-right: 25px
    }

    .dotline span {
        font-size: 45px;
        letter-spacing: -.3px
    }

    p.client-rating {
        padding: 0 40px
    }

    .portfolio h2 {
        margin-bottom: 50px
    }

    .box-wrapper .draggable {
        padding: 0;
        overflow: visible
    }

    .box-wrapper .slick-track {
        margin-bottom: 0
    }

    .review-wrapper {
        padding: 0 30px
    }

    .text-wrapper {
        min-height: 260px;
        padding: 30px 22px 30px 25px
    }

    .text-wrapper h3 {
        margin-bottom: 18px
    }

    .text-wrapper h3 a {
        letter-spacing: 0;
        font-size: 0
    }

    .hidden-text.title-hidden,
    .title_1 {
        font-size: 20px
    }

    .questions {
        padding: 40px 35px 0
    }

    .questions h3 {
        margin-bottom: 20px
    }

    ul.faq-list {
        margin-bottom: 0
    }

    ul.faq-list li {
        overflow: hidden;
        padding: 20px 30px 20px 56px;
        margin-bottom: 14px
    }

    ul.faq-list li.ques3,
    ul.faq-list li.ques4 {
        margin-bottom: 15px
    }

    ul.faq-list li.ques5 {
        margin-bottom: 17px
    }

    ul.faq-list li.ques6 {
        margin-bottom: 19px
    }

    span.question {
        position: relative;
        background: #fff;
        font-size: 16px;
        padding-right: 7px
    }

    .answer {
        float: right;
        margin-top: 0;
        background: #fff;
        font-size: 16px
    }

    li.ques2 span.answer,
    li.ques3 span.answer,
    li.ques4 span.answer {
        margin-top: 0
    }

    span.question-wrapper {
        top: 18px;
        left: 17px
    }

    button.view-more {
        display: none
    }

    ul.faq-list li.ques {
        display: block
    }

    .testimonial-slider {
        padding: 0 4%
    }

    .testimonial-slider .slick-list {
        overflow: visible !important
    }

    .mobile-picture {
        display: none
    }

    .desktop-picture {
        display: block
    }

    ul.services-list {
        width: 83%
    }

    .clients {
        padding: 36px 3% 22px
    }

    .grid-item {
        margin: 0 2% 33px;
        display: inline-block
    }

    .grid-item img {
        width: auto;
        height: auto
    }

    .faq-cell .faq-list li,
    .faq-cell .faq-list li.ques2 {
        padding-left: 60px;
        padding-right: 80px
    }

    .faq-cell .answer {
        position: absolute;
        left: auto;
        right: 20px
    }

    .tabbing-links li a {
        font-size: 17px
    }

    .faq-cell .answer {
        margin: 0 !important;
        top: 50% !important;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .heading-flex {
        display: block
    }

    .heading-flex h3 {
        margin: 20px 0 0 0
    }

    .faq-cell h3 {
        text-align: center
    }

    .new-btn-wrap button,
    .red-button {
        box-shadow: 5px 6px 32px 0 rgba(255, 38, 1, .45)
    }

    .feed-wrapper {
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    .feed-box {
        width: 48%;
        margin-bottom: 0
    }

    .feed-box img {
        display: block
    }

    .feed-content a {
        font-size: 20px
    }

    .blog-head {
        margin-bottom: 35px;
        display: flex;
        display: -ms-flexbox;
        align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    .btn-post {
        position: static;
        transform: none;
        height: 100%;
        padding: 16px 25px 12px
    }
}

@media (min-width:992px) {
    .visit-btn {
        display: block
    }

    #wrapper:before {
        width: 1182px;
        height: 684px;
        background: url(https://www.htmlpanda.com/assets-new/images/bannerImg1200.png) no-repeat;
        left: 44%
    }

    .banner {
        padding: 150px 3% 60px
    }

    .banner-wrapper {
        position: relative;
        padding: 0;
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    .banner-right {
        position: relative;
        top: 0
    }

    .banner-left {
        width: 42%;
        left: 0;
        padding: 0
    }

    .banner-right {
        display: block;
        right: 0;
        top: -53px;
        width: 42.56%
    }

    .banner h1 {
        padding: 0;
        margin-bottom: 13px
    }

    .banner h2 {
        padding-top: 14px;
        margin-bottom: 45px
    }

    .banner h2:before {
        width: 31px;
        height: 3px
    }

    .money-back {
        margin-top: 0
    }

    .money-back span {
        margin-top: 20px
    }

    .money-back:before {
        margin-top: 0
    }

    .steps-head span {
        max-width: 650px;
        width: 100%;
        margin: 0 auto 28px
    }

    ul.points {
        padding: 0
    }

    ul.points li {
        font-size: 16px
    }

    .web-services h2 {
        margin: 0;
        line-height: 1.21;
        float: left;
        width: 50%
    }

    .web-services h2 span {
        display: block
    }

    .web-services p {
        line-height: 1.25;
        width: 40%;
        float: right;
        font-size: 18px
    }

    .steps-btn {
        width: 53px;
        height: 53px
    }

    .steps-btn span {
        font-size: 0;
        width: 13px;
        height: 13px;
        left: 15px
    }

    .services-slider {
        width: 97%
    }

    .slides:hover {
        box-shadow: 0 46px 38px 0 rgba(34, 79, 92, .13)
    }

    .card-slider .slick-list {
        overflow: hidden;
        padding-bottom: 60px
    }

    .slides::before {
        width: 94px;
        height: 189px;
        border-radius: 0 0 75px 75px;
        transform: rotate(-37deg) translateY(-200px);
        right: 40px
    }

    .slides:hover::before {
        transform: rotate(-37deg) translateY(0)
    }

    .slides i[class^=icon-slide-] {
        top: 34px;
        right: 29px
    }

    span.pricee {
        font-size: 16px;
        padding: 5px 10px 5px 8px;
        margin-bottom: 20px;
        margin-right: 12px
    }

    span.pricee:before {
        width: 8px;
        height: 8px;
        margin: 0 7px 3px 0
    }

    a.order-now {
        font-size: 16px;
        margin-left: 2px
    }

    .services-slider .slides:hover a.order-now:after {
        right: 17px
    }

    a.order-now:after {
        width: 9px;
        height: 9px;
        border-width: 3px 3px 0 0;
        top: 6px
    }

    .next-btn {
        right: 43px
    }

    .prev-btn {
        right: 84px
    }

    .services-slider button.previous {
        right: 67px
    }

    .services-slider button.next {
        right: 26px
    }

    .about {
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 45px;
        position: relative;
        margin-bottom: 0
    }

    .about .container {
        min-height: 580px
    }

    .about .container:before {
        background: url(https://www.htmlpanda.com/assets-new/images/aboutimage1200.png) no-repeat;
        width: 1160px;
        height: 644px;
        top: 0;
        left: -76%
    }

    .graphics-img {
        display: block;
        position: absolute;
        left: 30px;
        top: 42%;
        z-index: 2;
        width: 250px
    }

    .about-wrapper {
        width: 66%;
        float: right;
        padding: 0 25px
    }

    .link-wrapper {
        text-align: left;
        padding-left: 2px
    }

    .portfolio {
        padding: 48px 45px 60px
    }

    .portfolio1 {
        padding: 0 0 50px;
        margin-bottom: 20px
    }

    .portfolio2 {
        display: block
    }

    .portfolio1,
    .portfolio2 {
        position: relative
    }

    .inner-wrapper2 {
        float: right
    }

    .img-wrapper2 {
        text-align: right
    }

    .port1 {
        display: block;
        position: absolute;
        right: 25px
    }

    .port2 {
        display: block;
        position: absolute;
        right: 100%;
        margin-right: -100px;
        top: 30px;
        z-index: -1
    }

    img.laptop,
    img.mac {
        max-width: 48%
    }

    .portfolio2 ul.view li strong {
        font-size: 25px
    }

    .portfolio2 ul.view li:not(:first-child) {
        padding-right: 35px
    }

    .btn-wrap1 {
        display: none
    }

    ul.portfolio-menu {
        margin-bottom: 39px
    }

    .visit-btn {
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        padding: 20px 25px
    }

    .portfolio2 a.button.visit-btn {
        display: inline-block
    }

    .number-wrapper {
        padding-bottom: 110px
    }

    .numbers {
        max-width: 900px;
        margin: 0 auto;
        padding: 0;
        text-align: left
    }

    .dotline {
        font-size: 20px;
        margin-right: 40px;
        float: left;
        position: relative;
        line-height: .75;
        padding-left: 25px
    }

    .dotline sup {
        font-size: 38px
    }

    .dotline span {
        font-size: 68px
    }

    .dotline:before {
        content: "";
        width: 4px;
        position: absolute;
        left: 3px;
        background-image: url(https://www.htmlpanda.com/assets-new/images/development-sprite.png)
    }

    .project:before {
        background-position: -10px -219px;
        width: 4px;
        height: 183px;
        top: 44px
    }

    .client:before {
        background-position: -24px -219px;
        width: 4px;
        height: 122px;
        top: 47px
    }

    .years:before {
        background-position: -40px -219px;
        width: 4px;
        height: 223px;
        top: 37px
    }

    .repeatClient:before {
        background-position: -58px -219px;
        width: 4px;
        height: 133px;
        top: 47px
    }

    .engineers:before {
        background-position: -77px -219px;
        width: 4px;
        height: 223px;
        top: 37px
    }

    .dotline:after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #9088f6;
        left: -1px
    }

    .project:after {
        top: 26px
    }

    .client:after {
        background: #ffbf46;
        top: 29px
    }

    .years:after {
        background: #fb7fbc;
        top: 27px
    }

    .repeatClient:after {
        background: #8679ef;
        top: 29px
    }

    .engineers:after {
        background: #fdc143;
        top: 27px
    }

    .work {
        text-align: left;
        padding-bottom: 45px;
        overflow: hidden;
        box-shadow: none
    }

    .work .container {
        position: relative;
        padding: 44px 0 49px;
        width: 800px
    }

    .work .container:before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        width: 400%;
        height: 100%;
        background: #5952c9
    }

    .work .container:after {
        content: "";
        display: block;
        width: 300%;
        height: 75%;
        background: url(https://www.htmlpanda.com/assets-new/images/work-dot.png) repeat;
        position: absolute;
        bottom: -45px;
        left: 100%;
        visibility: visible;
        margin-left: -212px;
        z-index: -1
    }

    .work h4 {
        font-size: 45px;
        margin-bottom: 0
    }

    .work-form {
        width: 62.2%;
        position: relative
    }

    .custom-file-upload {
        padding-top: 0
    }

    .quote-btn {
        position: absolute;
        bottom: 12px;
        left: 100%;
        margin-left: 45px
    }

    span.text {
        font-size: 18px;
        margin-bottom: 44px
    }

    .form-row1 {
        margin-bottom: 25px
    }

    .form-row2 {
        margin-bottom: 20px
    }

    .custom-file-upload,
    .email-wrapper,
    .name-wrapper,
    .select-wrapper {
        width: 43.5%
    }

    .name-wrapper {
        float: left
    }

    .custom-file-upload,
    .email-wrapper {
        float: right
    }

    .name-wrapper,
    .select-wrapper,
    .work-form textarea {
        margin-bottom: 0
    }

    .updates {
        padding: 70px 0
    }

    .box-wrapper .slick-disabled {
        display: none !important
    }

    .box-wrapper button.slick-arrow i {
        display: none
    }

    .box-wrapper button.slick-arrow {
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 5px 29px 0 rgba(0, 1, 1, .22);
        font-size: 0;
        position: absolute;
        top: 43%;
        right: -120px;
        transition: all .5s ease
    }

    .box-wrapper button.slick-arrow:hover {
        background: #3b3b3b;
        box-shadow: 0 5px 29px 0 rgba(59, 59, 59, .22)
    }

    .box-wrapper button.slick-arrow:before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        border: solid #3b3b3b;
        border-width: 3px 3px 0 0;
        border-radius: 2px
    }

    .box-wrapper button.slick-next:before {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        margin-right: 3px
    }

    .box-wrapper button.slick-prev:before {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        margin-left: 3px
    }

    .box-wrapper button.slick-arrow:hover:before {
        border-color: #fff
    }

    .box-wrapper button.slick-prev {
        z-index: 2;
        left: 0
    }

    .text-wrapper {
        min-height: 270px
    }

    .questions {
        padding: 40px 50px 0
    }

    .questions h3 {
        padding-top: 30px
    }

    .question-btn {
        display: block;
        left: 50%;
        margin-left: -24px;
        top: -68px
    }

    ul.faq-list li:before {
        margin-left: 70px
    }

    span.question {
        padding-right: 20px
    }

    .form-faq-block {
        padding: 90px 0
    }

    .form-faq-block .container {
        max-width: 1433px;
        padding: 0 3%
    }

    .cell-flex {
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    .faq-cell,
    .form-cell {
        width: 48%
    }

    .form-cell {
        padding: 55px 3%
    }

    .form-cell h4 {
        font-size: 30px;
        text-align: left;
        margin-bottom: 15px
    }

    .form-cell h4 br {
        display: none
    }

    .form-cell span.text {
        text-align: left
    }

    .faq-cell {
        padding: 0
    }

    .faq-cell h3 {
        text-align: left;
        font-size: 26px
    }

    .faq-cell h3 br {
        display: none
    }

    .faq-cell .faq-list li,
    .faq-cell .faq-list li.ques2 {
        padding-left: 59px;
        padding-right: 80px
    }

    .faq-cell .answer {
        position: absolute;
        right: 22px;
        top: 24px;
        padding-left: 36px
    }

    .faq-cell .check-wrapper {
        left: 10px
    }
}

@media (min-width:1024px) {
    .stepsdot {
        position: absolute;
        display: block
    }

    .steps-leftdot {
        top: 0;
        left: 5px
    }

    .steps-rightdot {
        top: 0;
        right: 10px
    }

    .open-ldot {
        background-position: -10px -87px;
        width: 31px;
        height: 30px
    }

    .open-rdot {
        background-position: -65px -87px;
        width: 44px;
        height: 43px
    }

    .steps-wrapper {
        padding: 65px 4% 0;
        margin-top: 77px
    }

    .steps-wrapper:before {
        content: "";
        width: 100%;
        height: 192px;
        background: url(https://www.htmlpanda.com/assets-new/images/stepsbg.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -147px;
        left: 0
    }

    .steps-btn {
        left: 50%;
        margin-left: -26px;
        top: -39px
    }

    ul.steps {
        padding: 30px 0 37px 0;
        margin-bottom: 11px;
        display: flex;
        display: -ms-flexbox
    }

    ul.steps:last-child {
        padding-bottom: 96px
    }

    ul.steps li {
        position: relative;
        margin-bottom: 0
    }

    ul.steps li p {
        font-size: 16px;
        max-width: 260px
    }

    ul.steps li i[class^=icon-steps-] {
        font-size: 0;
        height: 149px;
        display: block;
        margin-bottom: 28px
    }

    .icon-steps-design {
        background-position: -1px -247px;
        margin-bottom: 20px
    }

    .icon-steps-code {
        background-position: -150px -247px;
        margin: 10px 0
    }

    .icon-steps-live {
        background-position: -300px -247px;
        margin: 15px 0 10px 0
    }

    .icon-steps-p1 {
        background-position: -565px -380px;
        width: 118px;
        height: 142px
    }

    .icon-steps-p2 {
        background-position: -720px -375px;
        width: 149px;
        height: 112px
    }

    .icon-steps-p3 {
        background-position: -915px -375px;
        width: 149px;
        height: 112px
    }

    .icon-steps-p4 {
        background-position: -1121px -388px;
        width: 118px;
        height: 142px
    }

    .icon-steps-p5 {
        background-position: -580px -542px;
        width: 149px;
        height: 112px
    }

    .icon-steps-p6 {
        background-position: -774px -542px;
        width: 149px;
        height: 112px
    }

    .about-wrapper {
        padding: 0 30px 0 0
    }

    .testimonial {
        padding-bottom: 90px
    }

    .testimonial-left {
        display: block;
        position: relative;
        float: left;
        margin-left: 60px
    }

    .client-img {
        display: block;
        width: 200px;
        height: 200px;
        position: absolute;
        left: -152px;
        top: -170px
    }

    .client-img img {
        width: 80px
    }

    .clients:before {
        content: "";
        width: 100%;
        height: 100px;
        background: #f2f2f2;
        transform: skewY(2.4deg);
        -webkit-transform: skewY(2.4deg);
        -moz-transform: skewY(2.4deg);
        -ms-transform: skewY(2.4deg);
        -o-transform: skewY(2.4deg);
        position: absolute;
        top: -33px;
        left: 0
    }

    .clients {
        padding: 40px 0 0
    }

    .grid-item .br-aclu {
        background-position: -563px -5px;
        width: 145px;
        height: 150px
    }

    .grid-item .br-intel {
        background-position: -284px -5px;
        width: 269px;
        height: 142px
    }

    .grid-item .br-drivania {
        background-position: -5px -160px;
        width: 269px;
        height: 134px
    }

    .grid-item .br-hp {
        background-position: -563px -306px;
        width: 126px;
        height: 131px
    }

    .grid-item .br-clearrate {
        background-position: -284px -444px;
        width: 269px;
        height: 85px
    }

    .grid-item .br-huawei {
        background-position: -284px -304px;
        width: 269px;
        height: 112px
    }

    .grid-item .br-rg {
        background-position: -5px -304px;
        width: 269px;
        height: 130px
    }

    .grid-item .br-uniliver {
        background-position: -284px -160px;
        width: 269px;
        height: 134px
    }

    .grid-item .br-philips {
        background-position: -563px -165px;
        width: 145px;
        height: 131px
    }

    .grid-item .br-necco {
        background-position: -5px -5px;
        width: 269px;
        height: 145px
    }

    .grid-item .br-cooper {
        background-position: -5px -444px;
        width: 269px;
        height: 93px
    }

    .client-1,
    .client-2,
    .client-3,
    .client-5 {
        position: absolute
    }

    .client-1 {
        top: 0;
        left: 25px;
        opacity: .6
    }

    .client-2 {
        top: 87px;
        left: 0;
        opacity: .6
    }

    .client-3 {
        top: 125px;
        left: 94px;
        opacity: .75
    }

    .client-5 {
        top: 35px;
        left: 116px;
        opacity: .6
    }

    .client-4 {
        width: 306px;
        height: 270px
    }

    .quot {
        background-image: url(https://www.htmlpanda.com/assets-new/images/development-sprite.png);
        background-position: -287px -195px;
        width: 154px;
        height: 146px;
        font-size: 102px;
        color: #fff;
        font-weight: 700;
        font-family: Montserrat, sans-serif;
        position: absolute;
        top: 27px;
        left: -46px;
        padding: 19px 0 0
    }

    .review-wrapper {
        width: 48%;
        float: right;
        text-align: left;
        padding-left: 0
    }

    p.client-rating {
        padding: 0;
        max-width: 550px;
        margin: 0 auto 33px
    }

    p.review {
        padding: 0 30px 0 0
    }

    .testimonial-slider ul.slick-dots {
        left: 55%
    }

    .question-btn {
        display: block;
        left: 50%;
        margin-left: -24px;
        top: -68px
    }

    ul.services-list {
        width: 70%
    }

    ul.services-list li {
        font-size: 16px;
        padding-bottom: 28px
    }

    ul.services-list li.active::after {
        bottom: 35px
    }

    .grid-item {
        margin: 0 10px 20px
    }

    .portfolio::after,
    .portfolio::before {
        margin-top: -36px
    }

    .portfolio1 {
        margin-bottom: 55px
    }

    .portfolio2 {
        padding-top: 40px
    }

    .portfolio h2 {
        margin-bottom: 46px
    }

    .port1 {
        top: -75px
    }

    .img-wrapper1,
    .inner-wrapper2 {
        float: left
    }

    .img-wrapper2,
    .inner-wrapper1 {
        float: right
    }

    .img-wrapper1,
    .img-wrapper2 {
        margin-bottom: 0;
        width: 40%;
        margin-top: 32px
    }

    img.laptop,
    img.mac {
        max-width: 87%
    }

    .inner-wrapper1,
    .inner-wrapper2 {
        padding-left: 0;
        width: 59%
    }

    .updates {
        padding: 90px 0 97px
    }

    .heading-flex {
        display: flex;
        display: -ms-flexbox
    }

    .heading-flex h3 {
        margin: 0 0 0 22px
    }

    .steps-heading {
        font-size: 24px
    }

    .slides {
        min-height: 314px !important;
        height: auto !important
    }

    .background-box:before {
        content: "";
        background: #ff2601;
        width: 355px;
        height: 355px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0
    }

    .background-box {
        width: 350px;
        height: 350px;
        margin: 0;
        left: 15px;
        top: -29px;
        display: block
    }

    .portfolio-slider .slick-arrow::before {
        width: 15px;
        height: 15px
    }

    .portfolio-slider .previous {
        left: 30px
    }

    .portfolio-slider .next {
        right: 27px
    }

    .portfolio-slider .slick-arrow {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .portfolio-slide {
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify
    }

    .portfolio-content {
        width: 52%;
        padding-top: 0
    }

    .portfolio-img {
        width: 40%;
        margin: 0;
        height: 100%
    }

    .portfolio-img {
        width: 40%;
        margin: 0;
        height: 100%
    }

    .background-box {
        display: block;
        -webkit-animation-name: rotate;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease;
        -moz-animation-name: rotate;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: ease -webkit-transition-delay: now;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite
    }

    .background-box:before {
        content: "";
        background: #ff2601;
        width: 355px;
        height: 355px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0
    }

    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(360deg)
        }
    }

    .portfolio-content {
        width: 52%;
        padding-top: 0
    }

    .background-box {
        width: 350px;
        height: 350px;
        margin: 0;
        left: 15px;
        top: -29px
    }

    .expertise-graphics,
    .gutenberg-btn,
    .portfolio-slider .slick-arrow {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .portfolio-slider .slick-slide {
        padding-bottom: 47px
    }

    .portfolio-slider .slick-arrow::before {
        width: 15px;
        height: 15px
    }

    .portfolio-slider .next {
        right: 27px
    }

    .portfolio-slider .previous {
        left: 30px
    }

    .box-wrapper button.slick-arrow {
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 5px 32px 0 rgba(72, 72, 72, .14);
        font-size: 0;
        padding: 0;
        position: absolute;
        top: 43%;
        right: -120px;
        transition: all .5s ease
    }

    .box-wrapper .slick-disabled {
        display: none !important
    }

    .box-wrapper .slick-arrow {
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 5px 29px 0 rgba(0, 1, 1, .22);
        font-size: 0;
        position: absolute;
        top: 43%;
        right: -120px;
        transition: all .5s ease
    }

    .box-wrapper .slick-arrow i {
        display: none
    }

    .box-wrapper .slick-arrow:hover {
        background: #3b3b3b;
        box-shadow: 0 5px 29px 0 rgba(59, 59, 59, .22)
    }

    .box-wrapper .slick-arrow:before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        border: solid #3b3b3b;
        border-width: 3px 3px 0 0;
        border-radius: 2px
    }

    .box-wrapper .slick-next:before {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg)
    }

    .box-wrapper .slick-prev:before {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg)
    }

    .box-wrapper button.slick-arrow:hover:before {
        border-color: #fff
    }

    .box-wrapper button.slick-prev {
        z-index: 2;
        left: 0
    }

    .answer-blog p {
        display: flex;
        align-items: center;
        min-height: 67px
    }
}

@media (min-width:1200px) {
    #wrapper:before {
        left: 52%
    }

    .banner h1 {
        font-size: 32px
    }

    .banner-right {
        right: 0;
        top: -59px;
        width: 50.56%
    }

    .banner-left,
    .money-back {
        width: 78%
    }

    .banner-left {
        padding-top: 16px
    }

    .banner h2 {
        max-width: 640px;
        font-size: 52px;
        padding-top: 20px
    }

    .steps-head span {
        max-width: 745px;
        margin-bottom: 50px
    }

    .about-wrapper h2 span {
        display: block
    }

    span.sketch {
        margin-bottom: 5px
    }

    ul.points {
        margin-top: 48px
    }

    .price-wrapper strong {
        font-size: 15px;
        line-height: 1.32;
        padding: 12px 25px 11px 0;
        margin-bottom: 0
    }

    .price-text {
        padding: 14px 25px 11px 0
    }

    .price-wrapper strong.price {
        font-size: 33px;
        padding-right: 44px
    }

    .price:before {
        height: 47px
    }

    ul.points li {
        line-height: 1.23
    }

    .icon-points-cash {
        margin-top: 5px
    }

    .icon-points-code {
        background-position: -165px -21px
    }

    .icon-points-voucher {
        background-position: 0 -22px;
        margin-top: 6px
    }

    .icon-points-approval {
        background-position: -55px -22px;
        margin-top: 7px
    }

    .steps-wrapper {
        margin-top: 111px;
        padding-top: 80px
    }

    .steps-btn {
        width: 75px;
        height: 75px;
        left: 50%;
        margin-left: -36px;
        top: -43px;
        border-width: 7px
    }

    .steps-btn span {
        width: 20px;
        height: 20px;
        top: 18px;
        left: 22px;
        border-width: 0 4.5px 4.5px 0;
        border-radius: 4px
    }

    .steps-leftdot {
        left: 12px;
        top: -50px
    }

    .steps-rightdot {
        right: 10px;
        bottom: 164px
    }

    ul.steps li p {
        font-size: 18px;
        max-width: 100%;
        padding-right: 15px
    }

    .web-services {
        padding-top: 64px;
        padding-bottom: 70px
    }

    .services {
        padding-top: 0
    }

    .services .container {
        padding-top: 90px;
        position: relative
    }

    .services {
        background: #f6f6f6 url(https://www.htmlpanda.com/assets-new/images/servicesBackground.jpg) no-repeat right
    }

    .services .container {
        background: 0 0
    }

    ul.services-list {
        top: -29px;
        width: 785px
    }

    ul.services-list li {
        padding: 50px 38px 13px 19px
    }

    ul.services-list li.active {
        padding-top: 62px;
        margin-top: -12px
    }

    ul.services-list li.active:after {
        width: 9px;
        height: 9px;
        bottom: 21px
    }

    .services-slider {
        width: 100%;
        margin: 0
    }

    .slides {
        min-height: 410px !important;
        padding: 53px 25px 53px 50px;
        margin: 0 17.5px
    }

    a.order-now {
        left: 50px;
        width: calc (100% - 75px);
        bottom: 55px
    }

    a.order-now:after {
        right: 25px
    }

    .slides:last-child {
        margin-right: 0
    }

    .slide2 {
        padding: 50px 25px 0 47px
    }

    .slides h3 {
        font-size: 25px;
        margin-bottom: 16px
    }

    .slide2 h3 {
        margin-bottom: 16px
    }

    .slides p {
        font-size: 18px;
        line-height: 1.5;
        padding: 0 3px 0 1px
    }

    .icon-slide-wordpress {
        background-position: -126px -173px
    }

    .services-slider .slide1:hover .icon-slide-wordpress {
        background-position: -315px -173px
    }

    .icon-slide-drupal {
        margin: 4px 0 0
    }

    .services-slider .slides:hover a.order-now:after {
        right: 65px
    }

    .about .container:before {
        left: -73%
    }

    .about-btn {
        display: block;
        top: 105px;
        left: 176px
    }

    .graphics-img {
        display: block;
        position: absolute;
        left: 0;
        top: 35%;
        z-index: 2
    }

    .inner-wrapper {
        margin-bottom: 16px;
        position: relative;
        z-index: 2
    }

    .inner-wrapper h2 {
        line-height: 1.2;
        margin: 0 0 17px 2px
    }

    .inner-wrapper p {
        font-size: 20px;
        line-height: 1.5
    }

    ul.right-list {
        padding-left: 10px
    }

    ul.about-list li {
        font-size: 18px
    }

    .portfolio::after,
    .portfolio::before {
        margin-top: 0
    }

    .portfolio {
        padding: 40px 40px 20px;
        border-bottom: 1px solid #e9e9e9
    }

    .portfolio1 {
        margin-bottom: 100px
    }

    .port1 {
        top: -105px
    }

    .port2 {
        display: none
    }

    .portfolio-slider .slick-arrow {
        top: -88px;
        width: 25px;
        height: 25px
    }

    .portfolio-slider .slick-arrow::before {
        width: 18px;
        height: 18px;
        border-width: 4px 4px 0 0
    }

    .previous {
        right: 24%
    }

    .next {
        right: 20%
    }

    img.laptop,
    img.mac {
        max-width: 80%
    }

    ul.view li.viewcss {
        padding-right: 0
    }

    .visit-btn {
        padding: 24px 51px 25px;
        border-radius: 36px
    }

    .img-wrapper1,
    .inner-wrapper2 {
        float: left;
        width: 50%
    }

    .img-wrapper2,
    .inner-wrapper1 {
        float: right;
        width: 50%
    }

    .inner-wrapper1 {
        margin-top: 0;
        padding-left: 14px
    }

    .clients .container {
        max-width: 1210px;
        padding: 0 20px
    }

    .number-wrapper {
        padding: 50px 40px 0
    }

    .dotline {
        margin-right: 0
    }

    .numbers {
        max-width: 100%;
        margin: 0
    }

    .project {
        padding: 0 44px 0 30px;
        margin-top: 13px
    }

    .client {
        padding: 0 116px 0 39px;
        margin-top: 83px
    }

    .years {
        padding: 0 94px 217px 27px
    }

    .repeatClient {
        padding: 0 100px 0 33px;
        margin-top: 94px
    }

    .engineers {
        padding: 0 0 0 30px;
        margin-top: 23px
    }

    .testimonial {
        padding-bottom: 82px
    }

    .testimonial h3 {
        margin-bottom: 27px
    }

    p.client-rating {
        font-size: 20px;
        color: #131928;
        line-height: 1.5;
        max-width: 100%;
        margin: 0 0 33px
    }

    .testimonial-left {
        margin-left: 120px
    }

    span.break {
        display: block;
        margin-left: 4px
    }

    span.rating {
        padding: 3px 7.4px 1px 3px;
        margin-left: 1.4px
    }

    .testimonial-dots {
        display: block;
        top: 144px;
        right: 6px;
        position: absolute;
        background-position: -102px -219px;
        width: 148px;
        height: 91px
    }

    img.ux {
        width: 315px
    }

    .jet {
        float: left;
        margin: 0;
        position: relative;
        padding: 31px 0 0 6px
    }

    .jet:before {
        content: "";
        width: 75px;
        height: 2px;
        background: #cfcfcf;
        position: absolute;
        top: 0;
        left: 8px
    }

    .jetimg-wrapper {
        width: 100px;
        height: auto
    }

    .info {
        margin-left: 26px
    }

    a.read {
        float: right;
        margin-top: 51px;
        padding: 15px 20px 16px 20px;
        font-size: 15px
    }

    span.name {
        font-size: 23px;
        margin-bottom: 8px
    }

    span.chairman {
        font-size: 15.5px
    }

    .testimonial-slider ul.slick-dots {
        margin-left: 4px;
        left: 52.5%
    }

    .work .container {
        width: 950px
    }

    .work .container:before {
        margin-right: -1px
    }

    .custom-file-upload {
        width: 44%
    }

    .select-wrapper:before {
        left: 142px
    }

    .form-row2 {
        margin-bottom: 36px
    }

    .quote-btn {
        margin-left: 94px
    }

    .updates-img {
        height: 165px
    }

    .box-wrapper {
        width: 100%;
        margin-left: 14px
    }

    .box-wrapper .box {
        overflow: hidden
    }

    .box-wrapper button.slick-next {
        right: 12px
    }

    .box-wrapper button.slick-prev {
        left: 12px
    }

    .text-wrapper {
        padding: 32px 22px 30px 42px;
        min-height: 290px
    }

    .box-wrapper .slick-slide {
        opacity: .3;
        width: 270px
    }

    .box-wrapper .slick-active {
        opacity: 1
    }

    .box-wrapper .active-width {
        width: 570px !important;
        box-shadow: 0 4px 65px 0 rgba(0, 1, 1, .26)
    }

    .box-wrapper .active-width .text-wrapper {
        width: 570px !important
    }

    .box-wrapper .slick-current .text-wrapper {
        padding: 38px 30px 30px
    }

    .box-wrapper .slick-current.active-width .hidden-text {
        display: inline
    }

    .questions {
        padding: 40px 60px 0
    }

    .questions h3 {
        font-size: 26px
    }

    .questions .container {
        padding-bottom: 95px
    }

    .question-btn {
        top: -85px
    }

    .question-btn span {
        top: 18px
    }

    .icon-faq-questionmark {
        margin-bottom: 1px
    }

    .question {
        padding-right: 40px
    }

    .answer {
        padding-left: 81px
    }

    span.check-wrapper {
        left: 44px
    }

    ul.faq-list li:before {
        margin-left: 119px
    }

    .portfolio-img {
        width: 46%
    }

    .portfolio-content {
        width: 48%
    }

    .portfolio-slider .slick-slide {
        padding-bottom: 54px
    }

    .portfolio-slider .slick-arrow {
        top: 50%
    }

    .portfolio-wrapper {
        padding: 68px 0
    }

    .background-box {
        width: 360px;
        height: 360px;
        top: -15px
    }

    .background-box:before {
        width: 365px;
        height: 365px
    }

    .portfolio-img {
        width: 46%
    }

    .portfolio-content {
        width: 48%
    }

    .portfolio-slider .slick-arrow::before {
        width: 18px;
        height: 18px
    }

    .portfolio-slider .previous {
        left: 40px
    }

    .portfolio-slider .next {
        right: 45px
    }

    .portfolio-visit li {
        margin-right: 66px
    }

    .portfolio-slider .slick-slide {
        padding-bottom: 54px
    }

    .expertise-wrapper {
        padding-bottom: 40px
    }

    .expertise-list li {
        min-height: 1px
    }

    .client-testimonial,
    .design-section,
    .process-section,
    .technologies-section,
    .updates,
    .value-section {
        padding: 63px 0
    }

    .choose-section {
        padding: 61px 0 0
    }

    .standards-block {
        padding: 53px 43px 48px 13px
    }

    .card-include {
        padding: 85px 0
    }

    .box-wrapper {
        width: 100%;
        margin-left: 14px
    }

    .box-wrapper .box {
        overflow: hidden
    }

    .box-wrapper .slick-slide {
        opacity: .3;
        width: 270px
    }

    .box-wrapper .slick-active {
        opacity: 1
    }

    .box-wrapper .active-width {
        width: 570px !important;
        box-shadow: 0 4px 65px 0 rgba(0, 1, 1, .26)
    }

    .updates-img {
        height: 165px
    }

    .text-wrapper {
        padding: 32px 22px 30px 42px;
        min-height: 290px
    }

    .box-wrapper .slick-current .text-wrapper {
        padding: 38px 30px 30px
    }

    .box-wrapper .slick-arrow.slick-prev {
        left: 12px
    }

    .box-wrapper .slick-arrow.slick-next {
        right: 12px
    }

    .box-wrapper .slick-current.active-width .hidden-text,
    .exceprt_1 {
        display: inline
    }

    .box-wrapper .active-width .text-wrapper {
        width: 570px !important
    }

    .portfolio-slider .slick-list {
        height: 504px !important;
        min-height: initial !important
    }
}

@media (min-width:1280px) {
    ul.points li {
        line-height: 1.23;
        padding: 0 0 0 82px;
        width: auto;
        text-align: left;
        min-height: 90px
    }

    ul.points li i[class^=icon-points-] {
        position: absolute;
        margin: 0
    }

    .card-slider .slick-list {
        overflow: visible
    }

    ul.services-list {
        width: 845px
    }

    .portfolio::after,
    .portfolio::before {
        margin-top: -10px
    }

    .form-cell h4 {
        font-size: 35px
    }

    .form-cell h4 br {
        display: block
    }

    .question {
        font-size: 18px
    }

    .captcha-flex {
        margin-bottom: 0
    }

    .work-form .answer-box {
        width: 100px
    }

    span.question {
        font-size: 17px
    }

    .input-global label,
    .input-wrap input,
    .join-textarea {
        font-size: 17px
    }

    .steps-heading {
        font-size: 28px
    }

    .heading-flex h3 {
        margin: 0 0 0 30px
    }

    .portfolio-slider .previous.slick-arrow::before {
        width: 23px;
        height: 23px;
        border-width: 5px 5px 0 0
    }

    .background-box {
        width: 450px;
        height: 450px;
        left: -20px;
        top: -40px
    }

    .background-box:before {
        width: 455px;
        height: 455px
    }

    .portfolio-slider {
        padding-top: 0;
        padding-bottom: 40px
    }

    .portfolio-slider .draggable {
        padding-top: 50px
    }

    .portfolio-wrapper h2 {
        margin-bottom: 61px
    }

    .portfolio-img {
        width: 42%;
        margin-top: 23px
    }

    .portfolio-content {
        width: 48%;
        padding-top: 0
    }

    .portfolio-heading strong {
        font-size: 30px;
        line-height: 1.1;
        margin-bottom: 0
    }

    .portfolio-heading {
        font-size: 20px;
        margin-bottom: 36px
    }

    .portfolio-visit {
        margin-bottom: 32px
    }

    .portfolio-visit li {
        margin-right: 79px
    }

    .portfolio-visit a {
        font-size: 15px
    }

    .portfolio-performance {
        margin-bottom: 44px
    }

    .portfolio-performance li {
        width: 152px;
        margin: 0 23px 0 7px;
        text-align: left;
        padding: 15px 20px
    }

    .performance-icon {
        text-align: right;
        margin-bottom: 16px
    }

    .performance-detail {
        font-size: 28px;
        margin-bottom: 7px
    }

    .portfolio-performance li:last-child {
        margin-right: 0
    }

    .portfolio-slider .slick-arrow::before {
        width: 23px;
        height: 23px;
        border-width: 5px 5px 0 0
    }

    .portfolio-slider .previous.slick-arrow::before {
        width: 23px;
        height: 23px;
        border-width: 5px 5px 0 0
    }

    .portfolio-slider .slick-arrow {
        margin-top: -37px
    }

    .portfolio-slider .next {
        right: 40px
    }

    .portfolio-slider .previous {
        left: 45px
    }

    .faq-head {
        margin-bottom: 43px;
        align-items: center
    }

    .faq-head h3 {
        font-size: 45px;
        line-height: 1;
        width: 78%
    }

    .faq-btn {
        padding: 0 25px;
        line-height: 44px
    }

    .exclusive-ques {
        font-size: 17px;
        padding: 20px 50px 19px 28px
    }

    .answer-blog {
        padding: 42px 22px 24px
    }

    .feed-content {
        padding: 35px 30px 45px
    }
}

@media only screen and (min-width:1366px) {
    .banner h2 {
        max-width: inherit
    }

    .banner-right {
        right: -50px;
        width: 53.56%
    }

    .portfolio-slider .next {
        right: 60px
    }

    .portfolio-slider .previous {
        left: 90px
    }
}

@media (min-width:1400px) {
    .work-form .answer-box {
        width: 135px
    }

    .form-faq-block .container {
        padding: 0 20px
    }
}

@media only screen and (min-width:1440px) {
    .portfolio-slider .next {
        right: 95px
    }

    .portfolio-slider .previous {
        left: 120px
    }
}

@media (min-width:1600px) {
    p {
        font-size: 24px
    }

    .banner {
        padding: 171px 0 16px
    }

    .banner h1 {
        margin-bottom: 8px
    }

    .banner h2 {
        padding-top: 15px;
        margin-bottom: 45px;
        max-width: 100%
    }

    .banner h2:before {
        width: 50px
    }

    .banner h2 span {
        display: block
    }

    .banner-right {
        width: 58.56%;
        right: -120px;
        top: -65px
    }

    ul.points {
        text-align: left
    }

    ul.points li {
        padding: 0 10px 0 80px;
        font-size: 18px
    }

    .icon-points-voucher {
        margin: 6px 0 0 1px
    }

    ul.points li.validate {
        padding-left: 83px
    }

    .price-wrapper strong {
        font-size: 16px
    }

    .price-wrapper strong.price {
        font-size: 43px
    }

    a.place-order {
        font-size: 17px;
        padding: 25px 53px 21px 47px;
        letter-spacing: 0;
        border-radius: 36px;
        line-height: 1.32;
        font-weight: 700
    }

    .money-back {
        width: 49%;
        margin: 0
    }

    .steps-wrapper {
        padding: 100px 0 0
    }

    .steps-leftdot {
        left: 165px;
        top: -17px
    }

    .steps-heading {
        font-size: 30px;
        color: #fff
    }

    ul.steps li p {
        line-height: 1.44;
        padding-right: 0
    }

    ul.steps li.step1 p {
        padding: 0 50px 0 1px
    }

    ul.steps li.step2 p {
        padding-left: 1px
    }

    ul.steps li.step3 p {
        line-height: 1.4;
        padding: 0 30px 0 4px
    }

    .services {
        background-position: center
    }

    .services-slider {
        margin-left: -17.5px
    }

    ul.services-list {
        padding: 0;
        top: -53px
    }

    ul.services-list li {
        margin-right: 28px;
        padding: 70px 38px 13px 19px;
        font-size: 19px
    }

    ul.services-list li.active::after {
        bottom: 23px;
        right: 22px
    }

    ul.services-list li.active {
        padding-top: 82px;
        margin-top: -12px
    }

    .services-slider button {
        top: -63px
    }

    .card-slider .slick-list {
        padding-bottom: 90px
    }

    .web-services {
        padding: 90px 0
    }

    .web-services p {
        font-size: 24px;
        padding: 0 0 0 10px;
        width: 41%
    }

    .about {
        padding-bottom: 15px
    }

    .about .container {
        min-height: 833px;
        padding-top: 90px
    }

    .about-wrapper {
        padding: 0
    }

    .graphics-img {
        left: -213px;
        top: 24%;
        width: 351px;
        height: 479px
    }

    .inner-wrapper {
        margin-bottom: 90px
    }

    .list-wrap {
        margin-bottom: 75px
    }

    ul.about-list li {
        font-size: 20px;
        letter-spacing: .06px;
        padding: 7px 0 9px 67px;
        margin-bottom: 29px
    }

    ul.about-list li.agreement,
    ul.about-list li.gt,
    ul.about-list li.rating {
        margin-bottom: 28px
    }

    ul.about-list li.browser,
    ul.about-list li.support {
        margin-bottom: 25px
    }

    ul.about-list li.speed {
        margin-bottom: 29px
    }

    ul.about-list li.layout {
        margin-bottom: 27px
    }

    ul.about-list li.device {
        padding-left: 69px
    }

    ul.about-list li.agreement,
    ul.about-list li.browser,
    ul.about-list li.gt,
    ul.about-list li.support {
        padding-left: 67px
    }

    ul.about-list li.admin,
    ul.about-list li.guarantee {
        padding: 10px 0 12px 67px
    }

    ul.about-list li span {
        left: 2px
    }

    ul.about-list li.device span {
        left: 4px
    }

    ul.about-list li.browser span,
    ul.about-list li.gt span,
    ul.about-list li.rating span {
        left: 2px
    }

    .portfolio {
        padding: 90px 40px 37px;
        position: relative
    }

    .portfolio .container {
        max-width: 1640px
    }

    .portfolio1 {
        margin-bottom: 0
    }

    .portfolio2 {
        padding: 0 0 53px
    }

    .portfolio h2 {
        margin-bottom: 31px
    }

    .port2 {
        top: 220px;
        left: 13px;
        display: block
    }

    .port1 {
        right: 195px;
        top: -54px
    }

    .visit-btn {
        font-size: 17px
    }

    .inner-wrapper1 {
        margin-top: 105px;
        padding-left: 62px
    }

    .portfolio:after,
    .portfolio:before {
        top: 55.45%;
        margin: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none
    }

    .portfolio:after {
        margin-top: -3px
    }

    .inner-wrapper1,
    .inner-wrapper2 {
        padding-left: 60px
    }

    .inner-wrapper2 {
        margin-top: 205px;
        width: 46.3%
    }

    ul.view {
        margin-bottom: 41px
    }

    ul.portfolio-menu {
        margin-bottom: 89px
    }

    .portfolio2 ul.view li:last-child {
        padding-right: 0
    }

    .portfolio2 ul.view li strong {
        font-size: 27px
    }

    .portfolio2 ul.view li.viewhtml {
        padding-left: 17px
    }

    img.laptop,
    img.mac {
        max-width: 100%
    }

    .grid-btn {
        left: 50%;
        margin-left: -145px
    }

    .number-wrapper {
        padding: 90px 0 0
    }

    .dotline {
        margin-right: 0
    }

    .repeatClient {
        padding: 0 112px 0 33px
    }

    .testimonial {
        padding: 90px 0
    }

    .testimonial.about-testimonial {
        padding-bottom: 115px
    }

    p.client-rating {
        margin-bottom: 67px
    }

    .client-4 {
        width: 426px;
        height: 390px
    }

    .testimonial-left {
        left: -73px;
        margin-left: 0;
        margin-top: 16px
    }

    .client-img {
        left: -151px;
        top: -156px
    }

    .testimonial-slider ul.slick-dots {
        bottom: 0;
        left: 43.5%;
        margin-left: 0
    }

    .testimonial-slider ul.slick-dots li {
        margin-right: 25px
    }

    .review-wrapper {
        width: 57.7%;
        float: right;
        text-align: left;
        padding: 0
    }

    p.review {
        padding: 0 0 0 3px;
        font-size: 18px;
        line-height: 1.95;
        word-spacing: 0;
        margin-bottom: 31px
    }

    span.chairman {
        font-size: 18.5px
    }

    a.read {
        margin-top: 37px;
        padding: 15px 41px 16px;
        font-size: 16px
    }

    .work .container {
        padding: 83px 0 102px;
        width: 100%
    }

    .form-row1 {
        margin-bottom: 23px
    }

    .custom-file-upload,
    .email-wrapper,
    .name-wrapper {
        width: 44.5%
    }

    .box-wrapper {
        margin-left: 0
    }

    .text-wrapper {
        min-height: 330px
    }

    .text-wrapper p {
        font-size: 18px
    }

    .box-wrapper button.slick-next {
        top: 43%;
        right: -197px
    }

    .box-wrapper button.slick-prev {
        left: -190px
    }

    .text-wrapper h3 {
        margin-bottom: 22px
    }

    .questions {
        padding: 69px 0 0
    }

    .questions .container {
        padding-bottom: 108px
    }

    .questions h3 {
        font-size: 45px;
        margin-bottom: 45px
    }

    ul.faq-list li,
    ul.faq-list li.ques2 {
        padding: 27px 30px 27px 70px
    }

    ul.faq-list li,
    ul.faq-list li.ques2 {
        padding-left: 119px;
        padding-right: 65px
    }

    span.question-wrapper {
        left: 75px;
        top: 26px
    }

    span.answer,
    span.question {
        font-size: 17px
    }

    .question-btn {
        top: -106px
    }

    .work-form .answer-box {
        width: auto
    }

    .background-box {
        left: -100px
    }

    .portfolio-slider .previous {
        left: 160px
    }

    .portfolio-slider .next {
        right: 180px
    }

    .expertise-graphics {
        width: auto;
        left: -145px
    }

    .box-wrapper .slick-arrow.slick-prev {
        left: -190px
    }

    .box-wrapper button.slick-next {
        top: 43%;
        right: -197px
    }

    .text-wrapper {
        min-height: 330px
    }

    .text-wrapper h3 {
        margin-bottom: 22px
    }

    .box-wrapper .slick-arrow.slick-next {
        top: 43%;
        right: -170px
    }

    .box-wrapper .slick-arrow.slick-prev {
        left: -190px
    }

    .updates {
        padding: 90px 0 90px
    }

    .box-wrapper {
        margin-left: 0
    }
}