@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------
# New
--------------------------------------------------------------*/



body {
	margin: 0;
	--color-text: #333;
	/*--color-bg: #f7f5f0;
	--color-link: #c3654e;*/
    --color-bg: #f8f7f3;
    --color-link: #b8967e;
	/*--color-link-hover: #96584b;*/
    --color-link-hover: #333;
    --color-link-hover-org: #96584b;
	--color-content: #040203;
    --color-title: #57493b;
    /*
    --color-wave-front: #e9e4d9;
    --color-wave-back: #dbd7cc;*/
    --color-wave-front: #ece9e3;
    --color-wave-back: #e5e2dc;
    --color-wave-back-1: #dcd8d2;
    --color-wave-back-2: #d1ccc6;
    --color-wave-back-3: #c9c4be;
    
    --color-boat-1: #eeede9;
    /*--color-boat-2: #faf9f5;*/
    --color-boat-2: #fafaf6;
    --color-boat-3: #f2f2ef;
    
	--font-alt: freight-display-pro, serif;
    --font-title: kudryashev-d-contrast-sans, sans-serif;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: soleil, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Cursor styles */
	--cursor-stroke: #c3654e;
	--cursor-fill: none;
	--cursor-stroke-width: 1px;
    
    
    
    overflow-x: hidden !important;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	/*cursor: pointer;*/
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

/*.loader:before,*/
body::before {
	animation: grain 8s steps(10) infinite;
	background-image: url(images/noise.png);
	content: '';
	height: 300%;
	left: -50%;
	opacity: 0.45;
	position: fixed;
	top: -100%;
	width: 300%;
    z-index: 999999;
    pointer-events: none;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -25%); }
  40% { transform:translate(-5%, 25%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 0%); }
  70% { transform:translate(0%, 15%); }
  80% { transform:translate(3%, 35%); }
  90% { transform:translate(-10%, 10%); }
}

.site-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

/*
.content {
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100vw;
	height: calc(100vh - 13rem);
	position: relative;
	justify-content: flex-start;
	align-items: center;
}

.content p {
	max-width: 80vw;
	font-size: 4vw;
	text-transform: uppercase;
	color: var(--color-content);
	font-family: var(--font-alt);
	font-weight: 300;
	line-height: 1.4;
}

.content p a {
	font-weight: 600;
	font-style: italic;
	position: relative;
}

.content p a::after { 
	content: ''; 
	position: absolute; 
	width: 100%; 
	height: 1px; 
	background: currentColor; 
	bottom: 0.5vw; 
	left: 0; 
	opacity: 0; 
	transform-origin: 0% 50%; 
	transform: scaleX(0); 
	transition: all 0.25s ease-out; 
} 
 
.content p a:hover::after, 
.content p a:focus::after { 
	opacity: 1; 
	transform: scaleX(1); 
}
*/

.menu {
	display: flex;
	overflow: hidden;
	position: fixed;
	/*width: 100vw;*/
	justify-content: center;
    top: 0px;
    right: 10px;
    z-index: 999;
}

.menu__item {
	font-size: 6.5vw;
	margin: 0 2vw;
	cursor: default;
	font-family: var(--font-alt);
	color: var(--color-link);
	cursor: pointer;
}

.menu__item:hover,
.menu__item:focus {
	color: var(--color-menu-link-hover);
}


/*---------------*/


.link--ersa {
    position: relative;
    padding: 0 10px;
    letter-spacing: 1px;
    text-indent: 1px;
    text-transform: uppercase;
    margin-left: 20px;
}

.link--ersa::before,
.link--ersa::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--color-link);
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link--ersa::before {
    content: '';
    top: 50%;
    height: 1px;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.link--ersa:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

/*
.link--ersa.current-menu-item::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
*/

.link--ersa span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

.link--ersa:hover span {
    transform: scale3d(1.1, 1.1, 1.1);
}


/*---------------*/

#primary-menu {
   transition: all 0.05s ease;
    position: fixed;
    top: 20px;
    right: 30px;
}


#primary-menu,
#primary-menu .word .char{
    opacity: 0;
    
    /*transform: translateX(50%);*/
}

.loaded #primary-menu {
    opacity: 1;
}


.loaded #primary-menu .word .char{
    animation: slide-in-right .2s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(50ms * var(--char-index) + 500ms);
    font-family: pt-mono, monospace;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8em;
}

#primary-menu a {
    /*margin-left: 30px;*/
}

@keyframes slide-in-right {
    from {
        transform: translateX(200%);
        opacity: 0;
        color: var(--color-bg);
    }
    to {
        transform: translateX(0);
        opacity: 1;
        color: var(--color-link);
    }
}


/*
.cursor {
	display: none;
    z-index: 99999999;
}



@media (any-pointer: fine) {
	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		pointer-events: none;
		opacity: 0;
	}
	.cursor__inner {
		fill: var(--cursor-fill);
		stroke: var(--cursor-stroke);
		stroke-width: var(--cursor-stroke-width);
	}
}
*/

.post, .page {
    margin: 0;
}

body {
    cursor: none;
    /*overflow: hidden;*/
    overflow-x: hidden;
    overflow-y: hidden;
    /*position: relative;*/
}

body.loaded{
    overflow-y: auto;
}

.cursor {
    display: none;
    width: 10px;
    height: 10px;
    position: fixed;
    top: 0;
    left: 0;
    /*border: 1px solid dodgerblue;*/
    background: #e9e4d9;
    /*background: var(--color-link);*/
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: multiply;  
    transition: all 0.25s cubic-bezier(.47,1.64,.41,.8);  
    opacity: 0;

}

.cursor-follow {
    display: none;
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid #dbd7cc;
    border-radius: 50%;
    z-index: 99999;
    pointer-events: none;
    /*transform: scale(1);*/
    transition: all 0.25s cubic-bezier(.47,1.64,.41,.8); 
    opacity: 0;    
}

.cursor.active {
    opacity: 0.5;
    width: 90px;
    height: 90px;
    /*transform: scale(1.5)
    transform: scale(0);*/
    mix-blend-mode: color-burn;
    background: var(--color-link);
    /*background: #000;*/
}

.cursor-follow.active {
    opacity: 0.7;
    /*transform: scale(3);*/
    width: 100px;
    height: 100px;
}

.no-touch-device .cursor, 
.no-touch-device .cursor-follow {
    display: block;
}

body.loaded .cursor,
body.loaded .cursor-follow {
    opacity: 0.8;  
}

.logo {
    height: 50px;
    width: 50px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 998;
    opacity: 0;
    mix-blend-mode: multiply;  
}

body.loaded .logo {
    opacity: 1;
}

.logo-path{
    fill:none;
    /*stroke:var(--color-wave-back);*/
    stroke:#c0bcb0;
    stroke-width: 1.1;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}

.logo-path svg {
    width: 100%;
}

body.loaded .draw-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  /*animation: dash 5s linear alternate infinite;*/
  /*animation: draw 5s linear;*/
  -webkit-animation-name: draw;
          animation-name: draw;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
    
  animation-delay: 0.8s;    
}

