.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;
}

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: 26px;
    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;
}

#blog-post-details {
    margin-bottom: 5%;
}

/* Until here the css is the same as the blog-style.css */

.topic h1 {
    font-size: 40px;
    font-family: "Abel", sans-serif;
    color: rgb(44, 46, 48);
    line-height: 0.4;
    margin-top: 30%;
    text-align: center;
  }
  
  .topic p {
      text-align: center;
      margin-left: 2%;
  }

  .topic p span {
      margin-right: 5%;
      font-size: 14px;
      font-family: "Abel", sans-serif;
      color: rgb(140, 146, 152);
      line-height: 1.091;
  }
  
  .media {
      margin-top: 10%;
      text-align: center;
  }

  .media img {
      width: 100%;
  }

  .statistics p {
      text-align: center;
      margin-left: 2%;
      margin-top: 3%;
      margin-bottom: 3%;
  }

  .statistics p span {
      margin-right: 5%;
      font-size: 14px;
      font-family: 'Abel', sans-serif;
      color: rgb(140, 146, 152);
      line-height: 1.091;
  }

  .texts {
      margin-left: 15%;
      margin-right: 15%;
      font-family: 'Abel', sans-serif;
  }

  .texts h5 {
      margin-bottom: 5%;
      color: #111111;
      font-size: 24px;
  }

  p.regular {
    margin-top: 5%;
    margin-bottom: 5%;
    color: #717a82;
    font-size: 16px;
  }

  b.bold {
      margin-top: 3%;
      margin-bottom: 3%;
      color: #090909;
      font-size: 16px;
  }

  .comment-sec {
      background-color: #f5f7fa;
      font-family: 'Abel', sans-serif;
      margin-bottom: -5%;
      margin-top: 5%;
    }

  .comment {
      padding-top: 5%;
      padding-bottom: 5%;
      margin-left: 15%;
      margin-right: 15%;
  }

  p.reg {
    color: #717a82;
    margin-top: -2%;
  }

  p.regu {
    color: #717a82;
    margin-bottom: 1%;
  }

  textarea {
      width: 100%;
      height: 14em;
      outline: none;
  }

  input[type=text], input[type=email] {
      width: 100%;
      outline: none;
  }

  button {
      margin-top: 3%;
      color: #ffffff;
      background-color: #111111;
  }

  button:hover {
      background-color: #4BB8F7;
      color: #ffffff;
      outline: none;
  }

  button:enabled {
      color: #ffffff;
  }

  .grecaptcha-badge {
      z-index: 99999;
  }
  
/* --------------------------------------------------------------- */
/*                          media queries */
/* --------------------------------------------------------------- */

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

    .topic h1 {
        margin-top: 50%;
    }

    .texts {
        margin-top: 25%;
    }

    .texts h5 {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }

    .comment-sec {
        margin-bottom: -16%;
    }

    .comment {
        padding-top: 20%;
    }

    .comment h5 {
        margin-left: 0px;
    }

    .seperator {
        width: 15em;
    }

}

@media only screen and (min-width: 401px) and (max-width: 767px) {

    .topic h1 {
        margin-top: 42%;
    }

    .texts {
        margin-top: 18%;
    }

    .texts h5 {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }

    .comment-sec {
        margin-bottom: -16%;
    }

    .comment {
        padding-top: 16%;
    }

    .comment h5 {
        margin-left: 0px;
    }

    .seperator {
        width: 15em;
    }

    #footer {
        margin-top: 6em;
    }

}

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

    .topic h1 {
        margin-top: 45%;
    }

    .texts {
        margin-top: 15%;
    }

    .texts h5 {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }

    .comment-sec {
        margin-bottom: -16%;
    }

    .comment {
        padding-top: 12%;
    }

    .comment h5 {
        margin-left: 0px;
    }

    .seperator {
        width: 15em;
    }

    #footer {
        margin-top: 7em;
    }

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

    .seperator {
        margin-top: 50px;
    }

    .boxes {
        margin-left: 4%;
    }

}


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

    .topic h1 {
        margin-top: 45%;
    }

    .texts {
        margin-top: 15%;
    }

    .texts h5 {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }

    .comment-sec {
        margin-bottom: -16%;
    }

    .comment {
        padding-top: 12%;
    }

    .comment h5 {
        margin-left: 0px;
    }

    .seperator {
        width: 15em;
    }

    #footer {
        margin-top: 10em;
    }

    .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%;
    }
}