:root
{
    --teal: #00aca7;
    --lightteal: #99dedc;
    --paleteal: #caffff;
    --pink: #e11b4c;
    --black: #000000;
    --white: #ffffff;
    --offwhite: #f0f0f0;
}

@font-face {
    font-family: "CirceReg";
    src: url("/library/fonts/Circe/Regular.otf")
      format("opentype");
  }

@font-face {
    font-family: "CirceBold";
    src: url("/library/fonts/Circe/Bold.otf")
      format("opentype");
  }

  @font-face {
    font-family: "CirceLight";
    src: url("/library/fonts/Circe/Light.otf")
      format("opentype");
  }

  @font-face {
    font-family: "CirceExtraLight";
    src: url("/library/fonts/Circe/ExtraLight.otf")
      format("opentype");
  }

* {background-repeat: no-repeat;background-position: center center;box-sizing: border-box;}
body { margin: 0px; padding: 0px; width: 100%; height: auto; background-color: #ffffff; color: #000000; font-family: CirceReg; font-size: 100%; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: #000000; text-decoration: none; font-weight: normal; font-family: CirceBold; }
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 0px 10px 10px 0px; margin: 0px; font-size: 100%; font-weight: normal; color: #000000; font-family: CirceBold; }
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select {font-size: 90%;background: var(--white);border: 1px solid var(--black);padding: 5px;color: #000000;box-sizing: border-box;font-family: CirceReg;}
textarea {width: 40%;}
input[type=text], input[type=password]  { height: 40px; }
input[type=button], input[type=submit], .newsletterbox .link a {font-family: CirceBold; cursor: pointer;background-color: var(--teal); border: 0px; border-radius: 25px; color: var(--white); height: 40px; padding: 0px 35px; box-sizing: border-box; margin-bottom: 10px;}
select {height: 30px;padding-right: 30px;background-image: none;background-repeat: no-repeat;background-position: right 10px center;}
p { padding: 0px 0px 20px 0px; margin: 0px; }
strong { font-weight: normal; font-family: CirceBold; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; }
table { border-spacing: 0px; }
td, th { padding: 0px; }



/* General settings */
.layoutcontent {max-width: 1250px; margin: auto;}
.pageheader .pagetitle.title, .shop_product .name, .std_newsarticlea .headline, .event_eventpage .headline, .shop_basketpage .titletxt, .dbase_browser h1 {background-color: var(--teal); text-align: center;font-size: 150%; color: var(--white); padding: 10px; margin-bottom: 40px;}
h2 {font-size: 130%;}

/* Buttons */

button, input[type=button], input[type=submit], a.button, .headercontainer .headerbuttons li a, .your_account .memb_account li a {border:none;text-align: center;background-color: var(--teal);padding: 10px;border-radius: 25px;color: var(--white);text-transform: uppercase;font-family: CirceBold;cursor:pointer;}
button:hover, input[type=button]:hover, input[type=submit]:hover, a.button:hover, .headercontainer .headerbuttons li a:hover { background-color:var(--pink)}


/* Header */
.headercontainer {max-width: 1250px; margin: auto; position: relative;}
.headercontainer .headerlogo img {height: 215px; width: auto;}
.headercontainer .headersocial svg path {fill: var(--black);}
.headercontainer .headersocial svg {width: 50px; height: 0px;}
.headercontainer .headersocial li {display: inline-block; padding: 5px}
.headercontainer .headersocial svg path:hover{fill: var(--pink);}
.headercontainer .headerbuttons li {display: inline-block;}

.headercontainer  h2 {color:black; font-size:120%}

@media ( max-width: 1290px )
{
  .headercontainer { max-width: 96%; }
}

@media (min-width: 1100px) {
  .headercontainer {height: 147px;}
  .headercontainer .headerlogo {position: absolute; top: 8px;}
  .headercontainer .headertitle {position: absolute; top: 49px; left: 175px; font-size: 185%;}
  .headercontainer .headersocial {position: absolute;margin: 25px 0px 0px 950px;}
  .headercontainer .headerbuttons {position: absolute; right: 0px; top: 30px;}
  .headercontainer .headerbuttons li a:hover {background-color: var(--pink); color:white;} 
  .headercontainer .toggle, .headercontainer .toggleoff .titletxt {display: none;}
  .headercontainer .nav_multilevel { position: absolute; top: 109px; left: 175px;}
  .headercontainer .nav_multilevel li {float: left; padding-right: 40px; text-transform: uppercase; line-height: 38px;}
  .headercontainer .nav_multilevel li a { color: var(--teal);}
  .headercontainer .nav_multilevel li a:hover {color: var(--pink);}
  .headercontainer .nav_multilevel .level2 {display: none;position: absolute;top: 38px;line-height: 2;background: var(--lightteal);width: 270px;z-index: 50;padding: 10px;}
  .headercontainer .nav_multilevel .level2 li a {color: var(--black);}
  .headercontainer .nav_multilevel .level2 li a:hover {color: var(--pink);}
  .headercontainer .nav_multilevel .level1>li:hover .level2 { display: block; }
  .headercontainer .nav_multilevel li i {display:none}
  
  .headercontainer .nav_multilevel .link143 {display: none;}
}

@media ( max-width: 1290px )
{
  .headercontainer .headersocial {position: absolute;margin: 25px 0px 0px 780px;}
}

@media ( min-width: 1099px ) and ( max-width: 1180px )
{
  .headercontainer .nav_multilevel li { padding-right: 30px; }
}

@media (max-width: 1099px) {

  .headercontainer .toggleoff ul{display:none;}
  .headercontainer { text-align: center; background-color: var(--offwhite);}
  .headercontainer .headerbuttons a {width: 300px; margin: 10px;}
  .headercontainer .headersocial {display:none;}
  .headercontainer .nav_multilevel {/* padding:30px ; */}
  .headercontainer .nav_multilevel li a {padding-top:10px; font-size: 120%;;}
  .headercontainer .nav_multilevel li i {padding-left: 10px;}
  .headercontainer .nav_multilevel .level1 {background-color: var(--lightteal);}
  .headercontainer .nav_multilevel .level2 { display: none; background-color: var(--paleteal);}
  .headercontainer .nav_multilevel .level2, .headercontainer .nav_multilevel .level1 li a:hover {color: var(--pink);}


  .headercontainer h2 { padding: 0px; }

  .headercontainer .items { display: flex; align-items: center; justify-content: space-between;}


  .toggle {position: absolute;top: 15px;right: 15px;}
  .toggle svg { fill: white; background-color: var(--teal); border-radius: 5px; padding: 5px; }
  .nav_multilevel .titletxt { display: none; }
  .nav_multilevel .links { position: absolute; left: 0; width: 100%; top: 210px; z-index: 999;}
  .nav_multilevel .links .expand { position: absolute; right: 20px;}
  .nav_multilevel .links li { text-align: left;}
  .nav_multilevel .links li a { padding-left: 20px;}
}

@media ( max-width: 760px )
{
  .headercontainer h2 { width: 200px;}
  .headercontainer .headerlogo img {height: 130px; width: auto; margin-top: 10px}
  .nav_multilevel .links { top: 148px; }
  .headercontainer .headerbuttons li a {  margin: 0px; padding: 5px 10px;}
}

@media (max-width: 599px) {

  .headercontainer h2  {display:none;}
  .nav_multilevel .links { top: 149px; }
}

/* Home */
.home .homeannouncement {border: 2px solid var(--teal);padding: 20px;font-size: 130%;/* margin-bottom: 30px; */margin:  50px;}
.home .homeannouncement .util_textbox_inner { display:flex; flex-direction: row; justify-content: space-evenly;}
.home .homeannouncement .content {text-align: center; padding-left: 20px;}
/* .home .homeannouncement .content a { background: var(--teal); padding: 10px; border-radius: 25px; color: white;} */
.home .homeannouncement .content a:hover{ background: var(--pink); color: white;}
.home .homeannouncement h2 {font-size: 180%;font-family: "CirceBold"; padding: 0px;}
.home .homeannouncement p {font-family: "CirceReg"; padding: 0px; font-size: 80%;}
.home .homeannouncement img { margin-top: 20px;}

.home .pagebanner.banner img {display: block; margin: auto; max-width: 100%; height: auto;}
.home .homebannertextcontainer {background-color: var(--teal);max-width: 1250px;margin: auto;margin-bottom: /* 70px*/ 30px;;}
.home .homebannertextcontainer .homebannertext .titletxt {color: var(--white); font-size: 100%;}
.home .homeintro {max-width: 870px; margin: auto; text-align: center; font-size: 130%;}
.home .homeeventslist {padding-bottom: 20px; border-bottom: 3px solid var(--offwhite);}
.home .homeeventslist .titletxt, .home .homeproductlist .titletxt, .home .homesocial .titletxt {color: var(--teal); font-size: 150%;}
.home .homeeventslist ul li {padding: 10px; max-width: 300px;text-align: center; box-shadow: 3px 3px 10px lightgray;}
.home .homeeventslist ul li:hover {background-color: var(--offwhite);}
.home .homeeventslist ul li image { min-height:260px;}
.home .homeeventslist ul li img {width: 60%; height:auto}
.home .homeeventslist ul li .date {text-transform: uppercase;}
.home .homeeventslist ul li .date, .home .homeeventslist ul li .time, .home .homeeventslist ul li .name {padding-bottom: 18px;}
.home .homeeventslist .link {margin-top: 30px;}
.home .homeeventslist .link a:hover {color: var(--pink); text-decoration: underline;}
.home .homeeventslist .footerlinks a, .home .homeeventsshopcontainer .seeshoplink a {color: var(--teal); text-transform: uppercase;}
.home .homeproductlist {max-width: 929px; margin: 40px auto 0px auto;}
.home .homeproductlist ul {display: flex;  justify-content: space-around; background-color: var(--offwhite); margin: 0px;}
.home .homeproductlist li {max-width: 190px; text-align: center;}
.home .homeproductlist img {max-width: 150px;}
.home .seeshoplink a:hover {color: var(--pink); text-decoration: underline;}
.home .homenewslettercontainer {max-width: 1250px; margin: auto; background-color: var(--teal); color: var(--white); clear: both; margin-bottom: 20px;}
.home .homenewslettercontainer .titletxt {color: var(--white); font-size: 150%;}
.home .homenewslettercontainer .int_newsletter .label {display: none;}
.home .homenewslettercontainer .int_newsletter input[type=text] { border: 0px; }
.home .homenewslettercontainer .int_newsletter input[type=submit] {background-color: transparent; border: 3px solid var(--white); border-radius: 25px; text-transform: uppercase; width: 100%; margin-top: 10px}
.home .homesocial .feat_fbpageplugin, .feat_social {padding:10px;border: solid 3px lightgrey;}
.home .homesocial .feat_social, .home .homesocial .feat_social li { display: none}
.home .homesocial .feat_social h2{ width: 80%}

@media (min-width: 1200px) {
    .home .homebannertextcontainer {height: 83px;}
    .home .homebannertextcontainer .items {display: flex;}
    .home .homebannertextcontainer .homebannertext {text-align: center; display: flex; height: 83px; align-items: center; justify-content: center;}
    .home .homebannertextcontainer .homebannertext.outer {width: 30%;}
    .home .homebannertextcontainer .homebannertext.inner {width: 40%;}
    .home .homebannertextcontainer .homebannertext .titletxt {padding: 0px;}
    .home .homeintro {padding-bottom: 75px;}
    .home .homeeventsshopcontainer {float: left; margin-bottom: 70px; padding-bottom: 20px; border-bottom: 3px solid var(--offwhite);}
    .home .homesocial {float: right; width: 310px;}
    .home .homesocial .feat_fbpageplugin {margin-bottom: 95px;}
    .home .homeeventslist {width: 929px;}
    .home .homeeventslist ul {display: flex; align-items: center; justify-content: space-evenly;}
    .home .homeeventslist ul li {width: 270px; height: 450px}
    .home .homeproductlist ul {padding: 10px 45px 30px 45px;}
    .home .homeproductlist h2 {text-align: center; padding-bottom:0px}
    .home .homenewslettercontainer .items {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 40px 85px;}
    .home .homenewslettercontainer .homenewslettertext {padding-right: 30px;}
    .home .homenewslettercontainer .homenewslettertext p {padding: 0px;}
    .home .homenewslettercontainer .int_newsletter fieldset .form { display: flex; align-items: center; justify-content: center; }
    .home .homenewslettercontainer .int_newsletter fieldset .field, .home .homenewslettercontainer .int_newsletter fieldset .buttons { margin: 10px; }
    .home .homenewslettercontainer .int_newsletter .input {display: flex;align-items: center;justify-content: center;}
    .home .homenewslettercontainer .int_newsletter input[type=text] { width: 357px; }
    .home .homenewslettercontainer .int_newsletter .submit:hover {color:white; background-color: var(--pink); border-color: var(--pink)}
    .home .homenewslettercontainer .items .spacer {display: none;}
}

@media  (min-width:600px) and (max-width: 1199px) {

  .home .homebannertextcontainer {text-align: center; padding-top: 20px}
  .home .homeeventslist h2, .home .homeeventslist .link, .home .homeproductlist h2,  .home .seeshoplink, .home .homesocial h2{text-align: center; padding-top:20px;}
  .home .homeeventslist ul{ display:flex; flex-wrap:wrap; justify-content: center;}
  .home .homeeventslist li { margin: 20px;}
  .home .homenewslettercontainer {text-align: center; padding-top: 20px}
  .home .homesocial .items {display: flex; margin-bottom: 20px;justify-content: center; gap: 10px}
  .home .buttons {width: 70%; margin: 0px auto}
  .home .homenewslettercontainer .int_newsletter input[type=text] { width: 357px; }
  .home .homeannouncement { font-size: 120%; margin: 20px;}
  .home .homeintro { padding: 0px 20px;}
}

@media (max-width: 599px) {
  
  .home .pagebanner {display: none;}
  .home .homebannertextcontainer {height: 300px; background-image: url(/images/dDNy2nVgAlrxJ0W70kkc0yq08r.jpg); background-size: cover; background-position: center center;}
  .home .homebannertextcontainer .items {background-color: var(--teal); text-align: center; position: relative; top:190px; padding-top: 20px; opacity: 0.8}
  .home .homebannertext .titletxt { padding-bottom: 5px;}
  .home .homeintro {border-bottom: 3px solid lightgrey; width: 80%; margin: 30px auto; padding-bottom: 20px;}
  .home .homeeventslist {text-align: center; border-bottom: 4px solid lightgrey; width: 80%; margin: 40px auto}
  .home .homeproductlist, .home .seeshoplink{text-align: center;}
  .home .seeshoplink {border-bottom: 4px solid lightgrey; width: 80%; margin: 40px auto; padding-bottom: 20px;}
  .home .homeeventslist li {margin:10px auto; width :250px}
  .home .homeeventslist ul li img {width :60%}
  .home .homesocial {text-align: center; margin-top:40px; width: 90%; margin: 10px auto}
  .home .homesocial .feat_fbpageplugin, .home .homesocial .feat_twitterplugin {margin-bottom: 20px;}
  .home .homenewslettercontainer {text-align: center; padding-top: 20px}
  .home .homenewslettercontainer .input .text { width:80%}
  .home .buttons {width: 70%; margin: 15px auto}
  .home .homenewslettercontainer .int_newsletter .submit {color:white; background-color: var(--pink); border: var(--pink);}
  .home .homeannouncement {font-size:110%; margin: 20px; }
  .home .homeannouncement .util_textbox_inner {flex-direction: column; }
  .home .homeannouncement .imageleft { text-align: center;}
  .home .homeannouncement .imageleft img { height: 200px; width: auto;}
}

/* About us */

.about_us .content {background-color: var(--offwhite); border-radius: 5px; margin: 40px}
.about_us .content p {padding: 20px}

@media (max-width: 599px) {

  .about_us .content {background-color: var(--offwhite); border-radius: 5px; margin: 0px 10px 40px ; text-align: center}
  .about_us .content p img { width: 250px; height:auto;}

}

/* Membership */

.membership .pagecontent_inner { max-width:1190px; margin: 0px auto; background-color: var(--offwhite); padding: 40px; border-radius: 5px;}
.membership .memb_account {background-color: white;}

@media (max-width: 599px) {

  .membership .pagecontent_inner {margin: 10px; padding: 0px}
  .membership p img {width:250px; height:auto}
  .membership .memb_account {padding: 10px}
  .membership p {margin: 0px 20px; text-align: center; padding-top:15px; }
  .membership h2 {padding: 0px}

}

/* Research Centre*/

.researchcenter .researchimages .items ul{ width:90%; display:flex; margin:20px auto; flex-wrap: wrap; justify-content: center; align-items:flex-end;}
.researchcenter .researchimages li .image {background-size: cover; height:270px; width:300px; margin: 10px }
.researchcenter .researchimages .value {width:50%; padding:5px; text-align:center; background-color: var(--offwhite); border-radius: 50px; margin:5px auto}
.researchcenter .researchcontent {margin:20px 60px; background-color: var(--offwhite); padding: 40px; border-radius: 5px}
.researchcenter .servicesinfobox {margin-top: 40px; padding: 10px; text-align: center; max-width: 1200px; margin: auto; margin-bottom: 30px;}
.researchcenter .servicesinfobox a {background-color: var(--teal); color:#ffffff; padding: 5px 60px; text-align: center; border-radius: 50px;} 
.researchcenter .servicesinfobox a:hover {background-color: var(--pink);} 
.researchcenter .servicesinfobox h3 {font-size: 120%; color: var(--pink); margin-top: 20px;}

@media (max-width: 599px) {

  .researchcenter .researchcontent {margin:0px 15px; padding: 10px}
  .researchcenter .servicesinfobox {background-color: var(--teal); margin:20px; padding:30px; }
  .researchcenter .servicesinfobox h3 {color:white}
  .researchcenter .servicesinfobox a {width: 10%; font-size: 70%; padding:10px; text-decoration: underline;}
  .researchcenter .servicesinfobox a:hover { background-color: teal; color:var(--pink)}

}

/* Past meetings */

.pastmeetings .content {margin: 30px;}
.pastmeetings .list_article .list {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap:15px}
.pastmeetings .list_article .list .article:hover {background-color: var(--offwhite);}
.pastmeetings .list_article .list .article {width: 300px; text-align: center; padding: 30px;  margin-bottom: 20px; box-shadow: 10px 10px 20px lightgray;}
.pastmeetings .list_article .list .article .headline a {color: var(--teal); font-size: 120%;}
.pastmeetings .list_article .list .article .shortheadline {font-size: 110%;}

@media (max-width: 599px) {

  .pastmeetings .content p, .std_newsarticlea .article p {text-align: center;}
  .pastmeetings .list_article .list {justify-content: center; margin-bottom: 30px;}

}

/* News articles */
.std_newsarticlea .created.datetime {text-align: center; font-size: 160%; font-family: CirceBold; margin-bottom: 0px; color:var(--teal)}
.std_newsarticlea .article {margin: 40px 60px; background-color: var(--offwhite); padding:40px; border-radius: 5px;}

@media (max-width: 599px) {

  .std_newsarticlea .article {margin: 20px ; background-color: var(--offwhite); padding:15px; border-radius: 5px;}

}

/* Future events */

.futuremeetings .content {margin: 30px}
.futuremeetings .futureeventlist ul {display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 30px;}
.futuremeetings .futureeventlist ul li {width: 300px; padding: 40px; margin-bottom: 20px;box-shadow: 10px 10px 20px lightgray; text-align: center; font-weight: bold;}
.futuremeetings .futureeventlist ul li a  {font-size: 110%;}
.futuremeetings .event:hover {background-color: var(--offwhite);}
.futuremeetings .event .date, .futuremeetings .event .time, .futuremeetings .event .name {margin-top: 10px;}
.futuremeetings .event-2022 .name a  {color: var(--teal); font-size: 150%;}
.futuremeetings .futureeventlist .img {max-width: 120px;}

/* Event pages */
.event_eventpage {text-align: center; font-size: 120%; font-family: Circereg; margin-bottom: 40px; font-weight: bold;}
.event_eventpage .article {background-color: var(--offwhite); padding:40px; border-radius: 5px; margin-top: 20px;}
.event_eventpage .date {color: var(--teal);}
.event_eventpage img {margin:15px; }
.event_eventpage li>.image {min-height: 220px;}
.event_eventpage p {text-align: left; font-size: 100%; font-weight: normal; margin: 15px 40px}
.event_eventpage ul { margin: 15px 40px;}
.event_eventpage li { text-align: left; list-style-type: disc;}

@media (max-width: 599px) {

  .event_eventpage .article {background-color: var(--offwhite); padding:10px; border-radius: 5px; margin: 20px;}
  .event_eventpage .date {color: var(--teal);}
  .event_eventpage img {margin:15px;}
  .event_eventpage p {text-align: center; font-size: 90%; margin: 20px}

}

/* Town chronology */
.townchronology .townchronologybox {background-color: var(--paleteal); border-radius: 25px; padding: 40px; margin-bottom: 30px;}
.townchronology .townchronologybox h2 {text-align: center;}

@media (min-width: 1200px) {
  .townchronology .townchronologybox .imageright {float: right;}
}

/* Newsletters */
.newsletters .components {margin:40px 0px;}
.newsletters .newsletterboxescontainer .items {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: top;}
.newsletters .newsletterboxescontainer .newsletterbox {text-align: center; max-width: 300px; margin: 20px; }
.newsletters p {margin: 0px 40px;}
.newsletters .newsletterboxescontainer .newsletterbox .titletxt {padding:20px 0px 10px 0px}
.newsletters .newsletterboxescontainer .newsletterbox .titletxt a{color: var(--teal);}
.newsletters .newsletterboxescontainer .newsletterbox .titletxt a:hover {color: var(--pink);}
.newsletters .newsletterboxescontainer .newsletterbox .content {font-weight: bold;}

@media (max-width: 599px) {

  .newsletters .pagecontent_inner p {text-align: center;}
  .newsletters .newsletterboxescontainer .items {display: flex; justify-content: center;}
  .newsletters .components {margin-top: 0px}
}

/* category pages */

.shopbooks h2 {margin-left: 40px; font-size: 160%;}
.shop_categorylist ul {display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 30px;}
.shop_categorylist ul li {width: 310px; height: 390px; padding:20px; margin: 30px; text-align: center; box-shadow: 10px 10px 20px lightgray;}
.shop_categorylist ul li .image {height:300px;}
.shop_categorylist .name a{font-size: 120%; color:var(--teal)}
.shop_categorylist ul li:hover {text-decoration: underline; opacity:0.6;}

.shop_category h1{ text-align: center; font-size:150%; background-color: var(--teal); color:white; padding:10px;}


/* list of books and images pages */

.listofbooks a:hover, .listofimages a:hover {color: var(--teal); text-decoration: underline;}
.listofbooks, .listofimages {padding-bottom:10px}
.shop_productlist ul {display: flex;flex-wrap: wrap;justify-content: space-around;margin: 30px;}
.shop_productlist ul li {width: 310px; padding:10px; margin: 30px; text-align: center; box-shadow: 10px 10px 20px lightgray;}
.shop_productlist ul li img {max-width:80%;  height: auto}
.shop_productlist ul li:hover {opacity: 0.6; text-decoration: underline;}
.shop_productlist a:hover {text-decoration: underline;}


@media (max-width: 599px) {

  .listofbooks p {margin:10px; padding:0px 30px}
  .listofbooks h2 {text-align: center; margin-top: 40px; padding:10px}

}

/*Product pages*/

.shop_product .info {text-align: center;margin:60px;}
.shop_product .info img { box-shadow: 10px 5px 15px lightgray;}
.shop_product .info .code .label {font-size: 80%; font-weight: bold; color: var(--teal); } 
.shop_product .info .code .value {font-weight: bold; color: var(--teal);}
.shop_product .info .description p {margin: 30px 60px 20px 30px}
.shop_product .info .price {font-size: 300%; font-weight: bold; margin:auto; padding: 10px; color: var(--teal); }
.shop_product .info .outofstock {color: var(--pink); margin-top: 50px; font-size: 150%; background-color: var(--lightteal); padding:10px; width:50%; margin:40px auto; border-radius: 50px;}
.shop_product .label {font-size: 120%; font-weight: bold;}
.shop_product .label, .shop_product .value {margin: 20px auto; width:10%; text-align: center;}
.shop_product .addtobasket  {width: 40%; margin: 20px auto;}


@media (max-width: 599px) {

  .shop_product .label, .shop_product .value {margin: auto;}
  .shop_product .info .outofstock {width: 80%; padding: 10px;}
  .shop_product .info {margin:10px}
  .shop_product .info .description p {margin: 10px}
  

}

/* Basket page */

.shop_basketpage .basket, .shop_basketpage .include {max-width: 800px; margin: auto;}
.shop_basketpage table {width: 100%;}
.shop_basketpage .discount {margin-top: 40px;}
.shop_basket td, .shop_basket th {padding: 10px;text-align: left;border-bottom: solid #dddddd 1px;}
.shop_basket .price, .shop_basket .quantity, .shop_basket .total, .shop_basket .remove { text-align: right; }
.shop_basket .remove a{color: var(--pink);}
.shop_basket .remove a:hover {text-decoration: underline;}
.shop_basket  .totaltotal{color: var(--teal); font-size: 120%;}
.shop_basketpage .errors { color: #ff0000; padding-bottom: 20px; }
.shop_basketpage .contact, .shop_basketpage .billing, .shop_basketpage .shipping { margin-top: 40px;}
.shop_basketpage .payment { clear: both; }
.shop_basket .complete {padding-bottom: 95px;}
.shop_basketpage #fb-Notes-div, .shop_basketpage .field_section { display: none; }
.shop_basketpage .buttons .continueshopping, .shop_basketpage .buttons .updatebasket, .shop_basketpage .buttons .checkout {margin: 10px;}
.shop_basket .checkout .buttons {margin-top:30px}
.shop_basket .checkout h2 {text-align: center;}
.shop_basket .checkout .field_group>.label, .shop_basket .checkout .field_section>.label { font-family: CirceBold; padding-top: 20px; padding-bottom: 10px; font-size: 120%; }
.shop_basket .loginrequired {color: var(--pink);}
.paymentform #card-element {border: 1px solid #002f78; border-radius: 16px; padding: 10px; margin-bottom: 20px;}
.shop_basket .confirm #paymentform h2 { padding:0px; margin-top:30px;}
.checkout {max-width: 799px; margin: auto;}

@media( min-width: 600px )
{
	.shop_basketpage .contact, .shop_basketpage .billing, .shop_basketpage .shipping { width: 33.3%; float: left; }
}

@media (max-width: 599px) {

.shop_basket .basket {padding: 10px; font-size: 85%;}
.shop_basket .discount,  .shop_basket .buttons .updatebasket {text-align: center; margin:10px}
.shop_basket .loginrequired {width :80%; margin: 0px auto; text-align: center; }
.shop_basket  .totaltotal {font-size: 100%;}
.shop_basket td, .shop_basket th {padding: 10px 0px; text-align: left;border-bottom: solid #dddddd 1px;}

.shop_basket .code {display: none;}
.checkout .formbuilder {margin: 10px; padding:10px 0px}
.checkout .formbuilder .input, .checkout .formbuilder .label {width: 90%; margin: auto}
.checkout .formbuilder #ddfb-BillCountry {width: 90%; }
.shop_basket .checkout h2 {text-align: center;}
.shop_basket .checkout .buttons {margin:30px}

.shop_basket .confirm {font-size: 90%; margin:15px;}
.shop_basket .confirm .price {display:none}
.shop_basket .confirm .quantity, .shop_basket .confirm .total {width: 30%; text-align: center;}
.shop_basket .confirm .buttons, .shop_basket .confirm .paymentform {text-align:center; margin: 10px}
.shop_basket .confirm #paymentform h2 {text-align: center; padding:0px; margin-top:30px;}
.shop_basketpage .buttons .checkout {margin-left: 0px}


}


/*Contact page*/

.contactcontainer .items {display:flex; justify-content: space-evenly; align-items: center; margin-bottom:60px;}
.contactintro .titletext, h2, h3{color: var(--teal); padding-bottom: 25px;}
.feat_googlemap {box-sizing:border-box;  max-height: 410px; max-width:405px; text-align: center;}
.feat_googlemap img { height:400px; width:auto; padding:5px; text-align: center;box-shadow: 10px 10px 20px lightgray;}
.contactcommittee h2 {text-align: center; margin: 10px 0px }
.contactcommittee  .committeetable {margin: 20px auto;}
.contactcommittee  .committeetable h3 { padding:35px 0px 10px; text-decoration: underline; }
.committeetable p {padding: 10px 0px} 
.committeetable a {text-align: left;}
.committeetable a:hover { color:var(--pink)}
.committeetable td { vertical-align: center;color: var(--teal); border-bottom: solid lightgray}
.committeetable img {margin: 25px; box-shadow: 5px 5px 10px gray;}


@media (max-width: 599px) {

  .contactcontainer .items { display:flex; flex-direction: column; align-items: center; }
  .contactintro {margin:20px}
  .contactcommittee p{ margin:10px;}
  .feat_googlemap .mapbox .map {width:85%; height:auto}
  .committeetable {width:90%; font-size:80%}
  .committeetable img {display:none;}
  .committeetable h3, .committeetable p{text-align: center;}
  .surv_standard {max-width: 350px; margin: 0px auto;}
  .contact .servicesinfobox { padding: 0px 20px;}
}


/* Your account */

.memb_loginbox {margin-bottom: 100px;}
.your_account .memb_account p {color:var(--black)}
.your_account .loggedin .status, .youraccount .loggedin input {margin-bottom: 30px;}
.memb_loginbox .errors { color: #ff0000; margin: 0px 0px 20px 0px; }
.memb_loginbox .fieldemail, .memb_loginbox .fieldpw{ display: block;  text-align:center}
.memb_loginbox .loggedout .login {text-align:center;margin-top: 20px;/* margin-left:-160px; */}
.memb_loginbox .login input:hover, .memb_loginbox .logout input:hover {background-color: var(--pink);color: white;}
.memb_loginbox .login input[type=submit] { width: 200px;}
.memb_loginbox .forgotpw, .memb_loginbox .register {display:flex;color: #ffffff;width: 260px;padding: 10px;margin: 0px auto;border-radius: 5px;justify-content: center;}
.memb_loginbox .forgotpw a:hover, .memb_loginbox .register a:hover { text-decoration: underline;/*background-color: var(--teal); padding: 10px; border-radius: 25px; color: var(--white); text-transform: uppercase; font-family: CirceBold; cursor:pointer;*/}
.memb_loginbox .label { width: 150px; display: inline-block; font-family: CirceBold; }
.memb_loginbox .input { width: 390px; display: inline-block;  }
.memb_loginbox .input input { width: 100%; padding: 10px; margin: 9px 0px 0px 0px; font-size: 90%; box-sizing: border-box; }
.memb_loginbox .input input::placeholder { font-size: 90%; }
.memb_account {padding: 30px; color:var(--pink); text-align: center;}
.memb_account p {padding: 30px; color:var(--pink); text-align: center; font-size: 100%;}
.memb_account li { margin-top:30px }

.memb_loginbox .loggedin .status, .memb_loginbox .loggedin .logout  {text-align: center; margin-bottom:20px}

@media (max-width: 599px) {

  .memb_loginbox .loggedout .fieldemail input, .memb_loginbox .loggedout .fieldpw input { width:70% ;}

  .loggedin {text-align: center; }
  .loggedin .status {margin-bottom: 20px}
  
}


/* Forms */
.formbuilder {background-color: var(--offwhite); border-radius: 5px 5px 5px 5px;}
.formbuilder .description { padding-bottom: 5px; font-size: 90%; }
.form .buttons { text-align: center; padding: 40px 0px 40px 0px; }
.form .buttons input:hover { background-color: var(--pink); color: white;}
.surv_standard .confirm { text-align: center; padding: 40px;}
.surv_standard .confirm p {padding: 0px; font-size: 150%;}
.formbuilder .field {clear: both;padding-top: 20px;}
.formbuilder .field_hidden { padding: 0px; }
.formbuilder .field_group>.label, .formbuilder .field_dynamic>.label, .formbuilder .field_section>.label { font-family: Montserrat-Bold; text-align: center; padding: 20px 0px 20px 0px; }
.formbuilder .field_group>.input>.description, .formbuilder .field_dynamic>.input>.description, .formbuilder .field_section>.input>.description { text-align: center; }
.formbuilder .field_file .input{width: 100%;}
.dz-file-preview{float:left; width: 100%; text-align: center;}
.fbdropzone {cursor: pointer; display: block; height: 100px; width: 100%; background-image: url(/images/pFSHP2TR8SnLtZxO2Npf.svg); background-repeat: no-repeat;}


form .errors {color: red; padding-bottom: 20px;}
.surv_standard .confirm {font-family: CirceBold; background-color: var(--teal);}

.form_profile .formbuilder .form-control {text-align: left; float:left}

@media (max-width: 599px) {

.form_profile .formbuilder  {width:100%; text-align: center; color: black}
.form_profile .formbuilder .form-control {width: 100%;}
.surv_standard #ddfb-7 { width: 310px;}

}

@media (min-width: 600px){
  .surv_standard #ddfb-7 { width: 351px;}
  .formbuilder {padding: 10px 40px 30px 40px;}
  .formbuilder .label {float: left;width: 40%;box-sizing: border-box;color: var(--black);text-align: right;padding-right: 10px;}
  .formbuilder .input input, .formbuilder .input textarea, .formbuilder #fb-7 {width: 30%; float:left;}
  .formbuilder #ddfb-MembTitle {width:15%; float:left}
  .formbuilder #fb-MembGdprOptIn {width:1%;  margin-top:5px;}
  .formbuilder .input [type=checkbox] {float:left;width:15%}
  .field_checkbox {width:100%; margin: 0px auto ;}

  .formbuilder .field_group>.label, .formbuilder .field_dynamic>.label, .formbuilder .field_section>.label { float: none; width: auto; text-align: center; } 
  .formbuilder .field_group>.input, .formbuilder .field_dynamic>.input {width: auto; float: none;}

.form_register #ddfb-MembCountry {float: left; width:30%;}

}

@media (max-width: 599px) {
  .formbuilder {padding: 20px;box-sizing: border-box;}
  .formbuilder .label { padding-bottom: 5px; }
  .formbuilder .input input, .formbuilder .input textarea {width: 100%;}
  .form_register { color:var(--black)}
  .formbuilder #fb-MembAddress {width:100%;}
  

}


/* Footer */
.layoutfooter {background-color: var(--offwhite); padding: 60px 0px;}
.layoutfooter .footercontainer {max-width: 1250px; margin: auto;}
.layoutfooter .footercontainer .headersocial li {display: inline-block;}
.layoutfooter .footercontainer .headersocial svg {width: 30px; height: 30px; margin:10px;}
.layoutfooter .footercontainer .headersocial svg:hover {fill: var(--teal)}
.beachshore {display: none;}

@media (min-width: 1000px) {
  .layoutfooter .footercontainer .items {display: flex; justify-content: space-between;}
  .layoutfooter .footercontainer .headersocial {text-align: right;}
 
}

@media (max-width: 999px) {

  .layoutfooter .footercontainer .items { text-align: center; }
  
}

@media (max-width: 599px) {

  .layoutfooter .footercontainer .items {text-align: center;font-size: 90%;}

}


/* War memorial record page */

.war_memorial_landing h2 {font-size: 150%;}
.war_memorial_landing .pagecontent {margin: 20px auto; padding: 20px;}
.war_memorial_landing .ww1button, .war_memorial_landing .ww2button,.war_memorial_landing .warbutton {background-size:cover;background-position: center center;display:inline-block;opacity:0.8;height:200px;width:200px;text-shadow: 0px 0px 5px #ffffff, 0px 0px 5px #ffffff;color: black;box-sizing: border-box;box-shadow: 5px 5px 10px gray;border-radius: 40px;font-size:150%;margin:auto; padding: 10px;}
.war_memorial_landing .ww1button {background-image: url(/images/P5yaSpaze3QPXbwlvV2f05k06c.jpg); margin: 50px; background-position: 20% 80% ;}
.war_memorial_landing .ww2button{ background-image: url(/images/ewwUzy8Rz2y3lBdJr2nv05k05d.jpg);margin:50px;}
.war_memorial_landing .warbutton {background-image: url(/images/AIMgxpCF4fi8TMPtMMR9334226.jpg);margin:50px;background-size: 400px;}
.war_memorial_landing a:hover {opacity:0.5}

.war_memorial_record h1 {position:-10px; background-color: var(--teal); text-align: center;font-size: 150%; color: var(--white); padding: 10px; margin-bottom: 40px;}
.war_memorial_record .image, .war_memorial_record .details {float: left;width: 50%;}
.war_memorial_record .image {text-align: right;padding-right: 50px;}
.war_memorial_record .details {margin-bottom:30px; }
.war_memorial_record .bio, .war_memorial_record .downloads {clear: both; margin:20px auto;font-size: 115%;font-weight: bold; max-width:900px;}
.war_memorial_record .label {font-family: CirceBold;}
.war_memorial_record .value {margin-bottom: 10px;width:50%;}
.war_memorial_record .downloads ul {display: flex;justify-content: space-evenly; margin:10px;flex-wrap: wrap;}
.war_memorial_record .downloads li {display:flex; width:40%;border: 2px solid lightgray; text-align:left;  margin-bottom:10px;padding: 15px; border-radius:50px;align-items: center;}
.war_memorial_record .downloads a {color:black}
.war_memorial_record .downloads li .image {display: none; }
.war_memorial_record .downloads li:hover {background-color: var(--offwhite);}
.war_memorial_record .downloads li .name { text-align: center;}

.war_memorial_record_inner {min-height:600px}
.war_memorial_record_inner .bio {text-align: center;}
.war_memorial_record_inner .downloads ul {margin-bottom: 50px;}
.war_memorial_record_inner .downloads li {margin: 10px 10px;justify-content: center;}
.war_memorial_record .downloads a {color: var(--teal); }
.war_memorial_record_inner .downloads .label { text-align: center;}
.war_memorial_record_inner .logged_out { text-align:center; color: red; margin-bottom: 50px;}

.warmemoriallistpage .dbase_table {margin-bottom: 40px;}
.warmemoriallistpage .dbase_table .titletxt {text-align: center;}
.warmemoriallistpage table {margin: auto;}
.warmemoriallistpage table tr:hover {color: var(--teal);}
.warmemoriallistpage .dbase_table table td.column_Surname {padding-right: 50px;}

.memorial_commemorations {text-align:center; background-color: var(--teal);color: var(--white); font-weight:bold; margin: 0px auto 30px; padding:20px; max-width: 500px; border-radius: 20px;box-shadow: 5px 5px 10px gray;}
.memorial_commemorations h2 { text-align: center; color:var(--white); margin-top: 20px;}

.war_diaries img { margin-right: 50px; }
.war_diaries p:nth-child(4) { margin-top: 50px; }

@media (max-width: 599px) {

  .war_memorial_landing .pagecontent p {text-align: center;}
  .war_memorial_landing .pagecontent p img {width: 250px; height:auto;}
  .war_memorial_landing .ww1button, .war_memorial_landing .ww2button{  background-size:cover; background-position: center center; display:block; opacity:0.8; height:200px; width:200px; text-shadow: 0px 0px 5px #ffffff, 0px 0px 5px #ffffff; color: black; box-sizing: border-box; box-shadow: 5px 5px 10px gray; border-radius: 40px; font-size:150%;margin:auto}

  .warmemoriallistpage .dbase_table {margin:20px; font-size: 90%;}
  .warmemoriallistpage .dbase_table table td.column_Surname { padding-right: 15px;}
  .war_memorial_record_inner .image img { margin: 10px }
  .war_memorial_record .details {display:flex; flex-direction: column; width:250px; margin: 25px; }
  .war_memorial_record .value {width:100%}

  .war_memorial_record .downloads ul { flex-direction: column;}
  .war_memorial_record .downloads li{display:flex; width: 80%; flex-direction: column; justify-content: center; }
  .war_memorial_record .downloads .image { width: 100%; padding: 0px; text-align: center;}
  .war_memorial_record .downloads .name {text-align: center; color: var(--teal); }
  .war_memorial_record .downloads a {color: var(--teal); }
  .memorial_commemorations {margin: 30px 20px}  
}

/* DB Browser */

.dbase_browser .introduction { text-align: center;}
.dbase_browser .searchtype {display: flex;font-size: 90%;width:300px;}
.dbase_browser .searchtype input[type="radio"] {height:15px;}
.dbase_browser #fb-War-div .label, .dbase_browser #fb-Year-div .label { margin-top:0px;}
.dbase_browser input[type="text"] { border: none; padding: 10px; margin-top: 10px;}
.dbase_browser table {/* width: 60%; */margin: 0px auto 40px auto;}
.dbase_browser td {border-bottom: 1px solid lightgrey;padding-right:  10px;}
.dbase_browser tr td:last-of-type {padding-right:  00px;}
.dbase_browser td a { color: var(--teal); }
.dbase_browser td a:hover { text-decoration: underline; }
.dbase_browser tr:hover { background: var(--offwhite);  }
.dbase_browser input[type=button] { position: absolute; left:50%; margin-left:-65px; }

@media ( max-width: 1270px )
{
  .dbase_browser table { width: 95%; margin: 20px auto; }
}

@media ( min-width: 650px)
{
  .dbase_browser .label {margin-right: 20px;margin-top:40px;}
}

/* jQuery dialog */
 
.ui-dialog { border: none; border-radius: 0px; padding: 20px; font-family: CirceBold; font-size: 100%; width: 500px !important; min-height: 300px !important; }
.ui-dialog .ui-dialog-content { padding: 20px 0px 0px 0px; }
.ui-dialog-titlebar { background: none; border: none; text-transform: uppercase; background-color: var(--teal); border: none; padding: 5px; color: #ffffff; border-radius: 0px; }

/* Book of condolence */ 

.home .book .introduction { text-align: center; padding-bottom: 20px; }
.home .book .introduction p { padding-bottom: 0px; }
.home .book { display: block;    margin-bottom: 30px;  border-bottom: 1px solid lightgray; padding-bottom: 80px; }

.book ul li:first-of-type { font-size: 130%; color: var(--teal); font-family: CirceBold;}

.home .book a {  text-decoration: underline; }

.home .book .surv_standard, .bookof .book .introduction p, .bookof .book .titletxt { display: none; }
.bookof .introduction ul { padding-bottom: 20px; }
.home .book h2 { font-size: 150%; text-align: center; padding-bottom: 0px;}


.bookof { text-align: center; }
.bookof .book { display: block;}
.bookof .std_content { margin-bottom: 50px;  }
.bookof .surv_standard { margin-bottom: 70px; width: 40%; margin:  0px auto 20px auto; }
.bookof .surv_standard textarea { width: 100%; height: 230px; max-width: 100%; max-height: 230px;}
.bookof .surv_responses {   font-size: 95%; }
.bookof .response .field_Name .value, .bookof .response .field_SocietyorconnectiontoMike .value { padding-top: 10px;}
.bookof .response {   padding: 10px; margin-bottom: 20px; }

.home .surv_responses { font-size: 90%; font-family: CirceLight;   }

.response { box-shadow: 0px 0px 10px lightgray; padding: 5px; text-align: center;  box-sizing: border-box; height: fit-content }
.surv_responses .datetime, .surv_responses .label { display: none;}
.surv_responses .field_Yourmessage .value{ font-family: CirceBold;  }


.bookof .items { display: flex;}
.bookof .surv_responses { display: flex; flex-wrap: wrap; flex-direction: column;  } 
.bookof .surv_responses .response {  }



@media ( min-width: 1001px )
{
  .bookof .std_content { margin-bottom: 50px;  width: 60%;  }
  .bookof .surv_standard { width: 40%;  }
  .bookof .surv_responses .response { width: 31.33%;  }
  .bookof .surv_responses { height: 3000px;  }
  .home .surv_responses {float: left; width: 60%;  }
  .home .surv_responses .response { margin-bottom: 20px; }
  .home .book .std_content { width: 40%; float: left; }
  .home .book img { height: 400px; width: auto; margin: 0px auto }
  .home .book a { position: relative; top: 550px; left: -440px; }

  .bookof .formbuilder .label { text-align: left; width: 100%; }
  .bookof .formbuilder .input input { width: 100%; }
}
@media ( max-width: 1000px )
{
  .bookof .surv_standard { width: 98%; }
  .bookof .surv_responses { display: flex;  flex-direction: column; width: 98%; margin: auto; }
  .home .book img { width: 98%; height: auto; }
  .home .book { text-align: center; margin: 0px auto; }
  .bookof .surv_responses .response { width: 100%;  }

  .bookof .items { flex-direction: column;}
}
@media ( max-width: 600px )
{
  .bookof .titleimg img { width: 98%; height: auto; }
  .bookof .surv_responses .response { width: 100%; } 
  .bookof .surv_responses { margin-bottom: 20px; }
}
@media ( max-width: 1280px )
{
  .bookof .surv_standard .form, .home .surv_responses .response, .home .book { width: 96%;}
}
@media ( min-width: 1000px ) and ( max-width: 1280px )
{
  .bookof .surv_responses { height: 2000px;  }
}


/* Mike Bundock page */

.aboutmike { text-align: center; }
.aboutmike .util_container, .aboutmike .std_content { border: 1px solid var(--teal); padding: 20px; margin-bottom: 40px;  }
.aboutmike a { text-decoration: underline; }
.aboutmike a:hover { color: var(--pink); }

/* War Diaries */

.war_diaries h3 .warbutton { vertical-align: top; display: inline-block; }

.wardiaires h2 { text-align: center; }
.wardiaires .introduction p:nth-child(1), .wardiaires .introduction p:nth-child(3) { display: none;}
.wardiaires .introduction { background-color: var(--offwhite);}
.wardiaires .introduction p { padding: 20px 0px 10px 40px; }
.wardiaires .formbuilder, .wardiaires .field_text { padding-top: 0px; padding-bottom: 10px; }
.wardiaires .formbuilder .input input[type=radio] {  width: auto; float: none }
.wardiaires .button { background-color: var(--offwhite); margin-bottom: 20px;  }
.wardiaires .button input[type=submit] {margin: 0px 0px 20px 40px;}

.wardiaires .thumbnail li {background: #f3f3f3; padding: 10px; width: 100px;}
.wardiaires .thumbnail .image { background-size: contain; height: 80px;     }
.wardiaires .thumbnail .page { text-align: center;}


.wardiaires .status { padding-left: 40px; }
.wardiaires .results {  padding: 20px 40px; display: flex; gap: 20px; flex-wrap: wrap;}
.wardiaires .results>li { border-bottom: 1px solid var(--teal); width: 100%; box-sizing: border-box; padding: 20px 0px;  }
.wardiaires .thumbnail {display: flex;flex-wrap: wrap;gap: 10px}
.wardiaires .results li .link a { color: var(--teal);}
.wardiaires .results li .link a:hover { color: var(--pink);}
.wardiaires .name { padding-bottom: 10px; font-family: CirceBold; }
.wardiaires .loginrequired { font-family: CirceBold; padding-top: 10px; }

.wardiaires #fb-order-div { display: none; }
.wardiaires  #fb-match-div .label { width: 100%; float: none; text-align: left; font-family: CirceBold; }

.unwrapped .arrows p {display: flex; justify-content: center; gap: 100px;}