@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
      

:root
{
--gray1: #f8f9fa;
      --gray2: #e9ecef;
      --gray3: #dee2e6;
      --gray4: #ced4da;
      --gray5: #adb5bd;
      --gray6: #6c757d;
      --gray7: #495057;
      --gray8: #343a40;
      --gray9: #212529;
      --gray10: #1a1a1a;
      --mars: #ff5f40;
      --light: #594346;
      --dark: #212027;
      --light-red: #f22f08;
      --red: #8d2f23;
      --dark-red: #561e18;
      --black: #000000;
      
--fonts: var(--gray1);
      --fonts-hover: var(--light-red);
      --nav-color: var(--gray1);
      --nav-color-hover: var(--light-red);
      --nav-bg: var(--gra);
      --nav-hover: var(--black);
      --btn-bg: var(--gray1);
      --btn-bg-hover: var(--light-red);
      --btn-color: var(--gray10);
      --btn-color-hover: var(--gray1);
      --rm-bg: var(--light-red)
}
      
    
html
{
      scroll-behavior:smooth
}
      
    
*
{
      padding:0;
      margin:0;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      text-decoration:none;
      font-family:roboto,sans-serif;
      font-weight:500;
}
      
    
body
{
      width:100%;
      height:auto;
      background-color:var(--gray10);
      background-image:radial-gradient(circle,#00041f,#00b3bb,#004954,#000000,#000000)
}
      
    
    .mstlink
    {
        text-decoration:underline;
        color:white;
    }
    
.section
{
      min-height:200px
}
      
    
.shadow
{
      font-size:50px;
      opacity:.07;
      margin-bottom:-37px;
      margin-top:-20px;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      
    
.content
{
      width:60%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-transition:1s ease;
      transition:1s ease
}
      
    
footer
{
      height:100px;
      background:var(--black);
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      padding:10px;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center
}
      
    
footer p
{
      color:var(--fonts)
}
      
    
footer a
{
      color:var(--fonts);
      text-decoration: underline;
      -webkit-transition:.2s ease;
      transition:.2s ease
}
      
    
footer a:hover
{
      color:var(--fonts-hover)
}
      
    
#menuToggle
{
      display:none;
      z-index:888
}
      
    
button
{
      outline:none
}
      
    
#navbar
{
      height:6.5em;
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      position:fixed;
      -webkit-transition:background .5s ease-in-out;
      transition:background .5s ease-in-out;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      z-index:999
}
      

#navbar .nav-wrapper
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:75%;
      background:var(--nav-bg);
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .nav-wrapper .web-v
{
      color:var(--light-red);
      font-size:14px;
      padding-left:30px;
      margin-right:-95px;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .nav-wrapper .logo
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      height:6.5em;
      width:18em;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out
}
      

#navbar .nav-wrapper .logo img
{
      width:18em;
      height:6.5em;
      -o-object-fit:contain;
      object-fit:contain;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out;
      mix-blend-mode:normal
}
      

#navbar .nav-wrapper .logo:hover
{
      width:18.5em
}
      

#navbar .nav-wrapper .logo:hover img
{
      width:18.5em;
      -webkit-transition:.3s ease-in-out;
      transition:.3s ease-in-out;
      -webkit-transition:-webkit-filter 999s;
      transition:-webkit-filter 999s;
      transition:filter 999s;
      transition:filter 999s,-webkit-filter 999s;
      -webkit-filter:hue-rotate(99999deg);
      filter:hue-rotate(99999deg)
}
      

#navbar .nav-wrapper .nav-menu
{
      list-style-type:none;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:space-evenly;
      -ms-flex-pack:space-evenly;
      justify-content:space-evenly;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
      -ms-flex-direction:row;
      flex-direction:row
}
      

#navbar .nav-wrapper .nav-menu li
{
      display:block;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center
}
      

#navbar .nav-wrapper .nav-menu li a
{
      width:100%;
      height:100%;
      color:var(--nav-color);
      text-transform:capitalize;
      font-size:16px;
      padding:20px 17px;
      text-align:center;
      -webkit-transition:.3s ease-in-out;
      transition:.3s ease-in-out
}
      

#navbar .nav-wrapper .nav-menu li a .arrow
{
      margin-left:7px;
      margin-bottom:2px;
      border:solid var(--nav-color);
      border-width:0 3px 3px 0;
      display:inline-block;
      padding:2px;
      -webkit-transform:rotate(-45deg);
      transform:rotate(-45deg);
      -webkit-transition:all .2s ease-in-out;
      transition:all .2s ease-in-out
}
      

#navbar .nav-wrapper .nav-menu li a:hover
{
      color:var(--nav-color-hover);
      border-radius:190px
}
      

#navbar .nav-wrapper .nav-menu li ul
{
      visibility:hidden;
      min-height:100px;
      opacity:0;
      position:absolute;
      -webkit-transition:all .2 ease-in-out;
      transition:all .2 ease-in-out;
      margin-top:10px;
      display:none
}
      

#navbar .nav-wrapper .nav-menu li ul li
{
      padding:10px 20px 10px 0
}
      

#navbar .nav-wrapper .nav-menu li:hover
{
      cursor:pointer
}
      

#navbar .nav-wrapper .nav-menu li:hover .drop
{
      color:var(--nav-color-hover)
}
      

#navbar .nav-wrapper .nav-menu li:hover .arrow
{
      border:solid var(--nav-color-hover);
      border-width:0 3px 3px 0;
      -webkit-transform:rotate(45deg);
      transform:rotate(45deg)
}
      

#navbar .nav-wrapper .nav-menu li:hover>ul,#navbar .nav-wrapper .nav-menu li ul:hover
{
      visibility:visible;
      opacity:1;
      display:block;
      background:#00000050
}
      

#navbar .nav-wrapper .nav-menu li:hover>ul .drop,#navbar .nav-wrapper .nav-menu li ul:hover .drop
{
      color:var(--nav-color-hover)
}
      

#navbar .nav-wrapper .nav-menu li:hover>ul .arrow,#navbar .nav-wrapper .nav-menu li ul:hover .arrow
{
      border:solid var(--nav-color-hover);
      border-width:0 3px 3px 0;
      -webkit-transform:rotate(45deg);
      transform:rotate(45deg)
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      position:relative
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons a
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons a .earth
{
      margin-left:110px;
      width:70px;
      height:70px;
      opacity:0; /* remove earth image*/
      background-image:url(../img/wojak.png);
      background-size:200%;
      background-position:center;
      -webkit-transition:1s ease;
      transition:1s ease;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      padding-left:30px;
      position:absolute;
      z-index:-1
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons a button
{
      width:130px;
      height:35px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:12px;
      font-weight:600;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons a button:hover
{
      background-color:var(--btn-bg-hover);
      color:var(--btn-color-hover);
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons a button:active
{
      position:relative;
      top:1px
}
      

#navbar .nav-wrapper .nav-menu a:hover img
{
      height:130px
}
      

#navbar .nav-wrapper .nav-menu a:hover .earth
{
      color:green;
      background-size:250%;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar:hover
{
      background:var(--nav-hover);
      -webkit-transition:.5s ease-in-out;
      transition:.5s ease-in-out
}
      

.hero-section
{
      width:100%;
      height:1000px;
      position:relative;
      overflow:hidden;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      z-index:3;
}
      

.hero-section .hero-wrapper
{
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.hero-section .hero-wrapper .hero-title
{
      width:500px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      position:absolute;
      top:66%;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

.hero-section .hero-wrapper .hero-title h1
{
      color:var(--fonts);
      font-size:30px;
      text-transform:uppercase;
      font-weight:900;
      font-style:italic
}
      

.hero-section .hero-wrapper .hero-title p
{
      color:var(--fonts)
}
      

.hero-section .hero-wrapper .hero-buttons
{
      width:500px;
      height:200px;
      position:absolute;
      top:89%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      outline:none;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

.hero-section .hero-wrapper .hero-buttons a button
{
      width:220px;
      height:50px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:18px;
      font-weight:900;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}

.hero-section .hero-wrapper .hero-buttons a .twitterbtn
{
      width:50px;
      height:50px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      background-image:url(../img/twitter50px.png);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:18px;
      font-weight:900;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}

.hero-section .hero-wrapper .hero-buttons a .telegrambtn
{
      width:50px;
      height:50px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      background-image:url(../img/telegram50px.png);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:18px;
      font-weight:900;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}

.hero-section .hero-wrapper .hero-buttons a .redditbtn
{
      width:50px;
      height:50px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      background-image:url(../img/reddit50px.png);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:18px;
      font-weight:900;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

.hero-section .hero-wrapper .hero-buttons a button:hover
{
      background-color:var(--btn-bg-hover);
      color:var(--btn-color-hover);
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

.hero-section .hero-wrapper .hero-buttons a button:active
{
      position:relative;
      top:1px
}
      

.hero-section .hero-wrapper .hero-text
{
      width:50%;
      position:absolute;
      top:72.5%;
      text-align:center;
      color:var(--fonts);
      opacity:.7
}
      

.hero-section .mars
{
      position:absolute;
      top:43%;
      left:51.5%;
      z-index:2;
      background-image:url(../img/saferuggif.gif)
}
   
.hero-section .mars .planet
{
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      position:absolute;
      /*border-radius:100%;*/
      height:380px;
      width:380px;
      /*overflow:hidden;*/
      margin-left:-240px;
      margin-top:-240px;
      z-index:2
}
      

.hero-section .mars .planet .surface
{
      position:absolute;
      /*border-radius:100%;*/
      height:140%;
      width:140%;
      top:-20%;
      right:-20%;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      border:40px solid rgba(0,0,0,0);
      background-image:url(../img/newlogo.png);
      background-size:120%;
      background-position:center
}
 
.about
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      padding-top:150px;
      color:var(--fonts);
      overflow:hidden
}
      

.about h1
{
      font-size:45px;
      text-transform:uppercase;
      font-style:italic;
      padding:0 30px 5px 20px;
      border-bottom:solid 4px #fff;
      border-radius:65px 15px;
      font-weight:700;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

.about .about-text
{
      width:43%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      margin-top:100px;
}

      

.about .about-text h2
{
      font-size:30px;
      font-weight:800
}
      

.about .about-text p
{
      margin-top:13px;
      font-size:18px;
      font-weight:400;
      text-align:left;
      color:rgba(255,255,255,.6)
}
      

.about .about-img
{
      width:43%;
      height:50%
}
      

.about .about-img img
{
      margin-top:50px;
      margin-left:80px;
      height:100%;
      width:90%;
      -webkit-animation:moon 600s linear infinite;
      animation:moon 600s linear infinite;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none;
      z-index:-2
}
      

.about .about-bottom
{
      padding-top:25px;
      width:100%;
      height:270px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
      flex-direction:column-reverse;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center
}
      

.about .about-bottom .bottom-text
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%
}
      

.about .about-bottom .bottom-text div
{
      width:100%
}
      

.about .about-bottom .bottom-text div p
{
      width:90%;
      margin-top:13px;
      font-size:18px;
      font-weight:400;
      text-align:left;
      color:rgba(255,255,255,.6)
}
      

.about .about-bottom .hero-buttons
{
      width:500px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between
}
      

.about .about-bottom .hero-buttons a button
{
      width:220px;
      height:50px;
      background-color:var(--btn-bg);
      color:var(--btn-color);
      border-radius:180px;
      border:none;
      display:inline-block;
      cursor:pointer;
      font-size:18px;
      font-weight:800;
      text-decoration:none;
      text-transform:uppercase;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

.about .about-bottom .hero-buttons a button:hover
{
      background-color:var(--btn-bg-hover);
      color:var(--btn-color-hover);
      -webkit-transition:.2s ease-in-out;
      transition:.2s ease-in-out
}
      

.about .about-bottom .hero-buttons a button:active
{
      position:relative;
      top:1px
}
      

.about h3
{
      font-size:23px;
      margin-bottom:10px
}
      

.roadmap
{
      margin-top:250px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      padding-bottom:200px;
      color:var(--fonts);
      overflow:hidden
}
      

.roadmap h1
{
      font-size:45px;
      text-transform:uppercase;
      font-style:italic;
      padding:0 30px 5px 20px;
      border-bottom:solid 4px #fff;
      border-radius:65px 15px;
      font-weight:700;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

.roadmap .roadmap-img
{
      width:33%;
      height:50%;
      margin-left:-130px;
      margin-top:30px
}
      

.roadmap .roadmap-img img
{
      height:70%;
      width:160%;
      -webkit-animation:earth 600s backwards linear infinite;
      animation:earth 600s backwards linear infinite;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none
}
      

.roadmap .container
{
      margin-top:130px;
      width:43%;
      height:500px;
      position:relative
}
      

.roadmap .container .leftbox
{
      top:-5%;
      left:5%;
      position:absolute;
      width:15%;
      height:110%;
      background-color:var(--rm-bg);
      -webkit-box-shadow:3px 3px 15px rgba(119,119,119,.5);
      box-shadow:3px 3px 15px rgba(119,119,119,.5)
}
      

.roadmap .container .rightbox
{
      padding:0 34rem 0 0;
      height:100%
}
      

.roadmap .container .rb-container
{
      font-family:pt sans,sans-serif;
      height:100%;
      width:50%;
      margin:auto;
      display:block;
      position:relative
}
      

.roadmap .container .rb-container .rb
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      height:500px;
      width:450px;
      padding:10px 0 0;
      display:inline-block;
    border-right-style: solid;

}
      

.roadmap .container .rb-container .rb .btn
{
      position:absolute;
      margin-left:-15px;
      background:rgba(0,0,0,.2);
      color:rgba(255,255,255,.2);
      padding:5px 12px;
      border-radius:180px;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      font-size:20px
}
      

.roadmap .container .rb-container .rb .up
{
      top:16%;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.roadmap .container .rb-container .rb .down
{
      top:84%;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}
      

.roadmap .container .rb-container .rb .up2
{
      top:16%;
      margin-left:500px;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.roadmap .container .rb-container .rb .down2
{
      top:84%;
      margin-left:500px;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}
      

.roadmap .container .rb-container .rb li
{
      min-height:100px;
      list-style:none;
      margin:auto;
      margin-left:3em;
      border-left:1px dashed #fff;
      padding:0 0 50px 30px;
      position:relative
}
      

.roadmap .container .rb-container .rb li:last-child
{
      border-left:0
}
      

.roadmap .container .rb-container .rb li::before
{
      position:absolute;
      left:-18px;
      top:-5px;
      content:" ";
      border:8px solid #fff;
      border-radius:500%;
      height:20px;
      width:20px;
      -webkit-transition:all 500ms ease-in-out;
      transition:all 500ms ease-in-out
}
      

.roadmap .container .rb-container .rb li:hover::before
{
      border-color:#232931;
      -webkit-transition:all 1000ms ease-in-out;
      transition:all 1000ms ease-in-out
}
      

.roadmap .container .rb-container .rb::-webkit-scrollbar
{
      display:none
}
      

.roadmap .container ul.rb li .timestamp
{
      position:relative;
      width:100px;
      font-size:12px
}
      

.roadmap .container .item-title
{
      color:rgba(255,255,255,.6)
}
      

.roadmap .container .container-3
{
      width:5em;
      vertical-align:right;
      white-space:nowrap;
      position:absolute
}
      

.roadmap .container input::-webkit-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.roadmap .container input:-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.roadmap .container input::-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.roadmap .container input::placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.roadmap .container .soon
{
      color:var(--rm-bg)
}
      

.roadmap .container .soon .timestamp
{
      color:var(--rm-bg)
}
      

.roadmap .container .soon::before
{
      background:var(--rm-bg)
}
      

.roadmap .container .inpr
{
      color:#ffa600
}
      

.roadmap .container .inpr::before
{
      background:#ffa600
}
      

.roadmap .container .done
{
      color:#50d890
}
      

.roadmap .container .done::before
{
      background:#50d890
}


.mst
{
      margin-top:100px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      color:var(--fonts);
      overflow:hidden
}
      

.mst h1
{
      font-size:45px;
      text-transform:uppercase;
      font-style:italic;
      padding:0 30px 5px 20px;
      border-bottom:solid 4px #fff;
      border-radius:65px 15px;
      font-weight:700;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

.mst .mst-img
{
      width:33%;
      height:50%;
      margin-left:-130px;
      margin-top:30px
}
      

.mst .mst-img img
{
      height:70%;
      width:160%;
      -webkit-animation:earth 600s backwards linear infinite;
      animation:earth 600s backwards linear infinite;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none
}
      

.mst .container
{
      margin-top:130px;
      width:43%;
      height:500px;
      position:relative
}
      

.mst .container .leftbox
{
      top:-5%;
      left:5%;
      position:absolute;
      width:15%;
      height:110%;
      background-color:var(--rm-bg);
      -webkit-box-shadow:3px 3px 15px rgba(119,119,119,.5);
      box-shadow:3px 3px 15px rgba(119,119,119,.5)
}
      

.mst .container .rightbox
{
      padding:0 34rem 0 0;
      height:100%
}
      

.mst .container .rb-container
{
      font-family:pt sans,sans-serif;
      height:100%;
      width:50%;
      margin:auto;
      display:block;
      position:relative
}
      

.mst .container .rb-container .rb
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      height:500px;
      width:450px;
      padding:10px 0 0;
      display:inline-block;
    border-right-style: solid;

}
      

.mst .container .rb-container .rb .btn
{
      position:absolute;
      margin-left:-15px;
      background:rgba(0,0,0,.2);
      color:rgba(255,255,255,.2);
      padding:5px 12px;
      border-radius:180px;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      font-size:20px
}
      

.mst .container .rb-container .rb .up
{
      top:16%;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.mst .container .rb-container .rb .down
{
      top:84%;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}
      

.mst .container .rb-container .rb .up2
{
      top:16%;
      margin-left:500px;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.mst .container .rb-container .rb .down2
{
      top:84%;
      margin-left:500px;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}
      

.mst .container .rb-container .rb li
{
      min-height:100px;
      list-style:none;
      margin:auto;
      margin-left:3em;
      border-left:1px dashed #fff;
      padding:0 0 50px 30px;
      position:relative
}
      

.mst .container .rb-container .rb li:last-child
{
      border-left:0
}
      

.mst .container .rb-container .rb li::before
{
      position:absolute;
      left:-18px;
      top:-5px;
      content:" ";
      border:8px solid #fff;
      border-radius:500%;
      height:20px;
      width:20px;
      -webkit-transition:all 500ms ease-in-out;
      transition:all 500ms ease-in-out
}
      

.mst .container .rb-container .rb li:hover::before
{
      border-color:#232931;
      -webkit-transition:all 1000ms ease-in-out;
      transition:all 1000ms ease-in-out
}
      

.mst .container .rb-container .rb::-webkit-scrollbar
{
      display:none
}
      

.mst .container ul.rb li .timestamp
{
      position:relative;
      width:200px;
      font-size:12px;
      color:#ffffff
}
      

.mst .container .item-title
{
      color:rgba(255,255,255,.6)
}
      

.mst .container .container-3
{
      width:5em;
      vertical-align:right;
      white-space:nowrap;
      position:absolute
}
      

.mst .container input::-webkit-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.mst .container input:-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.mst .container input::-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.mst .container input::placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.mst .container .soon
{
      color:var(--rm-bg)
}
      

.mst .container .soon .timestamp
{
      color:var(--rm-bg)
}
      

.mst .container .soon::before
{
      background:var(--rm-bg)
}
      

.mst .container .inpr
{
      color:#ffa600
}
      

.mst .container .inpr::before
{
      background:#ffa600
}
      

.mst .container .done
{
      color:#000000
}
      

.mst .container .done::before
{
      background:#000000
}



.hof
{
      margin-top:250px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      color:var(--fonts)
}
      

.hof h1
{
      font-size:45px;
      text-transform:uppercase;
      font-style:italic;
      padding:0 30px 5px 20px;
      border-bottom:solid 4px #fff;
      border-radius:65px 15px;
      font-weight:700;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}

.hof .hof-info 
{
margin-top:20px;
    
margin-bottom:-20px;
width:70%;
font-size:large;
text-align:center;
}
      

.hof .hof-img
{
      width:33%;
      height:50%;
      margin-left:-130px;
      margin-top:30px
}
      

.hof .hof-img img
{
      height:70%;
      width:160%;
      -webkit-animation:earth 600s backwards linear infinite;
      animation:earth 600s backwards linear infinite;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none
}
      

.hof .container
{
      margin-top:130px;
      width:43%;
      height:500px;
      position:relative;
      margin-left:auto;
      margin-right: auto;
}
      

.hof .container .leftbox
{
      top:-5%;
      left:5%;
      position:absolute;
      width:15%;
      height:110%;
      background-color:var(--rm-bg);
      -webkit-box-shadow:3px 3px 15px rgba(119,119,119,.5);
      box-shadow:3px 3px 15px rgba(119,119,119,.5)
}
      

.hof .container .rightbox
{
      /*padding:0 34rem 0 0;*/
      height:100%
}
 
@media(min-width:1000px)
{
.hof .container .rb-container
{
      font-family:pt sans,sans-serif;
      height:100%;
      width:75%;
      margin:auto;
      display:block;
      position:relative;
}

}

@media(max-width:1000px)
{
.hof .container .rb-container
{
      font-family:pt sans,sans-serif;
      height:100%;
      width:50%;
      display:block;
      position:relative;
}

}
      

.hof .container .rb-container .rb
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      overflow-x:scroll;
      -webkit-overflow-scrolling:touch;
      height:500px;
      width:100%;
      padding: 10px 0 0 50px;
      display:inline-block;
    border-right-style: solid;
}
      

.hof .container .rb-container .rb .btn
{
      position:absolute;
      margin-left:-15px;
      background:rgba(0,0,0,.2);
      color:rgba(255,255,255,.2);
      padding:5px 12px;
      border-radius:180px;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      font-size:20px
}
      

.hof .container .rb-container .rb .up
{
      top:16%;
      margin-left:-100px;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.hof .container .rb-container .rb .down
{
      top:84%;
      margin-left:-100px;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}
      

.hof .container .rb-container .rb .up2
{
      top:16%;
      margin-left:240px;
      -webkit-transform:rotate(-90deg);
      transform:rotate(-90deg)
}
      

.hof .container .rb-container .rb .down2
{
      top:84%;
      margin-left:240px;
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg)
}

.hof .container .rb-container .rb li
{
      min-height:80px;
      list-style:none;
      margin:auto;
      /*margin-left: 3em;*/
      padding:0 0 40px 30px;
      position:relative
}
      

.hof .container .rb-container .rb li:last-child
{
      border-left:0
}
      


.hof .container .rb-container .rb::-webkit-scrollbar
{
      display:none
}
      

.hof .container ul.rb li .timestamp
{
      position:relative;
      width:200px; 
      font-size:20px
}

.hof .container ul.rb li .rank
{
      position:absolute;
      left:-18px;
      font-size:40px;
      content:"1";
      /*border:8px solid #fff;*/
      border-radius:0%;
      height:36px;
      width:36px;
}
      

.hof .container .item-title
{
      color:rgba(255,255,255,.6)
}
      

.hof .container .container-3
{
      width:5em;
      vertical-align:right;
      white-space:nowrap;
      position:absolute
}
      

.hof .container input::-webkit-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.hof .container input:-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.hof .container input::-ms-input-placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.hof .container input::placeholder
{
      padding:5em 5em 1em 1em;
      color:#50d890
}
      

.hof .container .soon
{
      color:var(--rm-bg)
}
      

.hof .container .soon .timestamp
{
      color:var(--rm-bg)
}
      

.hof .container .soon::before
{
      background:var(--rm-bg)
}
      

.hof .container .inpr
{
      color:#ffa600
}

.hof .container .inpr a
{
      color:#ffa600;
    text-decoration: underline;
}
      

.hof .container .inpr::before
{
      background:#ffa600
}
      

.hof .container .done
{
      color:#50d890
}
      

.hof .container .done::before
{
      background:#50d890
}
      
      @media(max-width:2300px)
{
      @-webkit-keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:42.5%;
      top:23%
}
      79.5%
{
      right:42.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

@keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:42.5%;
      top:23%
}
      79.5%
{
      right:42.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      
}
      @media(max-width:1600px)
{
      #navbar .nav-wrapper
{
      width:80%
}
      

@-webkit-keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:41%;
      top:23%
}
      79.5%
{
      right:41%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

@keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:41%;
      top:23%
}
      79.5%
{
      right:41%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      
}
      @media(max-width:1400px)
{
      .content
{
      width:80%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between
}
      

#navbar .nav-wrapper
{
      width:100%;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .nav-wrapper .web-v
{
      display:none;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .nav-wrapper .logo
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      width:12em;
      height:6.5em;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out
}
      

#navbar .nav-wrapper .logo img
{
      margin-left:20px;
      width:10em;
      height:6.5em;
      -o-object-fit:contain;
      object-fit:contain;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out;
      mix-blend-mode:normal
}
      

.about .about-text
{
      width:70%
}
      

.roadmap
{
      margin-top:140px
}
      

.roadmap .roadmap-img
{
      margin-left:-50px;
      width:25%
}
      

.roadmap .container
{
      margin-top:100px;
      width:60%;
      height:500px;
      position:relative
}

.mst
{
      margin-top:100px
}
      

.mst .mst-img
{
      margin-left:-50px;
      width:25%
}
      

.mst .container
{
      margin-top:100px;
      width:60%;
      height:500px;
      position:relative
}


.hof
{
      margin-top:140px
}
      

.hof .hof-img
{
      margin-left:-50px;
      width:25%
}
      

.hof .container
{
      margin-top:100px;
      width:60%;
      height:500px;
      position:relative;
      margin-left:auto;
      margin-right: auto;}
      
}

      @media(min-width:1000px)
{
    .hero-section .mars .planet
{
    margin-left: -200px;
}

}

      @media(max-width:1000px)
{
      .content
{
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between
}
      
.about .about-text
{
      margin-left:20px
}

.about .about-bottom
{
      margin-left:20px
}

#navbar .nav-wrapper
{
      width:100%;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .nav-wrapper .logo
{
      width:20px
}
      

#navbar .nav-wrapper .logo img
{
      width:140px
}
      

#navbar .nav-wrapper .nav-menu .nav-buttons .hide
{
      -webkit-transition:1s ease;
      transition:1s ease;
      display:none
}
      

.hero-section
{
      width:100%;
      height:100vh;
}
      

.hero-section .hero-wrapper
{
      width:100%
}
      

.hero-section .hero-wrapper .hero-title
{
      top:62%
}
      

.hero-section .hero-wrapper .hero-buttons
{
      width:500px;
      height:200px;
      top:87%
}
      

.hero-section .hero-wrapper .hero-buttons a button
{
      width:220px;
      height:50px
}
      

.hero-section .hero-wrapper .hero-text
{
      width:70%;
      top:74%
}
      

.hero-section .mars
{
      position:absolute;
      top:43%;
      left:56%;
      z-index:2
}
      

.hero-section .mars .tentacle
{
      top:-190px;
      right:-90px
}
      

.hero-section .mars .flag
{
      top:100px;
      left:-50px
}
      

.hero-section .mars .planet
{
      height:370px;
      width:370px
}
      

@-webkit-keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:33.5%;
      top:23%
}
      79.5%
{
      right:33.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

@keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:33.5%;
      top:23%
}
      79.5%
{
      right:33.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

.about
{
      margin-top:-90px
}
      

.about .about-text
{
      width:70%
}
      

.roadmap
{
      margin-top:140px
}
      

.roadmap .roadmap-img
{
      margin-left:-50px;
      width:20%
}
      

.roadmap .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}

.mst
{
      margin-top:100px
}
      

.mst .mst-img
{
      margin-left:-50px;
      width:20%
}
      

.mst .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}


.hof
{
      margin-top:140px
}
      

.hof .hof-img
{
      margin-left:-50px;
      width:20%
}
      

.hof .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative;
      margin-left:auto;
      margin-right: auto;}
      
}
      @media(max-width:800px)
{
      .content
{
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

#navbar
{
      display:none
}
      

#navbar .nav-wrapper
{
      width:100%;
      -webkit-transition:1s ease;
      transition:1s ease
}
      

#navbar .logo
{
      display:none;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      height:6.5em;
      width:18em;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out
}
      

#navbar .logo img
{
      display:none;
      margin-left:20px;
      width:14em;
      height:6.5em;
      -o-object-fit:contain;
      object-fit:contain;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      pointer-events:none;
      -webkit-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out;
      mix-blend-mode:normal
}
      

#navbar .nav-menu
{
      width:100%
}
      

#navbar .nav-menu .nav-buttons a button
{
      display:none
}
      

.m-nav
{
      z-index:9999
}
      

#menuToggle
{
      height:100%;
      width:10%;
      display:block;
      position:fixed;
      top:50px;
      z-index:4;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none
}
      

#menuToggle a
{
      text-decoration:none;
      color:#fff;
      padding:30px;
      -webkit-transition:color .3s ease;
      transition:color .3s ease
}
      

#menuToggle a:hover
{
      color:#ff3815
}
      

#menuToggle input
{
      margin-left:30px;
      display:block;
      width:40px;
      height:32px;
      position:absolute;
      top:-7px;
      left:-5px;
      cursor:pointer;
      opacity:0;
      z-index:2;
      -webkit-touch-callout:none
}
      

#menuToggle span
{
      margin-left:30px;
      display:block;
      width:33px;
      height:4px;
      margin-bottom:5px;
      position:relative;
      background:#fff;
      border-radius:3px;
      z-index:1;
      -webkit-transform-origin:4px 0;
      transform-origin:4px 0;
      -webkit-transition:background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease;
      transition:transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1)
}
      

#menuToggle span:first-child
{
      -webkit-transform-origin:0% 0%;
      transform-origin:0% 0%
}
      

#menuToggle span:nth-last-child(2)
{
      -webkit-transform-origin:0% 100%;
      transform-origin:0% 100%
}
      
#menuToggle input:checked~span
{
      opacity:1;
      -webkit-transform:rotate(45deg) translate(-2px,-1px);
      transform:rotate(45deg) translate(-2px,-1px);
      background:#fff
}
      

#menuToggle input:checked~span:nth-last-child(3)
{
      opacity:0;
      -webkit-transform:rotate(0deg) scale(.2,.2);
      transform:rotate(0deg) scale(.2,.2)
}
      

#menuToggle input:checked~span:nth-last-child(2)
{
      -webkit-transform:rotate(-45deg) translate(0,-1px);
      transform:rotate(-45deg) translate(0,-1px)
}
      

#menuToggle input:checked~ul
{
      -webkit-transform:none;
      transform:none
}
      #menu
{
      position:absolute;
      height:1200px;
      width:280px;
      margin:-100px 0 0 -50px;
      padding:50px;
      padding-top:125px;
      background:#000;
      list-style-type:none;
      -webkit-font-smoothing:antialiased;
      -webkit-transform-origin:0% 0%;
      transform-origin:0% 0%;
      -webkit-transform:translate(-100%,0);
      transform:translate(-100%,0);
      -webkit-transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1),-webkit-transform .5s cubic-bezier(.77,.2,.05,1)
}
      #menu li
{
      margin-left:30px;
      padding:10px;
      font-size:18px
}
      

.hero-section
{
      width:100%;
      height:100vh
}
      

.hero-section .hero-wrapper
{
      width:100%
}
      

.hero-section .hero-wrapper .hero-title
{
      top:58%
}
      

.hero-section .hero-wrapper .hero-buttons
{
      width:90%;
      height:200px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:space-evenly;
      -ms-flex-pack:space-evenly;
      justify-content:space-evenly;
      top:87%
}
      

.hero-section .hero-wrapper .hero-buttons a button
{
      width:220px;
      height:50px
}
      

.hero-section .hero-wrapper .hero-text
{
      width:80%;
      top:70%
}
      

.hero-section .mars
{
      position:absolute;
      top:43%;
      left:62%;
      z-index:2
}
      

.hero-section .mars .tentacle
{
      top:-190px;
      right:-90px
}
      

.hero-section .mars .flag
{
      top:100px;
      left:-50px
}
      

.hero-section .mars .planet
{
      height:310px;
      width:310px
}
      

.hero-section .roadmap
{
      margin-top:140px
}
      

.hero-section .roadmap .roadmap-img
{
      display:none
}
      

.hero-section .roadmap .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}

.hero-section .mst
{
      margin-top:140px
}
      

.hero-section .mst .mst-img
{
      display:none
}
      

.hero-section .mst .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}

.hero-section .hof
{
      margin-top:140px
}
      

.hero-section .hof .hof-img
{
      display:none
}
      

.hero-section .hof .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}
      

@-webkit-keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:30.5%;
      top:23%
}
      79.5%
{
      right:30.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

@keyframes ship
{
      0%
{
      right:-10%;
      top:-10%
}
      40%
{
      right:30.5%;
      top:23%
}
      79.5%
{
      right:30.5%;
      top:23%
}
      84%
{
      right:50%;
      top:40%
}
      100%
{
      right:50%;
      top:40%;
      margin-top:0;
      margin-right:0
}
      
}
      

.about
{
      margin-top:-120px
}
      

.about .about-text
{
      width:80%
}
      

.about .about-img
{
      display:none
}
      

.about .about-bottom
{
      width:80%;
      height:430px;
      -webkit-box-orient:vertical;
      -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
      flex-direction:column-reverse
}
      

.about .about-bottom .bottom-text
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%;
      margin-top:43px
}
      

.roadmap
{
      margin-top:140px
}
      

.roadmap .roadmap-img
{
      display:none
}
      

.roadmap .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
      /*z-index:2*/
    }

    .mst
{
      margin-top:100px
}
      

.mst .mst-img
{
      display:none
}
      

.mst .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
      /*z-index:2*/
    }

    .hof
{
      margin-top:140px
}
      

.hof .hof-img
{
      display:none
}
      

.hof .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative;
      /*z-index:2*/
      margin-left:auto;
      margin-right: auto;
}
      
}
      @media(max-width:540px)
{
      footer
{
      -webkit-box-align:start;
      -ms-flex-align:start;
      align-items:flex-start;
      padding:10px;
      margin-top:-130px;
      height:300px
}
      #menu
{
      position:absolute;
      height:1200px;
      width:250px;
      margin:-100px 0 0 -50px;
      padding:50px;
      padding-top:125px;
      background:#000;
      list-style-type:none;
      -webkit-font-smoothing:antialiased;
      -webkit-transform-origin:0% 0%;
      transform-origin:0% 0%;
      -webkit-transform:translate(-100%,0);
      transform:translate(-100%,0);
      -webkit-transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1),-webkit-transform .5s cubic-bezier(.77,.2,.05,1)
}
      #menu li
{
      padding:10px;
      font-size:19px
}
      .content
{
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.hero-section
{
      width:100%;
      height:100vh
}
      

.hero-section .hero-wrapper
{
      width:100%;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.hero-section .hero-wrapper .hero-title
{
      top:58%
}
      

.hero-section .hero-wrapper .hero-title h1
{
      font-size:24px
}
      

.hero-section .hero-wrapper .hero-buttons
{
      width:90%;
      height:200px;
      position:fixed;
      top:87%;
      z-index:2;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between
}
      

.hero-section .hero-wrapper .hero-buttons a button
{
      width:100%;
      height:50px;
      font-size:14px;
      padding:0 10px
}
      

.hero-section .hero-wrapper .hero-text
{
      width:70%;
      top:67%;
      font-size:14px
}
      

.hero-section .ship
{
      display:none
}
      

.hero-section .mars
{
      position:absolute;
      top:50%;
      left:78%;
      z-index:2
}
      

.hero-section .mars .tentacle
{
      display:none;
      top:-190px;
      right:-90px
}
      

.hero-section .mars .flag
{
      display:none
}
      

.hero-section .mars .planet
{
      height:250px;
      width:250px
}
      

.hero-section .roadmap
{
      margin-top:140px
}
      

.hero-section .roadmap .roadmap-img
{
      display:none
}
      

.hero-section .roadmap .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}

.hero-section .mst
{
      margin-top:140px
}
      

.hero-section .mst .mst-img
{
      display:none
}
      

.hero-section .mst .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}


.hero-section .hof
{
      margin-top:140px
}
      

.hero-section .hof .hof-img
{
      display:none
}
      

.hero-section .hof .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}
      

.about
{
      margin-top:-180px;
      text-align:center
}
      

.about h1
{
      font-size:30px
}
      

.about h3
{
      font-size:17px
}
      

.about .about-text
{
      width:80%
}
      

.about .about-text h2
{
      font-size:20px
}
      

.about .about-text p
{
      text-align:center;
      font-size:15px
}
      

.about .about-img
{
      display:none
}
      

.about .about-bottom
{
      width:80%;
      height:430px;
      -webkit-box-orient:vertical;
      -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
      flex-direction:column-reverse
}
      

.about .about-bottom .hero-buttons
{
      margin-top:0;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%
}
      

.about .about-bottom .hero-buttons a
{
      margin-right:10px
}
      

.about .about-bottom .hero-buttons a button
{
      width:100%;
      height:45px;
      font-size:10px
}
      

.about .about-bottom .hero-buttons .btn-wrapper
{
      margin-top:-150px
}
      

.about .about-bottom .hero-buttons .btn-wrapper button
{
      width:150px;
      height:50px;
      font-size:14px
}
      

.about .about-bottom .bottom-text
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%;
      margin-top:-10px
}
      

.about .about-bottom .bottom-text div
{
      margin-top:10px
}
      

.about .about-bottom .bottom-text div p
{
      text-align:center;
      font-size:15px
}
      

.roadmap
{
      margin-top:140px
}
      

.roadmap h1
{
      font-size:30px
}
      

.roadmap .roadmap-img
{
      display:none
}
      

.roadmap .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.roadmap .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative;
      /*z-index:2*/
}
      

.roadmap .container .btn
{
      display:none
}
      

.roadmap .container .rightbox
{
      height:100%
}


.mst
{
      margin-top:100px
}
      

.mst h1
{
      font-size:30px
}
      

.mst .mst-img
{
      display:none
}
      

.mst .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.mst .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative;
      /*z-index:2*/
}
      

.mst .container .btn
{
      display:none
}
      

.mst .container .rightbox
{
      height:100%
}


.hof
{
      margin-top:140px
}
      

.hof h1
{
      font-size:30px
}
      

.hof .hof-img
{
      display:none
}
      

.hof .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.hof .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative;
      /*z-index:2*/
      margin-left:auto;
      margin-right: auto;
}
      

.hof .container .btn
{
      display:none
}
      

.hof .container .rightbox
{
      height:100%
}
      
}
      

