/*
Theme Name: Alu Glas Theme
Author: Ewald Natter
Author URI: http://www.freelenz.at
Version: 1.0
*/

@import url("assets/css/slick.css");
@import url("assets/css/fancybox.css");

* {
  outline: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  box-sizing: border-box;  
  -webkit-font-smoothing: grayscale;
  }

IMG {
  vertical-align: bottom;
  }    
  
A {
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border 0.2s;
  color: #6a6e71;
  }  
  
A:hover {
  color: #000;
  }  
  
UL, LI {
  list-style-type: none;
  }
  
P {
  margin-bottom: 1.5em;
  }  
  
P:last-child {
  margin-bottom: 0;
  }
  
#grid {
  background: url('assets/img/grid-17.svg') repeat-y;
  background-size: 100% auto;
  min-height: calc(100vh - (var(--padding) * 2));
  container-type: inline-size;
  }   
  
#grid.hide {
  background: none !important;
  }
  
/* HEADER
------------------------------------------------------------------------------ */

HEADER {
  float: right;
  width: calc(220cqw / var(--grid-width) * 100);
  position: fixed;
  top: var(--padding);
  right: var(--padding);
  z-index: 3;
  }
  
HEADER A {
  color: #d9dadb;
  }  
  
HEADER A:hover {
  color: #6a6e71;
  }  
  
HEADER #logo {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--grid-column);
  height: var(--grid-column);
  float: right;
  font-size: var(--grid-column);
  }  
  
HEADER #bg { 
  display: none;
  }  
  
HEADER NAV UL LI {
  width: var(--grid-column);
  height: var(--grid-column);
  display: flex;
  margin-left: var(--gap);
  margin-bottom: var(--gap);
  position: relative;
  clear: both;
  }  
  
HEADER NAV UL LI:after {  
  content: " ";
  position: absolute;
  width: var(--grid-column);
  height: var(--grid-column);
  left: calc(var(--grid-column) + var(--gap));
  background: url('assets/img/lines.svg') no-repeat center center;  
  }  
  
HEADER NAV UL LI:nth-child(odd):after {  
  transform: rotate(90deg);
  }
  
HEADER NAV UL LI:nth-child(even){
  float: right;
  }  
  
HEADER NAV UL LI:nth-child(even):after {  
  left: auto;
  right: calc(var(--grid-column) + var(--gap));
  }  
  
HEADER NAV UL LI:first-child:after {    
  display: none;
  }
  
HEADER NAV UL LI A {
  font-size: calc(20cqw / var(--grid-width) * 100);
  font-weight: bold;
  width: 100%;
  border: calc(4cqw / var(--grid-width) * 100) solid #d9dadb;
  padding: calc(4cqw / var(--grid-width) * 100);
  }   
  
HEADER NAV UL LI.current-menu-item A,
HEADER NAV UL LI.current-page-ancestor A,
HEADER NAV UL LI A:hover {  
  background: #6a6e71;
  border-color: #6a6e71;
  color: #fff;
  }
  
BODY.home HEADER NAV UL LI:before,
BODY.home HEADER NAV UL LI:after {  
  background-image: url('assets/img/lines-white.svg');
  }  
  
/* SUBNAV
------------------------------------------------------------------------------ */    

#subnav {
  position: absolute;
  top: 0;
  right: calc((var(--grid-column)*2 + (var(--gap)*2)));
  }
  
#subnav .button {
  display: block;
  width: calc(45cqw / var(--grid-width) * 100);
  height: calc(45cqw / var(--grid-width) * 100);
  margin-bottom: var(--gap);
  text-align: center;
  cursor: pointer;
  float: right;
  clear: both;
  }  
  
#subnav .button I {
  display: inline-block;
  line-height: calc(45cqw / var(--grid-width) * 100);
  font-size: calc(25cqw / var(--grid-width) * 100);
  }  
  
#subnav .button.light {  
  background: #d9dadb;
  color: #6a6e71;
  }  
  
