.h1proj {
    /*width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 50px -50vw 0px;*/
    margin: 0;
    padding: 0;
    font-size: calc(20px + 3vw);
    font-weight: 600;
    text-align: center;
    /*border:3px dashed blue;*/
}

.psub {
    margin: 5vw 0 0.5vw;
    text-align: center;
    -webkit-text-fill-color: var(--base-textsubfill);
}

.psub2 {
    margin: 1vw 0 0vw;
    text-align: center;
    -webkit-text-fill-color: var(--base-textsubfill);
}

.psub2 a{
    color: var(--base-textsubfill);
}

.psub3 {
    margin: 0 0 0.5vw;
    text-align: center;
    -webkit-text-fill-color: var(--base-textsubfill);
}

.psub3 a{
    color: var(--base-textsubfill);
}

/*
Idea is to create left-right 'steps' of projects
*/

.yearHead {
    scroll-margin-top: 4vw;
    margin-left: 8vw;
    margin-bottom: 0;
    margin-top: 0;
    -webkit-text-fill-color: var(--base-textsubfill);
}

.h2proj {
    position: relative;
    margin: 1.1vw 2vw 0.1vw !important;
    padding: 0vw;
    max-width: 40vw;
}

.h2proj a:hover {
    transition: all 0.2s;
    -webkit-text-fill-color: var(--base-textsubfill);

}

.pSearch {
    margin: 0.25vw 14.5vw 0.5vw;
}

.pSearch a{
    transition: all 0.2s;
   -webkit-text-fill-color: var(--base-textsubfill); 
}

.pSearch a:hover {
    transition: all 0.2s;
    -webkit-text-fill-color: var(--base-textfill);

}

.p2sub {
  margin: 0.2vw 0 auto 1vw !important;
  padding: 0vw;
  -webkit-text-fill-color: var(--base-textnavfill);
  font-size: calc(0.6em + 0.5vmax);
}

.p2subr {
  text-align: right;
  width: 100%;
  margin: 0.2vw 1vw auto -1vw !important;
  padding: 0vw;
  -webkit-text-fill-color: var(--base-textnavfill);
  font-size: calc(0.6em + 0.5vmax);
}

.p2text {
    text-align: left;
    font-size: calc(0.6em + 1.6vmax);
    margin: 1.7vw 1vw;
}


.stick {
    margin: 0 0 1vw 0;
    padding: 0.3vw 0 !important;
    background-color: var(--base-bgfill);
    position: sticky;
    top: 0;
    z-index: 3;
}

/*
Wanted to try make these flexboxes but that did not work out 
*/

.imgdiv {
    margin-left: 6vw !important;
    justify-content: left !important;
}

.pagecontent {
    max-width: 99vw;
    overflow: hidden;
}

.imgdivimg {
    position: relative;
    width: 19vw;
    height: 25vw;
    border-radius: 1.7vw;
    overflow: hidden;
}

.imgdivitem {
    position: relative;
    max-width: 20vw;
    height: 25vw;
    margin: 0;
    margin-left: 1vw;
    margin-bottom: 2vw;
    
    padding: 0
        /*1vw 1.5vw 2vw*/
    ;
    border-radius: 1.7vw;
    transition: all 0.3s;
}

.imgdivitem:hover {
    transform: scale(1.05);
    transition: all 0.3s;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: var(--base-acctcolopac);
    overflow: hidden;
    width: 100%;
    height: 0;
    border-radius: 0 0 1.7vw 1.7vw;
    transition: all .3s ease;
}

.overlay2 {
    position: absolute;
    width: 100%;
    height: 1vw;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: var(--base-acctshadopac);
}

/*
.overlay p {
    font-size: calc(0.6em + 1.4vmax);
}
    */

.imgdivitem p {
    position: absolute;
 /*   margin: 1.5vw 1vw;*/
    z-index: 1;
}

.imgdivitem:hover .overlay {
    height: 43%;
    opacity: 1;
}



.imgdivitem:hover .readmore {
    height: 100%;
    opacity: 1;
}

.imgdivitem:hover .overlay2 {
    height: 1.5vw;
    opacity: 1;
}

.imgdivpush {
    margin: 0 1vw;
}





/*
Collapsible time
*/
/*


.readmore {
  padding:0 !important;
  background-color: var(--base-acctcolopac);
  cursor: pointer;
  width: 100%;
  border: none;
  border-left: 0 solid var(--base-acctcol);
  text-align: left;
  outline: none;
  border-radius: 0 0 1.7vw 1.7vw;
  transition: all 0.2s;
}

.readmore:after {
  /*text-decoration: underline;
  /*content: 'Read more';
  color: var(--base-textfill);
  /*font-size: 1vw;
  font-weight: bold;
  float: left;
  margin: -7vw 0 0 0vw;
  
}

.readmore:hover{
  background-color: var(--base-acctshadopac);
  transition: all 0.2s;
}

.activeread{
  border-radius: 2vw 2vw 0 0;
}

.activeread:after {
  text-decoration: underline;
  content: "Read less";
}

.content {
  padding: 0 1cap;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: var(--base-bgfill);
}