/*SETUP==========================================================*/

html {
/*  scroll-padding-top: 4rem;*/
}

body {
/* overflow: hidden;*/
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12pt;
}

/* This hides all pages */
.page {
    display: none;
}

/* This displays the first page */
.default {
    display: block;
}

/* This displays the page corresponding to the one you clicked on */
:target {
    display: block;
}

/* This hides the default page when another page is clicked */
:target ~ .default {
    display: none;
}

a:-webkit-any-link {
    text-decoration: none;
}

.body {
  display: grid;
  grid-template-columns: 3fr;
zoom: 100%;
  /*overflow: scroll;*/
  justify-items: center;
 /* margin-top: 5%;
  margin-bottom: 10%;*/
  min-width: 1400px;


}


/*HEADER, LOGO & NAVIGATION==========================================================*/

.header {
  /*border-bottom: 4px solid;*/
  padding:4px;
}

.logo {
  text-align: left !important;
}

.logo a {
  color: #41ad49;
}

.logo img{
  max-height: 130px;
  width:auto;
  zoom: 100%;
  /*
  height: auto;
  max-width: 100%;

*/
/*    padding-bottom: 6px;*/
/*Removed from old version of site.*/
/*
padding-bottom: 15px;*/
}


.nav {
 text-align: left;
 /*border-bottom: 1px solid black;*/
text-decoration-style: none;
/*border-bottom: 2px solid black;
zoom: 100%;*/
margin-bottom: 14px;
}

.nav ul {
 list-style-type: none;
/* display: inline;*/
padding-left: 0px;
margin-bottom: 0px;
/*margin-bottom: 10px;*/
display: inline;
  clear: both;

/*margin-bottom: var(--basepad) !important;*/
}

.nav li {
  color: white;
text-decoration-style: none;
display: inline;

}


.nav li a {
color: black;
/*text-decoration-style: none !important;*/
/*margin-inline: 4px;*/
/*background-color: black;*/
text-decoration-style: none;
font-weight: bold;
font-size: 0.9em;
display: inline;
padding-bottom: 2px;
border-bottom: 2px solid white;
margin-inline-end: 5px;
/*padding-inline: 8px;
padding-block: 8px;*/

}

.nav li a .selected {
  color: black;
  /*border-bottom: 2px solid white;*/
}

.nav li a .wide {
  /*border-bottom: 2px solid white;*/
}

.nav li a .wide_selected {
  /*border-bottom: 2px solid white;*/
}

.nav li:hover {
  color: black;
  /*background-color: white;*/
/*text-decoration: underline;*/
  /*border-bottom: 2px solid white;*/
}



.nav li a:hover {
color: #41ad49;
font-style: italic;
/*text-decoration: underline;*/
  /* border-bottom: 2px solid black;*/
}

/*.nav .active { */

.active {
  /*border-bottom: 1px solid white;*/
    font-style: italic;
}

.active a {
  color: #41ad49 !important;
}

a.active {
/*    color: #41ad49 !important;*/
}


.nav li a.active {
  color: #41ad49;
  font-style: italic;
  /*border-bottom: 2px solid #41ad49; */
}

/*CONTENT CONTAINER==========================================================*/


.content {
/*  min-height:500px;
  height: 500px;*/
  overflow: hidden;

}




.top {
 /* height: 7.5vh;*/
}



.sidebar {
  border-right: 1px solid lightgrey;
}

.footer {
    /*border-top: 1px solid lightgrey;*/

}

/*
.body {
  display: grid;
  grid-template-columns: 1fr 3fr;
  overflow: hidden;
}
*/


.logo {
  font-size: 2.7em;
  color:#7d20d4;
  font-style: italic;
  display:inline;
  text-align: left;
}

.intro_content {
  /*margin: 1px;*/
  padding-top:20px;
padding-inline:20px;
padding-bottom:20px;
    border-inline: 2px solid black;
    border-top: 4px solid black;
    border-bottom: 13px solid black;
    min-width: 600px;
    min-height: 480px;
justify-items: center;
}

.inner {
  padding-right: 6%;
}


/*BODY TEXT==========================================================*/




.intro_content p {
/*max-width:800px;*/
}

.below {
  padding-top: 0px;
  margin-top: 0px !important;
      margin-block-start: 0px !important;
  margin-bottom: 2em;
}



.intro_content h2 {
 font-family: Helvetica, Arial Black, sans-serif;
font-weight: 900;
font-size: 1.47em;
margin-bottom: 10px;
padding-bottom: 0px;
/*text-decoration: underline;
border-bottom: 4px solid black;*/
}

.project h4 {
margin-bottom: 8px;
padding-bottom: 0px;
/*display: inline;*/
}

h5 {
  display: inline !important;
   font-family: Helvetica, Arial Black, sans-serif;
font-weight: 900;
font-size: 1.47em !important;
margin-block-start: 0em !important;
    margin-block-end: 0em !important;
}


.project h5 {
 font-family: Helvetica, Arial Black, sans-serif;
font-weight: 900;
font-size: 1.47em !important;
display: inline !important;
}

.project strong {
font-weight: 900;
font-size: 1.47em !important;
}

.project p {
  margin-top: 0px;
  padding-top: 0px;
  /*max-width: 440px;*/
}


