body {font-family: Verdana, Arial, Helvetica, sans-serif;color:#ffffff;background-color: #ffffff;}

* {box-sizing: border-box;}

.video {display: flex;justify-content: center;}

.content {max-width: 1280px;margin: auto;}

.navigation-link {font-weight: bold; font-size: 14px; color: #ffffff}

.page-link {font-weight: bold; font-size: 14px; color: #000000}

.article-tags {font-weight: bold; color: #000000}

.title {font-weight: bold; font-size: 80px; color: #ffffff;text-decoration: none}

.strapline {font-size: 16px; color: #ffffff}

.footer {background-color:#3c3c46;text-align:center;padding:10px;margin-top:7px;}

.header {background-color:#3c3c46;padding:15px;text-align:center;}

.picture {display: block;margin-left: auto;margin-right: auto;max-width: 100%;height: auto;margin-top: 7px}

.news {background-color: #3c3c46;float: left;width: 20%;padding: 15px;margin-top: 7px;text-align: left;}

.news-link {color: #ffffff;}

.news-summary {color: #ffffff;}

.news-date {color: #f57d05}

.main {float: left;width: 60%;padding: 0 20px;}

.article-headline {font-size: 22px;font-weight: bold;color: #000000;}

.hub-title {font-size: 22px;font-weight: bold;color: #000000;}

.cover-title {font-weight: bold;color: #000000;}

.cover-link {font-weight: bold; font-size: 14px; color: #000000}

.cover-description {text-align: justify;color: #000000;}

.copyright {font-size: 14px;}

.article-date {color: #000000;}

.hyperlink {font-weight: bold; color: #000000}

.hub-link {font-weight: bold; font-size: 14px; color: #000000}

.article-content {text-align: justify;color: #000000;}

.article-content-bold {text-align: justify;color: #000000; font-weight: bold;}

.article-source {color: #000000;}

.hub-content {text-align: justify;color: #000000;}

.page-number {text-align: right;color: #000000;}

.navigation {background-color: #3c3c46;float: left;width: 20%;padding: 15px;margin-top: 7px;text-align: right;}

.collapsible {background-color: #3c3c46; color: white; cursor: pointer; padding: 18px; border: none; text-align: left; outline: none; font-size: 15px;}

.active, .collapsible:hover {background-color: #3c3c46;}

.collapsible:after {content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px;}

.active:after {content: "\2212";}

.confirm {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #ffffff;}

@media only screen and (max-width: 800px) {.news, .main, .navigation {width: 100%;}}

.image-row {display: flex;flex-wrap: wrap;padding: 0 4px;}

.image-column {flex: 50%;max-width: 50%;padding: 0 4px;}

.image-column img {display: block;margin-left: auto;margin-right: auto;max-width: 100%;height: auto;border-width: 7px;border-color:white;border-style: solid;}

@media screen and (max-width: 800px) {.image-column {flex: 50%;max-width: 50%;}}

@media screen and (max-width: 600px) {.image-column {flex: 100%;max-width: 100%;}}

.hub-row {display: flex;flex-wrap: wrap;padding: 0 4px;}

.hub-column {flex: 50%;max-width: 50%;padding: 0 4px;}

@media screen and (max-width: 800px) {.hub-column {flex: 50%;max-width: 50%;}}

@media screen and (max-width: 600px) {.hub-column {flex: 100%;max-width: 100%;}}

.cover-row {display: flex;flex-wrap: wrap;padding: 0 4px;}

.cover-column {flex: 50%;max-width: 50%;padding: 0 4px;}

@media screen and (max-width: 800px) {.cover-column {flex: 50%;max-width: 50%;}}

@media screen and (max-width: 600px) {.cover-column {flex: 100%;max-width: 100%;}}