/* Globals */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  background-color: #c1c9b0;
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
tbody {
}
tbody tr {
}
tbody tr:nth-child(2n) {
  /* background-color: color(var(--color-background) shade(5%)); */
}
tbody td {
  /* border: 1px solid var(--color-table-border); */
}
td,
th {
  padding: 3px 6px;
  white-space: nowrap;
}
thead th,
tfoot td {
  /* background-color: var(--color-table-header-background);
     border: 1px solid var(--color-table-header-background);
     color: var(--color-table-header-text); */
  font-weight: 500;
}
p,
ol,
ul,
dl,
table,
pre,
hr {
  list-style: none;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 0;
}
p {
  line-height: 1.625em;
}
h2,
h3,
h4,
h5 {
  color: #202416;
  font-weight: 500;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 0;
}
h2 {
  font-size: 1.2857em;
}
h3 {
  font-size: 1.1429em;
}
h3 button {
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  padding: 4px 8px;
}
h4,
h5 {
  font-size: 1em;
}
b,
strong {
  font-weight: 500;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  color: rgb(73, 92, 1);
}
a:link,
a:visited {
  color: #799a02;
}
a:active,
a:focus,
a img {
  border: 0;
  outline: none;
}
body {
  -ms-flex-line-pack: center;
  align-content: center;
  background: #c1c9b0 url(../images/background-rotated.png) no-repeat
    calc(50% + 320px) -148px;
  color: #799a02;
  display: -ms-flexbox;
  display: flex;
  font-family: "OpenSans-Semibold", sans-serif;
  min-width: 1150px;
  overflow-x: hidden;
  padding: 0;
}
body::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  display: block;
  height: 230px;
  position: absolute;
  width: 100%;
}
iframe {
  max-width: 100%;
}
article {
  margin: 0 auto;
  max-width: 1150px;
  position: relative;
}
article .logo {
  display: block;
  left: -20px;
  position: absolute;
  top: -70px;
  transform: scale(0.5);
}
article nav {
  left: -36px;
  position: absolute;
  top: 260px;
}
article nav svg {
  transform: rotate(-15deg);
}
article nav ul li.active a {
  border-bottom: 3px solid #799a02;
}
article main {
  display: block;
  margin: 140px 100px 50px 230px;
}
a.logo {
  color: #202416;
}
a.logo .line1,
a.logo .line2 {
  display: block;
  font-family: "DINCondensedBold", monospace;
  font-size: 29px;
  left: -13px;
  letter-spacing: -0.5px;
  line-height: 31px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 433px;
}
a.logo .line1 {
  top: 269px;
}
a.logo .line2 {
  top: 311px;
}
nav {
  font-family: "DINCondensedBold", sans-serif;
  font-size: 26px;
  left: -11px;
  position: absolute;
  top: 74px;
}
nav li {
  position: absolute;
}
nav li.rallye {
  left: 102px;
  top: 36px;
}
nav li.logbuch {
  left: 39px;
  top: 150px;
}
nav li.auto {
  left: 73px;
  top: 245px;
}
nav li.team {
  left: 149px;
  top: 368px;
}
nav li.route {
  left: 149px;
  top: 490px;
}
nav li a {
  color: #799a02;
}
nav li a:hover {
  border-bottom: 3px solid #799a02;
}
main {
  color: #202416;
  font-family: "OpenSans-Regular", sans-serif;
  font-size: 16px;
  text-align: justify;
}
main h1,
main h2,
main h3 {
  color: #202416;
  font-family: "TrashHand", sans-serif;
  font-size: 50px;
  font-weight: normal;
  margin: 0 70px 40px 0;
  text-align: center;
}
main h2 {
  font-size: 40px;
  margin: 0 0 10px;
}
main h3 {
  font-size: 30px;
  margin: 40px 0 10px;
  text-align: left;
}
main img {
  box-shadow: 0 2px 15px 0 #637047;
  max-width: 100%;
}
main blockquote {
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-style: 17px;
  margin: 40px;
  text-align: center;
}
main blockquote a {
  border-bottom: 1px solid #799a02;
}
main ol,
main ul {
  margin: 20px 0;
}
main ol li,
main ul li {
  list-style-position: outside;
  list-style-type: disc;
  margin-bottom: 8px;
  margin-left: 2em;
}
main strong {
  font-weight: bold;
}
main em {
  font-style: italic;
}
main .newsletter {
  margin: 40px auto;
  text-align: center;
  width: 330px;
}
main .newsletter p {
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-style: 17px;
}
main .newsletter button {
  background: #adc178;
  border: none;
  border-radius: 3px;
  color: white;
  display: block;
  font-family: "OpenSans-Semibold", sans-serif;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  margin: 30px auto 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  width: 240px;
}
main .newsletter button:hover {
  background: #799a02;
  cursor: pointer;
}
main figure {
  margin: 30px auto;
}
main figure figcaption {
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-size: 14px;
  margin: 10px 0;
  text-align: center;
}
main article.post {
  display: block;
}
main article.post header {
  margin-bottom: 20px;
}
main article.post header span.date {
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-size: 14px;
  margin: 10px 0;
}
main div.table {
  max-width: 100%;
}
main table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  table-layout: fixed;
}
main table caption {
  caption-side: bottom;
  color: #799a02;
  font-family: "OpenSans-Italic", sans-serif;
  font-size: 14px;
  margin: 10px 0;
  text-align: center;
}
main table td,
main table th {
  border: 1px solid #799a02;
  padding: 6px 8px 4px;
  white-space: inherit;
}
main table th {
  background: #799a02;
  color: white;
  font-weight: bold;
}
main .mask1,
main .mask2,
main .mask3,
main .mask4,
main .mask5 {
  clear: left;
  display: block;
  float: left;
}
main .mask1 {
  height: 116px;
  width: 50px;
}
main .mask2 {
  height: 26px;
  width: 39px;
}
main .mask3 {
  height: 26px;
  width: 29px;
}
main .mask4 {
  height: 26px;
  width: 19px;
}
main .mask5 {
  height: 26px;
  width: 9px;
}
footer {
  margin-bottom: 30px;
  margin-top: 180px;
  text-align: center;

  /* &::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    content: '';
    display: block;
    height: var(--header-height);
    position: absolute;
    left: -1000px;
    right: -1000px;
    bottom: 0;
  } */
}
footer ul {
  display: block;
  margin-bottom: 0;
  position: relative;
}
footer ul li {
  display: inline-block;
}
footer ul li a {
  color: #799a02;
  display: inline-block;
  font-family: "OpenSans-Italic", sans-serif;
  font-size: 16px;
  margin: 0 30px;
  text-decoration: none;
}
body.frontpage {
  background: #c1c9b0 url(../images/background.png) no-repeat calc(50% + 483px) -288px;
}
body.frontpage article {
  text-align: center;
}
body.frontpage article main {
  margin-top: 100px;
}
body.frontpage article .logo {
  display: inline-block;
  left: 70px;
  position: relative;
  top: 70px;
  transform: none;
}
body.frontpage article .logo img {
  border: none;
  box-shadow: none;
  margin: 0;
}
body.frontpage nav {
  left: 144px;
  top: 61px;
}
body.frontpage nav svg {
  transform: none;
}
body.frontpage nav li {
}
body.frontpage nav li.rallye {
  left: 149px;
  top: 36px;
}
body.frontpage nav li.logbuch {
  left: 56px;
  top: 150px;
}
body.frontpage nav li.auto {
  left: 48px;
  top: 273px;
}
body.frontpage nav li.team {
  left: 115px;
  top: 358px;
}
body.frontpage nav li.route {
  left: 88px;
  top: 450px;
}
.pagination {
  margin-top: 1em;
  text-align: center;
}
.pagination a.previous,
.pagination a.next {
  background: #e4ead4;
  border: 1px solid #9bb168;
  display: inline-block;
  margin: 10px;
  padding: 3px 10px;
}
@media (max-width: 1150px) {
  body,
  body.frontpage {
    background: #c1c9b0 url(../images/background.png) no-repeat -65px -148px;
    min-width: 680px;
  }
  body main,
  body.frontpage main {
  }
  body main img,
  body.frontpage main img {
    max-width: 100%;
  }
}
@media (max-width: 980px) {
  body.frontpage {
  }
  body.frontpage article {
  }
  body.frontpage article .logo {
    top: 330px;
  }
  body.frontpage article main {
    margin-top: 360px;
  }
}
@media (max-width: 680px) {
  body,
  body.frontpage {
    background: #c1c9b0 url(../images/background.png) no-repeat
      calc(50% + 573px) 20px;
    background-size: 1500px;
    min-width: 0;
    min-width: 320px;
  }
  body article,
  body.frontpage article {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
  }
  body article .logo,
  body.frontpage article .logo {
    left: auto;
    position: absolute;
    top: -40px;
    transform: scale(0.7);
  }
  body article nav,
  body.frontpage article nav {
    left: auto;
    max-width: calc(100% + 16px);
    overflow: hidden;
    top: 243px;
  }
  body article nav svg,
  body.frontpage article nav svg {
    transform: scale(0.8);
  }
  body article nav li,
  body.frontpage article nav li {
  }
  body article nav li.rallye,
  body.frontpage article nav li.rallye {
    left: 127px;
    top: 110px;
  }
  body article nav li.logbuch,
  body.frontpage article nav li.logbuch {
    left: 82px;
    top: 213px;
  }
  body article nav li.auto,
  body.frontpage article nav li.auto {
    left: 144px;
    top: 300px;
  }
  body article nav li.team,
  body.frontpage article nav li.team {
    left: 113px;
    top: 398px;
  }
  body article nav li.route,
  body.frontpage article nav li.route {
    left: 2px;
    top: 343px;
  }
  body article main,
  body.frontpage article main {
    margin: 0 8%;
    position: relative;
    top: 710px;
  }
  body article main h1,
  body.frontpage article main h1 {
    margin: 0 0 20px;
  }
  body article main img,
  body.frontpage article main img {
    margin-left: -8%;
    max-width: 116%;
  }
  body article main .mask1,
  body article main .mask2,
  body article main .mask3,
  body article main .mask4,
  body article main .mask5,
  body.frontpage article main .mask1,
  body.frontpage article main .mask2,
  body.frontpage article main .mask3,
  body.frontpage article main .mask4,
  body.frontpage article main .mask5 {
    display: none;
  }
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}
.pswp * {
  box-sizing: border-box;
}
.pswp img {
  max-width: none;
}
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
  display: block;
}
.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transform-origin: left top;
  /* for open/close transition */
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}
.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}
.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}
/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}
/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222;
}
.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}
/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #ccc;
}
.pswp__error-msg a {
  color: #ccc;
  text-decoration: underline;
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none;
}
.pswp__button:focus,
.pswp__button:hover {
  opacity: 1;
}
.pswp__button:active {
  outline: none;
  opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}
