.txt-highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%, hsl(29, 91%, 53%) 0%);
}
.txt-highlight2 {
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%, white 0%);
}
#instructionTxt {
  padding-bottom:10px !important;
  z-index: 20 !important;
  position: relative;
}
#numbers td {
  font-size: 5vmax;
  color:rgba(255, 255, 255, 0.589);
  font-weight: 900;
  /* cursor: pointer; */
  line-height: normal;
}   
.numLink{
  text-decoration: none;
  color:#fff;
  cursor: pointer;
} 
.numLinkOff{
  text-decoration: none;
  color:rgba(255, 255, 255, 0.589);
  cursor: default;
}    
td a.numLink:hover {
  color:#f4831b;
}      
td a.numLinkOff:hover {
  color:rgba(255, 255, 255, 0.589);
}      

td.circleNum {
  border-radius: 50%;
  /* background-color: rgba(6, 48, 88, 0.8); */
  background-color: rgba(3, 59, 106, 0.686);
  box-shadow:
    0 0 60px 30px rgba(3, 59, 106, 0.688),
    0 0 80px 50px rgba(153, 226, 255, 0.604),
    0 0 100px 70px rgba(164, 237, 255, 0.668);

}

.circleNum a {
  color:#fff;
  text-decoration: none;
}
td.circleNum a:hover {
  color:rgba(244, 131, 27, 1);
}
.introText {
  color:white;
  font-weight:bold;
  font-size: 1.2rem;
  line-height: 1.4em;
}
.nextBtn {
  margin-top: -2rem;
}

.prevBtn {
  margin-bottom: -2rem;
}

@media (min-width: 576px) { 
  #numTable {
    left:20%;
    /* top:12%; */
  }
  #mainContainer {
    min-height:580px;
  }
 }
 @media (min-width: 768px) { 
  #numTable {
    left:20%;
    /* top:12%; */
  }
  #mainContainer {
    min-height:480px;
  }
 }
 @media (min-width: 992px) { 
  /* #numTable {
    left:27%;
    top:12%;
  } */
  .card {
    width: 80% !important;
  }
  #mainContainer {
    min-height:880px;
  }
 }
 @media (min-width: 1365px) { 
  #numTable {
    left:27%;
  }
 }
 @media (min-width: 1600px) { 
  #topContainer {
    min-height: 424px;
  }
  
 }
 @media (min-width: 1800px) { 
  #topContainer {
    min-height: 430px;
  }
 }
 @media (min-width: 2000px) { 
  #topContainer {
    min-height: 470px;
  }
 }
 @media (min-width: 2200px) { 
  #mainContainer {
    min-height:1180px;
  }
  #topContainer {
    min-height: 520px;
  }
 }
 @media (max-width: 576px) { 
  #numTable {
    /* left:0;
    top:15%; */
  }
  #mainContainer {
    height: 680px;
  }
 }
 @media (max-width: 550px) { 
  #numTable {
    left:17%;
    top:15%;
  }
  #mainContainer {
    height: 580px;
  }
  .sharks {
    top: 45% !important;
  }
  .fishToLeft {
    top:30% !important;
  }
  .fishToLeft2 {
    top:30% !important;
  }
 }
 @media (max-width: 415px) { 
  #numTable {
    left:3%;
    /* top:15%; */
  }
  #mainContainer {
    height: 540px;
  }
  #numbers td {
    font-size: 4.7vmax;
  }
  svg#fish {
    top: 25% !important;
  }
 }
@media (max-width: 376px) {
  #numTable {
      left: 8%;
  }
}
 /* Galaxy fold width */
 @media (max-width: 280px) { 
  #numTable {
    left:0;
    top:15%;
  }
  #mainContainer {
    height: 680px;
  }
  #numbers td {
    font-size: 4vmax;
  }
 }

.movingOcean {
  position: relative;
  overflow: hidden;
  height: 700px;
}
 

.initialWitch {
  position: absolute;
  margin-left: -165px;  
  top: 6%;
  animation: moveFirst 20s linear .1s;
  animation-iteration-count: 1;
}

