/* Fonts
-------------------------------------------------- */

@font-face {
  font-family: "euclid-flex";
  src: url("../fonts/euclidflex-regular.eot");
  src: url("../fonts/euclidflex-regular.eot?") format("embedded-opentype"),
       url("../fonts/euclidflex-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "euclid-flex";
  src: url("../fonts/euclidflex-bold.eot");
  src: url("../fonts/euclidflex-bold.eot?") format("embedded-opentype"),
       url("../fonts/euclidflex-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "lyon-text";
  src: url("../fonts/lyontext-regular-no2.eot");
  src: url("../fonts/lyontext-regular-no2.eot?") format("embedded-opentype"),
       url("../fonts/lyontext-regular-no2.woff") format("woff"),
       url("../fonts/lyontext-regular-no2.ttf") format("truetype"),
       url("../fonts/lyontext-regular-no2.svg") format("svg");
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: "lyon-text";
  src: url("../fonts/lyontext-regular-no2-italic.eot");
  src: url("../fonts/lyontext-regular-no2-italic.eot?") format("embedded-opentype"),
       url("../fonts/lyontext-regular-no2-italic.woff") format("woff"),
       url("../fonts/lyontext-regular-no2-italic.ttf") format("truetype"),
       url("../fonts/lyontext-regular-no2-italic.svg") format("svg");
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
}




/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}


/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
}

/* Links
-------------------------------------------------- */
a {
  color: #ae328d;
  text-decoration: none;
  transition: color .3s, background .3s, border .3s;
}
a:hover {
  color: #621A4F;
}


/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}


/* Site
-------------------------------------------------- */
html {
  height: 101%;
  font-family: 'euclid-flex', 'Helvetica Neue', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  width: 100%;
  margin: 0 auto;
  font-size: 1.15em;
  line-height: 1.55em;
  color: #222;
  font-family: 'lyon-text', 'Times New Roman', serif;
  font-weight: 400;
}

p {
  font-style: italic;
	max-width: 40em;
}

p em {
  font-style: normal;
}

.container-projekte a em {
 margin-bottom: 3px;
 border-bottom: 2px solid;
 font-weight: 700;
}

main, header {
  padding: 2em;
  max-width: 64.5em;
  margin: 0 auto;
}

@media screen and (max-width: 580px) {
  body {
    font-size: 0.8em;
    line-height: 1.55em;
  }
}


/* Header
-------------------------------------------------- */
.header {
	padding-top: .5em;
  margin-bottom: 1.5em;
}
.logo {
  display: block;
  margin-bottom: 1.5em;
}
.logo img {
  width: 2em;
}

header p {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.8rem;
  margin-right: 2.9rem;
	padding-top: 0.2rem;
}

header p a {
	color: #fff;
	text-decoration: underline;
	font-style: normal;
}

header p a:hover {
	color: #e88ad9;
}


/* Navigation
-------------------------------------------------- */
.menu a {
  display: block;
  color: #222;
}
.menu a:hover {
  color: #621A4F;
  text-decoration: none;
}
.menu .active {
  color: #666;
}
.menu li {
  list-style: none;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  padding: .35em 0;
  border-top: 1px solid #ddd;
  font-weight: 600;
}


@media screen and (min-width: 40em) {
main, header {
    padding: 3em;
    padding-bottom: 0;
    padding-top: 0;
  }
  .logo {
    float: left;
  }
  .menu {
    float: right;
    margin-right: -1em;
  }
  .menu > li {
    float: left;
  }
  .menu > li > a {
    padding: .35em 1em;
    border: 0;
  }
  .menu > li:hover .submenu {
    display: block;
  }
}



/* Headings
-------------------------------------------------- */
h1, h2, h3, h5, h6 {
  font-family: 'euclid-flex', 'Helvetica Neue', sans-serif;
  font-style: bold;
}

h1 {
  font-size: 1.5em;
  line-height: 1.25em;
  font-style: bold;
  margin-top: 0.6em;
  margin-bottom: .7em;
  text-transform: uppercase;
  letter-spacing: 3px;

}
h2 {
  font-size: 2em;
  line-height: 1.25em;
  font-style: bold;
  margin-bottom: .5em;
}
h3 {
  font-size: 1.5em;
  line-height: 1.5em;
  /* sfont-style: italic; */
  margin-top: 1.5em;
  letter-spacing: 3px;
}
h4 {
  font-family: 'euclid-flex', 'Helvetica Neue', sans-serif;
  font-style: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}

h5 {
  margin-top: 0.2em;
  font-size: 0.9em;
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: 1px;

}
h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}

header h1 {
  color: #fff;
	font-size: 2em;
}

@media screen and (max-width: 414px) {
  h1 {
    font-size: 1.3em;
  }
  h3 {
    font-size: 1.1em;
  }
  h5 {
    text-transform: none;
    font-size: 0.67em;
  }
}


