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

html {
  height: 100%;
  font-size: 16px;
}

body {
  font-size: 1.3rem;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: #444;
  margin:0px auto 0px auto;
}

#main {
  width: 98%;
  max-width: 1240px;
  margin-top: 120px;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}

#footer {
  background:#222;
  color:#f4f4f4;
  background-image: url(https://dibsonstuff.com/shell-square-transparent.png);
  background-position: center;
  background-repeat: no-repeat;
  /* border-top:4px solid #666; */
  border-bottom:5px solid #ff6d33;
  padding-top:40px;
  padding-bottom:10px;
  box-shadow: 0px -1px 6px #888;
}

#footer .item {
  text-align:left;
  margin:10px auto 0 40px;
  max-width:400px;
}

#footer .item.right {
  float:right;
  margin:10px 40px 20px 0px;
  clear:right;
}

#footer h2 {
  font-size:1.4rem;
  font-weight:normal;
  color:#999;
  text-align:left;
  margin-top:0px;
  margin-bottom:5px !important;
  padding-bottom:5px !important;
}

#footer a {
  color: #ff6d33;
}
#footer a:hover {
  color: #fba989;
}



.menu {
  text-align:center;
  margin:20px 0px 0px 0px;
  position:absolute;
  top: 0px;
  width:100%;
}

.menu a {
  padding:6px 10px;
  text-decoration:none;
  font-weight: bold;
  border-radius:10px;
  font-size:18px !important; /* impact shop.dibsonstuff.com */
}

.menu a.active {
  background:#0dbd94;
  color: #fff;
}

.menu #theme-chooser {
  display:inline-block;
  height:23px;
  width:23px;
}

.logo {
  display:block;
  margin:0px auto 25px auto;
  border:4px solid #37d5f8;
  border-radius:40px;
  padding:20px;
  width:25.1%; /* fix 1px whitespace at top of logo bug */
  min-width:285px;
  max-width:285px;
  background: #37D5F8;
  background: linear-gradient(135deg,rgba(55, 213, 248, 1) 0%, rgb(220, 246, 252) 50%, rgba(55, 213, 248, 1) 100%);
}
.logo img {
  width:150%;
  position:relative;
  left:-24%;
  top:8px;
}

a.logo {
  outline: none !important;
}

h1 {
  text-align:center;
  margin:0em auto;
  font-size: 4.5rem;
  font-weight:bold;
  color: #17ccf4;
}

h2 {
  text-align:center;
  margin:0px auto 20px auto;
  font-size:1.6rem;
  font-weight:bold;
}

.crumbs {
  display:flex;
  flex-wrap: wrap;
  gap: 1rem;
  text-align:center;
  margin:20px auto;
  font-size:1.6rem;
  font-weight:bold;
}

.crumbs li {
  flex: 0 0 calc(33.333% - 1rem);
  display: flex;
  flex-direction: column;
  padding:20px;
  border-radius:10px;
  vertical-align: top;
  margin-top:0px;
  color: #0cbd93;
  font-weight:normal;
  font-size:1.4rem;
  background:#f0faf7;
}

a {
  color:#0bbd93;
}

a:hover {
  color:#ff6d33;
}


div.question {
  padding:0 3%;
  font-weight:bold;
  text-align:left;
  font-size: 130%;
  margin-top: 20px;
  width:100%;
}

div.answer {
  padding:1% 3%;
  text-align:left;
  font-size: 1.3rem;
  width:100%;
  line-height:1.8em;
}

.page-blog .question:first-child {
  text-align:center! important;
}
.page-blog .question {
  margin-top:60px !important;
  margin-bottom:20px;
  font-size:2.4rem !important;
}
.page-blog .answer {
  margin-bottom:30px;
  font-size:1.4rem !important;
}



/* pulsing sign-up button */
.bouncy:hover {
  display:inline-block;
  animation:float 1.5s ease-in-out infinite;
}
@keyframes float {
  0% { transform:none; }
  50% { background-color:#ff0097; }
}

#name {
  width:49%;
  float:left;
}

#email {
  width:49%;
  float:right;
}

input[type=text] {
  width: 100%;
  font-size:120%;
  padding:1%;
  margin:1.4em 0 0 0;
  font-family: 'Roboto', sans-serif;
  border:1px solid #ccc;
}

