/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/*MAIN RULES BEGIN*/
:root{
  --orange: rgba(231,68,32,1);
  --black: rgba(0,0,0,1);
  --white: white;
  --grey: #B1B1B1;
  --padding: 50px;
  --ease: cubic-bezier(0.83, 0, 0.17, 1);

}

html{
  font-size: 21px;
  font-size: clamp(21px, 1.5vw, 28px); 
    scroll-behavior: smooth;

}

body{
  /*font-family: "Favorit Pro", sans-serif;*/
  font-family: "Favorit Pro", "Favorit", "Helvetica", sans-serif;
  font-size: 1rem;

  line-height: 1.33em;
  font-weight: 400;
  letter-spacing: 0.0125em;
  text-rendering: geometricPrecision;

  /*padding: var(--padding);*/

  background-color: var(--black);
  color: var(--white);

  counter-reset: counter;
}

body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}


h1,h2,h3,h4, h5{
  text-align: center;
}

h1{
  
}

h2{
  font-size: 1.5rem;
  font-weight: inherit;
  margin-bottom: 0.4em;
}

h3{
  font-size: 1rem;
  font-weight: inherit;
  margin-bottom: 2.5em;
}

h4{
  font-size: 1rem;
  font-weight: inherit;
  margin-bottom: 0.4em;
  /*text-transform: uppercase;*/
}

h5{
  font-size: 1rem;
text-transform: uppercase;
margin: 0 auto;
margin-bottom: 2em;
margin-top: 0em;
font-weight: inherit;
max-width: calc(100% - (var(--padding) * 4) );
}

q {
  quotes: "‘" "’";
}

header blockquote{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
header blockquote cite{
 font-style: italic;
 display: block;
 margin-bottom: 60px;
}

main{
  perspective: 3000px;

}


.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}



/*HEADER CARD*/
#topintro{
  /*position: relative;*/
}
#bottomintro{
  /*position: relative;*/
}

#lockup{
  position: absolute;
  top: 1.25vw;
  height: calc(100% - ( var(--padding) * 2) );
  width: calc(100% - var(--padding));
}
#lockup img{
  height: 92%;
  width: calc( 100% - (var(--padding) * 1 ) );
  object-position: 0% 0%;
  object-fit: contain;
}

#dots{
  position: absolute;
    top: 53%;
    right: var(--padding);
    right: calc( var(--padding) + 1.75%);
    transform: translateY(-50%);
    width: calc( 100% - (var( --padding) * 2 ) );
    width: 77.5%;
}

#artscouncil{
  position: absolute;
  left: var(--padding);
  bottom: var(--padding);
  /*width: 25%;*/
      height: 9%;
  margin-top: var(--padding);
}

#texts{
  position: absolute;
  right: var(--padding);
  bottom: var(--padding);
  width: 35%;
}

.button, .buttonS{
  color: white;
  position: absolute;
  bottom: var(--padding);
  left: 50%;
  transform: translateX(-50%);
text-decoration: none;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,0.5);
    width: 80%;
text-align: center;
}

.buttonS{
  color: black;
  text-shadow: none;
}

.button:after{

}

.button svg, .buttonS svg{
  top: 0.25em;
  position: absolute;
  display: inline-block;
  height: 0.75em;
  margin-left: 0.45em;
  transition: margin-left 0.2s ease-in-out;
}

.button:hover svg, .buttonS:hover svg{
  margin-left: 0.65em;
}

.carddrop span:before, .carddropS span:before{
  display: inline-block;
  content: 'READ MORE';
}
.activeBut span:before{
  display: inline-block;
  content: 'READ LESS';
}

footer{
  color: white;
  font-size: 0.75em;
  max-width: 1600px;
  margin: calc(var(--padding) / 2) auto calc(var(--padding) / 2) auto; 
  margin: 0 auto calc(var(--padding) / 2) auto; 
}




/*MENU*/

