@charset "UTF-8";
/* WEBFONTS */
@font-face {
  font-family: 'Nyx';
  src: url("../webfonts/Nyx.eot");
  /* IE9 Compat Modes */
  src: url("../webfonts/Nyx.eot?#iefix") format("embedded-opentype"), url("../webfonts/Nyx.woff2") format("woff2"), url("../webfonts/Nyx.woff") format("woff"), url("../webfonts/nyx.ttf") format("truetype");
}

/* BREAKPOINTS */
/* IMPORTS */
/* MIXINS */
/* VARIABLES */
/* OBJECTS */
*, *:before, *:after {
  box-sizing: border-box;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-family: times;
  letter-spacing: 1px;
  line-height: 1.3;
  vertical-align: baseline;
  font-size: 16px;
}

@media (min-width: 680px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 20px;
  }
}

h1, h2 {
  font-size: 1.5rem;
}

@media (min-width: 680px) {
  h1, h2 {
    font-size: 1.5rem;
  }
}

h1, h2, h3, h4 {
  font-family: 'Nyx', Arial, sans-serif;
  letter-spacing: 1.5px;
  margin-bottom: 0.65rem;
}

a:link, a:visited {
  color: blue;
  text-decoration: none;
  outline: none;
}

.no-touch a:hover, .no-touch a:active {
  text-decoration: none;
  color: white;
  text-shadow: 0 0 0.5rem blue;
}

a.is-active {
  text-decoration: underline;
}

.hom {
  display: none;
}

@media (min-width: 680px) {
  .hom {
    display: inline;
  }
}

@media (min-width: 680px) {
  .hod {
    display: none !important;
  }
}

.clear {
  clear: both;
}

/* HOME PAGE */
#landing {
  overflow: hidden;
}

#nav-start {
  max-width: 1200px;
  position: relative;
  padding: 0 1rem;
  height: 100%;
  height: 100vh;
  font-family: 'Nyx', Arial, sans-serif;
  margin: auto;
}

#nav-start #nav-list-container {
  margin: 1.3rem 0;
}

#nav-start #nav-list-container #nav-list li {
  text-transform: uppercase;
  list-style-type: none;
  font-size: 8vh !important;
  font-weight: normal;
  line-height: 1;
  margin: 0.65rem 0;
}

#nav-start #nav-list-container #nav-list li #welcome {
  text-transform: none;
}

@media (orientation: portrait) {
  #nav-start #nav-list-container #nav-list li {
    font-size: 8vw !important;
  }
}

#nav-start #nav-list-footer {
  list-style-type: none;
  position: absolute;
  bottom: 6.5rem;
  left: 0;
  padding: 0 1rem;
}

#nav-start #nav-list-footer a {
  padding: 0.325rem 0;
}

/* NAVIGATION */
#nav-m {
  font-family: 'Nyx', Arial, sans-serif;
  box-shadow: 0 0 0.25rem #888;
  width: 100vw;
  opacity: 0.95;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

@media (min-width: 680px) {
  #nav-m {
    display: none;
  }
}

#nav-m #bar {
  background-color: #fff;
  box-shadow: 0 0 0.25rem #888;
  position: relative;
}

#nav-m #bar #nav-icon-container {
  padding: 0.35rem 1rem;
  background-color: blue;
  color: #fff;
  font-size: 2rem;
  float: right;
}

#nav-m #bar #page-title {
  padding: 0.65rem 1rem;
  float: left;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
}

#nav-m #nav-list-container {
  letter-spacing: 1.5px;
  clear: both;
  display: none;
  border-top: 1px solid #eee;
  padding: 0 1rem;
  font-size: 1.5rem;
}

#nav-m #nav-list-container #nav-list {
  margin: 0.65rem 0;
}

#nav-m #nav-list-container #nav-list-footer {
  margin: 1.3rem 0 1.3rem 0;
  font-size: 1rem;
}

#nav-m #nav-list-container li {
  list-style-type: none;
  margin-bottom: 0.65rem;
}

#nav-m #nav-list-container .nav-active, #nav-m #nav-list-container .nav-active:hover {
  border-bottom: 2px solid blue;
}

#nav-d {
  display: none;
}

