/* General breakpoints for responsive layout */

@media only screen and (max-width: 60rem) {

    .col-promo {
        width: auto;
        padding-right: 0;
    }

    .slogan-wrapper {
        background-color: rgba(255, 255, 255, 0.4);
    }
}

@media only screen and (max-width: 55rem) {

    .col-1-2 {
        width: 75%;
    }

    .col-1-3, .col-1-4 {
        width: 45%;
    }

    .evenspace-wider {
        display: block;
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 50rem) {

    .content {
        padding-top: 4.5rem;
    }

    /* Menu tab buttons stack */
    .menu-btn, .mobile {
        display: block;
    }
}

@media only screen and (max-width: 45rem) {

    /* Blog post social links center */
    .social-sharing-links {
        text-align: center;
    }

    .social-sharing-links li {
        padding-left: 0;
        padding-right: 1rem;
    }

    .product-container {
        padding: 1.5rem 1rem;
    }

    /* Most columns expand to the width of the screen */
    .col-1-2, .col-1-2-pc,
    .col-1-3, .col-1-3-pc,
    .col-1-4, .col-1-4-pc,
    .col-2-3, .col-2-3-pc,
    .col-3-4, .col-3-4-pc,
    .col-article-image, .col-article-image-pc,
    .col-product-image-container,
    .col-product-description {
        padding-right: 0;
        width: auto;
        display: block;
    }

    [class*="minheight-"] {
        min-height: 0;
    }

    .evenspace {
        display: block;
        justify-content: flex-start;
    }

    .play-container {
        top: 27%;
        left: 37%;
        border-top: 2rem solid transparent;
        border-left: 2rem solid transparent;
        border-radius: 1rem;
    }

    .play-video {
        top: 37%;
        left: 45%;
        border-top: 0.5rem solid transparent;
        border-left: 1rem solid #5BADD6;
        border-bottom: 0.5rem solid transparent;
    }

    .video-image-container:hover .play-container,
    .video-image-container:hover .play-video {
        display: none;
    }

    .page-category-label {
        padding-right: 1rem;
    }

    .pi-banner {
        background-size: 200%;
        min-height: 19rem;
    }
}

@media only screen and (max-width: 35rem) {

    .mobile-small {
        display: block;
    }

    .widescreen-only {
        display: none;
    }

    .intro1, .intro2 {
        background-position: 72% 0;
        background-size: 300%;
    }

    #geppettointro {
        min-height: 35rem;
    }

    /* Compact view */
    .boxshadow,
    .wrap-2,
    .sectionbox,
    .content-bubble,
    [class*="wrapper"] {
        padding: 1rem;
    }

    #geppettointro,
    #homepageintro {
        padding: 0;
    }

    .pi-banner {
        background-size: 250%;
        min-height: 16rem;
    }

    h1 {
        font-size: 1.7rem;
        line-height: 2rem;
    }

    h2,
    .expandable-toggle {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .featured-label {
        font-size: 1.3rem;
    }

    h3,
    .pagination-wrapper {
        font-size: 1rem;
    }

    body,
    .smalltext,
    .smalltext *,
    .indicator {
        font-size: 0.9rem;
        line-height: 1.4rem;
    }

    .content {
        padding-top: 5rem;
    }

    .content li {
        line-height: 1.4rem;
    }

    .content ul {
        margin-left: 1rem;
    }

    .mediumtext {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }

    .largetext {
        font-size: 1.3rem;
    }

    #cookie-notice {
        /* Collapse boundaries for cookie notice */
        width: auto;
        max-width: none;
    }

    .page-category-label {
        display: none;
    }

    .post-pagination {
        justify-content: flex-start;
        display: block;
    }

    .post-pagination > span {
        padding: 0.5rem 0;
        display: block;
        margin: 0 auto;
    }

    .pagination {
        font-size: 1rem;
    }

    .page-top {
        padding-top: 4rem;
    }
}

@media screen and (max-width: 30rem) {

    #geppettointro {
        min-height: 30rem;
    }

    .pi-banner {
        min-height: 13rem;
    }

    html [class*="btn"], #submit {
        white-space: normal;
    }
}

@media screen and (max-width: 24rem) {

    #geppettointro {
        min-height: 25rem;
    }
}