html{
	scroll-behavior: smooth;
}
.rMythic{
	webkit-filter: drop-shadow(2px -2px 0 #ff641a);
  	filter: drop-shadow(2px -2px 0 #ff641a);
}
.rRare{
	webkit-filter: drop-shadow(2px -2px 0 #b9bb60);
  	filter: drop-shadow(2px -2px 0 #b9bb60);
}
.rUncommon{
	webkit-filter: drop-shadow(2px -2px 0 #c0c0c0);
  	filter: drop-shadow(2px -2px 0 #b8d4df);
}
.rCommon{
	webkit-filter: drop-shadow(2px -2px 0 #000);
  	filter: drop-shadow(2px -2px 0 #000);
}
@-webkit-keyframes pulsate {
    0%   { box-shadow: 0 0 0 #ff641a; }
    50%  { box-shadow: 0 0 17px #ff641a; }
    100% { box-shadow: 0 0 0 #ff641a; }
}

.hidden{
	display: none !important;
}
.cardPool {
	column-count: 6;
	margin-bottom: 400px !important;
}
#bgimgs.cardPool a{
	width: 100%;
	max-height: 34px;
    overflow: visible;
    display: block !important;
}
.cardPool a img{
	/*margin-bottom: -120% !important;*/
}
.newdeckcontain{
	max-height: 40%;
	overflow-y: auto;
	position: fixed;
	bottom:0;
	width:33%;
	z-index:3;
	border: #ffffff 3px groove;
}
#contain1{
	left:0;
	background: #0080ff7a;
}
#contain2{
	left:33.5%;
	background: #ff000085;
}
#contain3{
	right:0;
	background: #00800070;
}
.deckcounter{
	position: absolute;
	bottom: 0;
	right: 0;
	text-shadow: 1px 1px 2px #d3d3d3;
	z-index: 10;
}
#deck1counter{
	color:blue;
}
#deck2counter{
	color:red;
}
#deck3counter{
	color:green;
}
.newdeck{
	width:100%;
	display: inline-block;
	z-index:3;
	min-height: 50px;
	column-count: 3;
}
.newdeck a {
	max-height: 26px;
    overflow: visible;
    display: block;
}
.newdeck img{
	width: 100%;
}
#newdeck1{
	
	
}
#newdeck2{
	
	
}
#newdeck3{
	
	
}
#titlepage{
	background-color: #fafafa;
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5%;
	padding:40px;
	font-family: "Lato";
}
.transparent{
  background:rgba(255,255,255,0.5);
}
#nav {
	position:absolute;
	z-index: 3;
	top:0px;
	left:5px;
	height: 100%;
	max-width: 100px;
    width: 7%;
}
#nav a img{
	display:block;
	margin:auto;
	max-width: 80px;
}
#nav a span{
	display:inline-block;
	width:100%;
	text-align: center;
	font-size: 1.4em;
}
#nav span.button{
	overflow: hidden;
	margin-left:auto;
	margin-right:auto;
	margin-top:3px;
	background-color: rgba(0, 0, 0, 0.3); 
    border: none;
    color: white;
    width:100%;
    height:0;
    text-align: center;
    text-decoration: none;
    font-size: 1.1em;
    text-shadow: 2px 2px 5px #707070;
    border-radius: 4px;
    cursor:pointer;
	display: block;
    border-radius: 4px;
    transition: height 1s ease;
    
}
#nav:hover > span, #nav:focus > span{
	height:30px; !important;
	padding: 10px 0px;
}
#typelist{
	display: none;
}
#listcontainer:hover #typelist{
	display: block;
}
#nav div.buttonlabel{
	position: absolute;
    left: 50%;
    margin-left: -20px;
    z-index: 1;
    padding-top:9px;
}
span{
	box-sizing: content-box;
}
#nav span.mbutton{
	padding:0;
	height:0;
	visibility: hidden;
}
#nav:hover span.mbutton{
	height:50px;
	visibility: visible;
}
#nav span.lbutton{
	display: inline-block;
    width:50%;
    border-radius: 4px 0 0 4px;
    padding: 10px 0px;
    position:absolute;
    left:0;
    z-index: 2;
    padding-right:7px;
    box-sizing: border-box;
}
#nav span.rbutton{
	display: inline-block;
    width:50%;
    border-radius: 0 4px 4px 0;
    padding: 10px 0px;
    position:absolute;
    right:0;
    z-index: 2;
    padding-left:7px;
    box-sizing: border-box;
}
#nav .button:hover, .lbutton:hover, .rbutton:hover{
	color:orange;
	text-shadow: 2px 2px 5px #42949d;
	
}
#nav .mbutton:hover{
	color:#c0c0c0;
	text-shadow: 2px 2px 5px #707070;
	
}
#nav ul{
	list-style-type:none;
	padding-left:10px;
	border: 7px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}
