/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
/*@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    src: url('/Fonts/NHaasGroteskTXPro-55Rg.ttf');*/
    /* Include other source formats */
    /*font-weight: 300;*/ /* Example for a lighter weight */
    /*font-style: normal;*/
/*}*/
@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Regular Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Medium.otf') format('opentype');
    font-weight: 500; /* Medium font weight */
    font-style: normal;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Medium Italic.otf') format('opentype');
    font-weight: 500; /* Medium font weight */
    font-style: italic;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Light.otf') format('opentype');
    font-weight: 300; /* Light font weight */
    font-style: normal;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Light Italic.otf') format('opentype');
    font-weight: 300; /* Light font weight */
    font-style: italic;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gerstner Programm';
    src: url('/Fonts/Gerstner Programm Bold Italic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

#privicy {
    display: none;
}
.biografyGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Three columns */
    gap: 1rem; /* Space between squares */
}
.biografyGridColumn {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns */
    gap: 1rem; /* Space between squares */
    justify-items:center;
}
    .biografyGridColumn h4, .biografyGrid h4{
        text-align: center;
    }
    #Category-title h1 {
        text-align: center !important;
        font-size: 2rem;
        font-weight: 500;
        text-wrap: nowrap;
    }
#Category-title {
    text-align:justify;
    font-size:small;
  /*  width:70%;*/
    margin: 10px auto;
}
.back-title {
    font-size: medium !important;
}
.Mycontainer {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
}
}
i img {
    height: 35% !important;
}
.referenceU u {
    display: flex !important;
    justify-content: center !important;
    /* align-content: center; */
    align-items: stretch;
}
    .referenceU u i img {
        height: 40% !important;
        margin-right: 5px;
        width: 40px;
        margin-left: -8px !important;
    }