@media (min-width: 680px) {
  #nav-d {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    opacity: 0.95;
    box-shadow: 0 0 10px #888;
    z-index: 20;
    text-transform: uppercase;
  }
  #nav-d #nav-list {
    max-width: 1200px;
    margin: auto;
  }
  #nav-d #nav-list li {
    font-family: 'Nyx', Arial, 'sans-serif';
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    float: left;
    display: inline-block;
    list-style-type: none;
  }
  #nav-d #nav-list li a {
    display: block;
    text-align: center;
  }
}

@media (min-width: 680px) and (min-width: 680px) {
  #nav-d #nav-list li a {
    padding: 1rem 0;
  }
}

@media (min-width: 680px) {
  #nav-d #nav-list li a:hover {
    background-color: #f5f5f5;
    text-shadow: 0 0 0.5rem #888;
  }
  #nav-d #nav-list li .nav-active {
    background-color: blue;
    color: #fff;
  }
  #nav-d #nav-list li .nav-active:hover {
    background-color: #0000f2;
    color: #fff;
  }
}

#footer {
  width: 100%;
  font-family: 'Nyx', Arial, sans-serif;
  font-size: 1rem;
  clear: both;
}

#footer #nav-list-footer {
  clear: both;
  padding: 1.3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

#footer #nav-list-footer li {
  list-style-type: none;
  display: inline;
  margin-right: 2rem;
}

/* NINA, DORO, AKA:NYX PAGES */
.content {
  overflow: hidden;
  margin-top: 3.9rem !important;
}

@media (min-width: 680px) {
  .content {
    margin-top: 5.2rem !important;
  }
}

#info-individual, #info {
  margin: 0 auto 1.3rem auto;
}

@media (min-width: 680px) {
  #info-individual, #info {
    margin: 0 auto 1.3rem auto;
  }
}

#info-individual .wrapper, #info .wrapper {
  max-width: 1200px;
  margin: auto;
}

#info-individual .intro, #info .intro {
  width: calc(12rem + (100% - 12rem));
  padding: 0 1rem;
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #info-individual .intro, #info .intro {
    width: calc(7rem + ((100% - 12rem) / 12 * 7));
    float: left;
  }
}

#info-individual .contact, #info .contact {
  width: calc(12rem + (100% - 12rem));
  padding: 0 1rem;
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #info-individual .contact, #info .contact {
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    float: right;
  }
}

#info-individual .toggle-info, #info .toggle-info {
  clear: both;
  margin-bottom: 0.65rem;
  padding: 0 1rem;
}

#info-individual .more-info, #info .more-info {
  display: none;
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
}

#info-individual .more-info .wrapper, #info .more-info .wrapper {
  max-width: 1200px;
  padding: 0.65rem 1rem 0 1rem;
  margin: auto;
}

#info-individual .more-info #portrait, #info .more-info #portrait {
  margin: 0 auto 0.65rem auto;
  transform: rotate(-2deg);
}

@media (min-width: 680px) {
  #info-individual .more-info #portrait, #info .more-info #portrait {
    float: left;
    margin: 0;
    padding: 0 1rem 0.65rem 0;
  }
}

#info-individual .more-info h1, #info .more-info h1 {
  width: calc(12rem + (100% - 12rem));
  margin-bottom: 0.65rem;
}

#info-individual .more-info .wrapper div, #info .more-info .wrapper div {
  width: calc(12rem + (100% - 12rem));
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #info-individual .more-info .wrapper div, #info .more-info .wrapper div {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
    margin-right: calc(4rem + ((100% - 12rem) / 12 * 4));
  }
}

.toggle-info {
  color: blue;
}

.no-touch .toggle-info:hover {
  color: #fff;
  text-shadow: 0 0 0.5rem blue;
}

.toggle-info-end {
  display: none;
  padding: 0 1rem !important;
  margin-bottom: 1.3rem;
}

.button:link, button:visited {
  clear: both;
  display: inline-block;
  padding: 0.1625rem 0.5rem 0.325rem 0.5rem;
  border: 2px solid blue;
  color: blue;
  font-family: Nyx, Arial;
  margin: 0 0 1.3rem 0;
  transition: all 0.1s;
}

.no-touch .button:hover, .no-touch .button:active {
  color: white;
  background-color: blue;
  border: 2px solid blue;
}

