/*FONTS CSS*/
@import url('font-icons.css');

@font-face {
  font-family: 'TCCC Unity';
  src: url('../fonts/TCCCUnity-Bold.eot');
  src: url('../fonts/TCCCUnity-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/TCCCUnity-Bold.woff2') format('woff2'),
      url('../fonts/TCCCUnity-Bold.woff') format('woff'),
      url('../fonts/TCCCUnity-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'icons';
  src: url('../fonts/icons.eot?id4w01');
  src: url('../fonts/icons.eot?id4w01#iefix') format('embedded-opentype'),
  url('../fonts/icons.ttf?id4w01') format('truetype'),
  url('../fonts/icons.woff?id4w01') format('woff'),
  url('../fonts/icons.svg?id4w01#icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --bg-black:#000000;
  --bg-base:#ffffff;
  --clr-red:#f40009;
  --clr-theme:var(--clr-red);

  --clr-base:#000000;
  --clr-white:#ffffff;
  --clr-primary:rgba(255,255,255,0.52);

  --brdr-primary:rgba(0,0,0,0.2);
  
  /*Fonts*/
  --font-base:"TCCC Unity";

  /*Loader Color*/
  --bg-loader: rgba(0, 0, 0, 0.8);
  --clr-loader: var(--clr-theme);

  /* Background Image */
  --splash-bg:url("../images/splash-bg.jpg");
  --how-to-bg:url("../images/how-to-bg.jpg");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  line-height: 1.3em;
}

:focus {
  outline: none;
}

html {
  height: 100%;
  -webkit-text-size-adjust: none;
}

body {
  height: 100%;
  font-size: 3.4vmin;
  overflow: hidden;
  font-family: var(--font-base);
  color: var(--clr-base);
  background: var(--bg-base);
  line-height: 1.3em;
  font-weight: normal;
  letter-spacing: normal;
}

a {
  text-decoration: none;
  outline: none;
  color: var(--clr-base);
  outline: none;
  cursor: pointer;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

img {
  padding: 0;
  margin: 0;
  max-width: 100%;
  border: none;
  height: auto;
}

p {
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-size: 1.4vmin;
  color: var(--clr-base);
  font-weight: normal;
}

/*HEADING CSS*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: var(--clr-base);
  font-family: var(--font-head);
}

/*LIST CSS*/
ul,
ul li,
ol,
ol li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*INPUT CSS*/
.form-group {
  float: left;
  width: 100%;
  margin-bottom: 1.6vmin;
  position: relative;
}

.input-group {
  float: left;
  width: 100%;
  position: relative;
}

select,
select option {
  width: 100%;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-control {
  float: left;
  width: 100%;
  font-size: 4vmin;
  outline: medium none;
  height: 8vmin;
  color: var(--clr-base);
  border: 0;
  background: var(--bg-base);
  line-height: 1.3em;
  padding: 0;
  font-family: var(--font-base);
  font-weight: normal;
  border-radius: 0.5vmin;
  padding: 0 2vmin;
}

.form-control:focus {
  outline: none;
  transition: all 0.3s ease 0s;
}

.form-control:disabled {
  background: #f2f2f2;
  color: #C7C6C6;
}

input[type="submit"],
input[type="text"],
input[type="password"],
textarea {
  -webkit-appearance: none;
}

input[type="submit"],
button {
  cursor: pointer;
  border: 0;
}

textarea.form-control {
  resize: vertical;
  height: 10vmin;
}

/*NORMAL CSS*/
::selection {
  background: var(--clr-theme);
  color: #fff;
}

::-moz-selection {
  background: var(--clr-theme);
  color: #fff;
}

.containers {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  padding: 0 10px;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.block {
  float: left;
  width: 100%;
}

.event-none {
  pointer-events: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.icon {
  display: inline-block;
  font-size: 2vmin;
  vertical-align: middle;
}

/*BUTTON CSS*/
.buttons-outer{
  float:left;
  width:100%;
}
.buttons-inner{
  float:left;
  width:100%;
}
.btn-col{
  float:left;
  width: 100%;
}
.btn{
  float:left;
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  min-height:8vmin;
  border-radius:12vmin;
}

.btn-text {
  color: var(--clr-white);
  font-size: 3vmin;
  font-family: var(--font-base);
  text-transform: uppercase;
  border-radius: 0.5vmin;
  z-index:2;
  line-height:normal;
  padding-bottom:0.2vmin;
}
.btn:hover {
  transform: scale(0.96);
}

.primary-btn {
  background: #ffffff;
}

.primary-btn .btn-text {
  color: #f40009;
}

.secondary-btn {
  background: #ff0000;
}

.secondary-btn .btn-text {
  color: #ffffff;
}
/* Loader CSS */
.loading-wrapper {
  position: fixed;
  float: left;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  text-align: center;
}

.loader-overlay {
  background: var(--bg-loader);
}

.page-overlay {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.loading-wrapper.content-loader {
  position: absolute;
  height: 100%;
}

.loading-wrapper.content-relative {
  position: relative;
  height: 200px;
  background: none;
  z-index: 1;
}

.loading-wrapper.scroll-loader {
  position: relative;
  height: 80px;
}

.loader-ring {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;
  border: 4px solid var(--clr-loader);
  border-color: var(--clr-loader) transparent var(--clr-loader) var(--clr-loader);
  animation: lds-ring 650ms linear infinite;
  border-radius: 50%;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*Page CSS Start*/
.main-section{float:left; width:100%; height:100dvh;}
.page-container{float:left; width:100%; height:100%;}
/*Page CSS End*/

/*Set Screens CSS Start*/
.screen-wrap{float:left; width:100%; height:100dvh; background:rgba(0, 0, 0, 0.7); position:relative; z-index:999; background-size:cover;}
.screen-wrap-inner{float:left; width:100%; height:100%; padding:2vmin 0; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.screen-widget{float:left; width:100%;}
.clear-bg{background:none!important;}
.add-overlay{background:rgba(0, 0, 0, 0.7) !important;}
.modal-item .screen-wrap-inner{animation:fadeInDown 0.3s;}
@keyframes fadeInDown{
  0% {
    opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0);
  }
  100%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  0%{
    opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0);
  }
  100% {
    opacity:1; -webkit-transform: translateZ(0); transform:translateZ(0);
  }
}

*{
  ::-webkit-scrollbar {
    width: 0.6vmin;
    border-radius: 2vmin;
    height: 0.6vmin;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--clr-theme);
    border-radius: 2vmin;
    width: 0.6vmin;
    height: 0.6vmin;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

.alert-info{float: left; width: 100%; padding-top: 0.2vmin; padding-left: 0.5vmin; font-size: 1.2vmin; font-family: var(--font-base); position: absolute; top: calc(100% - 0.15vmin); }
.danger-alert {color:var(--clr-red);}
.desk-fig{display:block!important;}
.mob-fig{display:none!important;}
/*Set Screens CSS End*/

/* Splash Screen CSS Start */
.splash-wrap{float:left;width:100%;background:var(--splash-bg) no-repeat center; background-size:cover;}
.splash-widget{float:left;width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.splash-screen-block{float:left; width:100%; max-width:84vmin;}
.brand-logo-wrap{float:left;width:100%; display:flex; justify-content:center; align-items:center; margin-top:-18vmin;}
.brand-logo-figure{float:left;width:100%;display:flex; justify-content:center; align-items:center; max-width:40vmin;  filter:drop-shadow(0px 0vmin 3vmin rgba(0, 0, 0, 0.05)) drop-shadow(0px 1vmin 6vmin rgba(0, 0, 0, 0.5));}
.brand-logo-figure img{float:left; width:100%;}
.splash-buttons-outer{float:left; width:100%; margin-top:10vmin;}
.splash-buttons-inner{float:left; width:100%; display:flex; flex-direction:column; gap:2vmin; justify-content:center; align-items:center;}
.splash-buttons-inner .btn-col{max-width:56vmin;}
.splash-buttons-inner .btn{min-height:11vmin;}
.splash-buttons-inner .btn-text{font-size:6vmin;}

.splash-win-text-block{float:left; width:100%; margin-top:4vmin;}
.splash-win-text-block + .splash-buttons-outer{margin-top:6vmin;}
.splash-win-text{float:left; width:100%; text-align:center; font-size:4vmin; color:var(--clr-white);}
.splash-win-text .word-label{display:inline-block;}

.top-btn-outer{position:absolute; top:1vmin; right:1vmin; bottom:auto; left:auto; left:auto;}
.top-btn-inner{display:flex; justify-content:flex-end;}
.top-btn-inner .btn-col{max-width:10vmin;}
.top-btn-inner .btn{min-height:4vmin;}
.top-btn-inner .btn-text{font-size:2.4vmin;}
/* Splash Screen CSS End */

@media screen and (max-width:480px) and (orientation:portrait){
  :root{
    --splash-bg:url("../images/splash-bg-mob.jpg");
    --how-to-bg:url("../images/how-to-bg-mob.jpg");
  }
  .desk-fig{display:none!important;}
  .mob-fig{display:block!important;}

  .btn{min-height:16vmin; padding-bottom:0.6vmin;}

  /* Splash CSS Start */
  .splash-wrap{background-position:center 40%; background-size:cover;}
  .splash-screen-block{max-width:100%;padding:3vmin;}
  .brand-logo-wrap{margin-top:-26vmin;}
  .brand-logo-figure{max-width:75vmin;}
  .splash-buttons-outer{margin-top:26vmin;}
  .splash-buttons-inner{gap:4vmin;}
  .splash-buttons-inner .btn-col{max-width:78vmin;}
  .splash-buttons-inner .btn-text{font-size:8.6vmin;}
  .splash-buttons-inner .btn{min-height:16vmin;}

  .splash-win-text-block{margin-top:10vmin; padding:0 10px;}
  .splash-win-text-block + .splash-buttons-outer{margin-top:8vmin;}
  .splash-win-text{font-size:5.4vmin;}

  .top-btn-outer{top:2vmin; right:2vmin; z-index:4;}
  .top-btn-inner .btn-col{max-width:18vmin;}
  .top-btn-inner .btn{min-height:6vmin;}
  .top-btn-inner .btn-text{font-size:4.2vmin; padding-bottom:0;}
  /* Splash CSS End */
}

@media screen and (max-width:375px) and (orientation:portrait){
  /* Splash CSS Start */
  .brand-logo-figure{max-width:73vmin;}
  .btn{min-height:15vmin;}
  .splash-buttons-inner .btn-text{font-size:8vmin;}
  .splash-buttons-inner .btn-col{max-width:76vmin;}
  .splash-buttons-inner .btn{min-height:15vmin;}
  .brand-logo-wrap{margin-top:-18vmin;}
  .splash-buttons-outer{margin-top:25vmin;}
  /* Splash CSS End */
}

/* Splash Screen CSS Start */
.how-to-wrap{float:left;width:100%;background:var(--how-to-bg) no-repeat center; background-size:100% 100%}
.how-to-wrap-inner{justify-content:flex-start;}
.how-to-widget{float:left;width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.how-to-screen-block{float:left; width:100%; height:100%; display:flex; justify-content:center; position:relative; max-width:84vmin; padding:0 4.2vmin;}
.how-to-bg-block{float:left; width:100%; height:100%; position:relative;}
.how-to-bg{float:left; width:100%; display:flex; flex-direction:column; align-items:center;}
.how-to-bg-fig{float:left; width:100%;}
.how-to-bg-fig img{float:left; width:100%;}
.how-to-frame{float:left; width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1;}
.frame-fig{float:left; width:100%;}
.frame-fig img{float:left; width:100%;}
.over-item{float:left; width:100%; position:absolute; height:100%; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.block-item{float:left; width:100%; margin-top:auto; padding-top:15vmin;}
.block-item-inner{float:left; width:100%; position:relative;}
.block-text-bg{float:left; width:100%;}
.block-text-bg img{float:left; width:100%;}
.how-to-text{float:left; width:100%; font-size:3vmin; font-weight:700; line-height:1.5em; padding:3vmin 10vmin; text-transform:uppercase; text-align:center; color:var(--clr-white); position:absolute; left:0; right:0; top:0; bottom:0;}
.how-to-text span{display:inline-flex; max-width:9vmin;}
.how-to-text .word-label{display:inline-block; max-width:max-content;}
.how-to-text span img{float:left; width:100%;}
.how-to-text br{display:none;}
.logo-fig{float:left; width:100%; --fig-size:17vmin; max-width:var(--fig-size); height:var(--fig-size);}
.logo-fig img{float:left; width:100%; filter:drop-shadow(0 1vmin 3vmin rgba(0,0,0,0.5));}
.how-to-overlay{float:left; width:100%; height:100%; position:fixed; left:0; top:0; right:0; bottom:0; background: linear-gradient(to bottom, #000000 0%, #b30000 40%, #b30000 60%, #000000 100%); opacity:0.6; pointer-events:none;}
.how-to-buttons-outer{margin-top:auto; margin-bottom:2vmin;}
.how-to-buttons-inner{display:flex; justify-content:center; gap:0 7vmin;}
.how-to-buttons-inner .btn-col{max-width:29vmin;}

@media screen and (max-width:1024px) and (orientation:portrait){
  .how-to-wrap{background-size:cover;}
  .block-item{margin-top:0; padding-top:8vmin;}
  .how-to-buttons-outer{margin-top:0; padding-top:24vmin;} 
}

@media screen and (max-width:480px) and (orientation:portrait){
  .how-to-wrap{background-size:100% 100%;}
  .logo-fig{--fig-size:32vmin;}
  .how-to-screen-block{max-width:100%;}
  .how-to-text{font-size: 4.8vmin;padding: 4vmin 8vmin;}
  .how-to-text span{max-width: 14vmin;}
  .how-to-text br{display:block;}
  .how-to-buttons-inner{padding:0 4vmin; gap:0 4vmin;}
  .how-to-buttons-inner .btn-col{max-width:68vmin;}
  .how-to-buttons-inner .btn-col .btn{min-height:14vmin;}
  .how-to-buttons-inner .btn-col .btn-text{font-size:5.5vmin;}
  .block-item{margin-top:auto; padding-top:0; padding-bottom:16vmin;}
  .how-to-buttons-outer{margin-top:0; padding-top:0;}
  .how-to-overlay{background:linear-gradient(to bottom, #000000 0%, #b30000 50%, #000000 100%);}
}

@media screen and (max-width:375px) and (orientation:portrait){
  .logo-fig{--fig-size:26vmin;}
  .how-to-screen-block{padding:0 9vmin;}
}
@media screen and (max-width:360px) and (orientation:portrait){
  .how-to-screen-block{padding:0 6vmin;}
}
/* Splash Screen CSS End */

/* Error CSS Start */
.error-wrap{background:url('../images/error-bg.jpg') no-repeat center; background-size:100% 100%;}
.error-wrap-inner{float:left; width:100%; height:100%; padding:2vmin 0 5vmin; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.error-widget{float:left; width:100%;}
.error-logo-wrap{float:left; width:100%; display:flex; justify-content:center; align-items:center; margin-top:0;}
.error-logo-figure{float:left; width:100%; max-width:30vmin; filter:drop-shadow(0px 0vmin 3vmin rgba(0, 0, 0, 0.05)) drop-shadow(0px 1vmin 6vmin rgba(0, 0, 0, 0.5));}
.error-logo-figure img{float:left; width:100%;}
.error-action-info{float:left; width:100%; display:flex; justify-content:center; align-items:center; margin-top:12vmin;}
.error-action-inner{float:left; width:100%; display:flex; flex-wrap:wrap; gap:1vmin; max-width:110vmin;}
.error-button-bar{float:left; width:100%;}
.error-button-bar-inner{float:left; width:100%; display:flex; gap:1vmin; flex-wrap:wrap; flex-direction:column;}
.error-button-col{float:left; width:100%;}
.error-button-col span{display:flex; justify-content:center; align-items:center; text-align:center; color:#ffffff; font-family:'TCCC Unity'; text-transform:uppercase; font-size:4.75vmin; padding:1vmin 0; letter-spacing:0;}

.error-buttons-outer{float:left; width:100%; margin-top:6vmin;}
.error-buttons-inner{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.error-btn-col{float:left;width:100%;max-width: 25vmin;}
.error-btn{float:left; width:100%;}
.error-btn-text{float:left; width:100%;}
.error-btn-col .btn-text{font-size:4vmin; line-height:1.5em;}

@media (max-width: 1024px) and (orientation: portrait) {
  .error-wrap{background:url('../images/error-bg-tab.jpg') no-repeat center; background-size:cover;}
  .error-logo-figure{max-width:34vmin;}
  .error-action-inner{max-width:75vmin;}
  .error-btn-col{max-width: 24vmin;}
}
@media (max-width: 767px) and (orientation: portrait) {
  .error-wrap{background:url('../images/error-bg-mob.jpg') no-repeat center; background-size:cover;}
  .error-logo-figure{max-width:56vmin;}
  .error-action-inner{max-width:85vmin;}
  .error-button-col span{padding:2vmin 0; font-size:6vmin;}
  .error-action-info{margin-top:14vmin;}

  .error-btn-col .btn{min-height:13vmin;}
  .error-btn-col .btn-text{font-size:5.4vmin;}
  .error-btn-col{max-width:35vmin;}
}
/* Error CSS End */