@charset "UTF-8";
li{list-style:none}ul{padding:0}input{outline:0}strong{font-weight:700}img{max-width:100%}a{text-decoration:none}
/* ArAgile - Styles */
.container{margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1120px}}@media (min-width:1280px){.container{width:1280px}}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}@media (max-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}
@media (min-width:576px){.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float: left;}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}
.big-container{margin-left: auto;margin-right: auto; max-width: 1440px}
.lrp-15{padding-left: 15px;padding-right: 15px;}.z1{z-index: 1;}.pointer-none{pointer-events: none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;font-family:'Inter',sans-serif;font-weight:400;font-style:normal}
.align-right{text-align:right}.align-left{text-align-last:left}.align-center{text-align:center}.relative{position:relative}.clear{clear:both}.over-hide,.row{overflow:hidden}.fright{float:right}.fleft{float:left}
select {border:0px;outline:0px;background: inherit;}.mt-40{margin-top: 40px;}.w100p{width: 100%}
.flex {display: flex;}.flex-wrap{flex-wrap: wrap;}.block{display: block;}.text-center{text-align: center;}.center-y{align-items: center;}.center-x{justify-content: center;}.center-x-y{align-items: center;justify-content: center;}.flex-column{display: flex;flex-direction: column;}
.left{float: left;}.right{float: right;}.hide{display: none;}.space-b{justify-content: space-between}.space-a{justify-content: space-around}
.grid{display: grid;}.gray{background-color:#f7f7f7;}.gap-8{gap:8px}.gap-10{gap:10px}.gap-15{gap:15px;}.gap-16{gap: 16px}.gap-20{gap:20px}.gap-30{gap:30px}.gap-36{gap:36px}
body {
  background: #fff;
  padding-top: 24px;
}
/* Header */
.header{
  position: fixed;
  z-index: 10;
  top: 24px;
  width: 100%;
}
.header > .container {
  position: relative;
  padding: 24px 0px;
  background: transparent;
  transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
.header .container.white-bg {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 48px 48px;
  backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0.8) 50%);
}
.layer-top {
  margin: 0 auto;
  display: none !important;
  top:0;
  left: 0;right: 0;
  width: 100%;
  position: fixed;
}
.layer-top .container {
  height: 113px;
  backdrop-filter: blur(10px);
  width: 100%;
  background: linear-gradient(180deg, #f7f7f74a 0%, #f7f7f74a 30%, #f7f7f74a 50%);
}
.main-header {
  border-radius: 32.5px;
  background: rgb(3 201 136 / 88%);
  padding: 14px;
  margin: 0 var(--odmj-gutter);
  backdrop-filter: blur(5px);
  position: relative;
}
.main-header.green-bg, body.single-post .main-header {
  background: rgb(3 201 136 / 88%);
}
.submit-article {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.9px;
  text-transform: capitalize;
  padding: 10px 32px;
  border-radius: 22px;
  background: #07845b;
  cursor: pointer;
  margin-left: 22px;
}
.green-bg .submit-article, body.single-post .submit-article {
  background: #07845b;
}
.search-icon {
  cursor: pointer;
}
.header-main-menu ul {
  gap: 47px;
}
.header-main-menu .sub-menu {
  display: none;
}
.sidebar-menu .sub-menu {
  height: 0;
  overflow: hidden;
  background-color: #F1F1F1;
  border-radius: 18px;
}
.sidebar-menu .sub-menu a {
  padding: 12px 24px;
}
.sidebar-menu .sub-menu a:first-child {
  padding-top: 20px;
}
.sidebar-menu .sub-menu a:last-child {
  padding-bottom: 20px;
}
.header-main-menu a {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.search-field-block {
  display: none;
  background: #07845b;
  padding: 14px;
  width: 100%;
  height: 69px;
  position: absolute;
  top: 0;
  border-radius: 32.5px;
  left: 0;
}
.search-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.header-search-block input[type="text"] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  width: calc(100% - 100px);
  font-size: 18px;
  color: #fff;
}
.search-field svg {
  cursor: pointer;
}

.page-template-home .menu-burger,
.page-template-home .header-logo span,
body:not(.page-template-home) .header-main-menu ul {
  display: none;
}
.page-template-home .header-main-menu ul {margin-left:24px;}

.menu-burger {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.line1,
.line3 {
  transform-origin: center;
}
.menu-burger.active .line1 {
  transform: rotate(45deg) translate(0, 0);
}
.menu-burger.active .line2 {
  opacity: 0;
}
.menu-burger.active .line3 {
  transform: rotate(-45deg) translate(0, -8px);
}
.header-logo span {
  margin-left: 14px;
  color: #FFF;
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.75px;
  line-height: 1;
  text-transform: uppercase;
  margin-top:5px;
text-shadow: 0px 0px 0px #07845b;    
}
.menu-burger {
  cursor: pointer;
}
body:not(.page-template-home) .header-main-menu {
  position: absolute;
  width: 100%;
  display: flex;
  z-index: -1;
}
body:not(.page-template-home) .header-logo {
  margin: 0 0 0 32px;
}
/* Hero */
.hero-img {
  height: 700px;
  position: relative;
  border-radius: 56px;
}
body:not(.page-template-home)  .hero-img {
  background-position-y: -110px;
}
.hero-img:after {
  content: '';
  background: rgba(0, 0, 0, 0.40);
  top: 0;bottom: 0;left: 0;right: 0;
  position: absolute;
  border-radius: 56px;
}
.hero-text {
  position: relative;
  padding-top: 144px;
  z-index: 1;
  color: #FFF;
  font-family: "Bebas Neue", sans-serif;
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin-left: 75px;
}
.hero-slider {
  position: absolute;
  bottom: 34px;
  z-index: 1;
  margin-left: 24px;
  margin-right: 24px;
  width: calc(100% - 48px);
}
.hero-item {
  border-radius: 40px;
  background: rgba(217, 217, 217, 0.20);
  backdrop-filter: blur(6px);
  padding: 20px 24px;
  height: 220px;
  margin: 0 10px;
}
.hero-item svg {
  flex-shrink: 0;
}
.hero-slider-desc {
  color: #FFF;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-item h3 {
  color: #FFF;
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.9rem;
  margin-right: 20px;
  height: 5.7em;
  overflow: hidden;
}
.hero-slider .owl-stage{padding-left:0px !important;}
.hero-slider .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  position: absolute;
  width: 100%;
}
.hero-slider.owl-carousel button.owl-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
}
.hero-slider.owl-carousel button.owl-dot.active {
  opacity: 1;
}
.sidebar-menu {
  position: absolute;
  top: 100%;
  width:360px;  
  background-color: #fff;
  z-index: 1000;
  height: 77vh;
  border-radius: 32px;
  padding: 32px 24px;

  overflow: auto;
  border: 0;
  left: 24px;
  display: none;

  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  ::-webkit-scrollbar {
    display: none;
  }
}
.sidebar-menu ul li {
  border-bottom: 1px solid #E8E8E8;
}
.sidebar-menu ul li.opened, .sidebar-menu ul li.opened:hover {
  border-bottom: 0;
}
.sidebar-menu ul li.current-menu-item,
.sidebar-menu ul li:hover {
  border-bottom: 1px solid #03C988;
}
.sidebar-menu ul li:last-child {
  border-bottom: 0;
}
.sidebar-menu ul li a {
  color: #000;
  display: block;
  padding: 24px 0;
  line-height: 1.3;
  transition: all ease-in-out .2s;
  font-size: 16px;
}
#menu-header-menu .about-odmj-menu > a {
    font-weight: 800;
    font-size: 20px;
}
#menu-header-menu .sections-menu > a {
    font-weight: 800;
    font-size: 20px;
}
#menu-header-menu .types-menu > a {
    font-weight: 800;
    font-size: 20px;
}
#menu-header-menu .for-authors-menu > a {
    font-weight: 800;
    font-size: 20px;
}
#menu-header-menu .blog-menu > a {
    font-weight: 800;
    font-size: 20px;
}
.sidebar-menu ul li.current-menu-item a,
.sidebar-menu ul li:hover > a {
  color: #03C988;
}
.sidebar-close {
  cursor: pointer;
  position: absolute;
  top: 24px;
  right: 24px;
}
.sidebar-menu .menu-item-has-children {
  position: relative;
}
.sidebar-menu .menu-item-has-children svg {
  position: absolute;
  right: 0;
  top: 27px;
    width: 22px;
    height: 22px;
}
.sidebar-menu .menu-item-has-children.opened svg path {
  stroke: #03C988;
}
.sidebar-menu .menu-item-has-children.opened svg {
  transform: rotate(180deg);
}
.submenu-arrow {
  cursor: pointer;
}
.sidebar-icons {
  position: absolute;
  top: 24px;
  left: 24px;
}

