/* Screen cascading style sheet for CIfA website */

/* TEMP*/
#block-menu-block-3 {background: #F4F4F4; margin-bottom: 50px; padding: 20px}
#block-menu-block-3 h2 {margin-top: 0}
#block-menu-block-3 a.active-trail {background: #731472; color: #FFF}


:root {
  --primary-colour: #731472;
}

/* **** HTML STYLES **** */
/* --------------------- */

body {
  color: #555;
  font-family: 'Montserrat', Arial;
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
}

a {color: #0E74CA; font-weight: normal; text-decoration: none !important}
a:hover {color: #B30000; text-decoration: none}

blockquote {float: left; font-style: italic; margin: 20px 30px}

.error {color: #FF0000; font-weight: bold}

h1 {color: #731472; font-size: 36px; font-weight: normal; margin: 0 0 10px 0}
h2 {color: #731472; font-size: 30px; font-weight: normal; margin: 40px 0 10px 0}
h2.anchor::before {display: block; content: " "; margin-top: -250px; pointer-events: none; visibility: hidden; height: 250px}
h2.center-rule {display: flex; align-items: center; color: #888; font-size: 36px; justify-content: center; margin: 50px 0; text-align: center; width: 100%}
h2.center-rule:before, h2.center-rule:after {border-top: 1px solid; content: ''; flex: 1 0 20px; margin: 0 20px 0 0}
h2.center-rule:after {margin: 0 0 0 20px}
h3 {color: #731472; font-size: 20px; font-weight: normal; margin: 20px 0 10px 0}

p {line-height: 150%}

ul {list-style-type: square}
article li > ul {margin-top: 10px}
.field-name-body li {margin: 8px 0}

.heavy {font-weight: 600}
.montserrat {font-family: 'Montserrat'}
.opensans {font-family: 'Open Sans'; font-size: 17px}
.calibri {font-family: Calibri; font-size: 20px; font-weight: 200}
.calibri .heavy {font-weight: 400}
.arial {font-family: Arial; font-size: 18px}
.arial .heavy {font-weight: 200}
.nexa {font-family: 'Nexa'; font-size: 18px; src: url('/sites/all/fonts/nexa_light.woff')}
.nexa .heavy {font-weight: 200}

.affix {top: 0}
.logged-in .affix {top: 62px}

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

.under-construction {background: #d6d5b0; border: 2px solid #9b9a6d; margin-bottom: 20px; padding: 10px}


/* **** LAYOUT STYLES **** */
/* ----------------------- */

* {box-sizing: border-box}

.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%}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%}

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

.centered {position: relative; margin: 0 auto; text-align: left; width: 100%; max-width: 1200px}

#content {float: left; padding: 40px 20px; min-height: 400px}
#content-container-back {float: left; background: #FFF}
#footer {background: #F3F1EF; color: #B2B2B2}
#right {padding: 40px 0 40px 20px}

.view.management {float: left; background: #F4F4F4; margin-bottom: 30px; padding: 10px; width: 100%}
.view.management .views-row {margin: 0}
.view.management .admin-button a {display: block; float: left; background: #E4E4E4; border-radius: 30px; margin-right: 20px; padding: 10px 25px}
.view.management .admin-button a:hover {background: #CCC}


/* CONTENT STYLES */
article {position: relative}
article a {text-decoration: underline}
article li {margin-bottom: 12px; line-height: 150%}
article p {line-height: 150%}


/* BANNER */
#banner {background: #F4F4F4; width: 100%}
#banner .view-content img {float: left; height: auto; width: 100%}
#banner .view-content .cifa-button {clear: both}
#banner .view-content .overlay-back {position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0,0,0,0.4); width: 100%}
#banner .view-content .overlay-front {position: absolute; display: table; bottom: 0; left: 0; right: 0; top: 0; color: #FFF; font-size: 50px; overflow: hidden; padding: 40px 100px; height: 100%; width: 100%}
#banner .view-content .overlay-front > div {display: table-cell; font-weight: bold; vertical-align: middle}
#banner [class*="views-field-edit-node"] a {position: absolute; left: 30px; bottom: 20px; background: #E4E4E4; padding: 20px}
#banner .views-field-field-banner-title {margin: 0 auto; width: 1200px}
#banner .views-field-field-banner-title .title {float: right; background: #731472; color: #FFF; font-size: 36px; margin-top: -65px; padding: 10px 20px}
#banner .views-slideshow-pager-fields {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 20}
#banner .views-slideshow-pager-fields > div {float: left; background: #FFF; border-radius: 10px; margin: 0 5px; height: 20px; width: 20px}
#banner .views-slideshow-pager-fields > div.active {background: #FFCC33}
.front #banner {background: #731472}
.not-front #banner .view-banners {border-bottom: 5px solid #731472}
.not-front #banner .view-banners .views-slideshow-controls-bottom {display: none}
.not-front #banner .view-content {z-index: 5}
.not-front #banner .view-footer {position: relative; margin: 0 auto; width: 1200px; z-index: 10}
.not-front #banner .view-footer .banner-title {position: absolute; bottom: 0; right: 0; background: #731472; color: #FFF; font-size: 34px; padding: 10px 20px}

/* BUTTONS */
a.cifa-button, .cifa-button a {display: block; float: left; background: #F4F4F4; border-radius: 30px; color: #731472; font-size: 22px; margin-top: 20px; padding: 10px 30px; text-align: center; transition: 0.3s}
a.cifa-button:hover, .cifa-button a:hover {background: #CCA622; color: #FFF}
.cifa-button.full-width a {width: 100%}
.cifa-button.purple, .cifa-button.purple a {background: #731472; color: #FFF}
.cifa-button.small, .cifa-button.small a {font-size: 18px}

.admin-links a {display: flex; background: #F4F4F4; border-radius: 30px; color: var(--primary-colour); padding: 10px 20px; transition: 0.3s}
.admin-links a:hover {background: var(--primary-colour); color: #FFF}
.edit-link {position: absolute; top: 5px; right: 5px}
.edit-link a {background: #FFF; color: #888; font-size: 14px; padding: 5px; transition: 0.3s}
.edit-link a:hover {background: #888; color: #FFF}


/* BREADCRUMB */
#block-easy-breadcrumb-easy-breadcrumb .easy-breadcrumb {font-size: 14px; margin: auto; padding: 5px 20px; width: 1200px}
#block-easy-breadcrumb-easy-breadcrumb .easy-breadcrumb_segment-separator {margin: 0 10px}


/* CAREERS */
/* delete after careers section goes live */
.page-node-38 #block-menu-menu-careers-menu,
.page-node-39 #block-menu-menu-careers-menu,
.page-node-2394 #block-menu-menu-careers-menu,
.page-node-2445 #block-menu-menu-careers-menu,
.page-node-3165 #block-menu-menu-careers-menu
{display: none}

.case-studies {display: flex; flex-direction: column}
.case-studies .view-content {display: flex; align-items: stretch; flex-wrap: wrap}
.case-studies .case-study {position: relative; display: flex; flex-direction: column; margin: 20px 1.5%; width: 30.3333%}
.case-studies .case-study-title {color: var(--primary-colour); font-size: 24px}
.case-studies .cifa-button {border-radius: 30px; margin-top: 10px}
.case-studies .cifa-button a {font-size: 18px; margin: 0}

.case-study-image {float: right; margin-left: 30px; width: 100%; max-width: 400px}
.case-study-image img {height: auto; width: 100%}
.case-study-image .field-type-text {font-size: 14px}
.node-type-careers-case-study #right .cifa-button a {margin-bottom: 30px}

/* CIVICRM OVERRIDES */
.page-civicrm .crm-container .label {color: inherit; width: auto}


/* CONTACT */
#contact-site-form {background: #F4F4F4; padding: 10px}
#block-block-35 {border-top: 1px solid #E4E4E4; margin-top: 30px; padding-top: 30px}


/* EVENTS */
#block-block-43 {border-bottom: 1px solid #E4E4E4; padding-bottom: 20px}


/* FEEDS */
.cifa-feed-body {display: block; font-size: 14px; overflow: hidden}
.cifa-feed-content {overflow: hidden}
.cifa-feed-edit {float: right; font-size: 14px}
.cifa-feed-image {display: flex; float: left; align-items: center; border: 2px solid #F4F4F4; margin-right: 15px; padding: 2px}
.cifa-feed-row {position: relative}
.cifa-feed-subtitle {color: #999}
.cifa-feed-title a {color: #731472; font-size: 18px}
.cifa-feed-wrapper {display: block; overflow: hidden}
.feed-admin-links {float: right; font-size: 12px}


/* FOOTER */
.region-footer {float: left; padding: 20px; width: 100%}

#block-block-27 p {font-size: 18px}
#block-block-46 {float: left; clear: left; margin-top: 20px; height: auto; width: 200px}

#footer .block-menu-block, #footer .block-menu {float: left; margin-right: 20px; width: 140px}
#footer .block-menu-block .nav a, #footer .block-menu .nav a {display: block; border-bottom: 1px solid #908A84; color: #908A84; font-size: 12px; padding: 8px 5px}
#footer .block-menu-block .nav a:hover, #footer .block-menu .nav a:hover {background: #908A84; color: #FFF}

/* GRAPHICAL LINKS */
.view-graphical-links .views-row .views-field-field-link-title {color: #731472; font-size: 24px}
.view-graphical-links .views-row .views-field-field-single-image {margin-bottom: 10px}


/* HEADER / PRE-HEADER */
#preheader {background: #731472}
#preheader .region-preheader {position: relative; padding: 0 10px}
#preheader #block-block-41, #preheader #block-block-42 {float: right; border-color: #834C82; border-style: solid; border-width: 0 1px; color: #FFF; margin-right: 10px; padding: 8px 20px}
#preheader #block-block-41 a, #preheader #block-block-42 a {color: #FACF4C}
#preheader #block-superfish-2 {float: left}
#preheader #block-superfish-2 .menu li a {display: block; color: #FFF; padding: 12px 10px}
#preheader #block-superfish-2 .menu li a:hover {background: #560D55}


/* HOMEPAGE */
.front article {display: none}
.front #block-views-banners-block {float: left; width: 70%}

.view-buttons .views-row .views-field-field-link-description {border-color: #E4E4E4; border-style: solid; border-width: 1px 0; margin: 10px 0 5px 0; padding: 5px 0}
.view-buttons .views-row .views-field-field-link-title {background: #731472; color: #FFF; font-size: 18px; padding: 5px 10px}

.view-news-new .view-footer {float: left; border-top: 1px #E4E4E4 dashed; padding-top: 10px; width: 100%}
.view-news-new .views-row {float: left; margin: 10px 0; width: 100%}
.view-news-new .views-row .cifa-feed-image a {display: block; text-align: center; width: 100%}
.view-news-new .views-row .cifa-feed-image img {margin: auto}

#homepage_add1 {background-color: #6A2C69; background-image: url("/sites/cifa.heritech.net/themes/htec_bootstrap/images/membership-back.jpg")}
#homepage_add2 .region-homepage-add2 {float: left; border-top: 1px dashed #E4E4E4; margin-top: 20px; padding: 20px 20px 40px}

#block-block-4 {margin: 20px 0}
#block-block-4 .commission-content {float: left; padding-right: 30px; width: 60%}
#block-block-4 .search-box {float: right; background: #F4F4F4; padding: 20px; width: 40%}
#block-block-4 .search-box button {margin-bottom: 10px; width: 100%}
#block-block-4 .search-box h3 {margin-top: 0}
#block-block-4 .search-box input {font-size: 20px; margin-bottom: 5px; padding: 5px; width: 100%}


/* IMAGES */
#block-system-main [class*="image-"]:not(.no-border) {background: #F4F4F4; border: 2px solid #EEE; margin-bottom: 10px; padding: 10px; text-align: center}

figure + figure + p {
	clear: both;
}

.image-captioned img {cursor: pointer}
.image-left, img.left {float: left; margin-right: 20px; max-width: 370px}
.image-right, img.right {float: right; margin-left: 20px; max-width: 370px}

figcaption {color: #46617A; font-size: 14px; margin-top: 5px; text-align: left; width: 100%}

.node-page img {height: auto; max-width: 100%}


/* JOIN */
.node-type-testimonies .field-name-field-image {float: right; margin: 0 0 20px 20px}
.node-type-testimonies .field-name-field-testimony-strapline {color: #888; font-size: 22px; margin-bottom: 20px}
.view-testimonies {margin-top: 30px}
.view-testimonies h3 {float: left; border-color: #E4E4E4; border-style: solid; border-width: 2px 0; margin: 10px 0; padding: 10px 0; width: 100%}
.view-testimonies .views-row {float: left; margin: 10px 0; padding-right: 20px; width: 50%}
.view-testimonies .views-row-odd {clear: both}
.view-testimonies .views-row .views-field-edit-node {clear: both; font-size: 12px}
.view-testimonies .views-row .views-field-field-image {float: left; margin-right: 10px}


/* JIS */
.jis-adverts .views-row {border-top: 1px solid #808080; margin-top: 20px; padding-top: 20px}
.jis-adverts .views-field-edit-node {text-align: right}
.jis-adverts .views-field-field-jis-closing {display: block; clear: both; font-size: 1.3em; font-weight: bold; margin-top: 10px}
.jis-adverts .views-field-field-email {display: block; clear: both}
.jis-adverts .views-field-field-jis-employer {color: #808080; font-size: 1.3em; font-weight: bold; margin-bottom: 10px}
.jis-adverts .views-field-field-jis-pay {font-weight: bold}
.jis-adverts .views-field-field-jis-reference, .view-jis .views-field-field-jis-timespan {display: block; clear: both; font-weight: bold; margin-top: 10px}
.jis-adverts .views-field-field-jis-telephone {display: block; clear: both}
.jis-adverts .views-field-field-url {display: block; clear: both}
.jis-adverts .views-field-title {color: #731472; font-size: 1.5em; width: 100%}

.jist-adverts h2 {border-color: #DDD; border-style: solid; border-width: 1px 0; margin: 5px 0 10px; padding: 10px 0}
.jist-adverts .jist-additional {border-top: 1px solid #DDD; font-size: 12px; margin-top: 10px; padding-top: 5px}
.jist-adverts .jist-advert {float: left; width: 100%}
.jist-adverts .jist-advert:not(first-child) {border-top: 1px dashed #CCC; margin-top: 30px; padding-top: 30px}
.jist-adverts .jist-created {float: left}
.jist-adverts .jist-details {overflow: hidden}
.jist-adverts .jist-employer {font-size: 20px}
.jist-adverts .jist-logo {float: left; margin-right: 20px}
.jist-adverts .jist-logo img {border: 5px solid #F4F4F4}
.jist-adverts .jist-logo .cifa-button a {font-size: 18px; width: 100%}
.jist-adverts .jist-ro {color: var(--primary-colour); font-size: 12px}
.jist-adverts .view-filters {background: #F4F4F4; padding: 10px}
.jist-adverts .view-filters .views-exposed-widget {margin-right: 20px}
.jist-adverts .view-filters .views-submit-button {clear: both}
.jist-table {border-collapse: separate; border-spacing: 3px}
.jist-table td {padding: 5px}
.jist-table td:first-child {background: #F4F4F4; font-weight: bold; text-align: right; min-width: 150px}

#edit-field-jis-ro-value-wrapper .form-control {display: initial; background: none; border: 0; margin-top: 15px; height: auto; width: auto}

.node-type-jist-advert .jist-bullet {border-left: 5px solid var(--primary-colour); margin: 10px 0 0 20px; padding-left: 10px}
.node-type-jist-advert .jist-closing {font-size: 18px; margin-bottom: 30px}
.node-type-jist-advert .jist-employer {border-bottom: 1px solid #CCC; font-size: 22px; margin-bottom: 10px; padding-bottom: 10px}
.node-type-jist-advert .jist-logo {float: right; margin: 0 0 20px 30px}
.node-type-jist-advert .jist-logo.multiple-images {max-width: 250px}
.node-type-jist-advert .jist-ro {text-align: center}


/* MEMBERS AREA */
#block-block-33 a {font-size: 18px; width: 100%}
#block-block-33 h2 {margin-top: 0}
#block-block-33 .username {font-size: 18px; font-weight: bold}


/* MEMBERSHIP */
.grade-diagram {display: table; float: left; margin: 20px 0; width: 100%}
.grade-diagram-arrow {display: table-cell; text-align: center; vertical-align: middle; width: 8%}
.grade-diagram-box {display: table-cell; background: #F4F4F4; border: 1px solid #BBB; font-size: 22px; padding: 10px; text-align: center; width: 19%}
.membership-apply .cifa-button {float: left; margin: 10px auto; width: 100%}
.view-membership-grades .views-row .cifa-button a {width: 100%}

#block-views-buttons-block .views-row .views-field-field-button-title {color: #731472; font-size: 24px}
.view-membership-grades .views-row .views-field-title a {color: #731472; font-size: 28px}

/* PLANNING CASE STUDIES */
#planning-cs-details > h2 {font-size: 22px}
#planning-cs-details [id^="taxonomy-term-"] {border-left: 5px solid #731472; margin: 0 0 15px 20px; padding-left: 15px}
.field-name-field-planning-cs-site, .field-name-field-planning-cs-dates {color: #888; font-size: 24px}

#block-views-exp-planning-cs-feed {background: #F4F4F4; margin-bottom: 30px; padding: 20px}
#block-views-exp-planning-cs-feed #edit-secondary-wrapper {margin-top: 15px; width: 100%}
#block-views-exp-planning-cs-feed .form-submit {margin: 27px 10px 0 0}
#block-views-exp-planning-cs-feed .form-checkboxes {border: 0; padding: 0; height: auto; -webkit-box-shadow: none; -box-shadow: none}
#block-views-exp-planning-cs-feed .form-checkboxes .form-item {display: flex; padding: 4px}
#block-views-exp-planning-cs-feed .form-checkboxes .form-item:hover {background: #F4F4F4}
#block-views-exp-planning-cs-feed .form-checkboxes .form-item .form-control {display: initial; margin: 0 10px 0 0; height: auto; width: auto}
#block-views-exp-planning-cs-feed .form-checkboxes .form-item label {font-weight: normal; margin: 0}
.view-planning-cs .attachment {display: flex; border-color: #DDD; border-style: solid; border-width: 2px 0; margin-bottom: 20px; padding: 10px}
.view-planning-cs .view-content {display: flex; flex-direction: column}
.view-planning-cs .case-study {position: relative; display: flex; border-bottom: 1px dashed #DDD; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px}
.view-planning-cs .case-study .admin-link {position: absolute; bottom: 10px; right: 0; font-size: 14px}
.view-planning-cs .case-study .cifa-button a {font-size: 18px}
.view-planning-cs .case-study .cs-details {padding-right: 20px; width: 80%}
.view-planning-cs .case-study .cs-title {color: #731472; font-size: 24px}

/* PROJECTS */
.view-projects .views-row {border-bottom: 1px dashed #E5E5E5; padding: 20px 0 10px 0}
.view-projects .project-details {overflow: hidden}
.view-projects .project-dates {font-size: 22px; margin-bottom: 5px}
.view-projects .project-title a {color: #731472; font-size: 28px}
.view-projects .views-row .views-field-edit-node {font-size: 14px; margin-top: 10px; text-align: right}
.view-projects .views-row .views-field-field-image {display: flex; float: left; align-items: center; border: 2px solid #F4F4F4; margin-right: 10px; justify-content: center; padding: 10px; height: 150px; width: 150px}
.view-projects .views-row .views-field-field-image img {height: auto; width: 100%}

/* RIGHT */
.region-right .block-menu, .region-right [id^="block-menu-block-"] {background: #F4F4F4; padding: 20px}
.region-right .block-menu h2, .region-right [id^="block-menu-block-"] h2 {margin: 0 0 10px}
.region-right .block-menu .nav a, .region-right [id^="block-menu-block-"] .nav a {color: #731472; padding: 10px 5px}
.region-right .block-menu .nav a:hover, .region-right [id^="block-menu-block-"] .nav a:hover {background: #EDE2ED}
.region-right .block-menu .nav :not(:last-child), .region-right [id^="block-menu-block-"].nav :not(:last-child) {border-bottom: 1px solid #731472}
.region-right .block-menu .active-trail a, .region-right .block-menu .active-trail a:hover  {background: #731472; color: #FFF; border-left: 5px solid #D5C115; padding-left: 10px}
.region-right .block-menu .nolink {display: block; color: #000; font-size: 22px; font-weight: bold; margin-top: 30px}

.region-right [id^="block-menu-block-"] .active > a {background: #731472; color: #FFF; border-left: 5px solid #D5C115; padding-left: 10px}
.region-right [id^="block-menu-block-"] .active > a:hover {background: #731472}
.region-right [id^="block-menu-block-"] .active-trail ul {padding-left: 20px}
.region-right [id^="block-menu-block-"] .expanded.active-trail > a {background: #731472; border: 0}


/* RO SEARCH */
.view-civicrm-contact-distance-search .displayname {float: left; width: auto}
.view-civicrm-contact-distance-search .image {float: right; width: auto !important}
.view-civicrm-contact-distance-search .image .views-field {background: none !important; border: 0 !important}
.view-civicrm-contact-distance-search .views-row {float: left; border-color: #E4E4E4 !important; border-style: dashed !important; border-width: 0 0 1px !important; margin-bottom: 20px !important; padding-bottom: 20px !important; width: 100%}
.view-civicrm-contact-distance-search .view-filters {background: #F4F4F4; margin: 20px 0; padding: 10px}
.view-civicrm-contact-distance-search .view-filters #edit-postcode-from-wrapper {margin-right: 20px}
.view-civicrm-contact-distance-search .view-filters #edit-advanced-wrapper {border-color: #CCC; border-style: solid; border-width: 2px 0; margin: 20px 0 10px; padding: 0; width: 100%}
.view-civicrm-contact-distance-search .view-filters #edit-advanced-wrapper fieldset {border: 0}
.view-civicrm-contact-distance-search .view-filters #edit-advanced-wrapper .panel-heading {border: 0}
.view-civicrm-contact-distance-search .view-filters .panel-title {font-size: 16px !important}
.view-civicrm-contact-distance-search .view-filters .bef-checkboxes input {display: initial; float: left; margin-left: 0; margin-right: 7px; height: auto; width: auto}
.view-civicrm-contact-distance-search .view-filters .bef-checkboxes label {display: block; margin-left: 20px}
.view-civicrm-contact-distance-search .view-filters .bef-checkboxes .form-item {margin: 10px 0}
.view-civicrm-contact-distance-search .view-filters .form-checkboxes {display: initial; border: 0; box-shadow: none; color: inherit; height: auto; width: auto}
.view-civicrm-contact-distance-search .view-filters .views-submit-button {clear: both; margin-right: 10px}


/* SEARCH */
#block-views-exp-search-page {background: #F4F4F4; padding: 10px}
#block-views-exp-search-page .form-type-textfield input {font-size: 22px; padding: 5px 10px; height: auto; width: 100%}
#block-views-exp-search-page .views-submit-button {clear: both}
#block-views-exp-search-page .views-submit-button button {margin-top: 10px}
.views-exposed-form .views-exposed-widget {padding: 0}
.view-search .view-header {float: left; border-color: #DDD; border-style: solid; border-width: 2px 0; font-size: 18px; margin: 10px 0 20px; padding: 5px 0; width: 100%}
.view-search .view-header .pages a.selected {color: #FF0000}
.view-search .view-header .results {float: left}
.view-search .views-row {float: left; width: 100%}
.view-search .views-row .search-details {border-color: #E4E4E4; border-style: solid; border-width: 1px 0; font-size: 14px; margin: 5px 0 30px; padding: 5px 0; overflow-wrap: break-word; word-wrap: break-word;}
.view-search .views-row .views-field-title {font-size: 22px}
.view-search .views-row .views-field-type {color: #731472}


/* SECTIONS */
#block-views-sections-block h2.collapse-toggle {font-size: 24px}
#block-views-sections-block li {margin: 5px 0}
#block-views-sections-block .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%}
#block-views-sections-block .btn:active {border-color: #4B65A0; color: #4B65A0}
#block-views-sections-block .btn:hover {background: #F4F4F4}
#block-views-sections-block .btn svg {float: right; margin-right: 5px; height: auto; width: 33px}
#block-views-sections-block .btn svg rect {fill: #CCC}
#block-views-sections-block [aria-expanded="true"] .vert {display: none}
#block-views-sections-block .collapse {margin-bottom: 30px}


/* TOOLKITS */
#block-views-5dd26206471657b9b19e1bee7e768e14 {margin-top: 30px} /* Download this Page block */

#block-block-7 {position: absolute; bottom: 5px; right: 20px}
#block-block-7 a {color: #731472; text-transform: uppercase}

.region-footer {position: relative}
#block-block-8 {position: absolute; bottom: 20px; left: 20px}
#block-block-8 a {color: #666; font-size: 14px}

/* Further Guidance page */
#node-3471 a {display: block; border-left: 5px solid #E4E4E4; margin: 5px 0 0 10px; overflow-wrap: break-word; padding-left: 10px}
#node-3471 p {margin-bottom: 20px}

.toolkit-table {border: 0; border-collapse: separate; border-spacing: 5px}
.toolkit-table td, .toolkit-table th {border: 0; padding: 5px}
.toolkit-table td:not([class^="header"]) {border-bottom: 1px dashed #DDD}
.toolkit-table .header1 {background: #731472; color: #FFF; font-weight: bold}
.toolkit-table .header2 {background: #E6D5E6; color: #731472}

.resource-glossary {margin-top: 20px}
.resource-glossary .views-field {padding: 15px 10px}
.resource-glossary .views-field-name {color: #731472; font-weight: bold}

.view-selection-toolkit-downloads h3 {float: left; clear: both; margin-top: 30px; width: 100%}
.view-selection-toolkit-downloads .views-row {float: left; text-align: center; padding: 2%; width: 25%}
#right .view-selection-toolkit-downloads .views-row {padding: 0; width: 100%}
.view-selection-toolkit-downloads .views-row img {height: auto; width: 100px}
.view-selection-toolkit-downloads .views-row .download-button {background: #F4F4F4; border: 2px solid #E4E4E4; padding: 10px}
.view-selection-toolkit-downloads .views-row .download-button .filesize {color: #808080}
.view-selection-toolkit-downloads .views-row .download-button .title a {display: block; color: #731472; margin: 5px 0}

.download-page .views-row {background: #F4F4F4; border: 0; margin-top: 20px; width: 100%}
.org-logo {float: left; padding: 20px 50px; height: 120px !important; width: auto}


/* SOCIAL MEDIA */
#block-block-40 {float: right; width: 47%}
#block-block-40 .social-media-link {display: block; float: left; color: #FFF; margin-top: 5px; padding: 5px; height: 40px; text-align: middle; width: 100%}
#block-block-40 .social-media-link.facebook {background: #3C5999}
#block-block-40 .social-media-link.facebook:hover, #block-block-40 .social-media-link.linkedin:hover, #block-block-40 .social-media-link.twitter:hover {background: #AC8118; color: #FFF}
#block-block-40 .social-media-link.linkedin {background: #0077B5}
#block-block-40 .social-media-link.twitter {background: #409AD6}
#block-block-40 .social-media-link img {margin-right: 5px; height: 30px; width: 30px}


/* STAFF / DIRECTORS */
.view-directors, .view-staff {margin-top: 20px}
.view-directors .views-row, .view-staff .views-row {float: left; margin-bottom: 40px; width: 100%}
.view-directors .views-row .views-field-field-image, .view-staff .views-row .views-field-field-image {float: left; border: 2px solid #C0C0C0; margin: 10px 20px 0 0; padding: 2px}
.view-directors .views-row .views-field-body, .view-staff .views-row .views-field-field-user-desc {overflow: hidden}
.view-directors .views-row .views-field-title, .view-staff .views-row .views-field-field-user-fullname {color: #731472; font-size: 28px}
.view-directors .views-row .views-field-field-user-role, .view-staff .views-row .views-field-field-user-role {font-size: 22px; margin-bottom: 5px}
.view-staff .attachment {display: flex; margin-bottom: 30px}



/* @MEDIA SCREEN SIZE STYLES */
/* ========================= */

/* ----- SCREENS UP TO 600PX ----- */
/* =============================== */

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

	#right {padding-top: 0}
	
	/* GENERAL */
	a.mobile-button, div.mobile-button a {display: block; background: #44AC33; color: #FFF; margin-top: 5px; padding: 10px}
	
	#block-system-main .field-name-body img {width: 100%}

	/* BANNER */
	#banner {background: #731472; color: #FFF; font-size: 20px}
	#banner h2 {display: none}
	
	/* Homepage intro */
	#block-block-39 {padding: 20px}
	
	/* FOOTER */
	#block-block-27 {margin-bottom: 30px}
	
	/* GRAPHICAL LINKS */
	.view-graphical-links .views-row {float: left; margin: 20px 0; width: 100%}

	/* HOMEPAGE */
	#block-block-3 {font-size: 14px}
	#block-views-news-new-homepage .views-row img {height: auto; width: 80px}
	.view-buttons .views-row {float: left; margin: 10px 0; width: 100%}
	
	/* MEMBERSHIP */
	#block-views-buttons-block .views-row {margin-bottom: 40px}
	.view-membership-grades .views-row {float: left; margin-bottom: 40px; width: 100%}
	
	/* MENUS */
	#block-menu-menu-menu-pre-header-menu .nav li a {float: left; color: #FFF; font-size: 15px; padding: 10px 0; text-align: center; width: 33.3%}
	#block-menu-menu-menu-pre-header-menu .nav li .caret {display: none}
	
	#block-superfish-1 {float: left; background: #731472; padding: 10px 0 10px 10px; width: 100%}
	#block-superfish-1 a {color: #FFF; padding-bottom: 10px}
	#block-superfish-1 #superfish-1-accordion li {font-size: 20px; margin: 10px 0 0 20px}
	#block-superfish-1 #superfish-1-accordion li a {color: #FFF}
	#block-superfish-1 .nolink {float: left; border-bottom: 1px solid #C0C0C0; color: #FFCC33; padding-bottom: 10px; width: 100%}
	#block-superfish-1 .separator {display: none}
	#block-superfish-1 .sf-accordion-toggle {font-size: 22px}

	/* SEARCH */
	.view-search .view-header .pages {clear: both}
	
	/* SOCIAL MEDIA */
	#block-multiblock-1 {float: right; clear: both; margin: 10px 0}
	
	/* TEAM & PARTNERS */
	.view-partners .views-row {text-align: center}
	.view-partners .views-row img {margin: 0 auto}
	
	#block-views-team-block .views-row {border-bottom: 1px dashed #E4E4E4; padding-bottom: 15px}
	#block-views-team-block .views-row-last {border: 0; padding: 0}
	#block-views-team-block .views-field-nothing {float: left; clear: both; margin-top: 10px}
	
	/* UPDATES */
	.not-front #block-views-updates-block-1 {border-top: 1px dashed #E4E4E4; padding-top: 30px}
}


/* ----- SCREENS UP TO 1024PX ----- */
/* =============================== */
@media only screen and (max-width: 1024px) {
	.view-civicrm-contact-distance-search .image {float: left}
}


/* ----- SCREENS ABOVE 1024PX ----- */
/* ================================ */

@media only screen and (min-width: 1024px) {
	/* BANNER */
	#banner {position: relative; margin-top: 140px}
	
	/* FOOTER */
	#block-block-27 {float: right; text-align: right}
	#block-block-27 img {width: 300px}
	
	/* GRAPHICAL LINKS */
	#block-views-graphical-links-homepage {float: left; width: 100%}
	.view-graphical-links .view-content {margin-left: -2%}
	.view-graphical-links .views-row {float: left; margin: 10px 0 20px; padding-left: 2%; width: 33.3%}
	.view-graphical-links .views-row:nth-child(3n+1) {clear: both}

	/* HEADER */
	#header {position: fixed; background: #FFF; border-bottom: 5px solid #C0C0C0; height: 140px; z-index: 100}
	#header .region-header {position: relative; float: left; height: 100%; width: 100%}
	#header #logo {position: absolute; left: 10px; bottom: 0; height: auto; width: 250px}

	#mainheader .centered {height: 95px}

	#block-block-1 img {margin-left: 20px}
	#block-block-38 {float: right; margin: 5px 10px}
	#block-block-38 img {float: left; margin: 0 3px; height: auto; width: 30px}
	
	/* HOMEPAGE */
	.front #block-system-main {float: left; width: 60%}
	
	#block-block-3 {color: #FFF; padding: 0 20px}
	#block-block-3 .cifa-button a {float: left; padding: 10px 30px}
	#block-block-3 h2 {color: #FFF; margin-top: 20px}
	#block-block-3 img {margin: -40px 0 25px 30px}
	#block-block-3 p a, #block-block-3 li a {color: #4CDAFD}
	#block-block-3 strong {color: #FFD512}
	
	#block-block-39 {float: right; padding: 20px; width: 30%}
	#block-block-39 h2 {color: #FFF; font-size: 50px}
	#block-block-39 p {color: #FFF; font-size: 25px}
	#block-block-39 .cifa-button {margin-top: 20px}
	
	#block-views-news-new-homepage {float: left; width: 47%}
	.view-news-new .views-row .cifa-feed-image {height: 158px; width: 158px}
	
	/* MEMBERSHIP */
	.membership-apply {float: left; background: #F4F4F4; border: 2px solid #C0C0C0; margin: 20px 3%; padding: 10px; text-align: center; width: 44%}
	.membership-apply h2 {margin-top: 0}
	
	#block-menu-block-2 {background: #F4F4F4; margin-bottom: 30px; padding: 20px}
	#block-menu-block-2 h2 {margin-top: 0}
	#block-menu-block-2 li ul {padding-left: 20px}
	
	#block-views-buttons-block .view-content {margin-left: -2%}
	#block-views-buttons-block .views-row {float: left; margin: 20px 0; padding-left: 2%; width: 33.3%}
	#block-views-buttons-block .views-row:nth-child(3n+1) {clear: both}
	
	#block-views-membership-grades-pro-grades {float: left; width: 100%}
	.view-membership-grades .view-content {margin-left: -2%}
	.view-membership-grades .views-row {float: left; padding-left: 2%}
	.view-membership-grades .views-row img {margin: 10px 0 20px}
	.view-membership-grades .views-row li {margin: 5px 0}
	
	.view-display-id-all_grades .view-content {margin-left: -4%}
	.view-display-id-all_grades .views-row {margin-bottom: 40px; padding-left: 4%; width: 50%}
	.view-display-id-all_grades .views-row:nth-child(2n+1) {clear: both}
	.view-display-id-pro_grades .views-row {width: 33.3%}
	
	/* MENUS */
	#block-superfish-1 {position: absolute; bottom: 0; right: 20px}
	#block-superfish-1 #superfish-1 > li > a {color: #731472; padding: 10px 12px; text-transform: uppercase}
	#block-superfish-1 #superfish-1 li a:hover {background: #FCF6FC}
	#block-superfish-1 #superfish-1 li > ul li a {color: #731472; font-size: 14px; line-height: 1.3; padding: 8px 5px}
	#block-superfish-1 #superfish-1 li > ul li a:hover {background: #F0E5F0}
	
	#block-superfish-1 .sf-megamenu {background: #FCF6FC; border-radius: 0; padding: 0 !important; top: 41px; width: 100% !important}
	#block-superfish-1 .sf-megamenu .sf-megamenu-wrapper {width: 100% !important}
	#block-superfish-1 .sf-megamenu .sf-megamenu-wrapper > ol {width: 100% !important}
	#block-superfish-1 .sf-megamenu div.sf-megamenu-column {width: 100% !important}
	#block-superfish-1 .sf-megamenu li.sf-megamenu-column {float: left; padding: 15px; min-width: 25%; width: 25%}
	#block-superfish-1 .sf-megamenu li:nth-child(4n+1) {clear: both}
	#block-superfish-1 .sf-megamenu ol {min-width: 25%; width: 100% !important}
	#block-superfish-1 .sf-megamenu .nolink {display: block; border-bottom: 1px solid #CCC; color: #333; font-size: 14px; padding-bottom: 5px}
	#block-superfish-1 .sfHover {background: #FCF6FC}
	#block-superfish-1 .sf-menu > li {position: static}

	#superfish-2 > li > ul {background: #9D679E; border-radius: 0; padding: 0 !important}
	#superfish-2 .nolink {background: #731472; color: #FFF; font-size: 14px; padding: 10px}
	
	#menu-5827-1 {width: 75% !important}
	#menu-5827-1 > .sf-megamenu-column {width: 100% !important}
	#menu-5827-1 ol {column-count: 3; column-fill: auto; max-height: 250px; width: 100% !important}
	
	/* REGISTERED ORGANISATIONS */
	.view-civicrm-contact-distance-search .view-filters .bef-checkboxes {column-count: 3}
	
	/* RIGHT */
	#block-block-33 {margin-bottom: 40px}
	#block-multiblock-1 h2 {margin-top: 0}
	
	/* SEARCH */
	.view-search .view-header .pages {float: right}
	
	/* TEAM AND PARTNERS */
	.view-partners .views-row .views-field-field-image {float: left; margin-right: 30px}
	
	/* SOCIAL MEDIA */
	#block-block-37 {float: right; width: 47%}
	.twitter-button {margin-top: 10px}
	.twitter-feed {overflow-y: scroll; height: 600px}
}