.mpContainer *,
.mpContainer *::before,
.mpContainer *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.mpContainer {
  font-family: 'Open Sans', sans-serif;
  background: #d0d0d0;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
  letter-spacing: .1rem;}  

/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mpContainer .intro {
  background: #c0b85a;
  padding: 2em 0; }

.mpContainer .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center; }

.mpContainer h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 2.5rem; }


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mpContainer .timeline ul {
  background: #d0d0d0;
  padding: 50px 0; }

.mpContainer .timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff; }

.mpContainer .timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit; }

.mpContainer .timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #003348; }

.mpContainer .timeline ul li div figure { display: block; max-width: 100%; margin: 1em 0; border-radius: .2em; overflow: hidden; }
.mpContainer .timeline ul li div figure img { max-width: 100%; display: block; }
.mpContainer .timeline ul li div figure figcaption { font-weight: 400; font-size: .75em; margin-top: 1em; }

.mpContainer .timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid; }

.mpContainer .timeline ul li:nth-child(odd) div {
  left: 45px; }

.mpContainer .timeline ul li:nth-child(odd) div::before {
  left: -15px; 
  border-width: 8px 16px 8px 0;
  border-color: transparent #003348 transparent transparent; }

.mpContainer .timeline ul li:nth-child(even) div {
  left: -439px; }

.mpContainer .timeline ul li:nth-child(even) div::before {
  right: -15px; border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #003348; }

.mpContainer time {
  display: block;
  font-size: 2.2rem;
  font-weight: normal;
  margin-bottom: 8px; }


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mpContainer .timeline ul li::after {
  transition: background .5s ease-in-out; }

.mpContainer .timeline ul li.in-view::after {
  background: #003348; }

.mpContainer .timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
  border-radius: .2em; }

.mpContainer .timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0); }

.mpContainer .timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0); }

.mpContainer .timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1; }

.mpContainer .mpGraph {
  width: 20em;
  height: 25em;
  margin: 2em auto;
  position: relative; }

.mpContainer .mp { left: 0; top: 0; position: absolute; user-select: none; -webkit-user-drag: none; -moz-user-select: none; }

.mpContainer #mp1 { z-index: 12; }

.mpContainer #mp2 { z-index: 11; }

.mpContainer #mp3 { z-index: 10; }

.mpContainer #mp4 { z-index: 9; }

.mpContainer #mp5 { z-index: 8; }

.mpContainer #mp6 { z-index: 7; }

.mpContainer #mp7 { z-index: 6; }

.mpContainer #mp8 { z-index: 5; }

.mpContainer #mp9 { z-index: 4; }

.mpContainer #mp10 { z-index: 3; }

.mpContainer #mp11 { z-index: 2; }

.mpContainer #mp12 { z-index: 1; }

.mpContainer .mpGraphMenu {
  position: relative;
  width: 16.9em;
  overflow: hidden;
  margin: 1em auto;
  height: 5.6em;
  color: black; }
  
.mpContainer .mpGraphMenu a { text-decoration: none; color: black; }

.mpContainer .mpGraphMenu a:hover { text-decoration: none; color: black; }

.mpContainer .mpDisplay { display: block; width: 10.5em; height: 5.8em; overflow: hidden; margin: 0 auto; }

.mpContainer .mpGraphMenu .mpDisplay ul {
  display: block;
  width: 102em;
  padding: 0em;
  max-height: 6em !important;
  margin: 0 auto;
  text-align: center; }

.mpContainer .mpGraphMenu .mpDisplay ul:before {
  content: '';
  clear: both;
  display: table; }

.mpContainer .mpGraphMenu ul li {
  font-size:3em;
  display: block;
  width: 3.5em;
  line-height: 1em;
  font-weight: normal;
  user-select: none; }

.mpContainer .mpGraphMenu ul li span {
  clear: both;
  display: block;
  font-weight: bold;
  font-size: .8em; }

.mpContainer .mpLeft, .mpContainer .mpRight {
  position: absolute;
  display: block;
  margin: 0;
  width: 1.28em;
  padding: .4em 0 0 .4em; }

.mpContainer .mpGraphMenu a { transition: color .2s; user-select: none; }

