.modal-overlay {
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.geno-more-info-overlay {
    z-index: 99997;
    background: rgba(0,0,0,.4);
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: none;
}

.geno-more-info-modal {
        position: fixed;
    width: 90vw;
    height: 90vh;
    top: 8vh;
    overflow-y: scroll;
    left: 5vw;
    z-index: 99998;
    background: #eee;
    display: none;
    outline: 999px solid rgba(0,0,0,.7);
}

.geno-more-info-modal .geno-close-modal-btn {
font-size: 16px;
position: absolute;
background: #d19e27;
color: #222;
top: 10px;
right: 10px;padding: 5px 10px;
border-radius: 10px;
}

.geno-more-info-modal > p {
    text-align: left;
    padding: 20px;
    font-size: 16px;
}

.text-center {
    text-align: center;
}
.geno-more-info-modal > h5 {
    font-size: 20px;
    color: #222;
}

.geno-more-info-modal .try-btn {
    background: #222;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    padding: 15px 20px;
    font-size: 20px;
    border-radius: 8px;
    width: 80%;
    display: inline-block;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.geno-more-info-btn {
        height: 35px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.geno-more-info-btn i {
  color: #d19e27;
    font-size: 20px;
    position: relative;
    vertical-align: middle;
    top: 1px;
}

.geno-more-info-btn span {
  color: #d19e27;
        padding-left: 10px;
    font-size: 16px;
    vertical-align: middle;
}

.hidden {
  display: none;
}
.vishidden {
  opacity: 0;
}
.show {
  display: block;
  opacity: 1;
}
.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 75%;
  max-height: 100%;
  max-width: 100%;
  display: none;
  z-index: 9998;
}

.modal-body .phone {
  position: absolute;
  text-align: center;
  width: 400px;
  left: calc((100% - 400px) / 2);
}

.modal-body .number-text {
  color: #222 !important;
  font-size: 32px;
  font-weight: 800;
}

.modal-body .phone i {
  color: #222;
}

.modal-body .call {
  color: #222;
}

.modal-body {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 4px solid #ddd;
  border-radius: 0px 0px 10px 10px;
  background: #eee;
  border-top: 0px none;
  height: 100%;
  position: relative;
  height: calc(100% - 68px);
  top: 68px;
  font-family: "Lato";
  overflow: auto;
}

.modal-title {
  position: absolute;
  border-radius: 10px 10px 0 0;
  vertical-align: middle;
  width: 100%;
  background: #eee;
  color: #222;
  text-align: center;
  left: 0;
  top: 0;
  height: 68px;
  font-family: "Lato", arial;
}

.modal-title h2 {
  line-height: 68px;
  color: #000;
  margin: 0;
}

.modal-title i {
  font-weight: 900;
  color: #222;
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 34px;
  z-index: 9999;
}

.modal-results {
    padding: 20px;
    width: 100%;
    text-align: center;
}

.modal-results span:first-child {
    font-weight: bold;
    font-size: 18px;
    font-family: Lato;
}
.modal-results .results-text {
    margin-top: 10px;
    font-size: 18px;
    font-family: Lato;
}

.modal-text {
  vertical-align: middle;
  left: 0;
  top: 0px;
  width: 100%;
  padding: 20px;
  font-family: "Lato";
  font-weight: 400;
  font-size: 18px;
  color: #222;
  text-align: center;
}

.modal-btn {
  position: absolute;
  text-align: center;
  background: #222;
  color: #fff;
  font-family: "Lato";
  bottom: 20px;
  width: 80%;
  height: 40px;
  /* vertical-align: middle; */
  line-height: 40px;
  left: 10%;
  transform: scale(1);
}

.modal-btn a {
  color: #fff;
}

.modal-btn:hover a {
  color: #eee;
}

.modal-btn:hover {
  transform: scale(0.9);
  transition: all 0.3s;
  background: #111;
}
.filter-container {
  display: flex;
  width: auto;
  padding: 25px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.filter-container .clear-btn {
  display: none;
  text-align: center;
  width: 15%;
  margin: 0 10px;
  background: #eee;
  border: 2px solid #222;
  border-radius: 20px;
}

.grid-container .frenchie-logo {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    left: 0;
}
.grid-container .frenchie-logo img {
    width: 300px;
}
.clear-btn i {
  color: #222;
  font-size: 20px;
}

.clear-btn span {
  display: inline-block;
  padding: 10px;
  color: #222;
  font-weight: bold;
  font-family: "Lato";
}

.filter-container .filter-btn {
  text-align: center;
  width: 25%;
  margin: 5px 10px;
  background: #0a1d36;
  border-radius: 20px;
  display: table;
  transition: all 0.3s;
  transform: scale(1);
  opacity: 1;
}

.filter-btn:hover {
  transform: scale(0.95);
  opacity: 0.9;
  transition: all 0.3s;
}

.filter-btn span {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  color: #fff;
  font-family: "AcuminPro";
}
.periodic-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, 145px);
  grid-template-rows: repeat(4, 145px);
  grid-gap: 10px;
  margin: auto;
  max-width: 1200px;
  justify-content: center;
  grid-auto-rows: 145px;
  grid-auto-columns: 145px;
}

.periodic-table.filtered {
  justify-content: center;
}
.periodic-element {
  padding: 4px;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: all 0.3s ease;
}

.periodic-element.long .periodic-element-inner {
    padding: 10px 10px;
}

.periodic-element.long .title {
    font: 700 30px "Lato", sans-serif;
}

.periodic-element .periodic-element-inner {
  background: #121212;
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  transition: inherit;
}
.periodic-element .title {
  font: 700 32px "Lato", sans-serif;
  margin: 0.3em 0 0;
  transition: 0.8s ease 600ms;
}
.periodic-element .description {
  font: 500 14px "Lato", sans-serif;
  margin-top: -0.2em;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* .periodic-element:after {
  z-index: 10;
  content: attr(data-description);
  background: #f9f8f7;
  color: #333;
  width: 180px;
  position: absolute;
  top: 80%;
  opacity: 0;
  transition: opacity 0.3s ease 0.3s,
    top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  height: auto;
  font-size: 12px;
  line-height: 1.4;
  padding: 10px;
  margin: 0 0 0 -50px;
  border-radius: 6px;
  text-align: center;
} */
.periodic-element:hover {
  transform: scale(1.12);
  z-index: 10;
}

.k-locus.periodic-element:hover .periodic-element-inner:after {
    content: "";
    background: url('tiger-bg.webp?v=1');
    background-size: 200px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.m-locus.periodic-element:hover .periodic-element-inner:after {
    content: "";
    background: url('speck-bg.webp?v=1');
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.s-locus.periodic-element:hover .periodic-element-inner:after {
    content: "";
    background: url('pied-bg.webp?v=1');
    background-position: 342px center;
    background-size: 111px 500px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.l-locus.periodic-element:hover .periodic-element-inner:after {
    content: "";
    background: url('furry-bg.webp?v=1');
    background-size: 1000px;
    background-position: 0 200px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.periodic-element:hover .periodic-element-inner {
  background: transparent;
}
.periodic-element:hover .title,
.periodic-element:hover .description {
  -webkit-text-fill-color: #000; /*#222*/
}

.l-locus.periodic-element:hover:after {
    top: 0;
    border-radius: 0;
    opacity: 0;
}
.periodic-element:hover:after {
  top: 105%;
  opacity: 1;
}
a.periodic-element {
  cursor: pointer;
}

.filter-btn.a-locus {
  background: linear-gradient(to bottom right, #9b6145 0%, #ffdb9a 100%);
}

.filter-btn.k-locus {
  background: linear-gradient(to bottom right, #4a3413 0%, #a38858 100%);
  background-blend-mode: multiply;
  position: relative;
}

.filter-btn.b-locus {
    background: linear-gradient(to bottom right, #bf7527 0%, #662f00 100%);
}

.filter-btn.co-locus {
  background: linear-gradient(to bottom right, #8b7967 0%, #6a3c14 100%);
}

.filter-btn span {
  color: #000;
  font-weight: bold;
  font-family: "Lato";
}


.filter-btn.d-locus { 
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
}

.filter-btn.e-locus {
  background: linear-gradient(to bottom right, #fff6df 0%, #f3e8dc 100%);
}


.filter-btn.m-locus {
    
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  background-blend-mode: multiply;
}

.filter-btn.s-locus {
    
  background: linear-gradient(to bottom right, #ababab 0%, #fff 100%);
  background-blend-mode: multiply;
}

.filter-btn.l-locus {
    background: linear-gradient(to bottom right, #fbba54 0%, #a77232 100%);
    background-blend-mode: multiply;
}


.filter-btn.i-locus { 
  background: linear-gradient(to bottom right, #d1f956 0%, #fff826 100%);
}

.filter-btn.k-locus:after {
    content: "";
    background: url('tiger-bg.webp?v=1');
    background-size: 200px;
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.filter-btn.m-locus:after {
    content: "";
    background: url('speck-bg.webp?v=1');
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.filter-btn.s-locus:after {
    content: "";
    background: url('pied-bg.webp?v=1');
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.filter-btn.s-locus:after {
        background-size: cover;
    background-position: center;
    /* background-size: 300px;
    background-position: -15px center; */
}

.filter-btn.l-locus:after {
    content: "";
    background: url('furry-bg.webp?v=1');
    background-size: 1000px;
    background-position: 0 200px;
    border-radius: 20px;
    opacity: 0.6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.filter-btn.e-locus span {
  color: #000;
  font-weight: bold;
}

.filter-btn.d-locus span {
  color: #000;
  font-weight: bold;
}
.active.filter-btn {
  border: 2px solid #fff;
}


#a-locus .modal-title {
  background: linear-gradient(to bottom right, #9b6145 0%, #ffdb9a 100%);
}

#k-locus .modal-title {
  background: linear-gradient(to bottom right, #4a3413 0%, #a38858 100%);
}

#k-locus .modal-title:after {
    content: "";
    background: url('tiger-bg.webp?v=1');
    background-size: cover;
    border-radius: 10px 10px 0 0;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
#b-locus .modal-title {
    background: linear-gradient(to bottom right, #bf7527 0%, #662f00 100%);
  
}

#d-locus .modal-title {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
}

#co-locus .modal-title {
  background: linear-gradient(to bottom right, #8b7967 0%, #6a3c14 100%);
}

#e-locus .modal-title {
  background: linear-gradient(to bottom right, #fff6df 0%, #f3e8dc 100%);
}

#m-locus .modal-title {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  background-blend-mode: multiply;
}
#m-locus .modal-title:after {
    content: "";
    background: url('speck-bg.webp?v=1');
    border-radius: 10px 10px 0 0;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

#s-locus .modal-title {
  background: linear-gradient(to bottom right, #ababab 0%, #fff 100%);
  background-blend-mode: multiply;
}
#s-locus .modal-title:after {
   content: "";
    background: url('pied-bg.webp?v=1');
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 0 0;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1; 
}
#l-locus .modal-title {
  background: linear-gradient(to bottom right, #fbba54 0%, #a77232 100%);
    background-blend-mode: multiply;
}

#l-locus .modal-title:after {
    content: "";
    background: url('furry-bg.webp?v=1');
    background-size: 1000px;
    background-position: 0 200px;
    border-radius: 10px 10px 0 0;
    opacity: 0.6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

#i-locus .modal-title {
  background: linear-gradient(to bottom right, #d1f956 0%, #fff826 100%);
    background-blend-mode: multiply;
}

.a-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #9b6145 0%, #ffdb9a 100%);
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.k-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #4a3413 0%, #a38858 100%);

  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.b-locus.active .periodic-element-inner {
    background: linear-gradient(to bottom right, #bf7527 0%, #662f00 100%);
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.d-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.co-locus.active .periodic-element-inner {
   background: linear-gradient(to bottom right, #8b7967 0%, #6a3c14 100%);
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.e-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #fff6df 0%, #f3e8dc 100%);
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}


.m-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  background-blend-mode: multiply;
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}


.s-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #ababab 0%, #fff 100%);
  background-blend-mode: multiply;
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.l-locus.active .periodic-element-inner {
  background: linear-gradient(to bottom right, #fbba54 0%, #a77232 100%);
    background-blend-mode: multiply;
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.i-locus.active .periodic-element-inner {
    background: linear-gradient(to bottom right, #d1f956 0%, #fff826 100%);
    background-blend-mode: multiply;
  /* opacity: 1; */
  transform: scale(1.12);
  -webkit-text-fill-color: #222;
  border: 4px solid #222;
}

.k-locus.active .periodic-element-inner:after {
    content: "";
    background: url('tiger-bg.webp?v=1');
    background-size: 200px;
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    transform: scale(1.12);
}
.m-locus.active .periodic-element-inner:after {
    content: "";
    background: url('speck-bg.webp?v=1');
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    transform: scale(1.12);
}
.s-locus.active .periodic-element-inner:after {
    content: "";
    background: url('pied-bg.webp?v=1');
    background-position: 342px center;
    background-size: 111px 500px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    transform: scale(1.12);
}

.l-locus.active .periodic-element-inner:after {
    content: "";
    background: url('furry-bg.webp?v=1');
    background-size: 1000px;
    background-position: 0 200px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.s-locus.active .periodic-element-inner:after {
     background-size: 300px;
    background-position: -15px center;
}

.periodic-element.active {
  transform: none;
}

.periodic-element.active .title,
.periodic-element.active .description {
  -webkit-text-fill-color: #222;
}

.a-locus {
  background: linear-gradient(to bottom right, #9b6145 0%, #ffdb9a 100%);
}
.a-locus .title,
.a-locus .description {
  background: -webkit-linear-gradient(#9b6145, #ffdb9a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.k-locus {
  background: linear-gradient(to bottom right, #4a3413 0%, #a38858 100%);
  background-blend-mode: multiply;
  position: relative;
}
.k-locus:after {
    content: "";
    background: url('tiger-bg.webp?v=1');
    background-size: 200px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.k-locus .title,
.k-locus .description {
  background: linear-gradient(to bottom right, #4a3413 0%, #a38858 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.b-locus .title,
.b-locus .description {
    background: -webkit-linear-gradient(#bf7527, #662f00);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.b-locus {
    background: linear-gradient(to bottom right, #bf7527 0%, #662f00 100%);
}
.d-locus {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
}
.d-locus .title,
.d-locus .description {
  background: -webkit-linear-gradient(#666974, #7489a3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.co-locus {
   background: linear-gradient(to bottom right, #8b7967 0%, #6a3c14 100%);
}
.co-locus .title,
.co-locus .description {
  background: -webkit-linear-gradient(#8b7967, #6a3c14);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.e-locus {
  background: linear-gradient(to bottom right, #fff6df 0%, #f3e8dc 100%);
  position: relative;
}
.e-locus .title,
.e-locus .description {
  background: linear-gradient(to bottom right, #fff6df 0%, #f3e8dc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.m-locus {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  background-blend-mode: multiply;
  position: relative;
}
.m-locus:after {
    content: "";
    background: url('speck-bg.webp?v=1');
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.m-locus .title,
.m-locus .description {
  background: linear-gradient(to bottom right, #666974 0%, #7489a3 100%);
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s-locus {
  background: linear-gradient(to bottom right, #ababab 0%, #fff 100%);
  background-blend-mode: multiply;
  position: relative;
}
.s-locus:after {
    content: "";
    background: url('pied-bg.webp?v=1');
     background-size: 1100px;
    background-position: 800px 178px;
    border-radius: 20px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.s-locus .title,
.s-locus .description {
  background: linear-gradient(to bottom right, #eee 0%, #fff 100%);
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.l-locus {
    background: linear-gradient(to bottom right, #fbba54 0%, #a77232 100%);
    background-blend-mode: multiply;
    position: relative;
}
.l-locus:after {
    content: "";
    background: url('furry-bg.webp?v=1');
    background-size: 1000px;
    background-position: 0 200px;
    border-radius: 0px;
    opacity: 0.4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.l-locus .title,
.l-locus .description {
  background: linear-gradient(to bottom right, #fbba54 0%, #a77232 100%);
    background-blend-mode: multiply;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.i-locus {
  background: linear-gradient(to bottom right, #d1f956 0%, #fff826 100%);
}
.i-locus .title,
.i-locus .description {
  background: linear-gradient(to bottom right, #d1f956 0%, #fff826 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legend-table {
  padding: 15px;
  text-align: center;
  font-size: 15px;
  margin: 2em auto 0;
}
.legend-table__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.m-locus.legend-table__marker:after {
    background-size: 100px;
    border-radius: 0;
}
.l-locus.legend-table__marker:after {
    background-size: 100px;
    border-radius: 0;
}
.s-locus.legend-table__marker:after {
    background-size: 100px;
    border-radius: 0;
}
.k-locus.legend-table__marker:after {
    background-size: 20px;
    border-radius: 0;
}
.legend-table__marker {
  width: 25px;
  height: 25px;
  margin: 5px 5px 10px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0.5px 1px rgba(0, 0, 0, 0.15);
  z-index: -1;
}
.legend-table__text {
  display: inline-block;
  vertical-align: middle;
  margin: 0 25px 5px 5px;
  background: -webkit-linear-gradient(#ccc, #eee);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
}
.legend-table__direction {
  display: inline-block;
  margin: 10px 15px 10px 10px;
  background: -webkit-linear-gradient(#ccc, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.empty-spacer-1 {
  grid-column: 2 / span 5; /* 2/span 6*/
  grid-row: 1;
}
.empty-spacer-2 {
  grid-column: 3 / span 3; /* 3 / span 4*/
  grid-row: 2;
}
.empty-spacer-3 {
  grid-column: 4 / span 1; /* 4 / span 3 */
  grid-row: 3;
}
.empty-spacer-4 {
    display: none;
  grid-column: 4 / span 3;
  grid-row: 4;
}

@keyframes zoom-in {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: none;
  }
}

@keyframes rotate-right {
  0% {
    transform: translate(-100%) rotate(-100deg);
  }
  100% {
    transform: none;
  }
}

.is-animated {
  animation: 0.6s zoom-in;
}

@media (min-width: 480px) and (max-width: 872px) {
    .grid-container .frenchie-logo {
        display: none;
    }
  .empty-spacer-1 {
    display: none;
    grid-column: 2 / span 7;
    grid-row: 1;
  }
  .empty-spacer-2 {
    display: none;
    grid-column: 3 / span 4;
    grid-row: 2;
  }

  .empty-spacer-3 {
    display: none;
  }
  .filter-container .filter-btn {
      width: 45%;
  }
  .filter-container .clear-btn {
      width: 45%;
  }

}

@media (min-width: 320px) and (max-width: 480px) {
    .modal-container {
        width: 95%;
        height: 70%;
    }
    .grid-container .frenchie-logo {
        display: none;
    }

    .modal-text {
        padding: 10px;
    }
    .filter-container .filter-btn, .filter-container .clear-btn {
      width: 100% !important;
  }
  .empty-spacer-1, .empty-spacer-2, .empty-spacer-3, .empty-spacer-4 {
      display: none !important;
  }
}
@media (min-width: 872px) and (max-width: 1100px) {
   .grid-container .frenchie-logo {
        display: none;
    }
  .empty-spacer-1 {
    grid-column: 2 / span 6;
    grid-row: 1;
    display: none !important;
  }
  .empty-spacer-2 {
    grid-column: 3 / span 4;
    grid-row: 2;
    display: none !important;
  }

  .empty-spacer-3,
  .empty-spacer-4 {
    display: none !important;
  }

  .periodic-table {
    justify-content: center;
  }
  .filter-container .filter-btn {
      width: 45%;
  }
  .filter-container .clear-btn {
      width: 45%;
  }
}

@media (min-width: 1100px) and (max-width: 1436px) {
  .empty-spacer-1 {
    grid-column: 2 / span 4; /* 2 / span 6*/
    grid-row: 1;
  }
  .empty-spacer-2 {
    grid-column: 3 / span 2; /* 3 / span 4*/
    grid-row: 2;
  }

  .empty-spacer-3,
  .empty-spacer-4 {
    display: none !important;
  }
  .filter-container .filter-btn {
      width: 35%;
  }

  .filter-container .clear-btn {
      width: 35%;
  }
}