/*Fonts*/
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

a,a:visited,a:hover,a:active{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
	position:relative;
  transition:0.5s color ease;
	text-decoration:none;
	color:#81b3d2;
	font-size:1.5em;
}
a:hover{
	color:#d73444;
}
a.before:before,a.after:after{
  content: "";
  transition:0.5s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
}
a.before:before{
  top:-0.25em;
}
a.after:after{
  bottom:-0.25em;
}
a.before:before,a.after:after{
  height:5px;
  height:0.35rem;
  width:0;
  background:#d73444;
}
a.first:after{
  left:0;
}
a.second:after{
  right:0;
}
a.third:after,a.sixth:before,a.sixth:after{
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}
a.fourth:before,a.fourth:after{
  left:0;
}
a.fifth:before,a.fifth:after{
  right:0;
}
a.seventh:before{
  right:0;
}
a.seventh:after{
  left:0;
}
a.eigth:before{
  left:0;
}
a.eigth:after{
  right:0;
}
a.before:hover:before,a.after:hover:after{
  width:100%;
}
.square{
  box-sizing:border-box;
  margin: 0.5em;
  position:relative;
  font-size: 1em;
  overflow:hidden;
	display: flex;
}
.square a{
  position:static;
  font-size:100%;
  padding:0.2em 0.4em;
}
.square:before,.square:after{
  content: "";
  box-sizing:border-box;
  transition:0.25s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
  width:5px;
  width:0.35rem;
  height:0;
  background:#d73444;
}
.square:before{
  left:0;
  bottom:-0.2em;
}
.square.individual:before{
  transition-delay:0.6s;
}
.square:after{
  right:0;
  top:-0.2em;
}
.square.individual:after{
  transition-delay:0.2s;
}
.square a:before{
  left:0;
  transition:0.25s all ease;
}
.square a:after{
  right:0;
  transition:0.25s all ease;
}
.square.individual a:after{
  transition:0.25s all ease 0.4s;
}
.square:hover:before,.square:hover:after{
  height:calc(100% + 0.4em);
}
.square:hover a:before,.square:hover a:after{
  width:100%;
}

article {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article {
	display: block;
}

article.special {
		text-align: center;
	}

.article-video {
  display: block;
  max-width: 100%;
  height: auto;
  background-color: #000; /* Fallback, falls Poster verzögert */
}

/* Posts */

	.posts {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 0 2em -6em;
		width: calc(100% + 6em);
	}

		.posts article {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
			margin: 0 0 6em 6em;
			position: relative;
			width: calc(33.33333% - 6em);
		}

			.posts article:before {
				background: rgba(210, 215, 217, 0.75);
				content: '';
				display: block;
				height: calc(100% + 6em);
				left: -3em;
				position: absolute;
				top: 0;
				width: 1px;
			}

			.posts article:after {
				background: rgba(210, 215, 217, 0.75);
				bottom: -3em;
				content: '';
				display: block;
				height: 1px;
				position: absolute;
				right: 0;
				width: calc(100% + 6em);
			}

			.posts article > :last-child {
				margin-bottom: 0;
			}

			.posts article .image {
				display: block;
				margin: 0 0 2em 0;
			}

				.posts article .image img {
					display: block;
					width: 100%;
				}

		@media screen and (min-width: 1681px) {

			.posts article:nth-child(3n + 1):before {
				display: none;
			}

			.posts article:nth-child(3n + 1):after {
				width: 100%;
			}

			.posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) {
				margin-bottom: 0;
			}

				.posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before {
					height: 100%;
				}

				.posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after {
					display: none;
				}

		}

		@media screen and (max-width: 1680px) {

			.posts article {
				width: calc(50% - 6em);
			}

				.posts article:nth-last-child(3) {
					margin-bottom: 6em;
				}

		}

		@media screen and (min-width: 481px) and (max-width: 1680px) {

			.posts article:nth-child(2n + 1):before {
				display: none;
			}

			.posts article:nth-child(2n + 1):after {
				width: 100%;
			}

			.posts article:nth-last-child(1), .posts article:nth-last-child(2) {
				margin-bottom: 0;
			}

				.posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before {
					height: 100%;
				}

				.posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after {
					display: none;
				}

		}

		@media screen and (max-width: 736px) {

			.posts {
				margin: 0 0 2em -4.5em;
				width: calc(100% + 4.5em);
			}

				.posts article {
					margin: 0 0 4.5em 4.5em;
					width: calc(50% - 4.5em);
				}

					.posts article:before {
						height: calc(100% + 4.5em);
						left: -2.25em;
					}

					.posts article:after {
						bottom: -2.25em;
						width: calc(100% + 4.5em);
					}

					.posts article:nth-last-child(3) {
						margin-bottom: 4.5em;
					}

		}

		@media screen and (max-width: 480px) {

			.posts {
				margin: 0 0 2em 0;
				width: 100%;
			}

				.posts article {
					margin: 0 0 4.5em 0;
					width: 100%;
				}

					.posts article:before {
						display: none;
					}

					.posts article:after {
						width: 100%;
					}

					.posts article:last-child {
						margin-bottom: 0;
					}

						.posts article:last-child:after {
							display: none;
						}

		}