input[type=text]:focus, textarea:focus, .emojionearea.focused {
  border:1px solid #4482f3;
  outline:none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
}

input[type=submit], input[type=button] {
  color:#fff;
  font-weight:normal;
  font-size:120%;
  background-color:#4280de;
  border:0px;
  padding:12px 15px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
   -opera-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  text-shadow:none;
  outline:0;
  margin-top:1em;
}


.coolicon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 50px;
    z-index: 10;
    pointer-events: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.dibs-screenshot-container {
  position:relative;
  display:inline-block;
  width:calc(50% - 15px);
}

img.dibs-screenshot {
  border-radius: 6px;
  border:1px solid #ccc;
  width:100%;
}

.lilshadow {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

input[type=button]:hover, input[type=submit]:hover {
  cursor: pointer;
}

input[type=button]:active, input[type=submit]:active {
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
  background-color:#a8e655;
}

input[type=button]:disabled, input[type=submit]:disabled, .disabled {
  background-color: #999 !important;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
}

#messages {
  z-index: 300;
  position: fixed;
  top: 85px;
  font-size:140%;
  font-weight:bold;
  padding:20px;
  margin:auto;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  border-radius: 5px;
  /* keeps it centered */
  width:66%;
  left: 50%;
  margin-left: -33%;
}

.msg_bad {
  background-color: #D04955;
  color:#fff;
}

.msg_good {
  background-color: #4280de;
  color:#fff;
}

.msg_info {
  background-color: #4482f3;
  color:#fff;
}

#messages b {
  float:left;
  margin-top:10px;
  margin-bottom:10px;
}
#messages a {
  color: #93dff7;
}

#linkcontainer {
  display:none;
  margin:2%;
  padding:1%;
  color:#4280de;
  font-weight:normal;
  font-size:70%;
  -webkit-border-radius: 24px;
     -moz-border-radius: 24px;
          border-radius: 24px;
}
#linkcontainer b {
  font-weight:bold;
}

*[placeholder] {
    color: #666 !important;
}

pre {
  margin-top:3%;
  background-color:#f6f8fa; /* very pale blue */
  border: 1px solid #dde8f4;
  padding:3%;
  -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
          border-radius: 7px;
}

pre span {
  color:#ba5500;
}

