/*  

	Author : Amedea
	Author URI : http://amedea.pro
	Author : Moskva Yigit
	Author URI : http://moskvayigit.com
	Version : 0.0.3.3

	Table of Contents
	- General
	- Splitting
	- Project
	- Tooltip
	- Marquee
	- Parallax Image
	- Contact Page
	- About Page
	
*/

/*----------------------------
	.-- General
-----------------------------*/

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

:root{
	--amedea--preset--color--white : #fff;
	--amedea--preset--color--black : #000;
}

html, body {
    scroll-behavior: auto;
}

.ki-description{
	width:100%;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

/*----------------------------
	.-- Splitting
-----------------------------*/

.splitting .word,
.splitting .char {
    display: inline-block;
}

.splitting .char {
    position: relative;
}

.splitting .char::before,
.splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none;
}

.splitting {
    --word-center: calc((var(--word-total) - 1) / 2);
    --char-center: calc((var(--char-total) - 1) / 2);
    --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
    --word-percent: calc(var(--word-index) / var(--word-total));
    --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
    --char-percent: calc(var(--char-index) / var(--char-total));
    --char-offset: calc(var(--char-index) - var(--char-center));
    --distance: calc(
        (var(--char-offset) * var(--char-offset)) / var(--char-center)
    );
    --distance-sine: calc(var(--char-offset) / var(--char-center));
    --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting.cells img {
    width: 100%;
    display: block;
}

@supports (display: grid) {
	
    .splitting.cells {
        position: relative;
        overflow: hidden;
        background-size: cover;
        visibility: hidden;
    }

    .splitting .cell-grid {
        background: inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template: repeat(var(--row-total), 1fr) / repeat(
                var(--col-total),
                1fr
            );
    }

    .splitting .cell {
        background: inherit;
        position: relative;
        overflow: hidden;
    }

    .splitting .cell-inner {
        background: inherit;
        position: absolute;
        visibility: visible;
        width: calc(100% * var(--col-total));
        height: calc(100% * var(--row-total));
        left: calc(-100% * var(--col-index));
        top: calc(-100% * var(--row-index));
    }

    .splitting .cell {
        --center-x: calc((var(--col-total) - 1) / 2);
        --center-y: calc((var(--row-total) - 1) / 2);
        --offset-x: calc(var(--col-index) - var(--center-x));
        --offset-y: calc(var(--row-index) - var(--center-y));
        --distance-x: calc(
            (var(--offset-x) * var(--offset-x)) / var(--center-x)
        );
        --distance-y: calc(
            (var(--offset-y) * var(--offset-y)) / var(--center-y)
        );
    }
	
}

/*----------------------------
	.-- Project
-----------------------------*/

.light .project__name,
.light .project__date,
.light .project__title-line {
    color: var(--wp--preset--color--white);
}

.dark .project__name,
.dark .project__date,
.dark .project__title-line {
    color: var(--wp--preset--color--black);
}

main {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.unbutton:focus {
    outline: none;
}

.project {
    max-width: 1000px;
    margin: 20vh auto 5vh;
    display: grid;
    grid-column-gap: 7vw;
    grid-row-gap: 0.5rem;
}

.project--intro {
    grid-template-columns: 1fr;
    grid-template-areas:
        "label-name"
        "name"
        "label-date"
        "date"
        "title"
        "label-mission"
        "mission";
}

.project--details {
    grid-template-areas: "label-default" "paragraph";
    grid-template-columns: 1fr;
}

.project--left {
    justify-content: start;
}

.project--right {
    justify-content: end;
}

.project--details p {
    grid-area: paragraph;
    max-width: 400px;
}

.project__label--default {
    grid-area: label-default;
}

.project p {
    line-height: 1.4;
    margin: 0;
    color: #575757;
}

.project__label {
    color: #adadad;
}

.project__label--name {
    grid-area: label-name;
}

.project__label--date {
    grid-area: label-date;
}

.project__label--mission {
    grid-area: label-mission;
}

.project__name {
    grid-area: name;
}

.project__date {
    grid-area: date;
}

.project__mission {
    grid-area: mission;
    line-height: 1.4;
}

.project__mission p:first-child {
    grid-area: p1;
}

.project__mission p:child {
    grid-area: p2;
}

.project__mission p {
    color: #575757;
}

.project__title {
    grid-area: title;
    font-size: clamp(2rem, 13vw, 8rem);
    font-weight: 400;
    margin: 10vh 0;
    line-height: 1;
}

.project__heading {
    color: #adadad;
    font-weight: inherit;
    font-size: inherit;
    margin: 0;
}

.heading__small i {
    margin-right: 10px;
}

.content__in span {
    opacity: 0.75;
}

.light .content__in span {
    color: var(--wp--preset--color--white);
}

.heading__small {
    margin-top: 48px;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--wp--preset--color--black);
    align-self: center;
}

.light .heading__small {
    color: var(--wp--preset--color--white);
}

.light .heading__small,
.light .heading__details,
.light .heading__details.size__medium {
    color: var(--wp--preset--color--white);
}

.content__inner span.subsize__medium,
.content__in span.subsize__medium {
    line-height: 1.6vw;
    font-size: 1.4vw;
	letter-spacing: -1px;
}

.content__inner span.subsize__large,
.content__in span.subsize__large {
    line-height: 2.0vw;
    font-size: 1.6vw;
	letter-spacing: -1px;
}

.text__center {
    text-align: center;
}

p.text__link {
    margin: 25px 0 0;
}

.text__link {
    color: var(--wp--preset--color--white);
}

.text__center p.text__link {
    margin: 25px auto;
}

.project--vertical {
    grid-column-gap: 0;
    grid-template-areas: inherit;
    grid-template-columns: inherit;
    max-width: 700px;
}

.project--vertical.project--left {
    margin: 20vh 10vh 0 10vh;
}

.intro__page.welcome__page {
    min-height: 120vw;
}

.content__image .grid__left {
    grid-column: 1/7;
}

.content__text.content__info {
    margin: 8.33333vw;
    color: #fff;
    font-size: 18px;
}

.content__text {
    grid-column-gap: 2.2vw;
    display: grid;
    align-items: flex-start;
    margin: 0 8.35vw;
}

.content__info {
    grid-column-gap: 2.2vw;
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    grid-column: 1/13;
}

.welcome__page.content__page {
    height: 110vw;
}

.content__page {
    display: grid;
    grid-template-rows: 100vh 1fr auto;
    grid-template-columns: 100%;
    width: 100vw;
    --imgRatio: 1344 / 896;
    height: calc(var(--imgRatio) * 100vw);
    padding: 0;
    position: relative;
}

.content__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 1;
}

