/* No files to import found in vendor */

<!--Changes that need to be copied over to kids typography.scss partial-->

<!--.kids-page-name {-->
<!--    font-size: 5em;-->
<!--    text-align: center;-->
<!--    color: #ef8c14;-->
<!--    margin-bottom: 0em;}-->

html {
    background:#98d62e url("//cdn-assets.answersingenesis.org/art/bg.png") repeat top center;}

.pageMicrosite .bd-ctBody{
    padding: 10% 15%;}
    
.topEdge {
    margin-top: -2.65em;
}

.pageMicrosite .nodeHeaderImage {
    background-size: cover;
    background-position: top center;
    color: #fff;
    padding-bottom: 43.33333%;
}

@media screen and (min-width: 56.25em){
    .pageMicrosite .bd-ctBody{
        padding:2.75em 15%;}
    
    .pageMicrosite .edgeToEdge{
        margin-right:-21.35%;
        margin-left:-21.35%;}
}

<!--direct input from kids default.css-->

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

html {
  background: #98d62e url("//cdn-assets.answersingenesis.org/art/bg.png") repeat top center
}

body {
  background: none;
  max-width: none
}

.bd {
  background: #3e90ca
url("//cdn-assets.answersingenesis.org/art/bg@50.png");
  border: 1em solid rgba(93,132,26,0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  max-width: 1200px;
  margin: 1em auto;
  border-radius: 4px;
  padding-bottom: 0
}

.doc {
  border: none
}

.actionbox {
  color: #fff
}

.bd-ctSub {
  border-top: none
}

.bd-ctBody {
  background-color: #fff;
  border-left: 0
}

.bd-ctHead {
  border-bottom: 0
}

.followbox-wrap {
  max-width: none
}

.hd {
  z-index: 1000000
}

@media
(min-width: 56.25em) {
  .bd-ct {
    padding-right: 0
  }
}

.donate {
  border: none;
  background-color: transparent
}

.ft {
  background-color: rgba(93,132,26,0.5);
  max-width: 1105px;
  margin: 0 auto;
  border: none;
  border-radius: 0.2em 0.2em 0 0
}

.ft ul li {
  display: inline-block;
  padding: 0 1em
}

.bg-alt3 {
  background: #ea5150
url("//cdn-assets.answersingenesis.org/art/bg.png") repeat top center;
  overflow: hidden;
  padding: 2em;
  border-radius: 1em
}

.pageMicrosite .svg-AnswersinGenesisMain {
  width: auto;
  height: 2.5em;
  position: static;
  margin-top: 0
}

.pageMicrosite .slider.edgeToEdge {
  margin-right: 0;
  margin-left: 0
}

.node-pub-head.has-image {
  margin-bottom: 0
}

.prodQuickView {
  overflow: hidden
}

.dm-buddy {
  background-color: #ef8c14;
  color: #fff;
  padding: 0em;
  width: 50%;
  position: relative;
  margin-top: 5em;
  margin-bottom: 3em
}

.bd
.dm-buddy h3 {
  color: #fff
}

.dm-buddyTxt {
  width: 75%
}

.dm-buddyImg {
  width: 10em;
  position: absolute;
  padding: 0em;
  right: 0;
  bottom: 0
}

img.dm-right.dm-buddy {
  padding: 0;
  margin-bottom: 1em
}

.bd-alert {
  max-width: 1240px;
  margin: 1em auto
}

.alert-message {
  box-sizing: border-box;
  position: absolute;
  left: 0.5em
}

.alert-message
.btn {
  width: auto
}

.toggle {
  position: absolute;
  top: .85em;
  right: .5em
}

.alert {
  padding: .5em;
  min-height: 3em;
  color: #fff;
  overflow: hidden;
  font-weight: 200;
  position: relative;
  margin-bottom: 1em;
  border-bottom: .3em solid #23597f;
  border-left: none;
  border-right: none;
  border-radius: 0.2em
}

.alert-message
span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none
}


@media screen and (min-width: 37.5em) {
  .pageMicrosite .nodeHeaderImage {
    padding-bottom: 31.85714%;
  }

  .alert-message span {
    display: inline-block;
    margin: -0.3em 0.5em;
    padding: .85em 0;
    float: right;
  }

}

.alert .btn {
  border-bottom: 0
}

.alert .spr {
  margin-right: .5em
}

.toggle {
  position: absolute;
  top: .65em;
  right: 1em
}

.toggle a {
  display: inline-block;
  color: #fff;
  border-radius: 0.2em;
  padding: .75em;
  float: left;
}

.toggle a:hover {
  text-decoration: none;
  background-color: rgba(255,255,255,0.2)
}

.toggle
a.is-active {
  background-color: #23597f;
  border-radius: 0.2em;
  padding: .75em;
  margin: -.25em 0
}

.about-kids-answers-for-parents {
  position: absolute;
  top: 19em;
  right: 2.5%;
  max-width: 25em;
  min-height: 10em;
  padding: 2.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  background: #3e90ca
url("//cdn-assets.answersingenesis.org/art/bg@50.png");
  -webkit-box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
  box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
  z-index: 9999999
}

@media screen and (max-width: 31.1875em) {
  .about-kids-answers-for-parents {
    min-width: 95%;
    right: 0;
    top: 19em;
    margin: 2.5%
  }
}

.about-kids-answers-for-parents
.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75em 0.9em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #66a7d5;
  color: #fff
}

