/*
* All Article specific Style
* 130909 edit jannis responsive bahavior
* 130910 edit Jannis more responisive behavior
* 130920 edit Jannis more responisive behavior
* 130923 edit Jannis more responisive behavior
* 140515 edit Konstantin descrease line-height for {min-width: 600px} to make it fit better on iPad
* 150615 edit Konstantin merge images and videos into field-type-file
*/

/* === ALIGNMENT OF PAGES AND CONTENT === */

/*
.slidemag { position:relative; width:100%; height:100%; }
*/

/* wrapper for an article page */
.section { position:absolute; width:100%; height:100%; }

/* second level wrapper to position different content types */
.section > .field, 
.section .media-wrapper > .field-item, 
.section .views-row > .field { position:absolute; }

/* wrapper for fulltext page */
.field-layout-100 .field-name-field-text, .section-header { top:5%; right:5%; bottom:100px; left:5%; z-index: 1; }

.field-layout-33-66.text-left .field-name-field-text, 
.field-layout-33-66.text-left .section-header { top:5%; right:64%; bottom:100px; left:5%; }
.field-layout-33-66.text-left .media-wrapper > .field-item { top:5%; right:5%; bottom:100px; left:39%; }

.field-layout-33-66.image-left .media-wrapper > .field-item { top:5%; right:67%; bottom:100px; left:5%; }
.field-layout-33-66.image-left .field-name-field-text, 
.field-layout-33-66.image-left .section-header { top:5%; right:5%; bottom:100px; left:36%; }

.field-layout-50-50.text-left .field-name-field-text, 
.field-layout-50-50.text-left .section-header  { top:5%; right:53%; bottom:100px; left:5%; }
.field-layout-50-50.text-left .media-wrapper > .field-item { top:0; right:0; bottom:0; left:50%; }

.field-layout-50-50.image-left .field-name-field-text, 
.field-layout-50-50.image-left .section-header { top:5%; right:5%; bottom:100px; left:53%; }
.field-layout-50-50.image-left .media-wrapper > .field-item { top:0; right:50%; bottom:0; left:0; }

.field-layout-66-33.text-left .field-name-field-text, 
.field-layout-66-33.text-left .section-header { top:5%; right:36%; bottom:100px; left:5%; }
.field-layout-66-33.text-left .media-wrapper > .field-item { top:5%; right:5%; bottom:100px; left:67%; }

.field-layout-66-33.image-left .media-wrapper > .field-item { top:5%; right:33%; bottom:100px; left:5%; }
.field-layout-66-33.image-left .field-name-field-text, 
.field-layout-66-33.image-left .section-header { top:5%; right:5%; bottom:100px; left:70%; }

.field-layout-50-50.image-image .media-wrapper > .field-item { top:0; right:0; bottom:0; left:51%; }
.field-layout-50-50.image-image .media-wrapper > .field-item:first-child { top:0; right:51%; bottom:0; left:0; }

.full-image { width: 100%; height: 100%; }
.full-image .media-wrapper > .field-item { position: absolute; top:0; right:0; bottom:0; left:0%; }

/* wrapper for map right */
.group-location-data { top:40px; right:5%; bottom:100px; left:39%; }
.group-location-data > div,
.group-location-data .map-container,
.group-location-data .leaflet-container,
.group-location-data .geolocation-map-wrapper { width: 100%; height: 100%; }

/* helper for text content triggering scroll before text gets behind the footer */
.text-padding {width:100%; height:100px; position:relative; display:block; }