/* any width that is 400px or less, eg my phone */
@media (max-width:400px) {
  .post {
    height:auto !important;
    overflow: visible !important;
    box-shadow:none !important;
    flex:100% !important;
    width:100% !important;
  }
  .post img.bluesky-screenshot {
    max-width: 100% !important;
  }
  .spectacular .question {
    margin-left:10px;
    margin-right:10px;
    width:90% !important;
  }
  #plans {
    display:block !important;
  }

  #line-break {
    display:block;
  }
  .members-header {
    width:95%;
  }
  .popup {
    width:212px !important;
  }
}
/* any width that is 900px or less */
@media (max-width:900px) {
  body {
    text-align:center;
  }

  .popup {
    width:300px !important;
  }
  #line-break {
    display:block;
  }
  .customer-quote {
    width:90% !important;
    min-width:auto !important;
  }

  #members img, .customer-quote img  {
    height:30px !important;
    margin: 0px 0px !important;
  }

  .add-to-slack-button, .add-to-discord-button {
    font-size:1.25rem !important;
  }

  .members-header {
    font-size:3rem !important;
  }

  #footer .item {
    text-align:left;
    margin:10px auto 0 20px;
    max-width:400px;
  }
  #footer .item.right {
    float:none !important;
    margin:10px 20px 30px 20px !important;
    clear:none !important;
    max-width:300px !important;
  }

  .post {
    height:auto !important;
    overflow: visible !important;
    box-shadow:none !important;
    width:100% !important;
    flex:100% !important;
  }
  .post img.bluesky-screenshot {
    max-width: 100% !important;
  }
  .logo {
    width: 60%;
    min-width:100px;
  }
  h1 {
    font-size: 220% !important;
  }
  .help h1 {
    font-size: 125% !important;
  }
  h2 {
    font-size:130%;
  }
  .menu a {
    padding:7px 5px !important;
  }
  .popup {
    width:312px;
  }
  #messages {
    font-size:100% !important;
    width: 80% !important;
    left: 10% !important;
    margin-left: auto !important;
    margin: auto !important;
  }
  pre {
    font-size: 77% !important;
    padding:5% 3% !important;
  }

  .dibs-screenshot-container {
    display:block;
    width:100% !important;
    margin-bottom:20px;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .buypro, .buyextra, .buyfree {
    width:30% !important;
    padding:7px !important;
    font-size:80% !important;
  }
  .doc h1 {
    font-size:120% !important;
  }
  .doc h2 {
    font-size:100% !important;
  }
  .doc h3 {
    font-size:100% !important;
  }

  .spectacular .question {
    margin-left:10px;
    margin-right:10px;
    width:90% !important;
  }
  #plans {
    display:block !important;
  }

  #owl-features div.owl {
    max-width:500px !important;
  }

  #owl-features div.owl img {
    width: 240px !important;
  }
  #owl-features div.owl h4 {
    font-size:1.8rem !important;
  }
  #owl-features div.owl span {
    font-size:1.4rem !important;
  }
  #owl-features div.owl h4 br {
    display:none;
  }

  .hidemewhensmall {
    display:none;
  }

  div > lite-youtube, .video {
    width: 100% !important;
    margin:auto;
  }

  #plans .features {
    max-width:330px !important;
    margin:auto !important;
  }

  #features-pro {
    margin-top:0px !important;
  }

  #topdesc {
    max-width:100% !important;
    padding: 20px 20px 0px 20px !important;
  }
  .youtube-thumb {
    max-width: 320px !important;
    padding:20px 0px 0px 0px !important;
  }

  .subscribe-form {
    max-width: 280px !important;
  }
  .subscribe-form input[type=text] {
    max-width: 70% !important;
  }

  .install-popup {
    padding-left:8px !important;
    padding-right:8px !important;
    width:93%;
  }

  .crumbs {
    flex-direction: column;
  }

  .crumbs li {
    flex: 0 0 100%;
    margin-bottom:10px;
  }
}

code {
  font-family:monospace;
  background-color: #ffe4cd;
  border:1px solid #ff6a00;
  padding: 5px 8px 3px 8px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  line-height:2.3em;
  box-shadow: 0px 3px 3px #cecdcc;
  white-space:nowrap;
}

/* strikethrough */
s {
  color: #f7d9c3;
}

.dibs {
  background-color: #fff6df;
  border:1px solid #ffcc66;
  margin: 10px 0px;
  padding: 1%;
  -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
          border-radius: 7px;
}

.paymentgateway {
  font-size:50%;
}

.spectacular {
  /* box-shadow: 0px 0px 8px #f97413; */
  margin-top:1% !important;
  margin-bottom:4% !important;
  padding: 1%;
  padding-top:2%;
  background: linear-gradient(36deg, rgb(211, 242, 235) 5%, rgb(234, 251, 231) 62%, rgb(213, 249, 240) 98%);
  border-radius: 14px;
}

table {
  text-align:left;
  border-collapse: collapse;
}
th {
  padding:0 5px;
}
td {
  padding:4px 5px 1px 5px;
  /* border-bottom:1px solid #ffcc66; */
}
td.tick {
  text-align:center;
}
td.tick img {
  width:26px;
}
.svg {
  width:23px;
  top:5px;
  position:relative;
}
.svg:hover {
  cursor:pointer;
}
.svgtiny {
  width:10px;
}
td.hourglass {
  font-size:110%;
  text-align:center;
  color: #0bbd93;
}
td.hourglass::before {
  content: "⏳"
}
td.cross {
  text-align:center;
}

td.help {
  position: relative; /* Required to position the popup correctly */
}

td.help:hover {
  cursor: pointer;
}

.help:hover .popup {
  display: block;
}

.small {
  font-size:65%;
  color: #000;
}