.about-kids-answers-for-parents .close:hover {
  background-color: #8ebee0
}

.about-kids-answers-for-parents
p {
  padding: 0.5em 0;
  text-shadow: 0 0 5px #3e90ca,0 0 5px #3e90ca,0 0 25px #3e90ca,0 0 25px #3e90ca
}

.pdf-preview {
  text-align: center;
  margin-bottom: 3em
}

.pdf-preview img {
  border: 1px solid #000;
  width: 50%;
  display: block;
  float: left;
  margin-left: 2.75em;
  margin-right: 1em;
  margin-bottom: 2em
}

.sidenote.center.dm-hide
img {
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
  width: 50%;
  box-sizing: border-box
}

@media (min-width: 56.25em) {
  .pageMicrosite .svg-AnswersinGenesisMain {
    width: auto;
    height: 2.5em;
    position: static;
    margin-top: 0
  }
}

.svg-AnswersinGenesisMain {
  height: 2.5em;
  padding: 0.5em 0
0 0.75em
}

.svg-AnswersinGenesisMain path,.svg-AnswersinGenesisMain polygon {
  display: none
}

.svg-AnswersinGenesisMain path.svg-group-logo-icon-shape {
  display: block;
  fill: #FFF
}

.svg-AnswersinGenesisMain path.svg-group-logo-icon-text {
  display: block;
  fill: #00BCDD
}

@media
(min-width: 37.5em) {
  .svg-AnswersinGenesisMain path.svg-group-logo-icon-shape {
    fill: #00BCDD
  }

  .svg-AnswersinGenesisMain path.svg-group-logo-icon-text {
    fill: #FFF
  }
}

.pageMicrosite .nav-link a:hover,.pageMicrosite .nav-link a:active,.pageMicrosite .hd .logo:hover,.pageMicrosite
.hd .logo:active {
  background: #fff
}

