@import url("landing.css");
@import url("orientation.css");
@import url("customization.css");
@import url("signup.css");
@import url("final.css");
@import url("rendering.css");


html {
	font-size:20px;
	font-size:calc(1vmin + 11px);
	line-height:1rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-aubergine: #4D144A;
	--color-aubergine-bright: #771872;
	--color-aubergine-10: #4D144A1A;
	--color-aubergine-50: #4D144A80;
	--color-background: #F1E1ED;
	--color-error: #F0EB93;
}

* {
	letter-spacing:-0.04em;
}

@media (orientation: landscape) {
	html.is-mobile {
			font-size:calc(1vw + 9.5px);
	}
}

body {
	background-color: var(--color-background);
	color: var(--color-aubergine);
	margin: 0;
	padding: 0;
}

div {
	box-sizing: border-box;
	position: relative;
}

/* utility classes */

.is-mobile .no-mobile {
	display: none !important;
}
.is-desktop .no-desktop {
	display: none !important;
}
.is-inapp .no-inapp {
	display: none !important;
}
.only-inapp {
	display: none !important;
}
.is-inapp .only-inapp {
	display: block !important;
}

@media (orientation: landscape) {
	.no-landscape {
		display: none !important;
	}
}
@media (orientation: portrait) {
	.no-portrait {
		display: none !important;
	}
}

.hidden {
	display: none !important;
}

/* views */

.view, .fullFrame {
	background-color: var(--color-background);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}
.view {
	display: none;
}

/* standard elements */

