:root {
  --primary-colour: #336600;
  --primary-colour-dark: #274E00;
  --menu-hover: #E2E2E2;
}

* {box-sizing: border-box}

[class*="col-"] {float: left}

a {color: #003FC5; text-decoration: none; transition: 0.3s}
blockquote {border-left: 10px solid var(--primary-colour); font-style: italic; padding-left: 20px}
body {background: #FFF; color: #444; font-family: roboto, sans-serif !important; font-weight: 100; font-style: normal; font-size: 18px; margin: 0; padding: 0; width: 100%}
h1, h2, h3, h4 {font-family: plantin, sans-serif !important; font-weight: 400; font-style: normal}
h1 {color: var(--primary-colour); font-size: 40px; margin: 30px 0 10px}
h2 {color: var(--primary-colour); font-size: 40px; margin: 40px 0 10px}
h2.center-rule {display: flex; align-items: center; border-bottom: 2px solid #BBB; color: #999; font-size: 40px; font-weight: 300; justify-content: center; margin: 80px auto 50px; text-align: center; text-transform: uppercase}
h3 {color: var(--primary-colour); font-size: 30px; margin-bottom: 0}
h4 {color: var(--primary-colour); font-size: 22px; margin-bottom: -10px}
hr {color: #EEE}
p {line-height: 150%}
strong {font-weight: bold}

#block-h360-sikyon-content {width: 100%}
#block-h360-sikyon-content article li a, #block-h360-sikyon-content article p a {overflow-wrap: break-word; word-wrap: break-word}
#block-h360-sikyon-content figure.align-center {margin: 40px 0}
#block-h360-sikyon-content figure figcaption {background: #F4F4F4; font-size: 16px; padding: 5px 10px}
#block-h360-sikyon-content figure figcaption a.ext {display: none}
#block-h360-sikyon-content figure img {border: 2px solid #DDD; padding: 2px}
#block-h360-sikyon-content li a:hover, #block-h360-sikyon-content p a:hover {border-bottom: 2px solid #003FC5; transition: 0.1s}
#block-h360-sikyon-content li {line-height: 150%; margin: 10px 0}
#block-h360-sikyon-content ul {list-style-type: square}
#block-h360-sikyon-content ul li > ul {list-style-type: circle}
#block-h360-sikyon-content .theme-button a {border-style: solid; border-width: 2px; text-decoration: none}
#block-h360-sikyon-content .theme-button a:hover {color: #FFF}
#block-h360-sikyon-content .theme-button svg {display: none}

[class^="results-"] {padding: 5px 10px}
.results-false {background: #F9E3E3; border: 2px solid #965151; color: #7C2323}
.results-true {background: #DEF9E2; border: 2px solid #5C9566; color: #2B5C33}

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


/* DRUPAL STYLES */
#block-h360-sikyon-local-tasks {border-color: #E4E4E4; border-style: solid; border-width: 2px 0; margin-bottom: 30px; 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}

.eu-cookie-compliance-banner {background: var(--primary-colour); padding: 10px 0}
.eu-cookie-compliance-banner #popup-buttons button {background: none; border: 2px solid #FFF; border-radius: 0; box-shadow: 0 0; color: #FFF; font-size: 16px; font-weight: normal; padding: 10px; text-shadow: 0 0; width: 100px}
.eu-cookie-compliance-banner #popup-buttons button:hover {background: #FFF; color: var(--primary-colour)}
.eu-cookie-compliance-banner h2 {font-family: adelle-sans, arial !important}

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

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}

/* GENERAL STYLES */
.admin-buttons {border-bottom: 1px dashed #DDD; margin-bottom: 20px; padding-bottom: 10px}
.admin-buttons .view-content > div {display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 20px 0}
.admin-buttons .admin-button a {background: #DDD; border-radius: 30px; color: #666; padding: 10px 30px; transition: 0.3s}
.admin-buttons .admin-button a:hover {background: var(--primary-colour); color: #FFF}

.admin-links {position: absolute; right: 5px; top: 5px; display: flex; border: 1px solid #DDD; font-size: 14px; z-index: 1}
.admin-links a {background: #FFF; color: var(--secondary-colour-sea) !important; padding: 5px 10px}
.admin-links a:hover {background: #AAA; color: #FFF !important}

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

.theme-table {border-collapse: separate; border-spacing: 5px}
.theme-table td {padding: 5px 10px}
.theme-table th {background: #F4F4F4; padding: 5px 10px}

.views-exposed-form {background: #F4F4F4; margin-bottom: 20px; padding: 20px}
.views-exposed-form .form-checkboxes.form--inline .form-item {margin-right: 20px}
.views-exposed-form .fieldset-legend {display: block; color: var(--primary-colour); font-size: 24px; margin-bottom: 10px}

/* HEADER STYLES */
#preheader {background: var(--primary-colour)}
#preheader .centered > div {display: flex; justify-content: flex-end}
#preheader .menu {display: flex; list-style-type: none; margin: 0 5px; padding: 0}
#preheader .menu li a {display: flex; color: #FFF; font-size: 16px; padding: 10px 15px}
#preheader .menu ul {background: #F4F4F4}
#preheader .menu ul li a {color: var(--primary-colour)}
#preheader .menu ul li a:hover {background: #E4E4E4}
#preheader .sfHover ul {top: 2em}
#header {position: relative}
#header .centered {position: relative; display: flex; justify-content: space-between}
#banner .banner-subpage-overlay {font-size: 12px; padding: 0 20px}
#banner .banner-subpage-overlay p {margin: 5px 0}
#banner .banner-title {position: absolute; bottom: 0; left: 0; border-bottom: 5px solid #E77A0B; width: 100%; z-index: 100}
#banner .banner-title h1 {display: block; float: right; background: var(--primary-colour); color: #FFF; margin: 0; padding: 20px}
.flexslider {border: 0; margin: 0; overflow: hidden}
.flexslider .admin-links {left: 30px; bottom: 30px; right: initial; top: initial; font-size: 18px}
.flexslider .centered {height: 100%}
.flexslider .overlay-container {position: absolute; left: 0; top: 0; height: 100%; width: 100%}
.flexslider .overlay {position: absolute; background: rgba(10,10,10,0.7); color: #FFF; padding: 20px}
.flexslider .overlay .theme-button a {background: rgba(255,255,255,0.3)}
.flexslider .overlay .theme-button a:hover {background: rgba(255,255,255,1); color: var(--primary-colour)}
.flexslider .overlay h2 {color: #FFF; font-size: 50px; line-height: 100%; text-shadow: 0 0 10px #000}
.flexslider .overlay p {text-shadow: 0 0 10px #000}
.flexslider .overlay-content {float: right; color: #FFF; font-size: 55px; font-weight: 500; line-height: 130%; padding: 0 15px 50px 0; text-align: right; text-shadow: 0 0 5px #000, 0 0 20px #000; text-transform: uppercase; width: 35%}
.flexslider .schools-logo-overlay {position: absolute; right: 60px; top: 0; height: auto; width: 23%}
.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}

#block-h360-sikyon-branding {margin: 15px; width: 250px}
#block-h360-sikyon-branding-subpage {margin: 15px; width: 250px}
#block-h360-sikyon-branding-subpage img {display: block}


/* CONTENT STYLES */
#main-container #content > div {display: flex; padding: 30px 20px}
[id^="block-divider-"] {flex-basis: 100%}
[data-quickedit-field-id*="field_files"] > div {border-left: 10px solid var(--primary-colour); font-size: 20px; margin: 10px 0 10px 20px; padding: 5px 10px}
[data-quickedit-field-id*="field_files"] > div:hover {background: #F4F4F4}

/* Feeds */
.feed-container.dividers .feed-item:not(:last-child) {border-bottom: 1px dashed #CCC; padding-bottom: 30px}
.feed-container .view-content {display: flex; flex-direction: column}
.feed-item {position: relative; display: flex; margin-bottom: 30px}
.feed-item h3 {margin: 0}
.feed-item li {line-height: 150%; margin: 10px 0}
.feed-item p {margin: 10px 0}
.feed-item .feed-date {color: #888; margin-top: 10px}
.feed-buttons {display: flex}
.feed-buttons .theme-button {margin-right: 20px}
.feed-details {display: flex; flex-direction: column}
.feed-detail-item {display: flex; font-size: 16px; margin-top: 6px}
.feed-detail-item * {padding: 5px 10px}
.feed-detail-item-label {background: #F4F4F4; font-weight: bold; text-align: right; width: 100px}
.feed-files ul {list-style-type: none; margin-top: 15px; padding: 0}
.feed-files .file {border-left: 10px solid var(--primary-colour); margin: 10px 0 10px 20px; padding: 5px 10px}
.feed-files .file:hover {background: #F4F4F4}
.feed-image {margin-right: 20px}
.feed-image img {display: block; height: auto}
.feed-image img.no-result {width: 200px}
.feed-subtitle {color: #888; font-size: 20px}

/* Blog */
#author-details {background: #F4F4F4; margin-top: 30px; padding: 20px}
.blog .view-content {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between}
.blog .blog-entry {position: relative; margin: 30px 0}
.blog .blog-entry h2 {margin-top: 10px}
.blog .blog-entry img {height: auto; width: 100%}
.blog .blog-entry .blog-date {color: #888; font-size: 24px; margin-top: 5px}
.blog .blog-image {position: relative}
#blog-date {border-color: #DDD; border-style: solid; border-width: 2px 0; padding: 10px 0}

#block-blog-details {background: #F4F4F4; padding: 20px}
#block-blog-details h2 {font-size: 32px}
#block-blog-details .blog-date-author {color: var(--primary-colour)}

/* Conservation */
#block-casework-feed {border-top: 1px solid #DDD; margin-top: 30px; padding-top: 30px}
.casework .feed-details {gap: 0}
.casework .feed-item p {margin: 10px 0}
.casework .feed-title {margin-top: 0}

/* 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%}

.advocacy {border-top: 1px solid #DDD; margin-top: 20px; padding-top: 20px}
.advocacy td:first-child {background: #F4F4F4; font-weight: bold; width: 60%}

.theme-table.contact svg {display: none}
.theme-table.contact td:first-child {background: var(--primary-colour); color: #FFF; text-align: right}

/* Events - structure */
#block-events-intro {background: #F4F4F4; margin-top: 50px; padding: 20px}
#block-events-intro h2 {font-size: 28px; margin: 0}
#block-events-intro p a {color: var(--secondary-colour-sea); text-decoration: underline; text-decoration-style: dotted}
.events .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
.events .event {position: relative; display: flex; flex-flow: column nowrap}

/* Events - 'Next event' heading */
#block-next-event {border-top: 1px solid #CCC; margin-top: 10px; padding-top: 40px}
.events.homepage .event .next-heading {display: none}
.events .next-heading, .events.homepage .event:first-child .next-heading {display: block; color: var(--primary-colour); font-family: adelle-sans; font-size: 34px; font-weight: bold}

/* Events - image */
.events .event-image, .events.homepage .event-image a {overflow: hidden}
.events img {display: block; height: auto; transition: 0.5s; width: 100%}
.events .event:hover img, .events .next-event:hover img {transform: scale(1.1)}

/* Events - details */
.events .event-date, .events .event-presenter {background-position: 5px 8px; background-repeat: no-repeat; background-size: 1.5em; border-top: 1px solid #E4E4E4; font-size: 16px; margin-top: 8px; padding: 10px 0 0 40px}
.events h3 {line-height: 100%; margin: 0}
.events .event-date {background-image: url(/sites/all/images/icon-calendar.svg); height: 35px}
.events .event-presenter {background-image: url(/sites/all/images/icon-person.svg)}
.events .event-subtitle {margin-top: 8px; font-size: 16px}
.events .event-type {margin: 5px 0}

/* Events - next event */
.events .next-event {position: relative; display: flex; flex-wrap: wrap}
.events .next-event {background: #F4F4F4; padding: 20px}
.events .next-event h3 {font-size: 28px}
.events .next-event .event-image {margin: 15px 0 20px; width: 100%}

/* Events - homepage */
#block-events-homepage {flex-basis: 48%}
#block-events-homepage footer {margin-top: 20px}
#block-events-homepage .next-event {flex-direction: column}

/* Events - events page */
#block-events-feed-page {margin-top: 20px; width: 100%}
.events:not(.homepage) .view-content {gap: 30px}
.events:not(.homepage) .theme-button {margin-top: auto}

/* Events - event page */
#event-dates {background-image: url(/sites/all/images/icon-calendar.svg)}
#event-details {display: flex; justify-content: space-between; gap: 30px; margin-top: 20px}
#event-details .theme-button {margin-top: 20px}
#event-detail-items {display: flex; flex-direction: column}
#event-detail-items > div:not([class*="theme-button"]) {background-position: left center; background-repeat: no-repeat; padding: 15px 0 15px 50px}
#event-detail-items > div:not(:last-child) {border-bottom: 1px solid #CCC}
#event-location {background-image: url(/sites/all/images/icon-map-marker.svg)}
#event-presenter {background-image: url(/sites/all/images/icon-person.svg)}
#event-subtitle, #event-type {color: #777; font-size: 26px}
#event-title {margin: 10px 0}

.subscriptions {border-collapse: separate; border-spacing: 5px}
.subscriptions td {padding: 10px}
.subscriptions td:first-child {background: #F4F4F4}
.subscriptions td:nth-child(2) {background: #DDD; color: #000; text-align: center}
.subscriptions .small {font-size: 15px}

.subscription {display: flex; gap: 1%; margin: 5px 0}
.subscription-button {display: flex; align-items: center; flex-basis: 20%; padding-top: 4px}
.subscription-cost {display: flex; flex-basis: 10%; font-weight: bold}
.subscription-cost-value {display: flex; align-items: center; background: #DDD; flex-basis: 100%; justify-content: center; padding: 10px; height: 100%}
.subscription-subtitle {font-size: 14px}
.subscription-title {display: flex; background: #F4F4F4; flex-basis: 40%; flex-direction: column; justify-content: right; padding: 10px}
.subscriptions-header {display: flex; gap: 1%}
.subscriptions-header div {display: flex; background: #F4F4F4; flex-basis: 31%; justify-content: center; padding: 10px}
.subscriptions-header div:first-child {background: none; flex-basis: 40%}

/* Forms */
#block-join-general-admin, #block-join-schools-admin {width: 100%}
#block-join-general-admin .admin-buttons, #block-join-schools-admin .admin-buttons {border: 0; margin: 0; padding: 10px 0}
#block-join-general-admin .admin-button, #block-join-schools-admin .admin-button {display: flex}

form[id^="membership-"] {background: #F4F4F4; padding: 20px; width: 100%}
form[id^="membership-"] #edit-contact-container {justify-content: space-between}
form[id^="membership-"] #edit-contact-container fieldset {min-width: 0}
form[id^="membership-"] .form-email, form[id^="membership-"] .form-text {font-size: 20px; margin: 5px 0; padding: 8px; width: 100%}
form[id^="membership-"] #edit-actions-submit {border: 0; background: var(--primary-colour); color: #FFF; cursor: pointer; font-size: 18px; padding: 10px 20px; transition: 0.3s}
form[id^="membership-"] #edit-actions-submit:hover {background: #D2A220; border-radius: 30px}
form[id^="membership-"] legend {font-size: 20px; font-weight: bold; margin-bottom: 5px}
#edit-membership-general-choices fieldset {margin-bottom: 15px}
#edit-membership-general-choices textarea {margin-bottom: 15px; width: 100%}

/* Galleries */
.gallery .view-content {display: flex; flex-direction: row; flex-wrap: wrap}
.gallery .gallery-item {position: relative}
.gallery .gallery-item a.colorbox {display: block; border: 2px solid #E4E4E4; margin: 5px; padding: 2px}
.gallery .gallery-item a.colorbox:hover {background: #FFCC33; border-color: #FFCC33}
.gallery .gallery-item img {display: block}

/* Images */
div.align-center, figure.align-center {margin: 40px 0 30px}
div[class^="align-"] img, figure[class^="align-"] img {height: auto; width: 100%}
figure figcaption {background: #F4F4F4; font-size: 16px; padding: 5px 10px}

/* News */
#block-news-feed {flex-basis: 48%}
.page-node-type-news h1 {margin-bottom: 10px}
#news-date {border-bottom: 2px solid #DDD; color: #888; font-size: 24px; padding-bottom: 10px}
#news-image {float: right; margin: 1em 0 1em 30px}
.news.schools {border-top: 1px solid #DDD; margin-top: 40px; padding-top: 30px}
.news.schools .admin-buttons {margin-bottom: 30px}
.news .feed-image img {max-width: 150px}
.news > .views-element-container {flex-basis: 100%}

#social-media-icons {display: flex; justify-content: space-around}
#social-media-icons img {height: 50px; width: 50px}

/* Newsletters */
.newsletters, #block-publications-newsletters {width: 100%}
.newsletters .view-content {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%}
.newsletters .feed-item {flex-direction: column; flex-basis: 31.3333%; margin: 30px 0}
.newsletters .feed-item img {height: auto; width: 100%}
.newsletters .feed-item .theme-button a {display: block; margin: auto; text-align: center}
.newsletters .feed-title {font-size: 24px; margin: 10px 0; text-align: center}

/* Publications */
.publications .feed-image {display: flex; justify-content: center; min-width: 220px}
.publications h3 {margin: 10px 0}

.content-item {display: flex}
.contents-list {display: flex; flex-direction: column; gap: 10px}

/* Reports */
.reports table {border-collapse: separate; border-spacing: 5px; width: 100%}
.reports table td {background: #F4F4F4; font-size: 22px; padding: 10px; transition: 0.3s}
.reports table td:hover {background: #E4E4E4}
.reports table td:first-child {border-left: 5px solid var(--primary-colour)}
.reports table .details {font-size: 16px}

/* Resources */
.resources {border-top: 1px solid #CCC; margin-top: 30px; padding-top: 30px}
.resources .resource li {margin: 5px 0}
.resources .resource li a {color: var(--secondary-colour-dandelion); font-weight: bold}
.resources .resource ul {list-style-type: none; margin: 0; padding: 0}

/* Schools */
#block-schools-offer-previous {margin-top: 30px}

/* Social media */
.social-media-icons {display: flex; align-items: center; border-top: 2px solid #DDD; color: var(--primary-colour); font-size: 24px; margin-top: 40px; padding-top: 40px}
.social-media-icon {margin-left: 10px}
.social-media-icon img {height: auto; width: 80px}

/* RIGHT REGION */
#block-addtoany {background: #FAFAFA; border: 2px solid #E4E4E4; margin-top: 30px; padding: 20px}
#block-addtoany p {margin: 0}
#block-mainmenu h2, #block-preheadermenu h2 {font-size: 30px}

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

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

#block-footer-quote img {height: auto}
#block-footer-quote p {font-style: italic; margin-top: 0}
#block-psfooterdetails {border-top: 1px solid #CCC; margin-top: 20px; padding-top: 10px}

#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}

#block-social-media-icons-footer {position: absolute; bottom: 0; right: 10px}
#block-social-media-icons-footer .social-media-icons {border: 0; font-size: 18px; margin: 0; padding: 0}
#block-social-media-icons-footer .social-media-label {display: none}
#block-social-media-icons-footer .social-media-icon img {height: auto; width: 35px}

/* SITES DATABASE */
#block-authority-search {display: flex; background: #F4F4F4; gap: 20px; margin-top: 20px; padding: 20px; width: 100%}
#block-authority-search input, #block-authority-search select {background: #FFF; border: 2px solid #DDD; font-size: 18px; margin: 5px 0; padding: 5px; max-width: 100%}
#block-authority-search #edit-submit {background: none; border: 2px solid var(--primary-colour); color: var(--primary-colour); cursor: pointer; padding: 10px 20px; transition: 0.3s}
#block-authority-search #edit-submit:hover {background: var(--primary-colour); color: #FFF}

#block-database-admin {background: #F4F4F4; margin-top: 50px; padding: 20px}
#block-database-admin h2 {font-size: 30px; margin-top: 0}
#block-database-admin .theme-button a {justify-content: center; margin: 5px 0; width: 100%}

#block-downloads, #block-planning-responses-feed {background: #F4F4F4; padding: 20px; width: 100%}
#block-downloads h2, #block-planning-responses-feed h2, #block-sites-map h2 {font-size: 28px; margin-top: 0}
#block-downloads .theme-button {margin-top: 15px}
#block-sites-gallery {width: 100%}
#block-sites-map {background: #F4F4F4; margin-top: 50px}
#block-sites-map h2 {padding: 20px 20px 0}
#block-sites-map .site-detail-items {font-size: 16px; padding: 5px 0}
#block-sites-map .site-detail-item > div {padding: 5px 10px}

#block-site-tabs {border-bottom: 5px solid var(--primary-colour); margin-bottom: 30px; width: 100%}
#site-tabs {display: flex; justify-content: space-between}
[id^="site-tab-"] {display: flex; border-color: #E4E4E4; border-style: solid; border-width: 1px 1px 0 1px; border-radius: 10px 10px 0 0; color: #444; cursor: pointer; flex-basis: 48%; font-size: 20px; justify-content: center; padding: 10px; transition: 0.3s}
[id^="site-tab-"].active {background: var(--primary-colour); color: #FFF}

.database-inactive {opacity: 0; height: 0}

.popup-button.theme-button {margin-top: 10px}
.popup-image {margin-right: 10px}
.popup-image img {height: 100px; width: auto}
.popup-title {font-size: 22px}

.page-node-type-site h1 {margin-bottom: 10px}
.sites > .view-content {border-top: 1px dashed #DDD; margin-top: 30px; padding-top: 30px}
#site-applications {display: flex; align-items: center; background: #F4F4F4; justify-content: center; height: 300px; width: 100%}
#site-details {margin-top: 20px}
#site-details .theme-button {margin-top: 20px}
.site-detail-items {display: flex; flex-direction: column; gap: 5px}
.site-detail-item {display: flex}
.site-detail-item .site-detail, .site-detail-item .site-label {display: flex; align-items: center; padding: 10px}
.site-detail-item .site-detail {flex-basis: 60%}
.site-detail-item .site-label {background: #F4F4F4; font-weight: bold; flex-basis: 40%; justify-content: flex-end; text-align: right}
#site-subheading {border-color: #DDD; border-style: solid; border-width: 2px 0; margin-bottom: 30px; padding: 10px 0}
#site-subheading time {display: inline}

.sites header {margin-bottom: 20px}
.sites:not([class*="map"]) .feed-image img {height: auto; width: 200px}
.sites.map .theme-button a {display: flex; float: none; justify-content: center; margin-top: 10px}
.sites .search-info {background: #F4F4F4; border: 1px solid #E4E4E4; margin: -20px 0 20px; padding: 10px 20px}
.sites .search-info #guidance {color: #003FC5; cursor: pointer}
.sites .search-info #guidance-content {overflow: hidden; transition: max-height 0.3s ease-out; max-height: 0}

#views-exposed-form-sites-districts {display: none}
#views-exposed-form-sites-search {display: flex; flex-wrap: wrap; border-color: #E4E4E4; border-style: solid; border-width: 1px}
#views-exposed-form-sites-search input, #views-exposed-form-sites-search select {font-size: 18px; padding: 5px}
#views-exposed-form-sites-search > .form-item {display: flex; flex-direction: column; padding: 1%}
#views-exposed-form-sites-search > .form-wrapper {flex-basis: 100%; padding: 10px}
#views-exposed-form-sites-search #edit-actions input {border: 0; cursor: pointer; margin-right: 10px; padding: 8px 15px; transition: 0.3s}
#views-exposed-form-sites-search #edit-reset {background: #E4E4E4}
#views-exposed-form-sites-search #edit-reset:hover {background: #CCC}
#views-exposed-form-sites-search #edit-submit-sites {background: var(--primary-colour); color: #FFF}
#views-exposed-form-sites-search #edit-submit-sites:hover {background: var(--primary-colour-dark)}

.downloads .file-download {border-left: 10px solid var(--primary-colour); cursor: pointer; margin: 10px 0; padding: 5px 0 5px 10px}
.downloads .file-download:hover {background: #DDD}

.gm-style-iw-d > div {display: flex}
.gm-style-iw-d h3 {margin-top: 0}

.responses .response {border-top: 2px solid #CCC; margin-top: 15px; padding-top: 15px}
.responses .response-date {font-size: 22px; font-weight: bold}
.responses .response-app-desc {margin: 10px 0}
.responses .response-app-link svg {display: none}
.responses .response-app-link, .responses .response-download {border-left: 5px solid var(--primary-colour); margin: 5px 0; padding-left: 10px}

.sections {margin-bottom: 50px}
.sections h2.collapse-toggle {font-size: 24px}
.sections li {margin: 5px 0}
.sections svg {pointer-events: none}
.sections .btn {all: inherit; border-color: #E4E4E4; border-style: solid; border-width: 2px 0; cursor: pointer; padding: 10px 0 8px 10px; transition: 0.3s; width: 100%}
.sections .btn:active {border-color: #4B65A0; color: #4B65A0}
.sections .btn:hover {background: #F4F4F4}
.sections .btn svg {float: right; margin-right: 5px; height: auto; width: 33px}
.sections .btn svg rect {fill: #CCC}
.sections [aria-expanded="true"] .vert {display: none}
.sections .collapse {margin-bottom: 30px}


/* TEASERS */
#block-teasers-fullwidth {margin-top: 40px; flex-basis: 100%}
#block-teasers-fullwidth .centered {z-index: 2}
#block-teasers-fullwidth .teaser-details {color: #FFF; padding: 0 50% 0 0}
#block-teasers-fullwidth .teaser-details a {color: #FFCC33}
#block-teasers-fullwidth .teaser-details h2 {color: #FFF; line-height: 120%; margin: 0 0 20px}
#block-teasers-fullwidth .teaser-details li {margin: 10px 0}
#block-teasers-fullwidth .teaser-image img {display: block; height: auto; width: 100%}
#block-teasers-fullwidth .teaser.nightsky .teaser-details:before {background: var(--primary-colour)}
#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)}

#block-teasers-standard {margin: 30px 0}
#block-teasers-standard .teasers .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
#block-teasers-standard .teasers .teaser {position: relative; flex-basis: 31.33%; margin: 20px 0}
#block-teasers-standard .teasers .teaser h2 {border-bottom: 3px solid #DDD; margin: 10px 0 0}
#block-teasers-standard .teasers .teaser img {display: block; height: auto; transition: 0.5s; width: 100%}
#block-teasers-standard .teasers .teaser-image {overflow: hidden}

.teasers .teaser-image {position: relative}
.image-attribution {font-size: 12px}
.image-attribution p {margin: 0}
.image-attribution .ext svg {display: none}

.subpage #block-teasers-standard .teasers .teaser {flex-basis: 48%}

/* USER LOGIN FORM */
#user-login-form .form-item {margin-bottom: 15px}
#user-login-form .form-item .description {font-size: 14px; margin-top: 5px}
#user-login-form .form-item input {font-size: 22px; padding: 5px 10px}


/* NARROW */
/* ------ */
@media only screen and (max-width: 599px) {	
  /* Contact */
  .contact-form .form-item input, .contact-form .form-item textarea {width: 100%}
  
	/* Feeds */
	.feed-item {flex-direction: column}
	.feed-item .feed-image {margin: 0 auto 10px}
	
	/* Forms */
	#block-membership-schools-form fieldset {margin: 20px 0}
	#edit-membership-general-choices {margin-top: 20px}
	
	/* Footer */
	#post-footer-content .centered > div {flex-direction: column; gap: 10px}
	
	/* Header */
	#block-banners-homepage {display: none}
	.flexslider .overlay {left: 0; bottom: 0; font-size: 16px; width: 100%}
	.flexslider .overlay h2 {font-size: 36px; margin-top: 10px}
	
	/* Images */
	.align-left, .align-right {float: none; margin: 0; text-align: center; width: 100%}
	.align-left img, .align-right img {margin: auto; height: auto; width: 100%}

	/* Right */
	#block-addtoany {background: #F4F4F4; margin: 30px 20px; padding: 20px}
	#right {width: 100%}
	#right nav h2 {margin: 0 0 10px}
	
	/* Sites database */
	#block-authority-search #mapsearch-form-search {width: 100%}
	#block-authority-search #mapsearch-map {margin-top: 20px; width: 100%}
	#block-authority-search input, #block-authority-search select {width: 100%}
	#site-image img {height: auto; width: 100%}
	#views-exposed-form-sites-search input, #views-exposed-form-sites-search select {width: 100%}

	/* Teasers */
	#block-teasers-fullwidth .teaser {flex-direction: column}
	#block-teasers-fullwidth .teaser-details {padding: 20px}
  #block-teasers-standard .teasers .view-content {flex-direction: column}
  .image-attribution {padding: 5px 0}
}

/* NARROW - MEDIUM */
/* --------------- */
@media only screen and (max-width: 999px) {
	#main-container #content > div {flex-direction: column}
	#block-breadcrumbs {display: none}
	#block-main-menu {display: none}
	#block-news-feed footer {border-top: 1px solid #DDD; margin-top: 30px; padding-top: 30px}
	#preheader {display: none}
	#twitter-feed {display: none}
	
	/* Events */
  .events.homepage .view-content {flex-direction: column; gap: 30px}
  .events.homepage .event:not(:first-child) {border-bottom: 1px dashed #DDD; padding-bottom: 30px}
  .events:not(.homepage) .event {border-top: 1px dashed #CCC; padding-top: 30px}
  .events .next-event {flex-direction: column}
  
  /* Footer */
  #footer-content {font-weight: bold; text-align: right; width: 100%}
	#footer-content [role="navigation"] {display: none}
	
	/* Menu */
	#block-menu-icon {display: flex; align-items: center; padding: 15px; height: 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; color: var(--primary-colour)}
	.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-item--_6730d2b-fc42-4e26-81b2-abb424a79556 {border-top: 5px solid #000}
	.menu-item--_07b21b5-c9ed-4714-83cc-5f3677f19a7f {margin-top: 100px}
	
	/* Teasers */
	#block-teasers-fullwidth .teaser {background: var(--primary-colour)}
	#block-teasers-fullwidth .teaser-details {padding: 20px}
	#block-teasers-fullwidth .theme-button {display: flex}
}

/* MEDIUM */
/* ------ */
@media only screen and (min-width: 600px) and (max-width: 999px) {
	h2.center-rule {font-size: 34px; margin: 50px auto 60px}
	
	[class*="col-"] {width: 100%}
	
	/* Header */
	.flexslider .overlay-container {position: relative}
	.flexslider .overlay {position: relative; background: var(--primary-colour); width: 100%}
	.flexslider .overlay h2 {font-size: 40px; margin-top: 0; text-shadow: none}
	.flexslider .overlay p {font-size: 22px; text-shadow: none}
	
	#block-h360-sikyon-branding-subpage img {height: 50px; width: auto}
	
	#block-psfooterdetails img {height: auto; width: 100%}

	/* Teasers */
	.frontpage .teasers .view-content {flex-direction: column}
	.frontpage .teasers .teaser {display: flex; flex-direction: row; gap: 20px}
	.frontpage .teasers .teaser-details {flex-basis: 70%}
	.frontpage .teasers .teaser-image {flex-basis: 30%}
	
	#block-teasers-fullwidth .teaser .centered {flex-basis: 70%}
}

/* MEDIUM - WIDE */
/* ------------- */
@media only screen and (min-width: 600px) and (max-width: 1299px) {
	/* Menu */
	#block-main-menu #horizontal-menu a {font-size: 16px}
}

/* WIDE */
/* ---- */
@media only screen and (min-width: 1000px) and (max-width: 1299px) {
	#post-footer-content {width: 100%}
}

/* MEDIUM - EXTRA WIDE */
/* ------------------- */
@media only screen and (min-width: 600px) {
	h1 {font-size: 50px}
	
	/* Blog */
	.blog .blog-entry {flex-basis: 48%}
	
	/* Feeds */
	#views-exposed-form-sites-search > .form-item {flex-basis: 25%}
	
	/* Forms */
	#edit-membership-general-container, #edit-membership-general-name-container {display: flex; justify-content: space-between}
	#edit-membership-general-container > div {flex-basis: 48%}
	
	/* Header */
	#banner .banner-subpage-overlay {position: absolute; bottom: 0; right: 0; background: rgba(220,220,220,0.8)}
	#block-banners-homepage-mobile {display: none}

	/* Sites database */
	#block-authority-search {display: flex}
	#block-authority-search #mapsearch-form-search {width: 40%}
	#block-authority-search #mapsearch-map {width: 60%}
	#site-image {float: right; margin: 0 0 20px 20px}
	
	/* Teasers */
	#block-teasers-fullwidth .teaser-details h2 {font-size: 50px}
	#block-teasers-standard .teasers .teaser:hover img {transform: scale(1.1)}
	.image-attribution {position: absolute; bottom: 0; right: 0; background: rgba(255,255,255,0.85); padding: 5px; text-align: right; max-width: 80%}
}

/* WIDE - EXTRA WIDE */
/* ------------------- */
@media only screen and (min-width: 1000px) {
	#main-container #content > div {flex-wrap: wrap; justify-content: space-between}
	#main-container #content {min-height: 500px}
	
	/* Breadcrumb */
	#block-breadcrumbs {background: #F4F4F4}
	#block-breadcrumbs nav {font-size: 16px; margin: auto; padding: 5px 20px}
	#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}
	
	/* Events */
	.events .event {flex-basis: 48%; padding: 2%}
	.events .event:hover {background: #F4F4F4}
	.events .next-event h3, .events.homepage .event:first-child h3 {font-size: 36px}
	.events .next-event-left, .events .next-event-right {flex-basis: 50%}
	.events:not(.homepage) .event {border: 2px solid #EEE}
	.events:not(.homepage) .next-event .event-details {float: right; padding-left: 20px}
	
	/* Footer */
	#footer-content .centered > div {display: flex; justify-content: flex-end}
	#footer-content .centered > div > nav {border-right: 1px solid #E4E4E4; margin-right: 25px; padding-right: 25px}
	#footer-content .centered > div p {margin: 0}
	
	/* Header */
	.flexslider .overlay {right: 50px; top: 0; font-size: 20px; height: 100%; width: 300px}
	
	/* Images */
	#block-h360-sikyon-content .align-left, #block-h360-sikyon-content figure.align-right {text-align: center}
	#block-h360-sikyon-content .align-left img, #block-h360-sikyon-content figure.align-right img {margin: auto; width: auto}
	#block-h360-sikyon-content .align-left {margin: 10px 20px 10px 0; max-width: 49%}
	#block-h360-sikyon-content .align-right {margin: 10px 0 10px 20px; max-width: 49%}
	
	figure.align-left + figure.align-right {margin-left: 0 !important; width: 48%}
	figure.align-left + figure.align-right + p {clear: both; margin-top: 30px}
	figure img[width="450"] {width: 100% !important}
	
	/* Menu */
	#block-main-menu {margin-top: 70px}
	#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: #444; 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: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 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}

	/* News */
	#block-news-feed h2 {display: none}
	.news > header {flex-basis: 100%}
	.news.homepage > footer, .news.homepage > .view-content {flex-basis: 48%}
	.news footer #social-media-icons {border-bottom: 1px solid #DDD; padding-bottom: 10px}
	.news footer #twitter-feed {overflow-y: scroll; height: 650px}
	
	/* Teasers */
	#block-teasers-fullwidth .teaser {position: relative; left: 50%; right: 50%; margin: 0 -50vw 0; overflow: hidden; padding: 50px 30px; width: 100vw}
	#block-teasers-fullwidth .teaser-details:before {position: absolute; background: var(--primary-colour); content:''; width: 65%; height: 100%; top: 0; left: 0; transform: skewX(-20deg); transform-origin:0 0; z-index: -1}
	#block-teasers-fullwidth .teaser-image {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50%; z-index: -2}
}


/* EXTRA-WIDE */
/* ---------- */
@media only screen and (min-width: 1300px) {
	.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%}
	
	.centered {margin: auto; width: 1300px}
	
	#block-teasers-standard .teasers .teaser-details {margin: 0 20px}
	
	/* Breadcrumbs */
	#block-breadcrumbs nav {width: 1300px}
	
	/* Menu */
	#block-main-menu #horizontal-menu a {font-size: 18px}
}