body {
    font-family: 'Merriweather', serif;
    background-color: #eeeeee;
}

h1, h2, h3 {
    font-family: 'Josefin Sans', sans-serif;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

h3 {
    font-weight: 700;
}

a {
    text-decoration: underline;
    color: #333;
}

    a:hover {
        color: #006f79;
        text-decoration: none;
    }

@keyframes titleEntrance {
    0% {
        transform: translate(0, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes subtitleEntrance {
    0% {
        opacity: 0;
        transform: translate(0, 10px);
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.jumbotron {
    text-align: center;
}

    .jumbotron h1 {
        color: #006f79;
        animation: 0.7s titleEntrance ease-in;
        margin-top: 1em;
    }


    .jumbotron h2 {
        margin-top: 0;
        font-size: 34px;
        animation: 0.7s subtitleEntrance ease-in;
    }

    .jumbotron p {
        margin: 2em auto 1.5em auto;
    }

    .jumbotron a {
        font-size: 3.5em;
        color: #808080;
        margin: 1em 0.35em;
    }

        .jumbotron a:hover {
            color: #006f79;
        }

.project {
    height: 300px;
    max-width: 600px;
    margin: auto auto 30px auto;

}

.project-container {
    width: 100%;
    height: 75%;
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    display: block;
}

    .project-container i {
        color: #FFF;
        opacity: 0;
        font-size: 4em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 3;
    }

        .project-container:hover i {
            opacity: 1;
            transition: 0.2s ease-in;
            -webkit-transition: 0.2s ease-in;
            cursor: pointer;
        }

.project-overlay {
    background-color: #006f79;
    opacity: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

    .project-container:hover .project-overlay {
        opacity: 0.85;
        transition: 0.2s ease-in;
        -webkit-transition: 0.2s ease-in;
        cursor: pointer;
    }

.project-cover {
    background-color: #3d3d3d;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
}

    .calf-tracker {
        background-image: url("../images/CalfTracker/CalfTracker-cover.png");
    }

    .dropbox-clone {
        background-image: url("../images/DropboxClone/DropboxClone-cover.png");
    }
    
    .sound-engineer {
        background-image: url("../images/SoundEngineer/SoundEngineer-cover.png");
    }

.project-label {
    background-color: #FFF;
    color: #3D3D3D;
    padding: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    .project-label h3 {
        margin: 0 auto 0 auto;
    }

    .project-label p {
        margin: auto auto 0 auto;
    }

.modal.fade  {
    transform: translate(0, 100vh);
    top: 0px;
    -webkit-transition: transform 0.35s ease-out;
    -moz-transition: transform 0.35s ease-out;
    transition: transform 0.35s ease-out;
}

.modal.fade.in  {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.project-modal {
    background-color: #eeeeee;
    padding-right: 0px !important;
}

.modal-header, .modal-body, .modal-footer {
    border: none;
}

.modal-header {
    margin-top: 2em;
}

.project-modal-content {
    max-width: 800px;
    margin: auto;
}

    .project-modal-content .close {
        font-size: 2em;
        opacity: 0.25
    }

        .project-modal-content .close:hover {
            opacity: 0.5;
        }

    .project-modal-content .modal-body {
        text-align: center;
    }

    .project-modal-content h1 {
        font-size: 64px;
        color: #006f79;
        margin-top: 0.5em;
        animation: 0.7s titleEntrance ease-in;

    }

    .project-modal-content h2 {
        font-size: 24px;
        margin: 0 auto 2em auto;
        animation: 0.7s subtitleEntrance ease-in;

    }

    .project-modal-content img {
        width: 100%;
        display: flex;
        align-content: center;
    }

    .project-modal-content .carousel {
        margin: 2em auto 0 auto;
    }

    .project-modal-content .carousel-control {
        text-shadow: 0 0 2px rgba(0,0,0,1);
    }

    .project-modal-content .carousel-inner {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        width: 100%;
        height: 400px;
    }

        .project-modal-content .carousel-inner .item, .project-modal-content .carousel-inner .item-active {
            width: 100%;
            height: 400px;
            background-size: cover;
            background-position: center;
        }

    .project-modal-content .carousel-control {
        background-image: none;
    }

    .project-modal-content .caption-below {
        font-size: 16px;
        padding: 2em;
        background-color: #FFF;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        text-align: left;
    }

        .project-modal-content .caption-below p {
            margin-bottom: 0;
        }

.modal-button, .modal-button:active, .modal-button:visited {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 1em;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 30px;
    padding: 0.7em 1em 0.5em 1em;
    margin: 2em 0.25em;
    background-color: rgba(0,0,0,0.25);
    color: #eeeeee;
}

    .modal-button i {
        margin-right: 0.75em;
    }

    .modal-button:hover {
        background-color: rgba(0,0,0,0.5);
        color: #eeeeee;
        transition: 0.15s ease-out;
        text-decoration: none;
    }

@media only screen and (max-width:992px) {
    .jumbotron h2 {
        font-size: 30px;
    }

    .jumbotron p {
        font-size: 17px;
    }

    .project-modal-content h1 {
        font-size: 64px;
    }

    .project-modal-content h2 {
        font-size: 24px;
    }

    .jumbotron a {
        font-size: 3em;
    }
}

@media only screen and (max-width:768px) {
    .jumbotron-container {
        max-width: 570px;
        margin: auto;
    }

    .jumbotron h2 {
        font-size: 24px;
    }

    .jumbotron p {
        font-size: 15px;
    }

    .jumbotron a {
        font-size: 2.5em;
    }

    .modal-header {
        margin-top: 0;
    }

    .project-modal-content h1 {
        font-size: 52px;
    }

    .project-modal-content h2 {
        font-size: 20px;
    }

    .project-modal-content p {
        font-size: 14px;
    }
}

@media only screen and (max-width:576px) {
    .jumbotron h2 {
        display: none;
    }

    .jumbotron p {
        margin-top: 1em;
    }

    .jumbotron a {
        font-size: 3em;
    }

    .project-modal-content h1 {
        font-size: 42px;
    }

    .project-modal-content h2 {
        font-size: 18px;
    }

    .project-modal-content .carousel-inner {
        height: 300px;
    }

    .project-modal-content .carousel-inner .item, .project-modal-content .carousel-inner .item-active {
        height: 300px;
    }

    .project-modal-content .caption-below {
        padding: 1.5em;
    }
}

@media only screen and (max-width:480px) {
    .jumbotron {
        margin-bottom: 0;
    }

    .jumbotron h1 {
        font-size: 2.5em;
        margin-top: 0.5em;
    }

    .jumbotron p {
        display: none;
    }

    .jumbotron a {
        font-size: 2.5em;
    }

    .project-modal-content h1 {
        font-size: 34px;
    }

    .project-modal-content h2 {
        font-size: 16px;
    }

    .project-modal-content p {
        font-size: 12px;
    }

    .project-modal-content .carousel-inner {
        height: 180px;
    }

    .project-modal-content .carousel-inner .item, .project-modal-content .carousel-inner .item .active {
        height: 180px;
    }

    .project-modal-content .caption-below {
        padding: 1em;
    }
}