:root {
	--accentColor: #E6A3A1;
	--barColor: #000;	
	--cardBorderColor:rgba(0, 0, 0, 0.1);	
	--cardBackgroundColor:rgba(0, 0, 0, 0.02);
	--cardColorPressed:rgba(0, 0, 0, 0.04);	
	
	--backColor1:#DCDCFA;
	--backColor2:#FFE6DC;
	--backColor3:#F8F8FA;
	
	--buttonBlue:#188AD1;
	--buttonGreen:#4EAF16;
}

@media (prefers-color-scheme: dark) {
	:root {		
		--accentColor: #F2ABAA;
		--cardBorderColor:rgba(255, 255, 255, 0.1);		
		--cardBackgroundColor:rgba(255, 255, 255, 0.02);		
		--cardColorPressed:rgba(255, 255, 255, 0.04);		
		--backColor1:#2D2D33;
		--backColor2:#332E2C;
		--backColor3:#333333;
	}
}

[data-theme="dark"]{
	color-scheme: dark;
	--accentColor: #F2ABAA;
	--cardBorderColor:rgba(255, 255, 255, 0.1);	
	--cardBackgroundColor:rgba(255, 255, 255, 0.02);		
	--cardColorPressed:rgba(255, 255, 255, 0.04);		
	--backColor1:#2D2D33;
	--backColor2:#332E2C;
	--backColor3:#333333;
}

.backgroundColor1{
	background-color: var(--backColor1);
}

.backgroundColor2{
	background-color: var(--backColor2);
}

.backgroundColor3{
	background-color: var(--backColor3);
}

.sub-header a:hover,
footer a:hover,
header a:hover{
	text-decoration: underline;
}

article a{
	color: var(--buttonBlue);
}

section:not(.for-you) article a:hover{
	color: var(--accentColor)!important;
}


h1{
	font-size: 1.9rem;
	font-weight: 500;
	margin-bottom: 0;
}

h2{
	font-size: 1.3rem;
	font-weight: 500;
	opacity: 0.5;	
}

h3{
	font-size: 1.1rem;
}

article p{
	font-size: 1.1em;
	line-height: 1.5;
}

article{
	padding-top: 30px;
	padding-bottom: 30px;
}

.hero img{
	max-width: 100%;
}

.hero > img{
	margin-left: 0;
	margin-right: 0;
}


header{
	padding-top: 20px;
}

header li{
	font-weight: 500;
}

header img{
	height: 22px;
}

header::before{
	background-color: rgb(var(--background));
}

.sub-header{
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: calc(var(--mobileWidth) + 100px);
	margin-left: auto;
	margin-right: auto;	
}

.sub-header.stickynav{
	position:fixed;
	top: 0;
	left: 0;
	right:0;
	z-index: 10;
}

.sub-header.stickynav::before {	
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw; /* Full viewport width */
	height: 100%; /* Match the height of the header */
	z-index: -1; /* Ensure the background stays behind the content */
	background-color: rgb(var(--background));
}

.sub-header{
	padding-left: var(--horizontalPadding);
	padding-right: var(--horizontalPadding);
}

.sub-header nav a, footer a{
	text-decoration: none;
	color: var(--primary);
}

.sub-header nav li{
	margin-left: var(--horizontalPadding);
	font-size: 0.9em;
}

.sub-header nav a:hover{
	color: var(--accentColor);
}