/* Background images */
.field-type-bg-image {
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
	background-image:url('images/blank.jpg');
}
.field-type-bg-image.bg-cover {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.field-type-bg-image.bg-contain {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}
/* Foreground images */
.field-type-img-image {
	overflow: hidden;
	vertical-align: middle;
	text-align: center;
}
.field-type-img-image img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	display: inline;
	vertical-align: bottom;
}
.media-wrapper {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
@media screen and (min-width: 721px) {
	.media-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.media-wrapper .field{
		flex: 1;
		height: 100%;
	}
	.media-wrapper .field-name-field-media-video {
		display: flex;
    	flex-direction: row;
    	align-items: center;
	}
	.media-wrapper .field-name-field-media-video > .field-item{
		flex: auto;
		height: auto;
	}
}
.media-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	-o-object-fit: contain;
	object-fit: contain;
}
.image-cover .media-wrapper img {
	-o-object-fit: cover;
	object-fit: cover;
}
.field-name-field-media-image img {
	background-image: url(../assets/images/spinning-dots.svg);
	background-size: 60px;
	background-position: center 48%;
	background-repeat: no-repeat;
}
.field-name-field-media-alternate-image {
	display: none;
}
@media all and (orientation: portrait){
	.field-name-field-media-alternate-image {
		display: block;
	}
	.field-name-field-media-alternate-image + .field {
		display: none;
	}
}
.section-header {
	position: absolute;
	z-index: 2;
}
.section-header-content {
	display: table;
	vertical-align: middle;
	position: relative;
	width: 100%;
	height: 100%;
}
.section-header-text {
	display: table-cell;
	vertical-align: middle;
}
.align-left .section-header-text,
.align-right .section-header-text {
	display: table-cell;
	vertical-align: top;
}

.article-header {
	margin-bottom: 2.4rem;
	width: 100%;
}

