/*
Theme Name: Marte Marte 2018
Author: Ewald Natter
Author URI: http://www.freelenz.at
Version: 2.0
*/

@font-face {
  font-family: 'Gedau-Roman';
  src: url('fonts/GedauMarteMarteRoman.woff') format('woff');
  }
  
@font-face {
  font-family: 'Gedau-Book';
  src: url('fonts/gedaugothic_book_pseudomono.woff') format('woff');
  }  
  
@font-face {
  font-family: 'Gedau-Medium';
  src: url('fonts/GedauMarteMarteMedium.woff') format('woff');
  }


* {
  outline: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  }
  
HTML {
  height: 100%;  
  }  
  
BODY {
  color: #000;
  font-family: Gedau-Book;
  font-size: 16px;
  line-height: 1.5;
  height: 100%;
  background: #fff;
  overflow-x: hidden;
  }
  
BODY.home {
  background: #000;
  }
  
STRONG {
  font-weight: normal;
  font-family: Gedau-Medium;
  }     
  
P {
  margin-bottom: 1.3em;
  }  
  
A {
  text-decoration: none; 
  color: #000;
  transition: 0.2s;
  }
  
ADDRESS {
  font-style: normal;
  }  
  
A:hover {
  color: #ea195c;
  }    
  
IMG {
  vertical-align: bottom;
  } 
  
UL, LI {
  list-style-type: none;
  }  
  
.mobile {
  display: none;
  }  

  
/* LAYOUT 
------------------------------------------------------------------------------ */   

#page {
  margin: 0 auto;
  position: relative;
  height: 100%;
  }  
  
#grid {
  margin: 0 -5px;
  } 
  
.vertical-align {
  display: table;
  width: 100%;
  height: 100%;
  }  
  
.vertical-align .middle,
.vertical-align .center {
  display: table-cell;
  vertical-align: middle;
  } 
  
.vertical-align .bottom {
  display: table-cell;
  vertical-align: bottom;
  }  

.nada {
  padding: 25px;
  color: #999;
  position: absolute;
  top: 0;
  bottom: 66px;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
.columns:after {
  content: " ";
  display: table;
  clear: both;
  }  
  
.columns.c5 .column {
  width: 20%;
  float: left;
  }  
  
MAIN.frame {
  padding: 2.5vw 5vw 2.5vw 5vw;
  }  
  
MAIN.frame FIGURE {
  padding-bottom: 5vw;
  }
  
MAIN IMG {
  max-width: 100%;
  height: auto;
  }  
  
/* HEADLINES 
------------------------------------------------------------------------------ */   

H1 {
  font-size: 30px;
  line-height: 32px;
  }
  
/* HEADER
------------------------------------------------------------------------------ */   

HEADER {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 66px;
  background: #161616;
  color: #4c4c4c;
  z-index: 10;
  transition: 0.2s;
  }
  
HEADER.active {
  height: 350px;
  }  
  
HEADER #scrollable {
  height: 100%;
  width: 100%;
  left: 0;
  left: 0;
  position: absolute;
  }  
  
HEADER #logo {
  position: absolute;
  left: 25px;
  line-height: 66px;
  z-index: 10;
  }

HEADER #logo A {
  color: #fff;
  } 
  
HEADER #logo #martemarte {
  display: none;
  }
  
HEADER.active #logo #page-title {
  display: none;
  }  
  
HEADER.active #logo #martemarte {
  display: block;
  float: left;
  }      
  
HEADER.active #logo A:hover {
  color: #ea195c;
  }   
  
HEADER NAV.main {
  padding-top: 22px;
  opacity: 0;
  transition: 0.2s;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  }  
  
HEADER.active NAV {
  opacity: 1;
  }  
  
HEADER NAV.main UL {
  overflow: hidden;
  margin-bottom: 2em;
  }  
  
HEADER NAV UL LI {
  float: left;
  width: 10vw
  }  
  
