@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/*
font-family: 'IBM Plex Mono', monospace;
font-family: 'Press Start 2P', cursive;
*/

@font-face {
    font-family: 'Press Start 2P', cursive;
    src: url('../fonts/superstar_memesbruh03-webfont.woff2') format('woff2'),
         url('../fonts/superstar_memesbruh03-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {
  --body-font: "IBM Plex Mono", sans-serif;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  font-family: var(--body-font);
}

* {
  box-sizing: border-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
  /* WebKit  */
}
body {
  margin: 0;
  font-size: 16px;
  background:#00ceff;
  color:#fff;
  font-weight:600;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(125deg, #fff17e 0%, #fba203 100%);
  border-radius: 5px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
select:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #ddd;
}
a { color:#fff; text-decoration: none; transition:0.3s all;-moz-transition:0.3s all;-webkit-transition:0.3s all;}
a:hover { color:#ffea30; text-decoration: none;}

header {
  margin:50px 0 85px 0;
}
.fixed-header {    margin-left:0px !important;margin-right:0px !important; position: fixed;    top: 0;    left:0; width: 100%; 	background:rgba(0, 206, 255, 0.96);	border-bottom:2px solid #e1a23c;  z-index:999 !important; padding-top:10px;}
.nav {    width: 100%;     z-index: 10; }
header nav { float:left; width:100%; margin:7px 0 0 0;}
header nav ul { display: flex; list-style-type: none; width:100%;}
header nav ul li { float:left; }
header nav ul li { float:left; padding:0 3.5% 0 3.5%; text-shadow: 0 0 10px rgba(255,255,255, 0.5) }
header .social { margin-top:7px; float:right; width:100%; }
header .social i { width:22%; margin:0 1.5%; text-align:center; text-shadow: 0 0 10px rgba(255,255,255, 0.5)}
h1 { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; color:#00ceff; font-size:20px; text-align:center; margin:0 0 30px 0 }
h2 { color:#fff; font-size:18px; text-align:center; margin:30px 0 30px 0 }
.free-to-play { background:url(../image/bg-top.png) top center no-repeat; margin-top:50px; height:1131px; padding:110px 0 0 0;}
.free-to-play .barry { margin:0 0 140px 390px; }
.free-to-play .simple { background:url(../image/simple-gameplay-bg.png) top center no-repeat; width:462px; height:160px; float:right; margin:13px 0 0 0; padding:25px 40px; font-size:20px; line-height:175%;}
.free-to-play .simple2 { background:url(../image/simple-gameplay-bg.png) top center no-repeat; width:462px; height:160px; float:left; margin:13px 0 0 0; padding:25px 40px; font-size:16px; line-height:150%;}
.free-to-play .drill { width:100%;float:left; margin-top:-40px; margin-left:180px}
.free-to-play .drill img { width:128px; height:128px}
.free-to-play .jeb { float:right; margin-top:-55px; margin-right:100px}
.free-to-play .jeb-gif{ clear:both; float:right; margin:-7px 10px 0 0}
.free-to-play .jeb-gif img{ width:120px; height:120px;}
.free-to-play .pixi-gif{ clear:both; float:left; margin:5px 0 0 -5px; }
.free-to-play .pixi-gif img{ width:120px; height:120px;}

.welcome {box-shadow: 0 -35px 30px rgb(82,68,42, 1);  background: rgb(82,68,42);
background: linear-gradient(180deg, rgba(82,68,42,1) 0%, rgba(101,84,54,1) 50%, rgba(101,83,53,1) 100%);
padding:60px 0 0 0; height:2200px}

.box-text { letter-spacing: 2px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color:#fff; font-size:30px;  font-family: 'Press Start 2P', cursive; line-height:200%; }
.box-text2 { width:100%; letter-spacing: 5px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color:#fff; font-size:30px;  font-family: 'Press Start 2P', cursive; line-height:200%; float:left; margin-top:50px; }
.supply-text { width:100%; float:left; font-weight:300; font-size: 20px; font-weight:500; margin:15px 0 40px 0;  }


.ultimate-text { font-weight:300; margin:100px 0 10px 0; float:left; letter-spacing: 1px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(252,178,29); font-size:30px;  font-family: 'Press Start 2P', cursive;  line-height:160%}
.richest-text { font-weight:300; float:left; letter-spacing: 1px; text-shadow: -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000; color: rgb(255,255,255); font-size:16px;  font-family: 'Press Start 2P', cursive; line-height:200%; }
.clear { width:100%; float:left; font-size:20px; margin-top:20px}
.width { width:100%; margin-top:40px; cursor:pointer;}
.width .gif {   background: url(../image/jeb_iron.gif) -20px 0px no-repeat; width:90px; height:128px; float:left; }
.width:hover .play { text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(252,178,29);}
.width .dig { text-align:center; width:190px; padding:5px 40px 0 40px; float:left; color: rgb(255,255,255); font-size:18px;  line-height:130%}


.width-right { cursor:pointer;width:100%; margin-top:75px;}
.width-right:hover .play { text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(252,178,29);}

.width-right .gif {  background: url(../image/pixi_stone-left.gif) -20px 0px no-repeat; width:90px; height:128px; float:left; }
.width-right .dig { text-align:center; width:190px; padding:5px 0 0 0; float:left; color: rgb(255,255,255); font-size:18px;  line-height:130%}

.width-bottom { cursor:pointer;margin-top:-20px;}
.width-bottom:hover .play { text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(252,178,29);}

.width-bottom .gif {  background: url(../image/tier-4-128.gif) -10px 5px no-repeat; width:90px; height:128px; float:left; }
.width-bottom .dig { text-align:center; width:190px; padding:5px 40px 0 40px; float:left; color: rgb(255,255,255); font-size:18px;  line-height:130%}

.width-bottom-right {cursor:pointer; width:100%; margin-top:15px;}
.width-bottom-right .gif {  background: url(../image/rich-solo.png) 15px 16px no-repeat; width:90px; height:128px; float:left; }
.play_yellow { margin-top:30px; width:190px; text-align:center; font-weight:300; float:left; letter-spacing: 8px;  letter-spacing: 8px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(252,178,29); font-size:20px;  font-family: 'Press Start 2P', cursive;  line-height:150%}
.width-bottom-right .dig { text-align:center; width:190px; padding:5px 0 0 0; float:left; color: rgb(255,255,255); font-size:18px;  line-height:130%}

.play { transition:0.3s all;-moz-transition:0.3s all;-webkit-transition:0.3s all; cursor:pointer; margin-top:30px; width:190px; text-align:center; font-weight:300; float:left; letter-spacing: 8px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color: rgb(255,255,255); font-size:20px;  font-family: 'Press Start 2P', cursive;  line-height:150%}
.footer-md { background: url(../image/chart-footer.png) top center no-repeat; height:36px; width:100%; float:left;}

.box-md-head1 { color:#33322A; font-weight:700; float:left; padding:0 0 10px 25px; width:285px }
.box-md-head2 { color:#33322A; font-weight:700; float:left; width:90px; }
.box-md-head3 { color:#33322A; font-weight:700; float:left; }
.box-head { background:url(../image/tokenomics-head.png); height:12px; width:100%; float:left;  }
.box-left { background:url(../image/tokenomics-box.png); height:575px; width:12px; float:left; }
.box-contents { width:669px;height:575px; float:left; background:url(../image/box-hr.png); padding: 1px 15px; }
.box-md-1     { clear:both; width:250px; padding:26px 0;  font-weight:300; letter-spacing: 1px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%; float:left; border-right:2px solid #574E3A}
.box-md-2     { width:80px; padding:26px 0;  text-align:center;  letter-spacing: 2px; text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%; float:left; border-right:2px solid #574E3A}
.box-md-3     { width:309px; padding:0 0;  text-align:left; letter-spacing: 1px; color:#F1B049; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:160%; float:left; padding-left:20px; }
.box-right { background:url(../image/tokenomics-box.png); height:575px; width:12px; float:left; }
.box-footer { background:url(../image/tokenomics-head.png); height:12px; width:100%; float:left;  }

.text     { font-size:18px; line-height:150%;}

.left-border    { background:url(../image/stone-left.png) top right no-repeat;width:100px; height:169px; left:0; position:absolute; margin-top:272px; padding-top:88px; z-index:99 !important;  }
.left-border img { margin-left:30px; }
.video-border   { background:url(../image/video-play.png) top center no-repeat; width:604px; height:416px; float:left; margin:50px 0 0 80px; z-index:9 !important; padding:35px 0 0 35px;}
.right-border   { background:url(../image/stone-right.png) top left no-repeat; width:100px; height:215px; left:695px; position:absolute;  margin-top:272px; padding-top:88px}
.playbutton {left:37%; top:50%; position:absolute;}
.right-border img { margin-left:-60px }

.chart { background:url(../image/tokenomics-chart.png) top center no-repeat; width:100%; height:370px; margin-top:30px;  padding-bottom:20px;}
.chart .chart-pixi { float:left; padding-top:243px; }
.chart .chart-jeb { float:right; padding-top:243px; }
.chart-footer { background:url(../image/chart-footer.png) top center; width:100%; height:36px; }
.icon-1 { margin-top:30px; background:url(../image/icon-1.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-2 { margin-top:30px; background:url(../image/icon-2.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-3 { margin-top:10px; background:url(../image/icon-3.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-4 { margin-top:10px; background:url(../image/icon-4.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-5 { margin-top:10px; background:url(../image/icon-5.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-6 { margin-top:10px; background:url(../image/icon-6.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-7 { margin-top:10px; background:url(../image/icon-7.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
.icon-8 { margin-top:10px; background:url(../image/icon-8.png) center left no-repeat; float:left; width:50%; padding:6px 0 0 25px; height:31px; font-weight:300; letter-spacing: 0px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:10px;  font-family: 'Press Start 2P', cursive; line-height:200%;}
#chartdiv {
  width: 420px;
  height: 420px;
  float:left;
  position:absolute;;
  left:48px;
  top:-4px;
}

.roadmap { background: url(../image/roadmap-bg.png) top center #655437; height:1500px}
.roadmap-head { margin:-30px 0 50px 0; letter-spacing: 2px; text-shadow: -3px -3px 1px #000, 3px -3px 1px #000, -3px 3px 1px #000, 3px 3px 1px #000; color:#fff; font-size:30px;  font-family: 'Press Start 2P', cursive; line-height:200%; width:100%; float:left; text-align:center; }
.phase { width:100%; margin-bottom:20px; float:left; }
.roadmap .ul { float:left; width:70%; }
.roadmap li { margin-bottom:7px;}
.roadmap-footer { background: url(../image/roadmap-footer.png) top center; width:100%; height:27px; float:left;  margin-bottom:35px}
.character-p1 { float:left; margin-top:95px; margin-left:-50px}
.character-p2 { float:right; margin-top:32px}
.character-p3 { float:left; margin-top:00px}
.character-p4 { float:right; margin-top:-90px;}
.character-p5 { float:left; margin-top:-100px; width:30%; height:170px; }
.character-p5 img { height:180px; }


.material-earnings {box-shadow: 0 -35px 30px rgb(82,68,42, 1);  background: rgb(82,68,42);
background: linear-gradient(180deg, rgba(82,68,42,1) 0%, rgba(101,84,54,1) 50%, rgba(101,83,53,1) 100%);
padding:60px 0 0 0; min-height:200px; padding-bottom:150px}

.materials-mine img { width:100%; text-align:center; }
.team1  { background: url(../image/team-a1.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0;}
.team2  { background: url(../image/team-a2.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0; }
.team3  { background: url(../image/team-a3.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0; }
.team4  { background: url(../image/team-a4.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0; }
.team5  { background: url(../image/team-a5.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0; }
.team6  { background: url(../image/team-a6.png); height:188px; width:181px; float:left; text-align:center; padding:30px 0 0 10px; margin:30px 0 10px 0; }

.team-name     { clear:both; width:100%; text-align:center; font-weight:300; letter-spacing: 1px; text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; color:#fff; font-size:14px;  font-family: 'Press Start 2P', cursive; line-height:200%; float:left;}
.team-job      { clear:both; width:100%; text-align:center; float:left; font-size:14px;}

footer { background: url(../image/footer.png); height:465px; padding:80px 0 0 0}
footer nav { width:70%; float:left; margin:50px 15% 0 15%;}
footer nav ul { list-style: none; display: flex; list-style-type: none; width:100%; padding-inline-start:0}
footer nav ul li { float:left; text-align:center; width:16.6%; text-shadow: 0 0 10px rgba(255,255,255, 0.5) }
.yellow { color: rgb(252,178,29);  }
.twitter-button{ float:right; margin-top:30px; }
.dc-button { float:left; margin-top:30px; }
.telegram-button { margin-top:15px; display: block; }


@media (min-width:800px) and (max-width:1024px){
  .container { max-width: 1024px; }
  header .social { display:none; }
  .free-to-play .barry  { margin:0 0 140px 180px; }
  .free-to-play .simple { background-size: contain; width:100%; font-size:14px; margin-top:22px }
  .free-to-play .drill  { margin-left:20px; margin-top:-55px; width:unset; }
  .free-to-play .jeb-gif  { margin-top:0px; }
  .free-to-play .simple2 { background-size: contain; width:100%; font-size:12px; margin-top:22px }
  .free-to-play .jeb     {  margin-right:0px; margin-top:-70px}
  .free-to-play .jeb img { height:140px;}
  .free-to-play .pixi-gif {  }
  .video-border { margin:50px 0 0 0; background-size: contain; width:100%; padding:5%; height:auto; }
  .video-border img { width:100%; }
  .right-border { left: unset; padding-top:unset; }
  .left-border { left:-80px; padding-top:unset; }
  .col-1000 { width:100%; max-width:unset; flex:unset; }
  .ultimate-text { width:100%; text-align:center; }
  .richest-text { width:100%; text-align:center; }
  .welcome { min-height:2200px; height:unset; padding-bottom:80px;}
  .box-text2  { width:100%; text-align: center; }
  .supply-text  { width:100%; text-align: center; }
  .width .gif { width:25%; }
  .width .play { width:75%; }
  .width .dig { width:75%; }
  .width-bottom .gif { width:25%; float:right;}
  .width-bottom .play { width:75%; }
  .width-bottom .dig { width:75%; }
  .width-right .gif { width:25%;  float:left; }
  .width-right .play { width:75%; }
  .width-right .dig { width:75%; }
  .width-bottom-right .gif { width:25%; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; /*IE*/ float:right; }
  .width-bottom-right .play_yellow { width:75%; }
  .width-bottom-right .dig { width:75%; }
  .chart { display:none; }
  .chart-footer { display:none; }
  .icon-1{ display: none; }
  .icon-2{ display: none; }
  .icon-3{ display: none; }
  .icon-4{ display: none; }
  .icon-5{ display: none; }
  .icon-6{ display: none; }
  .icon-7{ display: none; }
  .icon-8{ display: none; }
  .footer-md { background:url(../image/chart-footer.png) top center}
  .box-left { display: none; }
  .box-right { display: none; }
  .box-contents {
    width:100%; height:unset;
    padding:1% 1%;
    background: url(../image/tokenomics-box.png) top left repeat-y, url(../image/tokenomics-box.png) top right repeat-y,  linear-gradient(360deg, rgba(119,102,72,1) 0%, rgba(131,112,77,1) 50%, rgba(131,112,77,1) 100%);
  }
  .box-md-1 { width:38%;background:url(../image/box-hr-mobile.png) bottom right repeat-x; padding-left:2%; border-right:0px;  }
  .box-md-2 { width:10%; margin-bottom:10px; background:url(../image/box-hr-mobile.png) bottom right repeat-x; border-right:0px; }


  .box-md-3 { width:51%; background:url(../image/box-hr-mobile.png) bottom right repeat-x; height:72px }
  .box-md-4 { width:51%;background:url(../image/box-hr-mobile.png) bottom right repeat-x; float:left;  height:72px }
  .box-bottom { background: unset; }

  .box-md-head1 { width:38%; padding-left:20px; }
  .box-md-head2 { width:10%;}
  .box-md-head3 { width:51%; padding-left:20px; }

  .roadmap .ul { width:100%; }
  .character-p1 { display:none; }
  .character-p2 { display:none; }
  .character-p3 { display:none; }
  .character-p4 { display:none; }
  .character-p5 { display:none; }
  .col-33 { width:33%; max-width:33%; flex:0 0 33%;}
  .col-34 { display:none; }
  .team1 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team2 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team3 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team4 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team5 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team6 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }
  .team7 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }
  .team8 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }

}


@media (min-width:500px) and (max-width:768px){
  .container { max-width: 720px; }

  header .social { display:none; }
  .free-to-play .barry  { margin:0 0 140px 180px; }
  .free-to-play .simple { background-size: contain; width:100%; font-size:14px; margin-top:22px }
  .free-to-play .drill  { margin-left:20px; margin-top:-55px; width:unset; }
  .free-to-play .jeb-gif  { margin-top:0px; }
  .free-to-play .simple2 { background-size: contain; width:100%; font-size:12px; margin-top:22px }
  .free-to-play .jeb     {  margin-right:0px; margin-top:-70px}
  .free-to-play .jeb img { height:140px;}
  .free-to-play .pixi-gif {  }
  .video-border { margin:50px 0 0 0; background-size: contain; width:100%; padding:5%; height:auto; }
  .video-border img { width:100%; }
  .right-border { left: unset; padding-top:unset; }
  .left-border { left:-80px; padding-top:unset; }
  .col-1000 { width:100%; max-width:unset; flex:unset; }
  .ultimate-text { width:100%; text-align:center; }
  .richest-text { width:100%; text-align:center; }
  .welcome { min-height:2200px; height:unset; padding-bottom:80px;}
  .box-text2  { width:100%; text-align: center; }
  .supply-text  { width:100%; text-align: center; }
  .width .gif { width:25%; }
  .width .play { width:75%; }
  .width .dig { width:75%; }
  .width-bottom .gif { width:25%; float:right;}
  .width-bottom .play { width:75%; }
  .width-bottom .dig { width:75%; }
  .width-right .gif { width:25%;  float:left; }
  .width-right .play { width:75%; }
  .width-right .dig { width:75%; }
  .width-bottom-right .gif { width:25%; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; /*IE*/ float:right; }
  .width-bottom-right .play_yellow { width:75%; }
  .width-bottom-right .dig { width:75%; }
  .chart { display:none; }
  .chart-footer { display:none; }
  .icon-1{ display: none; }
  .icon-2{ display: none; }
  .icon-3{ display: none; }
  .icon-4{ display: none; }
  .icon-5{ display: none; }
  .icon-6{ display: none; }
  .icon-7{ display: none; }
  .icon-8{ display: none; }
  .footer-md { background:url(../image/chart-footer.png) top center}
  .box-left { display: none; }
  .box-right { display: none; }
  .box-contents {
    width:100%; height:unset;
    padding:1% 1%;
    background: url(../image/tokenomics-box.png) top left repeat-y, url(../image/tokenomics-box.png) top right repeat-y,  linear-gradient(360deg, rgba(119,102,72,1) 0%, rgba(131,112,77,1) 50%, rgba(131,112,77,1) 100%);
  }
  .box-md-1 { width:38%;background:url(../image/box-hr-mobile.png) bottom right repeat-x; padding-left:2%; border-right:0px;  }
  .box-md-2 { width:10%; margin-bottom:10px; background:url(../image/box-hr-mobile.png) bottom right repeat-x; border-right:0px; }


  .box-md-3 { width:51%; background:url(../image/box-hr-mobile.png) bottom right repeat-x; height:72px }
  .box-md-4 { width:51%;background:url(../image/box-hr-mobile.png) bottom right repeat-x; float:left;  height:72px }
  .box-bottom { background: unset; }

  .box-md-head1 { width:38%; padding-left:20px; }
  .box-md-head2 { width:10%;}
  .box-md-head3 { width:51%; padding-left:20px; }

  .roadmap .ul { width:100%; }
  .character-p1 { display:none; }
  .character-p2 { display:none; }
  .character-p3 { display:none; }
  .character-p4 { display:none; }
  .character-p5 { display:none; }
  .col-33 { width:33%; max-width:33%; flex:0 0 33%;}
  .col-22 { width:100%; max-width:100%; flex:0 0 100%; text-align:center; }
  .col-34 { display:none; }
  .team1 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team2 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team3 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team4 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team5 {float:unset; display: flex; margin:10px auto 5px auto; padding:30px 0 7px 40px; }
  .team6 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }
  .team7 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }
  .team8 {float:unset; display: flex; margin:0 auto; padding:30px 0 7px 40px; }

}


@media (max-width:420px){
  ::-webkit-scrollbar {
      width: unset;
  }
  header { margin:20px 0 50px 0}
  header nav { display:none; }
  header .social { display:none; }
  header .top-logo { width:100%; text-align:center; }
  .left-border { display:none; }
  .right-border { display:none; }
  .logo-big { width:100%; }
  .free-to-play-image { width:100%; }
  .free-to-play .barry  { margin:0 0 140px -30px; }
  .box-text { font-size:20px;}
  .box-text2 { width:100%; text-align: center; margin-bottom:10px }
  .ultimate-text { font-size:20px; margin-top:50px; text-align:center; width:100%; }
  .roadmap-head { font-size:20px; }
  .box-text2 { font-size:20px; }
  .richest-text { font-size:14px;  text-align:center; width:100%; }
  .team1 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .team2 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .team3 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .team4 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .team5 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .team6 { margin:20px auto 10px auto; display: flow-root; float:none; }
  .material-earnings { padding-bottom:50px; }

  .supply-text { display: none; }
  .box-md-head1 { display: none; }
  .box-md-head2 { display: none; }
  .box-md-head3 { display: none; }

  .box-contents {
    width:100%; height:unset;
    padding:1% 8%;
    background: url(../image/tokenomics-box.png) top left repeat-y, url(../image/tokenomics-box.png) top right repeat-y,  linear-gradient(360deg, rgba(119,102,72,1) 0%, rgba(131,112,77,1) 50%, rgba(131,112,77,1) 100%);
  }
  .box-left { display: none; }
  .box-right { display: none; }
  .box-md-1 { width:85%; border-right:0px; padding:15px 0;}
  .box-md-2 { width:15%; border-right:0px; padding:15px 0;}
  .box-md-3 { width:100%; padding-left:0px;  padding:5px 0 20px 0; margin-bottom:10px; padding-top:0px !important; background:url(../image/box-hr-mobile.png) bottom right repeat-x; padding-top:0px;  }
  .box-md-4 { width:100%; padding-top:0px !important; background:url(../image/box-hr-mobile.png) bottom right repeat-x; height:10px; float:left;  }
  .box-marketing { width:100%; padding-top:0px !important; background:unset !important; float:left; padding-bottom:5px !important }

  .free-to-play .simple { background-size: contain; width:100%; font-size:14px; margin-top:60px }
  .free-to-play .drill  { margin-left:20px; margin-top:-70px; width:unset; }
  .free-to-play .jeb-gif  { display: none; }
  .free-to-play .simple2 { background-size: contain; width:100%; font-size:12px; margin-top:22px }
  .free-to-play .jeb     {  margin-right:0px; margin-top:-70px}
  .free-to-play .jeb img { height:140px;}
  .free-to-play .pixi-gif { display:none; }

  .twitter-button{ float:left; text-align: center; width:100%; margin-top:15px; }
  .dc-button { float:left; text-align: center; width:100%; margin-top:15px; }
  .telegram-button { margin-top:15px }

  .video-border { margin:50px 0 0 0; background-size: contain; width:100%; padding:5%; height:auto; }
  .video-border img { width:100%; }
  .playbutton { left:25%; }
  .width {}
  .width .gif { width:25%; }
  .width .play { width:75%; }
  .width .dig { width:75%; }
  .width-right { margin-top:20px; }
  .width-right .gif { width:25%; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; /*IE*/ float:right; }
  .width-right .play { width:75%; }
  .width-right .dig { width:75%; }
  .width-bottom { margin-top:20px; }
  .width-bottom .gif { width:25%; }
  .width-bottom .play { width:75%; }
  .width-bottom .dig { width:75%; }
  .width-bottom-right { margin-top:20px; }
  .width-bottom-right .gif { width:25%; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; /*IE*/ float:right; }
  .width-bottom-right .play_yellow { width:75%; }
  .width-bottom-right .dig { width:75%; }

  .welcome { min-height:2200px; height:unset; padding-bottom:80px;}
  .roadmap-head { margin-top:-20px; }
  .roadmap .ul { width:100%; }
  .character-p1 { display:none;}
  .character-p2 { display:none;}
  .character-p3 { display:none;}
  .character-p4 { display:none;}
  .character-p5 { display:none;}
  .chart-pixi { display:none; }
  .chart-jeb { display:none; }
  #chartdiv {display: none;}
  .footer-md { background:url(../image/chart-footer.png) top center }
  .footer-logo { width:100%; }
  footer { padding-top:60px; }
  footer nav { width:70%; float:left; margin:10px 15% 0 15%;}
  footer nav ul { list-style: none; float:left; list-style-type: none; width:100%; padding-inline-start:0; display: flow-root}
  footer nav ul li { float:left; clear:both; text-align:center; width:100%; text-shadow: 0 0 10px rgba(255,255,255, 0.5); margin:0 0 5px 0; }
}

.splide__slide { text-align:center; }
.splide__slide img{ width:100%; }
.splide__arrow { background:#ba8837 !important;}