.padtop {padding-top: 20px;}
.padbot {padding-bottom: 20px;}
.padbotx2 {padding-bottom: 40px;}
.padbotx5 {padding-bottom: 100px;}
.alert-margin {margin-bottom: 52px;}
.fa-5 {font-size: 8em;}
.mar30 {margin-bottom: 35px !important;}
/****************************************/

body.ct-navbar--fixedTop .navbar {
    background: url(../images/og.jpg) center -250px no-repeat;
}

body.ct-navbar-isTransparent-toInverse.ct-navbar--fixedTop .navbar {
    background: transparent;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

.login_service {
    text-align: center;
}

h3.login-header {
    text-align: center;
}

.captcha{
    margin-left: 140px;
}

#user-verifycode-image, #hhform-verifycode-image {
    padding-left: 0;
    padding-right: 0;
    float: left;
    min-height: 1px;
}

div.service{
    text-align: center;
    padding-top:70px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}

div.service a {
    color:#fff;
}

div.service a i {
    padding-bottom: 20px;
}

div.container.home {
    background: url(../images/bg.png);
    padding:30px;
    color:#fff;
    line-height: 1.8;
}
form#construct-form {
    display: inline-block;
    float: right;
    margin-right: 5px;
    line-height: 55px;
}
.btn-lg2 {
    border-width: 2px;
    border-color: transparent !important;
    padding: 0px 25px !important;
    line-height: 56px;
    font-size: 24px;
}
.btn-lg2.btn-primary:hover {
    border-color: #22cbe8 !important;
}
.btn-lg2.btn-success:hover {
    border-color: #00c680 !important;
}
.ct-btn--rounded.btn-lg2 {
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    -webkit-border-top-left-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-topleft: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.process-block {
    padding:30px 0 150px 0;
}
p.head {
    font-size: 24px;
    padding: 20px 10px 5px 10px;
    font-weight: bold;
}
.steps img {
    width: 75%;
}

div.quick-class {text-align: center;}
div.quick-class img {width:25%; border:3px solid transparent;}
div.quick-class img.active {border:3px solid #6799D7;}

.fil {margin-left: 0px !important; background: transparent !important; padding:5px !important;}
.fil-head {display: block;
    padding: 10px 10px 10px 10px !important;
    font-size: 24px !important;
    text-align: center;
    position: relative;
    border-width: 1px;
    border-style: solid;}
.fil-head {
    color:#fff !important;
}
.fil-head.collapsed{
    color:#00b7ff !important;
}
#accordion, #accordion2 {margin-top:15px;}
.modal-z {z-index:9999 !important;}
div.ttl { margin:30px 15px 10px 15px;}
p.ttl label {display: block; text-align: center; font-size: 14px;}

.media-dark {background: #000 !important;}

div.view-deck ul.cards-list {
    list-style-type: none;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 0 20px 0;
    width:266px;
    display: block;
}

div.view-deck ul.cards-list li {
    background: #111;
    -webkit-box-shadow: 0 0 0 1px #000;
    box-shadow: 0 0 0 1px #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #aaa;
    display: block;
    line-height: 30px;
    margin: 0;
    position: relative;
}

div.view-deck ul.cards-list li.common {
    color: #fff
}

div.view-deck ul.cards-list li.rare {
    color: #0070dd
}

div.view-deck ul.cards-list li.epic {
    color: #a335ee
}

div.view-deck ul.cards-list li.legendary {
    color: #ff8000
}

div.view-deck ul.cards-list li:hover:after {
    background: rgba(255, 255, 255, 0.1);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

div.view-deck ul.cards-list .image {
    background-position: 50% 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    height: 100%;
    top: 0;
    width: 50%;
}

div.view-deck ul.cards-list .image:after {
    background-image: -webkit-linear-gradient(0deg, #111, transparent);
    background-image: -moz-linear-gradient(0deg, #111, transparent);
    background-image: -o-linear-gradient(0deg, #111, transparent);
    background-image: -ms-linear-gradient(0deg, #111, transparent);
    background-image: linear-gradient(90deg, #111, transparent);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

div.view-deck ul.cards-list .content {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    position: relative
}

div.view-deck ul.cards-list .mana {
    background: #15a;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    width: 30px
}

div.view-deck ul.cards-list .name {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0 10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}
div.view-deck ul.cards-list .name.common {
    color: #fff
}

div.view-deck ul.cards-list .name.rare {
    color: #0070dd
}

div.view-deck ul.cards-list .name.epic {
    color: #a335ee
}

div.view-deck ul.cards-list .name.legendary {
    color: #ff8000
}

div.view-deck ul.cards-list .count {
    background: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffd700;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 30px;
    padding: 0 10px;
    text-align: center
}
#tooltip {position: absolute; z-index:9999; left:-9999px; top:-9999px;}
.bar-block {height:230px; position: relative; margin-top:15px;}
.bar-block > span {display: block; text-align: center; font-size: 16px; font-weight: bold;}
.bar-block > div {position: absolute; bottom:0;left: 50%;}
.bar {display: inline-block; width:14px; margin-right:1px; position: relative; vertical-align: bottom; margin-top:20px; border-bottom: 1px solid #111; border-right: 1px solid #111;}
.bar em {font-size: 12px;font-weight: bold;left: -5px;position: absolute;right: -5px;text-align: center;bottom: -25px;}
.bar span {font-size: 12px;font-weight: bold;left: -5px;position: absolute;right: -5px;text-align: center;top: -25px;}
.bar-0 {height:0;}
.bar-1 {height:20px;}
.bar-2 {height:40px;}
.bar-3 {height:60px;}
.bar-4 {height:80px;}
.bar-5 {height:100px;}
.bar-6 {height:120px;}
.bar-7 {height:140px;}
.bar-8 {height:160px;}
.bar-9 {height:160px;}
.bar-10 {height:160px;}
.bar-11 {height:160px;}
.bar-12 {height:160px;}
.bar-13 {height:160px;}
.bar-14 {height:160px;}
.bar-15 {height:160px;}
.bar-16 {height:160px;}
.bar-17 {height:160px;}
.bar-18 {height:160px;}
.bar-19 {height:160px;}
.bar-20 {height:160px;}

.block-mana .bar {background:#3968b8;}
.popover .bar {background:#3968b8;}
.popover .small_mana {padding-bottom: 20px;}
.popover .bar em, .popover .bar span {color:#2c2c2c;}
.block-mana .bar.hover {background: #314990;border-bottom: 1px solid #2c2c2c; border-right: 1px solid #2c2c2c;}
.block-hp .bar {background:#e53c29;}
.block-hp .bar.hover {background: #b33026;border-bottom: 1px solid #2c2c2c; border-right: 1px solid #2c2c2c;}
.block-at .bar {background:#e4b416;}
.block-at .bar.hover {background: #ad7f16;border-bottom: 1px solid #2c2c2c; border-right: 1px solid #2c2c2c;}

.preview img {display: block; margin: 0 auto; width: 120px; border:1px solid #111;}
.info {margin-bottom: 20px;}
.view-deck h3 {margin-bottom:50px;}
.view-deck span.label {font-size:14px; padding:0 7px 0 0 !important;}
span.up, span > i.fa-thumbs-up, i.up {color:#5cb85c;}
span.down, span > i.fa-thumbs-down, i.down {color:#d9534f;}
.small-info {line-height: 40px;}

.view-mana {text-align: center; color:#fff;}
.view-mana i {cursor: pointer;}

#vote-up span, #vote-down span {font-weight: bold;}

.buttons > div {padding:0 !important;}

.related {
    margin-top:50px;
}
.related.big {
    margin:5px 0 25px 0;
}
.related .head-top {
    padding: 0 !important;
    margin: 15px 0 20px 0 !important;
    font-size: 26px;
}
.related-head {
    padding: 0 !important;
    margin: 15px 0 30px 0 !important;
    font-size: 26px;
}
.related-item {
    display: block;
    height: 40px;
    position: relative;
    background: #303030;
    box-shadow: 0 1px 2px #000;
    margin: 0 0 5px;
    white-space: nowrap;
}
.related-item.big {
    height: 60px;
}
.related-item span.title {
    height: 40px;
    left: 110px;
    width:40%;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    text-align: left;
    text-overflow: ellipsis;
    top: 0;
}
.related-item.big span.title{
    height: 60px;
    line-height: 60px;
}
.related-item span.bg {
    left: 0;
    height:40px;
    opacity: .8;
    position: absolute;
    top: 0;
    width: 30%;
    z-index: 1;
}
.r-table {position: relative; padding-bottom: 40px;}
.r-table > a {position: absolute; z-index: 1000;}
.offset-2 {left:16.66666667%;}
.offset-4 {left:34.33333333%;}

.related-item.big span.bg{
    height:60px;
}
/*.related-item span.bg:after{
    background-image: -webkit-linear-gradient(180deg, #111, transparent);
    background-image: -moz-linear-gradient(180deg, #111, transparent);
    background-image: -o-linear-gradient(180deg, #111, transparent);
    background-image: -ms-linear-gradient(180deg, #111, transparent);
    background-image: linear-gradient(90deg, #111, transparent);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}*/
.related-item span.bg.druid {
    background: url('../images/malfurion_100.jpg') left center no-repeat;
}
.related-item span.bg.warrior {
    background: url('../images/garrosh_100.jpg') left center no-repeat;
}
.related-item span.bg.shaman {
    background: url('../images/thrall_100.jpg') left center no-repeat;
}
.related-item span.bg.mage {
    background: url('../images/jaina_100.jpg') left center no-repeat;
}
.related-item span.bg.rogue {
    background: url('../images/valeera_100.jpg') left center no-repeat;
}
.related-item span.bg.priest {
    background: url('../images/anduin_100.jpg') left center no-repeat;
}
.related-item span.bg.hunter {
    background: url('../images/rexxar_100.jpg') left center no-repeat;
}
.related-item span.bg.warlock {
    background: url('../images/guldan_100.jpg') left center no-repeat;
}
.related-item span.bg.paladin {
    background: url('../images/uther_100.jpg') left center no-repeat;
}
.related-item span.bg.demonhunter {
    background: url('../images/demonhunter_100.jpg') left center no-repeat;
}
.related-item span.bg.custom {
    background: url('../images/custom_100.jpg') left center no-repeat;
}
.related-item span.bg.battleground {
    background: url('../images/battleground_100.jpg') left center no-repeat;
}
.related-item span.rating {
    line-height: 40px;
    position: absolute;
    right: 10px;
    text-align: right;
    text-decoration: none;
    top: 0;
    z-index: 1;
    height: 40px;
    display: block;
}
.related-item.big span.rating{
    line-height: 60px;
    height: 60px;
}
#rating tbody > tr > th, #rating tbody > tr > td {padding:10px 5px !important;}
#datatbl tbody > tr > th, #datatbl tbody > tr > td {padding:10px 5px !important;}
.modal.fade.in {background: rgba(0,0,0,0.4);}
.modal {z-index:9999 !important;}
.ct-socials {float: right !important;}
/**************************************** CON *************************************************/

body {
    margin: 0
}

#deckbuilder {
    background: #000;
    color: rgba(255, 255, 255, 0.85);
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;*/
    font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    height: 100%;
    margin: 0;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*position: absolute;*/
}

#deckbuilder h1 {
    font-size: 22px;
    font-weight: bold;
}

#deckbuilder *::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.15);
    height: 10px;
    width: 10px
}

#deckbuilder *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15)
}

#deckbuilder a {
    color: #00b7ff
}

#deckbuilder input {
    font-family: inherit;
    font-size: inherit
}

#deckbuilder .gradient-free, #deckbuilder .gradient-common {
    background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2), transparent);
    background: -moz-radial-gradient(rgba(255, 255, 255, 0.2), transparent);
    background: -o-radial-gradient(rgba(255, 255, 255, 0.2), transparent);
    background: -ms-radial-gradient(rgba(255, 255, 255, 0.2), transparent);
    background: radial-gradient(rgba(255, 255, 255, 0.2), transparent)
}

#deckbuilder .gradient-rare {
    background: -webkit-radial-gradient(rgba(0, 112, 221, 0.2), transparent);
    background: -moz-radial-gradient(rgba(0, 112, 221, 0.2), transparent);
    background: -o-radial-gradient(rgba(0, 112, 221, 0.2), transparent);
    background: -ms-radial-gradient(rgba(0, 112, 221, 0.2), transparent);
    background: radial-gradient(rgba(0, 112, 221, 0.2), transparent)
}

#deckbuilder .gradient-epic {
    background: -webkit-radial-gradient(rgba(163, 53, 238, 0.2), transparent);
    background: -moz-radial-gradient(rgba(163, 53, 238, 0.2), transparent);
    background: -o-radial-gradient(rgba(163, 53, 238, 0.2), transparent);
    background: -ms-radial-gradient(rgba(163, 53, 238, 0.2), transparent);
    background: radial-gradient(rgba(163, 53, 238, 0.2), transparent)
}

#deckbuilder .gradient-legendary {
    background: -webkit-radial-gradient(rgba(255, 128, 0, 0.2), transparent);
    background: -moz-radial-gradient(rgba(255, 128, 0, 0.2), transparent);
    background: -o-radial-gradient(rgba(255, 128, 0, 0.2), transparent);
    background: -ms-radial-gradient(rgba(255, 128, 0, 0.2), transparent);
    background: radial-gradient(rgba(255, 128, 0, 0.2), transparent)
}

#deckbuilder .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;*/
    line-height: 40px;
    overflow: hidden;
}

#deckbuilder .header a {
    color: inherit;
    text-decoration: none;
}

#deckbuilder .header a:hover {
    color: #fff
}

#deckbuilder .header h1 {
    font-size: 1em;
    /*letter-spacing: 1px;
    margin: 0;*/
    text-transform: uppercase;
    float:left;
    margin-left: 15px;
}

#deckbuilder .header p {
    margin: 0;
    float:right;
    padding-right: 5px;
    line-height: 55px;
}
#deckbuilder .header a#sbm {
    margin-left: 5px;
}

#deckbuilder .header p .arena {
    display: inline-block !important;
}

#deckbuilder .header input {
    margin: 0 0 0 1em;
    vertical-align: middle
}

#deckbuilder .header span {
    margin: 0 0 0 1em
}

#deckbuilder .header label {
    margin: 0 0 0 .25em
}

#deckbuilder .header .author {
    color: #696969
}

