*, :after, :before {
  box-sizing: border-box
}
:root {
  font-size: 20px
}
body {
  margin: 0;
  --color-text: #FFF;
  --color-bg: #a2a7af;
  --color-link: #000;
  --color-link-hover: #000;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: roc-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --cursor-stroke: #FFF;
  --cursor-fill: none;
  --cursor-stroke-width: 1px;
  line-height: 1;
  font-weight: 300;
  overflow: hidden;
  overflow-y: scroll
}
.logo-znikajac{
	width: 100%;
	fill: #FFF;
}
#myVideo {
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100% !important;
  min-height: 100%;
	opacity: .9
}


.main-arrow{
	width:50px;
}
	.arrow-scroll{
		position: absolute;
		bottom: 10vh;
		z-index: 1;
		left: 50%;
		margin-left:-25px;
		text-align: center;
		animation-duration: 2s;
        animation-iteration-count: infinite;
		animation-name: bounce;
        animation-timing-function: ease;
    }
    @keyframes bounce {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-100px); }
        100% { transform: translateY(0); }
    }



 .box { 
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        background-color: #F44336;
        height: 200px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 200px;
    }
    .bounce-3 {
        animation-name: bounce-3;
        animation-timing-function: ease;
    }
    @keyframes bounce-3 {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-100px); }
        50%  { transform: translateY(0); }
        100% { transform: translateY(0); }
    }



.present {

    padding: 0 var(--page-padding) 10vh;

    position: relative;

}



.present__text--large {
    font-size: 1.5vw;
    font-size: clamp(2rem, 1.25vw, 2rem);
    font-weight: 300;
    grid-area: present-large;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1;
	max-width: 95%

}



.present__text--small {

    font-size: 1.75rem;

    font-size: clamp(1.5rem, 2vw, 1.25rem);

    font-weight: 300;

    grid-area: present-small;

    line-height: 1.3

}



.present__text--small p {

    margin-bottom: 10vh

}



.present__visual {

    align-self: center;

    background-position: 50% 50%;

    background-size: cover;

    border-radius: 20vw;

    grid-area: present-visual;

    height: 105vh;

    justify-self: center;

    max-width: 70vh;

    position: relative;

    width: 70%

}






.oh {
  overflow: hidden
}
.js .loading:after, .js .loading:before {
  content: "";
  position: fixed;
  z-index: 3000
}
.js .loading:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg)
}
.js .loading:after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  opacity: .4;
  background: var(--color-link);
  animation: loaderAnim .7s linear infinite alternate forwards
}
@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(.5, .5, 1)
  }
}
a {
  text-decoration: none;
  color: var(--color-link)
}
a, a:hover {
  outline: none
}
a:hover {
  color: var(--color-link-hover)
}
a:focus {
  outline: none;
  background: #d3d3d3
}
a:focus-visible, a:focus:not(:focus-visible) {
  background: transparent
}
a:focus-visible {
  outline: 2px solid red
}
.unbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit
}
.unbutton:focus {
  outline: none
}
main {
  padding: 3rem 2rem
}
.cursor {
  display: none
}
.frame {
  position: relative
}
.frame--footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40vh
}
.frame__title-wrap {
	min-height: 100vh;
}
.frame__title-wrap-2 {
	  margin: 15vh 0 0 0;
	padding: 15vh;
	background: rgba(162,167,175,.7);

}


.frame__title {
  font-size: 2.3rem;
  margin: 0
}
.frame__tagline {
  margin: 2rem 0 2.5rem;
  line-height: 1.2;
  max-width: 45ch
}
.frame__links a:not(:last-child) {
  margin-right: 1rem
}
.heading {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 6vw;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.3;
	  margin-top:5rem;margin-left: 1rem;
}
.heading .splitting .char, .heading .splitting .word {
  display: flex
}
.char-wrap {
  position: relative;
  overflow: hidden
}
.char, .char-wrap {
  display: inline-block
}
.char {
  will-change: transform
}
.heading > span {
  display: flex
}
.heading > span:first-child {
  font-size: 10vw;
  font-size: clamp(2rem, 14vw, 9rem)
}
.heading > span:nth-child(2) {
  margin-top: -1vw;
}
.item {
  margin: 0 0;
	padding: 15vh;
	background: rgba(162,167,175,.7);
}
.content__imgwrap, .item__imgwrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 200px;
  will-change: transform
}
.content__img, .item__img {
	    background-position: 50% 50%;

    background-size: cover;

    position: relative;
	
	    border-radius: 5vh 30vh 30vh 5vh;

    grid-area: project-img-left;

    grid-column-end: 3;

    height: 60vh;
		
		
		
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-size: cover;
  background-position: 50% 50%;
  will-change: transform
}





.content__img, .item__img.item__img__right {
		border-radius: 30vh 5vh 5vh 30vh;

  }

