@charset "utf-8";
address, article, aside, button, blockquote, body, dd, dialog, dl, dt, fieldset,
footer, form, h1, h2, h3, h4, h5, h6, header, li, nav, ol, p, pre, section,
td, th, tr, ul {
    margin: 0;
    padding: 0; 
}

/* #e2e0d8;*/

:root {
  --primary-color: #a8a69e; 
  --primary-bg-color:#12161f;
  --primary-font-size:.9em !important;
}

body {
  background: var(--primary-bg-color);
  color: var(--primary-color);	
  font-family: "sautelFont1";
  margin: 0;
  padding: 0;
  width: 100vw;
  height:100vh;	
  line-height:0;	
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation !important;	
  overflow-x: hidden !important;

}





@font-face { font-family: "sautelFont1"; src: url("./ABCROMMono-Light.otf") format("opentype"); }
@font-face { font-family: "sautelFont2"; src: url("./ABCROMMono-Light.otf") format("opentype"); }
@font-face { font-family: "sautelFont3"; src: url("./ABCROM-ExtendedLight.otf") format("opentype"); }


h1 {font-family: 'sautelFont1'; letter-spacing:.1em; font-weight:300; font-size:var(--primary-font-size);	 line-height:1.2em;  text-transform:uppercase;}
h2 {font-family: 'sautelFont1'; letter-spacing:.1em; font-weight:300; font-size:.8em !important; line-height:1.2em;  text-transform:uppercase;}

.logoBig {font-family: "sautelFont1"; letter-spacing:.2em; font-weight:300; font-size:5vw !important; line-height:1em;  text-transform:uppercase;}

::placeholder { 
  color: #222;
  opacity: 1;
}


a {font-weight:300; color: var(--primary-color); text-decoration:none}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}


.transition-fade {
    transition: .0s;
    opacity: 1;
}

::marker{
	display:none;
}

html.is-animating .transition-fade{
    opacity: 0;
}

.c-scrollbar 			{display:none !important;}
.mainframe 				{opacity:1 !important; transition:opacity .25s;}
.mainframe.is-hidden    {opacity:0 !important; }


/*NAVIGATION*/

.navigation {
  position: fixed;
  top: 0;
  height:4vh;
  display:flex;
	align-items:center;	
  right: 3.5vw;		
  z-index:500 !important;
}

.navigation2 {
  position: fixed;
  top: 0;
  left: 0;		
  z-index:10;
  height:5vh;
  display:flex; 
  justify-content:flex-start;	
  align-items:center;	
}

.filterposition {right:0; z-index:1; position:fixed; margin-top:2.5vh; margin-right:13vw; cursor:pointer;}


.main_header {
    position: fixed !important;
    top: 0 !important;
	margin:0 !important;
	display:flex;
    justify-content:center;
    left: 0;
	width:100vw;
	height:auto;
	background:black;
    z-index:500 !important;
	/*-webkit-box-shadow: 0px 14px 20px -13px rgba(0,0,0,0.4);  
    box-shadow: 0px 14px 20px -13px rgba(0,0,0,0.4); */
	-webkit-transform: translateY(-100%);
  	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
  	will-change: transform;
  	-webkit-transition: opacity .01s, -webkit-transform .5s cubic-bezier(.79,.01,.3,1);
	transition: opacity .01s, transform .5s cubic-bezier(.79,.01,.3,1);

	
}

.main_header.is-open {
    position: fixed !important;
    top: 0;
    left: 0;
	height:auto;
    z-index:500 !important;
	background:black;
	/*-webkit-box-shadow: 0px 14px 20px -13px rgba(0,0,0,0.4);  
    box-shadow: 0px 14px 20px -13px rgba(0,0,0,0.4); */
	-webkit-transform: translateY(0);
  	-ms-transform: translateY(0);
	transform: translateY(0);
	will-change: transform;
  	-webkit-transition: -webkit-transform .5s cubic-bezier(.55, .08, 0, 1);
	transition: transform .5s cubic-bezier(.55, .08, 0, 1);

	
}



