/*
  Paragraph: 18-18
  Line-heights: 1.5
  
  H0 for site heading 60-40
  H1 page title 42-28
  H2 for section headings 34-24
  H3 for paragraphs headings 22-20
  H4 for card titles 22-20
  H1 and H2 must follow a <hr>
  
*/



/*COLOR============================================================================*/

:root {
  /* Greyscale */
  --color_black         : rgb(0, 0, 0);
  --color_night         : rgb(18, 18, 18);
  --color_jet           : rgb(42, 42, 42);
  --color_fontgrey      : rgb(84, 84, 84); /* font */
  --color_grey          : rgb(118, 118, 118);
  --color_battleship    : rgb(144, 144, 144);
  --color_silver        : rgb(188, 188, 188);
  --color_wolf          : rgb(208, 208, 208); /* outline */
  --color_platinum      : rgb(228, 228, 228); /* footer border */
  --color_smoke         : rgb(242, 242, 242); /* fill */
  
  /* Branding */
  /* ["BB4CD7","B337D2","4CD6BB","37D2B3","4CADD6","37A3D2"] */
  
  --color_font: var(--color_fontgrey);
  --color_kicker: rgb(76, 173, 214);
  --color_heading: var(--color_black);
  --color_lead: var(--color_font);
  
  --color_primary: rgb(187, 76, 215);
  /*--color_secondary: rgb(76, 214, 187);*/
  --color_secondary: rgb(53, 182, 156);
  --color_tertiary: rgb(76, 173, 214);
  
  --color_primary_hover: rgb(179, 55, 210);
  /*--color_secondary_hover: rgb(55, 210, 179);*/
  --color_secondary_hover: rgb(47, 162, 139);
  --color_tertiary_hover: rgb(55, 163, 210);
  
  --color_highlight: rgb(187, 76, 215);
}



/*PAGE============================================================================*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
  background-color: white;
  color: rgb(84, 84, 84);
  font-family: arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  min-width: 360px;
  overflow-x: hidden;
  text-align: left;
  width: 100%;
}

button {
  appearance: none;
  user-select: none;
}

button, input, select, datalist, textarea {
  background: none;
  border: none;
  border-radius: 0px;
  color: inherit;
  font-family: arial, sans-serif; 
  font-size: 18px;
  font-style: normal;
  text-align: left;
}

button:disabled, input:disabled, select:disabled, datalist:disabled, textarea:disabled {
  color: rgb(84, 84, 84);
  opacity: 0.5;
}

.button:disabled, button:disabled,
input[type='button']:disabled, input[type='reset']:disabled, input[type='submit']:disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

button, input, select, datalist, textarea, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

select, datalist {
  cursor: pointer;
}

[data-src] {
  min-width: 1px;
  min-height: 1px;
}

/*.main_hero {
  background-color: white;
  margin-top: 100vh;
}*/

section {
  width: 100%;
}

::selection {
  background: var(--color_primary);
  color: white;
}

/*GLOBAL============================================================================*/

.hidden {display: none !important;}


/*A============================================================================*/

a:link, a:visited, a:hover, a:active {
  color: inherit;
  cursor: pointer;
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active,
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active,
h3 a:link, h3 a:visited, h3 a:hover, h3 a:active,
h4 a:link, h4 a:visited, h4 a:hover, h4 a:active,
h5 a:link, h5 a:visited, h5 a:hover, h5 a:active,
h6 a:link, h6 a:visited, h6 a:hover, h6 a:active {
  text-decoration: inherit;
}



/*ACCORDION============================================================================*/

.accordion {
  border-top: 1px solid var(--color_platinum);
  display: block;
  overflow: hidden;
  position: relative;
  padding: 0;
  width: 100%;
}

.accordion:first-of-type {
  margin: 50px 0 0;
}

.accordion:last-of-type {
  border-bottom: 1px solid var(--color_platinum);
  margin: 0 0 50px;
}

.accordion_heading {
  box-sizing: border-box;
  cursor: pointer;
  padding: 30px 60px 30px 0;
  position: relative;
  user-select: none;
}

.accordion_heading::before {
  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='black'><path d='m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  content: "";
  height: 30px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 250ms cubic-bezier(0.4, 0, 0.4, 1);
  width: 30px;
}

.accordion.open .accordion_heading::before, .accordion.opening .accordion_heading::before {
  transform: translate(0, -50%) rotate(180deg);
}

.accordion.closing .accordion_heading::before {
  transform: translate(0, -50%);
}

.accordion_content {
  height: 0;
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.4, 0, 0.4, 1);
}

.accordion.open .accordion_content {
  height: auto;
}

.accordion_hidden {
  opacity: 0;
  overflow: hidden;
  padding: 0 0 30px;
  transition: all 250ms cubic-bezier(0.4, 0, 0.4, 1);
  visibility: hidden;
}

.accordion.open .accordion_hidden {
  opacity: 1;
  visibility: visible;
}

.accordion h4 {padding: 0;}



/*ADSENSE============================================================================*/