HEADER NAV UL LI A {
  color: #fff;
  }
  
HEADER NAV UL LI.hide > A {
  opacity: 0;
  }      
  
HEADER NAV UL UL LI {
  float: none;
  }  
  
HEADER NAV UL UL LI A {
  color: #4c4c4c;
  } 
  
HEADER ADDRESS {   
  opacity: 0;
  transition: 0.2s;
  position: absolute;
  bottom: 20px;
  line-height: 1.25;
  }
  
HEADER ADDRESS A {
  color: #4c4c4c;
  }  
  
HEADER.active ADDRESS P {
  margin-bottom: 0;
  }  
  
HEADER.active ADDRESS {   
  opacity: 1;
  }
  
HEADER #languages {
  position: absolute;
  top: 22px;
  right: 80px;
  opacity: 1;
  }
  
HEADER.active #languages {    
  opacity: 1;
  transition: 0.2s;
  }
  
HEADER #languages .wpml-ls-legacy-list-horizontal {
  border: none;
  padding: 0;
  }  
  
HEADER #languages UL LI A {
  padding-right: 1em;
  padding-left: 0;
  }  
  
HEADER #logo,
#bar .title {
  display: block;
  }  
  
HEADER #social {
  position: absolute;
  bottom: 25px;
  left: 25px;
  opacity: 0;
  }  
  
HEADER.active #social {   
  opacity: 1;
  }  
  
HEADER #social UL {
  overflow: hidden;
  }  
  
HEADER #social UL LI {
  float: left;
  width: auto;
  margin-right: 15px;
  }  
  
HEADER #social UL LI A {
  display: block;
  text-indent: -10000px;
  width: 33px;
  height: 33px;
  background-repeat: no-repeat;
  background-size: 33px auto;
  background-position: center center;
  opacity: 0.25;
  transition: 0.2s;
  }  
  
HEADER #social UL LI A:hover {
  opacity: 1;
  }  
  
HEADER #social .facebook A {
  background-image: url('images/social-facebook.svg');
  }  
  
HEADER #social .instagram A {
  background-image: url('images/social-instagram.svg');
  }  
  
HEADER #social .linkedin A {
  background-image: url('images/social-linkedin.svg');
  }      

/* MOBILE MENU
------------------------------------------------------------------------- */   
  
#icon-menu {
  display: block;
  position: absolute;
  z-index: 10000;  
  top: 0px;
  right: 0;
  width: 66px;
  height: 66px;
  cursor: pointer;
  background: url('images/icon-hamburger.svg') no-repeat center center;
  background-size: 28px auto;
  }

#icon-menu.open  {
  background-image: url('images/icon-close.svg');
  background-size: 20px auto;
  }   

/* ARBEITEN / STARTSEITE
------------------------------------------------------------------------------ */   

#projects {
  overflow: hidden;
  padding-bottom: 5vw;
  margin-top: -2px;
  }

#projects .project {
  width: 20%;
  font-size: 24px;
  float: left;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  }
  
#projects .project .image {
  display: block;
  padding-bottom: 100%;
  position: relative;
  margin: -1px;
  }  
  
#projects .project .progressive-image .loadingImage {
	filter: blur(15px);
  }  
  
#projects .project .image .square {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }  
  
#projects .project IMG {
  width: 100%;
  height: 100%;
  height: auto;
  }    
  
#projects .project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: #161616;
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0;
  text-align: left;
  transition: 0.2s;
  padding: 15px 20px;
  box-sizing: border-box;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px auto;
  } 
  
#projects .project.loading .overlay {
  background-image: url('images/loading-spin-white.svg');
  }  
  
#projects .project .overlay .title,
#projects .project .overlay .category {
  display: block;
  line-height: 1.25em;
  }  
  
#projects .project .overlay .category {
  color: #4c4c4c;
  } 
  
