/***GLOBAL VARIABLES
*****************************************************/
:root {
  /***TEXT***/
  --xsmallFont: 0.75rem;
  --smallFont: 0.9rem;
  --mediumFont: 1.25rem;
  --largeFont: 3rem;
  --xlargeFont: 5.25rem;
  --fontWeight: 400;
  --letterSpacing: .02em;
  --wordSpacing: 0em;
  --lineHeightDefault: 1.2;
  --lineHeightLow: 1.1;

  /***COLOR***/
  --paletteWhite: #FFFFFF;
  --paletteGray: #CCCCCC;
  --paletteBlack: #000000; 
  --paletteRed: #EA3330;
  --backColor: var(--paletteBlack);
  --textColor: var(--paletteWhite);
  --linkColor: var(--textColor);
  --hoverColor: var(--paletteRed);

  /***DECORATION***/
  --linkDeco: underline;
  --borderWidth: 2px;
  --borderLine: var(--borderWidth) solid var(--textColor);

  /***SPACES***/
  --rowGutterSmall: calc(var(--smallFont) * var(--lineHeightDefault));
  --rowGutterMedium: calc(var(--mediumFont) * var(--lineHeightDefault));
  --rowGutterLarge: calc(var(--largeFont) * var(--lineHeightLow));
  --colGutter: var(--mediumFont);
  --bodyMargin: 0;
  --headerTop: var(--rowGutterMedium);
  --contentMarginTop: 0;
  --footerMarginTop: calc(var(--rowGutterMedium)*3);

  /***SIZES***/
  --headerHeight: calc(var(--rowGutterMedium)*1);
  --contentWidth: 100%;
  --contentMinHeight: calc(100vh - var(--headerHeight) - var(--contentMarginTop) - var(--footerMarginTop) - var(--footerHeight) - calc(var(--rowGutterMedium)*2));
  --srcWidth: calc(50vw - (var(--colGutter)*2));
  --srcHeight: calc(100vh - (var(--rowGutterMedium)*6));

  /***GRIDS***/
  --twoColsGrid: repeat(2, 1fr);
  --threeColsGrid: repeat(3, 1fr);
  --fourColsGrid: repeat(4, 1fr);
  --sixColsGrid: repeat(6, 1fr);
  --twelveColsGrid: repeat(12, 1fr);
  --gridGap: 0 var(--colGutter);

  /***BLUR***/
  --txtBlur: blur(1.5rem);
  --srcBlur: blur(calc(var(--bodyMargin)*0.75));

  /***SHADOW***/
  --srcShadow: 0vw 0.25vw 1.75vw rgba(0,0,0,0.25);
  --thumbShadow: 0vw 0.125vw 0.75vw rgba(0,0,0,0.25);
  --textShadow: 0 3px 13px rgba(0,0,0,0.9);

  /***TRANSITION***/
  --transitionProperty: color;
  --transitionDuration: 0.3s;
  --transitionNull: 0;
}
  