.sidebar-icons svg, .sidebar-close svg, .sidebar-icons img, .sidebar-close img {margin-right:8px;}
.sidebar-icons svg path {fill:#111111;}
.sidebar-icons svg:first-of-type,.sidebar-icons img:first-of-type {margin-left:-4px;}
.sidebar-close>img {margin-right:-4px;}


.nav-before-open body {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.nav-before-open header > .container:after {
    background: rgba(0, 0, 0, .7);
    content: '';
    display: block;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
/* Sections */
.blog-post {
  margin: 64px 0px;
}
.blog-post-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.blog-post-block {
  border-radius: 24px;
  background: #F1F1F1;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.blog-post-cat {
  text-transform: uppercase;
  font-size: 14px;
  color: #3C3C3C;
  font-weight:900;
  margin-bottom: 8px;
}
.blog-post-date {
  color: #444444;
  font-size: 12px;
}
.blog-post-title {
  margin-top: 24px;
  color: #161616;
  font-weight:700;
  font-size: 24px;
  line-height: 1.2;
  display: block;
  margin-bottom: 20px;
}
.blog-post-block h5 {
  color: #838383;
  font-size: 16px;
  line-height: 1.5;
  padding:15px 0px;
}
.blog-post-img  {
  background-size: cover;
  background-color: #D9D9D9;
  padding-bottom: 56.25%;
  background-position: center;
  border-radius: 16px;
}
.blog-post-blocks .blog-post-img {
  margin-top: 24px;
  margin-bottom: 12px;
}
.blog-post-block a:last-child {
  margin-top: auto;
}
.blog-post-author {
  color: #3C3C3C;
  font-size: 14px;
  line-height: 1.3;
}
.blog-post-block h6 {
  color: #A0A0A0;
  line-height: 1.2;
  font-size: 13px;    
}

.doi-address {padding-top:16px;}
.article-box .doi-address {padding-top:12px;}
.article-box .doi-address span {color:#000000; font-weight:700;}
.article-box .doi-address a {color:#000000; text-decoration:underline;}
.article-box .blog-post-author {font-size:14px; font-weight:700; float:left;margin-bottom: 5px;}
.article-box .blog-post-author span {background-color:#000000; padding:4px 8px; color:#ffffff; border-radius:4px;}
.article-box .a-spacer {flex:1;}
.article-box .blog-post-block h5 {padding:0px 0px 20px 0px; font-weight:300; color:#000000; max-height:144px; overflow:hidden; text-overflow: ellipsis; margin-bottom: 20px;}

/* Article Section */
.article-list .section-title {
  width: 75%;
}
.section-title {
  color: #161616;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 12px;
  border-bottom: 2px solid #161616;
  margin-bottom: 40px;
}
/* Home section headers — big, thin Inter (Figma node 811:869), no underline */
.page-template-home .section-title {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: clamp(44px, 9.65vw, 139.259px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.05em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 40px;
}
.section-inner {
  margin-bottom: 80px;
}
.section-content {
  width: 75%;
}
.article-blocks .blog-post-img {
  background-color: #D9D9D9;
  height: 289px;
  width: 460px;
}
.article-blocks .blog-post-block h5 {
  padding-bottom: 32px;
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 12px;
}
.block-abcd {
  border-radius: 24px;
  background: #F1F1F1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Page */
.page-title {
  color: #161616;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 0px solid #161616;
  margin-bottom: 30px;
  font-family: 'Inter';
}
.ref-link.ref-text {
    font-weight: 400 !important;
}
.page-article-lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 50px;
}
.page-article-lists .blog-post-title {
  font-size: 22px;
  font-weight: 800;
  color: #161616;
}
.page-article-lists .blog-post-img {
  margin-bottom: 12px;
  margin-top: 56px;
}

/*Single */
.single-post-content .container {
  margin: 0 auto;
}
.single-post-content .container > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.single-post-content .post-tags {
  margin-bottom: 20px;
}
.article-lists .container, body:not(.single-post, .single-article) .single-post-content .container {
  padding-top: 36px;
  border-radius: 48px 48px 0px 0px;
  background: #FFF;
  position: relative;
  margin-top: -581px;
  min-height: 600px; 
}
.single-post .single-post-content, .single-article .single-post-content {
  margin-top: 120px;
}
.single-post-intro {
  display: flex;
    justify-content: center;
}
.post-types {
  display: flex;
  gap: 10px;
    justify-content: center;
}
.container em {
  font-style: italic;
}
.post-type, .post-type a {
  color: #03C988;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.single-post-title {
  font-weight: 900;
  line-height: normal;
  color: #161616;
  font-size: 48px;
  font-style: normal;
  line-height: 1.15;
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 2px solid #161616;
  margin-bottom: 32px;
  font-family: 'Inter';
}
.single-post-author {
  color: #000;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 20px;
}

.single-post-author svg {width:24px; height:24px}

.single-post-infos {
  padding-bottom:36px;
  position: relative;    
}
.single-post-info {
  color: #4c4c4c;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  
  display:inline-block;

}
.single-post-info:last-child {
  border-right: 0;
}

.single-post-inner {
  margin-top: 32px;
}

.single-post-inner section {
  width: 720px;
  margin: 0 auto;
}
.single-post-inner a {
  color: #03C988;
  font-weight: bold;
}


.single-post-content p {
  color: #000;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 12px;
}

.single-post-inner p {
  font-size: 20px;
}
.single-post-inner ul, .single-post-inner ol {
  padding-left: 40px;
}
.single-post-inner ul li {
  list-style: disc;
}
.single-post-inner li {
  margin-bottom: 10px;
}
.related-blocks {
  gap: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 120px;
}
.related-block {
  border-radius: 24px;
  background: #F1F1F1;
  padding: 24px;
}
.related-title {
  margin-top: 13px;
  color: #161616;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 32px;
  display: block;
}
.related-info {
  color: #838383;
  font-size: 16px;
  line-height: 1.5;
}
.related-section {
  margin-top: 80px;
}
.sub-section {
  border-top: 2px solid #161616;
  border-bottom: 2px solid #161616;
}
.sub-section h2 {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
  padding: 20px 0;
  border-bottom: 1px solid #161616;
}
.materials ul {
  padding: 20px 0;
}
.materials li {
  padding: 15px 0;
}
.materials li b {
  font-weight: 600;
}
.materials a[download] {
  color: #007bff;
}
.materials a[download]:hover {
  text-decoration: underline;
}
.materials .name {
  margin-bottom: 10px;
}
.download-btn {
  background-color: #03C988;
  padding: 10px;
  color: #fff;
  gap: 10px;
  font-size: 14px;
border-radius: 24px;
}
.download-btn:before {
  content: '';
  background-image: url('../img/download.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 25px;
  height: 25px; 
}
/* Footer */
footer {padding-bottom:40px;}
footer .container {
  background: #161616;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
}
.footer-logo {
  margin-bottom: 24px;
}
.footer-logo svg {
  flex-shrink: 0;
}
.footer-logo div {
  font-size: 22px;
  color: #ccc;
}
.footer-hr {
  width: 50%;
  height: 1px;
  background-color: #2B2B2B;
  background-color: #2B2B2B;
  margin: 0 auto;
}
.footer-menu {
  gap: 24px;
  margin-top: 24px;
}
.footer-menu a {
  color: rgba(255, 255, 255, 0.80);
  font-size: 16px;
}
.footer-bottom {
  background-color: #222222;
  border-radius: 18px;
  color: #ccc;
  font-size: 16px;
  line-height:28px;
  padding: 24px;
}

.footer-bottom div {width:50%; justify-content: flex-start;}
.footer-menu {text-align:center; padding:12px;}
.footer-menu li {display:inline; padding-right:8px;}
.footer-menu li a:hover {text-decoration:underline;}

/* MEDIA */
@media only screen and (max-width: 1200px) {
  .header-main-menu ul, .header-logo svg, .submit-article {
    display: none;
  }
  body.home .header-main-menu {
    position: absolute;
    left: 46px;
  }
  .hide-d.submit-m {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #07845b;
    background-image: url('../img/Plus-white.svg');
    background-size: 13.5px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 13px;
    display: block;
  }
  body .main-header .menu-burger {
    display: block;
      width:24px;
      margin-left:4px;
  }
    

}
@media only screen and (max-width: 1080px) {

}
@media only screen and (min-width: 769px) {
  .hide-d {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .blog-post-blocks {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-article-lists {
    grid-template-columns: repeat(2, 1fr);
  }

}


h1, h2, h3, h4, h5, h6 {font-weight:700;}

/*#article_body h1 {*/
/*  font-size:250%; padding-bottom:3%;*/
/*}*/
#article_body h2 {
  font-size:200%; padding-bottom:3%;
}
#article_body h3 {
  font-size:150%; padding-bottom:2%;
}
#article_body h4 {
  font-size:125%; padding-bottom:2%;
}
#article_body h5, {
  font-size:100%; padding-bottom:2%;
}

#article_body name {display: inline-flex;}

#article_body h6 {
  font-size:80%; padding-bottom:2%;
}

#article_body, #article_body p { font-size:18px; padding-bottom:1%; font-weight:400;}



#article_body section>h2 {
  font-size:200%; padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid #aaa;
}

#article_body ul,
#article_body ol {
  padding-left:20px
}
#article_body ul li {
  list-style-type:disc;
  list-style-position:inside;
  border-bottom:none;
  padding:4px 0
}
#article_body .materials ul li {
  list-style: number;
}
#article_body ul ul,
#article_body ul ol,
#article_body ol ul,
#article_body ol ol {
  border-bottom:none;
  padding-top:10px;
  padding-bottom:0!important
}
#article_body ul li li {
  font-size:90%;
  list-style-type:circle;
  list-style-position:inside;
  border-bottom:none;
  padding:4px 0
}
#article_body ol li {
  list-style-position:outside;
  border-bottom:none;
  font-weight:400;
  padding:4px 0;
    padding-left: 10px;
}
#article_body ol li li {
  font-size:90%;
  list-style-type:circle;
  list-style-position:inside;
  border-bottom:none;
  padding:4px 0
}
#article_body li p {
  padding:0!important
}