#deckbuilder .content {
    /*-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto*/
}

#deckbuilder .builder {
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex*/
}

#deckbuilder .heroes {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 2em auto 0 auto;
    text-align: center;
    width: 40%;
}

#deckbuilder .heroes ul {
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;*/
    display: block;
    /*-webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

#deckbuilder .heroes li {
    cursor: pointer;
    /*-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;*/
    margin: 10px;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    display: inline-block;
}

#deckbuilder .heroes li:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

#deckbuilder .heroes li:hover .name {
    -webkit-transition: all 0.2s 0.2s;
    -moz-transition: all 0.2s 0.2s;
    -o-transition: all 0.2s 0.2s;
    -ms-transition: all 0.2s 0.2s;
    transition: all 0.2s 0.2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

#deckbuilder .heroes li:active {
    -webkit-transform: scale(.97);
    -moz-transform: scale(.97);
    -o-transform: scale(.97);
    -ms-transform: scale(.97);
    transform: scale(.97)
}

#deckbuilder .heroes a {
    color: inherit;
    text-decoration: none
}

#deckbuilder .heroes img {
    display: block;
    visibility: hidden;
}

#deckbuilder .heroes img.loaded {
    -webkit-animation: fadeInRotateInY 1s;
    -moz-animation: fadeInRotateInY 1s;
    -o-animation: fadeInRotateInY 1s;
    -ms-animation: fadeInRotateInY 1s;
    animation: fadeInRotateInY 1s;
    visibility: visible
}