#projects .project .overlay HR {
  height: 1px;
  border: none;
  border-top: 1px solid #222;
  margin: 20px -20px;
  }   
  
#projects .project .overlay .attribute {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: #4c4c4c;
  }   
  
#projects .project:hover .overlay {  
  opacity: 1;
  }
  
/* KATEGORIE 
------------------------------------------------------------------------------ */   

BODY.archive {
  background: #000;
  }
  
/* SINGLE PROJECT
------------------------------------------------------------------------------ */   

#project {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 20;
  }

#bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 66px;
  background: #161616;
  z-index: 30;
  color: #fff;
  }
  
#bar .title {
  line-height: 66px;
  padding-left: 25px;
  }
  
#bar .close {
  display: block;
  text-indent: -1000000px;
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 66px;
  background: url('images/icon-close.svg') no-repeat center center;
  background-size: 20px auto;
  cursor: pointer;
  }    
  
#bar #arrow {
  display: block;
  width: 66px;
  height: 66px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -33px;
  background: url('images/arrow-down.svg') no-repeat center center;
  background-size: 20px auto;
  cursor: pointer;
  transition: 0.4s;
  }  

#bar.s1 #arrow {
  display: none;
  }  
  
#bar #arrow.up {
  transform: rotate(-180deg);
  }  
  
/* JSP Pane
------------------------------------------------------------------------- */    

#scrolltext {
  overflow: visible !important;
  }

.jspContainer {
	position: relative;
  }

.jspPane {
	position: absolute;
	top: 0;
	height: 100%;
  }
  
.jspVerticalBar + .jspPane {
  height: auto;
  }  

.jspVerticalBar {
	position: absolute;
	top: -5vw;
	bottom: -5vw;
	left: -5vw;
	width: 16px;
	margin-bottom: -1px;
	z-index: 10;
  }

.jspVerticalBar .jspArrow,
.jspVerticalBar .jspCap {
	height: 7.5vw;
	width: 50vw;
  }
  
.jspVerticalBar .jspArrow {
  height: 5vw;
  width: 5vw;
  transition: 0.2s;
  opacity: 0.2;
  }
  
.column.left:hover .jspVerticalBar .jspArrow:hover {
  opacity: 1;
  }
  
.jspVerticalBar .jspCapTop {
  position: absolute;
  top: 0px;
  height: 5vw;
  display: block;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  display: none;
  }    

.jspVerticalBar .jspArrowUp {
  position: absolute;
  z-index: 10;
  top: 0;
  background: url('images/arrow-down-black.svg') no-repeat center center;
  background-size: 14px auto;
  cursor: pointer;
  transform: rotate(180deg);
  }

.jspVerticalBar .jspCapBottom {
  position: absolute;
  height: 7.5vw;
  bottom: 0px;
  display: block;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  display: none;
  }
  
.jspVerticalBar .jspArrowDown {  
  position: absolute;
  z-index: 10;
  bottom: 0;
  background: url('images/arrow-down-black.svg') no-repeat center center;
  background-size: 16px auto;
  cursor: pointer;
  }
  
.jspVerticalBar .jspDisabled {
  opacity: 0 !important;
  }  

/* PROGRESSIVE IMAGE
------------------------------------------------------------------------- */     
  
.progressive-image {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
  }

.progressive-image div {
  width: 100%;
  height: 100%;
	background-size: cover !important;
	background-position: center top !important;
  }

.progressive-image .loadingImage {
	background: #fff url('images/loading-spin.svg') no-repeat center center !important;
	background-size: 36px auto !important;
  }
  
/*  
.progressive-image .loadingImage:after {
  content: " ";
  width: 100px;
  height: 100px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;  
  z-index: 100;
  border: 1px solid #ff0000;
  }  
*/  
  
.progressive-image .loadingImage.hide {
  opacity: 0;
  }  

.progressive-image .overlay {
	position: absolute;
  top: 0;
	opacity: 0;
	transition: opacity 200ms ease-in;
  }   
  