.intro_content p a {
  color: black;
  text-decoration: underline;
}

.intro_content p a:hover {
  color: #a82a2a;
  text-decoration: none;
}


.intro_content p i {
/*  color: #999;*/
  font-style: italic;
}



/*---------------------PROJECT DIRECTORY---------------*/

.thumbnail_int{
   object-fit: cover;
   overflow: hidden;
   height: 100px; 
   width : 100px;
}  


.thumbnail {
  position: relative;
  margin: 1rem;
  padding-bottom: 100% ;
  border: 1px solid gray;
}
/*
.thumbnail__img {
  position: absolute;
  max-width: 100% ;
  max-height: 100% ;
  width: auto;
  height: auto;
  left: 50% ;
  top: 50% ;
  transform: translate(-50% , -50% );
}
*/


/* GRID */

/*  CSS GRID STYLES */

   .gridlayout {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-gap: 1rem;
       max-width: 800px;
   }

   .gcell {
       border: 2px solid #000;
       border-radius: 3px;
       font-family: arial;
       font-weight: bold;
       font-style: oblique;
   }



.project {
  margin-bottom: 35px;
}

.project h4 {
font-weight: 500;
}

.project h4 a {
color: black;
font-weight: bold;
text-decoration: underline;
margin-bottom: 0px;
}

.project h4 a:hover {
color: #a82a2a;
font-weight: bold;
text-decoration: none;

}



p {
  max-width: 800px;
}







@media screen and (min-width: 1600px) {

.intro_content {
    min-height: 560px;
  }

}



@media screen and (min-width: 1200px) {

.intro_content {
    min-height: 520px;
  }

}


@media screen and (max-width: 1199px) {

.body {
  /*background-color: red;*/
  min-width: 600px;
/*max-width: 800px !important;*/
}

.intro_content {
    min-width: 400px;
}

}

@media screen and (max-width: 800px) {

.body {
  /*background-color: red;*/
  min-width: 600px;
/*max-width: 800px !important;*/
}

p {
}


.intro_content {
    min-width: 200px;
    max-width: 640px;

}
.nav li a {
margin-inline: 4px;
padding-inline: 24px;
font-size: 0.85em;
}


}


@media screen and (max-width: 720px) {

.intro_content {
    max-width: 620px;

}

}



@media screen and (max-width: 640px) {

.body {
  /*background-color: red;*/
  min-width: 500px;
/*max-width: 800px !important;*/
}

p {
  max-width: 480px;
}


.intro_content {
    max-width: 520px;
padding-inline:16px;
}

.nav li a {
margin-inline: 3px;
padding-inline: 20px;
font-size: 0.84em;
}

.logo img {
  width: 560px;
  height: auto;
}


}



@media screen and (max-width: 600px) {

.body {
  min-width: 380px;
}

p {
  max-width: 440px;
}


.intro_content {
    max-width: 440px;
padding-inline:16px;
}

.nav li a {
margin-inline: 2px;
padding-inline: 16px;
font-size: 0.8em;
}

.logo img {
  width: 520px;
  height: auto;
    padding-bottom: 0px;
}



}


@media screen and (max-width: 560px) {

.body {
  min-width: 320px;
}

p {
  max-width: 400px;
}


.intro_content {
    max-width: 400px;
padding-inline:16px;
}

.logo img {
  width: 440px;
  height: auto;
    padding-bottom: 0px;
}

.nav li a {
margin-inline: 1px;
padding-inline: 8px;
font-size: 0.75em;
}


}



@media screen and (max-width: 520px) {

.body {
  min-width: 300px;
}

p {
  max-width: 360px;
}


.intro_content {
    max-width: 400px;
padding-inline:10px;
}

.logo img {
  width: 440px;
  height: auto;
    padding-bottom: 0px;
}

.nav li a {
margin-inline: 1px;
padding-inline: 6px;
font-size: 0.75em;
}


}




@media screen and (max-width: 480px) {

body {
     font-size: 11pt !important;
  }

.body {
  min-width: 260px;
     font-size: 11pt !important;
}

p {
  max-width: 340px;
       font-size: 11pt !important;
}


.intro_content {
    max-width: 380px;
padding-inline: 8px;
}


.logo img {
  width: 400px;
  height: auto;
  padding-bottom: 0px;
}

.nav li a {
margin-inline: 1px;
padding-inline: 8px;
font-size: 0.74em;
}



}


@media screen and (max-width: 400px) {

.body {
  min-width: 220px;
}

p {
  max-width: 320px;
}


.intro_content {
    max-width: 340px;
padding-inline: 4px;
}


.logo img {
  width: 360px;
  height: auto;
  padding-bottom: 0px;
}

.nav li a {
margin-inline: 1px;
padding-inline: 6px;
font-size: 0.72em;
}



}

@media screen and (max-width: 360px) {


  body {
         font-size: 10pt !important;
  }


.body {
  min-width: 200px;
     font-size: 10pt !important;
}

p {
  max-width: 280px;
}


.intro_content {
    max-width: 300px;
padding-inline: 4px;
}


.logo img {
  width: 330px;
  height: auto;
  padding-bottom: 0px;
}

.nav li a {
margin-inline: 1px;
padding-inline: 5px;
/*font-size: 0.66em;*/
}



}