@font-face { font-family: CinzelDecorativeRegular; src: url(/library/fonts/CinzelDecorative/Regular.otf) format("opentype"); }
@font-face { font-family: RobotoLight; src: url(/library/fonts/Roboto/Light.otf) format("opentype"); }
@font-face { font-family: RobotoRegular; src: url(/library/fonts/Roboto/Regular.otf) format("opentype"); }
@font-face { font-family: RobotoMedium; src: url(/library/fonts/Roboto/Medium.otf) format("opentype"); }
@font-face { font-family: RobotoBold; src: url(/library/fonts/Roboto/Bold.otf) format("opentype"); }
@font-face { font-family: RobotoItalic; src: url(/library/fonts/Roboto/Italic.otf) format("opentype"); }

* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; font-family: RobotoRegular, sans-serif; font-style: normal; font-weight: 400; font-size: 16px;}
body { margin: 0px; padding: 0px; width: 100%; height: auto; background-color: var(--white); color: var(--black); font-family: RobotoRegular; font-weight: 400; font-size: 100%; line-height: 1.2; text-rendering:  optimizeLegibility; -webkit-font-smoothing: antialiased; }


.hidden, .layoutcredits { display: none; }
.spacer { clear: both; height: 0px; display: none; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-underline-offset: 0.2em; text-decoration-color: var(--teal); text-decoration: underline;}
strong, p>strong  { font-family: RobotoMedium; }
em {font-style: italic;}
.errors {color: darkred; margin-bottom: 10px;}

.richtextcontent figure {width: min-content; color: gray; font-size: 0.8rem; font-style: italic; }
.richtextcontent figure[style*="float:right"], .richtextcontent img[style*="float: right"] { margin: 0 0 30px 30px;}
.richtextcontent figure[style*="float:left"], .richtextcontent img[style*="float: left"] { margin: 0 30px 20px 0;}
.richtextcontent figure.image:not([style]) { margin: 20px 0 20px 0;}

h1, h1>span, h2, h3, h4, h5, h6 { padding: 0px 0px 0px 0px; margin: 0px; color: var(--black); }
h1, h1.pagetitle > span {font-size: 32px; margin-bottom: 0.1rem; margin-top: 2rem; color: var(--blue);}
h2.pagesubtitle {margin-bottom: 10px !important;}
h2.pagesubtitle > span {font-size: 24px; color: var(--blue); }
h2, .titletxt {font-size: 24px; margin-bottom: 12px; margin-top: 30px;  color: var(--blue);}
h3 {font-size: 20px; margin-bottom: 0.75rem;}
p { font-size: 16px; margin-top: 0; color: var(--gray);line-height: 1.4em;}

@media (max-width: 1000px) {
   h1, h1.pagetitle > span, h1.headline {font-size: 28px;}
   h2.pagesubtitle > span {font-size: 20px; color: var(--blue); }
   h2 {font-size: 20px;}
   h3 {font-size: 18px;}
}

:root 
{
   --white: #ffffff;
   --black: #121212;
   --gray: #666666;
   --lightgray: #F5F5F4;
   --blue: #085f94;
   --yellow: #d39e00;
   --teal: #0098AA;
   --brown: #6A5833;
}


/*********************************************************/
/* GENERAL LAYOUT ****************************************/

.layoutheader_inner {max-width: 1200px; width: 100%; margin: 0 auto;}

@media(max-width: 1200px) {
   .layoutheader_inner {padding: 0 10px;}
}

.pagebanner_inner > img {width: 100%; height: auto;}
.page_standarda:not(.home) .components, .page_standarda:not(.home) h1.pagetitle, .page_standarda:not(.home) h2.pagesubtitle, .event_eventpage, .std_newsarticlea  {max-width: 1200px; width: 100%; margin: 0 auto;}
.page_standarda:not(.home) h1.pagetitle {margin-bottom: 20px; margin-top: 30px;}
.page_standarda:not(.home) .pagecontent {max-width: 1200px; width: 100%;  margin: 30px auto 0px auto;}
.layoutmain:has(.std_newsarticlea) h1.headline {text-align: center; max-width: 1200px; width: 100%; margin: 30px auto 0 auto;}
.layoutmain:has(.std_newsarticlea) .created {text-align: center;}


@media(max-width: 1200px) {
   .page_standarda:not(.home) .pagecontent, .page_standarda:not(.home) .components, .page_standarda:not(.home) h1.pagetitle, .page_standarda:not(.home) h2.pagesubtitle, .event_eventpage, .std_newsarticlea {padding: 0 10px;}
}


