/* Basic element styling */

/* Sizes
.col-xs: width < 768px
.col-sm: 768px < width < 992px
.col-md: 992px < width < 1200px
.col-lg: width > 1200px
*/

html {
  background: #fff6de;  /* "canvas""  */
  font-size: 16px; /* Wat hier staat = 1rem  ---- i.e. de standaard voor de gehele site  */
  margin: 0 auto;
}

body {
  font-family: Optima, Arial, Helvetica, Sans-serif;
  color: #000000;
  text-align: center;
  width: 100%;
  font-size: 16px;  /* Wat hier staat = 1rem  ---- i.e. de standaard voor de gehele site  */
  margin: 0 auto;
  background: #fffff9;
  min-height: 500px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Optima, Arial, Helvetica, sans-serif;
  color: #820A00;
  text-decoration: none;
  margin: 0;
}

h1 {
  font-size: 2rem;
  padding: 2.5rem 2rem 2rem 2rem;
  letter-spacing: 0em;
}

h2 {
  font-size: 1.5rem;
  padding: 0px 2rem 0.5rem 2rem;
  letter-spacing: -0.05em;
}

h3  {
  font-size: 1.25rem;
  font-style: italic;
  padding: 0px 2rem 0.5rem 2rem;
  letter-spacing: 0em;
  line-height: 1.25rem;
}

h5 {
  font-size: 1.15rem;
  font-weight: bold;
  padding: 2rem 2rem 0.5rem 0rem;
  letter-spacing: 0em;
  line-height: 1.15rem;
}

p {
  font-family: Optima, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding: 0px 30px 20px 30px;
  margin: 0px 0px 0px 0px;
  line-height: 20px;
}

header {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

header img {
  max-width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}

nav {
  background: #72090A;     /* #9C2511  */
}

footer {
  margin-top: 2rem;
  height: 2rem;
}

a:link {
  color: #000000;
  font-weight: normal;
  text-decoration: underline;
}

a:visited {
  color: #000000;
  font-weight: normal;
  text-decoration: underline;
}

a:hover {
  color: #820a00;
  font-weight: normal;
  text-decoration: underline;
}

a:active {
  color: #fff6de;
  font-weight: normal;
  text-decoration: underline;
}

/* Helper classes for text and layout */

.bold {
  font-weight: 700;
  color: #820A00;
}

.italic {
  font-style: italic;
}

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

.centered {
  text-align: left;
}

.centered_footer {
  text-align: center;
  font-size: 0.8rem;
}

.align-justify {
  text-align: justify;
}

.leader {
  padding-top: 20px;
}

.bottom-row {
  margin-top: 40px;
}

.strip-top-whitespace {
  margin-top: 0;
  padding-top: 0;
}

.inline-block {
  display: inline-block;
}

/* Bootstrap overrides */

.container, .row {
  max-width: 960px;
}

.row {
  padding-bottom: 1rem;
}

/* Navigation bar */

.navbar {
  border-radius: 0px;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: middle;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-toggle {
  padding-top: 0;
  padding-bottom: 0;
}

.menu {
  display: block;
  list-style: none;
  padding: 0;
}

.menu-item {
  display: block;
  font-size: 1.2rem;  /*grootte font in navigatie-menu*/
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.menu a:link, .menu a:visited {
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

.menu a:hover {
  color: #fff6de;
  font-weight: normal;
  text-decoration: none;
}

.menu a:active {
  color: #820a00;
  font-weight: normal;
  text-decoration: none;
}

.menu li {
  display: inline-block;
}

.navbar-header button {
  color: #fff;
  font-size: 1.5rem;
  border: 1px solid #fff;
}

/* Homepage-specific styling */

.hoofd-hart {
  margin: 0px 40px 0px 30px
}

/* Sessies-page specific styling */
.email-return {
  display: none;
}

/* Paul-page specific styling */

.paul-image {
  margin: 0 1rem 1rem 0;
}

.volwassene-kind-image {
  max-width: 200px;
}

.quote {
  padding-right: 0;
}

/* Contact-page specific styling */

.contact-details p {
  padding: 0;
}


/* Media queries for different screen sizes */

@media(min-width: 500px) {

  html, body {
    font-size: 14px;   /* 18px ??  */
  }
}

@media(min-width: 768px) {

  html, body {
    font-size: 16px;
  }

  .email-return {
    display: inline-block;
  }

  .menu-item {
    display: inline-block;
  }

  .menu {
    display: inline-block;
    margin: 0 auto;
  }

  .menu a:not(:last-child):after {
    content: "|";
    padding-left: 12px;
    padding-right: 10px;
  }

}

@media(min-width: 960px) {

  html, body {
    width: 960px;
  }

  header {
    max-height: 175px;
  }
}