html {
    margin: 0;
    overflow: hidden;
}

body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #030303;
}

@font-face {
	font-family: neueEinstellung;
  	src: url('fonts/NeueEinstellung-Bold.ttf');
	font-weight: bold;
}

@font-face {
	font-family: neueEinstellung;
  	src: url('fonts/NeueEinstellung-Medium.ttf');
	font-weight: normal;
}

@font-face {
	font-family: neueEinstellung;
  	src: url('fonts/NeueEinstellung-Light.ttf');
	font-weight: lighter;
}

.logo-container {
    position: absolute;
    top: 44%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    animation-name: animate-logo-container;
    animation-duration: 1s;
	animation-delay: 1.25s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.logo {
	background-image: url('./images/khatto-logo-white-no-padding.png');
	background-position: center;
    margin-left: auto;
    margin-right: auto;
    animation-name: animate-logo;
    animation-duration: 1.25s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	background-size: 100% 100%;
}

@keyframes animate-logo-container {
	0% {
		top: 44%;
	}
	100% {
		top: 18%;
	}
}

@keyframes animate-logo {
	0% {
		opacity: 0.0;
		width: 19.1875em;
		height: 2.9375em;
	}
	100% {
		opacity: 0.9;
		width: 31.9375em;
		height: 4.875em;
	}
}

@media (orientation: portrait) {
	@keyframes animate-logo {
		0% {
			opacity: 0.0;
			width: 14em;
			height: 2.1875em;
		}
		100% {
			opacity: 0.9;
			width: 23.275em;
			height: 3.5525em;
		}
	}
}

.phrase {
	margin-left: auto;
	margin-right: auto;
	color: #ececec;
	font-size: 1.25em;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	text-align: center;
	opacity: 0;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-name: animate-phrase;
	animation-duration: 1.25s;
	animation-delay: 1.25s;
}

@keyframes animate-phrase {
	0% {
		opacity: 0;
		margin-top: 0.325em;
	}
	100% {
		opacity: 0.9;
		margin-top: 1.15em;
	}
}

.legal-and-contact {
	width: 100%;
	height: 6.25em;
	position: absolute;
	bottom: 0;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
}

.contact {
	width: 60%;
	margin: 0 auto;
	height: 5em;
	color: #8d8d8d;
}

.contact a {
	text-decoration: none;
}

.contact td {
	width: 25%;
	text-align: center;
	font-weight: bold;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 60%;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	opacity: 0.0;
	cursor: pointer;
	transition: 0.3s;
}

@keyframes link-entrance-up {
	0% {
		opacity: 0.0;
    	-moz-transform: translateX(0%) translateY(50%);
    	-webkit-transform: translateX(0%) translateY(50%);
    	transform: translateX(0%) translateY(50%);
	}
	100% {
		opacity: 1.0;
    	-moz-transform: translateX(0%) translateY(0%);
    	-webkit-transform: translateX(0%) translateY(0%);
    	transform: translateX(0%) translateY(0%);
	}
}

.animate-link-entrance-up {
	animation-name: link-entrance-up;
}

@keyframes link-entrance-down {
	0% {
		opacity: 0.0;
    	-moz-transform: translateX(0%) translateY(-50%);
    	-webkit-transform: translateX(0%) translateY(-50%);
    	transform: translateX(0%) translateY(-50%);
	}
	100% {
		opacity: 0.9;
    	-moz-transform: translateX(0%) translateY(0%);
    	-webkit-transform: translateX(0%) translateY(0%);
    	transform: translateX(0%) translateY(0%);
	}
}

.animate-link-entrance-down {
	animation-name: link-entrance-down;
}

.legal-copy {
	color: #4d4d4d;
	font-size: 0.6em;
	margin-top: -2px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	opacity: 0;
	animation-name: legal-copy-animation;
	animation-duration: 1s;
	animation-delay: 3.75s;
	animation-fill-mode: forwards;
}

.privacy-policy-button {
	cursor: pointer;
}

.privacy-policy-container {
	background-color: white;
	border-radius: 10px;
	width: 400px;
	height: 120px;
	z-index: -1;
	transition: 0.2s;
	position: fixed;
	left: 50%;
	top: 70%;
	transform: translateX(-50%) translateY(-50%);
	margin: 0 auto;
	opacity: 0;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
}

.privacy-policy-container.active {
	transition: 0.2s;
	z-index: 10;
	top: 45%;
	opacity: 1;
}

.screen-fader {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #00000088;
	z-index: -1;
	transition: 0.3s;
	opacity: 0;
}

.screen-fader.active {
	z-index: 9;
	opacity: 1;
	transition: 0.3s;
}

.privacy-policy-container .heading {
	font-weight: bold;
	font-size: 2em;
    margin-top: 14px;
    margin-left: 12px;
}

.privacy-policy-details {
	margin-left: 14px;
    margin-top: 6px;
}

.facebook {
	background-image: url('./images/social-icon-fb.png');
	animation-delay: 2.5s;
}

.twitter {
	background-image: url('./images/social-icon-x.png');
	animation-delay: 2.75s;
}

.instagram {
	background-image: url('./images/social-icon-ig.png');
	animation-delay: 3s;
}

.email {
	background-image: url('./images/social-icon-mail.png');
	animation-delay: 3.25s;
}

@keyframes legal-copy-animation {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

.bright-focus {
	transition: 0.5s;
}

.bright-focus:hover {
	transition: 0.5s;
	opacity: 1.0;
    -moz-transform: translateX(0%) translateY(-5%);
    -webkit-transform: translateX(0%) translateY(-5%);
    transform: translateX(0%) translateY(-5%);
}

.shift-focus {
	transition: 0.5s;
}

.shift-focus:hover {
	transition: 0.5s;
	opacity: 1.0;
	background-position-y: 0.625em;
}

.scale-focus {
	transition: 0.3s;
}

.scale-focus-contact:hover {
	transition: 0.3s;
	opacity: 1.0;
	background-size: auto 70%;
}

.floating-emblem-container {
	z-index: -20;
	animation-fill-mode: forwards;
	animation-name: fade-in;
	animation-delay: 3s;
	animation-duration: 3s;
	opacity: 0;
	overflow: hidden;
	position:absolute;
	height: 100%;
	width: 100%;
}

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.floating-emblem {
	opacity: 0.2;
	z-index: -1;
	background-image: url('images/khatto-emblem-large-white.png');
	background-size: 100%;
	background-position: center;
	position: absolute;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	width: 3.125em;
	height: 3.125em;
	opacity: 0;
	animation-duration: 25s;
    -moz-transform: translateX(0%) translateY(-50%);
    -webkit-transform: translateX(0%) translateY(-50%);
    transform: translateX(0%) translateY(-50%);
}

@keyframes emblem-float-one {
	0% {  opacity: 0.15; left: -10%; }
	100% { opacity: 0.15; left: 110%; }
}

.floating-emblem-1 {
	animation-name: emblem-float-one;
	top: 0%;
}

.floating-emblem-2 {
	animation-name: emblem-float-one;
	animation-delay: 2.5s;
	top: 20%;
}

.floating-emblem-3 {
	animation-name: emblem-float-one;
	animation-delay: 5s;
	top: 40%; 
}

.floating-emblem-4 {
	animation-name: emblem-float-one;
	animation-delay: 7.5s;
	top: 60%; 
}

.floating-emblem-5 {
	animation-name: emblem-float-one;
	animation-delay: 10s;
	top: 80%; 
}

.floating-emblem-6 {
	animation-name: emblem-float-one;
	animation-delay: 12.5s;
	top: 100%; 
}

.elements {
	width: 100%;
	height: 9em;
	top: 30%;
	position: absolute;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-delay: 1.75s;
	opacity: 0;
	animation-name: elements-entrance;
}

@keyframes elements-entrance {
	0% {  opacity: 0.0; top: 25%; }
	100% { opacity: 1.0; top: 33%; }
}

.element-row {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.element {
	margin: 0 auto;
	cursor: pointer;
	width: 100%;
	transition: 0.3s;
	justify-content: space-evenly;
}

.element-image {
	width: 100%;
	height: 100%;
	background-size: auto 60%;
    background-position: center;
    background-repeat: no-repeat;
	transition: 0.3s;
	margin: 0 auto;
}

.element-image:hover {
	transition: 0.3s;
	background-size: auto 70%;
	transform: rotateZ(10deg) rotateY(25deg);
	filter: brightness(1.25) drop-shadow(2px 2px 8px #00000055);
}

.element-mini-description {
	color: white;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
    text-align: center;
    width: 90%;
    margin: 0 auto;
	font-size: 12px;
}

#khatto-button {
	background-image: url('images/khatto-emblem.png')
}

#last-groove-button {
	background-image: url('images/last-groove-icon.png')
}

#rhythm-aura-button {
	background-image: url('images/rhythm-aura-icon.png')
}

#hue-hero-button {
	background-image: url('images/hue-hero-icon.png')
}