@media (-webkit-min-device-pixel-ratio: 1.1),
  (-webkit-min-device-pixel-ratio: 1.09375),
  (min-resolution: 105dpi),
  (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(default-skin.svg);
  }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}
.pswp__button--share {
  background-position: -44px -44px;
}
.pswp__button--fs {
  display: none;
}
.pswp--supports-fs .pswp__button--fs {
  display: block;
}
.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}
.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}
.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}
.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}
/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}
.pswp__button--arrow--left {
  left: 0;
}
.pswp__button--arrow--right {
  right: 0;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: "";
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}
.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}
.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}
/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.pswp__share-modal--hidden {
  display: none;
}
.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #fff;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}
.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}
.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}
.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}
.pswp__share-modal--fade-in {
  opacity: 1;
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
  transform: translateY(0);
}
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}
a.pswp__share--facebook:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #fff;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}
a.pswp__share--facebook:hover {
  background: #3e5c9a;
  color: #fff;
}
a.pswp__share--facebook:hover:before {
  border-bottom-color: #3e5c9a;
}
a.pswp__share--twitter:hover {
  background: #55acee;
  color: #fff;
}
a.pswp__share--pinterest:hover {
  background: #ccc;
  color: #ce272d;
}
a.pswp__share--download:hover {
  background: #ddd;
}
/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #fff;
  opacity: 0.75;
  padding: 0 10px;
}
/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}
.pswp__caption small {
  font-size: 11px;
  color: #bbb;
}
.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #ccc;
}
.pswp__caption--empty {
  display: none;
}
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}
/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}
.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}
.pswp__preloader--active {
  opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url(preloader.gif) 0 0 no-repeat;
}
.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}
.pswp--css_animation .pswp__preloader__cut {
  /*
			The idea of animating inner circle is based on Polymer ("material") loading indicator
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}
.pswp--css_animation .pswp__preloader__donut {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(0);
  }
}
/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}
/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}
.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}
/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}
.pswp__element--disabled {
  display: none !important;
}
.pswp--minimal--dark .pswp__top-bar {
  background: none;
}
/* Image path fixes */
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  background-image: url(../images/photoswipe/default-skin.png);
}
@media (-webkit-min-device-pixel-ratio: 1.1),
  (-webkit-min-device-pixel-ratio: 1.09375),
  (min-resolution: 105dpi),
  (min-resolution: 1.1dppx) {
  .pswp--svg .pswp__button--arrow--left::before,
  .pswp--svg .pswp__button--arrow--right::before {
    background-image: url(../images/photoswipe/default-skin.svg);
  }
}
.pswp__preloader--active .pswp__preloader__icn {
  background: url(../images/photoswipe/preloader.gif) 0 0 no-repeat;
}
/* Custom overrides */
.pswp {
}
.pswp img {
  box-shadow: none;
}
.pswp .pswp__caption__center {
  text-align: center;
}
.pswp img.pswp__img {
  margin: 0;
}
.gallery {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 30px auto;
}
.gallery figure {
  margin: 3px 5px;
  text-align: center;
  width: 240px;
}
.gallery figure img {
  box-shadow: 0 0 4px 0 #637047;
  margin: 0;
  max-height: 176px;
  max-width: 234px;
}
.gallery figure figcaption {
  font-size: 12px;
  margin: 0 0 8px;
}
.frontpage .gallery figure img {
  height: auto;
}
/* Fonts */
@font-face {
  font-family: "DINCondensedBold";
  src: url("fonts/DINCondensed-Bold.eot");
  src:
    url("fonts/DINCondensed-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/DINCondensed-Bold.woff") format("woff"),
    url("fonts/DINCondensed-Bold.ttf") format("truetype"),
    url("fonts/DINCondensed-Bold.svg#svgDINCondensedBold") format("svg");
}
@font-face {
  font-family: "OpenSans-Italic";
  src: url("fonts/OpenSans-Italic.eot");
  src:
    url("fonts/OpenSans-Italic.eot?#iefix") format("embedded-opentype"),
    url("fonts/OpenSans-Italic.woff") format("woff"),
    url("fonts/OpenSans-Italic.ttf") format("truetype"),
    url("fonts/OpenSans-Italic.svg#svgDINCondensedBold") format("svg");
}
@font-face {
  font-family: "OpenSans-Semibold";
  src: url("fonts/OpenSans-Semibold.eot");
  src:
    url("fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"),
    url("fonts/OpenSans-Semibold.woff") format("woff"),
    url("fonts/OpenSans-Semibold.ttf") format("truetype"),
    url("fonts/OpenSans-Semibold.svg#svgDINCondensedBold") format("svg");
}
@font-face {
  font-family: "OpenSans-CondLight";
  src: url("fonts/OpenSans-CondLight-webfont.eot");
  src:
    url("fonts/OpenSans-CondLight-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/OpenSans-CondLight-webfont.woff") format("woff"),
    url("fonts/OpenSans-CondLight-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "TrashHand";
  src: url("fonts/TrashHand-webfont.eot");
  src:
    url("fonts/TrashHand-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/TrashHand-webfont.woff") format("woff"),
    url("fonts/TrashHand-webfont.ttf") format("truetype"),
    url("fonts/TrashHand-webfont.svg#trashhandregular") format("svg");
}
@font-face {
  font-family: "OpenSans-Regular";
  src: url("fonts/OpenSans-Regular-webfont.eot");
  src:
    url("fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/OpenSans-Regular-webfont.woff") format("woff"),
    url("fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
    url("fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
}