@charset "utf-8";

/* THIS IS A MOBILE VERSION ONLY */

@media only screen and (max-width: 800px) {

    .greeting {
        height: auto;
        width: 50%;
        float: right;
        right: 0;
        transform: translate(0,-45%);
        top: 50%;
        padding: 0 5% 0 0;
    }

    .greeting h1 {
        font-size: 2.25em;
        margin: 0 0 25px 0;
    }

    .greeting h4 {
        font-size: 1.1em;
        line-height: 150%;
    }

    .cards, .flexbox {
        height: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .card {
        height: auto;
        width: 100%;
        background-color: rgba(244, 247, 245, 1);
        border-radius: 3px;
        margin: 10vh 0 0 0;
        color: rgba(64,64,64,1);
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        position: relative;
        opacity: 0;
        top: 50px;
    }

    .card * {
        cursor: pointer;
    }

    .card .image, .card img {
        height: auto;
        width: 100%;
        border-radius: 3px 3px 0 0;
    }

    .card .image {
        position: absolute;
        left: 0;
        height: 0;
        background-color: rgba(71, 126, 192,0.75);
        top: 48.15vw; /* 90*535/1000 */
        transition: 0.5s ease-out;
    }

    .card .btn {
        height: 25px;
        width: 100%;
        text-align: center;
        color: rgba(255,255,255,1);
        position: absolute;
        top: 22.95vw; /* 90*((535/2)-12,5)/1000 */
        left: 0;
        transform: translateY(50%);
        opacity: 0;
        transition-delay: 0s;
        transition-duration: 0.125s;
        transition-timing-function: ease-out;
    }

    .card:hover .image {
        height: 48.15vw; /* 90*535/1000 */
        top: 0;
    }

    .card:hover .btn {
        opacity: 1;
        transition-delay: 0.3s;
        transition-duration: 0.25s;
        transition-timing-function: ease-out;
    }

    .card .data{
        height: auto;
        min-height: 50px;
        transition: 0.25s ease-out;
        padding: 10px 15px 15px 15px;
    }

    .card .data h3 {
        font-weight: 600!important;
    }

    .card .data p {
        color: rgba(64,64,64,0.75);
        font-style: italic;
    }

    .card:hover .data {
        padding-left: 10px;
    }

    .project {
        height: 75vh!important;
        width: 80%!important;
    }

    .flexbox > .one-third {
        width: 100%!important;
        order: 2!important;
    }

    .flexbox > .two-third {
        width: 100%!important;
        order: 1!important;
    }

    .project-meta {
        height: auto;
        margin-top: 85px;
        padding: 0!important;
    }


}