*{outline:none;}
html,body{margin:0; padding:0;}
body{font-family:'Roboto',sans-serif; overflow-x:hidden; background:#000; color:#FFF;}
body.shownav{padding-top:189px !important;}
img{max-width:100%;}
img.preload{opacity:0;}
a{color:#F6A704; letter-spacing:1px;}

input, select, textarea{background-color:#000; color:#FFF; font-size:16px; box-sizing:border-box; border:1px solid #666; padding:0.25em; -webkit-appearance:none; -moz-appearance:none; -webkit-border-radius:0;}
select{padding:0.2em 1.7em 0.2em 0.2em; width:100%; background:url('../images/select-arrow.png') no-repeat center right #000;}
select[multiple]{background:none;}
select::-ms-expand{display:none;}
.form-items{position:relative; white-space:nowrap;}
.select-wrapper{position:relative; display:inline-block;}
.selectbox-trigger{display:none;}
.ios select{padding:0.25em;}
input[type="checkbox"], input[type="radio"]{padding:0.35em; background:#FFF; border:1px solid #666; width:auto !important;}
input[type=radio]{border-radius:100em; width:auto !important;}
.active input[type="checkbox"], .active input[type="radio"], input[type="checkbox"]:checked, input[type="radio"]:checked{padding:0.35em; background:#F6A704; border:1px solid #000;}
form{margin:0 auto; box-sizing:border-box;}
select[name="thumb-ver"]{display:none;}
.bdrbox{box-sizing:border-box;}
.orange{color:#F6A704;}
.cssarrl{width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid;}
.cssarrr{width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid;}
.cssarru{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid;}
.cssarrd{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid;}
.hide{display:none !important;}
.table{display:table; width:100%; float:left; margin-bottom:1em;}
.table > ul{display:table-row;}
.table > ul > li{display:table-cell; padding:0.25em;}
.table > ul.head{font-weight:bold;}
.table > ul:nth-child(even) > li{background:#191919;}

h1,h2,h3,h4,h5,h6{letter-spacing:0.05em; font-family:'Nunito Sans', sans-serif;}
h1{font-size:1.25em; width:100%; float:left; color:#CCC; border-bottom:1px solid #78787A; text-align:center; padding:0.5em 0; margin:0;}
h1.smaller{font-size:1.2em;}

.header{width:100%; background:#2F3033; color:#FFF; text-transform:uppercase; position:fixed; top:0; left:0; z-index:200;}
.header .home{padding:0.1em 0.45em; background:#2F3033; position:relative; z-index:1;}
.header .home a{display:block; width:160px;}
.header .home img{max-height:50px;}
.header .mobi-trigger{position:absolute; top:0; right:0; z-index:2; width:2em; cursor:pointer; padding:0.25em 0.375em; background:#000; border:1px solid #666; transition:0.8s;}
.header .mobi-trigger.active{padding:0.25em 0em 0.25em 0.75em;}
.header .mobi-trigger ul{margin:0; padding:0;}
.header .mobi-trigger li{background:#F6A704; display:block; width:100%; height:0.25em; margin:0.4em 0; overflow:hidden; transition:0.5s; -webkit-transition:0.5s;}
.header .mobi-trigger.active li.ml1{transform:rotate(45deg); transform-origin:top left; -webkit-transform:rotate(45deg); -webkit-transform-origin:top left;}
.header .mobi-trigger.active li.ml2{opacity:0;}
.header .mobi-trigger.active li.ml3{transform:rotate(-45deg); transform-origin:bottom left; -webkit-transform:rotate(-45deg); -webkit-transform-origin:bottom left;}
.header .mainnav{margin:0; padding:0; border-bottom:1px solid #78787A; position:absolute; top:-140px; left:0; width:100%;}
.shownav .header .mainnav{display:block;}
.header .mainnav li{display:block;}
.header .mainnav li a{display:block; color:#FFF; background:#333; text-decoration:none; padding:0.5em 3em; letter-spacing:0.05em; cursor:pointer;}
.header .mainnav li a.active{background:#B4B5B5;}
.header .mainnav li.cart a span.text, .header-wrapper .mainnav li.cart a img{vertical-align:middle;}
.header-wrapper .subnav{display:none;}
.header li{display:inline-block;}
.active-char{float:right; padding:1em;}
.active-char > div{width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.active-char .name{}
.active-char .class{font-size:0.75em;}

.footer-wrapper{background:#2F3033; color:#78787A; font-size:0.9em; text-transform:uppercase; width:100%; float:left; padding:0.25em 0; text-align:center; position:relative;}
.footer-wrapper .copyright{width:100%; float:left; margin:0.5em 0;}
.footer-wrapper .boilerplate{margin:0; padding:0;}
.footer-wrapper .boilerplate li{display:block; margin:0.5em 0; width:100%; float:left;}
.footer-wrapper .boilerplate .dealers{display:none;}
.footer-wrapper .boilerplate .cs{color:#F6A704;}
.footer-wrapper .boilerplate .social div{display:inline-block; max-width:25px; vertical-align:middle; line-height:0;}

.main-view .content{padding:0 1em;}

.small-nav{border-bottom:1px solid #78787A; width:100%; float:left; font-size:0.5em;}
.small-nav .product-types li{width:25%; margin:0;}
.small-nav .product-types li a{box-sizing:border-box; padding:0.5em;}
.small-nav .product-types li a.active{background:#F6A704;}
.small-nav .product-types li a.active:hover{opacity:1;}
.small-nav img{max-width:50%;}

.spell-list{width:100%; float:left;}
.filters{padding:1em; width:100%; float:left; box-sizing:border-box;}
.filters .search{float:left;}
.filters .search .fa{padding:0.34em; border:1px solid #666; color:#666; border-right:0; vertical-align:top; min-height:29px; box-sizing:border-box;}
.filters .filter{float:right;}
.filters .filter .fa{padding:0.35em 0.5em; border:1px solid #666; color:#666; cursor:pointer;}
.filters .filter .fa.active{background:#F6A704; color:#FFF; border-color:#FFF;}
.spell-filters{padding:1em; position:absolute; left:0; width:100%; box-sizing:border-box; background:#333;}
.spell-filters h3, .spell-filters h4{margin:0;}
.spell-filters .options{border-top:1px solid; padding-top:0.5em; margin-top:1em;}
.spell-filters .option{border:1px solid; padding:0.25em; margin-bottom:0.25em; display:inline-block; cursor:pointer;}
.spell-filters .option.active{color:#F6A704; background:#FFF;}
.spell-wrapper{width:100%; float:left; box-sizing:border-box;}
.spell-wrapper h3{padding:0.25em 1em; margin:0; background:#191919; cursor:pointer; border-top:1px solid #333;}
.spell-wrapper h3 span.fa{margin-right:0.5em;}
.spell-wrapper h3 span.known, .spell-wrapper h3 span.prepped{font-size:0.5em; border:1px solid #666; padding:0.25em; margin-left:1em; float:right; margin-top:0.35em;}
.spell-wrapper .spell-details{padding:1.5em 2em 1em; }
.spell-wrapper .description p{text-indent:1em;}

.characters{padding:1em; box-sizing:border-box;}
.characters .new{text-align:center;}
.characters .new a{border:1px solid #666; background:#000; padding:0.5em; margin:0.5em; display:inline-block; text-decoration:none;}
.character{border:1px solid #666; margin-bottom:0.5em; box-sizing:border-box; cursor:pointer; position:relative;}
.character .title{padding:0.5em;}
.character.active  .title{color:#F90; font-weight:bold; background:#191919;}
.character .make-active{position:absolute; right:0; top:0; padding:0.5em; background:#000; border-left:1px solid #666;}
.character .details{padding:1em; border-top:1px solid #666;}
.details .slots{overflow:hidden;}
.details .slots .slot{float:left; margin:0.5em; text-align:center;}
.newchar select{max-width:192px;}
.newchar .classes, .newchar .stats{width:100%; float:left; margin:1em 0 0;}
.newchar .class-group, .newchar .stat-group{color:#999; float:left; width:100%;}
.newchar .class-group.active, .newchar .stat-group.active{color:#FFF;}
.newchar .class-group label, .newchar .stat-group label{width:325px; float:left; text-align:right;}
button{background:#333; border:1px solid #666; color:#FFF; padding:0.5em; margin:0.5em;}

@media (min-width:568px){
}

@media (min-width:768px){
	body{padding:51px 0 30px; float:left; width:100%;}
	h1{font-size:3em; text-align:left; text-indent:1em;}
	
	.header-wrapper{position:fixed; top:0; left:0; width:100%; height:51px; z-index:100;}
	.header{height:51px; font-size:0.75em; float:left; position:relative;}
	.header .home{float:left; padding:0;}
	.header .home a{/*width:44px; overflow:hidden; */padding:0.1em 2em;}
	.header .home a span{display:block;/* width:44px; overflow:hidden;*/}
	.header .home a img{/*width:400%; max-width:none;*/}
	.header .mobi-trigger{display:none;}
	.header .mainnav{position:static; top:auto; left:auto; width:auto; border:0; z-index:1;}
	.header .mainnav li{display:block; float:left;}
	.header .mainnav li a{display:block; color:#FFF; background:none; text-decoration:none; padding:1.5em 2em; box-sizing:border-box; height:51px; transition:0.5s; -webkit-transition:0.5s;}
	.header .mainnav li a:hover{background:rgba(255,255,255,0.25);}
	.header .mainnav li a.active{background:#F6A704; color:#FFF;}
	.header .mainnav li.cart{float:right;}
	.header .mainnav li.cart a{padding:1em 2em; color:#F6A704;}
	.header .mainnav li.cart a.active{color:#FFF;}
	.header .mainnav li.cart a.active img{filter:grayscale(100%) brightness(-100%); -webkit-filter:grayscale(100%) brightness(-100%);}
	.header-wrapper .subnav{display:block; position:absolute; top:-242px; left:0; z-index:10; background:#CCC; width:100%; box-sizing:border-box; padding:0; margin:0; text-align:center; opacity:1; transition:0.5s; -webkit-transition:0.5s;}
	.header-wrapper .subnav.show{top:51px;}
	.header-wrapper .subnav.ng-hide{opacity:0;}
	.header-wrapper .subnav li{display:block; float:left; box-sizing:border-box; width:25%;}
	.header-wrapper .subnav#subnav-products li{display:inline-block; vertical-align:middle; float:none; margin:0 0 0 -4px;}
	.header-wrapper #subnav-products.subnav li{width:15%;}
	.header-wrapper .subnav li a{padding:0.75em 0; display:inline-block; color:#FFF; text-decoration:none; width:100%; transition:0.5s; -webkit-transition:0.5s;}
	.header-wrapper .subnav li a:hover{background:rgba(0,0,0,0.25);}
	.header-wrapper .subnav li a.active{background:#F6A704;}
	.header-wrapper .subnav li img{max-width:50%;}
	.footer-wrapper{position:fixed; bottom:0; left:0; z-index:10;}
	.footer-wrapper .copyright{float:left; width:auto; margin:0.25em 0 0 1.5em; position:static; top:auto; left:auto; transform:none; -webkit-transform:none;}
	.footer-wrapper .boilerplate{float:right; margin:0 1em 0 0; padding:0;}
	.footer-wrapper .boilerplate li{display:inline-block; float:none; width:auto; vertical-align:middle; margin:0 0.5em;}
	.footer-wrapper .boilerplate .dealers{display:inline-block;}
	.footer-wrapper .boilerplate .dealers a{color:#78787A; text-decoration:none;}
	.home .frames .headlines .cta{width:24em;}
	
	.main-wrapper{position:relative;}
	.main-view, .cs-view, .wtb-main{position:absolute; top:0; left:0; z-index:0; width:100%;}
	.main-view .content{padding:0 1em 4em; overflow:hidden;}
	.ng-leave{opacity:1 !important; z-index:0 !important; transition:0.5s !important; -webkit-transition:0.5s !important;}
	.ng-enter{opacity:0 !important; z-index:1 !important; transition:0.5s !important; -webkit-transition:0.5s !important;}
	.ng-leave-active{opacity:0 !important; z-index:1 !important; transition:0.5s !important; -webkit-transition:0.5s !important;}
	.ng-enter-active{opacity:1 !important; z-index:0 !important; transition:0.5s !important; -webkit-transition:0.5s !important;}
}

@media (min-width:1024px){
	body{padding:67px 0 31px;}
	body.customer-service, body.where-to-buy, body.legal-notices, body.sponsorship{padding-top:102px;}
	h1{font-size:3.5em;}
	h1.smaller{font-size:3em;}
	.header-wrapper{height:67px;}
	.header{height:67px; font-size:1em;}
	.header .home{float:left; background:none;}
	.header .home a{padding:0.45em 2em;/* width:50px;*/}
	.header .home a span{/*width:50px;*/}
	.header .mainnav li a{height:67px;}
	.header .mainnav li.cart a{padding:1.25em 2em;}
	.header-wrapper .subnav.show{top:67px;}
}

@media (min-width:1025px){
	.home a[id^=scene]{top:3em;}
}

@media (min-width:1280px){
	body.customer-service, body.where-to-buy, body.legal-notices, body.sponsorship{padding-top:106px;}
	h1{font-size:4.5em;}
	h1.smaller{font-size:4em;}
	.small-nav{height:108px;}
	.small-nav img{max-width:85px;}
}

@media (min-width:1536px){
}

@media (min-width:1600px){
}

@media (min-width:1920px){
}