.referenceU {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/*--------------------------------------------------*/
.Projects_CatagoryList {
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 100px;
    align-items: stretch;
}

    .Projects_CatagoryList li {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 5px;
        margin: 5px;
        /*  font-weight: 700;*/
        font-size: small;
        align-items: stretch;
        text-wrap:nowrap;
    }

        .Projects_CatagoryList li a {
            display: flex;
        }

    .Projects_CatagoryList .active {
        font-weight: 700;
    }



    .Projects_CatagoryList li i img {
        height: 40% !important;
        margin-right: 5px;
        width: 40px;
        margin-left: -8px !important;
    }

#Projects_CatagoryList {
    padding: 0 1rem;
}
/*--------------------------------------------------*/
.m5 {
    position: relative;
    padding: 20px;
}
.col-6ofContext {
   
    display: flex !important;
    align-content: center;
    justify-content: center !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding-left: 0px;
    text-align: center;
}
.BioColumn {
    display: flex !important;
    align-content: center;
    justify-content: center !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding-left: 0px;
    text-align: center;
    width:50%;
}
.col-5ofImage {
}
.forMyarrows {
    position: relative;
    display: flex;
    justify-content: center;
}
#projects-container {
    padding: 0 50px;
    position:relative;
}
#projects-containerL {
    padding: 0 50px;
    position:relative;
}
.myPointer{
    cursor:pointer;
}
#TextisHidden {
   /* height: 100%;*/
    overflow: hidden;
    transition: height 0.4s linear; /* Adjusted transition property */
    text-align:justify;
}
tbody tr, tbody td {
    height: 50px;
    max-height: 60px;
    overflow-y: scroll;
}
.MyRows{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}
.MyCols {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
}
.Mycol-8 {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.back-arrow{
    position:absolute;
    top:-13px;
    right:-2rem;
    font-size:3rem;
}
/*--------------------------------------------------*/
.MyArrow {
    position: absolute;
    /*top: 40%;*/
    /* font-size:3rem;
    padding:20px;*/
    bottom:40%;
    width: 40px;
}

    .MyArrow:hover {
        cursor: pointer;
    }

.MyArrow-left {
    left: -2.5em;
    /*  background-image: url("../DS_ICON-Previous-round.png");*/
}

.MyArrow-right {
    right: -2.5em;
    /* background-image:url("../DS_ICON-Next-round.png");*/
}
.btn-light-MyExit {
    position: absolute;
    top: 3%;
    right: 0;
    width:40px;
    z-index: 9999;
}
.btn-light-MyExit2 {
    position: absolute;
    top: -4.5rem;
    right: -2.5rem;
    z-index: 9999;
    padding: 0;
    width: 35px;
}
.btn-light {
    border-radius: 50% !important;
    width: 2.5rem !important;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.tag.btn.btn-light {
    border-radius: 5% !important;
    width: auto !important;
}

.btn-light img {
    width: 60%;
    object-position: center center;
}
.btn-my{
    width:40px;
}
    .btn-my:focus {
        box-shadow:none!important;
    }
    /*
.btn-light-MyExit img {
    width: 100% !important;
}*/
    a.navbar-brand {
        white-space: normal;
        text-align: center;
        word-break: break-all;
    }


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
/*--------------------------------------------------*/

.projects-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns */
    gap: 2rem; /* Space between squares */
}
.pressList {
   /*  display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem; Space between squares */
}
.descriptionText {
    text-align:justify;
   /* white-space: pre-line !important;*/
}
.pressItem {
    cursor: pointer;
    display: grid;
    /*  grid-template-rows: 60% 40%;
    grid-template-areas: "picture" "title";
    justify-content: center;*/
    /* aspect-ratio: 1 / 1;  Makes the div a square 
        overflow: hidden;*/
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;

}

/* 
-------------------------------------------------- */
html {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/*
-------------------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.first-project, .grid-project {
    animation: fadeIn 1s;
}

html {
  position: relative;
  min-height: 100%;
}
/* General Styles for Header and Navbar */
header {
    position: fixed;
    left: 0.5rem;
    top: 1.3rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-wrap: nowrap;
}
.navBtn{
    background-color:transparent;
    border:none;
    padding:0px !important;
}
    .navBtn:focus, .navBtn:active {
        background-color: transparent;
        border: none;
        outline:none;
    }
.Mynavbar-nav {
    list-style-type: none;
    padding: 0;
    display: block;
    margin-left:8px;
}

    /* Initially hide all nav items except active ones */
    .Mynavbar-nav .nav-item:not(.active) {
        overflow: hidden;
        opacity: 0;
        max-height: 0;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }
    .Mynavbar-nav .nav-item.active ul{
        padding:0!important;
    }
        .Mynavbar-toggler navBtn{
            padding:0!important;
        }
        /* Show Active Link and Its Submenu */
        .Mynavbar-nav .nav-item.active,
        .Mynavbar-nav .nav-item.active ul,
        .Mynavbar-nav .nav-item.active ul li {
            display: block !important;
            opacity: 1;
            max-height: inherit; /* Ensures sublists of active items are shown */
        }

    /* Hide Submenu Initially */
    .Mynavbar-nav .nav-item ul {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease;
    }

    /* Show Submenu on Parent Item Hover or When Active */
    /*.Mynavbar-nav .nav-item:hover ul,
    .Mynavbar-nav .nav-item.active ul {
        max-height: 500px;*/ /* Adjust as needed */
        /*opacity: 1;
        overflow: visible;
    }*/


    /* Set low opacity for all nav items */
    .Mynavbar-nav .nav-item {
        opacity: 0.5;
        transition: opacity 0.5s ease;
    }

        /* Increase the opacity on hover */
        .Mynavbar-nav .nav-item:hover {
            opacity: 1;
        }

        /* Ensure active item is fully opaque */
        .Mynavbar-nav .nav-item.active {
            opacity: 1 !important;
            font-weight: 700;
            position: relative;
        } /* Ensure active item is fully opaque */
    .Mynavbar-nav > .nav-item.active:not(.submenue-list ul)::before {
        content: "\2022"; /* Unicode character for a bullet (dot) */
        color: #000; /* Example: change dot color to black */
        font-size: 1rem; /* Adjust dot size as needed */
        /*  margin-right: 8px;  Adjust spacing between dot and text */
        left: -11px;
        top: 0px;
        position: absolute;
    }

/* Show all items on navbar hover */
.Mynavbar:hover .Mynavbar-nav .nav-item {
    opacity: 1;
    max-height: inherit; /* Adjust this value based on your content */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
/* Style for active sublist item */
.sub-active {
    color: #000; /* Example: change text color to black */
    font-weight: 700; /* Make the text bold */
    /* Add more styles as needed */
    position: relative;
}
    .sub-active::before {
        content: "\2022"; /* Unicode character for a bullet (dot) */
        color: #000; /* Example: change dot color to black */
        font-size: 1rem; /* Adjust dot size as needed */
      /*  margin-right: 8px;  Adjust spacing between dot and text */
       left: -11px;
       top:0;
        position: absolute;
    }

/* Style for active sublist item */
.submenue-list > ul > .sub-active {
    font-weight: bold; /* Ensure .sub-active items remain bold */
}

/* Ensure font weight does not change for li with active class */
.Mynavbar-nav .nav-item.active > ul > li {
    font-weight: initial; /* Keeps the font weight at its initial value */
}


a {
    color: rgba(0, 0, 0, 0.91) !important;
}
    a:hover {
        color: lightgray !important;
        text-decoration: none;
    }



#scrollToTopBtn {
    visibility: hidden; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 0px; /* Place the button at the bottom of the page */
    right: 4rem; /* 30px from the right */
    z-index: 99999; /* Make sure it does not overlap */
    border: none; /* No border */
    outline: none; /* Remove outline */
    background-color: transparent; /* Transparent background */
    color: black; /* Black arrow color */
    cursor: pointer; /* Add a mouse pointer on hover */
   /*  padding: 15px; Some padding */
   /* font-size: 5rem;  Increase font size */
    transition: background-color 0.4s ease, color 0.4s ease, visibility 0.4s ease;
}



    #scrollToTopBtn img {
        transition: filter 0.3s ease; /* Add transition for smooth effect */
        vertical-align: bottom;
        height: 60px;
        margin-bottom: 7px;
    }

    #scrollToTopBtn:hover img {
        filter: contrast(0); /* Make the image grayscale (gray) on hover */
    }