#deckbuilder .heroes .name {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #fff;
    display: block;
    font-weight: bold;
    left: 0;
    padding: .5em 0;
    position: absolute;
    right: 0;
    text-shadow: 0 0 1px #000;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}

#deckbuilder .heroes button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    padding: 0;
}

#deckbuilder .heroes button:hover {
    color: #fff
}

#deckbuilder .heroes p {
    padding: 0 10px;
    text-align: right
}

#deckbuilder .cards {
    /*-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;*/
    overflow: auto;
    text-align: center;
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    -ms-transition: background-image 0.2s;
    transition: background-image 0.2s;
}

#deckbuilder .cards h1 {
    margin-top: 2em;
    margin-bottom: 0
}

#deckbuilder .cards img {
    display: block;
    pointer-events: none
}

#deckbuilder .cards li {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    transition: opacity 0.2s;
    z-index: 0
}

#deckbuilder .cards li:hover:before {
    bottom: 0;
    -webkit-box-shadow: 0 0 12px 6px #fff;
    box-shadow: 0 0 12px 6px #fff;
    content: '';
    left: 0;
    margin: 20px;
    margin-bottom: 23px;
    margin-top: 53px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

#deckbuilder .cards li:active {
    -webkit-transform: scale(.98);
    -moz-transform: scale(.98);
    -o-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