.mpContainer .mpGraphMenu a:hover { color: #fcfc00; }

.mpContainer .mpLeft {
  bottom: 0;
  left: 0;
  padding: .4em 0 0 .4em;
  display: none; }

.mpContainer .mpRight {
  bottom: 0;
  right: 0;
  padding: .4em .4em 0 0; }

.mpContainer .mpGraphLabel {
  position: absolute;
  right: 5%;
  top: 50%; }

.mpContainer .mpGraphLabel ul {
  width: 16.1em; margin: 0 auto; padding: 1em; text-align: left; }

.mpContainer .mpGraphLabel ul li {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  color: gray;
  list-style: none;
  display: block;
  margin-bottom: .25em; }
.mpContainer .mpBooks { font-size: 100%; padding: 1rem 10rem; text-align: center; }
.mpContainer .mpBook {
    position: relative;
    width: 15em;
    height: 20em;
    margin: 2em auto;
    margin-right: .5em;
    text-align: center;
    padding: 2em 2em 2em 2.5em;
    box-shadow:0 0 .3em .3em rgba(0,0,0,.25) inset, 0 1em 1em rgba(0,0,0,.25);
    border-radius: .4em;
    font-family: 'EB Garamond', serif;
    user-select: none;
    display: inline-block;
    z-index: 30; }
.mpContainer .mpBook h2 {
    color: rgba(250, 231, 124,0.9);
    text-shadow: 0 0 .3em rgba(0, 0, 0,.9);
    font-size: 1.6em;
    position: absolute;
    top: 1em;
    left: 1em;
    right: .75em;
    text-align: center;
    margin: 1em auto 1em;
    padding-bottom: .8em;
    z-index: 35;
    border-bottom: double .15em rgba(255,217,0,.7); }
.mpContainer .mpBook .author {
    color: rgba(250, 231, 124, 0.9);
    text-shadow: 0 0 .3em rgba(0, 0, 0,.9);
    font-size: 1em;
    font-weight: 400;
    font-style: italic;
    left: .75em;
    right: 0;
    display: inline;
    text-align: center;
    position: absolute;
    bottom: 2em;
    z-index: 35; }
.mpContainer .mpDescription { display: block; position: absolute; top: 101%; left: 0; text-align: left; font-size: .8em; padding: 1em; font-family: 'Open Sans', sans-serif; font-size: .5em; color: gray; background-color: rgba(255,255,255,.5); border-radius: .2em; line-height: initial; }    
.mpContainer .mpBook::before {
    position: absolute;
    display: block;
    border-left: solid rgba(0,0,0,.5) .3em;
    content: '';
    width: 13em;
    height: 19.5em;
    top: .25em;
    left: .4em;
    filter: blur(.1em);
    z-index: 20; }
.mpContainer .mpBook::after {
    position: absolute;
    display: block;
    border: double .25em rgba(255, 217, 0, 0.5);
    filter: blur(.02em);
    filter:drop-shadow(.1em .1em .1em white);
    border-radius: .4em;
    content: '';
    width: 13.5em;
    height: 19em;
    top: .5em;
    left: 1em;
    z-index: 21; }
.mpContainer .mpBook:nth-child(1) { background-image: url('../img/tx01.jpg'); }
.mpContainer .mpBook:nth-child(2) { background-image: url('../img/tx02.jpg'); }
.mpContainer .mpBook:nth-child(3) { background-image: url('../img/tx04.jpg'); }
.mpContainer .mpBook:nth-child(4) { background-image: url('../img/tx05.jpg'); }
.mpContainer .mpBook:nth-child(5) { background-image: url('../img/tx06.jpg'); }
.mpContainer .mpBook:nth-child(6) { background-image: url('../img/tx03.jpg'); }

.mpContainer .mpGraphLabel ul li:nth-child(1) span { color: white; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }

.mpContainer .mpGraphLabel ul li:nth-child(2) span { color: #fcfc00; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }

.mpContainer .mpGraphLabel ul li:nth-child(3) span { color: #fbcf7c; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }

.mpContainer .mpGraphLabel ul li:nth-child(4) span { color: #e39500; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }

.mpContainer .mpGraphLabel ul li:nth-child(5) span { color: #e20000; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }

.mpContainer .mpGraphLabel ul li:nth-child(6) span { color: #730000; text-shadow: 2px 2px 2px rgba(0,0,0,.2) }
  

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .mpBooks * { font-size: 150%; }
  .mpContainer .mpBooks { font-size: 100%; padding: 0; text-align: center; }    
  .mpContainer .timeline ul li div {
    width: 250px; }
  .mpContainer .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/ }
  .mpContainer .mpGraphLabel { clear: both; position: relative; width: 30em; margin: 0 auto; right: initial; top: 0; }
  .mpContainer .mpGraphLabel ul { margin: 0 auto; }
  .mpContainer .map {
    width: 100%; }
  .mpBooks p { margin-top: 2.8em; }
   }

@media screen and (max-width: 600px) {
  .mpContainer .mpBooks { font-size: 100%; padding: 0; text-align: center; }  
  .mpContainer .timeline ul li { margin-left: 20px; }
  .mpContainer .timeline ul li div { width: calc(100vw - 91px); } 
  .mpContainer .timeline ul li:nth-child(even) div { left: 45px; }
  .mpContainer .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #003348 transparent transparent; } }
@media screen and (min-width: 901px) {
  .mpContainer .mpBook .mpDescription {
    display: block;
    position: absolute;
    z-index: 35;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: left;
    font-size: .9em;
    padding: 8em 2em 2em;
    font-family: 'Open Sans', sans-serif;
    color: silver;
    background-color: rgba(0,0,0,.7);
    border-radius: .3em; line-height: initial; }
.mpContainer .mpBook .mpDescription { display: none; }
.mpContainer .mpBook:hover .mpDescription { display: block; }
}