.revealer {
	


}

.revealinner {
	
	height: 95vh;	
    width: 70vw;
	display:flex; 
	overflow:hidden;	
	justify-content:center; 
	align-items:center; 
	position:relative;

}

.revealinner img {
    position:absolute;
	width:60vw; 
	height: 95vh;	 
    object-fit:cover;	
}


.titleptop {height:30vh; top:0; width:100vw; position:relative;}



/* Top Frame */
.enlarger {
    width: 50vw; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
	background:#e2e0d8;
}

/* Bottom Frame */
.delarger {
    width: 50vw; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
}

/* Both Images */
.enlarger .imgenalrg, 
.delarger .imgenalrg {
    width: 100vw !important; 
    max-width: none; 
    height: 100vh;
    object-fit: cover;
    transform-origin: center center;
	mix-blend-mode:multiply;
}


/*FLICKITY*/


.js-slideshow {
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    mix-blend-mode: multiply;
    
    /* Add these properties */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
	
}

.slide {
  position:absolute;
  width: 100vw;
  height: 100vh;
  display:flex;
  justify-content:center;
  align-items:center;  
  margin-right:15vw;
  opacity: 1;
  
}

.slide.is-selected  {
  opacity: 1;
}

.quotes2    {width:100vw; text-align:center; height:50vh; display:flex; justify-content:center; align-items:center; position: absolute; white-space: nowrap; left:0; bottom:2vh; z-index:1000 !important; }

.quotes3    {width:100vw; text-align:center; height:70vh; display:flex; justify-content:center; align-items:flex-end; position: absolute; white-space: nowrap; left:0; bottom:5vh; z-index:-1 !important; }


.flickermain {position:relative; height: 75vh; left:0; top:0; width:100vw; z-index:2;}


.flickslide {
  width: 100vw;
  display:flex;
  height: 75vh;	
  align-items:flex-start;  
  justify-content:flex-start;	
  flex-direction:column;	
  overflow:hidden;	
  padding-bottom:7.5vh;		
 
	
}



.flickity-button{
  opacity:0 !important;
}

.flickity-button-icon {
  display:none;
}

.flickity-prev-next-button {
  top: 50%;
  width: 10vw;
  border-radius:0;
  height: 100%;
  transform: translateY(-50%);
  opacity:0;
  z-index:1000 !important;	
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  top: 20;
  width: 10vw;
  height: 100vw;
}

.flickity-page-dots { 
  position: absolute;
  bottom: 7.5vh !important;
  padding: 0;
  margin: 2vw;
  right: 1vw !important;	
  list-style: none;
  text-align: right !important;
}

.flickity-page-dots .dot {
  display: inline-block;
  width:7px;
  height: 7px;
  margin: 0 7px;
  background: white !important;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
}

.svgcontainer {
  position:absolute; 
  right:3vw;
  bottom:1vh;
  width: 3vw;
  height: 3vw;
  margin:1vw;
 /* mix-blend-mode:exclusion;*/
  z-index:10!important;
}
.svgcontain {
  width: 3vw;
  height: 3vw;
}


circle {
  fill: none;
  z-index:1 !important;
  stroke-width: 20px;
}

.circle1 {
  fill: none;
  z-index:1 !important;
  stroke-width: 20px;
  stroke:#01ea93;	
  opacity:.1;
}

.target1 {
  fill: none;
  z-index:1 !important;
  stroke-width: 40px;
  stroke:#01ea93;	
  opacity:1;
}




.line-1 {
  position:fixed;
  bottom:0;
  left:2.5vw;
  width: 100%;
  max-width: 95vw;
  height: 2.5vh;
  margin: 0;
  padding:0;
  display: inline-block;
  z-index:3000 !important;	
}


.section { position:relative; }


/* TICKER */


.ticker2 {
  position:relative; 
  width:100vw;
  height:40vh;	
  background-color:none; 
  padding:2vw;
  display:flex; 
  overflow:hidden;
  justify-content:center;
  
}