/* Forms */
fieldset { padding: 0px; margin: 0px; border: none;}
input, textarea, select { font-size: 90%;  background-color: var(--lightgray); border: solid 1px var(--gray); padding: 5px; color: var(--black); box-sizing: border-box;  min-height: 32px; font-family: RobotoRegular; font-size: 16px; }

.form {max-width: 700px; width: 100%;}
.formbuilder .label label, .formbuilder .input input, .formbuilder textarea {width: 100%;}

.formbuilder .field {margin-bottom: 18px;}
.formbuilder .label {margin-bottom: 8px; }
.formbuilder .label label {color: var(--gray); font-weight: normal; font-family: RobotoRegular;}

.formbuilder textarea {min-height: 200px; }

.message {color: rgb(219, 2, 2); margin-bottom: 20px;}

@media(max-width: 1200px) {
   .form {padding: 0 10px;}
}


/* Buttons */
input[type=text], input[type=password]  { height: 30px; }
input[type=submit] { cursor: pointer; background-color: var(--blue); color: var(--white); padding: 10px 20px 10px 20px; border: none; letter-spacing: 1px;}

select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }


/* Lists */
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; margin-bottom: 10px; color: var(--gray);}
li::marker {color: var(--teal);}
.richtextcontent ul, .content ul, .richtextcontent ol { margin-bottom: 26px;}
.richtextcontent ul > li, .content ul > li {list-style-type: square; margin-left: 30px; }
.richtextcontent ol > li, .content ol > li {list-style-type: decimal; margin-left: 30px;}




/* Tables */