.content__image__page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 1;
}

.welcome__home .text__title {
    font-weight: 600;
    letter-spacing: -10px;
    font-size: 17vw;
    line-height: 15vw;
    margin-top: 100px;
}

.welcome__page .text__title {
    font-weight: 600;
    letter-spacing: -5px;
    font-size: 10vw;
    line-height: 10vw;
    margin-top: 300px;
    margin-bottom: 50px;
}

.content__image .text__title {
    margin-left: -15px;
    color: var(--wp--preset--color--white);
    display: flex;
    grid-row: 2;
}

.content__image .text__intro {
    color: var(--wp--preset--color--white);
    grid-column: 1/7;
    max-width: 37vw;
    padding-top: 20vw;
    font-size: 2vw;
    line-height: 2.3vw;
    letter-spacing: -1px;
}

.content__image .text__second .text__intro {
    padding-top: 0.6vw;
}

.content__image .text__intro {
    grid-row: 1;
}

.content__image .text__intro__second {
    grid-row: 3;
    color: var(--wp--preset--color--white);
    margin-bottom: 250px;
}

.content__info h4 {
    margin-bottom: 2vh;
}

.content__image .text__link {
    grid-row: 2;
    padding-top: 0.55556vw;
}

.content__image .text__desc {
    color: var(--wp--preset--color--white);
    max-width: 37vw;
    grid-row: 3;
}

