/*
-----------------------------------------------
		www.stefanie-hoell.com
	 by www.kuchenbeiser.de
	and www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
}

html {
		height: 100%;
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
		display: block;
}

blockquote, q {
		quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
		content: "";
		content: none;
}

a {
		margin: 0;
		padding: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
}

table {
		border-collapse: collapse;
		border-spacing: 0;
}

input, select {
		vertical-align: middle;
}

nav ul {
		list-style: none;
}


/*		W E B F O N T S
----------------------------------------------- */

/**
 * @license
 * MyFonts Webfont Build ID 3749878, 2019-04-20T05:18:06-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FolioStd-Medium by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/folio/medium/
 * Copyright: Copyright © 1989, 1995, 2002 Adobe Systems Incorporated.  All Rights Reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3749878
 * 
 * © 2019 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3937f6");

  
@font-face {font-family: 'FolioStd-Medium';src: url('fonts/3937F6_0_0.eot');src: url('fonts/3937F6_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/3937F6_0_0.woff2') format('woff2'),url('fonts/3937F6_0_0.woff') format('woff'),url('fonts/3937F6_0_0.ttf') format('truetype'),url('fonts/3937F6_0_0.svg#wf') format('svg');}


/*
		This font software is the property of Commercial Type.

		You may not modify the font software, use it on another website, or install it on a computer.

		License information is available at http://commercialtype.com/eula
		For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

		Copyright (C) 2019 Schwartzco Inc.
		License: 1904-RCTLKW     
*/


@font-face {
  font-family: 'Le Jeune Text Web';
  src: url('fonts/LeJeuneText-Regular-Web.woff2') format('woff2'),
	   url('fonts/LeJeuneText-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

/*
		This font software is the property of Commercial Type.

		You may not modify the font software, use it on another website, or install it on a computer.

		License information is available at http://commercialtype.com/eula
		For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

		Copyright (C) 2019 Schwartzco Inc.
		License: 1907-DXMJBU     
*/


@font-face {
  font-family: 'Le Jeune Text Web';
  src: url('fonts/LeJeuneText-RegularItalic-Web.woff2') format('woff2'),
	   url('fonts/LeJeuneText-RegularItalic-Web.woff') format('woff');
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
}


/*		B A S I C S
----------------------------------------------- */

body {
		color: #1d1d1d;
		background: #fff;
		font-family: "FolioStd-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 17px;
		line-height: 20px;
		letter-spacing: 0.03em;
		text-align: left;
}

a:link, a:visited {
		color: #1d1d1d;
		text-decoration: none;
}

h1, h2 {
		font-weight: normal;
}


/*		H E A D E R
----------------------------------------------- */

header a {
		width: 100%;
		height: 60px;
		background: transparent url("stefanie-hoell-temporary-setup.svg") 13px 0 repeat-x;
		background-size: contain;
		position: fixed;
		left: 0;
		top: 10px;
		z-index: 9999;
		text-indent: -9999px;
		display: block;
}


/*		P A N O R A M A
----------------------------------------------- */

#panorama img {
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: -5px;
}

#panorama figcaption {
		margin-left: 15px;
		font-family: "FolioStd-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 17px;
		line-height: 20px;
		letter-spacing: 0.03em;
}

.item a {
		display: block;
		height: auto;
}

.text a {
		padding-top: 10vh;
		padding-bottom: 10vh;
}

.image {
		margin-bottom: 40px;
}

.text {
		font-family: "Le Jeune Text Web", Georgia, Times, "Times New Roman", serif;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.02em;
		margin: 0 15px 40px 15px;
		font-variant-numeric: oldstyle-nums;
		-moz-font-feature-settings: "onum";
		-webkit-font-feature-settings: "onum";
		font-feature-settings: "onum";
}

.text p {
		margin-bottom: 20px;
		text-indent: 30px;
}

#first.text {
		margin-top: 85%;
}