.navBtn{
    margin-left:8px;
}
/*--------------------------------------------------*/
#LoveLink {
    text-wrap: nowrap;
    position: absolute;
    left: 51vw;
    transform: translateX(-50%);
    top: 1.3rem;
    z-index: 1000;
}

body {
    display: grid;
    grid-template-columns: 15% 73% 12%; /* Create a subgrid with a single column */
    /* min-height: 100vh; Ensure the container covers the entire viewport height */
    /* Margin bottom by footer height */
    margin: 60px auto 200px auto;
    /* font-family: 'Neue Haas Grotesk Display Pro';*/
    font-family: 'Gerstner Programm', "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
    font-style: normal;
    transition-timing-function: linear;
    /*-webkit-font-smoothing: antialiased;*/
    -webkit-tap-highlight-color: gray;
}
/*.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}*/


.smaller {
    font-size: 70% !important;
    font-weight: 400 !important;
}
/*#insedfotterdiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}*/
.footer {
    position: absolute;
    bottom: 0px;
    background-color: black;
    color: white;
    width: 100%;
    font-size: initial;
    height: 0px;
    transition: height 0.3s linear;
}
#insedfotterdiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height 0.3s linear;
}

/*footer div p {
    display: flex;
    justify-content: center;
   
}*/
#searchForm label{
    float:left
}

footer a {
    color: white !important;
}
.f-05 {
    display: flex;
    flex: 0.5;
    padding: 5px;
    justify-content: center;
}
#SearchIcon {
    width: 20px;
    position:absolute;
    top:-3rem;
    left:10px;
    border:none;
    background-color:transparent;
}
    #SearchIcon:focus, #SearchIcon:focus-visible {
        outline: none !important;
    }
#searchForm {
    border: none;
    margin: 5px;
    padding: 5px;
    width: 100%
}
    #searchForm div{
        display:flex;
        flex-direction:row;
    }
    /*#searchQuery {
    border: none;
    
}*/
#searchQuery {
    border: none;
    background-color: transparent;
    border-bottom: 1px white solid;
    border-radius: 0 !important; /* Ensures no rounding on any corner */
    outline: none !important; /* Optional: removes focus outline */
    width: 100%;
    color: white;
    float: right;
}
footer input:focus-visible {
    outline:none !important;
}
    .SearchboxDiv {
    justify-content: flex-start !important;
    /* width:30%;*/
    flex: 0.7;
    padding: 0 26px;
}
/*#HomeImage {
    background-image: url(../They-say-you-cant-hold-two-watermelons-in-one-hand.jpg);
   
    background-size: cover;
    background-repeat:no-repeat;
}*/
.background-image-link {
    position: absolute;
    z-index: -999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area */
    position:center;
}
#background-image {
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out,opacity 0.5s ease-in-out;
    opacity: 1;
}
#back-caption {
    /*margin:2rem 0;
    width: 40%;*/
}  
.white{
        color:white !important;
    }