.buypro {
  border:1px solid #fff;
  color: #0bbd93;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0, 150, 93, 0.54);
  margin-right:0px !important;
}
.buyextra {
  border:1px solid #fff;
  color: #ff6d33;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.buyfree {
  border:1px solid #fff;
  color: #828181;
  background: #fff;
  box-shadow: 2px 2px 5px #ccc;
}
.buypro b {
  font-weight:bold;
  font-size:55%;
  color:#0bbd93;
  display:block;
  margin-top:5px;
}
.buyextra b {
  font-weight:bold;
  font-size:55%;
  color:#ff6d33;
  display:block;
  margin-top:5px;
}
.buyfree b {
  font-weight:bold;
  font-size:55%;
  color:#828181;
  display:block;
  margin-top:5px;
}

.buypro:hover {
  color: #0bbd93;
  border:1px solid #0bbd93;
}
.buyextra:hover {
  color: #ff6d33;
  border:1px solid #ff6d33;
}
.buyfree:hover {
  color: #666;
  /* border:1px solid #aaa; */
}



ul {
  padding-left: 35px;
  padding-right: 35px;
  list-style-position: outside; /* is better: affects li that have wrapping text */
  margin:auto;
}

ul li {
  margin-top:10px;
  padding-left:5px;
}

ol {
  list-style-position: outside; /* is better: affects li that have wrapping text */
  padding-left: 1em;
}

ol li {
  margin-bottom: 1rem;
  line-height: 1.7rem;
}

.prolabel {
  font-size:10px !important;
  padding:4px 9px;
  background-color:#0bbd93;
  color:#fff;
  font-weight:bold;
  border-radius:12px;
  position:relative;
  float: right;
  width:5em;
}

.extralabel {
  font-size:10px !important;
  padding:4px 9px;
  background-color: #f28b30;
  color:#fff;
  font-weight:bold;
  border-radius:12px;
  position:relative;
  float: right;
  width:5em;
}


.doc {
  text-align: left;
  margin-bottom:30px;
  line-height:2em;
}

.doc h1 {
  text-align: left;
  margin-bottom:10px;
  font-size:160%;
}

.doc h2 {
  text-align: left;
  font-size:130%;
  color: #f37000;
  font-weight:normal;
}

.doc li.pro h2, .question.pro {
  color: #0bbd93;
}

.doc h3 {
  text-align: left;
  font-size:120%;
  font-weight:normal;
  padding: 30px 20px;
  margin: 10px 0px 0px 0px;
  border-radius: 5px;
  border-top: 10px solid #ffa874;
  background-color: #fff9e6;
  background: rgb(255,249,230);
  background: linear-gradient(180deg, rgba(255,249,230,1) 65%, rgba(255,255,255,1) 100%);
}

.doc li.pro h3 {
  border-top: 10px solid #0bbd93;
}

.doc h3::before {
  content: "Extra: ";
  font-size:100%;
  color: #f37000;
}

.doc li.pro h3::before {
  content: "Pro: ";
  font-size:100%;
  color: #0bbd93;
}

h4 {
  margin:0px;
  padding:0px;
  margin-top:20px;
  font-size:1.3rem;
}

.doc img {
  max-width:80%;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin:10px 0px;
}

.doc ul {
  position: relative;
  list-style: none;
  padding-left:15px;
  font-size:1.3rem;
}

.doc li:hover {
  cursor: pointer;
}

.doc .down-arrow::before {
  content: "▼";
  position: absolute;
  left: -3px;
  color: #f48a2f;
  font-size:120%;
}

.doc li.pro.down-arrow::before {
  content: "▼";
  position: absolute;
  left: -3px;
  font-size:120%;
  color: #0bbd93;
}

.doc .right-arrow::before, .doc li::before {
  content: "▶ ";
  position: absolute;
  left: 0;
  color: #f48a2f;
  font-size:110%;
}

.doc li.pro.right-arrow::before, .doc li.pro::before {
  content: "▶ ";
  position: absolute;
  left: 0;
  color: #0bbd93;
  font-size:110%;
}

.doc li .info  {
  display:none;
}

.doc li span {
  padding: 0px 20px 30px 20px;
  display:block;
}

.doc li.pro code {
  border:1px solid #0bbd93;
  background-color: #effff7;
  color: #058567;
}

.ribbon {
  margin: 0;
  padding: 0;
  background: #0070e0;
  color:white;
  padding:2px 4px;
  position: absolute;
  top:3px;
  right:3px;
  border-radius:8px 8px 8px 8px;
  text-shadow: none !important;
  font-size:50%;
  line-height:1.2em !important;
}