#deckbuilder .cards li.unavailable {
    cursor: default;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50)
}

#deckbuilder .cards li.unavailable:active {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none
}

#deckbuilder .cards ul {
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

#deckbuilder .deck {
    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;*/
    /*border-right: 1px solid rgba(255, 255, 255, 0.15);*/
    width: 266px;
    float:left;
}
.navbar-toggle2{
    background-color: #15a;
    width: 55px;
    border: none;
    float:left;
    display: none;
}
.navbar-toggle2 i {
    font-size: 2em;
    line-height: 55px;
}
@media (max-width: 767px) {
    .navbar-toggle2{
        display: block;
    }
    #deckbuilder .deck{
        display: none;
    }
    #deckbuilder .header h1 {
        display: none;
    }
    #deckbuilder .header p .dust {
        
    }
    #deckbuilder .header p {
        padding-right: 3px;
    }
    #deckbuilder .header label{
        margin: 0 0 0 2px;
    }
    #deckbuilder .header span {
        margin-left:2px;
    }
    #deckbuilder .header p a#sbm {
        margin-left: 3px;
    }
    #deckbuilder .deck-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right:auto;
        bottom: 0;
        width: 266px;
        max-height: 100%;
        overflow: hidden;
        float: none;
        display: none;
        padding-top: 100px;
        overflow-y: scroll;
    }
    body.snapjs-left #deckbuilder .deck-mobile{
        display: block;
    }

    #cont-builder {
        z-index: 3;
        position: relative;
        overflow: hidden;
        background-color:#111;
    }
}
@media (min-width: 767px) {
    #deckbuilder .deck-mobile {
        display: none;
    }
}