.light .content__image .text__desc {
    color: var(--wp--preset--color--white);
}

.light .heading__details {
    color: var(--wp--preset--color--white);
}

@media screen and (max-width: 53em) {
	
	.content__image .text__intro {
		max-width: 74vw;
		padding-top: 40vw;
		font-size: 4vw;
		line-height: 4.6vw;
	}
	
	.welcome__home .text__title {
		letter-spacing: -5px;
	}
	
	.welcome__page.content__page {
		height: calc((var(--imgRatio) * 100vw) + 30vw);
	}
	
	.welcome__page .text__title {
		font-size: 17vw;
		line-height: 15vw;
	}
	
	.content__page {
		--imgRatio: 2688 / 896;
	}
	
	.heading__details.size__small {
		letter-spacing: -1px;
		font-size: 5vw;
	}

	.heading__details.size__medium {
		letter-spacing: -1px;
		/*font-size: 3.5vw;*/
	}

	.heading__details.size__large {
		font-size: 10vw;
		line-height: 9vw;
	}
	
	.content__image .grid__right {
		grid-column: 1/12;
	}
	
	.project {
		padding: 1rem 3rem;
		text-align: center;
	}
	
	.text__left {
		text-align: center;
	}
	
	.content__inner span.subsize__medium,
	.content__in span.subsize__medium {
		font-size: inherit;
	}
	
	.heading__details.size__large {
		letter-spacing: -1px;
	}
	
	.content__text {
		grid-template-columns: repeat(2, 1fr);
		margin: 0 16vw;
	}
	
	.content__text.content__info {
		margin: 8vw 16vw;
	}

}

@media screen and (min-width: 53em) {
	
    .project--intro {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "label-name name"
            "label-date date"
            "title title"
            "label-mission mission";
    }

    .project--details {
        grid-template-areas: "label-default paragraph";
        grid-template-columns: auto auto;
    }
	
    .project__label {
        text-align: right;
    }
	
    .project__mission {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "p1 ..." "... p2";
        column-gap: 2rem;
    }
	
	.content__inner span.subsize__small,
	.content__inner span,
	.content__in span.subsize__small,
	.content__in span {
		font-size: 1.2vw;
	}
	
	.heading__details.size__small {
		letter-spacing: -1px;
		font-size: 2.5vw;
	}

	.heading__details.size__medium {
		letter-spacing: -1px;
		font-size: 3.5vw;
	}

	.heading__details.size__large {
		letter-spacing: -4px;
		font-size: 10vw;
		line-height: 9vw;
	}
	
	.content__image .grid__right {
		grid-column: 7/13;
	}
	
	.project {
		padding: 1rem;
	}
	
	.text__left {
		text-align: left;
	}
	
	.content__inner span.subsize__medium,
	.content__in span.subsize__medium {
		line-height: 1.6vw;
	}
	
	.heading__details.size__large {
		letter-spacing: -4px;
	}
	
	.content__text {
		grid-template-columns: repeat(12, 1fr);
		margin: 0 8vw;
	}
	
	.content__client {
		grid-column: 1/3;
	}

	.content__services {
		grid-column: 3/5;
	}

	.content__category {
		grid-column: 5/7;
	}

	.contant__date {
		grid-column: 7/9;
	}

}

/*----------------------------
	.-- Tooltip
-----------------------------*/

