/* This is the base styles used on all of my pens - and an area where I test ideas for 'basic-style'  https://github.com/sheriffderek/basic-style */
html {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/noise.png");
  background-size: 100px;
}
html {
  box-sizing: border-box;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}
body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
body:after {
  content: '';
  display: table;
  clear: both;
}
.container,
.block {
  display: block;
  width: 100%;
  float: left;
}
.container:after,
.block:after {
  content: '';
  display: table;
  clear: both;
}
.block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  float: left;
}
.block-list:after {
  content: '';
  display: table;
  clear: both;
}
.block-list li {
  display: block;
  width: 100%;
  float: left;
}
.block-list li:after {
  content: '';
  display: table;
  clear: both;
}
.inner-w {
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.inner-w:after {
  content: '';
  display: table;
  clear: both;
}
.image-w img,
figure img,
.image-w svg,
figure svg,
.image-w iframe,
figure iframe,
.image-w video,
figure video {
  display: block;
  width: 100%;
  height: auto;
}
body {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  cursor: pointer;
}
html,
body {
  cursor: default;
}
input[type="text"],
textarea,
code {
  cursor: text;
}
a,
label,
button,
input[type="radio"],
input[type="submit"],
input[type="checkbox"] {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
/*
break-points 

base these on when things get ugly
and not any 'ipad' device specific stuff...

*/
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
body:hover .visually-hidden a,
body:hover .visually-hidden input,
body:hover .visually-hidden button {
  display: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
::-moz-selection {
  background: transparent;
  color: #2f3640;
}
::selection {
  background: transparent;
  color: #2f3640;
}
.article h1 {
  font-family: $heading-font;
  font-size: 34px;
  line-height: 1.4;
  color: #f66;
  color: #222;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
  .article h1 {
    font-size: 38px;
  }
}
.article h2 {
  font-size: 24px;
  line-height: 1.4;
  color: #ff6;
  color: #f39c12;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
  .article h2 {
    font-size: 26px;
  }
}
.article p + h2 {
  margin-top: 1.8rem;
}
.article h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #f39c12;
  font-weight: bold;
  color: #f66;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
  .article h3 {
    font-size: 20px;
  }
}
.article p + h3 {
  margin-top: 1.8rem;
}
.article h4 {
  font-size: 19px;
  line-height: 1.4;
  color: #f39c12;
  font-weight: bold;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
  .article h4 {
    font-size: 20px;
  }
}
.article p + h4 {
  margin-top: 1.8rem;
}
.article h5 {
  font-family: 'Georgia', serif;
  font-size: 16px;
  line-height: 1.4;
  color: #222;
  font-weight: bold;
  margin-bottom: 0.6rem;
  font-style: italic;
}
@media screen and (min-width: 700px) {
  .article h5 {
    font-size: 17px;
  }
}
.article p + h5 {
  margin-top: 1.8rem;
}
.article p {
  font-family: 'Georgia', serif;
  font-size: 16px;
  line-height: 1.4;
  color: #222;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 700px) {
  .article p {
    font-size: 17px;
  }
}
.article ul,
.article ol {
  padding: 0.6rem 0 0.6rem 1.02rem;
}
.article ul li,
.article ol li {
  margin-bottom: 0.3rem;
}
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  fill: currentColor;
}
.icon-x {
  width: 25px;
  height: 25px;
}
.button {
  display: inline-block;
  background: #f66;
  color: #b14e4e;
  border: 0;
  border-radius: 5px;
  padding: 0 1.2rem;
  line-height: 44px;
  min-width: 44px;
  min-width: 180px;
  text-align: center;
}
.button min-height $tap:hover {
  cursor: pointer;
}
.button > * {
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.button:hover {
  cursor: pointer;
}
.button.light {
  background: #b7b7b7;
  color: #808080;
}
.button.dark {
  background: #808080;
  color: #515151;
}
.button.color {
  background: #f39c12;
  color: #2f3640;
}
.button.highlight {
  background: #f66;
  color: #b14e4e;
}
.button.alternate {
  background: #ff6;
  color: #b1b14e;
}
h1:after,
h2:after,
h3:after,
h4:after,
h5:after,
h6:after,
p:after {
  color: inherit;
  opacity: 0.2;
}
h1:after {
  content: 'h1';
}
h2:after {
  content: '';
}
h3:after {
  content: '';
}
h4:after {
  content: '';
}
h5:after {
  content: 'h5';
}
h6:after {
  content: 'h6';
}
p:after {
  content: '';
}
.media-size-helper {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent rgba(20,20,20,0.1) transparent;
}
.media-size-helper:after {
  position: fixed;
  right: 0.6rem;
  bottom: 0.3rem;
  content: '0';
  color: #222;
}
@media screen and (min-width: 400px) {
  .media-size-helper:after {
    content: '1';
  }
}
@media screen and (min-width: 700px) {
  .media-size-helper:after {
    content: '2';
  }
}
@media screen and (min-width: 1000px) {
  .media-size-helper:after {
    content: '3';
  }
}
@media screen and (min-width: 1300px) {
  .media-size-helper:after {
    content: '4';
  }
}
@media screen and (min-width: 1700px) {
  .media-size-helper:after {
    content: '5';
  }
}
@media screen and (min-width: 2100px) {
  .media-size-helper:after {
    content: '6';
  }
}
@media screen and (min-width: 2400px) {
  .media-size-helper:after {
    content: '7';
  }
}
@media screen and (min-width: 2700px) {
  .media-size-helper:after {
    content: '8';
  }
}
@media screen and (min-width: 3000px) {
  .media-size-helper:after {
    content: '9';
  }
}
@media screen and (min-width: 400px) {
  .media-size-helper:after {
    content: '1';
  }
}
@media screen and (min-width: 700px) {
  .media-size-helper:after {
    content: '2';
  }
}
@media screen and (min-width: 1000px) {
  .media-size-helper:after {
    content: '3';
  }
}
@media screen and (min-width: 1300px) {
  .media-size-helper:after {
    content: '4';
  }
}
@media screen and (min-width: 1700px) {
  .media-size-helper:after {
    content: '5';
  }
}
@media screen and (min-width: 2100px) {
  .media-size-helper:after {
    content: '6';
  }
}
@media screen and (min-width: 2400px) {
  .media-size-helper:after {
    content: '7';
  }
}
@media screen and (min-width: 2700px) {
  .media-size-helper:after {
    content: '8';
  }
}
@media screen and (min-width: 3000px) {
  .media-size-helper:after {
    content: '9';
  }
}
.inner-w {
  padding: 0.6rem;
  max-width: 900px;
}
.basic-title * {
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.container.basic-example {
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  border: 2px solid #f39c12;
}
.container.basic-example span {
  display: inline-block;
  transform: translate(0.3rem, -83%);
  background: #e3e3e3;
  border: 2px solid #f39c12;
  color: #f39c12;
  font-size: 12px;
  padding: 0.5rem;
}
.container.basic-example .inner-w {
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  margin-bottom: 1.2rem;
  border: 2px solid #f66;
}
.container.basic-example .inner-w > span {
  border: 2px solid #f66;
  color: #f66;
}
.container.basic-example .block-list {
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  border: 2px solid #222;
}
.container.basic-example .block-list span {
  border: 2px solid #222;
  color: #222;
}
.container.basic-example .block {
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  margin-bottom: 3rem;
  border: 2px solid #ff6;
}
.container.basic-example .block > span {
  border: 2px solid #ff6;
  color: #ff6;
}
.container.basic-example .image-w {
  position: relative;
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  padding: 0;
  margin-bottom: 1.2rem;
  border: 2px solid #f39c12;
}
.container.basic-example .image-w > span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0.3rem;
  transform: translate(0.6rem, -50%);
  border: 2px solid #f39c12;
  color: #f39c12;
}
.container.basic-example .text-w {
  padding: 0.6rem;
  background: rgba(0,0,0,0.04);
  border: 2px solid #f39c12;
}
.container.basic-example .text-w > span {
  border: 2px solid #f39c12;
  color: #f39c12;
}
.basic-swatches {
  padding-bottom: 30px;
}
.basic-swatches .swatch-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.basic-swatches .swatch-list li {
  padding: 0.3rem;
  text-shadow: 0 0 2px rgba(255,255,255,0.5);
  transition: 0.3s padding ease-in;
}
@media screen and (min-width: 400px) {
  .basic-swatches .swatch-list li {
    margin-bottom: 0.6rem;
    padding: 0.6rem;
    border-radius: 0.3rem;
  }
}
.basic-swatches .swatch-list li.black {
  background: #222;
}
.basic-swatches .swatch-list li.white {
  background: #efefef;
}
.basic-swatches .swatch-list li.gray-dark {
  background: #515151;
}
.basic-swatches .swatch-list li.gray {
  background: #808080;
}
.basic-swatches .swatch-list li.gray-light {
  background: #b7b7b7;
}
.basic-swatches .swatch-list li.gray-lighter {
  background: #e3e3e3;
}
.basic-swatches .swatch-list li.color-light {
  background: #e67e22;
}
.basic-swatches .swatch-list li.color {
  background: #f39c12;
}
.basic-swatches .swatch-list li.color-dark {
  background: #2f3640;
}
.basic-swatches .swatch-list li.highlight-light {
  background: #f7aaaa;
}
.basic-swatches .swatch-list li.highlight {
  background: #f66;
}
.basic-swatches .swatch-list li.highlight-dark {
  background: #b14e4e;
}
.basic-swatches .swatch-list li.alternate-light {
  background: #f7f7aa;
}
.basic-swatches .swatch-list li.alternate {
  background: #ff6;
}
.basic-swatches .swatch-list li.alternate-dark {
  background: #b1b14e;
}
@media screen and (min-width: 400px) and (max-width: 1299px) {
  .basic-swatches .swatch-list {
    padding: 0.6rem;
  }
  .basic-swatches .swatch-list > * {
    float: left;
    width: 32%;
    margin-right: 2%;
  }
  .basic-swatches .swatch-list > *:nth-of-type(3n + 3 ) {
    margin-right: 0;
  }
}
@media screen and (min-width: 1300px) {
  .basic-swatches .swatch-list {
    padding: 0.6rem;
  }
  .basic-swatches .swatch-list > * {
    float: left;
    width: 16.166666666666668%;
    margin-right: 0.6%;
  }
  .basic-swatches .swatch-list > *:nth-of-type(6n + 6 ) {
    margin-right: 0;
  }
}
.basic body {
  font-family: monospace;
}
.basic body .article p {
  color: #2f3640;
}
.basic .inner-w {
  padding: 0.6rem;
  max-width: 800px;
}
.basic #nothing {
  background: #f39c12;
  color: #2f3640;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/noise.png");
  background-size: 100px;
  background-color: #f39c12;
  border-color: #2f3640;
  float: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.basic #nothing:hover {
  cursor: pointer;
}
.basic .hidden {
  display: none;
}
.basic header.masthead {
  background: #f66;
  color: #b14e4e;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/noise.png");
  background-size: 100px;
  background-color: #f66;
  border-color: #b14e4e;
}
.basic header.masthead h1 {
  font-size: 30px;
}
.basic header.masthead h2 {
  padding-bottom: 1.8rem;
  text-indent: 2.5rem;
  font-size: 18px;
}
.basic .understated {
  opacity: 0.5;
}
.basic .container.dark-theme {
  background: #222;
}
.basic .container.dark-theme span {
  background: #222;
}
.basic .container.dark-theme img {
  opacity: 0;
}
.basic .container.dark-theme .block {
  background: #1b1b1b;
}
@media screen and (min-width: 1000px) {
  .basic .container.dark-theme .block .image-w,
  .basic .container.dark-theme .block .text-w {
    width: 49%;
    float: left;
  }
}
.basic .container.dark-theme .block .image-w {
  max-width: 500px;
}
@media screen and (min-width: 1000px) {
  .basic .container.dark-theme .block .image-w {
    margin-right: 2%;
  }
}
@media screen and (min-width: 1300px) {
  .basic .container.dark-theme .block:nth-of-type(1) {
    position: relative;
    right: 6rem;
  }
}
@media screen and (min-width: 1700px) {
  .basic .container.dark-theme .block:nth-of-type(1) {
    top: 2.4rem;
    right: 9rem;
  }
}
@media screen and (min-width: 1300px) {
  .basic .container.dark-theme .block:nth-of-type(2) {
    transform: translate(6rem, 0);
  }
}
@media screen and (min-width: 1700px) {
  .basic .container.dark-theme .block:nth-of-type(2) {
    transform: translate(18rem, 7.8rem);
  }
}
.basic p {
  color: #efefef;
  font-family: monospace;
}
.basic .button {
  text-transform: uppercase;
}
p {
  max-width: 700px;
}
p:not(:last-of-type) {
  margin-bottom: 0.6rem;
}
.pen-header {
  background: #1a1c1d;
  color: #fff;
  border-bottom: 1px solid #252728;
}
.pen-header .inner-w h1 {
  font-size: 16px;
  font-family: 'helvetica';
}
output {
  display: inline-block;
  margin-top: 1.2rem;
  border: 1px solid #0f0;
  background: #008000;
  color: #0f0;
  padding: 0.6rem;
  border-radius: 0.3rem;
  font-family: 'monospace';
  max-width: 100%;
  overflow: auto;
}
.alert {
  color: #f00;
}
.alert a {
  text-decoration: underline;
}
html {
  background: #2f3640;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: 1s;
}
.modal .flash-card {
  background-color: #2c3e50;
  border: 1px solid #808080;
  min-width: 300px;
  min-height: 100px;
  padding: 20px;
  transform: rotate(0deg);
  transition: 0.2s;
  color: #f3f3f3;
  font-family: Poppins;
}
.modal.hidden {
  opacity: 0;
  pointer-events: none;
}
.modal.hidden .flash-card {
  transform: rotate(10deg);
}

/* Add this CSS to your styles */
.state-image,
.highlighted-map {
    max-width: 100%; /* Adjust to your preference */
    height: auto; /* Maintain aspect ratio */
}

.image-container {
    height: 650px;
    width: 580px;
}