/* RECENT */
#recent-projects {
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
  padding-top: 0.65rem;
  overflow: hidden;
}

#recent-projects h1 {
  max-width: 1200px;
  margin: auto;
  margin-bottom: 0.65rem;
  padding: 0 1rem;
}

@media (min-width: 680px) {
  #recent-projects h1 {
    margin-bottom: 1.95rem;
  }
}

#recent-projects h3, #recent-projects h4, #recent-projects p {
  display: inline;
}

#recent-projects img {
  width: 100%;
}

@media (min-width: 680px) {
  #recent-projects picture {
    position: relative;
    bottom: 1.3rem;
  }
}

#recent-projects .recent-project {
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
}

#recent-projects .recent-project .wrapper {
  max-width: 1200px;
  margin: 0 auto 0 auto;
}

@media (min-width: 680px) {
  #recent-projects .recent-project .wrapper {
    margin-bottom: 1.3rem;
  }
}

#recent-projects .recent-project .project-image {
  width: calc(12rem + (100% - 12rem));
}

@media (min-width: 680px) {
  #recent-projects .recent-project .project-image {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
    float: left;
  }
}

#recent-projects .recent-project .project-image a:hover img {
  box-shadow: 0 0 1rem #888;
  opacity: 0.9;
}

#recent-projects .recent-project .project-info {
  overflow: hidden;
  width: calc(12rem + (100% - 12rem));
  padding: 0 1rem 0.65rem 1rem;
  line-height: 0.9;
}

@media (min-width: 680px) {
  #recent-projects .recent-project .project-info {
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    padding: 1.3rem 1rem;
    float: left;
  }
  #recent-projects .recent-project .project-info h2, #recent-projects .recent-project .project-info h3 {
    font-size: 1.5rem;
  }
}

#recent-projects .recent-project .project-more-info {
  padding: 0 1rem 1.3rem 1rem;
}

@media (min-width: 680px) {
  #recent-projects .recent-project .project-more-info {
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    float: left;
    padding: 0 1rem;
  }
}

#recent-projects .recent-project:nth-child(2n + 1) .project-image, #recent-projects .recent-project:nth-child(2n + 1) .project-info, #recent-projects .recent-project:nth-child(2n + 1) .more-info {
  transform: rotate(-2deg);
}

@media (min-width: 680px) {
  #recent-projects .recent-project:nth-child(2n + 1) .project-image, #recent-projects .recent-project:nth-child(2n + 1) .project-info, #recent-projects .recent-project:nth-child(2n + 1) .more-info {
    float: right;
  }
}

/* RECENT COLUMNS  */
/* 
#recent-columns {
	max-width:1200px;
	margin: 0 auto $bl auto;
	display:none;
	@include breakpoint($m) {
		display:block;
		}
	h1 {
		margin-bottom: $bl*0.5;
		padding: 0 gutter();
		}
	.project {
		width: span(4);
		float:left;
		padding:0;
		margin:0;
		position:relative;
		overflow:hidden;
		text-shadow: 0 0 15px $txt;
		a {
			color: #fff;
			}
		img {
			width:100%;
			margin:auto;
			}
		.project-info {
			position:absolute;
			bottom:$bl*0.5;
			left:1rem;
			line-height:0.9rem;
			transform: rotate(-2deg);
			}
		}
	.project:hover {
		text-shadow: 0 0 15px $hi;
		}
	.project:hover img{
		opacity: 0.9;
		}
	}
 */