/* Main
-------------------------------------------------- */
.main {
  padding-bottom: 1.5em;
  border-bottom: 2px solid;
}
.main hr {
  margin: 3em 0;
  height: 2px;
  background: #ddd;
}
.main p,
.main figure,
.main ul,
.main ol {
  margin-bottom: 1.5em;
}
.main a {
  color: #621A4F;
  border-bottom: 2px solid #ddd;
}
.main a:hover {
  border-color: #222;
}

/* Text blocks */
.text ul,
.text ol {
  margin-left: 1em;
}

/* Project meta
-------------------------------------------------- */
.meta {
  margin-bottom: 1.5em;
}
.meta li {
  float: left;
  list-style: none;
  margin-right: 2em;
}
.meta li b {
  font-weight: 400;
  color: #000;
  padding-right: .25em;
}


/* Projects
-------------------------------------------------- */

.container-projekte {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}


.container-projekte p {
  font-size: 0.9em;
  line-height: 1.58em;
  letter-spacing: 0.1px;
  margin-top: 0.2em;
}

.container-projekte img {
	margin-bottom:0.5em;
}


.grid-1 {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3em;
  margin-left: 0;

}

.grid-1-5 {
  width: 75%;
}

.grid-1-5 hr {
  width: 130%;
  border: 2px solid #eee;
  margin-top: 1em;
  margin-bottom: 1em;
}

.grid-2 {
  width: 48.5%;
  box-sizing: border-box;
  margin-bottom: 3em;
  margin-left: 0;

}

.grid-3 {
  width: 31%;
  box-sizing: border-box;
  margin-bottom: 3em;
  margin-left: 0;
}

.grid-2 img{
border-width: thin;
border-color: rgb(238, 238, 238);
border-style: solid;
}

.grid-3 img{
border-width: thin;
border-color: rgb(238, 238, 238);
border-style: solid;
}

.grid-4 {
  width: 22.75%;
  box-sizing: border-box;
  margin-left: 0;
  margin-bottom: 3em;
}

  .grid-1 img
  .grid-2 img
  .grid-4 img
  .grid-3 img {
    position: fixed;
    left: 0px;
    top: 0px;
    object-fit: cover;
  }




@media all and (max-width: 900px) {
  .lecturersguests{
    font-family: "euclid-flex", sans-serif;
    font-style: normal;
    font-size: 0.65em;
    line-height: 1.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
    max-width: 100%!important;
  }

  .grid-2 {
    width: 99%;
  }

	.grid-3 {
    width: 48%;
	}

	.grid-1-5 {
		width: 99%;
	}

}


@media all and (max-width: 540px) {

	.grid-1-5 {
		width: 99%;
	}

  .grid-1, .grid-1-5, .grid-2, .grid-3,
  .grid-4 {
    width: 99%;
    margin-bottom: 1em;
  }

  .grid-3 img {
    display: hidden;
  }

}

.persons p, #publications em {
  font-family: "euclid-flex", sans-serif;
  font-style: normal;
  font-size: 0.65em;
  line-height: 1.8em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lecturersguests{
  font-family: "euclid-flex", sans-serif;
  font-style: normal;
  font-size: 0.65em;
  line-height: 1.8em;
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 70%;
}


/* Next/Prev nav
-------------------------------------------------- */
.nextprev {
  padding: 1em 0;
}
.nextprev a {
  border: 0;
}
.nextprev .prev {
  float: left;
}
.nextprev .next {
  float: right;
}


/* Footer
-------------------------------------------------- */
.footer {
  margin-top: 100px;
  left: 0;
  bottom: 0;
  padding: 1em 0 6em;
  font-size: .8em;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  z-index:100;
  padding: 1em;
  position: relative;
  background: #7c326c;
  color: #fff;
  line-height: 1.6em;
}

.footer a {
  color: #f6f6f6;
}

.footer a:hover {
  color: #c6c6c6;
}

.wrapper-footer {
  max-width: 56em;
  margin: 0 auto;
  min-height: 100px;
}


.logos {
  float: right;
  display: flex;
  text-align: center;
  margin-top: 20px;
  margin-right: 60px;
}

.logos img {
  width: 25px;
  height: 60px;
}

.logos a {
  margin: 5px;
}

#uclab {
  width: 100px;
  height: 50px;
	margin-top: 15px;
}

#fhp {
	width: 125px;
	height: 50px;
	margin-top: 10px;
}

#spsg {
  margin-top: 0.5em;
  width: 100px;
  height: 50px;
}

#here {
  margin-top: 0.5em;
  width: 50px;
  height: 60px;
}


.logo-bmbf-container a {margin: 0;}
.logo-bmbf-container {
text-align: center;
margin-top: -15px;
font-style: italic;
font-size: 0.7em;
margin-left: 2em;
line-height: 1.3em;
}

#faf {
  margin-top: 17px;
	margin-left: 5px;
  width: 60px;
  height: 40px;
}