@keyframes draw {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.scroll-circle {
    position: fixed; 
    width: 100px; 
    height: 100px; 
    right: 20px; 
    bottom: 20px; 
    opacity: 0; 
    z-index: 99; 
    mix-blend-mode: multiply;
}

.scroll-c{
    fill:#dbd7cc;
}

.go-top {
	position: fixed;
	width: 100px; 
    height: 100px; 
    right: 20px; 
    bottom: 20px; 
	text-decoration: none;
	visibility: hidden;
    /*transition: all .5s;*/
    transition: all .5s ease;
    opacity: 0;
    z-index: 99;
    display: flex;
    align-items: center; 
    justify-content: center;
}

.go-top:hover {
	/*background-color: rgba(0, 0, 0, 0.6);*/
}

.go-top.show {
  opacity: 1;
  visibility: visible;
}

.go-top svg {
    width: 24px;
    opacity: 0.5;
    transition: all .2s ease;
}

.no-touch-device .go-top:hover svg {
    opacity: 1;
    transform: scale(1.25,1.25);
}

.arr-fill {
    fill:var(--color-link);
}

.site {
    position: relative;
}

.site-footer {
    /*display: none;*/
    
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    
    font-family: pt-mono, monospace;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    font-size: 0.7rem;
    padding: 10px 15px;
    /*background: var(--color-wave-back-3);*/
    color: #ada69b;
    text-transform: uppercase;
    opacity: 0.5;
    mix-blend-mode: multiply;
    
}

/*--------------------------------------------------------------
# Main Info
--------------------------------------------------------------*/
.main-info-scroll {
    height: calc(100vh * 1);
    overflow: hidden;
}

.main-info-mark {
    position: absolute; 
    top: 60vh; 
    left: 0px; 
    width: 100vw; 
    height: 40vh;
}

.main-info,
.main-info-bg{
    width: 100vw; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    font-family: var(--font-title);
	text-transform: uppercase; 
    font-size: 1.5em;
    /*font-size: clamp(1em, 4vw, 3em);*/
    font-weight:400;
    overflow: hidden;
    line-height: 1.5;
}

.main-info-txt {
    width: 100vw; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 50px; 
    z-index: 4;
    position: fixed;
    top: 0px;
    left: 0px;
}

.main-info-scroll.fixed .main-info {
    position: fixed;
}


.main-info-contain {
    z-index: 3;
    max-width: 90%;
}


.main-info-contain {
    opacity: 0;
}


.loaded .main-info-contain {
    opacity: 1;
}



.main-info-contain.splitting .word {
    opacity: 0;
}

.loaded .main-info-contain.splitting .word {
    animation: fadeInLeft 0.4s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(100ms * var(--line-index));
}



@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}  

.split-info {
    /*font-family: orpheuspro, sans-serif;*/
    /*font-style:italic;*/
    /*font-size: 2rem;*/
    /*font-size: clamp(1.5rem, 6vw, 5rem);*/
    /*text-transform: lowercase;*/
}

.split-info.splitting .word .char{
    opacity: 0;
    color: var(--color-bg);
}


.loaded .split-info.splitting .word .char{
    animation: slide-in .7s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(50ms * var(--char-index) + 500ms);
}

.loaded .split-info.active .word{
    transition: all 2s ease;
}

.loaded .split-info.active .word{
}

.plane {
    position: fixed; 
    z-index: 2; 
    width: 150px; 
    top: 50%; 
    right: -150px;
}