.logo-intel {
	display: block;
	width: 20rem;
	height: 2.5rem;
	background-image: url(../img/logo-intel-dark.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	position: absolute;
	/* background-color:orange */
}

.is-desktop .logo-intel {
	top:5rem;
	right:5rem;
	min-height:50px;
}
.is-mobile .logo-intel {
	top:1.5rem;
	right:1.5rem;
}

.logo-lenovoF1 {
	display: block;
	width: 15.7rem;
	height: 3rem;
	background-image: url(../img/logo-dark-f1-lenovo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	bottom:5rem;
	left:calc(50% - 7.85rem);
}

a.lenovo-logo-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.logo-mailchimp {
	display: block;
	width: 100%;
	height: 1.3rem;
	background-image: url(../img/logo-dark-mailchimp.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	opacity:0.6;
}

.logo-8w-air {
	display: block;
	width: 100%;
	height: 1.1rem;
	background-image: url(../img/logo-dark-8w-air.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/* opacity:0.6; */
	position: absolute;
	bottom:1rem;
	left:0;
	width:100%;
}

.eventName {
	text-transform: uppercase;
}

.raceToCreate {
	display: block;
	position: absolute;
	font-size: 1rem;
	font-weight: 700;	
}
.raceToCreate::before {
	content:"#RaceToCreate";
}
.raceToCreate._light {
	color: var(--color-white);
}
.is-mobile .raceToCreate {
	top:1.5rem;
	left:1.5rem;
}
.is-desktop .raceToCreate {
	top:5rem;
	left:5rem;
}

/* typography */

h1 {
	font-size: 3.2rem;
	line-height: 3.2rem;
	margin: 0 0 1.6rem 0;
}
h2 {
	font-size: 2.4rem;
	line-height: 2.4rem;
	margin:0 0 1rem 0;
}
h3 {
	font-size: 1.6rem;
	line-height: 1.6rem;
	margin: 0 0 0.8rem 0;
}
h4 {
	font-size: 1rem;
	line-height: 1rem;
	margin: 0 0 0.25rem 0;
}
sup {
  font-size: inherit;
  vertical-align: inherit;
}

p {
	margin:0.5rem 0;
}

.small {
	font-size: 0.7rem;
	line-height: 0.7rem;
}
.tiny {
	font-size: 0.6rem;
	line-height: 0.6rem;
	letter-spacing: 0;
}
.large {
	font-size: 1.2rem;
	line-height: 1.2rem;
}
.xlarge {
	font-size: 1.5rem;
	line-height: 1.5rem;
}

a {
	color:inherit;
}

/*buttons */
button {
	font-family: inherit;
}

.btn, 
.prompt-button-8w {
	display: inline-block;
	padding: 0.6em 1em;
	font-size: 1.1rem;
	line-height: 1rem;
	letter-spacing: -0.04em;
	border-radius: 0.25rem;
	border: 0.125rem solid var(--color-aubergine);
	text-decoration: none;
	color: var(--color-white);
	background-color: var(--color-aubergine);
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	cursor: pointer;
	width:fit-content;
	white-space: nowrap;
}

.btn:hover, 
.prompt-button-8w:hover {
	background-color: var(--color-aubergine-bright);
	border-color: var(--color-aubergine-bright);
}

.btn-secondary,
.prompt-button-8w:not(.button-primary-8w) {
	background-color: var(--color-background);
	color: var(--color-aubergine);
	border-color: var(--color-aubergine);
}
.btn-secondary:hover,
.prompt-button-8w:not(.button-primary-8w):hover  {
	background-color: var(--color-aubergine);
	border-color: var(--color-aubergine);
	color: var(--color-white);
}

.btn.__disabled {
	background-color: var(--color-aubergine-50);
	border-color: transparent;
	cursor: not-allowed;
}

/* form elements */
input, textarea, select {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2rem;
	border-radius: 0.3rem;
	border: 0.125rem solid var(--color-aubergine);
	background-color: var(--color-background);
	color: var(--color-aubergine);
	padding: 0.5em 0.75em;
	width:100%;
	box-sizing:border-box;
}

input.__error, textarea.__error, select.__error, .__error>input, .__error>textarea, .__error>select {
	background-color: var(--color-error);
}

input:focus, textarea:focus, select:focus, .btn:focus {
	outline: none;
	/* border-color: var(--color-aubergine-bright); */
	box-shadow: 0 0 0.2rem var(--color-aubergine-bright);
	/* background-color: var(--color-white); */
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1rem;
  height: 1rem;
  border: max(0.05rem, 1px) solid var(--color-aubergine);
	padding:0;
  border-radius: 0;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
	min-width: 1rem;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  clip-path: polygon(10% 50%, 0 60%, 30% 90%, 100% 20%, 90% 10%, 30% 70%);
  transform: scale(0);
  transform-origin: bottom left;
  /* transition: 120ms transform ease-in-out; */
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
} */

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

/*icons*/

.icon-right {
	padding-right:2.5em;
	background-repeat:no-repeat;
	background-position:calc(100% - 1em) 50%;
}
.icon-left {
	padding-left:2em;
	background-repeat:no-repeat;
	background-position:0.5em 50%;
}
.icon-arrow {
	background-image: url(../img/icon-light-arrow-right.svg);
		background-size:0.9em;
}
.icon-pinch {
	background-image: url(../img/icon-dark-pinch.svg);
	background-size:1.2em;
}
.icon-drag {
	background-image: url(../img/icon-dark-drag.svg);
	background-size:1.2em;
}
.icon-swipe {
	background-image: url(../img/icon-dark-swipe.svg);
	background-size:1.2em;
}
.icon-scroll {
	background-image: url(../img/icon-dark-mouse.svg);
	background-size:1.2em;
}
.icon-copy {
	background-image: url(../img/icon-light-copy.svg);
	background-size:0.8em;
}
.icon-sparkles {
	background-image: url(../img/icon-light-sparkles.svg);
	background-size:1em;
}

.icon-3d {
	background-image: url(../img/360-icon.svg);
	background-size: 1.2em;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	/* background-color: var(--color-background); */
	width:2.4rem;
	height:2.4rem;
	position: absolute;
	right:0;
	top:1.6rem;
}


/* DEV */

#ArSetup {
	padding:4rem 1.5rem;
	z-index:50;
}

#ArSetup h1 {
	text-align: left;
	font-size:4rem;
	line-height:4rem;
	margin:0 auto 1rem;
}

.prompt-box-8w,
#ArSetup ._permissions,
#ArInstructions ._instructions {
	background-color: var(--color-white) !important;
	text-align:center;
	font-size:1.1rem;
	line-height:1.1rem;
	padding:2rem;
	max-width:20rem;
	min-width:18rem;
	margin:2rem auto;
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-family: Gotham;
	color:var(--color-aubergine) !important;
	border-radius:0rem;
	filter:none;
	width:unset
}

#ArSetup .btn {
	width:7.2rem;	

}
#ArSetup .btn-secondary {
	background-color: var(--color-white);
}