.bd-ct .btn,.bd-ct button,.bd-alert .btn {
  background: none;
  border: none;
  font-family: "Open Sans",sans-serif;
  font-size: 1em;
  font-weight: 800;
  width: auto;
  background-color: #ef8c14;
  border-bottom: 0.2em solid #c3710d;
  padding: .85em
1.2em;
  text-align: center;
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  display: inline-block;
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.bd-ct .btn:hover,.bd-ct button:hover,.bd-alert .btn:hover {
  background-color: #ef9f14;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
  color: #fff;
  text-decoration: none;
  -webkit-animation: resize
0.2s linear;
  animation: resize 0.2s linear
}

.js .qvBtn {
  padding: .25em
}

.js .qvBtn:hover {
  color: #fff
}

.bd-ct .js-stepper-nav a {
  background-color: #ef8c14;
  color: #fff
}

.bd-ct .js-stepper-nav a:hover {
  background-color: #ef9f14;
  color: #fff;
  -webkit-animation: resize 0.2s
linear;
  animation: resize 0.2s linear
}

.nav-sub .rootNode .subNavBtn {
  background-image: url("https://assets.answersingenesis.org/img/logos/kidsanswers.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 0;
  width: 10em;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden
}

@media
all and (min-width: 56.25em) {
  .nav-sub .rootNode.l0 {
    padding: 0 1em 1em
  }

  .nav-sub .rootNode .subNavBtn {
    background-image: url("https://assets.answersingenesis.org/img/logos/kidsanswers.png");
    height: 0;
    padding: 0;
    padding-bottom: 50%;
    width: auto
  }
}

@media (max-width: 56.1875em) {
  .nav-sub-wrap {
    z-index: 999999
  }
}

@media
(max-width: 75em) {
  .bd-ctSubWrap.fixed-bot,.bd-ctSubWrap.fixed-top {
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box
  }
}

.nav-sub .rootNode .subNavBtn {
  height: 3em;
  width: 6em
}

.nav-sub li.l1 a {
  color: #ef8c14
}

.nav-sub li.l1 a:hover {
  color: #ef9f14
}

@media all
and (min-width: 56.25em) {
  .nav-sub li.l1 a {
    background-color: #ef8c14;
    border-bottom: 0.3em solid #93550a;
    font-size: 1.4em;
    font-weight: 800;
    text-align: left;
    padding: 1em 0.5em;
    margin-bottom: 0.5em;
    font-family: "Open Sans",sans-serif;
    text-transform: capitalize;
    border-radius: 4px;
    color: #fff
  }

  .nav-sub
li.l1 a:hover {
    color: #fff;
    background-color: #ef9f14;
    border-bottom: 0.2em solid #600e0e;
    border-top: 0.1em solid #ef9f14;
    text-decoration: none;
    -webkit-animation: resize 0.2s linear;
    animation: resize 0.2s linear
  }

  .nav-sub .rootNode .subNavBtn {
    height: auto;
    width: auto
  }
}

@-webkit-keyframes
resize {
  0%, 100% {
    -webkit-transform: scale(1, 1)
  }

  50% {
    -webkit-transform: scale(1.1, 0.9)
  }
}

@keyframes resize {
  0%,100% {
    transform: scale(1, 1)
  }

  50% {
    transform: scale(1.1, 0.9)
  }
}

@-webkit-keyframes rotate {
  0%, 100% {
    -webkit-transform: rotate(20deg)
  }

  50% {
    -webkit-transform: rotate(-10deg)
  }
}

@keyframes
rotate {
  0%, 100% {
    transform: rotate(20deg)
  }

  50% {
    transform: rotate(-10deg)
  }
}

.list-circle {
  padding: 0 1.5em;
  box-sizing: border-box;
  transform: translate3d(0%, 0px, 0px)
}

.list-circle .panel {
  padding: 1em;
  box-sizing: border-box
}

.panel-slider .img-wrap {
  bottom: 0
}

.list-circle
.panel-circle {
  box-shadow: 0 0 1em rgba(0,0,0,0.5);
  background-color: #ef8c14;
  border-radius: 50%;
  border: .5em solid #fff;
  height: 0;
  padding-bottom: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  transform: translate3d(0%, 0px, 0px)
}

.list-circle .panel-circle:hover {
  box-shadow: 0
0 1em rgba(0,0,0,0.5);
  background-color: #ef9f14;
  text-decoration: none;
  -webkit-animation: resize 0.2s linear;
  animation: resize 0.2s linear;
  transform: translate3d(0%, 0px, 0px)
}

.list-circle .list-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate3d(0%,
0px, 0px)
}

.list-circle .list-info {
  display: none;
  border: 0;
  height: 2.2em;
  color: #fff;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(239,159,20,0.85);
  text-align: center
}

a.panel-circle {
  position: relative;
  overflow: hidden
}

.slider.js-slider {
  margin-bottom: 0em
}

.slider.kids-feature {
  margin-bottom: 2.85em
!important;
  margin-top: -2.75em
}

.panel-slider .list-info.bg-overlay {
  background: rgba(183,30,34,0.9)
}

.list-info-right {
  left: auto
}

.panel-slider .list-info.bg-overlay {
  border-radius: 5px;
  background-color: rgba(171,28,32,0.9)
}

.slider-prev:after,.slider-next:after {
  border-top-color: transparent;
  border-left-color: #fff;
  border-top-width: 20px;
  margin-top: -20px
}

.slider-prev:after {
  border-color: transparent;
  border-right-color: #fff
}

.pageFull
.panel-slider .node-name {
  font-weight: bold
}

.slider-prev.bg-overlay.js-sliderPrev {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

.slider-next.bg-overlay.js-sliderNext {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px
}

.kids-feature .wrap {
  min-height: 5em
}

.kidsMode
.parentsContent,.kidsMode .hd {
  display: none
}

.kidsMode .rtTooltipFooter,
.kidsMode .rtTooltipSocial
{
	visibility: hidden;
}

.intro {
  font-family: "Open Sans",sans-serif;
  color: #98d62e
}

.pageMicrosite .pull {
  font-family: "Open Sans",sans-serif;
  text-transform: uppercase;
  font-style: normal;
  text-align: left;
  font-size: 2em;
  line-height: 1;
  letter-spacing: -1px
}

.bd
h1 {
  font-family: "Open Sans",sans-serif;
  text-transform: uppercase;
  font-weight: 800
}

.bd h2,.bd h3,.bd h4,.bd h5,.bd h6 {
  color: #98d62e;
  text-transform: capitalize
}

.pageMicrosite .nodeHeaderImage .name {
  background-color: rgba(183,30,34,0.9);
  padding: 0.5em;
  margin-top: 5.5em;
  margin-bottom: 2em;
  display: inline-block;
  border-radius: 5px;
  border-bottom: none;
  font-size: 100%;
}

@media all and (min-width: 35.25em) {
    .pageMicrosite .nodeHeaderImage .name {
        font-size: 150%;
    }
}

@media all and (min-width: 45em) {
    .pageMicrosite .nodeHeaderImage .name {
        font-size: 200%
    }
}

.pageMicrosite.header-left
.nodeHeaderImage {
  background-position: top right
}

.pageMicrosite.header-right .nodeHeaderImage {
  background-position: top left
}

.kids-page-name {
  font-size: 5em;
  text-align: center;
  color: #ef8c14;
  margin-bottom: 0em
}

.bd-ct a {
  color: #ef8c14;
  font-family: "Open Sans",sans-serif;
  text-transform: uppercase;
  font-weight: 800
}

.bd-ct
a:hover {
  color: #00cde2
}

a.rtBibleRef {
  color: #4291c7
}

a.rtBibleRef:hover {
  color: #6abbf2
}

.node-details a {
  color: #4291c7
}

.node-details a:hover {
  color: #6abbf2
}

a.js-offsiteLink.offsite-link {
  color: #4291c7;
}

.ft a.js-offsiteLink.offsite-link {
  color: #FFF;
}

.img-wrap .title {
  font-weight: 700
}

.node-pub-head .pub-name {
  font-family: "Open
Sans",sans-serif
}

.node-pub-head .pub-name:hover {
  color: #fff
}

.kids-issue h2,.kids-issue h3 {
  color: #ffffff
}

canvas {
  image-rendering: optimizeSpeed;
  -webkit-interpolation-mode: nearest-neighbor;
  background-color: #fff;
  color: #333;
  display: block;
  float: left;
  box-shadow: 0
0 0.5em 0.25em rgba(0,0,0,0.1);
  margin: 0 0.5em 0.5em 0;
  max-width: 100%
}

.art-board {
  position: relative;
  display: inline-block;
  float: left;
  max-width: 100%
}

#weight-slider {
  display: inline-block;
  width: 100%
}

#weight-slider .ui-state-hover {
  border: 1px solid #aed0ea;
  background: #d7ebf9
url(images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
  font-weight: 700;
  color: #2779aa
}

#coloring-page-overlay,#coloring-canvas-overlay {
  position: absolute;
  left: 0;
  background-color: transparent
}