aside {
    position: fixed; /* Fixes the position relative to the viewport */
    right: 0; /* Adjust as needed for the right margin */
    top: 50%; /* Position at the middle of the page vertically */
    transform: translateY(-50%); /* Shifts the element up by half its height to truly center it */
    z-index: 1000; /* Ensures it stays on top of other elements */
    padding: 100% 40px 100% 10px;
}

aside ul {
    list-style: none;
    float: left;
    width: 0px;
    opacity: 0;
    margin:50px 0 0 0;
    transition: opacity 0.2s ease-out, width 0.5s ease-in;
}
    aside ul,
    #The_1999 + #year-list {
        width: initial;
        opacity: 1;
    }

    aside ul li {
        transition: padding 0.3s ease;
        cursor: pointer;
        text-align:right;
    }

            aside ul li:hover {
               border-radius:10%;
               /* background-color: rgba(255, 255, 255, 0.56);
               color: black !important;*/
               text-decoration:underline;
                padding: 5px 1px;
            }
#The_1999 {
    position: absolute;
    top: 1.5rem;
    right: 45px;
    color: black;
    transition: background-color 0.4s ease, color 0.4s ease, padding 0.4s ease;
    z-index: 9999;
}

    #The_1999:hover {
        /* background-color:black;
        color:white !important;*/
        padding: 5px;
        text-decoration: underline;
    }
   

.Mynavbar {
    font-size: inherit !important;
}
#Dritonnav{
    font-size:1.1rem !important;
    /*font-weight:500;*/
}
/* not used [[[]]
    .equal-height-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);*/ /* Two columns of equal width */
/*align-items: center;
    justify-items: center;
    grid-gap:2rem;
}
@media (max-width: 767px) {
    .equal-height-grid {
        grid-template-columns: 1fr;*/ /* Stack columns on smaller screens */
/*}
}*/
.grid-item {
    display: grid;
    align-content: start;
}
.grid-item-holder {
    display: grid;
    grid-area: picture;
    position: relative;
    width: 100%;
    height: 100%;
}


/* Optional: Adjust figcaption for consistent styling */
figcaption {
    margin-top: 0.5rem;
}

/*-------------Projects---------------*/
.first-project {
    display: grid;
    grid-template-rows: auto auto auto; /* Content-based sizing */
    margin-bottom: 30px; /* Adjust or remove as needed */
    width: 90%;
    margin: auto;
}
.first-grid-project {
    /*cursor:pointer;*/
    position: relative;
    display: grid;
    grid-template-areas:"title" "picture" "context";
    justify-content: center;
    justify-items: center;
}
.first-projectLove {
    display: grid;
  
  /*   grid-template-columns: 10% auto 10%; Content-based sizing */
    grid-template-areas: "blank" "content" "blanks";
    margin-bottom: 30px; /* Adjust or remove as needed */
}
.first-grid-projectLove {
    /* cursor: pointer;*/
    position: relative;
    display: grid;
    grid-area:"content";
    grid-template-columns: auto auto; /* Content-based sizing */
    justify-content: center;
}
.LoveImgContainer {
    display: flex;
    align-items: center;
    width: 100%;
}
.LoveDescription {
    display: flex;
    align-content: center;
    width: 100%;
    text-align:justify;
    justify-content:center;
    align-content:center;
    flex-flow:row wrap;
}

.first-project-image {
    grid-area: picture;
    width: 60%;
    height: auto; /* Adjust height to fit content */
    object-fit: contain;
    object-position: center center;
}

.first-project-title {
    grid-area: title;
    text-align: center;
    font-style:italic;
}
.first-project-context {
    grid-area: context;
    text-align: center;
}