#subnav .button.dark {  
  background: #6a6e71;
  color: #fff;
  }
  
#subnav .button.light:hover {  
  background: #6a6e71;
  color: #d9dadb;
  }  
  
#subnav .button.dark:hover {  
  background: #d9dadb;
  color: #6a6e71;
  }  
  
#subnav .button.hide {
  display: none;
  }  
  
#subnav #projects {
  background: #d9dadb;
  margin-bottom: var(--gap);
  font-size: calc(30cqw / var(--grid-width) * 100);
  display: none;
  position: relative;
  width: calc((var(--grid-column)*4) + (var(--gap)*3));
  }  
  
#subnav #projects .scrolling {  
  height: calc(540cqw / var(--grid-width) * 100);
  }f
  
#subnav #projects .padding {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  padding-right: var(--grid-width);
  }  
  
#subnav #projects A.close {  
  color: #6b6f72;
  position: absolute;
  top: 0;
  right: 0;
  }

#subnav #projects A.close:hover { 
  color: #000;  
  }

#subnav #projects A.close I {   
  font-size: calc(22cqw / var(--grid-width) * 100);  
  }
  
#subnav #projects .project A {
  padding: 0 var(--gap);
  padding-right: calc(50cqw / var(--grid-width) * 100);
  color: #6a6e71;
  display: inline-block;
  } 
  
#subnav #projects .project:first-child {
  padding-right: var(--grid-column);
  }   
  
#subnav #projects .project A:hover {   
  color: #000;
  }
  
/* BACK TO TOP
---------------------------------------------------------------------------- */ 
  
#top {
  display: none;
  }  
  
/* SLICK
------------------------------------------------------------------------------ */  

.slick-dots {
  position: absolute;
  bottom: var(--padding);
  width: 100%;
  text-align: center;
  }
    
.slick-dots LI {
  display: inline-block;
  margin: 0 4px;
  }
  
.slick-dots LI BUTTON {
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  background: none;
  text-indent: -100000px;
  cursor: pointer;
  }  
  
.slick-dots LI.slick-active BUTTON {
  background: #fff;
  }  
  
/* HOME
------------------------------------------------------------------------------ */

BODY.home #page {
  overflow: hidden;
  padding: 0;
  }
 
BODY.home HEADER A {
  color: #fff;
  border-color: #fff;
  } 
  
BODY.home HEADER NAV UL LI A:hover {
  background: #fff;
  border-color: #fff;
  color: #6a6e71;
  }     
  
BODY.home #subnav {
  display: none;
  }  
  
BODY.home #grid {
  background: none;
  padding: var(--padding);
  }
  
BODY.home H2.wp-block-heading {
  color: #fff;
  }

BODY.home #slider {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  }
  
BODY.home #slider .slick-list {
  width: 100vw;
  }  
  
BODY.home #slider .slick-slide {
  width: 100vw;
  margin: 0;
  position: absolute;
  left: 0;
  }  
  
BODY.home #slider FIGURE {
  width: 100vw;
  height: 100vh;
  }  
  
BODY.home #slider FIGURE IMG {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  }  
  
BODY.home #slider FIGCAPTION {
  position: absolute;
  color: #fff;
  z-index: 1;
  bottom: var(--padding);
  left: var(--padding);
  font-size: calc(20cqw / var(--grid-width) * 100);
  font-weight: bold;
  }
  
/* CLOSE
------------------------------------------------------------------------------ */   
  
.wp-block-post-content .back {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  line-height: var(--grid-column);
  font-size: calc(25cqw / var(--grid-width) * 100);
  }  
  
.page-id-73 .back {
  display: none !important;
  }   
  
/* TEMPLATE LEISTUNGEN
------------------------------------------------------------------------------ */    

.page-template-leistungen MAIN A:hover {
  color: #6a6e71;
  font-weight: 700;
  }
  
/* PROJEKTE
------------------------------------------------------------------------------ */  

