/* Box Model Hack */
* {
  box-sizing: border-box;
}

.inPlace {
 margin-top: -12%;
 margin-left: 30%;
 position: absolute;
}

section 
/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

.show  {
  display: none;
    transition: display 1s linear 300ms, opacity 300ms;
}
.show  * {
  display: none;
  transition: display 1s linear 300ms, opacity 300ms;
}

.qr {
  width: 80px;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {

}

.container {
position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;

  max-width: 127.5rem;
}

@font-face {
  font-family: 'neutral_facebold';
  src: url('./fonts/webfontkit-20220803-135044/neutralface-bold-webfont.woff2') format('woff2'),
    url('./fonts/webfontkit-20220803-135044/neutralface-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'neutral_faceregular';
  src: url('./fonts/webfontkit-20220803-135044/neutralface-webfont.woff2') format('woff2'),
    url('./fonts/webfontkit-20220803-135044/neutralface-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

.container {
  animation: transitionIn 0.4s cubic-bezier(.36, .7, .85, .34);
}

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: rotateX(-10deg);
  }

  to {
    opacity: 1;
    transform: rotateX(0);
  }
}



/******************************************
/* LAYOUT
/*******************************************/
#brand {
  font-family:'Courier New', Courier, monospace;
  text-decoration: none;
  color: black;
  text-decoration: none;
    cursor: pointer;
    background: #fff;
    font-size: 1.2rem;
    /* user-select: none; */
    /* -webkit-user-select: none; */
    /* touch-action: manipulation; */
}

button  {
  cursor: pointer;
    background: #fff;

    /* -webkit-user-select: none;
    touch-action: manipulation; */
}
header > h2 {
  font-family: 'neutral_facebold';
  font-size: 6.25vw
}


footer {

}


.hero {

min-height: 41vh;
max-width: 98vw;
background-color: #000000;

/* background-color: rgb(255, 241, 193); */
}

.info {
 
  height: 36vh;
  background-color: rgb(252, 252, 252);
  /* background-color: rgb(255, 241, 193); */
}


.between {
  display: flex;
  justify-content: space-between;
 
}
.right {
 /* display: flex;
 flex-direction: column; */
 
}

.pics {
  min-height: auto;
  width: 15%;
transition: width 0.2s linear 300ms,
  opacity 300ms ;
  border-radius: 7px;
  cursor: pointer; 
  float: right;
}

.pics:active{
  width: 60%;
}


.imgBt {
  width: 30%;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
.upper > .barcode {
width: 112px;
 height: 40px;
  x:0px; 
  y:0px;
  transform: translate(0,0)
}

.containerTwo {
  display: flex;
  flex-wrap: wrap;
  width: 255px;
  margin: 50px auto;
  margin-top: -50px;
  /* background:rgb(255, 255, 255) */
}

.boxes {
  /* background-image: url('/images/ezgif.com-gif-maker\ \(33\).gif'); */
  background-attachment: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px #404040 solid;
  /* display: inline-block; */
  height: 40px;
  width: 40px;
  margin: px;
}

 .upper {
   position: relative;
   transform: rotate(-90deg) translateX(-100px);
 }
 .upper::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 30px;
     height: 1px;
     margin-left: 1rem;
     background: #1a1a1a;
   }
 

/* button */
     .slide {
       position: relative;
       overflow: hidden;
       border: 1px solid #18181a;
       color: #18181a;
       display: inline-block;
       font-size: 15px;
       line-height: 15px;
       padding: 18px 18px 17px;
       text-decoration: none;
       cursor: pointer;
       background: #fff;
       user-select: none;
       -webkit-user-select: none;
       touch-action: manipulation;
     }
  
     .slide span:first-child {
       position: relative;
       transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
       z-index: 10;
     }
  
     .slide span:last-child {
       color: white;
       display: block;
       position: absolute;
       bottom: 0;
       transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
       z-index: 100;
       opacity: 0;
       top: 50%;
       left: 50%;
       transform: translateY(225%) translateX(-50%);
       height: 14px;
       line-height: 13px;
     }
  
     .slide:after {
       content: "";
       position: absolute;
       bottom: -50%;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: black;
       transform-origin: bottom center;
       transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
       transform: skewY(9.3deg) scaleY(0);
       z-index: 50;
     }
  
     .slide:hover:after {
       transform-origin: bottom center;
       transform: skewY(9.3deg) scaleY(2);
     }
  
     .slide:hover span:last-child {
       transform: translateX(-50%) translateY(-100%);
       opacity: 1;
       transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
     }



     /* circle */
         .semicircle,
         .semicircle div {
           /*  Adjust the size of the entire animation here.
                  (Remove max size below to go above 300px.) */
           width: 40vw;
           height: 40vw;

          max-width: 300px;
           max-height: 300px;
    
           background-repeat: no-repeat;
           border-radius: 50%;
           position: relative;
           overflow: hidden;
         }
    
         .semicircle div {
           position: absolute;
           top: 5%;
           left: 5%;
           width: 90%;
           height: 90%;
         }
    
         .semicircle:before,
         .semicircle div:before {
           content: '';
           width: 100%;
           height: 50%;
           display: block;
            background: radial-gradient(transparent, transparent 65%, #000 65%, #000);
           background-size: 100% 200%;
         }


  /* ----------------------------------------------- */
                                   
#flowContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
 left:2%;
  width: 100%;
  height: 100vh;
}

.animation-wrapper {
  width: 80%;
  padding-bottom: 40%;
  
}

.stagger-visualizer {
  position: absolute;
  width: 1100px;
  height: 550px;
  transform-origin: left top;
}

.stagger-visualizer .dots-wrapper {
  transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.stagger-visualizer .dot {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  margin: 16px;
  background-color: currentColor;
  border-radius: 50%;
}


 /* ---------------------------------------------------------> */

#swordsCont {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40vh;
  margin-top: -20%;
 

}

.Swords {
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 450px;
}

.Swords div {

  width: 12px;
  height: 128px;
  border: 1px solid #373535;


  border-top-right-radius: 25px 50px;

}


.mqr {
  height: 70px;
  width: 100px;
  margin-left: -5px;
  margin-top: -2.9em;
  margin-bottom: 1em;
  padding-top: 99px;
background-image: url("/images/qr-code.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.mqrTwo {
  padding-top: 90px;
  height: 90px;
  width: 90px;
  background-image: url("/images/qrcode3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}