#article_references li div p {padding-bottom:0px!important;}
#article_references li {margin-bottom:18px;}
#article_references h2 {margin-bottom:18px;}
#article_references ul li {margin-bottom:2px;font-size:14px;}


#article_references ol li div a {font-size:14px; font-weight: 700; color:#777777;}
#article_references ul li a {color:#888888!important;font-size:14px;}

#article_references ol li li {
  font-size:14px;
  list-style-type:circle;
  list-style-position:inside;
  border-bottom:none;
  padding:2px 0
}

.show-ref-citations, .ref-link { font-weight: 700; font-size:14px;}

a.ref-link {color:#03C988!important;}

a.show-ref-citations {color:#03C988!important;}

.show-ref-citations:before {
  content: '+';
  margin-right: 4px;
  width: 14px;
  height: 0px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.ref-link:before {
  content: '↑';
  margin-right: 4px;
  width: 14px;
  height: 0px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
H3.ninja-footable-loader, .ninja-footable-loader H3, H3.footable_title {color: #444; font-size:100%!important; border-left:24px solid #03c9884f; display:inline-block; padding: 0.4vh 2vh!important; margin-bottom:2vh!important; max-width:80%;scroll-margin-top: 120px;}
H3.ninja-footable-loader {margin-bottom:2vh!important; display: inline-block;}
.ninja-footable-loader, .ninja_table_wrapper {margin-bottom:2vh;}
.nt_edit_link {display:none;}



.single-post-intro {margin-bottom:20px;}
.single-article-infos {font-size:18px;}
.single-article-doi, .single-article-date, .single-article-author {display:inline-block; width: 100%; line-height: 26px; margin-bottom:15px; font-weight:400;}
.single-article-doi span, .single-article-date span, .single-article-author span {font-weight:900; margin-right: 8px;}
.single-article-doi a {font-weight:400; text-decoration:underline; color:#03C988;}

.post-share-block {float:right; display:block; padding:8px;}
.post-share-block svg {width:24px; height:24px; margin-left:8px; transition: transform .2s;}
.post-share-block a:hover svg { transform: scale(1.4);}
.post-share-block copy:hover svg { transform: scale(1.4);}

.single-article-icons-row {display:inline-block; width:100%; background-color:#eeeeee;}
.single-article-icons-row>a {float:right; color: #fff; padding:8px 12px; background:#000;}
.single-article-icons-row a:hover code {transform: scale(1.1);}
.single-article-icons-row svg {width:24px; height:24px; fill: #ffffff; margin-right: 8px; float:left;}
.single-article-icons-row code {display:block; font-size:16px; line-height:24px; transition: transform .2s;}

.single-article-author em {font-size:100%;font-weight:300}
#article_body .single-article-author p {margin-bottom: 10px;padding-bottom: 0;}
.single-article-author author {
  cursor: pointer;
  display: inline;
}

.single-article-author h5 {display:inline; font-weight:400;white-space: nowrap;}

.single-article-author h5:after {
  content: '•';
  display: inline-block;
  padding: 0 6px;
  background-size: contain;
  background-position: center;
}

author:last-child h5:after {
  content: '';
}

.author-block {position:relative; margin:16px 0px; z-index: 7; display:block; background: #eeeeee; padding:12px; width:calc(100% - 24px); border-radius:12px;}
.author-block p {font-size:16px!important;}
.article-type {background: #333333;}
.article-type, .article-category { border-radius:24px; padding:6px 16px; font-size: 20px; font-weight: 500; line-height:28px; color:#fff; display: inline-block; margin-bottom: 5px;}
.article-category {background: #333333;}
.post-types a {border-radius:36px;text-align: center;}

#article_body img, #article_body .ninja_footable {scroll-margin-top: 150px;}
#article_body .alignright {float:right; margin:0 0 0 20px; padding:0;}
#article_body .wp-caption-text {font-size: 80%; font-style:italic; margin-top:4px; font-weight:700; width:100%; padding-bottom:5px!important;}
#article_body .alignright {width:30%;}
#article_body .alignleft {float:left; margin:0 20px 0 0; padding:0;}
#article_body .alignleft {width:30%;}
#article_body ol li {list-style-type: decimal;}

.alignright p {text-align:left;}
.alignleft p {text-align:left;}

.fancybox-caption__body {margin-bottom:25px;}

html {scroll-behavior: smooth;scroll-padding-top: 120px;}


/* MAX768 */

@media only screen and (max-width: 768px) {
    
        .sidebar-menu {width:calc(100% - 48px); max-width: 360px; }
    
  .layer-top .container {
    height:72px;  
    margin: 0;
      
  }
    
    header .container, section .container { padding: 0px 12px!important;}

  .header > .container {
  position: relative;
  padding: 12px!important;
    }
    
  .blog-post-blocks {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .hero-text {
    font-size: 42px;
    margin-left: 28px;
    padding-top: 76px;
  }
  .hero-item h3 {
    line-height: 1.8rem;
    font-size: 20px;
  }
  .hero-slider-desc {
    font-size: 12px;
  }
  .hero-item {
    height: 165px;
    border-radius: 25px;
  }
  .hero-img {
    height: 384px;
    margin-left: 12px;
    margin-right: 12px;
    background-position: center;
    background-size: cover;
    border-radius: 32px;
  }
  .hero-img:after {
    border-radius: 32px;
  }
  .blog-post {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .hero-slider {
    margin-left: 0;
    margin-right: 0;
  }
  .article-lists .container, body:not(.single-post, .single-article) .single-post-content .container {
    margin-top: -315px;
    padding-top: 30px;
  }
    .single-article .single-post-content {margin-top:80px;}    
    
  .page-article-lists {
    grid-template-columns: repeat(1, 1fr);
  }
  footer .container {
    margin-left: 12px;
    margin-right: 12px;
  }
  .footer-logo svg {
    display: none;
  }
  body {
    padding-top: 16px;
  }
  .header {
    top: 12px;
  }
  .main-header {
    padding: 8px;
    margin: 0 8px;
    align-items: center;
  }
  .header-logo span {
    margin: 2px 0 0 4px;
    font-size: 18px;
    letter-spacing: 0px;
  }
  body:not(.page-template-home) .header-main-menu {
    padding-right: 0;
      margin:0;
  }
.single-post-title {
    font-size: 32px;
      font-weight:900;
      padding:0px 0px 24px 0px;
      margin-bottom: 18px;
  }
.page-template-default  .single-post-title {
    font-size: 32px;
      font-weight:900;
      padding:24px 0px 24px 0px;
      margin-bottom: 18px;
  }  
  .page-title {
    font-size: 24px;
      font-weight:900;
      padding:24px 0px 24px 0px;
      margin-bottom: 18px;
  } 
    
  .single-post .single-post-content {
    margin-top: 84px;
  }
  .hero-slider {
    width: calc(100% - 32px);
  }
  .hero-item h3 {
    margin-right: 0;
  }
    
.single-post-inner {
  margin-top: 18px;
}    
  .single-post-inner p {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .single-post-info, .post-type, .post-type a {
    font-size: 16px;
    text-align: center;
  }
  .post-type a {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
  }

  .page-article-lists .blog-post-img {margin-top: 12px;}

    footer {padding-bottom:12px;}
    footer .container {padding:24px;}
    
    .footer-bottom div {width:50%; justify-content: flex-start;}
    .footer-menu {text-align:center; padding:24px; 16px;margin-top: 12px;}
    .footer-menu li {display:inline; padding-right:8px;}
    .footer-menu a {color: #ffffff; font-size: 16px; line-height: auto;}
    .footer-bottom div {width:100%;justify-content: flex-start;}
    
    .footer-bottom {
    border-radius: 18px;    
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    font-size:16px;     
    line-height:24px;    
    padding: 24px;
    margin-top: 0px;
    align-items: flex-start;
  }    
    
}


/* MAX 640PX */


@media only screen and (max-width: 640px) {
    body {min-width:320px;}
    .single-article .main-header {margin: 0;}
    
    #article_body, #article_body p {font-size:15px;} 
    h1, h2, h3, h4, h5, h6 {padding-bottom:15px!important;} 
    .wp-caption, .wp-caption img {width:100%!important; margin:10px 0px} 
    .wp-caption-text{text-align:center!important;} 
    #article_body .single-post-title {font-size: 24px; padding:0 8px 20px 8px;}
    .article-type, .article-category, .single-article-doi, .single-article-date, .single-article-author {font-size: 14px!important;} 
    
    .article-type, .article-category {line-height:24px;}
    .single-article-doi, .single-article-date, .single-article-author {margin-bottom:4px; line-height:20px;}
    .single-post-intro {margin-bottom: 15px;}
    .single-article-icons-row {margin-top:15px;}
    .single-article-icons-row>a {float:left;}
    .single-article-icons-row svg {width: 20px; height: 20px;}
    .single-article-icons-row code {font-size:14px; line-height:20px;}
    .section-title {font-size:32px; margin-bottom:24px; padding-left:16px; padding-bottom:8px!important;}
    .blog-post {margin-top:24px; margin-bottom:24px;}
    

    footer {padding-bottom:12px;}
    footer .container {padding:12px;}
    
    .footer-bottom div {width:50%; justify-content: flex-start;}
    .footer-menu {text-align:center; padding:24px; 16px;margin-top: 12px;}
    .footer-menu li {display:inline; padding-right:8px;}
    .footer-menu a {color: #ffffff; font-size: 14px; line-height: auto;}
    .footer-bottom div {width:100%;justify-content: flex-start;}
    
    .footer-bottom {
    border-radius: 18px;    
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    font-size:12px;     
    line-height:18px;    
    padding: 12px;
    margin-top: 0px;
    align-items: flex-start;
  }
    .author-title{
        font-size: 30px !important;
    }
}

/* Basic Pagination Styling */

.pagination {
    display: flex; /* Arrange items in a row */
    justify-content: center; /* Center the pagination links */
    align-items: center; /* Vertically align items */
    margin-top: 20px; /* Add some space above the pagination */
    margin-bottom: 20px; /* Add some space below the pagination */
    padding: 0; /* Remove default list padding */
    list-style: none; /* Remove default list bullets */
}

.pagination li {
    margin: 0 5px; /* Add some horizontal spacing between links */
}

.pagination a, .pagination span {
    display: block; /* Make the entire link clickable/selectable */
    padding: 16px 16px; /* Add some padding inside the links/span */
    text-decoration: none; /* Remove underlines from links */
    border: 1px solid #ccc; /* Add a light border */
    border-radius: 8px; /* Add rounded corners */
    color: #333; /* Default text color */
    margin: 0 4px;
    background-color: #fff; /* Default background color */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.pagination a:hover {
    background-color: #f0f0f0; /* Lighter background on hover */
}

/* Styling for the "Current" Page */
.pagination .current {
    background-color: #03C988; /* Highlight the current page */
    color: #fff; /* White text for the current page */
    border-color: #03C988; /* Match the border color */
    cursor: default; /* Indicate it's not a clickable link */
}

.pagination .current:hover {
    background-color: #03C988; /* Keep the background color on hover */
}

/* Styling for "Previous" and "Next" Links */
.pagination .prev,
.pagination .next {
    /* Add specific styling if needed */
}

.pagination .prev a,
.pagination .next a {
    /* Add specific styling for the links within prev/next */
}

/* Styling for "Dots" or Ellipsis */
.pagination .dots {
    padding: 16px 12px;
    color: #777;
    cursor: default;
    border:0;
}

/* Responsive Adjustments (Optional) */
@media (max-width: 600px) {
    .pagination li {
        margin: 0 2px;
    }

    .pagination a,
    .pagination span {
        padding: 6px 8px;
        font-size: 0.9em;
    }
}

/* More Advanced Styling Examples */

/* Pill-shaped pagination */
.pagination.pills a,
.pagination.pills span {
    border-radius: 20px;
}

/* Pagination with a colored active state */
.pagination.colored .current {
    background-color: #03C988; /* Green active color */
    border-color: #03C988;
}

.pagination.colored a:hover {
    background-color: #e9ecef; /* Light gray hover */
}

/* Minimalist pagination */
.pagination.minimal a,
.pagination.minimal span {
    border: none;
    padding: 5px 10px;
}

.pagination.minimal a:hover {
    text-decoration: underline;
    background-color: transparent;
}

.pagination.minimal .current {
    font-weight: bold;
    background-color: transparent;
}
.author-content *{
  font-weight: 700;
}
.author-all-articles a.author-name-link {
    color: #000 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.author-all-articles a.author-name-link:hover {
    text-decoration: underline !important;
}



/* =========================================================
   Homepage redesign (2026): wider header pill + 720px content column.
   Scoped to .page-template-home — inner pages are unaffected.
   Tweak the variables below to adjust type sizes / column width.
   ========================================================= */
@font-face {
  font-family: 'Druk Wide';
  src: url('../fonts/DrukWide-Bold.woff2') format('woff2'),
       url('../fonts/DrukWide-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.page-template-home {
  --odmj-gutter: 24px;
  --odmj-page-max: 1800px;
  --odmj-content-w: 1400px;
  --odmj-title-size: clamp(40px, 11vw, 158.731px);
  --odmj-statement-size: 22px;
  --odmj-hero-radius: 32px;
}

/* Wider floating green pill (header stays wide while content goes narrow) */
.page-template-home .header > .container { width: auto; max-width: var(--odmj-page-max); }
.page-template-home .main-header { margin: 0 var(--odmj-gutter); }

/* Content column: capped width on large screens, navbar-matching gutter when narrower */
.page-template-home section .container { max-width: var(--odmj-content-w); width: auto; }
.page-template-home .blog-post .container { max-width: 1400px; }
@media (min-width: 769px) {
  .page-template-home section .container {
    width: min(100% - (var(--odmj-gutter) * 2), var(--odmj-content-w));
    margin-left: auto;
    margin-right: auto;
  }
  /* footer black box matches the navbar width, not the narrower content column */
  .page-template-home footer .container {
    width: min(100% - (var(--odmj-gutter) * 2), (var(--odmj-page-max) - var(--odmj-gutter) * 2));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Inner pages: size section/footer content to the navbar pill width
   (Bootstrap container width minus the navbar's side gutter on each edge),
   so text content AND background boxes (footer, hero) line up with the green bar. */
:root { --odmj-gutter: 24px; }
@media (min-width: 768px) {
  body:not(.page-template-home) { --bs-container: 750px; }
  body:not(.page-template-home) section .container,
  body:not(.page-template-home) footer .container {
    width: calc(var(--bs-container) - var(--odmj-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px)  { body:not(.page-template-home) { --bs-container: 970px; } }
@media (min-width: 1200px) { body:not(.page-template-home) { --bs-container: 1120px; } }
@media (min-width: 1280px) { body:not(.page-template-home) { --bs-container: 1280px; } }

/* Intro block clears the fixed header */
.page-template-home .odmj-intro { padding-top: 176px; }

/* Big journal title */
.odmj-titleblock { position: relative; }
.odmj-journal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  color: #111;
  font-size: var(--odmj-title-size);
  line-height: 0.888;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  margin: 0;
}
.odmj-eissn {
  text-align: right; margin-bottom: 14px;
  font-size: 16.56px; font-weight: 300; line-height: 1; letter-spacing: 0; color: #000;
}

/* Hero band */
.odmj-hero {
  margin-top: 72px;
  background-color: #e9f4ee; /* fallback until /img/hero-network.png is dropped in */
  background-size: cover;
  background-position: center;
  border-radius: 0;
  padding: 56px 0;
}
.odmj-statement {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 53.7px;
  line-height: 63.8px;
  letter-spacing: -3.36px;
  font-weight: 300;
  text-transform: uppercase;
  color: #000;
  max-width: 34ch;
}
.odmj-statement strong { font-weight: 500; }
.odmj-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-top: 40px;
}
.odmj-submit {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.9); color: #fff;
  font-size: 26px; font-weight: 500; letter-spacing: -1.3px;
  padding: 22px 56px; border-radius: 54px;
  white-space: nowrap;
}
.odmj-submit:hover { background: #000; color: #fff; }
.odmj-board { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.odmj-board-item { display: flex; flex-direction: column; text-align: right; }
.odmj-board-role { font-size: 17.73px; font-weight: 700; line-height: 19.21px; color: #000; }
.odmj-board-name { font-size: 17.73px; font-weight: 900; line-height: 19.21px; color: #000; }
.odmj-latest { margin-top: 32px; font-size: 27.2px; font-weight: 300; line-height: 29.46px; color: #000; text-align: right; }
.odmj-latest strong { font-weight: 700; }

/* Articles/Abstracts/News grid refit into the 720px column */
.page-template-home .blog-post-blocks { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 768px) {
  .page-template-home .odmj-intro { padding-top: 128px; }
  .page-template-home { --odmj-title-size: clamp(24px, 9.5vw, 60px); }
  html, body.page-template-home { overflow-x: hidden; }
  .odmj-journal-title { max-width: 100%; }
  .odmj-hero { padding: 32px 0; }
  .odmj-statement { font-size: 28px; line-height: 1.2; letter-spacing: -1px; }
  .odmj-eissn { text-align: left; font-size: 14px; }
  .odmj-hero-actions { flex-direction: column; align-items: stretch; }
  /* keep the previous (smaller) mobile sizing until the mobile pass */
  .odmj-submit { justify-content: center; font-size: 16px; letter-spacing: 0; padding: 14px 30px; border-radius: 28px; }
  .odmj-board { align-items: stretch; }
  .odmj-board-item { text-align: left; }
  .odmj-board-role { font-size: 12px; line-height: 1.2; color: #4a4a4a; }
  .odmj-board-name { font-size: 14px; line-height: 1.2; color: #111; }
  .odmj-latest { font-size: 16px; line-height: 1.4; text-align: left; color: #111; }
  .page-template-home .blog-post-blocks { grid-template-columns: 1fr; }
}

/* ============================================================
   Mega-menu (desktop) — Figma node 811:926
   ============================================================ */
.odmj-mm-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 18px 0 0;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.odmj-mm-toggle-icon { width: 34px; height: 34px; display: block; }

.odmj-bar-social { display: none; align-items: center; gap: 16px; margin-left: 20px; }
.odmj-bar-social a { display: inline-flex; line-height: 0; }
.odmj-bar-social img { width: 22px; height: 22px; display: block; }

/* overlay */
.odmj-megamenu { display: none; position: fixed; inset: 0; z-index: 9; }
body.mm-open { overflow: hidden; }
body.mm-open .odmj-megamenu { display: block; }

.odmj-megamenu-scroll {
  position: absolute;
  top: 24px; left: 24px; right: 24px; bottom: 24px;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 60px;
  overflow-y: auto;
}
.odmj-megamenu-inner { padding: 128px 96px 80px; color: #fff; }

.odmj-mm-head { display: flex; justify-content: flex-end; }
.odmj-mm-social { display: flex; align-items: center; gap: 16px; }
.odmj-mm-social a { display: inline-flex; line-height: 0; }
.odmj-mm-social img { width: 24px; height: 24px; display: block; }

/* full-width search bar */
.odmj-mm-search {
  display: flex; align-items: center; gap: 16px;
  background: #fff; color: #111;
  border-radius: 40px;
  padding: 18px 28px;
  margin: 16px 0 56px;
}
.odmj-mm-search-ico { width: 26px; height: 26px; flex: 0 0 auto; color: #111; }
.odmj-mm-search-input {
  flex: 1 1 auto;
  border: 0; background: transparent; outline: none;
  font-family: 'Inter', sans-serif; font-size: 20px; color: #111;
}
.odmj-mm-search-input::placeholder { color: #8a8a8a; }

/* nav columns (built from the header-menu — top items become column headings) */
.odmj-mm-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 48px 64px;
}
.odmj-mm-menu > li { flex: 0 0 auto; width: 240px; }
.odmj-mm-menu > li > a {
  display: block;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px;
  color: #fff; text-decoration: none;
  margin-bottom: 18px;
}
.odmj-mm-menu .sub-menu {
  list-style: none; margin: 0; padding: 0;
  display: block; height: auto; overflow: visible; background: none;
}
.odmj-mm-menu .sub-menu a {
  display: block; padding: 0;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  line-height: 40px; color: rgba(255, 255, 255, 0.85); text-decoration: none;
}
.odmj-mm-menu .sub-menu a:hover { color: #14c98e; }

/* desktop bar state: hamburger replaces the logo glyph; nav links hide while open */
@media (min-width: 1201px) {
  .page-template-home .odmj-mm-toggle { display: inline-flex; }
  .page-template-home .header-logo svg { display: none; }
  .page-template-home .odmj-bar-social { display: flex; }
  body.mm-open.page-template-home .header-main-menu ul { display: none; }
}
