.welcome-text {
    width: 90%;
}

#blog-posts {
    margin-top: 25em;
}

.navigation ul {
    margin-left: 4%;
}

.navigation ul li {
    display: inline;
    margin-left: 1.5%;
    cursor: pointer;
}

.navigation ul li:hover {
    color: #4BB8F7;
}

.boxes {
    margin-top: -2em;
}

#centeralize {
    float: center;
}

.post {
    display: block;
}

.post-wrapper {
    padding: 20px 35px 20px 35px;
}

.post img {
    max-width: 100%;
    max-height: 16em;
}

.blur img {
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
  }

.post img:hover {
    filter: blur(1px);
    -webkit-filter: blur(1px);
}

p.post-date {
    text-align: left;
    font-size: 14px;
    color: #9DA3A8;
    margin-top: -40px;
}

h3 a {
    color: #2C2E30;
    text-decoration: none;
}

h3 a:hover {
    color: #1EAEDB;
}

h3.topic {
    font-size: 24px;
    margin-left: 0px;
    text-align: left;
    font-weight: 500;
    color: #2C2E30;
    margin-top: -16px;
}

p.explanations {
    font-size: 18px;
    text-align: left;
    color: #9e9e9e;
    margin-top: -72px;
}

.seperator {
    width: 18em;
    height: 1px;
    background-color: #dbe0e6dc;
    margin-top: 22px;
    margin-bottom: -50px;
}

p.details {
    margin-bottom: -10px;
    color: #828A91;
    font-size: 14px;
}

#footer {
    margin-top: 5em;
}

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

    .seperator {
        width: 15em;
    }

}

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

    .post {
        width: 24em;
        margin-top: 50px;
    }

    .seperator {
        margin-top: 50px;
    }

    .boxes {
        margin-left: 4%;
    }

}

@media only screen and (min-width: 1147px) and (max-width: 1190) {

    .post {
        width: 24em;
        margin-top: 50px;
    }

    .seperator {
        margin-top: 30px;
    }

    .boxes {
        margin-left: 1%;
    }

}

@media only screen and (min-width: 1191px) and (max-width: 1229px) {

    .post {
        width: 24em;
        margin-top: 50px;
    }

    .seperator {
        margin-top: 30px;
    }

    .boxes {
        margin-left: 2%;
    }

    #blog-posts .container {
        width: 100%;
    }

}


@media only screen and (min-width: 1230px) and (max-width: 1388px) {

    .boxes {
        margin-left: 10%;
    }

    #blog-posts .navigation {
        margin-left: 6%;
    }

    #blog-posts .container {
        width: 100%;
    }
}

@media only screen and (min-width: 1389px) and (max-width: 1425px) {

    .boxes {
        margin-left: 10%;
    }

    #blog-posts .navigation {
        margin-left: 6%;
    }

    #blog-posts .container {
        width: 100%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {

    .boxes {
        margin-left: 11%;
    }

    #blog-posts .navigation {
        margin-left: 7%;
    }

    #blog-posts .container {
        width: 100%;
    }
}

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

    .boxes {
        margin-left: 13%;
    }

    #blog-posts .navigation {
        margin-left: 8%;
    }

    #blog-posts .container {
        width: 75%;
    }
}