/***FONTS
*****************************************************/
* {
  -webkit-font-smoothing: smooth;
  -moz-osx-font-smoothing: smooth;
  text-rendering: geometricPrecision;
}
@font-face {
  font-family: Neue Haas Grotesk Regular;
  src: url("../source/Neue_Haas_Grotesk_55_Regular.woff");
}
@font-face {
  font-family: Neue Haas Grotesk Medium;
  src: url("../source/Neue_Haas_Grotesk_65_Medium.woff");
  
}
.xsmall_font {
  font-size: var(--xsmallFont);
  line-height: var(--lineHeightDefault);
}
.small_font {
  font-size: var(--smallFont);
  line-height: var(--lineHeightDefault);
}
.medium_font {
  font-size: var(--mediumFont);
  line-height: var(--lineHeightDefault);
}
.large_font {
  font-size: var(--largeFont);
  line-height: var(--lineHeightDefault);
}
.xlarge_font {
  font-size: var(--xlargeFont);
  line-height: var(--lineHeightLow);
}
.uppercase {
  text-transform: uppercase;
  line-height: var(--lineHeightLow);
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
  display: none;
}
::selection {
  color: var(--backColor);
  background-color: var(--textColor);
}
::-moz-selection {
  color: var(--backColor);
  background-color: var(--textColor);
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: var(--bodyMargin);
  color: var(--textColor);
  background: var(--backColor);
  font-family: "Neue Haas Grotesk Medium", Helvetica, Arial, sans-serif;
  /*font-size: var(--mediumFont);*/
  line-height: var(--lineHeightDefault);
  text-shadow: var(--textShadow);
}
ul {
  display: block;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
li {
  display: block;
}
a {	
  color: var(--linkColor);
  text-decoration: none;
  transition-property: color, border-bottom;
  transition-duration: var(--transitionDuration);
}
a:hover {	
  color: var(--hoverColor);
  transition-property: color;
  transition-duration: var(--transitionDuration);
  text-decoration: none;
}
h1, h2, h3 {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding: 0;
  font-style: normal;
  font-weight: 400;
}
p {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
}
span {
  display: inline;
}
img {
  vertical-align: middle;
}
form, input, submit
iframe, embed, audio {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

/***HEADER AND MENU
*****************************************************/
header {
  width: 100%;
  position: fixed;
  top: var(--rowGutterSmall);
  padding: 0 var(--rowGutterSmall); 
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: start;
  z-index: 50;
}
#info_button.active {
  color: var(--hoverColor);
}
a.logo_malba {
  /*
  height: 60%;
  display: flex;
  align-items: center;
  */
  filter: drop-shadow(var(--textShadow));
}
a.logo_malba img {
  height: 100%;
  filter: invert(0);
  transition-property: filter;
  transition-duration: var(--transitionDuration);
}
a.logo_malba img:hover {
  filter: invert(100%);
}
nav.menu {
  display: inherit;
}
nav.menu ul {
  /*
  display: flex;
  justify-content: end;
  gap: var(--colGutter);
  */
}
nav.menu li.menu_item {
  display: inherit;
}

/***CONTENT
*****************************************************/
.content {
  display: inherit;
}
.content section {
  width: 100vw;
  display: block;
  position: relative;
  /*
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  */
}
section.section_header {
  height: 66vh;
  /*position: relative !important;*/
}
section.section_footer {
  height: 100vh;
}
section img.header_img,
section img.footer_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section img.footer_img {
  object-position: top;
}
section.section_header .title_stack {
  position: absolute;
  width: 100%;
  bottom: -17.65vw;
  perspective-origin: center;
  perspective: 500px;
  z-index: 25;
}
section.section_header #title {
  translate: 0;
  opacity: 1;
  transition-property: translate, opacity;
  transition-duration: var(--transitionDuration);
  pointer-events: none;
}
.content section.section_header #title.hide {
  opacity: 0;
}
.content section.section_footer img.section_img {
  object-position: center top;
}

/***FOOTER
*****************************************************/
footer {
  position: fixed;
  bottom: var(--rowGutterMedium);
  padding: 0 var(--rowGutterSmall); 
  box-sizing: border-box;
  /*
  display: grid;
  grid-template-columns: var(--threeColsGrid);
  grid-gap: var(--gridGap);
  align-items: start;
  */
  translate: 0;
  transition-property: translate, opacity;
  transition-duration: var(--transitionDuration);
}
footer.hide {
  /*translate: 0 calc(100% + var(--rowGutterMedium));*/
  opacity: 0;
}
a.link_malba {
  border-bottom: var(--borderLine);
}
a.link_malba:hover {
  border-bottom: var(--borderWidth) solid var(--hoverColor)
}
iframe {
  filter: drop-shadow(var(--textShadow));
}

/***MEDIA QUERIES
*****************************************************/
@media (max-width:1180px) {
/***TABLET***/
}
@media (max-width:600px) {
/***PHONE***/
}