/* Import Typekit font */
@import url("https://use.typekit.net/guk6vzw.css");


#page-container, 
body .ar-experience-container,
body.ar-experience-container {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    background-color: black !important;
    background-image: url("/images/webar/BlackMetalTexture.jpg") !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@supports (height: 100dvh) {
    #page-container, 
    body .ar-experience-container,
    body.ar-experience-container {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}

.et_builder_inner_content, .ar-experience-content {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

@supports (height: 100dvh) {
    .et_builder_inner_content, .ar-experience-content {
        height: 100dvh;
        max-height: 100dvh;
    }
}

#main-content, .ar-experience-main {
    background: transparent;
}

.ar-experience-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
}

@supports (height: 100dvh) {
    .ar-experience-main {
        min-height: 100dvh;
    }
}

.ar-experience-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    min-height: 100vh;
    padding: 20px;
}

@supports (height: 100dvh) {
    .ar-experience-main-content {
        min-height: 100dvh;
    }
}


/* Dharma Gothic C */
.dharma-c-regular {
  font-family: "dharma-gothic-c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dharma-c-italic {
  font-family: "dharma-gothic-c", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.dharma-c-bold {
  font-family: "dharma-gothic-c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.dharma-c-bold-italic {
  font-family: "dharma-gothic-c", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.dharma-c-exbold-italic {
  font-family: "dharma-gothic-c", sans-serif;
  font-weight: 800;
  font-style: italic;
}

/* Dharma Gothic E */
.dharma-e-regular {
  font-family: "dharma-gothic-e", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dharma-e-italic {
  font-family: "dharma-gothic-e", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.dharma-e-bold {
  font-family: "dharma-gothic-e", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.dharma-e-bold-italic {
  font-family: "dharma-gothic-e", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Dharma Gothic M */
.dharma-m-regular {
  font-family: "dharma-gothic-m", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dharma-m-italic {
  font-family: "dharma-gothic-m", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.dharma-m-bold {
  font-family: "dharma-gothic-m", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.dharma-m-bold-italic {
  font-family: "dharma-gothic-m", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.dharma-m-exbold-italic {
  font-family: "dharma-gothic-m", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.ar_logo {
	text-align: center;
}

.ar_logo img {
    height: 10vh;
    margin-top: 4vh;
    margin-bottom:10vh;
}


.ar_tagline {
	text-align: center;
}

.ar_tagline img {
    width: 80vw;
    margin-top: 4vh;
}

.ctaDiv {
	position: relative !important;
}


.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top:1vh;
}

.header .title {
  font-family: "dharma-gothic-e", sans-serif;
  font-weight: 800; /* Extra Bold Italic */
  font-style: italic;
  font-size: min(17vw,130px);
  line-height:min(14vw, 100px);
  color: white;
}

#startARDiv p,
.header .subhead {
    font-family: Helvetica, sans-serif;
    font-size: 4vw;
    margin-top: 10px;
    color: white;
    text-align: center;
}

#chooseCamSel {
	display:none !important;
}

.instructions {
	font-family: Helvetica, sans-serif;
    font-size: 5vw;
    margin-top: 4vw;
    margin-bottom: 4vw;
    color: white;
    text-align: center;
    width: 95%;
}



.strata {
    position: relative;
    width: 57vw;
    height: 20vh;
    margin: 0vh auto;
    background: linear-gradient(to top, #FFDB12 0%, #FFF3BE 75%, #FFF2BA 100%);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 3vh;
    transition: background 0.3s ease;
}

#startARButton,
.demo-button {
	position: relative;
    width: 57vw;
    height: 7vh;
    margin: 0vh auto;
    background: linear-gradient(to top, #FFDB12 0%, #FFF3BE 75%, #FFF2BA 100%);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 1.5vh;
    transition: background 0.3s ease;
    white-space:no-wrap !important;
}

#startARButton:hover,
.demo-button:hover, 
.strata:hover {
    background: white;
}

.strata-img {
    width: 9vh;
    height: auto;
    margin-bottom: 2vh;
    filter: drop-shadow(0 0 8px rgba(128, 128, 128, 0.8));
}

.strata-text {
    font-family: "dharma-gothic-e", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: min(9vw, 40px);
    color: black;
    text-align: center;
}

#startARButton, 
.button-text {
    font-family: "dharma-gothic-e", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 12vw;
    color: black;
    text-align: center;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto auto;
    width: 45vw;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #CEB71B;
}

.divider-text {
    padding: 0 20px;
    color: #CEB71B;
    font-family: "dharma-gothic-e", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: min(9vw, 40px);
}