@media(max-width:390px)
{
      footer
{
      -webkit-box-align:start;
      -ms-flex-align:start;
      align-items:flex-start;
      padding:10px;
      margin-top:-130px;
      height:320px
}
      .content
{
      width:100%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      #menu
{
      position:absolute;
      height:1200px;
      width:250px;
      margin:-100px 0 0 -50px;
      padding:50px;
      padding-top:90px;
      background:#000;
      list-style-type:none;
      -webkit-font-smoothing:antialiased;
      -webkit-transform-origin:0% 0%;
      transform-origin:0% 0%;
      -webkit-transform:translate(-100%,0);
      transform:translate(-100%,0);
      -webkit-transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1);
      transition:transform .5s cubic-bezier(.77,.2,.05,1),-webkit-transform .5s cubic-bezier(.77,.2,.05,1)
}
      #menu li
{
      padding:5px;
      font-size:14px
}
      

.hero-section
{
      width:100%;
      height:100vh
}
      

.hero-section .hero-wrapper
{
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      width:100%
}
      

.hero-section .hero-wrapper .hero-title
{
      top:58%
}
      

.hero-section .hero-wrapper .hero-title h1
{
      font-size:20px
}
      

.hero-section .hero-wrapper .hero-buttons
{
      width:90%;
      height:200px;
      position:fixed;
      top:87%;
      z-index:2
}
      

.hero-section .hero-wrapper .hero-buttons a button
{
      width:100%;
      height:45px;
      font-size:10px
}
      

.hero-section .hero-wrapper .hero-text
{
      width:90%;
      top:67%;
      font-size:13px
}
      

.hero-section .ship
{
      display:none
}
      

.hero-section .mars
{
      position:absolute;
      top:57%;
      left:90%;
      z-index:2
}
      

.hero-section .mars .tentacle
{
      display:none;
      top:-190px;
      right:-90px
}
      

.hero-section .mars .flag
{
      display:none
}
      

.hero-section .mars .planet
{
      height:210px;
      width:210px
}
      

.hero-section .roadmap
{
      margin-top:140px
}
      

.hero-section .roadmap .roadmap-img
{
      display:none
}
      

.hero-section .roadmap .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}


