/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
 p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

a {
  color: blue;
  text-decoration: none; /* no underline */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: url(/img/46ad215.png) 50%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	max-width : 99%;
}
body { padding: 0rem; }
.block {
	background-color: dodgerblue;
	color: white;
	padding: 1rem;
}
.blocks {
	max-width: 99%;
	margin: 0 auto;
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 600px) {
  .blocks { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 1000px) {
  .blocks { grid-template-columns: repeat(3, 1fr); }
}
.case {
	width:93px;
	height:120px;
}
.parent {
   position: relative;
}
img.superpose {
   position: absolute;
   top:0;
}
.img_1 {
   z-index: 10;
}
.img_2 {
   z-index: 11;
}

.rare0 {
	color : #000000;
}
.rare1 {
	color : #FFD700;
	font-weight: bold;
}
.rare2 {
	color : #FFC0CB;
	font-weight: bold;
}

b {
	font-weight: bold;
}
i {
	font-style: italic;
}
a {
	text-decoration: none;
}
td {
	border : solid 3px;
}


/* checkbox aspect */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  content: '';
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */

[type="checkbox"]:not(:checked) ,
[type="checkbox"]:checked {
  content: '\2713\0020';
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */

[type="checkbox"]:checked{
  opacity: 1;
  transform: scale(1);
}

/* accessibility */
[type="checkbox"]:checked:focus,
[type="checkbox"]:not(:checked):focus {
  border: 2px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}
body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: .25em;
  font-weight: normal;
}
h2 {
  /*margin: .25em 0 2em;*/
  color: #aaa;
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline a {
	margin: 3px 10px 3px 0;
} 
/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}

.form-inline button:hover {
  background-color: royalblue;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
 #page-nav #nav-menu a {
  padding-top: 25px;;
 }
}


#menu {
	background-color: #e60012;
	position: relative;
	width: 100%;
	height: 60px;
	box-shadow: 1px 1px 7px 1px rgba(0,0,0,.3);
	color: #fff;
	font-size: 3.73333vw;
	font-weight: 400;
	font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
	line-height: 1.4;
	font-size: 100%;
}

button {
    border: unset;
    padding: unset;
    font: unset;
        font-weight: unset;
    margin: unset;
    display: unset;
    background-color: unset;
}

#access-btns {
    display: block;
    opacity: 1;
    z-index: 9999;
    position: relative;
    width: 100%;
    text-align: center;
}

#page-nav {
 position:absolute;
 display:block;
 top:0;
 width:100%;
 z-index:60;
 text-align:center;
 background-color:#000;
 /*transform:translateY(95px)*/
}
#page-nav:after {
 display:block;
 height:4px;
 background:linear-gradient(to right,#ca179b,#4d22d6)
}
#page-nav.pinned {
 position:fixed;
 top:0;
 transform:translateY(0);
 transition:top .2s linear
}
#page-nav.pinned.going-down {
 top:-49px
}
#page-nav ul {
 padding-inline-start:0;
 list-style-type:none;
 margin-block-start:0;
 margin-block-end:0
}
#page-nav li {
 display:inline-block
}
#page-nav #bg,
#page-nav #menu-btn {
 display:none
}
#page-nav .nav-item {
 position:relative;
 height:100%;
 margin:0 -.06em;
 display:inline-block;
 cursor:pointer;
 font-weight:900
}
#page-nav .nav-item span {
 position:relative;
 display:block;
 font-size:1.5em;
 padding:4px 12px 0;
 text-shadow:1px 1px 1px rgba(0,0,0,.8);
 color:#fff;
 text-transform:uppercase;
 font-style:italic;
 pointer-events:none
}

#page-nav .nav-item:before {
 display:block;
 position:absolute;
 top:0;
 left:0;
 height:100%;
 transform:skewX(-10deg);
 background-color:transparent;
 transition:background-color .2s linear;
 border:1px solid #696969;
 border-width:2px 2px 0
}
#page-nav .nav-item:hover::before {
 background:linear-gradient(to top,#f969a2 0,#ff0a64 20%,#ff0a64 49%,#f969a2 50%,#ff0a64)
}
#hero .play-btn:after,
#page-nav #nav-buy span:before {
 background-repeat:no-repeat;
 content:""
}
#page-nav #nav-buy span:before {
 display:block;
 float:left;
 width:22px;
 height:22px;
 margin-top:-2px;
 vertical-align:middle;
 background-image:url(../img/items/coin.png);
 background-size:100% auto
}



