@font-face {
  font-family: 'misans-thin';
  src:url('https://cdn.thetrash.eu.org/basic/font/MiSans-ExtraLight.ttf');
  font-weight: normal;
  font-style: normal;
  }
*{ 
  margin: 0; 
  padding: 0; 
} 
body { 
  background: #f3f4f4; 
  font-family: "misans-thin";
  overflow: hidden;     
} 
.copy{
  text-align: center;
  font-size: 10px;
  font
}
.mr2 { 
  margin-right: 0.1rem; 
} 
.ml2 { 
  margin-left: 0.1rem; 
} 
.article-title { 
  font-size: 2.7rem; 
  line-height: 1;
  text-align: center; 
  letter-spacing: 0.025em; 
  transition: font-size 0.45s ease-in-out, color 0.3s ease-out; 
} 
.header-image { 
  height: 220px; 
  background-image: url(../img/bg.jpg); 
  background-size: cover; 
  background-position: center; 
  margin-bottom: 3rem; 
  position: relative; 
  transition: all 0.45s ease-in-out; 
} 
.overlay { 
  transition: all 0.3s ease-in-out; 
  background: ; 
  opacity: 0; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
} 
.title-wrap { 
  transform: translateY(0); 
  transition: transform 0.45s ease-in; 
} 
.drop-cap { 
  font-size: 55px; 
  line-height: 28px; 
} 
.wrapper { 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.book__cover-exerpt { 
  color: #6a6a6a; 
  padding: 1rem 1.5rem; 
  line-height: 1.7; 
  text-align: center; 
  opacity: 1; 
  max-width: 370px; 
  margin: 0 auto; 
  display: block; 
  transition: all 0.25s ease-in-out; 
} 
 
.book__cover { 
  height: 100%; 
  width: 100%; 
} 
.book__content { 
  text-align: justify; 
  word-wrap: break-word; 
  font-size: 1.33rem; 
  opacity: 0; 
  transition: all 1.5s ease-in-out; 
  max-width: 1080px; 
  margin: 0 auto 6rem; 
  padding: 0 2rem; 
} 
.book__content p { 
  line-height: 1.3; 
  color: #3a3a3a; 
  margin-bottom: 1.5rem; 
} 
.book { 
  overflow: hidden; 
  background: white; 
  height: 580px; 
  width: 400px; 
  box-shadow: 0 20px 30px -10px #ccc; 
  transition: all 0.5s ease-in-out; 
} 
.book:hover { 
  box-shadow: 0 6px 50px 10px #cfcfcf; 
} 
.book--expanded { 
  height: 100%; 
  width: 100%; 
  overflow-y: scroll; 
} 
.book--expanded .overlay { 
  opacity: 0.95; 
} 
.book--expanded .article-title { 
  color: white; 
  font-size: 64px; 
  letter-spacing: 0.05em; 
} 
.book--expanded .title-wrap { 
  transform: translateY(-300px); 
  color: white; 
} 
.book--expanded .book__cover-exerpt { 
  opacity: 0; 
} 
.book--expanded .book__cover { 
  height: 460px; 
  margin-bottom: 6rem; 
} 
.book--expanded .book__content { 
  opacity: 1; 
} 
.book--expanded .header-image { 
  height: 100%; 
} 
span{ 
   margin-left: -35px; 
} 
span .fa { 
   font-size: 17px; 
   margin-left: 20px; 
}