table{ max-width: 1000px; border-spacing:0; width:100%!important;table-layout:fixed; margin: 0 auto;}
.committee table { max-width: 800px;}
td,th{padding:10px;text-align:left;vertical-align:top;background-color:var(--lightgray);border:1px solid var(--white);overflow-wrap:anywhere;word-break:break-word;}
td,td p{color:#555555;}

@media(max-width:768px){
   table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
   table tbody{display:table;min-width:800px;width:100%;}
}

/*********************************************************/
/* RIGHT COLUMN LAYOUT ****************************************/


.condright .layoutmiddle {display: flex; gap: 50px; justify-content: center;}

.condright .layoutcontent {max-width: 875px; width: 100%;}
.condright .layoutright {max-width: 275px; margin-top: 30px; margin-right: 10px;}

.layoutright .layoutright_inner > .right-news, .right-events {background-color: var(--lightgray); margin-bottom: 20px; }
.layoutright .layoutright_inner h2 { font-size: 20px; color: var(--brown);}
.layoutright .layoutright_inner h3 { font-size: 18px; color: var(--blue);}
.layoutright .layoutright_inner > .right-news .headline a, .layoutright .layoutright_inner > .right-events .event .name a {font-size: 18px !important; color: var(--blue) !important;}
.layoutright .layoutright_inner > .right-events .event .name, .layoutright .layoutright_inner > .right-events .event .date {padding-top: 10px;}
.layoutright .layoutright_inner > .right-events .event .date a {color: var(--gray);}
.layoutright .layoutright_inner > .right-events .footerlinks {margin-top: 20px;}
.layoutright .layoutright_inner > .right-news > .list > .article {padding: 10px 0;}
.layoutright .layoutright_inner > .right-events .event .name a:hover, .layoutright .layoutright_inner > .right-events .event .date a:hover  {text-decoration: none;}


.layoutright .layoutright_inner > div {background-color: var(--lightgray); padding: 16px;}
.layoutright .layoutright_inner > div h2 {margin: 0 0 10px 0;}

/* .layoutmiddle:has(.layoutcontent .about-society) .layoutright .right-news { display: none;} */


/* Displaying right content depending on the page */
.layoutright_inner > * {
  display: none;
}

.layoutmiddle:has(.layoutcontent .about-society) .layoutright .right-events,
.layoutmiddle:has(.layoutcontent .about-society) .layoutright .right-news,
.layoutmiddle:has(.layoutcontent .about-society) .layoutright .right-policies,
.layoutmiddle:has(.layoutcontent .events) .layoutright .right-news,
.layoutmiddle:has(.layoutcontent .news) .layoutright .right-events,
.layoutmiddle:has(.layoutcontent .projects) .layoutright .right-events,
.layoutmiddle:has(.layoutcontent .projects) .layoutright .right-news,
.layoutmiddle:has(.layoutcontent .join-us) .layoutright .right-news,
.layoutmiddle:has(.layoutcontent .join-us) .layoutright .right-events,
.layoutmiddle:has(.layoutcontent .resources) .layoutright .right-events,
.layoutmiddle:has(.layoutcontent .resources) .layoutright .right-news,
.layoutmiddle:has(.layoutcontent .transactions) .layoutright .right-indexes,
.layoutmiddle:has(.layoutcontent .transactions) .layoutright .right-copies
{ display: block; margin-bottom: 20px;}

@media(max-width:768px){
   .condright .layoutmiddle {flex-direction: column;}
   .condright .layoutright {max-width: 748px; margin: 0 10px;}
}

/*********************************************************/
/* HEADER ************************************************/

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

.layoutheader .header-logo > .items .logo .links {display: flex; align-items: center;}
.layoutheader .header-logo > .items .logo .links img  {height: 140px; width: auto;}
.layoutheader .header-logo > .items .logo .links .link2 {max-width: 570px; width: 100%; margin-left: 10px;}
.layoutheader .header-logo > .items .logo .links .link2 a {font-family: CinzelDecorativeRegular; color: var(--blue); font-size: 32px;}
.layoutheader .header-logo > .items .logo .links .link2 a:hover {text-decoration: none;}

.layoutheader .login-btn a {background-color: var(--yellow); color: var(--white); font-size: 18px; padding: 8px 10px 6px 10px; display: inline-block;}
.layoutheader .login-btn a:hover {text-decoration: none;}



@media (min-width:1000px){
   .layouttopmenu .toggle{display:none;}
   .layouttopmenu {background-color: var(--blue); }
   .layouttopmenu_inner {display: flex; justify-content: center; align-items: center;height: 50px;}
   .layouttopmenu .nav_multilevel .expand  {display: none;}
   .layouttopmenu .nav_multilevel .level2 {display: none;}
   .layouttopmenu .nav_multilevel > .links > .level1 > li:first-child {display: none;}

   .layouttopmenu .nav_multilevel .level1 {max-width: 1200px;margin: 0 auto;display: flex; justify-content: space-between; align-items: center; position: relative;}
   .layouttopmenu .nav_multilevel .level1 > li {margin-bottom: 0; display:flex; }
   .layouttopmenu .nav_multilevel .level1 > li:hover .level2 {display: block !important;}
   .layouttopmenu .nav_multilevel .level1 > li { text-align: center;}
   .layouttopmenu .nav_multilevel .level1 > li > a {font-family: RobotoLight; font-size: 15px; display:flex; align-items:center;padding: 0 9px; justify-content:center; width:100%; height:50px; color:var(--white); text-transform:uppercase; transition: background-color 0.5s ease, color 0.5s ease;}
   .layouttopmenu .nav_multilevel .level1 > li a:hover{background-color: var(--teal); text-decoration: none;}

   .layouttopmenu .nav_multilevel .level2 {position: absolute;z-index: 999;background-color: var(--blue); top: 50px;}
   .layouttopmenu .nav_multilevel .level2 > li {margin-bottom: 0;}
   .layouttopmenu .nav_multilevel .level2 > li a{color: var(--white); padding:10px; text-transform: uppercase; width: 100%; display: block; font-size: 16px; font-family: RobotoLight; }
}



@media(max-width: 1000px) {

   /* Menu */
   .layouttopmenu .toggle { cursor:pointer; right: 10px; top: 77px; text-align: center; margin-top: 10px; margin-bottom: 10px;}
   .layouttopmenu .toggle i {font-size: 30px; color: var(--yellow);}
   .layouttopmenu .toggleoff ul{display:none;}
   
   .layouttopmenu .toggleon .expand i {color: var(--white); font-size: 12px;}
   .layouttopmenu .toggleon > .links > .level1 {display:block; position: absolute; background-color: var(--blue); width: 100%; text-align: center; }
   .layouttopmenu .toggleon > .links > .level1 a {color: var(--white); }
   .layouttopmenu .toggleon > .links > .level1 > li {padding: 10px; margin-bottom: 0; border-bottom: 1px solid var(--white);}
   .layouttopmenu .toggleon > .links > .level1 > li > .level2 > li {margin-bottom: 0; padding: 6px 0 6px 0;  display: flex; align-items: center; justify-content: center;  margin-top: 10px;}

   /* Logo */
   .layoutheader .header-logo > .items .logo .links img {height: 60px;}
   .layoutheader .header-logo > .items .logo .links .link2 {max-width: 370px;}
   .layoutheader .header-logo > .items .logo .links .link2 a {font-size: 20px; }

   .layoutheader .layoutheader_inner {flex-direction: column; width: 100%;}
   .layoutheader .header-logo {justify-content: start; width: 100%;}
}

@media(max-width: 425px) {
   .layoutheader .header-logo > .items .logo .links .link2 a {font-size: 16px;}
}




/*********************************************************/
/* FOOTER ************************************************/

.layoutfooter .stamp { margin-top: 50px;}
.layoutfooter .stamp .imagetop {text-align: center; margin-bottom: 25px;}
.layoutfooter .stamp img {max-width: 150px; height: auto;}

.layoutfooter .layoutfooter_inner .footer-container {background-color: var(--lightgray);}
.layoutfooter .layoutfooter_inner .footer-container .items{max-width: 1200px; width: 100%; margin: 0 auto; padding: 50px 10px 10px 10px;}
.layoutfooter .layoutfooter_inner .footer-logos {margin-bottom: 30px;}
.layoutfooter .layoutfooter_inner .footer-logos ul {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.layoutfooter .layoutfooter_inner .footer-logos ul li img {max-height: 70px; height: 100%; width: auto;}

.layoutfooter .layoutfooter_inner .footer-social {margin-bottom: 40px;}
.layoutfooter .layoutfooter_inner .footer-social h2 {font-size: 20px; color: var(--blue); text-align: center;}
.layoutfooter .layoutfooter_inner .footer-social ul {display: flex; justify-content: center; gap: 5px;}
.layoutfooter .layoutfooter_inner .footer-social ul li a i {font-size: 30px; color: var(--blue);}

.layoutfooter .layoutfooter_inner .footer-credits > .std_content_inner > .content > ul {display: flex; justify-content: space-between; margin-bottom: 0px; flex-wrap: wrap;}
.layoutfooter .layoutfooter_inner .footer-credits > .std_content_inner > .content > ul > li {list-style: none; margin-left: 0px; font-size: 14px; color: var(--gray);}
.layoutfooter .layoutfooter_inner .footer-credits > .std_content_inner > .content > ul > li a {font-size: 14px;}



/*********************************************************/
/* HOME ************************************************/

@media(min-width: 768px) {
   .home .pageheader_inner {position: relative; display: inline-block;}
   .home .pagebanner_inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1;}
   .home .pagebanner_inner img {width: 100%; height: auto; display: block;}
   .home h1.pagetitle > span {font-size: 36px; font-weight: 600; margin-bottom: 1.2rem; color: var(--white); }
   .home h1.pagetitle {position: absolute; top: 50%; left: 0; right: 0; max-width: 1200px; width: 100%; margin: 0 auto; transform: translateY(-50%); z-index: 2; padding: 0 10px;}
}

@media(max-width: 768px) { 
      .home .pagebanner_inner img {width: 100%; height: auto; display: block;}
      .home h1.pagetitle { padding: 10px; background-color: var(--teal); }
      .home h1.pagetitle > span {font-size: 20px;  color: var(--white); max-width: 500px; width: 100%; display: block; margin: 0;}
}



.home .boxes {margin: 50px 0; padding: 0 10px;}
.home .boxes .items {display: flex; max-width: 1200px; width: 100%; margin: 0 auto; gap: 30px;}
.home .boxes .items > .box .titletxt a, .home .boxes .items > .box .titletxt {color: var(--white); font-size: 22px; padding: 7px 10px; margin: 0;}
.home .boxes .items > .box:nth-child(odd) .titletxt {background-color: var(--blue);}
.home .boxes .items > .box:nth-child(even) .titletxt {background-color: var(--yellow);}

.home .boxes .items > .box {background-color: var(--lightgray); flex: 1; max-width: 400px; width: 100%; flex-direction: column; display:flex; height: 100%;}
.home .boxes .items > .box .items{  flex-direction: column; display:flex;}
.home .boxes .items > .box.std .content{padding: 10px; min-height: 150px;}
.home .boxes .items > .box.std .link {padding: 10px; margin-top: auto; background-color: #e7e7e4; margin-top: auto;}
.home .boxes .items > .box .link a {font-size: 18px;}
.home .boxes .items > .box .imagetop {background-size: cover; height: 250px;}

.home .boxes .items > .box-event {background-color: var(--lightgray); flex: 1; max-width: 400px; width: 100%; display: flex; flex-direction: column; height: 100%; }
.home .boxes .items > .box-event > .titletxt {color: var(--white); font-size: 22px; padding: 7px 10px; margin: 0; background-color: var(--blue);}
.home .boxes .items > .box-event > .items {display: flex; flex-direction: column; gap: 0;}
.home .boxes .items > .box-event .util_textbox_inner {display: flex; flex-direction: column;}
.home .boxes .items > .box-event .imagetop {height: 250px; overflow: hidden;}
.home .boxes .items > .box-event .imagetop img {width: 100%; height: 100%; object-fit: cover; display: block;}
.home .boxes .items > .box-event .event_list {flex: 1; display: flex; flex-direction: column; }
.home .boxes .items > .box-event .event_list ul {margin: 0; padding: 0; list-style: none;}
.home .boxes .items > .box-event .event_list ul li {padding: 10px; margin-bottom: 0; min-height: 150px;}
.home .boxes .items > .box-event .footerlinks {padding: 10px; margin-top: auto; background-color: #e7e7e4;}
.home .boxes .items > .box-event .footerlinks .link a {font-size: 18px;}
.home .boxes .items > .box-event .date, .home .boxes .items > .box-event .venue {margin: 10px 0; }
.home .boxes .items > .box-event .date a, .home .boxes .items > .box-event .venue a  {color: var(--gray); }
.home .boxes .items > .box-event .noevents {padding: 10px; min-height: 150px;}

@media(max-width: 768px) { 
   .home .boxes .items {flex-direction: column; max-width: 400px; }
}

.home .home-transactions {max-width: 1200px; width: 100%; margin: 0 auto; background-color: var(--lightgray); padding: 6px 30px 30px 30px;}
.home .home-transactions .titletxt a {font-size: 28px; color: var(--blue);}
.home .home-transactions .content p {color: var(--black);}


.home .list_article {max-width: 1200px; width: 100%; margin: 50px auto;}
.home .list_article .titletxt {font-size: 28px;}
.home .list_article .headline > a {color: var(--yellow) !important;}
.home .list_article .article {background-color: var(--white) !important;}
.home .list_article .article .abstract {color: var(--black) !important; font-size: 16px !important;}
@media(max-width: 1200px) { 
  .home .list_article { padding: 0 10px;}
}

/* .home .boxes .items > .util_container.box .footerlinks { padding: 10px; margin-top: auto; background-color: #e7e7e4;}
.home .boxes .items > .util_container.box .footerlinks a { font-size: 18px;} */


/*********************************************************/
/* EVENTS AND ARTICLES ***********************************/


/* Events lists */
.main-event-list > ul, .list_article .list {display: flex; flex-direction: column; gap: 20px;}
.main-event-list > ul li:nth-child(even), .list_article > .list > .article:nth-child(even) {background-color: var(--lightgray);}
.main-event-list > ul > li, .list_article > .list > .article {padding: 16px;}
.main-event-list > ul > li .name a, .list_article > .list > .article .headline a {color: var(--brown); font-size: 20px; }
.main-event-list > ul > li .name a:hover, .main-event-list > ul > li .date a:hover, .main-event-list > ul > li .venue a:hover, .list_article > .list > .article .headline a:hover {text-decoration: none;}
.main-event-list > ul > li .date a, .main-event-list > ul > li .venue a, .list_article > .list > .article .abstract {color: var(--gray);}

.main-event-list > ul > li .name, .list_article > .list > .article .headline  {margin-bottom: 8px;}
.main-event-list > ul > li .date, .list_article > .list > .article .created {margin-bottom: 20px;}
.main-event-list > ul > li .venue, .list_article > .list > .article .abstract {margin-bottom: 20px;}


.list_article > .list > .article .image { float: left; margin-right: 20px; margin-bottom: 10px;}
.list_article > .list > .article .image img {display: block; max-width: 200px; width: 100%; height: auto;}
.list_article > .list > .article .created {color: var(--gray);}
.list_article > .list > .article .abstract {font-size: 18px; line-height: 22px;}
.list_article > .list > .article::after { content: ""; display: block; clear: both;}

.std_newsarticlea .image img{max-width: 500px; height: auto; width: 100%;}
.std_newsarticlea .created {margin: 10px 0; color: var(--gray);}


@media (max-width: 1000px) {
   .event .name a, .main-event-list > ul > li .name a {font-size: 18px;}
}

@media (max-width: 425px) {
   .list_article > .list > .article .image img {max-width: 100px;}
}


/* Event pages */

.event_eventpage .headline, h1.headline {margin-bottom: 20px;}
.event_eventpage .info .date, .event_eventpage .info .venue{color: var(--gray); font-family: RobotoMedium; margin-bottom: 10px; font-size: 18px;}
.event_eventpage .article {margin-top: 20px;}


/*********************************************************/
/* PROJECTS PAGE *****************************************/

.projects .pagecomponents_inner{ display:flex; gap:40px;}
.projects .pagecomponents_inner > .util_textbox{ flex:1; box-sizing:border-box;}
.projects .pagecomponents_inner .util_textbox_inner { width:100%; max-width:none; box-sizing:border-box;}
.projects .pagecomponents_inner .util_textbox_inner > h2.titletxt {font-weight: 800; margin-bottom: 20px;}
.projects .pagecomponents_inner .util_textbox_inner img {max-width: 400px; width: 100%; height: auto; margin-bottom: 10px;}
.projects .wall .titletxt a {font-weight: 800; margin-bottom: 20px; font-size: 24px;color: var(--blue);}

@media (max-width:800px){
  .projects .pagecomponents_inner{ flex-direction:column; gap: 0; }
}

/* .feat_image a {background-size: contain; height: 200px; width: 200px; display: block;} */

.feat_lbgallery .thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; list-style: none; margin: 0; }
.feat_lbgallery .thumbnails li { display: flex; flex-direction: column; }
.feat_lbgallery .thumbnails li .image { width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f5f5f5; }
.feat_lbgallery .thumbnails li .image img { width: 100%; height: 100%; object-fit: contain; }
.feat_lbgallery .thumbnails li .description { font-size: 16px; margin-top: 8px; font-family: RobotoLight; src: url(/library/fonts/Roboto/Light.otf) format("opentype"); }
.feat_lbgallery .thumbnails .divider { display: none; }

@media (max-width: 1024px) { 
    .feat_lbgallery .thumbnails { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 768px) { 
    .feat_lbgallery .thumbnails { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 480px) { 
    .feat_lbgallery .thumbnails { grid-template-columns: 1fr; } 
}

.ui-widget-content { max-width: 1000px; width: 100% !important; }
.ui-dialog-content > .feat_gallery li {}
.feat_gallery > ul li.image { display: flex; align-items: center; justify-content: center; padding: 16px; }
.feat_gallery > ul li.image span { display: flex; align-items: center; justify-content: center; }
.feat_gallery > ul li.image img { max-width: 1000px; width: 100%; height: auto; display: block; margin: 0 auto; }
.download-btn { margin-top: 20px; }
.download-btn a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--blue); color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px; transition: background 0.2s ease; }
.download-btn a:hover { background: var(--teal); }
.download-btn i { font-size: 16px; }
.exc-general-links { background-color: var(--lightgray); padding: 30px 20px; margin: 30px 0; }
.exc-general-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.exc-general-links ul li { list-style: none; margin-bottom: 0; }
.exc-general-links ul li a { display: inline-block; padding: 10px 20px; background: var(--white); color: var(--blue); text-decoration: none; border-radius: 4px; border: 1px solid var(--blue); font-size: 14px; font-family: RobotoRegular; transition: background 0.2s ease, color 0.2s ease; }
.exc-general-links ul li a:hover { background: var(--blue); color: var(--white); text-decoration: none; }

@media (max-width: 480px) { .exc-general-links ul { flex-direction: column; align-items: center; } .exc-general-links ul li a { display: block; text-align: center; } }

.acton-trussell .acton-links { margin: 30px 0; }
.acton-trussell .acton-links .links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.acton-trussell .acton-links .links li { margin-bottom: 0; }
.acton-trussell .acton-links .links li a { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 20px; background-color: var(--blue); color: var(--white); text-decoration: none; font-size: 18px; font-family: RobotoLight; transition: background 0.2s ease; height: 100%; }
.acton-trussell .acton-links .links li a:hover { background-color: var(--teal); text-decoration: none; }

@media (max-width: 768px) { .acton-trussell .acton-links .links { grid-template-columns: 1fr; } .acton-trussell .acton-links .links li a { padding: 30px 20px; } }



.forgotpw, .register {display: block;}

.login-container h2 {text-align: center;}
.memb_loginbox.login { max-width: 420px; width: 100%; margin: 40px auto; padding: 32px; background: var(--white); border: 1px solid #d0d0d0; border-top: 4px solid var(--blue); box-sizing: border-box; }
.memb_loginbox.login fieldset { border: none; margin: 0; padding: 0; }
.memb_loginbox .fieldemail, .memb_loginbox .fieldpw { display: flex; flex-direction: column; margin-bottom: 16px; margin-top: 20px; }
.memb_loginbox .fieldemail .label, .memb_loginbox .fieldpw .label { margin-bottom: 4px; }
.memb_loginbox label { font-size: 13px; font-family: RobotoMedium; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.memb_loginbox input.text, .memb_loginbox input.password { width: 100%; padding: 9px 12px; font-size: 16px; font-family: RobotoRegular; border: 1px solid var(--gray); background: var(--lightgray); color: var(--black); box-sizing: border-box; outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.memb_loginbox input.text:focus, .memb_loginbox input.password:focus { border-color: var(--blue); background: var(--white); }
.memb_loginbox .stayloggedin { font-size: 13px; font-family: RobotoRegular; color: var(--gray); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.memb_loginbox .login input.submit { width: 100%; padding: 11px; background: var(--blue); color: var(--white); border: none; font-size: 15px; font-family: RobotoRegular; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; }
.memb_loginbox .login input.submit:hover { background: var(--teal); }
.memb_loginbox .forgotpw, .memb_loginbox .register { display: none; margin-top: 12px; font-size: 13px; font-family: RobotoRegular; text-align: center; }
.memb_loginbox .forgotpw a, .memb_loginbox .register a { color: var(--blue); text-decoration: none; }
.memb_loginbox .forgotpw a:hover, .memb_loginbox .register a:hover { color: var(--teal); text-decoration: underline; }
.memb_loginbox .introduction p, .memb_loginbox .introduction strong { font-size: 18px;}
@media (max-width: 480px) { 
    .memb_loginbox.login {  padding: 24px 20px; } 
}


.registration h1 {text-align: center;}
.memb_account { max-width: 700px; width: 100%; margin: 40px auto; padding: 0 10px; box-sizing: border-box; }
.memb_account .form.form_register { width: 100%; }
.memb_account fieldset { border: none; margin: 0; padding: 0; }
.memb_account .formbuilder { display: flex; flex-direction: column; gap: 0; }
.memb_account .form-group.field { margin-bottom: 18px; }
.memb_account .field_group > .label > label { display: block; font-family: RobotoMedium; font-size: 18px; color: var(--blue); margin-bottom: 12px; margin-top: 24px; padding-bottom: 6px; border-bottom: 2px solid var(--lightgray); }
.memb_account .field_group > .label > label:empty { display: none; }
.memb_account .field .label { margin-bottom: 4px; }
.memb_account .field .label label { font-size: 13px; font-family: RobotoMedium; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.memb_account .field .label label .required { color: var(--blue); margin-left: 2px; }
.memb_account .field .input input.form-control, .memb_account .field .input select.form-control, .memb_account .field .input textarea.form-control { width: 100%; padding: 9px 12px; font-size: 16px; font-family: RobotoRegular; border: 1px solid var(--gray); background: var(--lightgray); color: var(--black); box-sizing: border-box; outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.memb_account .field .input input.form-control:focus, .memb_account .field .input select.form-control:focus, .memb_account .field .input textarea.form-control:focus { border-color: var(--blue); background: var(--white); }
.memb_account .field_textarea .input textarea.form-control { min-height: 120px; resize: vertical; }
.memb_account .field_select .input select.form-control { height: 40px; }
.memb_account .spacer { display: none; }
.memb_account .buttons { margin-top: 24px; }
.memb_account .buttons input[type=submit] { padding: 11px 30px; background: var(--blue); color: var(--white); border: none; font-size: 15px; font-family: RobotoRegular; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; }
.memb_account .buttons input[type=submit]:hover { background: var(--teal); }


.memb_account { max-width: 700px; width: 100%; margin: 40px auto; padding: 0 10px; box-sizing: border-box; font-family: RobotoRegular; font-size: 16px; color: var(--gray); }
.memb_account .richtextcontent { margin-top: 12px; }
.memb_account .richtextcontent p { margin: 0; }

.shop_productlist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.shop_productlist .product { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--lightgray); padding: 24px; transition: background-color 0.2s ease; }
.shop_productlist .product:hover { background-color: #e8e8e6; }
.shop_productlist .product .name { margin-bottom: 6px; }
.shop_productlist .product .name a { font-family: RobotoMedium; font-size: 18px; color: var(--blue); text-decoration: none; }
.shop_productlist .product .name a:hover { text-decoration: none; }
.shop_productlist .product .description { font-size: 13px; color: var(--gray); font-family: RobotoLight; margin-bottom: 12px; min-height: 18px; }
.shop_productlist .product .price { font-family: RobotoMedium; font-size: 22px; color: var(--brown); margin-bottom: 20px; }
.shop_productlist .product .buybutton a { display: inline-block; padding: 10px 24px; background-color: var(--blue); color: var(--white); font-size: 14px; font-family: RobotoRegular; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s ease; }
.shop_productlist .product .buybutton a:hover { background-color: var(--teal); text-decoration: none; }
.shop_productlist .divider { display: none; }
@media (max-width: 600px) { 
    .shop_productlist ul { grid-template-columns: 1fr; } 
}


.profile-info { max-width: 500px; width: 100%; margin-bottom: 30px; background-color: var(--lightgray); padding: 20px; }
.profile-info .field { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--white); }
.profile-info .field:last-child { border-bottom: none; }
.profile-info .field .label { font-family: RobotoMedium; font-size: 14px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; min-width: 140px; padding-top: 2px; }
.profile-info .field .value { font-family: RobotoRegular; font-size: 15px; color: var(--black); white-space: pre-line; }
.change-details { list-style: none; margin: 12px 0 0 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; max-width: 500px; }
.change-details li { margin-bottom: 0; }
.change-details li a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background-color: var(--blue); color: var(--white); font-size: 14px; font-family: RobotoRegular; letter-spacing: 0.5px; text-decoration: none; transition: background-color 0.2s ease; }
.change-details li a:hover { background-color: var(--teal); text-decoration: none; }
.change-details li a i { font-size: 13px; }
@media (max-width: 480px) { .profile-info .field { flex-direction: column; gap: 4px; } .profile-info .field .label { min-width: unset; } .change-details { flex-direction: column; max-width: 500px; } }


.log-out a { display: inline-block; padding: 10px 20px; background-color: var(--yellow); color: var(--white); margin: 16px 0; }

.memb_subscriptionstatus ul { list-style: none; margin: 0; padding: 0; }
.memb_subscriptionstatus ul li { background-color: var(--lightgray); padding: 24px; margin-bottom: 0; }
.memb_subscriptionstatus h3.product { font-size: 18px; color: var(--blue); margin-bottom: 16px; }
.memb_subscriptionstatus .status { font-size: 15px; color: var(--gray); margin-bottom: 8px; }
.memb_subscriptionstatus .payment { display: none; }
.memb_subscriptionstatus .renewal { font-size: 13px; color: var(--gray); font-style: italic; border-top: 1px solid #ddd; padding-top: 12px; }

.memb_account .richtextcontent p { margin-bottom: 12px; text-align: center;}
.memb_account .richtextcontent a { display: inline-block; margin-top: 4px; padding: 10px 20px; background-color: var(--blue); color: var(--white); font-size: 14px; font-family: RobotoRegular; letter-spacing: 0.5px; text-decoration: none; transition: background-color 0.2s ease; }
.memb_account .richtextcontent a:hover { background-color: var(--teal); text-decoration: none; }

.membership-buy td { background-color: white;}
.membership-buy input[type=image] {margin-left: 10px;}


/* Transactions */
.transactions .results {display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.transactions .results li {max-width: 230px; background-color: var(--lightgray); padding: 5px;}
.transactions .results .image {background-size: cover; height: 320px; width: 220px; background-position: center right; }
.transactions .results .name {max-width: 220px; height: auto; text-align: center; padding: 8px 0; min-height: 60px;}
.transactions .past-transactions ul li:first-child {display: none;}

.transactions .latest-transaction {display: flex; flex-direction: column;}
.transactions .latest-transaction > .titletxt { order: 1; }
.transactions .latest-transaction .introduction { order: 3;}
.transactions .latest-transaction .results { order: 2; margin-top: 20px;}