@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*********************************************************
   Elements
**********************************************************/
html {
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
  line-height: 1.2;
  font-size: 16px;
  font-size: 1rem;
}

body{
  background-color: #ffffff;
  font-family: 'Inconsolata', monospace, sans-serif;
  color: #000000;
  width: 100%;
  height: 100vh;
  margin: 0; 
  padding: 0;
}

h1{
  font-family: 'Inconsolata', monospace, sans-serif;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

h2{
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
}

h3{
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

p{
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li{
  display: inline;
  margin: 0;
  padding: 0;
}

a{
  color: #000000;
  text-decoration: none;
}

.italic{
  font-style: oblique;
}

figure {
  margin: 1em;
}

img{
  max-width: 100%;
	height: auto;
}

.blur{
  /* filter: blur(5px); */
  transition: all 1s;
}

.no-blur{
  transition: all 3s;

}

.work-page-caption{
  color: #484a4f;
  font-family: 'Inconsolata', sans-serif;  
  font-size: 1rem;
  text-align: center;
}

.myCaption{
  color: #80848e;
  font-family: 'Roboto', sans-serif;  
  font-size: .875rem;
  text-align: center;
  margin: .75em 0;
}

.web-pic-caption{
  color: #80848e;
  margin-top: 0;
  font-size: .75em;
}

.imprint{
  margin-top: 2em;
}

p.copytext{
  color: #80848e;
  font-size: .875rem;
}

/*********************************************************
    Layout - All Pages
**********************************************************/
.wrapper{
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  margin: 2em auto;
}

.site-header{
  display: flex;
  align-items: baseline;
}

.site-info{
  margin-left: auto;
}

.site-menu{
  margin-left: auto;
}

.site-menu > ul > li{
  margin-right: .4em;
}


/*********************************************************
    Layout - Work Page
**********************************************************/
.work-page-content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 3em;
  margin-bottom: 2em;
}

/*********************************************************
    Layout - Books Page
**********************************************************/
.books-page-content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 3em;
  margin-bottom: 2em;
}


/*********************************************************
    Layout - CV Page
**********************************************************/
.cv-page-content{
  display: flex;
  flex-direction: column;
  margin-top: 3em;
  margin-bottom: 2em;
  font-size: .9rem;

}

.cv-page-content > h3{
  margin: 1em 0 .75em 0;
}

.cv-page-content > p{
  font-size: .9rem;
}

.cv-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cv-grid > p{ 
  flex-basis: 12%;
}

.cv-grid > ul {
  flex-basis: 88%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*********************************************************
    Layout - Contact Page
**********************************************************/
.contact-page-content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 3em;
  margin-bottom: 2em;
}

.contact{
  margin-top:1em;
  margin-left:40px;
}
.contact > p{
  margin-top: 1em;
}

/*********************************************************
    Layout - Imprint Page
**********************************************************/
.imprint-page-content{
  display: flex;
  flex-direction: column;
  margin-top: 3em;
  margin-bottom: 2em;
}

.imprint-page-content > p{
  font-size: .875em;
}

p.imprint1{
  margin-top:1em
}
p.imprint2{
  margin-top:2em
}

/*********************************************************
    Layout - Modal Pages
**********************************************************/
.modal-container{
  flex-direction: column;
  align-items: center;
  align-content: space-around;
}

.close {
  color: #929292;
  font-size: 2rem;
  font-weight: bold;
  cursor:pointer;
  margin-bottom: 1em;
  margin-right: .5em;
  margin-left: auto;
}

.mySlides{
  display: none;
  flex-direction: column;
  align-content: space-around;
  align-items: center;
}

/* Layout - Hillary & I Modal Page */
.mySlides.row{
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

figure.modal{
  margin: 0;
}

.page-flip{
  margin-top: 1em;
}

.page-flip.book{
  margin-top: 0;
}

.page-flip > *{
  margin: auto 2em;
}  

.prev,
.next {
  cursor: pointer;
  color: #929292;
  font-weight: bold;
  font-size: 1.2rem;
}

/*********************************************************
    Media/Screen Queries
**********************************************************/

@media screen and (min-width: 48em) { 
    .cv-grid > p{ 
      flex-basis: 8%;
    }
    .cv-grid > ul {
      flex-basis: 92%;
    }
  }

  @media screen and (min-width: 64em) { 
    .cv-grid > p{ 
      flex-basis: 6%;
    }
    .cv-grid > ul {
      flex-basis: 94%;
    }
  }

  @media screen and (min-width: 66em) { 
    .cv-grid > p{ 
      flex-basis: 5%;
    }
    .cv-grid > ul {
      flex-basis: 95%;
    }
  }