#masonry {
  width: calc((var(--grid-column) * var(--masonry-columns)) + (var(--gap)*var(--masonry-columns)));
  max-width: calc((var(--grid-column) * var(--masonry-columns)) + (var(--gap)*var(--masonry-columns)));
  }
  
#masonry .grid-sizer {
  width: var(--grid-column);
  }
  
#masonry .gutter-sizer {
  width: 0;
  }  

#masonry .grid-item {
  display: block;
  font-size: calc(30cqw / var(--grid-width) * 100);
  overflow: hidden;
  position: relative;
  box-sizing: content-box;
  margin-right: calc(var(--grid-column) + (var(--gap)*2));
  margin-bottom: calc(var(--grid-column) + (var(--gap)*2));
  background: rgba(255,255,255,0.5);
  transition: 0s;
  /*
  margin-right: calc(var(--grid-column) + (var(--gap)*2));
  margin-bottom: calc(var(--grid-column) + (var(--gap)*2));
  margin-right: var(--gap);
  margin-bottom: var(--gap);
  */
  }
  
#masonry .grid-item.landscape-big {  
  width: calc((var(--grid-column)*5) + (var(--gap)*4));
  height: calc((var(--grid-column)*4) + (var(--gap)*3));
  }
  
#masonry .grid-item.landscape-medium {  
  width: calc((var(--grid-column)*4) + (var(--gap)*3));
  height: calc((var(--grid-column)*3) + (var(--gap)*2));
  }  
  
#masonry .grid-item.landscape-small {  
  width: calc((var(--grid-column)*3) + (var(--gap)*2));
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  }   
  
#masonry .grid-item.square-big {  
  width: calc((var(--grid-column)*5) + (var(--gap)*4));
  height: calc((var(--grid-column)*5) + (var(--gap)*4));
  }   
  
#masonry .grid-item.square-medium {  
  width: calc((var(--grid-column)*4) + (var(--gap)*3));
  height: calc((var(--grid-column)*4) + (var(--gap)*3));
  }   

#masonry .grid-item.square-small {  
  width: calc((var(--grid-column)*3) + (var(--gap)*2));
  height: calc((var(--grid-column)*3) + (var(--gap)*2));
  }  
  
#masonry .grid-item.square-tiny {  
  width: calc((var(--grid-column)*2) + (var(--gap)*1));
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  }          
  
#masonry .grid-item.grid-item--width3 {  
  width: calc((var(--grid-column)*3) + (var(--gap)*2));
  }
  
#masonry .grid-item.grid-item--width4 {  
  width: calc((var(--grid-column)*4) + (var(--gap)*3));
  }
  
#masonry .grid-item.grid-item--width5 {  
  width: calc((var(--grid-column)*5) + (var(--gap)*4));
  }
  
#masonry .grid-item.grid-item--height2 {  
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  }
  
#masonry .grid-item.grid-item--height3 {  
  height: calc((var(--grid-column)*3) + (var(--gap)*2));
  }
  
#masonry .grid-item.grid-item--height4 {  
  height: calc((var(--grid-column)*4) + (var(--gap)*3));
  }
  
#masonry .grid-item.grid-item--height5 {  
  height: calc((var(--grid-column)*5) + (var(--gap)*4));
  } 
  
#masonry .grid-item.tile-single {  
  width: calc((var(--grid-column)*1) + (var(--gap)*0));
  height: calc((var(--grid-column)*1) + (var(--gap)*0));
  position: relative;
  }     
  
#masonry .grid-item.tile-double {  
  width: calc((var(--grid-column)*2) + (var(--gap)*1));
  height: calc((var(--grid-column)*1) + (var(--gap)*1));
  margin-bottom: 0;
  position: relative;
  }          
  
#masonry .grid-item .tile {
  float: left;
  width: var(--grid-column);
  height: var(--grid-column);
  margin-right: var(--gap);
  margin-bottom: var(--gap);
  top: 0;
  left: 0;
  background: url(assets/img/lines.svg) no-repeat center center;
  }
  