.js-ticker {
  width: 25vw;
  position: relative;
  display:flex; 
  align-items:flex-start;
  height:4vh;
  margin: 0;
  overflow:hidden;	
}

.js-ticker .wrapper {
  position: absolute;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  will-change: transform;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.js-ticker li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  display:flex;
  align-items:flex-start;
  margin-right:5vw;
}



.democontain {
	height:50vh;
	width:100vw;
  display:flex; 
  position:relative;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.demo {
	height:20vh;
	width:50vw;
  overflow:hidden;
  display:flex; 
  align-items:center;
  justify-content:center;
 
}

.nameitems {
	position:absolute;
  z-index:0 !important; 
}


.panel {
  width: 50vw;
  margin-right:5vw;	
  height: 4vh;
  position:relative; 
  left:0; 
  top:0;
  display:flex; 
  align-items:flex-start;
  justify-content:flex-start;
  overflow: hidden;
}

.quotes { position:absolute; left:0; width:50vw;}
.imgwide {width:100vw; height:100vh;}


#ticker-container {
    display: flex;         
    flex-direction: row;     
    flex-wrap: nowrap;   
    justify-content: center;
    align-items: center;
    width: auto;         
    font-family: "sautelFont1"; 
	letter-spacing:.1em; 
	font-weight:300; 
	font-size:var(--primary-font-size);
	line-height:1em;  
	text-transform:uppercase;
    height: 1.1em;
    overflow: hidden;
	color: var(--primary-color);	
}

/* Character slots */
.tickerType {
    position: relative;
    width: 0.9em;  /* Fixed width per character */
    height: 1.1em;
    text-align: center;
    flex-shrink: 0; /* Prevents the letter from squishing */
}

/* Empty gaps for spaces */
.ticker-space {
    width: 0.9em;
    height: 1.1em;
    flex-shrink: 0;
}

/* The vertical strip of letters */
.ticker-strip {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.ticker-strip span {
    display: block;
    height: 1.1em;
    line-height: 1.1em;
}


.log-item {
    display: flex;
    width: 30vx;
	margin-left:35vw;
    flex-direction:column;
    gap: 10px;
}

.log-date, .log-time {
    width: 100%;
    flex-shrink: 0; /* Prevents columns from squishing */
}

.log-content {
    width: 100%;
}


.bigdot {
    width: 12px;      /* Or whatever size you prefer */
    height: 12px;
    border-radius: 50%;
    /* No need to set initial background-color, GSAP sets it immediately */
}


.tempContainer {position:fixed; top:0; left:0; width:100vw; gap:25px; height:100dvh; flex-direction:column; display:flex; align-items:center; justify-content:center;}

.flipper {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

@media only screen and (max-width: 800px) {
	
	
:root {
  --primary-color: #a8a69e; 
  --primary-bg-color:#0a0b12; 	
  --primary-font-size:.8em !important;
}
	
	
.tempContainer {position:fixed; top:0; left:0; width:100vw; gap:15px; height:100dvh; flex-direction:column; display:flex; align-items:center; justify-content:center;}	

h1 {font-family: "sautelFont1"; letter-spacing:.2em; font-weight:300; font-size:var(--primary-font-size); line-height:1.2em;  text-transform:uppercase;}
h2 {font-family: "sautelFont1"; letter-spacing:.1em; font-weight:300; font-size:.5em !important; line-height:1.2em;  text-transform:uppercase;}	

	
#ticker-container {
    display: flex;         
    flex-direction: row;     
    flex-wrap: nowrap;   
    justify-content: center;
    align-items: center;
    width: auto;         
    font-family: "sautelFont1";
	letter-spacing:.1em; 
	font-weight:300; 
	font-size:var(--primary-font-size);
	line-height:1.2em;  
	text-transform:uppercase;
    height: 1.2em;
    overflow: hidden;
	color:var(--primary-color);
}	
	
	
}


@media only screen and (min-width: 800px) {}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {}


*:focus {
outline: 0;
outline: none;
}