/* ==============================================================
-----------------------------------------------------------------
					*** TABLE OF CONTENTS ***
-----------------------------------------------------------------

	1.	General
	2.	Placeholder
	3.	Responsive images
	4.	Custom text styles
	5.	Page loader
	6.	Basic structure
	7.	Background overlay
	8.	Logo

=============================================================*/

/*********************
    - 1. General -
*********************/
html {
	font-size:100%;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
		-ms-text-size-adjust:100%;	
}

html, body {
	height:100%;
}

html {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
}

body {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	color:#dadada;
	line-height:1.75;
	margin:0;
}

h1 {
	text-transform:uppercase;
	color:#fff;
	font-weight:400;
	line-height:1.16667;
	margin:0 0 28px;
	text-align:center;
}

p {
	margin:0 0 28px;
}

img {
	border:0;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic;
}

/*************************
    - 2. Placeholder -
*************************/
::-webkit-input-placeholder {
	color:#a9a9a9;
}

::-moz-placeholder {
	color:#a9a9a9;
	opacity:1;
}

.placeholder {
	color:#a9a9a9;
}

/*******************************
    - 3. Responsive images -
*******************************/
.wrap img {
	height:auto;
	max-width:100%;
}

/********************************
    - 4. Custom text styles -
********************************/
h1.title > span {
  font-family: 'Ubuntu Condensed', sans-serif;
	font-weight:900;
	font-size:44px;
	letter-spacing:1px;
	color:#87DCFF;
	margin-left: 0;
  margin-right: 0;
}

.titleb {
  font-family: 'Ubuntu', sans-serif;
	font-weight:300;
  font-size:24px;
  margin-top: 5px;
}

.slogan {
	font-size:14px;
	text-align:center;
}

.subtitle {
	font-size:16px;
	letter-spacing:0.5px;
	margin:28px 0 0 0;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
}

.subblue {
  font-size:13.5px;
  letter-spacing:0.5px;
  word-spacing: 7px;
  line-height:2;
  margin:0;
  text-align:center;
  text-transform:none;
	color:#91DFFF;
}

/*************************
    - 5. Page loader -
*************************/
.page-loader {
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:998;
	background:#fff;
}

.page-loader .progress {
	margin:-12em 0 0 -12em;
	width:50px;
	height:50px;
	font-size:2px;
	position:absolute;
	text-indent:-9999em;
	top:50vh;
	left:50vw;
	background:#fff;
	border-top:0.8em solid rgba(35, 35, 35, 0.2);
	border-right:0.8em solid rgba(35, 35, 35, 0.2);
	border-bottom:0.8em solid rgba(35, 35, 35, 0.2);
	border-left:0.8em solid #000;
	-webkit-transform:translateZ(0);
	   -moz-transform:translateZ(0);
			transform:translateZ(0);
	-webkit-animation:preloader 0.7s infinite linear;
	   -moz-animation:preloader 0.7s infinite linear;
			animation:preloader 0.7s infinite linear;
  border-left-color:#16b6ea;
}

.page-loader .progress,  .page-loader .progress:after {
	border-radius:50%;
	width:24em;
	height:24em;
}

.page-loader.overlay {
	background:rgba(0, 0, 0, 0.5);
}

.page-loader.overlay .progress {
	background:transparent;	
}

@-webkit-keyframes preloader {
 	0% {
 		-webkit-transform:rotate(0deg);
	}
	
 	100% {
 		-webkit-transform:rotate(360deg);
	}
}

@-moz-keyframes preloader {
 	0% {
 		-moz-transform:rotate(0deg);
	}
	
 	100% {
 		-moz-transform:rotate(360deg);
	}
}

@keyframes preloader {
 	0% {
 		-webkit-transform:rotate(0deg);
 		   -moz-transform:rotate(0deg);
 			-ms-transform:rotate(0deg);
 			 -o-transform:rotate(0deg);
 				transform:rotate(0deg);
	}
	
 	100% {
 		-webkit-transform:rotate(360deg);
 		   -moz-transform:rotate(360deg);
 			-ms-transform:rotate(360deg);
 			 -o-transform:rotate(360deg);
 				transform:rotate(360deg);
	}
}

/******************************
    - 6. Basic structure -
******************************/
.wrap {
	position:relative;
	min-height:100%;
	z-index:99;
}

.inner {
	margin:0 auto;
	padding:42px 24px;
}

#main {
	position:relative;
}

#main .inner {
	max-width:816px;
	padding-bottom:84px;
	padding-top:54px;
}

/*********************************
    - 7. Background overlay -
*********************************/
.body-bg {
	background:rgba(0,0,0,0.5) url(images/overlay.png) repeat;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:98;
}

/********************
    - 8. Logo -
********************/
.logo {
	font-size:30px;
	margin-bottom:30px;
}

/********************
    - 09. Access Banner -
********************/

#access-banner-awol {
  position: relative;
  width: 380px;  /* Adjust width as needed */
  height: 30px;  /* Adjust height as needed */
  background: rgba(255, 255, 255, 0.15); /* Adjust fill transparency */
  color: #FAFAFA;
  text-align: center;
  line-height: 30px;  /* Matches height for centering */
  font-size: 16px;
  font-weight: 300;
  letter-spacing:0.5px;
  text-transform: uppercase;
  
  /* Center the banner */
  margin: 40px auto 0 auto; /* Adds spacing above, centers horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Top and bottom border lines with transparency */
  border-top: 1px solid rgba(255, 255, 255, 0.4); /* Adjust transparency */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Adjust transparency */

  /* Create fading effect on the sides */
  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
}

/********************
    - 10. Countdown -
********************/

#timer {
  display: flex;
  justify-content: center;
  gap: 40px; /* Adjust this value to control spacing between countdown items */
  text-align: center;
  margin-top: 10px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-number {
  font-size: 40px;
  font-weight: 700;
  color: #FAFAFA;
  opacity: 0.9; /* Adjust from 0 (fully transparent) to 1 (fully visible) */
}

.countdown-number:hover {
  opacity: 1;
  color:#FFFFFF;
}

.countdown-label {
  font-size: 12px;
  font-weight: normal;
  color:#ccc;
  opacity: 0.9; /* Adjust from 0 (fully transparent) to 1 (fully visible) */
  text-transform: uppercase;
  margin-top: -10px; /* Adjust this value as needed */
}