.grid-project {
    cursor: pointer;
    display: grid;
    grid-template-rows: 0.4fr 20%;
    grid-template-areas: "picture" "title";
    /*  justify-content: center;*/
    /* aspect-ratio: 1 / 1;  Makes the div a square 
        overflow: hidden;*/
}
.thumber {
    display: grid;
    grid-area: picture;
    position: relative;
    width: 100%;
    height: 100%;
}
.thumb {
  
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.thumb-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 3px calc(100% - 6px) 3px; /* Create a subgrid with a single column */
    grid-template-rows: 3px calc(100% - 6px) 3px;
    width: 100%;
    height: 100%;
}

.project-image {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    width: 100%;
    height: 100%;
  object-fit: contain;
   /*   object-fit:cover;*/
    object-position: bottom center;
}
.Loveproject-image {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    width: 100%;
    height: 100%;
   object-fit: contain;
   /*  object-fit:cover;*/
    object-position: center center;
}

.context {
    /*font-size: smaller;*/
    display: grid;
    grid-area: title;
    text-align: center;
    /*  align-items: center;
    margin-top: 20px;*/
    line-height: 1.2rem;
    margin-top: 10px;
}

    .context i, .col-6ofContext i, span i{
        display: contents;
    }

   /*--------------Project------------------*/
.main-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.caption {
    margin-bottom: 20px;
}

    .caption h3 {
        margin-bottom: 10px;
    }

.description {
    margin-bottom: 20px;
    text-align: justify;
   /* white-space: pre-line !important;*/
}
.description p{
    text-align: justify;
   /* white-space: pre-line !important;*/
}

.supporting-images {
    display: flex;
    justify-content: space-between;
}

    .supporting-images .column {
        flex-basis: 49%;
    }

.support-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.Publication_Grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 3rem;
  /*  margin-top: 50px;
    padding: 20px;*/
}
.Drawing_Grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 3rem;
  /*  margin-top: 50px;
    padding: 20px;*/
}
.pressGrid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 3rem;
    /*  margin-top: 50px;
    padding: 20px;*/
}
.Publication {
    width: 0;
    border-left: solid 1px;
    border-left-color: white;
    transition: 3s border-left-color ease-in-out, 1s width linear;
    padding: 2em;
}
.Publication_Item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.Publication_image {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}
#PublicProject-container {
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.PublicProject_Grid {
    display: grid;
    grid-template-columns: repeat(1,0.5fr);
    grid-gap: 2rem;
    justify-content: center;
    /*  margin-top: 50px;
    padding: 20px;*/
}
.PublicProject-title {
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 2rem;
}

.grid-PublicProject {
    cursor: pointer;
    display: grid;
  /*  grid-template-rows: 10% auto 30%;*/
    grid-template-areas: "title" "picture" "context";
    /*  justify-content: center;*/
    /* aspect-ratio: 1 / 1;  Makes the div a square 
        overflow: hidden;*/
}
.flex-PublicProject {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.PublicProject-context {
    display: grid;
    grid-area: context;
    text-align: left;
    align-items: start;
    font-size: smaller;
    max-width: 70%;
    padding: 20px 0px;
    overflow:hidden;
}
.PublicProject {
    width: 0;
    border-left: solid 1px;
    border-left-color: white;
    transition: 3s border-left-color ease-in-out, 1s width linear;
    padding: 2em;
}
.PublicProject_Item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.PublicProject_image {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    width: 100%;
    height: 100%;
   /* object-fit: cover;*/
    object-fit: contain;
    object-position: top center;
}
.first-Publication-image {
    grid-area: picture;
    /* */  width: 60%;
    height: auto;  /*Adjust height to fit content */
    object-fit: cover;
    object-position: center center;
   /* width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;*/
}

main {
    margin-top: 50px;
}
#Project_Details_index {
    display: inherit;
    padding: 0 15px;
}
/* Image sort
-------------------------------------------------- */
/* Responsive adjustments */
.object {
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
}


.object-container {
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
    display: flex;
    align-items: center;
}

    .object-container:hover {
        cursor: pointer;
    }

.preview-image {
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
}

.dragging {
    opacity: 0.5;
}

.image-container {
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
}

    .image-container:hover {
        cursor: pointer;
    }

.drop-before::before,
.drop-after::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #007bff;
    opacity: 0.3;
}

.drop-before::before {
    top: 0;
}

.drop-after::before {
    bottom: 0;
}

.remove-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: red;
}

.drop-indicator {
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: #007bff;
    opacity: 0.7;
}

.drop-before {
    top: 0;
}

.drop-after {
    bottom: 0;
}
/* Responsive adjustments */