.plane-1{fill:url(#New_Gradient_Swatch_7);}

.plane-2{fill:url(#New_Gradient_Swatch_1);}

.plane-3{fill:url(#New_Gradient_Swatch_7-2);}

.plane-4{fill:url(#New_Gradient_Swatch_6);}

.plane-path {
    position: fixed; 
    z-index: 2; 
    top: 0px; 
    left: -150px; 
    width: calc(100vw + 300px);
}

.pt-1{
    fill:none;
    stroke-miterlimit:10;
    stroke-width:0.25px;
}

/*
.splitting .char {
    animation: slide-in .7s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(50ms * var(--char-index));
}
*/
@keyframes slide-in {
    from {
        transform: scale(0.4) translateX(100%);
        opacity: 0;
        color: var(--color-bg);
    }
    to {
        transform: scale(1) translateX(0);
        opacity: 1;
        color: var(--color-link);
    }
}

@keyframes info-over {
    0% {
      transform: scale(1) !important;
    }
    50% {
      transform: scale(2) !important;
    }
    100% {
      transform: scale(1) !important;
    }
}

/*
.split-info:hover {
    animation: slide-in .7s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(50ms * var(--char-index));
}
*/

.link-contain {
    display: inline-block; 
    overflow: hidden; 
    position: relative;
    /*float: left;*/
    /*margin-top: -20px;*/
    /*margin-top: clamp(-20px, 2.5vw, -50px);*/
    /*bottom: -16px;*/
    /*
    margin-top: -12px;
        bottom: -12px;
    */
}

.txt-float {
    float: left;
}

.link {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    /*float: left;*/
    height: 1.5rem;
}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    /*
    height: 1px;
    background: currentColor;
    */
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

.link--leda {
    overflow: hidden;
    text-decoration: none;
}

/*
.link--leda::before {
    height: 2px;
    top: calc(100% - 10px);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}

.link--leda:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
*/
.link--leda::after {
    content: attr(data-text);
    height: 100%;
    top: 0;
    background: none;
    transform-origin: 100% 50%;
    transform: translate3d(150%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
    position: absolute;
}

.link--leda:hover::after {
    transform: translate3d(0, 0, 0);
}

.link--leda span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
    /*line-height: 1;*/
}

.link--leda:hover span {
    transform: translate3d(-150%, 0, 0);
}

.mountain {
    width: 120%; 
    height: 120%; 
    position: absolute;
    left: 0;
    overflow: hidden;
    
} 

.mountain svg {
    display: block;
}

.mountain-front {
    top: 120%;  
    z-index: 3;
}

.loaded .mountain-front {
    top: 65%;
    transition: all 0.8s ease-out; 

}

.mountain-back {
    top: 120%; 
    z-index: 1;
    transition: all 0.6s ease-out;
}

.mountain-follow {
    width: 100%; 
    height: 100%; 
    background: var(--color-wave-front);
}

.mountain-follow.dk {
    background: var(--color-wave-back);
}

.loaded .mountain-back {
    top: 35%; 
}

.mou-1{
    fill:var(--color-wave-back);
}

.mou-2{
    fill:var(--color-wave-front);
}

.mou-3{
    fill:var(--color-wave-back-1);
}

.mou-4{
    fill:var(--color-wave-back-2);
}

.mou-5{
    fill:var(--color-wave-back-3);
}

@media (min-width: 576px) {  }

@media (min-width: 768px) { 
    .main-info-contain {
        max-width: 80%;
    }
    .main-info,
    .main-info-bg{
        font-size: 2em;
    }
    .split-info {
        /*font-size: 3rem;*/
    }
    .link-contain {
        /*margin-top: -30px;
        bottom: -24px;*/
        /*
        margin-top: -14px;
        bottom: -14px;
        */
    }
    .link {
        height: 2.1rem;
    }
    .plane {
        width: 200px; 
        right: -200px;
    }
    .plane-path {
        left: -200px; 
        width: calc(100vw + 400px);
    }
}

@media (min-width: 992px) { 
    .main-info,
    .main-info-bg{
        font-size: 2.5em;
    }
    .split-info {
        /*font-size: 3.75rem;*/
    }
    .link-contain {
        /*margin-top: -40px;
        bottom: -30px;*/
        /*
        margin-top: -18px;
        bottom: -18px;
        */
    }
    .link {
        height: 2.6rem;
    }
    .plane {
        width: 300px; 
        right: -300px;
    }
    .plane-path {
        left: -300px; 
        width: calc(100vw + 600px);
    }
}

@media (min-width: 1200px) {
    .main-info,
    .main-info-bg{
        font-size: 3em;
    }
    .split-info {
        /*font-size: 5rem;*/
    }
    .link-contain {
        /*margin-top: -50px;
        bottom: -38px;*/
        /*
        margin-top: -23px;
        bottom: -23px;
        */
    }
    .link {
        height: 3.1rem;
    }
    .plane {
        width: 350px; 
        right: -350px;
    }
    .plane-path {
        left: -350px; 
        width: calc(100vw + 700px);
    }
}

/*--------------------------------------------------------------
# Main Horizontal
--------------------------------------------------------------*/

section.horizontal {
    /*overflow-x: hidden;*/
    /*overflow-y: visible;*/
    overflow: hidden;
    position: relative;
    background: var(--color-wave-front); 
    z-index: 3;
}

section.horizontal .pin-wrap,
section.horizontal .animation-wrap {
    display: flex;
    position: relative;
    z-index: 5;  
    height: 100vh;
}


section.horizontal .item {
    position: relative;
    /*flex: 0 0 500px;*/
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.7;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*border-right: 1px solid rgba(0, 0, 0, 0.06);*/
    background-color: transparent;
    /*opacity: 0;*/
    transition: all 0.1s; 
}

section.horizontal.show .item {
    opacity: 1;
}
/*
section.horizontal .item:before {
    position: absolute;
    font-size: 100px;
    opacity: .13;
    font-weight: bold;    
    z-index: -1;
    -webkit-transform: translate(-30px, -50px);
    transform: translate(-30px, -50px);
    line-height: 1;
}
*/
section.horizontal .item-inn {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    padding: auto 150px;
    position: relative;
}

section.horizontal .item.fixed .item-inn {
    position: fixed !important;
}

section.horizontal .animation-wrap.to-right {
    counter-reset: item;
    float: left;
}

section.horizontal .animation-wrap.to-left {
    counter-reset: item 11;
    float: right; 
}
/*
section.horizontal .animation-wrap.to-right .item:before {
    counter-increment: item;
    content: counter(item);
}

section.horizontal .animation-wrap.to-left .item:before {
    counter-increment: item -1;
    content: counter(item);
}


section.horizontal .animation-wrap .item:nth-child(2n+2) {
    align-items: flex-start;
}

section.horizontal .animation-wrap .item:nth-child(4n+4) {
    align-items: flex-end;
}
*/
/*
img{
    width: 100%;
}
*/

.horizontal-title {
    position: fixed; 
    z-index: 5; 
    /*top: 100px; */
    /*left: -450px; */
    top: -200vh;
    left: 0px;
    /*width: 450px; */
    /*opacity: 0.3;*/
    width: 120px;
}

.h-cloud-1{
    fill:var(--color-bg);
}

.horizontal-cloud-2 {
    position: fixed; 
    z-index: 2; 
    top: 280px; 
    left: -500px; 
    width: 300px; 
    opacity: 0.5;
}

.horizontal-mountain {
    position: fixed; 
    z-index: 4; 
    top: 100vh; 
    left: 0px; 
    width: 100vw; 
    height: 200vh; 
    overflow: hidden;
}

.h-mountain {
    transform: scale(-1, 1); 
    width: 100%; 
    display: block;
}

.h-mountain-space {
    width: 100%; 
    height: 200vh; 
    background: var(--color-wave-back);
}

.h-text {
    font-family: var(--font-alt);
    color: var(--color-bg);
    -webkit-text-fill-color: var(--color-bg); 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-wave-back);
    transform: rotate(90deg);
    font-size: 10em;
    mix-blend-mode: multiply;
    text-transform: uppercase;
    opacity: 0.5;
}

.overlay{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:var(--color-wave-front);
    width: 100%;
    height: 100%; 
    transform: skewX(30deg) scale(1.5);

}

.js .slide {
	align-items: center;
    display: flex;
	grid-area: 1 / 1 / 2 / 2;
	pointer-events: none;
	width: 100%;
	justify-content: center;
}

.js .slide--current {
	opacity: 1;
	pointer-events: auto;
}

.slide {
	margin: 0 auto;
	height: 100%;
    overflow: visible;
}

.slide__img-wrap {
	min-width: 100vw;
	width: 100%;
	/*height: calc(100% - 6rem);*/
    height: 95vh;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	align-self: center;
	transform: rotate(-22.5deg);
	transform-origin: 50% 50%;
}

.slide__img {
	opacity: 0;
	flex: none;
	/*height: calc(50% - 1.5rem);*/
	display: block;
	/*background-size: cover;
	background-position: 50% 50%;*/
    position: relative; 
    overflow: hidden;
    width: 132px; 
    height: 94px;
    background-blend-mode: luminosity;
    -webkit-background-blend-mode: luminosity;
    background-size: 320px;
    transition: all 0.25s ease;
    filter: grayscale(0.5) sepia(0.1);
    /*filter: url('images/noise.jpg') grayscale(0.5) sepia(0.1);*/
    /*filter: url('images/noise.jpg') grayscale(1) sepia(0.5) brightness(1.3) invert(0.1);*/
}

.slide a:hover .slide__img {
    background-size: 400px;
}

.slide__img--1,
.slide__img--4 {
	/*height: calc(50% + 3rem);*/
    width: 99px; 
    height: 132px;
}

.slide__img--1,
.slide__img--3 {
	margin-right: 1rem;
}

.slide__img--1,
.slide__img--2 {
	margin-bottom: 1rem;
}

.slide__img--1 {
	background-position: top left;
}

.slide__img--2 {
	align-self: flex-end;
    background-position: top right;
}

.slide__img--3 {
	align-self: flex-start;
    background-position: bottom left;
}

.slide__img--4 {
	align-self: flex-start;
    background-position: bottom right;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.slide__title {
	margin: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    /*
	font-size: 15vw;
	font-size: clamp(2rem, 15vw, 14rem);*/
    font-size: 9vw;
	font-size: clamp(1.75rem, 8vw, 7rem);
	font-weight: 200;
    color: var(--color-link-hover-org);
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    font-family: var(--font-title);
    transition: all 0.1s; 
    /*opacity: 0;*/
    mix-blend-mode: color-burn;
}

.slide__title .word {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.slide a {
    
    transition: all 0.25s ease; 
    mix-blend-mode: color-burn;
    /*color: #463423;*/
    
}

.slide a:hover {
    color: var(--color-link-hover-org);
    mix-blend-mode: color-burn;
}

section.horizontal.show .slide__title {
    opacity: 1;
}

.slide__title-inner {
	/*display: block;*/
	position: relative;
	overflow: hidden;
	display: flex;
    /*display: inline-block;*/
    align-items: center;
    opacity: 0;
    /*display: block;*/
}

.slide__title-inner span {
	position: relative;
}

.slide__title-inner--middle {
	font-size: 2.5rem;
	display: block;
	font-weight: 300;
	text-transform: none;
}


.blur-it .char {
    /*color: rgba(255,255,255,1);*/
    transition: opacity 0.2s linear;
}
.blur-it .char::before,
.blur-it .char:after {
    visibility: visible;
    opacity: 0;
}

.blur-it:hover .char::before,
.blur-it:hover .char:after {
    opacity: 0.15;
      animation: blur 0.6s linear infinite alternate;
      animation-delay: calc( -0.2s * var(--distance-percent) );
}

.blur-it:hover .char:after {
    color: var(--color-link);
    animation-delay: calc( 0.3s + (-0.2s * var(--distance-percent)) );
}

@keyframes blur {
  0% { transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg); }
  50% { transform: translate(0,0) scale(1.1) rotate(0deg); }
  100% { transform: translate(0.1em, 0) scale(0.9) rotate(2deg); }
}

/*------------*/ 

.slide-vertical .char {
    overflow: hidden;
    color: transparent;
}
.slide-vertical .char::before,
.slide-vertical .char:after {
    visibility: visible;
    /*color: #463423;*/
    color: var(--color-title);
    transition: transform 0.5s cubic-bezier(0.9,0,.2,1);
    transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
}

.slide-vertical .char::before{
    /*color: #463423;*/
    color: var(--color-title);
    transition-delay: calc( 0.02s * ( var(--char-index)) );
    transform: translateY(-100%);
}

.slide-vertical:hover .char::before {
    transition-delay: calc( 0.2s + ( 0.02s * ( var(--char-index)) ) );
    transform: translateY(0%);
}

.slide-vertical:hover .char:after {
    transition-delay: calc( 0.02s * ( var(--char-index)) );
    transform: translateY(100%); 
}

@media (min-width: 576px) { 
    .slide__img-wrap {
        min-width: 100vw;
    }

    .slide__img {
        width: 184px; 
        height: 130px;
        background-size: 420px;
    }

    .slide a:hover .slide__img {
        background-size: 500px;
    }

    .slide__img--1,
    .slide__img--4 {
        width: 138px; 
        height: 184px;
    }
}

@media (min-width: 768px) {
    .h-text {
        font-size: 14em;
    }
    .horizontal-title {
        width: 160px;
    }
    .slide__img-wrap {
        min-width: 576px;
    }

    .slide__img {
        width: 288px; 
        height: 202px;
        background-size: 520px;
    }

    .slide a:hover .slide__img {
        background-size: 600px;
    }

    .slide__img--1,
    .slide__img--4 {
        width: 216px; 
        height: 288px;
    }
}

@media (min-width: 992px) { 
    .h-text {
        font-size: 16em;
    }
    .horizontal-title {
        width: 220px;
    }
    
    .slide__img-wrap {
        min-width: 700px;
    }

    .slide__img {
        width: 320px; 
        height: 224px;
        background-size: 620px;
    }

    .slide a:hover .slide__img {
        background-size: 700px;
    }

    .slide__img--1,
    .slide__img--4 {
        width: 240px; 
        height: 320px;
    }
}

@media (min-width: 1200px) { 
    .h-text {
        font-size: 20em;
    }
    .horizontal-title {
        width: 250px;
    }
    
    .slide__img-wrap {
        min-width: 790px;
    }

    .slide__img {
        width: 400px; 
        height: 280px;
        background-size: 720px;
    }

    .slide a:hover .slide__img {
        background-size: 800px;
    }

    .slide__img--1,
    .slide__img--4 {
        width: 300px; 
        height: 400px;
    }
}

/*--------------------------------------------------------------
# pre loader
--------------------------------------------------------------*/

.is-transitioning {
    pointer-events: none;
    cursor: progress;
}

.loader {
    /*z-index: 100; 
    bottom:50px; 
    left: 50px; 
    position: absolute;*/
    z-index: 10000; 
    position: relative;
}

.loader--text {
    font-size: 18em;
    color: #e9e4d9;
    font-family: var(--font-title);
	text-transform: uppercase;
    padding-top: calc(100vh / 3);
}

.waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 300px);
    overflow: hidden;
    transition: 0.4s transform ease;
    transform-origin: bottom center;
    z-index: 9999;
    opacity: 1;
    pointer-events: none;
}

.loaded .waves {
    opacity: 0;
    z-index: -1;
    height: 0;
}

#wave1.waves, #wave2.waves {
    transform: translateY(calc(100vh / 3));
}

#wave1.waves {
    z-index: 9998;
}

#wave2.waves {
    z-index: 10000;
}

/*
@media (min-width: 500px) {
  .waves {
    border-radius: 5px;
  }
}
*/

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: wave 1.6s linear infinite;
          animation: wave 1.6s linear infinite;
}
.wave--front {
  z-index: 2;
  color: var(--color-wave-front);
}
.wave--back {
  z-index: 1;
  color: var(--color-wave-back);
  animation-direction: reverse;
}

.water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background: currentColor;
}
.water svg {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 99.9%;
}

.water:first-of-type {
  transform: translate(-100%, 0);
}

svg {
  fill: currentColor;
}

@-webkit-keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0.5em, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0.5em, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pulseAway {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
  }
}
@keyframes pulseAway {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
  }
}

