/* common start */
html,body,div,p,h1,h2,h3,h4,h5,h6,a,img,ul,li,ol,button,::before,::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
html,body{
  font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: 500;
  line-height: 19.2px;
}
a {
  text-decoration: none;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
ul,li,ol {
  list-style: none;
}
/* common end */
/* icon svg start */
@font-face {
  font-family: 'icons';
  src:  url('../fonts/icons.eot?6gosf6');
  src:  url('../fonts/icons.eot?6gosf6#iefix') format('embedded-opentype'),
    url('../fonts/icons.ttf?6gosf6') format('truetype'),
    url('../fonts/icons.woff?6gosf6') format('woff'),
    url('../fonts/icons.svg?6gosf6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Puzzles:before {content: "\e900";}
.icon-Dice:before {content: "\e901";}
.icon-Arrow_Back:before {content: "\e902";}
.icon-Arrow_Forward:before {content: "\e903";}
.icon-Search:before {content: "\e904";}
.icon-Butterfly:before {content: "\e905";}
.icon-Trophy:before {content: "\e906";}
.icon-Brain:before {content: "\e907";}
.icon-Football_American:before {content: "\e908";}
.icon-Home:before {content: "\e909";}
.icon-PacMan-Ghost:before {content: "\e90a";}
.icon-Sword:before {content: "\e90b";}

.icon-Puzzles:before {color: #E20074;}
.icon-Arrow_Back:before {color: #fff;}
.icon-Arrow_Forward:before {color: #fff;}
.icon-Search:before {color: #fff;}
.icon-Butterfly:before {color: #ED80F3;}
.icon-Trophy:before {color: #1BBCEA;}
.icon-Dice:before {color: #F77D38;}
.icon-Brain:before {color: #8736FD;}
.icon-Football_American:before {color: #4666E2;}
.icon-Home:before {color: #fff;}
.icon-PacMan-Ghost:before {color: #FFC11C;}
.icon-Sword:before {color: #04BD68;}
/* icon svg end */

hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.1);
  /* margin: 24px 15px; */
  margin: 12px 15px;
}

.header {
  height: 40px;
  background: #14B4E4;
  color: #fff;
  position: relative;
}
.header h2 {
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}
.header .home,.header .menu {
  position: absolute;
  width: 60px;
  height: 40px;
  top: 0;
  text-align: center;
}
.header .home {
  padding-top: 10px;
}
.header .home i::before {
  font-size: 20px;
}
.header .menu {
  right: 0;
}
.header .menu::before,.header .menu::after {
  content: '';
}
.header .menu i {
  display: block;
}
.header .menu i,.header .menu::before,.header .menu::after {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  background-color: rgba(255,255,255,.5)!important;
  top: 19px;
  left: 20px;
}
.header .menu::before {
  transform: translateY(-6px);
  -webkit-transform: translateY(-6px);
}
.header .menu::after {
  transform: translateY(6px);
  -webkit-transform: translateY(6px);
}

html a.mask {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.6)!important;
  z-index: 13;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
}
html a.mask.show {
  visibility: visible;
  opacity: 1;
}
.menu-panel {
  position: fixed;
  width: 60%;
  top:0;
  bottom:0;
  left:0;
  background: #fff;
  z-index: 9999;
  will-change: transform;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transform: translateX(-101%);
  -webkit-transform: translateX(-101%);
  overflow: auto;
}
.menu-panel.show {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.menu-panel hr {
  margin: 20px 15px;
}
.menu-panel h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 15px 0;
}
.menu-panel ul li a {
  display: block;
  padding: 10px 10px 10px 30px;
  color: #333;
}
.menu-panel ul li a i {
  margin-right: 10px;
}

/* privacy */
.privacy {
  height: 50px;
  margin-bottom: 10px;
}
.privacy a {
  display: block;
  width: 50%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #333;
  font-size: 14px;
}
.privacy a:first-child {
  float: left;
}
.privacy a:last-child {
  float: right;
}

.loading {
  display: block;
  /* background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2)); */
  background: -webkit-gradient(linear,left top,right top,color-stop(25%,rgba(242,242,242,.5)),color-stop(37%,rgba(230,230,230,.5)),color-stop(63%,rgba(242,242,242,.5)));
  background: linear-gradient(90deg,rgba(230,230,230,.5) 25%,rgba(230,230,230,.5) 37%,rgba(230,230,230,.5) 63%);
  background-size: 400% 100%;
  -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
  animation: ant-skeleton-loading 1.4s ease infinite
}
.all-games .game-item .icon.loading {  
  border-radius: 6px 6px 0 0;
  padding-top: 80%;
}
.all-games .game-item .content .title.loading {
  width: 80%;
  height: 13px;
  margin: 5px 0;
}
.all-games .game-item .content .cate.loading {
  width: 20%;
  height: 10px;
  margin-top: 10px;
}
@-webkit-keyframes ant-skeleton-loading {
  0% {
    background-position:100% 50%
  }
  100% {
    background-position:0 50%
  }
}
@keyframes ant-skeleton-loading { 
  0% { 
    background-position:100% 50%
  }
  100% { 
    background-position:0 50%
  }
}