@import '../../../bower_components/fontawesome/css/font-awesome.min.css';

:root {
	--paper: #eae6ca;
	--ink: #24251e;
	--cyan: #08b9da;
	--orange: #ff9239;
	--purple: #c53ed7;
	--green: #2fc85a;
	--yellow: #f7cd2c;
}

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

html, body {
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	isolation: isolate;
	min-width: 960px;
	color: var(--ink);
	background: var(--paper);
	font: 300 1em/1.38 Lato, sans-serif;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--paper) url('../../Images/Paper - Background.jpg') center / cover no-repeat;
}

img, video {
	display: block;
	width: 100%;
	image-rendering: optimizeQuality;
}

a {
	color: inherit;
}

.visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wrapper {
	position: relative;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.wrapper::after {
	content: '';
	display: table;
	clear: both;
}

._container {
	width: 100%;
}

header {
	position: relative;
	z-index: 2;
	height: 430px;
	min-width: 960px;
	padding-top: 114px;
	overflow: hidden;
	border-bottom: 40px solid #000;
	background: transparent;
}

#triangle-field {
	position: fixed;
	inset: 0;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	mix-blend-mode: multiply;
}

header .productHeader {
	z-index: 2;
	height: 276px;
}

.icon, .appname {
	position: absolute;
}

.icon {
	top: 10px;
	left: 0;
	width: 256px;
	height: 256px;
	border-radius: 23%;
	box-shadow: 0 12px 28px rgba(27, 29, 20, .25);
}

.appname {
	top: 33px;
	right: 0;
	width: 620px;
	text-align: right;
}

.name {
	display: block;
	width: 620px;
	height: 85px;
	margin-left: auto;
	background: transparent;
}

.baseline {
	margin: 16px 0 0;
	font-size: 1.25em;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}

header .downloadArea {
	position: absolute;
	right: 0;
	bottom: 8px;
	width: 100%;
	text-align: right;
}

.appStoreBadgeLink {
	display: inline-block;
	width: 119.66407px;
	height: 40px;
	line-height: 0;
}

.appStoreBadgeLink:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

.appStoreBadge {
	width: 119.66407px;
	height: 40px;
}

.main {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-bottom: 100px;
}

.main .wrapper {
	margin-top: 60px;
}

.main h1 {
	font-weight: 300;
}

.main h2 {
	margin-top: 2.2em;
	padding-left: .5em;
	border-left: 20px solid var(--cyan);
	font-weight: 300;
}

.main h2:nth-of-type(2) {
	border-left-color: var(--orange);
}

.main h2:nth-of-type(3) {
	border-left-color: var(--purple);
}

.highlight {
	padding: 10px;
	border-left: 4px solid var(--green);
	background: rgba(255,255,255,.45);
}

.appdescription {
	float: left;
	width: 66.04166667%;
}

.appscreen {
	float: left;
	width: 31.97916667%;
	margin-left: 1.97916667%;
}

.appscreen-link {
	display: block;
	float: left;
	clear: both;
	width: 307px;
	height: auto;
	margin-top: 30px;
}

.appscreen-link:first-child {
	clear: none;
	margin-top: 0;
}

.appscreen-img, .preview video {
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.preview {
	margin: 34px 0 10px;
	padding: 6px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 7px;
	background: rgba(255,255,255,.32);
}

.preview video {
	background: #000;
}

.finalDownload {
	margin-top: 50px;
	text-align: center;
}

#footer {
	position: relative;
	z-index: 2;
	min-height: 100px;
	margin-bottom: 0;
	background: none;
}

#copyright, #impressum {
	position: absolute;
	bottom: 10px;
	font-size: 10px;
	font-weight: 400;
}

#copyright {
	right: 10px;
}

#impressum {
	left: 10px;
}

#copyright, #copyright a, #impressum, #impressum a {
	color: #000;
}

/* Shared header technology and styling used by the existing product pages. */
.mainNavigation {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	min-height: 114px;
	background: url('../../../images/headerBackground.png') center 0 no-repeat;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1px;
	text-align: center;
}

.headerLogo {
	position: absolute;
	top: 30px;
	left: 20px;
	display: block;
	width: 200px;
	height: 40px;
	background-image: url('../../../images/logoTheKeptPromiseFull.png');
}

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mainMenu {
	position: absolute;
	top: 40px;
	left: 200px;
	right: 60px;
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
}

.mainMenu > .menu-item {
	display: inline-block;
	margin-right: 2em;
}

.mainMenu > .menu-item:last-child {
	margin-right: 0;
}

.menu-item {
	cursor: pointer;
}

.menu-item a, .menu-link {
	color: inherit;
	text-decoration: none;
}

.menuLayouter {
	display: none;
	margin-top: 20px;
}

.mainMenu > .menu-item.tkp_isTriggered .menuLayouter {
	display: block;
}

.appsMenu {
	position: absolute;
	z-index: 11;
	width: 200px;
	padding: 1rem;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 20px rgba(0,0,0,.2);
	font-size: .8em;
}

.appsMenu::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #fff;
}

.appsMenu > .menu-item {
	line-height: 24px;
}

.appsMenu > .menu-item:hover {
	font-weight: 700;
}

.socialsMenu {
	position: absolute;
	top: 40px;
	right: 20px;
}

.socialsMenu > .menu-item {
	display: inline-block;
	margin-right: 1em;
}

.socialsMenu > .menu-item:last-child {
	margin-right: 0;
}

.menu-PentatrixIsActive {
	font-weight: 700;
}

/* Existing feedback include. */
#tkp_feedbackArea {
	position: absolute;
	top: 70px;
	z-index: 1000;
	display: none;
	width: 360px;
	padding: 20px;
	border: 1px solid #000;
	border-radius: 3px 3px 10px 10px;
	background: #ffc;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}

#tkp_feedbackArea.tkp_isTriggered {
	display: block;
}

#tkp_feedbackForm {
	position: relative;
}

#tkp_feedbackForm * {
	position: relative;
	margin-bottom: 1rem;
}

#tkp_feedbackForm select {
	width: 100%;
}

#tkp_feedbackForm #tkp_sendFeedback {
	display: inline-block;
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 4px;
	color: #ff0;
	background: #000;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

/* Screenshot zoom keeps the existing class and overlay names. */
#taz_imageZoomWrapper {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: 10px;
	cursor: zoom-out;
	background: rgba(247,247,247,.95);
}

.taz_imageZoomContainer img {
	max-width: calc(100vw - 150px);
	max-height: calc(100vh - 20px);
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.taz_imageZoomStep {
	position: fixed;
	top: 50%;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	padding: 0 0 5px;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 50%;
	color: #fff;
	background: #000;
	cursor: pointer;
	font: 300 42px/1 Lato, sans-serif;
	box-shadow: 0 2px 8px rgba(0,0,0,.24);
}

.taz_imageZoomStep:hover,
.taz_imageZoomStep:focus-visible {
	color: #000;
	background: var(--yellow);
	outline: none;
}

.taz_imageZoomStep[hidden] {
	display: none;
}

.taz_imageZoomStep--previous {
	left: 24px;
}

.taz_imageZoomStep--next {
	right: 24px;
}