html{
  background-color: rgb(31,78,121);
}

body{
  position: relative;
  background-color: #f0f0f0;
  max-width: 1444px;
  margin: 0 auto;
}

footer,
nav {
  height: 2cm;
  left: 0;
  right: 0;
  z-index: 1030;

  display: flex;
  flex-flow: row nowrap; 
  justify-content: space-between;

  width: 100%;
  max-width: 1444px;
  min-height: 1cm;

  margin: 0 auto;

  background: rgba(226,229,241, .75);
  position: fixed;

  transition: background 1s ease-in-out;
  align-items: center;
}

footer {
  position: static;
  height: 2cm;
  justify-content: flex-end;
  align-items: flex-start;
  background: rgba(26,29,31, .75);
}

.nav-dark {
  background: rgba(26,29,31, .75);
}

.nav-dark > a {
  color: rgb(158,196,228);
}
.nav-dark > div > a {
  color: rgb(158,196,228);
}

.nav-inner {
  align-self: right;
  text-decoration: none;
  font-size: 120%;
}

.nav-element {
  display: flex; 
  flex-flow: column nowrap;
  justify-content: center;

  height: 100%;
  max-height: 2cm;
  margin: 0;
  margin-right: 15px;
  margin-left: 5px;
  padding: 0;
}

.logo-image {
}

address {
  display: flex; 
  flex-flow: column nowrap;

  align-items: flex-end;
  justify-content: flex-start;

  margin-top: 5px;
  margin-bottom: 5px;
}

address > a {
  display: block;
  font-family: 'Monda', sans-serif;
  text-decoration: none;
  line-height: 120%;

  color: rgb(158,196,228);
}

strong {
  font-weight: 500;
}

.hero {
  height: 72vw;
  max-height: 70vh;

  max-width: 1444px;

  background: url(images/path.jpg) no-repeat center;
  background-size: cover;
  margin-left: auto;

}

 a {
  font-family: 'Monda', sans-serif;
  color: rgb(31,78,121);

  transition: color 1s ease-in-out;
}


h1 {
  font-family: 'Monda', sans-serif;
  color: rgb(158,196,228);
  text-align: center;
}

h2 {
  width: 100%;
  max-width: 4in;

  font-family: 'Monda', sans-serif;
  text-align: left;

  margin-bottom: 10px;

  line-height: 1.25em;
  font-size: 1.5em;
}

p {
  font-family: 'Fira Sans', sans-serif;
  color: #1a1d1f;

  width: 100%;
  max-width: 4in;
  text-align: left;
  margin-top: 5px;
  
}

ul {
  list-style: none;
  width: 100%;
  max-width: 4in;
  padding: 0;
}

li {
  font-family: 'Fira Sans', sans-serif;
  color: #1a1d1f;

  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
  width: 100%;
  max-width: 4in;
}

section {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: column nowrap;

  width: 100%;
  max-width: 1444px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;

}

.chapter {
  margin-top: 30px;
}

.proposition{
  width: 60em;
  max-width: 80vw;
}

header {
  width: 100%;
}

#theory > header {
  background: url(images/woods.jpg) no-repeat bottom;
  background-position: center;
  background-size: cover;
}
#practice > header {
  background: url(images/woods2.jpg) no-repeat bottom;
  background-position: center;
  background-size: cover;
}
#details > header {
  background: url(images/medieval-castle.jpg) no-repeat bottom;
  background-position: center;
  background-size: cover;
}

.quote-container {
  display: flex; 
  flex-flow: column nowrap; 
  justify-content: center;
  align-items: center;

  height: 50%;
  height: calc(188px / 1.618033987);
  width: auto;

  background: rgba(226,229,241, .85);
  padding: 10px;
}

.quote-container > p {
  margin: 5px;
}

.title-container {
  display: flex; 
  flex-flow: column nowrap; 
  justify-content: center;
  align-items: center;
  flex: 1 0;

  height: auto;
  min-height: calc(188px / (1.618033987 * 1.618033987));
  width: auto;

  background: rgba(26,29,31, .75);
}


.logo-image {
  position: absolute;
  top: 0;
  height: 2cm;
  max-width: 100vw;
}

.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}

.toggle-fade-on-scroll {
  transition: opacity 1s ease-in-out;
}

.faded {
  opacity: 0.0;
}

@media (max-width: 480px) and (orientation: portrait) {
  .collapse {
    display: none;
  }
}