/* center the youtube-lite video preview
 * https://github.com/paulirish/lite-youtube-embed/issues/121
 */
div > lite-youtube, .video {
  margin:auto;
  position: relative;
  width: 80%;
  padding-bottom:56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0px 1px 5px #888;
}

.popup {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background: linear-gradient(36deg, rgb(238, 236, 236) 5%, rgb(242, 242, 241) 62%, rgb(249, 247, 247) 98%);
  border: 4px solid #fff;
  border-radius:15px;
  padding: 30px;
  z-index: 10;
  width: 312px;
  top:50px;
  left:0px;
  font-size: 100%;
  text-align: left;
  box-shadow: 0px 1px 4px #666;
  cursor: auto;
  color: #565b5a;
}

.popup:hover {
}
.popup ul {
  padding-left:10px;
  padding-right:10px;
}
.popup ul li {
  padding-bottom:10px;
}

.compress {
  overflow: hidden;
  height: 5em;
}

.compress:hover {
  background-color: #fffcf5;
  background-color: #fdf1d2;
  cursor: pointer;
}

.install-button {
  box-shadow: 0px 1px 3px #333;
  display:inline-block;
  padding:16px 24px 14px 14px;
  color: #444;
  line-height: 1;
  text-decoration: none !important;
  border-radius: 6px;
  white-space: nowrap;
  font-size:1.4rem;
  background: #CCC;
  background: linear-gradient(0deg,rgb(214, 212, 212) 0%, rgb(221, 221, 221) 15%, rgb(238, 238, 238) 100%);
}

#plans .install-button {
  font-size:1rem;
  line-height: 1;
  padding:12px 20px 12px 15px;
  margin:0px 0px 0px 0px;
}
#plans .install-button span {
  margin:0px 0px 0px 0px;
  display: inline-block;
  vertical-align: middle;
}

.install-button:hover {
  box-shadow: 0px 1px 2px #666;
  color: #444;
  cursor:pointer;
  background: linear-gradient(0deg,rgb(233, 231, 231) 0%, rgb(241, 241, 241) 15%, rgb(238, 238, 238) 100%);
}

.install-popup {
  display:none;
  position: absolute;
  background: linear-gradient(36deg, rgb(238, 236, 236) 5%, rgb(242, 242, 241) 62%, rgb(249, 247, 247) 98%);
  border: 4px solid #fff;
  border-radius:15px;
  padding: 30px;
  z-index: 10;
  max-width: 512px;
  max-height: 90vh;  /* to enable scroll on mobile */
  overflow-y: auto;  /* to enable scroll on mobile */
  font-size: 100%;
  text-align: left;
  box-shadow: 0px 1px 4px #666;
  cursor: auto;
  color: #555;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.install-popup div {
  font-size: 85%;
}

.install-popup h4 {
  text-align:center;
  display:block;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.install-popup li {
  color:#333;
  font-size:1.3rem;
}
.install-popup h5 {
  font-weight:normal;
  font-size:2rem;
  color:#555;
}
.install-popup label {
  font-size:1.3rem;
  display:block;
  margin:20px 0px 0px 0px;
  color:#333;
}

.install-popup img.installlogo {
  width:160px;
  margin:30px auto 15px auto;
  display:block;
  clear:both;
}
.install-popup h5 img {
  float:right;
  width:100px;
}
.install-popup .svg {
  top:-5px;
  width:25px;
}
.install-popup .svg:hover {
  filter: contrast(0%) brightness(0%);
}

#prosubscribe:hover, #extrasubscribe:hover {
  background: #493ff7;
  cursor:pointer;
}
#prosubscribe, #extrasubscribe {
  border-radius: 6px;
  padding:12px 20px 12px 20px;
  border:1px solid #635bff !important; /* Stripe purple */
  background-color: #635bff; /* Stripe purple */
  color:#fff;
  font-weight:bold !important;
  font-size:1rem;
  line-height: 1;
  text-decoration:none;
  white-space: nowrap;
  display:inline-block;
}

.install-email {
  margin-top:5px !important;
  font-size: 1.2rem !important;
  padding:6px !important;
  color:#222 !important;
}

