/* These keyframes may not be needed, but assures that custom fonts have a moment to fully load before page is displayed */
@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}


#blah, .title-desc-inner {
  animation: fade-me-in 0.25s;
}


/* load in custom fonts */
@font-face {
    font-family:Bold;
    src: url('PostGrotesk-Medium.ttf');
}


@font-face {
    font-family:Medium;
    src: url('PostGrotesk-Medium.ttf');
}


@font-face {
    font-family:Book;
    src: url('PostGrotesk-Book.ttf');
}


@font-face {
    font-family:BoldItalic;
    src: url('KievitOT-BoldItalic.otf');
}

@font-face {
    font-family:MediumItalic;
    src: url('KievitOT-MediumItalic.otf');
}


@font-face {
    font-family:Regular;
    src: url('PostGrotesk-Medium.ttf');
}


@font-face {
    font-family:MenuFont;
    src: url('PostGrotesk-Medium.ttf');
}

 
@font-face {
    font-family:MainTitle;
    src: url('PostGrotesk-Medium.ttf');
}




html, body {
  font-family: Medium;
   -webkit-text-size-adjust: 100%;
 
    margin: 0px;
    padding: 0px;
    background:rgb(254,254,252);
    color:rgb(100,100,100);
    line-height:1.3em;
}

.colBasic {
  font-family:Regular;
  text-align:left;
  font-size:13px;
  letter-spacing: 0.4px;
  line-height:1.2em;
}

.title1
{
    font-size:28px;
    text-align:left;
    background:rgb(253,199,0);
    color:white;

    margin-left:-10px;
    line-height:1.6em;
    padding-left:12px;
    padding-right:15px;
    padding-top:12px;
    padding-bottom:7px;
   
    font-family:MainTitle;
    letter-spacing: .02em; 
}

.title1:hover
{
  cursor:pointer;
}


.title1B
{
    font-size:28px; 
    margin-left:-10px;
    line-height:2em;
    text-align:left;
	background:rgb(0,60,108);
    color:white;
   
    padding-left:12px;
    padding-right:15px;
    padding-top:12px;
    padding-bottom:7px;
 
    font-family:MainTitle;
    letter-spacing: .02em; 
}
.title1B:hover
{
  cursor:pointer;
}




.cardTitle
{
  font-size:28px;
  font-family:Medium;
  line-height:1.2em;
  text-decoration: none ;
}




hr {
    border: 0;
    background: #333;
    height:1px;
  }

u {
 text-decoration:underline;
}






.leftMenu {
  position:fixed;
  top:50px;
  left:70px;
  font-size:13px;
  }





.portraitPeople {
 
  width:28%;	
  border:0px solid black;
  float:left;
  margin-top:7px;
  margin-right:20px; 
  margin-bottom:8px; 
  
}



.imageRef {
	padding-bottom:4px;
}

.imageRef a:link {
  color:none;
  text-decoration: none ;
  border-bottom: 0px solid #da2253;
  background: transparent linear-gradient(90deg, rgb(255,0,2), rgb(255,0,2)) no-repeat 0 93%;
  background-size: 100% 0px;
  background-position: bottom 0px left;
}

.imageRef a:link:hover {
  color:none;
  text-decoration: none ;
  border-bottom: 0px solid #da2253;
}


.imageRef a:visited {
  color:none;
  text-decoration: none ;
  border-bottom: 0px solid #da2253;
}

.imageRef a:visited:hover {
  color:none;
  text-decoration: none ;
  border-bottom: 0px solid #da2253;
}

.imageRef a:hover {
  color:none;
  text-decoration: none ;
  border-bottom: 0px solid #da2253;
}

.imageRef .cardTitle {
	
}


img a:link:hover {
  border-bottom: none;
}

img a:visited:hover {
  border-bottom: none;
}



.menuPosition {
  position:fixed;
  top:47px;
  left:47px;
  width:350px;
  font-size:12px;
  line-height:1em;
}


.contentPosition {
  position:absolute;
  left:400px;
  top:20px;
  min-width:300px;
  margin-right:60px;
  overflow:no-content;
  display:inline-block;
  background:rgb(254,254,252);
  z-index:10; 
}



.submenuPosition {
  position:relative;
  top:107px;
  left:0px;
  line-height:1.2em;
  font-size:24px;
}

a {
  text-decoration:none;
  color:rgb(160,160,160);
}