#bmbf {
  width: 72px;
  margin-top: 10px;
}

#ddb {
  margin-top: 10px;
  width: 100px;
  height: 50px;
}

#pfabrik {
  margin-top: 25px;
  width: 110px;
  height: 15px;
}

.copyright {
  float: left;
  margin-left: 0.5em;
}
.colophon {
  float: right;
}
.colophon a b {
  color: #621A4F;
  padding-left: .25em;
}

@media screen and (min-width:0px) and (max-width: 414px) {
  .footer {
    margin-top: 50px;
  }
  .wrapper-footer {
    width: 110%;
  }

  .logos img {
    width: 13px;
    height: 30px;
  }

  #uclab, #fhp, spsg {
    width: 50px;
    height: 25px;
  }
  #here {
    width: 25px;
    height: 30px;
  }
  #faf {
    width: 35px;
    height: 20px;
}
#bmbf {
  width: 40px;
  height: 10px;
}
#pfabrik {
  width: 40px;
  height: 6px;
}
#ddb {
  width: 50px;
  height: 25px;
}

}

/* Header Box ---------------- */

.h-box {
    margin-top: 2.25rem;
    margin-bottom: 2.75rem;

}

.h-box p {
  width: 80%;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 2rem;
}

  .section-bg {
  background: #fff;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

}

.section-bg {
  background: #fff;
  padding-left: 3rem;
  padding-right: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

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


  .section-bg {
  padding: 1rem;
  }
}



@media all and (min-width: 50px) and (max-width: 640px) {
  header, .header {
    padding-bottom: 0;
  }

  .h-box {
    margin-top: 1.25rem;
    margin-bottom: 0;
  }

  .h-box p {
  width: 86%;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4rem;
  }

}


/*Twitter-Badge-----------------------*/

.circle {
  border-radius: 50%;
/*  background: url(../images/logo/twitter.svg) no-repeat #621A4F;*/
  background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22svg2%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22Twitter_bird_logo_2012.svg%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2250px%22%20height%3D%2245px%22%20viewBox%3D%220%200%2050%2045%22%20enable-background%3D%22new%200%200%2050%2045%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%28-282.32053%2C-396.30734%29%22%20inkscape%3Agroupmode%3D%22layer%22%20inkscape%3Alabel%3D%22Layer%201%22%3E%20%3Cpath%20id%3D%22path5%22%20inkscape%3Aconnector-curvature%3D%220%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M332.315%2C403.295c-1.837%2C0.816-3.819%2C1.37-5.889%2C1.604%20c2.128-1.283%2C3.732-3.265%2C4.519-5.685c-1.983%2C1.166-4.169%2C2.041-6.501%2C2.478c-1.866-1.983-4.548-3.236-7.493-3.236%20c-5.656%2C0-10.262%2C4.606-10.262%2C10.262c0%2C0.816%2C0.087%2C1.574%2C0.262%2C2.332c-8.513-0.437-16.093-4.519-21.137-10.729%20c-0.875%2C1.516-1.399%2C3.265-1.399%2C5.16c0%2C3.557%2C1.808%2C6.706%2C4.577%2C8.542c-1.691-0.058-3.265-0.525-4.636-1.283%20c0%2C0.029%2C0%2C0.087%2C0%2C0.117c0%2C4.956%2C3.528%2C9.125%2C8.222%2C10.058c-0.875%2C0.233-1.778%2C0.35-2.711%2C0.35c-0.671%2C0-1.312-0.058-1.924-0.175%20c1.312%2C4.082%2C5.102%2C7.055%2C9.592%2C7.114c-3.499%2C2.741-7.93%2C4.402-12.741%2C4.402c-0.816%2C0-1.633-0.058-2.449-0.146%20c4.548%2C2.915%2C9.942%2C4.606%2C15.714%2C4.606c18.863%2C0%2C29.184-15.627%2C29.184-29.184c0-0.437%2C0-0.875-0.029-1.341%20C329.195%2C407.173%2C330.944%2C405.365%2C332.315%2C403.295L332.315%2C403.295z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E') no-repeat #621A4F;
  background-position: 50% 33%;
  background-size: 30%;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 100px;
  right: 20px;
  margin: 2em;
  }

.circle p {
  text-align: center;
  font-family: "lyon-text", serif;
  font-style: bold;
  font-size: 1em;
  transform: rotate(-10deg);
  padding-top: 65px;
  padding-left: 20px;
}

@media all and (max-width: 680px) {



    .circle {
    width: 60px;
    height: 60px;
    background-position: 50% 35%;
    background-size: 40%;
    right: 8px;
    top: -11px;
  }

  .circle p {
    font-size: 0.5em;
    padding-top: 35px;
    padding-left: 8px;
  }
}

@media all and (min-width: 1200px) {
  .circle {
    right: 15%;
  }
}

@media all and (min-width: 1800px) {
  .circle {
    right: 25%;
  }
}