html{
  background-color: #fefefe;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
  padding-top: 1.5rem;
  padding-left: 40px;
  padding-right: 20px;
  line-height: 1.3;
  font-family: aktiv-grotesk, sans-serif;
  font-weight: 300;
}

body{
  padding: 0;
  margin: 0;
}

.cv{
  background: white;
}

em{
  font-weight: 300;
}

.header{
  padding-bottom: 0rem;
  margin-bottom: 2.5rem;
  font-size: 1rem;
}

.name
{
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.35rem;
  width: 260px;
  padding: 0;
  margin: 0;
  color: black;
}


.header ul,
.footer ul{
  display: inline;
  padding: 0;
  margin: 0;
}

.header li,
.footer li{
  display: inline-block;
  margin-right: 2.5em;
}

.rightside{
  /* float:right; */
}

a{
  color: rgba(0,0,0, 0.8);
  text-decoration: none;
}


/* li.rightside{
  float: right;
} */

a.active{
  /* border-bottom: 2px solid black; */
  color: black;
  font-style: italic;
}

a:hover{

  font-style: italic;
  font-weight: 300;
  color: black;


}

a.active:hover{

}

.name a:hover{
    font-weight: 700;
    font-style: normal;
}


.textContent{
  max-width: 600px;
  font-size: 1rem;
  padding-left: 260px;
}

.cv .textContent{
  max-width: 1200px;
}

.textContent.alt{
  position: absolute;
  left: 300px;
  padding-left: 0;
  top: 3rem;
}

.date{
  display: block;
  /* width: 3rem; */
  font-weight: 700;
  font-size: 0.75rem;
  margin-top: 0.6rem;
}

.long{
  width: 5rem;
}

.textContent p{
  margin: 0;
  margin-bottom: 0.2rem;
}

.break{
  height: 2rem;
}

h2{
  font-size: 0.75rem;
  text-transform: uppercase;
  /* color: gray; */
  font-weight: 600;
  letter-spacing: 0.01em;
  /* color: #8eb0ca; */
  margin: 0;
  margin-bottom: 0.5rem;
}

.image-caption{
  position: absolute;
  bottom: -1.5rem;
  transform: translateY(100%);
  /* left: -4rem; */
  /* bottom: -2rem; */
  font-size: 0.8rem;
  /* color: #6f83ce; */

  /* for centered on page */
  /* left: 50%;
  transform: translate(-50%, 0); */

  margin: 0;
  text-align: left;

  /* transform: rotate(-90deg); */
  /* background-color: yellow; */
}

.footer{
  position: fixed;
  display: block;
  left: 40px;
  bottom: 20px;
  padding: 0;
}

.options{
  text-align: right;
  position: fixed;
  display: block;
  right: 40px;
  bottom: 20px;
  padding: 0;
}

.options a{
  color: pink;
  font-size: 0.75rem;
  padding-left: 2em;

}


.footer li{
  display: inline;
  margin: 0;
  margin-right: 1rem;
}

.footer p, .footer a{
  font-size: 0.75rem;
  /* color: #6f83ce; */
  color: gray;
  display: inline;
}

.slide-container{
  position: relative;
  /* padding-left: 195px; */

  /* width: 90%; */
  margin-left: 260px;

  width: min(1200px, calc(100vw - 340px));
  /* padding-right: 40px; */
  height: calc(100vh - 225px);

  /* background: yellow; */

  /* for centered on page */
  /* margin: 0 auto;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -55%); */
}

.slide-container.alt{
  position: fixed;
  top: 3rem;
  left: 40px;
  background-color: lightblue;
}

.slide{
  /* display: none; */
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.slide img{
  height: 100%;

  width: 100%;
  position: absolute;
  margin: 0 auto;

  object-fit: scale-down;
  object-position: top left;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;


  /* for centered on page */
  /* left: 50%;
  transform: translate(-50%, 0); */
}




.next{
  /* cursor: e-resize; */
  cursor: url('../fonts/sb-right-arrow.cur') 16 16, e-resize;
  /*background-color: green; */
}

.prev{
  height: 100%;
  width: 250px;
  /* background: hotpink; */
  position: absolute;
  z-index: 20;
  /* cursor: w-resize; */
  cursor: url('../fonts/sb-left-arrow.cur') 16 16, w-resize;


}

/* .next img{
  cursor: crosshair;
} */

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.4s;
  animation-name: fade;
  animation-duration: 0.4s;

  /* display: none; */
}