#nav li{
	font-size: 1.4em;
}
li img{
	padding: 0 0 5px 0;
	max-width: 80px;
	max-height: 60px;
}
#nav a, #nav a:visited{
	color:white;
	text-decoration: none;
	text-shadow: 2px 2px 5px #707070;
}
#nav a:hover{
	color:orange;
	text-decoration: underline;
	text-shadow: 2px 2px 5px #42949d;
}
#countStatus{
	display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
}
#bgwrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right: 0;
	z-index:1;
}
#bgimgs{
	position: relative; 
	width:85%;
	margin:auto;
	text-align:center;
}
#bgimgs a {
	z-index:1;
	display:inline-block;
	width:20%;
	position: relative;
	transition: 1s;
	transition-timing-function: ease-in;
	animation-name: example;
    animation-duration: 4s;
}
.slideCard{
	transition: 2s;
	transform: translate(318px, 0px);
	position: relative;
}
#bgimgs img{
	transition: 1s;
	transition-timing-function: ease-in;
	width:98%;
	margin:0;
	animation-name: example;
    animation-duration: 4s;
    
}
#bgimgs a.zero{
	width:0 !important;
}
#bgimgs.cardPool img{
	border-radius: 10px;
	transition: none !important;
	animation-name: none  !important;
	animation-duration: 0s  !important;
}
.showCard{
	z-index: 9 !important;
	position: relative;
}
.cardPool .showCard{
	position: absolute !important;
	width:200px !important;
	transform: scale(1.5,1.5) !important;
}
#bgimgs a:hover{
	z-index:1;
	transform: translate(5px, 0px);
}

/*#bgimgs a:hover, .newdeck img:hover{
	z-index:9;
	position:relative;
	
	transition: z-index 50ms;
	transition: transform 2s;
	
	-ms-transform: scale(1.7,1.7); 
	
    -webkit-transform: scale(1.7,1.7);
    transform: scale(1.7,1.7);
    
    transition-timing-function: ease;
	-moz-transition-timing-function: ease; 
	-webkit-transition-timing-function: ease;
	-o-transition-timing-function: ease;
}*/
#text{
	z-index:2;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity: 0.9;
	pointer-events: none;
}
@keyframes example {
    0%   {opacity:0}
    100% {opacity:1}
}

@font-face {
	
	font-weight: normal;
	font-style: normal;
}
html {
	height: 100%;
	width: 100%;
}
body, input {
	font-size: 100%;
	background-color: #FFF;
}

body {
	background-color: #e3e3e3;
	
	background-position-x: center;
  	background-repeat: repeat;
  
	font-family: "Lato","Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
	margin: auto;
	width: 90%;
}
#bgFader{
	height:100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index:1;
	opacity: 0;
	-webkit-transition: opacity 2s ease-in-out;
  	-moz-transition: opacity 2s ease-in-out;
  	-o-transition: opacity 2s ease-in-out;
  	transition: opacity 2s ease-in-out;
  	background-color: #000000;
	background-repeat: repeat;
	background-position-x: center;
}
#content{
	height:100%;
	width:100%;
	position: absolute;
	top:0;
	left:0;
	z-index:2;
}
form {
	display:none;
}
#timespan {
	display:none;
}

h1, h1 a:link, h1 a:hover, h1 a:active, h1 a:visited {
	
	font-family: "Lato", "LeagueGothicRegular", 'League Gothic', "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Tahoma, Arial, sans-serif;
	text-decoration: none;
	color: inherit;
}
@media screen and (max-width: 1500px) {
	#bgwrapper{
		width:90%;
	}
	#bgimgs a{
		width:25%;
	}
}
@media screen and (max-width: 1200px) {
	#bgwrapper{
		width:95%;
	}
	#bgimgs a{
		width:32%;
	}
}
@media only screen and (max-width: 1100px) {
  body{
  	width: 100%;
  	font-size: 22pt;
  }
  #titlepage{
  	width: 90%;
  }
  .setName{
  	font-size: 1.2em;
  }
  .setOptions{
  	line-height: 25px;
  }
    
    }