#deckbuilder .deck ul {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 0 20px 0;
}

#deckbuilder .deck li {
    -webkit-animation: rotateIn 1s;
    -moz-animation: rotateIn 1s;
    -o-animation: rotateIn 1s;
    -ms-animation: rotateIn 1s;
    animation: rotateIn 1s;
    background: #111;
    -webkit-box-shadow: 0 0 0 1px #000;
    box-shadow: 0 0 0 1px #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #aaa;
    display: block;
    line-height: 30px;
    margin: 0;
    position: relative;
}

#deckbuilder .deck li.common {
    color: #fff
}

#deckbuilder .deck li.rare {
    color: #0070dd
}

#deckbuilder .deck li.epic {
    color: #a335ee
}

#deckbuilder .deck li.legendary {
    color: #ff8000
}

#deckbuilder .deck li:hover:after {
    background: rgba(255, 255, 255, 0.1);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#deckbuilder .deck .image {
    background-position: 50% 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    height: 100%;
    top: 0;
    width: 50%;
}

#deckbuilder .deck .image:after {
    background-image: -webkit-linear-gradient(0deg, #111, transparent);
    background-image: -moz-linear-gradient(0deg, #111, transparent);
    background-image: -o-linear-gradient(0deg, #111, transparent);
    background-image: -ms-linear-gradient(0deg, #111, transparent);
    background-image: linear-gradient(90deg, #111, transparent);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#deckbuilder .deck .content {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    position: relative
}

#deckbuilder .deck .mana {
    background: #15a;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    width: 30px
}

#deckbuilder .deck .name {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0 10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

#deckbuilder .deck .count {
    background: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffd700;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 30px;
    padding: 0 10px;
    text-align: center
}

#deckbuilder .mana-curve {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 60px;
    margin: 0;
    padding: 5px 10px 5px 9px;
}

#deckbuilder .mana-curve > div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative
}

