/* GLOBAL */

 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;}

.container {
  max-width: 90vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
overflow: hidden;
display: flex;
  flex-direction: column;}


@media (max-width: 900px) {
  .container {
    max-width: 100vw;
  }
}

@media (max-width: 900px) {
  .menu {
    width: 100%;
    overflow: hidden;
  }
  
  .content-row {
    width: 100%;
    overflow: hidden;
  }
  
  .main-content {
    width: 100%;
    overflow: hidden;
  }
}




body {
   font-family: sans-serif;
   background-color: var(--body-bkg);
   	/* background-image: url(images/);
   	background-repeat: repeat;
   	background-size: 250px 250px; */
   margin: 0;
   transform-origin: top center;
   overflow-x: hidden;
  }

html {
  font-size: 60%;}

.main-layout {
  display: flex;
width: 100%;}

.main-content {
  display: flex;
  flex-direction: column;}

.content-row {
  display: flex;
  align-items: stretch;
  background-color: var(--content-row-bkg);}

/* LEFT SECTION */

.left-section {
  flex: 0 0 25%;
  background-color: var(--left-section-bkg);
  padding: 0px 20px 20px 20px;
  display: flex;
  flex-direction: column;}

.side-info {
   font-family: 'Inter', sans-serif;
   font-size: 2.9rem;
   margin-top: 20px;
   letter-spacing: -2px;}

.side-info-buttons a {
  text-decoration: none;
  background: var(--side-info-buttons-a-bkg);
  /*border-radius: 8px;*/
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
  margin-top: 20px;
padding: 10px;
color: var(--side-info-buttons-a-clr);
  font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
text-align: left;
hyphens: auto;
gap: 5px;}

