/*
| --------------------------------------------------------

| Version : 1.2
| Theme Date : 07/08/2018
| Modified Date : 12/09/2018
| Platforms : HTML5, CSS3, Bootstrap4, JS, Jquery, Sass
| Theme Author : Yankee Themes

| Author Contact : enquiry[at]yankeeinfoweb[dot]com
| Tags : yankeethemes, yankeeinfoweb, webdesign, boostrap, wordpress, support, html, responsive, css3, wellorganized, retina, animation, html5, sass, support, yakneelife
| File : yit-responsive.css
| --------------------------------------------------------
*/


/*
| --------------------------------------------------------
| TABLE OF CSS CONTENT
| --------------------------------------------------------
| 980 Media General
| 768 * 979 iPad Portrait
| 980 * 1024 iPad Landscape
| 1200 Up to Large
*/


/* Note: This file include all page responsive device css */


/* General Media Query (iPhone, iPad, Small Tablet, 979 / 80 px)
=============================================================== */

@media (max-width: 980px) {
    .xs-max-width-auto {
        max-width: 100%;
    }
    /* max-width for all device */
    .yit-btn-group .btn+.btn {
        margin-left: 0;
    }
    .bg-none-sm-device {
        background-image: none !important;
    }
    /* apply this class for hide bg image in all small device */
}


/* iPad & Small Tablet (Portrait) (768 * 1024)
============================================================== */