.download-button-ios {
	margin: 10px auto;
}

.download-button-container {
	width: 100%;
	text-align: center;
}

.download-button {
	opacity: 1;
}

.element-description {
	color: white;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 2.5vw;
}

.about-khatto {
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: #000000ee;
	color: white;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	opacity: 0;
	transition: 0.3s;
}

.about-khatto a {
	color: #84c6ff;
	font-weight: bold;
}

.about-khatto-details {
	width: 80%;
    margin: 0 auto;
    font-size: 1.15em;
	margin-top: 20px;
	overflow-y: scroll;
	min-height: 1100px;
}

.about-khatto-details-container {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.about-khatto-header {
	font-size: 3em;
	margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
	font-weight: bold;
}

.divider {
	width: 90%;
	height: 1px;
	background-color: #ffffff22;
	margin: 0 auto;
}

.exit-icon {
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
	transition: 0.2s;
}

.about-khatto .exit-icon:hover {
	transition: 0.2s;
	filter: brightness(1.25) drop-shadow(2px 2px 8px #ffffffaa);
}

.privacy-policy-container .exit-icon {
	transition: 0.2s;
	filter: brightness(0);
}

.privacy-policy-container .exit-icon:hover {
	transition: 0.2s;
	filter: brightness(0) drop-shadow(2px 2px 8px #000000aa);
}

.about-khatto.active {
	z-index: 10;
	pointer-events: all;
	transition: 0.3s;
	opacity: 1;
	transform: none;
}

.contact-us-section {
	margin: 4em;
}

.contact-us-section h1 {
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	color: white;
	font-size: 2.25em;
	margin: 0;
}

.contact-us-button {
	border: 3px solid white;
    padding: 20px;
	padding-bottom: 16px;
    border-radius: 50px;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	color: white;
	text-align: center;
	position: fixed;
	top: 65%;
	transition: 0.2s;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	animation-name: animate-contact-us-button;
	animation-duration: 1s;
	animation-delay: 2.25s;
	animation-fill-mode: forwards;
}

.contact-us-button:hover {
	background-color: #ffffff;
	color: #0f97ca;
	transition: 0.3s;
	transition: 0.2s;
}

@keyframes animate-contact-us-button {
	0% {
		opacity: 0;
		cursor: none;
		font-size: 20px;
	}
	100% {
		opacity: 0.9;
		cursor: pointer;
		font-size: 24px;
	}
}

.highlight {
	color: #12aee8;
}

.contact-us-section .large {
	font-size: 3.25em;
}

.contact-us-form {
	margin: 4em;
}

form {
	color: white;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
}

label {
	font-weight: bold;
}


input {
	margin-top: 0.5em;
	min-width: 100%;
	min-height: 2.5em;
}

#request-description {
	min-width: 100%;
	min-height: 12em;
}

#submit-button {
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	font-weight: bold;
}

.home-logo-container {
	margin-top: 4em;
	width: 100%;
	margin: 0 auto;
	margin-top: 3.5em;
	text-align: center;
	margin-bottom: 5em;
}

.home-logo-container img {
	width: 15em;
	transform: scale(1.0);
	transition: 0.2s;
	cursor: pointer;
}

.home-logo-container img:hover {
	transform: scale(1.1);
	transition: 0.2s;
}

.contact td.displayed, .legal-copy.displayed {
	opacity: 1;
}

.contact-us-form input, .contact-us-form textarea {
	font-family: 'neueEinstellung';
    font-weight: 600;
	padding-left: 8px;
}

.contact-us-form textarea {
	padding-top: 8px;
	padding-right: 8px;
	margin-top: -8px;
}

.asterisk {
	color: red;
}

.loading-container {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000000ee;
	z-index: 10;
}

.loading-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-image: url('images/loading-symbol.png');
	background-size: 100%;
	width: 50px;
	height: 50px;
}