/* SWIPER ELEMENT
------------------------------------------------------------------------- */   

#swiper {
  background: url('images/loading-spin.svg') no-repeat center center;
  background-size: 36px auto;
  position: fixed;
  top: 0;
  bottom: 66px;
  left: 0;
  width: 100%;
  }
  
#stage > .swiper-wrapper {
  opacity: 0;
  transition: 0.2s;  
  }
  
BODY.projects-loaded #stage > .swiper-wrapper {
  opacity: 1;
  }  
  
.swiper-slide {
  text-align: center;
  background: #fff;
  height: 100% !important;
  overflow: hidden;
  }
  
#swiper .image.fullscreen,
#swiper .image.contain {
  width: 100%;
  height: 100%;
  position: relative;
  }
  
#swiper .image.fullscreen.top-left DIV.overlay { background-position: left top !important; }
#swiper .image.fullscreen.top-center DIV.overlay { background-position: center top !important; }
#swiper .image.fullscreen.top-right DIV.overlay { background-position: right top !important; }
#swiper .image.fullscreen.center-left DIV.overlay { background-position: left center !important; }
#swiper .image.fullscreen.center-center DIV.overlay { background-position: center center !important; }
#swiper .image.fullscreen.center-right DIV.overlay { background-position: right center !important; }
#swiper .image.fullscreen.bottom-left DIV.overlay { background-position: left bottom !important; }
#swiper .image.fullscreen.bottom-center DIV.overlay { background-position: center bottom !important; }
#swiper .image.fullscreen.bottom-right DIV.overlay { background-position: right bottom !important; }
  
#swiper .image .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  }
  
#swiper .image .wrapper FIGURE {
  display: inline;
  position: relative;
  } 

#swiper .image .wrapper IMG {
  max-height: 100%;
  max-width: 100%;
  vertical-align: top;
  opacity: 0;
  }    
  
#swiper .image FIGCAPTION {
  position: absolute;
  text-align: right;
  z-index: 10;
  right: 0;
  top: 0;
  padding: 10px 15px;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transition: 0.2s;
  }   
  
.monografie #swiper .image FIGCAPTION {
  color: #000;
  }
  
.monografie #swiper .image .wrapper FIGURE {
  display: block;
  width: 100%;
  }
  
#swiper .image:hover FIGCAPTION {
  opacity: 1;
  }  
 
#swiper .image.contain .progressive-image div.overlay {
  background-size: contain !important;
  background-repeat: no-repeat;
  }  
  
#swiper .video {
  background: #000;
  height: 100%;
  } 
  
#swiper .video .fullscreen {
  height: 100%;
  }   
  
#swiper .video .fullscreen:before {
  content: " ";
  position: absolute;
  top: 0;
  width: 100%;
  height: 40vh;
  }  
  
#swiper .video IFRAME {
  width: 100%;
  height: 100%;
  max-height: 100%;
  }  
  
.columns {
  position: absolute;
  top: 0;
  bottom: 5vw;
  height: 100%;
  width: 100%;
  }  
  
.columns .column {
  float: left;
  width: 50%;
  position: relative;
  height: 100%;
  }
  
.columns .column.small {
  width: 50%;
  }  
  
.columns .column.big {
  width: 50%;
  }    
  
.columns .column.right {
  float: right;
  }  
  
.columns .column .column {
  width: 100%;
  float: none;
  } 
  
.columns.columnize {
  padding: 2.5vw 5vw;
  text-align: left;
  column-count: 2;
  column-gap: 5vw;
  column-fill: auto;
  }
  
.columns .column .text {
  position: absolute;
  top: 5vw;
  left: 5vw;
  bottom: 5vw;
  right: 5vw;
  text-align: left;
  }
  
.columns .column .text.small {
  font-size: 12px;
  }  
  
