/*start*/

.pokelist {
	font-size:0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.pokebox {
	width: 125px;
	padding:5px;
  text-align: center;
  box-sizing: border-box;
}

.imgbox {
  display: inline-block;
}

.imgbox img {
	height:auto;
  width: 50%;
}

.pokebox .pokename {
	text-align: center;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 12px;
}

.pokename .pokeid {
	color: #939393;
    font-size: 12px;
    padding-right: 3px;
}





@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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;
}

body {
  font-size: 17px;
  color:#fff;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', Meiryo UI,Meiryo, 'Times New Roman', serif;
  line-height: initial;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html{
    overflow-y: scroll;
    margin:0 !important;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: #2B3E50;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

input, textarea {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', Meiryo UI,Meiryo, 'Times New Roman', serif;
}

ol, ul{
  list-style:none;
}

table{
  border-collapse: collapse;
  border-spacing:0;
}

caption, th{
  text-align: left;
}

a:focus {
  outline:none;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
a {
  text-decoration:none;
  color:#0e6bce;
}

a:hover {
    color:#a77777;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

strong {
  font-weight:bold;
}

em {
  font-style: italic;
}

.both{
  clear:both;
}

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

table {
  width:100%;
}

.single .wrcontent p {
  margin-bottom: 20px;
}
.single .wrcontent img {
  max-width: 100%;
  height: auto;
}
.single .wrcontent h2 {
  color: #ffffff;
  line-height: 30px;
  background: #DF691A;
  padding: 15px 10px;
  border-radius: 2px;
  position: relative;
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.single .wrcontent h3 {
  display: inline-block;
  margin: 10px 0;
  font-size: 22px;
  color: #f4822c;
  font-weight: bold;
  border: solid 3px;
  padding: 10px 20px;
}
.single .wrcontent h4 {
  border-left: solid 5px;
  padding: 0 10px 5px 10px;
  color: #f0ad4e;
  margin: 20px 0;
  font-size: 20px;
  border-bottom: solid 4px;
  display: inline-block;
}

.single .wrcontent h5 {
  font-size: 18px;
  color: #df691a;
}
.single .wrcontent h6 {
  font-size: inherit;
}

.single .wrcontent blockquote {
  display: block;
  padding: 10px 30px;
  background: #f0ad4e;
  position:relative;
  display:block;
  margin: 10px 0;
  border-radius: 10px;
}
.single .wrcontent blockquote:before {
  content: url(../images/svg/quotes.svg);
  position: absolute;
  left: -15px;
  top: 5px;
  background: #2B3E50;
  padding: 5px;
  line-height: 0;
  border-radius: 20px;
}
.single .wrcontent blockquote * {
  display:inline;
}

.single .wrcontent blockquote:after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 10px solid #f0ad4e;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  right: 10%;
}

.single .wrcontent .tcontents {
  display: inline-block;
  border: solid 1px #ccc;
  padding: 10px;
  background: #ffc4ae;
  width: 300px;
  color: #e17b55;
  box-sizing: border-box;
  vertical-align: middle;
}
.single .wrcontent .tcontents li a{
  color: #af2f00;
}
.single .wrcontent .tcontents li a:visited, .single .wrcontent .tcontents li a:active  {
  color:#023d17;
}
.single .wrcontent .tcontents li a:hover {
  text-decoration:underline;
}
.single .wrcontent .tcontents .title {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  display: block;
  color: #000;
}
.single .wrcontent .tcontents .title span {
  position:absolute;
  font-size:11px;
  color:blue;
  cursor:pointer;
  padding-left:5px;
}
.single .wrcontent .tcontents .title span:after {
  content:"]";
  color:#000;
}
.single .wrcontent .tcontents .title span:before {
  content:"[";
  color:#000;
}
.single .wrcontent .tcontents ul ul, .single .wrcontent .tcontents ol ol {
  padding-left:20px;
}
.single .wrcontent ol {
  counter-reset: number;
}
.single .wrcontent ol li, .single .wrcontent ul li {
  line-height: 2;
  margin-bottom: 0.4em;
  padding-left: 20px;
  position: relative;
}
.single .wrcontent ol li:before {
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  text-align: center;
  font-family: 'Staatliches', serif;
  background-image: linear-gradient(to right,#dc9c64,#e17b55);
  border-radius: 20px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 21px;
  color: #fff;
  margin-right: 5px;
}
.single .wrcontent ol>li>ol  {
  counter-reset: subnumber;
  list-style: none;
}
.single .wrcontent ol>li>ol li:before {
  counter-increment: subnumber;
  content: counter(number)"."counter(subnumber);
  background-image: linear-gradient(to right,#fbc394,#ee9f83);
}
.single .wrcontent ul li:before {
  content: "";
  display: inline-block;
  text-align: center;
  background-image: linear-gradient(to right,#dc9c64,#e17b55);
  border-radius: 20px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 14px;
}
.single .wrcontent ul, .single .wrcontent ol {
  padding-left: 16px;
}
.flexit {
  display: flex;
}

img.aligncenter {
  display: block;
  margin: 10px auto;
}
.alignleft {
  float: left;
  padding: 0 20px 10px 0;
}
.alignright {
  float: right;
  padding: 0 0 10px 20px;
}

.single .wrcontent p {
  word-break: break-word;
}

main .box {
  margin-top:30px;
}

.champlist {
  font-size:0;
}
.champlist.grid {
  display: flex;
  flex-wrap: wrap;
}
.champlist.list {
  display: block;
}

.champbox {
  position: relative;
}
.grid .champbox {
  width: calc(100%/5);
}
.list .champbox {
  width: unset;
  display: flex;
  margin: 40px 0;
  justify-content: space-between;
  height: 40px;
  background: #4E5D6C;
  border-radius: 2px;
  color: #fff;
}

.champbox a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.grid .imgbox {
  width:94%;
  margin: auto;
}
.list .imgbox {
  margin: 0;
  border-radius: 7px;
  width: 65px;
  height: 65px;
  margin: -15px 0;
  border: solid #4e5d6c 3px;
}

.imgbox img {
  width:100%;
  transition:0.2s linear;
}

.list .imgbox img {
  border-radius: 7px;
  width: 100%;
  height: auto;
}

.list .forgrid, .grid .forlist {
  display: none;
}.grid .forgrid, .list .forlist {
  display: block;
}

.grid .list_info {
  display: none;
}

.list_info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 83%;
}

.list_info>* {
  width: calc(100%/4);
  text-align: center;
  font-size: 14px;
}

.list_info .cname {
  text-align: left;
  font-weight: normal;
}

.champbox:hover .imgbox img {
  transform: scale(1.1);
}

.mt {
  margin-top: 30px;
}
.mb {
  margin-bottom: 30px;
}

.Commonrarity {
  color: #339966;
  font-weight: bold;
}.Rarerarity {
  color: #0088ff;
  font-weight: bold;
}.Epicrarity {
  color: #c72ac7;
  font-weight: bold;
}.Championrarity {
  color: #ff6600;
  font-weight: bold;
}

#switch_disp {
  line-height: 0;
  width: 24px;
  margin-left: auto;
  cursor: pointer;
  padding: 5px;
  transition: 0.2s;
}

#switch_disp.pressed {
  background: #e17b56;
}#switch_disp.pressed  svg  {
  fill: #fff;
}

.overname {
    text-align: center;
    font-size: 13px;
    line-height: 14px;
    word-break: break-word;
    padding: 5px 0;
}

.header_block {
  background-color:#192836;
  padding: 20px;
  box-sizing: border-box;
  position:relative;
  z-index: 2;
}
.header_block .banner {
    display:inline;
}
.header_block .menu {
  position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}.banner h1 {
    display:inline;
    color:#fff;
  font-size:25px;
    font-weight: bold;
}
.banner a:hover h1 {
  color:#e9e9e9;
  text-shadow: 1px 1px 5px #868686;
}

.relatedcards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: auto;
}

.cardhead .relatedcards .cardimg {
  width: 100px;
  margin: 5px;
}

section {
  margin-bottom:30px;
  display:block;
}
.blockhead {
  position:relative;
  font-size:21px;
  font-weight:bold;
  margin-bottom:20px;
}
.blockhead:after {
  width:100%;
  background-color:#ccc;
  height:1px;
  content:"";
  position:absolute;
  bottom:-5px;
  left:0;
}
/*tips*/

.tipsec {
  margin-top: 30px;
}
.box{
  padding:30px;
  box-sizing:border-box;
  border-radius: 10px;
}
.formtohide {
  display:none;
}
.writetip {
  cursor: pointer;
  border: 0;
  background-color: #f0ad4e;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 2px;
  transition: 0.3s;
}

.comment-list {
  background-color: rgba(255, 255, 255, 0.075);
  padding: 20px;
  border-radius: 2px;
}
.comment-list li {
  background-color: #4E5D6C;
  padding: 10px;
  margin: 5px 0;
  border-radius: 2px;
  color: #EBEBEB;
  display: flex;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}
.comment-list li p {
  word-break:break-all;
  display:inline-block;
  max-width: 90%;
    vertical-align: middle;
}
.tipinfo {
  text-align:right;
}
.tipinfo span *, .tipinfo span{
  font-size:11px;
  color:#abb6c2;
}

.tipinfo .comment-author {
  color: #d87500;
  font-size:15px;
}

.comment-body .reportmark {
  position: absolute;
    top: 0;
  right: 0;
  cursor:pointer;
  padding: 0  0 5px 5px;
}
.comment-body .reportmark:after {
    content: '\2026';
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 10px;
    color: #6c8483;
}
.comment-body .reportmark.opened:after {
    content: 'ー';
}
.reportmark .dropreport {
  display: none;
  position: absolute;
  background: #2b3e50;
  top: 100%;
  right: 0;
  min-width:100px;
}
.reportmark .dropreport .cells {
  font-size:12px;
  padding:5px;
  line-height:12px;
}
.reportmark .dropreport .cells:hover {
  background-color:#ab4e4e;
}
/*champion profile*/
.cardhead {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 50px;
  position: relative;
}

.cardhead:before {
  background: rgba(20, 19, 28, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
}

.cardhead .cardimg {
  max-width: 250px;
  width: 100%;
}

.cardhead .cardname {
  font-size:25px;
  font-weight:bold;
  padding:10px;
  color: #fff;
}
.champcont {
  margin:0 auto;
  text-align:center;
  z-index: 1;
  position: relative;
}
.cardhead .type span {
  padding: 2px 10px;
  display:inline-block;
  color: #fff;
  font-size: 13px;
  margin: 5px;
  border-radius: 10rem;
}
.cardhead .type span.Mage {
  background-color:rgba(14, 107, 206, 0.4);
  border:solid 1px #0e6bce;
}.cardhead .type span.Support {
  background-color:rgba(103, 218, 212, 0.4);
  border:solid 1px #67dad4;
}.cardhead .type span.Fighter {
  background-color:rgba(226, 139, 57, 0.4);
  border:solid 1px #e28b39;
}.cardhead .type span.Assassin {
  background-color:rgba(255, 0, 0, 0.4);
  border:solid 1px #ff0000;
}.cardhead .type span.Tank {
  background-color:rgba(68, 206, 14, 0.4);
  border:solid 1px #44ce0e;
}.cardhead .type span.Marksman {
  background-color:rgba(223, 211, 52,0.4);
  border:solid 1px #dfd334;
}
.cardhead .type span.typeof {
  background-color: #0e6bce;
  border: 0;
}



.combox form {
  width:500px;
  margin:10px auto;
}
.comment-form-comment textarea {
  max-width:500px;
  max-height:200px;
  min-width:500px;
  min-height:100px;
  border: none;
  border-radius: 2px;
  margin: 0px;
  height: 100px;
  width: 525px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 17px;

}

.comment-form-comment textarea:focus, .comment-form input[type="text"]:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(223, 105, 26, 0.25);
  box-shadow: 0 0 0 0.2rem rgba(223, 105, 26, 0.25);
}

.combox .form-submit {
  text-align:right;
}
.comment-form .submit {
  cursor: pointer;
  font-style: italic;
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  transition:0.3s;
  border: 0;
  background: #31b0d5;
  border-radius: 2px;
}
.comment-form .submit:hover {
  background-color: #3bb4d8;

}
.upvote {
  background-image:url(../images/svg/up.svg);

}.downvote {
  background-image:url(../images/svg/down.svg);
}
.voting {
    display: inline-block;
    width: 8%;
    height: 100%;
  padding: 5px 8px;
    box-sizing: border-box;
    text-align: right;
    vertical-align: middle;
}
.voting span {
  width: 15px;
  height: 15px;
  margin: 3px 0;
  margin-left:auto;
  background-size:cover;
  background-position:center;
  display: block;
  cursor:pointer;
}

.comment-body {
  display:inline-block;
  width:92%;
  vertical-align: middle;
  padding-left: 10px;
  box-sizing: border-box;
  position:relative;
}
.comment-body .reportmark {
  position: absolute;
    top: 0;
    right: 0;
}
.comment-body .reportmark:after {
    content: '\2026';
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 10px;
    color: #6c8483;
}
.votecount {
  float: left;
  padding: 6px 0;
  width: 30px;
  text-align: center;
}
input[type=text] {
  border: none;
  border-radius: 2px;
  padding: 5px 10px;
  font-size: 15px;
}
.comment-form  label {
  padding-right: 10px;
  font-size: 15px;
}
.checkcontain {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
}
.checkcontain input[type='checkbox']{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkcontain:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkcontain input:checked ~ .checkmark {
  background-color: #70ADA1;
}
.checkmark {
  position:relative;
  top:0;
  left:0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius:3px;
  display:inline-block;
  border:solid 1px #ccc;
  margin-right: 10px;
}
.checkmark:after {
  content: "";
  position: absolute;
  opacity:0;
}
.checkcontain input[type='checkbox']:checked ~ .checkmark:after  {
  opacity:1;
}

.checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.comment-form-cookies-consent {
  margin: 10px 0;
}

.pagination{
  text-align:center;
}
.pagination .page-numbers {
  background: #375f77;
    padding: 4px 5px;
    border-radius: 50%;
    font-size: 13px;
    display: inline-block;
    line-height: 13px;
  color: #fff;
}
.pagination .page-numbers.current {
  background: #efefef;
    color: #375f77;
  box-shadow: inset 0 0 5px #424242;
  cursor:default;
}
.pagination .prev,.pagination .next {
  background: none;
}
.seemore {
  text-align: right;
}
.seemore a {
  padding: 5px 10px;
    display: inline-block;
    font-size: 15px;
    margin-top: 10px;
    border-radius: 5px;
    border: solid 1px #f7941e;
    background-color: #d87500;
  color: #fff;
  transition:0.3s;
}
.seemore a:hover {
  transform:translateX(10px);
}


/*footer*/
.foot {
  background-color: #0d141c;
  padding: 10px 0;
}
.copyright {
  float: right;
    font-size: 12px;
    color: #fff;
}
.foot-cp {
    text-align: center;
    font-size: 11px;
    color: #afafaf;
    padding-top: 30px;
}
.footlinks {
  display: inline-block;
    width: 50%;
}.footlinks li {
    display: inline;
    font-size: 12px;
    padding: 0 10px;
}
.footlinks li a {
    font-size: 12px;
    color: #fff;
}
.goup {
    display: inline-block;
    position: fixed;
    z-index: 100;
    right: 200px;
    bottom: 60px;
    background: rgba(197, 131, 53, 0.7);
    padding: 5px;
    border-radius: 20px;
  cursor: pointer;
  line-height: 0;
}
.goup svg {
  vertical-align: middle;
}

.stitle h1 {
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 90%;
  max-width: 500px;
  background: rgba(25, 40, 54, 0.5);
  border-radius: 2px;
}
.stitle {
  /* background-image: linear-gradient(to bottom right, #99b3d2, #08305e); */
  background-image: linear-gradient(to bottom right, #ffedd6, #f7941e);
  padding:60px 0;
  text-align: center;
  margin: 0;
  position: relative;
}

.stitle:before {
  position: absolute;
  background: rgba(0,0,0,0.4);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
}

.searchtop input[type="text"] {
  display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
hr.aftersearch {
  border-top: 1px solid #cacaca;
    margin-top: 20px;
    margin-bottom: 10px;
}

.searchtop  {
  position:relative;
}
.clearsearch:after {
  content:"\2716";
  font-size: 20px;
  color: #969696;
}
.clearsearch:hover:after {
  opacity:0.5;
}
.clearsearch {
    top: 50%;
    right: 10px;
  transform: translateY(-50%);
  position:absolute;
  display:none;
}

.gobacktopage a:before {
  content:url(../images/svg/back.svg);
  height: 24px;
    display: inline-block;
    vertical-align: top;
    padding-right: 5px;
}
.gobacktopage {
  padding: 10px 0;
}
.gobacktopage a {
  color: #7b8d9d;
  display:inline-block;
  transition:0.3s;
}
.gobacktopage a:hover {
  transform: translateX(-10px);
}
.gobacktopage:before a:hover {
  transform: translateX(-10px);
}

/* SKILLS */
.sbox {
  padding: 10px;
  border-radius: 2px;
  background: #abb6c2;
  margin-bottom: 10px;
  color: #0d141c;
}

.sname {
  font-weight: bold;
}

.comment-form-gcaptcha {
  text-align:center;
}.g-recaptcha {
  display:inline-block;
}

.menu .mainmenu {
  font-size: 60px;

}
.menu .mainmenu .cells {
  vertical-align: middle;
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 7px;
    background: #e2a863;
  font-size: 13px;
  display: inline-block;
}
.menu .mainmenu .cells a  {
  color: #fff;
    font-size: 15px;
}
.sitedesc {
    padding: 4px 0;
    background-color: #0d141c;
    margin: 0 !important;
}

.sitedesc * {
  font-size: 13px;
  font-weight: normal;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* TFT TEAMFIGHT TACTICS*/
.classblock h3 {
  font-size: 18px;
    color: #4b4242;
    margin-bottom: 10px;
}

.classblock h3 .oricon {
  vertical-align: middle;
    width: 30px;
    background: rgba(216, 130, 28, 0.7);
    border-radius: 50%;
    padding: 3px;
    margin-right: 10px;
}
.classblock{
  margin:20px 0;
}

.classblock .desc, .classblock .effect {
  padding: 0 20px;
  box-sizing:border-box;
}
.classblock .effect * {
  font-size: 15px;
    color: #646464;
}

.classblock .effect p span {
  color: #000;
    font-weight: bold;
    padding-right: 10px;
    font-size: 17px;
}

.tft .champbox {
    margin: 7px;
    width: 297px;
    background: #ccc;
    height: unset;
    padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}
.champbox.cost1 {background: #ccc;}
.champbox.cost2 {background: #6c9483;}
.champbox.cost3 {background: #5e6e8b;}
.champbox.cost4 {background: #ab8fae;}
.champbox.cost5 {background: #b0a076;}

.tft .imgbox {
  width: 83.5px;
  display:inline-block;
  position:relative;
}

.rightonchm {
  display: inline-block;
    font-size: 0;
    vertical-align: top;
    width: 185px;
    text-align: center;
}
.rightonchm .recitems {
  font-size: 0;
}
.rightonchm .recitems li {
  display: inline-block;
  margin: 0 7px;
  position:relative;
  line-height: 0;
}
.rightonchm .cname {
  font-size: 13px;
    line-height: 13px;
    margin-bottom: 7px;
  font-weight: bold;
  background: rgba(53, 53, 53, 0.3);
    color: #fff;
}
.tft .champbox .itemimg {
    width: 35px;
    height: 35px;
  background-color:#000;
  margin: 0 3px;
  border-radius: 5px;
}
.champbox .orcl .oricon {
  width:17px;
    vertical-align: middle;
  margin-right: 3px;
}
.champbox .orcl p {
    font-size: 11px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.4);
    margin-right: 5px;
    color: #c3c3c3;
    border-radius: 3px;
    display: inline-block;
}
.tft .champbox .cost {
  position:absolute;
  top:0;
  left:0;
  background-color:#000;
  color:#fff;
  padding:5px 7px;
  font-size:13px;
  line-height:13px;
  border-radius: 5px;
}

.sortbtns .sortbutton {
  background-color: #4E5D6C;
  padding: 5px 7px;
  display: flex;
  line-height: 15px;
  font-size: 13px;
  cursor: pointer;
  margin: 0 7px 7px 0;
  color: #fff;
  opacity: 0.65;
  align-items: center;
  border-radius: 2px;
}
.sortbtns .sortbutton:hover {
  opacity: 1;
}
.sortbtns .sortbutton.active {
  opacity: 1;
  background-color: #DF691A;
}
.sortbtns {
  margin: 15px 0;
}

.sortbtns .sortbutton.withicon {
  padding-right: 14px;
}

.originbtns, .classbtns {
  margin: 5px 0;
}
.showsort{
  display:none;
}
.itemblock {
  position:relative;
  display:inline-block;
  line-height: 0;
}
.itembox.active .itemimg img {
  border: solid 4px;
  box-sizing:border-box;
  box-shadow: 0 0 35px #ff3500;

}

.itemimg{
  position:relative;
}
 .iteminfo {
    position: absolute;
    display: none;
    min-width:120px;
    /* height: 100px; */
    background-color: #000;
    color: #fff;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
  padding: 10px;
  z-index:1;
  border-radius:7px;
}
.iteminfo * {
  line-height: 17px;
    font-size: 15px;
    color: #bbb;
}
.iteminfo h4 {
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  line-height: 20px;
}

.itemblock:hover .iteminfo,.itemimg:hover .iteminfo {
  display:block;
}
.subimg {
  width: 100%;
  border-radius: 4px;
}
.subitems .itemblock {
  width: 45%;
    padding: 0 3px;
    box-sizing: border-box;
}
.subitems {
    position: absolute;
    display: block;
    width: 119%;
    text-align: center;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
  padding: 2px 0;
  z-index:1;
}

.leftbhead {
  border-left: solid 3px #0d141c;
  padding: 2px 0;
  margin: 5px 0;
  padding-left: 10px;
  background-color: #4E5D6C;
  color: #ffffff;
  font-weight: normal;
  font-size: 17px;
}

.line_head {
  padding: 2px 0;
  margin: 5px 0;
  position: relative;
}

.line_head:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  background: rgba(255, 255, 255, 0.31);
  z-index: -1;
}

.line_head span {
  background-color: #2b3e50;
  padding-right: 15px;
}

.itemlist {
  font-size:0;
  text-align: center;
}
.itemlist .itembox {
  display:inline-block;
    margin: 7px;
    position: relative;
  width: 70px;
}
.basicitemlist .itembox {
  cursor:pointer;
}
.basicitemlist .itembox:hover {
  opacity:0.7;
}
.itemlist .itembox .itemimg {
  width: 100%;
    height: auto;
  margin: 0 auto;
  line-height: 0;
}
.itemimg img {
  width:100%;
  border-radius: 7px;
}
.itemlist .itembox .subitems {
  position:static;
  transform:none;
  width:100%;
  margin-top: 5px;
}
.basicitemlist {
  border-bottom:1px #ccc solid;
  border-bottom: 1px #ffdab8 solid;
    line-height: 0;
    padding: 10px 0;
    margin-bottom: 10px;
}

.mcell {
  display: inline-block;
    margin: 3px;
    padding: 5px;
    background: #ffe9d0;
    border-radius: 5px;
    border: solid 1px #d47300;
    color: #935307;
    font-size: 15px;
}

.othernav {
  text-align:center;
}

.mcell.current {
  background-color:#dcb07c;
  color:#fff;
}

/* ^^^^^^TFT TEAMFIGHT TACTICS^^^^^^*/


.sbtn {
  border: solid 1px;
  padding: 5px;
  display: block;
  cursor: pointer;
}

.sbtn.active {
  background:#ccc;
}

.divsrt ul {
  display: flex;
  flex-wrap: wrap;
}

#langinput {
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  position: relative;
  padding-left: 25px;
  width: 100px;
  display: inline-block;
  box-sizing: border-box;
}

#langinput:before {
  background-image: url(../images/svg/lang.svg?1);
  content: "";
  position: absolute;
  background-size: 100%;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.langdiv {
  position: relative;
  cursor: pointer;
  text-align: center;
}

.lang {
  position: absolute;
  width: 100%;
  background: #192836;
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
  top: 140%;
  left: 0;
  box-shadow: 0 3px 3px #192836;
  display: none;
  z-index: 99;
}
.lang li a {
  width: 100%;
  display: block;
  color: #fff;
  padding: 5px 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.out-contain, .container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.out-contain {
  display: flex;
}

.out-contain main {
  width: 70%;
  order: 2;
}

.out-contain #left_side {
  width: 30%;
  order: 1;
  padding-right: 20px;
}

.out-contain #right_side {
  width: 30%;
  order: 3;
  padding-left: 20px;
}

aside {
  margin-top: 30px;
  box-sizing: border-box;
  padding-top: 30px;
}

aside section {
  margin-bottom: 20px;
}

aside .box {
  padding: 15px;
  border-radius: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.widget-title {
  color: #fff;
  padding: 2px 10px;
  box-sizing: border-box;
  font-size: 20px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.075);
  margin-bottom: 5px;
  border-radius: 2px;
}

.widget a {
  color: #DF691A;
}

aside .menu li a {
  display: block;
  padding: 2px 10px;
}

aside .menu li a:hover {
  background: rgba(0, 0, 0, 0.12);
}

.archive_list {
  display: flex;
  flex-wrap: wrap;
}

.archive_list .a-item {
  display: block;
  width: 33%;
}

.nbox {
  background: #ccc;
  border-radius:10px;
  padding: 10px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin: 5px;
}
.nbox:before {
  position: absolute;
  background: rgba(0,0,0,0.4);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
  border-radius: 10px
}
.nbox_wrap  {
  position: relative;
  z-index: 2;
  height: 100px;
}
.archive_list .nbox .title {
  color: #fff;
  word-break: keep-all;
  width: 100%;
  overflow: hidden;
}
.archive_list .nbox .date {
  font-size: 11px;
  text-align: right;
  color: #fff;
  line-height: initial;
  position: absolute;
  bottom: 0;
  right: 0;
}

.sorticon, .regionicon {
  width: 30px;
  vertical-align: middle;
}

.sortbtns .sortico {
  width: 23px;
}

.logo_link {
  display: flex;
  align-items: center;
}

.logoimg {
  width: 70px;
  padding-right: 10px;
}


.etcbox {
    display: block;
    padding: 10px 30px;
    background: #ffdada;
    position:relative;
    display:block;
    margin: 10px 0;
}
.toc {
    display: inline-block;
    border: solid 1px #ccc;
    padding: 10px;
    background: #ffc4ae;
    width: 300px;
    color: #e17b55;
    box-sizing: border-box;
    vertical-align: middle;
}
.toc li a{
    color: #af2f00;
}
.toc li a:visited, .toc li a:active  {
    color:#023d17;
}
.toc li a:hover {
    text-decoration:underline;
}
.toc .title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    display: block;
    color: #000;
}
.toc .title span {
    position:absolute;
    font-size:11px;
    color:blue;
    cursor:pointer;
    padding-left:5px;
}
.toc .title span:after {
    content:"]";
    color:#000;
}
.toc .title span:before {
    content:"[";
    color:#000;
}
.toc ul ul, .toc ol ol {
    padding-left:20px;
}

.single .wrcontent .toc>ol, .single .wrcontent .toc>ol>li {
  padding: 0;
}

.deckitem {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 100% 10%;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  border: solid 3px;
  box-sizing: border-box;
  border-radius: 2px;
}

.deckitem.Noxus {
  border-color: #C54B48;
}.deckitem.Demacia {
  border-color: #DFCCA0;
}.deckitem.PiltoverZaun {
  border-color: #E9AC53;
}.deckitem.ShadowIsles {
  border-color: #0DA489;
}.deckitem.Freljord {
  border-color: #87C9E1;
}.deckitem.Ionia {
  border-color: #A88592;
}

.deckitem:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgb(28, 28, 28) 49%, rgba(0, 0, 0, 0) );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.deckitem * {
  z-index: 1;
}

.deckitem .cost {
  background: #5bc0de;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  margin-left: 5px;
  align-items: center;
  line-height: 18px;
}

.deckitem .name {
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 170px;
}

.deckitem .count {
  margin-right: 5px;
  background: #444;
  padding: 4px 0px;
  width: 34px;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .out-contain, .container {
    width: 950px;
  }
  .voting {
    display: flex;
    width: 11%;
    height: 100%;
    padding: 5px 8px;
    box-sizing: border-box;
    text-align: right;
    vertical-align: middle;
    flex-wrap: wrap;
    text-align: center;
  }

  .votecount {
    order: 2;
    width: 100%;
  }
  .upvote {
    order: 1;
  }
  .downvote {
    order: 3;
  }
  .voting span {
    margin: 3px auto;
  }
}

@media screen and (max-width: 950px) {
  .archive_list .a-item {
    width: 50%;
  }
  .out-contain, .container {
    width: 750px;
  }

  .grid .champbox {
    width: calc(100%/3);
  }

  .footlinks {
    display: block;
    text-align: center;
    width: unset
  }

  .copyright {
    float: none;
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
  }

  .goup {
    right: 20px;
  }
  .combox form {
    width:100%;
  }
  .comment-form-comment textarea {
    width:100%;
    min-width: unset;
  }

}

/*mobile*/
@media screen and (max-width: 750px) {
  .stitle h1 {
    font-size: 25px;
  }
  .header_block {
    padding: 16px 0;
  }
  .Championrarity,.Epicrarity,.Rarerarity,.Commonrarity {
    display: none;
  }
  .archive_list .a-item {
    width: 50%;
  }
  .archive_list .nbox .title {
    font-size: 16px;
  }
  .nbox_wrap {
    height: 90px;
  }
  .single .wrcontent ul, .single .wrcontent ol {
    padding: 0;
  }
  .single .wrcontent ul>ul, .single .wrcontent ol>ol {
    padding: 20px;
  }
  .flexit {
    flex-wrap: wrap;
  }
  .flexit > * {
    max-width: 50%;
  }
  .out-contain, .container {
    width: 90%;
    display: block;
  }
  .out-contain main, .out-contain #left_side {
    width: 100%;
    padding: 0;
  }
  main .box {
    padding: 0;
  }
  .list_info  {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list_info>* {
    width: calc(100%/3);
  }
  .list .imgbox  {
    margin: 0;
    display: flex;
  }
  .list .champbox  {
    height: unset;
    align-items: center;
  }
  .list_info .cname {
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #ff9f5f;
  }
}







@media only screen and (max-width: 1150px) {

}

@media only screen and (max-width: 900px) {
  .pokebox {
    width: 25%;
  }
}

@media only screen and (max-width: 450px) {
  .pokebox {
    width: 33%;
  }
}