/*****************************/
/*                           */
/* Mobile frontpage settings */
/*                           */
/*****************************/
#mission_statement {
    display: none;
}
#mobile_mission_statement {
    display: block;
    padding: 20px;
    font-size: xx-large;
}
section{
    background-image: url("/img/image1.jpg");
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: clip;
}

#s1-grid {
    display:flex;
    flex-direction: column;
}

/* Trigger by minimum width */
@media screen and (min-width: 1041px) {
    html {
        scroll-snap-type: y mandatory;
        scroll-snap-stop: always;
        scroll-behavior: smooth;
    }
    section {
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow-x: clip;
        height: 100vh;
        width: 100vw;
        scroll-snap-align: start;
    }
    #s1-grid {
        display:grid;
        grid-template-rows: repeat(12, 5vh);
        grid-template-columns: 5% 40% 50% 5%;
    }
    #s2-grid {
        display: grid;
        grid-auto-rows: 5% 28% 17% 17% 28% 5%;
        grid-template-columns: 5% 42.5% 5% 42.5% 5%;
        height: inherit;
    }

    #s4 {
        display: flex;
        flex-direction: column;
        width: inherit;
        justify-content: space-between;
        height: 100vh;
    }

    #s4-grid {
        display: grid;
        grid-template-rows: repeat(10, 8vh);
        grid-template-columns: repeat(10, 10%);
    }

    #flex-container {
        height: 75vh;
    }

    #home-meetings-upcoming {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }
    #home-meetings-risk {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }
    #home-meetings-recent {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    #banner_blurb {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        grid-row: 2/7;
        grid-column: 2/2;
    }

    section#one {
        background-position: right;
        background-image: url("/img/image18.jpg");
    }
    section#two{
        background-image: url("/img/image19.jpg");
    }

    section#three{
        background-image: url("/img/image21.jpg");
    }

    section#four {
        background-image: url("/img/image21.jpg");
    }

    section#five{
        background-image: url("/img/image21.jpg");
    }
    section#six{
        background-image: url("/img/image6.jpg");
    }

    section#seven{
        background-image: url("/img/image7.jpg");
    }
    /* front page things*/
    #mission_statement {
        display: block;
        font-size: 1.5rem;
        line-height: 3.0rem;
        background-color: rgba(255,255,255,0.9);
        padding: 1.5%;
        border-radius: 8px;
        width: 900px;
    }

    #mobile_mission_statement {
        display: none;
    }

    #jifsan-cfs3-text {
        font-size: 3.0rem;
        color: var(--jifsan-red);
    }

    #place_mission{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        grid-row:2/5;
        grid-column:2/4;
        overflow: visible;
        align-self: flex-start;
        z-index:3;
    }

    #home-featured {
        grid-row:6/13;
        grid-column:3/4;
    }

    #s1 {
        display: flex;
        flex-direction: column;
        height:inherit;
        justify-content: space-between;
    }
    #s2 {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        justify-content: space-between;
        align-content: center;
    }

    #cdownwrap {
        align-self: center;
    }

    #cdownwrap a {
        display: inline-block;
        height: 50px;
        width: 50px;
    }

    #cupwrap {
        align-self: center;
    }

    #cupwrap a {
        display: inline-block;
        height: 50px;
        width: 50px;
    }

    #cup {
        display: block;
        background-color: lightsalmon;
        -webkit-clip-path: polygon(100% 100%, 50% 70%, 0 100%, 0 90%, 50% 60%, 100% 90%);
        clip-path: polygon(100% 100%, 50% 70%, 0 100%, 0 90%, 50% 60%, 100% 90%);
        animation: hover-me-up .5s infinite ease-in-out alternate;
        height: 50px;
        width: 50px;
        mix-blend-mode: difference;
    }

    #cdown {
        display: block;
        height: 50px;
        width: 50px;
        clip-path: polygon(100% 10%, 50% 40%, 0 10%, 0 0, 50% 30%, 100% 0);
        -webkit-clip-path: polygon(100% 10%, 50% 40%, 0 10%, 0 0, 50% 30%, 100% 0);
        background-color: lightsalmon;
        mix-blend-mode: difference;
        animation: hover-me .5s infinite ease-in-out alternate;
    }

    #mission_header{
        position:absolute;
        top:50%;
        left:16px;
        z-index: -1;
    }

    .headline{
        transform:translateY(50%);
    }

    @keyframes hover-me {
        100% { transform: translate3d(0, 25px, 0); }
    }
    @keyframes hover-me-up {
        100% { transform: translate3d(0, -25px, 0); }
    }

    #ac_news {
        display: flex;
        flex-direction: row;
    }

    #ccc-box {
        grid-column: 4/4;
        grid-row: 2/7;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    #home-banner {
        /*grid-row: 2/4;*/
        /*grid-column: 2/2;*/
        /*display:flex;*/
        /*flex-direction: column;*/
        /*height: fit-content;*/
    }

    #home-content {
        padding: 0 0;
    }
    #home-news {
        grid-row: 4/6;
        grid-column:2/2;
        display:flex;
        flex-direction: column;
        height: fit-content;
    }
    #bottom {
        display:flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        justify-content: space-between;
    }
    #bottom-bottom {
        width:100vw;
    }
    #bottom-top {
        display:flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 4%
    }
}