/* --------------------------------------------------
   reset
-------------------------------------------------- */

* { 
  box-sizing:border-box;
  outline:0;
}

html { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection { background:black; color:white; }
::-moz-selection { background:black; color:white; }







/* --------------------------------------------------
   font import
-------------------------------------------------- */

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-italic.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-700italic.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-900 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v15-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-900.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-900italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v15-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-900italic.svg#Poppins') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Pricedown';
    src: url('../fonts/pricedown_bl-webfont.woff2') format('woff2'),
         url('../fonts/pricedown_bl-webfont.woff') format('woff'),
         url('../fonts/pricedown_bl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}








/* --------------------------------------------------
   typography
-------------------------------------------------- */

html {
  font-size:15px;
}

  @media only screen and (min-width :  600px) { html { font-size:16px; } }
  @media only screen and (min-width :  800px) { html { font-size:17px; } }
  @media only screen and (min-width : 1000px) { html { font-size:18px; } }
  @media only screen and (min-width : 1200px) { html { font-size:19px; } }

body {
  font-family:'Poppins','Roboto','Arial',sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:#333;
}

h1,h2,h3 {
  line-height: 1.1;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

h1 {
  font-size:3rem;
  font-weight:900;
  margin-bottom:3rem;
}

  @media only screen and (min-width :  600px) { h1 { font-size:4rem; } }

h2 {
    font-size:2.5rem;
    font-weight:900;
    margin-bottom: 3rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

p {
  margin:1.6rem 0;
}

p:first-child {
  margin-top:0;
}

p:last-child {
  margin-bottom:0;
}

a {
  color: rgb(255, 174, 0);
}

strong {
    font-weight:700;
}

.black {
    font-weight:900;
}

em {
  font-style:italic;
}

.small {
  font-size:80%;
}

.button {
  display: inline-block;
  font-weight:900;
  background: transparent;
  border-style: solid;
  border-width: 3px;
  border-radius: .5rem;
  padding:1rem;
  font-size:1rem;
  color:white;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  margin-top: 2rem;
}

.button:hover {
  background: rgba(0,0,0,.25);
}




/* --------------------------------------------------
   animations
-------------------------------------------------- */

@keyframes plainFadeIn {
    from {opacity: 0; }
    to { opacity: 1; }
}









/* --------------------------------------------------
   header
-------------------------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.75);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.5rem;
  z-index: 2;
}

  .header-logo a {
    color: white;
    text-decoration: none;
    font-size: .8rem;
  }

    .header-logo a strong {
      font-weight: 900;
    }

  .header a:hover {
    color: rgb(255, 174, 0);
  }

  .header-menubutton {

  }

  .header-nav {
    display: flex;
  }

    .header-nav li {
      padding: 0 .5rem;
    }





/* --------------------------------------------------
   menu overlay
-------------------------------------------------- */

.menuoverlay {
  position:fixed;
  left:0; right:0;
  top:0; bottom:0;
  background-color:rgba(0,0,0,.75);
  z-index:1;
  display:none;
}

.menuoverlay.active {
  display:flex;
  animation: plainFadeIn .6s ease;
  animation-fill-mode: both;
}

  .menuoverlay-nav {
    margin:auto;
    text-align: center;
  }

    .menuoverlay-nav a {
      color:white;
      opacity:.8;
      transition:all .3s ease;
      font-weight: 900;
      text-decoration: none;
      padding: .5rem;
      font-size:1.5rem;
    }

    .menuoverlay-nav a:hover {
      opacity:1;
    }







/* --------------------------------------------------
   main
-------------------------------------------------- */


main {

}

main.pagefront {
}

  .chapter-cover {
    background-size: cover;
    background-position: right;
    height: 100vh;
    padding: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

    .chapter-cover h1 {
      color: white;
    }

      .chapter-cover h1 span {
        /*background: rgba(0,0,0,.75);*/
      }

  .chapter-content {
    background: white;
    padding: 6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    .chapter-content-text,
    .chapter-content-images {
      padding: 1rem;
    }

    .chapter-content-images-portrait {
      display: flex;
    }

      .chapter-content-images-portrait img {
        width: 50%;
      }



      .chapter-content-images img {
        padding: 1rem;
        display: block;
        max-width: 80%;
        height: auto;
        max-height: 30rem;
        margin: 0 auto;
      }

  @media only screen and (min-width :  900px) { 
    .chapter-content { flex-direction: row; width:100%; padding: 9rem 1rem; } 
    .chapter-content-text { flex-basis:50%; }
    .chapter-content-images { flex-basis:50%; }
    .chapter-content-images img { max-width: 70%; }
    .chapter-content-images-portrait { display: block; }
    .chapter-content-images-portrait img { width: auto; }
  }

  @media only screen and (min-width : 1400px) { 
    .chapter-content { padding: 12rem 1rem; } 
  }







/* --------------------------------------------------
   footer
-------------------------------------------------- */

footer {
  background: black;
  padding: 2rem;
  text-align: center;
  font-size: .8rem;
  color: white;
}

  footer strong {
    font-size: 120%;
  }