@keyframes flash-visible {
  0% { opacity: 0; }
  1% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; }
}

.flash-once {
  animation: flash-visible 0.5s forwards;
  animation-delay: 0.5s;
}

.entFrac{    height: 60px;margin-top: 50px;}
#sDb {overflow:visible}
#sDb .selectLimit {position:relative;top:-10px}
.selectLimit {padding-right:11px}
.selectLimit::after{
  content: "▲\A▼"; /* up then down arrow, stacked vertically */
  white-space: pre; /* ensures the \A line break is respected */
  display: inline-block;
	position:absolute;
	    right: 1px;
	font-size:12px;
  line-height: 1;
  color: #333;
}

.bakery-shelf {
  background: #f4e2d8; /* light wood tone */
  border-bottom: 20px solid #c2a38b; /* muted brown for shelf edge */
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1); /* soft depth shadow */
  border-radius: 0 0 10px 10px;
  padding: 20px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #3e2f1c;
  position: relative;
}
	
#freemiumtable td{height:50px}
@keyframes jelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.25, 0.75); }
  40%  { transform: scale(0.75, 1.25); }
  50%  { transform: scale(1.15, 0.85); }
  65%  { transform: scale(0.95, 1.05); }
  75%  { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}

#micStand{position:relative;}
.stl{position:relative}
.jump-for-joy {
  animation: bounce-jump 0.8s cubic-bezier(0.5, 0.05, 1, 0.5) 3;
	border: 3px solid #fc6;
}
.white {background-color: #fff;color:#000}
.jump-for-joy::before {
  content: "✓";
	font-weight:bold;color:#191;
  position: absolute;
  font-size: 50px;
  right: 0px;
  top: 4px;
}

#lrfbTable{line-height:1em}
@keyframes bounce-jump {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.chosen .faint{width:30px;height:12px}
/* mean median mode etc */
table.dataq td:nth-child(3){white-space:nowrap}
table.dataq tr:nth-child(even){background-color:#eef3ee} /* see also: dark */


/* short division */
table.division td{font-size:150%;vertical-align: baseline;text-align:center;width:90px}
table.division input[type=number]{height:50px;width:100px}
table.division sup input[type=number]{font-size: 0.7em;  vertical-align: super; line-height: 1;width:50px;height:50px }

.carry{background-color:#cdc;font-size:70%;font-weight:normal;opacity:0.8}

#optionScroll{padding-left:0;clear:both;height:Calc(100vh - 150px);width:100%;overflow-y:scroll;overflow-x:hidden}
.bounceTag{position:relative}

.question{display:none;align-items: center;padding-top:50px;overflow:hidden}
.canvasBlock{margin: 0 auto;width: auto;padding: 0;}
.questionBlock{margin: 0 auto;width: fit-content;padding: 0}
.questionContainer{margin: 0 auto;width: fit-content;padding: 0; min-width: min-content;}
.hundsq{margin-bottom:20px}
.faintform input{border:1px solid #ccc}
@media screen and (max-height:901px) and (min-width:1200px){ /* a wide, low screen like laptop */
	.question{display:inline-block;padding-top:10px;padding-left:Calc(40vw - 550px)}
	.questionBlock{display:inline-block  ;width:Calc(100vw - 850px);float:left;align-items: baseline;}
	.canvasBlock{display:inline-block ;width: min-content;float:left}
	.questionContainer{display:inline-block ;width:Calc(100vw - 850px);padding-left:50px}
	.questionspacer{float:right;height:30%;width:520px;height:100px;display:inline-block}
	.preq{display:inline-block; width: fit-content;float: left;margin-right:50px;}
	.stl{top:0}
	#customAnswer{white-space:pre}
	.hundsq{margin-bottom:0px}
	.hundsq td{font-size:0.8em;padding:2px}
	#sDb {    padding-top: 20px;}
	.mebehalf:nth-child(2)::after{width:800px}/* dont wrap */
}


@media screen and (max-height:700px) and (max-width:1299px) { /* ie a small landscape screen */
	.question{padding-bottom:10px;padding-top:10px;}
	.mebehalf:nth-child(2)::after{width:800px}
	#sDb b{position: relative;top: -10px;} /* question name in topout */
	#sDb .qnum{position: relative;top: -10px;}
}

@media screen and (min-height:901px){
#question{    padding-bottom: 50px;}
}

@media screen and (min-width:1300px) { /* ie a small landscape screen */
	.question{padding-bottom:10px;padding-top:10px;}
	.mebehalf:nth-child(2)::after{width:800px}
	#sDb b{position: relative;top: -10px;} /* question name in topout */
	#sDb .qnum{position: relative;top: -10px;}
	#toggleMen {width:100%}
}
.arrow-with-text {
      position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 0px;
    color: #fff;
    background-color: #000;
    height: 28px;
    margin: 20px;
}

.arrow-with-text::before {
      content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 20px solid transparent;
    border-bottom: 21px solid transparent;
    border-left: 20px solid black;
}

.doneVisLink .bigT{color:rgba(255,255,255,0.5)}
.doneVisLink {padding:10px;width:100px;height:62px;display:block;border:1px solid #fc6;border-radius:6px;position:relative;overflow:hidden;background-color:rgba(0,0,0,0.5);color:#fff}

.sayMe .bubble{position:absolute;top:0;right:0;width:50px}
.speech-bubble {
  font-size: 0; /* Prevents text size affecting SVG */
}
#sDb{vertical-align:baseline}

.bubble-stroke {
  stroke: currentColor;
  stroke-width: 2px;
  fill: currentColor;
}

.uln, a.uln{text-decoration:underline;text-decoration-color:#090;color:#030;text-decoration-thickness:1px;cursor:pointer}
a.uln:hover{color:#090}

.sticker{display:inline-block;background-color:#fc6;transform: rotate(-2deg);box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 1);padding-bottom:20px;margin-left:10px;margin-right:10px}
.signup {position:fixed;width:300px;left:Calc(50vw - 150px);top:25px;border-radius: 6px;z-index: 1000;background-color: #eef3ee;padding: 10px;font-size: 1rem;} /* also see 799 / 800 */
.homeYr:hover{background-color:#eef3ee}
.signup a{color:#000}
.socialPost {position:relative;background-color:#fff;margin:6px;height:50px;padding-left:60px;padding-right:120px;}
.socialPost img{position:absolute;top:0;left:0}
.socialPost a{position:absolute;top:0;right:0;width:100px}
.preview #preQ{max-height:150px;overflow:hidden}
.showCoin{width:50px; height: 50px;  text-align: center; padding-top: 15px;  color: rgb(255, 255, 255); background-image: url('/branding/Coin.png');}

select {font-size:12pt;border-radius:5px}
.textBox h3{color:#030}
.statement h1{color:#030}
.screenshot{ transition: z-index 0s 0.6s;}
.screenshot:hover{z-index:100;animation: jelly 0.6s;}
#sums{margin-top:100px}
#FK{white-space:nowrap;color:#fff;overflow:auto;width:Calc(100vw - 50px);margin-top:20px}
.chin{text-align:center;margin:5px}
.correct:hover{background-color:#fff}
.wedgeBut{margin:10px;height:30px;color:#fff;text-shadow: 2px 2px #000;text-align:left}
#myAwards .wedgeBut{width:335px}
#myAwards {margin-right:3px;overflow:hidden;white-space:nowrap;float:right}
#debug {height:50px;border:1px solid #000;display:block;overflow:hidden}
h3{font-size:1.17rem}
.shield {
    height: 180px;
    width: 200px;
    border: 10px solid #000;
    border-radius: 50% 50% 50% 50% / 12% 12% 88% 88%;
   
    text-align: center;
    padding-top: 30px;
    color: #000;
    font-size: 24px;
}
.showWedge img{width:35px;height:35px;border-radius:6px;margin:1px}

.goldbg{ background-image: linear-gradient( 135deg, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );color:#000}
.silverbg{background:linear-gradient(135deg, #ccc, #fff);color:#000}
.gasbg{background-image: linear-gradient( 135deg, #fffefe 0, #cfc5b6 22%, #fffffe 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );color:#000}
.bronzebg{background-image:linear-gradient( 135deg, #462523 0, #cb9b51 22%, #a57d52 45%, #9e632d 50%, #9f7652 55%, #cb9b51 78%, #462523 100% );color:#fff}

.recLabel{position:absolute;top:20px;left:calc(50% - 49px);text-align:center;width:99px;color:#fff;line-height:1em}
.selectLimit{background-color:#fff;width:50px;height:25px;display:inline-block;box-shadow: 0px 1px 2px 0px rgba(0,0,0,1);overflow:visible;padding:2px;border-radius:6px;pointer-events: auto;position:relative}
.selectLimit a{background-color:#fff;width:50px;height:25px;display:block;padding:2px;border-radius:6px;pointer-events: auto;}
.selectLimit a:hover{background-color:#eef3ee}

/*
.gotMyOpp{animation: shrinkH 1s ease-in forwards;overflow:hidden}

@keyframes shrinkH {
  0% {
	  max-width: 100%;
  width: fit-content;
	  opacity:1;
	  margin:20px
  }

  100% {
	 max-width: 1px;
	  opacity:0;
	  margin:-10px
  }
	
	
}
*/
.BUTnumberetc{text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(188, 120, 205) rgb(118, 50, 135) rgb(118, 50, 135) rgb(188, 120, 205);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgb(153,85,170);
    color:#fff;
    background: linear-gradient(135deg, rgb(153, 85, 170), rgb(118, 50, 135));
}
.BUTaddnsub{text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(153, 172, 215) rgb(83, 102, 145) rgb(83, 102, 145) rgb(153, 172, 215);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(118,137,180);
    background: linear-gradient(135deg, rgb(118, 137, 180), rgb(83, 102, 145));
    
}
.BUTMtables{text-align: center;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(171, 220, 226) rgb(101, 150, 156) rgb(101, 150, 156) rgb(171, 220, 226);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(136, 185, 191);
    background: linear-gradient(135deg, rgb(136, 185, 191), rgb(101, 150, 156));
}
.BUTfractions{
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(101, 112, 190) rgb(31, 42, 120) rgb(31, 42, 120) rgb(101, 112, 190);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(66,77,155);
    background: linear-gradient(135deg, rgb(66, 77, 155), rgb(31, 42, 120));
}
.BUTmoney{
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(185, 40, 85) rgb(115, 0, 15) rgb(115, 0, 15) rgb(185, 40, 85);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(150,5,50);
    background: linear-gradient(135deg, rgb(150, 5, 50), rgb(115, 0, 15));
}
.BUTtime{
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(253, 40, 111) rgb(183, 0, 41) rgb(183, 0, 41) rgb(253, 40, 111);
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(218, 5, 76);
    background: linear-gradient(135deg, rgb(218, 5, 76), rgb(183, 0, 41));
    display: inline-block;
}
.BUTareas{
        text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(232, 255, 42) rgb(162, 190, 0) rgb(162, 190, 0) rgb(232, 255, 42);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(197,225,7);
    background: linear-gradient(135deg, rgb(197, 225, 7), rgb(162, 190, 0));
}
.BUTalgebra{
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(216, 155, 85) rgb(146, 85, 15) rgb(146, 85, 15) rgb(216, 155, 85);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(181,120,50);
    background: linear-gradient(135deg, rgb(181, 120, 50), rgb(146, 85, 15));
}
.BUTstatistics{
    text-align: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 238, 115) rgb(220, 168, 45) rgb(220, 168, 45) rgb(255, 238, 115);
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    overflow: hidden;
    color:#fff;
    background-color: rgb(255,203,80);
    background: linear-gradient(135deg, rgb(255, 203, 80), rgb(220, 168, 45));
}


@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
	    max-width:100%;
	  	margin:20px;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
	    max-width:100%;
	  	margin:20px;
  }
  75% {
    transform: scale(1.5);
    opacity: 0.6;
	  max-width:100%;
	  	margin:20px;
  }
	100% {
    transform: scale(0.01);
    opacity: 0;
		  max-width:0;
			margin:0px;
  }
}

@keyframes smoke {
  75% {
    transform: scale(0.8) translate(0, 0);
    opacity: 0.8;
	  filter: blur(10px);
  }
  100% {
    transform: scale(2) translate(50px, -100px);
    opacity: 0;
	  filter: blur(60px);
  }
}

.gotMyOpp {
  position: relative;
  animation: explode 0.5s ease-out forwards;

}

.gotMyOpp::before,
.gotMyOpp::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle, 
    rgba(200,200,200,0.7) 0%, 
    rgba(200,200,200,0) 70%)
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: smoke 0.8s ease-out forwards;
}
.gotMyOpp::before,
.gotMyOpp::after {
  animation-delay: 0.2s;
}


.openSlinky{animation: bounceDown 0.5s ease-in forwards;}

@keyframes bounceDown {
  0% {
	  transform-origin: 0 0;
	  min-height:0; 
	  height:1px;
    transform: scaleY(0.01);
  }

	 50% {
	  transform-origin: 0 0;
	 min-height:50px;
	  height:auto;
    transform: scaleY(0.35);
  }
  100% {
	  transform-origin: 0 0;
	 min-height:50px;
	  height:auto;
    transform: scaleY(1);
  }
}

.closeSlinky{animation: bounceUp 0.5s ease-in forwards;}

@keyframes bounceUp {
  0% {
	  transform-origin: 0 0;
	  min-height:50px;
	  height:auto;
    transform: scaleY(1);
  }
50% {
	  transform-origin: 0 0;
	 min-height:50px;
	  height:auto;
    transform: scaleY(0.7);
  }
  100% {
	  transform-origin: 0 0;
	  min-height:0;
	  height:1px;
    transform: scaleY(0.01);
  }
}

@keyframes arriveAndShrink {
  0% {
    transform: translateX(-200vw) translateY(0) scale(1) rotate(0deg);
  }
  74% {
    transform: translateX(-20vw) translateY(25vh) scale(1) rotate(0deg);
  }
  100% {
    transform: translateX(0) translateY(0) scale(0) rotate(0deg);;
  }
}

.awardFromLastTime {
  animation: arriveAndShrink 1s forwards;transform:  translateX(-200vw);width:0;height:0;overflow:visible;position:absolute
}


#inboundRequests img{border-radius:6px;margin-right:6px}


@keyframes paddingAnimation {
  from {
    padding-top: 50px;
  }
  to {
    padding-top: 0;
  }
}

.shrinkPadding {
  animation: paddingAnimation 1s ease forwards;
}

.ksButt a{border-radius:6px;}
.ksButt a:hover{box-shadow: 0px 2px 4px 0px rgb(6,6,6);filter: brightness(1.2)}
							
#achievementsHere div{display:inline-block;margin:5px}						
.divWidget{ transition: width 1s ease-out 0.5s;overflow-wrap: break-word;
background-image: linear-gradient(
    to bottom,
    transparent 195px,
    #000 195px,
    #000 210px,
    transparent 210px
  );
  background-size: 100% 208px;
  background-repeat: repeat-y;
}
/*
.menuactive{background-color:#fff;font-size: 1.17em;color:#000;font-weight:bold;padding:5px;border-top-left-radius:6px;border-top-right-radius:6px}
.menuadormant{background-color:#cdc;font-size: 1.17em;color:#000;padding:5px;border-top-left-radius:6px;border-top-right-radius:6px}
*/
.divWidget a{ border: 1px solid #666;
    border-radius: 6px;
    padding: 3px;
    font-size: 20px;
    width: 30px;
	display:inline-block;
    height: 30px;
	margin:1px;
	color:#000;
    text-align: center;
	overflow-wrap: normal;}

.keySkill .dbutt{border: 2px solid #000}
.keySkill checkbox{border: 2px solid #000}
.keySkill {background-color:#fff}
.goldbackground{background-image: linear-gradient(
	135deg,
	#462523 0,
       	#cb9b51 22%, 
	#f6e27a 45%,
	#f6f2c0 50%,
	#f6e27a 55%,
	#cb9b51 78%,
	#462523 100%
);border-radius:12px;padding:6px;box-shadow: 0 4px 8px 0px rgba(0,0,0,1);position:relative}

.gasbackground{background-image: linear-gradient( 135deg, #fffefe 0, #cfc5b6 22%, #fffffe 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );border-radius:12px;padding:6px;box-shadow: 0 4px 8px 0px rgba(0,0,0,1);position:relative}

.bronzebackground{background-image:linear-gradient( 135deg, #462523 0, #cb9b51 22%, #a57d52 45%, #9e632d 50%, #9f7652 55%, #cb9b51 78%, #462523 100% );border-radius:12px;padding:6px;box-shadow: 0 4px 8px 0px rgba(0,0,0,1);position:relative}
.velvet{border-radius:6px;margin:0;padding:10px;background: linear-gradient(45deg, #293333, #3f4444); box-shadow: inset 0 0 10px rgba(0,0,0,0.5);color:#fff}

.rvelvet{border-radius:6px;margin:0;padding:10px;background: linear-gradient(45deg, #332933, #443f44); box-shadow: inset 0 0 10px rgba(0,0,0,0.5);color:#fff}


.hideForNow{display:none;}
.Timer{position:absolute;top:0;left:0;height:40px;background-color:#0f0;animation-iteration-count:1;z-index:1}
@keyframes slideTimer {from {width:100px} to {width:0}}
.completed{font-size:12pt:background-color:#999;pointer-events: none;}

.completed:after{ float:right;font-size:200%; content: '✓';color: #191; }
.completed input[type=checkbox]{visibility:hidden;}
.completed .dbutt{display:none;}
.completed .difCom{display:none;}
.completed .but{visibility:hidden;}
.completed .detog{visibility:hidden;}
.completed .seeAlso{border:0;}
.completed .qlbut{display:none;}
#assignments{overflow-x:scroll}
.filtered {display:none}
.outline{filter: brightness(1000%) grayscale(100%) ;text-shadow: 2px 2px #000, -2px -2px #000}
.checkt{white-space: nowrap;margin: 10px;width:50px;height:25px;display:inline-block;font-size:15pt;}
.myops{background:#fff;background-image: linear-gradient(#0f2c84, #b4f8fa);position:relative }
.slided{animation-name:slideDown;animation-duration: 0.25s;}
@keyframes slideDown  {from {margin-top:-33%} to {margin-top:0}}
.slideu{animation-name:slideUp;animation-duration: 0.25s;}
@keyframes slideUp {0% {margin-top:33%} 100% {margin-top:0}}

.slider{animation-name:slideLeft;animation-duration: 0.25s;}
@keyframes slideRight {0% {margin-left:33%} 100% {margin-left:0}}
.slidel{animation-name:slideRight;animation-duration: 0.25s;}
@keyframes slideLeft {0% {margin-left:-33%} 100% {margin-left:0}}

.offerSQ{    height: 260px;width: 260px;margin: 5px;}
.bluranswer .answer, #popmessage .answer{color: transparent; text-shadow: 0 0 8px rgba(0,0,0,0.5);}


#pop{background-color:#fff;display:block;position:fixed;top:35px;max-height:90vh;max-width:90vw;padding:0;border-radius: 25px;box-shadow: 0 4px 8px 0px rgba(0,0,0,1);margin-left:5% }



textarea{width:90%;height: 60px; border:1px solid #666;border-radius:5px;}
.superscript{display:inline-block; position:relative;top:-20px;}
.faintcell{border:1px solid #999}
.wsummary{color:#fff;border-radius:4px;display:inline-block;color:#fff;width:30px;height:30px;text-shadow: 1px 1px #000;padding:5px;position:relative;margin:4px;text-align:center;}
th{background:#fff;padding:2px;position:sticky;top:0;z-index:9;}
.keyboard{display:block;vertical-align:top}
.keyboard a{text-decoration:none;text-align:center;background-color:#fff;color:#000;padding:5px;border-radius: 6px;box-shadow: 0px 4px 8px 0px rgba(0,0,0,1);display:inline-block;width:fit-content;margin: 2px}
#pafter{text-align:center;white-space:nowrap;overflow-x:auto;margin-left:-5px;padding-bottom:50px;scroll-behavior: smooth;}
@media screen and (max-width:450px){
	.freemium td{width:50px}
	.freemium th{width:50px}
	.textBox h3{text-align:center}
	.questionspacer{display:none}
}

@media screen and (max-width:400px){
.keyboard a{min-width:40px;padding-top:10px;padding-bottom:10px;}
#pafter .hint{position:relative;display:block;left:-220px}
.question{padding-bottom:25px;}
}
.goldstar{color: #fc0;text-shadow: 1px 1px #620;}
@media screen and (min-width:1200px){
.keyboard a{min-width:50px;}
	
}
.summaryBox{background-color:#fff;width:300px;padding:10px;margin-left:calc(50% - 150px);margin-bottom:10px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;}
.dontsay{padding:0;margin:0;display:inline-block}
.BUTnaked{
    display: inline-block;
    border:2px solid #ccc;
    text-align: center;
    padding: 3px;
    border-radius: 4px;
}


.outline{color:#fff;text-shadow: 1px 1px 3px #000}
@media screen and (min-width:1400px){
.keyboard a{min-width:60px;}
}
.flashBorder{border:2px solid #000; animation: blink;
  animation-duration: 1s;
 animation-delay: 2s;
  animation-direction: alternate;}

@keyframes blink {from {border-color: #000} to {border-color: #fff}}



.pricetag{background-color:#ff0;border:1px solid #999;padding:2px;border-radius:2px;line-height:normal;letter-spacing:normal;font-size:18pt}


@media screen and (min-width:401px){
	#searchlabel {width: 1px;height: 1px;overflow: visible;display: block;}
	#pafter .hint{position:relative;display:block;left:-160px}
.keyboard a{min-width:60px;padding-top:20px;padding-bottom:10px;font-size:18pt;}

.within{z-index:1009;min-height:50px;background-color: #fff;font-weight: bold;font-size: 110%;}

}
#pafter img{border: 12px solid #000;border-radius:12px;box-shadow: 0px 4px 8px 0px rgba(0,0,0,1)}
#pafter img{width:400px;height:300px;margin:20px;}


.tform td{padding-top:20px;vertical-align: top;border-top:1px solid #fff;}
.stuck{border-bottom-left-radius: 0;border-bottom-right-radius: 0;margin-bottom:0;overflow:hidden;padding-bottom:0;}
@media screen and (min-width:650px){
	#countries{margin-top:100px}
	#pafter{margin-top:100px;margin-bottom:100px}
	.ssub{position:sticky;top:0}
.xv{font-size:16pt;}
.fineOpts{font-size:15pt;}
.dbutt{margin-right:16px;}
.stuck{position:sticky;top:10px;z-index:10;height:auto;box-shadow: 0 1px 4px 0px rgba(0,0,0,1);min-height: 70px;}
.within{z-index:1009;min-height:50px;background-color: #fff;font-weight: bold;font-size: 20pt;}
}
.closeX {position:absolute;right:0;top:-10px;color:#000;border:20px;margin:20px;font-size:130%;z-index: 10;}
.yel{color:#fc6;width:50px;height:40px;display:inline-block;text-align:center;padding-top:10px;border-radius:4px}
.yel:hover{color:#fff;border: 1px solid #fc6;border-radius:6px;}
.hint{font-size:12pt;z-index: 20;
    display:none;
    text-align: left;
    position:absolute;
    left:0;
    bottom:0;
  max-width:200px;
    background-color: #cdc;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
    padding: 5px;
    border-radius:4px;
    font-weight: normal;
    min-width: 135px;
    white-space:normal;
	line-height:1.5em;
}
.amendans{display:inline-block;background-color: #cdc;box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);padding: 5px; border-radius:4px;}
.keyboard a:hover{background-color:#fc6}
.roundselect{background-color:#fff;font-size:14pt;border:1px solid #000;border-radius: 5px;}

.workings{font-family:"Comic Sans MS", cursive, sans-serif;color:#333;display:block;border:1px solid #999;padding-top:15px;position:relative;top:0;}
.workings:before{
  content: 'workings';
  color:#000;
  position: absolute;
  top: 0;
  left: 0;
  font-size:10pt;
}

#photos{white-space: nowrap;width:100vw;margin-left:-10px;overflow:hidden}
.answer{font-weight:bold;border-bottom: 1px solid #000;padding:9px}
.got{font-weight:bold;color:#fff;background-color:#363;text-shadow: 1px 1px #000;padding:5px;border-radius: 4px;width:45px;height:21px;}
.chosen{text-decoration:none;background-color:#030;height:15px;padding:10px;border-radius: 6px;white-space: nowrap;position: fixed;top: 22px;left: Calc(50% - 146px);text-align: center;}
.chosen:hover{background-color:#696}

.chosen span{width:32px;height:21px;padding:0;display:inline-block;text-align:center;}
.skipped{background-color:#f6f6f6;padding:15px;border-radius: 6px;border-left:2px solid #fc6;margin:10px;position:relative;}
.skipped a{color:#000;}
.gaveup a{color:#000;}
.gaveup{background-color:#f6f6f6;padding:15px;border-radius: 6px;border-left:2px solid #f00;margin:10px}
.correct{background-color:#fff;padding:10px;border-radius: 6px;border-left:2px solid #191;font-size:12pt;opacity:0.8;width:95%;margin:0 auto;margin-top:3px;position:relative;}
.correct .hideForNow{display:revert}
.corrected{background-color:#fff;padding:10px;border-radius: 6px;border-left:2px solid #191;font-size:12pt;opacity:0.8;width:95%;margin:0 auto;margin-top:3px;position:relative;}
.black{display:block;color:#fff;padding:2px;font-size:80%;opacity:0.8;position:absolute;top:0;right:100px;}
.blue{background-color:#003;text-decoration:none;color:#ccf;border-radius: 6px;padding:3pt;white-space:nowrap;font-size:10pt;font-weight:bold}
.blue:hover{background-color:#00c;}
.grass a{border-radius:3px}
.seeAlso {text-decoration:none;text-align:center;color:#000;padding:3px;border-radius: 6px;border:1px solid #999;display:inline-block;width:fit-content;margin: 2px}
.NseeAlso {text-decoration:none;text-align:center;color:#000;padding:3px;border-radius: 6px;border:1px solid #999;display:inline-block;width:fit-content;margin: 2px}
.seeAlso:hover{background-color:#cdc}
#beta, em{font-weight:bold;color:#191;text-shadow: 1px 1px #000;font-size:140%;}
del{text-decoration:line-through;}
.wrong{font-weight:bold;color:#f11;text-shadow: 1px 1px #000;font-size:140%;}
.faint{opacity:0.7;padding:5px;font-size:10pt;font-weight:normal;}

.sylly a:hover{border:1px solid #fff;}
.inset p:hover{border-top: 1px solid #cdc;border-bottom: 1px solid #cdc;background-color:#eef3ee}
/*
.inset p:hover .dbutt{width:30px;height:30px;font-size:30px;box-shadow: 0 2px 4px 0 rgba(0,0,0,1);text-shadow: 2px 2px #000;}
.inset p:hover .dbutt:hover{background-color:#fd7;}
*/
.inset blockquote:hover{border-top: 1px solid #eef3ee;border-bottom: 1px solid #eef3ee;}
.btw{font-weight:normal;font-size:80%;white-space:normal;}
.targetlev{font-weight:bold;font-size:80%;width:100%;}
.floor{display:block;background-color:#030;color:#fff;position:fixed;width:100vw;height:28px;left:0;bottom:0;padding:0;margin:0;font-size:12pt;white-space: nowrap;z-index:101;padding-left:50px;}
.coin{display:inline-block}
.coincount{display:block;position:relative;top:-40px;left:10px;background:#fff;border-radius:5px; width:10px;border:5px;visibility:hidden;padding:5px;}
.coincount:after{ content:"\A \25bc"; }
.purse{display:inline-block;max-height:100px;}
.banked{text-align:center;}
.banked img { width: 60%;}
.banked img:before{
  content: '✕';
  color:#000;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.ccl{text-align:right;border-radius:3px;padding:4px;background-color:#ed9;color:#666}
.circles{font-size:18pt;}
.xwrong{font-weight:bold;background-color:#c11;color:#fff;box-shadow: 0px 4px 8px 0px rgba(0,0,0,1);border-top:1px solid #fff;border-left:1px solid #ccc;border-radius: 3px;}
.redbox{border:2px solid #f00;padding:2px;border-radius:3px;}
@media (max-width:400px){
	#searchlabel {display:none;overflow: hidden;visibility:hidden}
.coin{transform: scale(0.7);}
.purse{position:static;margin:-13px;margin-top:-50px}
.tol {clear:both;}
}
.pastel{color: #696;font-size:12pt;box-shadow: 0 1px 2px 0 rgba(0,0,0,1);padding:2px;font-style:normal;}
.pastel:hover{color: #000;background-color:#eef3ee;}
.ball{border-radius: 50%;width: 70px;height: 60px;padding-top:10px; margin:5px;color: #000;text-align: center;font-size:80%;display:inline-block;box-shadow: 0 4px 8px 0 rgba(0,0,0,1);border: 2px solid rgba(0,0,0,0);}
.fe{
display: none;

}
.feedback {border-radius: 6px;display: block;background-color: #eef3ee;position: fixed;right:5px;font-size:10pt;padding: 5px;z-index: 1001;max-width: 280px;box-shadow: 0 4px 8px 0px rgba(0,0,0,1)
}
#marquee{font-family:Arial, Helvetica, sans-serif;}
.green{text-align:right;font-size:16pt;border-radius:3px;box-shadow: 0px 2px 4px 0px rgba(0,0,0,1);padding:4px;font-family:Arial, Helvetica, sans-serif;}
.green td{border-radius:2px;padding:5px;}
.Hframe, .frame{text-align:center;font-size:16pt;border-radius:3px;box-shadow: 0px 2px 4px 0px rgba(0,0,0,1);padding:4px;background-color:#eef3ee;margin:5px;line-height:1em}
.frame td{border-radius:2px;border-left: 1px solid #666;border-top: 1px solid #666;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;background-color:#fff;width:30px;height:30px;line-height:1em}

.grass{display:block;border-radius:6px;background-color:#eef3ee;margin-top:10px;}
.grass a{color:#030;}

.teacht td {vertical-align: top;padding:5px}
.teacht tr {max-height:100px;}
.grass a:hover{color:#696;}
.BRcircle{display:block;position:absolute;right:-15px;bottom:-12px;border-radius: 50%;width: 13px;height: 13px;padding:5px;text-align: center;background-color:#fff;color:#000;text-shadow:none;}
.LDtime{background-color:rgba(0,0,0,0.8);color:#fff;position:absolute;bottom:-20px;left:0;margin-bottom:10px;}
.LDskipped{background-color:#000;color:#fff;top:-7px}
.LDerror{background-color:#fc6;color:#000;top:20px}
.incircle{display:inline-block;border-radius: 50%;width: 20px;height: 20px;padding:5px;text-align: center;background-color:#cdc;line-height: 1em;}
.numlinks{display:inline-block;border-radius: 25px;height: 20px;padding:5px;text-align: center;background-color:#cdc}
.numlinks:hover{background-color:#eef3ee}
.yh{font-family:Arial, Helvetica, sans-serif}
.yh:hover{background-color:#fc6}
.hollowcircle{display:inline-block;border-radius: 50%;width: 20px;height: 20px;padding:5px;text-align: center;border: 2px solid #cdc;}
.barnet{background-color:#cdc; width:100%;padding:10px;padding-left:20px;position:relative;left:-10px;display:block;z-index:999}
.barnet a{color:#030}
.barnet a:hover{color:#060;}
.tabCon{position:relative;left:-10px;padding-left:10px;padding-bottom:0;margin:0;border-bottom:2px solid #000;}
.atab{background-color:#cdc;display:inline-block;height:35px;min-width:100px;max-width:150px;width:fit-content;border:1px solid #333;border-top-left-radius: 4px;border-top-right-radius: 4px;color:#000;text-align:center;padding: 5px;padding-top:10px;position:relative;top:3px}
.tab{background-color:#fff;display:inline-block;height:35px;min-width:140px;max-width:200px;width:fit-content;font-weight:bold;font-size:110%;border-top-left-radius: 4px;border-top-right-radius: 4px;border:2px solid #333;border-bottom:5px solid #fff;padding-top:10px;position:relative;top:4px;text-align:center;color:#000}
.options a{color:#000;}
.difCom a{text-decoration:none}
.menuhead a{text-decoration:none}
.menuhead a:hover{color:#696;}
.activeInput{background-color:#eef3ee;padding:0;box-shadow: 0px 2px 4px 0px rgba(0,0,0,1);margin: auto;border-radius: 6px;
    padding-bottom: 6px;}
.glossaryLink{color:#000;text-decoration:underline;}
.gone{text-decoration:line-through; opacity:0.5;}

.discard {position: relative;}

.discard:before {opacity:0.5;position: absolute;content: "";left: 0;top: 50%;right: 0;border-top: 2px solid;border-color: inherit;

  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.shot{opacity: 0.8;border-top:2px solid #000;border-left:2px solid #000;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    font-size:10pt;
    text-align:center;
    padding-left:3vw;
    padding-right:3vw;
    padding-top:0.7vw;
    padding-bottom:0.7vw;

}
.notshot{
   border-top:1px solid #fff;
    border-left:1px solid #fff;
    border-bottom:1px solid #000;
    border-right:1px solid #000;
        padding-left:3vw;
    padding-right:3vw;
    padding-top:0.7vw;
    padding-bottom:0.7vw;
}
.chimney{border:0;margin:0;border-collapse: collapse;text-align:center;vertical-align: middle;}
.fraction{display:inline-block;height:35pt;}
.frsub{font-size:100%;display:block;width:100%;position:relative;top:10pt;text-align:center;vertical-align: sub;}
.frsup{font-size:100%;display:block;width:100%;position:relative;top:10pt;text-align:center;border-bottom:2pt solid currentColor;padding-bottom:-2px;vertical-align: super;}
.tol .shbut{vertical-align:bottom;min-width:50px;margin-left:5px;padding:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid #ddd;text-align:center;opacity:0.5;padding:3px;display:inline-block;}
.tol a{vertical-align:bottom;text-align:center;background-color:#cdc;margin-left:5px;padding:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid #cdc;background:linear-gradient(135deg, #f6fdf6, #cdc);display:inline-block;min-width:50px}
.tol a:hover, #sDb .selectLimit:hover{background-color:#f6fdf6;background:linear-gradient(135deg, #cdc, #f6fdf6)}
sub{white-space:nowrap;}
.question{overflow:hidden;} /* visible overflow resulted in not stretching question box to fit contents */
.searchelem{position:sticky;z-index:999;margin-top:30px;display:block;width:auto;max-width:300px}
.searchelem a:hover{background-color:#eef3ee;}
#popmessage{font-size:1rem}
#trButtons .but{font-size:1rem;min-height:0}
 #popmessage{overflow:auto;position:relative;min-height:50px;}
@media (max-width:799px){
	.signup{width:300px;left:Calc(50vw - 150px);max-height:90vh;overflow-y:auto}
	.tabCont{background-color:#fff;position:relative;margin:0;padding-top:20px;padding-left:0}
	.options{width:90vw;left:2.5vw;}
	

	.barnet{padding: 5px;padding-left: 5px;margin-top:0}
	#loginlogo{position:absolute;top:10px;}
	 .searchelem{left:105px;top:0;}
	.hangLeft{display:none}
	
    .coin{max-width:139px; height:auto;}
    .preq{margin-top:45px}
    .question{padding-bottom:45px;margin-left:0;margin-right:0;overflow-x:auto}
   .tol {display:block;position:relative;top:10px;} 
   .tol a {font-size:16pt;max-width:17vw;} 
   .wDif{display:block;clear:both;background-color:#fff} 
   .wDif::after {content: "\A";}
   .mspace{margin-top:30px}
   .nlcounted{padding-right: 20px;padding-left: 5px;margin-bottom:0;background-color:#fff}
   .glyph{font-size:4vw;margin:0;line-height:1;letter-spacing: -5px;}
.Hglyph{font-size:30px;margin:0;font-family:Arial, Helvetica, sans-serif;}
	 #popmessage{max-height:Calc(100vh - 100px);}
	.numberline{display:none;z-index:99;box-shadow: 0 4px 8px 0 rgba(0,0,0,1);width:30px}
	.numberline a{height:20px;display:inline-block;width:40px;font-size:20px;}
}

 @media (min-width:800px){
	 #popmessage{padding:1vw;max-height:Calc(100vh - 190px);}
	 .signup{width:630px;left:Calc(50vw - 315px);}
	 .tabCont{background-color:#fff;position:relative;margin:0;padding-top:20px;padding-left:100px;;max-height:Calc(90vh - 80px);overflow-y:auto}
	 .searchelem{left:155px;top:13px;}
	 .hangLeft{left:25px;position:relative}
	 #loginlogo{position:absolute;top:10px;}
	

    
     .opportunity a{margin:40px;}
     .coin{max-width:210px; height:auto;}
    .numberline{ margin-top:20px;display:none;display:block;color:#000;padding-left:2px;font-size:20px;z-index:99;box-shadow: 0 4px 8px 0 rgba(0,0,0,1);white-space:nowrap;overflow-x:auto;margin-bottom: 20px;}
    .numberline a{height:40px;display:inline-block;width:30px;border-right:1px solid #090;border-top:2px solid #fff;color:#fff;padding-top: 10px;}
	 .numberline a span{position:relative;bottom:-20px;font-size:120%}
    .nlcounted{padding-top: 20px;padding-bottom: 5px;margin-bottom:0;background-color:#393;}
    .wDif{background-color:#030;color:#fff;padding:5px;position:relative;top:5px;border-top-left-radius: 6px;border-top-right-radius: 6px;line-height: 1em;padding-bottom:11px}
.tol {white-space: nowrap;float:right;position:absolute;bottom:0;right:0}
.tol a {font-size:16pt;} 
.glyph{font-size:40px;margin:2px;line-height:1;letter-spacing: -5px;}
.Hglyph{font-size:40px;margin:2px;font-family:Arial, Helvetica, sans-serif;}
 

}
.sayMe{color: transparent;text-shadow: 0 0 0 #999;transform: scale(-1, 1);display:inline-block;position:absolute;top:6px;right:6px;font-size:50px;width:60px;height:42px}
.sayMe:hover{text-shadow: 0 0 0 #333;}
.sayMe::after{content:"\25C0";font-family:Arial, Helvetica, sans-serif;position:relative;left:15px;top:-20px;color:#fff;font-size:25px;}
.sayMe::after:hover{color:#cdc}
.hooj a:hover{box-shadow: 0px 0px 4px 0px rgba(255,255,255,1);border: 2px solid #fff;z-index:9;}

.counted{opacity:0.3;}

.jfaint{opacity:0.7;}

.askDifficulty{display:block;clear:both;border-radius:4px;padding:4px;margin-top:42px;overflow-x:auto;padding-left: 20px}
.FKskip{display:block;white-space:nowrap;clear:both;overflow-x:auto;}

.smhbut {position:absolute;bottom:6px;right:6px;font-size:20px;background-color:#cdc;box-shadow: 0px 4px 8px 0px rgba(0,0,0,1);padding:5px;color:#000;background:linear-gradient(135deg, #f6fdf6, #cdc);border-radius: 6px;min-width:50px;text-align:center}
.smhbut:hover{background-color:#f6fdf6;background:linear-gradient(135deg, #cdc, #f6fdf6)}

.FKskip a{display:inline-block;text-decoration:none;padding:6px;border-radius:6px;background-color:#cdc;margin-left:2px;}
.askDifficulty a{display:inline-block;text-decoration:none;padding:6px;border-radius:6px;background-color:#030;margin-left:2px;}
.askDifficulty a:hover{background-color:#696}
.fun{opacity:0.1;}
.fun:hover{opacity:1;}

.askDiff{display:block;clear:both;background-color:#050;border-radius:4px;padding:4px;margin-top:42px;overflow-x:auto}

.opportunity{display:block;border-radius:4px;padding:4px;white-space:nowrap;overflow-x:auto;padding:10px;}
.opportunity a{display:inline-block;text-decoration:none;padding:6px;border-radius:6px;margin:20px;box-shadow: 0px 2px 4px 0px rgb(6,6,6);color:#fff;position:relative}
.opportunity a:hover{background-color:#fc6;box-shadow: 0px 4px 8px 0px rgb(6,6,6);filter: brightness(1.2);}

.micButt{ background: linear-gradient(135deg, #e2e2e2, #fff); border-width: 3px;  border-color: #fff #ccc #ccc #fff;text-align:center;z-index:102;border-radius:12px;color:#660000}
.ksButt{ background: linear-gradient(135deg, #cdc, #fff); border-width: 3px; border-style: solid; border-color: #fff #ccc #ccc #fff;text-align:center;z-index:102;border-radius:12px;overflow:hidden;cursor: pointer;box-shadow: 1px 2px 2px 1px rgba(0,0,0,1);margin-left:8px;width:100px;height:100px;color:#000;}
.ksButt:hover{ background: linear-gradient(55deg, #cdc, #fff);}

.sresults{    z-index: 1001;
    display: none;
    text-align: left;
    position:absolute;top:32px;
    white-space:normal;
    font-size:12pt;
    background-color: #fff;
    width:200px;
    box-shadow: 0px 8px 16px 0px rgb(0, 0, 0);
    max-height: 275px;
    overflow-y: auto;
	overflow-x: hidden;
    border-radius:6px;
}
.sresults a{display:inline-block;line-height:90%;color:#030;padding-top:10px;padding-bottom:10px;margin:0;padding-left:5px;width:95%;}
.sresults a:hover{color:#000;background-color:#eef3ee}
.sresults sup{display:inline-block;background-color:#eef3ee;color:#333;}
.sresults ul{margin:0;padding:0;list-style-type:"\00BB";}
.sresults li{font-size:80%;margin:0;padding:0;margin-left:15px}
.sresults li::marker {
  color:#999;
  font-weight: normal;
}

.servant {border-left:5px solid #eef3ee;padding-left:10px;margin-top:-20px;padding-top:20px;}

.dbutt {display:block;background-color:#cdc;border-radius:4px;float:right;padding:5px;position:relative;top:-35px;font-size:10pt;font-family: Arial, Helvetica, sans-serif;height: 24px;}
.dbutt a{color:#fff}
.dbutt:hover{background-color:#eef3ee}

.picBut{text-align:center;background-color:#fff;color:#000;width:100px;padding:10px;height:62px;border-radius: 6px;box-shadow: 0px 4px 8px 0px rgba(0,0,0,1);display:block;position:relative;top:0;overflow:hidden}
.picBut:hover{box-shadow: 0px 2px 4px 0px rgba(255,255,255,1);z-index: 10;}
.bigT{font-family: Arial, Helvetica, sans-serif;font-size:50px;font-weight:bolder;margin:0;padding:0;line-height: 50px;}

.abacus{box-shadow: 0px 2px 4px 0px rgba(255,255,255,1);}
.noagap{display:inline-block;animation-name: unslideAbacus; animation-duration: 0.15s;animation-fill-mode: forwards;animation-timing-function: ease-in;}
.agap{display:inline-block;animation-name: slideAbacus; animation-duration: 0.15s;animation-fill-mode: forwards;animation-timing-function: ease-in;}
@keyframes slideAbacus  {0% {padding-left:0} 100% {padding-left:50px; }}
@keyframes unslideAbacus  {0% {padding-left:50px} 100% {padding-left:0; }}



.deprecate{display:none;}
.tog{display:none;}
.dep{visibility:hidden;z-index:1;}
.shrink{max-width:100%; height:auto;}

.moveToLeft {
  animation: slideQLeft 0.5s forwards;
  -webkit-animation: slideQLeft 0.5s forwards;
  -moz-animation: slideQLeft 0.5s forwards;
}

.moveFromRight {
  animation: slideQRight 0.5s forwards;
  -webkit-animation: slideQRight 0.5s forwards;
  -moz-animation: slideQRight 0.5s forwards;
	
	
}

@keyframes slideQLeft {
  from {
    transform: translate(0, 0);
  }
  to {

    transform: translate(-100vw, 0);
  }
}

@-webkit-keyframes slideQLeft {
  from {
    -webkit-transform: translate(0, 0);
  }
  to {

    -webkit-transform: translate(-100vw, 0);
  }
}

@-moz-keyframes slideQLeft {
  from {
    -moz-transform: translate(0, 0);
  }
  to {

    -moz-transform: translate(-100vw, 0);
  }
}


@keyframes slideQRight {
  from {

	  transform: translate(100vw, 0);
  }
  to {

    transform: translate(0, 0);
  }
}

@-webkit-keyframes sslideQRight {
  from {

	  transform: translate(100vw, 0);
  }
  to {

    transform: translate(0, 0);
  }
}

@-moz-keyframes slideQRight {
  from {

	  transform: translate(100vw, 0);
  }
  to {

    transform: translate(0, 0);
  }
}



.fcoin{position: fixed; top: 0; text-align: center; z-index:999;animation: fcoinSlide ease-in; animation-iteration-count: 1;
-webkit-animation: fcoinSlide ease-in; animation-iteration-count: 1;
-moz-animation: fcoinSlide ease-in; animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
@keyframes fcoinSlide {from {position: fixed; top:0} to {position: fixed; top: 100vh;}}
@-webkit-keyframes fcoinSlide {from {position: fixed; top:0} to {position: fixed; top: 100vh;}}
@-moz-keyframes fcoinSlide {from {position: fixed; top:0} to {position: fixed; top: 100vh;}}

.comehint{animation: fadehint ease-in; animation-iteration-count: 1;
-webkit-animation: fadehint ease-in; animation-iteration-count: 1;
-moz-animation: fadehint ease-in; animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;-webkit-animation-duration: 5s; animation-duration: 5s;}
@keyframes fadehint {from {opacity:0;} to {opacity:1;}}
@-webkit-keyframes fadehint {from {opacity:0;} to {opacity:1;}}
@-moz-keyframes fadehint {from {opacity:0;} to {opacity:1;}}

.silver{background:linear-gradient(135deg, #ccc, #fff);height:8px;}
.gold{background:linear-gradient(135deg, #fc6, #fd9);height:8px;}
.bronze{background-color:#C96;height:8px;}

.gotwedge{left:50vw; text-align: center;
animation: floatwedge ease-in; animation-iteration-count: 1;
-webkit-animation: floatwedge ease-in; animation-iteration-count: 1;
-moz-animation: floatwedgee ease-in; animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
webkit-animation-duration: 1s;
animation-duration: 1.2s
}
@keyframes floatwedge {from {position: fixed; top:100vh} to {position: fixed; top: -100px;}}
@-webkit-keyframes floatwedge {from {position: fixed; top:100vh} to {position: fixed; top: -100px;}}
@-moz-keyframes floatwedge{from {position: fixed; top:100vh} to {position: fixed; top: -100px;}}

/*Add to thing to make it up through top border*/
.gotPair{position: relative;
animation: pairgot ease-out; animation-iteration-count: 1;
-webkit-animation: pairgot ease-out; animation-iteration-count: 1;
-moz-animation: pairgot ease-out; animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
webkit-animation-duration: 0.5s;
animation-duration: 0.5s
}
@keyframes pairgot {from { top:0} to { top:-900px;}}
@-webkit-keyframes pairgot {from { top:0} to { top:-900px;}}
@-moz-keyframes pairgot {from { top:0} to { top:-900px;}}



.recDot{
	color: #990000;
	/*
          color: transparent;
    text-shadow: 0 0 0 #990000;
	*/
}
.flash {animation: blinker 1s linear infinite;}
@keyframes blinker {  
  50% { opacity: 0; }
}

.hBorder{border:2px solid #060;border-radius:4px;}
.nh{border:2px solid #ccc;border-radius:4px;}

.timeLine{overflow-x:scroll;height:auto;max-height:50vh;font-size:12pt;}
.timeLine a{padding:2px;color:#000;background-color:#fff;display:block;clear:both;border-radius: 3px;margin:1px;min-height:40px;border:2px solid #fff;font-size:12pt;}
.timeLine a:hover{border:2px solid #fc6;background-color:#eef3ee;}
.tgthr{white-space:nowrap;font-size:80%;}
.topcurve{border-top-left-radius: 6px;border-top-right-radius: 6px;font-weight:bold;color:#000;background-color:#cdc;}
.now {background-color:#eef3ee;font-size:12pt;width:300px;box-shadow: 0 2px 4px 0 rgba(0,0,0,1);overflow:scroll;}
.now::before{content: "this week";transform: rotate(325deg);background-color: #f00;
  color: #fff;
  font-weight: bold;display:block;width:25px;height:20px;position:absolute;top:5px;left:5px;font-size:6pt;}
  .darkBG{z-index:1000;width:100vw;height:100vh;background-color:rgba(0,0,0,0.6);position:fixed;top:0;left:0;display:none}
 .dyslexiaBlue{z-index:2000;width:100vw;height:100vh;position:fixed;top:0;left:0;pointer-events: none; }
.qlbut{font-family:Arial, Helvetica, sans-serif;margin-left:20px;display:inline-block;background-color:#cdc;border-radius:6px;padding:2px;width:80px;float:right;}
a.qlbut {color:#fff}
a.qlbut:hover{color:#fff}
.qlbut:hover{color:#fff;opacity:0.9;box-shadow: 0px 4px 8px 0px rgb(0 0 0);}

.alsoSee{padding:0;margin-top:0;color:#666;}
.preview{position:fixed;top:0;left:600px;width:400px;height:400px;z-index:1001;max-height:90vh;background-color:#eef3ee;transform: scale(0.5);transform-origin: 0 0;border-bottom-right-radius:50px;border-top-right-radius:50px;left:calc(50vw + 190px);overflow:hidden;}
.spreview{position:absolute;padding-top:10px;top:58px;margin:0;max-height:90vh;background-color:#fff;transform: scale(0.5);transform-origin: 0 0;overflow:hidden}
.spreview.sayMe{display:none;visibility:hidden}
.preview::before{content: "Preview";width:100%;text-align:center;height:30px;background-color:#cdc;display:block;margin:0;}





.detog{font-family:Arial, Helvetica, sans-serif;}

.xv{min-height:50px;background-color:#f8f8f8}
.xv:hover .qlbut{box-shadow: 0 2px 4px 0 rgba(0,0,0,1);text-shadow: 2px 2px #000;color:#fc6;width:50px;height:50px;}
.xv:hover .detog{position:relative;top:15px;background-color:#fc6;}
.xv:hover .dbutt{background-color:#fc6;}
.otherYear{color:#999;}
.offsyl{opacity:0.5;background-color:#000;color:#fff;}
.offsyl:hover{color:#000;}
.offsyl a{color:#fff;}
.offsyl:after{
  content: 'off syllabus 🌶🌶🌶';
  color:#fff;
  background-color:#000;
  font-size:10pt;
  padding:2px;
}

 .clockwise{ -webkit-animation: spin1 5s infinite linear;
  -moz-animation: spin1 5s infinite linear;
  -o-animation: spin1 5s infinite linear;
  -ms-animation: spin1 5s infinite linear;
  animation: spin1 5s infinite linear;
        
    }
 @-webkit-keyframes spin1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes spin1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}

.anticlockwise{ -webkit-animation: spin2 5s infinite linear;
  -moz-animation: spin2 5s infinite linear;
  -o-animation: spin2 5s infinite linear;
  -ms-animation: spin2 5s infinite linear;
  animation: spin2 5s infinite linear;
        
    }
 @-webkit-keyframes spin2 {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-moz-keyframes spin2 {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}

@-o-keyframes spin2 {
  0% {
    -o-transform: rotate(360deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}
.barnet.gotPair{display:none}


.goldfont{font-family: 'Times New Roman',serif;
	position:absolute;
	top:20px;
	left:0;
	text-align:center;width:100%;
	display:block;
   height:fit-content;
   letter-spacing: 3px;
   font-size: 30px;
   background-image: linear-gradient(
	to right,
	#462523 0,
       	#cb9b51 22%, 
	#f6e27a 45%,
	#f6f2c0 50%,
	#f6e27a 55%,
	#cb9b51 78%,
	#462523 100%
	);
   color:transparent;
   -webkit-background-clip:text;
   }