#masonry .grid-item .tile.square {  
  background: none;
  border: calc(4cqw / var(--grid-width) * 100) solid #d9dadb;
  }
  
#masonry .grid-item .tile.empty {
  background: none;
  }  
  
#masonry .grid-item .tile:last-child {   
  margin-right: 0;
  }
    
#masonry .grid-item .tile.vertical {   
  transform: rotate(90deg);
  }
  
#masonry .grid-item FIGURE {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  }

#masonry .grid-item IMG {  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  
#masonry .grid-item BLOCKQUOTE {
  font-weight: bold;
  margin-bottom: 1.4em;
  }
  
/* PROJEKTE FIX
------------------------------------------------------------------------------ */   

#masonry.fixed .project,
#masonry.fixed .testimonial {
  float: left;
  z-index: 1;
  }
  
#masonry.fixed #p2 {
  margin-top: calc((var(--grid-column)*2) + (var(--gap)*2));
  }  
  
#masonry.fixed #p4 {
  margin-top: calc((var(--grid-column)*-2) + (var(--gap)*-2));
  }
   
#masonry.fixed #p6 {
  margin-top: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  }  
  
#masonry.fixed #p7 {
  clear: both;
  }  
  
#masonry.fixed #p8 {
  margin-top: calc((var(--grid-column)*1) + (var(--gap)*1));
  margin-right: var(--gap);
  } 
  
#masonry.fixed #p10 {
  float: right;
  margin-bottom: var(--gap);
  margin-top: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  }        
  
#masonry.fixed #t2 {
  float: left;
  top: calc((var(--grid-column)*1) + (var(--gap)*1));
  width: calc((var(--grid-column)*5) + (var(--gap)*4));
  height: calc((var(--grid-column)*4) + (var(--gap)*3));
  }   
  
#masonry.fixed #s1 {
  position: absolute;
  left: calc((var(--grid-column)*7) + (var(--gap)*7));
  top: calc((var(--grid-column)*1) + (var(--gap)*1));
  width: calc((var(--grid-column)*2) + (var(--gap)*2));
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  }     
  
#masonry.fixed #s2 {
  float: left;
  clear: both;
  width: calc((var(--grid-column)*3) + (var(--gap)*3));
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  margin-top: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  margin-left: calc((var(--grid-column)*4) + (var(--gap)*4));
  margin-right: 0;
  }  
  
#masonry.fixed #s3 {
  float: left;
  margin-top: calc((var(--grid-column)*2) + (var(--gap)*2));
  margin-left: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  margin-right: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  }  
  
#masonry.fixed #s4 {
  float: left;
  height: calc((var(--grid-column)*2) + (var(--gap)*1));
  margin-right: var(--gap);
  }   
  
#masonry.fixed #s5 {
  float: left;
  clear: both;
  margin-right: var(--gap);
  top: calc((var(--grid-column)*1) + (var(--gap)*1));
  }   
  
#masonry.fixed #s6 {
  clear: both;
  float: right;
  margin-top: calc((var(--grid-column)*-1) + (var(--gap)*-1));
  }      
  
/* PROJEKT DETAILSEITE
------------------------------------------------------------------------------ */    

.single-project H2.wp-block-heading {
  padding-right: calc(var(--grid-column)*2 + var(--gap));
  margin-bottom: calc(65cqw / var(--grid-width) * 100);
  }   

/* FANCYBOX CUSTOM
------------------------------------------------------------------------------ */   
  
BUTTON[data-fancybox-toggle-slideshow],
BUTTON[data-panzoom-action] {
  display: none !important;
  }
  
.fancybox__container {
  padding: calc(var(--padding) + var(--grid-column) + var(--gap)) 0 !important; 
  }  
  
.fancybox__infobar {
  font-family: "cholla-sans";
  text-shadow: none;
  }