.down-arrow {
    position: fixed;
    width: 50px;
    height: 50px;
    z-index: 40001;
    cursor: pointer;
    color: white;
    font-size: 1.5rem;
    padding: 25px 25px;
    background-color: rgba(0 0 0  / 25%);
    visibility: hidden;
    transition: border-radius 0.5s ease-in-out;
    border-radius: 10px;

    top: 20px;
    left: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.down-arrow:hover {
    border-radius: 25px;
}

.project-content-bg {
    width: 100%;
    height: 100%;
    z-index: 20003;
    position: absolute;
    /* background-color: rgba(0 0 255  / 55%); */
    background-color: white;
    top: 100%;
    overflow: scroll;
   
}

.project-container {
    width: 95vmin;
    max-width: 90vmax;
    height: auto;
    /* height: 100%; */
    /* background-color: lightgray; */
    margin: 6em auto 0 auto;
    padding-bottom: 20px;
}

.project-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.caption {
    font-weight: 200;
    font-size: 0.5rem;
    line-height: 15px;
    padding: 0 20px;
    margin-top: 20px;
}

.text {
    font-weight: 300;
    /* background-color: cornsilk; */
    text-align: justify;
    text-justify: inter-word;

    /* text-indent: 5%; */
    font-size: 0.8rem;
    line-height: 30px;
    padding: 0 1.3rem;
}

.footer {
    color: black;
    opacity: 0.7;
    font-weight: 300;
    font-size: 14px;
}

.page {
    display: grid;
    grid-template-rows: 300px;
    grid-auto-flow: row;
    row-gap: 1em;    

    /* justify-content: center; */
    align-items: center;
    text-align: center;
    color: black;
}

/* TORONTO ZOO */
#animal-signs {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    grid-template-rows: 1fr 0.5fr;
    grid-auto-flow: dense;
    column-gap: 20px;
    overflow: hidden;
}


#animal-signs img:nth-of-type(3) {
    grid-column: 1/3;
    grid-row: 2/3;
}

#animal-signs img:nth-of-type(4) {
    grid-column: 1/3;
    grid-row: 3/4;
}

#turtle {
    width: 105%;
}

/* INFOGRAPHIC */
button {
    font-weight: 600;
    font-size: 8pt;
    padding: 10px 10px;
    border-radius: 50px;
    color: white;
    background-color: black;
    border: none;
    transition: background-color 0.3s ease-out;
}

a {
    width: 45%;
    justify-self: center;
}

button:hover {
    background-color: #6c757d;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:active {
    background-color: #50575e;
}

.text-box > p:not(:last-child) {
    margin-bottom: 20px;
}

.octopus-gif-container {
    display:grid;
    grid-template-columns: 1fr 1fr;
    
    align-items: center;
}

#spinner {
    margin: 0 auto;
    width: 70%;

} 

#coconut {
    margin: 0 auto;
    width: 50%;
}

#octopus-pages {
    display: grid;
    grid-auto-columns: auto auto;
    grid-template-rows: auto auto;
    grid-gap: 20px;
}

/* MAX AND LOUIS */

#word-game-bg {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    /* grid-template-rows: auto auto; */
    grid-gap: 20px;
}

/* EXPANSE */
#expanse-header {
    font-size: 2rem;
}

@media (min-width:768px) {
    .project-container {
        height: auto;
        /* height: 100%; */
        /* background-color: lightgray; */
        margin: 8em auto 0 auto;
        padding-bottom: 20px;
        overflow: scroll;
    }

    .caption {
        font-size: 0.7rem;
        line-height: 20px;
        padding: 0 20px;
        margin-top: 20px;
    }

    .text {
        /* background-color: cornsilk; */
        text-align: justify;
        text-justify: inter-word;
        /* text-indent: 5%; */
        font-size: 1.23rem;
        line-height: 45px;
        padding: 0 3rem;
    }

    .page {
        row-gap: 1.8em;
    }

    button {
        font-size: 15pt;
        padding: 20px 35px;
        border-radius: 70px;
        color: white;
        background-color: black;
        border: none;
        transition: background-color 0.3s ease-out;
    }

    #expanse-header {
        font-size: 3rem;
    }

    .image-box {
        width: 100%;
        /* background-color: brown; */

        display: flex;
        flex-direction: column;
        
    }

    .isometric {
        width: 70%;
        /* align-self: center; */
        justify-self: center;
    }

    .tools-can{
        width: 80%;
        justify-self: center;
    }

    .can-video {
        width: 80%;
        justify-self: center;
    }

    .play-video {
        width: 90%;
        justify-self: center;
    }

}

