body {
	background: white;
	padding: 0;
	margin: 0;
	overflow-x: hidden;

	--c-prime: #ca3592;
	--c-embedded: #63b4fc;
	--c-ds: #6ebc4a;
	--c-streamer: #f4910f;
	--c-pbx: #cc2121;
	--c-bms: #4cbfbc;
	--c-cast: #bcb94d;
	--c-access: #7a4ea0;
	--c-box: #949494;
}

@font-face {
	font-family: 'Cera';
	src: url('/fonts/cera-gr.woff2') format('woff2'),
		 url('/fonts/cera-gr.woff') format('woff'),
		 url('/fonts/cera-gr.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PFDin';
	src: url('/fonts/PFDinTextUniversal.woff2') format('woff2'),
		 url('/fonts/PFDinTextUniversal.woff') format('woff'),
		 url('/fonts/PFDinTextUniversal.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PFDinThin';
	src: url('/fonts/PFDinTextUniversal_Thin.woff2') format('woff2'),
		 url('/fonts/PFDinTextUniversal_Thin.woff') format('woff'),
		 url('/fonts/PFDinTextUniversal_Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

* {
	font-family: 'PFDin', sans-serif;
	box-sizing: border-box;
	letter-spacing: 0.05em;
}

@media (min-width: 1001px){
	.mDesk { }
	.mMobi { display: none !important; }

	.mDesk-noWrap { white-space: nowrap; }
}

@media (max-width: 1000px){
	.mDesk { display: none !important; }
	.mMobi { }
}

.nnselectable, .unselectable * {
	-webkit-user-select: none;
	   -moz-user-select: none;
		   -ms-user-select: none;
			 user-select: none;
}








.DEBUG { border: 1px dotted red; }

.rel { position: relative; }
.abs { position: absolute; }
.inline { display: inline-block; }

.AC { text-align: center; }

table.AL td,
tr.AL > td,
.AL { text-align: left; }

table.AM td,
tr.AM > td,
td.AM,
.AM { vertical-align: middle; }

.AR { text-align: right; }

.wMax { width: 100%; }
td.wMin { width: 1px; white-space: nowrap; }

table.noWrap td,
.noWrap { white-space: nowrap; }


@media (min-width: 1001px){
	.Desk-w40vw	{ width: 40vw; }
}

@media (max-width: 1000px){
	.Desk-w40vw	{ width: 90vw; }	'
}


.click { cursor: pointer; }

.pad0 { padding: 0; }
.padT10px { padding-top: 10px; }
.padT40px { padding-top: 40px; }
.padT50px { padding-top: 50px; }
.padT80px { padding-top: 80px; }
.padT100px { padding-top: 100px; }
.padT150px { padding-top: 150px; }

.padB10px { padding-bottom: 10px; }
.padB40px { padding-bottom: 40px; }
.padB50px { padding-bottom: 50px; }
.padB80px { padding-bottom: 80px; }
.padB100px { padding-bottom: 100px; }
.padB150px { padding-bottom: 150px; }


.w750px { width: 750px; }
.w1300px { width: 1300px; }
.maxW90vw { max-width: 90vw; }



.fWhite, .fWhite * { color: white; }
.fBlack, .fBlack * { color: black; }
.fSkyblue, .fSkyblue * { color: #72aedf; }
.fRed { color: red; }

.fBold, .fBold * { font-weight: bold; }
.fThin, .fThin * { font-weight: 300; }

.fHuge { font-size: 70px; }
.fBiggest { font-size: 52px; }
.fBigger { font-size: 36px; }
.fBig { font-size: 29px; }
.fMedi { font-size: 24px; }
.fSmall { font-size: 20px; }
.fSmallish { font-size: 18px; }
.fSmaller { font-size: 16px; }
.fSmallest { font-size: 13px; }

@media (max-width: 1000px){
	.fHuge { font-size: 50px; }
	.fBiggest { font-size: 42px; }
	.fBigger { font-size: 28px; }
	.fBig { font-size: 25px; }
	.fMedi { font-size: 20px; }
	.fSmall { font-size: 18px; }
	.fSmaller { font-size: 16px; }
	.fSmallest { font-size: 13px; }
}

.lh20px { line-height: 20px !important; }
.lh30px { line-height: 30px !important; }
.lh35px { line-height: 35px !important; }
.lh40px { line-height: 40px !important; }
.lh50px { line-height: 50px !important; }
.lh70px { line-height: 70px !important; }
.lh80px { line-height: 80px !important; }
.lh120px { line-height: 120px !important; }


@media (max-width: 1000px){
	.Mobi-lh25px { line-height: 25px; }
}

.Cera { font-family: 'Cera', sans-serif; }
.PFDin { font-family: 'PFDin', sans-serif; }
.PFDinThin { font-family: 'PFDinThin', sans-serif; }


a { text-decoration: none; }


.bkgWhite { background: white; }
.bkgOffWhite { background: #f3f3f3; }
.bkgOffBlack { background: #1d1d1d; }

.bkgOffBlack, .bkgOffBlack * {
	color: white;
}

.bkgSkyBlue { background: #72c1ff; }
.bkgMauve { background: #624e7a; }


.bkgCover {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.bkgA {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/banner_girl.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(70%);
}

.bkgA > div {
	z-index: 100;
}

.bkgB {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/banner_room.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.fMenu { 		font-family: 'PFDin', sans-serif;		font-size: 16px;							letter-spacing: 0.8px;	}

.fHeadline {	font-family: 'PFDin', sans-serif;		font-size: 70px;							letter-spacing: 0.8px;	}
.fSubheadline {	font-family: 'PFDinThin', sans-serif; 	font-size: 36px;							letter-spacing: 0.8px;	}
.fTitle { 		font-family: 'PFDin', sans-serif;		font-size: 50px;	font-weight: bold;	letter-spacing: 0.8px;	}
.fSubtitle {	font-family: 'PFDin', sans-serif;		font-size: 28px;	font-weight: bold;	letter-spacing: 0.8px;	}

.fBullet { 		font-family: 'PFDin', sans-serif;		font-size: 22px;	font-weight: bold;	letter-spacing: 0.8px;	}

.fText {		font-family: 'PFDin', sans-serif;		font-size: 16px;							letter-spacing: 0.8px;	}

.fThin { 		font-family: 'PFDinThin', sans-serif; 	font-weight: normal !important; }


.button {
	display: table-cell;
	vertical-align: middle;
	text-align: center;

	border-radius: 999px;
	border: none;
	background: #72c1ff; /* sky blue */
	padding: 10px 30px;

	font-family: 'PFDin', sans-serif;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
	color: white;

	cursor: pointer;
}







/* ---- HEADER ---- */

header {
	padding: 10px;
	width: 100vw;
	height: 71px;
	position: fixed;
	display: flex;
	justify-content: center;
	z-index: 5000;
}

header > .flexrow {
	width: 1200px;
}

header a {
	font-family: 'PFDinThin';
	font-size: 14px;
}

header .selected,
header .selected * {
	font-size: 14px;
}

header .button {
	border-radius: 999px;
	border: none;
	background: #72c1ff;
	color: white;
	padding: 7px 25px !important;
	font-family: 'PFDinThin', sans-serif !important;
	font-size: 14px !important;
	cursor: pointer;
}


/* -------------------------- */

#MobiMenu {
  height: 100%;
  width: 350px;
  position: fixed;
  z-index: 6000; /* higher than header */
  top: 0;
  left: calc(100vw + 15px);
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

#MobiMenu.open {
	left: calc(100vw - 350px);
}

#MobiMenu a {
  padding: 8px 8px 8px 32px;
  font-size: 19px;
  display: block;
  color: white;
}

#MobiMenu .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* -------------------------- */

header .selected,
header .selected *,
#MobiMenu a.selected {
	font-family: 'PFDin';
}

header .selected:not(.dropdown) a,
#MobiMenu a.selected {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	padding: 15px;
	z-index: 5100;
}

.dropdown .dropdown-content > div { padding: 7px; }

.dropdown .dropdown-content * { color: white; font-size: 15px; }

.dropdown-content .disabled,
.dropdown-content .disabled *,
#MobiMenu a.disabled { color: #bbbbbb; pointer-events: none; cursor: default; }

.dropdown:hover .dropdown-content { display: block; }


button {
	border-radius: 999px;
	border: none;
	background: #72c1ff;
	color: white;
	padding: 10px 30px;
	cursor: pointer;
}


#MobiMenu button {
	font-family: 'PFDinThin';
	font-size: 15px;
	padding: 7px 25px;
	margin: 15px 32px;

}




/* ---- FOOTER ---- */

footer {
	width: 100vw;
	background: #1d1d1d;
	padding-bottom: 30px;
}

footer > div {
	padding: 20px;
}

@media (min-width: 1001px){
	/* footer > div { padding-bottom: 30px; } */
}
@media (max-width: 1000px){
	footer { padding: 0 5vw; align-items: flex-start; justify-content: flex-start !important; }
	footer > div { padding-bottom: 60px; }
}








/* ---- SECTION ------------------------------------------- */

section {
	position: relative;
	padding: 10px 20px;
	width: 100vw;
}

@media (max-width: 1000px){
	section .fHeadline { font-size: 9vw; }
	section .fSubheadline { font-size: 7vw; }
}


.flexmax {
	width: 100%;
	height: 100%;
}

.flexrow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.flexrow.flexwrap { flex-wrap: wrap; }


.flexrow.flextop { align-items: flex-start; }
.flexrow.flexmiddle { justify-content: center; }
.flexrow.flexevenly { justify-content: space-evenly; }

.flexrow.flexleft { justify-content: flex-start;  }



.flexcol {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

.flexcol.flexbottom { justify-content: flex-end;  }
.flexcol.flexmiddle { justify-content: center;  }

.flexcol.flexleft { align-items: flex-start; justify-content: flex-start;  }

.tileA {
	padding: 0 10px 10px 10px;
	width: 30vw;
	max-width: 560px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 7px;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.tileA.prime		{ border-top: 12px solid var(--c-prime); }
.tileA.embedded 	{ border-top: 12px solid var(--c-embedded); }
.tileA.ds			{ border-top: 12px solid var(--c-ds); }
.tileA.streamer 	{ border-top: 12px solid var(--c-streamer); }
.tileA.pbx			{ border-top: 12px solid var(--c-pbx); }
.tileA.bms			{ border-top: 12px solid var(--c-bms); }

section.tile-h300px > .tileA { min-height: 300px; }
section.tile-h400px > .tileA { min-height: 400px; }



@media only screen and (max-width: 600px) {
	.tileA { width: 80vw; max-width: 80vw; }
}


.tileB {
	padding: 0;
	width: 600px;
	max-width: 80vw;
	min-height: 680px;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}





/* ---- tileC: about.php ---- */


.tileC {
	padding: 0;
	width: 290px;
	min-height: 300px;
}


@media only screen and (max-width: 600px) {
	.tileA { width: 90vw; max-width: 90vw; }
}
















#Newsletter {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	background: #1d1d1d;
	padding-bottom: 50px;
}

#NewsletterContent {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 60px;
	width: 90vw;
	max-width: 900px;
}

@media (min-width: 1001px){
	#Newsletter { padding: 80px 10px 40px 10px;}
	#NewsletterContent { flex-wrap: nowrap; }
}
@media (max-width: 1000px){
	#Newsletter { padding: 50px 10px; }
	#NewsletterContent { flex-wrap: wrap; }
}

#NewsletterEmail {
	width: 250px;
	color: black;
	background: #f3f3f3;
	border-radius: 999px;
	border: none;

	font-family: 'PFDin';
	font-size: 18px;
	text-align: center;

	padding: 15px 30px;
}

#NewsletterStatus {
	width: 250px;
	padding: 10px 0 0 0;
	font-family: 'PFDin';
	font-size: 18px;
	font-weight: bold;
	color: white;
	text-align: center;
}

#NewsletterButton {
	width: 250px;
	background: #72c1ff;
	margin-top: 10px;

	font-family: 'PFDin';
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: white;

	padding: 15px 30px;

	border-radius: 999px;
	border: none;
}

#NewsletterStatus,
#NewsletterStatus * {
	-webkit-user-select: none;
	   -moz-user-select: none;
		   -ms-user-select: none;
			 user-select: none;
}






/* ---- Section with Text (top/middle/bottom). Background optional. ----

	<section class="typeA top/mid/bot">
		<div class="bkg"></div>
		<div class="txt"></div>
	</section>
*/

section.typeA {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

section.typeA > div.bkg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
}


section > div.bkg.Girl {
	background-image: url(../img/banner_girl.jpg);
	filter: brightness(70%);
}

section > div.bkg.Room1 {
	background-image: url(../img/banner_room1.jpg);
}


section > div.bkg.SoftHard {
	background-image: url(../img/banner_soft_hard.jpg);
}

section.typeA > div.txt {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	z-index: 10;
}

section.typeA.top > div.txt { justify-content: flex-start; }
section.typeA.mid > div.txt { justify-content: center; }
section.typeA.bot > div.txt { justify-content: flex-end; }


/* ---- title ----

	<section class="title">
		<div class="txt"></div>
	</section>
*/

section.title {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding-top: 100px;
	padding-bottom: 50px;
}

section.gradient {
	padding: 0;
	min-height: 10px;
	background-image: linear-gradient(to right, #3a5870, #c53691);
}



/* ---- Section with boxes/cards. Background optional. ----

	<section class="typeB">
		<div></div>
		<div></div>
		...
	</section>
*/

section.typeB {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

section.typeB.flextop { align-items: flex-start; }



/* ---- Section with pic on left, text on right. On mobile: pic is on top, text below ----

	<section class="typeC">
		<div>
			<img...>
			<div></div>
		</div>
	</section>
*/

section.typeC {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

section.typeC > div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}


@media (max-width: 1000px){
	section.typeC > div { flex-wrap: wrap; }
}

/* ------------------------------------- */

section.typeD {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;

	padding: 0;
	height: 478px;
}

section.typeD > div {
	position: relative;
	width: 50vw;
	height: 100%;
}

section.typeD > div.pic {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
}

section.typeD > div.txt { padding: 20px; z-index: 10; }
section.typeD > div.txt > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 1000px){
	section.typeD > div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 478px;
	}

	section.typeD > div.txt { background: transparent !important; }

	section.typeD > div.txt > div { width: 90%; }

	section.typeD > div.txt * {
		text-shadow: 2px 2px 20px black;
		color: white !important;
	}

	section.typeD > div.txt	td { white-space: wrap !important; }
}




/* ---- Section with bkgA on top half, bkgB on bottom half, and a pic on the center ----

	<section class="typeUpDn">
		<div class="up bkgWhite"></div>
		<div class="dn bkgOffWhite"></div>
		<img class="mid"...>
	</section>
*/

section.typeUpDn {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	padding: 50px;
}

section.typeUpDn > div.up {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: 10;
}

section.typeUpDn > div.dn {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: 10;
}

section.typeUpDn > img {
	z-index: 20;
}


@media (max-width: 1000px){
	section.typeUpDn > img { max-width: 80vw; }
}

/* ------------------------------------- */


div.submitButton * {
	-webkit-user-select: none;
	   -moz-user-select: none;
		   -ms-user-select: none;
			 user-select: none;
}

div.submitButton {
	display: inline-block;

	-webkit-user-select: none;
	   -moz-user-select: none;
		   -ms-user-select: none;
			 user-select: none;

	position: relative;

	padding: 15px 25px;

	cursor: pointer;

	overflow: hidden;

	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	transition: background-color 0.3s ease-in-out;
}

div.submitButton:not(.disabled):not(.loading):hover {
	background-color: #24ABC9;
}
div.submitButton.loading {
	cursor: default;
	background-color: #999;
}

div.submitButton,
div.submitButton .Ellipse-Loading,
div.submitButton .label  {
	transition: 0.3s ease all;
}

div.submitButton .Ellipse-Loading {
	left: calc(50% - (2.5 * 50px));
	top: calc(50% - (2.5 * 11px));
	opacity: 0;
	transform: scale( 2.5 );
}
div.submitButton .label {
	position: relative;
	display: inline-block;
}

div.submitButton.loading .label {
	opacity: 0;
	transform: scale( 0.5 );
}
div.submitButton.loading .Ellipse-Loading {
	left: calc(50% - 50px);
	top: calc(50% - 11px);
	opacity: 1;
	transform: none;
}


@keyframes Ellipse-Loading-X {
	0% { transform: translate(6px,40px) scale(0); }
	25% { transform: translate(6px,40px) scale(0); }
	50% { transform: translate(6px,40px) scale(1); }
	75% { transform: translate(40px,40px) scale(1); }
	100% { transform: translate(74px,40px) scale(1); }
}
@keyframes Ellipse-Loading-r {
	0% { transform: translate(74px,40px) scale(1); }
	100% { transform: translate(74px,40px) scale(0); }
}
@keyframes Ellipse-Loading-c {
	0% { background: #85a2b6; }
	25% { background: #fdfdfd; }
	50% { background: #dce4eb; }
	75% { background: #bbcedd; }
	100% { background: #85a2b6; }
}
.Ellipse-Loading div {
	box-sizing: content-box;
	position: absolute;
	top: -40px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: translate(40px,40px) scale(1);
	background: #85a2b6;
	animation: Ellipse-Loading-X 2s infinite cubic-bezier(0,0.5,0.5,1);
}
.Ellipse-Loading div:nth-child(1) {
	background: #bbcedd;
	transform: translate(74px,40px) scale(1);
	animation: Ellipse-Loading-r 0.5s infinite cubic-bezier(0,0.5,0.5,1), Ellipse-Loading-c 2s infinite step-start;
}
.Ellipse-Loading div:nth-child(2) { animation-delay: -0.5s; background: #85a2b6; }
.Ellipse-Loading div:nth-child(3) { animation-delay: -1s; background: #bbcedd; }
.Ellipse-Loading div:nth-child(4) { animation-delay: -1.5s; background: #dce4eb; }
.Ellipse-Loading div:nth-child(5) { animation-delay: -2s; background: #fdfdfd; }

.Ellipse-Loading {
	position: absolute;
	left: calc(50% - 32px);
	top: -3px;
	width: 100px;
	height: 20px;
	transform: translateZ(0) scale(0.64);
	backface-visibility: hidden;
	transform-origin: 0 0;
}


.fadeDown {
	max-height:0;
	padding: 0px 0;
	transition: 0.5s ease-in-out;
	overflow: hidden;
}

.fadeDown.open {
	max-height: 300px;
	transition: 0.8s ease-in-out;
}

.rot90 {
	transform: rotate(90deg);
}

.animTransform {
	transition: transform 0.5s;
}