/*  +++++++++++ category.php +++++++++++++  */
@media screen and (max-width: 1600px) and (orientation: landscape) {
  #bottom-section {

  margin:0 0 140px 0 !important;
}
}
@media screen and (max-width: 1024px) {


  main{
    padding-left:85px !important;
    padding-right:85px !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  #bottom-section {
    margin:0 0 165px 0 !important;
  }
  .left-content {
    width: calc(100% - 0px) !important;
    height: 60vH !important;
    top: 0px !important;
    padding: 0 !important;
  }
  .left-content img {
    position: absolute;
    max-width: calc(100% - 20px) !important;
    max-height: calc(100% - 20px) !important;
    left: calc(50% + 0px) !important;
    padding-left:10px !important;
    padding-right:10px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .right-content{
    /*display: none !important;*/
    width: calc(100% - 0px) !important;
    border-left: 0px solid black !important;
    height:auto !important;
    position: relative !important;
    left:calc(0% + 0px) !important;
    border-top:1px solid black !important;
  }

  .right-content h1{
    font-size:1rem;
    line-height: 1.4rem;
  }
  .left-content-page{
    position: static !important;
    width: calc(100% - 105px) !important;
    height: auto !important;
    padding: 25px 0px 0 0px !important;
    margin-left:25px !important;
  }
  .right-content-page{
    width: calc(100% - 105px) !important;
    height:auto !important;
    position: static !important;
    padding: 25px 0px 0 0px !important;
    margin-left:25px !important;
    border-left: 0px solid #000 !important;
  }

  #magnifier{
    display: none !important;
  }

  .caption {
    top:50px;
    margin:auto 40px; 
  }
  .year {
  flex: 0 0 60px; 
  margin-top: 0px;
  }
}


@media screen and (max-width: 767px) and (orientation: portrait)  {
  #nav-content #menu-footer li{

  font-size: 15px !important;
  line-height: 15px !important;

}
  #bottom-section {

  margin:0 0 0px 0 !important;
}
  .table-row {
  display: flex;
  margin-bottom: 20px;
  width:100%;
}
.table-row:first-child {
  border-bottom: 1px solid #000; 
}
.table-cell {
  padding: 0; 
}
.year {
  flex: 0 0 60px; 
  margin-top: 7px;
}
.title, .textfield {
  flex: 1; 
}

main{
  padding-left:0px !important;
  padding-right:0px !important;
  margin-top:50px !important;
}

.left-content-page{
  width: calc(100% - 0px) !important;
  padding: 25px 25px 0 25px !important;
  margin-left:0px !important;
}
.right-content-page{
  width: calc(100% - 0px) !important;
  padding: 25px 25px 0 25px !important;
  margin-left:0px !important;
}
.sliding-div {
  transition: right 0.5s; 
  cursor: pointer;
}

.sliding-div{
  width:calc(250px + 84px); 
  background:#FFF; 
  height: auto;
  flex-direction: row-reverse; 
  position:fixed; 
  right:-320px; 
  top:80px; 
  z-index:1; 
  padding-top:50px; 
  padding-bottom: 30px;
  padding-left:20px; 
  padding-right:120px; 
  border-left:1px solid black; 
  border-bottom:1px solid black; 
  border-top:1px solid black; 
  z-index:2
}

#filter-toggleButton {
  position: fixed;
  right: 10px;
  top: 3px !important;
  z-index: 2;
  cursor: pointer;
}

/* Filter Button */
.filterIcon {
  width: 1.2rem !important;
  height: 1rem !important;
}

/* Line Style */
.filterIcon span {
  height: 3px !important;
}

/* Circle Style */
.filterIcon span::after {
  border: 1px solid black !important;
}


.filterIcon.open span:nth-child(3) {
  bottom: 0px !important;

} 
} 