.boat-contain {
    position: absolute; 
    z-index: 9999; 
    top: 60%; 
    left: 50%;
    opacity: 1;
}

.loaded .boat-contain {
    opacity: 0;  
}

.boat {
    width: 300px; 
    height: 150px; 
    margin-left: -150px;
    -webkit-animation: boat-anim 3s ease-in-out infinite;
    animation: boat-anim 3s ease-in-out infinite;
  
}

.boat svg {
    width: 100%;
}

.boat-1{fill: var(--color-boat-1);}
.boat-2{fill: var(--color-boat-2);}
.boat-3{fill: var(--color-boat-3);}

@-webkit-keyframes boat-anim {
    0% { -webkit-transform: rotate(5deg) translateY(10px); }
    50% { -webkit-transform: rotate(-5deg) translateY(-10px); }
    100% { -webkit-transform: rotate(5deg) translateY(10px); } 
}

@keyframes boat-anim {
    0% { transform: rotate(5deg) translateY(10px); }
    50% { transform: rotate(-5deg) translateY(-10px); }
    100% { transform: rotate(5deg) translateY(10px); } 
  
}

.cloud {
    position: absolute; 
    top: 0px;
    z-index: 9999;
}

.cloud.left {
    left: 50px; 
}

.cloud.right {
    right: 50px; 
}

.cloud-left{
    width: 185px; 
    -webkit-animation: cloud-anim 4s ease-in-out infinite;
    animation: cloud-anim 4s ease-in-out infinite;
}

.cloud-right {
    width: 120px; 
    -webkit-animation: cloud-anim 3s ease-in-out infinite;
    animation: cloud-anim 3s ease-in-out infinite;
}

.cloud-1{
    fill:none;
    stroke:var(--color-wave-back);
    stroke-miterlimit:10;
    opacity:0.4;
}

.cloud-2{
    fill:var(--color-wave-front);
}

@-webkit-keyframes cloud-anim {
    0% { -webkit-transform: translateY(0px); }
    50% { -webkit-transform: translateY(-10px); }
    100% { -webkit-transform: translateY(0px); } 
}

@keyframes cloud-anim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); } 
}

@media (min-width: 576px) {
    .boat {
        width: 300px; 
        height: 150px; 
        margin-left: -150px;
    }

}

@media (min-width: 768px) { 
    .cloud.left {
        left: 100px; 
    }
    .cloud.right {
        right: 100px; 
    }
    .cloud-left{
        width: 295px; 
    }
    .cloud-right {
        width: 150px; 
    }
    .boat {
        width: 400px; 
        height: 200px; 
        margin-left: -200px;
    }
    .waves {
        height: calc(100vh + 500px);
    }
}

@media (min-width: 992px) { 
    .cloud.left {
        left: 100px; 
    }
    .cloud.right {
        right: 100px; 
    }
    .cloud-left{
        width: 320px; 
    }
    .cloud-right {
        width: 180px; 
    }
    .boat-contain {
        top: 50%; 
    }
    .boat {
        width: 450px; 
        height: 225px; 
        margin-left: -225px;
    }
}

@media (min-width: 1200px) { 
    .cloud.left {
        left: 150px; 
    }
    .cloud.right {
        right: 150px; 
    }
    .cloud-left{
        width: 345px; 
    }
    .cloud-right {
        width: 200px; 
    }
    .boat {
        width: 500px; 
        height: 250px; 
        margin-left: -250px;
    }
    .waves {
        height: calc(100vh + 600px);
    }
}

/*--------------------------------------------------------------
# main prev portfolio
--------------------------------------------------------------*/