.add-to-slack-button:hover, .add-to-discord-button:hover {
  background: #e6f5f9;
  box-shadow: 0px 1px 3px #ccc;
  color:#333;
  cursor:pointer;
}

.top {
  text-align:center;
  margin:35px 0px 35px 0px;
}

.add-to-slack-button img, .add-to-discord-button img {
  width:24px;
  height:24px;
}

.add-to-slack-button, .add-to-discord-button {
  box-shadow: 0px 1px 3px #888;
  font-size:1.4rem;
  border: 1px solid #666 !important;
  background-color: white;
  color: #333;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  border-radius: 6px;
  padding:12px 12px 12px 15px;
}
.add-to-discord-button {
  margin-right:10px;
}


.add-to-slack-button img, .add-to-discord-button img, #prosubscribe img, #extrasubscribe img, .install-button img {
  width: 20px;
  height: 20px;
  position:relative;
  top: -1px !important;
  vertical-align: middle;
  margin: 0px 3px 0px 0px;
  display: inline-block;
  border: none;
}

#prosubscribe img, #extrasubscribe img {
  filter: drop-shadow(0px 0px 3px #fff);
}

.add-to-slack-button img, .add-to-discord-button img {
  margin:0px 0px 0px 10px;
}

.add-to-slack-button span, .add-to-discord-button span,  #prosubscribe span, #extrasubscribe span {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.spectacular .question {
  margin-top:44px;
  width:75%;
  margin: 44px auto auto auto;
}

.monthyear {
  margin:20px;
}
.monthyear .label1, .monthyear .label2 {
  color:#999;
  font-weight:bold;
}
.monthyear-sel {
  color:#0bbd93 !important;
}

.monthyear b, .monthyear a {
  background:#fff;
  border:1px solid #ccc;
  border-radius:5px;
  padding:4px 8px;
}


/* The config activation slider */
.switch {
  top:-3px;
  position: relative;
  display: inline-block;
  width: 45px;
  height: 22px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 0;
  right: 0;
  bottom: -2px;
  background-color: #06d2b3;
  -webkit-transition: .2s;
  transition: .2s;
  border-radius: 12px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #06d2b3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}
/* end slider */

.new {
  border-radius:8px;
  background-color:#20c49d;
  color:white;
  font-weight:bold;
  font-size:0.65rem;
  padding:2px 8px;
  position:relative;
  top:-1px;
  font-family: monospace !important;
}

.post .date {
  color: #999;
  font-size:80%;
  margin-bottom:15px;
}

.post .body {
  font-size:97%;
  line-height:1.4em;
  font-weight:normal;
  color:#666;
}

.post {
  flex-basis: calc(33.33% - 34px);
  text-align:left;
  background:#f4f4f4;
  margin: 14px;
  padding:20px;
  border-radius:6px;
  height:15em;
  overflow:auto;
  box-shadow: 1px 1px 3px #999;
}
.post img.bluesky-screenshot {
  max-width: 100%;
  height: auto;
  border:1px solid #ccc;
  border-radius:6px;
  margin-top:12px;
}

#news {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#teamname {
  display:inline-block;
  font-size:2rem;
  margin:20px 0px;
  padding:16px 100px;
  font-weight:normal;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
}


tr.tr-free {
  background-color: rgba(255, 255, 255, 0.5);
}
tr.tr-extra {
  background-color: rgba(255, 232, 218, 0.5);
}
tr.tr-pro {
  background-color: rgba(217, 255, 244, 0.5);
}

#plans {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#plans .features {
  text-align:left;
  width:100%;
}
#plans .features td:first-child {
  width:1%; /* the help image */
  padding:2px 0px 8px 6px !important;
}
#plans .features td {
  padding:18px 0px 14px 4px;
  vertical-align:middle;
  border-bottom:1px dashed #999;
}
#plans .features tr:hover {
  background-color:#f4f4f4;
  cursor:pointer;
}

#features-free, #features-extra, #features-pro {
  padding: 30px 25px 40px 25px;
  border-radius:20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  flex: 1; /* Ensures the divs are the same height */
  margin:10px;
  align-items: flex-start;
}


