/*------------------------------------------------------------------------------------------------------------------------*/
/* site css */
/*------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------*/
/* elements */
/*------------------------------------------------------------------------*/

:root {
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 0%);
	--dc-cyan: hsl(180, 100%, 50%);
	--dc-magenta: hsl(300, 100%, 50%);
	--dc-magenta-dark: hsl(300, 50%, 50%);
	--dc-yellow: hsl(60, 100%, 50%);
	--dc-red: hsl(0, 100%, 37%);
	--dc-doton: hsl(0, 0%, 40%);
	--dc-dotoff: hsl(0, 0%, 90%);
	--dc-shadowgrey: hsla(0, 0%, 0%, 0.1);
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Rubik", sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

a:link,
a:visited,
.a {
	color: var(--dc-magenta);
	text-decoration: none;
}

a:hover,
a:active,
.a:hover,
.a:active {
	color: var(--dc-magenta-dark);
	text-decoration: none;
	cursor: pointer;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid var(--black);
	margin: 15px 0;
	padding: 0;
}

/*------------------------------------------------------------------------*/
/* site classes */
/*------------------------------------------------------------------------*/

.hcErrorText {
	color: var(--dc-red);
	line-height: 1.2;
}

.hcCenterDivBoth {
	position: relative;
	width: fit-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hcCenterDivVertically {
	position: relative;
	width: fit-content;
	top: 50%;
	transform: translateY(-50%);
}

.hcCenterDivHorizontally {
	position: relative;
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
}

.hcShortWidth {
	max-width: 500px;
}

.hcMediumWidth {
	max-width: 700px;
}

.hcTextBold {
	font-weight: 600;
}

.hcSmallDetailBold {
	font-weight: 400;
	font-size: 0.75rem;
}

.hcSmallDetail {
	font-size: 0.75rem;
}

.hcTable {
	display: table;
	padding: 5px;
}

.hcTableRow {
	display: table-row;
	padding: 5px;
}

.hcTableCell {
	display: table-cell;
	padding: 5px;
}

.hcTableBordered {
	border: 1px solid var(--dp-elementgrey);
}

.hcGeneralButton {
	font-family: inherit;
	font-size: inherit;
	border: none;
	color: var(--black);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcGeneralButtonCyan {
	background-color: var(--dc-cyan);
}

.hcGeneralButtonMagenta {
	background-color: var(--dc-magenta);
}

.hcGeneralButtonYellow {
	background-color: var(--dc-yellow);
}

.hcHeadlineLarge {
	font-weight: 600;
	font-size: 4rem;
	align-items: flex-start;
	gap: 10px;
	line-height: 1;
}

.hcHeadlineMedium {
	font-weight: 600;
	font-size: 1.5rem;
	align-items: flex-start;
	gap: 10px;
	line-height: 1;
}

.hcHeadlineSmall {
	padding-top: 10px;
}

.hcHeadlineSmallBold {
	font-weight: 600;
}

.hcHeadlineSpaceDown {
	padding-top: 15px;
}

.hcHeadlineimage {
	float: left;
	width: 300px;
	height: auto;
	margin-right: 20px;
}

.hcHeadlineSub {
	font-weight: 600;
	font-size: 1.5rem;
}

.hcTextDescription {
	max-width: 500px;
	padding-bottom: 10px;
}

.hcCheckboxNoBulletList {
	list-style-type: "";
}

/*------------------------------------------------------------------------*/
/* site classes navigation */
/*------------------------------------------------------------------------*/

.hcTopNav {
	flex: 100%;
	padding: 10px;
	box-shadow: inset 0 -10px 10px -10px var(--dc-shadowgrey);
}

.hcTopNavLogo {
	flex-grow: 1;
}

.hcTopNavLinksDisplay {
	display: block;
}

.hcTopNavLinksDisplayLink {
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}

.hcTopNavLinksMenu {
	display: none;
}

.hcFooter {
	padding: 30px;
	background-color: var(--black);
	color: var(--white);
}

.hcFooterRow {
	padding: 1px;
}

.hcGlobalMenu {
	position: fixed;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 300px;
	display: none;
	padding: 13px 17px 17px 10px;
	background-color: var(--white);
	box-shadow: 0 8px 6px var(--dc-shadowgrey);
}

.hcGlobalMenuText {
	font-size: 1.5rem;
}

.hcNavSquareHeader {
	text-align: right; /* Aligns the text/icon to the right */
	width: 100%; /* Ensures it spans the full width of the menu */
}

/*------------------------------------------------------------------------*/
/* site classes layout */
/*------------------------------------------------------------------------*/

.hcCompanyNamePrefill,
.hcCompanyLoginPrefill,
.hcContactName,
.hcContactEmail,
.hcContactPhone {
	width: 200px;
}

.hcFlexRow {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.hcFlexBoxFullContent {
	padding: 20px;
	flex: 100%;
}

.hcFullRowHands {
	padding-top: 40px;
	padding-bottom: 40px;
	width: 100%;
	background-image: url(/images/hand_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.hcFlexBoxIndexHeader,
.hcFlexBoxAboutHeader,
.hcFlexBoxPricingHeader,
.hcFlexBoxContactHeader,
.hcFlexBoxDownloadHeader {
	padding: 20px;
	flex: 60%;
}

.hcIndexImage1 {
	background: url("/images/index_image_rack.jpg") no-repeat center center;
	background-size: cover;
	opacity: 1;
	min-height: 500px;
}

.hcIndexImage2 {
	background: url("/images/index_image_naturegirl.jpg") no-repeat center center;
	background-size: cover;
	opacity: 1;
	min-height: 500px;
}

.hcIndexImage3 {
	background: url("/images/index_image_hands.jpg") no-repeat center center;
	background-size: cover;
	opacity: 1;
	min-height: 500px;
}

.hcIndexImage4 {
	background: url("/images/index_image_dude.jpg") no-repeat center center;
	background-size: cover;
	opacity: 1;
	min-height: 500px;
}

.hcFlexBoxIndexHeadTrial {
	background-color: var(--dc-yellow);
	padding: 20px;
	flex: 40%;
}

.hcFlexBoxIndexRow2Pitch {
	background-color: var(--dc-cyan);
	padding: 20px;
	flex: 30%;
}

.hcFlexBoxIndexRow2Bullets {
	padding: 20px;
	flex: 70%;
	line-height: 1.6;
}

.hcFlexBoxIndexRow3Text {
	padding: 50px;
	flex: 70%;
	max-width: 900px;
}

.hcFlexBoxIndexRow3Pitch {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 30%;
}

.hcFlexBoxIndexRow4Bullets {
	padding: 20px;
	flex: 70%;
}

.hcFlexBoxIndexRow4Pitch {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 30%;
}

.hcFlexBoxIndexRow5Text {
	background-color: var(--dc-shadowgrey);
	padding: 80px;
	flex: 70%;
}

.hcFlexBoxIndexRow5TextInner {
	max-width: 800px;
}

.hcFlexBoxIndexRow5Pitch {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 30%;
}

.hcFlexBoxIndexBottomTrial {
	background-color: var(--dc-yellow);
	padding: 20px;
	flex: 100%;
}

.hcFlexBoxAboutHeadInfo {
	background-color: var(--dc-yellow);
	padding: 20px;
	flex: 40%;
}

.hcFlexBoxDownloadHeadInfo {
	background-color: var(--dc-yellow);
	padding: 20px;
	flex: 40%;
}

.hcFlexBoxAboutBottomTrial {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 40%;
}

.hcFlexBoxAboutBottomBullets {
	padding: 20px;
	flex: 60%;
	line-height: 1.6;
}

.hcFlexBoxPricingHeadPrices {
	background-color: var(--dc-cyan);
	padding: 40px;
	flex: 40%;
}

.hcFlexBoxPricingHeadPricesInner {
	max-width: 500px;
}

.hcPricingText {
	line-height: 2.4;
}

.hcPricingTextHighlighted {
	line-height: 1;
	font-weight: 400;
	font-size: 1.4rem;
	padding-top: 20px;
	padding-bottom: 10px;
}

.hcFlexBoxPricingRow2Trial {
	background-color: var(--dc-yellow);
	padding: 20px;
	flex: 100%;
}

.hcFlexBoxPricingBottomPitch {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 30%;
}

.hcFlexBoxPricingBottomBullets {
	padding: 20px;
	flex: 70%;
}

.hcFlexBoxContactHeadForm {
	background-color: var(--dc-magenta);
	padding: 20px;
	flex: 40%;
}

.hcContactMessage {
	width: 200px;
	max-width: 200px;
	height: 5em;
	display: block;
}

.hcSupportQuickstartImages {
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	vertical-align: top;
}

.hcSupportQuickstartImageContainer {
	padding: 10px;
}

.hcSupportQuickstartOpen {
	vertical-align: middle;
}

.hcFlexBoxPolicy {
	padding: 20px;
	flex: 100%;
	line-height: 1.6;
}

.hcPolicySubhead {
	font-weight: 600;
	padding-top: 10px;
}

.hcPolicyWording {
	max-width: 800px;
}

.hcAppStoreButtons {
	padding-top: 40px;
}

.hcAppStoreButton {
	cursor: pointer;
}

/*------------------------------------------------------------------------*/
/* site classes screenshots  */
/*------------------------------------------------------------------------*/

.hcFlexRowCarouselHeader {
	box-shadow: inset 0 -10px 10px -10px var(--dc-shadowgrey);
	color: var(--black);
	background-color: var(--dc-cyan);
	padding: 20px;
	flex: 100%;
	font-weight: 600;
	font-size: 1.5rem;
}

.hcFlexRowCarouselTail {
	box-shadow: inset 0 10px 10px -10px var(--dc-shadowgrey);
	padding: 20px;
	flex: 100%;
}

.hcCarouselContainer {
	max-width: 600px;
	position: relative;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

.hcCarouselSlide {
	display: none;
}

.hcCarouselPrevButton,
.hcCarouselNextButton {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	user-select: none;
	background-color: var(--black);
}

.hcCarouselNextButton {
	right: 0;
}

.hcCarouselPrevButton:hover,
.hcCarouselNextButton:hover {
	background-color: var(--black);
}

.hcCarouselText {
	color: var(--white);
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	right: 50px;
	text-align: center;
	background-color: var(--black);
}

.hcCarouselContent {
	position: relative;
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
}

.hcCarouselContent img {
	border: 1px solid var(--black);
	box-shadow: 10px 10px 0px var(--dc-magenta);
	transform: rotate(-2deg);
}

.hcCarouselNumber {
	color: 1px solid var(--black);
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.hcCarouselDots {
	text-align: center;
	padding-bottom: 20px;
}

.hcCarouselDot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: var(--dc-dotoff);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.hcCarouselDotActive,
.hcCarouselDot:hover {
	background-color: var(--dc-doton);
}

.animFade {
	animation-name: animFade;
	animation-duration: 0.5s;
}

@keyframes animFade {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 1;
	}
}

/*------------------------------------------------------------------------*/
/* site responsive styles  */
/*------------------------------------------------------------------------*/

@media (max-width: 700px) {
	body {
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}

	.hcFlexBoxIndexHeader,
	.hcFlexBoxAboutHeader,
	.hcFlexBoxPricingHeader,
	.hcFlexBoxContactHeader,
	.hcFlexBoxDownloadHeader,
	.hcFlexBoxIndexHeadTrial,
	.hcFlexBoxIndexRow2Pitch,
	.hcFlexBoxIndexRow2Bullets,
	.hcFlexBoxIndexRow3Bullets,
	.hcFlexBoxIndexRow3Pitch,
	.hcFlexBoxIndexBottomTrial,
	.hcFlexBoxAboutHeadInfo,
	.hcFlexBoxDownloadHeadInfo,
	.hcFlexBoxAboutBottomTrial,
	.hcFlexBoxAboutBottomBullets,
	.hcFlexBoxPricingHeadPrices,
	.hcFlexBoxPricingRow2Trial,
	.hcFlexBoxPricingBottomPitch,
	.hcFlexBoxPricingBottomBullets,
	.hcFlexBoxContactHeadForm,
	.hcFlexBoxIndexRow4Bullets,
	.hcFlexBoxIndexRow4Pitch,
	.hcFlexBoxIndexRow5Text,
	.hcFlexBoxIndexRow5Pitch {
		flex: 100%;
	}

	.hcFlexBoxContactForm {
		min-height: 500px;
	}

	.hcTopNavLinksDisplay {
		display: none;
	}

	.hcTopNavLinksMenu {
		display: block;
	}

	.hcHeadlineLarge {
		font-size: 2rem;
	}

	.hcHeadlineSmall {
		padding-top: 1px;
	}

	.hcHeadlineimage {
		width: 150px;
	}

	.hcFlexBoxCarousel {
		padding-bottom: 20px;
		margin-bottom: 0px;
	}
}

@media (min-width: 701px) {
	.hcGlobalMenu {
		display: none; /* Hides the menu on screens wider than 700px */
	}

	.hcFlexBoxIndexHeader,
	.hcFlexBoxIndexHeadTrial,
	.hcFlexBoxAboutHeader,
	.hcFlexBoxAboutHeadInfo,
	.hcFlexBoxDownloadHeadInfo {
		min-height: 500px;
		padding: 20px;
	}

	.hcFlexBoxContactHeader,
	.hcFlexBoxContactForm,
	.hcFlexBoxDownloadHeader {
		min-height: 800px;
		padding: 20px;
	}
}