@media screen and (maxwidth: 1000px) {
	#bgwrapper{
		width:80%;
	}
	#bgimgs a{
		width:34%;
	}
}
@media screen and (max-width: 800px) {
	#bgwrapper{
		width:80%;
	}
	#bgimgs a{
		width:50%;
	}
}
@media screen and (max-width: 500px) {
	#bgwrapper{
		width:80%;
	}
	#bgimgs a{
		width:90%;
	}
}
@media screen and (max-width: 640px) {
    .pulse{
    	-webkit-animation-name: boxPulse;
  		-webkit-animation-duration: .5s;
  		-webkit-animation-iteration-count: infinite;
    }
}
h1 {
	
	font-size: 400%;    /* old */
	font-size:6em;
  	font-size: 8vm;   /* IE9 */
  	font-size: 8vmin;
  	text-decoration: underline;
	padding: 0;
	text-align: center;
	max-width:1600px;
	
	
}
.description{
	font-size:1.4em;
}
#message{
	position:absolute;
	bottom:10px;
	z-index: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 1200px;
}
@-webkit-keyframes boxPulse {
  from {
    font-size:1000%;
    font-size: 15vm;   /* IE9 */
  	font-size: 15vmin;
    -webkit-animation-timing-function: ease-out;
  }
  50%{
  	font-size:1100%;
  	font-size: 16vm;   /* IE9 */
  	font-size: 16vmin;
    -webkit-animation-timing-function: ease-out;
  }
  to {
    font-size:1000%;
    font-size: 15vm;   /* IE9 */
  	font-size: 15vmin;
    -webkit-animation-timing-function: ease-out;
  }
}
h2 {
	text-shadow: 0 0 0.2em #ffffff, 0 0 0.2em #000000;
}
h3 {
	font-size: 125%;
}

a:link, a:hover, a:active, a:visited {
	
}

dl {
	margin: 0;
	padding: 0.75em 0.25em;
}

dl dt {
	font-weight: bold;
	margin: 0 0 0 0.5em;
	padding: 0.25em 0 0.25em 0.5em;
}

dl dd {
	list-style-type: none;
	margin: 0 0 0 1.5em;
	padding: 0.25em 0 0.25em 1.5em;
}

pre {
	background: #F7F7F7;
	border: 1px solid #DDD;
	border-radius: 3px;
	-mox-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 9px 12px;
}

footer {
	border-top: 1px solid #F1F1F1;
	clear: both;
	margin: 4em auto;
	padding-top: 1em;
	text-align: right;
}

.breaking-change {
	border: 1px solid #990000;
	border-radius: 3px;
	-mox-border-radius: 3px;
	-webkit-border-radius: 3px;
	font-style: italic;
	padding: 0 1em;
	margin: 1em 0;
}

.breaking-change:target {
	-webkit-animation: target-fade 5s 1;
	-moz-animation: target-fade 5s 1;
	-o-animation: target-fade 5s 1;
	animation: target-fade 5s 1;
}

@-webkit-keyframes target-fade {
	0% { background-color: #FFFF66; }
	100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
	0% { background-color: #FFFF66; }
	100% { background-color: rgba(0,0,0,0); }
}
@-o-keyframes target-fade {
	0% { background-color: #FFFF66; }
	100% { background-color: rgba(0,0,0,0); }
}
@keyframes target-fade {
	0% { background-color: #FFFF66; }
	100% { background-color: rgba(0,0,0,0); }
}

#counter {
	border: 0;
	font-size: 350%;
	font-size: 7vm;   /* IE9 */
  	font-size: 7vmin;
	font-weight: normal;
	min-height: 3em;
	color: #cf1616;
	text-align: center;
	opacity: 0.9;
}
#counter strong {
	white-space: nowrap;
}

#countdown-start,
#countdown-units {
	background-color: #EEE;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 150%;
	padding: 0.25em 0.5em;
/*	width: 100%;*/
}
#countdown-start span,
#countdown-units span {
	line-height: 1.5em;
	white-space: nowrap;
}
#countdown-start,
#countdown-units {
	text-align: center;
}
#countdown-start label {
	font-weight: bold;
	padding: 0 0.25em;
}
#countdown-start input {
	border: 1px solid silver;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-align: center;
}
#countdown-units span {
	display: block;
}
#countdown-units label {
	font-weight: bold;
	padding: 0.25em;
}
#countdown-units input {
	border: 1px solid silver;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin-right: 0.5em;
	text-align: center;
}