.item__meta {
  margin: .85rem 0 2rem;
  line-height: 1.6;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden
}
.item__meta-row {
  display: block;
  position: relative;
  overflow: hidden
}
.item__meta-row span {
  display: block;
  will-change: transform
}
.item__meta-row .underline {
	text-decoration: underline;
}
.item__enter {
  display: none;
  will-change: transform
}
.item__enter-circle {
  fill: none;
  stroke: #FFF;
  stroke-width: 1px;
  will-change: transform, opacity
}
.item__excerpt {
  line-height: 1.2;
	font-size: clamp(1.2rem,5vw,1.75rem);
  will-change: transform
}
.item__excerpt-link {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1;
  overflow: hidden
}
.item__excerpt-link span {
  display: inline-block;
  padding-bottom: 10px;
  position: relative
}
.item__excerpt-link span:after {
  content: "";
  width: 100%;
  height: 2px;
  top: calc(100% - 10px);
  position: absolute;
  left: 0;
  background: var(--color-text);
  transition: transform .2s;
  transform-origin: 100% 0
}
.item__excerpt-link span:hover:after {
  transform: scaleX(0)
}
.content {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  pointer-events: none
}
.content .heading {
  margin-bottom: 5rem;
  font-size: 10vw;
  font-size: clamp(2rem, 10vw, 6rem)
}
.content .heading > span:first-child {
  font-size: 14vw;
  font-size: clamp(2rem, 14vw, 10rem)
}
.content__article {
  height: 0;
  overflow: hidden
}
.content__article--open {
  pointer-events: auto;
  padding: 0 0 20vh;
  height: 100%;
  overflow-y: scroll
}
.content__article .heading {
  text-align: center
}
.content__text {
  padding: 0 1rem;
  line-height: 1.2;
  margin: 0 auto;
  max-width: 65ch;
	font-size:1.3rem;
  will-change: transform
}
.content__text p {
  margin: 1.5rem 0
}
.content__text img {
  max-width: 50%;
  margin: 5rem auto;
  display: block;
  border-radius: 50%
}
.content__back {
  position: absolute;
  top: 2rem;
  left: 2rem;
  opacity: 0;
  cursor: pointer
}
.content__article--open ~ .content__back {
  pointer-events: auto
}
@media screen and (min-width:53em) {
	
  .item {
    position: relative;
    display: grid;
	  padding: 0;
    grid-template-areas: "image image image enter""meta meta meta meta""... ... excerpt excerpt";
    grid-template-rows: minmax(420px, 40vh) auto auto
  }
  .item, .item--invert {
    grid-template-columns: 1fr auto 360px 1fr;
  }
  .item--invert {
    grid-template-areas: "enter image image image""meta meta meta meta""... ... excerpt excerpt"
  }
  .item__imgwrap {
    grid-area: image
  }
  .item__img {
    width: 100%;
    height: 100%
  }
  .item__enter {
    align-self: center;
    justify-self: center;
    display: flex;
    grid-area: enter;
    position: relative;
    z-index: 1000;
    max-width: 400px;
    max-height: 400px;
    align-items: center;
    justify-content: center
  }
  .item__enter-circle {
    pointer-events: none;
    cursor: pointer;
    flex: none
  }
  .item__meta {
    grid-area: meta
  }
  .item--invert .item__meta {
    justify-self: end;
    text-align: right
  }
  .item__excerpt {
    grid-area: excerpt
  }
  .item__excerpt p {
    margin: 0 0 1.5rem
  }
  .heading > span {
    justify-content: center
  }
  .heading--item {
    margin: 0;
    grid-area: 1/1/2/5;
    justify-self: center;
    align-self: center;
    text-align: center
  }
}
@media (any-pointer:fine) {
	
		.logo-znikajac{
	width: 50%;
	fill: #FFF;
}

	

	
	
  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
    z-index: 5000
  }
  .cursor__inner {
    fill: var(--cursor-fill);
    stroke: var(--cursor-stroke);
    stroke-width: var(--cursor-stroke-width);
    opacity: .7
  }
  .no-js .cursor {
    display: none
  }
}
.splitting .char, .splitting .word {
  display: inline-block
}
.splitting .char {
  position: relative
}
.splitting .char:after, .splitting .char:before {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none
}
.splitting {
  --word-center: calc(var(--word-total)/2 - 0.5);
  --char-center: calc(var(--char-total)/2 - 0.5);
  --line-center: calc(var(--line-total)/2 - 0.5)
}
.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)/2 - 0.5);
    --center-y: calc(var(--row-total)/2 - 0.5);
    --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))
  }
}




/*mobile~*/
@media screen and (max-width: 50em) {
	
	
	.item {
  margin: 0 0;
	padding: 0vh;
}

	
	
	
	.frame__title-wrap-2 {
		 
		margin: 0vh 0 0 0;
		padding: 0vh;

	}
	
	
.present__text--large {
    font-size: 1.1vw;
	max-width: 100%

}


	.present__text--small {

    font-size: 1.25rem;

    font-size: clamp(1.15rem, 2vw, 1.25rem);


}

}