@font-face {
    font-family: 'EditorialNew';
    src: url('../fonts/EditorialNew-Regular.otf');
    font-weight: normal;
}

@font-face {
   font-family: 'EditorialNewLight';
   src: url('../fonts/EditorialNew-Ultralight.otf');
   font-weight: lighter;
}

@font-face {
   font-family: 'JeanLuc';
   src: url('../fonts/JeanLuc-Thin.otf');
}


:root {
    --spacing: 3vw;
    --menu-height: calc(4vw * 1.0);
    --f-title: 4vw;
    --f-text: 36px;
    --f-caption: 14px;
} 


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

 *::selection {
   background-color: #1C1917;
   color: #ccc;
 }

 body {
   color: #1C1917;
   background-color: #ccc;

}

a {
   color: inherit;
   text-decoration: none;
}
 .text {
   font-family: 'EditorialNewLight', serif;
    font-weight: lighter;
    font-size: var(--f-text);
 }

 .subtitle {
   font-family: monospace;
   font-size: var(--f-caption);
   text-transform: uppercase;
 }


.title {
   font-family: 'JeanLuc', serif;
   font-size: var(--f-title);
   letter-spacing: -0.1rem;
}

 .window {
    position: relative;
    display: flex;
    width: 100%;
    min-height: calc(100vh - var(--menu-height));
    height: auto;
    float: left;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
 }


 .window-section {
    width: 50%;
    min-height: calc(100vh - var(--menu-height));

    /* height: 100%; */
    padding: var(--spacing);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: space-between;
 }

 .window:nth-of-type(2n + 1) > .window-section.content {
   order: 2;
} 


 .images {
   background-color: #CCCCCC;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   /* max-height: calc(100vh - var(--menu-height)); */
 }
 .preview-image  {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
   display: none;
 }
 .preview-image:after {
   content: '';
   position: relative;
   /* background-image: url('../images/noise.png'); */
   width: 100%;
   height: 100%;
 }
 .preview-image.active {
   display: block;
 }

 .page-service-image {
   filter: grayscale(1) brightness(2000%) contrast(70%);
   opacity: 0.95;
   position: absolute;
   mix-blend-mode: screen;
   min-width: 100%;
   min-height: 100%;   
 }
 /* .page-service-image.dark {
   filter: grayscale(1) brightness(100%) contrast(70%);
   mix-blend-mode: darken;
 } */
 .page-service {
   z-index: 200;
   font-size: 50vw;
   letter-spacing: -0.05em;
   position: sticky;
   top: 0;
   width: 100%;
   text-align: center;
   height: 100%;
   min-height: calc(100vh - var(--menu-height));
 }
 svg {
   max-width: 100%;
   max-height: 100%;
   display: block;
   position: relative;
 }
 ul {
   list-style: upper-roman;
   padding-left: 2rem;
   padding-top: 1rem;
 }
 li {
   list-style-type: '*';
 }

 .menu {
   background-color: #ccc;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   
   z-index: 9999;
   /* padding: var(--spacing); */
 
 }
 .menu-row {
   display: flex;
   padding: 0 20px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   user-select: none;
 }
 .menu + * {
   margin-top: var(--menu-height);
 }
 .transparent {
   opacity: 0;
 }
 a.menu-dropdown-item,
 .menu-dropdown-item a {
   /* display: none; */
   color: #1C1917;
   text-decoration: none;
   border-bottom: 3.5px solid transparent;

 }

 a.menu-dropdown-item:hover,
 .menu-dropdown-item a:hover {
   border-bottom: 2.5px solid #1C1917;
 }
 .menu-title a {
   color: inherit;
   text-decoration: none;
 }
 .menu-toggle {
   height: calc(var(--f-title) * 0.7 );
   width: auto;
   cursor: pointer;
 }

 .menu-dropdown {
   position: absolute;
   background-color: #ccc;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   display: none;
   height: 0;
   transition: all 0.25s;

 }
 .menu-open .menu-dropdown {
   display: flex;
   height: 100vh;
 }

 .menu-cross {
   transition: all 0.5s;
   stroke-width: 2.5px;  
 }
 .menu-cross-1 {
   transform-origin: 0% 0%;
 }
 .menu-cross-3 {
   transform-origin: 0% 100%;
 }
 .menu-open .menu-cross-1 {
   transform: rotate(25deg);
 }
 .menu-open .menu-cross-2 {
   transform: translate(-200%, 0);
 }
 .menu-open .menu-cross-3 {
   transform: rotate(-25deg);
 }

.footer-block {
   display: block;
   padding: var(--spacing);
   flex-grow: 0;
   flex-shrink: 0;
   width: 25%;
   flex-wrap: nowrap;
}