#features-free {
  border:2px solid #aaa;
}
#features-extra {
  border:2px solid #ff6d33;
}
#features-pro {
  border:2px solid #0bbd93;
  min-width:37%;
  margin-top:-30px;
}

#features-free h6 {
  color: #888;
}
#features-extra h6 {
  color: #fd8353;
}
#features-pro h6 {
  color: #0bbd93;
}
#plans h6 {
  text-align:left !important;
  font-size:3rem;
  width: 100%;
}
#plans h2 {
  margin-top:10px;
  margin-bottom:10px;
  text-align:left;
  color:#999;
  color: #868383;
  width: 100%;
  font-size:1.4rem;
  font-weight:normal;
}
#plans h3 {
  font-size:2rem;
  color:#666;
  margin-bottom:20px;
  display: block;
  width:100%;
  padding: 6px 16px 4px 0px;
  line-height:1;
}

#plans h3 span {
  display: inline-block;
  top:-1px;
  position:relative;
  color:#666;
  text-align:left;
  font-size: 1.2rem !important;
}

#plans h3 b {
  font-size:1.2rem;
  font-weight:normal;
  text-shadow:none;
  line-height: 1.3;
  display:block;
  margin:10px 0px 10px 0px;
  color:#444;
}

#plans .buttons {
  margin-top: auto;
  padding-top:50px;
  width:100%;
  color:#999;
  font-size: 1rem;
}

.features table {
  margin: 0px 10px;
}

.notice {
  border: 1px solid #ff9b5a;
  padding:20px;
  text-align:left;
  border-radius:5px;
  max-width:80%;
  margin-bottom:8px;
  margin-left:auto;
  margin-right:auto;
  font-weight:normal;
}

.notice div {
  font-size:1rem;
  margin-bottom:12px;
}

.trademark {
  font-size:0.9rem;
  position:relative;
  top:-30px;
}

h3#monthlypro {
  font-size:3rem;
}

#yearlypro, #monthlypro {
  /* font-size:2.5rem !important; */
  /* padding: 10px 12px 10px 12px !important; */
  font-size:1.9rem;  /* when there's a discount */
  padding: 5px 12px 3px 12px !important; /* when there's a discount */
  border-radius: 15px;
  background: linear-gradient(227deg, rgb(73, 210, 177) 0%, rgb(100, 215, 185) 50%, rgb(11, 189, 147) 100%);
  color: #f4f4f4 !important;
  text-shadow: 1px 1px 1px #999;
  display:block;
}
#yearlypro:hover, #monthlypro:hover {
}

#yearlypro span, #monthlypro span {
  color:#fff !important;
}

#owl-features {
}

#owl-features div.owl {
  text-align:center;
  padding:0px;
  /* background: linear-gradient(36deg, rgb(195, 198, 197) 5%, rgb(237, 235, 235) 62%, rgb(204, 204, 204) 98%); */
  max-width:230px;
  margin: 0 auto;
  border-radius:14px;
  padding:30px;
  display:inline-block;
}
#owl-features div.owl img {
  width: 130px;
  display: block;
  margin: 0 auto 10px auto;
  border-radius:25%;
  border:1px solid #ccc;
  padding:3px;
}
#owl-features div.owl span {
  font-size:1.4rem;
  display:block;
  font-style:italic;
  color:#666;
}
#owl-features div.owl h4 {
  color: #ff6d33;
  margin-bottom:20px;
  font-size:1.5rem;
}
#owl-features div.owl code {
  color: #f06d00;
  display:inline-block;
  margin-top:20px;
  font-size:1rem;
  font-weight:bold;
  box-shadow: 0 0 0 transparent;
}
#owl-features .owl-nav {
  font-size:2rem;
}

#members img  {
  /* filter: grayscale(100%); */
  margin: 10px 2px;
  height: 45px;
  border-radius:4px;
}

.members-header b {
  color:#888;
  font-size:1rem;
  display:block;
  margin-top:10px;
}
.members-header {
  font-size:4rem;
}

.customer-quote {
  width:34%;
  min-width:500px;
  color: #444;
  text-align:left;
  margin:20px auto 20px auto;
  font-style:italic;
  font-size:1.2rem;
}