.side-info-buttons a span {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.side-info-buttons a:hover h3, .side-info-buttons a:hover span {
  color:var(--side-info-buttons-a-hover-h3-and-span-clr);
  transition: color 0.075s linear;}

.side-info-image {
  width: 8em;
  height: 8em;
  object-fit: cover;
 padding: 3px;
 image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 900px) {
  .left-section {
    display: none;
  }
}

/*@media (max-width: 900px) {
  .left-section {
    display: flex;
    flex: none;
    width: 100%;
    padding: 0 20px 20px 20px;
    order: 1;
  }*/


.dividerlong {
  width: 2px;
  border-left: var(--dividerlong-border-left-clr);
  margin: 10px 15px 10px 0;}


@media (max-width: 900px) {
  .dividerlong {
    display: none;
  }
}

/* MENU */
.menu {
   background-color: var(--menu-bkg);
   	/*background-image: url(images/);
   	background-repeat: repeat;
   	background-size: 400px 400px;*/
border-radius: 0px 0px 10px 0px;
}

h1 {
   font-family: 'Inter', sans-serif;
   font-size: 3rem;
   text-align: center;
  color: var(--h1-clr);
  }

h2 {
font-weight: 545;
font-size: 2.9rem;
letter-spacing: -2px;
color: var(--h2-clr);
}

h3 {
font-family: 'Inter', sans-serif;
   font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 0.5rem;
  text-align: left;
color: var(--h2-clr);
}

/* ROW 1 */
.text-image-row1 {
display: flex;
justify-content: space-evenly;
gap: 20px;
overflow: hidden;
 align-items: flex-start;
}

@media (max-width: 900px) {
  .text-image-row1 {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }
}

.info-column1 {
   margin: 10px 0 10px 0px;
  display: flex;
  flex-direction: column;
  }

  @media (max-width: 900px) {
    .info-column1 {
      margin-top: 0;
    }
  }

  .featured-info1,
.featured-info2 {
  flex: 1;
}

 /* @media (max-width: 900px) {
  .info-column1 {
    display: none;
  }
} */

.featured1 {
display: flex;
flex-direction: column;
   font-family: 'Inter', sans-serif;
  color: var(--featured1-clr);
  }

.featured2 {
display: flex;
flex-direction: column;
   font-family: 'Inter', sans-serif;
color: var(--featured2-clr);
}

.featured-info1 {
  width: auto;
  background-color: var(--featured-info-1-bkg);
  border-radius: 8px;
font-family: 'Inter', sans-serif;
padding: 10px;
line-height: 20px;
display: -webkit-box;
 -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
text-align: justify;
hyphens: auto;
text-align-last: left;
margin-right: 20px;
max-height: 140px;

font-size: clamp(1rem, .9vw, 1.9rem);
}

@media (max-width: 900px) {
  .featured-info1, .featured1{
    display: none;
  }
}

.featured-info2 {
  width: auto;
  background-color: var(--featured-info-2-bkg);
  border-radius: 8px;
position: relative;
margin-right: 20px;
padding: 10px 10px 25px 10px;
}

.featured-info2-text {
  text-align: justify;
hyphens: auto;
text-align-last: left;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 20px;
  max-height: 140px;
  font-family: 'Inter', sans-serif;
font-size: clamp(1rem, .9vw, 1.9rem);
}

@media (max-width: 900px) {
  .featured-info2, .featured2{
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media (max-width: 900px) {
  .featured2 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.featured-info2 .readmore {
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--readmore-clr);
font-weight: bold;
 position: absolute;
  right: 10px;
}

.divider1 {
  width: 2px;
  border-left: var(--divider1-border-left-clr);
  margin: 10px 5px -10px 0;}

/* .news-image {
width: 620px;
  height: auto;
display: inline-block;
/* border: 3px solid #383d2c; */

.slideshow {
  position: relative;
  width: 63%;
  aspect-ratio: auto;
  margin: 10px 0 10px 0;
  flex-shrink: 0;
  border: solid 3px black;
  overflow: hidden;
  aspect-ratio: 1023 / 733;
}

@media (max-width: 900px) {
  .slideshow {
    height: auto;
   /*margin-top: 15px;*/
   width: calc(100vw - 20px);
  margin-top: 10px;
    margin-bottom: 0px;
    border: none;
  }}


.caption1 {
  position: absolute;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 1.8rem;
  display: none;
text-decoration: none;
z-index: 500;
line-height: 33px;
padding-left: 10px;
}

.slideshow:hover .caption1 {
  display: block;}

  .caption1:hover {
color: yellow;
  }

.slide {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s linear;
  z-index: 1;}

.slide.active {
  opacity: 1;
  z-index: 1;}

.news-image {
  width: 100%;
 
  }

/* ROW 2 */

.featured-article {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 20px;
  width: 70%;
  background: var(--featured-article-text-bkg);
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.featured-article-text {
  padding: 15px;
  font-size: 1.25rem;
  display: flex;
  gap: 15px;
  line-height: 20px;
  align-items: flex-start;}

.featured-article-text span {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 20px;
  max-height: 150px; /* 7 lines × 20px */}

.featured-article-image {
  width: 45%;
  flex-shrink: 0;
  height: fit-content;
  aspect-ratio: 1 / 1;
  align-self: stretch;
  object-fit: cover;
  background: #fff;
  border: 1px solid #ccc;
  padding: 4px;

  object-position: 34% center;
}

.featured-article-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;}

.featured-article .readmore {
  align-self: flex-end;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--readmore-clr);
  font-weight: bold;
}






.mini-article-side {
  display: flex;
  flex-direction: column;
   width: 40%;
   justify-content: center;
   gap: 20px;}

@media (max-width: 900px) {
  .mini-article-side {
    gap: 15px;
  }}

.mini-article {
  padding: 10px;
  border-radius: 8px;
  font-size: 1.25rem;
  margin-top: 15px;
  line-height: 15px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  background: var(--mini-article-bkg);
position: relative;
margin-right: 20px;
}

.mini-article2 {
  border-radius: 8px;
  font-size: 1.25rem;
   margin-bottom: 15px;
   line-height: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  background: var(--mini-article2-bkg);
position: relative;
 padding: 10px;
 margin-right: 20px;
}


.mini-article span,
.mini-article2 span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 15px;
  max-height: 70px; /* 4 lines × 15px */
}

.mini-article .readmore {
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--readmore-clr);
font-weight: bold;
 position: relative;
  display: block;
  margin-top: 8px;
  text-align: right;
}

.mini-article2 .readmore {
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--readmore-clr);
font-weight: bold;
 position: relative;
  display: block;
  margin-top: 8px;
  text-align: right;
}

.readmore:hover, .mini-article2 .readmore:hover, .mini-article .readmore:hover, .featured-article .readmore:hover {
  text-decoration: underline;
}

.article-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;}

@media (max-width: 900px) {
  .article-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }

  .featured-article {
    width: 100%;
    margin: 0;
  }

  .mini-article-side {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    align-items: flex-start;
  }

  .mini-article,
  .mini-article2 {
    flex: 1;
    width: 0;
    margin: 0 0 0 0;
    margin-right: 0;
  }
}

/*.featured-article div:hover {
  transform: translateY(-2px);}

.mini-article-side div:hover {
  transform: translateY(-2px);}*/

/* ROW 3 */
.text-image-row {
display: flex;
justify-content: space-evenly;
gap: 15px;
  align-items: center;
flex: 1;
height: auto;
}

@media (max-width: 900px) {
    .text-image-row {
    margin: 5px 10px 10px 10px;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    }
  }

.info-column {
  width: 48%;
  z-index: 1;}

@media (max-width: 900px) {
  .info-column {
    width: 100%;
  }
}