.ArticleList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 3rem;
     margin-top: 50px;
    padding: 20px;
}

#Article {
    width: 0;
    border-left: solid 1px;
    border-left-color: white;
    transition: 3s border-left-color ease-in-out, 3s border-bottom-color ease-in-out, 1s width linear;
    
}

.ArticleListItem {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: smaller;
}
.ArticlePage {
    display: flex;
    flex-direction: column-reverse;
    padding-right:20px
   /* padding: 0 20px;*/
}
#vfd {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.textA {
    font-size: 2rem;
    text-transform: uppercase;
}

.ATitle {
    font-size: 2em;
    font-style: italic;
    font-weight: 500;
}

.AsubTitle {
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
}
@media (min-width: 800px) {
  
    .gridhide {
        display: none;
    }
    #scrollToTopBtn img {
        height: 100px;
    }
    .projects-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .Publication_Grid {
        grid-template-columns: repeat(2,1fr);
    }
    .Drawing_Grid {
        grid-template-columns: repeat(2,1fr);
    }
    .pressGrid {
        grid-template-columns: repeat(2,1fr);
    }
    .MyRows {
        flex-direction:row;
    }
    .Projects_CatagoryList {
       
        flex-wrap: wrap;
    }
        .Projects_CatagoryList li {
            flex: none;
        }
    .LoveImgContainer {
        width: 40%;
    }
    .LoveDescription {
        width: 50%;
    }
    .col-6ofContext {
      /*  -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;*/
        padding-left: 3rem;
    }
    .col-5ofImage {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
}

@media (min-width: 1100px) {
   

    .ArticleList {
        grid-template-columns: repeat(3,1fr);
        margin-top:0;
    }

    .ArticlePage {
        flex-direction: row;
    }

   

}
    @media (min-width: 1300px) {
    .projects-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .Projects_CatagoryList {
        flex-wrap: nowrap;
    }

        .Projects_CatagoryList li {
            flex: none;
        }
}
@media (min-width: 1700px) {
   /* .projects-grid {
        grid-template-columns: repeat(4,1fr);
    }*/
    .Projects_CatagoryList {
        flex-wrap: nowrap;
    }
        .Projects_CatagoryList li {
            flex: none;
        }
}