.customer-quote img {
  background:#fff;
  border-radius:4px;
  padding:5px 10px;
}

.hidden {
  display: none;
}

.togglemore {
  background: #fff;
  padding:5px 15px;
  border-radius:4px;
  text-decoration:none;
  color: #ff6d33;
  margin:0px auto !important;
  font-size:0.9rem;
  display:block;
  width:100px;
  text-align:center;
  border:1px solid transparent;
  white-space:nowrap;
}
.togglemore:hover {
  background:#fff7ef;
  border:1px solid #ff6d33;
}


#topdesc {
  display:inline-block;
  max-width:400px;
  padding: 20px 20px 0px 0px;
  text-align:left;
  vertical-align:top
}

.topvid {
  display:inline-block;
  text-align:right;
  vertical-align:top;
}

.youtube-thumb {
  position: relative;
  display: inline-block;
  width: 600px;
  cursor: pointer;
}

.youtube-thumb img, .inline-video {
  width: 100%;
  display: block;
  border-radius: 14px;
  box-shadow:0px 1px 8px #444;
}

.inline-video:hover {
  cursor:pointer;
}

/* SVG Play Button Overlay */
.yt-play-button-svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  opacity: 0.9;
  transition: opacity 0.3s;
  pointer-events: none;
}

.youtube-thumb:hover .yt-play-button-svg {
  opacity: 1;
}

/* Lightbox styles */
#video-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 24, 22, 0.85);
}

.video-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 1800px;
  aspect-ratio: 16/9;
  z-index: 10000;
}

 /* Fallback for old browsers without aspect-ratio */
  .video-container::before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
  }

  .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }


.yt-duration {
  position: absolute;
  bottom: 15px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 4px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  border-radius: 2px;
  line-height: 1;
  pointer-events: none;
}

.yt-desc {
  position: absolute;
  bottom: 15px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 4px;
  font-size: 19px;
  font-family: Arial, sans-serif;
  border-radius: 2px;
  line-height: 1;
  pointer-events: none;
}




.changing-word, .unchanging-word {
  color: #ff6d33;
  font-weight:bold !important;
}

code.demo {
  background:#eee;
  border:0px !important;
}

/*
.growshrink {
  animation: growshrink 3s 1 forwards;
}

@keyframes growshrink {
    0%{
        border:0px;
        box-shadow: 0px 0px 0px #fff;
    }
    60%{
        height:70px;
        border:0px;
        box-shadow: 0px 0px 0px #fff;
    }
    90%{
        height:50px;
        border:0px;
        box-shadow: 0px 0px 0px #fff;
    }
    91%{
        border:1px solid #ff6d33;
        box-shadow:0px 1px 20px #ff6d33;
    }
    100%{
        border:1px solid #666;
        box-shadow: 0px 2px 4px #999;
    }
}
*/

.blog-img {
  width:100%;
  margin:auto;
  border-radius:2px;
  border: 1px solid #336699;
}


.dn-text-logo, .dn-nav-main {  /* shop logo, has Dibs On Stuff hardcoded at top of page */
  display:none !important;
}
h1.dn-styled {
  text-align:left !important;
}

nav.dn-other-nav {
  position:relative;
  z-index:1;
}

.orangetext {
  color: #02bae3;
}

.subscribe-form {
  padding:20px;
  padding-bottom:25px;
  border-radius:5px;
  max-width:600px;
  margin:20px auto 20px auto;
  border: 1px solid #666;
}

.subscribe-input {
  max-width: 400px !important;
  margin:auto;
  margin-top:10px !important;
  margin-bottom:0px !important;
  border-radius:5px;
}

.subscribe-button {
  font-size:100%;
  padding:1%;
  background: #f96201;
  border-radius:5px;
  border:0px solid #999;
  color: #fff;
  margin-top:10px !important;
  margin-bottom:0px !important;
  margin-left:5px;
}

.subscribe-button:hover {
  cursor:pointer;
  background: #ff8a3f;;
}

.subscribe-info {
  margin:0 0 0px 0;
}

#basicoptions {
  display:none;
}
#basicoptions li {
  text-align:left;
}

.little {
  font-size:1rem;
  margin-top:9px;
  font-weight:normal;
  display:block;
}