.main-text-content {
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    background: var(--color-wave-back); 
    z-index: 3; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.main-text {
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    top:0px; 
    left: 0px; 
    transform: translateY(100vh);  
    z-index: 2; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0;
}

.main-text-inn {
    width: 80%; 
    max-width: 1000px; 
    font-family: var(--font-title); 
    font-size:1.5em;
}

.link-inn {
    /*display: inline-block;
    position: relative;
    white-space: nowrap;*/
    height: 1.5rem;
    text-transform: uppercase;
}

.link-inn::before,
.link-inn::after {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link-inn::before {
    content: '';
}

.main-text-bg {
    position: absolute; 
    width: 100vw; 
    height: 120vh; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 90vw auto;  
    background-color: var(--color-wave-back); 
}

.main-prev-content-mark {
    width: 100vw; 
    height: 100vh; 
    position: absolute; 
    left: 0px; 
    top: 0px;
}

.main-prev-content-wave {
    width:100%; 
    height:150vh; 
    position: absolute; 
    bottom:-150vh; 
    left:0px; 
    z-index:5;
}

.main-prev-content-wave svg {
    display: block;
}



.portfolio-contain-outer {
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    z-index: 10; 
    background: var(--color-wave-back-1); 
    overflow: hidden;
}

.portfolio-contain-box {
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: left; 
    z-index: 20;
}

.portfolio-contain {
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
    grid-auto-rows: minmax(20vh, auto); 
    width: 90vw; 
    max-width: 90vw;
}

.portfolio-img-contain {
    grid-column: 1 / 5; 
    grid-row: 1;
}


.portfolio-img-contain-warp {
    width: 100%; 
    height: 100%;
    overflow: hidden;
    transition: all 0.25s ease; 
}

.portfolio-img-contain:hover .portfolio-img-contain-warp {
    transform: scale(0.95, 0.95);
}

.portfolio-img {
    background-size: cover; 
    width: 100%; 
    opacity: 0.8; 
    padding-top: 56.25%;
    /*filter: url('images/noise.jpg') grayscale(1) sepia(0.5) brightness(1.3) invert(0.1);*/
    filter: grayscale(1) sepia(0.5) brightness(1.3) invert(0.1);
    /*filter: url('images/noise.jpg') grayscale(0.5) sepia(0.1);*/
    /*transition: all 0.25s ease; */
}

.portfolio-img-contain:hover .portfolio-img {
    transform: scale(1.1, 1.1) !important;
}

.portfolio-img-link {
    
}

.portfolio-text {
    grid-column: 2 / 6; 
    grid-row: 1; 
    font-size: 2.75em;  
    font-family: var(--font-title); 
    display: flex; 
    align-items: center; 
    justify-content: left; 
    position: relative; 
    opacity: 0; 
    pointer-events: none; 
    color: var(--color-title); 
    mix-blend-mode: color-burn;
}

.main-prev-content-wave-bg {
    widht:100%; 
    height:100%;  
    background: var(--color-wave-back-1);
}

.spread-out {
    white-space: nowrap;
}

.spread-out .char {
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
  transition-delay: calc( 0.1s * var(--distance-percent) );
}

.portfolio-text.active .spread-out .char {
/*.spread-out:hover .char {*/
  transition-delay: calc( 0.1s * ( 1 - var(--distance-percent) ) );
  transform: translateX(calc(0.6em * var(--distance-sine)));
}

.portfolio-mountain {
    position: absolute; 
    top: 20vh; 
    width: 100vw; 
    height: 100vh;
}

.portfolio-mountain svg {
    display: block;
}

.portfolio-mountain-follow {
    width: 100%;
    height: 100%;
    background: var(--color-wave-back-2);
}

@media (min-width: 576px) { 
    .portfolio-text {
        font-size: 3.75em;  
    }
}

@media (min-width: 768px) { 
    .main-text-inn {
        font-size:1.75em;
    }
    
    .link-inn {
        height: 1.75rem;
    }
    
    .portfolio-contain {
        max-width: 700px;
    }


    .portfolio-img-contain {
        grid-column: 1 / 5; 
        grid-row: 1;
    }

    .portfolio-text {
        grid-column: 3 / 6; 
        grid-row: 1; 
        font-size: 4em;  
    }
}

@media (min-width: 992px) { 
    .main-text-inn {
        font-size:2em;
    }
    .link-inn {
        height: 2rem;
    }
    .main-text-bg {
        background-size: auto 120vh; 
    }
    
    .portfolio-contain {
        max-width: 900px;
    }


    .portfolio-img-contain {
        grid-column: 1 / 5; 
        grid-row: 1;
    }

    .portfolio-text {
        grid-column: 3 / 6; 
        grid-row: 1; 
        font-size: 5em;  
    }
}

@media (min-width: 1200px) { 
    .main-text-inn {
        font-size:2.25em;
    }
    .link-inn {
        height: 2.25rem;
    }
    .portfolio-contain {
        max-width: 1000px;
    }


    .portfolio-img-contain {
        grid-column: 1 / 5; 
        grid-row: 1;
    }

    .portfolio-text {
        grid-column: 4 / 6; 
        grid-row: 1; 
        font-size: 5em;  
    }
}

/*--------------------------------------------------------------
# Main contact form
--------------------------------------------------------------*/
.main-contact {
    width: 100vw; 
    height: 100vh; 
    background: var(--color-wave-back-2); 
    display: flex; 
    z-index: 10; 
    position: relative; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

.main-contact-contain {
    position: relative;
    z-index: 12;
    width: 90%;
    max-width: 650px;
}

h1.main-contact-title {
    font-family: var(--font-title);
    color: var(--color-title);
    /*color: var(--color-link);*/
    mix-blend-mode: color-burn;
    font-size: 1.5em;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px;
}

.main-contact .char {
    /*opacity: 0;*/
    transition: all 0.25s ease;
}

.main-contact.show .char {
  animation: slide-in-contact 2s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  animation-delay: calc(60ms * var(--char-index));
}


.main-contact-mountain {
    position: absolute; 
    top: 20vh; 
    width: 100vw; 
    height: 100vh;
}

.main-contact-mountain svg {
    display: block;
}

.main-contact-mountain-follow {
    width: 100%;
    height: 100%;
    background: var(--color-wave-back-3);
}

.c-mountain {
    transform: scale(1, 1); 
    width: 100%; 
    display: block;
}

.main-contact-form {
    
}

.main-contact-form input[type=text],
.main-contact-form input[type=email],
.main-contact-form textarea{
    font-family: pt-mono, monospace;
    width: 100%;
    background-color: var(--color-wave-front) !importent;
    font-size: 0.875em !important;
}

.main-contact-input {
    width: 50%;
    float: left;
}

h1.main-contact-title.thankyou {
    /*opacity: 0;*/
    font-size: 2rem;
} 

.thankyou-contain {
    font-family: pt-mono, monospace;
    text-transform: none;
    color: var(--color-title);
    font-size: 1rem;
    text-align: center;
    max-width: 700px;
}

.thankyou-contain p {
    line-height: 2;
    text-align: center;   
}

.thankyou-txt {
    opacity: 0;
    animation: fade-in 0.5s forwards;
    animation-delay: 3s;
}

.thankyou-contain-txt {
    z-index: 4;
}

.thankyou .char {
    opacity: 0;
    transition: all 0.25s ease;
}

.thankyou .word .char {
    z-index: 100;
    animation: slide-in-right-work 0.6s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    animation-delay: calc(60ms * var(--char-index) + 200ms);
}


/*---------*/

.btn-link{
    color: var(--color-title) !important;
    font-size: 0.875em;
    position: relative;
    padding: 10px 20px 15px 20px;
    letter-spacing: 5px;
    text-align: center;
    display: inline-block;
    width: 200px;
    height: 40px;
    text-transform: uppercase;
    margin-top: 10px;
}
 
.btn-link:hover{
    color: var(--color-title);
}

.btn-link::before,
.btn-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    bottom: 0;
    right: calc(50% + 100px);
    width: 200px !important;
    border: 1px solid var(--color-title);
    transition: transform .2s;
    height: 40px;
    
}

.btn-link::after {
    transform: translate(3px, 3px);
}

.btn-link::before {
    transform: translate(-3px, -3px);
}


.btn-link:hover::before,
.btn-link:hover::after {
    transform: translate(0);
}

/*---------*/

div.wpforms-container-full .wpforms-form input.wpforms-field-medium, div.wpforms-container-full .wpforms-form select.wpforms-field-medium, div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium{
    background-color: var(--color-wave-front) !importent;
    /*color: var()*/
}

/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
 color:rgba(209, 204, 198, 0)!important; 
}
 
/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
 background-color:rgba(248, 247, 243, 0.6)!important; 
}
 
/** WPFORMS BUTTON COLOR **/
.wpforms-form button{
    background-color:rgb(184, 150, 126)!important;
    font-family: pt-mono, monospace;
    text-transform: uppercase !important;
    margin: auto;
}
 
/** WPFORMS SUBMIT BUTTON **/
button.wpforms-submit{
    color: var(--color-title)!important;
    background-color:rgba(184, 150, 126, 0)!important;
    font-size: 0.875em !important;
    border: none !important;
    position: relative;
    padding: 10px 20px 15px 20px !important;
    letter-spacing: 5px !important;
    text-align: center !important;
    display: inline-block !important;
    width: 200px;
    /*height: 40px;*/
}
 
/** WPFORMS SUBMIT BUTTON Hover **/
button.wpforms-submit:hover{
    color: var(--color-title)!important;
    background-color:rgb(178, 131, 97, 0)!important;
    border: none !important;
}

button.wpforms-submit::before,
button.wpforms-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    bottom: 0;
    right: calc(50% + 100px);
    width: 200px !important;
    border: 1px solid var(--color-title);
    transition: transform .2s;
    
}

button.wpforms-submit::after {
    transform: translate(3px, 3px);
}

button.wpforms-submit::before {
    transform: translate(-3px, -3px);
}


button.wpforms-submit:hover::before,
button.wpforms-submit:hover::after {
    transform: translate(0);
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    text-align: center;
    margin-top: 20px;
}

div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #96584b !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field input.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field textarea.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field select.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-has-error .choices__inner {
    border: 1px solid var(--color-link) !important;
}