/* RECENT SLIDESHOW  */
/* 
#recent-slider {
	max-width:1200px;
	margin: 0 auto $bl auto;
	position:relative;
	clear:both;
	@include breakpoint($m) {
		margin-bottom:$bl*2;
		}	
	.swiper-pagination-info {
		color: #fff;
		z-index:2;
		position:absolute;
		left: gutter();
		line-height:1.6rem;
		text-shadow: 0 0 10px $txt;
		@include breakpoint($m) {
			width: span(4 of 12);
			text-shadow: none;
			top:0;
			color: $txt;
			}
		}
	.swiper-container {
		position:relative;
		@include breakpoint($m) {
			width: span(8 of 12 at 5);
			margin:0;
			padding: 0;
			.swiper-slide a:hover img {
				box-shadow: 0 0 1rem $shadow;
				}
			.swiper-slide a:hover .slide-info{
				color:#fff;
				}
			}
		@include breakpoint($xl) {
			padding: 0;
			}
		img {
			height:70vh;
			@include breakpoint($m) {
				height:auto;
				width:100%;
				}
			}
		.slide-info {
			transform: rotate(-3deg);
			padding-bottom:$bl*0.5;
			line-height:0.9rem;
			margin-left: 1rem;
			position:absolute;
			bottom:$bl*0.5;
			color:#fff;
			@include breakpoint($m) {
				position:relative;
				bottom: $bl*0.5;
				color: $hi;
				margin-left:0;
				max-width: span(8);
				}
			h4, p {
				display:inline;
				}				
			}
		a {
			text-shadow: 0 0 15px $txt;
			@include breakpoint($m) {
				text-shadow: none;
				}
			}
		.swiper-slide a:hover {
			@include breakpoint($m) {
				h1, h2, h3, h4, p {
					color:#fff;
					text-shadow: 0 0 0.5rem $hi !important;
					}
				img {
					opacity: 0.9;
					}

				}
			}
		}
	}
 */
/* ARCHIVE LISTS */
#archive {
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
  clear: both;
  padding: 0.65rem 0;
}

#archive #archive-list {
  max-width: 1200px;
  margin: 1rem auto 3.9rem auto;
}

#archive h1 {
  padding: 0 1rem;
}

#archive #project-list {
  line-height: 0.9rem;
}

@media (min-width: 680px) {
  #archive #project-list {
    padding: 0 1.5rem;
  }
}

#archive #project-list .archive-item {
  width: calc(12rem + (100% - 12rem));
  padding: 0 1rem 1.95rem 1rem;
  float: left;
}

@media (min-width: 680px) {
  #archive #project-list .archive-item {
    width: calc(6rem + ((100% - 12rem) / 12 * 6));
    padding: 0 0.5rem 1.3rem 0.5rem;
  }
}

@media (min-width: 1024px) {
  #archive #project-list .archive-item {
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    padding: 0 0.5rem 1.3rem 0.5rem;
  }
}

#archive #project-list .archive-item a:hover img {
  box-shadow: 0 0 1rem #888;
  opacity: 0.9;
}

#archive #project-list .archive-item a:hover {
  text-decoration: none;
  color: white;
  text-shadow: 0 0 0.5rem blue;
}

#archive #project-list .archive-item img {
  width: 100%;
  margin-top: 0;
}

#archive #project-list .archive-item .archive-item-info {
  transform: rotate(-2deg);
}

#archive #project-list .archive-item .archive-item-info h3, #archive #project-list .archive-item .archive-item-info h4, #archive #project-list .archive-item .archive-item-info p {
  display: inline;
}

#archive .archive-item:nth-child(2n+1) {
  clear: both;
}

@media (min-width: 1024px) {
  #archive .archive-item:nth-child(2n+1) {
    clear: none;
  }
  #archive .archive-item:nth-child(3n+1) {
    clear: both;
  }
  #archive .archive-item:nth-child(1) {
    float: left;
  }
}

/* 
	
#archive-l, #archive-m {
	border-top:1px solid red;
	max-width:1200px;
	margin:0 auto $bl*3 auto;
	clear:both;
	#archive-nav {
		margin-bottom:$bl*2;
		padding: 0 gutter();
		h1 {
			width: span(4);
			float:left;
			}
		#archive-pagination {
			text-align:center;
			}
		#archive-previous-next {
			text-align:right;
			float:right;
			}
		}
	#project-list {
		padding: 0 gutter()*1.5;
		line-height:0.9rem;
		.archive-item {
			padding: 0 gutter()*0.5 $bl gutter()*0.5;
			float:left;
			a:hover img {
				box-shadow: 0 0 1rem $shadow;
				opacity:0.9;
				}
			a:hover {
				text-decoration:none;
				color:white;
				text-shadow: 0 0 0.5rem $hi;
				}
			img {
				width:100%;
				margin-top:0;
				}
			.archive-item-info {
				transform: rotate(-2deg);
				h3, h4, p {
					display:inline;
					}
				}
			}
		}
	}


			
#archive-m {
	display:none;
	@include breakpoint($m) {
		display:block;
		}
	@include breakpoint($l) {
		display:none;
		}
	.archive-item:nth-child(3) {
    	clear:both;
		}
	.archive-item {
		width: span(6);
		}
	}			
		
	
#archive-s {
	margin:$bl 0 $bl*3 0;
	@include breakpoint($m) {
		display:none;
		}
	#archive-nav {
		padding: 0 gutter();
		margin-bottom: $bl*0.5;
		}
	#project-list {
		clear:both;
		line-height:0.9rem;
		.archive-item {
			margin-bottom:$bl*0.5;
			padding: 0 gutter();
			a:hover img {
				box-shadow: 0 0 1rem $shadow;
				}
			a:hover {
				text-decoration:none;
				color:white;
				text-shadow: 0 0 0.5rem $hi;
				}
			width: span(12 of 12);
			img {
				width:100%;
				margin-top:0;
				}
			.archive-item-info {
				transform: rotate(-2deg);
				h3, h4, p {
					display:inline;
					}
				}
			}
		}
	}
 */