#coloring-page-overlay,#coloring-canvas-overlay {
  position: absolute;
  left: 0;
  background-color: transparent
}

:-webkit-full-screen
#canvas {
  width: 100%;
  height: 100%
}

.palette-tools {
  position: absolute;
  margin: 1em;
  z-index: 100;
  width: 4em
}

.palette-full h3 {
  color: #fff
}

.palette-tools:hover,.palette-tools.is-active {
  -webkit-animation: resize 0.2s linear;
  animation: resize 0.2s linear
}

.ux-tools {
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 100
}

.palette,.medium-palette,.eraser-wrapper {
  list-style: none;
  padding: 1em;
  margin: 0
0.5em 0.5em 0;
  display: block;
  overflow: hidden;
  float: left
}

.palette-full {
  background: #ef8c14 url("//cdn-assets.answersingenesis.org/art/bg.png") repeat top center;
  display: block;
  overflow: hidden;
  padding: 1em;
  border-radius: 1em;
  border: solid 0.5em #fff;
  box-shadow: 0
0 2em rgba(0,0,0,0.2);
  position: absolute;
  margin: 1em;
  display: none
}

.palette.is-active,.medium-palette.is-active {
  display: block
}

.palette li {
  float: left;
  list-style: none;
  margin: 0.15em;
  border: 0.2em solid #fff;
  border-radius: 100%
}

