html, body {
  font-family: Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  color: #666;
  
  font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

.body-font {
  font-family: Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

input {
  font-family: Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

#particles-js, #particles-js2, #particles-js3 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.ffam-Nas {
  font-family: 'Nasalization';
}

.ffam-Naslt {
  font-family: 'Nasalization Light';
}

.ffam-Orbi {
  font-family: 'Orbitron';
}

.ffam-Notoe {
  font-family: 'Noto Emoji';
}

.ffam-Monts {
  font-family: 'Montserrat';
}


.color-white {
  color: #fff;
}

.color-black {
  color: #000;
}

.color-main {
  color: #672fb6;
}

.color-fuch {
  color: #db32bb;
}

.color-fuch-lt {
  color: #f4beea;
}

.font-oblique {
  font-style: oblique;
}

.font-900 {
  font-weight: 900;
}

.font-800 {
  font-weight: 800;
}

.font-700 {
  font-weight: 700;
}

.font-600 {
  font-weight: 600;
}

.font-500 {
  font-weight: 500;
}

.font-400 {
  font-weight: 400;
}

.font-300 {
  font-weight: 300;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-just {
  text-align: justify;
}

.text-upper {
  text-transform: uppercase;
}

.text-lower {
  text-transform: lowercase;
}

.fsize-120 {
  font-size: 120%;
}

.fsize-110 {
  font-size: 110%;
}

.fsize-105 {
  font-size: 105%;
}

.fsize-100 {
  font-size: 100%;
}

.fsize-90 {
  font-size: 90%;
}

.fsize-80 {
  font-size: 80%;
}

.fsize-70 {
  font-size: 70%;
}

.fsize-60 {
  font-size: 60%;
}

.fsize-50 {
  font-size: 50%;
}

.fsize-40 {
  font-size: 40%;
}

.fsize-30 {
  font-size: 30%;
}

.fsize-20 {
  font-size: 20%;
}

.lettersp-0 {
  letter-spacing: 0px;
}

.lettersp-p3 {
  letter-spacing: 0.3px;
}

.lettersp-p5 {
  letter-spacing: 0.5px;
}

.lettersp-1 {
  letter-spacing: 1px;
}

.lettersp-2 {
  letter-spacing: 2px;
}

.lettersp-3 {
  letter-spacing: 3px;
}

.lettersp-4 {
  letter-spacing: 4px;
}

.vert-middle {
  vertical-align: middle;
}

.lineht-1em {
  line-height: 1em;
}

.lineht-1rem {
  line-height: 1rem;
}

.lineht-1p5em {
  line-height: 1.5em;
}

.lineht-1p5rem {
  line-height: 1.5rem;
}

.lineht-2em {
  line-height: 2em;
}

.lineht-2rem {
  line-height: 2rem;
}

.disp-inl {
  display: inline;
}

.disp-inb {
  display: inline-block;
}

.disp-blk {
  display: block;
}

.flip-horz {
  transform: scaleX(-1);
}

.flip-vert {
  transform: scaleY(-1);
}

@media (min-width: 960px) and (max-width: 1199px) {
  .promo__container {
    min-height: 670px;
  }
}

@media (min-width: 2060px) {
  .promo__container {
    min-height: 640px;
  }
}

@media (min-width: 2260px) {
  .promo__container {
    min-height: 700px;
  }
}

.header__menu.uk-grid > li {
  padding-left: 18px;
}

.header__menu li a {
  font-size: 16px;
}

@media (min-width: 1199px) {
  .header__menu.uk-grid > li {
    padding-left: 36px;
  }

  .header__menu li a {
    font-size: 17px;
  }
}

img.logo-nav-igloo {
  filter: invert(100);
  width: auto;
  height: 24px;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
}

.footer {
  /*overflow: unset;*/
}

.htb {
  /*overflow: unset;*/
}

.header__socials .uk-link, .header__socials a,
.footer__socials .uk-link, .footer__socials a {
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.header__socials .uk-link span[data-uk-icon],
.header__socials a span[data-uk-icon],
.footer__socials .uk-link span[data-uk-icon],
.footer__socials a span[data-uk-icon] {
  margin-right: 0px;
}

.uk-grid-column-small > .socico, .uk-grid-small > .socico {
  padding-left: 6px;
}


div.shop-embed {
  border: 6px solid #672fb6;
  border-width: 6px;
  border-radius: 50px;
  padding-top: 25px;
  padding-bottom: 25px;
  margin: 0px auto 80px auto;
  width: 94%;
  max-width: 1188px;
}

.contract__contract a {
  color: #fff;
  font-size: 94%;
}

.feature__content {
  font-size: 72px;
}

.header__menu .uk-link, .header__menu a {
  font-size: 18px;
}

.whitepaper__title,
.roadmap__title .uk-h2,
.roadmap__title h2 {
  letter-spacing: 0.05em;    
}

.whitepaper__desc.gally {
  line-height: unset;
}

.tokenomics__supply small {
  color: #672fb6;
  font-size: 80%;
}

.tokenomics__count .count-icon {
  vertical-align: middle;
  max-height: 40px;
  margin:0px 8px 0px 0px;
}

.htb__instruction {
  background: rgb(255,255,255);
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.htb__instruction.prog {
  padding: 40px;
  position: relative;
}

.htb__steps.prog {
  font-size: 28px;
  line-height: 37px;
  text-transform: lowercase;
}

.htb__steps.prog > strong, .htb__steps.body-font {
  font-family: Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  letter-spacing: 0px;
}

.donpercpos {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  padding: 0 0 0 25px;
  transform: translateX(-50%) translateY(-50%);
}

.htb__instruction.buy-notes {
  border-radius: 26px;
  padding: 30px;
  color: #fff;
  font-weight: normal;
  font-size: 80%;
}

.htb__contract-address a {
  color: #fff;
  font-size: 82%;
}

li.roadmap__done {
  list-style-type: none;
}
li.roadmap__done:before {
  content: '\2605 ';
  position: absolute;
  left: -18px;
  color: #db32bb;
}

img.logo-feat-charity {
  max-width: 320px;
  max-height: 150px;
  margin-top: 10px;
  border-radius: 16px;
}

img.logo-feat2-charity {
  max-width: 320px;
  max-height: 150px;
  border-radius: 16px;
}

img.logo-feat2-penguin {
  max-height: 150px;
  padding: 10px 15px 0px 15px;
  margin: 0px auto;
}

img.logo-feat3-charity {
  max-width: 320px;
  max-height: 100px;
  margin-top: 10px;
  border-radius: 12px;
}

img.logo-feat4-charity {
  max-width: 100px;
  max-height: 100px;
  border-radius: 12px;
}

img.logo-btn-feg {
  vertical-align: middle;
  max-height: 28px;
  margin: 0px 8px 0px 0px;
}

img.logo-vendor {
  max-width: 240px;
  max-height: 80px;
}

img.logo-charity-penguin {
  margin: 0px auto;
  width: 100%;
  max-width: 120px;
  text-align: center;
}

img.logo-token-penguin {
  width: 100%;
  max-width: 150px;
}

.uk-link-toggle:focus .uk-link.promo__link, .uk-link-toggle:hover .uk-link.promo__link, .uk-link:hover.promo__link, a:hover.promo__link {
  filter: grayscale(90%);
  -ms-filter: grayscale(90%);
  -webkit-filter: grayscale(90%);
}

.uk-link, a {
  color: #db32bb;
}
.uk-link-toggle:focus .uk-link, .uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
  color: #b13ee6;
}

a.header__mmenu {
  color: #db32bb;
}

div.mainnav.uk-sticky.uk-active {
  background: rgb(23,7,69);
  background: rgba(23,7,69,.9);
  padding: 0px;
  margin: 10px auto 0px auto;
  border-radius: 150px;
  z-index: 9999;
}

div.uk-sticky.uk-active nav {
  margin: 5px 0px 5px 20px;
}

div.mobnav.uk-sticky.uk-active {
  margin-top: 80px;
  right: 100px;
}
div.mobnav.uk-sticky.uk-active .header__mmenu {
  color: #fff;
  display: block;
  width: 100px;
  padding: 5px 0 5px 10px;
  background: rgb(23,7,69);
  background: rgba(23,7,69,.9);
  border-radius: 50px;
}

.sd-widget-wrapper {
  border-radius: 50px;
}

#sd-widget {
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
}

.sd-token-input {
  opacity: .85;
}

.sd-widget-main {
  background: rgb(255,255,255);
  background: rgba(255,255,255,.15);
  border-radius: 50px;
  backdrop-filter: blur(20px);
  -ms-backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sd-widget-bottom {
  background: #672fb6;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.sd-widget-footer {
  background: rgb(255,255,255);
  background: rgba(255,255,255,.15);
  margin-top: -60px;
  padding-top: 80px;
  backdrop-filter: blur(20px);
  -ms-backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sd-wallet-button  {
  background-color: #0f141a;
}

.sd-widget-toolbar-nav div[aria-label="Lend"] {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  display: none !important;
}

/* Button Color */
.sd-widget-toolbar-nav>div.sd-widget-toolbar-nav-active,
.sd-widget-bottom button,
.sd-widget-bottom button:hover{
  background-color: #ae3fe9;
  border-radius: 150px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2px;
}

/* Background color for toggle button */
.sd-widget-bottom button.Mui-disabled {
  background-color: #9059ad;
  color: #000;
  font-weight: 500;
  letter-spacing: 1px;
}

/* Background color for disabled button */
.sd-widget-bottom button.MuiIconButton-root {
  background-color: #672fb6;
}

.promo__pingtxt {
  position: absolute;
  z-index: 1;
  top: 250px;
  bottom: auto;
  right: 26%;
  max-width: 250px;
}

section.promo::before {
    bottom: -1px;
}

.uk-h1.medsize, h1.medsize {
  font-size: 3rem;
  letter-spacing: .075em;
}

@media (min-width: 960px) {
  .uk-h1.medsize, h1.medsize {
    font-size: 4.8rem;
  }
}

@media (max-width: 1199px) {
  .promo__ping {
    position: absolute;
    z-index: 1;
    bottom: 220px;
    right: 2%;
    max-width: 80px;
  }

  .promo__pingtxt {
    position: absolute;
    z-index: 1;
    bottom: auto;
    top: 270px;
    right: 2%;
    max-width: 170px;
  }
}

@media (max-width: 639px) {
  .tokenomicsub {
    font-size: 80%;
  }
  
  .promo__ping {
    bottom: 190px;
    max-width: 60px;
  }
}

@media (max-width: 399px) {
  .uk-h1, h1 {
    font-size: 2.9rem;
    word-break: break-word;
  }
  
  .promo__ping {
    bottom: 0px;
    max-width: 40px;
  }
  
  .promo__pingtxt {
    max-width: 120px;    
  }
  
  .promo__suptitle {
    font-size: 16px;
  }
  
  img.logo-token-penguin {
    max-width: 100px;
  }
  
  .feature__content {
    font-size: 56px;
  }
  
  .uk-button {
    border-radius: 8px;
    padding: 16px 12px;
    font-size: 12px;
    line-height: 16px;
    white-space: normal;
    word-break: break-word;
  }
  
  .roadmap__title .uk-h2,
  .roadmap__title h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .roadmap__title h2::before {
    top: -23px;
  }
  .roadmap__title sup {
    line-height: 45px;
    top: -41px;
  }
}

body .contract {
  text-align: left;
  width: 100%;
}

.contract .contract__label {
  font-size: 13px;
  color: #fff;
  opacity: .7;
  line-height: 15px;
  letter-spacing: 0px;
  font-weight: 600;
}

.contract .contract__contract {
  font-size: 24px;
  line-height: 27px;
  color: #fff;
  letter-spacing: .1em;
  line-break: anywhere;
  margin-top: 5px;
  cursor: copy;
  font-weight: 700;
}

@media (max-width: 959px) {
  body .contract {
    text-align: center;
  }
  .contract .contract__contract {
    font-size: 16px;
    line-height: 18px;
  }
}

@media (min-width: 960px) {
  body .contract {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.body-branding .logo-container {
  position: relative;
  padding: 0px;
  margin: 0px;
}
.body-branding .logo-container .logal-img {
  position: relative;
  z-index: 4;
  max-height: 420px;
}
.body-branding .logo-container .logobg {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 1em 1em 1em 1em;
  padding: 0px;
  margin: 0px;
}
.body-branding .logobg.lbg-left {
  left: 0;
  right: auto;
  width: 50%;
  border-radius: 1em 0 0 1em;
}
.body-branding .logobg.lbg-right {
  right: 0;
  left: auto;
  width: 50%;
  border-radius: 0 1em 1em 0;
}
.body-branding .logobg.lbg-top {
  top: 0;
  bottom: auto;
  height: 50%;
  border-radius: 1em 1em 0 0;
}
.body-branding .logobg.lbg-bottom {
  bottom: 0;
  top: auto;
  height: 50%;
  border-radius: 0 0 1em 1em;
}
.body-branding .logobg.lbgcolor-dark {
  background: #000;
}
.body-branding .logobg.lbgcolor-grey1 {
  background: #333;
}
.body-branding .logobg.lbgcolor-grey2 {
  background: #666;
}
.body-branding .logobg.lbgcolor-grey3 {
  background: #999;
}
.body-branding .logobg.lbgcolor-grey4 {
  background: #ccc;
}
.body-branding .logobg.lbgcolor-light {
  background: #fff;
}
.body-branding .logobg.lbgcolor-purp1 {
  background: #672fb6;
}
.body-branding .lbg-tog {
  position: absolute;
  z-index: 5;
  top: 6px;
  right: 6px;
  height: 20px;
  width: 20px;
  border-radius: 0;
  padding: 0px;
  margin: 0px;
  background: url('/themes/p3nguin/assets/images/icon-lightdark.png') center/cover no-repeat;
  cursor: pointer;
}

.chrtygally img {
  border-radius: 0.5rem;
  max-height: 240px;
}

.chrtygally a img:hover {
  filter: grayscale(90%);
  -ms-filter: grayscale(90%);
  -webkit-filter: grayscale(90%);
}

.chrtygally .uk-flex-column {
  word-break: break-word;
}

.sl-wrapper .sl-image {
  cursor: ew-resize;
}

.sl-wrapper .sl-image img {
  border-radius: 0.9rem;
}

.sl-overlay {
  background: #000;
  opacity: 0.88 !important;
}

.sl-wrapper .sl-counter {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .2rem;
  font-weight: 500;
  
  margin: 0px;
  top: auto;
  right: auto;
  bottom: 15px;
  left: 20px;
}

.sl-wrapper .sl-navigation button {
  color: #fff;
  font-weight: 500;
}

.sl-wrapper .sl-close {
  color: #fff;
  font-weight: 500;
  height: 24px;
  width: 24px;
  line-height: 24px;
  font-size: 24px;
  
  margin: 0px;
  top: auto;
  right: 13px;
  bottom: 13px;
  left: auto;
}

@media (max-width: 1350px) {
  .sl-wrapper .sl-counter {
    
  }
  
  .sl-wrapper .sl-close {
    
  }
}