/* PROJECT DETAIL PAGE */
#project-detail {
  margin: 4.55rem auto 0 auto;
}

#project-detail .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

#project-detail #project-detail-header {
  margin-bottom: 1.3rem;
  font-size: 1rem;
  max-width: 30rem;
}

#project-detail #project-detail-header a.button {
  margin-bottom: 0.325rem;
}

@media (min-width: 680px) {
  #project-detail #project-detail-header a.button {
    margin-bottom: 0.65rem;
  }
}

#project-detail #project-detail-header h1 {
  margin-bottom: 0;
}

@media (min-width: 680px) {
  #project-detail #project-detail-header h1 {
    margin-bottom: 0.65rem;
  }
}

#project-detail #project-detail-header #head-institution {
  color: #999;
}

#project-detail .project-slideshow {
  width: calc(12rem + (100% - 12rem));
  margin: 0 auto 1.3rem auto;
  position: relative;
}

@media (min-width: 680px) {
  #project-detail .project-slideshow {
    width: calc(7rem + ((100% - 12rem) / 12 * 7));
    margin-bottom: 2.6rem;
  }
}

#project-detail .project-slideshow .swiper-container img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: auto;
}

#project-detail .project-slideshow .swiper-pagination {
  padding: 0 1rem;
  font-size: 1.5rem;
}

@media (min-width: 680px) {
  #project-detail .project-slideshow .swiper-pagination {
    padding: 0;
  }
}

#project-detail .project-slideshow .swiper-slide-image {
  text-align: center;
}

#project-detail .project-slideshow .slide-info {
  padding: 0 1rem;
}

@media (min-width: 680px) {
  #project-detail .project-slideshow .slide-info {
    padding: 0;
  }
}

@media (min-width: 680px) {
  #project-detail #credits {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
    float: left;
  }
}

@media (min-width: 680px) {
  #project-detail #downloads {
    width: calc(4rem + ((100% - 12rem) / 12 * 4));
    float: left;
  }
}

#project-detail #credits, #project-detail #downloads {
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #project-detail #credits, #project-detail #downloads {
    margin-bottom: 2.6rem;
  }
}

#project-detail #credits ul, #project-detail #downloads ul {
  padding-left: 1rem;
}

#project-detail #credits table .table-cat, #project-detail #downloads table .table-cat {
  font-weight: bold;
  vertical-align: top;
  display: block;
}

@media (min-width: 680px) {
  #project-detail #credits table .table-cat, #project-detail #downloads table .table-cat {
    display: table-cell;
    padding-bottom: 0.325rem;
  }
}

#project-detail #credits table .table-content, #project-detail #downloads table .table-content {
  vertical-align: top;
  display: block;
  padding-bottom: 0.325rem;
}

@media (min-width: 680px) {
  #project-detail #credits table .table-content, #project-detail #downloads table .table-content {
    padding-left: 1rem;
    display: table-cell;
  }
}

#project-detail #more-info-container {
  width: calc(12rem + (100% - 12rem));
  clear: both;
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #project-detail #more-info-container {
    margin: 0 auto 2.6rem auto;
  }
}

#project-detail .textblock {
  max-width: 1200px;
  margin: 1.3rem 0;
}