#seventh {
		height: 72px;
		overflow: hidden;
		margin-bottom: 0;
}

#seventh a {
		padding-top: 0;
		padding-bottom: 0;
}


/*		O V E R V I E W
----------------------------------------------- */

.largest {
		font-size: 180%;
		letter-spacing: -0.025em;
		word-spacing: -0.05em;
		line-height: 0.975;
}

.tricolumn {
		font-family: "Le Jeune Text Web", Georgia, Times, "Times New Roman", serif;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.02em;
		margin: 0 15px 20px 15px;
		font-variant-numeric: oldstyle-nums;
		-moz-font-feature-settings: "onum";
		-webkit-font-feature-settings: "onum";
		font-feature-settings: "onum";
}

.tricolumn div {
		margin-bottom: 20px;
}

#bio {
		clear: both;
		padding-top: 20px;
		margin-bottom: 40px;
}

#tags {
		padding: 80px 14px 0 14px;
}

#duty {
		padding: 0 14px 20px 14px;
}

#tags li, #duty li {
		list-style: none;
		display: inline-block;
		margin-right: 15px;
		text-rendering: optimizeLegibility;
}

#contact {
		padding-bottom: 20px;
}

#contact.tricolumn div {
		margin-bottom: 0;
}

#thumbnails {
		margin: 10px 15px 20px 15px;
}

#thumbnails img, #contact img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
}

#thumbnails a, #contact figure a {
		display: block;
		float: left;
		margin: 0 0 10px 0;
		width: 130px;
		height: 120px;
}

#thumbnails em, #contact em {
		display: inline-block;
		width: 0;
		height: 120px;
		vertical-align: bottom;
}

#thumbnails img, #contact img {
		display: inline-block;
		max-width: 120px;
		vertical-align: bottom;
}

.tricolumn span {
		font-variant-numeric: proportional-nums;
		-moz-font-feature-settings: "pnum";
		-webkit-font-feature-settings: "pnum";
		font-feature-settings: "pnum";
}


/*		R E S P O N S I V E
----------------------------------------------- */

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

header a {
		height: 70px;
}

}


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

header a {
		height: 80px;
		background: transparent url("stefanie-hoell-temporary-setup.svg") 20px 0 repeat-x;
		top: 15px;
}

#panorama figcaption {
		margin-left: 20px;
}

.text {
		margin: 0 20px 40px 20px;
}

.text p {
		text-indent: 40px;
		max-width: 400px;
		text-align: justify;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
}

#second, #third, #fourth, #fifth, #sixth, #seventh {
		margin-bottom: 0;
}

.largest {
		font-size: 250%;
		letter-spacing: -0.025em;
}

.tricolumn {
		margin: 0 20px 20px 20px;
		text-align: justify;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
}

#contact {
		text-align: left;
}

#tags {
		padding: 100px 19px 0 19px;
}

#duty {
		padding: 0 19px 20px 19px;
}

#tags li, #duty li {
		margin-right: 20px;
}

}


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

header a {
		background-position-x: 32px;
}

#temporary {
		overflow: hidden;
}

#panorama {
		width: 5000px;
		height: 100%;
		position: relative;
		left: 0;
		top: 0;
}

#panorama .item {
		width: auto;
		height: 100vh;
		float: left;
		background: #fff;
}

#panorama .item img {
		width: auto;
		height: 90vh;
		height: calc(100vh - 20px);
		position: relative;
		margin-bottom: -5px;
}

.text {
		margin-bottom: 0;
		font-size: 21px;
		line-height: 25px;
		letter-spacing: 0.01em;
}

.text p {
		text-indent: 40px;
		max-width: 450px;
		margin-right: 60px;
		margin-left: 20px;
		margin-bottom: 25px;
}

.text em {
		display: inline-block;
		width: 0;
		height: 100vh;
		vertical-align: bottom;
}

.text div {
		display: inline-block;
		vertical-align: bottom;
		margin-bottom: 20px;
}

