html, body 
    {
      height: 100%;
      margin: 0;
      background-color: #2c393b;
      color:#ddd;
    }
	
    * { font-family:"DM Sans",Soleil; }

	.headline { font-family:Soleil,"DM Sans",sans-serif;  /*letter-spacing:0.04rem*/ }
	.workItem 
	{ 
		vertical-align:top;
		border:1px solid transparent;
		padding:4px 6px;
		display:grid;   
		grid-template-columns: 49px 1fr;
  		grid-template-rows: auto 1fr;
		gap: 8px; 
	}

	.workItem .jlogo {grid-row: 1 / span 2;}
	.workItem .jleft {  grid-column: 2; grid-row: 1; height:45px; padding-top:8px }
    .workItem .jright {   grid-column: 2; grid-row: 1; justify-self: end; padding-top:19px;padding-right:10px }
    .workItem .jbottom {   grid-column: 2; grid-row: 2; }
    .workItem:hover { border-radius:9px;border:1px dotted #777;border-color:#777 #888 #555 #444;background-color:#2e3b3d; }
	
	img.j { width:40px;margin:8px 4px 4px 4px; }
			
	a.exp { color:rgba(100, 200, 200, 1); display:inline-block; }
	a.exp, a.exp:hover { transition: all 0.125s ease 0.0625s; }
    a.exp:hover { color:#fff; }
    a { color: inherit; text-decoration: none; }

    a.l 
	{
	  color: rgba(100, 200, 200, 1);
      background:
        linear-gradient(
          to right,
          rgba(44, 57, 59, 1),
          rgba(44, 57, 59, 1)
        ),
        linear-gradient(
          to right,
          rgba(44, 57, 59, 1),
          rgba(100, 200, 200, 1)
		);
      background-size: 100% 2px, 0 2px;
      background-position: 100% 100%, 1 100%;
      background-repeat: no-repeat;
      transition: background-size 400ms;
    }

	a.l2 { background-size:100% 1px, 0 1px}
	
	.underline,.icons i.fa:hover  { color:#fff;transition: all 0.125s ease 0.0625s; }

    a.l:hover { background-size: 0 2px, 100% 2px; }
	a.l2:hover { background-size: 0 1px, 100% 1px; }

	.icons
    {
	  margin-top:29px;
	  margin-left:auto;
	  margin-right:0px;
      display: grid;
      grid-auto-flow: column;
      align-items: center;
      column-gap: 0.75rem;
	  font-size:1.725rem;
      color:rgba(100, 200, 200, 1);
    }
	
    .icons i.fa { line-height: 1; font-size: 1.725rem; }

	
@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine)
{
    body { overflow: hidden; }
	.main { padding-left:33%; }

	h1.headline { font-size:3rem;color:#fff; }
	h2 { margin-top:42px; }
	h3.headline { font-size:1.375rem; }
	h5.headline { font-size:1.05rem; }
	h1, h3 { line-height:2rem!important; }

	.smaller { font-size:0.75rem; }
	.small { font-size:0.875rem; }
	.mid { font-size:0.9rem; display:inline-block;margin:0 12px; }

    .layout 
    {
      display: grid;
      grid-template-columns: 40% 60%;
      height: 100vh;
    }

    .left 
    {
      padding: 1rem 2.5rem 1rem 1rem;
      background-color: #2c393b;
	  border-right:1px dotted #4a5d5f;
      text-align:right;
	}

    .right 
    {
      padding: 1rem 1rem 1rem 2rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .panels 
	{
      display: grid;
	  margin-left:auto;
	  margin-right:0;
	  margin-top:6px;
    }

    .panels > .panel 
	{
	  margin-left:33%;
	  display:inline-block;
	  padding:6px 0px 6px 12px;
      grid-area: 1 / 1;
      font-size: 0.75rem;
      opacity: 0;
      transform: translateY(6px);
      visibility: hidden;
      pointer-events: none;
      transition: 
		opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
    }

    .panels > .panel.is-active 
	{
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;

	  transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 10ms;
    }

	.workItem ul { margin:-4px 5px 2px 4px!important;padding-left:16px }
	.workItem li, .workItem li * { font-size:0.8rem!important; }

	@media (prefers-reduced-motion: reduce) 
	{
      .panel
	  {
        transition: none;
        transform: none;
      }
    }
}
	
@media screen and (max-width: 1023px)
{
	body { margin:0;padding:18px; }
	* { font-size:14px!important; }
	h1.headline { font-size:14px!important; }
	h3.headline { font-size:14px!important; }
	.icons *, .icons i.fa { font-size: 1.725rem!important; }
	.panels { display:none; }

	.icons { margin: 20px 0 6px 0; }
}