* {
    box-sizing: border-box;
}

h1 {color: #009CDE;}


.active, .nav-link:hover {
    background-color: #009CDE;
    color: #233857;
    font-weight: bolder;
}


.img-thumbnail {
    height: 282px;
}

.img-posts-list {
    height: 45.8px;
}

.img-post-detail {
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    border: 2px solid black;
}

.btn-posts-list {
    position: absolute;
    bottom: 10px;
}

.pagination {
    display: block;
    text-align: center;
    font-weight: bolder;
}
/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {            
    margin-bottom: 0;
}

/* Set height of the grid so  .sidenav can be 100% (adjust as needed) */
.row.content {height: 992px}


.relative {
    position: relative;
    top: 10px;
    border: 3px solid #0C4DA2;
}



/* Set gray background color and 100% height */
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
}

/* Set black background color, white text and some padding */
footer {
    background-color: #009CDE;
    color: #FFF200;
    padding: 15px;
}


/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (min-width: 600px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height:auto;} 
}

/* On extra small screens, set logo width to 50% and height to 'auto' */
@media screen and (max-width: 600px) {
  nav a {
        width: 50%;
      }
}