.palette li:nth-child(5n+1) {
  clear: left
}

.palette
li a {
  display: block;
  width: 2em;
  height: 2em;
  border-radius: 100%;
  background-color: #ccc;
  text-indent: -9999px;
  white-space: nowrap;
  background: -moz-linear-gradient(top, transparent 49%, rgba(0,0,0,0.05) 50%);
  background: -webkit-gradient(linear, left top, left bottom,
color-stop(49%, transparent), color-stop(50%, rgba(0,0,0,0.05)));
  background: -webkit-linear-gradient(top, transparent 49%, rgba(0,0,0,0.05) 50%);
  background: -o-linear-gradient(top, transparent 49%, rgba(0,0,0,0.05) 50%);
  background: -ms-linear-gradient(top,
transparent 49%, rgba(0,0,0,0.05) 50%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 49%,rgba(0,0,0,0.05) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 )
}

.palette li:hover,.medium-palette
li:hover,.palette li.is-active,.medium-palette li.is-active {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 1px
1px 2px rgba(0,0,0,0.3)
}

.palette .red a {
  background-color: #c91111
}

.palette .red-orange a {
  background-color: #d84e09
}

.palette .orange a {
  background-color: #ff8000
}

.palette .yellow a {
  background-color: #f6eb20
}

.palette .yellow-green a {
  background-color: #51c201
}

.palette
.green a {
  background-color: #1c8e0d
}

.palette .sky-blue a {
  background-color: #09c5f4
}

.palette .blue a {
  background-color: #2862b9
}

.palette .violet a {
  background-color: #7e44bc
}

.palette .light-brown a {
  background-color: #bf6a1f
}

.palette .brown a {
  background-color: #943f07
}

.palette
.black a {
  background-color: #000000
}