.projectLinks {

  font-size:16px;
  text-decoration:none;
  font-family:Book;
  margin-top:-2px;
  margin-left:1px;
  margin-bottom:8px;
  line-height:1.5em;
}


.projectLinks a {
  text-decoration:none;
  padding-bottom:2px;
  padding-right:-5px;
  color:rgb(0,106,173);
}

.projectLinks a:link {
  background: transparent linear-gradient(90deg, rgb(0,106,173), rgb(0,106,173)) no-repeat 0 93%;
  background-size: 100% 2px;
  background-position: bottom 0px left;
}


.projectLinks a:link:visited {
  background-size: 100% 2px;
  background-position: bottom 0px left;
}


.projectLinks a:link:hover {
  background-size: 100% 6px;
  background-position: bottom 0px left;
}


.projectLinks a:visited:hover {
  background-size: 100% 6px;
  background-position: bottom 0px left;
}


.contentText {
  color:rgb(40,40,40);
  text-align:left;
  margin-top:3px;
  font-size:16px;
  line-height:1.4em;
  font-family:Book;
}

.contentText a {
  text-decoration:none;
  padding-bottom:2px;
  color:rgb(0,106,173);
}

.contentText a:link {

  background: transparent linear-gradient(90deg, rgb(0,106,173), rgb(0,106,173)) no-repeat 0 93%;
  background-size: 100% 2px;
  background-position: bottom 0px left;

}

.contentText a:link:hover {
  background-size: 100% 6px;
  background-position: bottom 0px left;
}

.contentText a:visited {
  /* color:rgb(41,41,40); */
}


.contentText a:link:visited:hover {
  background-size: 100% 6px;
  background-position: bottom 0px left;
}

/* 
 * Here we check the width of the window, and reposition the menus etc if the window is not wide enough (eg, on mobile phones).
 * Probably would be better to make use of a dedicated library for this, such as bootstrap
 */
@media (max-width: 668px) {


  .menuPosition {
    position:absolute;
    left:0px;
    top:27px;
    width:100%;
    font-size:18px;
    font-family:Regular;
  }

  .title1 {
    font-size:48px;
    position:absolute;
    left:0px;
    top:0px;
    margin-left:0px;
    line-height:1.6em;
    padding-left:15px;
    padding-right:19px;
    padding-top:5px;
    padding-bottom:1px;

  }

  .title1B {
    font-size:48px;
    position:absolute;
    left:0px;
    top:86px;
    padding-right:19px;
    margin-left:0px;
    line-height:1.6em;
    padding-left:15px;
    padding-right:25px;
    padding-top:5px;
    padding-bottom:1px;


  }

  .contentPosition {
    position:absolute;left:17px;top:520px;width:580px;
  }

  .submenuPosition {
    position:absolute;top:200px;left:19px;
    line-height:1.2em;
    font-size:32px;
    width:580px;
  }

  .contentText {
    color:rgb(40,40,40);
    text-align:left;
    margin-top:3px;
    font-size:24px;
    line-height:1.4em;
    font-family:Book;
  }

  .cardTitle {
    font-size:40px;
  }


  .projectLinks {
    font-size:26px;
  }

}



@media (max-width: 376px) {


  .menuPosition {
    position:absolute;
    left:0px;
    top:17px;
    font-size:18px;
    font-family:Regular;
    width:300px;
  }

  .title1 {
    font-size:36px;
    position:absolute;
    left:0px;
    top:0px;
    width:300px;


    margin-left:0px;
    line-height:1.6em;
    padding-left:10px;
    padding-right:19px;
    padding-top:5px;
    padding-bottom:1px;

  }

  .title1B {
    font-size:36px;
    position:absolute;
    left:0px;
    top:66px;
    width:300px;


    margin-left:0px;
    line-height:1.6em;
    padding-left:10px;
    padding-right:19px;
    padding-top:5px;
    padding-bottom:1px;

  }

  .contentPosition {
    position:absolute;left:10px;top:350px;
    width:340px;
  }

  .submenuPosition {

    position:absolute;top:150px;left:11px;
    line-height:1.2em;
    font-size:20px;
    width:300px;

  }

  .contentText {
    color:rgb(40,40,40);
    text-align:left;
    margin-top:3px;
    font-size:16px;
    line-height:1.4em;
    font-family:Book;
  }

  .cardTitle {
    font-size:30px;
  }



  .projectLinks {
    font-size:16px;
  }

}