/* http://ubuwaits.github.com/css3-buttons/ */

a.minimal:link, a.minimal:visited {
	background: #e3e3e3;
	border: 1px solid #ccc;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: inset 0px 0px 1px 1px #f6f6f6;
	-moz-box-shadow: inset 0px 0px 1px 1px #f6f6f6;
	-webkit-box-shadow: inset 0px 0px 1px 1px #f6f6f6;
	color: #333;
	display: inline-block;
	font-family: "helvetica neue", helvetica, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 8px 0 9px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0px #fff;
	width: 150px;
}

a.minimal:hover {
	background: #d9d9d9;
	box-shadow: inset 0px 0px 1px 1px #eaeaea;
	-moz-box-shadow: inset 0px 0px 1px 1px #eaeaea;
	-webkit-box-shadow: inset 0px 0px 1px 1px #eaeaea;
	color: #222;
}

a.minimal:active {
	background: #d0d0d0;
	box-shadow: inset 0px 0px 1px 1px #e3e3e3;
	-moz-box-shadow: inset 0px 0px 1px 1px #e3e3e3;
	-webkit-box-shadow: inset 0px 0px 1px 1px #e3e3e3;
	color: #000;
}

.summary {
	font-size: 12pt;
	text-align: center;
}

.box {
	background-color: #FFF;
	border: 1px solid silver;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 0px 0px 4px #DDDDDD;
	-moz-box-shadow: 0px 0px 4px #DDDDDD;
	-webkit-box-shadow: 0px 0px 4px #DDDDDD;
	float: left;
	height: 200px;
	line-height: 1.75em;
	margin: 0.5em 0 0.5em 0.5em;
	padding: 0.125em 0.5em;

	width: 45%;
}

.box h2 {
	border-bottom: none;
	color: #666;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 -1px 1px silver;
	text-transform: lowercase;
}

.box ul, .box li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.box a.minimal {
	margin: 0.25em;
	text-transform: lowercase;
}

.box a.glow {
	box-shadow: 0px 0px 4px #FFCC00;
	-moz-box-shadow: 0px 0px 4px #FFCC00;
	-webkit-box-shadow: 0px 0px 4px #FFCC00;
}

.action-info {
	font-style: italic;
	white-space: nowrap;
}

#bgimgs.wide10 a{
	width:10%;
}
#bgimgs.wide9 a{
	width:11%;
}
#bgimgs.wide8 a{
	width:12%;
}
#bgimgs.wide7 a{
	width:14%;
}
#bgimgs.wide6 a{
	width:16%;
}
#bgimgs.wide5 a{
	width:20%;
}
#bgimgs.wide4 a{
	width:25%;
}
#bgimgs.wide3 a{
	width:33%;
}
#bgimgs.wide2 img{
	width: unset;
	height: 70%;
	animation-duration: .75s;
}
#bgimgs.wide2 a{
	animation-duration: .75s;
}
#bgimgs.wide1 img{
	width: unset;
	animation-duration: .25s;
}
#bgimgs.wide1 a{
	animation-duration: .25s;
}
#bgimgs.wide1 .zero img{
	width: 0;
}

.pulse-button {
  cursor: pointer;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  from {background-color: rgba(180, 180, 180, .4);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4);}
  50% { background-color: rgba(4, 211, 4, 0.67);-webkit-box-shadow: 0 0 18px #ff8000;}
  to {background-color: rgba(180, 180, 180, 0.4);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4);}
}

@media print
{    
    #nav, #message
    {
        display: none !important;
    }
    #mybody{
    	background: grey !important;
    }
    #bgimgs{
    	margin-top:5px;
    	page-break-inside: avoid;
    }
    #bgimgs a{
    	margin-top: -2px;
    	page-break-inside: avoid;
    }
}