.palette .aqua-green a {
  background-color: #5bd2c0
}

.palette .golden-yellow a {
  background-color: #f6e120
}

.palette .gray a {
  background-color: #808080
}

.palette .jade-green a {
  background-color: #7e9156
}

.palette .light-blue a {
  background-color: #83afdb
}

.palette
.magenta a {
  background-color: #f863cb
}

.palette .mahogany a {
  background-color: #b44848
}

.palette .peach a {
  background-color: #f5d4b4
}

.palette .pink a {
  background-color: #fca8cc
}

.palette .tan a {
  background-color: #d29358
}

.palette .white a {
  background-color: #ffffff
}

.palette
.yellow-orange a {
  background-color: #fd9800
}

.palette .metallic-gold a {
  background-color: #9f9977
}

.palette .metallic-copper a {
  background-color: #b2592d
}

.palette .metallic-silver a {
  background-color: #bdc2c7
}

.palette .metallic-bronze a {
  background-color: #bc8777
}

.palette
.metallic-purple a {
  background-color: #996398
}

.palette .metallic-green a {
  background-color: #839182
}

.palette .metallic-blue a {
  background-color: #708eb3
}

.palette .metallic-mauve a {
  background-color: #bc749a
}

.medium-palette li {
  float: left;
  margin: .25em
}

.medium-palette
li a {
  height: 2em;
  width: .25em;
  display: block;
  border-radius: 2px;
  border: 0.2em solid #fff;
  background-color: #000
}

.medium-palette .medium-100 a {
  width: .1em
}

.medium-palette .medium-200 a {
  width: .2em
}

.medium-palette .medium-300 a {
  width: .3em
}

.medium-palette .medium-400
a {
  width: .4em
}

.medium-palette .medium-500 a {
  width: .5em
}

.medium-palette .medium-600 a {
  width: .6em
}

.followbar.alert {
    padding: 5em 0;
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 1.2em;
    background: rgba(102, 144, 29, 0.9);
}
.followbox.is-fixed .followbox-wrap>div{
    width: 100%;
}
.mazeWrap {
    position: relative;
}
.mazeWrap .maze {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
}
.mazeWrap .mazeOverlay {
    position: absolute;
    left: 0;
    right: 0;
}
.toggle .flipSwitchWrap .flipSwitchFill {
    background-color: #10a0ab;
    height: 2.5em;
}
.kidsMode .parentsButton {
    display: none;
}
.confirmItStr {
    display: block;
    padding: 1em 0;
}
.toolbar {
    margin: 0;
    border: none;
}
.bd-ct a.toolbar-link {
    font: normal normal normal 1em AiG;
    color: #b2b2b2;
}
.factoidInner {
    background-color: #00bcdd;
    color: white;
    padding: 1em;
    /*font-size: 1.5em;*/
    margin: 1em 0 3em 0;
    position: relative;
}
.factoidInner:after {
    content: ' ';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    bottom: -45px;
    left: 0;
    border-style: solid;
    border-width: 0px 60px 40px 0px;
    border-color: transparent #00bcdd transparent transparent;
}
a.factoidPrev {
    font-size: 1.25em;
}
a.factoidNext {
    float: right;
    font-size: 1.25em;
}
a.factoidPrev:hover, a.factoidNext:hover {
    text-decoration: none;
    transition: all .2s ease;
}
a.factoidPrev:before {
    content: '\e314';
    font-family: "Material Icons";
    font-size: 1.5em;
    vertical-align: middle;
}
a.factoidNext:after {
    content: '\e315';
    font-family: "Material Icons";
    font-size: 1.5em;
    vertical-align: middle;
}

@media (max-width: 650px) {
    .wordSearchPuzzle .puzzleSquare {
        height: 22px !important;
        width: 22px !important;
        font-size: 1rem !important;
        padding: 4px;
    }
    .wordSearchPuzzle .puzzleSquare {
        font-family: "Ubuntu", sans-serif !important;
    }
}