/* LAYOUT STYLESHEET */

/* Colours

Green #61d2b4
Blue #5cacf8
Purple #ac88f0
Yellow #eec242
Coral #ee7774
Orange #ff9b3b
*/

:root
{
    --paleblue: #d2e2fd;
    --yellow: #f6c100;
    --grey: #3e4857;
    --white: #ffffff;
    --black: #000000;
}


/* Fonts */

@font-face {
    font-family: "FontAwesome";
    src: url("/National_Library/oe_/https://www.lsjs.ac.uk/library/fonts/FontAwesome/FreeRegular5.otf") format('opentype');
}

@font-face { font-family: "RalewayRegular"; src: url(/National_Library/oe_/https://www.lsjs.ac.uk/library/fonts/Raleway/Regular.otf) format("opentype"); }

@font-face { font-family: "RalewayBold"; src: url(/National_Library/oe_/https://www.lsjs.ac.uk/library/fonts/Raleway/Bold.otf) format("opentype"); }

@font-face { font-family: "RalewayMedium"; src: url(/National_Library/oe_/https://www.lsjs.ac.uk/library/fonts/Raleway/Medium.otf) format("opentype"); }

@font-face { font-family: "RalewayLight"; src: url(/National_Library/oe_/https://www.lsjs.ac.uk/library/fonts/Raleway/Light.otf) format("opentype"); }


/* CSS reset */

* {background-repeat: no-repeat;background-position: center center;box-sizing: border-box;}
body { margin: 0px; padding: 0px; background-color: #f2f2f2; color: #000000; font-family: RalewayRegular, sans-serif; font-size: 87.5%; line-height: 1.4; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.size1 { font-size: 75%; }
body.size3 { font-size: 95%; }
a { color: #000000; text-decoration: none; font-weight: normal; }
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 0px; margin: 0px; font-size: 100%; font-weight: normal; }
form, fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { background: #ffffff; border: solid #706f6f 1px; padding: 5px; color: #000000; box-sizing: border-box; max-width: 100%; font-size: 100%; font-family: sans-serif; }
input[type=button], input[type=submit], .button,  #basketloginform [type=submit], .surv_standard .field_dynamic .btn {color: #ffffff;cursor: pointer;background-color: #eec242;border: none;padding: 10px 20px;font-family: RalewayBold;}
table {width: 100%;}
td, th { text-align: left; padding: 0px; }
p { padding: 0px 0px 15px 0px; margin: 0px; }
strong { font-family: "RalewayBold"; font-weight: normal; }
video { max-width: 100%; }
figure { display: block; margin: 0; padding: 0; }
figcaption { font-family: inherit; text-align: left; font-size: 80%; }
img {max-width:100%;height: auto;}
iframe { max-width: 100%; }
table { border-spacing: 0px; }
td, th { padding: 0px; }


.hidden {display: none;}
.spacer, .layoutspacer { clear: both; height: 0px; }
.errors { color: red; margin: 0px 0px 10px 0px;}

.feat_textsize {  float: right; height: 20px; padding: 10px 0px 10px 0px;  width: auto;}
.feat_textsize li { float: left; min-width: 15px;  line-height: 20px; cursor: pointer; }
.button1 {font-size: 80%; }
.button2 {font-size: 100%;  } 
.button3 {font-size: 120%; }
.size1 .button1, .size2 .button2, .size3 .button3  { color: #eec242; font-family: RalewayBold;}

.facebook::before { content: "\f082"; font-family: FontAwesome; }
.twitter::before { content: "\f099"; font-family: FontAwesome; }
.youtube::before { content: "\f16a"; font-family: FontAwesome; }

/* Body */

.layoutmiddle {max-width: 1270px;margin: 0px auto 0px auto;padding: 0px 10px 40px 10px;}
.layoutspacer { clear: both; height: 0px; display: block; }
.layoutoverlay { z-index: 5; background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; left: 0px; top: 55px; }

@media (min-width: 1285px) {
    .condright .layoutcontent { width: 805px; float: left; }
    .layoutright { width: 400px; margin: 0px 0px 0px 45px; float: left; }
}

.section232 .layoutcontent, .section14 .layoutcontent, .section8 .layoutcontent, .section268 .layoutcontent, .section171 .layoutcontent, .section685 .layoutcontent
   { width: auto; float: none; }

   .section685 .layoutmiddle, .section232 .layoutmiddle {max-width: none; padding: 0px;}


/* Standard text styles (incl text boxes, expandable text boxes and FAQ sections )*/

/* 
h1 32px = 228.6%
h2 20px = 142.8%
h3 18px = 128.6%
h4 16px = 114.3%
h5
*/


/* Page headings */

.std_contentpage .pagecontent h2, .util_textbox h2, .util_expandtext .text h2, .dbase_faqs h2, .shop_basket h2, .people h2, .util_sitesearch h2
   { font-size: 142.8%; font-family: RalewayRegular; margin-bottom: 20px; }

.std_contentpage .pagecontent h3, .util_textbox h3, .util_expandtext .text h3, .dbase_faqs h3
   { font-size: 128.6%; margin-bottom: 20px; }

.std_contentpage .pagecontent h4, .util_textbox h4, .util_expandtext .text h4, .dbase_faqs h4
   { font-size: 114.3%; margin-bottom: 10px; }


/* Content pages */

.std_contentpage .pagetitle, .feat_learnnow h1, .newsarchive .pagetitle, .shop_orderhistory h1
   {font-size: 228.6%;font-family: RalewayBold;padding: 40px 40px 20px 40px;background-color: #ffffff;}


@media(max-width: 1220px) {
    .std_contentpage .pagetitle, .newsarchive .pagetitle { font-size: 158.6%; } 
}

/* Spacing on all content pages (varies whether page has components or not) */
.std_contentpage, .newsarchive, .std_newsarticlea, .shop_basketpage, .util_sitesearch .include {min-height: 250px;}
.std_contentpage .pagecontent, .newsarchive .pagecontent, .shop_basketpage {padding: 40px 40px 50px 40px;background-color: #ffffff;}

.section3 .std_contentpage .pagecontent,
.section20 .std_contentpage .pagecontent
{ padding-bottom: 20px; }

.section3 .section18 .std_contentpage  .pagecontent,
.section3 .section19 .std_contentpage .pagecontent,
.section3 .section124 .std_contentpage .pagecontent,
.section20 .section60 .std_contentpage .pagecontent,
.section20 .section24 .std_contentpage .pagecontent,
.section20 .section61 .std_contentpage .pagecontent,
.section20 .section25 .section70 .std_contentpage .pagecontent,
.section20 .section25 .section71 .std_contentpage .pagecontent,
.section20 .section25 .section72 .std_contentpage .pagecontent,
.section20 .section25 .section74 .std_contentpage .pagecontent
{ padding-bottom: 50px; }

.std_contentpage .pagecomponents, .shop_orderhistory .content {padding: 0px 40px 50px 40px;background-color: #ffffff;}

@media (max-width: 600px) {
    .std_contentpage .pagetitle, .feat_learnnow h1, .newsarchive .pagetitle {padding: 40px 16px 20px 16px;}
    .std_contentpage .pagecontent, .newsarchive .pagecontent, .shop_basketpage {padding: 40px 16px 50px 16px;}
    .std_contentpage .pagecomponents {padding: 0px 16px 50px 16px;}
}

/* Content pages text */

.std_contentpage .pagecontent p, /*.util_textbox p, this messes up homepage*/ .util_expandtext .text p, .dbase_faqs p
{display: block; margin-bottom: 10px; font-size: 100%; /*font-family: RalewayLight;*/}

/* Below fixes unintended grey border between content and components on some pages */
.std_contentpage .pagecontent p:last-of-type {margin-bottom: 0px;}

/*.std_contentpage .pagecontent a, .util_textbox a, .util_expandtext .text a, .dbase_faqs a
{color: #0000FF; text-decoration: underline;}*/

.std_contentpage .pagecontent a:hover, .util_textbox a:hover, .util_expandtext .text a:hover, .dbase_faqs a:hover
{text-decoration: underline;}

/* Content pages images */

.std_contentpage .pagecontent img.left {
  margin: 20px 20px 20px 0px;
}

.std_contentpage .pagecontent img.right {
  margin: 20px 0px 20px 20px;
}

/*Standard list styles (incl expandable text boxes)*/

.std_contentpage .pagecontent li, .util_expandtext .text li, .dbase_faqs li
{font-size: 100%;}

.std_contentpage .pagecontent ul, .util_expandtext .text ul, .dbase_faqs .answer ul
{list-style-type: disc; padding-left: 30px; margin-bottom: 30px;}

.std_contentpage .pagecontent ul li, .util_expandtext .text ul li, .dbase_faqs .answer ul li
{list-style-type: disc;}

.std_contentpage .pagecontent ol, .util_expandtext .text ol, .dbase_faqs .answer ol
{list-style-type: decimal; padding-left: 30px; margin-bottom: 30px;}

.std_contentpage .pagecontent ol li, .util_expandtext .text ol li, .dbase_faqs .answer ol li
{list-style-type: decimal;}

/* Content page tables */
.std_contentpage .pagecontent table {margin-bottom: 10px;}

.ulpan .tablewrapper{width: 100%;}
.ulpan table, .ulpan th, .ulpan td{border: 1px solid #ddd !important;}
.ulpan th, .ulpan td{text-align: left;padding: 5px;}
.ulpan td{min-width: 100px; width: 230px;}
.ulpan tbody tr:nth-child(odd){background-color: #f2f2f2}
.ulpan table p{padding: 0;}
.ulpan .button{line-height: 3;}

@media( max-width: 700px ){
    .ulpan .tablewrapper{overflow-x: scroll;}
}

/* Expandable text boxes */
.util_expandtext .link 
{font-size: 128.6%; font-family: RalewayBold; background-color: #FFFFFF; margin: 0; border-top: #000000 solid 1px;}
.util_expandtext .link a {color: #2E9AFE; display: block; padding: 20px;}
.util_expandtext .link a:before { content : '+ '}
.util_expandtext.open .link a:before { content : '- '}
.pagecomponents_inner .util_expandtext.open:first-of-type { border-bottom: #000000 solid 1px;}
.pagecomponents_inner .util_expandtext.closed:last-of-type { border-bottom: #000000 solid 1px;}

/* FAQ components */
.dbase_faqs ul
{list-style-type: none; padding-left: 30px; margin-bottom: 15px;}
.dbase_faqs ul li
{list-style-type: none;}
.dbase_faqs .question
{/*font-family: RalewayBold;*/ font-size: 128.6%;  margin-bottom: 15px;}

/* FAQ components styling */

.dbase_faqs .section h2, .dbase_faqs .question 
{font-family: RalewayBold; color: #000000; background-color: #FFFFFF; margin: 0; border-top: #000000 solid 1px; display: block; padding: 20px;}
.dbase_faqs .question {font-size: 128.6%;}

.dbase_faqs div:last-of-type {border-bottom: #000000 solid 1px;}
.dbase_faqs div.section.expanded h2 {border-bottom: none;}

.dbase_faqs .section h2:before { content : '+ '}
.dbase_faqs div.section.expanded h2:before { content : '- '}

/* Credits */

div.layoutfooter { clear: both;  }

div.layoutcredits { font-family: RalewayMedium; font-size: 85.75%; clear: both; max-width: 1200px; margin: 0px auto 0px auto; color: #ffffff; background-color: #3E4857; }
div.layoutcredits .copyright {margin: -45px 0px 0px 0px; background-color: #3E4857;}

div.layoutcredits .design, 
.layoutcredits .design a,
div.layoutcredits .beachshore,
.layoutcredits .beachshore a
{ font-size: 85%; float: right; background-color: #3E4857;}
.layoutcredits .design a, .layoutcredits .beachshore a
{ color: #ffffff; font-weight: bold; background-color: #3E4857;}

div.layoutcredits .design { margin: -20px 0px 0px 0px; background-color: #3E4857; }
.layoutcredits .design a {  margin: 2px 0px 5px 5px; background-color: #3E4857; }

div.layoutcredits .beachshore {margin: -5px 0px 0px 0px; background-color: #3E4857;}
.layoutcredits .beachshore a {margin: 2px 0px 0px 5px; background-color: #3E4857;}

@media( max-width: 1220px )
{
    div.layoutcredits { padding: 20px; display: inline-block}
    div.layoutcredits, div.layoutcredits .design, div.layoutcredits .beachshore {width: 100%; }
    div.layoutcredits .copyright { margin: 0px; }
    div.layoutcredits .design, div.layoutcredits .beachshore
     { float: left; clear: left; margin: 0px;  }
    div.layoutcredits .design a, div.layoutcredits .beachshore a
     {  margin: 0px; float: none; }
}

/* Formbuilder */

.formbuilder .field, .memb_account .form .row
   { padding: 0px 0px 10px 0px; clear: both; }
.formbuilder .field .label, .memb_account .form .row .label
   {float: left;text-align: right;width: 180px;font-weight: bold;padding: 0px 20px 20px 0px;}
.formbuilder .field .input, .memb_account .form .row .field
   {float: left;width: 940px;padding: 0px 0px 0px 0px;}

.formbuilder .field_group>.label {float: none;width: auto;padding: 20px 0px 20px 0px;text-align: left;}
.formbuilder .field_group>.input {float: none;width: auto;}

.memb_account .form .buttons { clear: both; padding-top: 20px; }

.formbuilder .field.field_section .label, .memb_account .form .row .label
   { text-align: left; font-size: 130%; color: #3badff; padding-bottom: 0px; font-family: RalewayBold; }

@media( max-width: 1220px )
{
	.formbuilder .field { padding: 0px 0px 20px 0px; }
	.formbuilder .field .label { float: none; width: auto; padding: 0px 0px 5px 0px; text-align: left; }
	.formbuilder .field .input { float: none; width: auto; padding: 0px 0px 0px 0px; }
	.formbuilder input[type=text], .formbuilder input[type=password], .formbuilder textarea { width: 100%; }
}


/* Login */
.memb_loginbox .label { display: inline-block; min-width: 120px; padding: 0px 20px 20px 0px; }
.memb_loginbox .fieldemail { display: block; }
.memb_loginbox input[type=text], .memb_loginbox input[type=password] { max-width: 100%; width: 200px; }
.memb_loginbox .forgotpw { display: block; padding: 20px 0px 0px 0px; }
.memb_loginbox .register { display: block; padding: 20px 0px 0px 0px; }


.memb_account li { margin: 20px 0px 0px 0px;}
.memb_account li a {text-decoration: underline; }
.memb_account li:last-child { margin-top: 50px;}
.memb_account li:last-child a { text-decoration: none; background-color: #eec242; color: #ffffff; padding: 10px 30px; }
.memb_account .form .label { width: 270px; padding: 5px 10px 0px 0px;  }
.memb_account .form .field .input { float: none !important; width: auto; }


.loggedin .status {margin: 20px 0px;}

/* Donate */

.shop_donate .donationboxes ul { display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
.shop_donate .donationboxes ul li { width: 24%; box-shadow: 0 0 3px black; box-sizing: border-box; padding: 10px; background-color: #68a7db; color: white;}
.shop_donate .donationboxes ul li a { color: white; }
.shop_donate .donationboxes ul li strong { font-size: 110%;}
.shop_donate .donationquote strong { color: #3badff; }
.shop_donate .introduction {padding-bottom: 50px;}
.shop_donate .introduction a { font-family: RalewayBold; }
.shop_donate .introduction a:hover  { text-decoration: underline }

.shop_donate #fb-donate-187-div>.input { display: flex; width: 940px; gap: 50px; flex-wrap: wrap;}
.shop_donate .formbuilder #fb-donate-187-div.field .input { width: auto; }
.shop_donate textarea { height: 60px;}
.shop_donate .description { font-size: 90%;  }


/* Basket */

#basketmodeform { margin-bottom: 30px; }
.shop_basket table { width: 100%; border-bottom: solid #f2f2f2 1px; border-left: solid #f2f2f2 1px; }
.shop_basket table td, .shop_basket table th { padding: 5px; border-top: solid #f2f2f2 1px; border-right: solid #f2f2f2 1px; }
.shop_basket .confirm .contact, .shop_basket .confirm .billing, .shop_basket .confirm .payment { padding: 30px 0px 0px 0px; }
.shop_basket .buttons { padding: 30px 0px 0px 0px; }
.shop_basket .buttons input, .continueshopping { margin-right: 10px; }
.shop_basket .message { text-align: center; background-color: #eec242; line-height: 2.5; margin-bottom: 20px;}


/* Downloads */

.shop_downloads th, .shop_downloads td { padding: 5px; }
.shop_downloads td.download a { display: block; text-align: center; }
#downloadplayer { display: flex; justify-content: center; align-items: center; }
.ui-dialog { background: #000000; border: none; padding: 0px; border-radius: 0px; }
.ui-dialog-titlebar { background: #eec242; border: none; border-radius: 0px; }
.ui-dialog .ui-dialog-titlebar-close span { margin: -8px 0px 0px -8px; }

/* Surveys */
/*.section1.sectionlevel1 .surv_surveypage {width: 160%;}*/
.surv_standard {width: 100%;padding: 40px 40px 20px 40px;background-color: #ffffff;}
.surv_standard .message {color: red; font-family: RalewayBold; margin-bottom: 15px;}

.surv_surveypage .titletxt { font-size: 228.6%; font-family: RalewayBold; padding: 0px 0px 40px 0px; text-align: center;}

.surv_standard .intro a { color: #07C; text-decoration:underline; }


.surv_standard .formbuilder .field { clear: none; }
.surv_standard .formbuilder .field .label {text-align: left;width: 400px;float: left;padding: 0px 15px 10px 0px;}
.surv_standard .formbuilder .field .input {width: 300px;}
.surv_standard .formbuilder .field .input input[type=text], .surv_standard .formbuilder .input select { width: 250px; }

.surv_standard .field_section, .surv_standard .field_dynamic > .label { font-family: RalewayBold; font-size: 120%; margin-bottom: 15px; } { font-family: RalewayBold; font-size: 120%; margin-bottom: 15px; }
.surv_standard .formbuilder .field.field_section .label { width: 100%; text-align: left; padding: 0px 0px 0px 0px; }
.surv_standard .formbuilder .field.field_section .input { display: none; }
.surv_standard .formbuilder .field.field_group .label { text-align: left; padding: 0px 0px 0px 0px; }
.surv_standard .formbuilder .field.field_group > .label { width: 100%; padding: 10px 0px 20px 0px; font-family: RalewayBold; }

.surv_standard .formbuilder .field_grid .label {width: 100%;float: none;font-family: RalewayBold;/* padding-top: 30px; */}
.surv_standard .formbuilder .field.field_grid .input {width: 100%;padding: 0px 0px 30px 0px;}
.surv_standard .formbuilder .field.field_grid .input table {width:100%;table-layout:fixed;border-top: 1px solid #000000;border-left: 1px solid #000000;}
.surv_standard .formbuilder .field_grid tr {border-bottom: 1px solid #000000;}
.surv_standard .formbuilder .field_grid th {text-align: center;padding: 3px;border-right: 1px solid #000000;border-bottom: 1px solid #000000;}
.surv_standard .formbuilder .field_grid th:first-of-type {text-align: left;width: 400px;min-height: 45px;}
.surv_standard .formbuilder .field_grid td { text-align: center; border-right: 1px solid #000000; border-bottom: 1px solid #000000; }
.surv_standard .formbuilder .field_grid:last-of-type { padding-bottom: 30px; }

.teacherconference_survey #fb-32-div { font-family: RalewayRegular; }

.surv_standard .formbuilder .field_dynamic > .label { width: 100%; }
.surv_standard .formbuilder .field_dynamic > .input { width: 100%; }

.surv_standard .formbuilder .field_dynamic .field_group>.input { float: left; width: 940px; }

.surv_standard .field_dynamic .items {padding: 0px 0px 0px 0px;}
.surv_standard .field_dynamic .items .item {padding: 0px 0px 40px 0px;}
.surv_standard .field_dynamic .items .item .field_section { font-size: 100%; }
.surv_standard .field_dynamic .btn { display: inline-block; }
.surv_standard .field_dynamic .btn-danger { background-color: var(--grey); }

.surv_standard .form .buttons { margin: 30px 0px 0px 0px; }

@media (min-width: 1000px)
{
    .surv_standard .intro, .surv_standard .formbuilder, .surv_standard .message {width: 800px;margin: 30px auto 0px auto;}
    .surv_standard .form .buttons {text-align: center;margin: 30px auto 30px auto;width: 600px;}
}

@media (max-width: 1224px) {
    .surv_surveypage {width: 100%;}
    .surv_standard .formbuilder .field .label { width: 100%; }
    .surv_standard .formbuilder .field_dynamic .field_group>.input { width: 100%; }
}

@media (max-width: 1224px) {
    .surv_surveypage .titletxt { font-size: 200%; }
}

@media (max-width: 800px) {
    .surv_standard .formbuilder .field_grid th { min-height: 50px; }
    .surv_standard .formbuilder .field_grid th:first-of-type { width: auto; }
}

@media (max-width: 415px) {
    .surv_standard {padding: 20px;}
}

@media (max-width: 395px) {
    .surv_standard { font-size: 90%; padding: 5px; }
    .surv_standard .formbuilder .field_grid .input { font-size: 90%; }
    .surv_standard .formbuilder .field_grid th:first-of-type {width: 92px;}
}

/* Specific survey rules */
.teacherconference_survey th:first-of-type { min-height: 39px; }

.maureensurvey #fb-51-div .label, .maureensurvey #fb-51-div .input, .maureensurvey #fb-51-div .input textarea { width: 100%; }
.maureensurvey #fb-46-div .label, .maureensurvey #fb-46-div .input { width: 100%; }
.maureensurvey #fb-47-div .label, .maureensurvey #fb-47-div .input { width: 100%; }
.maureensurvey #fb-48-div .label, .maureensurvey #fb-48-div .input { width: 100%; }
.maureensurvey #fb-49-div .label, .maureensurvey #fb-49-div .input { width: 100%; }

.shop_category, .shop_product, .podcast {background: white ; box-sizing: border-box; padding: 5%}
.shop_category .description {padding: 0px 0px 20px 0px;}
.shop_category h1, .shop_product h1, .shop2022 h1, .podcast .pagetitle, .section232 .std_newsarticlea .headline {color: #61d2b4;font-size: 228.6%;padding-bottom: 10px;font-family: RalewayBold;padding-top: 0;padding-left: 0;}
.shop_category li, .podcast .list_article .article {padding-bottom: 5px; background: #61d2b4; color: white; border-bottom: white 1px solid; box-sizing: border-box; display: block;}
.shop_category li a, .podcast .list_article .article .headline {color: white;padding: 10px;display: block;font-size: 14px;}
.shop_category .shop_productlist .price, .podcast .list_article .article .abstract{padding: 0 10px 10px 10px; display: block;}
.shop_category li a:hover{ font-family: RalewayBold;}
.shop_category .shop_productlist li, .podcast .list_article .article {width: 200px;float: left;margin-right: 20px;height: 370px;margin-bottom: 20px;}
.shop_category .shop_productlist .name, .podcast .list_article .article .headline a  { font-family: RalewayBold; color: white; }
.shop_category .shop_productlist .bgimage, .podcast .list_article .article .image {width: 200px;height: 200px;background-position: center center;background-size: cover;display: block;}
.shop_product .image, .shop_product .summary, .shop_product .price, .shop_product .quantity{padding-bottom: 5px;}
.shop_product .detailedimages li:first-child { display: none; }
.shop_product .summary, .shop_product .price, .news_stylea .link {font-size: 110%;font-family: RalewayBold;}
.shop_product .quantity .value, .shop_product .quantity .label{display: inline-block; width: max-content;}
.shop_product .addtobasket{margin-top: 10px;}
.news_stylea .link {padding-bottom: 20px;}
.podcast .pagecomponents {padding: 0;}
.section232 .std_newsarticlea .created{ display: none;}
.section232 .std_newsarticlea  {display: flex; flex-direction: column; }
.section232 .std_newsarticlea .link {order: 3;}


/* Invoice Payment */
.custompayment .options .label { font-size: 115%;font-family: RalewayBold; margin: 15px 0px;}
.custompayment .options #option-1 { display:none;}
.custompayment .options #option-2 { width: 300px;}
.custompayment .price, .custompayment .quantity { display:none;}
.custompayment .addtobasket {margin-top:30px;}

.shop_category .subcategories { display: none; }
.shop2022 { min-height: 760px; background-color: white; padding: 0px 40px; }
.shop2022 .pagecontent { padding: 0px 40px 20px 40px; }
.shop2022 h3 { text-align: center;font-family: RalewayBold; font-size: 90%; }
.shop_categorylist ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; gap:40px;}
.shop_categorylist li{ width: 250px; height: 350px;  background: #61d2b4; color: white; border-bottom: white 1px solid; box-sizing: border-box;}
.shop_categorylist li:hover { cursor: pointer;}
.shop_categorylist .name a { color: white;    }
.shop_categorylist .name { padding: 10px; text-align: center; font-family: RalewayBold; font-size: 110%;  }
.shop_categorylist img { width: 250px; height: auto; }
.shop_categorylist li:nth-child(4) img {height: 250px; width: auto}

@media ( max-width: 1240px )
{
    .shop_categorylist li { margin: 0px 20px 20px 0px;  }
    .shop_categorylist ul { gap:20px;}
}

@media ( max-width: 700px )
{
    .shop_categorylist li:nth-child(4) img {height: auto;}
}

.backshop { display: none; }

.shop_basket .price, .shop_basket .quantity, .shop_basket .total{text-align: right;}
.shop_basket .remove{text-align: center;}
.shop_basket .discount{margin-top: 30px;}
.shop_basket .loginrequired { padding-top: 20px; }
.shop_basket .loginrequired a { font-family: RalewayBold; }

/* Newsletter */

.newspage .int_newsletter .titletxt {font-size: 142.8%; padding: 0px 0px 10px 0px;}
.newspage .int_newsletter .field {padding: 7px 0px 15px 0px;}
.newspage .int_newsletter .label {padding-bottom: 5px;}

/* order history */

.shop_orderhistory .view a { display: block; background-color: #68a7db; color: #ffffff; font-family: RalewayBold; padding: 10px; max-width: 60px; text-align: center; margin-bottom: 10px;}
.shop_orderhistory table td { padding: 10px 0px;}
.shop_orderhistory .details { padding-top: 40px;}
.shop_orderhistory .billingaddress, .shop_orderhistory .shippingaddress, .shop_orderhistory table { padding-top: 20px;}

@media (max-width: 500px)
{
    .shop_orderhistory {font-size:90%;}
    .shop_orderhistory .content {padding: 0px 20px 50px 20px;}
}

.shop2022 .pagecontent p { margin-bottom:0px;}


/* Bring Them Home Now counter */
/* Ensure cookie message displays in front */
#bthn {z-index: 1 !important;}