*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	box-sizing: border-box;
}
body {
	font-family: 'Martian Mono', monospace;
	font-style: normal;
	font-weight: 200;
	background:#212121;
	color:#FFFFFF;
	font-size:24px;
	padding:0;
	margin:0;
	overflow-x:hidden;
}
.page-width{
	width:100%;
	max-width:1000px;
	margin:auto;
}
p{
	margin:0;
}
h2{
	margin-top:0;
	margin-bottom:0;
	font-size:128px;
	font-weight: 500;
	text-shadow: 0px 4px 4px #FFF;
}
h3{
	margin-top:0;
	margin-bottom:0;
	font-size:64px;
	font-weight: 300;
}
/*.logo{
	filter: drop-shadow(0px 6px 6px #FFF);
}*/
.logo-box svg{
    width: 100%;
    height: auto;
}
.main-content{
	color:#FFFFFF;
	background:#000000;
	padding:80px 20px 0px;
}
.slogan{
	font-size:64px;
	font-weight: 300;
}
.email-object{
	font-size:74px;
	font-weight: 500;
	text-shadow: 0px 3px 3px #FFFFFF;
	margin-top:80px;
	word-break: break-all;
	cursor: copy;
	text-decoration:underline;
}
.email-object:hover{
	text-decoration:none;
}
.copyright{
	font-size:12px;
	margin-top:180px;
}
.contacts{
	padding: 180px 20px 20px;
}
.mt-40{
	margin-top:40px;
}
.mt-180{
	margin-top:180px;
}
.brands{
	display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 40px;
}
.brands__item{
	margin-top:60px;
	font-size:14px;
}
.brands__icon{
	display: flex;
	background:#000000;
	box-shadow: 0px 0px 3px 3px #FFF, 0px 0px 3px 3px #FFF inset;
	transition: background 200ms linear, box-shadow 200ms linear;
}
.brands__item svg{
    width: 100%;
    height: auto;
}
.brands__item svg path{
	fill:#FFFFFF;
	transition: fill 200ms linear
}
.brands__icon:hover{
	background:#FFFFFF;
	box-shadow: 0px 0px 5px 5px #FFF;
}
.brands__icon:hover svg path{
	fill:#000000;
}
.brands__item p{
	margin-top:20px;
}
.touch__button{
	position:fixed;
	top:20px;
	right:20px;
	padding:20px;
	font-size:24px;
	font-weight:300;
	color:#000000;
	background: #FFFFFF;
	box-shadow: 0px 0px 5px 5px #FFF;
	z-index:100000000000;
	text-decoration:none;
	transition: all 200ms linear;
}
.hide__button{
	opacity:0;
	pointer-event:none;
	top:-20px;
}
.email-object__box{
	position:relative;
}
.email__tooltip{
	position:absolute;
	padding:10px;
	color:#FFFFFF;
	background:#000000;
	width:max-content;
	top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
	opacity:0;
	transition: all 200ms linear;
	pointer-events:none;
}
.email-object__box:hover .email__tooltip{
	opacity:1;
}
.noshadow .email-object{
	text-shadow: none;
}
.progress{
    cursor: progress;
}
@media (min-width: 993px){
	.touch__button:hover{
		color:#FFFFFF;
		background:#000000;
		box-shadow: 0px 0px 3px 3px #FFF, 0px 0px 3px 3px #FFF inset;
	}
}
@media (min-width: 577px){
	.brands{
		margin-top:40px;
	}
}
@media (min-width: 577px) and (max-width: 1024px){
	.email-object{
		font-size:54px;
	}
}
@media (max-width: 576px){
	body {
		font-size:20px;
	}
	.email__tooltip{
		display:none;
	}
	.main-content{
		padding:100px 10px;
	}
	.mt-40{
		margin-top:30px;
	}
	.mt-180{
		margin-top:100px;
	}
	.slogan{
		font-size:32px;
	}
	h2{
		font-size:64px;
		text-shadow: 0px 2px 2px #FFF;
	}
	h3{
		font-size:32px;
	}
	.brands{
		grid-template-columns: repeat(1,1fr);
	}
	.email-object{
		font-size:26px;
	}
	.contacts{
		padding: 100px 10px 20px;
	}
	.copyright{
		margin-top: 100px;
	}
	.email-object{
		margin-top:60px;
		text-shadow: 0px 2px 2px #FFF;
	}
	.touch__button{
		top:unset;
		left:10px;
		bottom:10px;
		width:calc(100% - 20px);
		text-align:center;
	}
}

.animation-box{
	position:relative;
	height:300px;
}
.animation-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 25vh;
	z-index: 1;
	height:calc(100% + 100px);
}
.animation-container span {
	position: absolute;
	color: whitesmoke;
	display: block;
	font-size: 18px;
	font-family: 'Martian Mono', monospace;
	text-shadow: 0 0 1px white;
	user-select: none;
	pointer-events: none;
	cursor: default;
	z-index: 1;
	opacity: 0;
	top: 0;
	will-change: transform, opacity;
	animation-timing-function: ease-out;
	animation-name: move;
}
@keyframes move {
	0% {
	opacity: 0;
	top: 100%;
	}
	25% {
	opacity: 1;
	}
	50% {
	opacity: 1;
	}
	75% {
	opacity: 0;
	}
	100% {
	opacity: 0;
	transform: none;
	}
}



.jt {
  position: relative;
  font-size: 20vmin;
  font-family: "Staatliches", sans-serif;
  text-transform: uppercase;
  font-display: swap;
}

.jt__row {
  display: block;
}
.jt__row:nth-child(1) {
  clip-path: polygon(0% 75%, 100% 75%, 100% 100%, 0% 100%);
}
.jt__row:nth-child(2) {
  clip-path: polygon(0% 50%, 100% 50%, 100% 75.5%, 0% 75.5%);
}
.jt__row:nth-child(3) {
  clip-path: polygon(0% 25%, 100% 25%, 100% 50.5%, 0% 50.5%);
}
.jt__row:nth-child(4) {
  clip-path: polygon(0% 0%, 100% -10%, 100% 35.5%, 0% 25.5%);
}
.jt__row:nth-child(5) {
  clip-path: polygon(0% -25%, 100% -45%, 100% -9.5%, 0% 0.5%);
}
.jt__row:nth-child(6) {
  clip-path: polygon(0% -50%, 100% -85%, 100% -44.4%, 0% -24.5%);
}

.jt__row.jt__row--sibling {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

.jt__text {
  display: block;
  transform-origin: bottom left;
  animation: moveIn 2s cubic-bezier(0.36, 0, 0.06, 1) alternate infinite;
}
.jt__row:nth-child(1) .jt__text {
  transform: translateY(-0.1em);
}
.jt__row:nth-child(2) .jt__text {
  transform: translateY(-0.3em) scaleY(1.1);
}
.jt__row:nth-child(3) .jt__text {
  transform: translateY(-0.5em) scaleY(1.2) rotate(-1deg);
}
.jt__row:nth-child(4) .jt__text {
  transform: translateY(-0.7em) scaleY(1.3) rotate(-2deg);
}
.jt__row:nth-child(5) .jt__text {
  transform: translateY(-0.9em) scaleY(1.4) rotate(-3deg);
}
.jt__row:nth-child(6) .jt__text {
  transform: translateY(-1.1em) scaleY(1.5) rotate(-4deg);
}

@keyframes moveIn {
  80%,
  100% {
    transform: translateY(0em);
  }
}

/* Add class debug on class jt for debugging */
.debug .jt__row:nth-child(even) {
  color: black;
  background: white;
}
.debug .jt__row:nth-child(odd) {
  color: white;
  background: black;
}