@charset "UTF-8";

/* MEDIA QUERIES */

@media screen and (min-width: 460px) {
    
    /* tiles */
    div.tiles > div.tile {
        display: flex;
        border: none;
        border-radius: 0px;
        gap: 0px;
    }
    
    div.tiles > div.tile > div.image {
        flex: 1 0 auto;
        min-width: 70px;
        max-width: 70px;
    }

    div.tiles > div.tile > div.image > div.icon {
        height: 100%;
        background-image: linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
        background-size: 2px 16px, 2px 100%;
        background-repeat: repeat-y, no-repeat;
        background-position: center top 80px, center top 80px;
    }

    div.tiles svg,
    div.tiles img {
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        padding: 16px 8px;
    }
    
    div.tiles > div.tile > article {
        flex: 1 1 auto;
    }
    
    div.tiles > div.tile > article h1 {
        text-align: left;
    }
    
    div.tiles > div.tile.icon > article h1 {
        margin-top: 14px;
    }
    
    /* inset image & caption */
    img.inset {
        left: auto;
        transform: none;
        float: left;
        margin: 16px 40px 16px 0;
        width: 50%;
    }
    
    img.inset.shape {
        shape-margin: 40px;
    }

    img.inset.right {
        float: right;
        margin-left: 40px;
        margin-right: 0;
    }
    
    img.inset + span.caption {
        float: left;
        clear: left;
        margin: 0 40px 1em 0;
        width: 50%;
        text-align: center;
    }

    img.inset.right + span.caption {
        float: right;
        clear: right;
        margin: 0 0 1em 40px;
    }

    img.inset.maxw15,
    img.inset.maxw15 + span.caption {
        width: 15%;
    }
    
    img.inset.maxw20,
    img.inset.maxw20 + span.caption {
        width: 20%;
    }
    
    img.inset.maxw25,
    img.inset.maxw25 + span.caption {
        width: 25%;
    }
    
    img.inset.maxw30,
    img.inset.maxw30 + span.caption {
        width: 30%;
    }

    img.inset.maxw35,
    img.inset.maxw35 + span.caption {
        width: 35%;
    }

    img.inset.maxw40,
    img.inset.maxw40 + span.caption {
        width: 40%;
    }
    
    img.inset.maxw45,
    img.inset.maxw45 + span.caption {
        width: 45%;
    }
    
    img.inset.maxw50,
    img.inset.maxw50 + span.caption {
        width: 50%;
    }
    
    img.inset.maxw60,
    img.inset.maxw60 + span.caption {
        width: 60%;
    }
    
    span.caption {
        font-size: 14px;
    }
        
    /* zoomable buttons */
    p.zoomable span.acf-nav-button.right.zoomable {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
    }
    
    /* cta buttons */
    div.cta.center {
        width: 70%;
    }
    
    /* intro profile image */
    div.profile {
        left: auto;
        transform: none;
    }
    
    div.profile.inset {
        float: left;
        margin: 16px;
        width: 40%;
        shape-margin: 10px;
        shape-outside: circle(50%);
    }
}


@media screen and (min-width: 600px) {
    article.image {
        flex-direction: row;
        gap: 40px;
    }

    article.image > div:first-child {
        display: inherit;
        min-width: 30%;
        max-width: 30%;
    }

    article.image h3 {
        margin-top: 0;
    }

    .video-container {
        padding-bottom: 26.25%;
    }
}


@media screen and (min-width: 680px) {
    div.main-container div.cols-2,
    div.main-container main.acf footer {
        column-count: 2;
        column-gap: 30px;
    }
}

@media screen and (min-width: 768px) {
    main.home div.grid-container {
        grid-template-columns: 302px 1fr;
        column-gap: 40px;
    }
    
    main.home div.grid-container div.grid-item.sidebar {
        order: 1;
    }
    
    main.home div.grid-container div.grid-item.main {
        order: 2;
    }
    
    main.home div.intro > img {
        float: none;
        width: 100%;
    }
/*    
    div.profile.inset {
        float: none;
        margin: 0;
        width: 100%;
    }
*/
}