@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700');

@import url('https://fonts.googleapis.com/css2?family=Metal+Mania');


body {background:  #404040; font-family: 'Open Sans'; font-size: 1.1em; font-weight: 400; color: #8b8b8b; overflow-y: scroll; margin:  0;}
p,ul,ol,li {line-height: 1.3em; }
ul ul {list-style-type: circle; margin: 5px 0;}

h1, h1 a {font-size: calc(16pt + 1.07vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.2em; margin: 10px 0 10px; text-transform: none; text-align: center; }
h2, h2 a {font-size: calc(16pt + .88vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.1em; margin: 10px 0; text-transform: none;}
h3, h3 a {font-size: calc(16pt + .75vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.1em; margin: 10px 0; text-transform: none;}
h4, h4 a {font-size: calc(14pt + .64vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.1em; margin: 10px 0;}
h5, h5 a {font-size: calc(14pt + .53vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.1em; margin: 10px 0;}
h6, h6 a {font-size: calc(14pt + .42vw); color: #8b8b8b; font-family: "Open Sans",sans-serif; font-weight: 600; line-height:1.1em; margin: 10px 0;}

p {margin: 1em 0;}
a, a:link, a:visited {color: #f97220; transition: all 0.3s;}
a:hover, a:focus {color: #feb487;}

img {max-width:  100%; height:  auto;}  

.imagewrapper {line-height: 0px;}

section {padding: 20px 0;}

.inner {max-width: 1800px; display: block; margin: 0 auto; text-align: center;}

.logowrap {margin: 10px auto 0; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; transition:  all 0.3s;}

a.button {background: #1b1b1b; border:1px solid #1b1b1b; color: #ffffff; font-size: .92em; font-weight: 400; padding: 14px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s; text-decoration: none;}
a.button:hover {background-color: #703d1b; border-color: #703d1b; color: #ffffff; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

::-webkit-scrollbar {width: 6px; background: rgba(0,0,0,0);}
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);}
::-webkit-scrollbar-thumb {border-radius: 2px;  -webkit-box-shadow: inset 0 0 2px #1c1c1c; background: #8899a8; }


/*.socialwrap {margin: 0 auto;}
.socialwrap .iconbox {width: 64px; display: inline-block; margin: 10px 20px 10px 0; transition: all 0.5s;}

.socialwrap .iconbox:hover {opacity: .6; transform: translateX(0)}
.socialwrap .iconbox:nth-last-child(1) {margin-right: 0;}
*/
.displaynone {display: none; }
.hidden {display: none !important; }

/*.cardwrap .gladiator {display: none !important}*/
body {overflow-x: hidden;}
#barons.shrink {padding-top:  52px; position:  relative;}
#barons.shrink .logowrap {width:  0; height:  0; opacity:  0; margin: 0; padding: 0; }
#barons.shrink #namebox {margin:  0;}
#barons.shrink #content {min-height: unset;}
#barons .warning {font-size:  .8em; margin-top:  10px; color: #8b8b8b; font-weight: 600; }
#barons .warning label {font-weight: 700; text-transform:  uppercase; }

/*#baronsstuff {width: 100%;display: flex; justify-content: space-between; align-items:  flex-start; flex-wrap:  wrap;}
#baronsstuff #leftpanel {width:  calc(100% - 300px - 20px); display:  inline-block;}*/
/*#baronsstuff #rightpanel {background:  #2b2b2b; border:  1px solid #8b8b8b; border-radius: 10px 0 0 10px; border-right:  0;width:  300px;
  overflow-y: scroll; padding:  10px;
  display:  inline-block; box-sizing: border-box;
  max-height: calc(100vh - 62px - 30px);
  position:  sticky;
  top:  62px;
  transition: all 0.3s;
  opacity:  0;
}
#baronsstuff #rightpanel.show {opacity: 1}*/


#donate {position:  fixed; top:  0; left: 0; padding:  7px 0 5px; color:  #ffffff; font-weight: 600; font-size:  .85em; z-index: 99999; width:  100%; display:  flex; justify-content:  space-around; align-items:  center; z-index:  100;
  background: #2b2b2b; 
  border-bottom: 1px solid #e2e2e2;

}

#donate img.logo {margin-right: 20px;}
#donate .inner {width:  100%; max-width: 1800px; display:  flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#donate .donatewrap {display: flex; justify-content: flex-start;align-items: center; flex-wrap: wrap;}
#donate .donatewrap img {padding: 0 4px; height: 36px; width:  auto;}
#donate .titlebox {color: #ffffff; align-self:  stretch; display: flex; align-items: center; font-size:  16px; text-transform: none; font-weight:  700; text-shadow:  3px 3px 6px #000000; margin-right: 5px;}
#donate .titlebox a {text-decoration: none;}
#donate .titlebox span {color: #f97220; margin:  0 13px;}
#donate .titlebox2 {color: #ffffff; align-self:  stretch; display: flex; align-items: center; font-size:  16px; font-weight:  600; text-shadow:  2px 2px 4px #000000;}
#donate .titlebox2 span {margin:  0 10px; cursor: default;}
#donate .contentbox {display: flex; justify-content: flex-start;align-items: center; flex-wrap: wrap;}
#donate .discordwrap {display: flex; justify-content: flex-start;align-items: center; flex-wrap: wrap;}
#donate .notebox {width:  100%; text-align: center;}


#donate .loginbox {display:  flex; justify-content:  flex-end; align-items:  center; flex-wrap: wrap; order:100;}

#donate .loginbox .login {cursor:  pointer; display flex; justify-content: flex-end; align-items:  center; flex-wrap:  wrap;zoom:  72%;}
#donate .loginbox .login img {padding: 0 4px; height: 36px; width:  auto;}
#donate .loginbox .AccountLoggedIn {background:  #ffffff; color:  #1b1b1b; padding:  5px 70px 5px 20px; box-sizing: border-box; position: relative; border-radius: 15px; display: inline-block;}
#donate .loginbox .AccountLoggedIn .accounticon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;}
#donate .loginbox .AccountLoggedIn .accounticon .imagewrapper {position:  relative;}
#donate .loginbox .AccountLoggedIn .accounticon .overlay {position:  absolute; top:  14%; left: 14%; width:72%; height: 72%; }

#donate .loginbox .AccountLoggedIn .accounticon {cursor: pointer; transition: all 0.3s; }
#donate .loginbox .AccountLoggedIn .accounticon:hover {filter: grayscale(100%);}


#donate .loginbox .titleline {color:  #ffffff; font-size:  .75em; text-transform: uppercase; font-weight: 700; position:  absolute; bottom: 0; transform: translateY(100%); text-shadow: 2px 2px 4px #000000;}

#donate .loginbox .AccountDECDonations {background:  #ffffff; color:  #1b1b1b; padding:  5px 70px 5px 20px; margin: 0 20px 0px 0; box-sizing: border-box; position: relative; border-radius: 15px; display: inline-block;}
#donate .loginbox .AccountDECDonations .accounticon {position: absolute; right: 10px; top: 50%; transform: translateY(-41%); width: 54px; height: 54px;}
#donate .loginbox .AccountDECDonations .accounticon .imagewrapper {position:  relative;}
#donate .loginbox .AccountDECDonations .accounticon .overlay {position:  absolute; top:  14%; left: 14%; width:72%; height: 72%; }


#donate .loginbox .Balance {background:  #ffffff; color:  #1b1b1b; padding:  5px 70px 5px 20px; margin: 0 20px 0px 0; box-sizing: border-box; position: relative; border-radius: 15px; display: inline-block; }
#donate .loginbox .Balance .accounticon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;}
#donate .loginbox .AccountSPS.Balance .accounticon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 35px; height: 35px;}
#donate .loginbox .Balance .accounticon .imagewrapper {position:  relative;}
#donate .loginbox .Balance .accounticon .overlay {position:  absolute; top:  14%; left: 14%; width:72%; height: 72%; }

#donate .loginbox .contestEntries {background:  #ffffff; color:  #1b1b1b; padding:  5px 70px 5px 20px; margin-right: 20px; box-sizing: border-box; position: relative; border-radius: 15px; display: inline-block; }
#donate .loginbox .contestEntries .accounticon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;}
#donate .loginbox .contestEntries .accounticon .imagewrapper {position:  relative;}
#donate .loginbox .contestEntries .accounticon .overlay {position:  absolute; top:  14%; left: 14%; width:72%; height: 72%; }







#content {min-height: calc(100vh - 23px); padding-top: 80px; display:  flex; align-items: center; transition:  all 1s; box-sizing:  border-box; position:  relative; transition:  all 0.3s;}
/*#content .inner {display:  flex; justify-content: space-around;}*/
#content .adsense.topleft {position:  absolute; top:  55px; left:  10px; width: 300px; height:  250px;}
#content .adsense.topright {position:  absolute; top:  55px; right:  10px; width: 300px; height:  250px;}

#controlpanel {position:  fixed; top:  5px; right: 0; z-index:  99;}
#controlpanel i.la-toolbox {color:  white; background: #ae1616; border:  1px solid #c2c2c2; border-right: 0; font-size:  20px; width:  50px; height:  40px;  display:  flex; Justify-content: space-around; align-items: center; border-radius: 20px 0 0 20px; padding-left: 5px; box-sizing: border-box; transition: all 0.3s;}
#controlpanel.active i.la-toolbox,
#controlpanel i.la-toolbox:hover {background: green; cursor:  pointer;}
#controlpanel.juststarting i.la-toolbox {transform: translateX(100%);}


/*#content.smallwidth {background:  #404040; border:  1px solid #ffffff; border-right:  none; max-width: 300px; position: absolute; top: 62px; right: 0; max-height: calc(100vh - 62px - 10px); overflow-y: scroll; padding:  10px; border-radius: 10px 0 0 10px;box-sizing: border-box;z-index: 10;}*/
#content.smallwidth {
background: #723f3f;
    border: 1px solid #ffffff;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    width: 300px;
    overflow-y: scroll;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
    max-height: calc(100vh - 62px - 30px);
    position: fixed;
    top: 62px;
    transition: all 0.3s;  
    right:  0px;
    z-index:  1000;
}

#content.smallwidth #namebox > div {width:  100%;}
#content.hideme {transform: translateX(100%);}



/*#inventory {background: #2b2b2b; }*/


  #sortbar {color: #404040; min-height: 26px; margin: 0px 0 0px; padding:  0 2% 5px; display: flex; justify-content: flex-start; align-items: center; flex-wrap:  wrap; position:  relative; transition: all 0.3s;}
  #old{
    background: #0d002b; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0d002b 0%, #410072 26%, #6d3002 74%, #260000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0d002b 0%,#410072 26%,#6d3002 74%,#260000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0d002b 0%,#410072 26%,#6d3002 74%,#260000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d002b', endColorstr='#260000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

  #sortbar.hideme .sortwrap {display:  none;}
  #sortbar.hideme .stickywrap {display:  none;}
  #sortbar.hideme .attackwrap {display:  none;}

  #sortbar i.hideme {background:  #ffffff; border:  1px solid #000000; color:  #000000; border-radius:  50%;   width:  20px; height:  20px; display:  flex; justify-content: space-around; align-items: center; position:  absolute; top:  2px ; right:  10px;  transition:  all 0.3s; z-index: 9;}
  #sortbar i.hideme:hover {background-color: #c63030; color:  #ffffff;  cursor: pointer;}

  #sortbar.hideme i.hideme:before {content:  "\f103"}

  #sortbar .sortwrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding:  0 0 0 0px; box-sizing:  border-box; z-index:  1; position: relative;}
  #sortbar .sortwrap .titlebox {color: #ffffff; width: 100%; font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; text-align: center; border-bottom:  1px dashed #8b8b8b;  padding-bottom:  5px; margin-bottom: 5px;}
  #sortbar .sortwrap .centerbox {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  #sortbar .sortbutton {padding: 5px 0px; max-width: 60px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
  /*#sortbar .sortbutton .titlewrap {display:  inline-block;}*/

  #sortbar .sortbutton .toptext,
  #sortbar .stickybutton .toptext,
  #sortbar .sortbutton .bottomtext,
  #sortbar .stickybutton .bottomtext { color:  #ffffff; width:  100%; text-align: center; text-transform: uppercase; font-size: .55em; font-weight: 700; opacity: 0; transition: all 0.3s;}
  #sortbar .sortbutton .bottomtext {margin-top:  -2px;}
  #sortbar .stickybutton .bottomtext {margin-top:  -2px;}
  #sortbar .sortbutton:hover .toptext,
  #sortbar .sortbutton:hover .bottomtext,
  #sortbar .stickybutton:hover .toptext,
  #sortbar .stickybutton:hover .bottomtext,  
  #sortbar .sortbutton.active .toptext,
  #sortbar .sortbutton.active .bottomtext,
  #sortbar .stickybutton.active .toptext,
  #sortbar .stickybutton.active .bottomtext{opacity:  1}  

  #sortbar .sortbutton .imagewrapper {position:  relative;}
  #sortbar .sortbutton .imagewrapper img {filter: grayscale(80%); transition:  all 0.3s; width: 40px; height:  auto;}
  #sortbar #cardlevelup.sortbutton .imagewrapper img,
  #sortbar #cardleveldown.sortbutton .imagewrapper img {opacity: .7;}
  #sortbar .sortbutton .imagewrapper .overlay {position:  absolute; top:  0; left:  0; width:  100%; height: 100%; display: flex; justify-content: space-around; align-items: center;}
  #sortbar .sortbutton .imagewrapper .overlay i {color: #ffffff; font-size: 28px; font-weight:  700; text-shadow: 2px 2px 4px #000000}

  #speedup .imagewrapper .overlay i {position:  relative; left:  -2px; bottom:  -3px;}
  #speeddown .imagewrapper .overlay i {position:  relative; left:  -2px; bottom:  -3px;}

  #sortbar #cardlevelup.sortbutton.active .imagewrapper img,
  #sortbar #cardleveldown.sortbutton.active .imagewrapper img, 
  #sortbar .sortbutton.active .imagewrapper img ,
  #sortbar #cardlevelup.sortbutton.active:hover .imagewrapper img,
  #sortbar #cardleveldown.sortbutton.active:hover .imagewrapper img, 
  #sortbar .sortbutton.active:hover .imagewrapper img {filter: none; opacity: 1;}

  #sortbar #cardlevelup.sortbutton:hover .imagewrapper img,
  #sortbar #cardleveldown.sortbutton:hover .imagewrapper img, 
  #sortbar .sortbutton:hover .imagewrapper img {filter: none;opacity: 1;}
  
  #sortbar .active .titlewrap {font-weight: 600; }


  #sortbar .stickywrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding:  15px 0px 15px 0; box-sizing:  border-box; z-index:  1; position: relative;}
  #sortbar .stickywrap .titlebox {color: #ffffff; width:  100%;  font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; text-align: center; border-bottom:  1px dashed #8b8b8b; padding-bottom:  5px; margin-bottom: 5px; }
  #sortbar .stickywrap .centerbox {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  #sortbar .stickybutton {padding: 4px; max-width: 50px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap; align-self: stretch}

  #sortbar .stickybutton .toptext {opacity: 1; color:  grey; transition:  all 0.3s;}
  #sortbar .stickybutton .bottomtext {opacity: 1; color:  grey; transition:  all 0.3s; margin-top:  0;}
  #sortbar .stickybutton:hover .toptext {color:  #ffffff;}
  #sortbar .stickybutton:hover .bottomtext {color:  #ffffff;}
  #sortbar .stickybutton.active .toptext {color:  #ffffff;}
  #sortbar .stickybutton.active .bottomtext {color:  #ffffff;}


  #sortbar .stickybutton .imagewrapper {position:  relative; width:  30px; height:  30px; border:  2px solid #404040; border-radius:  50%; transition:  all 0.3s; display:  flex; justify-content: space-around; align-items: center;}
  #sortbar .stickybutton .imagewrapper img {transition:  all 0.3s; box-sizing:  border-box;  max-height: 20px; max-width: 20px;}

  #sortbar .stickybutton.active .imagewrapper {border-color: #ffffff; background-color: rgba(0,0,0,1);}
  #sortbar .stickybutton:hover .imagewrapper {border-color: #ffffff; background-color: rgba(0,0,0,1);}
  #sortbar .stickybutton.active .imagewrapper img ,
  #sortbar .stickybutton.active:hover .imagewrapper img {filter: none; opacity: 1; }
  #sortbar .stickybutton:hover .imagewrapper img {filter: none; opacity: 1;}

  #sortbar #animated.stickybutton {max-width: initial;}
  #sortbar #animated.stickybutton .imagewrapper {overflow: hidden; width: 30px; height:  30px;   }
  #sortbar #animated.stickybutton .imagewrapper img {width: 60px; height:  auto; max-width: initial; max-height:  initial; position:  relative; top:  27px;}


/*  #sortbar .showhidewrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding:  15px 0px 15px 50px; box-sizing:  border-box; z-index:  1; position: relative;}
  #sortbar .showhidewrap .titlebox {color: #ffffff; max-width: 100px; align-self:  stretch; display: flex; align-items: center; font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; margin-right: 20px; text-align: right;}
  #sortbar .showhidewrap .centerbox {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  
  #sortbar .sortbutton {padding: 0px 6px; max-width: 70px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap; align-self: stretch}

  #sortbar .sortbutton .imagewrapper {position:  relative; max-width:  45px; }
  #sortbar .sortbutton .imagewrapper img {filter: grayscale(100%);opacity:  .7; transition:  all 0.3s; border:  2px solid grey; border-radius:  50%; box-sizing:  border-box;}

  #sortbar .sortbutton.active .imagewrapper img ,
  #sortbar .sortbutton.active:hover .imagewrapper img {filter: none; opacity: 1; border-color: #ffffff}
  #sortbar .sortbutton:hover .imagewrapper img {filter: none; opacity: 1; border-color: #ffffff}*/




  #sortbar .attackwrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding:  15px 0px 15px 50px; box-sizing:  border-box; z-index:  1; position: relative;}
  #sortbar .attackwrap .titlebox {color: #ffffff; max-width:  100px; align-self:  stretch; display: flex; align-items: center; font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; margin-right: 20px; text-align: right;}
  #sortbar .attackwrap .centerbox {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}  
  #sortbar .attackbutton {padding: 0px 6px; max-width: 70px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}

  #sortbar .attackbutton .imagewrapper {position:  relative; max-width:  50px; }
  #sortbar .attackbutton .imagewrapper img {filter: grayscale(80%);opacity:  .7; transition:  all 0.3s; border-radius:  50%; box-sizing:  border-box;}

  #sortbar .attackbutton.active .imagewrapper img ,
  #sortbar .attackbutton.active:hover .imagewrapper img {filter: none; opacity: 1;}
  #sortbar .attackbutton:hover .imagewrapper img {filter: none; opacity: 1;}

  #abilitybar {color: #404040; padding: 10px 2% 5px; position:  relative; transition: all 0.3s; min-height: 6px;}
  #old {
    background: #003305; /* Old browsers */
    background: -moz-linear-gradient(left, #003305 7%, #006d36 36%, #01485e 64%, #012763 84%, #021e3f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #003305 7%,#006d36 36%,#01485e 64%,#012763 84%,#021e3f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #003305 7%,#006d36 36%,#01485e 64%,#012763 84%,#021e3f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003305', endColorstr='#021e3f',GradientType=1 ); /* IE6-9 */  
  }

  #abilitybar.hideme .abilitywrap {display:  none;}

  #abilitybar i.hideme {background:  #ffffff; border:  1px solid #000000; color:  #000000; border-radius:  50%;  width:  20px; height:  20px; display:  flex; justify-content: space-around; align-items: center; position:  absolute; top:  2px ; right:  10px; transition:  all 0.3s; z-index: 9;}
  #abilitybar i.hideme:hover {background-color: #c63030; color:  #ffffff; cursor: pointer;}

  #abilitybar.hideme i.hideme:before {content:  "\f103"}


  #abilitybar .abilitywrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing:  border-box; z-index:  1; position: relative;}
  #abilitybar .abilitywrap .titlebox {width: 100%; color: #ffffff; font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; box-sizing:  border-box; border-bottom:  1px dashed #8b8b8b; padding-bottom:  5px; margin-bottom: 5px; text-align:  center;}
  #abilitybar .abilitywrap .itemswrap {width: 100% ;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}
  #abilitybar .abilitywrap .abilitybutton {padding: 4px; max-width: 70px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}

  #abilitybar .abilitybutton .imagewrapper {position:  relative; width:  35px; height:  35px; background:  transparent; transition:  all 0.3s; border:  2px solid #404040; border-radius:  50%; box-sizing:  border-box; display:  flex; justify-content:  space-around; align-items:  center;}
  #abilitybar .abilitybutton .imagewrapper img {width: 20px; height:  20px;}
  #abilitybar .abilitybutton.active .imagewrapper,
  #abilitybar .abilitybutton.active:hover .imagewrapper {filter: none; opacity: 1; border-color: #ffffff; background:  #000000;}
  #abilitybar .abilitybutton:hover .imagewrapper {filter: none; opacity: 1; border-color: #ffffff; background:  #000000;}

  #abilitybar .abilitydesc {font-size:  .9em; font-weight: 600; margin-top:  10px; margin-bottom: 10px; color: #ffc500; width:  100%; text-align: center;}
  #abilitybar .notebox {font-size:  .8em; margin-top:  10px; color: #d5d5d5; text-shadow: 2px 2px 4px #000000; width:  100%; text-align: center;}
  #abilitybar .notebox label {font-weight: 600; text-transform:  uppercase; }




  /*#playerbar {background:  rgba(64, 64, 64, .6); color: #404040; padding: 10px 0; position:  relative; transition: all 0.3s; min-height: 6px; min-height:  26px; width:  100%;}*/


  #playerbar.hideme .playerwrap {display:  none;}

  #playerbar i.hideme {background:  #ffffff; border:  1px solid #000000; color:  #000000; border-radius:  50%;  width:  20px; height:  20px; display:  flex; justify-content: space-around; align-items: center; position:  absolute; top:  2px ; right:  10px; transition:  all 0.3s; z-index: 9;}
  #playerbar i.hideme:hover {background-color: #c63030; color:  #ffffff; cursor: pointer;}

  #playerbar.hideme i.hideme:before {content:  "\f103"}

  #playerbar {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; z-index:  1; position: relative;}
  #playerbar .playerwrap {display:  flex; justify-content: space-between; align-items: flex-start; flex-wrap:  wrap; width:  100%; }
  #playerbar .titlebox { width:  100%;  color: #ffffff; display: block; font-size:  22px; text-transform: uppercase; font-weight:  700; text-shadow:  3px 3px 6px #000000; box-sizing:  border-box; text-align:  center; margin:  -5px 0 3px;}
  #playerbar .titlebox.you {margin:  10px auto 10px;}
  #playerbar .inventory {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}
  #playerbar .subwrap {display:  inline-block; border:  1px solid #8b8b8b; border-radius:  0px; padding: 0 1px 1px 1px; box-sizing: border-box; overflow: hidden; margin: 2px; transition:  all 0.5s; text-decoration: none;}
  #playerbar .subwrap .titlebox {width:  calc(100% + 20px); margin-left: -10px; background:  #8b8b8b; padding:  5px 10px 0 10px; font-size:  16px;}
  #playerbar .subwrap.guildbox .imagewrapper {min-height:  30px;}
  #playerbar .subwrap.guildbox .imagewrapper img {width: initial; } 

  #playerbar .subwrap a {text-decoration: none;}
  #playerbar .subwrap.guildbox:hover {background-color: #ffffff;}

  #playerbar .itemswrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}
  #playerbar .itemswrap .itembox {border:  1px solid #000000; background: #00171b; box-sizing: border-box; border-radius: 5px; margin: 1px; display:  block; justify-content: space-around;}
  #playerbar .itemswrap .imagewrapper {padding:  5px 5px 10px; display:  block; margin:  0 auto; width:  50px; text-align:  center;}
  #playerbar .itemswrap .imagewrapper img {width:  40px; height:  auto;}
  #playerbar .itemswrap .imagewrapper.guild {width: 102px; position:  relative;}

  #playerbar .itemswrap .countwrap {display:  flex; width:  100%; justify-content:  space-around; padding: 0 5px; box-sizing: border-box;}
  #playerbar .itemswrap .count {display: inline-block; margin: 0 0 5px; padding: 0px 7px 1px; background: #085089; color: #ffffff; border: 1px solid #000000; border-radius: 10px; font-size: .8em; text-transform: capitalize;}
  #playerbar .itemswrap .staked .count {background: #cb7000; color:  #ffffff;}

  #playerbar .itemswrap .itembox.wild {background:  #3b2651; }
  #playerbar .itemswrap .itembox.modern {background:  #203e70; }
  #playerbar .itemswrap .itembox.league .imagewrapper {width:  60px; margin-top:  -5px; margin-bottom: -5px;padding:  0px 5px 5px;}
  #playerbar .itemswrap .itembox.league .imagewrapper img  {width:  60px;}
  #playerbar .itemswrap .itembox.wild .count { background: #1b1b1b;}
  #playerbar .itemswrap .itembox.modern .count { background: #1b1b1b;}


  #playerbar .itemswrap .imagewrapper.guild .countwrap {display: inline-block; position: absolute; top:  5px; right:  10px;width:  unset; transform: rotate(45deg);width:  22px; height:  22px;background: #ffffff; color: #085089; border: 1px solid #000000;}
  #playerbar .itemswrap .imagewrapper.guild .countwrap .count {background:  transparent; border-radius: 0px; font-size: .9em; line-height: 1.3em; display:  flex; justify-content: space-around; align-items: center; padding:  0; margin:  0; font-weight:  700; transform: rotate(-45deg); border: 0px;color: #085089; }



  #toolbox.streamer {background: transparent;}
  #toolbox.streamer #playerbar {padding: 0; margin: 0; border:  0;}
  #toolbox.streamer #playerbar .subwrap {background: rgba(255,255,255,.4);}
  #toolbox.streamer #playerbar .titlebox.you {text-align:  left;} 

  #toolbox.streamer #playerbar .subwrap.season {order: 1;}
  #toolbox.streamer #playerbar .subwrap.coins {order: 2;}
  #toolbox.streamer #playerbar .subwrap.pots {order: 3;}
  #toolbox.streamer #playerbar .subwrap.pack {order: 4;}
  #toolbox.streamer #playerbar .subwrap.land {order: 5;}
  #toolbox.streamer #playerbar .subwrap.gladiator {order: 6;}
  #toolbox.streamer #playerbar .subwrap.guildbox {order: 7;}
  #toolbox.streamer #playerbar .subwrap.tots {order: 19;}
  #toolbox.streamer #playerbar .subwrap.stats {order: 20;}

  #inventory #playerbar .subwrap.season {order: 1;}
  #inventory #playerbar .subwrap.coins {order: 2;}
  #inventory #playerbar .subwrap.pots {order: 3;}
  #inventory #playerbar .subwrap.pack {order: 4;}
  #inventory #playerbar .subwrap.land {order: 5;}
  #inventory #playerbar .subwrap.gladiator {order: 6;}
  #inventory #playerbar .subwrap.guildbox {order: 7;}
  #inventory #playerbar .subwrap.tots {order: 19;}
  #inventory #playerbar .subwrap.stats {order: 20;}


  #playerbar .playerrank {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}
  #playerbar .itemswrap .countwrap.title {display:  flex; width:  100%; justify-content:  space-around; padding: 5px 5px 0 5px; box-sizing: border-box;}
  #playerbar .itemswrap .countwrap.title .name {display: inline-block; margin: 0 0 5px; padding: 0px 7px 1px; background: #d37213; color: #ffffff; border: 1px solid #000000; border-radius: 10px; font-size: 12px;}

  #inventory.streamer {background: transparent;}
  #inventory.streamer #playerbar {padding: 0; margin: 0; border:  0;}
  #inventory.streamer #playerbar .subwrap {background: rgba(255,255,255,.4);}
  #inventory.streamer #playerbar .titlebox.you {text-align:  left;} 

  #inventory.streamer #playerbar .subwrap.season {order: 1;}
  #inventory.streamer #playerbar .subwrap.coins {order: 2;}
  #inventory.streamer #playerbar .subwrap.pots {order: 3;}
  #inventory.streamer #playerbar .subwrap.pack {order: 4;}
  #inventory.streamer #playerbar .subwrap.land {order: 5;}
  #inventory.streamer #playerbar .subwrap.gladiator {order: 6;}
  #inventory.streamer #playerbar .subwrap.guildbox {order: 7;}
  #inventory.streamer #playerbar .subwrap.stats {order: 20;}


/* Filter Bar CSS - Available Artwork & Featured Art Pages */
  #filterbar {background: #404040; color: #ffffff;border-right: 1px solid #8b8b8b; border-bottom: 1px solid #8b8b8b; padding: 0; margin:  0; padding: 10px 0 0px; box-sizing: border-box; }
  #filterbar .filterwrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding:  0 2%; box-sizing:  border-box; z-index:  1; position: relative;}
  #filterbar .filtercat1 {max-height: 38px; overflow: hidden; background-color:  #303030; margin: 0 3px; border: 1px solid #323232; border-bottom: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 4px 10px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; align-self:  stretch;}
  #filterbar .filtercat1 .titlewrap {display:  inline-block; font-size: 14px;}
  #filterbar .filtercat1.active,
  #filterbar .filtercat1.active:hover {color: #ffffff; background-color: #000000; border-color: #8b8b8b;}
  #filterbar .filtercat1:hover {border-color: #8b8b8b; isolation: isolate; z-index:  2; position:  relative;}
  
  #filterbar.guilds {padding-bottom: 0; border-radius: 0 0 10px 0;  }
  #filterbar .active .titlewrap {font-weight: 600; }

  #filterbar .explodeall {opacity: 1; width: 40px; height: 38px; display: flex; justify-content: space-around; align-items: center; cursor: pointer;}




  #allfilteritems {background: transparent; padding: 0 0px; box-sizing: border-box; min-height: 50vh }
  #allfilteritems .filteritem {width: 100%; display:  flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  #allfilteritems .filteritem.nodisplay {transform: scale(0.0);}
  #allfilteritems .filteritem.absolute {opacity: 0; width: 0px; margin: 0; font-size: 0; line-height: 0; display:  none;}


  .browser-firefox #allfilteritems .filteritem .cardwrap {-moz-transform: scale(.62);-moz-transform-origin: top left; width: 160%;}
  #allfilteritems .filteritem .zoomwrap {zoom: 62%; }
  #allfilteritems .filteritem .itembox {width: initial; margin:  5px; /*zoom: 62%;*/ display:  inline-block; position:  relative;  transition: box-shadow 2s ease-out 2s; transition: outline 2s ease-out 2s;}
  #allfilteritems .filteritem .itembox .overlay {background: rgba(0,0,0,.8);color: #ffffff; font-size: .8em; font-weight: 600; overflow: hidden;
    position:  absolute; top:  0; left:  0; width: 100%;height: 100%; zoom: 170%; 
    display: flex; justify-content: space-around; align-items: center; padding: 5px; box-sizing: border-box; transition:  all 0.3s; opacity: 1;}
  #allfilteritems .filteritem .itembox .overlay.nodisplay {opacity: 0;}
  #allfilteritems .filteritem .itembox .overlay.nodisplay:hover {opacity:  1;}

  #allfilteritems .filteritem .itembox .decoverlay {position: absolute; top: -4px; width: 100%; display: flex; justify-content: space-around; align-items: center;}
  #allfilteritems .filteritem .itembox .decoverlay .decwrap {position:  relative; top:  -7px;zoom: 150%;}
  #allfilteritems .filteritem .itembox .decoverlay .decwrap img {position:  absolute; left: 10px;}
  #allfilteritems .filteritem .itembox .decoverlay .decvalue {display: inline-block; margin: -2px 0 0 10px; padding: 0px 7px 1px 27px; color: #ffffff; border-radius: 10px; font-size: .8em;}
  #allfilteritems .filteritem .itembox .decoverlay .decvalue { border: 1px solid #ae7cff;
    background: #280c3a; /* Old browsers */
    background: -moz-linear-gradient(top, #280c3a 1%, #5f1e96 55%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #280c3a 1%,#5f1e96 55%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #280c3a 1%,#5f1e96 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#280c3a', endColorstr='#5f1e96',GradientType=0 ); /* IE6-9 */
  }



  /*#allfilteritems .filteritem .itembox.summoner .overlay {border: 2px solid red; box-shadow: 0 0 5px #ff0000;}*/
  
  #allfilteritems .filteritem .itembox .overlay .centerbox > div {width:  100%; text-align:  center;margin: 5px 0;}
  #allfilteritems .filteritem .itembox .overlay span {color:  #efbf10; font-size:  .9em; font-weight: 600; text-align:  center; width: 100%;}
  #allfilteritems .filteritem .itembox .overlay .value {color:  #ffffff; font-size:  1em; font-weight: 600; text-align:  center;width: 100%;}

  #allfilteritems .filteritem .instructions {width:  100%; text-align:  center; font-weight: 700;}
  #allfilteritems .filteritem .instructions label {color: red;  }
  

#allfilteritems .filteritem .itembox .overlay.stacked {background: transparent;width:  initial; height: initial; display:  inline-block; top: 0px; right: 5px; left:  initial; font-size: 20px;  box-sizing: border-box; padding: 0; overflow: visible; cursor: pointer;} 
#allfilteritems .filteritem .itembox .overlay.stacked .imagewrapper {-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.75)); -moz-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.75)); -ms-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.75)); -o-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.75)); transition: all 0.3s;}
#allfilteritems .filteritem .itembox .overlay.stacked .imagewrapper img.banner {transition: all 0.3s; -webkit-mask: url("../img/stacked-mask.png"); mask: url("../img/stacked-mask.png"); -webkit-mask-box-image: url("../img/stacked-mask.png"); -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: cover; mask-size: cover;}
#allfilteritems .filteritem .itembox .overlay.stacked:hover .imagewrapper {-webkit-filter: drop-shadow(0px 5px 5px rgba(255,255,255,.9)); -moz-filter: drop-shadow(0px 5px 5px  rgba(255,255,255,.9)); -ms-filter: drop-shadow(0px 5px 5px  rgba(255,255,255,.9)); -o-filter: drop-shadow(0px 5px 5px  rgba(255,255,255,.9));}
#allfilteritems .filteritem .itembox .overlay.stacked:hover .imagewrapper img.banner {filter:  contrast(0) brightness(0); }


#allfilteritems .filteritem .itembox .overlay.stacked .centerbox {position:  absolute; top:  0; right: 0; width:  100%; height:  100%; display:  flex; justify-content:  space-around; align-items: center; flex-wrap:  wrap;padding: 0 0 15px; box-sizing:  border-box;}
#allfilteritems .filteritem .itembox .overlay.stacked .centerbox .pop {display: none; }
#allfilteritems .filteritem .itembox .overlay.stacked:hover .centerbox .textwrap {display: none; }
#allfilteritems .filteritem .itembox .overlay.stacked:hover .centerbox .pop {display: inline-block; }
#allfilteritems .filteritem .itembox .overlay.stacked:hover .pop {-webkit-filter: drop-shadow(0px 0px 2px rgba(255,255,255,.9)); -moz-filter: drop-shadow(0px 0px 2px  rgba(255,255,255,.9)); -ms-filter: drop-shadow(0px 0px 2px  rgba(255,255,255,.9)); -o-filter: drop-shadow(0px 0px 2px  rgba(255,255,255,.9));}
#allfilteritems .filteritem .itembox .overlay.stacked .pop img {position:  relative; right:  -4px;}


#allfilteritems .itembox.flashlight {box-shadow: 0 0 40px gold;outline: 4px solid white; }
#allfilteritems .itembox.white.flashlight {box-shadow: 0 0 40px gold;outline: 4px solid limegreen; }
#allfilteritems .itembox.gray.flashlight {box-shadow: 0 0 40px gold;outline: 4px solid limegreen; }

  #allfilteritems .itembox.filterhide {display: none;}
  #allfilteritems .itembox.attackfilterhide {display: none;}

  #filterbar .count {display: inline-block; margin: -2px 0 0 10px; padding: 0px 7px 1px; background:  #e2e3e5; color: #383d41; border: 1px solid #d6d8db; border-radius: 10px; font-size: .8em;}
  #filterbar .active .count {background-color:  #ffffff}

  #filterbar .selectedguildname {display: inline-block; margin: -2px 0 0 10px; padding: 0px 7px 1px; background:  #e2e3e5; color: #383d41; border: 1px solid #d6d8db; border-radius: 10px; font-size: .8em;}
  #filterbar .active .selectedguildname {background-color:  #ffffff; font-weight: 700;}

  #filterbar .decwrap {position:  relative; top:  -2px;}
  #filterbar .decwrap img {position:  absolute; left: 10px;}
  #filterbar .decvalue {display: inline-block; margin: -2px 0 0 10px; padding: 0px 7px 1px 27px; color: #ffffff; border-radius: 10px; font-size: .8em;}
  #filterbar #rentedout .decvalue { border: 1px solid #ae7cff;
    background: #280c3a; /* Old browsers */
    background: -moz-linear-gradient(top, #280c3a 1%, #5f1e96 55%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #280c3a 1%,#5f1e96 55%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #280c3a 1%,#5f1e96 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#280c3a', endColorstr='#5f1e96',GradientType=0 ); /* IE6-9 */
  }

  #filterbar #rentedtome .decvalue { border: 1px solid #ff7c7c;
    background: #1e0000; /* Old browsers */
    background: -moz-linear-gradient(top, #1e0000 1%, #7e0000 48%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #1e0000 1%,#7e0000 48%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1e0000 1%,#7e0000 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e0000', endColorstr='#7e0000',GradientType=0 ); /* IE6-9 */
  }
  /*#filterbar .active .decvalue {background-color:  #ffffff}*/

  /*#filterbar #all .titlewrap {display:  none;}*/
  #filterbar #all .iconwrap {margin-top:  0px; margin-right:  7px;}

  .itemgroup {margin:  10px 10px; width:  100%; order:  2;}
  .itemgroup .titletab {color: #0c0c0c; font-weight: 600; background-color: #ffffff; border: 1px solid transparent; border-color: #323232; border-top-left-radius: .25rem; border-top-right-radius: .25rem; padding: 4px 15px; box-sizing: border-box; cursor: pointer; max-width: 320px; margin: 0 50px -1px; display: flex; justify-content: space-between; align-items: center; flex-wrap:  wrap;}
  .itemgroup .titletab.bottomborder {border-color: #323232;}
  .itemgroup .titletab .playername { display:  flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .itemgroup .count {display: inline-block; margin: 0 5px; padding: 0px 7px 1px; background:  #ffffff; color: #383d41; border: 1px solid #d6d8db; border-radius: 10px; font-size: .8em;}

  /*.itemgroup.fire { border:  1px solid #8b8b8b; border-radius: 0 10px 0 0; border-left: none; border-bottom:  none;}*/

  .itemgroup .decwrap {position:  relative; top:  -2px;}
  .itemgroup .decwrap img {position:  absolute; left: 5px;}
  .itemgroup .decvalue {display: inline-block; margin: 0 5px; padding: 0px 7px 1px 27px; background:  #ffffff; color: #383d41; border: 1px solid #d6d8db; border-radius: 10px; font-size: .8em;}
  .itemgroup .titletab i.las {display: inline-block; width: 32px; height:  32px; font-size:  32px; margin-right:  -10px;}
  .itemgroup .cardwrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;  padding: 10px; box-sizing: border-box; z-index:  1; position: relative; border-radius: .25rem; transition:  all 0.3s;}

  .itemgroup .cardwrap .stackwrap {background: rgba(200,200,100,.6) ;display:  inline-block; padding:  3px; margin:  4px; border: 1px dashed #e2e2e2; border-radius: 3px; min-width: 9px; min-height: 40px; box-sizing: border-box;}
  
  .itemgroup.collapsed {margin: 2px; order: 1; display: inline-block; width: initial;}
  .itemgroup.collapsed .titletab {margin:  0;  max-width: initial;}
  .itemgroup.collapsed .titletab .playername {font-size: .8em; margin-right: 6px;}
  .itemgroup.collapsed .titletab i {width: 24px; height: 24px; font-size: 24px;}
  .itemgroup.collapsed .decwrap {position:  relative; top:  -1px;}
  .itemgroup.collapsed .decwrap img {position:  absolute; left: 6px; max-height: 20px; width:  auto;}  
  .itemgroup.collapsed .decwrap .decvalue {padding-left:  22px;}
  .itemgroup.collapsed .cardwrap {padding-top: 0; padding-bottom: 0; height: 0; width:  0; overflow:hidden; border-color: transparent; }

  .itemgroup .titletab.splintername {color: #664d03;background:#fff3cd;  } 
  .itemgroup .titletab {color: #004085;background:#cce5ff;  }
  


  .groupfilter {background:  #404040;width: 100%;border-right: 1px solid #8b8b8b; border-radius:  0 0 10px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid #8b8b8b; padding:  10px 2% 0; box-sizing:  border-box; z-index:  1; position: sticky; top: 53px; z-index:  500;}
  .groupfilter .titletab {color: #0c0c0c; font-weight: 600;min-height: 38px;  border: 1px solid #8b8b8b; border-bottom:  none; border-color: #8b8b8b; border-top-left-radius: .25rem; border-top-right-radius: .25rem; padding: 4px 15px; box-sizing: border-box; width: calc((100% / 7) - 5px); margin: 0 5px 0 0; display: flex; justify-content: space-between; align-items: center; flex-wrap:  wrap; box-sizing: border-box;}
  .groupfilter .titletab i {margin: 0 5px; cursor: pointer;}
  .groupfilter .titletab.hidegroup {border-color: #303030;}
  .groupfilter .titletab .playername {font-size:  .85em; line-height:  1.3em; display:  flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-right: auto;}
  .groupfilter .count {display: inline-block; margin: 0 0px 0 5px; padding: 0px 7px 1px; background:  #ffffff; color: #383d41; border: 1px solid #d6d8db; border-radius: 10px; font-size: .8em;}
  .groupfilter .count.gold {background:  #ffba00; color: #000000; border: 1px solid #ffba00; }



  /*.groupfilter .titletab.splintername.Fire {color: #ffffff;background: transparent url("/img/tabs/fire.png") no-repeat top center; background-size: cover; padding: 5px 35px;} 
  .groupfilter .titletab.splintername.Death {color: #ffffff;background: transparent url("/img/tabs/death.png") no-repeat top center; background-size: cover; padding: 5px 35px; } 
  .groupfilter .titletab.splintername.Dragon {color: #ffffff;background: transparent url("/img/tabs/dragon.png") no-repeat top center; background-size: cover; padding: 5px 35px; } 
  .groupfilter .titletab.splintername.Earth {color: #ffffff;background: transparent url("/img/tabs/earth.png") no-repeat top center; background-size: cover; padding: 5px 35px; } 
  .groupfilter .titletab.splintername.Life {color: #ffffff;background: transparent url("/img/tabs/life.png") no-repeat top center; background-size: cover; padding: 5px 35px; } 
  .groupfilter .titletab.splintername.Neutral {color: #ffffff;background: transparent url("/img/tabs/neutral.png") no-repeat top center; background-size: cover; padding: 5px 35px; } 
  .groupfilter .titletab.splintername.Water {color: #ffffff;background: transparent url("/img/tabs/water.png") no-repeat top center; background-size: cover; padding: 5px 35px; } */


  .groupfilter .titletab.splintername.Fire {color: #ffffff;  padding: 5px 10px 5px 10px;
    background: #a60000;
    background: -moz-radial-gradient(center, ellipse cover,  #a60000 35%, #690005 80%, #3c001c 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #a60000 35%,#690005 80%,#3c001c 100%);
    background: radial-gradient(ellipse at center,  #a60000 35%,#690005 80%,#3c001c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a60000', endColorstr='#3c001c',GradientType=1 );  
  } 
  .groupfilter .titletab.splintername.Water {color: #ffffff; padding: 5px 10px 5px 10px;
    background: #0f0063;
    background: -moz-radial-gradient(center, ellipse cover,  #0f0063 35%, #10003f 80%, #1a002f 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #0f0063 35%,#10003f 80%,#1a002f 100%);
    background: radial-gradient(ellipse at center,  #0f0063 35%,#10003f 80%,#1a002f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0063', endColorstr='#1a002f',GradientType=1 );    
  }   
  .groupfilter .titletab.splintername.Earth {color: #ffffff; padding: 5px 10px 5px 10px; 
    background: #006900; 
    background: -moz-radial-gradient(center, ellipse cover,  #006900 35%, #003600 80%, #1a002f 100%); 
    background: -webkit-radial-gradient(center, ellipse cover,  #006900 35%,#003600 80%,#1a002f 100%);
    background: radial-gradient(ellipse at center,  #006900 35%,#003600 80%,#1a002f 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006900', endColorstr='#1a002f',GradientType=1 );     
  }   
  .groupfilter .titletab.splintername.Life {color: #ffffff; padding: 5px 10px 5px 10px;
    background: #595846; 
    background: -moz-radial-gradient(center, ellipse cover,  #595846 35%, #4c4a3d 80%, #424034 100%); 
    background: -webkit-radial-gradient(center, ellipse cover,  #595846 35%,#4c4a3d 80%,#424034 100%); 
    background: radial-gradient(ellipse at center,  #595846 35%,#4c4a3d 80%,#424034 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595846', endColorstr='#424034',GradientType=1 );     
  }   
  .groupfilter .titletab.splintername.Death {color: #ffffff; padding: 5px 10px 5px 10px;
    background: #482052; 
    background: -moz-radial-gradient(center, ellipse cover,  #482052 35%, #371f39 80%, #271e21 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #482052 35%,#371f39 80%,#271e21 100%); 
    background: radial-gradient(ellipse at center,  #482052 35%,#371f39 80%,#271e21 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482052', endColorstr='#271e21',GradientType=1 );    
  } 
  .groupfilter .titletab.splintername.Dragon {color: #ffffff; padding: 5px 10px 5px 10px; 
    background: #1e004a; 
    background: -moz-radial-gradient(center, ellipse cover,  #1e004a 35%, #100025 80%, #030007 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #1e004a 35%,#100025 80%,#030007 100%);
    background: radial-gradient(ellipse at center,  #1e004a 35%,#100025 80%,#030007 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e004a', endColorstr='#030007',GradientType=1 );     
  } 
  .groupfilter .titletab.splintername.Neutral {color: #ffffff; padding: 5px 10px 5px 10px; 
    background: #666970; 
    background: -moz-radial-gradient(center, ellipse cover,  #666970 35%, #3c3b43 80%, #272530 100%); 
    background: -webkit-radial-gradient(center, ellipse cover,  #666970 35%,#3c3b43 80%,#272530 100%); 
    background: radial-gradient(ellipse at center,  #666970 35%,#3c3b43 80%,#272530 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666970', endColorstr='#272530',GradientType=1 ); 
    height: 40px; overflow: hidden;   
  } 



  .itemgroup.collapsed .titletab {color: #383d41;background:#e2e3e5;}

/*#allcards {display:  flex; justify-content:  flex-start; align-items:  flex-start; flex-wrap: wrap;}
#allcards .imagewrapper {width:  12.5%; display:  inline-block;}*/

  /*.abilityoverlaybox .abilitywrap .abilitybutton {padding: 4px; max-width: 70px; box-sizing: border-box; cursor: pointer; display:  flex; justify-content: space-around; align-items: center; flex-wrap: wrap; box-sizing:  border-box;}*/

  .abilityoverlaybox .tablebox {display:  flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; box-sizing:  border-box; width:  100%;}
  .abilityoverlaybox .centerbox {display: inline-block;}
  .abilityoverlaybox .row {display:  flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .abilityoverlaybox .levelbox {font-size:  18px; position:  relative top:  2px;}
  .abilityoverlaybox .level {display:  inline-block; position:  relative; top:  -2px; color:  #ffffff;}
  .abilityoverlaybox i {display:  inline-block; position:  relative; top:  -2px;color: #ffffff}
  .abilityoverlaybox .abilitybutton .imagewrapper {margin-left:  3px; position:  relative; width:  35px; height:  35px; background:  #000000; border:  2px solid #ffffff; border-radius:  50%; box-sizing:  border-box; display:  flex; justify-content:  space-around; align-items:  center;}
  .abilityoverlaybox .abilitybutton .imagewrapper img {width: 20px; height:  20px;}


#barons #content .inner {width: 100%; max-width: 1600px;}
#barons #content .inner #topbox {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}


#topbox .winchance {font-size:  .8em; color:  #ffffff; text-shadow: 2px 2px 4px #000000;margin: 10px 0; font-weight:  600; display: block; text-align: center;}
#topbox {text-align: center;display: flex; justify-content:  space-around; align-items: stretch; flex-wrap:  wrap;  margin:  20px auto 0; position: relative;}
#topbox .namewrap {background: #303030; width: 250px; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box;transition: all 0.5s;}
#topbox .namewrap .imagewrapper {position:  relative; display:  inline-block;}
#topbox .namewrap .imagewrapper .overlay {display: block; position: absolute; top:  10px; left:  50%; transform: translateX(-50%); width: 100%;}
#topbox .namewrap #accountname { display: block; text-align:  center;  font-weight: 700; line-height:  1.3em; background: #cccccc; border: 1px solid #ffffff; color: #1b1b1b; margin: 15px auto 5px; padding: 5px 10px; border-radius: 5px; outline: 0px; box-sizing: border-box; }
#topbox #toolextension {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 10px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px;  margin-top:  5px; font-weight: 700; text-decoration: none;}
#topbox #toolextension:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}


#topbox .streamertool {width: 300px;background: #303030; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box; transition: all 0.5s;}
#topbox .streamertool .imagewrapper {display:  block; width:  100%;}

#topbox .streamertool.browserextension .imagewrapper img {border: 1px solid #8b8b8b;}


#namebox {text-align: center;display: flex; justify-content:  space-around; align-items: stretch; flex-wrap:  wrap;  margin:  20px auto 0; position: relative;}
#namebox .nagscreen {position:  absolute; top: 0; left:  0; width:  100%; height:  100%; background: rgba(119,0,0,.8); border-radius: 20px; z-index: 5000; display:  flex; justify-content: space-around; align-items: center;}
#namebox .nagscreen .nagtitle {color: #ffffff; font-size: calc(16pt + .5vw); font-weight:  700; text-shadow: 2px 2px 4px #000000; margin-bottom:  20px;}
#namebox .nagscreen .naginfo {color: #ffffff; font-size: 1.15em; font-weight:  400; padding:  0 20px;}
#namebox .namewrap {background: #303030; width: 250px; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box;transition: all 0.5s;}
#namebox .namewrap .imagewrapper {position:  relative; display:  inline-block;}
#namebox .namewrap .imagewrapper .overlay {display: block; position: absolute; top:  10px; left:  50%; transform: translateX(-50%); width: 100%;}
#topbox .namewrap #accountname,
#topbox .namewrap #landaccountname,
#topbox .namewrap #guildaccountname {display: block; box-sizing: border-box; text-align:  center;  font-weight: 700; line-height:  1.3em; background: #cccccc; border: 1px solid #ffffff; color: #1b1b1b; margin: 15px auto 5px; padding: 5px 10px; border-radius: 5px; outline: 0px;  }
#topbox .namewrap #submit,
#topbox .namewrap #landsubmit,
#topbox .namewrap #guildsubmit {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 10px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px;  margin-top:  5px; width: 150px;}
#topbox .namewrap #submit:hover,
#topbox .namewrap #landsubmit:hover,
#topbox .namewrap #guildsubmit:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}



#namebox #guildbutton {background: #303030; width: 300px; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box; transition: all 0.5s;}
#namebox #guildbutton .title {margin-top: 12px; font-weight:  600;}

#namebox .namewrap:hover {box-shadow:  0 0 8px #ffffff;}
#namebox #guildbutton:hover {box-shadow:  0 0 8px #ffffff;}



#barons .gametool {background: #303030; width: calc(25% - 40px); display: inline-block; border: 1px solid #8b8b8b; margin: 10px 20px; border-radius: 0px; padding: 0px; box-sizing: border-box; transition: all 0.5s;}
#barons .gametool .top {background: darkgreen; color: #ffffff; width: 100%; padding: 20px; text-align: center; box-sizing: border-box; font-size: 22px;  }
#barons .gametool .bottom {margin: 20px 0 10px;}

#barons .gametool.browserextension {order: 1;}
#barons .gametool.cardviewer {order: 2;}
#barons .gametool.landmanager {order: 3;}
#barons .gametool.guildmanager {order: 4;}

#barons .gametool.splinterlandstv {order: 5;}
#barons .gametool.splinterlandstv .bottom .imagewrapper {margin-bottom: 15px;}

#barons .gametool .winchance {font-size:  .8em; color:  #ffffff; text-shadow: 2px 2px 4px #000000;margin: 10px 0; font-weight:  600; display: block; text-align: center;}

#barons #streamertoolbox .gametool .top {background: darkblue}
#barons .gametool .bottom a {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 10px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px;  margin-top:  5px; text-decoration: none; white-space: nowrap;}
#barons .gametool .bottom a:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}
#barons #streamertoolbox .gametool .bottom .imagewrapper img {max-height: 200px; width: auto;}








#guildbutton #inputguildname {width:100%; display: block; text-align:  center;  font-weight: 700; line-height:  1.3em;background: #cccccc; border: 1px solid #ffffff; color: #1b1b1b; margin: 15px 10px 5px; padding: 5px 10px; border-radius: 5px; outline: 0px;}
#guildbutton #submitguild {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 10px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  150px; margin-top:  5px;}
#guildbutton #submitguild:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}


#guildbutton.stream .imagewrapper {width: 100%;}
#guildbutton #streamerlist {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 10px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  150px; margin-top:  5px;}
#guildbutton #streamerlist:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}

.hostProfileLinks img {width: 40px; height: 40px;}

.streamerWrap {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.streamerWrap .scheduleListItem {background: rgba(0,0,0,.7);width:calc(20% - 20px); border: 1px solid #e2e2e2; border-radius: 15px; padding: 10px; box-sizing: border-box; margin: 10px;}
.streamerWrap .scheduleListItem img.scheduleShowImg {height: 150px; width: auto; border-radius: 10px;}

.streamerWrap .hostProfileLinks {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.streamerWrap .hostProfileLinks > div {margin: 5px;}
.streamerWrap .scheduleShowBody {display: none;}
.streamerWrap .scheduleShowTags {display: none;}
.streamerWrap .hostcustomUrl {display: none;}
.streamerWrap .scheduleShowLanguage {font-size: .8em; color: #eeeeee; margin-top: 5px;}
.streamerWrap .scheduleHost > a { margin: 10px auto; padding: 5px 15px 6px; box-sizing:border-box; background: #1b1b1b; border:1px solid #c5700e; color: #ffffff; line-height:1em; display:inline-block; transition: all 0.3s;cursor: pointer; border-radius: 5px; text-decoration: none;}
.streamerWrap .scheduleHost > a:hover {background-color: #c5700e; border-color: #c5700e; color: #ffffff; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }





.alldonatebuttons.hide {display: none;}
.alldonatebuttons .centerbox {display: inline-block; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.alldonatebuttons .centerbox .lbbutton {display: inline-block; padding: 2px 15px; background: green; color: #ffffff; border-radius: 5px; font-size: .8em; box-sizing: border-box; margin-right: 20px; cursor: pointer; transition: all 0.3s;}
.alldonatebuttons .centerbox .lbbutton:hover {background-color: purple;}
.alldonatebuttons .centerbox .itemwrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.alldonatebuttons .centerbox .itemwrap .itembox {cursor: pointer; border: 1px solid #7d7a7a; border-radius: 5px; padding: 3px; box-sizing: border-box; margin: 4px 2px; transition: all 0.3s}
.alldonatebuttons .centerbox .itemwrap .itembox:hover { border-color: #f8cd31; }
.alldonatebuttons .centerbox .itemwrap .itembox img {width: 20px; height: 20px;}
.alldonatebuttons .centerbox #donatenote {margin-top: 0;}


#namebox .winchance {font-size:  .8em; color:  #ffffff; text-shadow: 2px 2px 4px #000000; font-weight:  600;}

/*#donate #donatebutton {background: #303030; width: 260px; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box; transition: all 0.5s;}
#donate #donatebutton .imagewrapper {display:  block; width:  100%;}
#donate #donatebutton .imagewrapper .itembox {zoom: 30%;}
#donate #donatebutton .title {margin-top: 12px; font-weight:  600;}*/
#donate #donatebutton #submitdonate {background: #f8cd31; border:1px solid #f8cd31; color: #1b1b1b; font-size: .8em; padding: 5px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  100px; ; display:  block; font-weight:  700;}
#donate #donatebutton #submitdonate:hover {background-color: #ca53f9; border-color: #ca53f9; color: #fefefe; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}
/*#donate #donatebutton:hover {box-shadow: 0 0 8px #ffffff;}*/
/*#donate #donatebutton .winchance {font-size:  .8em; color:  #ffffff; text-shadow: 2px 2px 4px #000000; font-weight:  600; }*/

#namebox #contestbutton {width: 100%; background: #252444; color:  #ffffff;  display: flex; justify-content:  space-between; align-items:  center; flex-wrap:  wrap; border:  1px solid #8d8d8d; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 23px; box-sizing:  border-box; transition: all 0.5s;}
#namebox #contestbutton .leftside {width:  240px; display:  inline-block; padding-right: 20px; border-right: 1px dashed #9139b4; box-sizing: border-box; }
#namebox #contestbutton .rightside {width:  calc(100% - 240px); display:  inline-block; box-sizing: border-box;}
#namebox #contestbutton h2 {color: #8ed5f1 ;font-size: calc(14pt + 1vw); font-family: "Metal Mania"; letter-spacing:  1.5px; font-weight: 400; text-transform: uppercase; padding-bottom: 10px; margin-bottom:  10px; border-bottom:  3px solid #8ed5f1; display:  inline-block;}
#namebox #contestbutton h3 {color: #ffffff; font-size: calc(14pt + .3vw);}
#namebox #contestbutton h5 {color: #ca53f9;font-size: calc(14pt + .2vw);}
#namebox #contestbutton h5 a {color: #cccccc; text-decoration: none;}
#namebox #contestbutton h5 a:hover {color: #ffffff; text-shadow: 2px 2px 4px #000000}
#namebox #contestbutton span {font-weight:  700;}
#namebox #contestbutton p {font-weight: 600; color: #e3e323;}
#namebox #contestbutton .imagewrapper {display:  block; width:  100%;}
#namebox #contestbutton .title {margin-top: 12px; font-weight:  600;}
#namebox #contestbutton #entercontest {background: #8ed5f1; border:1px solid #8ed5f1; color: #000000; font-size: .8em; padding: 5px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  150px; margin-top:  47px; display:  inline-block;}
#namebox #contestbutton #entercontest:hover {background-color: #ca53f9; border-color: #ca53f9; color: #ffffff; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
#namebox #contestbutton:hover {box-shadow: inset 0 0 10px #9139b4;}


#streamertoolbox {display:  flex; justify-content:  space-around; align-items:  stretch; flex-wrap:  wrap;}

#streamertoolbox .streamertool {background: #303030; width: 300px ; display: flex; justify-content:  space-around; align-items:  center; flex-wrap:  wrap; border:  1px solid #8b8b8b; margin: 10px 20px; border-radius: 15px;padding: 10px 10px 10px; box-sizing:  border-box; transition: all 0.5s;}

#streamertoolbox .streamertool .imagewrapper {display:  block; width:  100%;}

.browser-firefox #streamertoolbox .streamertool.one  .imagewrapper {-moz-transform: scale(.4); -moz-transform-origin: top center; height:  200px;}
#streamertoolbox .streamertool.one  .imagewrapper img {zoom: 40%;}
.browser-firefox #streamertoolbox .streamertool.two  .imagewrapper {-moz-transform: scale(.7);-moz-transform-origin: top center; height:  200px;}
#streamertoolbox .streamertool.two  .imagewrapper img {zoom: 70%;}


#streamertoolbox .streamertool .title {margin-top: 12px; font-weight:  600;}
#streamertoolbox .streamertool #gotostreamerframe {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  150px; margin-top:  5px; display:  block; font-weight:  400; text-decoration:  none;}
#streamertoolbox .streamertool #gotostreamerframe:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}
#streamertoolbox .streamertool:hover {box-shadow: 0 0 8px #ffffff;}
#streamertoolbox .streamertool .winchance {font-size:  .8em; color:  #ffffff; text-shadow: 2px 2px 4px #000000; font-weight:  600;}

#streamertoolbox .streamertool #gotostreameritembar {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 20px; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  250px; margin-top:  5px; display:  block; font-weight:  400; text-decoration:  none;}
#streamertoolbox .streamertool #gotostreameritembar:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}
#streamertoolbox .streamertool #gotostreamerspinner {background: #1b1b1b; border:1px solid #020202; color: #ffffff; font-size: .8em; padding: 5px 20px; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;cursor: pointer; border-radius: 5px; width:  250px; margin-top:  5px; display:  block; font-weight:  400; text-decoration:  none;}
#streamertoolbox .streamertool #gotostreamerspinner:hover {background-color: #f8cd31; border-color: #f8cd31; color: #1b1b1b; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); font-weight:  700;}



#namebox .gametool, 
#streamertoolbox .streamtool {width:  300px;box-sizing:  border-box;}

/**/




/* MENUBAR */
/*#menubar {width: 100%; transition: all 0.4s; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; box-sizing:  border-box; }
#menubar .itembox {margin: 0 10px; box-sizing: border-box; transition: all 0.4s; cursor: pointer; position: relative; display: inline-block;}
#menubar .itembox .imagewrapper img {transition: all 0.4s;}
#menubar .itembox .titleoverlay {position: absolute; top: 50%; left:50%; transform: translateY(-50%) translateX(-50%); min-width: 100%; border-radius: 15px; background: rgba(0,0,0,.8); color: #ffffff;  letter-spacing: 1.5px; padding: 1px 10px; text-align: center; transition: all 0.4s; opacity: 0; box-sizing:  border-box;}
#menubar .itembox:hover .titleoverlay {opacity: 1;}
#menubar .itembox:hover .imagewrapper img {transform: scale3d(1.1, 1.1, 1.1);}*/


/* MODALS */
#loginModal {background: rgba(0,0,0,.8);width:  100vw; height: 100vh; position:  fixed; top:  0; left:  0; display:  flex; justify-content:  space-around; align-items:  center; z-index: 99999;}

#loginModal .forgeModal {background:  #ffffff; box-shadow: 2px 2px 4px #000000;width: 100%; max-width:  600px; height: 400px; position:  relative; overflow: hidden; border:  1px solid #1b1b1b;}
#loginModal .forgeModal .forgeModal-body { margin: 0; position: relative;}

#loginModal .wrap h1 {color: #ffffff; text-shadow: 2px 2px 4px #000000;  width: 100%; margin: -10px 0 0 0; padding: 20px 0 15px;box-sizing:  border-box;
  background: #2b2b2b; font-size: calc(14pt + .7vw);
  border-bottom:  1px solid #000000;
}
#loginModal .wrap .textwrap {color: #1b1b1b; width: 100%; text-align: center; font-size: 3vh; font-weight: 600; margin: 4vh 0 0; padding-bottom: 20px; }
#loginModal .wrap .textwrap button {color: #ffffff; background-color: #1b1b1b; border: 1px solid #1b1b1b;  display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; padding: .375rem 1.75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: all 0.4s; text-transform:  uppercase; }
#loginModal .wrap .textwrap button:hover {background-color: #9139b4; border-color: #9139b4; box-shadow: 2px 2px 4px #1b1b1b;}
#loginModal .wrap .textwrap span {margin: 0 0 0 15px;}
#loginModal .wrap .textwrap .buttonwrap {margin-top: 15px;}

#loginModal .wrap.keychain h1 {
  background: #6b0a1e; /* Old browsers */
  background: -moz-linear-gradient(top, #6b0a1e 16%, #7c0d73 89%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #6b0a1e 16%,#7c0d73 89%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #6b0a1e 16%,#7c0d73 89%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b0a1e', endColorstr='#7c0d73',GradientType=0 ); /* IE6-9 */  
}
#loginModal .wrap.keychain .imagewrapper {display:  inline-block;}
#loginModal .wrap.keychain .imagewrapper a {color: #1b1b1b; text-decoration: none; display: flex;justify-content: flex-start; align-items: center; transition: all 0.3s;}
#loginModal .wrap.keychain .imagewrapper a:hover {transform: scale3d(1.1, 1.1, 1.1);}

#loginModal .closewrapper {position: absolute; top: 1.0vw; right: 1.04vw;}

#loginModal .closewrapper .btn {color: #ffffff; background-color: transparent; border: 1px solid #ffffff;  display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: all 0.4s}
#loginModal .closewrapper .btn:hover {background-color: #1b1b1b; box-shadow: 2px 2px 4px #000000;}

#loginnote {font-size: 14pt; color: #cb0d34; margin-top: 20px; }



#donateModal {background: rgba(0,0,0,.8);width:  100vw; height: 100vh; position:  fixed; top:  0; left:  0; display:  flex; justify-content:  space-around; align-items:  center; z-index: 99999;}
#donateModal .donateModal {background:  #1b1b1b; color:  #ffffff; box-shadow: 2px 2px 4px #000000;width: 100%; height: 100%; max-width:  96%; max-height: 96% ; position:  relative; overflow-y: scroll; overflow-x: hidden; border:  1px solid #1b1b1b; padding:  70px 25px 25px 25px; box-sizing: border-box;}
#donateModal .itemwrap {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap:  wrap;}
#donateModal .itemwrap .titlebox {width:  100%; text-align: center; margin-bottom:  15px;}
#donateModal .itemwrap .itembox {margin: 5px;padding:  20px; border:  1px solid #404040;  border-radius: 20px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; transition: all 0.3s; display:  inline-block;}
#donateModal .itemwrap .itembox:hover {box-shadow:  2px 2px 4px #000000; background-color: #7c0d73; cursor: pointer; }
#donateModal .itemwrap .itembox .imagewrapper {display:  block; text-align: center;}
#donateModal .itemwrap .itembox .textwrap {font-size: 2vw; font-weight: 600; text-align:  center; display:  block;}
#donateModal .closewrapper {position: absolute; top: 15px; right: 15px; z-index: 2;}
#donateModal .closewrapper.spins {position: absolute; top: 15px; right: 15px; left:  15px; display:  flex; justify-content:  space-around;z-index: 1;}
#donateModal .closewrapper .btn {color: #ffffff; background-color: #8b0000; border: 1px solid red;  display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: all 0.4s;cursor: pointer;}
#donateModal .closewrapper .btn:hover {background-color: red; color: #ffffff ; border-color: red; box-shadow: 2px 2px 4px #000000;}
#donatenote {font-size: 12px; color: #8ed5f1; font-weight: 600; margin-top: 20px; text-align: center;position: relative;}
#donatenote .overlaybox {padding:  15px 30px; position: absolute; top:  0;background: rgba(0,0,0,.9); border-radius: 15px; z-index:  20; left:  50%; transform:  translateX(-50%);}
#donatenote h4.loser {color:  red}
#donatenote h4.winner {color:  white}
#donatenote .imagewrapper {display:  inline-block; margin-top:  20px;}
#donatenote .imagewrapper span {margin-left:  10px;}
#donatenote .imagewrapper a {color: #ffffff; text-decoration: none; display: flex;justify-content: flex-start; align-items: center; transition: all 0.3s;}
#donatenote .imagewrapper a:hover {transform: scale3d(1.1, 1.1, 1.1);}

#donateModal .spinwrapper {position: absolute; top: 15px; right: 15px; left:  15px; display:  flex; justify-content:  space-around; align-items:  center; z-index: 1; cursor: default;}
#donateModal .spinwrapper .centerbox {display:  flex; justify-content:  space-between; align-items:  center;}
#donateModal .spinwrapper #iconbox {display:  inline-block; margin-right:  -13px; z-index:  2;}
#donateModal .spinwrapper .count {color: #000000; background-color: yellow; border: 1px solid yellow;  display: inline-block; font-weight: 700; text-align: center; vertical-align: middle; padding: 5px 15px 5px 20px; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: all 0.4s ; display: inline-block; margin-top:  -4px;}

#donateModal #spinbutton {display:  flex; justify-content: space-around; align-items:  flex-start; margin-top: 20px; margin-left:  -145px;}
#donateModal #spinbutton .submitSpin {color: #000000; background-color: yellow; border: 1px solid yellow;  display: inline-block; font-weight: 700; text-align: center; vertical-align: middle; padding: 10px 30px; font-size: 1.1em; line-height: 1.5em; border-radius: 10px; transition: all 0.4s; cursor:  pointer;}
#donateModal #spinbutton .submitSpin.disabled {background-color: #404040; color: #cccccc ; border-color: #cccccc; cursor: not-allowed;}

#donateModal #spinbox {display:  flex; justify-content:  space-around; align-items:  flex-start; margin-top:  15px;}
#donateModal #spinbox .centerbox {position:  relative; display:  flex; align-items: flex-start; justify-content: space-between; flex-wrap:  wrap; width: 100%; max-width: 1200px; }
#donateModal #spinbox .centerbox .leftside {display:  inline-block; width:  100%; max-width:  500px; padding: 15px; margin-bottom:  20px; box-sizing:  border-box; border:  1px solid #cccccc; border-radius: 15px;}

#donateModal #winspincard {zoom: 40%;}
#donateModal #spinbox .centerbox .leftside .info h4 {color:  #cdcd00; width:  100%; text-align:  center;}
#donateModal #spinbox .centerbox .leftside .info {color: #f0f0f0;line-height:  1.2em;}
#donateModal #spinbox .centerbox .leftside .info strong {color:  yellow;}
#donateModal #spinbox .centerbox .leftside .disclaim {color: #686868;font-size:  .7em; line-height:  1.1em; font-weight: 600;}

#donateModal #spinbox .centerbox .rightside {display:  inline-block; width:  100%; max-width:  650px;}
#donateModal #spinbox .centerbox .rightside .canvaswrap {position:  relative; max-width: 500px;}
/*#donateModal #spinbox .centerbox .rightside .canvaswrap:after {content:  " "; display: inline-block; width:  30px; background: #ffffff; height: 1px; position:  absolute; top: 50%; right:  -15px; transform: translateY(-50%);}*/

#donateModal #spinbox .centerbox .rightside .canvaswrap .sword {position: absolute; top:  50%; right: 0; transform: translateY(calc(-50% + 4px)) translateX(93%);}





#keychainModal {background: rgba(0,0,0,.8);width:  100vw; height: 100vh; position:  fixed; top:  0; left:  0; display:  flex; justify-content:  space-around; align-items:  center; z-index: 99999;}
#keychainModal .keychainModal {background:  #1b1b1b; color:  #ffffff; box-shadow: 2px 2px 4px #000000;width: 40vw; height: 40vh; position:  relative; overflow: hidden; border:  1px solid #1b1b1b; padding:  70px 25px 25px 25px; box-sizing: border-box;}
#keychainModal .closewrapper {position: absolute; top: 1.0vw; right: 1.04vw;}
#keychainModal .closewrapper .btn {color: #e2e2e2; background-color: #333333; border: 1px solid #404040;  display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: all 0.4s}
#keychainModal .closewrapper .btn:hover {background-color: #ffffff; color: #000000; border-color: #000000; box-shadow: 2px 2px 4px #000000;}
#keychainnote {font-size: 16pt; color: #8ed5f1; font-weight: 600; margin-top: 20px;  width:  100%; text-align: center;}



#leaderboard.hide {opacity: 0; z-index: -20000;}
#leaderboard {color: #ffffff; position: absolute; top: 0;left: 0; width: 100%; height: 100%; z-index: 200;opacity: 1;  padding: 0;}
#leaderboard .inner {background: linear-gradient(90deg, rgb(0, 65, 74) 0%, rgba(0, 13, 15, 0.9) 100%) 0% 0% no-repeat padding-box padding-box transparent; border: 2px solid rgb(255, 237, 160); border-radius: 20px; position: relative; margin-top: 80px; height: calc(100vh - 120px); overflow-y: scroll;}

#leaderboard .inner .closeleaderboard {background: red; color: #ffffff; cursor: pointer; position: absolute; top: 15px; right: 20px; width: 20px; height: 20px; border-radius: 5px; display: flex; justify-content: space-around; align-items: center; font-size: 12px; transition: all 0.3s; opacity: .6; z-index: 300;}
#leaderboard .inner .closeleaderboard:hover {opacity: 1;}
#leaderboard h2 {color: #ffffff; }
#leaderboard .inner .itemwrap {width: 900px; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; margin: 0 auto; padding: 4vw; box-sizing: border-box;}
#leaderboard .inner .itemwrap .row {width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid rgb(255, 237, 160);}
#leaderboard .inner .itemwrap .row .col {width: 33.3%; text-align: center; font-size: 24px; line-height: 1.3em; display: flex; justify-content: center; align-items: center; }
#leaderboard .inner .itemwrap .row .col .icon {display: inline-block; line-height: 0; margin-right: 10px;}
#leaderboard .inner .itemwrap .row .col .value {display: inline-block;}

#leaderboard .inner .itemwrap .row .col.name {text-align: left;}
#leaderboard .inner .itemwrap .row.header {color: rgb(255, 237, 160); font-weight: 600; font-size: 28px;}

/*#footer1 {color: #ffffff; background: #2b2b2b; border-top: 1px solid #e2e2e2; font-weight: 600; font-size: .9em; padding:  1px 0;}*/



@media only screen and (min-width: 1921px) {
  body { display: block; margin: 0 auto;}
}

@media only screen and (max-width: 1650px) {
  /*#allfilteritems .filteritem .itembox {width: 11.1%}*/
}

@media only screen and (max-width: 1500px) {
  /*#allfilteritems .filteritem .itembox {width: 12.5%}*/
}

@media only screen and (max-width: 1350px) {
  /*#allfilteritems .filteritem .itembox {width: 14.28%}*/
}

@media only screen and (max-width: 1200px) {
  /*#allfilteritems .filteritem .itembox {width: 16.6%}*/
}

@media only screen and (max-width: 1000px) {
  /*#allfilteritems .filteritem .itembox {width: 20%}*/
  #sortbar .sortwrap {padding:  0; border-bottom: 1px dashed #e2e2e2; box-sizing:  border-box; width:  100%;justify-content: space-around;}
  #sortbar .sortwrap .titlebox {width:  100%; max-width:  100%; text-align: center; margin:  10px 0 0 0;box-sizing: border-box; display:  flex; justify-content: space-around; }

  #sortbar .stickywrap {padding:  0 0 15px 0; border-bottom: 1px dashed #e2e2e2; box-sizing:  border-box; width:  100%;justify-content: space-around;}
  #sortbar .stickywrap .titlebox {width:  100%; max-width:  100%; text-align: center; margin:  10px 0 0 0;box-sizing: border-box; display:  flex; justify-content: space-around; }

  #sortbar .attackwrap {padding:  0 0 15px 0; border-bottom: 1px dashed #e2e2e2; box-sizing:  border-box; width:  100%;justify-content: space-around;}
  #sortbar .attackwrap  .titlebox {width:  100%; max-width:  100%; text-align: center; margin:  10px 0 0 0;box-sizing: border-box; display:  flex; justify-content: space-around; }

  #abilitybar .abilitywrap {padding: 0px 10px 0 10px; box-sizing:  border-box; width:  100%; justify-content: space-around;}
  #abilitybar .abilitywrap .titlebox {width:  100%; max-width:  100%; text-align: center; margin:  10px 0 0 0;box-sizing: border-box; display:  flex; justify-content: space-around; }
  #abilitybar .abilitywrap .itemswrap {width:  100%;}
}


@media only screen and (max-width: 700px) {
  #donate .titlebox {font-size: 18px; text-align:  center;}
  #donate .donatewrap .contentbox img {height: 32px; width:  auto;}
  #donate .donatewrap .contentbox .titlebox2 {font-size: 16px;}
}