@media screen and (max-width:1024px) {
 .max-w-content {
  padding:0 32px
 }
 .check-header .text {
  font-size:3.2vw
 }
 .check-header::after {
  bottom:5px
 }
 #page-nav {
  height:65px
 }
 #page-nav:after {
  display:none
 }
 #page-nav.pinned.going-down {
  top:-16px
 }
 #page-nav.pinned.going-down #access-btns,
 #page-nav.pinned.going-down .glow {
  opacity:0
 }
 #page-nav #menu-btn {
  position:relative;
  display:block;
  z-index:2;
  width:100%;
  margin:0 auto;
  height:100%;
  padding-left:16px;
  padding-top:5px;
  text-align:left;
  color:#fff;
  text-transform:uppercase
 }
 #page-nav #menu-btn img {
  float:left;
  display:block;
  margin-top:10px;
  width:30px
 }
 #page-nav #menu-btn .label {
  float:left;
  display:block;
  margin-left:10px;
  margin-top:11px;
  font-size:1.6em
 }
 #page-nav li {
  display:block
 }
 #page-nav .close-btn {
  z-index:3;
  display:none;
  position:absolute;
  top:24px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:50%;
  background-color:#ff0061;
  cursor:pointer;
  -ms-transform:scale(0);
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  transform:scale(0);
  -ms-transition:transform .2s;
  -moz-transition:transform .2s;
  -webkit-transition:transform .2s;
  transition:transform .2s
 }
 #page-nav .close-btn:after,
 #page-nav .close-btn:before {
  content:" ";
  display:block;
  top:0;
  width:15px;
  margin-top:14px;
  margin-left:7px;
  position:absolute;
  pointer-events:none
 }
 #page-nav .close-btn.vis {
  display:block;
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  transform:scale(1)
 }
 #page-nav .close-btn:hover {
  -ms-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  transform:scale(1.1)
 }
 #page-nav .close-btn:after {
  border:solid #fff;
  border-width:2px 0 0;
  -ms-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg)
 }
 #page-nav .close-btn:before {
  border:solid #fff;
  border-width:2px 0 0;
  -ms-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg)
 }
 #page-nav #nav-menu {
  display:none;
  position:absolute;
  z-index:0;
  top:-176px;
  width:100%;
  background-color:#000;
  transition:all .5s ease-in-out
 }
 #page-nav #nav-menu:after {
  content:"";
  display:block;
  position:relative;
  clear:both;
  width:100%;
  height:2px;
  background:linear-gradient(to right,#ca179b,#4d22d6)
 }
 #page-nav #nav-menu.expanded {
  display:block;
  top:63px
 }
 #page-nav #nav-menu #bg {
  position:fixed;
  top:0;
  left:0;
  z-index:0;
  height:100%;
  width:100%;
  opacity:0;
  background-color:rgba(0,0,0,.6);
  transition:opacity .6s linear
 }
 #page-nav #nav-menu.expanded #bg {
  display:block;
  opacity:1
 }
 #page-nav #nav-menu button {
  pointer-events:none
 }
 #page-nav #nav-menu a {
  padding-top: 25px;;
 }
 #page-nav #nav-menu.expanded button {
  pointer-events:all
 }
 #page-nav .nav-item {
  width:calc(50% - 20px);
  height:80px;
  padding:0
 }
 #page-nav .nav-item:nth-child(odd) {
  float:left;
  margin-left:10px
 }
 #page-nav .nav-item:nth-child(even) {
  float:right;
  margin-right:10px
 }
 #page-nav .nav-item:nth-child(4),
 #page-nav .nav-item:nth-child(5) {
  border:1px solid #232323;
  border-width:1px 0
 }
 #page-nav .nav-item:before {
  display:none
 }
 #page-nav .nav-item:after {
  content:"";
  display:block;
  position:absolute;
  top:36px;
  right:0;
  width:6px;
  height:6px;
  border:2px solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(-45deg)
 }
 #page-nav .nav-item span:before {
  content:"";
  display:block;
  float:left;
  width:50px;
  height:100%;
  margin-top:-13px;
  vertical-align:middle;
  background-size:100% auto;
  background-repeat:no-repeat
 }
 #page-nav #nav-drivers span:before {
  background-image:url(../img/global/nav-icon-drivers.png)
 }
 #page-nav #nav-courses span:before {
  background-image:url(../img/global/nav-icon-courses.png)
 }
 #page-nav #nav-items span:before {
  background-image:url(../img/global/nav-icon-items.png)
 }
 #page-nav #nav-battle span:before {
  background-image:url(../img/global/nav-icon-battles.png)
 }
 #page-nav #nav-switch span:before {
  background-image:url(../img/global/nav-icon-switch.png)
 }

 #access-btns {
  position:absolute;
  margin-bottom:0
 }
 #access-btns button {
  padding:3px 19px 7px
 }
 #page-nav .glow {
  top:-50px;
  height:120px;
  width:300px;
  background:radial-gradient(rgba(139,22,143,1) 0,rgba(139,22,143,0) 70%);
  z-index:4
 }
}

@media screen and (max-width:600px) {
.blocks { grid-template-columns: repeat(1, 1fr); }
 #page-nav #nav-buy span:before,
 #page-nav .nav-item span:before {
  width:30px;
  margin-top:-7px
 }
 #page-nav .nav-item span {
  font-size:1.2em;
  padding:9px 2px 0 0
 }
 #page-nav #nav-menu a {
  padding-top: 25px;;
 }
}