.about-me {
display: flex;
flex-direction: column;
   font-family: 'Inter', sans-serif;
   margin: 10px 0 10px 20px;
  color: var(--about-me-clr);
  }

  @media (max-width: 900px) {
    .about-me {
      margin: 0 0 5px 0;
    }}

.about-me-info {
  background-color: var(--about-me-info-bkg);
  color: var(--about-me-info-clr);
  border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
margin: 0 0 20px 20px;
padding: 10px;
 display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 20px;
  max-height: 195px; /* 9 lines × 20px */
}

@media (max-width: 900px) {
  .about-me-info {
    margin: 0;
  }}

.divider {
  width: 2px;
  align-self: stretch;
  border-left: var(--divider-border-left-clr);
  margin: 10px 0 10px 0;}

@media (max-width: 900px) {
  .divider {
    display: none;
  }}


.image-column {
  display: flex;
  flex-direction: row;
  margin: 20px 30px 20px 0;
  justify-content: space-evenly;
  gap: 20px;
  width: 100%;
}

@media (max-width: 900px) {
  .image-column {
    margin: 10px 0 0 0;
  }
}


.info-image, .info-image2 {
  width: 50%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #fff;
  border: 1px solid #ccc;
  padding: 4px;
}

@media (max-width: 900px) {
  .info-image2 {
    display: none;
  }
}

@media (max-width: 900px) {
  .info-image {
    width: 100%;
  }
}


.top-line {
   /*border: none;
 border-top: 4px solid var(--top-line-bkg);
  border-bottom: 4px solid var(--top-line-border);
  width: 100%;*/

height: 25px;
   background: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
   outline: none;

}

.middle-line {
  /*border: none;
   border-top: 4px solid var(--top-line-bkg);
   border-bottom: 4px solid var(--top-line-border);
   width: 100%;*/

height: 25px;
   background: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
   outline: none;


margin-top: 0px !important;
margin-bottom: 0 !important;}

.bottom-line {
height: 25px;
   background: var(--bottom-line-bkg);
   border: var(--bottom-line-border);
z-index: 0;}

.dropdown {
  position: relative;}

.dropdown:hover .dropdown-content2 {
  display: block;}

  :root {
--body-bkg: #181f19;
--content-row-bkg: #f0f4df;
--left-section-bkg: #f0f4df;

--side-info-buttons-a-bkg: #b4df46;
--side-info-buttons-a-clr: black;

--side-info-buttons-a-hover-h3-and-span-clr: #f3f7e7;

--dividerlong-border-left-clr: 6px dotted #383d2c;

--menu-bkg: #f0f4df;

--h1-clr: black;
--h2-clr: black;
--h3-clr: black;

--featured1-clr: black;
--featured2-clr: black;
--featured-info-1-bkg: #97d0e4;
--featured-info-2-bkg: #97d0e4;

--readmore-clr: black;

--divider1-border-left-clr: 6px dotted #383d2c;

--featured-article-text-bkg: #e4ebc5;

--mini-article-bkg: #e4ebc5;
--mini-article2-bkg: #e4ebc5;

--about-me-clr: black;
--about-me-info-bkg: #97d0e4;
--about-me-info-clr: black;

--divider-border-left-clr: 6px dotted #383d2c;

--top-line-bkg: #606352;
--top-line-border: black;

--middle-line-bkg: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
--middle-line-border: #f0f4df;

--bottom-line-bkg: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
--bottom-line-border: #f0f4df;
  }

.theme-dark-war {
--body-bkg: #181f19;
--content-row-bkg: #f0f4df;
--left-section-bkg: #f0f4df;

--side-info-buttons-a-bkg: #b4df46;
--side-info-buttons-a-clr: black;

--side-info-buttons-a-hover-h3-and-span-clr: #f3f7e7;

--dividerlong-border-left-clr: 6px dotted #383d2c;

--menu-bkg: #f0f4df;

--h1-clr: black;
--h2-clr: #96a065;
--h3-clr: black;

--featured1-clr: black;
--featured2-clr: black;
--featured-info-1-bkg: #97d0e4;
--featured-info-1-bkg: #97d0e4;

--readmore-clr: black;

--divider1-border-left-clr: 6px dotted #383d2c;

--featured-article-text-bkg: #e4ebc5;

--mini-article-bkg: #e4ebc5;
--mini-article2-bkg: #e4ebc5;

--about-me-clr: black;
--about-me-info-bkg: #97d0e4;
--about-me-info-clr: black;

--divider-border-left-clr: 6px dotted #383d2c;

--top-line-bkg: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
--top-line-border: #f0f4df;

--middle-line-bkg: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
--middle-line-border: #f0f4df;

--bottom-line-bkg: linear-gradient(to right, #929786 50%, #d1d6c5 50%);
--bottom-line-border: #f0f4df;
  }