/* latin */

:root{

  --totalwidth:1536px;
  --slate:#3a3f44;
  --backcolor:#b6b1a5;
}


body{
  #font-family:'Roboto',Roboto Condensed,San Francisco,Helvetica,sans-serif;
  margin:0px;
  padding:0px;
    overflow-x:hidden;
    background-color:var(--backcolor);
    font-size:1em;
    font-family:Reddit Sans Condensed,San Francisco, Helvetica, Sans-Serif;
    
}

body a
{
  text-decoration:none;
}

container{
  overflow-x:hidden;
  display:flex;
    display:-webkit-flex;
  flex-direction:column;
    -webkit-flex-direction:column;
  align-content: stretch;
  width:auto;
  height:auto;
  min-width:900px;
    overflow-y:hidden;
    display:flex;
    justify-self: center;
    filter:drop-shadow(2px 2px 20px #00000044);
    
}

#tproduct {
    display: flex;
    flex-wrap:wrap;
    min-width:370px;
}

#tproduct > div 
{
  min-width:33%;
  padding:0px;
  margin:0px;
  #background-color:#cccccc;
  #border-style:solid;
  height:min-content;
  display:flex;
  flex-direction:column;

}

.rework
{
  display:block;
}

banner
{
  display:block;
  #background-image:url("ostrich_photo_75.JPG");
  background-size:30%;
  background-position: 40%;
  max-height:calc(40vh);
   transition: max-height 0.5s ease;
}

.collapse
{
  max-height:calc(0vh);
  cursor:pointer;
}
.collapse:hover
{
  filter:invert(1);
}
.disable
{
  overflow:hidden;
  width:0px;
  visibility:hidden;
  border-style:none;
  height:0px;
  margin:0px;padding:0px;
  display:block;
  min-width:0px;
}

.refactor
{
  
padding-left: 0px;
    width: 20%;
    font-size: .9em;
    line-height: 1.7em;
    margin-left: -2em;
    #border-style:none;
    #padding-right: 2em;
    min-width:27em;
}

.refactor ul
{
  padding-left:0px;
}

heading
{
  height:auto;
  display:block;
  width:auto;
  z-index:3;
  #background-color:#adadad;
  #background-color:#374150;
  background-color:var(--slate);
 color:#ffffff;
  padding:.4em;
  font-size:1.5em;
  padding-left:1.4em;
  padding-top:.7em;
  letter-spacing:auto;

  }

.whenopen
{
  padding-top:2em;
  transition: padding-top 0.5s ease-in;
}

.aslink
{
  cursor:pointer;

}
.aslink:hover
{
  filter:invert(1);
}
content
{
  #background-color:#d6d6d6;
  #background-color:#eeeeee;
  background-color:#fcf9f2;
  display:block;
  height:auto;
  color:#black;
  z-index:2;
  line-height:1.5em;
  #position:absolute;
  
  width:calc(100vw);
  #margin-top:-1em;
  max-width:var(--totalwidth);
}
body a:visited
{
    ignore-color:#3a3a3a;
    #color:#59559b;
    color:#4B4B6F;
    
}
body a:link
{
    ignore-color:#383880;
    color:#5A5A8E;
}

body a:hover
{
  filter:invert();
}
content h1
{
  margin-left:10px;
}
video
{
  width:100%;
  margin-top:0px;
  filter:grayscale(40%);
  #height:35%;
}


menu
{
  display:flex; 
  flex-direction:row;
  align-content:stretch;
}

.leaf
{
  #width:33%;
  #height:auto;
  padding-top:1.25em;
}
left
{
  width:25%;
  border-right-style:dotted;
  border-width:1px;
  border-color:999999;
  transition: width 0.5s ease-in;
}
middle
{
  width:45%;
  border-right-style:dotted;
  border-width:1px;
  border-color:999999;
  padding-left:2em;
  transition: width 0.5s ease-in, font-size 0.5s ease-in;
  min-width:400px;

}
right
{
  width:30%;
  padding-left:2em;
    padding-right:1.5em;
    transition: width 0.5s ease-in;
}

beyond
{
  opacity:1;
  transition: width 0.5s opacity 0.5s ease-in;
  flex-grow:1;
  
  margin-left:2em;
  margin-right:0em;
  margin-top:1em;
  max-width:1024px;
  min-width:600px;
  padding-bottom:6em;

}
beyond disable
{
  opacity:0;
  transition: width 0.5s opacity 0.5s ease-in;
  width:0px;
  min-width:0px;
}

addendum
{
  display:block;
  padding-left:1em;
}
addendum ul {
  padding-left:1.5em;
}

press{

}