.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: none !important;
    border: none !important;
    font-family: pt-mono, monospace;
    text-align: center;
    color: var(--color-title)!important;
}

.main-form-submit {
    
}

.main-contact-form-contain .wpcf7 input[type="text"],
.main-contact-form-contain .wpcf7 input[type="email"],
.main-contact-form-contain .wpcf7 textarea.wpcf7-form-control.wpcf7-textarea
{
    font-family: pt-mono, monospace;
    width: 100%;
    /*background-color: var(--color-wave-front) !importent;
    background: var(--color-wave-front) !importent;*/
    font-size: 0.875em !important;
    padding: 8px 16px;
    margin: 0px 0px 5px 0px;
    /*transition: all .2s ease;*/
}

.main-contact-form-contain .wpcf7 textarea.wpcf7-form-control.wpcf7-textarea {
    height: 100px;
}

.wpcf7-form p {
    margin-bottom: 0px !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
    background-color: rgba(248, 247, 243, 0.6);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}

.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
    border: 1px solid #ada69b; 
    outline: 0;
}


.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit{
    background-color:rgb(184, 150, 126)!important;
    font-family: pt-mono, monospace;
    text-transform: uppercase !important;
    /*margin: auto;*/
    
    color: var(--color-title)!important;
    background-color:rgba(184, 150, 126, 0)!important;
    font-size: 0.875em !important;
    border: none !important;
    position: relative;
    padding: 0px; !important;
    letter-spacing: 5px !important;
    text-align: center !important;
    display: inline-block !important;
    width: 200px;
    height: auto;
    line-height: 40px;
    text-align: center;
    /*height: 40px;*/
    margin: 0px 0px 0px 0px ;
    z-index: 2;
    box-sizing: border-box;
}

/*
.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit:hover{
    color: var(--color-title)!important;
    background-color:rgb(178, 131, 97, 0)!important;
    border: none !important;
}

.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit::before,
.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    bottom: 0;
    right: calc(50% + 100px);
    width: 200px !important;
    border: 1px solid rgba(0,0,0,1);
    transition: transform .2s;
    
}

.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit::after {
    transform: translate(3px, 3px);
}

.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit::before {   
    transform: translate(-3px, -3px);
}


.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit:hover::before,
.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit:hover::after {
    transform: translate(0);
}
*/


.wpcf7-not-valid-tip {
    font-family: pt-mono, monospace;
    font-size: 0.75em !important;
    color: #96584b !important;
    padding-bottom: 5px;
}

.wpcf7 br {
    display: none;
}

.form-btn-contain {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.submit-btn {
    position: relative;
    width: 200px !important;
    height: 40px;
}

.submit-btn:hover{
    color: var(--color-title)!important;
    background-color:rgb(178, 131, 97, 0)!important;
    border: none !important;
}

.submit-btn::before,
.submit-btn::after {
    content: '';
    position: absolute;
    top: -10px;
    left: calc(50% - 100px);
    bottom: 0;
    right: calc(50% + 100px);
    width: 200px !important;
    height: 40px;
    border: 1px solid rgba(0,0,0,1);
    transition: transform .2s;
}

.submit-btn::after {
    transform: translate(3px, 3px);
}

.submit-btn::before {   
    transform: translate(-3px, -3px);
}


.submit-btn:hover::before,
.submit-btn:hover::after {
    transform: translate(0);
}

.wpcf7 .ajax-loader {
    position: absolute;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
    border: none;
    text-align: center;
    font-family: pt-mono, monospace;
    font-size: 0.75em !important;
    color: #96584b !important;
    padding-bottom: 30px;
}

@keyframes slide-in-contact {
  0% {
    transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
    opacity: 0;  
  }
  20%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;  
  }
}

@media (min-width: 768px) { 
    h1.main-contact-title {
        font-size: 2.25em;
        letter-spacing: 4px;
        margin-bottom: 0px; 
    }
    h1.main-contact-title.thankyou {
        font-size: 3rem;
    }
}


/*--------------------------------------------------------------
# New
--------------------------------------------------------------*/


.box {
	display: block;
    width: 50px;
    height: 50px;
}

.pink {
  background-color: pink;
}

#preloader {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 9997;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0px;
    top: 0px;
    
    background: var(--color-bg);
    /*background: linear-gradient(270deg, #e8e1ce, #f7f5f0);
    background-size: 400% 400%;*/
    /*
    -webkit-animation: loadBgAnim 21s ease infinite;
    -moz-animation: loadBgAnim 21s ease infinite;
    animation: loadBgAnim 21s ease infinite;
    */
}

@-webkit-keyframes loadBgAnim {
    0%{background-position:0% 76%}
    50%{background-position:100% 25%}
    100%{background-position:0% 76%}
}
@-moz-keyframes loadBgAnim {
    0%{background-position:0% 76%}
    50%{background-position:100% 25%}
    100%{background-position:0% 76%}
}
@keyframes loadBgAnim {
    0%{background-position:0% 76%}
    50%{background-position:100% 25%}
    100%{background-position:0% 76%}
}


@keyframes draw {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#loadingBar {
    width: 200px !important;
    height: 200px !important;
}

#loadingBar svg {
    width: 200px;
}

.ldBar-label {
    display: none;
}

/*--------------------------------------------------------------
# Work
--------------------------------------------------------------*/