@media screen and (max-width: 767px) and (orientation: portrait)  {

.desktop {
  display: none !important;
}

.hamburger-slide {
  left: -100%; /* Adjust this value as needed */
  width:calc(100% - 0px)!important;  
  top:0px !important; 
  height: auto !important;
  min-height: 100vH !important;
  background-color: #ffF !important;
  padding-left:0px !important;
  padding-right:10px !important;
  padding-top:0px !important;
  padding-bottom:0px !important;
}

#panel-left {
  width: 100% !important;
  top: 0px !important;
  border-right: 0px solid black !important;
  border-bottom: 1px solid black !important;
  border-top: 1px solid black !important;
  background: #FFF !important;
  height: 50px !important;
  padding-top: 10px !important; 
}

#title {
  transform: rotate(-90deg);
  transform-origin: top !important;
  font-size: 50px !important;
  line-height: 50px !important;
  margin: 0;
  position: absolute !important;
  z-index:1000 !important;
  border-right: 0px solid black !important;
  top: 430px !important;
  left:-90px !important;
}

.mobile {
  display: block !important;
}

#hamburger-toggleButton {
  position: fixed;
  left: 10px;
  top: 2px !important;
  z-index: 2;
  cursor: pointer;
}
/* Hamburger Icon */
.hamburgerIcon {
  width: 1.2rem !important;
  height: 1rem !important;
}
/* Line Style */
.hamburgerIcon span {
  height: 3px !important;
}

.hamburgerIcon.open span:nth-child(3) {
  bottom: 0px !important;
}
#top-section{
  padding: 0; 
  margin:0;

}
#bottom-section {

  padding: 0; 
  padding-bottom:0px !important;
  top:700px;
}
#logo-section {

width:100% !important;
 padding-left: 25px !important;
  padding-right: 25px !important;
}
#nav-content {
  width:75%;
  margin-left: 25%;
  border-left:1px solid black !important;

}

#nav-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

#nav-content ul {
  height: auto;
  display: flex;
  flex-direction: column;
  padding-top:25%;
  font-size: 25px !important;
  width:100% !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
}

#nav-content li {
  border-bottom: 1px solid black !important;
}

#nav-content li:first-child {
  border-top: 1px solid black !important;
}

#nav-content li a {
  padding: 10px 10px  !important;
  display: block;
  text-transform: normal;
  transition: color .1s;
}

#nav-content li a:hover {
  color: #555;
}

#nav-content #menu-footer li{
  border:none;
  font-size: 10px;
  line-height: 10px;
  padding:0;
}



}


@media screen and (max-width: 767px) and (orientation: portrait)  {
  html, body {
    font-size: 18px !important; 
  }

   h2{
    padding-top:4px;
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
  h2.category{
  padding: 0px 0px 0px 0px;
     font-size: 1rem;
    line-height: 1.25rem;
}
}


@media screen and (max-width: 767px) and (orientation: landscape)  {
  html, body {
    font-size: 18px !important; 
  }

   h2{
    font-size: 1rem;
    line-height: 1.2rem;
    margin:0;
  }
  #panel-right{
 
  width:66px; 

}
#panel-left {
  width: 66px !important;
  
}
#hamburger-toggleButton {

  left: 0px !important;

}
#title {
  left:-70px !important;
}


.hamburger-slide{

  padding-top:20px !important;
  padding-bottom: 30px;
  padding-left:100px !important; 
  padding-right:4 0px !important; 

}

  #bottom-section {

  margin:0 0 70px 0 !important;
}
#nav-content ul {

  padding-top:0% !important;
  font-size: 1.25rem !important;

}

#nav-content li a {
  padding: 5px 5px !important;

}

/* Masonry Container */
  .masonry-ordered {
    width: calc(100% - 130px) !important; 
    margin-left:66px !important; 
    margin-right:66px !important; 
    margin-top:40px !important;
  }

  .masonry-item-ordered {
    width: calc(33.33% - 42px) !important;  /* Each item spans the full width of the column */
    box-sizing: content-box;
    padding: 5px 20px !important;
    height: auto;
    border-right:1px solid black !important;
  }

  .masonry-item-ordered h3{
   font-size:14px !important; 
   line-height: 18px !important; 
   hyphens: auto !important; 
  }

}

