:root {
  --primary-colour: #8A2A2A;
  --primary-colour-dark: #641B1B;
  --primary-colour-light: #A56767;
  --secondary-colour: #274075;
  --link-colour: #003FC5;
  --menu-hover: #E2E2E2;
}

* {box-sizing: border-box}

body {background: #FFF; color: #555; font-family: roboto, sans-serif; font-size: 18px; margin: 0; padding: 0; width: 100%}

/* CONTENT FORMATTING STYLES */
a {color: var(--link-colour); text-decoration: none; transition: 0.3s}
blockquote {border-left: 10px solid var(--primary-colour); padding-left: 20px}
h1, h2, h3, h4 {font-family: roboto-slab, serif; font-weight: normal}
h1 {color: var(--primary-colour); font-size: 42px; margin: 30px 0 10px}
h2 {color: var(--primary-colour); font-size: 34px; margin: 40px 0 10px}
h2.center-rule {display: flex; align-items: center; color: #CCC; font-size: 44px; font-weight: 300; justify-content: center; margin: 30px auto; text-align: center; text-transform: uppercase; width: 60%}
h2.center-rule:before, h2.center-rule:after {border-top: 1px solid #BBB; content: ''; flex: 1 0 20px; margin: 0 20px 0 0}
h2.center-rule:after {margin: 0 0 0 20px}
h3 {color: var(--primary-colour); font-size: 24px; margin-bottom: 0}
hr {color: #EEE}
p {line-height: 150%}
strong {font-weight: bold}

#block-h360-sikyon-content article li a:hover, #block-h360-sikyon-content article p a:hover {border-bottom: 2px solid var(--link-colour); transition: 0.1s}
#block-h360-sikyon-content article li {line-height: 150%; margin: 10px 0}
#block-h360-sikyon-content article ul {list-style-type: square}

svg.ext, svg.mailto {padding: 0.2em 0.2em 0 0.1em; height: 23px; width: 23px}

span.intro {font-size: 22px}
span.highlight {color: var(--primary-colour); font-weight: bold}
span.green {color: #199409; font-weight: bold}
span.green-light {color: #65DB56}

.no-wrap {white-space: nowrap}


/* GENERAL LAYOUT STYLES */
.centered {margin: auto; width: 100%; max-width: 1300px}

[class^="results-"] {border-style: solid; border-width: 2px; margin-bottom: 20px; padding: 5px 10px}
.results-false {background: #FCF3F3; border-color: #BB8686; color: #883F3F}
.results-true {background: #F3FCF4; border-color: #86BB8D; color: #32793C}

/* Add to Any sharing */
.addtoany_list > a {padding: 0}
.addtoany_share img {height: 15px !important; width: auto !important}

/* Admin tabs */
#block-h360-sikyon-local-tasks {background: #F4F4F4; border: 5px solid #F4F4F4; width: 100%}
#block-h360-sikyon-local-tasks > ul {list-style-type: none; margin: 0; padding: 0}
#block-h360-sikyon-local-tasks > ul li {display: inline-block}
#block-h360-sikyon-local-tasks > ul li a {display: block; color: #666; padding: 10px 20px}
#block-h360-sikyon-local-tasks > ul li a:hover {background: #E6E6E6}
#block-h360-sikyon-local-tasks > ul li a.is-active {background: #BBB; color: #FFF}

/* Contact form */
.contact-form {float: left; background: #F4F4F4; padding: 20px; width: 100%}
.contact-form label:not([class^="option"]) {float: left; background: #DDD; margin-right: 10px; padding: 6px 10px; width: 180px}
.contact-form #edit-actions .button {background: var(--primary-colour); border: 0; border-radius: 30px; color: #FFF; cursor: pointer; font-size: 18px; margin-top: 20px; padding: 10px 30px}
.contact-form .form-item {float: left; margin: 5px 0; width: 100%}
.contact-form .form-email, .contact-form .form-text, .contact-form .text-full {font-size: 18px; padding: 8px 10px 7px}
.contact-form .captcha, .contact-form #edit-actions {float: left; width: 100%}

/* Cookies pop-up */
.eu-cookie-compliance-banner {padding: 10px 0}
.eu-cookie-compliance-banner .popup-content {display: flex; align-items: center; justify-content: space-between}
.eu-cookie-compliance-banner #popup-buttons {float: none; margin: 0}
.eu-cookie-compliance-banner #popup-buttons button {border: 0; border-radius: 0; box-shadow: 0 0; font-size: 16px; font-weight: normal; margin: 5px 0; padding: 10px; text-shadow: 0 0}
.eu-cookie-compliance-banner #popup-buttons button.agree-button {background: #FFF; border: 2px solid #FFF; color: #555}
.eu-cookie-compliance-banner #popup-buttons button.decline-button {background: none; border: 2px solid #FFF; color: #FFF; font-family: inherit}
.eu-cookie-compliance-banner #popup-buttons button:hover {background: var(--primary-colour); color: #FFF}
.eu-cookie-compliance-banner #popup-text {float: none; margin: 0}
.eu-cookie-compliance-banner h2 {font-family: adelle-sans, arial !important}

/* Documents */
#block-documents-feed {background: #F4F4F4; margin-top: 50px; padding: 20px}
#block-documents-feed h2, #block-documents-feed p {margin: 0}
.documents .document {display: flex; border-top: 2px solid #DDD; column-gap: 20px; font-size: 16px; margin-top: 10px; padding-top: 10px}
.documents .document > div {display: flex; align-items: center}

/* Draggable views */
.reorder .view-content table {border-top: 1px solid #DDD; margin-top: 20px; width: 100%}
.reorder .view-content img {display: block}
.reorder .view-content td {padding: 0 10px}
.reorder .view-content th {background: #F4F4F4; padding: 5px; text-align: left}
.reorder .view-content tr {border-bottom: 1px solid #DDD; padding: 10px 0}
.reorder .view-content #edit-actions {margin-top: 20px}
.reorder .view-content #edit-actions input {background: none; border: 2px solid var(--primary-colour); color: var(--primary-colour); cursor: pointer; font-size: 18px; padding: 10px; transition: 0.3s}
.reorder .view-content #edit-actions input:hover {background: var(--primary-colour); color: #FFF}
.reorder .view-content .draggable > td:first-child {display: flex; align-items: center; }
.reorder .view-content .handle {margin: auto; padding: 1em; height: auto; width: auto}
.reorder .view-content .tabledrag-changed-warning {color: var(--primary-colour); font-size: 14px}
.reorder .view-content .tabledrag-handle {padding: 0 10px}
.reorder .view-content .tabledrag-toggle-weight-wrapper {display: none}

/* Homepage */
.frontpage #content > div > article {display: none}

/* Inline blocks */
.inline-blocks {display: flex; align-items: stretch; border-color: #DDD; border-style: solid; border-width: 2px 0}
.inline-blocks .inline-block {flex: 1 1 0px; padding: 15px}
.inline-blocks .inline-block h2 {margin: 10px 0 0}

/* Maintenance page */
.maintenance-page {padding: 20px; text-align: center}
.maintenance-page header {border-bottom: 2px solid #F4F4F4}
.maintenance-page header img {margin: auto; height: auto; width: 500px}

/* Messages */
div[data-drupal-messages] {background: #E2FDE5; border: 2px solid #9AC69E; border-radius: 10px; color: #587C5B; margin-bottom: 20px; padding: 10px 20px}

/* Social icons */
#block-social-icons {padding-top: 7px; min-width: 200px}
.social-icons {display: flex; gap: 5px; justify-content: space-between}
.social-icons > a {flex-basis: 20%}

/* Theme and input buttons */
input#edit-submit {background: none; cursor: pointer; font-size: 1.1rem; transition: 0.3s}

.theme-button {display: flex; margin-top: auto}
.theme-button a, input#edit-submit {display: flex; float: left; border: 2px solid var(--primary-colour); color: var(--primary-colour); justify-content: center; padding: 10px 20px !important; user-select: none; width: 100%}
.theme-button a:active, .theme-button a:hover, input#edit-submit:hover {background: var(--primary-colour); color: #FFF}
.theme-button.full-width, .theme-button.full-width a {width: 100%}
.theme-button.in-text {display: flex}
.theme-button.margins {display: flex; margin: 20px 0}
.theme-button.white a {border-color: #FFF; color: #FFF}
.theme-button.white a:hover {background: #FFF; color: var(--primary-colour)}
.theme-button.yellow a {border-color: #FFCC33; color: #FFCC33}
.theme-button.yellow a:hover {background: #FFCC33; color: #FFF}

footer .theme-button a {margin: auto; width: 100%; max-width: 800px}

/* Theme table */
.theme-table table {border-collapse: separate; border-spacing: 5px}
.theme-table table td {padding: 10px}

/* User login form */
#user-login-form .form-item, #user-pass .form-item {display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 25px}
#user-login-form .form-item .description {display: none}
#user-login-form .form-item input, #user-pass .form-item input {font-size: 22px; padding: 5px 10px; width: 100%}
#user-login-form .form-item label, #user-pass .form-item label {background: #F4F4F4; font-weight: bold; padding: 10px; text-align: right}

/* Drupal forms and Views exposed forms  */
.views-exposed-form {display: flex; background: #F4F4F4; flex-direction: column; gap: 5px; margin-bottom: 20px; padding: 20px}
.views-exposed-form fieldset {margin: 0}
.views-exposed-form h3 {margin: 0}
.views-exposed-form .form-checkboxes.form--inline .form-item {margin: 5px 20px 5px 0}
.views-exposed-form .form-item {display: flex}
.views-exposed-form .form-item#edit-nbc--wrapper {align-items: center}
.views-exposed-form .form-text {border: 2px solid #CCC; font-size: 20px; padding: 5px 10px}
.views-exposed-form .form-text::placeholder {color: #888}
.views-exposed-form > .form-item > label, .views-exposed-form fieldset legend {display: flex; background: #DDD; font-size: 1.2rem; font-weight: bold; padding: 5px 10px; width: 100%}
.views-exposed-form > .form-item > label.option {background: none; font-weight: normal}
.views-exposed-form [id^="edit-actions"] {margin-top: 10px}
.views-exposed-form [id^="edit-actions"] input {background: none; border: 2px solid var(--primary-colour); color: var(--primary-colour); cursor: pointer; font-size: 18px; padding: 10px; transition: 0.3s}
.views-exposed-form [id^="edit-actions"] input:hover {background: var(--primary-colour); color: #FFF}
#views-exposed-form-tag-feed legend {width: 30%}
#views-exposed-form-tag-feed .fieldset-wrapper {display: flex; align-items: center}

/* Views feed pager */
nav.pager {display: flex; border-top: 1px dashed #DDD; justify-content: center; margin-top: 20px; padding-top: 5px; width: 100%}
nav.pager li {display: block; float: left}
nav.pager li[role="presentation"] {cursor: not-allowed}
nav.pager li a, nav.pager li[role="presentation"] {display: block; border: 1px solid #E4E4E4; margin-left: -1px !important; padding: 10px 15px}
nav.pager li.is-active a {background: var(--primary-colour); border-color: var(--primary-colour); color: #FFF}
nav.pager li:hover:not(.is-active) a {background: #F4F4F4}
nav.pager ul {list-style-type: none; padding: 0}

/* Views management buttons */
.views-element-container .admin-buttons {display: flex; flex-wrap: wrap; background: #F4F4F4; justify-content: flex-start; margin-bottom: 30px; padding: 10px 20px; width: 100%}
.views-element-container .admin-buttons .admin-button {display: flex; background: #DDD; border-radius: 30px; color: #666; margin-right: 20px; padding: 10px 30px; transition: 0.3s}
.views-element-container .admin-buttons .admin-button:hover {background: var(--primary-colour); color: #FFF}

/* Views item admin link */
.view-content .admin-links {position: absolute; right: 5px; top: 5px; display: flex; border: 1px solid #DDD; font-size: 14px; z-index: 1}
.view-content .admin-links a {background: #FFF; padding: 5px 10px}
.view-content .admin-links a:hover {background: #AAA; color: #FFF !important}
.view-content .edit-icon img {display: block; height: auto; width: 18px}


/* HEADER STYLES */
#header {position: relative}
#header .centered {display: flex; justify-content: space-between}

/* Banner styles */
#block-issues-homepage .banner {background: url(/sites/default/files/banner-background.jpg); border-color: var(--primary-colour-dark); border-style: solid; border-width: 5px 0}
#block-issues-homepage h2, #block-issues-homepage .banner > .view-content, #block-issues-homepage .issue-header {border: 0}
#block-issues-homepage h2 {margin-top: 20px}
#block-issues-homepage .banner .flexslider {background: var(--primary-colour-dark)}

.flex-control-nav {bottom: 10px; right: 20px; width: auto; z-index: 10}
.flex-control-paging li a {background: #FFF; border: 0; border-radius: 0; height: 20px; width: 20px}
.flex-control-paging li a:hover {background: #f3d98a}
.flex-control-paging li a.flex-active {background: #FFCC33}
.flex-direction-nav a {overflow: inherit !important}
.flex-direction-nav a::before {color: #FFF !important; text-shadow: 0 0 10px rgba(0, 0, 0, 1) !important}
.flexslider {border: 0; border-radius: 0; margin: 0}

#homepage-article-banner {background: var(--primary-colour-dark)}
#homepage-article-banner .article {display: flex; justify-content: space-between; width: 100%}
#homepage-article-banner .feed-author {color: #FFCC33; margin-top: 10px}
#homepage-article-banner .feed-details {color: #FFF; padding-left: 20px}
#homepage-article-banner .feed-title {color: #FFF}
#homepage-article-banner .slides > li {display: flex !important}
#homepage-article-banner .view-content {display: flex; align-items: stretch; width: 100%}

.banner-management .centered {justify-content: flex-start !important; padding: 0 20px}
.banner-management .admin-buttons {margin: 0}

/* Header logo */
#block-h360-sikyon-branding {height: 100%}
#block-h360-sikyon-branding a {display: flex; height: 100%}
#block-h360-sikyon-branding img {max-width: 400px}


/* CONTENT STYLES */
#main-container #content > div {display: flex; flex-direction: column; min-height: 500px}

/* Articles & issues */
.antiquity-open form, .antiquity-open header, .antiquity-open .view-content > h3 {display: none}

.articles .view-content {display: flex; flex-wrap: wrap; gap: 40px 3%}
.articles .view-content > h3 {flex-basis: 100%; font-size: 2.4rem}
.articles .feed-author {font-size: 1rem}
.articles .feed-body, .issue-header .feed-body {position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; height: 100%}
.articles .feed-body.hidden, .issue-header .feed-body.hidden {animation: fadeOut 0.5s forwards}
.articles .feed-body.show, .issue-header .feed-body.show {animation: fadeIn 0.5s forwards; pointer-events: all}
.articles .feed-body a, .issue-header .feed-body a {color: #FFCC33}
.articles .feed-body p, .issue-header .feed-body p {color: #FFF; font-size: 0.9rem; margin: 0; text-align: left}
.articles .feed-body [id^="close-abstract-"], .issue-header .feed-body [id^="close-abstract-"] {position: absolute; bottom: 10px; right: 10px; background: url(/sites/default/files/close.svg) no-repeat; cursor: pointer; height: 35px; width: 35px}
.articles .feed-body-content, .issue-header .feed-body-content {overflow-y: auto; padding: 15px 15px 40px; height: 100%}
.articles .feed-buttons {display: flex; gap: 10px; margin-top: auto}
.articles .feed-buttons a {cursor: pointer; font-size: 1rem}
.articles.row-3 .feed-buttons a {font-size: 0.85rem}
.articles .feed-details {flex-grow: 1; margin-top: 8px}
.articles .feed-issue-details {display: flex; align-items: center; border-top: 1px solid #EEE; font-size: 0.8rem; gap: 6px; padding: 5px 0}
.articles .feed-item {display: flex; flex-direction: column}
.articles .feed-title {font-size: 1.2rem}
.articles .feed-title p {margin: 0}

.issue-header {display: flex; border-color: #DDD; border-style: solid; border-width: 5px 0; flex-direction: column; gap: 30px 2%; margin: 20px 0; padding: 20px}
.issue-header > .view-content {display: flex; gap: 20px}
.issue-header .articles, .issue-header .articles .view-content {gap: 40px 2%; height: 100%}
.issue-header .cover {position: relative}
.issue-header .cover img {display: block; margin: auto; pointer-events: none}

#block-archive-link {display: flex; flex-direction: column; background: #F4F4F4; align-items: center; margin-top: 40px; padding: 30px 20px; text-align: center}
#block-archive-link h2 {margin-top: 0}
#block-archive-link .theme-button a {margin: auto}

#block-articles-homepage-more > div > div {display: flex; align-items: stretch; gap: 30px}
#block-articles-homepage-more .feed-container {display: flex; flex-direction: column; height: 100%}
#block-articles-homepage-more .feed-container footer {margin-top: auto}
#block-articles-homepage-more .theme-button a {width: 100%}
#block-articles-homepage-more .feed-footer {font-weight: bold; margin-top: auto; padding: 10px 0}
#block-articles-homepage-more .feed-title {font-size: 1.1rem}
#block-articles-homepage-more .view-content {gap: 3%; height: 100%}
#block-articles-homepage-more-title h2 {margin: 0 0 20px}

#block-project-gallery-recent footer {margin-top: 30px}

/* Banners */
.banner-abstract p {margin: 0}
.banner-authors {color: #ffda6c}
.banner-details {display: flex; color: #FFF; flex-direction: column; font-size: 1rem; gap: 8px; padding: 20px}
.banner-details h3 {color: #FFF; margin-top: 0}
.banner-details .theme-button {margin-top: 5px}
.flexslider .slides {background: var(--primary-colour)}
.frontpage .flexslider .slides {background: var(--primary-colour-dark)}
.flexslider .slides li {display: flex !important}

/* Book page */
#book-buttons {display: flex; flex-wrap: wrap}
#book-buttons .theme-button {flex: 1}
#book-buttons .theme-button.nbc {flex: 100%}
#book-citation {border-top: 1px solid #CCC; font-size: 1rem; margin-top: 15px; padding-top: 15px}
#book-citation > div div:first-child {color: var(--primary-colour)}
#book-citation p {margin: 0}
#book-date-received {display: flex; gap: 5px}
#book-info-wrapper {display: flex; border-color: var(--primary-colour); border-style: solid; border-width: 3px 0; gap: 30px; margin: 30px 0; padding: 30px 0}
#book-info-wrapper h1 {font-family: roboto, sans-serif; font-size: 1.6rem; margin: 5px 0 10px}
.books #edit-reviewed {display: flex; align-items: center; gap: 10px; height: 100%}

.page-node-type-book #block-h360-sikyon-page-title {display: none}
.page-node-type-book #book-buttons {gap: 20px; margin-top: 20px}

/* Feeds */
.feed-container.dividers .feed-item:not(:last-child) {border-bottom: 1px dashed #CCC; margin-bottom: 30px; padding-bottom: 30px}
.feed-container.row, .feed-container.row .view-content {display: flex; gap: 30px}
.feed-container .view-content {display: flex; flex-wrap: wrap}
.feed-item {position: relative; display: flex; flex-direction: column}
.feed-item h3 {font-size: 24px; margin: 0}
.feed-item h3 a {color: var(--primary-colour)}
.feed-item .feed-date {color: #888}
.feed-item .feed-details {display: flex; flex-direction: column; flex-grow: 1; font-size: 1rem; gap: 5px}
.feed-item .feed-details p {margin: 0}
.feed-item .feed-image img {display: block; height: auto; width: 100%}
.feed-item .feed-subtitle {color: #888; font-size: 1rem}
.feed-item .feed-subtitle article {display: inline-block}
.feed-item .feed-title {margin: 0}
.feed-item .icon-field {background-position: 5px 8px; background-repeat: no-repeat; background-size: 1.5em; border-top: 1px solid #FFF; font-size: 16px; margin-top: 8px; padding: 10px 0 0 40px}

.board .feed-item {gap: 4px}

.book-export > .view-content {background: #F4F4F4; padding: 20px}
.book-export #export-button {display: flex; background: url("https://antiquity.ac.uk/sites/all/images/icon-copy.svg") 8px 10px no-repeat  var(--primary-colour); background-size: 25px 25px; color: #FFF; cursor: pointer; padding: 10px 20px 10px 40px; transition: 0.3s}
.book-export #export-button.copied {background: url("https://antiquity.ac.uk/sites/all/images/icon-tick-circle.svg") 8px 10px no-repeat #199900; background-size: 25px 25px}
.book-export #export-button:hover {background-color: var(--primary-colour-dark)}

.books footer {margin-top: 30px}
.books .book-authors, .books .book-date {font-size: 1rem}
.books .book-reviewer {color: var(--primary-colour); font-size: 0.9rem}
.books .book-title {font-family: roboto, san-serif; font-size: 1.2rem; margin: 0}
.books .feed-buttons {display: flex; gap: 10px; margin-top: auto}
.books .feed-details {flex-basis: 75%}
.books .feed-image {flex-basis: 25%}
.books .feed-item {border: 2px solid #DDD; flex-direction: row; padding: 10px}
.books .theme-button {margin-top: 5px}
.books .theme-button a {font-size: 0.9rem}

.cards .feed-date, .cards .feed-subtitle, .cards h3 {color: #FFF}
.cards .feed-details {padding: 20px}
.cards .feed-details .theme-button a {border-color: #FFF; color: #FFF}
.cards .feed-details .theme-button a:hover {background: #FFF; color: var(--primary-colour)}
.cards .feed-image {margin: 0; width: 100%; max-width: 100%}
.cards.events.next .feed-image {padding: 20px 20px 0}
.cards .feed-item {background: var(--primary-colour); color: #FFF; flex-direction: column}
.cards .feed-title {color: #FFF; margin-top: 0}

.collections .feed-details {gap: 12px; padding-top: 0}

.issues .issue {display: flex; align-items: center}
.issues .issue > a:hover {color: var(--primary-colour); text-decoration: underline}
.issues .view-content {gap: 30px 20px}
.issues .volume {display: flex; flex-direction: column; flex-grow: 1; font-size: 0.9rem; gap: 5px}
.issues .edit-icon {margin-left: auto}
.issues .edit-icon img {width: 16px}
.issues .issue-cover {flex-grow: 1}
.issues .issue-cover a {display: flex; border: 1px solid #DDD; color: var(--primary-colour); flex-direction: column; flex-grow: 1; font-size: 1rem; text-align: center; padding: 10px}
.issues .issue-cover a:hover {background: #F4F4F4}
.issues .issue-cover img {display: initial; height: auto; width: 100%}
.issues h3 {background: #F4F4F4; font-size: 1.2rem; padding: 5px 10px}
.nav-tabs {display: flex; border-bottom: 2px solid var(--primary-colour); gap: 10px; margin-bottom: 20px; width: 100%}
.nav-tabs .nav-tab {display: flex; border-color: var(--primary-colour); border-style: solid; border-width: 1px 1px 0 1px; border-radius: 10px 10px 0 0; color: var(--primary-colour); padding: 10px; text-align: center}
.nav-tabs.node4 .nav-tab:nth-child(1), .nav-tabs.node841 .nav-tab:nth-child(2) {background: var(--primary-colour); color: #FFF}

.list .feed-details {width: 75%}
.list .feed-image {margin-top: 10px; width: 25%; max-width: 170px}
.list .feed-item {flex-direction: row; gap: 20px}

#block-news-recent-right {background: #F4F4F4; padding: 10px}
#block-news-recent-right .admin-buttons {background: #EEE}
.news .news-category {border-bottom: 2px solid #DDD; color: var(--primary-colour); font-size: 0.9rem; padding: 5px 10px}
.news .theme-button {margin-top: 10px}
.news .view-content {margin-bottom: 20px}
#news-date {border-color: #DDD; border-style: solid; border-width: 2px 0; padding: 10px 0}
#right .news {font-size: 1rem}
#right .news header {display: none}
#right .news h3 {font-size: 1.2rem}
#right .news .feed-subtitle {font-size: 1.1rem}

.prizes h2 {margin: 0}
.prizes .view-content > h3 {background: #F4F4F4; font-size: 1.4rem !important; margin-bottom: -20px; padding: 10px}

.projgall footer {font-size: 0.85em; margin-top: 30px}

.books footer {margin-top: 30px}

.tag h3 {font-size: 1.2rem}
.tag .document {border-left: 5px solid var(--primary-colour-light); padding-left: 6px; font-size: 0.9rem; margin-bottom: 8px}
.tag .document a {color: #FFCC33}
.tag .document a:hover {text-decoration: underline}
.tag .document p {margin: 0}
.tag .document-details {font-size: 0.8rem}
.tag .feed-details {padding: 10px 15px}
.tag .feed-image {display: flex; align-items: center; background: #FFF; border: 3px solid var(--primary-colour); justify-content: center; height: 180px}
.tag .feed-image img {max-height: 150px; width: auto; max-width: 100%}
.tag .feed-item {width: 31.3333%}
.tag > .view-content {gap: 30px 3%}

/* Images */
div[class^="align-"] figcaption, figure figcaption {background: #EEE; color: #777; font-size: 16px; margin-top: 3px; padding: 5px 8px}
div[class^="align-"] img, figure img {display: block; height: auto; width: 100%}
div[class^="align-"], figure > div {position: relative}
div[class^="align-"] > div:nth-child(2), figure > div > div:nth-child(2) {position: absolute; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.6); font-size: 12px; padding: 2px 5px}

/* Teasers */
#block-teasers-fullwidth .teaser {position: relative; left: 50%; right: 50%; margin: 0 -50vw 0; overflow: hidden; padding: 30px 0; width: 100vw}
#block-teasers-fullwidth .teaser-details {background: var(--primary-colour-light); color: #FFF; margin: auto; width: 100%}
#block-teasers-fullwidth .teaser-details h2 {color: #FFF; margin: 0 0 20px}
#block-teasers-fullwidth .teaser-details li {margin: 10px 0}
#block-teasers-fullwidth .teaser-image img {width: 100%}
#block-teasers-fullwidth .theme-button a {border-color: #FFF; color: #FFF; margin-top: 10px}
#block-teasers-fullwidth .theme-button a:hover {background: #FFF; color: var(--primary-colour-light)}

#block-teasers-standard {margin: 30px 0}
.node-3 #block-teasers-standard header {display: none}

/* RIGHT REGION */
#block-sample-issue {position: sticky; top: 0; background: var(--primary-colour); padding: 20px}
#block-sample-issue h2 {color: #FFF; margin: 0 0 10px}
#block-sample-issue h3 {color: #FFF; margin: 0}
#block-sample-issue img {display: block; border: 2px solid var(--primary-colour-light);  padding: 2px}

.node-683 #right, .node-684 #right, .page-node-type-issue #right, .path-news #right, .path-latest #right {display: none}
.node-683 #content.right, .node-684 #content.right, .page-node-type-issue #content.right, .path-news #content.right, .path-latest #content.right {padding: 0 !important; width: 100%}

nav[id^="block-secondary-menu-"] {background: #F4F4F4; padding: 20px}
nav[id^="block-secondary-menu-"] h2 {margin-bottom: 20px}
nav[id^="block-secondary-menu-"] > ul, [id^="block-secondary-menu-"] > ul ul {list-style-type: none; margin: 0; padding: 0}
nav[id^="block-secondary-menu-"] > ul a {display: block; font-size: 20px; padding: 10px}
nav[id^="block-secondary-menu-"] > ul a:hover {background: #E4E4E4}
nav[id^="block-secondary-menu-"] > ul a.is-active {background: var(--primary-colour); color: #FFF}
nav[id^="block-secondary-menu-"] > ul ul a {font-size: 16px; padding-left: 30px}


/* FOOTER STYLES */
#footer-content {display: flex; background: url(/sites/default/themes/h360_sikyon/images/antiquity-logo-graphic-grey.svg) no-repeat #F4F4F4; background-position: left center; background-size: 150% 150%; margin-top: 50px; padding: 40px 15px}
#footer-content .centered > div {display: flex; font-size: 16px; padding: 0 15px}
#footer-content nav {margin-right: 20px}
#footer-content nav > ul a {display: block; color: #888; padding: 5px 15px}
#footer-content nav > ul a:hover {background: #E6E6E6}
#footer-content nav > ul {list-style-type: none; margin: 0; padding: 0}

/* Post-footer */
#post-footer-content > .centered {color: #AAA; padding: 8px 15px}
#post-footer-content > .centered > div:not([class]) {display: flex; justify-content: space-between}
#block-copyright-footer {font-size: 16px}
#block-h360-details > div:not([class]) {display: flex; align-items: center; font-size: 16px; text-transform: uppercase}
#block-h360-details a {line-height: 100%}
#block-h360-details img {display: block; margin: -2px 0 0 6px; height: 20px; width: auto}


/* SCREEN-SIZE-SPECIFIC STYLES */
/* =========================== */

/* NARROW */
@media only screen and (max-width: 599px) {
	#main-container {padding: 20px}

	#block-cc-search, #block-search-form {display: none}

	/* Articles and issues */
	#block-articles-homepage-more, #block-articles-homepage-more-title {padding: 0 20px}
	#block-articles-homepage-more > div > div {flex-direction: column}
	#homepage-article-banner .feed-details {margin: 0 20px; padding: 0}

	.issue-header, .issue-header > .view-content {flex-direction: column; padding: 20px 0}
	.issue-header > .view-content > .feed-item {margin-bottom: 20px; text-align: center}
	#block-issues-homepage footer, #block-issues-homepage h2, #block-issues-homepage .issue-header {padding: 0 20px}
	#block-issues-homepage h2 {font-size: 1.8rem}
	#block-sample-issue {margin-top: 30px}

	/* Contact */
	.contact-form .form-item input, .contact-form .form-item textarea {width: 100%}

	/* Documents */
	.documents .document {gap: 10px 5%; flex-wrap: wrap}
	.documents .theme-button {margin-left: auto}
	.document-extension {flex-basis: 15%}
	.document-size {flex-basis: 25%}
	.document-title {flex-basis: 100%}

	/* Events */
	#event-details {flex-direction: column}
  
	/* Feeds */
	.feed-container[class*="row-"] .view-content {row-gap: 40px}
	.feed-item .feed-image {text-align: center}
	.feed-item .feed-image img {width: 100%}
	
	.books .feed-item {width: 100%}
	.books .feed-image img {margin: auto; width: auto}
	.cards .feed-image {width: 100%}
	.news .view-content {flex-direction: column}
	
	/* Footer */
	#footer-content nav {display: none}
	
	#post-footer-content .centered > div {flex-direction: column; gap: 10px}
	
	/* Header */
	#block-banners-homepage-desktop, #block-social-icons {display: none}
	.banner .overlay {left: 0; bottom: 100px; max-width: 600px}
	.banner .overlay h2 {font-size: 40px}
	
	/* Images */
	.align-left, .align-right {float: none; margin: 0; text-align: center; width: 100%}
	.align-left img, .align-right img {margin: auto}

	/* Issues */
	#block-banners-highlight-articles {position: relative; left: 50%; right: 50%; margin: 0 -50vw 0; overflow: hidden; width: 100vw}
	

	/* Teasers */
	#block-teasers-fullwidth .teaser {flex-direction: column}
	#block-teasers-fullwidth .teaser-details {padding: 20px}
	#block-teasers-standard .teasers .view-content {flex-direction: column}
	#block-teasers-standard img {height: auto}

	/* Views exposed form */
	.views-exposed-form .form-item-keywords {flex-direction: column}
}

/* NARROW - MEDIUM */
@media only screen and (max-width: 999px) {
	[class*="col-"] {width: 100%}

	#block-breadcrumbs {display: none}
	#twitter-feed {display: none}

	/* Banners */
	.flexslider .slides li {flex-direction: column}
	
	/* Header */
	#block-additional-menu {display: none}
	.banner .overlay-container {background: var(--primary-colour); color: #FFF; padding: 20px}
	.banner .overlay-container h1 {color: #FFF; margin: 0}

	/* Teasers */
	#block-teasers-fullwidth .teaser-image img {object-fit: cover; height: 100%}
}

/* NARROW - WIDE */
@media only screen and (max-width: 1299px) {
	/** Blocks */
	#block-cc-search {border-top: 2px solid #EEE; margin-top: 20px; padding-top: 20px}
	#block-social-icons {margin: 10px; max-width: 250px}

	/** Content */
	#block-h360-sikyon-content {overflow-wrap: break-word}

	/** Header */
	#block-h360-sikyon-branding img {margin: 15px 20px; width: 400px; max-width: 90%}
	#header-content .centered {align-items: stretch}
	#header-content .centered > div:first-child {flex-basis: 80%}
	#header-content .centered > div:nth-child(2) {display: flex; align-items: stretch; flex-basis: 20%}

	#block-main-menu {display: none}
	#block-menu-icon {display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; width: 100%}
	#block-menu-icon .icon, #block-menu-icon a:after, #block-menu-icon a:before {background: var(--primary-colour)}
	#block-menu-icon .label {display: none}
	.responsive-menu-toggle-icon:before, .responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon span.icon {height: 5px; width: 30px}
	.responsive-menu-toggle-icon:after {top: 5px}
	.responsive-menu-toggle-icon:before {top: 23px}

	/** Menu */
	.mm-listview > .menu-name--additional, .mm-listview > .menu-name--footer {font-size: 15px; margin-top: 30px}
	.mm-listview > .menu-name--additional ~ .menu-name--additional, .mm-listview > .menu-name--footer ~ .menu-name--footer {margin-top: 0}
}

/* NARROW - EXTRA WIDE */
@media only screen and (min-width: 600px) {
	#main-container #content > div {padding: 30px 20px}
	h1 {font-size: 50px}

	/* Documents */
	.documents .document-extension {width: 5%}
	.documents .document-size {width: 15%}
	.documents .document-title {width: 70%}

	/* Events */
	#event-detail-items {width: 40%}
	#event-image {width: 55%}

	/* Feeds */
	.feed-container.row-2 .view-content {flex-direction: row; flex-wrap: wrap; gap: 30px 3%}
	.feed-container.row-2 .feed-item {width: 48.5%}
	.feed-container.row-3 .view-content {flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 40px 3%}
	.feed-container.row-3 .feed-item {width: 31.3333%; min-width: 260px}
	.feed-container.row-4 .view-content {flex-direction: row; flex-wrap: wrap; gap: 20px 2%}
	.feed-container.row-4 .feed-item {width: 23.5%}

	.books .feed-item {gap: 15px}

	.cards.full-width .feed-item {display: flex; flex-direction: row; justify-content: space-between; max-width: 100%}
	.cards.full-width .feed-item .feed-details, .cards.full-width .feed-item .feed-image {flex-basis: 50%; padding: 20px}
	
	/* Header */
	#block-banners-homepage-mobile {display: none}
	#header .centered {position: relative}
	#header .centered > div:nth-child(2) {padding: 0 20px}
	.flexslider .overlay {left: 0; bottom: 1em; max-width: 650px}

	/* Images */
	div[class^="align-"], figure {max-width: 50%}
	div.align-left, figure.align-left {margin: 10px 1.5rem 20px 0}
	div.align-right, figure.align-right {margin: 10px 0 20px 1.5rem}

	/* News/Twitter */
	#block-homepage-news-twitter > div > div > footer {display: flex; justify-content: space-between}
	#block-homepage-news-twitter > div > div > footer > div:nth-child(1) {flex-basis: 60%}
	#block-homepage-news-twitter > div > div > footer > div:nth-child(2) {flex-basis: 35%}
	.twitter-feed {overflow-y: scroll; max-height: 700px}

	/* Right */
	[id$="rightsticky"] {position: sticky; top: 30px; background: var(--primary-colour); color: #FFF; padding: 20px}
	[id$="rightsticky"] a {color: #FFCC33}
	[id$="rightsticky"] h2 {color: #FFF; margin-top: 0}
	[id$="rightsticky"] .cover-image {border: 2px solid var(--primary-colour-light); margin-bottom: 10px; padding: 2px}
	[id$="rightsticky"] .cover-image img {display: block; height: auto; width: 100%}
	[id$="rightsticky"] .theme-button a {border-color: #FFF; color: #FFF; margin: auto; width: 100%; max-width: 800px}
	[id$="rightsticky"] .theme-button a:hover {background: #FFF; color: var(--primary-colour)}
	.adminimal-admin-toolbar [id$="rightsticky"] {top: 100px}
}

/* MEDIUM */
@media only screen and (min-width: 600px) and (max-width: 999px) {
	h2.center-rule {font-size: 34px; margin: 50px auto 60px}
	
	/* Teasers */
	#block-teasers-fullwidth .teaser-details {padding: 20px}
	#block-teasers-fullwidth .teaser-image {height: 400px}
	#block-teasers-fullwidth .view-content, #block-teasers-standard .view-content {flex-direction: column}
	#block-teasers-standard .teaser {display: flex; align-items: stretch; flex-direction: row; gap: 20px}
	#block-teasers-standard .teaser-details {flex-basis: 70%}
	#block-teasers-standard .teaser-details h3 {margin-top: 0}
	#block-teasers-standard .teaser-image {flex-basis: 30%}
	#block-teasers-standard .teaser-image img {object-fit: cover; height: 100%}
}

/* MEDIUM - WIDE */
@media only screen and (min-width: 600px) and (max-width: 1299px) {
	.node-3 #main-container .centered {flex-direction: row}
	.node-3 #main-container #content {flex-basis: 70%}
	.node-3 #main-container #right {flex-basis: 30%; min-width: 300px}
}

/* WIDE - EXTRA WIDE */
@media only screen and (min-width: 1000px) {
	/* Articles and issues */
	.feed-item.article {width: 31.3333%}
	.feed-item.book {width: 48.5%}
	.feed-item.book .feed-container, .feed-item.book .view-content {height: 100%}
	.feed-item.book .feed-item {height: 100%; width: 100%}
	.articles .feed-item img {display: block; height: auto; width: 100%}
	.issues .view-content {gap: 2%}
	.issues .volume {flex-basis: 18.4%}

	/* Banner */
	#block-issues-homepage h2 {margin-top: 20px; padding: 0 20px}
	.flexslider .slides img {width: auto; max-height: 500px}
	#homepage-article-banner {padding: 0 20px}

	/* Breadcrumb */
	#block-breadcrumbs {background: #F4F4F4}
	#block-breadcrumbs nav {font-size: 16px; margin: auto; padding: 5px 20px; max-width: 1300px}
	#block-breadcrumbs nav a {color: var(--primary-colour)}
	#block-breadcrumbs nav a:hover {text-decoration: underline}
	#block-breadcrumbs nav li {float: left; padding: 0 10px}
	#block-breadcrumbs nav li:not(:first-child):before {content: "> "; padding: 0 15px 0 0}
	#block-breadcrumbs nav ol {display: flex; list-style-type: none; margin: 0; padding: 0}

	/* Header */
	#block-additional-menu {display: flex; align-items: center}
	#block-additional-menu > ul {display: flex; list-style-type: none; margin: 0; padding: 0}
	#block-additional-menu > ul li a {display: flex; color: #888; border-right: 1px solid #888; font-size: 16px; margin-right: 13px; padding-right: 13px}
	#block-additional-menu > ul li a:hover {color: var(--primary-colour-dark)}
	#block-additional-menu > ul li:last-child a {border: 0}

	#header-content {display: flex; min-height: 120px}
	#header-content .centered > div:nth-child(2) {display: flex; flex-wrap: wrap; justify-content: flex-end;}

	/* Homepage */
	#block-homepage-news-events footer {display: flex; justify-content: space-between}
	#block-homepage-news-events .feed-container {width: 47%}

	/* Teasers */
	#block-teasers-fullwidth {margin: 30px 0}
	#block-teasers-fullwidth .teaser-content {padding: 20px 700px 20px 20px}
	#block-teasers-fullwidth .teaser-details h2 {color: #FFF; font-size: 40px}
	#block-teasers-fullwidth .teaser-image {position: absolute; top: -50px; right: 10px; height: 100%; width: 580px}
	#block-teasers-fullwidth .teaser-image img {display: block; height: auto; width: 100%}
	#block-teasers-fullwidth .teaser .centered {position: relative}

	#block-teasers-standard .teasers .teaser img {height: auto; transition: 0.5s}

	/* User login */
	#user-login-form .form-item input, #user-pass .form-item input {width: 80%}
	#user-login-form .form-item label, #user-pass .form-item label {width: 20%}

	/* Views exposed filters */
	.views-exposed-form .fieldset-wrapper {margin-left: 1%; width: 74%}
	.views-exposed-form > .form-item > label:not(.option), .views-exposed-form fieldset legend {float: left; align-items: center; justify-content: right; padding: 10px; text-align: right; width: 15%}
	.views-exposed-form .form-text {margin-left: 1%}
}

@media only screen and (min-width: 1000px) and (max-width: 1299px) {
	/* Banner */
	.flexslider .slides li .image {display: flex; justify-content: center; overflow: hidden; width: 70%}
	.flexslider .slides li .banner-details {width: 30%}
}

/* EXTRA-WIDE */
@media only screen and (min-width: 1300px) {
	[class*="col-"] {float: left}
	.col-0 {display: none}
	.col-1 {width: 8.33%}
	.col-2 {width: 16.66%}
	.col-3 {width: 25%}
	.col-4 {width: 33.33%}
	.col-5 {width: 41.66%}
	.col-6 {width: 50%}
	.col-7 {width: 58.33%}
	.col-8 {width: 66.66%}
	.col-9 {width: 75%; padding-right: 60px !important}
	.col-10 {width: 83.33%}
	.col-11 {width: 91.66%}
	.col-12 {width: 100%}
	
	h2.center-rule {width: 60%}

	#main-container .centered {display: flex; align-items: stretch}
	#main-container .centered #right > div {height: 100%}

	/* Articles */
	#block-articles-homepage-more .feed-item {width: 31.3333%}

	/* Header */
	#block-h360-sikyon-branding {padding: 15px 20px; width: 400px}

	#block-issues-homepage h2, #block-issues-homepage .banner > .view-content, #block-issues-homepage .issue-header {margin: auto; width: 1300px}
	#block-issues-homepage h2 {margin-top: 30px} 

	#block-main-menu {margin-top: 10px}
	#block-main-menu nav {display: flex}
	#block-main-menu #horizontal-menu {display: flex; align-items: stretch; justify-content: flex-end}
	#block-main-menu #horizontal-menu a {display: flex; align-items: center; background: none; box-sizing: content-box; color: #555; font-size: 1rem; text-transform: uppercase}
	#block-main-menu #horizontal-menu > li.menu-item--active-trail > a {border-bottom: 5px solid var(--primary-colour); color: var(--primary-colour); font-weight: bold}
	#block-main-menu #horizontal-menu > li > a {border-bottom: 5px solid #FFF}
	#block-main-menu #horizontal-menu > li > a:not([class*="is-active"]):hover {border-bottom: 5px solid var(--menu-hover)}
	#block-main-menu #horizontal-menu > li > a.is-active {border-bottom: 5px solid var(--primary-colour); color: var(--primary-colour); font-weight: bold}
	#block-main-menu #horizontal-menu .menu-item > ul {background: var(--primary-colour)}
	#block-main-menu #horizontal-menu > .menu-item > ul {border-top: 5px solid var(--menu-hover)}
	#block-main-menu #horizontal-menu > .menu-item > ul ul {background: #EEE}
	#block-main-menu #horizontal-menu > .menu-item > ul ul a {color: var(--primary-colour)}
	#block-main-menu #horizontal-menu > .menu-item > ul ul a:hover {background: #DDD}
	#block-main-menu #horizontal-menu > .menu-item > [data-drupal-link-system-path="node/5"] {background: var(--primary-colour); color: #FFF !important} 
	#block-main-menu #horizontal-menu .menu-item > ul a {color: #FFF; padding: 10px 20px; text-transform: none}
	#block-main-menu #horizontal-menu .menu-item > ul a:hover {background: #EEE; color: var(--primary-colour)}
	#block-menu-icon {display: none}

	/* Navigation */
	#block-secondary-menu-main-level2 {margin-bottom: 30px}

	/* News */
	#right .news .feed-item {width: 100%}
}

/* ANIMATIONS */
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}