#deckbuilder .mana-curve .bar {
    background: #15a;
    bottom: 0;
    border-left: 1px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height 0.4s;
    -ms-transition: height 0.4s;
    transition: height 0.4s;
    width: 100%
}

#card-tooltip {
    position: absolute;
    width: 200px;
    height: 303px
}

@-moz-keyframes rotateIn {
    from {
        -webkit-transform: perspective(1000px) rotateX(90deg);
        -moz-transform: perspective(1000px) rotateX(90deg);
        -o-transform: perspective(1000px) rotateX(90deg);
        -ms-transform: perspective(1000px) rotateX(90deg);
        transform: perspective(1000px) rotateX(90deg)
    }
    to {
        -webkit-transform: perspective(1000px) rotateX(0);
        -moz-transform: perspective(1000px) rotateX(0);
        -o-transform: perspective(1000px) rotateX(0);
        -ms-transform: perspective(1000px) rotateX(0);
        transform: perspective(1000px) rotateX(0)
    }
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: perspective(1000px) rotateX(90deg);
        -moz-transform: perspective(1000px) rotateX(90deg);
        -o-transform: perspective(1000px) rotateX(90deg);
        -ms-transform: perspective(1000px) rotateX(90deg);
        transform: perspective(1000px) rotateX(90deg)
    }
    to {
        -webkit-transform: perspective(1000px) rotateX(0);
        -moz-transform: perspective(1000px) rotateX(0);
        -o-transform: perspective(1000px) rotateX(0);
        -ms-transform: perspective(1000px) rotateX(0);
        transform: perspective(1000px) rotateX(0)
    }
}

@-o-keyframes rotateIn {
    from {
        -webkit-transform: perspective(1000px) rotateX(90deg);
        -moz-transform: perspective(1000px) rotateX(90deg);
        -o-transform: perspective(1000px) rotateX(90deg);
        -ms-transform: perspective(1000px) rotateX(90deg);
        transform: perspective(1000px) rotateX(90deg)
    }
    to {
        -webkit-transform: perspective(1000px) rotateX(0);
        -moz-transform: perspective(1000px) rotateX(0);
        -o-transform: perspective(1000px) rotateX(0);
        -ms-transform: perspective(1000px) rotateX(0);
        transform: perspective(1000px) rotateX(0)
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform: perspective(1000px) rotateX(90deg);
        -moz-transform: perspective(1000px) rotateX(90deg);
        -o-transform: perspective(1000px) rotateX(90deg);
        -ms-transform: perspective(1000px) rotateX(90deg);
        transform: perspective(1000px) rotateX(90deg)
    }
    to {
        -webkit-transform: perspective(1000px) rotateX(0);
        -moz-transform: perspective(1000px) rotateX(0);
        -o-transform: perspective(1000px) rotateX(0);
        -ms-transform: perspective(1000px) rotateX(0);
        transform: perspective(1000px) rotateX(0)
    }
}

@-moz-keyframes fadeInRotateInY {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: perspective(1000px) rotateY(90deg);
        -moz-transform: perspective(1000px) rotateY(90deg);
        -o-transform: perspective(1000px) rotateY(90deg);
        -ms-transform: perspective(1000px) rotateY(90deg);
        transform: perspective(1000px) rotateY(90deg)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: perspective(1000px) rotateY(0);
        -moz-transform: perspective(1000px) rotateY(0);
        -o-transform: perspective(1000px) rotateY(0);
        -ms-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0)
    }
}