content h2
{
  margin-top:0px;
  padding-top:0px;
  font-size:1.25em;
  text-transform:uppercase;
  color:#884500
}
.leaf a
{
  color:#333399;
  #text-decoration:underline;
}
.leaf a:hover
{
  color:#666699;
}
.leaf h3
{
  margin:0px;
  padding:0px;
  font-size:1em;
  #margin-bottom:-16px;
}



crowdfunded
{
padding-left:1em;
display:block;
}
other
{
    padding: 0 2em 0 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: max-content;
    #padding-right:1em;
}
Contact
{
margin-left:2em;
}
contact b
{
 display:inline-flex;
    display:-webkit-inline-flex;
 width:75px;
}
about
{

}
about p
{
padding-right:1em;
}

ul
{
  padding-inline-start:0px;
  #padding-top:.25em;
}

#footer
{
    display:flex;
    font-size:.8em;
    justify-content:center;
    padding:1em;
    background-color:var(--slate);
    color:white;
    padding-right:2em;
}
#footer p
{

}

ul {
    list-style: none; /* Remove default bullet */
    padding-left: 5px; /* Adjust padding for custom bullet */
    margin-top:0px;
    margin-bottom:1em;
}

ul li::before {
    content: '';
    display: inline-block;
    width: 6px; /* Smaller width */
    height: 6px; /* Smaller height */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAQ0lEQVR4nO3WsQkAMAwDwTj775ys8AIXDnnVggMXwrV4DuwVKe0Abo2wsPD7MFqZMGjh/ju1sLBwW5Ll8ucSFhaeAV9RpwM5e0h0vAAAAABJRU5ErkJggg==');
    background-size: cover; /* Ensure the image covers the whole area */
    margin-right: 6px; /* Adjust space between bullet and text */
    vertical-align: middle; /* Align bullet with text */
    margin-bottom:2px;
     filter: invert(10%) sepia(1) saturate(100) hue-rotate(232deg) brightness(.5) opacity(.3); /* Adjusted for red */
}

#image
{
  display:flex;
  #display:-webkit-flex;
  #width:auto;
  overflow:hidden;
  margin-right:2em;
  #max-height:calc(50vh);
}
#image img
{
  align-self: left;
  flex: 0 0 auto;
   # -webkit-flex: 0 0 auto;
  

object-position:top;
  margin-right:1em;
 # width:100%;
 
}
info
{
  display:block;
    width:auto;
}
projects ul li
{
    margin-left:1em;
    margin-right:2em;
}
    
small
{
  display:block;
  margin-top:-1.4em;
  margin-bottom:1em;
}

#loadedContent
{
  #width:95%;
  width:100%;
}

#loadedContent p {
  color:#333333;
  font-size:1.2em;
  text-align: justify; 
  padding-right: 2em;
  line-height:1.6em;


}

.clickedOn
{

  font-weight: bold;
}

li a.clickedOn
{
  color:#c36300;
}


img.responsive {
    max-width: 97%;       /* Makes the image take the full width of its parent */
    height: auto;      /* Keeps the image's aspect ratio intact */
    display: block;    /* Removes any extra space below the image */
    padding-right:3em;
}

.heroimg
{
    display: flex;
    align-items: center; /* This aligns the image vertically in the center */
    max-height: 700px; /* Set to desired height */
    overflow: hidden;
}

projects
{
      display: flex;
    justify-content: center;
}


body > container > content > menu > middle > addendum > press > ul
{
display: flex; 
flex-direction: column;
}


container
{
  width:100vw;
  min-width:330px;
  max-width:var(--totalwidth);
}

html {
    #touch-action: manipulation;
}

.dimg {
    overflow: hidden;
    justify-content: center;
    display: flex;
    width:100%;
    justify-content: center;
}
#loadedContent > div.ogallery > div > p {padding:0px;margin:0px;}

.ogallery
{
  display: flex;
    width: 97%;
    justify-content: space-between;
}

intro
{
 display:block;
 padding-top:1em;
 padding-bottom:1em; 
}


next
{
  
  display: flex;
    flex-direction: column;
    align-content: center;
    padding-top:3.6em;
    overflow:hidden;

}

.thumb
{
 overflow:hidden;
}

next div a
{
 transform: scale(1.00);
}
next div a:hover img
{
   transform: scale(1.05);
}

  #loadedContent > p > a {text-decoration:underline;}

#-----

/* Fix layout for older iPads (e.g. iPad 6th Gen) that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .hero-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Fallback 16:9 aspect ratio */
  }

  .hero-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Optional: Further narrow to iPads only */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
  .hero-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }

  .hero-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 middle
 {
 width:41%;
 }
}