.columns .column .text.small,
.columns .column .text.big {
  top: 5vw;
  }  
  
.columns .column.left .text,
.columns .column.left .image {
  right: 2.5vw;
  } 
  
.columns .column.right .text,
.columns .column.right .image {
  left: 2.5vw;
  }  
  
.columns .column.big .text {    
  left: 0;
  } 
  
.columns .column.small .text {    
  right: 5vw;
  left: auto;
  width: 60%;
  float: right;
  }    
  
.columns .text.centered {
  height: 100%;
  }   
  
.columns .text.centered .content {
  max-width: 600px;
  padding: 25px;
  margin: 0 auto;
  text-align: left;
  }   
  
.columns .text.centered .content P:last-child {
  margin-bottom: 0;
  }     
  
.columns .column.single {
  width: 100%;
  }
  
.columns .column .image {
  position: absolute;
  top: 2.5vw;
  left: 5vw;
  bottom: 2.5vw;
  right: 5vw;
  transition: 0.2s;
  } 
  
.columns .column .progressive-image div.overlay {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  }
  
#swiper .image.plan {
  position: absolute;
  top: 2.5vw;
  bottom: 2.5vw;
  left: 5vw;
  right: 5vw;
  }
  
#swiper .image.plan .progressive-image div.overlay {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  }  

/* PAGE
--------------------------------------------------------------------- */    

BODY.page #content {
  padding: 25px 50px 70px 25px;
  color: #999;
  }
  
BODY.page #content H1 {
  font-weight: normal;
  color: #000;
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 1em;
  }
  
/*     
  
BODY.page:not(.home) .column {
  position: static;
  } 
  
BODY.page .columns .column .text {
  position: static;
  padding: 2.5vw 5vw;
  }
  
BODY.page .columns .column.left .text {    
  padding-top: 7.5vw;
  padding-right: 5vw;
  }
  
BODY.page .columns .column.right .text {    
  padding-left: 5vw;
  }  
  
*/  
  

/* TEAM
------------------------------------------------------------------------- */    

#team .post-thumbnail {
  margin-top: -2.5vw;
  margin-left: -5vw;
  margin-right: -5vw;  
  }

#team .portraits {
  margin-right: -100px;
  padding-bottom: 50px;
  width: auto;
  font-size: 14px;
  }

#team .portrait {
  padding-right: 100px;
  margin-bottom: 0.75em;
  }

#team .portrait .image {
  padding-bottom: 100%;
  background: #eee;
  position: relative;
  top: 0;
  left: 0;
  }
  
#team .portrait .image IMG {
  position: absolute;
  width: 100%;
  height: auto;
  }  
  
#team .person .meta {
  height: 8em;
  line-height: 1.3;
  } 
  
#team .person .meta .email {
  white-space: nowrap;
  display: block;
  }  
  
#team .person .position {
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }     
  
#team .columns {
  position: static;
  }  
  
/* AUSZEICHNUNGEN
------------------------------------------------------------------------- */   

#awards .column {
  padding-bottom: 75px;
  height: auto;
  }
  
#awards .column.left {
  position: fixed;
  } 
  
#awards .column .text {
  bottom: 0;
  position: relative;
  padding-bottom: calc(66px + 5vw);
  padding-right: 5vw;
  }   

#awards .year {
  position: relative;
  padding-left: 5em;
  padding-bottom: 1em;
  }
  
#awards .year H3 {
  position: absolute;
  font-size: inherit;
  font-weight: normal;
  top: 0;
  left: 0;
  }  

  
/* 404
------------------------------------------------------------------------- */     

.error404 MAIN {
  text-align: center;
  width: 100%;
  color: #999;  
  position: absolute;
  top: 0;
  bottom: 350px;
  }
  
.error404 MAIN H1 {
  font-size: 40px;
  color: #000;
  }  

/* GRAYSCALE
------------------------------------------------------------------------- */
  
/*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
.grayscale{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}