body {
	/*margin: 0;
	--color-text: #dc6e25;
	--color-bg: #efded3;
	--color-link: #000;
	--color-link-hover: #dc6e25;*/
	/*--aspect-ratio: 1/1.5;*/
    --aspect-ratio: 16/9;
	--imgwidthmax: 450px;
	--size-title: 7vw;
	--font-weight-title: 400;
	/*color: var(--color-text);
	background-color: var(--color-bg);
	font-family: turquoise, serif;
	font-size: 1.5rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
    overflow-x: hidden !important;
    
    --color-work-1: #ece9e3;
    --color-work-2: #e7e4de;
    --color-work-3: #e2ded8;
    --color-work-4: #ddd9d3;
    --color-work-5: #d8d4ce;
    --color-work-6: #d3cfc9;
    --color-work-7: #cec9c3;
    --color-work-8: #c9c4be;
    --color-work-9: #bcb8b3;
    
}

.mou-work-1{ fill:var(--color-work-1); }
.mou-work-2{ fill:var(--color-work-2); }
.mou-work-3{ fill:var(--color-work-3); }
.mou-work-4{ fill:var(--color-work-4); }
.mou-work-5{ fill:var(--color-work-5); }
.mou-work-6{ fill:var(--color-work-6); }
.mou-work-7{ fill:var(--color-work-7); }
.mou-work-8{ fill:var(--color-work-8); }

.mountain-follow.work-1 { background: var(--color-work-1); }
.mountain-follow.work-2 { background: var(--color-work-2); }
.mountain-follow.work-3 { background: var(--color-work-3); }
.mountain-follow.work-4 { background: var(--color-work-4); }
.mountain-follow.work-5 { background: var(--color-work-5); }
.mountain-follow.work-6 { background: var(--color-work-6); }
.mountain-follow.work-7 { background: var(--color-work-7); }
.mountain-follow.work-8 { background: var(--color-work-8); }


/*
.demo-1 {
	--color-text: #111;
	--color-bg: #bad5ca;
	--color-link-hover: #5c4541;
	--aspect-ratio: 32/17;
	font-size: 1.25rem;
	font-family: ivymode, sans-serif;
	--size-title: 15vw;
}
*/
.site-main {
    overflow: hidden;
}

.page-work {
	display: grid;
	padding: 5vw;
	max-width: 1400px;
	margin: 0 auto;
	grid-template-columns: 100%;
	grid-template-areas: 'header' 'meta' 'grid';
	will-change: transform;
    opacity: 0;
    /*transform: translateY(200px);*/
    transition: all 0.75s ease-out; 
    transition-delay: 0.25s;
    position: relative;
}

.loaded .page-work {
    opacity: 1;
    /*transform: translateY(0px);*/
}

.content {
	grid-area: grid;
	/*margin: 25vh 0 30vh;*/
    margin: 25vh 0 0 0;
    position: relative;
    z-index: 10;
}

.content--offset {
	display: grid;
	grid-template-columns: repeat(2, minmax(100px, 1fr));
	grid-gap: 30vh 10vw;
}

.content--full {
	width: 100vw;
	justify-self: center;
}

.content--padded {
	padding: 0 10vw;
}

.content__item {
	--imgwidth: calc(var(--imgwidthmax) * var(--aspect-ratio));
	width: var(--imgwidth);
	max-width: 100%;
	position: relative;
	will-change: transform;
	margin-bottom: 30vh;
	display: grid;
	grid-template-columns: 50% 50%;
}

.content__item--wide {
	grid-template-columns: 50% 50%;
}

.content__item--wide:nth-child(even) {
	grid-template-columns: 50% 50%;
}

.content--center .content__item {
	margin: 0 auto 60vh;
}

.content__item--expand {
	width: 100%;
	grid-template-columns: minmax(0, var(--imgwidth)) 1fr;
}

.content__item--expand:nth-child(even) {
	grid-template-columns: 1fr minmax(0, var(--imgwidth));
}

.content--alternate .content__item {
	max-width: 90vw;
}

.content--offset .content__item {
	margin: 0 auto 15vh;
}

.content--offset .content__item:nth-child(even) {
	align-self: end;
	margin-bottom: -20vh;
}

.content--alternate .content__item:nth-child(even) {
	margin-left: auto;
}

.content__item-imgwrap {
	position: relative;
	--imgwidth: 100%;
	margin: 0 auto;
	grid-area: 1 / 1 / 3 / 3;
	overflow: hidden;
	width: var(--imgwidth);
	padding-bottom: calc(var(--imgwidth) / (var(--aspect-ratio)));
	will-change: transform;
    z-index: 2;
}

.demo-2 .content__item-imgwrap {
	outline: 1px solid transparent;
}

.content__item--expand .content__item-imgwrap {
	grid-area: 1 / 1 / 3 / 2;
}

.content__item--expand:nth-child(even) .content__item-imgwrap {
	grid-area: 1 / 2 / 3 / 3;
	justify-self: end;
}



.content__item-img {
	/*--overflow: 40px;*/
    --overflow: 0px;
	height: calc(100% + (2 * var(--overflow)));
	top: calc( -1 * var(--overflow));
	width: 100%;
	position: absolute;
	background-size: cover;
	background-position: 50% 0%;
	will-change: transform;
	opacity: 0.8;
    /*filter: grayscale(1) sepia(0.5) brightness(1.3) invert(0.1);*/
    transition: filter 0.25s ease;
}

.content__item-img:hover {
    /*filter: grayscale(0) sepia(0) brightness(1) invert(0);*/
    
}

.content__item-img--t1 {
	--overflow: 60px;
}

.content__item-img--t2 {
	--overflow: 80px;
}

.content__item-img--t3 {
	--overflow: 120px;
}

.content__item-number {
	/*opacity: 0.03;*/
    opacity: 0;
	/*font-size: 25vw;*/
    font-size: clamp(8em, 25vw, 25em);
	position: absolute;
	top: -7vw;
	right: -10vw;
	line-height: 1;
    font-family: var(--font-title);
    color: #DED7CC;
    /*transform: translateY(50);*/
    mix-blend-mode: multiply;
    
}

.content__item:nth-child(even) .content__item-number {
	right: auto;
	left: -7vw;
}

.content__item-title {
	position: relative;
	/*font-size: var(--size-title);*/
    font-size: clamp(3em, 8vw, 8em);
	padding: 0 3vw;
	margin: calc(var(--size-title) * -1/2) 0 0 0;
    /*margin: calc(clamp(5em, 10vw, 12em) * -1/2) 0 0 0;*/
	align-self: start;
	line-height: 1;
	font-family: var(--font-title);
	font-weight: var(--font-weight-title);
    text-transform: uppercase;
	color: var(--color-title);
	will-change: transform;
	mix-blend-mode: multiply;
    
    z-index: 3;
    
    /*transform: translateX(200);*/
    /*opacity: 0;*/
}

.content__item-title.active.spread-out .char {
/*.spread-out:hover .char {*/
  transition-delay: calc( 0.1s * ( 1 - var(--distance-percent) ) );
  transform: translateX(calc(0.15em * var(--distance-sine)));
}

.content--center .content__item-title {
	grid-area: 1 / 1 / 3 / 3;
	margin: auto;
}

.content__item-title--layer {
	padding: 0;
	z-index: 10;
	grid-area: 1 / 1 / 2 / 3;
	width: 100%;
	text-align: center;
}

.content__item-description {
	grid-area: 3 / 1 / 3 / 3;
	width: 70%;
	position: relative;
	margin: 0;
	padding: 1rem 0 0 0;
	color: var(--color-description);
    font-family: pt-mono, monospace;
    font-size: 0.875em;
    opacity: 0.5;
    /*background: #e5e5e5;*/
    color: #999;
}

.content__item-description span {
    display: block; 
    margin-bottom: 5px; 
    color: var(--color-link); 
    text-transform: uppercase;
}

.content__item-description a,
.content__item-description a:visited{
    color: var(--color-title);
    padding-top: 10px;
    display: inline-block;
}

.content__item-description a:hover {
    color: var(--color-title);
    text-decoration: underline;
}

.content--alternate .content__item-title,
.content__item--wide:nth-child(even) .content__item-description {
	grid-area: 3 / 1 / 4 / 2;
	justify-self: start;
}

.content--alternate  .content__item:nth-child(even) .content__item-title,
.content__item--wide .content__item-description {
	grid-area: 3 / 2 / 4 / 3;
	justify-self: end;
	width: auto;
}

.content__item--expand .content__item-description {
	grid-area: 1 / 2 / 3 / 3;
    justify-self: start;
    align-self: start;
    padding: 0 2rem;
    width: 250px;
    font-size: 0.9rem;
}

.content__item--expand:nth-child(even) .content__item-description {
	grid-area: 1 / 1 / 3 / 2;
	justify-self: end;
	text-align: right;
}

.content__item-deco {
	position: absolute;
	top: 2rem;
	left: 10vw;
	height: 40%;
	width: 1px;
	background: var(--color-link);
}

.content__item-decobar {
	width: 140%;
	height: 25%;
	top: 20%;
	left: -20%;
	position: absolute;
	background: #dd525a;
	mix-blend-mode: color-burn;
}

.work-mark {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
    width: 100px;
    height: 40%;
    /*background: #000;*/
}

.mountain-work {
    width: 120vw; 
    height: 35%; 
    position: absolute;
    /*top: 0px;*/
    left: -20vw;
    top: 100vh; 
    overflow: hidden;
} 

.mountain-work svg {
    display: block;
    width: 100%;
}

.work-mark.w1{
    top: 0px;
}

.mountain-work.m1 {
    z-index: 2;
}

.work-mark.w2,
.mountain-work.m2 {
    top: 22%;
    z-index: 3;
}

.work-mark.w3,
.mountain-work.m3 {
    top: 33%;
    z-index: 4;
}

.work-mark.w4,
.mountain-work.m4 {
    top: 44%;
    z-index: 5;
}

.work-mark.w5,
.mountain-work.m5 {
    top: 55%;
    z-index: 6;
}

.work-mark.w6,
.mountain-work.m6 {
    top: 66%;
    z-index: 7;
}

.work-mark.w7,
.mountain-work.m7 {
    top: 77%;
    z-index: 8;
}

.work-mark.w8,
.mountain-work.m8 {
    top: 88%;
    z-index: 9;
}

.noscroll { 
    /*position:fixed;*/
    overflow:hidden;
}


/* overlay */


.work-overlay {
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: -1; 
    background: var(--color-work-9); 
    opacity: 0;
    overflow-y: scroll; 
    overflow-x: hidden;
}

.work-overlay.show {
    z-index: 9999; 
}

.work-overlay-line {
    width: 1px; 
    height: 100vh; 
    background: var(--color-work-8); 
    position: fixed; 
    top: 0px; 
    opacity: 0.8;
}

.work-overlay-line.line1 { left: 20%; }
.work-overlay-line.line2 { left: 40%; }
.work-overlay-line.line3 { left: 60%; }
.work-overlay-line.line4 { left: 80%; }

.work-close-btn {
    position: fixed;
    right: 35px;
    top: 25px;
    width: 60px;
    height: 60px;
    z-index: 999;
    transition: all 0.1s;
    transition-delay: 0.1s;
    opacity: 0;
}

.work-close-btn:before, .work-close-btn:after {
  position: absolute;
  left: 30px;
  content: ' ';
  height: 60px;
  width: 1px;
  background-color: var(--color-title);
}

.work-close-btn:before {
  transform: rotate(45deg);
  transition: all 0.2s;
}
.work-close-btn:after {
  transform: rotate(-45deg);
  transition: all 0.2s;
}

.no-touch-device .work-close-btn:hover:before {
  transform: rotate(90deg);
}
.no-touch-device .work-close-btn:hover:after {
  transform: rotate(-90deg);
}

.work-overlay.show .work-close-btn {
    opacity: 0.6;
    
}

.work-content-outer {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.work-content {
    display: none;
    position: relative; 
    padding: none;
    z-index: 10;
}

.work-content.show {
    display: block;
    padding: 100px 0px 100px 0px; 
}

.work-content-contain {
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.work-content-contain-box {
    width: 80%; 
    max-width: 900px; 
    position: relative; 
    display: grid; 
    grid-template-columns: auto auto auto;
}

.work-content-contain-box .content__item-description {
    grid-area: 1 / 1 / 1 / 2; 
    width: 100%; 
    opacity: 0; 
    padding-bottom: 20px; 
    color: #333;
}

.work-content-contain-box .content__item-description span {
    color: var(--color-title);
}

.work-content.show .content__item-description {
    animation: fade-in .3s linear both;
    animation-delay: 1600ms;
}

.work-content-contain-box .content__item-imgwrap {
    grid-area: 2 / 1 / 3 / 4;
}

.work-content .content__item-img {
    opacity: 0;
}

.work-content.show .content__item-img {
    animation: slide-in-left-work .4s ease-out both;
    animation-delay: 300ms;
}


.work-content-contain-box .content__item-number {
    /*opacity: 0.3;*/ 
    top: 2vw;
    opacity: 0;
}

.work-content.show .content__item-number {
    animation: fade-in-big .3s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: 850ms; 
}

.work-content-contain-box .content__item-title{
    grid-area: 3 / 1 / 4 / 3;
}

.work-content-contain-box .content__item-img-sm {
    width: auto; 
    height: 40%; 
    position: absolute; 
    bottom: 0px; 
    right: -5%; 
    z-index: 2;
    opacity: 0;
}

.work-content.show .work-content-contain-box .content__item-img-sm {
    animation: slide-in-right-work-sm .3s ease-out both;
    animation-delay: 600ms; 
}

.work-content-contain-box .content__item-img-sm img {
    height: 100%;
}

.masonry-wrapper {
    margin: 50px auto 50px auto; 
    width: 90%; 
    max-width: 1100px;
    opacity: 0;
}

.work-content.show .masonry-wrapper {
    animation: fade-in .3s linear both;
    animation-delay: 1600ms;
}

.masonry {
    columns: 2; 
    column-gap: 20px;
}

.masonry-item{
    vertical-align: top; 
    display: inline-block; 
    width: 100%; 
    margin-bottom: 20px;
}

.masonry.m-col-1 {
        columns: 1; 
        column-gap: 0px;
}

.work-content .content__item-title .word .char{ 
    opacity: 0;
}

.work-content.show .content__item-title .word .char{
    animation: slide-in-right-work .3s cubic-bezier(.3, 0, .7, 1) both;
    animation-delay: calc(80ms * var(--char-index) + 1200ms);
}

.link-blank {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes slide-in-right-work {
    from {
        transform: translateX(150%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right-work-sm {
    from {
        transform: translateX(50%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left-work {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-big {
    from {
        transform: scale(1.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 0.3;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (min-width: 576px) { 
}

@media (min-width: 768px) { 
    .content__item--wide {
        grid-template-columns: 60% 40%;
    }

    .content__item--wide:nth-child(even) {
        grid-template-columns: 40% 60%;
    }
    
    .work-content-contain-box .content__item-img-sm {
        height: 60%; 
    }
    
    .work-content-contain-box .content__item-number {
        top: -2vw;
    }
    
    .masonry-wrapper {
        margin: 100px auto 100px auto; 
    }
    
    .masonry {
        columns: 2; 
        column-gap: 40px;
    }
    
    .masonry.m-col-3 {
        columns: 3; 
    }
    
    .masonry.m-col-1 {
        columns: 1; 
        column-gap: 0px;
    }

    .masonry-item{
        margin-bottom: 40px;
    }
}

.project-desc-wrapper {
    margin: 50px auto 50px auto; 
    width: 90%; 
    max-width: 1100px;
    opacity: 0;
}

.work-content.show .project-desc-wrapper {
    animation: fade-in .3s linear both;
    animation-delay: 1600ms;
}


.project-desc-contain {
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    column-gap: 50px;
    width: 100%;
    margin-bottom: 50px;
}

.project-desc-contain img {
    width: 100%;
}

.project-desc-contain img.auto {
    width: auto;
    max-width: 100%;
}

.project-desc-contain div {
    width: 100%;
}

.project-desc-contain.col-2-lg > div:first-child {
    width: 100%;
}

.project-desc-contain.col-2-lg > div:last-child {
    width: 100%;
}

.project-desc-contain h1,
.project-desc-contain h2,
.project-desc-contain-inn h1,
.project-desc-contain-inn h2 {
    font-family: var(--font-title);
    color: var(--color-title);
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 2px;
}
.project-desc-contain h2,
.project-desc-contain-inn h2 {
    font-size: 20px;
    letter-spacing: 1px;
}
.project-desc-contain,
.project-desc-contain p{
    font-family: pt-mono, monospace;
    font-size: 14px;
}

.project-desc-contain.col-4 div{
    width: 100%;
}

.project-desc-contain.col-full {
    margin-bottom: 0px;
}
.project-desc-contain.col-full div {
    width: 100%;
}

.project-desc-contain.col-2 > div:first-child {
    width: 100%;
}

.project-desc-contain.col-2 > div:last-child {
    width: 100%;
}

.project-desc-contain-inn {
    display: flex;
    flex-direction: column;
    column-gap: 50px;
    width: 100%;
}

.project-desc-contain-inn div {
    width: 100%;
}

.project-desc-contain-inn.btm-50,
.project-desc-contain.col-full.btm-50{
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .project-desc-contain {
        flex-direction: row;
    }
    .project-desc-contain-inn {
        flex-direction: row;
    }
    .project-desc-contain div {
        width: 25%;
    }
    .project-desc-contain.col-2-lg > div:first-child {
        width: 70%;
    }
    .project-desc-contain.col-2-lg > div:last-child {
        width: 30%;
    }
    .project-desc-contain.col-4 div{
        width: 25%;
    }
    .project-desc-contain.col-2 > div:first-child {
        width: 25%;
    }
    .project-desc-contain.col-2 > div:last-child {
        width: 75%;
    }
    .project-desc-contain-inn div {
        width: 33.33%;
    }  
}


/*
@media screen and (min-width: 53em) {
	.page--layout-1 {
		grid-template-columns: 30% 70%;
		grid-template-areas: 'header header' '...  meta' 'grid grid';
	}
	.page--layout-2 {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 'header meta' '...  meta' 'grid grid';
	}
}

@media screen and (max-width: 40em) {
	.content__item--expand .content__item-imgwrap,
	.content__item--expand:nth-child(even) .content__item-imgwrap {
		grid-area: 1 / 1 / 3 / 3;
	}
	.content__item--expand .content__item-description,
	.content__item--expand:nth-child(even) .content__item-description,
	.content__item--wide .content__item-description,
	.content__item--wide:nth-child(even) .content__item-description {
		grid-area: 3 / 1 / 4 / 3;
	    padding: 1rem 0;
	    width: 100%;
	    text-align: left;
	}
	.content__item--wide .content__item-description {
		padding: 1rem;
	}
	.content--alternate .content__item-title,
	.content--alternate .content__item:nth-child(even) .content__item-title {
		grid-area: 1 / 1 / 4 / 2;
	}
}
*/