#ArSetup .btn-secondary:hover {
	background-color: var(--color-aubergine);
	color: var(--color-white);
	border-color: var(--color-aubergine);
}

#ArSetup ._permissions-buttons,
.prompt-button-container-8w {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap:0.8rem;
	margin:1.5rem auto 0;
	/* width:16rem; */
}

#ArSetup .icon-left.icon-sparkles, .button-primary-8w {
	background-position: 0.75rem 50%;
}

#ArSetup ._loading {
	font-size:1.2rem;
	text-align: center;
	position: absolute;
	bottom:10rem;
	width:100%;
	left:0;
}
#ArInstructions {
	background-color: transparent;
	display: none;
}
#ArInstructions ._instructions h4 {
	font-size:1.2rem;
	line-height:1.2rem;
	width:100%;
	margin-bottom:1rem;
}
#ArInstructions ._instructions .icon-left {
	text-align: left;
	margin:0.5rem auto;
	padding-top:0.5rem;
	padding-bottom:0.2rem;
	white-space: nowrap;
	width:10rem;
	background-size:1.4em;
	padding-left:2.6rem;
}

#ArInstructions-OK {
	width: 10rem;
	font-size:1.2rem;
	line-height:1.2rem;
	margin-top:1.2rem;
}

#loadingContainer {
	display:none;
}

body:not(.xrextras-old-style) .prompt-button-8w {
	background-color: unset;
	border-radius:0.25rem;
}

body:not(.xrextras-old-style) .prompt-button-8w.button-primary-8w {
	background-color:var(--color-aubergine);
}

.prompt-button-8w {
	min-width:unset;
}

.button-primary-8w {
	padding-left:2em;
	background-repeat:no-repeat;
	background-position:0.5em 50%;
	background-image: url(../img/icon-light-sparkles.svg);
	background-size:1em;
}

#previewContainer {
	backdrop-filter: blur(20px);
background: #0000001F;
}

#videoPreview, #imagePreview {
	border-radius: 0;
border: none;
background-color: transparent;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
filter: none;
max-width: 84vw;
}

#closePreviewButton {
	background-color: var(--color-aubergine);
border-radius: 50%;
top: 0.5rem;
right: 0.5rem;
padding: 0.6rem;
}

#actionButton {
	font-family: Gotham;
	background-color: var(--color-aubergine);
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	margin-bottom: 1rem;
}

#actionButtonText {
	display:none;
}
#actionButtonImg {
	display:none;
}

#actionButton::before {
	content: "Download or Share";
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--color-white);
}

.__initial #recorder {
	display: none;
}

.__initial #ArInstructions {
	display: block;
}

.linkCopied {
	background-color: var(--color-white);
	color: var(--color-aubergine);
	/* font-weight: 700; */
	padding: 0.5rem 1rem;
	position: absolute;
	border-radius: 0.5rem;
	box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
	bottom:120%;
	left: calc(50% - 5rem);
	/* transition: all 0.2s ease-in-out; */
	
	display: none;
}

.linkCopied::before {
	content: "";
	display: block;
	position: absolute;
	width: 0.8rem;
	height: 0.8rem;
	background-color: var(--color-white);
	bottom:-0.4rem;
	left: calc(50% - 0.4rem);
	transform: rotate(45deg);
}

.linkCopied.__visible {
	display: block;
	opacity: 1;
	animation: fadeOut 1s linear forwards;
}