/* === Videos === */
.field-name-field-media-video > .field-item {
	display: flex;
    align-items: center;
	flex: 1;
	position: relative;
    height: 0;
	padding-bottom: 56.25%;
}
.field-name-field-media-video > .field-item [data-type="placeholder"],
.field-name-field-media-video > .field-item iframe {
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
    height: 100%;
}
/* (legacy videos) */
.field-name-field-video-embed div {
	width: 100%;
	height: 100%;
}
.field-name-field-video-embed .file-video {
	display: table;
	vertical-align: middle;
	text-align: center;
}
.field-name-field-video-embed .file-video .content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.field-name-field-video-embed .file-video .content > div {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 22px;
	height: 0;
}
.field-name-field-video-embed .file-video .content > div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
* Vertical Alignment Setup
* disabled for small devices
* 140613 - fix - 50/50 image page mobile fix
*/
@media all and (max-width: 720px){

	/*
	.slidemag { height:auto; }
	*/
	.section { position:relative; height:auto; padding-bottom:50px; }
	.animating .section { position:absolute; top:0; height:100%; padding-bottom:0px; overflow: hidden; }

	.field-name-field-text .text-align { position: relative; width: 100%; height: auto; display:table; max-width:100%; overflow-x:hidden; }
	.field-name-field-text .text-align > div { text-align: center; margin: 0px; padding:0px; }
	.field-name-field-text .text-align > div > * { margin: 0px;  }

	.section[class*="field-layout"] > div + div,
	.section .media-wrapper > .field-item + .field-item {
		margin-top: 1.5rem;
	}
	.section[class*="field-layout"] > .field{
		position:relative;
		width:90%;
		height:auto;
		top:auto;
		right:5%;
		bottom:auto;
		left:5%;
	}
	.section > .section-header,
	.section > .article-header {
		position:absolute;
		width:90%;
		height:auto;
		top:0;
		right:5%;
		bottom:0;
		left:5%;
		padding-bottom:25px;
	}
	/* .section > .field:last-of-type{ padding-bottom: 80px; } */
	.text-padding{ display: none; }
	.section.field-layout-66-33.image-left > .media-wrapper,
	.section.field-layout-66-33.text-left > .media-wrapper,
	.section.field-layout-33-66.image-left > .media-wrapper,
	.section.field-layout-33-66.text-left > .media-wrapper,
	.section.field-layout-50-50.image-left > .media-wrapper,
	.section.field-layout-50-50.text-left > .media-wrapper,
	.section.text-left > .media-wrapper,
	.section.image-left > .media-wrapper,
	.group-project-data .field-type-geofield {
		position: relative;
		width: 90%; left: 5%; right:5%;
	}
	.section.full-image > .media-wrapper {
		width: 100%; 
		min-height: calc(100vh - 168px); 
		min-height: calc(100dvh - 168px);
		left: 0; 
		right: 0; 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.section:first-child.full-image > .media-wrapper {
		height: calc(100vh - 57px);
		height: calc(100dvh - 57px);
	}
	.section:first-child.full-image > .media-wrapper .field {
		height: 100%;
	}
	.section > div:first-child { padding-top: 32px; } /* ??? */
	.section.full-image > .media-wrapper:first-child { 
		padding-top: 0;
	}
	.section > .media-wrapper > .field-item {
		position: static;
	}
	.section > .section-header ~ .media-wrapper > .field-item {
		position: absolute;
	}
	.section > .field.group-location-data { height: 65%; }
}

@media all and (min-width: 721px){
	.field-name-field-text .text-align { position: relative; width:100%; height:100%; display:table; }
	.field-name-field-text .text-align > * { display:table-cell; }
	.field-name-field-text .text-align > * { vertical-align:middle; text-align:center; }
}


/* === FONT STYLES === */
.text-wrapper {
	text-align:left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.text-scale{ font-size: 1rem; line-height: 1.375rem; -webkit-font-smoothing:antialiased; }
.text-scale p { margin-top: 1rem; }

@media (min-width:  600px) { .text-scale { letter-spacing:0.01rem; line-height: 1.275rem; } .text-scale p { margin-bottom: 1.275rem; } }
@media (min-width: 1200px) { .text-scale { letter-spacing:0.005rem; line-height: 1.325rem;  } .text-scale p { margin-bottom: 1.325rem; } }
@media (min-width: 1500px) { .text-scale { letter-spacing:0;line-height: 1.275rem; } .text-scale p { margin-bottom: 1.275rem; } }
@media (min-width: 1800px) { .text-scale { letter-spacing:0; line-height: 1.25rem; } .text-scale p { margin-bottom: 1.25rem; } }


h1 { font-size: 2rem; line-height: 3.6rem; }
h2 { font-size: 1.75rem; line-height: 125%; margin-bottom: 1.25rem;}
h3 { font-size: 1.5rem; line-height: 125%; margin-bottom: 1rem;}
h4 { font-size: 1.25rem; line-height: 125%; margin-bottom: .75rem; }
h5 { font-size: 1rem; line-height: 125%; margin-bottom: .667rem; margin-top: 1.25rem; }
/* Some space for inline headers */
.text-scale h2:not(:first-child), 
.text-scale h3:not(:first-child),
.text-scale h4:not(:first-child),
.text-scale h5:not(:first-child) { margin-top: 1.325rem; }
h2[id] {
	scroll-margin-top: 1.325rem;
}

.field-name-field-headline h1, .section-header h1 { font-size: 2.5rem; line-height: 150%; text-align: inherit; }
.section-header .field-name-field-subhead span { font-size: 1.5rem; line-height: 125%; text-align: inherit; font-family: 'Arapey',serif; font-style: normal; font-weight: 400; }
.full-image .field-name-field-headline h1, .full-image .section-header h1 { font-size: 4rem; line-height: 125%; text-align: inherit; margin: 28px 0; }
.full-image .field-name-field-subhead span { font-size: 1.75rem; line-height: 125%; text-align: inherit; font-family: 'Arapey',serif; font-style: normal; font-weight: 400; }


@media (max-width: 720px) {
	.field-name-field-headline h1, .section-header h1 { word-break: break-word; }
	.full-image .field-name-field-headline h1, .full-image .section-header h1, .section .section-header h1 { font-size: 2rem; line-height: 115%; }
	.full-image .field-name-field-subhead span { font-size: 1.25rem; line-height: 120%; padding-top:0.5rem; }
	/* .full-image .field-name-field-subhead { padding-top:1.25rem; } */
}

/* project data */
.field .field-label { font-family: 'Open Sans', sans-serif; font-weight:600; font-size: 0.925rem; }
.field-name-field-headline h2, .field-name-field-text h2 { font-family: 'Open Sans', sans-serif; font-weight:600; font-size: 1.25rem; text-transform:uppercase; /*margin-bottom:1.25rem;*/ }
.field-name-field-project-completion-year span { display:inline-block; font-family: 'Open Sans', sans-serif; color:#FFFFFF; text-transform:uppercase; padding:1px 12px; font-size:0.75rem; margin-bottom:1rem; background:#000; }
.group-building-data > .field { margin-bottom:0.65rem; width: 100%; float: left; }
.group-building-data > .field-name-field-headline { margin-bottom: 0; }
.group-building-data .field-name-field-project-completion-year { margin-top: .75rem; margin-bottom: 0; }

.columns{
}

@media (min-width: 721px) {
  .group-building-data > .field:last-child { margin-bottom: 120px; }
	.columns {
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;

		-webkit-column-gap: 2.5rem;
		-moz-column-gap: 2.5rem;
		-ms-column-gap: 2.5rem;
		-o-column-gap: 2.5rem;
		column-gap: 2.5rem;

		-webkit-column-width: 21rem;
		-moz-column-width: 21rem;
		-ms-column-width: 21rem;
		-o-column-width: 21rem;
		column-width: 21rem;

		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear;

	}
	.columns .columns {
		-webkit-columns: unset;
		-moz-columns: unset;
		-ms-columns: unset;
		-o-columns: unset;
		columns: unset;
	}
}

.art-text-lead{
	font-size: 3.4rem; display:inline-block;
	line-height:3.4rem;
	float:left; margin-top:-0.35rem;
	height:2.4rem; margin-right:0.25rem;
}

/* === pagination === */
.section-footer{
	position:fixed;
	left:0; right:0; bottom:68px;
	width:auto; height:auto;
	z-index:6000;
	opacity: 1;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.slidemag.animating + .sld-controls .section-footer{
	opacity: 0;
}
.section-footer a,
.section-footer span,
.image-caption span {
	font-family: 'Open Sans', sans-serif;
	color:#000;
	font-size:13px;
	line-height: 1.385;
}
.image-caption span + span:before {
	content: '| ';
}
.image-caption p {
	display: inline;
	margin: 0;
}
.section-footer a:hover{
	color:#606060;
}
.section-footer > * {
	display:inline-block;
	vertical-align:middle;
}
.section-footer .content {
	background:rgba(255,255,255,0.85);
	text-shadow: 0 0 2px white;
	padding: 6px 12px 6px 5%;
	margin-right: 8px;
}
/* Force section footer display if there is no slidemag pagination */
/*.content[data-page-count="1"] .section-footer {
display:inline-block !important;
}*/

@media all and ( max-width:720px ) {
	.section > .section-footer{
		display: block;
		position:relative;
		bottom:0px;
		padding:0.5rem 5% 67px 5%;
		margin-top:2rem;
		opacity: 1;
		min-height: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
	}
	.section-footer .content {
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
	}
}

/* === captions === */
.image-caption{
	display:inline-block;
	position:fixed;
	z-index: 6001;
	right:5%;
	bottom:68px;
	padding:6px 12px 8px 12px;
	margin-right: -12px;
	width:auto;
	height:auto;
	text-shadow: 0 0 2px white;
	background:rgba(255,255,255,0.85);
	max-width: 20rem;
	line-height: .9rem;
}
.full-image .image-caption {
	right:12px;
	margin-right: 0;
}
.field-layout-50-50.text-left .image-caption {
	right: auto;
	margin-left: 12px;
}
.field-layout-50-50.image-left .image-caption {
	margin-right:12px;
	right:50%;
}
@media all and (max-width: 720px){
	.section .media-wrapper:first-child .image-caption,
	.section div:not(.section-header) ~ .media-wrapper .image-caption {
		display: block;
		position: static;
		text-align: right;
		margin:0;
		max-width: 100%;
		background: none;
		text-shadow: none;
	}
}
@media all and (min-width: 721px){
	/* prevent superimposition of pagination and caption */
	.field-layout-50-50.image-image .media-wrapper > .field-item:first-of-type:not(:last-of-type) .image-caption {
		right: auto;
		left: 5%;
		top: 12px;
		bottom: auto;
	}
}