#menu{

  position: fixed;
  top: 0px;
  left: 50%;
    transform: translateX(-50%);
  max-width: 1600px;
  margin: 0 var(--padding) 0 var(--padding);
  margin: 0 auto;
  z-index: 99;
  background: rgba(0,0,0, 1);
  width: calc( 100% + 2px - var(--padding) * 2 );
  height: 4em;
  height: 2.125em;
  transition: all 0.3s var(--ease);
     /* background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
    background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);*/
    /*background-color: black;*/
}
#menu.showmenu{
  /*top: -1.375em;*/
  /*height: 4em;*/
      /*height: 2.125em;*/
    opacity: 0;
    pointer-events: none;
}

.menuopen #menu{
  background: rgba(0,0,0, 0);
}



#menutrig{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 0.75em;
  width: 2em;
  display: block;
  top: 0.625em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
#menutrig:before, #menutrig:after{
  content: '';
  height: 1px;
  background-color: white;
  width: 100%;
  display: block;
  position: absolute;
  transition: all 0.3s var(--ease);
  
}
#menutrig:after{
  bottom: 0.125em;
  transform: translateY(50%);
}
#menutrig:before{
  top: 0.125em;
  transform: translateY(-50%);
}
.menuopen #menutrig:after{
  bottom: 50%;
}
.menuopen #menutrig:before{
  top: 50%;
}


#menu.showmenu #menutrig{
  opacity: 0;
  pointer-events: none;
}
.menuopen #menutrig{
  opacity: 1 !important;
  pointer-events: auto !important;
}
.menuopen #menu{
  height: 2em;
}
/*.menuopen #menutrig{
  left: 0%;
  transform: translateX(0%);
  
}*/

#back{
  /*padding-top: 0.625em;*/
  height: 1.125em;
  position: absolute;
  top: 0.45em;
      width: 0.75em;
      transition: all 0.3s var(--ease);
      opacity: 1;
}

#category{
  height: 1.125em;
  position: absolute;
  top: 0.45em;
  right: 0;
  font-size: 0.75em;
  color: #B1B1B1;
  transition: all 0.3s var(--ease);
  opacity: 1;
  pointer-events: none;
  text-transform: uppercase;
}
.home .menuitem{
  opacity: 0 !important;
}
#menu.showmenu #back, #menu.showmenu #category{
  opacity: 0;
  pointer-events: none;
}

/*.menuopen #back, .menuopen #category{
  opacity: 1 !important;
  pointer-events: auto !important;
}
*/
nav{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 50%);

  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s var(--ease);
  overflow-y: scroll;
}

#menuinner{
  margin: var(--padding) auto var(--padding) auto; 
  max-width: 1600px;
  width: calc( 100% - var(--padding) * 2 );
}

/*#menuinner a:hover{
  left: calc(var(--padding) / 2);
}*/

.menuopen{
  overflow-y: hidden;
}

.menuopen nav{
  opacity: 1;
  pointer-events: auto;
}

.menuopen .card{

  position: relative;
  /*left: 40%;*/
  /*transform: translateZ( -6em );*/
  transform: scale(0.8);
}

nav a{
  position: relative;
  left: -2em;
  transition: all 0.6s var(--ease);
  margin-bottom: 1em;
  display: block;
  opacity: 0;
  font-size: calc(1em * 1.125);
  line-height: 1.25em;
  color: white;
  text-decoration: none;
}
#back:hover .st1{
  fill: white;
}

.menuopen nav nav a:nth-of-type(1){
  transition-delay: 0s;
}
.menuopen nav a:nth-of-type(2){
  transition-delay: 0.05s;
}
.menuopen nav a:nth-of-type(3){
  transition-delay: 0.1s;
}
.menuopen nav a:nth-of-type(4){
  transition-delay: 0.15s;
}
.menuopen nav a:nth-of-type(5){
  transition-delay: 0.2s;
}
.menuopen nav a:nth-of-type(6){
  transition-delay: 0.25s;
}
.menuopen nav a:nth-of-type(7){
  transition-delay: 0.3s;
}
.menuopen nav a:nth-of-type(8){
  transition-delay: 0.35s;
}

.menuopen #back, .menuopen #category{
  opacity: 0;
  pointer-events: none;
}

.menuopen a{
  left: 0;
  opacity: 1;
}

#menuforeword{
  margin-bottom: 3em;
  margin-top: 4em;
}

#menuessay{
  margin-top: 3em;
}

#menucolophon{
  margin-top: 3em;
  margin-bottom: 4em;
}