#first.text {
		margin-top: 0;
}

.landscape img {
		margin-top: 38px;
		padding-bottom: 41px;
		max-height: 90vh !important;
		max-width: 80vw;
		height: auto !important;
}

#tags, #bio, #biography, #thumbnails, #duty, #contact {
		padding-left: 15px;
		padding-right: 15px;
}

#tags, #duty {
		margin-left: 16px;
}

#tags li, #duty li {
		margin-right: 25px;
}

.largest {
		font-size: 300%;
		letter-spacing: -0.035em;
}

.tricolumn {
		font-size: 21px;
		line-height: 25px;
		letter-spacing: 0.01em;
}

.tricolumn div {
		margin-bottom: 25px;
}

#bio {
		padding-top: 25px;
}

#thumbnails a, #contact figure a {
		margin: 0 10px 20px 0;
		width: 190px;
		height: 180px;
}

#thumbnails em, #contact em {
		height: 180px;
}

#thumbnails img, #contact img {
		max-width: 180px;
}

.text a {
		padding-top: 0;
		padding-bottom: 0;
}

}


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

#bio, #biography {
		width: 45%;
		width: calc(50% - 50px);
		padding-bottom: 25px;
		margin-right: 0;
}

#bio {
		float: left;
}

#biography {
		float: right;
		margin-top: 25px;
}

#duty {
		clear: both;
}

}


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

.narrow #third {
		position: absolute;
		left: calc(100vw - 300px);
}

.narrow #fourth {
		position: absolute;
		left: calc(100vw - 150px);
}

.wide #second {
		position: absolute;
		left: calc(100vw - 300px);
}

.wide #third {
		position: absolute;
		left: calc(100vw - 150px);
}

.wide #fourth {
		display: none;
}

#fifth, #sixth, #seventh {
		display: none;
}

}


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

#contact div:nth-child(1), #contact div:nth-child(3) {
		padding-top: 25px;
}

#bio, #biography {
		width: inherit;
		padding-bottom: inherit;
		margin-right: 20px;
}

#bio {
		float: none;
}

#biography {
		float: none;
		margin-top: inherit;
}

.tricolumn div {
		width: 30%;
		width: calc(100% / 3 - 30px);
		float: left;
		padding-bottom: 25px;
}

.tricolumn div:nth-child(1) {
		margin-right: 45px;
}

.tricolumn div:nth-child(2) {
		margin-right: 45px;
}

}


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

.narrow #third {
		position: absolute;
		left: calc(100vw - 400px);
}

.narrow #fourth {
		position: absolute;
		left: calc(100vw - 200px);
}

.wide #second {
		position: absolute;
		left: calc(100vw - 400px);
}

.wide #third {
		position: absolute;
		left: calc(100vw - 200px);
}

header a {
		height: 100px;
		background: transparent url("stefanie-hoell-temporary-setup.svg") 34px 0 repeat-x;
		top: 15px;
}

body {
		font-size: 21px;
		line-height: 25px;
		letter-spacing: 0.01em;
}

#panorama .item img {
		height: calc(100vh - 30px);
		margin-bottom: -4px;
}

#panorama figcaption {
		margin-left: 30px;
		font-size: 21px;
		line-height: 25px;
		letter-spacing: 0.01em;
}

.text {
		margin-bottom: 0;
		font-size: 24px;
		line-height: 30px;
		letter-spacing: 0.005em;
}

.text p {
		text-indent: 60px;
		max-width: 500px;
		margin-right: 80px;
		margin-left: 30px;
		margin-bottom: 30px;
}

.image {
		margin-bottom: 60px;
}

.landscape img {
		margin-top: 44px;
		padding-bottom: 59px;
		height: 85vh !important;
		height: calc(100vh - 133px) !important;
}

.largest {
		font-size: 400%;
		letter-spacing: -0.03em;
}

#tags {
		padding-top: 125px;
}

#tags li, #duty li {
		margin-right: 30px;
}

}