@media (min-width: 3000px) {
   /* .projects-grid {
        grid-template-columns: repeat(6,1fr);
    }*/
    .Projects_CatagoryList {
        flex-wrap: nowrap;
    }
        .Projects_CatagoryList li {
            flex:none;
        }
    #scrollToTopBtn img {
        height: 200px;
    }
}
@media (max-width: 830px) {
    .thumber {
        justify-items: center;
       
    }
    .thumb {
        width: 90%;
    }
    .back-arrow {
        /*  top: -40px;*/
        right: 10px;
    }
    .biografyGrid {
        grid-template-columns: repeat(1, 1fr); /* Three columns */
        padding:0 10px 0 10px;
    }
    #insedfotterdiv {
        flex-direction: column;
        align-items: baseline;
    }
    .btn-light-MyExit2 {
        /*right: -1.7rem;*/
        right: -3rem;
        /*top: 2.7rem;*/
        /* width: 24px;*/
    }
    #projects-container {
        padding: 0 15px;
    }
    #scrollToTopBtn {
        right: -1.6rem !important;
    }
    .Mycol-8 {
        max-width: 100%;
    }
    body {
        margin-top: 0;
    }
    #Dritonnav {
        font-size: 1.1rem !important;
    }
    #Project_Details_index{
        display:none !important;
    }
    aside {
        position: absolute;
        right: 0.5rem;
        top: 3rem;
        transform: none;
        z-index: 1000;
        padding: 0;
        margin-right: 8px;
    }
    aside ul{
        opacity:1;
        width:initial;
    }
    #The_1999 {
       
        right: 15px;
    }
    .Mycontainer {
        display: grid;
        grid-column-start: -4;
        grid-column-end: -1;
    }
    .first-project-image {
        width: 100%;
    }
    /* Initially hide all nav items except active ones */
    .Mynavbar-nav .nav-item {
        overflow: unset !important;
        opacity: 1 !important;
        max-height: initial !important;
    }
    /* General Styles for Header and Navbar */
    header {
        position: relative;
       
    }

    .MyArrow {
        position: absolute;
       /* top: 30%;*/
        font-size: 3rem;
    }

        .MyArrow:hover {
            cursor: pointer;
        }

    .MyArrow-left {
         left: -3rem !important;
      
        /*  left: -11%; background-image: url("../DS_ICON-Previous-round.png");*/
    }

    .MyArrow-right {
        right: -3rem !important;
        /* right: -11%;*/
        /* background-image:url("../DS_ICON-Next-round.png");*/
    }

 /*   #The_1999 {
        position: absolute;
        top: 20px;
        right: 30px;
        color: black;
        transition: background-color 0.4s ease, color 0.4s ease, padding 0.4s ease;
        z-index: 9999;
    }

        #The_1999:hover {
            background-color: black;
            color: white !important;
            padding: 5px;
        }*/
    /*--------------------------------------------------*/
    #LoveLink {
        text-wrap: nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        
    }
    .BioColumn{
        width:95%;
    }
    .contact .MyRows .col-6 {
        max-width: inherit !important;
    }
    .contact .MyRows{
        display:block;
    }
}
@media (max-width: 800px) {
    .first-Publication-image {
    width:100%;
    }
        .thumb-container {
        position: unset;
        /* top: 0; 
         right: 0; 
         bottom: 0; 
         left: 0; */
        display: unset;
        grid-template-columns: none;
        grid-template-rows: none;
        width: initial;
    }

    .thumb {
        padding-bottom: 0;
    }

    .grid-PublicProject{
        padding: 0 15px;
    }
   /* #insedfotterdiv .f-05:not(:last-child), #searchForm p {
        display: none;
    }*/

    .f-05 {
        flex-direction: column;
        align-items: center;
    }

    #privicy {
        display: inline-block;
    }
}
@media (max-width: 480px) {

    #searchForm div {
        flex-direction: column;
        align-items: center;
    }
    .SearchboxDiv{
        width: initial;
        padding:0px !important;

    }
    .back-arrow {
        top: -60px;
        right: 10px;
    }
    .btn-light-MyExit2 {
        /*right: -1.7rem;*/
        right: -2rem;
       
        width: 24px;
    }
    .MyArrow-left {
        left: -2rem !important;
        /*left: -20%;*/
        width: 24px;
        /*  background-image: url("../DS_ICON-Previous-round.png");*/
    }

    .MyArrow-right {
        right: -2rem !important;
        /*right: -20%;*/
        width: 24px;
        /* background-image:url("../DS_ICON-Next-round.png");*/
    }
}
@media (max-width: 370px) {

    .ArticleList {
        grid-template-columns: repeat(1,0.6fr);
        justify-content: center;
    }
}
@media (max-width: 320px) {

    .MyArrow-left {
        left: -2rem !important;
        /* left: -25%;*/
        /*  background-image: url("../DS_ICON-Previous-round.png");*/
    }

    .MyArrow-right {
        right: -2rem !important;
        /*right: -25%;*/
        /* background-image:url("../DS_ICON-Next-round.png");*/
    }
}
html body footer {
    display: block !important;
    position: fixed !important;
    z-index:9999;
}
img.col-3 {
padding:10px 15px;
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 1.5rem !important;
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 3rem !important;
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 4.5rem !important;
}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 6rem !important;
}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 7.5rem !important;
}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 9rem !important;
}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 10.5rem !important;
}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 12rem !important;
}

/* For right-to-left (RTL) support: */
.ql-editor .ql-indent-1.ql-direction-rtl {
    padding-right: 1.5rem !important;
}

.ql-editor .ql-indent-2.ql-direction-rtl {
    padding-right: 3rem !important;
}

.ql-editor .ql-indent-3.ql-direction-rtl {
    padding-right: 4.5rem !important;
}

.ql-editor .ql-indent-4.ql-direction-rtl {
    padding-right: 6rem !important;
}

.ql-editor .ql-indent-5.ql-direction-rtl {
    padding-right: 7.5rem !important;
}

.ql-editor .ql-indent-6.ql-direction-rtl {
    padding-right: 9rem !important;
}

.ql-editor .ql-indent-7.ql-direction-rtl {
    padding-right: 10.5rem !important;
}

.ql-editor .ql-indent-8.ql-direction-rtl {
    padding-right: 12rem !important;
}