@media (min-width: 768px) and (max-width: 980px) {
    /*** Global Classes CSS BOC ***/
    .hidden-sm {
        display: none !important;
    }
    /* hide in small device */
    .btn {
        font-size: 15px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.22;
    }
    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    /* General Small Device Classes CSS BOF */
    .font-xxsmall {
        font-size: .95rem;
    }
    .bg-seprator.skew-one::after {
        bottom: -132px;
    }
    .bg-seprator.skew-three::before {
        height: 580px;
    }
    .bg-seprator.skew-six::before {
        height: 560px;
    }
    .bg-seprator.skew-five::after {
        bottom: 172px;
    }
    /*.content-l-space { margin-left:0; }*/
    .banner-mark-text::after {
        font-size: 130px;
        top: 0;
    }
    .parallax-bg {
        background-position: center center !important;
        height: 500px;
    }
    .bg-mark-letter {
        font-size: 110px;
    }
    .sec-lines .height-full {
        height: 100vh;
    }
    .inner-banner-large.bg-fade-overlay,
    .inner-banner-large.bg-overlay,
    .inner-banner-large.bg-fade-overlay-dark {
        background-position: 0 0;
    }
    .inner-banner-large {
        padding-bottom: 100px;
        padding-top: 150px;
    }
    /* Small Device Spacer Classes CSS BOF */
    .height-full {
        height: 50vh;
    }
    .sm-text-center {
        text-align: center;
    }
    .sm-height-auto {
        height: auto;
    }
    .sm-bg-image-none {
        background-image: none !important;
    }
    /* hide background-image in small device */
    .sm-height-one-half {
        height: 500px;
    }
    /* use for fix heigt banner */
    .sm-section-v-space {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .sm-display-block {
        display: block;
        width: auto;
    }
    /* full block in medium device */
    .sm-display-tb-cell {
        display: block;
    }
    /* medium center block in medium device */
    /* Small Device Spacer Classes CSS BOF */
    .pad-100-all {
        padding: 50px;
    }
    /* overide large padding with section */
    .sm-mb-25 {
        margin-bottom: 30px;
    }
    .sm-mb-70 {
        margin-bottom: 70px;
    }
    /*** All Pages Combine Selector CSS BOF ***/
    .bg-letter,
    .bg-sec-count,
    .bg-dotted::after,
    .section-shadow::before,
    .bg-dotted-left::after {
        display: none;
    }
    /*** WEBP Default Page (home1) CSS BOF ***/
    .webpanda-default .webp-default-contact .icon-l {
        float: none;
        display: block;
        text-align: center;
        margin: 0 auto 15px;
    }
    .webpanda-default .webp-default-contact .yit-overflow {
        text-align: center;
    }
    .webpanda-default .webp-offer .yit-feature.style-3 .yit-feature-item i {
        float: none;
    }
    /*** WEBP Classic (home2) CSS ***/
    .webpanda-classic .webp-classic-why .yit-feature.style-5 .yit-display-tb-cell {
        display: table-cell;
    }
    /*** WEBP Business Parallax (home4) CSS ***/
    .webp-business-parallax .webp-business-banner .parallax-obj-triangle {
        width: 80%;
        bottom: 20%;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-name {
        bottom: 40%;
        width: 80%;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-bubble {
        bottom: 30%;
        width: 70%;
    }
    /*** WEBP Creative Studio (home5) CSS ***/
    .webp-creative-studio .webp-studio-skill.height-full {
        height: 100%;
        background-attachment: inherit;
    }
    .webp-creative-studio .content-l-space {
        margin-left: 80px;
    }
    .webp-creative-studio .webp-studio-portfolio .yit-portfolio.style-5 .yit-portfolio-content {
        height: 100%;
        border-width: 0;
    }
    /*** WEBP Creative Web Agency (home7) CSS ***/
    .webp-creative-web-agency .webp-creative-web-banner .height-cover {
        height: 70vh;
    }
    .webp-creative-web-agency .webp-creative-web-banner .svg-curve.style-1 {
        bottom: 0;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link i {
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
        margin-bottom: 10px;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link {
        padding: 25px;
        text-align: center;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .tab-inner {
        margin-left: 0;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .tab-content figure {
        position: relative;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link.show::before {
        display: none;
    }
    .webp-creative-web-agency .webp-web-agency-about .video-outer {
        left: 0;
        margin-right: 20px;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .yit-testimonial {
        float: none;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .testimonial-outer {
        right: 0;
    }
    .webp-web-agency-testimonial .yit-testimonial {
        float: none;
        margin: 0 auto 30px;
    }
    .webp-creative-web-agency .webp-web-agency-blog:before,
    .webp-creative-web-agency .webp-web-agency-blog:after {
        display: none;
    }
    /*** WEBP Freelancer Page CSS BOF (homepage-8) ***/
    .webp-freelancer .content-l-space {
        margin-left: 80px;
    }
    .webp-freelancer .webp-freelancer-banner {
        text-align: center;
    }
    .webp-freelancer .webp-freelancer-banner .yit-flex-h-center {
        justify-content: center;
    }
    .webp-freelancer .webp-freelancer-banner h4 {
        font-size: 4.2rem;
    }
    .webp-freelancer .webp-freelancer-banner h2 {
        font-size: 5rem;
    }
    .webp-freelancer .webp-freelancer-banner .arrow-style-2 a {
        right: 0;
    }
    .webp-freelancer .webp-freelancer-banner .arrow-style-2 a span {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    /*** WEBP Bradning Agency Page CSS BOF (homepage-9) ***/
    .webp-branding-agency .webp-branding-agency-testimonial .yit-testimonial-content {
        margin-bottom: 50px;
    }
    .webp-branding-agency .webp-branding-agency-testimonial .yit-testimonial img {
        margin-top: 31px;
    }
    .webp-branding-agency .webp-branding-agency-team {
        padding-bottom: 0;
    }
    /*** WEBP Startup Page CSS BOF (homepage-10) ***/
    .webp-startup .webp-startup-parallax .data-parallax-effect {
        max-width: 100%;
        right: 0;
    }
    /*** WEBP Web Agency Onepage CSS BOF (homepage-11) ***/
    .webp-web-agency section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    /*** WEBP Web Agency Onepage CSS BOF (homepage-12) ***/
    .webp-branding-onepage .webp-branding-cta .svg-curve.circle-right {
        height: 80%;
    }
    .webp-branding-onepage .webp-branding-blog .yit-blog.style-2 .yit-blog-item h6 {
        font-size: 1rem;
    }
    /*** WEBP Branding Agency Onepage CSS BOF (homepage-13) ***/
    .webp-branding-onepage .webp-branding-header h1 {
        font-size: 3rem;
    }
    /*** WEBP Digital Maketing Page CSS BOF (homepage-14) ***/
    .webp-digital-marketing .webp-digital-banner {
        height: auto;
    }
    .webp-digital-marketing .webp-digital-banner .banner-img {
        position: absolute;
        top: auto;
        max-width: 50%;
    }
    .webp-digital-marketing .webp-digital-marketing-testimonial .yit-testimonial img {
        margin-top: 31px;
    }
    .webp-digital-marketing .webp-digital-marketing-testimonial .yit-testimonial-content {
        margin-bottom: 50px;
    }
    /*** WEBP App Onepage CSS BOF (homepage-15) ***/
    .webp-app .webp-app-banner {
        height: auto;
    }
    .webp-app .app-feature-content:hover .app-feature-list [class*="item-"] {
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
    }
    .webp-app .webp-app-pricing .yit-tab .nav-link i {
        display: inline-block;
    }
    /*** WEBP Hosting CSS BOF (homepage-17) ***/
    .webp-hosting .webp-hosting-banner.yit-slick-slider .height-cover {
        height: 60vh;
    }
    .webp-hosting .webp-hosting-cms .item-icon {
        width: 300px;
        height: 300px;
    }
    .webp-hosting .webp-hosting-pricing .yit-pricing .yit-pricing-item h6 {
        font-size: 1rem;
    }
    /*** WEBP Personal Portfolio CSS BOF (homepage-18) ***/
    .webp-personal .webp-personal-banner .yit-pos-v-center {
        -webkit-transform: translate(0px, -50px);
        -o-transform: translate(0px, -50px);
        -ms-transform: translate(0px, -50px);
        -moz-transform: translate(0px, -50px);
        transform: translate(0px, -50px);
    }
    .webp-personal .webp-personal-header .webp-personal-banner .banner-scene li {
        height: 70vh;
    }
    .webp-personal .webp-personal-header .webp-personal-banner .banner-services li {
        letter-spacing: 0
    }
    .webp-personal .webp-personal-service .service-intro::after {
        display: none;
    }
    .webp-personal .webp-personal-service .service-intro,
    .webp-personal .webp-personal-service .service-listing {
        height: auto;
    }
    .webp-personal .webp-personal-service .service-listing {
        margin-top: 0;
    }
    /*** WEBP About Classic CSS BOF (aboutpage-02) ***/
    .webp-about-classic .about-history h6 {
        left: 20px;
        bottom: 20px;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
    /*** Team Creative Page CSS BOF (teampage-04) ***/
    .webp-team-creative .team-creative .item-content {
        margin-bottom: 70px;
    }
}


/* portrait media close */


/* All Mobile Device (iPhone, Android, Window)(480 * 640)
============================================================== */

@media (max-width: 767px) {
    /*** Global Classes CSS BOC ***/
    .hidden-xs {
        display: none !important;
    }
    /* hide in mobile */
    /* Trypography CSS BOC */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.30;
        text-align: center;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.60rem;
    }
    h4 {
        font-size: 1.45rem;
    }
    h5 {
        font-size: 1.325rem;
    }
    h6 {
        font-size: 1.2rem;
    }
    .font-xxlarge {
        font-size: 3.25rem;
    }
    .font-xlarge {
        font-size: 3rem;
    }
    .font-large {
        font-size: 2.40rem;
    }
    .font-medium {
        font-size: 2.26rem;
    }
    .font-small {
        font-size: 2rem;
    }
    .font-xsmall {
        font-size: 1.65rem;
    }
    .font-xxsmall {
        font-size: .85rem;
    }
    p {
        line-height: 1.8;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 3px;
        /*margin-bottom:0rem;*/
    }
    /* Image CSS BOC */
    img,
    .yit-img-left,
    .yit-img-right {
        float: none;
        margin: 0px auto;
        display: block;
        text-align: center;
    }
    img.left-in-mob {
        float: left !important;
        margin-right: 15px !important;
    }
    img.right-in-mob {
        float: right !important;
        margin-left: 15px !important;
    }
    .parallax-bg {
        background-position: center center !important;
        height: 500px;
    }
    /* General Classes CSS BOC */
    .yit-lead {
        font-size: 16px;
    }
    ul li {
        display: block;
        line-height: 1.7;
    }
    .form-control {
        height: 43px;
    }
    .flex {
        display: block;
    }
    .icon-l {
        float: none;
        text-align: center;
        margin: 10px auto;
        display: block;
    }
    .height-full {
        height: 100vh;
    }
    section,
    section.mini-section,
    footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .content-l-space {
        margin-left: 0;
    }
    .section-h-space .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    .gmap-locaton.section-h-space .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    /* Button Classes CS BOF */
    .btn[class*="gradient-"] {
        font-size: 14px;
        padding: 10px;
    }
    .btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .btn-xxxsmall {
        padding: 5px 8px;
    }
    /* General Mobile Classes CSS BOF */
    .display-center-mob {
        display: table;
        margin: 0 auto;
    }
    /* center all in mobile */
    .xs-display-block {
        display: block;
        width: auto;
    }
    /* full view in mobile */
    .xs-display-tb-cell {
        display: block;
    }
    /* center block in mobile */
    .xs-float-none {
        float: none !important;
    }
    /* remove floating position in mobile */
    .yit-bg-center-xs,
    .xs-bg-image-center {
        background-position: center center;
    }
    /* center background-image in mobile */
    .xs-bg-image-none {
        background-image: none !important;
    }
    /* hide background-image in mobile */
    .xs-letterspace-none {
        letter-spacing: 0 !important;
    }
    /* letterspace none in mobile */
    .xs-height-auto {
        height: auto;
    }
    /* height auto in mobile */
    .xs-space-none.section-h-space .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    /* apply this class when you remove padding from container-fluid */
    .xs-bg-cover {
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
    }
    .xs-border-none {
        border: medium none !important;
    }
    .xs-listing-inline li {
        display: inline-block;
    }
    .xs-transition-none {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none;
    }
    /* apply this class when you don't need transit in mobile */
    .xs-btn-auto {
        width: auto !important;
    }
    /* apply this class when you don't need full button in mobile version */
    /* Mobile Banner Classes CSS BOF */
    .xs-banner-space {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    /* common banner space when item is position:fixed */
    .xs-banner-space-top {
        margin-top: 50px;
    }
    /* apply this class when you want to item space from top */
    .xs-banner-small-space {
        margin-top: 70px;
        margin-bottom: 70px;
    }
    /* common small banner space when item is position:fixed */
    .xs-banner-medium-space {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    /* common medium banner space when item is position:fixed */
    .xs-banner-large-space {
        margin-top: 150px;
        margin-bottom: 150px;
    }
    /* common large banner space when item is position:fixed */
    /* Mobile Text Alignment Classes CSS BOF */
    .xs-icon-center {
        text-align: center;
        display: block;
    }
    /* apply this class for icon center */
    .xs-text-center {
        text-align: center;
    }
    /* center text in mobile */
    .xs-text-left h1,
    .xs-text-left h2,
    .xs-text-left h3,
    .xs-text-left h4,
    .xs-text-left h5,
    .xs-text-left h6,
    .xs-text-left p {
        text-align: left;
    }
    /* left text in mobile */
    .xs-text-right h1,
    .xs-text-right h2,
    .xs-text-right h3,
    .xs-text-right h4,
    .xs-text-right h5,
    .xs-text-right h6,
    .xs-text-right p {
        text-align: right;
    }
    /* right text in mobile */
    /* Mobile Spacer Classes CSS BOF */
    .xs-section-v-space {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .xs-pad-none {
        padding: 0 !important;
    }
    /* apply this class for remove all side paddding in mobile version */
    .pad-50-all {
        padding: 40px 15px;
    }
    .xs-pad-15-all {
        padding: 15px !important;
    }
    /* padding all side */
    .xs-pad-small {
        padding: 35px;
    }
    /* padding all side in small spacer */
    .xs-pad-medium {
        padding: 50px !important;
    }
    /* padding all side in medium spacer */
    .xs-pad-extra-medium {
        padding: 60px !important;
    }
    /* padding all side in extra medium spacer */
    .xs-pad-large {
        padding: 70px !important;
    }
    .xs-pr-none {
        padding-right: 0 !important;
    }
    /* apply this class when you want to padding-right(zero) in mobile version */
    .xs-pb-section {
        padding-bottom: 40px !important;
    }
    /* apply this class when you add padding-bottom(zero) classes in section */
    .xs-mb-0 {
        margin-bottom: 0 !important;
    }
    .xs-mb-15 {
        margin-bottom: 15px;
    }
    .xs-mb-25 {
        margin-bottom: 25px;
    }
    .xs-mt-0 {
        margin-top: 0 !important;
    }
    .xs-ml-0 {
        margin-left: 0 !important;
    }
    .xs-mr-0 {
        margin-right: 0 !important;
    }
    .xs-pt-0 {
        padding-top: 0 !important;
    }
    .xs-pb-0 {
        padding-bottom: 0 !important;
    }
    .xs-pl-0 {
        padding-left: 0 !important;
    }
    .xs-pr-0 {
        padding-right: 0 !important;
    }
    .xs-mrg-none {
        margin: 0 !important;
    }
    /* apply this class for remove all side margin in mobile version */
    /*** All Pages Combine Selector CSS BOF ***/
    .webpanda-default .webp-why.section-h-space .container-fluid,
    .webpanda-classic .webp-classic-why.section-h-space .container-fluid,
    .webp-freelancer .webp-freelancer-cms.section-h-space .container-fluid,
    .webp-startup .webp-startup-about.section-h-space .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .bg-letter,
    .bg-sec-count,
    .bg-seprator:after,
    .bg-seprator:before,
    .bg-dotted::after,
    .section-shadow::before,
    .svg-pattern,
    .banner-mark-text::after,
    .bg-mark-letter,
    .caption-title::before,
    .caption-title::after,
    .bg-dotted-left::after,
    .parallax-text {
        display: none;
    }
    /*** WEBP Default Page CSS (home1) BOF ***/
    .webpanda-default .webp-offer .offer-item-content {
        padding: 40px 0;
    }
    /*** WEBP Classic Page CSS (home2) BOF ***/
    .webp-classic-banner .flexslider.flexslider-slide .btn {
        margin: 10px 0 0;
        width: 49%;
    }
    /*** WEBP Digital Agency Page CSS (home3) BOF ***/
    .webp-digital-agency .webp-agency-about h1 {
        font-size: 1.80rem;
    }
    /*** WEBP Business Parallax (home4) CSS ***/
    .webp-business-parallax .webp-business-service,
    .webp-business-parallax .webp-business-testimonial {
        background-color: #f7fafc;
    }
    .webp-business-parallax .webp-business-contact {
        background-color: #e91e63;
    }
    .webp-business-parallax .webp-business-testimonial .yit-testimonial.style-4 .yit-img {
        display: block;
    }
    /*** WEBP Creative Studio (home5) CSS ***/
    .webp-creative-studio .webp-creative-banner {
        margin-left: 0;
        margin-top: 80px;
    }
    .webp-creative-studio h1 {
        font-size: 1.60rem;
    }
    .webp-creative-studio .yit-feature.style-41 .yit-feature-item {
        margin-bottom: 20px;
    }
    .webp-creative-studio .webp-studio-skill.height-full {
        height: 100%;
    }
    /*** WEBP Creative Designer (home6) CSS ***/
    .webp-creative-designer .webp-desinger-contact.pos-t-105 {
        top: 40px;
    }
    .webp-creative-designer .webp-designer-footer .yit-footer.mt-80 {
        margin-top: 40px !important;
    }
    .webp-creative-designer .webp-designer-footer .yit-instafeed.style-1 li {
        width: 49%;
        display: inline-block;
    }
    /*** WEBP Creative Web Agency (home7) CSS ***/
    .webp-creative-web-agency .webp-creative-web-banner .yit-banner-content {
        margin-top: 100px;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link i {
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link {
        padding: 15px 20px;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .tab-inner {
        margin-left: 0;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .tab-content figure {
        position: relative;
    }
    .webp-creative-web-agency .webp-web-agency-about .video-outer {
        left: 0;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .testimonial-outer {
        right: 0;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .yit-testimonial {
        float: none;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link.show::before,
    .webp-creative-web-agency .webp-web-agency-blog:before,
    .webp-creative-web-agency .webp-web-agency-blog:after {
        display: none;
    }
    .webp-creative-web-agency .webp-web-agency-process .yit-process .yit-process-item {
        padding: 0;
    }
    /*** WEBP Startup Onepage (home8) CSS ***/
    .webp-startup-onepage .webp-startup-header .flex-slide-text::before {
        display: none;
    }
    /*** WEBP Freelancer Page CSS BOF (homepage-8) ***/
    .webp-freelancer .fancy-letter {
        font-size: 90px;
    }
    .webp-freelancer .webp-freelancer-banner {
        margin-top: 70px;
    }
    .webp-freelancer .webp-freelancer-contact.pos-t-105 {
        top: 0;
    }
    .webp-freelancer .webp-freelacer-blog .yit-blog .yit-blog-author {
        display: table;
        margin: 0 auto;
    }
    /*** WEBP Branding Agency Page CSS BOF (homepage-9) ***/
    .webp-branding-agency .webp-branding-agency-testimonial {
        padding-bottom: 50px !important;
    }
    /*** WEBP Startup Page CSS BOF (homepage-10) ***/
    .webp-startup .webp-startup-about .pad-50-all {
        padding: 50px 15px;
    }
    .webp-startup .webp-startup-parallax .data-parallax-effect {
        max-width: 100%;
        right: 0;
    }
    .webp-startup .webp-startup-footer {
        background-image: none;
        background-color: #fff;
    }
    .webp-startup .webp-startup-intro .yit-feature.style-26 .yit-feature-item * {
        text-align: center;
    }
    .webp-startup .webp-startup-intro .yit-feature.style-26 .yit-feature-item span {
        padding-right: 0 !important;
        display: block;
        margin-bottom: 0 !important;
    }
    .webp-startup .webp-startup-intro .yit-display-tb-cell {
        display: block;
    }
    /*** WEBP Web Agency Onepage CSS BOF (homepage-11) ***/
    .webp-web-agency section,
    .webp-web-agency section:nth-child(2n+2) {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .webp-web-agency .yit-on-sticky-nav.is-visible {
        background-color: rgba(0, 0, 0, .8);
    }
    .webp-web-agency .header-logo {
        background-color: rgba(0, 0, 0, .8);
        padding: 15px 0;
        width: 100%;
        left: 0;
        text-align: center;
    }
    .webp-web-agency .fullpage-nav {
        right: -40px;
        -moz-transition: all .3s ease-in-out 0s;
        -webkit-transition: all .3s ease-in-out 0s;
        -o-transition: all .3s ease-in-out 0s;
        -ms-transition: all .3s ease-in-out 0s;
        transition: all .3s ease-in-out 0s;
    }
    .webp-web-agency:hover .fullpage-nav {
        right: 10px;
    }
    .webp-web-agency .webp-web-agency-about .yit-tab .tab-content {
        padding: 15px;
    }
    .webp-web-agency .webp-web-agency-portfolio .filter-tab .btn {
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
    }
    /*** WEBP Branding Agency Onepage CSS BOF (homepage-13) ***/
    .webp-branding-onepage .webp-branding-header h1 {
        font-size: 1.85rem;
    }
    .webp-branding-onepage .webp-branding-header .arrow-style-3 {
        bottom: 0;
    }
    .webp-startup-onepage .webp-services .yit-feature.style-43 .yit-feature-item {
        padding: 30px;
    }
    /*** WEBP Digital Marketing CSS BOF (homepage-14) ***/
    .webp-digital-marketing .webp-digital-banner {
        height: auto;
    }
    .webp-digital-marketing .webp-digital-marketing-testimonial.pb-0 {
        padding-bottom: 50px !important;
    }
    /*** WEBP App Onepage CSS BOF (homepage-15) ***/
    .webp-app .webp-app-banner {
        height: auto;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
    }
    .webp-app .app-feature-content:hover .app-feature-list [class*="item-"] {
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
    }
    /*** WEBP SEO CSS BOF (homepage-16) ***/
    .webp-seo .webp-seo-header .yit-swiper-slider::after {
        display: none;
    }
    /*** WEBP Hosting CSS BOF (homepage-17) ***/
    .webp-hosting .webp-hosting-header .yit-top-nav {
        padding: 0;
    }
    .webp-hosting .webp-hosting-banner::after {
        display: none;
    }
    .webp-hosting .webp-hosting-banner.yit-slick-slider .slick-slide-img {
        height: auto;
    }
    .webp-hosting .webp-hosting-banner.yit-slick-slider .slick-slider-content .yit-display-centrize {
        margin-top: 0;
    }
    .webp-hosting .webp-hosting-cms .item-icon {
        width: 260px;
        height: 260px;
        margin: 35px auto;
    }
    .webp-hosting .webp-hosting-cms .item-icon .item-price {
        width: 80px;
        height: 80px;
        font-size: 17px;
    }
    /*** WEBP Personal Portfolio CSS BOF (homepage-18) ***/
    .webp-personal .webp-personal-about {
        padding-top: 40px;
    }
    .webp-personal .webp-personal-service .service-intro::after {
        display: none;
    }
    .webp-personal .webp-personal-service .service-intro,
    .webp-personal .webp-personal-service .service-listing {
        height: auto;
    }
    .webp-personal .webp-personal-service .service-intro hr {
        float: none;
    }
    .webp-personal .webp-personal-service .service-listing {
        margin-top: 0;
    }
    .webp-personal .webp-personal-service .service-listing .yit-feature {
        padding-left: 15px;
        padding-right: 15px;
    }
    .webp-personal .webp-personal-portfolio .btn {
        width: auto;
    }
    /*** WEBP About Classic CSS BOF (aboutpage-02) ***/
    .webp-about-classic .about-history h6 {
        left: 20px;
        bottom: 20px;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        transform: none;
    }
    /*** WEBP About Creative CSS BOF (aboutpage-04) ***/
    .webp-about-creative .yit-portfolio.style-6 .swiper-button-next,
    .webp-about-creative .yit-portfolio.style-6 .swiper-button-prev {
        top: 50%;
        bottom: auto;
    }
    /*** 404 Error Pages CSS BOF (404-error-01) ***/
    .error-page .error-banner-content .error-text-heading {
        font-size: 100px;
    }
    /*** Team Creative Page CSS BOF (teampage-04) ***/
    .webp-team-creative .team-creative .item-content {
        margin-top: 40px;
    }
}


/* mobile media close */


/* All Mobile Device (iPhone, Android, Window)(480 * 640)
============================================================== */

@media (min-width:320px) and (max-width:480px) {
    /* code here */
}


/* iPad & Small Tablet Landscape (1024 * 768)
============================================================== */

@media (min-width: 979px) and (max-width: 1200px) {
    /*** Global CSS BOF ***/
    .hidden-md {
        display: none !important;
    }
    /* hide in medium device */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.3;
    }
    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .bg-sec-count {
        display: none;
    }
    .bg-seprator.skew-one::after {
        bottom: -140px;
    }
    .bg-seprator.skew-four::before {
        height: 680px;
    }
    .section-shadow::before {
        bottom: 80px;
    }
    .bg-mark-letter {
        font-size: 130px;
    }
    .xs-max-width-auto {
        max-width: 100%;
    }
    .md-parallax-bg {
        height: 600px;
    }
    /* apply this class when you want to fix section height in medium version */
    .pad-100-all {
        padding: 70px;
    }
    /* override full with section padding */
    /*** WEBP Default Page (home1) CSS BOF ***/
    .webpanda-default .webp-default-contact .icon-l {
        float: none;
        display: block;
        text-align: center;
        margin: 0 auto 15px;
    }
    .webpanda-default .webp-default-contact .yit-overflow {
        text-align: center;
    }
    /*** WEBP Business Parallax (home4) CSS ***/
    .webp-business-parallax .webp-business-banner .parallax-obj-triangle {
        width: 80%;
        bottom: 80px;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-name {
        bottom: 40%;
        width: 80%;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-bubble {
        bottom: 30%;
        width: 70%;
    }
    /*** WEBP Business Parallax (home6) CSS ***/
    .webp-creative-designer .webp-designer-cms .yit-accordion {
        margin-top: 40px !important;
    }
    /*** WEBP Creative Web Agency (home7) CSS ***/
    .webp-creative-web-agency .webp-creative-web-banner .svg-curve.style-1 {
        bottom: 0;
    }
    .webp-creative-web-agency .webp-agency-about-tab .yit-tab-verticle.style-4 .nav-pills .nav-link {
        padding: 20px 70px;
    }
    .webp-creative-web-agency .webp-web-agency-about .video-outer-md {
        align-items: center;
        display: flex;
        height: 100%;
    }
    .webp-creative-web-agency .webp-web-agency-about .video-outer {
        left: -40px;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .yit-testimonial {
        float: none;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .testimonial-outer-md {
        align-items: center;
        display: flex;
        height: 100%;
    }
    .webp-creative-web-agency .webp-web-agency-testimonial .testimonial-outer {
        right: -40px;
    }
    /*** WEBP Freelancer Page CSS BOF (homepage-8) ***/
    .webp-freelancer .webp-freelancer-banner .yit-flex-h-center {
        justify-content: center;
    }
    .webp-freelancer .webp-freelancer-cms .webp-freelancer-team-img {
        height: 80vh;
        background-size: inherit;
    }
    /*** WEBP Startup Page CSS BOF (homepage-10) ***/
    .webp-startup .webp-startup-parallax .data-parallax-effect {
        max-width: 100%;
        right: 0;
    }
    /*** WEBP Digital Marketings Page CSS BOF (homepage-11) ***/
    .webp-digital-marketing .webp-digital-banner {
        height: 100vh;
    }
    /*** WEBP Startup Onepage (home12) CSS ***/
    .webp-startup-onepage .webp-startup-contact .google-map {
        height: 719px;
    }
    /*** WEBP App Onepage CSS BOF (homepage-15) ***/
    .webp-app .app-feature-content:hover .app-feature-list [class*="item-"] {
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
    }
    /*** WEBP App Onepage CSS BOF (homepage-16) ***/
    .webp-seo .webp-seo-about .yit-feature .yit-feature-item h6 {
        font-size: 1.03rem;
    }
    /*** WEBP Personal Portfolio CSS BOF (homepage-18) ***/
    .webp-personal .webp-personal-about .img-frame {
        top: 45px;
    }
    .webp-personal .webp-personal-service .service-intro::after {
        display: none;
    }
    .webp-personal .webp-personal-service .service-intro,
    .webp-personal .webp-personal-service .service-listing {
        height: auto;
    }
    .webp-personal .webp-personal-service .service-listing {
        margin-top: 0;
    }
}


/* landscape media close */


/* Small Tablet Landscape (980 * 1023)
============================================================== */

@media (min-width: 980px) and (max-width:1023px) {
    /*** WEBP Business Parallax (home4) CSS ***/
    .webp-business-parallax .webp-business-banner .parallax-obj-triangle {
        width: 80%;
        bottom: 20%;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-name {
        bottom: 40%;
        width: 80%;
    }
    .webp-business-parallax .webp-business-banner .parallax-obj-bubble {
        bottom: 30%;
        width: 70%;
    }
    /*** WEBP Web Agency Onepage CSS BOF (homepage-13) ***/
    .webp-branding-onepage .webp-branding-counter .counter-item {
        height: 100%;
    }
}


/* custom landscape medic close */


/* Large Device (1200 * 1920)
============================================================== */

@media (min-width:1200px) {
    .hidden-lg {
        display: none !important;
    }
}