#bubble1 {
  position: absolute;
  left: 30%;
  top:-120%;
  animation: floatBubble 10s linear 10s infinite;
}
#bubble2 {
  position: absolute;
  left: 80%;
  top:-120%;
  animation: floatBubble 20s linear 20s infinite;
}
#bubble3 {
  position: absolute;
  left: 50%;
  top:-120%;
  animation: floatBubble 5s linear 5s infinite;
}
#bubble4 {
  position: absolute;
  left: 90%;
  top:-120%;
  animation: floatBubble 30s linear 30s infinite;
  animation-delay: 0.8s;
}
#bubble5 {
  position: absolute;
  left: 90%;
  top:-120%;
  animation: floatBubble 7s linear 7s infinite;
  animation-delay: 0.2s;
}
#bubble6 {
  position: absolute;
  left: 10%;
  top:-120%;
  animation: floatBubble 5s linear 5s infinite;
  animation-delay: 1s;
}
.secondFish {
  position: absolute;
  left: -20%;
  top: 200px;
  animation: move 30s linear 0s infinite;
  width: 150px;
}

.fishToLeft {
  top: 70%;
  right:-235px;
  position: absolute;
  animation: swimLeft 41s linear 1s infinite;
  transform: scaleX(-1);
}
.fishToLeft2 {
  top: 70%;
  right:-235px;
  position: absolute;
  animation: swimLeft 81s linear 1s infinite;
  transform: scaleX(-1);
}
#fishToLeft1 {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
#fishToLeft2 {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
#fishToLeft3 {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.sharks {
	position: absolute;	
  top:13%;
  right:-225px;
  animation: swimLeft 120s linear 1s infinite;
}
#shark1 {
  -moz-animation: bounce 8s infinite;
  -webkit-animation: bounce 8s infinite;
  animation: bounce 8s infinite;
}

@-webkit-keyframes move {
  from {
    left: -30%;
  }
  to {
    left: 100%;
  }
}

@-webkit-keyframes moveFirst {
  from {
    left: -5%;
  }
  to {
    left: 120%;
  }  
}

@-webkit-keyframes floatBubble {
    0% {
        top:500px;
        opacity: 0;
    }
    50% {
      opacity: 0.7;
    }
    100% {
        top: 0px;
        opacity: 1; 
    }
}

#firstFish {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

svg#fish {
  top: 30%;
}
/* Fish Animation */
svg.fish{
  overflow:visible;
}

.fish{
	width: 235px;
	height: 104px;
	margin-left: -235px;
	position: absolute;	
	animation: swim 35s;
	-webkit-animation: swim 35s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

svg #fish1,
svg #fish2,
svg #fish3,
svg #fish4,
svg #fish5,
svg #fish6 {
fill:#1d355a;
  
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

svg #fish2{
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}

svg #fish3{
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

svg #fish4{
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

svg #fish5{
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

svg #fish6{
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

.groupFish{
	width: 235px;
	height: 104px;
  top: 50%;
	margin-left: -235px;
	position: absolute;	
	animation: swim 80s;
	-webkit-animation: swim 80s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

#groupFish1,
#groupFish2,
#groupFish3,
#groupFish4,
#groupFish5 {
  fill:#1d355a;
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

#groupFish1{
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}

#groupFish2{
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

#groupFish3{
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

#groupFish4{
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}

#groupFish5{
	animation-delay: 0.1s;
	-webkit-animation-delay: 0.1s;
}

@-webkit-keyframes swim
{
	0% {margin-left: -235px}
	90% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@keyframes swim
{
	0% {margin-left: -235px}
	70% {margin-left: 100%;}
	100% {margin-left: 100%;}
}

@-webkit-keyframes swimLeft
{
	0% {margin-right: -235px}
	90% {margin-right: 200%;}
	100% {margin-right: 200%;}
}

@keyframes swimLeft
{
	0% {margin-right: -235px}
	70% {margin-right: 200%;}
	100% {margin-right: 200%;}
}

@keyframes sway
{
  0%, 100%{ transform: rotate(-8deg);}
  50%{ transform: rotate(6deg); }
}
@-moz-keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -moz-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
@-webkit-keyframes bounce {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
@keyframes bounce {
  0%, 50%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  75% {
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
/*END Fish Animation*/