/*
 * responsive.css
 */

body {
  font-family: 'Playfair Display', serif;
  margin: 0px;
  padding: 0px;
}

.filler {
  min-height: 5em;
}

p {
  line-height: 160%;
}

.date {
  color: gray;
  margin-left: 20px;
}

.svenska {
  background: white;
}

@media print {
  .title-wide {
    display: none !important;
  }
}

@media screen and (min-height: 900px) {
  .content {
    min-height: calc(100vh - 272px) ;
  }
}

@media screen and (min-width: 1100px) {
  .svenska, .engelska {
    width: 500px;
  }

  .footer, .header {
    width: 980px;
  }

  .img-container {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1099px) {
  .svenska, .engelska {
    width: 45%;
  }

  .footer, .header {
    width: 88%;
  }

  .img-container {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 601px) {
  .title-mobile {
    display: none;
  }

  body {
    background-image: -webkit-gradient(linear,
      left top,
      right top,
      color-stop(0, #fff),
      color-stop(50%, #fff),
      color-stop(50%, #f5f5ff),
      color-stop(100%, #f5f5ff)
    );
    background-image: -webkit-linear-gradient(
      left,
      #fff,
      #fff 50%,
      #f5f5ff 50%,
      #f5f5ff 100%
    );
    background-image: -moz-linear-gradient(
      left,
      #fff,
      #fff 50%,
      #f5f5ff 50%,
      #f5f5ff 100%
    );
    background-image: -ms-linear-gradient(
      left,
      #fff,
      #fff 50%,
      #f5f5ff 50%,
      #f5f5ff 100%
    );
    background-image: -o-linear-gradient(
      left,
      #fff,
      #fff 50%,
      #f5f5ff 50%,
      #f5f5ff 100%
    );
  }

  .row {
    display: table;
    width: 100%;
  }

  .row div {
    display: table-cell;
  }

  .row .padding-left {
    width: auto;
  }

  .row .padding-right {
    width: auto;
  }

  .header {
    margin-bottom: 20px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }

  .footer {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
  }

  .nav-left, .nav-right {
    min-width: 8em;
  }

  .img-container {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 600px) {
  .svenska {
    float: left;
    clear: both;
    width: 100%;
  }

  .engelska {
    float: left;
    width: 100%;
    clear: both;
    background: #f5f5ff;
  }

  .title-wide {
    display: none;
  }

  .img-container {
    background: #eeeef4 !important;
  }

  img {
    padding: 25px;
  }

  .row .padding-left {
    display: none;
  }

  .row .padding-right {
    display: none;
  }

  .nav-left, .nav-right {
    min-width: 10%;
  }
}

.engelska, .svenska {
  margin: 0px;
}

.svenska p, .engelska p {
  padding: 10px 20px 10px 20px;
  margin: 0px;
}

.svenska h2, .engelska h2, .svenska h3, .engelska h3 {
  padding: 0px 20px 0px 20px;
  margin: 15px 0px 0px 0px;
}

.svenska .date, .engelska .date {
  padding: 0px 20px 20px 20px;
}

.subtitle-mobile h3 {
  padding: 10px 20px 10px 20px !important;
  margin: 0px !important;
  background: #eeeef4;
  clear: both;
}

h1 {
  font-weight: 100;
  font-style: italic;
  padding: 20px 0px 25px 0px;
  font-size: 2.5em;
  margin: 0px;
}

h2 {
  font-size: 1.6em;
  margin-left: 20px;
  margin-right: 20px;
}

h3 {
  margin-left: 20px;
  margin-right: 20px;
}

p {
  font-size: 1.1em;
  margin-top: 0em;
}

.engelska h1 {
  text-align: right;
}

h1 > a, h2 > a {
  color: black;
  text-decoration: none;
}

h1 > a:hover, h2 > a:hover {
  color: darkblue;
}

.nav {
  margin-top: 2em;
}

.nav.svenska {
  text-align: right;
}

.img-container {
  text-align: center;
  clear: both;
  font-size: 0px;
}

img {
  background: #eeeef4;
  max-width: 500px;
  width: 80%;
  border-radius: 25px;
}

.header, .footer {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background: #eeeef4;
}

.footer {
  margin-top: 20px;
  padding-bottom: 20px;
  clear: both;
}

p.tagline {
  font-style: italic;
  padding: 20px 20px 0px 20px;
}

.nav-link-container p {
  padding: 20px 20px 0px 20px;
}

.nav-link-container {
  display: table;
  background: #eeeef4;
  width: 100%;
}

.nav-link-container p {
  display: table-cell;
}

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

.nav-right {
  text-align: right;
}

.nav-center {
  width: auto;
}