* {box-sizing: border-box;}
body {background-color: #408595;padding: 20px;font-family: Arial;}
.pagination {background-color: #7d8f05;padding: 8px;} .pagination span {font-size: 14px;color:  black;float: right;padding: 3px 15px;text-decoration: none;transition: background-color .3s;}.pagination span.active {background-color: #2b77e7;color:  #d7f41e;}.pagination span:hover:not(.active) {background-color: #ddd;}
.buttonload {background-color: khaki;border: none;color: blue;padding: 12px 24px;font-size: 46px;position: fixed;top: 50%;left: 50%;width: 500px;height: 300px;}article > button > i.fa {margin: 8px;color:maroon;}
div#paginationDiv {display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 5px;}.pagination-item {margin: 0 20px;padding: 8px 15px;background-color: #c8e399;font-size: 16px;font-weight: 600;}.pagination-item:hover {background-color: black;color: white;cursor: pointer;}.pagination-item.active {background-color: #29B6F6;}
.main {max-width: 1200px;margin: auto;} 
h2 {font-size: 40px;}
h4 {margin: auto;}
.post-body h4 {font-size: 16px;text-decoration: none;}
h1, h2, h4 {text-transform: capitalize;}
article .main .row .column  h4{font-size: 14px;text-decoration: none;text-align: center;padding: 8px;background-color: black;height: 25%;color: gold;display:flex;align-items: center;justify-content: center;}
.row {margin: 0;}
.row,.row > .column {padding: 20px;}
.column {float: left;width:32.5%;display: none;height: 390px; }
.row:after {content: "";display: table;clear: both;}
.content {background-color: white;height: 100%;}
.entry-item {height:75%;}
.entry-kind {position: relative;top: 56px;left: -22px;color: #e8e83c;background-color: #0f16ae;padding: 7px;font-size: 14px;}
.show {display: block;}
.btn {border: none;outline: none;padding: 12px 16px;color: #e8e83c;background-color: #0f16ae;cursor: pointer;margin: 2px 3px;}
.btn:hover {background-color: #210404;} 
.btn.active {font-weight: 600;background-color: #9ae53e;color: #791d1d;}
@media screen and (max-width: 800px) {.column {-ms-flex: 50%;flex: 50%;max-width: 50%;}}
@media screen and (max-width: 600px) {.column {-ms-flex: 100%;flex: 100%;max-width: 100%;}}
@media screen and (max-width: 600px) {.topnav a:not(:first-child) {display: none;}.topnav a.icon {float: right;display: block;}}
@media screen and (max-width: 600px) {.topnav.responsive {position: relative;}.topnav.responsive .icon {position: absolute;right: 0;top: 0;}.topnav.responsive a {float: none;display: block;text-align: left;}}