.close-modal {
    display: none;
}

@media only screen and (min-width: 768px) {

    .modal-wrapper {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 111; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
    }

    .modal-wrapper.show {
        display: block;
    }

    .modal-background {
      position: fixed; /* Stay in place */
      z-index: 111; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0, 0, 0); /* Fallback color */
      background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
    }

    .modal.modal-post {
        display: none;
        position: relative;
        background-color: #fefefe;
        margin: 10vh auto; /* 10vh from the top and centered */
        padding: 25px;
        border: 1px solid #888;
        width: 70%; /* Could be more or less, depending on screen size */
        max-width: 745px;
        transition: all 2s ease;
        opacity: 0;
    }

    .modal.modal-post.show {
        display: block;
        opacity: 1;
        position: absolute;
    }

    .modal .close-modal {
        position: absolute;
        top: 20px;
        right: 15px;
        cursor: pointer;
    }

    .modal.show .close-modal {
        display: block;
    }

    .modal h1 {
        font-size: 56px;
        margin: 35px 0;
    }

    .modal .entry-content p {
        font-size: 16px;
    }

    .modal .animated-loading {
        display: block;
        width: 50px;
        height: 50px;
        margin: auto;
        padding: 25vh 0;
        background-image: url('../images/loading.gif');
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center center;
    }
}