@media (min-width: 680px) {
  #project-detail .textblock {
    margin-bottom: 2.6rem;
  }
}

@media (min-width: 680px) {
  #project-detail .textblock p {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
  }
}

@media (min-width: 1024px) {
  #project-detail .textblock p {
    width: calc(6rem + ((100% - 12rem) / 12 * 6));
  }
}

#project-detail .quoteblock {
  margin: 1.3rem 0 0 0;
  max-width: 40rem;
}

@media (min-width: 680px) {
  #project-detail .quoteblock {
    margin-bottom: 2.6rem;
  }
}

#project-detail .quoteblock .quote {
  margin-bottom: 1.3rem;
}

@media (min-width: 680px) {
  #project-detail .quoteblock .quote {
    margin-left: 3rem;
  }
}

#project-detail .quoteblock .quote-text {
  font-style: italic;
  padding-left: 1rem;
  border-left: 2px solid #333;
  margin-bottom: 0.65rem;
}

#project-detail .quoteblock .quote-text p:before {
  content: '„';
}

#project-detail .quoteblock .quote-text p:after {
  content: '“';
}

#project-detail .single-image {
  width: 100%;
  margin: 0 auto 1.3rem auto;
}

@media (min-width: 680px) {
  #project-detail .single-image {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
    margin-bottom: 2.6rem;
  }
}

#project-detail .single-image img {
  width: 100%;
}

#additional-info {
  clear: both;
}

.add-table, .add-list, .add-slideshow, .single-image, .textblock, .sponsor-table {
  clear: both;
}

.add-table {
  margin: 1.3rem 0 0 0;
}

@media (min-width: 680px) {
  .add-table {
    margin-bottom: 2.6rem;
  }
}

.add-table .table-cat {
  font-weight: bold;
  width: 40%;
  vertical-align: top;
  padding-bottom: 0.325rem;
}

.add-table .table-content {
  vertical-align: top;
  padding-left: 3rem;
  padding-bottom: 0.325rem;
}

.sponsoring {
  margin: 1.3rem 0 0 0;
  width: calc(12rem + (100% - 12rem));
}

@media (min-width: 680px) {
  .sponsoring {
    margin-bottom: 2.6rem;
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
  }
}

.sponsoring p {
  font-weight: bold;
  margin-bottom: 0.325rem;
}

.sponsoring img {
  max-width: 100%;
  padding: 0 1rem 0 0;
  margin-bottom: 0.325rem;
}

.add-list {
  margin: 1.3rem 0 0 0;
}

@media (min-width: 680px) {
  .add-list {
    margin-bottom: 2.6rem;
  }
}

.add-list ul {
  padding-left: 1rem;
}

.video-container {
  width: 100%;
  margin: 1.3rem 0;
}

@media (min-width: 680px) {
  .video-container {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
    margin: 0 auto 2.6rem auto;
  }
}

.video-container .video-embed {
  max-width: 1200px;
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}

.video-container .video-embed object, .video-container .video-embed embed, .video-container .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.preview-video-container {
  width: 100%;
  margin: 1.3rem 0;
}

.preview-video-container .video-embed {
  max-width: 1200px;
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}

.preview-video-container .video-embed object, .preview-video-container .video-embed embed, .preview-video-container .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* COMPLEX PROJECT PAGE */
#complex-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.65rem 1rem !important;
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
}

@media (min-width: 680px) {
  #complex-wrapper {
    margin-bottom: 2.6rem;
  }
}

#description {
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
}

#description .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.6rem 1rem;
}

@media (min-width: 680px) {
  #description .wrapper {
    margin-bottom: 2.6rem;
  }
}

@media (min-width: 680px) {
  #description p {
    width: calc(8rem + ((100% - 12rem) / 12 * 8));
  }
}

@media (min-width: 1024px) {
  #description p {
    width: calc(6rem + ((100% - 12rem) / 12 * 6));
  }
}

.short-description {
  margin-bottom: 1.3rem;
}

/* IMPRINT, CONTACT, NEWSLETTER PAGES */
#impressum, #contact {
  max-width: 1200px;
  margin: 0 auto;
}

#impressum p, #contact p {
  margin-bottom: 0.65rem;
}

