/*
Theme Name: Shipston CSS
Description: WordPress theme designed by Wetdog Creative
Author: Wetdog Creative
Author URI: https://www.wetdogcreative.co.uk
Version: 1.0
*/

@font-face {
    font-family: 'gillsans';
    src: url('fonts/GillSans.woff2') format('woff2'),
        url('fonts/GillSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gillsans';
    src: url('fonts/GillSans-SemiBold.woff2') format('woff2'),
        url('fonts/GillSans-SemiBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*
================================================================================

  Reset

================================================================================
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
================================================================================

  Base

================================================================================
*/

/* Typography */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-family: 'gillsans', sans-serif; font-size: 25px; line-height: 1em; color: #00655f; }
h1, h2, h3, h4 { font-family: 'fields', serif; font-weight: 500; line-height: 1em; }
h1, h2 { font-size: 59px; line-height: 1.1em; -webkit-font-smoothing: antialiased; margin-bottom: 1em; }
h1 em, h2 em { font-style: normal; font-weight: 700; }
h3 { font-size: 34px; line-height: 1.1em; margin-bottom: 1em; }
h4 { font-size: 25px; }
p { line-height: 1.4em; margin-bottom: 1.4em; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 0.8em; }

/* Lists */
ul { list-style-type: disc; margin: 0 0 1.4em 2em; }
ol { list-style-type: decimal; margin: 0 0 1.4em 2em; }
ul li, ol li { margin-bottom: 0.7em; line-height: 1.4em; }
ul.no-list, ol.no-list, nav ul, ul.gform_fields { list-style-type: none; margin: 0px; padding: 0px; }
ul.no-list li, ol.no-list li, nav ul li, ul.gform_fields li { margin: 0px; padding: 0px; }

/* Navigation */
a { outline: none; text-decoration: none; transition: 0.3s; color: #00655f; }
a:hover {  }

/* Buttons */
.button { cursor: pointer; font-family: inherit; font-size: inherit; -webkit-appearance: none; border-radius: 10px; background: #00655f; color: #fff; font-family: 'fields', serif; font-size: 39px; line-height: 1em; -webkit-font-smoothing: antialiased; display: inline-block; padding: 23px 15px 20px; box-shadow: 0 0 10px rgba(0,0,0,0.3); transition: 0.3s; }
.button:hover { box-shadow: 0 0 20px rgba(0,0,0,0.5); }

/* Text Selection */
::-moz-selection { background: #333; color: #fff; text-shadow: none; }
::selection { background: #333; color: #fff; text-shadow: none; }

/* Misc */
img { max-width: 100%; height: auto; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/* Enable Box Sizing */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


/*
================================================================================

  Page

================================================================================
*/

body { background: #bfe1ca; }
html, body { scroll-behavior: smooth; }
.wrapper { max-width: 1300px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

.alignleft { float: left; margin: 0 0 30px 30px; }
.alignright { float: right; margin: 0 30px 30px 0; }

/*
================================================================================

  Header

================================================================================
*/

.page-header { background: #00655f url(images/divider-light.png) center bottom -10px no-repeat; background-size: 100% 48px; position: relative; }
.page-header .wrapper { display: flex; padding-top: 48px; padding-bottom: 80px; align-items: flex-end; justify-content: space-between; }
.site-logo { display: block; width: 372px; }
.site-logo:hover { opacity: 0.5; }
.main-nav { -webkit-font-smoothing: antialiased; margin-bottom: 13px; margin-left: 30px; }
.main-nav, .main-nav ul { display: flex; }
.main-nav ul { gap: 40px; padding-top: 3px; }
.main-nav ul li { font-family: 'fields', serif; line-height: 1em; white-space: nowrap; }
.main-nav a { color: #87c69b; }
.main-nav a:hover { color: #fff; }
.site-social { display: flex; gap: 5px; margin-left: 60px; }
.site-social a { display: block; width: 30px; height: 30px; }
.social-facebook { background: url(images/icon-facebook.png) 0 0 no-repeat; background-size: 100% auto; }
.social-facebook:hover { background-image: url(images/icon-facebook-white.png); }
.social-gofundme { background: url(images/icon-gofundme.png) 0 0 no-repeat; background-size: 100% auto; }
.social-gofundme:hover { background-image: url(images/icon-gofundme-white.png); }

#btn-nav {
  position: relative;
  top: -9px;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  transform: rotate(0deg);
  transition: 0.5s;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  display: none;
  border: none;
  outline: none;
  border-radius: 0;
  min-width: 0;
}

#btn-nav span {
  display: block;
  position: absolute;
  height: 3px;
  width: 30px;
  background: #87c69b;
  border-radius: 2px;
  opacity: 1;
  right: 10px;
  transform: rotate(0deg);
  transition: 0.5s;
}

#btn-nav:hover span {
	background: #fff;
}

#btn-nav span:nth-child(1) {
  top: 14px;
}

#btn-nav span:nth-child(2) {
  top: 24px;
}

#btn-nav span:nth-child(3) {
  top: 34px;
}

#btn-nav.open span:nth-child(1) {
  top: 24px;
  transform: rotate(-135deg);
}

#btn-nav.open span:nth-child(2) {
  opacity: 0;
  right: -25px;
}

#btn-nav.open span:nth-child(3) {
  top: 24px;
  transform: rotate(135deg);
}

/*
================================================================================

  Main

================================================================================
*/

.page-main { background: url(images/tree-white.png) calc( 50% - 750px ) 20px no-repeat; background-size: 900px auto; padding-top: 60px; position: relative; }
.page-main::after, .page-footer::before { content: ''; display: block; width: 100%; height: 48px; background: url(images/divider-light.png) center top no-repeat; background-size: 100% 48px; position: absolute; left: 0; right: 0; bottom: -80px; z-index: 1; }
.inner-page-main { padding-bottom: 100px; }
.inner-page-main::after { display: none; }

.col-main { max-width: 900px; margin: 0 auto; min-height: 500px; }
.col-main h1 { text-align: center; }
.col-main h2 { font-size: 39px; border-top: solid 2px rgba(0,101,95,0.1); padding-top: 40px; margin-top: 80px; }
.col-main h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.homepage-intro { max-width: 50%; text-wrap: balance; }
.page-main .image img { position: relative; z-index: 2; display: block; margin-bottom: -150px; }

.content p:last-child { margin-bottom: 0; }

.cols { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 50px; margin-bottom: 60px; }

.page-secondary { background: #fff url(images/divider-white.png) center top no-repeat; background-size: 100% 48px; padding: 120px 0 60px; }
.page-secondary h2 { font-weight: 700; }
.page-secondary h3 { -webkit-font-smoothing: antialiased; }

.partner-intro { max-width: 675px; }
.partner-section { margin-bottom: 60px; }
.partner-section:last-of-type { margin-bottom: 0; }
.partner-section h4 { border-bottom: solid 2px #bfe1ca; margin-bottom: 1em; padding-bottom: 0.4em; font-weight: 700; -webkit-font-smoothing: antialiased; }
ul.partner-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem; width: 100%; padding: 60px 0; }
ul.partner-logos li { display: flex; justify-content: center; align-items: center; flex: 1 1 calc(25% - 2rem); }
ul.partner-logos a:hover { opacity: 0.5; }
.partner-section:nth-child(4) ul.partner-logos { gap: 5rem; }
.partner-section:nth-child(4) ul.partner-logos li { max-width: 200px; }

.section-bottom { background: url(images/tree-white.png) calc(50% + 700px) 40px / 900px auto no-repeat; }

.section-contact { position: relative; background: url(images/divider-light-whitebg.png) center top / 100% 27px no-repeat; overflow: hidden; min-height: 800px; }
.section-contact .wrapper { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 80px; }
.contact-heading { max-width: 50%; }
.contact-heading h2 { font-weight: 700; }
.contact-content { max-width: 68%; }
.contact-content ul { list-style-type: none; margin: 50px 0; padding: 0; font-family: 'fields', serif; -webkit-font-smoothing: antialiased; }
.contact-content ul li { margin: 0 0 0.5em; padding: 0; font-size: 33px; }
.contact-content ul li:last-child { margin-bottom: 0; }
.contact-content ul strong { font-weight: 700; display: inline-block; width: 100px; }
.contact-content a:hover { opacity: 0.5; }
.contact-image { position: absolute; top: 80px; right: -9%; max-width: 42%; }

.section-donate { padding-bottom: 150px; }
.section-donate .wrapper { position: relative; }
.donate-content { max-width: calc(100% - 350px); }
.donate-content h2 { max-width: 470px; }
.donate-content p:last-child { margin-bottom: 0; }
.section-donate .button { position: absolute; top: 195px; right: 40px; }

.page-main-error { text-align: center; }

/*
================================================================================

  Footer

================================================================================
*/

.page-footer { background: #00655f; position: relative; }
.page-footer::before { background-image: url(images/divider-dark.png); bottom: auto; top: -30px; }
.page-footer .wrapper { position: relative; z-index: 2; padding-top: 50px; padding-bottom: 150px; }
.page-footer, .page-footer a { color: #fff; }
.page-footer a:hover { opacity: 0.5; }
.page-footer p { margin: 0; }

.footer-main { margin-bottom: 50px; }
.footer-bottom { display: flex; justify-content: space-between; }
.footer-nav ul { display: flex; justify-content: flex-start; }
.footer-nav ul, .footer-credit { font-size: 20px; }
.footer-nav ul li::before { content: '|'; margin: 0 0.4em; }
.footer-nav ul li:first-child::before { display: none; }

/* CookieYes banner */
.cky-btn-accept, .cky-btn-reject, .cky-btn-preferences, .cky-btn-revisit-wrapper, .cky-switch input[type="checkbox"]:checked { background: #00655f !important; }
.cky-btn-accept, .cky-btn-reject, .cky-btn-customize, .cky-btn-preferences { border-color: #00655f !important; }
.cky-btn-customize, .cky-preference-content-wrapper .cky-show-desc-btn, .cky-accordion-header .cky-always-active { color: #00655f !important; }



/*
================================================================================

  Media Queries

================================================================================
*/

@media (max-width:1023px) {
	.main-nav { margin-bottom: 0; }
	.main-nav ul { gap: 30px; }
	.main-nav ul li { font-size: 22px; }
	.page-main { background-position: calc(50% + 400px) 20px; }
	.homepage-intro { max-width: 100%; }
}

@media (max-width:900px) {
	.wrapper { padding-left: 25px; padding-right: 25px; }
	.page-header { z-index: 10; }
	.page-header .wrapper { padding-top: 25px; padding-bottom: 60px; }
	.site-logo { width: 200px; min-width: 120px; }
	#btn-nav { display: block; }
	#nav { position: absolute; top: 155px; left: 0; width: 100%; background: #00655f; transform: translateY(50px); opacity: 0; visibility: hidden; transition: 0.3s; }
	body.nav-active #nav { transform: translateY(0); opacity: 1; visibility: visible; }
	.main-nav ul { padding: 30px 0; justify-content: center; }
	.cols { display: block; }
	.cols .image { max-width: 500px; margin: 0 auto 30px; }
	.cols .image img { margin-bottom: 0; }
	.contact-heading { max-width: 100%; }
	.contact-content { max-width: 100%; }
	.contact-content ul li { font-size: 25px; }
	.contact-content ul strong { width: 75px; }
	.contact-image { position: relative; top: auto; right: auto; max-width: 500px; margin: 0 auto; }
	.donate-content { max-width: 100%; margin-bottom: 30px; }
	.section-donate .button { position: relative; top: auto; right: auto; }
	.page-footer .wrapper { padding-bottom: 50px; }
	.footer-main { text-wrap: balance; font-size: 20px; }
	.section-bottom { background-position: calc(50% + 400px) 40px; }
}

@media (max-width:767px) {
	body { font-size: 22px; }
	h1, h2 { font-size: 40px; }
	h3 { font-size: 25px; }
	h4 { font-size: 22px; }
	.page-header { height: 150px; }
	.main-nav { margin-left: 0; }
	.site-social { margin-left: 20px; }
	.main-nav ul { display: block; text-align: center; }
	.main-nav ul li { line-height: 1.5em; }
	.site-logo { width: 120px; }
	#nav { top: 100px; }
	.page-main { padding-top: 20px; background-position: calc(50% + 150px) 0px; background-size: 250px auto; }
	.page-secondary { padding-top: 60px; }
	ul.partner-logos { display: block; padding: 30px 0; }
	ul.partner-logos li { display: block; margin: 0 0 50px; text-align: center; }
	ul.partner-logos li:last-child { margin-bottom: 0; }
	ul.partner-logos img { max-width: 200px; }
	.partner-section { margin-bottom: 30px; }
	.partner-section:last-of-type ul.partner-logos li { max-width: 100%; }
	.section-contact .wrapper { padding-top: 60px; padding-bottom: 30px; }
	.section-bottom { background-position: calc(50% + 175px) 40px; background-size: 250px auto; }
	.section-bottom h2 { font-size: 30px; }
	.button { font-size: 25px; }
	.section-donate { padding-bottom: 80px; }
	.footer-main, .footer-bottom ul li, .footer-bottom p { font-size: 18px; text-align: center; }
	.footer-main { margin-bottom: 30px; }
	.footer-bottom { display: block; }
	.footer-nav ul { justify-content: center; }
	.col-main h1 { font-size: 30px; }
	.col-main h2 { font-size: 25px; padding-top: 30px; margin-top: 40px; }
}


/*
================================================================================

  Print Styles

================================================================================
*/

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}