.hero-section .mst
{
      margin-top:140px
}
      

.hero-section .mst .mst-img
{
      display:none
}
      

.hero-section .mst .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}


.hero-section .hof
{
      margin-top:140px
}
      

.hero-section .hof .hof-img
{
      display:none
}
      

.hero-section .hof .container
{
      margin-top:100px;
      width:70%;
      height:500px;
      position:relative
}
      

.about
{
      margin-top:-170px;
      text-align:center
}
      

.about h1
{
      font-size:30px
}
      

.about h3
{
      font-size:15px
}
      

.about .about-text
{
      margin-top:70px;
      width:80%
}
      

.about .about-text h2
{
      font-size:18px
}
      

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

.about .about-img
{
      display:none
}
      

.about .about-bottom
{
      width:90%;
      height:430px;
      -webkit-box-orient:vertical;
      -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
      flex-direction:column-reverse
}
      

.about .about-bottom .hero-buttons
{
      margin-top:30px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%
}
      

.about .about-bottom .hero-buttons .btn-wrapper
{
      margin-top:-90px
}
      

.about .about-bottom .hero-buttons .btn-wrapper button
{
      width:120px;
      height:45px;
      font-size:11px
}
      

.about .about-bottom .bottom-text
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column;
      -webkit-box-pack:justify;
      -ms-flex-pack:justify;
      justify-content:space-between;
      width:100%;
      margin-top:46px
}
      