/* category.php ++++++ single.php +++++ attachment.php */

@media screen and (max-width: 767px) and (orientation: portrait)  {
  #panel-right{
    width:100% !important;
    position:fixed; 
    right:10px !important;
    top:0;
    border-left:0px solid black;
    border-bottom: 0px solid black !important;  
    height: auto !important; 
    padding-top:0px !important;  
    padding-left:0px; 
    background: #FF6 !important; 
  }

}


/*  +++++++++++ category.php +++++++++++++  */


@media screen and (max-width: 767px) and (orientation: portrait)  {
  .sliding-div{
   /* width:calc(100% - 80px) !important;*/
  }
  .sliding-div{
  width:calc(240px + 0px) !important;
  background:#FFF; 
  height: auto;
  flex-direction: row-reverse; 
  position:fixed; 
  right:-240px; 
  top:80px; 
  z-index:1; 
  padding-top:50px; 
  padding-bottom: 30px;
  padding-left:20px; 
  padding-right:20px; 
  border-left:1px solid black; 
  border-bottom:1px solid black; 
  border-top:1px solid black; 
  z-index:2
}
}


@media screen and (max-width: 767px) and (orientation: portrait)  {
 

  /* Masonry Container */
  .masonry-ordered {
    width: calc(100% - 0px) !important; 
    margin-left:0px !important; 
    margin-right:0px !important; 
    margin-top:40px !important;
  }

  .masonry-item-ordered {
    width: calc(50% - 42px) !important;  /* Each item spans the full width of the column */
    box-sizing: content-box;
    padding: 5px 20px !important;
    height: auto;
    border-right:1px solid black !important;
  }

  .masonry-item-ordered h3{
   font-size:14px !important; 
   line-height: 18px !important; 
   hyphens: auto !important; 
  }
}

/*  ++++++++++ single.php ++++++++ */


@media screen and (max-width: 767px) {
.next-button {
  right:0px !important;
  top: 9px !important;
  margin-right: 15px !important;
  font-size: 18px !important;
}
.prev-button {
  right:75px !important;
  top: 9px !important;
  font-size: 18px !important;
}
.caption {
  width:calc(100% - 40px) !important;
  top:30px  !important;
  margin:0 20px 60px 20px !important; 
  border-bottom:0px solid black !important;
}
ul.post-categories {
  margin-top: 20px !important;
  padding-bottom:20px;

}
.post-categories  li{
  margin-right: 10px !important;
  margin-top: 0px !important;
}

.caption.shifted {
  transform: translateY(5px); /* Move down by 5 pixels */
  animation: oscillate 2s infinite alternate; /* Create an oscillating animation */
}
}

@media screen and (min-width: 1681px) {
  /* Masonry Item */
  .masonry-item-ordered {
    width: calc(16.667% - 64px);  /* Each item spans the full width of the column */
    box-sizing: content-box;
    padding: 0px 30px;
    height: auto;
    border-right:1px solid black;
  }
  .masonry-item-ordered::nth-child(4n) {
    border-top: 10px solid black !important;
}

}
@media screen and (max-width: 1680px) {
  /* Masonry Item */
  .masonry-item-ordered {
    width: calc(20% - 64px);  /* Each item spans the full width of the column */
    box-sizing: content-box;
    padding: 0px 30px;
    height: auto;
    border-right:1px solid black;
  }

}
@media screen and (max-width: 1440px) {
  /* Masonry Item */
  .masonry-item-ordered {
    width: calc(25% - 64px);  /* Each item spans the full width of the column */
    box-sizing: content-box;
    border-right:1px solid black;
    padding: 0px 30px;
    height: auto;
    border-right:1px solid black;
  }
}

@media screen and (max-width: 1279px) {
  /* Masonry Item */
  .masonry-item-ordered {
    width: calc(33.33% - 64px);  /* Each item spans the full width of the column */
    box-sizing: content-box;
    border-right:1px solid black;
    padding: 0px 30px;
    height: auto;
    border-right:1px solid black;
  }
}