.image-tooltip:hover .tool-tip {
    display: block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.tool-tip {
    display: none;
    margin-top: 20px;
    padding: 10px;
    min-width: 100%;
    position: fixed;
    z-index: 1000;
}

.tool-tip span {
    position: relative;
    left: -10px;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    padding: 10px;
}

.tooltip--circle span {
    position: absolute;
    top: 50%;
    background: transparent !important;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    height: auto !important;
}

.tool-tip.tooltip--circle {
    min-width: 128px;
    min-height: 128px;
    border-radius: 300%;
    background: #000;
    color: #fff;
    margin-top: -64px;
    margin-left: -64px;
    cursor: none;
}

.image-tooltip {
    transition: opacity 0.25s ease-in-out;
}

.project-gallery:hover .image-tooltip {
    opacity: 0.25;
}

.project-gallery:hover .image-tooltip:hover {
    opacity: 1;
}

/*----------------------------
	.-- Marquee
-----------------------------*/

.marquee__container {
    --marquee-width: 100vw;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    --item-font-size: 15vw;
    height: 100%;
    padding: 150px 0;
}
.marquee {
    /*position: absolute;
	top: 0;
	left: 0;*/
    width: var(--marquee-width);
    overflow: visible;
    pointer-events: none;
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 20s linear infinite;
    transition: opacity 0.1s;
}

.marquee__inner {
    animation-play-state: running;
    opacity: 1;
    transition-duration: 0.6s;
}

.marquee span {
    text-align: center;
    white-space: nowrap;
    font-size: 10vw;
    padding: 0 1vw;
    line-height: 1.15;
    letter-spacing: -5px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.light .marquee span {
    color: var(--wp--preset--color--white);
}

.dark .marquee span {
    color: var(--wp--preset--color--black);
}

@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

/*----------------------------
	.-- Parallax Image
-----------------------------*/

.header-title {
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: self-end;
}

.header-title h1 {
    padding: 0 125px;
    font-weight: 600;
}

.header-title h1.small{
    line-height: 4vw;
    letter-spacing: -3px;
}

.header-title h1.large{
    font-size: 9vw;
    line-height: 10vw;
    letter-spacing: -5px;
}
.header-title h1.light {
    font-size: 8vw;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-style: italic;
    font-weight: 200;
}

.header-title h1 span {
    font-size: 1.3vw;
    letter-spacing: 1px;
    display: block;
    font-weight: 400;
    text-transform: uppercase;
	
}

h1.absolute-h {
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
	font-weight: 600;
    font-size: 6vw;
    line-height: 6vw;
}

.parallax {
	height: 100%;
    width: 100%;
}

.bg {
    min-height: 100vh;
    width: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
	z-index: 20;
    position: relative;
	padding: 10vw 20vw;
}

.bg.contain--{
    background-size: contain;
}

.bg.cover--{
    background-size: cover;
}

.bg__img {
    margin: auto;
    display: block;
	margin: 20vw auto;
	width: 100%;
}

.light .header-title h1,
.light h1.absolute-h {
    color: var(--wp--preset--color--white);
}

.dark .header-title h1,
.dark h1.absolute-h{
    color: var(--wp--preset--color--black);
}

@media screen and (min-width: 53em) {
	
	.h1.absolute-h{
	    letter-spacing: -5px;
	}
	
}

/*----------------------------
	.-- Contact Page
-----------------------------*/

.contact__container {
    overflow: hidden;
}

.map__image {
    height: 50vh;
	filter: invert(1);
}

.contact__page {
    display: flex;
    grid-template-rows: 100vh 1fr auto;
    grid-template-columns: 100%;
    width: 100vw;
    height: min-content;
    min-height: 100vh;
    padding: 0;
    position: relative;
}
.contact__page .content__inner {
    align-self: start;
    justify-self: start;
}

.contact__minimal {
    grid-column-gap: 2.3vw;
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    align-items: flex-start;
}

.contact__default {
    grid-column-gap: 2.3vw;
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    align-items: flex-start;
    margin: 9vw;
}

.contact__form {
    grid-column-gap: 2.3vw;
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    align-items: flex-end;
    margin: 15vw 2.5vw;
}

.contact__page .contact__form p {
    margin: 24px 0;
}

.form__inner_third {
    grid-column: 9/12;
}

.text__inner {
	grid-column: 2/7;
	padding-bottom: 50px;
}

.form__inner_second h1 {
    position: relative;
    letter-spacing: -1px;
    font-weight: 600;
}

.contact__image {
    width: 25vw;
    height: 40vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-5%, -50%);
}

.contact__image_form {
    width: 25vw;
    height: 40vw;
    position: absolute;
    top: 12%;
}

.contact__default .text__inner {
    grid-column: 2/5;
    padding-bottom: 50px;
}

.marquee__contact.marquee__container {
    padding: 0 !important;
}

.contact__page p {
    font-size: 17px;
    font-weight: 300;
    line-height: 27px;
    margin: 0 0 24px 0;
}

.contact__page h2 {
    letter-spacing: -1px;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
}

.contact__page h5 {
    text-transform: inherit;
    margin-bottom: 13px;
}

.contact__page .text__link {
    text-shadow: none;
}

@media screen and (max-width: 53em) {
	
	.text__inner_second {
		grid-column: 2/10;
	}

	.text__inner_third {
		grid-column: 2/10;
	}

	.text__inner_last {
		padding-top: 50px;
		grid-column: 2/10;
	}

	.form__inner {
		grid-column: 4/10;
	}

	.form__inner_second {
		grid-column: 4/10;
		text-align: center;
	}

	.text__inner.inner_marquee{
		padding-top: 100px;
	}
	
	.contact__minimal {
		margin: 15vw 15vw;
	}
	
	.contact__minimal .text__inner,
	.contact__minimal .text__inner_second {
		grid-column: 2/12;
	}
	
}

@media screen and (min-width: 53em) {
	
	.text__inner_second {
		grid-column: 2/4;
	}

	.text__inner_third {
		grid-column: 4/6;
	}

	.text__inner_last {
		padding-top: 50px;
		grid-column: 11/13;
	}
	
	.form__inner {
		grid-column: 1/3;
	}

	.form__inner_second {
		grid-column: 4/9;
	}

	.form__inner_second h1 {
		left: -15vw;
		padding-bottom: 150px;
	}
	
	.contact__minimal {
		margin: 15vw 2.5vw;
	}

}



.dark .contact__page .text__link,
.dark .contact__page .text__link a,
.dark .contact__page .content__inner,
.dark .marquee span {
    color: var(--wp--preset--color--black);
}

.light .contact__page .text__link,
.light .contact__page .text__link a,
.light .contact__page .content__inner,
.light .marquee span {
    color: var(--wp--preset--color--white);
}

/*----------------------------
	.-- About Page
-----------------------------*/

.about__container {
    padding: 14.5vw 8.5vw;
    width: 100vw;
    height: 100%;
}

.about__image {
    position: fixed;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
}

.about__split {
    width: 30vw;
}

.text--vertical {
    position: fixed;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 127px;
    line-height: 70px;
    margin-bottom: 25px;
    top: 7vw;
    left: 45.5%;
    font-weight: 700;
    opacity: 0.1;
    z-index: 10;
}

.about__split h1 {
    padding-bottom: 150px;
    letter-spacing: -1px;
    font-weight: 600;
}

.about__split h1:after {
    position: absolute;
    display: block;
    width: 5%;
    background: #000;
    height: 3px;
    content: "";
    margin: 20px 0 0;
}

.about__split h5 {
    line-height: 1.6em;
    font-weight: 200;
    padding: 15px 0;
    text-transform: inherit;
    font-size: 21px;
}

ul.split--social-icons {
    list-style-type: none;
    padding-inline-start: 0;
    margin-top: 100px;
}

.about__minimal h1 {
    font-weight: 600;
    letter-spacing: -10px;
    font-size: 10vw;
    margin-bottom: 0;
}

.about__minimal .about__text {
    max-width: 680px;
}

.about__minimal.image {
    width: 30vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
	background-size: cover;
}

.about__minimal ul.split--social-icons li:first-child {
    margin-bottom: 25px;
}

@media screen and (max-width: 53em) {
	
	.about__minimal {
		width: 50vw;
		margin-left: 10vw;
	}
	
	.about__minimal h1 {
		letter-spacing: -5px;
	}
	
	.about__minimal.image {
		opacity:0;
	}

}