.visible{
  opacity: 1;
  z-index: 10;
  visibility: visible;
  /* display: block; */
}

.next{
  width: 100%;
  height: 100%;
  display: block;
  background-color: none;
  position: absolute;
}

.yo{
  position: fixed;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  z-index: -20;
  border: 10px solid #4ebbff;
  top: 0;
  left:0;
}

.divider{
  display: none;
  padding: 0;
  margin-right: 0;
}

.alt ul li.divider{
  display: block;
  height: 1.5rem;
}

.alt{
  display: block;
}

.alt .name{
  margin-bottom: 1.5rem;
}

.alt ul{
  display: block;
}

.alt ul li{
  display: block;
  margin-bottom: 0.2rem;
}

.alt ul li.extra-top{
  padding-top: 1.5rem;
  color: red;
}

html.bold{
  padding-top: 1rem;
  /* font-family: neue-haas-unica, sans-serif; */
}

html.bold.alt{
  padding-top: 2.5rem;
}

.header.bold{
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.header.bold .name{
  font-size: 1.1rem;
}

html.serif{
  font-family: plantin, sans-serif;
}
.serif.header{
  font-weight: 300;
}

.serif.header .name{
  font-weight: 300;
}



@media screen and (max-width: 1200px)
{
  .html{
    padding-right: 40px;
  }

  .name
  {
    /* display: block; */
    display: inline;
    margin-right: 2rem;

    /* margin-bottom: 0.5rem; */
  }

  .slide-container{
    margin-left: 0px;
    /* background: yellowgreen; */
    width: min(1200px, calc(100% - 40px));
    /* height: calc(100vh - 12rem); */
  }

  .textContent{
    max-width: 600px;
    font-size: 1rem;
    padding-left: 0px;
  }
}

@media screen and (max-width: 1100px) {
  .header li{
    font-size: 0.8rem;
    /* margin-left: 0.5em; */
    margin-right: 1em;
    /* text-align: center; */

  }

}


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

 html {
   /* background-color: lightgreen; */
   padding: 0.75rem;
   padding-top: 1rem;
   font-size: 16px;
 }

 h2{
   font-size: 0.625rem;
 }

 .name
 {
   display: block;
   width:100%;
   font-weight: 900;
   font-size: 1.25rem;
   padding-bottom: 0;
   margin-bottom: 0.75rem;
   text-align: left;
   /* background-color: yellow; */
 }

 .textContent{
   font-size: 0.8rem;
 }

 .header{
   margin-bottom: 2rem;
   line-height: 1.5;
 }

 .header li{
   display: inline-block;
   font-size: 0.75rem;
   /* margin-left: 0.5em; */
   margin-right: 1em;
   padding-right: 1em;
   border-right: 1px solid lightgray;
   /* text-align: center; */

 }

 .header li:last-child{
  border: none;
 }


 .header ul, .header p{
   /* margin: 0.1rem auto; */
   /* text-align: center; */
 }

 .slide-container{
   position: relative;


   width: 100%;
   max-width: 1000px;
   height: 45vh;

   /* for centered on page */
   margin: 0 auto;
 }

 .slide{
     /* display: none; */
     opacity: 0;
 }

 .prev{
   height: 100%;
   width: 50%;
 }

 .slide img{
   /* height: 100%; */
   /* padding: 0 40px; */
   width: 100%;
   height: 100%;
   position: absolute;
   margin: 0 auto;
   object-fit: scale-down;
   object-position: top center;

   /* for centered on page */
   left: 50%;
   transform: translate(-50%, 0);

 }

 .visible{
   opacity: 1;
 }

 .image-caption{
   position: absolute;
   bottom: -3rem;
   transform: translateY(100%);
   /* left: -4rem; */
   /* bottom: -2rem; */
   font-size: 0.6rem;
   /* color: #6f83ce; */

   /* for centered on page */
   /* left: 50%;
   transform: translate(-50%, 0); */

   margin: 0;
   text-align: left;
 }

 .footer{
   display: none;
 }
}

.storylink{
  color: gray;
  text-decoration: underline;
}

.storylink:hover{
  font-style: normal;
}