@charset "UTF-8";



/* Reset  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}




/* General Typography  ------------------------------------------- */

p, ul, ol, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 1.1rem;
}

/* Headings */
h1, h2, h3 {
letter-spacing: .01rem;
 font-family: inherit;
 font-weight: 400;
}

h1 {
  font-size: .8rem;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 1.75rem;

}

h2 {
  font-size: .6rem;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

h3 {
  font-size: .6rem;
  line-height: 1.25;
  text-align: left;
  margin-bottom: .5rem;
}

h4 {
  font-size: 1rem;
}

@media all and (min-width: 47em) {
	h1 {
	  font-size: .95rem;
}	

	h2, h3 {
	  font-size: .75rem;
}
	}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid;
}

a:hover, a:focus, a:active {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  border-bottom: 0px solid;
}

/* Misc */


b, strong {
  font-weight: 400;
  text-transform: uppercase; 
}

.text {
	font-size: .75rem;
}


/* Images & Figures  --------------------------------------------- */



figcaption {
  font-size: .75rem;
  line-height: 1.5rem;
}

/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}



/* Site   ==================================================== */

html {
  color: #000000;
  font: 400 1.1em/1.5 "Heebo";
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  cursor: default;
  /* Neccessary for sticks footer. */
  position: relative;
  height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}



body {
  /* space for sticky footer */
  margin-bottom: 0rem;
}

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

.header {
  padding-top: 1.5rem;
}

.branding {
  text-align: left;
  text-transform: uppercase;
  font-size: .95rem;
  border: 0px solid;
  background: rgba(255,  255,  255, 1);
  padding: .35rem .6rem .22rem;
  position: fixed;
  left: .5rem;
  top: .7rem;
  z-index: 100;

  white-space: nowrap;
}

.branding a {
  border-bottom: 0;
}



/* Menu  --------------------------------------------------------- */

.menu {
  font-size: .6rem;
  line-height: .9em;
  letter-spacing: .01rem;

  text-transform: uppercase;
  vertical-align: baseline;
  position: fixed; 
  left: .5rem;
  top: 3rem;
  z-index: 100;
}

.menu-item {
	  text-align: left;
	  margin-right: .6em;
	   background: #ffffff;
 padding: .5rem .8rem;
 margin-bottom:  .3rem;
 display: inline-block;	
}



.menu-item a {
	
 border-bottom: 0;


}

.menu-item.is-active a {
  border-bottom: 0px solid;
}

.toptitle {
  font-size: .8rem;
   padding: .6rem .7rem .5rem;
  line-height: .9em;
  letter-spacing: .01rem;
  vertical-align: baseline;
  position: fixed; 
  right: 1rem;
  bottom: 7rem;
  z-index: 500;
  background: #ffffff;
  color: #000;
}

	
@media all and (min-width: 47em) {
	
.branding {
	  text-align: center;
	  left: 1.6rem;
	  top: 1.6rem;
	  font-size: 1.3rem;
}

.menu {
	font-size: .7rem;
   left: 1.6rem;		
   top: 5.5rem;
		}
		
.menu-item a {
	margin-bottom:  2rem;

}

.menu-item {
 margin-bottom:  1rem;		
}	

.toptitle {
	  right: 2.5rem;
}

	
}
	
	
.front {
	position:relative;
	background: rgba(255,  255,  255, 0.92);
	
}



/* Main Content  ------------------------------------------------- */

.main {
  padding-top: 9rem;
  padding-bottom: 1.5rem;
}



@media all and (min-width: 31.5em) {
	  .main {
	  padding-top: 9rem;
}
}


@media all and (min-width: 47em) {
	.main {
  padding-top: 5.8rem;
  }
	}


/* Homepage  ----------------------------------------------------- */


#slides {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; 
    height: auto; /* optionally add !important for WP version */
    width: auto;
}

#back {
	position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; 
    height: auto; /* optionally add !important for WP version */
    width: auto;
    z-index: -200;
}

#back img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#homecaption {
  font-size: .7rem;
  text-align: left;
  border: 0px solid;
  background: rgba(255,  255,  255, 1);
  padding: .45rem .7rem;
  position: fixed;
  right: .5rem;
  bottom: 1rem;
  z-index: 100;
  white-space: nowrap;
  height: 1.9rem;
}