.about .about-bottom .bottom-text div
{
      margin-top:10px
}
      

.about .about-bottom .bottom-text div p
{
      text-align:center;
      font-size:14px
}
      

.roadmap
{
      margin-top:140px
}
      

.roadmap h1
{
      font-size:30px
}
      

.roadmap .roadmap-img
{
      display:none
}
      

.roadmap .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.roadmap .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative
      /*z-index:2*/
}
      

.roadmap .container .btn
{
      display:none
}
      

.roadmap .container .rightbox
{
      height:100%
}
      

.roadmap .container .rb-container .rb
{
      width:340px
}


.mst
{
      margin-top:100px
}
      

.mst h1
{
      font-size:30px
}
      

.mst .mst-img
{
      display:none
}
      

.mst .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.mst .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative
      /*z-index:2*/
}
      

.mst .container .btn
{
      display:none
}
      

.mst .container .rightbox
{
      height:100%
}
      

.mst .container .rb-container .rb
{
      width:340px
}

.hof
{
      margin-top:140px
}
      

.hof h1
{
      font-size:30px
}
      

.hof .hof-img
{
      display:none
}
      

.hof .content
{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center
}
      

.hof .container
{
      margin-top:80px;
      width:100%;
      height:500px;
      position:relative;
      /*z-index:2*/
      margin-left:auto;
      margin-right: auto;
}
      

.hof .container .btn
{
      display:none
}
      

.hof .container .rightbox
{
      height:100%
}
      

.hof .container .rb-container .rb
{
      width:340px
}
      
}