@charset "UTF-8";

/* MEDIA QUERIES */

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

    div.tiles > div.tile.icon > div.image > div.icon:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon:not(.no-gradient) {
        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 60px, center top 60px;
    }
    
    div.tiles > div.tile.icon > aside.image > div.icon.person-chalkboard:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.ringed-planet:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.moon-stars:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.dish:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.rocket:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.planets:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.astro:not(.no-gradient),
    div.tiles > div.tile.icon > aside.image > div.icon.orbiter:not(.no-gradient) {
        background-size: 58px auto, 2px 16px, 2px 100%;
        background-repeat: no-repeat, repeat-y, no-repeat;
        background-position: center top, center top 60px, center top 60px;
   }

    div.tiles div.tile.icon aside.image div.icon.rocket:not(.no-gradient) {
        background-image: url(../icon/rocket-launch-thin.svg), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
        background-size: 48px auto, 2px 16px, 2px 100%;
    }

    div.tiles div.tile.icon aside.image div.icon.planets:not(.no-gradient) {
        background-image: url(../icon/solar-system-thin.svg), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
        background-size: 48px auto, 2px 16px, 2px 100%;
   }

    div.tiles div.tile.icon aside.image div.icon.astro:not(.no-gradient) {
        background-image: url(../icon/user-astronaut-thin.svg), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
        background-size: 42px auto, 2px 16px, 2px 100%;
   }

    div.tiles div.tile.icon aside.image div.icon.orbiter:not(.no-gradient) {
        background-image: url(../icon/shuttle-space-thin.svg), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
    }

    div.tiles div.tile.icon aside.image div.icon.dish:not(.no-gradient) {
        background-image: url("../icon/satellite-dish-thin.svg"), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
        background-size: 48px auto, 2px 16px, 2px 100%;
    }

    div.tiles div.tile.icon aside.image div.icon.moon-stars:not(.no-gradient) {
        background-image: url("../icon/moon-stars-thin.svg"), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
    }

    div.tiles div.tile.icon aside.image div.icon.ringed-planet:not(.no-gradient) {
        background-image: url("../icon/planet-ring-thin.svg"), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
    }

    div.tiles div.tile.icon aside.image div.icon.person-chalkboard:not(.no-gradient) {
        background-image: url("../icon/person-chalkboard-thin.svg"), linear-gradient(to bottom, transparent 50%, #222222 50%), linear-gradient(to bottom, #d47aff, transparent);
    }

    div.tiles svg,
    div.tiles img {
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0px 8px 16px;
    }
    
    div.tiles > div.tile > article {
        flex: 1 1 auto;
    }
    
    div.tiles > div.tile > article h1,
    div.tiles > div.tile > article h3,
    div.tiles > div.tile > article h5 {
        text-align: left;
    }
        
    div.cta.center {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0px;
        text-align: left;
    }
    
    /* 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%;
    }
    
    /* ASTRONAUT ADVENTURES */

    main.astro-adventures img.inset {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* --- */

    span.caption {
        font-size: 14px;
    }
        
    /* zoomable buttons */
    p.zoomable span.acf-nav-button.right.zoomable {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
    }
    
    /* 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%);
    }
    
    /* Emblems for educators */
    
    main.presentations div.header {
        border-bottom: 1px solid #666;
    }
    
    /* Misc */
    
    div.system-button.scale {
        font-size: inherit;
    }
    
    /* Example Patches */
    
    img.example-patches {
        float: none;
        width: 100% !important;
        margin-right: 0;
        
    }
}


@media screen and (min-width: 530px) {
    br.responsive {
        display: none;
    }
    
    div.tiles > div.tile.icon > article h1 {
        margin-top: 12px;
    }

    div.tiles > div.tile.icon > article h1.no-topmargin {
        margin-top: 0px;
    }
    
    div.system-button.scale span {
        display: inline;
    }
}


@media screen and (min-width: 580px) {
    main.home ul.free-offering {
        column-count: 2;
    }
}

@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;
    }
/* removed 12/8/24
    .video-container {
        padding-bottom: 26.25%;
    }
}
*/

@media screen and (min-width: 640px) {
    div.tiles.multicolumn {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    div.tiles.multicolumn > div.tile {
        max-width: calc(50% - 16px);
    }
    
    /* ASTRONAUT ADVENTURES */

    main.astro-adventures img.inset {
        float: left;
        width: 40%;
        margin-left: 0px;
        margin-right: 40px;
    }
    
    main.astro-adventures img.inset.right {
        float: right;
        width: 40%;
        margin-left: 0;
        margin-left: 40px;
        margin-right: 0px;
    }
    
    /* --- */
}

@media screen and (min-width: 660px) {
    main.presentations ul.multi-column {
        column-count: 2;
        column-gap: 32px;
    }
}

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

@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%;
    }
    
    div.card.tilegroup div.tiles {
        justify-content: center;
        flex-direction: row;
    }

    div.card.tilegroup div.tiles > div.tile {
        min-width: 50%;
        max-width: 50%;
    }
    
    main.home ul.free-offering {
        column-count: 1;
    }

}

@media screen and (min-width: 810px) {
    div.cta.inline {
        display: flex;
        column-gap: 16px;
        flex-direction: row;
    }
}
    
    
@media screen and (min-width: 860px) {
    .languages {
        column-count: 3;
    }
    
    /* Example Patches */
    img.example-patches {
        float: left;
        width: 54% !important;
    }
}

@media screen and (min-width: 920px) {
    main.home ul.free-offering {
        column-count: 2;
    }
}

@media screen and (min-width: 1024px) {
    .languages {
        column-count: 4;
    }
}