td {
	padding-right: .5rem;
}

.ig img{
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  z-index: 100;
  width: 20px;
  height: 20px;
}


@media all and (min-width: 31.5em) {
#homecaption {
	  right: 1rem;
	  bottom: 1rem;
}
}

@media all and (min-width: 47em) {
#homecaption {
	  right: 1.6rem;
	  bottom: 1.6rem;
}

.ig img{
  left: 2.4rem;
  top: 17rem;
  width: 25px;
  height: 25px;
}
}



/* Grid & Layout  ------------------------------------------------ */

.grid {
  font-size: 0;
}

.grid {
  	max-width: 1600px;
	background-color: #fff;

}

.grid-sizer, .grid-item { 
	height: auto;
	width: 47.5%; 
	margin-bottom: 5%;
	float: left;
}

.gutter-sizer { 
	width: 5%; 
}

.grid-item img {
	width: 100% ;
}

.grid:after {
  	content: "";
  	display: block;
  	clear: both;
}

.grid.gutter-1 {
  /* We don’t use the shorthand attribute `margin: …` here
     to make vertical margin easily overridable by other
     styles with a lower specifity. */
  margin-left: -1rem;
  margin-right: -1rem;
}

.grid.gutter-1 .column {
  padding-left: 1rem;
  padding-right: 1rem;
}


.column {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  max-width: 42rem;
}

  .text.wrap {
	max-width: 16rem;
	padding: 1.5rem 2rem 1rem;
}

.wrap.wide {
   max-width: 60rem;
   padding-left: 1.2rem;
   padding-right: 1.2rem;
}

.center {
	margin: 0 auto;
}



@media all and (min-width: 35em) {

  
  .grid-sizer, .grid-item { 
	width: 30%; 
  }
}

@media all and (min-width: 47em) {
  .wrap {
    padding-left: 3rem;
    padding-right: 3rem;

  }
  .wrap.wide {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
   .text.wrap {
	max-width: 30rem;
	padding: 1.5rem 2rem 1rem;
}
  

  
  .grid-sizer, .grid-item { 
	width: 30%; 
  }
}


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

.showcase {
  position: relative;
  margin-top: 0rem;
}

.showcase-item {
  list-style: none;
  margin-bottom: 1rem;
  position: relative;
}

@media all and (min-width: 38em) {
  .showcase-item {
    width: 50%;
  }
}

.showcase-link {
  display: block;
  position: relative;
  z-index: 0;
  border-bottom: 0;
}

.showcase-caption {
display: block;
  position: relative;
  text-align: center;
  letter-spacing: .01rem;
  font-size: .75rem;
  line-height: 1.25;
  padding: .5rem 0;
}

.showcase-title {
  font-size: .7rem;
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: 0;
  text-align: center;
  width: 100%;
  padding: .5rem 1.5rem;
}

.showcase-image:before {
	content: "";
	display:block;
	padding-top: 65%;
	}

.showcase-image {
  position: relative;
}

.showcase-image img {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.caption {
	font-size: .85rem;
}

.portrait {
	width: 100%;
	margin-bottom: 30px;
	
}

.left, .right {
	width: 100%;
}



.project-head {
text-align: left;
}

@media all and (min-width: 35em) {
	
.left {
	width: 30%;
}
.right {
	width: 70%;
}	
	
.project-head {
text-align: center;
}
}


/* Footer  ------------------------------------------------ */


.footer {
  position: fixed;
  display: inline-block;
  bottom: 0;
  padding: 15px 0;
  font-size: .55rem;
}

.footer.copyright {
	left: 1.2rem;
	width: 50%;	
	}

.footer p {
  margin-bottom: 0;
}

.footer a {
  border-bottom: 0;
}

.homefoot {
	position: fixed;
	bottom: 0;
	left: 40%;	
}

.footer.imprint {
text-align: right;	
 right: 1.2rem;
 width: 50%;	

}


		

	
@media all and (min-width: 47em) {
	
.footer {
padding: 30px 0;
}

.footer.copyright {
  left: 2.5rem;	
}

.footer.imprint {
  right: 2.5rem;
}
	

}