@-webkit-keyframes fadeInRotateInY {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: perspective(1000px) rotateY(90deg);
        -moz-transform: perspective(1000px) rotateY(90deg);
        -o-transform: perspective(1000px) rotateY(90deg);
        -ms-transform: perspective(1000px) rotateY(90deg);
        transform: perspective(1000px) rotateY(90deg)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: perspective(1000px) rotateY(0);
        -moz-transform: perspective(1000px) rotateY(0);
        -o-transform: perspective(1000px) rotateY(0);
        -ms-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0)
    }
}

@-o-keyframes fadeInRotateInY {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: perspective(1000px) rotateY(90deg);
        -moz-transform: perspective(1000px) rotateY(90deg);
        -o-transform: perspective(1000px) rotateY(90deg);
        -ms-transform: perspective(1000px) rotateY(90deg);
        transform: perspective(1000px) rotateY(90deg)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: perspective(1000px) rotateY(0);
        -moz-transform: perspective(1000px) rotateY(0);
        -o-transform: perspective(1000px) rotateY(0);
        -ms-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0)
    }
}

@keyframes fadeInRotateInY {
    from {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: perspective(1000px) rotateY(90deg);
        -moz-transform: perspective(1000px) rotateY(90deg);
        -o-transform: perspective(1000px) rotateY(90deg);
        -ms-transform: perspective(1000px) rotateY(90deg);
        transform: perspective(1000px) rotateY(90deg)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: perspective(1000px) rotateY(0);
        -moz-transform: perspective(1000px) rotateY(0);
        -o-transform: perspective(1000px) rotateY(0);
        -ms-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0)
    }
}

.loading {
    background: url('../images/724.GIF') no-repeat center;
}

.loaded {
    background-size: cover;
    background-position: center center;
}
.filter {padding-bottom: 20px;}
.filter h3 {text-align: center; margin:15px 0; font-size: 22px;}
.filter select {height:32px;}
.filter p img {float:left;}
.filter p {padding:0 5px;}
.filter p.type {text-align: center; font-size: 17px;}
p.dust {font-size:15px; font-weight: bold;}
.filter p select {margin-left:50px; width: 60% !important;}

div.dataTables_filter label {
    float: left !important;
}
div.dataTables_filter input {
    margin-left: 5px;
}

div.dataTables_length label {
    float: right !important;

}
.layer > div {
    padding-bottom:10px;
}

.dataTables_paginate .previous a, .dataTables_paginate .next a {
    font-weight: bold;
    padding: 0px 15px;
    line-height: 36px;
    border-width: 1px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-transform: uppercase;
    padding: 3px 12px;
    line-height: 26px;
    background-color: #222222;
    border-color: #222222;
    color: #ffffff;
    margin: 0 5px 0 0;
}

.center-block {
    display: block;
    text-align: center;
}

#cross-panel {
    position:fixed;
    top:50%;
    margin-top:-150px;
    right:-210px;
    z-index:9999;

}
#cross-panel a {
    display:block;
    position: relative;
    left:0px;
}

#cross-panel a.hs {
    background: url('/images/hs-but-h.png') 0 0 no-repeat;
}
#cross-panel a.hots {
    background: url('/images/hots-but-h.png') 0 0 no-repeat;
}
#cross-panel a.mana {
    background: url('/images/mana-but-h.png') 0 0 no-repeat;
}
@media (max-width: 1060px){
    #cross-panel {display:none;}
}

h4.modal-title {color:#222222 !important;}
#guide-text {font-size:12px;}
#deckbuilder a#guide {color:#fff;}
div.guide {text-align: center; margin: 5px 0 10px 0 !important;}

.guide-head {
    padding: 0 15px !important;
    margin: 15px 0 20px 0 !important;
    font-size: 26px;
}

.guide-area {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

#datatbl a {position: relative; z-index:8999;}