.sub-header > div:first-child{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sub-header > div:first-child > div:first-child,
.sub-header > div:first-child > div:last-child{
	display: flex;
}

.sub-header > div:first-child > div:last-child{
	align-items: center;
}

.sub-header > div:first-child > div:first-child > div:last-child{
	display: flex;
	flex-direction: column;
	margin-left: 8px;
}

.sub-header > div:last-child{
	display: flex;	
	justify-content: flex-end;
}

.sub-header{
	padding-top: 10px;
	padding-bottom: 10px;
}

.sub-header > div:first-child > div > div > span:first-child{
	font-size: 1.8em;
	font-weight: 500;
}

.sub-header > div:first-child > div > div > span:last-child{
	opacity: 0.6;
}

.sub-header select{
	position: relative;
	width:24px;
	height:24px;
	mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M6.07696677,23.8550042 C4.95937715,23.8550042 4.11421078,23.571433 3.54146764,23.0042908 C2.96872451,22.4371485 2.68235294,21.6003834 2.68235294,20.4939956 L2.68235294,10.3660551 C2.68235294,9.25848245 2.96872451,8.42144811 3.54146764,7.85495211 C4.11421078,7.2884561 4.95937715,7.00520809 6.07696677,7.00520809 L9.11791777,7.00520809 L9.11791777,9.03784036 L6.19620074,9.03784036 C5.71592587,9.03784036 5.34896097,9.1619751 5.09530604,9.41024457 C4.84165111,9.65851405 4.71482364,10.0337725 4.71482364,10.5360201 L4.71482364,20.3222534 C4.71482364,20.8245009 4.84165111,21.2000826 5.09530604,21.4489983 C5.34896097,21.697914 5.71592587,21.8223719 6.19620074,21.8223719 L17.853018,21.8223719 C18.327692,21.8223719 18.6946569,21.697914 18.9539127,21.4489983 C19.2131685,21.2000826 19.3427964,20.8245009 19.3427964,20.3222534 L19.3427964,10.5360201 C19.3427964,10.0337725 19.2131685,9.65851405 18.9539127,9.41024457 C18.6946569,9.1619751 18.327692,9.03784036 17.853018,9.03784036 L14.9314625,9.03784036 L14.9314625,7.00520809 L17.9806533,7.00520809 C19.0995354,7.00520809 19.9450249,7.2884561 20.5171218,7.85495211 C21.0892187,8.42144811 21.3752671,9.25848245 21.3752671,10.3660551 L21.3752671,20.4939956 C21.3752671,21.6003834 21.0892187,22.4371485 20.5171218,23.0042908 C19.9450249,23.571433 19.0995354,23.8550042 17.9806533,23.8550042 L6.07696677,23.8550042 Z M12.0246094,15.5131498 C11.7636302,15.5131498 11.5391645,15.4199815 11.3512121,15.2336447 C11.1632597,15.047308 11.0692835,14.8289816 11.0692835,14.5786657 L11.0692835,4.19464686 L11.1465109,2.66350816 L10.6034955,3.32091064 L9.12405719,4.89437902 C8.95527703,5.08254682 8.73915872,5.17663072 8.47570226,5.17663072 C8.2417581,5.17663072 8.04182308,5.09916095 7.87589722,4.94422141 C7.70997135,4.78928187 7.62700842,4.59263198 7.62700842,4.35427174 C7.62700842,4.12775951 7.71856115,3.9223044 7.90166662,3.73790642 L11.2978961,0.463011259 C11.427147,0.340653722 11.5496661,0.256425207 11.6654534,0.210325712 C11.7812407,0.164226218 11.9009593,0.141176471 12.0246094,0.141176471 C12.1538603,0.141176471 12.2767025,0.164226218 12.3931361,0.210325712 C12.5095696,0.256425207 12.6289651,0.340653722 12.7513227,0.463011259 L16.1559534,3.73790642 C16.333458,3.9223044 16.4222103,4.12775951 16.4222103,4.35427174 C16.4222103,4.59263198 16.3378203,4.78928187 16.1690401,4.94422141 C16.0002599,5.09916095 15.7989516,5.17663072 15.5651152,5.17663072 C15.3072596,5.17663072 15.0939417,5.08254682 14.9251616,4.89437902 L13.4541245,3.32091064 L12.9111091,2.66350816 L12.9883365,4.19464686 L12.9883365,14.5786657 C12.9883365,14.8289816 12.8947104,15.047308 12.7074581,15.2336447 C12.5202059,15.4199815 12.2925896,15.5131498 12.0246094,15.5131498 Z'%3E%3C/path%3E%3C/svg%3E");
	font-size: 0;
	color: transparent;
	outline: none;
	border: none;
	background-color: var(--primary);
	box-sizing: border-box;
	appearance: none;
	cursor: pointer;
	margin-right: 16px;
}


button{
	appearance: none;
	padding: 6px 12px;
	border-radius: 50px;
	font-size: 1em;
	color: white;
}

button.blue{
	background-color: var(--buttonBlue);
}

button.green{
	background-color: var(--buttonGreen);
}

button:hover{
	background-color: var(--accentColor);
}


.sub-header > div:first-child > div:last-child button{
	font-size: 0.95em;	
}


.sub-header > div:first-child img{
	width: 4em;
	height: 4em;
}

.sub-footer article{
	border-top: 1px solid var(--cardBorderColor)
}

.sub-footer h1,
.sub-footer h2,
.sub-footer p,
.for-you h1,
.for-you h2,
.for-you p{
	text-align: center;
}

.sub-footer p{
	font-size: 0.9em;
}

@media screen and (max-width: 800px) {
	.sub-header > div:first-child{
		flex-direction: row;
	}				
		
	.sub-header > div:first-child > div:first-child > div:last-child{
		margin-left: 0;
	}
	
	.sub-header > div:first-child > div > div > span:first-child{
		font-size: 1.2em;
		display: none;
	}
	.sub-header > div:first-child > div > div > span:last-child{
		font-size: 0.8em;
		display: none;		
	}
	.sub-header > div:first-child > div > div > span{
		text-align: center;
	}
}




@media screen and (max-width: 800px) {
	header{
		position: relative;
	}
	
	article img,
	article > picture{
		max-width: 100%;
	}
	article > img,
	article > picture{
		margin-left: 0;
		margin-right: 0;
	}
}


footer{
	font-size: 1rem;
	padding-bottom: 10px;
	text-align: center;
	padding-top: 10px;
}

footer > *{	
	text-align: center;
}

footer > div, footer > nav{
	margin-bottom: 10px;
}

footer nav{
	margin-top: 15px;
	margin-bottom: 35px;
}


.for-you article > ul{
	display: flex;
	flex-direction: row;
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-top: 20px;
}

.for-you article > ul > li{
	display: flex;
	width: 33%;
}


.card{
	display: flex;
	flex-direction:column;
	align-items:center;	
	border-radius: 12px;
	text-decoration: none;
	color: var(--primary);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	border: 1px solid var(--cardBorderColor);
	background-color: var(--cardBackgroundColor);
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.card:hover{
	background-color: var(--cardColorPressed);
}

.card img{
	width: 120px;
	height: 120px;
}


.card h3{
	font-size: 1.4em;
	margin: 0;	
	margin-bottom: 20px;
	margin-top: 10px;
}

.card p{
	font-size: 1em;
	font-weight: 400;
	opacity: 0.5;
	margin: 0;	
}

@media screen and (max-width: 800px) {
	.for-you article > ul{
		flex-direction: column;
	}
	.for-you article > ul > li{
		width:auto
	}
}

footer nav.large{
	max-width:600px
}


footer nav.large .social{
	margin-top: 10px;
}

footer nav.large .social li{
	display: inline!important;
	margin-left: 0;	
}

footer > div:last-child{
	margin-top: 10px;
	font-size: 0.9em;
}

@media screen and (max-width: 800px) {
	footer nav.large{
		max-width:100%;
	}
}



.q_a > li{
	margin-top: 2px;
	margin-bottom: 2px;
}

.q_a > li > input:hover + label::before{
	background-color: var(--accentColor);
	opacity: 0.1;
}


.q_a > li > div{
	margin-top: 10px;
}

.q_a > li > input:checked + label{
	color: var(--accentColor);
}

.q_a > li > input:checked + label::after{
	border-color: var(--accentColor);
}



.hero{
	display: flex;	
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

.hero ul{	
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-top: 30px;
}
.hero ul li{
	display: inline;
	font-size: 1.2em;
	margin: 20px 8px;
}

.hero ul li button{
	padding: 8px 18px;
}

.hero img{
	width: 100%;	
}

.hero h3{
	font-size: 2em;
}

.hero h3 span{
	color: var(--accentColor);
}

.hero div{
	text-align: left;
}


@media screen and (max-width: 800px) {
	.hero{
		display:block
	}
	
	.hero h3{
		font-size: 1.7em;
	}
		
	.hero div{
		margin-top: 30px;
		text-align: center;
	}
	
	.hero ul li{
		display: block;
		text-align: center;
	}
		
}

.menubutton{
	display: block;
	padding:0!important;
	border-radius: 0!important;
	border-width: 0!important;
	height: 50px;
	background-size: contain; 
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

.menubutton:hover{
	filter: brightness(0.9);
}

.appstore{	
	width: calc(50px * 3);
	background-image: 	url("/assets/image/buttons/apple-app-store.svg");	
}

.macappstore{
	width: calc(50px * 4.125);   
	background-image: 	url("/assets/image/buttons/apple-mac-app-store.svg");
}

.seensestore{
	width: calc(50px * 4.125);
	background-image: 	url("/assets/image/buttons/seensestore.svg");
}



blockquote{
	border-left: 4px solid var(--accentColor);
	padding: .05rem 1rem;
	
}



td{	
	border: 1px solid var(--cardBorderColor);	
	padding: 8px;
	padding-top: 4px;
}
table{
	border-collapse:collapse;
	margin-top:15px;
	margin-bottom:15px;
}
td h5{
	font-size: 17px;
	border:0!important;
	margin-top:18px;
	margin-bottom:0px;
}

th{
	text-align:left!important;
}

td.tabtitle{
	border:0!important;
	opacity: 0.5;
}




article > .mainpagecard{
	margin-left: 0;
	margin-right: 0;
}


.mainpagecard{
	display: flex;
	width: 100%;
	height: 320px;
	border-radius: 40px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
	transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
	border: 1px solid rgba(130,130,130,0.1);
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.mainpagecard:hover{
	transform: scale(1.02);	
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
}

.mainpagecard .sub-container{
	display: flex;
	flex-direction: column;
	width: 60%;
	height: 100%;
/*	background-color: green;*/
}

.mainpagecard .title-area{
	font-family: "Montserrat", sans-serif;
/*	background-color: yellow;*/
	width:auto;
	height:30%;
	padding-right: 8%;
	padding-top: 7%;
	text-align: right;
}

.mainpagecard .title-area span:first-child{
	display: block;
	font-weight: 800;
	font-size: 2em;
	text-decoration: none;
}

.mainpagecard .title-area span:last-child{
	display: block;
	font-weight: 500;
	font-size: 1.4em;
	text-decoration: none;
	opacity: 0.5;
}



.mainpagecard .icon-area{
	display: flex;
/*	background-color: green;*/
	width:100%;
	height:70%;
}

.mainpagecard .icon-area .icon-container{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: auto;
/*	background-color: fuchsia;*/
}

.mainpagecard .icon-area .button-container{
	width: 50%;	
}


.mainpagecard .sub-container.screenshot-container{
	justify-content: center;
	width: 40%;
/*	background-color: blue;*/
}

.mainpagecard .screenshot-area{
/*	background-color: pink;*/
	display: flex;
	justify-content: center;
	height:85%;
	width:100%;	
	margin-left: -5%;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

.mainpagecard.inverse .screenshot-area{
	justify-content: flex-start;
}

.mainpagecard:hover .screenshot-area{
	-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.6);
}

.mainpagecard.inverse .screenshot-area{
	margin-left: 5%;	
}

.mainpagecard .screenshot-area img{	
	max-width: 200%;
	max-height: 200%;
	width: auto;
	height: 100%;
}

.mainpagecard .icon-area .icon-container img{
	width: 85%;
	margin: auto;
/*	background-color: red;*/
}

.mainpagecard{
	text-decoration: none;
}


.mainpagecard.inverse .title-area{
	text-align: left;
	padding-left: 10%;
	padding-right:0;
}


.mainpagecard .button-container{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	padding-bottom: 14px;
}

.mainpagecard .button-container > span{
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	width: 100px;
	padding: 4px 0px;	
	text-align: center;
	margin-bottom: 10px;
	border-radius: 20px;
	border: 2px solid var(--primary);
}

.mainpagecard.inverse .button-container{
	align-items: flex-start;
}

.mainpagecard .icon-area .icon-container img{
	margin-right: 8%;
	transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.mainpagecard:hover .icon-area .icon-container img{
	transform: scale(0.98);	
}

.mainpagecard.inverse .icon-area .icon-container img{
	margin-right: auto;
	margin-left: 10%;	
}

.landingpage h1{
	text-align: center;
}


@media screen and (max-width: 800px) {
	
	.mainpagecard{
		flex-direction: column;
		height: 75vw;
		width: calc(100% - 32px);
		margin-left: 16px!important;
		margin-right: 16px!important;
		border-radius: 20px;
	}

	.mainpagecard .icon-area .icon-container{
		width:30%;
	}
	
	.mainpagecard .title-area{
		padding-top: 4%;
		padding-left:6%!important;
	}
	
	.mainpagecard:hover{
		transform: scale(1);
		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
		-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.04);
	}
	
	.mainpagecard:hover .screenshot-area{
		-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);
	}
	
	.mainpagecard:hover .icon-area .icon-container img{
		transform: scale(1);
	}
	
	.mainpagecard .sub-container{
		width: 100%!important;
		height: 50%;
	}
		
	.mainpagecard .screenshot-area{
		height: auto;
	}
	
	.mainpagecard .screenshot-area{
		margin-left: 0!important;
		margin-right: 0!important;
		margin-top: 3%;
		width:110%;		
	}
	
	.mainpagecard .screenshot-area img{	
		max-width: 400%;
		max-height: 400%;
		width: 100%;
		height: 60vw;
	}
	
	.mainpagecard .sub-container.screenshot-container{
		align-items: center;
	}
	
	.mainpagecard:not(.inverse) :nth-child(1){
		order:1;
	}
	
	.mainpagecard:not(.inverse) .sub-container:last-child > *:last-child{
		order:1;
	}
	
	.mainpagecard .title-area{
		text-align: left!important;
	}
	
	.mainpagecard .button-container{
		align-items: flex-start;
	}
	
	.mainpagecard .title-area span:first-child{
		font-weight: 800;
		font-size: 1em;	
	}
	
	.mainpagecard .title-area span:last-child{		
		font-weight: 500;
		font-size: 0.8em;		
	}
	
	.mainpagecard .button-container > span{
		font-size: 0.5em;
		width: 50px;
		margin-bottom: 2px;
	}
	
	.mainpagecard .button-container{	
		padding-bottom: 12px;
	}
}




.colortc{
	background-image: linear-gradient(291deg,rgba(255,242,248,.85),rgba(243,241,255,.85) 65%,rgba(241,248,255,.85));
}

.colormb{
	background-image: linear-gradient(291deg,rgba(242,242,255,.85),rgba(241,255,253,.85) 65%,rgba(244,255,241,.85));
}

.colormxpg{
	background-image: linear-gradient(291deg,rgba(255,242,242,.85),rgba(255,241,251,.85) 65%,rgba(247,241,255,.85));
}

.colords{
	background-image: linear-gradient(291deg,rgba(255,254,242,.85),rgba(255,248,241,.85) 65%,rgba(255,241,241,.85));
}

@media (prefers-color-scheme: dark) {
	.colortc{
		background-image: linear-gradient(291deg,rgba(38,36,37,.85),rgba(36,36,38,.85) 65%,rgba(36,37,38,.85));
	}
	
	.colormb{
		background-image: linear-gradient(291deg,rgba(36,36,38,.85),rgba(36,38,38,.85) 65%,rgba(37,38,36,.85));
	}
	
	.colormxpg{
		background-image: linear-gradient(291deg,rgba(38,36,36,.85),rgba(38,36,38,.85) 65%,rgba(37,36,38,.85));
	}
	
	.colords{
		background-image: linear-gradient(291deg,rgba(38,38,36,.85),rgba(38,37,36,.85) 65%,rgba(38,36,36,.85));
	}	
}

[data-theme="dark"]{
	.colortc{
		background-image: linear-gradient(291deg,rgba(38,36,37,.85),rgba(36,36,38,.85) 65%,rgba(36,37,38,.85));
	}
	
	.colormb{
		background-image: linear-gradient(291deg,rgba(36,36,38,.85),rgba(36,38,38,.85) 65%,rgba(37,38,36,.85));
	}
	
	.colormxpg{
		background-image: linear-gradient(291deg,rgba(38,36,36,.85),rgba(38,36,38,.85) 65%,rgba(37,36,38,.85));
	}
	
	.colords{
		background-image: linear-gradient(291deg,rgba(38,38,36,.85),rgba(38,37,36,.85) 65%,rgba(38,36,36,.85));
	}	
}