.adsense {
  background: rgb(242, 242, 242);
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
  box-sizing: border-box;
  cursor: pointer;
  margin: 100px 0 0;
  min-height: 90px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.adsense_article {
  background: rgb(242, 242, 242);
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
  box-sizing: border-box;
  cursor: pointer;
  margin: 100px 0 0;
  min-height: 90px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.adsense_hover {
  background: rgb(242, 242, 242);
  border-radius: 10px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 300px;
  height: 100px;
}

.adsense_hover.right {
  right: 50px;
  bottom: 50px;
  width: 300px;
  height: 100px;
}

.adsense_hover.left {
  left: 50px;
  bottom: 50px;
  width: 300px;
  height: 100px;
}

.adsense_mobile {
  display: none;
  background: rgb(242, 242, 242);
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  height: 90px;
  left: 0px;
  max-width: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.adsense_hide {
  background: rgb(242, 242, 242);
  border-bottom-left-radius: 5px;
  border-bottom: 1px solid rgb(228, 228, 228);
  border-left: 1px solid rgb(228, 228, 228);
  color: rgb(106, 106, 106);
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 7px;
}

@media (hover: hover) and (pointer: fine) {
  .adsense_hide:hover {
    background: rgb(228, 228, 228);
  }
}



/*ARTICLE============================================================================*/

article {
  margin: 0 auto;
  max-width: 750px;
  padding: 100px 20px;
}

/*article p span, article ol span, article ul span, article p a {
  color: rgb(187, 76, 215) !important;
  font-weight: bold !important;
}*/

section {
  padding: 50px 0;
}

.article_grey {
  background-color: rgb(242, 242, 242);
}

.article_bold {
  color: rgb(187, 76, 215) !important;
  font-weight: bold;
}

.article_caption {
  color: rgb(118, 118, 118);
  font-size: 14px;
  margin: 0 0 20px;
  text-align: center;
}

/*.article_calltoaction {
  color: rgb(187, 76, 215) !important;
  font-weight: bold;
}*/

.article_code {
  padding: 20px;
  background-color: rgb(242, 242, 242);
  box-sizing: border-box;
  font-family: monospace;
  font-size: 16px;
  line-height: 1.2em;
  margin: 20px 0;
  white-space: pre-wrap;
  white-space: nowrap;
  overflow-x: scroll;
}

.article_code span {
  background-color: yellow;
}

.article_code_inline {
  background-color: rgb(232, 232, 232);
  font-family: monospace;
  padding: 0 5px;
}

.article_code_copy {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnXzJsYXllciIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHN0eWxlPSJkaXNwbGF5OiBibG9jazsiPgo8Zz4KICAgIDxwYXRoIGlkPSJzdmdfMmxheWVyX2JhY2siIGQ9Ik0gNjQgNjQgbSAtNjQgMCBhIDY0IDY0IDAgMSAwIDEyOCAwIGEgNjQgNjQgMCAxIDAgLTEyOCAwICIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPHBhdGggaWQ9InN2Z18ybGF5ZXJfaWNvbiIgZD0iTSA4MS4wNjcwMDggMTcuMDY3MDA4IGggLTUxLjIgYyAtNC42OTI5OTIgMCAtOC41MzI5OTIgMy44NCAtOC41MzI5OTIgOC41MzI5OTIgdiA1OS43MzI5OTIgaCA4LjUzMjk5MiB2IC01OS43MzI5OTIgaCA1MS4yIHYgLTguNTMyOTkyIHogbSAxMi44IDE3LjA2NzAwOCBoIC00Ni45MzI5OTIgYyAtNC42OTI5OTIgMCAtOC41MzI5OTIgMy44NCAtOC41MzI5OTIgOC41MzI5OTIgdiA1OS43MzI5OTIgYyAwIDQuNjkyOTkyIDMuODQgOC41MzI5OTIgOC41MzI5OTIgOC41MzI5OTIgaCA0Ni45MzI5OTIgYyA0LjY5Mjk5MiAwIDguNTMyOTkyIC0zLjg0IDguNTMyOTkyIC04LjUzMjk5MiB2IC01OS43MzI5OTIgYyAwIC00LjY5Mjk5MiAtMy44NCAtOC41MzI5OTIgLTguNTMyOTkyIC04LjUzMjk5MiB6IG0gMCA2OC4yNjcwMDggaCAtNDYuOTMyOTkyIHYgLTU5LjczMjk5MiBoIDQ2LjkzMjk5MiB2IDU5LjczMjk5MiB6ICIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIAogICAgPCEtLTxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBzdHlsZT0iZmlsbDpvcmFuZ2U7IiAvPi0tPgo8L2c+Cjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  cursor: pointer;
  float: right;
  height: 30px;
  margin: -20px 0 0;
  opacity: 50%;
  padding: 5px;
  width: 30px;
}

.article_code_copy:hover {
  opacity: 100%;
}

.article_cost {
  color: rgb(187, 76, 215);
  font-size: 28px;
  font-weight: bold;
  padding: 0 0 20px;
}

/*.article_dataTable {
  margin: 20px 0;
  width: 100%;
  line-height: 1.6em;
}

.article_dataTable td {
  background-color: rgb(242, 242, 242);
  vertical-align: top;
  padding: 20px;
}

.article_dataTable td:nth-child(1) {
  background-color: rgb(222, 222, 222);
  font-weight: bold;
  width: 30%;
}*/

/*.article_dataTable tr:nth-child(3) td:nth-child(2) {
  color: rgb(187, 76, 215);
  font-style: italic;
}*/

table {
  line-height: 1.6em;
  margin: 20px 0 0;
  overflow-wrap: break-word;
  table-layout:fixed;
  text-align: left;
  width: 100%;
  word-wrap: break-word;
}

table th, table td {
  vertical-align: top;
  padding: 20px;
}

table, table th, table td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
}

table thead, table tfoot {background-color: rgb(242, 242, 242); font-weight: bold}
.table.zebra tr:nth-child(even) {background-color: rgb(242, 242, 242);}

@media screen and (max-width: 500px) {
  table {font-size: 12px;}
  table th, table td {padding: 5px;}
}

.article_goal {
  box-sizing: border-box;
  border-left: 20px solid rgb(187, 76, 215);
  color: rgb(187, 76, 215) !important;
  font-weight: bold;
  margin: 100px 0 0;
  padding: 0 0 0 20px;
}

.article_highlight {
  color: inherit;
  font-weight: inherit;
  /*box-shadow: 0 3px 0 0 #ede734;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 63%, #ede734 0, #ede734);*/
  box-shadow: 0 3px 0 0 rgb(255, 255, 0);
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 63%, rgb(255, 255, 0) 0, rgb(255, 255, 0));
  /*box-shadow: 0 3px 0 0 rgba(187, 76, 215, 0.4);
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 63%, rgba(187, 76, 215, 0.4) 0, rgba(187, 76, 215, 0.4));*/
}

.article_icon {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 48px 48px;
  display: inline-block;
  width: 100%;
  height: 70px;
  opacity: 1;
  transition: opacity 3s;
}

.article_icon.download {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="m24 32.35-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15ZM8 40V29.85h3V37h26v-7.15h3V40Z"></path></svg>');}
.article_icon.powerful {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="m23.1 38.9 8.5-18h-6.5v-12l-8.5 18h6.5ZM24 44q-4.25 0-7.9-1.525-3.65-1.525-6.35-4.225-2.7-2.7-4.225-6.35Q4 28.25 4 24q0-4.2 1.525-7.85Q7.05 12.5 9.75 9.8q2.7-2.7 6.35-4.25Q19.75 4 24 4q4.2 0 7.85 1.55Q35.5 7.1 38.2 9.8q2.7 2.7 4.25 6.35Q44 19.8 44 24q0 4.25-1.55 7.9-1.55 3.65-4.25 6.35-2.7 2.7-6.35 4.225Q28.2 44 24 44Zm0-20Zm0 17q7.25 0 12.125-4.875T41 24q0-7.25-4.875-12.125T24 7q-7.25 0-12.125 4.875T7 24q0 7.25 4.875 12.125T24 41Z"></path></svg>');}
.article_icon.stars {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="m19.2 36.4-4.75-10.45L4 21.2l10.45-4.75L19.2 6l4.75 10.45L34.4 21.2l-10.45 4.75ZM36.4 42l-2.35-5.25-5.25-2.35 5.25-2.4 2.35-5.2 2.4 5.2 5.2 2.4-5.2 2.35Z"></path></svg>');}
.article_icon.shield {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="m21.8 30.65 11.4-11.4-2.1-2.05-9.15 9.15-5.05-5.05-2.2 2.2Zm2.2 13.3q-7-1.75-11.5-8.125T8 21.85V9.95l16-6 16 6v11.9q0 7.6-4.5 13.975T24 43.95Zm0-3.1q5.75-1.9 9.375-7.175T37 21.85v-9.8l-13-4.9-13 4.9v9.8q0 6.55 3.625 11.825Q18.25 38.95 24 40.85ZM24 24Z"></path></svg>');}
.article_icon.look1 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M24.6 34.15h3v-20.3h-7.15v3h4.15ZM42 42H6V6h36ZM9 39h30V9H9ZM9 9v30Z"></path></svg>');}
.article_icon.look2 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M18.25 34.15h11.5v-3h-8.5V25.4h8.5V13.85h-11.5v3h8.5v5.55h-8.5ZM6 42V6h36v36Zm3-3h30V9H9Zm0 0V9v30Z"></path></svg>');}
.article_icon.look3 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M18.25 34.15h11.5v-20.3h-11.5v3h8.5v5.55H22.4v3h4.35v5.75h-8.5ZM6 42V6h36v36Zm3-3h30V9H9Zm0 0V9v30Z"></path></svg>');}
.article_icon.look4 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M6 42V6h36v36Zm3-3h30V9H9Zm0 0V9v30Zm17.75-4.85h3v-20.3h-3v8.55h-5.5v-8.55h-3V25.4h8.5Z"></path></svg>');}
.article_icon.look5 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M18.25 34.15h11.5V22.4h-8.5v-5.55h8.5v-3h-11.5V25.4h8.5v5.75h-8.5ZM6 42V6h36v36Zm3-3h30V9H9Zm0 0V9v30Z"></path></svg>');}
.article_icon.look6 {background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="none" stroke-width="0" fill-rule="nonzero" d="M21.25 22.4v-5.55h6.35v-3h-9.35v20.3h11.5V22.4Zm0 3h5.5v5.75h-5.5ZM6 42V6h36v36Zm3-3h30V9H9Zm0 0V9v30Z"></path></svg>');}

/*.article_image_hold {
  background-color: rgb(232, 232, 232);
  height: 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  margin: 20px 0;
  width: 100%;
}*/

.article_image {
  border: 1px solid rgb(232, 232, 232);
  box-sizing: border-box;
  display: inline-block;
  margin: 20px 0 0;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 3s;
}

.article_image.noborder {
  border: none;
}

.article_image[data-src] {
  opacity: 0;
}

.article_link {
  color: rgb(187, 76, 215) !important;
  color: inherit;
  cursor: pointer;
  font-weight: bold;
}

.article_quote {
  color: rgb(187, 76, 215);
  font-size: 28px;
  font-style: italic;
  line-height: 1.2em;
  padding: 100px 0 0px;
  text-align: center;
  margin: 0 auto;
  width: 80%;
}

.article_quote_caption {
  color: rgb(118, 118, 118);
  font-size: 14px;
  padding: 0 0 80px;
  text-align: center;
}

.article_specifications {
  color: rgb(187, 76, 215);
  font-size: 14px;
}

.article_source{
  color: rgb(118, 118, 118);
  font-size: 14px;
  font-style: italic;
  padding: 0 0 20px;
}

/*.article_summary {
  padding: 20px;
  background-color: rgb(187, 76, 215);
  color: white;
  font-weight: bold;
  line-height: 1.2em;
}*/

.article_summary {
  background-color: rgb(187, 76, 215);
  color: white;
  font-weight: bold;
  list-style-position: outside;
  line-height: 1.6em;
  margin: 20px 0;
  padding: 20px;
}

.article_summary li {
  margin: 10px 20px;
}

.article_summary li::before {
  content: "\2B24";
  color: white;
  font-weight: bold;
  display: inline-block;
  width: 36px;
  float: left; margin-left: -36px;
}

.article_youtube {
  /*background-color: black;*/
  border: 1px solid rgb(232, 232, 232);
  box-sizing: border-box;
  cursor: pointer;
  height: 0;
  margin: 20px 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.article_youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*CARD============================================================================*/

.card {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 50px 0;
}

.card.hidden {
  display: none;
}

/*.card_thumbnail {
  background-color: rgb(242, 242, 242);
  height: 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  width: 100%;
}

.card_thumbnail_image {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 3s;
}

.card_thumbnail_image[data-src] {
  opacity: 0;
}*/

.card_thumbnail.twenty {
  /*background-color: black;*/
  border: 1px solid rgb(232, 232, 232);
  box-sizing: border-box;
  cursor: pointer;
  height: 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.card_thumbnail.fifty {
  /*background-color: black;*/
  border: 1px solid rgb(232, 232, 232);
  box-sizing: border-box;
  cursor: pointer;
  height: 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.card_thumbnail.hundred {
  /*background-color: black;*/
  border: 1px solid rgb(232, 232, 232);
  box-sizing: border-box;
  cursor: pointer;
  height: 0;
  padding: calc(720 / 1280 * 100%) 0 0 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.card_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card_image {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 101%;
  width: auto;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 3s, height 300ms ease-in-out;
}

.card_image[data-src] {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .card_image:hover {
    height: 111%;
    width: auto;
  }
}

.card_magnify {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="white" stroke-width="1" fill-rule="nonzero" d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875ZM17.3 24.3v-4.1h-4.1v-3h4.1v-4.05h3v4.05h4.05v3H20.3v4.1Z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 48px;
  width: 48px;
  opacity: 0.5;
  transition: opacity 3s;
}

.card_info.fifty {
  box-sizing: border-box;
  padding: 20px 0px;
  width: 100%;
}

.card_info.eighty {
  box-sizing: border-box;
  padding: 20px 0px;
  width: 100%;
}

.card_info.hundred {
  box-sizing: border-box;
  padding: 20px 0px;
  width: 100%;
}

.card_title {
  margin: 0 0 10px;
  width: 90%;
}

.card_description {
  font-size: 16px;
  padding: 0 0 0;
  width: 90%;
  line-height: 1.5em;
  margin: 0 0 10px;
}

.card_specifications {
  color: rgb(187, 76, 215);
  /*color: rgb(184, 184, 184);*/
  font-size: 15px;
  margin: 0 0 10px;
}

.card_keywords {
  display: none;
  font-size: 16px;
  padding: 0 0 0;
  width: 90%;
  line-height: 1.5em;
}

.card_article {
  cursor: pointer;
  padding: 0 0 10px 0;
}

.card_youtube {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" style="display:block;"><path fill="rgb(255, 0, 0)" stroke="none" stroke-width="0" fill-rule="nonzero" d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  display: block;
  height: 60px;
  width: 60px;
}

.card_button {
  display: inline-block;
  background: rgb(5, 160, 129);
  border: 1px solid rgb(5, 160, 129);
  border-radius: 3px;
  color: white !important;
  cursor: pointer;
  margin: 0 0 0;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  padding: 11px 24px;
}

@media (hover: hover) and (pointer: fine) {
  .card_button:hover {
    background: rgb(6, 185, 149);
    border: 1px solid rgb(5, 160, 129);
    text-decoration: none;
  }
}

.show_button {
  display: block;
  background: white;
  border: 1px solid rgb(208, 208, 208);
  border-radius: 3px;
  color: rgb(94, 94, 94) !important;
  cursor: pointer;
  margin: 50px auto 0;
  padding: 11px 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  width: fit-content;
}

.show_button.hidden {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .show_button:hover {
    background: rgb(232, 232, 232);
    border: 1px solid rgb(232, 232, 232);
    text-decoration: none;
  }
}

.explore_button {
  display: block;
  background: white;
  border: 1px solid rgb(187, 76, 215);
  border-radius: 3px;
  color: rgb(187, 76, 215) !important;
  cursor: pointer;
  margin: 50px auto 0;
  padding: 22px 48px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
  .explore_button:hover {
    background: rgb(187, 76, 215);
    color: white !important;
    text-decoration: none;
  }
}

.download_button {
  display: block;
  background: rgb(5, 160, 129);
  border: 1px solid rgb(5, 160, 129);
  border-radius: 3px;
  color: white !important;
  cursor: pointer;
  margin: 50px auto;
  padding: 22px 48px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
  .download_button:hover {
    background: rgb(6, 185, 149);
    border: 1px solid rgb(5, 160, 129);
    text-decoration: none;
  }
}



/*CATEGORY============================================================================*/

.category {
  background: rgb(84, 84, 84);
  border-radius: 20px;
  border:none;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  height: 24px;
  line-height: 24px;
  margin: 0 10px 20px 0;
  outline: none;
  padding: 0 12px;
  text-transform: uppercase;
  user-select: none;
}

.category.pink {background: #FF0099;}
.category.blue {background: #00B3FF;}
.category.purple {background: #8000FF;}
.category.orange {background: #FF9900;}
.category.red {background: #FF002E;}

.category.beta {
  background: black;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 6px 50%;
  background-size: 20px;
}

.category.beta {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="white" d="M 9.35 20.45l 5.3 2.25q 0.9 -1.8 1.925 -3.55t 2.175 -3.35l -3.95 -0.8l -5.45 5.45zm 7.7 4.05l 6.65 6.65q 2.85 -1.3 5.35 -2.95t 4.05 -3.2q 4.05 -4.05 5.95 -8.3t 2.05 -9.6q -5.35 0.15 -9.6 2.05t -8.3 5.95q -1.55 1.55 -3.2 4.05t -2.95 5.35zm 11.45 -4.8q -1 -1 -1 -2.475t 1 -2.475q 1 -1 2.475 -1t 2.475 1q 1 1 1 2.475t -1 2.475q -1 1 -2.475 1t -2.475 -1zm -0.75 19.15l 5.45 -5.45l -0.8 -3.95q -1.6 1.15 -3.35 2.175t -3.55 1.925l 2.25 5.3zm 16.3 -34.7q 0.45 6.8 -1.7 12.4t -7.1 10.55l -0.1 0.1l -0.1 0.1l 1.1 5.5q 0.15 0.75 -0.075 1.45t -0.775 1.25l -8.55 8.6l -4.25 -9.9l -8.5 -8.5l -9.9 -4.25l 8.6 -8.55q 0.55 -0.55 1.25 -0.775t 1.45 -0.075l 5.5 1.1q 0.05 -0.05 0.1 -0.075t 0.1 -0.075q 4.95 -4.95 10.55 -7.125t 12.4 -1.725zm -36.6 27.6q 1.75 -1.75 4.275 -1.775t 4.275 1.725q 1.75 1.75 1.725 4.275t -1.775 4.275q -1.3 1.3 -4.025 2.15t -8.175 1.6q 0.75 -5.45 1.575 -8.2t 2.125 -4.05zm 2.1 2.15q -0.7 0.75 -1.25 2.35t -0.95 4.1q 2.5 -0.4 4.1 -0.95t 2.35 -1.25q 0.95 -0.85 0.975 -2.125t -0.875 -2.225q -0.95 -0.9 -2.225 -0.875t -2.125 0.975z"></path></svg>');}

.category.new {
  background: #00FF80;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 6px 50%;
  background-size: 20px;
}

.category.new {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="white" d="M 17.3 45L 13.5 38.5L 5.95 36.95L 6.8 29.6L 2 24L 6.8 18.45L 5.95 11.1L 13.5 9.55L 17.3 3L 24 6.1L 30.7 3L 34.55 9.55L 42.05 11.1L 41.2 18.45L 46 24L 41.2 29.6L 42.05 36.95L 34.55 38.5L 30.7 45L 24 41.9L 17.3 45ZM 21.85 30.65L 33.2 19.4L 30.95 17.35L 21.85 26.35L 17.1 21.4L 14.8 23.65L 21.85 30.65Z"></path></svg>');}
.category.new {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="white" d="M 11.65 42L 14.9 27.95L 4 18.5L 18.4 17.25L 24 4L 29.6 17.25L 44 18.5L 33.1 27.95L 36.35 42L 24 34.55L 11.65 42Z"></path></svg>');}


.category.limitedRun {background: #FF0099;}
.category.limitedTime {background: #FF9900;}



/*CITATION============================================================================*/

cite {} /*refer to text*/
.citation_list {}



/*CONTAINER============================================================================*/

.container {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.container.fifty {
  width: 50%;
}

.container.fifty.left {
  margin-right: 10px;
  width: calc(50% - 10px);
}

.container.fifty.right {
  margin-left: 10px;
  width: calc(50% - 10px);
}

.container.padding {
  padding: 20px;
}

.container.gap {
  gap: 20px;
}



/*EQUATION============================================================================*/

.equation {
  font-size: 22px;
  text-align: center;
}



/*ERROR============================================================================*/

.h0.error {
  color: rgb(187, 76, 215);
  /*background: -webkit-linear-gradient(0deg, rgb(73, 83, 215), rgb(215, 76, 76), rgb(73, 169, 217));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  
  user-select: none;
  opacity: 1;
  animation: errorfadein 4s;
  
  word-spacing: inherit;
}

@keyframes errorfadein {
  0%   {opacity: 0;}
  10%   {opacity: 0;}
  100% {opacity: 1;}
}

.error_button {
  color: rgb(215, 76, 76);
  cursor: pointer;
  position: fixed;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: 2px solid rgb(215, 76, 76);
  border-radius: 25px;
  box-sizing: border-box;
  height: 50px;
  width: 200px;
  line-height: 46px;
  text-align: center;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .error_button:hover {
    background-color: rgb(215, 76, 76);
    color: rgb(232, 232, 232);
  }
}



/*FLEX============================================================================*/

.flex {
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  position: relative;
  width: 100%;
}

.flex_gallery {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.flex_gallery img {
  cursor: pointer;
  width: calc(100% / 3 - 10px);
}



/*FONTS============================================================================*/

/* h0 = site heading */

/* page title */
h1 {
  color: black;
  font-size: 48px;
  margin: 60px 0 0;
}

.h1_kicker {
  color: var(--color_tertiary);
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  user-select: none;
}

.h1_kicker span {
  margin: 0 10px;
  user-select: none;
}

.h1_kicker a:hover {
  color: var(--color_tertiary_hover);
}

.h1_subtitle {
  color: rgb(118, 118, 118);
  font-size: 22px;
  margin: 20px 0 0;
}

/* section heading */
h2 {
  color: black; /*rgb(187, 76, 215);*/
  font-size: 34px;
  margin: 20px 0 0;
}

/* article section heading */
h3 {
  color: black;
  font-size: 20px;
  margin: 50px 0 0;
}

/* card title */
h4 {
  color: black;
  font-size: 20px;
  margin: 0;
}

/* card title without padding */
h5 {
  color: black;
  font-size: 20px;
  margin: 0;
}

/* navigation heading */
h6 {
  /*color: rgb(184, 184, 184);*/
  color: black;
  cursor: pointer;
  font-size: 20px;
  margin: 0 0 20px;
}

p {
  line-height: 1.6em;
  margin: 20px 0 0;
  width: 100%;
}

footer p {
  line-height: 1.6em;
}

hr {
  border: none;
  background: -webkit-linear-gradient(0deg, rgb(73, 83, 215), rgb(187, 76, 215), rgb(73, 169, 217));
  height: 5px;
  margin: 100px 0;
  width: 100%;
}



/*FOOTER============================================================================*/

footer {
  width: 100%;
  background-color: rgb(242, 242, 242); /* CONFIRMED */
  color: rgb(104, 104, 104); /* CONFIRMED */
  text-align: left;
  border-top: 1px solid rgb(228, 228, 228); /* CONFIRMED */
  padding: 30px 0px 90px;
}

.footer_article {
  margin: 0 auto;
  max-width: 750px;
  padding: 30px 20px;
}

.footer_section {
  padding: 30px 0px;
}

.footer_logo {
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 150px;
  width: 150px;
  opacity: 1;
  transition: opacity 3s;
}

.footer_logo[data-src] {
  opacity: 0;
}

.footer_description {
  font-style: italic;
}

.footer_published {
  font-size: 14px;
  font-style: italic;
}

.footer_disclaimer {
  color: rgb(184, 184, 184);
  font-size: 14px;
  font-style: italic;
}

.footer_list {
  box-sizing: border-box;
  color: rgb(184, 184, 184);
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  list-style: none;
  margin: 0;
  padding: 15px 0 0;
}

.footer_list li {
  padding: 0;
}

.footer_list li::before {
  content: "";
  width: auto;
}

.footer_list li::after {
  content: "|";
  margin: 0 8px;
}

.footer_list li:last-child::after {
  content: "";
}


/*HEADER============================================================================*/

header {
  /*background: -webkit-linear-gradient(45deg, rgb(73, 83, 215), rgb(187, 76, 215));*/
  /*background: rgb(187, 76, 215);*/
  background: lightgrey;
  background-color: rgb(242, 242, 242);
  border-bottom: 1px solid rgb(228, 228, 228); /* CONFIRMED */
  box-sizing: border-box;
  height: 96px;
  text-align: left;
  padding: 20px;
  width: 100%;
}

.header_text {
  /*color: rgba(255,255,255,.3) !important;*/
  color: rgb(187, 76, 215) !important;
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: bold;
  /*height: 80px;*/
  line-height: 50px;
  padding: 0px;
  text-align: center;
  width: 100%;
  
  user-select: none;
  opacity: 1;
  animation: herofadein 4s;
  
  /*word-spacing: 100vw;*/
}

.header_text {
  text-decoration: none;
}

.header_logo {
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 150px;
  width: 150px;
  opacity: 1;
  transition: opacity 3s;
}

.header_logo[data-src] {
  opacity: 0;
}

.cover_image {
  max-width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 3s;
}

.cover_image[data-src] {
  opacity: 0;
}



/*GRID============================================================================*/

/* https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /*minmax(320px, 1fr) + 710px max-width on card*/
  grid-gap: 40px;
  margin: 20px 0 0;
  vertical-align: baseline;
}

.grid.space {
  grid-gap: 140px 40px;
}

.grid_card {
  overflow: hidden;
  max-width: 710px;
}

.grid_card.elevate {
  box-shadow: 0 4px 10px rgba(28, 28, 28, 0.28);
}

.grid_card.round {
   border-radius: 10px;
}

.grid_card_thumbnail {
  cursor: pointer;
  height: 220px;
  overflow: hidden;
  /*border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
  position: relative;
  display: block;
  width: 100%;
}

.grid_card_thumbnail.square {
  aspect-ratio: 1 / 1;
  height: auto;
}

.grid_card_thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  opacity: 1;
  transition: opacity 3s, transform 300ms ease-in-out;
}

.grid_card_thumbnail img[data-src] {
  opacity: 0;
}

.grid_card_thumbnail.zoom img {
  transform: scale(1.01);
}

@media (hover: hover) and (pointer: fine) {
  .grid_card_thumbnail.zoom:hover img {
    transform: scale(1.1);
  }
}

/* SWITCH */
.grid_card_thumbnail.switch img {
  visibility: hidden;
}

.grid_card_thumbnail.switch img:first-child {
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .grid_card_thumbnail.switch:hover img {
    transform: scale(1.01);
    visibility: visible;
  }
  
  .grid_card_thumbnail.switch:hover img:first-child {
    display: none;
  }
}

.grid_card_data {
  padding: 20px 0;
  width: 100%;
}

.grid_card.elevate .grid_card_data {
  padding: 20px;
  width: 100%;
}



/*HERO============================================================================*/

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero_image {
  object-fit: cover;
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-30%, -50%) scale(1.04);
  overflow: hidden;
  user-select: none;
  z-index: -10;
  opacity: 1;
  transition: opacity 3s;
}

.hero_image[data-src] {
  opacity: 0;
}

.h0 {
  color: rgb(187, 76, 215);
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: bold;
  /*height: 80px;*/
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  
  /*background-image: linear-gradient(to right, rgb(73, 83, 215), rgb(187, 76, 215), rgb(73, 169, 217));
  background-image: -moz-linear-gradient(to right, rgb(73, 83, 215), rgb(187, 76, 215), rgb(73, 169, 217));
  background-image: -webkit-linear-gradient(to right, rgb(73, 83, 215), rgb(187, 76, 215), rgb(73, 169, 217));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  
  user-select: none;
  opacity: 1;
  animation: herofadein 4s;
  
  word-spacing: 100vw;
}

@keyframes herofadein {
  0%   {opacity: 0;}
  10%   {opacity: 0;}
  100% {opacity: 1;}
}

.hero .h0 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  overflow: hidden;
}



/*ICONS============================================================================*/

.icon.clear, .icon.close {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 12.45 37.65l -2.1 -2.1l 11.55 -11.55l -11.55 -11.55l 2.1 -2.1l 11.55 11.55l 11.55 -11.55l 2.1 2.1l -11.55 11.55l 11.55 11.55l -2.1 2.1l -11.55 -11.55l -11.55 11.55z"></path></svg>');}
.icon.compare {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 21.1 46l 0 -4l -15.1 0l 0 -36l 15.1 0l 0 -4l 3 0l 0 44l -3 0zm -12.1 -9.1l 12.1 0l 0 -13.85l -12.1 13.85zm 18.1 5.1l 0 -18.75l 11.9 13.65l 0 -27.9l -11.9 0l 0 -3l 14.9 0l 0 36l -14.9 0z"></path></svg>');}
.icon.copy {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 6 43.95l 0 -33.15l 3 0l 0 30.15l 23.7 0l 0 3l -26.7 0zm 6 -6l 0 -34l 28 0l 0 34l -28 0zm 3 -3l 22 0l 0 -28l -22 0l 0 28zm 0 0l 0 -28l 0 28z"></path></svg>');}
.icon.copyAll {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M13.2 36.8V4H40v32.8Zm3-3H37V7H16.2ZM6 28.4h3v-4.2H6ZM6 20h3v-4.2H6Zm15.6 24h4.2v-3h-4.2ZM6 36.8h3v-4.2H6ZM6 44h3v-3H6Zm7.2 0h4.2v-3h-4.2ZM30 44h3v-3h-3ZM6 11.6h3v-3H6Z"></path></svg>');}
.icon.document {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 8 44l 0 -40l 21.05 0l 10.95 10.95l 0 29.05l -32 0zm 19.55 -27.7l 0 -9.3l -16.55 0l 0 34l 26 0l 0 -24.7l -9.45 0zm -16.55 -9.3l 0 9.3l 0 -9.3l 0 34l 0 -34z"></path></svg>');}
.icon.done, .icon.load {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 18.9 35.7l -11.2 -11.2l 2.15 -2.15l 9.05 9.05l 19.2 -19.2l 2.15 2.15l -21.35 21.35z"></path></svg>');}
.icon.download {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="m24 32.35-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15ZM8 40V29.85h3V37h26v-7.15h3V40Z"></path></svg>');}
.icon.example {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 9.35 20.45l 5.3 2.25q 0.9 -1.8 1.925 -3.55t 2.175 -3.35l -3.95 -0.8l -5.45 5.45zm 7.7 4.05l 6.65 6.65q 2.85 -1.3 5.35 -2.95t 4.05 -3.2q 4.05 -4.05 5.95 -8.3t 2.05 -9.6q -5.35 0.15 -9.6 2.05t -8.3 5.95q -1.55 1.55 -3.2 4.05t -2.95 5.35zm 11.45 -4.8q -1 -1 -1 -2.475t 1 -2.475q 1 -1 2.475 -1t 2.475 1q 1 1 1 2.475t -1 2.475q -1 1 -2.475 1t -2.475 -1zm -0.75 19.15l 5.45 -5.45l -0.8 -3.95q -1.6 1.15 -3.35 2.175t -3.55 1.925l 2.25 5.3zm 16.3 -34.7q 0.45 6.8 -1.7 12.4t -7.1 10.55l -0.1 0.1l -0.1 0.1l 1.1 5.5q 0.15 0.75 -0.075 1.45t -0.775 1.25l -8.55 8.6l -4.25 -9.9l -8.5 -8.5l -9.9 -4.25l 8.6 -8.55q 0.55 -0.55 1.25 -0.775t 1.45 -0.075l 5.5 1.1q 0.05 -0.05 0.1 -0.075t 0.1 -0.075q 4.95 -4.95 10.55 -7.125t 12.4 -1.725zm -36.6 27.6q 1.75 -1.75 4.275 -1.775t 4.275 1.725q 1.75 1.75 1.725 4.275t -1.775 4.275q -1.3 1.3 -4.025 2.15t -8.175 1.6q 0.75 -5.45 1.575 -8.2t 2.125 -4.05zm 2.1 2.15q -0.7 0.75 -1.25 2.35t -0.95 4.1q 2.5 -0.4 4.1 -0.95t 2.35 -1.25q 0.95 -0.85 0.975 -2.125t -0.875 -2.225q -0.95 -0.9 -2.225 -0.875t -2.125 0.975z"></path></svg>');}
.icon.preview {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 6 42l 0 -36l 36 0l 0 36l -36 0zm 3 -3l 30 0l 0 -26l -30 0l 0 26zm 15.0021 -5.25q -4.0021 0 -7.152 -2.1575q -3.15 -2.1576 -4.6 -5.6q 1.45 -3.4425 4.598 -5.5925t 7.15 -2.15q 4.002 0 7.152 2.1576q 3.15 2.1576 4.6 5.6q -1.45 3.4424 -4.5979 5.5924t -7.15 2.15zm -0.0021 -2.5q 2.85 0 5.2475 -1.3912t 3.7525 -3.8588q -1.3551 -2.4675 -3.7525 -3.8587q -2.3974 -1.3913 -5.2475 -1.3913t -5.2475 1.3913q -2.3974 1.3912 -3.7525 3.8587q 1.3551 2.4675 3.7525 3.8588q 2.3975 1.3912 5.2475 1.3912zm 0 -5.25zm 0.0059 2.5q 1.0441 0 1.7691 -0.7309q 0.725 -0.7308 0.725 -1.775q 0 -1.0441 -0.7309 -1.7691q -0.7309 -0.725 -1.775 -0.725q -1.0441 0 -1.7691 0.7309q -0.725 0.7308 -0.725 1.775q 0 1.0441 0.7309 1.7691q 0.7309 0.725 1.775 0.725z"></path></svg>');}
.icon.random, .icon.shuffle {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M19.75 21.8 7.5 9.6l2.15-2.15 12.25 12.2Zm9.3 18.7v-3h6.25l-9.2-9.15 2.1-2.15 9.3 9.2v-6.35h3V40.5Zm-19.45 0-2.1-2.15 27.9-27.9h-6.35v-3H40.5V18.9h-3v-6.3Z"></path></svg>');}
.icon.refresh, .icon.reset {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 24 40q -6.65 0 -11.325 -4.675t -4.675 -11.325q 0 -6.65 4.675 -11.325t 11.325 -4.675q 4.25 0 7.45 1.725t 5.55 4.725l 0 -6.45l 3 0l 0 12.7l -12.7 0l 0 -3l 8.4 0q -1.9 -3 -4.85 -4.85t -6.85 -1.85q -5.45 0 -9.225 3.775t -3.775 9.225q 0 5.45 3.775 9.225t 9.225 3.775q 4.15 0 7.6 -2.375t 4.8 -6.275l 3.1 0q -1.45 5.25 -5.75 8.45t -9.75 3.2z"></path></svg>');}
.icon.restore {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 23.9978 27.75q -1.5478 0 -2.6478 -1.1022q -1.1 -1.1022 -1.1 -2.65q 0 -1.5478 1.1022 -2.6478q 1.1023 -1.1 2.65 -1.1q 1.5478 0 2.6478 1.1022q 1.1 1.1022 1.1 2.65q 0 1.5478 -1.1022 2.6478q -1.1023 1.1 -2.65 1.1zm 0.0022 14.25q -7.5 0 -12.75 -5.275t -5.25 -12.775l 3 0q 0 6.25 4.375 10.65t 10.625 4.4q 6.2678 0 10.6339 -4.3661q 4.3661 -4.3661 4.3661 -10.6339t -4.3661 -10.6339q -4.3661 -4.3661 -10.6339 -4.3661q -3.45 0 -6.45 1.525t -5.25 4.125l 5.2 0l 0 3l -10.4 0l 0 -10.4l 3 0l 0 5.3q 2.65 -3.1 6.2608 -4.825t 7.6392 -1.725q 3.75 0 7.025 1.425t 5.7 3.85q 2.425 2.425 3.85 5.7t 1.425 7.025q 0 3.75 -1.425 7.025t -3.85 5.7q -2.425 2.425 -5.7 3.85t -7.025 1.425z"></path></svg>');}
.icon.store {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 6 42l 0 -30.45l 4.1 -5.55l 27.75 0l 4.15 5.55l 0 30.45l -36 0zm 3.85 -30.7l 28.25 0l -1.8 -2.3l -24.65 0l -1.8 2.3zm -0.85 27.7l 30 0l 0 -24.7l -30 0l 0 24.7zm 15 -4.5l 7.8 -7.8l -2 -2l -4.3 4.3l 0 -10.05l -3 0l 0 10.05l -4.3 -4.3l -2 2l 7.8 7.8zm -15 4.5l 0 -24.7l 0 24.7z"></path></svg>');}
.icon.summary {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 6 42l 0 -36l 26.1 0l 9.9 9.9l 0 26.1l -36 0zm 3 -3l 30 0l 0 -21.45l -8.55 0l 0 -8.55l -21.45 0l 0 30zm 6.45 -22.05q 0.6 0 1.05 -0.45t 0.45 -1.05q 0 -0.6 -0.45 -1.05t -1.05 -0.45q -0.6 0 -1.05 0.45t -0.45 1.05q 0 0.6 0.45 1.05t 1.05 0.45zm 0 8.55q 0.6 0 1.05 -0.45t 0.45 -1.05q 0 -0.6 -0.45 -1.05t -1.05 -0.45q -0.6 0 -1.05 0.45t -0.45 1.05q 0 0.6 0.45 1.05t 1.05 0.45zm 0 8.55q 0.6 0 1.05 -0.45t 0.45 -1.05q 0 -0.6 -0.45 -1.05t -1.05 -0.45q -0.6 0 -1.05 0.45t -0.45 1.05q 0 0.6 0.45 1.05t 1.05 0.45zm -6.45 -25.05l 0 8.5714l 0 -8.5714l 0 30l 0 -30z"></path></svg>');}
.icon.text {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" d="M 8 32.9L 8 29.9L 40 29.9L 40 32.9L 8 32.9ZM 8 40.9L 8 37.9L 40 37.9L 40 40.9L 8 40.9ZM 8 25.1L 8 22.1L 40 22.1L 40 25.1L 8 25.1ZM 8 17.1L 8 14.1L 40 14.1L 40 17.1L 8 17.1ZM 8 9.1L 8 6.1L 40 6.1L 40 9.1L 8 9.1Z"></path></svg>');}



/*INPUT: TYPES============================================================================*/

input[type="color"] {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(84, 84, 84)" d="M6 42v-8.4l18.85-18.85-3.6-3.6L23.3 9.1l4.6 4.6 8.3-8.3 6.4 6.4-8.3 8.3 4.6 4.6-2.05 2.05-3.6-3.6L14.4 42Zm3-3h4.35L31.1 21.25l-4.35-4.35L9 34.65Zm23.15-21 6.2-6.2-2.15-2.15-6.2 6.2Zm0 0L30 15.85 32.15 18Z"></path></svg>');
  background-position: top 50% right 10px;
  background-repeat: no-repeat;
  background-size: 30px;
  cursor: pointer;
  padding: 3px 60px 3px 3px;
  padding: 0 60px 0 0;
}

input[type="color"]::-moz-color-swatch {
  border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(84, 84, 84)" d="M6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"></path></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  height: 30px;
  width: 60px;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

input[type="file"] {
  background-color: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(84, 84, 84)" d="m24 32.35-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15ZM8 40V29.85h3V37h26v-7.15h3V40Z"></path></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  border: dashed 2px var(--color_black);
  cursor: pointer;
  height: 280px;
  text-indent: -999em;
}

input[type="file"]::file-selector-button {
  border: 1px solid var(--color_battleship);
  border-radius: 2px;
  cursor: pointer;
  margin: 0 10px 0 0;
  outline: none;
  padding: 7px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(84, 84, 84)" d="m31.35 33.65 2.25-2.25-7.95-8V13.35h-3V24.6ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24t1.575-7.75q1.575-3.65 4.3-6.375 2.725-2.725 6.375-4.3Q19.9 4 24 4t7.75 1.575q3.65 1.575 6.375 4.3 2.725 2.725 4.3 6.375Q44 19.9 44 24t-1.575 7.75q-1.575 3.65-4.3 6.375-2.725 2.725-6.375 4.3Q28.1 44 24 44Zm0-20Zm0 17q7 0 12-5t5-12q0-7-5-12T24 7q-7 0-12 5T7 24q0 7 5 12t12 5Z"></path></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  height: 30px;
  width: 60px;
}

input[type="range"] {
  cursor: pointer;
  padding: 15px 0;
}

input[type="time"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

select, input.datalist {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(84, 84, 84)" d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z"></path></svg>');
  background-position: top 50% right 10px;
  background-repeat: no-repeat;
  background-size: 30px;
}

input.datalist::-webkit-calendar-picker-indicator {
  display:none !important;
}



/*LINKS============================================================================*/

.link {
  /*color: rgb(187, 76, 215) !important;*/
  color: inherit;
  cursor: pointer;
  /*font-weight: bold;*/
  /*text-decoration: inherit;*/
}

.link:hover {
  text-decoration: underline;
}



/*LIST============================================================================*/

ol {
  line-height: 1.6em;
  list-style-position: outside;
  margin: 20px 0 0;
  padding: 0 0 0 20px;
}

ol li {
  padding: 4px 0 4px 20px;
}

ul {
  line-height: 1.6em;
  list-style-position: outside;
  margin: 20px 0 0;
  list-style-type: none;
}

ul li {
  padding: 4px 0 4px 26px;
}


ol span, ul span {
  color: rgb(187, 76, 215) !important;
  font-weight: bold !important;
}

ul {
  padding-left: 16px;
}

ul li::before {
  content: "\2B24";
  color: rgb(187, 76, 215);
  font-weight: bold;
  display: inline-block;
  width: 40px;
  float: left; margin-left: -40px;
}

ul.steps {
  padding: 0;
}

ul.steps li {
  padding: 4px 0 4px 0;
}

ul.steps li::before {
  content: "";
}

li.plain::before {
  content: "";
}




/*MARGIN============================================================================*/

.margin {
  margin: 0 auto;
  max-width: 1000px;
  padding: 100px 20px;
}

.margin.nopad {padding: 0;}
.margin.grey {background-color: var(--color_smoke); padding: 0;}
.margin.narrow  {max-width: 375px;}
.margin.article {max-width: 750px;}
.margin.normal  {max-width: 1000px;}
.margin.wide    {max-width: 1500px;}
.margin.full    {max-width: 100%;}



/*MENU============================================================================*/

.menu {
  background: -webkit-linear-gradient(45deg, rgb(73, 83, 215), rgb(187, 76, 215));
  height: calc(100vh - 0px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 80px;
  position: fixed;
  right: 0;
  text-align: right;
  top: 0px;
  white-space: nowrap;
  z-index: 200;
  user-select: none;
  
  width: 0%;
  -webkit-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
  
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.menu::-webkit-scrollbar {
    display: none; /* Hide scrollbar for IE, Edge and Firefox */
}

.menu.hero {
  background: none;
}

.menu.active {
  width: 550px;
}

@media screen and (max-width: 750px), print {
  .menu.active {
    width: 100%;
  }
}

.menu_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_list li {
  color: white;
  font-size: 24px;
  font-weight: bold;
  line-height: 1em;
  min-height: 24px;
  margin: 20px;
}

.menu_list li a {
  color: white;
  text-decoration: none;
}

.menu_list li:before {
  content: none;
}

.menu_divider {
  background-color: white;
  height: 5px;
  margin: 5px 20px 5px 40%;
  opacity: 0.1;
  width: calc(60% - 20px);
}

.menu_space {
  height: 200px;
  width: 100%;
}

.menu_button {
  background-color: white;
  /*border: 2px solid rgb(228, 228, 228);*/
  border: none;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  color: rgb(144, 144, 144);
  cursor: pointer;
  font-size: 0.9em;
  height: 56px;
  outline: none;
  padding: 5px;
  position: fixed;
  top: 20px;
  right: 20px;
  text-align: center;
  user-select: none;
  width: 56px;
  z-index: 201;
}

@media (hover: hover) and (pointer: fine) {
  .menu_button:hover {
    background-color: rgb(228, 228, 228);
  }
}

.menu_hamburger {
  background: -webkit-linear-gradient(0deg, rgb(73, 83, 215), rgb(187, 76, 215));
  content: '';
  display: block;
  height: 5px;
  width: 30px;
  
  -webkit-transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
}

.menu_hamburger::before {
  background: -webkit-linear-gradient(0deg, rgb(187, 76, 215), rgb(73, 169, 217));
  content: '';
  display: block;
  height: 5px;
  width: 30px;
  
  -webkit-transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
}

.menu_hamburger {
  transform: translate(8px, 15px) rotate(0deg);
}

.menu_hamburger::before {
  transform: translate(0px, 12px) rotate(0deg);
}

.menu_button.active .menu_hamburger {
  transform: translate(8px, 21px) rotate(45deg);
}

.menu_button.active .menu_hamburger::before {
  transform: translate(0px, 0px) rotate(-90deg);
}

.menu_hamburger.hero, .menu_hamburger.hero::before {
  background: white;
}



/*MODAL============================================================================*/

.modal {
  background: rgba(0, 0, 0, 0.9);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 300;
}

.modal_title {
  color: white;
  font-size: 24px;
  font-weight: bold;
  position: fixed;
  transform: translate(-50%, -50%);
  top: calc(50% - 200px);
  left: 50%;
  padding: 20px;
  width: 400px;
  z-index: 301;
  text-align: center;
}

.modal_image {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  /*width: 80%;
  height: auto;*/
  object-fit: contain;
  width: 80vw;
  height: 80vh;
  z-index: 301;
}

.modal_textarea {
  background-color: white;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 20px;
  width: 400px;
  height: 200px;
  max-width: 60vw;
  max-height: 60vh;
  z-index: 301;
  resize: none;
  overflow-y: scroll;
  
}

.modal_action {
  background-color: rgb(187, 76, 215);
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  border-radius: 28px;
  cursor: pointer;
  height: 56px;
  width: 56px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 302;
}

@media (hover: hover) and (pointer: fine) {
  .modal_action:hover {
    background-color: rgb(181, 60, 211);
  }
}

.modal_action.position2 {
  top: 96px;
  right: 20px;
}

.modal_action.position3 {
  top: 172px;
  right: 20px;
}

.modal_action.close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IndoaXRlIiBoZWlnaHQ9IjQ4IiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik0xMi40NSAzNy42NSAxMC4zNSAzNS41NSAyMS45IDI0IDEwLjM1IDEyLjQ1IDEyLjQ1IDEwLjM1IDI0IDIxLjkgMzUuNTUgMTAuMzUgMzcuNjUgMTIuNDUgMjYuMSAyNCAzNy42NSAzNS41NSAzNS41NSAzNy42NSAyNCAyNi4xWiI+PC9wYXRoPjwvc3ZnPg==");
}

.modal_action.tick {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xOC45IDM1LjcgNy43IDI0LjUgOS44NSAyMi4zNSAxOC45IDMxLjQgMzguMSAxMi4yIDQwLjI1IDE0LjM1WiI+PC9wYXRoPjwvc3ZnPg==");
}

.modal_action.load {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0yMi41IDMyLjM1VjEzLjhMMTYuNSAxOS44TDE0LjM1IDE3LjY1TDI0IDhMMzMuNjUgMTcuNjVMMzEuNSAxOS44TDI1LjUgMTMuOFYzMi4zNVpNMTEgNDBROS44IDQwIDguOSAzOS4xUTggMzguMiA4IDM3VjI5Ljg1SDExVjM3UTExIDM3IDExIDM3UTExIDM3IDExIDM3SDM3UTM3IDM3IDM3IDM3UTM3IDM3IDM3IDM3VjI5Ljg1SDQwVjM3UTQwIDM4LjIgMzkuMSAzOS4xUTM4LjIgNDAgMzcgNDBaIj48L3BhdGg+PC9zdmc+");
}

.modal_action.save {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik00MiAxMy44NVYzOVE0MiA0MC4yIDQxLjEgNDEuMVE0MC4yIDQyIDM5IDQySDlRNy44IDQyIDYuOSA0MS4xUTYgNDAuMiA2IDM5VjlRNiA3LjggNi45IDYuOVE3LjggNiA5IDZIMzQuMTVaTTM5IDE1LjIgMzIuOCA5SDlROSA5IDkgOVE5IDkgOSA5VjM5UTkgMzkgOSAzOVE5IDM5IDkgMzlIMzlRMzkgMzkgMzkgMzlRMzkgMzkgMzkgMzlaTTI0IDM1Ljc1UTI2LjE1IDM1Ljc1IDI3LjY3NSAzNC4yMjVRMjkuMiAzMi43IDI5LjIgMzAuNTVRMjkuMiAyOC40IDI3LjY3NSAyNi44NzVRMjYuMTUgMjUuMzUgMjQgMjUuMzVRMjEuODUgMjUuMzUgMjAuMzI1IDI2Ljg3NVExOC44IDI4LjQgMTguOCAzMC41NVExOC44IDMyLjcgMjAuMzI1IDM0LjIyNVEyMS44NSAzNS43NSAyNCAzNS43NVpNMTEuNjUgMTguOEgyOS41NVYxMS42NUgxMS42NVpNOSAxNS4yVjM5UTkgMzkgOSAzOVE5IDM5IDkgMzlROSAzOSA5IDM5UTkgMzkgOSAzOVY5UTkgOSA5IDlROSA5IDkgOVoiPjwvcGF0aD48L3N2Zz4=");
}

.modal_action.io {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zMC4zNSA0My45NSAyMC43IDM0LjI1IDIyLjggMzIuMiAyOC44IDM4LjJWMjIuNEgzMS44VjM4LjI1TDM3LjkgMzIuMkw0MCAzNC4zWk0xNi4xIDI1LjVWOS43TDEwLjEgMTUuN0w4IDEzLjZMMTcuNjUgMy45NUwyNy4zIDEzLjZMMjUuMiAxNS43TDE5LjEgOS42NVYyNS41WiI+PC9wYXRoPjwvc3ZnPg==");
}

.modal_action.reset {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0yNCA0MFExNy4zNSA0MCAxMi42NzUgMzUuMzI1UTggMzAuNjUgOCAyNFE4IDE3LjM1IDEyLjY3NSAxMi42NzVRMTcuMzUgOCAyNCA4UTI4LjI1IDggMzEuNDUgOS43MjVRMzQuNjUgMTEuNDUgMzcgMTQuNDVWOEg0MFYyMC43SDI3LjNWMTcuN0gzNS43UTMzLjggMTQuNyAzMC44NSAxMi44NVEyNy45IDExIDI0IDExUTE4LjU1IDExIDE0Ljc3NSAxNC43NzVRMTEgMTguNTUgMTEgMjRRMTEgMjkuNDUgMTQuNzc1IDMzLjIyNVExOC41NSAzNyAyNCAzN1EyOC4xNSAzNyAzMS42IDM0LjYyNVEzNS4wNSAzMi4yNSAzNi40IDI4LjM1SDM5LjVRMzguMDUgMzMuNiAzMy43NSAzNi44UTI5LjQ1IDQwIDI0IDQwWiIvPjwvc3ZnPg==");
}



/*NAVIGATION H3============================================================================*/

.navigation_card {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: fixed;
  top: 226px;
  left: 50px;
  width: 300px;
  height: 1000px;
  user-select: none;
}

/*.navigation_entry {
  color: rgb(184, 184, 184);
  cursor: pointer;
  display: block;
  font-size: 12px;
  padding: 10px 0px;
  width: 100%;
}

.navigation_entry.active {
  color: black;
  font-weight: bold;
}

.navigation_entry:hover {
  color: rgb(187, 76, 215);
}*/

.navigation_entry {
  background-color: none;
  border-left: 5px solid rgb(228, 228, 228);
  color: rgb(184, 184, 184);
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding: 10px 10px;
  width: 100%;
}

.navigation_entry.active {
  background-color: rgb(242, 242, 242);
  border-left: 5px solid rgb(187, 76, 215);
  color: black;
  /*font-weight: bold;*/
}

.navigation_entry:hover {
  color: rgb(187, 76, 215);
}



/*NAVIGATION============================================================================*/

section nav {
  padding: 20px 0px 0px;
}

.nav_scroll {
  display: inline-block;
  background-color: rgb(242, 242, 242); /*rgba(0, 0, 0, 0.05);*/
  border: 1px solid rgb(228, 228, 228);
  border-radius: 16px;
  box-shadow: none;
  box-sizing: border-box;
  color: rgb(122, 122, 122);
  cursor: pointer;
  font-size: 14px;
  height: 32px;
  line-height: 30px;
  margin: 6px 6px 6px 0;
  outline: none;
  padding: 0 12px;
  text-align: center;
  user-select: none;
  vertical-align: top;
}

@media (hover: hover) and (pointer: fine) {
  .nav_scroll:hover {
    background-color: rgb(228, 228, 228); /*rgba(0, 0, 0, 0.09);*/
  }
}

.nav_scroll.reset {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="display:block;"><path fill="rgb(84, 84, 84)" stroke="none" stroke-width="0" fill-rule="nonzero" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 32px;
}

.nav_scroll.popular {
  background-color: rgb(247, 205, 69); /*rgba(0, 0, 0, 0.05);*/
  border: 1px solid rgb(247, 185, 0);
  color: rgb(161, 120, 0);
}

.nav_scroll.selected {
  background-color: rgb(228, 228, 228);
}

@media (hover: hover) and (pointer: fine) {
  .nav_scroll.popular:hover {
    background-color: rgb(247, 185, 0); /*rgba(0, 0, 0, 0.09);*/
  }
}

.nav_top {
  display: none;
  background-color: white;
  /*border: 2px solid rgb(228, 228, 228);*/
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  color: rgb(144, 144, 144);
  cursor: pointer;
  font-size: 18px;
  height: 56px;
  outline: none;
  padding: 5px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align: center;
  user-select: none;
  width: 56px;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .nav_top:hover {
    background-color: rgb(228, 228, 228);
  }
}

.nav_arrow {
  background: -webkit-linear-gradient(0deg, rgb(73, 83, 215), rgb(187, 76, 215));
  content: '';
  display: block;
  height: 5px;
  width: 22.5px;
}

.nav_arrow::before {
  background: -webkit-linear-gradient(0deg, rgb(187, 76, 215), rgb(73, 169, 217));
  content: '';
  display: block;
  height: 5px;
  width: 22.5px;
}

.nav_arrow {
  transform: translate(6.5px, -1.5px) rotate(-45deg);
}

.nav_arrow::before {
  transform: translate(9px, 9px) rotate(90deg);
}

.nav_select {
  display: inline-block;
  /*background-color: rgb(242, 242, 242); /*rgba(0, 0, 0, 0.05);*/
  border: 1px solid rgb(122, 122, 122);
  border-radius: 16px;
  box-shadow: none;
  box-sizing: border-box;
  color: rgb(122, 122, 122);
  cursor: pointer;
  display: inline;
  font-size: 14px;
  float: right;
  height: 32px;
  line-height: 30px;
  margin: 6px 6px 6px 0;
  outline: none;
  padding: 0 48px 0 12px;
  user-select: none;
  vertical-align: top;
}



/*SEARCH============================================================================*/

.search_container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 710px;
  padding: 20px 0 0;
  width: 100%;
}

.search_box {
  background: white;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 3px 0 0 3px;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  padding: 0 11px;
  width: calc(100% - 100px);
}

.search_button {
  background-color: rgb(232, 232, 232);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 0 3px 3px 0;
  box-sizing: border-box;
  cursor: pointer;
  height: 50px;
  user-select: none;
  width: 50px;
}

.search_button.searched {
  background-color: rgb(187, 76, 215);
}

@media (hover: hover) and (pointer: fine) {
  .search_button:hover {
    background-color: rgb(208, 208, 208);
  }
  .search_button.searched:hover {
    background-color: rgb(187, 76, 215);
  }
}

.search_button.search {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="display:block;"><path fill="rgb(84, 84, 84)" stroke="none" stroke-width="0" fill-rule="nonzero" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>');
}

.search_button.reset {
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="display:block;"><path fill="rgb(84, 84, 84)" stroke="none" stroke-width="0" fill-rule="nonzero" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>');
  border: 1px solid white;
  border-radius: 3px;
}

.search_hint {
  color: rgb(187, 76, 215);
  font-size: 15px;
  padding: 0;
  margin: 0;
}

.search_hint span {
  cursor: pointer;
}



/*WARNINGS============================================================================*/

.warning {
  display: none;
  background-color: rgb(242, 242, 242);
  box-sizing: border-box;
  color: rgb(184, 184, 184);
  font-weight: normal;
  line-height: 1.2em;
  padding: 20px;
  margin: 20px 0px;
  width: 100%;
}

.warning.active {display: block;}

.warning.javascript:before {content: "Warning: JavaScript is disabled. Please enable JavaScript to access the full content of this page.";}
.warning.parameter:before {content: "Warning: Parameter is incorrect. Please return to the previous page.";}
.warning.template:before {content: "Warning: Template does not exist. Please return to the previous page.";}



/*TEXT============================================================================*/

cite {
  cursor: pointer;
  font-size: smaller;
  font-style: normal;
  /*font-weight: bold;*/
  line-height: 0;
  vertical-align: super;
}

code {
  background-color: rgb(242, 242, 242);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: monospace;
  margin: -2px 0;
  padding: 2px 6px;
}

kbd {
  background-color: rgb(242, 242, 242);
  border: 1px solid rgb(228, 228, 228);
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: monospace;
  margin: -2px 0;
  padding: 2px 6px;
}

mark {
  background-color: var(--color_highlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: white;
  font-weight: bold;
  margin: -3px 0;
  padding: 3px 6px;
}

sub {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: 0%;
}

sup {
  font-size: 0.5em;
  line-height: 0;
}



/*TOOLS============================================================================*/

.tool_group {
  margin: 30px 0 0;
  width: 100%;
}

.tool_label {
  display: none;
  display: inline-block;
  color: black;
  font-weight: bold;
  margin: 0 0 0;
  width: 100%;
}

.tool_label.active {
  display: inline-block;
}

.tool_textarea {
  border: 1px solid rgb(118, 118, 118);
  box-sizing: border-box;
  font-family: monospace;
  font-size: 14px;
  display: block;
  overflow-y: scroll;
  padding: 10px;
  resize: none;
  width: 100%;
}

.tool_textarea.code {
  overflow: auto;
  white-space: pre;
}

.tool_textarea.scroll {
  overflow: scroll;
  white-space: nowrap;
}

.tool_textarea:focus {
  outline: none;
}

.tool_button_textarea {
  cursor: pointer;
  float: right;
  width: 30px;
  padding: 0px 0px 10px 10px;
  opacity: 50%;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .tool_button_textarea:hover {
    opacity: 100%;
  }
}

.tool_action {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  cursor: pointer;
  float: right;
  height: 30px;
  margin: 5px;
  opacity: 50%;
  padding: 5px;
  position: relative;
  width: 30px;
}

.tool_action.left {float: left;}
.tool_action.right {float: right;}

.tool_action:hover {
  opacity: 100%;
}

.tool_action_divider {
  background-color: rgb(188, 188, 188);
  float: right;
  height: 30px;
  margin: 5px 10px;
  position: relative;
  width: 1px;
}

.tool_action_divider.left {float: left;}
.tool_action_divider.right {float: right;}

.tool_button {
  background-color: white;
  border: 1px solid var(--color_wolf);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-size: inherit;
  font-weight: normal;
  /*height: 50px;*/
  line-height: 20px;
  margin: 20px 20px 0 0;
  outline: none;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none !important;
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
}

.tool_button:hover {
  background-color: var(--color_smoke);
  border: 1px solid var(--color_wolf);
  font-weight: normal;
}

.tool_button.icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
  padding: 0;
  height: 52px;
  width: 52px;
  vertical-align: middle;
}

.tool_button.center {
  display: block;
  margin: 20px auto 0;
}

.tool_button.action {
  display: block;
  margin: 50px auto;
  padding: 22px 48px;
}

.tool_button.primary {
  background-color: var(--color_primary);
  border: 1px solid var(--color_primary);
  color: white;
}

.tool_button.secondary {
  background-color: var(--color_secondary);
  border: 1px solid var(--color_secondary);
  color: white;
}

.tool_button.tertiary {
  background-color: var(--color_tertiary);
  border: 1px solid var(--color_tertiary);
  color: white;
}

.tool_button.download {
  background-color: var(--color_secondary);
  border: 1px solid var(--color_secondary);
  color: white;
  display: block;
  margin: 50px auto;
  padding: 22px 48px;
}

.tool_button.black {
  background-color: var(--color_black);
  border: 1px solid var(--color_black);
  color: white;
}

.tool_button.primary:hover {
  background-color: var(--color_primary_hover);
  border: 1px solid var(--color_primary_hover);
  font-weight: normal;
}

.tool_button.secondary:hover {
  background-color: var(--color_secondary_hover);
  border: 1px solid var(--color_secondary_hover);
  font-weight: normal;
}

.tool_button.tertiary:hover {
  background-color: var(--color_tertiary_hover);
  border: 1px solid var(--color_tertiary_hover);
  font-weight: normal;
}

.tool_button.download:hover {
  background-color: var(--color_secondary_hover);
  border: 1px solid var(--color_secondary_hover);
  font-weight: normal;
}

.tool_button.black:hover {
  background-color: var(--color_jet);
  border: 1px solid var(--color_jet);
  font-weight: normal;
}

.tool_button.active {
  display: inline-block;
}

.tool_button.disabled {
  opacity: 0.2;
}

.tool_button.long {
  min-width: 120px;
}

.tool_button.short {
  min-width: 60px;
}

.tool_button.purple {
  background-color: rgb(187, 76, 215);
}

.tool_button.purple:hover {
  background-color: rgb(165, 44, 195);
}

.tool_button.blue {
  background-color: rgb(73, 169, 217);
}

.tool_button.blue:hover {
  background-color: rgb(42, 146, 198);
}

.tool_button.green {
  background-color: rgb(122, 217, 74);
}

.tool_button.green:hover {
  background-color: rgb(94,198,42);
}

.tool_thumbnail {
  height: auto;
  width: 100%;
  margin: 0 0 15px 0;
}

.tool_thumbnail_fixed {
  height: 150px;
  width: auto;
  margin: 0 15px 15px 0;
}

.tool_input {
  display: none;
  border: 1px solid var(--color_wolf);
  /*border-radius: 3px;*/
  box-shadow: none;
  box-sizing: border-box;
  background-color: white;
  color: inherit;
  text-align: left;
  margin: 10px 0 0 0;
  outline: none;
  padding: 0 0 0 20px;
  line-height: 46px;
  height: 46px;
  width: 100%;
  user-select: none;
  /*transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;*/
}

.tool_input[type="color"], .tool_input[type="date"], .tool_input[type="file"], .tool_input[type="time"], select.tool_input {
  padding-right: 52px;
}

.tool_input.noborder {
  border: none;
}

.tool_input.active {
  display: inline-block;
}

.tool_input.grey {
  background-color: rgb(242, 242, 242);
}

.tool_input.highlight {
  background-color: rgb(187 76 215 / 15%);
}

.tool_input.monospace {
  font-family: monospace;
}

.tool_input:focus {
  border-color: rgb(187, 76, 215) !Important;
  box-shadow: 0 0 0 3px rgb(187 76 215 / 25%);
  -webkit-box-shadow: 0 0 0 3px rgb(187 76 215 / 25%);
  
  /* Orange */
  /*border-color: rgb(255, 165, 0) !Important;
  box-shadow: 0 0 0 3px rgb(255 165 0 / 25%);
  -webkit-box-shadow: 0 0 0 3px rgb(255 165 0 / 25%);*/
  
  /*border-color: rgb(249, 108, 14) !Important;
  box-shadow: 0 0 0 0.2rem rgb(249 108 14 / 25%);
  -webkit-box-shadow: 0 0 0 0.2rem rgb(249 108 14 / 25%);*/
}

.tool_input[type="checkbox"]:focus, .tool_input[type="range"]:focus {
  border-color: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.tool_input_comment {
  display: none;
  font-size: 14px;
  color: rgb(187, 76, 215);
}

.tool_input_comment.active {
  display: inline-block;
}

.tool_input_picker {
  display: none;
  box-sizing: border-box;
  height: 46px;
  width: 100%;
}

.tool_input_picker.active {
  display: inline-block;
}

.tool_input.file {
  background-color: rgb(187 76 215 / 25%);
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px 60px;
  border: dashed 2px rgb(187, 76, 215);
  cursor: pointer;
  height: 280px;
  text-indent: -999em;
}

.tool_input.file {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="rgb(187, 76, 215)" stroke="none" stroke-width="0" fill-rule="nonzero" d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z"></path></svg>');
}

.tool_prompt {
  color: rgb(187, 76, 215);
  font-style: italic;
  font-weight: bold;
}

.tool_selection {
  display: none;
  cursor: pointer;
  opacity: 0.3;
  width: 33%;
}

.tool_selection.active {
  display: inline-block;
}

.tool_selection.selected {
  opacity: 1;
}


.tool_selection:hover {
  outline: solid 1px grey;
}

/*.icon_thumbnail {
  cursor: pointer;
  margin: 0 15px 15px 0;
}*/

.tool_tabs {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;
  position: relative;
  width: 100%;
}

.tool_tab {
  display: none;
  /*border: 40px solid rgb(187, 76, 215);*/
  box-sizing: border-box;
  width: 100%
}

.tool_tab.selected {
  display: block;
}

.tool_tab_button {
  background-color: rgb(242, 242, 242);
  /*border-radius: 3px 3px 0 0;*/
  box-sizing: border-box;
  display: inline-block;
  /*color: white;*/
  cursor: pointer;
  height: 44px;
  text-align: center;
  outline: none;
  margin: 0 5px 0 0;
  padding: 12px 24px;
  user-select: none;
  width: auto;
}

.tool_tab_button:hover {
  background-color: rgb(228, 228, 228);
}

.tool_tab_button.selected {
  /*background-color: rgb(187, 76, 215);*/
  border-bottom: 3px solid rgb(187, 76, 215);
}

.tool_hint {
  color: rgb(187, 76, 215);
  font-size: 15px;
  padding: 0;
}

.tool_hint span {
  cursor: pointer;
}

.tool_slide {
  display: none;
}

.tool_slide.selected {
  display: block;
}

.tool_output_image {
  display: block;
  background-image: linear-gradient(45deg, #e2e2e2 25%, transparent 25%), linear-gradient(-45deg, #e2e2e2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e2e2 75%), linear-gradient(-45deg, transparent 75%, #e2e2e2 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  margin: 10px 0 0 0;
  max-height: 100vh;
  max-width: 100%;
}

.tool_image {
  background-image: linear-gradient(45deg, #e2e2e2 25%, transparent 25%), linear-gradient(-45deg, #e2e2e2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e2e2 75%), linear-gradient(-45deg, transparent 75%, #e2e2e2 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  margin: 20px 20px 0 0;
  max-width: 100%;
  outline: 1px solid lightgrey;
}

.tool_text {
  min-height: 46px;
  width: 100%;
  margin: 10px 0 0;
}


/*INPUT: SWITCH============================================================================*/

label.switch {
  margin: 0 0 5px;
  width: calc(100% - 40px - 20px)
}

.tool_switch {
  background: var(--color_battleship);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin: 13px 10px 13px 0;
  position: relative;
  width: 40px;
}
.tool_group .tool_switch {
  margin: 0 16px 0 0;
}

.tool_switch.checked {
  background: rgb(102, 187, 106);
}

.tool_switch_knob {
  background: white;
  border-radius: 9px;
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transform: translateX(0);
  transition: transform .3s;
  width: 18px;
}

.tool_switch.checked .tool_switch_knob {
  transform: translateX(calc(100% - 2px));
}



/*TOOL - PILL============================================================================*/

.tool_pill {
  background-color: rgb(242, 242, 242);
  border-radius: 20px;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  height: 32px;
  line-height: 30px;
  margin: 0 5px 10px 0;
  outline: none;
  padding: 0 12px; /* 10px 25px; */
  position: relative;
  width: auto;
  vertical-align: middle;
}

.tool_pill.icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  content: "";
  padding: 0;
  width: 32px;
}

.tool_pill.icon.text {
  background-repeat: no-repeat;
  background-position: 12px 50%;
  border-radius: 20px;
  box-shadow: none;
  color: black;
  font-weight: normal;
  padding: 0 15px;
  padding-left: 46px;
  width: auto;
}

.tool_pill.icon:hover {
  opacity: 1;
  background-color: rgb(228, 228, 228);
}

.tool_pill.black {
  background-color: var(--color_black);
  border: 1px solid var(--color_black);
  color: white;
}

.tool_pill.black:hover {
  background-color: var(--color_jet);
  border: 1px solid var(--color_jet);
  font-weight: normal;
}


/*PRODUCT============================================================================*/

/*.product_container {
  display: grid;
  grid-auto-flow: dense;
  row-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 500px) {
  .product_container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.product_card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding-bottom: 0;
}

.product_media {
  height: 100%;
  width: 100%;
}

.product_images img {
  height: 100%;
  width: 100%;
}

.product_description {
  margin-top: 0.4rem;
  pointer-events: none;
  position: relative;
  z-index: 3;
  padding-left: 40px;
}*



/*TOAST============================================================================*/
.toast {
  background-color: black;
  background-color: var(--color_primary);
  border-radius: 50px;
  color: white;
  bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  left: 50%;
  line-height: 1.5em;
  max-width: calc(100% - 40px);
  opacity: 1;
  padding: 20px 30px;
  position: fixed;
  text-align: center;
  transform: translate(-50%, calc(100% + 20px));
  transition: all 250ms cubic-bezier(0.4, 0, 0.4, 1);
  user-select: none;
  z-index: 999999999;
}

.toast.butter {
  transform: translate(-50%, 0%);
}

.toast.icon {
  background-repeat: no-repeat;
  background-position: 20px 50%;
  background-size: 25px;
  padding-left: 60px;
}

.toast.success {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="white"><path fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.toast.cancel {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="white"><path fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>');
}

.toast.pause {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="white"><path fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
}


/*RESPONSIVE============================================================================*/

@media screen and (min-width: 468px), print {

  .tool_thumbnail {
    height: auto;
    margin: 0 15px 15px 0;
    width: calc((100% - 15px) / 2);
  }

  .tool_thumbnail:nth-of-type(2n+2) {
    margin: 0 0 15px 0;
  }

}

@media screen and (min-width: 768px), print {
  
  .h0 {
    font-size: 60px;
    word-spacing: inherit;
  }
  
  h1 {
    font-size: 48px;
  }
  
  h2 {
    font-size: 40px;
  }
  
  h3 {
    font-size: 26px;
    margin: 100px 0 0;
  }
  
  h4 {
    font-size: 22px;
  }
  
  h5 {
    font-size: 22px;
  }
  
  h6 {
    font-size: 22px;
  }
  
  footer p {
    padding: 15px 0px 0px;
    width: 70%;
  }
  
  .card_thumbnail.twenty {
    padding: 20% 0 0 0;
    width: 20%;
  }
  
  .card_thumbnail.fifty {
    padding: calc(720 / 1280 * 50%) 0 0 0;
    width: 50%;
  }
  
  .card_info.fifty {
    padding: 0 0 0 30px;
    width: 50%;
  }
  
  .card_info.eighty {
    padding: 0 30px 0 0;
    width: 80%;
  }
  
  .tool_thumbnail {
    margin: 0 15px 15px 0;
    height: auto;
    width: calc((100% - 30px) / 3);
  }
  
  .tool_thumbnail:nth-of-type(2n+2) {
    margin: 0 15px 15px 0;
  }
  
  .tool_thumbnail:nth-of-type(3n+3) {
    margin: 0 0 15px 0;
  }
  
  .search_box {
    width: calc(100% - 140px);
  }
  
  .search_button {
    width: 70px;
  }
  
}

/*@media screen and (min-width: 1468px), print {
  
  .h0 {
    font-size: 70px;
    word-spacing: inherit;
  }
}*/



/*MOBILE============================================================================*/

/*  DESIGN FOR DESKTOP FIRST */

@media screen and (max-width: 1518px) {
  
  .adsense_hover {
    display: none;
  }
  
  .navigation_card {
    display: none;
  }
  
}

@media screen and (max-width: 768px) {
  
  .container.fifty {
    width: 100%;
  }
  
  .container.fifty.left, .container.fifty.right {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
  }
  
  .toolkit_container {
    width: 50%;
    height: 300px;
    padding: 60px 40px 0;
  }
  
  .adsense_mobile {
    display: block;
  }
  
  .hero {
    height: 50vh;
  }
  
  .hero_image {
    min-height: 50vh;
  }
  
  
  .header_text {
    font-size: 30px;
  }
  
}

@media screen and (max-width: 448px) {
  
  .header_text {
    font-size: 20px;
    line-height: 28px;
    word-spacing: 100vw;
  }

}



/*TOOLSDRAWER============================================================================*/

body.appdrawer .margin.article {
  max-width: 750px;
  padding-top: 10px;
}

.appdrawer hr {
  display: none;
}

.appdrawer section:nth-child(1) {
  display: none;
}

.appdrawer section:nth-child(2) {
  display: none;
}

.appdrawer section:nth-child(3) {
  display: none;
}

.appdrawer section:nth-child(4) {
  padding: 0;
}

body.appdrawer .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); /*minmax(320px, 1fr) + 710px max-width on card*/
  grid-gap: 20px;
}

body.appdrawer .grid_card.elevate {
  box-shadow: none;
}

body.appdrawer .grid_card.elevate .grid_card_thumbnail {
  aspect-ratio: 1;
  border-radius: 20%;
  height: auto;
  margin: 0;
  width: 100%;
}

body.appdrawer .grid_card.elevate .grid_card_data {
  padding: 10px 0;
}

body.appdrawer .grid_card.elevate .grid_card_data .category {
  display: none;
}

body.appdrawer .grid_card.elevate .grid_card_data h4 {
  font-size: 12px;
  text-align: center;
  margin: 0;
}

body.appdrawer .grid_card.elevate .grid_card_data p {
  display: none;
}





/*PRINT============================================================================*/

@media print {
  
  header {
    display: none;
  }
  
  main {
    padding: 0;
  }
  
  footer {
    display: none;
  }
  
  nav {
    display: none;
  }
  
  .menu {
    display: none;
  }
  
  .nav_top {
    display: none !important;
  }
  
  .hero, .h0 {
    display: none;
  }
  
  .adsense_header, .adsense_footer, .adsense_hover {
    display: none;
  }
  
}