.rotate-animation {
	animation-name: rotate-clockwise;
	animation-duration: 0.6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes rotate-clockwise {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#result-container {
	display: none;
	font-weight: bold;
	width: 400px;
	height: auto;
	padding: 20px;
	padding-bottom: 14px;
	font-size: 24px;
	background-color: white;
	border-radius: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 10;
	font-family: neueEinstellung, Helvetica, Arial, sans-serif;
	text-align: center;
}

.error-message {
	margin-top: 10px;
    padding-top: 10px;
    font-size: 12px;
    color: #ffc3ce;
}

.error-border {
	border: 10px solid #ff0000;
}

.neutral-border {
	border: 10px solid #848484;
}

.success-border {
	animation-name: rotate-rainbow-border;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes rotate-rainbow-border {
	0% {
		border: 10px solid rgb(230, 139, 139);
	}
	14% {
		border: 10px solid rgb(243, 148, 205);
	}
	28% {
		border: 10px solid rgb(142, 230, 176);
	}
	42% {
		border: 10px solid rgb(194, 158, 238);
	}
	57% {
		border: 10px solid rgb(159, 197, 241);
	}
	71% {
		border: 10px solid rgb(246, 214, 159);
	}
	85% {
		border: 10px solid rgb(162, 241, 241);
	}
	100% {
		border: 10px solid rgb(230, 139, 139);
	}
}