@media (min-width:1024px) {
    .down-arrow {
        position: fixed;
        width: 50px;
        height: 50px;
        z-index: 40001;
        cursor: pointer;
        color: white;
        font-size: 1.5rem;
        padding: 25px 25px;
        background-color: rgba(0 0 0  / 15%);
        visibility: hidden;
        transition: border-radius 0.5s ease-in-out;
        border-radius: 10px;
    
        top: 20px;
        left: 30px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .down-arrow:hover {
        border-radius: 25px;
    }
    
    .project-content-bg {
        width: 100%;
        height: 100%;
        z-index: 20003;
        position: absolute;
        /* background-color: rgba(0 0 255  / 55%); */
        background-color: white;
        top: 100%;
        overflow: scroll;
       
    }
    
    .project-container {
        width: 140vmin;
        max-width: 90vmax;
        height: auto;
        /* height: 100%; */
        /* background-color: lightgray; */
        margin: 8em auto 0 auto;
        padding-bottom: 20px;
        overflow: scroll;
    }
    
    .project-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .caption {
        font-weight: 200;
        font-size: 1rem;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 20px;
    }
    
    .text {
        font-weight: 300;
        /* background-color: cornsilk; */
        text-align: left;
        /* text-indent: 5%; */
        font-size: 1.23rem;
        line-height: 45px;
        padding: 0 3rem;
    }
    
    .footer {
        color: black;
        opacity: 0.7;
        font-weight: 300;
        font-size: 14px;
    }
    
    .page {
        display: grid;
        grid-template-rows: 300px;
        grid-auto-flow: row;
        row-gap: 2em;    
    
        /* justify-content: center; */
        align-items: center;
        text-align: center;
        color: black;
    }
    
    /* TORONTO ZOO */
    #animal-signs {
        display: grid;
        grid-template-columns: 2.5fr 1fr;
        grid-template-rows: 1fr 0.5fr;
        grid-auto-flow: dense;
        column-gap: 20px;
        overflow: hidden;
    }
    
    
    #animal-signs img:nth-of-type(3) {
        grid-column: 1/3;
        grid-row: 2/3;
    }
    
    #animal-signs img:nth-of-type(4) {
        grid-column: 1/3;
        grid-row: 3/4;
    }
    
    #turtle {
        width: 105%;
    }
    
    /* INFOGRAPHIC */
    button {
        font-weight: 600;
        font-size: 14pt;
        padding: 20px 35px;
        border-radius: 50px;
        color: white;
        background-color: black;
        border: none;
        transition: background-color 0.3s ease-out;
    }
    
    a {
        width: 35%;
        justify-self: center;
    }
    
    button:hover {
        background-color: #6c757d;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }
    
    button:active {
        background-color: #50575e;
    }
    
    .text-box > p:not(:last-child) {
        margin-bottom: 20px;
    }
    
    .octopus-gif-container {
        display:grid;
        grid-template-columns: 1fr 1fr;
        
        align-items: center;
    }
    
    #spinner {
        margin: 0 auto;
        width: 70%;
    
    } 
    
    #coconut {
        margin: 0 auto;
        width: 50%;
    }
    
    #octopus-pages {
        display: grid;
        grid-auto-columns: auto auto;
        grid-template-rows: auto auto;
        grid-gap: 20px;
    }
    
    /* MAX AND LOUIS */
    
    #word-game-bg {
        display: grid;
        grid-auto-columns: auto auto;
        /* grid-template-rows: auto auto; */
        grid-gap: 20px;
    }

    /* EXPANSE */

    .iframe_youtube {
        align-self: center;
        justify-self: center;
    }


}


@media (min-width:1440px) {
   
    
    .down-arrow:hover {
        border-radius: 25px;
    }

    
    .project-container {
        width: 150vmin;
        max-width: 100vmax;
        height: auto;
        /* height: 100%; */
        /* background-color: lightgray; */
        margin: 6em auto 0 auto;
        padding-bottom: 20px;
    }
    
    .project-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .caption {
        font-weight: 200;
        font-size: 0.9rem;
    }
    
    .text {
        font-size: 1.12rem;
        line-height: 45px;
        padding: 0 3rem;
    }
    
    .footer {
        color: black;
        opacity: 0.7;
        font-weight: 300;
        font-size: 14px;
    }
    
    .page {
        display: grid;
        grid-template-rows: 300px;
        grid-auto-flow: row;
        row-gap: 2em;    
    
        /* justify-content: center; */
        align-items: center;
        text-align: center;
        color: black;
    }
    
    /* TORONTO ZOO */
    #animal-signs {
        display: grid;
        grid-template-columns: 2.5fr 1fr;
        grid-template-rows: 1fr 0.5fr;
        grid-auto-flow: dense;
        column-gap: 20px;
        overflow: hidden;
    }
    
    
    #animal-signs img:nth-of-type(3) {
        grid-column: 1/3;
        grid-row: 2/3;
    }
    
    #animal-signs img:nth-of-type(4) {
        grid-column: 1/3;
        grid-row: 3/4;
    }
    
    #turtle {
        width: 105%;
    }
    
    /* INFOGRAPHIC */
    button {
        font-weight: 600;
        font-size: 14pt;
        padding: 20px 35px;
        border-radius: 50px;
        color: white;
        background-color: black;
        border: none;
        transition: background-color 0.3s ease-out;
    }
    
    a {
        width: 35%;
        justify-self: center;
    }
    
    button:hover {
        background-color: #6c757d;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }
    
    button:active {
        background-color: #50575e;
    }
    
    .text-box > p:not(:last-child) {
        margin-bottom: 20px;
    }
    
    .octopus-gif-container {
        display:grid;
        grid-template-columns: 1fr 1fr;
        
        align-items: center;
    }
    
    #spinner {
        margin: 0 auto;
        width: 70%;
    
    } 
    
    #coconut {
        margin: 0 auto;
        width: 50%;
    }
    
    #octopus-pages {
        display: grid;
        grid-auto-columns: auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        grid-gap: 20px;
    }
    
    /* MAX AND LOUIS */
    
    #word-game-bg {
        display: grid;
        grid-auto-columns: auto auto;
        grid-auto-flow: column;
        /* grid-template-rows: auto auto; */
        grid-gap: 20px;
    }

     /* EXPANSE */
     .image-box {
        width: 100%;
        /* background-color: brown; */

        display: flex;
        flex-direction: row;
        
    }
}


@media (min-width:1600px) {
    .project-container {
        width: 130vmin;
        max-width: 100vmax;
        height: auto;
        /* height: 100%; */
        /* background-color: lightgray; */
        margin: 10em auto 0 auto;
        padding-bottom: 20px;
    }

    .caption {
        font-weight: 200;
        font-size: 1rem;
    }
    
    .text {
        font-size: 1.23rem;
        line-height: 45px;
        padding: 0 3rem;
    }
    
}