#contact-container, #news-container, #imprint-container {
  width: calc(12rem + (100% - 12rem));
  margin-bottom: 1.3rem;
  padding: 0 1rem;
}

@media (min-width: 680px) {
  #contact-container, #news-container, #imprint-container {
    width: calc(6rem + ((100% - 12rem) / 12 * 6));
    float: left;
    margin-bottom: 2.6rem;
  }
}

#contact-container .intro, #news-container .intro, #imprint-container .intro {
  margin-bottom: 1.3rem;
}

.contact-table {
  margin: 0 0 1.3rem 0;
  width: 100%;
}

.contact-table .table-cat {
  font-weight: bold;
  vertical-align: top;
  padding-bottom: 0.325rem;
}

.contact-table .table-content {
  vertical-align: top;
  padding-left: 3rem;
  padding-bottom: 0.325rem;
}

/* COOKIE BANNER */
.cc-banner.cc-theme-edgeless .cc-message {
  margin: 1em;
  line-height: 1;
}

.cc-btn {
  font-size: 1rem;
  font-weight: normal;
}

/* SWIPER */
.swiper-container {
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 0.65rem;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform, height;
}

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  margin-top: 0;
  z-index: 15;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
  font-family: Nyx, Arial;
  font-size: 1.5rem;
  /* opacity: 0; hide arrows but have a clickable area */
  opacity: 1;
  color: blue;
  cursor: pointer;
}

.no-touch .swiper-button-prev:hover, .no-touch .swiper-button-next:hover {
  color: white !important;
  text-shadow: 0 0 0.5rem blue;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.25;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 0;
  right: auto;
  padding-left: 1rem;
}

@media (min-width: 680px) {
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    padding: 0;
  }
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 0;
  left: auto;
  text-align: right;
  padding-right: 1rem;
}

@media (min-width: 680px) {
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    padding: 0;
  }
}

/* Pagination Styles */
.swiper-pagination {
  text-align: center;
  margin-top: 0.5em;
  margin: auto;
  max-width: 50%;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  -webkit-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

#complex-project-slideshow {
  padding-top: 0.65rem;
  background: #fff url("../img/bg-gradient.png") repeat-x left top;
}

#complex-project-slideshow .wrapper {
  max-width: 1200px;
  margin: auto;
  position: relative;
}

#complex-project-slideshow .swiper-button-prev,
#complex-project-slideshow .swiper-container-rtl .swiper-button-next {
  left: 0;
  right: auto;
  padding-left: 1rem;
}

#complex-project-slideshow .swiper-button-next,
#complex-project-slideshow .swiper-container-rtl .swiper-button-prev {
  right: 0;
  left: auto;
  text-align: right;
  padding-right: 1rem;
}

#complex-project-slideshow .swiper-wrapper {
  max-width: 1200px;
  margin: auto;
  background-color: transparent;
}

@media (min-width: l) {
  #complex-project-slideshow .swiper-wrapper {
    padding: 0 1rem;
  }
}

#complex-project-slideshow .project-slideshow {
  width: calc(12rem + (100% - 12rem));
}

#complex-project-slideshow .swiper-slide {
  width: calc(9rem + ((100% - 12rem) / 12 * 10)) !important;
  background-color: transparent;
  height: 100%;
  position: relative;
  margin: 1rem 0;
  margin-left: 1rem;
  padding: 0 1rem 0 0;
}

@media (min-width: 680px) {
  #complex-project-slideshow .swiper-slide {
    width: calc(3rem + ((100% - 12rem) / 12 * 4)) !important;
  }
}

#complex-project-slideshow .swiper-slide img {
  width: 100%;
  transition: all 0.6s ease-in-out 0s;
}

#complex-project-slideshow .swiper-slide:nth-child(2) img, #complex-project-slideshow .swiper-slide:nth-child(5) img {
  transform: rotate(-5deg);
}

#complex-project-slideshow .swiper-slide:nth-child(3) img, #complex-project-slideshow .swiper-slide:nth-child(6) img {
  transform: rotate(8deg);
}

#complex-project-slideshow .swiper-slide:nth-child(4) img, #complex-project-slideshow .swiper-slide:nth-child(7) img {
  transform: rotate(3deg);
}

#complex-project-slideshow .swiper-slide-active img {
  transform: rotate(0deg) !important;
}