/* Tablet CSS - Viewport 481px to 1279px */
/* Mirrors mobile styles (480px and below) with proportionally scaled sizes */

@media (min-width: 481px) and (max-width: 1279px) {

    body > main > section.section.section-case-story{
        min-height: 30vh;
    }

    body > main > section.section.section-downloadable-resources > div > h2{
        gap: 0px;
        font-size: 3vw !important;
    }

    .btn-primary-red-mobile{
        background-color: #e83a1f;
        color: #fff;
        -webkit-transition: background-color .5s, color .5s;
        transition: background-color .5s, color .5s;
        border: .1388888889vw solid #e83a1f;
    }

    .btn-primary-black-mobile{
        background-color: #000;
        color: #fff;
        -webkit-transition: background-color .5s, color .5s;
        transition: background-color .5s, color .5s;
        border: .1388888889vw solid #000;
    }

    .btn-primary-red-mobile:hover{
        background-color: #fff;
        color: #e83a1f;
    }

    .btn-primary-black-mobile:hover{
        background-color: #fff;
        color: #000;
    }

    #cta-button-section-floating > div > a:nth-child(1){
        transition: background-color .5s, color .5s;
    }

    #cta-button-section-floating > div > a:nth-child(1):hover{
        background-color: #fff;
        color: #000;
        border-color: var(--secondary);
    }

    .desktop-only{
        display: none !important;
    }

    .mobile-only{
        display: block !important;
    }

    body > main > section.section.section-case-user-voices > div > div > div.user-reviews > h2{
        text-align: center;
    }
    
    .link-mobile-only{
        display: inline-flex !important;
        color: var(--primary) !important;
    }

    body > main{
        margin-top: 0px;
    }

    #top-page{
        height: 620px;
    }
    
    #top > div > a > img.brand-logo{
        height: 50px;
        margin: 15px 15px;
    }

    .top-page-cta-section{
        padding-top: 30px !important;
    }

    .cta-button-mobile-section {
        display: block;
        text-align: center;
        padding: 12px 0px;
    }

    .cta-button-mobile-section-red {
        display: block;
        text-align: center;
        background-color: var(--primary);
        padding: 12px 0px;
    }

    #cta-button-section-floating {
        display: block;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        width: 100%;
        background: #fff;
        border-top: 1px solid var(--border);
        text-align: center;
        padding: 12px 0px;
    }

    #cta-button-section-floating > div > .btn-primary {
        font-size: 18px !important;
    }

    body {
        padding-bottom: 75px;
    }

    .consider-grid{
        align-items: start;
    }

    #cta-button-section > div > a{
        font-size: 18px;
    }

    body > main > section.section.section-case-story > div > div.case-story-header > h2{
        font-size: 3vw !important;
    }

    body > main > section.section.section-case-story > div > div.case-story-grid > div.case-story-content > h3{
        font-size: 20px;
    }

    body > main > section.section.section-case-story-around-world > div > div.story-world-header > h2{
        font-size: 3vw !important;
    }

    body > main > section.section.section-case-user-voices > div > div > div.user-reviews > h2{
        font-size: 28px;
    }

    .story-world-card-combined{
        flex: 0 0 700px;
    }

    #bottom-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 4vw !important;
    }
    #bottom-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 4vw !important;
    }
    #bottom-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 4vw !important;
    }
    #bottom-page-side-image > div > div.hero-copy > p{
        font-size: 2vw !important;
    }
    #bottom-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }

    #bottom-page-side-image > div > div.hero-copy > h1 > span.hero-line{
        display: inline-block !important;
    }

    #bottom-page-side-image > div > div.hero-copy > h1{
        text-align: right;
        line-height: 1.4 !important;
    }
    #bottom-page-side-image > div > div.hero-copy > h1 > a{
        font-size: 3vw !important;
    }
    #bottom-page-side-image > div > div.hero-copy > h1 > .hero-line{
        display: inline-block !important;
    }    
    #bottom-page-side-image > div > div.hero-copy > h1 > span.hero-box{
        padding: 2px !important;
        border: 3px solid #000;
    }
    #bottom-page-side-image{
        padding: 25px 15px;
        height: 30% !important;
        min-height: 30% !important;
    }

    #top-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 5vw !important;
    }
    #top-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        border: 3px solid #000;
        font-size: 5vw !important;
    }
    #top-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 5vw !important;
    }
    #top-page-side-image > div > div.hero-copy > p{
        font-size: 3vw !important;
    }
    #top-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #top-page-side-image{
        padding: 18px 15px;
        min-height: 15vh;
    }
    #top-page-side-image > div > div.hero-copy > p{
        font-size: 2vw !important;
        text-align: center !important;
    }

    #top-page-side-image > div > div.hero-copy > h1{
        margin-top: 14%;
    }

    #what-kintone-can-do-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 7vw !important;
    }
    #what-kintone-can-do-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 3vw !important;
    }
    #what-kintone-can-do-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 3vw !important;
    }
    #what-kintone-can-do-page-side-image > div > div.hero-copy > p{
        font-size: 2vw !important;
    }
    #what-kintone-can-do-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #what-kintone-can-do-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
    }
    #what-kintone-can-do-page-side-image > div > div.hero-copy > p{
        font-size: 2vw !important;
        text-align: left !important;
    }

    #what-kintone-can-do-page-side-image > div > div.hero-copy{
        margin-top: 14% !important;
    }

    #customer-stories-page-side-image > div > div.hero-image > img{
        margin-top: 30px !important;
    }

    #customer-stories-page-side-image > div > div.hero-copy > h1{
        margin-bottom: 3%;
    }

    #customer-stories-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 8vw !important;
        color: #fff;
    }
    #customer-stories-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 3vw !important;
    }
    #customer-stories-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 3vw !important;
    }
    #customer-stories-page-side-image > div > div.hero-copy > p{
        font-size: 3vw !important;
    }
    #customer-stories-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #customer-stories-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
    }
    #customer-stories-page-side-image > div > div.hero-copy > p{
        font-size: 1.5vw !important;
        text-align: left !important;
    }
    #customer-stories-page-side-image{
        background-color: var(--primary);
    }
    #customer-stories-page-side-image > div{
        margin-top: 12px;
    }

    #pricing-page-side-image > div > div.hero-image > img{
        margin-top: 30px !important;
    }

    #pricing-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 8vw !important;
    }
    #pricing-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 3vw !important;
    }
    #pricing-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 3vw !important;
    }
    #pricing-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #pricing-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
        margin-top: 5% !important;
    }
    #pricing-page-side-image > div > div.hero-copy > p{
        font-size: 2.4vw !important;
        text-align: left !important;
    }
    #pricing-page-side-image > div{
        margin-top: 12px;
    }

    body > main > section.section.section-pricing-overview > div > p.pricing-note{
        font-size: 2vw;
    }

    #resources-page-side-image > div > div.hero-image > img{
        margin-top: 30px !important;
    }
    
    #resources-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 8vw !important;
        color: #fff;
    }
    #resources-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 3vw !important;
    }
    #resources-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 3vw !important;
    }
    #resources-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #resources-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
    }
    #resources-page-side-image > div > div.hero-copy > p{
        font-size: 2vw !important;
        text-align: left !important;
    }
    #resources-page-side-image{
        background-color: var(--primary);
    }
    #resources-page-side-image > div{
        margin-top: 12px;
    }

    #trial-page-side-image > div > div.hero-image > img{
        margin-top: 30px !important;
    }

    #trial-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 40px !important;
    }
    #trial-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 22px !important;
    }
    #trial-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 22px !important;
    }
    #trial-page-side-image > div > div.hero-copy > p{
        font-size: 16px !important;
    }
    #trial-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #trial-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
    }
    #trial-page-side-image > div > div.hero-copy > p{
        font-size: 12px !important;
        text-align: left !important;
    }
    #trial-page-side-image > div{
        margin-top: 12px;
    }

    #contact-page-side-image > div > div.hero-image > img{
        margin-top: 30px !important;
    }

    #contact-page-side-image > div > div.hero-copy > h1 > span{
        font-size: 40px !important;
    }
    #contact-page-side-image > div > div.hero-copy > h1 > span:nth-child(2) > span{
        font-size: 22px !important;
    }
    #contact-page-side-image > div > div.hero-copy > h1 > span:nth-child(5) > span{
        font-size: 22px !important;
    }
    #contact-page-side-image > div > div.hero-copy > p{
        font-size: 16px !important;
    }
    #contact-page-side-image > div > div.hero-copy > h1 > span.hero-line.hero-line-spacer{
        margin: 0 !important;
        height: 0 !important;
    }
    #contact-page-side-image{
        padding: 25px 15px;
        min-height: 15vh;
    }
    #contact-page-side-image > div > div.hero-copy > p{
        font-size: 12px !important;
        text-align: left !important;
    }
    #contact-page-side-image > div{
        margin-top: 12px;
    }

    .bottom-long-text > div > div.hero-copy > h1{
        text-align: left !important;
    }
    .bottom-long-text > div > div.hero-copy > h1 > a{
        margin-top: 18px !important;
    }

    .bottom-long-text > div > div.hero-copy > h1 > .hero-highlight{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .bottom-long-text > div > div.hero-copy > h1 > .hero-box{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .footer-inner{
        gap: 0px !important;
    }

    .btn-primary-black, .btn-primary-red{
        display: none;
    }

    #top > div > div > a:nth-child(2){
        display: none;
    }

    #pricing > div.section-bar.section-bar--primary > h2{
        font-size: 20px !important;
    }

    .video-card {
        width: 100%;
        max-width: 100%;
    }

    #demo > div > div.final-copy > a{
        font-size: 18px !important;
    }

    .section-bar-title {
        font-size: 4vw;
        text-align: center;
        display: flex;              /* use flexbox */
        justify-content: center;    /* center children horizontally */
        align-items: center;        /* center vertically if needed */
    }

    #what > div > div.mobile-only > h2 > span, body > main > section.section.section-introduction-2 > div > div.mobile-only > h2 > span{
        width: 17px !important;
    }

    #centralise-customer > div.section-bar.section-bar--primary > h2 > span.heading-dot-white{
        margin-bottom: 3%;
    }

    .section-heading {
        font-size: 24px;
    }
    
    .banner-text-black {
        font-size: 24px;
        padding: 0px 20px;
    }

    .logos-item {
        height: 50px;   
    }

    .logos-item img {
        max-height: 75px;
    }

    .section-logos{
        padding: 12px 0px !important;
    }

    body > main > section.section.section-logos {
        height: 65px !important;
        min-height: 65px !important;
    }

    #top-page .hero-copy{
        padding-bottom: 180px;
    }

    .hero-grid{
        background-size: 80%;
        background-position: right bottom;
        padding-bottom: 150px;
    }

    .hero-grid-resources{
        height: 600px;
    }

    .section-bar--pink .banner-text-black::before, .banner-text-black::after{
        display: none;
    }

    .pricing-subtitle br{
        display: none;
    }

    .section-about{
        background-size: 80%;
        background-position: right bottom;
        padding-bottom: 52%;
        grid-template-columns: 1fr;
    }

    .hero-copy {
        padding-bottom: 375px;
    }

    body > main > section.hero.hero-resources-webinars > div > div{
        padding: 0px 45px 0px 25px !important;
    }

    #demo-4{
        padding-bottom: 600px;
    }

    #demo-4 > div > div.final-copy > h2{
        font-size: 36px !important;
    }

    #pricing-page{
        height: 600px;
    }

    body > main > section.hero.hero-pricing > div > div{
        padding-bottom: 250px;
    }

    .section-final-what-kintone-can-do{
        background-size: 60%;
        background-position: left bottom;
        padding-bottom: 750px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .section-consider .container{
        padding: 66px 0px;
    }

    #demo-2 .final-copy .final-title{
        text-align: right;
        font-size: 56px;
        margin-top: -110px;
    }

    #demo-2 .final-copy .final-title .hero-tag{
        font-size: 56px;
    }

    #demo-2 .final-copy .final-title .final-highlight{
        font-size: 56px;
    }

    #demo-2 .final-copy .btn{
        display: none;
    }

    #demo-2 .resources-text .btn-mobile{
        display: block;
        font-size: 18px !important;
    }

    #demo-2 .resources-text{
        padding-top: 110px;
    }

    .section-our-resources .resources-text .btn-primary{
        font-size: 18px !important;
    }

    .hero-resources{
        height: 600px;
        background-position: bottom right;
    }

    .hero-resources-webinars{
        background-position: right bottom;
        height: 650px;
    }

    .webinar-card-title{
        font-size: 32px;
    }

    body > main > section.hero.hero-resources-webinars > div > div{
        margin-top: -280px !important;
    }

    #demo-4 .final-copy br{
        display: none;
    }

    .section-final-webinar-padding{
        padding-bottom: 750px !important;
        margin-top: 55px;
    }

    #demo-4 .final-copy .hero-tag{
        font-size: 40px;
    }

    .section-final-webinar{
        background-position: bottom center;
        padding-bottom: 750px;
        background-size: 80%;
    }

    #demo-4 .btn-large{
        font-size: 18px !important;
    }

    .hero-pricing{
        background-position: bottom center;
    }

    .user-voices-header {
        text-align: center;
        width: 100% !important;
        margin-bottom: -12px !important;
    }

    .user-voices-title br{
        display: none;
    }

    .user-reviews{
        width: 100% !important;
    }

    .section-final{
        background-position: bottom center;
        padding-bottom: 750px;
        background-size: 80%;
    }

    #demo-3 .final-copy .btn{
        display: none;
    }

    #demo-3 .final-copy{
        grid-column: unset !important;
    }

    #demo-3 .final-copy .hero-tag{
        font-size: 40px;
    }

    #demo-3 .resources-text .btn-mobile{
        display: block;
        font-size: 18px !important;
    }

    .crm-cards-grid{
        flex-wrap: nowrap;
    }

    #demo-2 .final-copy .btn-medium {
        font-size: 12px;
        padding: 12px 12px;
        width: 120px;
        text-align: center;
    }

    #demo-2 .final-copy .btn-medium br {
        display: none;
    }

    .hero-what-kintone-can-do .hero-grid {
        background-size: 80%;
        background-position: right bottom;
        padding-bottom: 180px;
        height: 600px;
    }

    .section-manage-task {
        padding: 25px 12px;
        padding-bottom: 42% !important;
    }

    #consider > div.section-bar.section-bar--primary > h2{
        font-size: 4vw !important;
    }

    .section-manage-task{
        background-size: 60%;
        background-position: center bottom;
        padding-bottom: 180px;
        background-image: url(manage-task-bg-2.png);
    }

    body > main > section.section.section-case-story{
        padding: 3vw;
    }

    .section-manage-task .manage-task-grid{
        grid-template-columns: 1fr;
    }

    body > main > section.section.section-our-resources > div > div > div.resources-text > p{
        font-size: 3vw !important;
    }

    body > main > section.section.section-manage-task > div.section-bar.section-bar > h2 > span.title-text-red{
        font-size: 4vw !important;
    }

    #demo-2 .final-grid{
        margin: 100px 12px;
    }

    .section-final-what-kintone-can-do-less-padding{
        padding-bottom: 500px !important;
    }

    .section-manage-task .manage-task-item{
        br {
            display: none;
        }
    }
    
    .resources-card {
        margin-left: 35px;
    }

    .section-downloadable-resources .resources-card {
        margin-left: 0px;
    }

    .btn-large {
        padding: 14px 36px;
        font-size: 28px;
    }

    .btn-medium {
        padding: 14px 30px;
        font-size: 20px;
    }

    .btn-primary{
        padding: 12px 12px;
        font-size: 11px;
    }

    body > main > section.section.section-banner > div > p:nth-child(2) > a{
        font-size: 14px;
    }

    #cases > div > div:nth-child(4) > a {
        font-size: 14px !important;
    }
}