.btn {
  background: radial-gradient(
        circle at 100% 100%,
        #1f1f1f 0,
        #1f1f1f 19px,
        transparent 19px
      )
      0% 0%/20px 20px no-repeat,
    radial-gradient(circle at 0 100%, #1f1f1f 0, #1f1f1f 19px, transparent 19px)
      100% 0%/20px 20px no-repeat,
    radial-gradient(circle at 100% 0, #1f1f1f 0, #1f1f1f 19px, transparent 19px)
      0% 100%/20px 20px no-repeat,
    radial-gradient(circle at 0 0, #1f1f1f 0, #1f1f1f 19px, transparent 19px)
      100% 100%/20px 20px no-repeat,
    linear-gradient(#1f1f1f, #1f1f1f) 50% 50% / calc(100% - 2px)
      calc(100% - 40px) no-repeat,
    linear-gradient(#1f1f1f, #1f1f1f) 50% 50% / calc(100% - 40px)
      calc(100% - 2px) no-repeat,
    linear-gradient(0deg, #ffffff 0%, rgba(12, 194, 50, 0) 52%, #ffffff 100%);
  border-radius: 20px;
  box-sizing: border-box;
  width: fit-content;
}

small a,
a.btn,
span.orange a {
  color: #e68722;
}

span.small {
  font-size: 10px;
}

p a {
  color: #fff;
}

.btn-orange {
  background-color: #e68722;
  border-radius: 20px;
  color: #fff;
  user-select: none;
  display: flex;
  justify-content: center;
  position: relative;
}

.btn-orange .upp {
  line-height: 20px;
}

.bark-bg {
  background: radial-gradient(
        circle at 100% 100%,
        #101010 0,
        #101010 29px,
        transparent 29px
      )
      0% 0%/30px 30px no-repeat,
    radial-gradient(circle at 0 100%, #101010 0, #101010 29px, transparent 29px)
      100% 0%/30px 30px no-repeat,
    radial-gradient(circle at 100% 0, #101010 0, #101010 29px, transparent 29px)
      0% 100%/30px 30px no-repeat,
    radial-gradient(circle at 0 0, #101010 0, #101010 29px, transparent 29px)
      100% 100%/30px 30px no-repeat,
    linear-gradient(#101010, #101010) 50% 50% / calc(100% - 2px)
      calc(100% - 60px) no-repeat,
    linear-gradient(#101010, #101010) 50% 50% / calc(100% - 60px)
      calc(100% - 2px) no-repeat,
    linear-gradient(0deg, #ffffff 0%, rgba(12, 194, 50, 0) 52%, #ffffff 100%);
  border-radius: 30px;
}

a .btn-orange:hover {
  background-color: #e07300;
}

hr.v {
  margin: 0;
  border: 1px solid #cecece;
}

.android.btn,
.ios.btn {
  border-radius: 30px;
  padding: 14px 25px;
  box-sizing: border-box;
  font-size: 18px;
}

.banner_gradient {
  overflow: hidden;
  background: rgb(242, 173, 100);
  background: linear-gradient(
    122deg,
    rgba(242, 173, 100, 0.1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.banner {
  position: relative;
}

img.strip-1 {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
img.strip-2 {
  position: absolute;
  top: 0px;
  right: 0px;
}
img.strip-3 {
  position: absolute;
  left: 0px;
  bottom: 0px;
}
img.moriarty002 {
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: -1;
}
img.pills003 {
  position: absolute;
  top: 40px;
  right: 40px;
}
img.moriarty {
  position: absolute;
  bottom: 0px;
  right: -80px;
  width: auto;
  height: auto;
  z-index: -1;
}

.card {
  border: 3px solid #f0f0f0;
  border-radius: 20px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
}

.card.card-black {
  background-color: #000;
  border: 3px solid #000;
  color: #fff;
}
.card.card-orange {
  background-color: #e68722;
  border: 3px solid #e68722;
  color: #fff;
  word-break: break-word;
}

.card.card-orange p {
  font-size: 15px;
}

.number {
  color: #e68722;
  border: 1px solid #e68722;
  border-radius: 50px;
  padding: 0px 12px;
  width: fit-content;
}

.arrow-down {
  margin-bottom: 10px;
}
.arrow-down span {
  display: block;
  width: 11px;
  height: 11px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*margin: -10px;*/
  animation: arrow-down 3s infinite;
  border-radius: 1px;
}
.arrow-down span:nth-child(2) {
  animation-delay: -0.2s;
}
.arrow-down span:nth-child(3) {
  animation-delay: -0.4s;
}
@keyframes arrow-down {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}

.clickable {
  font-size: 17px;
  word-break: break-word;
  font-weight: bold;
}

.clickable:hover a {
  text-decoration: underline;
  color: #e68722;
}

.btn-block .link-btn {
  margin-bottom: 10px;
  margin-right: 5px;
}

span.button-banner {
  position: absolute;
  top: 10%;
  right: 15%;
}

@import url("fonts/inter/stylesheet.css");

body {
  background-color: #000;
  color: #fff;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.3px;
}

.container {
  margin: 0px auto;
  overflow: hidden;
}

.hov:hover {
  color: #ff9800;
}

a .link {
  color: #e68722;
  cursor: pointer;
  border-bottom: 2px solid #e68722;
  font-weight: 600;
}

p {
  user-select: none;
}

.h100 {
  height: 100%;
}

.mt-1 {
  margin-top: 10px;
}

.mb-1 {
  margin-bottom: 10px;
}

.margin-1 {
  margin-right: 10px;
}

.ml-1 {
  margin-left: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.mb-2 {
  margin-bottom: 20px;
}

.margin-2 {
  margin-right: 20px;
}

.ml-2 {
  margin-left: 20px;
}

.relative {
  position: relative;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-wrap: nowrap;
}

.row_center {
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
}

.row_sb {
  justify-content: space-between;
}

.row_top {
  align-items: start;
}

.row_end {
  justify-content: flex-end;
}

.row_col {
  flex-direction: column;
}

.row_start {
  align-content: flex-start;
}

.upp {
  text-transform: uppercase;
}

.orange {
  color: #e68722;
}

.center {
  text-align: center;
}

@media screen and (min-width: 280px) {
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  p {
    line-height: 26px;
  }

  .row-1\@xs > * {
    width: 100%;
  }

  .row-1-2\@xs > * {
    width: 50%;
  }

  .row-1-3\@xs > * {
    width: 33.33%;
  }

  .row-1-4\@xs > * {
    width: 25%;
  }

  .row-1-5\@xs > * {
    width: 20%;
  }

  .row-1-6\@xs > * {
    width: 16.66%;
  }

  .col-1\@xs {
    width: 100%;
  }

  .col-1-2\@xs {
    width: 50%;
  }

  .col-1-3\@xs {
    width: 33.33%;
  }

  .col-1-4\@xs {
    width: 25%;
  }

  .col-1-5\@xs {
    width: 20%;
  }

  .col-1-6\@xs {
    width: 16.66%;
  }

  .box-sm {
    padding: 80px 0px;
  }

  .box-md {
    padding: 100px 0px;
  }

  .box-lg {
    padding: 90px 0px 80px;
  }

  h1 {
    font-size: 63px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 17px;
  }

  h4 {
    font-size: 14px;
  }

  p {
    font-size: 14px;
  }

  small {
    font-size: 12px;
  }

  .pdd-sm-wrapper {
    margin-right: -5px;
    margin-left: -5px;
  }

  .pdd-sm {
    padding: 5px 5px;
  }

  .pdd-md-wrapper {
    margin-right: -10px;
    margin-left: -10px;
  }

  .pdd-md {
    padding: 0px 10px;
  }

  .mt-md {
    margin-top: 20px;
  }

  .mt-sm {
    margin-top: 20px;
  }

  .mt-lg {
    margin-top: 40px;
  }

  .banner .btn img {
    width: 20px;
  }

  .banner .btn-orange {
    width: 97%;
    padding: 15px 0px;
    font-weight: 500;
  }

  .btn {
    padding: 24px 30px;
  }

  a:has(.btn-orange) {
    /*width: 100%;*/
  }

  hr.v {
    margin: 20px auto;
    border: 1px solid #cecece;
    width: 80%;
  }

  img.smile {
    position: absolute;
    top: 20px;
    width: 50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  img.map {
    margin-top: -20px;
  }

  img.moriarty2 {
    width: 126%;
    left: 51%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    z-index: -1;
  }

  .logo-label {
    letter-spacing: -6px;
    font-size: 81%;
    vertical-align: 5px;
  }

  .grey-strips {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    max-width: -webkit-fill-available;
  }

  .grey-strips > div {
    margin-right: 80px;
    opacity: 0.1;
    border-right: 1px solid #545454;
  }

  .link-btn {
    height: 70px;
    width: 48%;
    margin-left: 5px;
    text-align: center;
    margin-bottom: 10px;
  }

  .infobox .link-btn {
    width: 100%;
    justify-content: center;
  }

  span.button-banner {
    font-size: 10px;
  }
}

@media screen and (min-width: 640px) {
  img.moriarty2 {
    width: 70%;
  }

  .row-1\@s > * {
    width: 100%;
  }

  .row-1-2\@s > * {
    width: 50%;
  }

  .row-1-3\@s > * {
    width: 33.33%;
  }

  .row-1-4\@s > * {
    width: 25%;
  }

  .row-1-5\@s > * {
    width: 20%;
  }

  .row-1-6\@s > * {
    width: 16.66%;
  }

  .col-1\@s {
    width: 100%;
  }

  .col-1-2\@s {
    width: 50%;
  }

  .col-1-3\@s {
    width: 33.33%;
  }

  .col-1-4\@s {
    width: 25%;
  }

  .col-1-5\@s {
    width: 20%;
  }

  .col-1-6\@s {
    width: 16.66%;
  }

  .banner .btn-orange {
    width: 97%;
  }

  .link-btn {
    width: 47%;
    margin-left: 5px;
  }

  .banner .btn-orange {
    padding: 20px 0px;
  }
}

@media screen and (min-width: 960px) {
  .container {
    padding-right: 40px;
    padding-left: 40px;
  }

  .row-1\@m > * {
    width: 100%;
  }

  .row-1-2\@m > * {
    width: 50%;
  }

  .row-1-3\@m > * {
    width: 33%;
  }

  .row-1-4\@m > * {
    width: 25%;
  }

  .row-1-5\@m > * {
    width: 20%;
  }

  .row-1-6\@m > * {
    width: 16.66%;
  }

  .row-1-7\@m > * {
    width: 14.28%;
  }

  .row-3-4\@m > * {
    width: 75%;
  }

  .row-4-5\@m > * {
    width: 80%;
  }

  .col-1\@m {
    width: 100%;
  }

  .col-1-2\@m {
    width: 50%;
  }

  .col-1-3\@m {
    width: 33%;
  }

  .col-1-4\@m {
    width: 25%;
  }

  .col-3-4\@m {
    width: 75%;
  }

  .col-1-5\@m {
    width: 20%;
  }

  .col-1-6\@m {
    width: 16.66%;
  }

  .col-2-3\@m {
    width: 66%;
  }

  .box-sm {
    padding: 80px 0px;
  }

  .box-md {
    padding: 100px 0px;
  }

  .box-lg {
    padding: 120px 0px;
  }

  h1 {
    font-size: 110px;
  }

  h2 {
    font-size: 46px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 18px;
  }

  p {
    font-size: 20px;
  }

  small {
    font-size: 14px;
  }

  .pdd-sm-wrapper {
    margin-right: -10px;
    margin-left: -10px;
  }

  .pdd-sm {
    padding: 10px 10px;
  }

  .pdd-md-wrapper {
    margin-right: -15px;
    margin-left: -15px;
  }

  .pdd-md {
    padding: 0px 15px;
  }

  .mt-md {
    margin-top: 40px;
  }

  .mt-sm {
    margin-top: 20px;
  }

  .mt-lg {
    margin-top: 60px;
  }

  .banner .btn img {
    width: 30px;
  }

  .btn {
    padding: 28px 30px;
  }

  a:has(.btn-orange) {
    /*width: fit-content;*/
  }

  hr.v {
    margin: 0;
    border: 1px solid #cecece;
    width: 0px;
  }

  img.smile {
    position: absolute;
    top: 80px;
    left: 120px;
    width: 110px;
    right: auto;
  }

  img.map {
    margin-top: -60px;
  }

  p {
    line-height: 30px;
  }

  .logo-label {
    letter-spacing: -7px;
    font-size: 84%;
    vertical-align: 10px;
  }

  .grey-strips > div {
    margin-right: 250px;
  }

  .soft-gradient {
    overflow: hidden;
    background: linear-gradient(
      345deg,
      rgb(230 135 34 / 12%) 0%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .soft-gradient-sm {
    background: linear-gradient(
      148deg,
      rgb(230 135 34 / 11%) 0%,
      rgb(85 44 0 / 0%) 51%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .link-btn {
    height: 100px;
  }

  .card {
    height: 100px;
  }

  .infobox .link-btn {
    width: 47%;
  }

  span.button-banner {
    font-size: 15px;
    right: 22%;
  }
}

@media screen and (min-width: 1280px) {
  .container {
    width: 1280px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .row-1\@l > * {
    width: 100%;
  }

  .row-1-2\@l > * {
    width: 50%;
  }

  .row-1-3\@l > * {
    width: 33.33%;
  }

  .row-1-4\@l > * {
    width: 25%;
  }

  .row-1-5\@l > * {
    width: 20%;
  }

  .row-1-6\@l > * {
    width: 16.66%;
  }

  .col-1\@l {
    width: 100%;
  }

  .col-1-2\@l {
    width: 50%;
  }

  .col-1-3\@l {
    width: 33.3%;
  }

  .col-2-3\@l {
    width: 66.667%;
  }

  .col-1-4\@l {
    width: 25%;
  }

  .col-3-4\@l {
    width: 75%;
  }

  .col-1-5\@l {
    width: 20%;
  }

  .col-2-5\@l {
    width: 40%;
  }

  .col-3-5\@l {
    width: 60%;
  }

  .col-4-5\@l {
    width: 80%;
  }
}

@media (max-width: 639px) {
  .hidden-xs {
    display: none !important;
  }

  .center-xs {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .center-col-xs {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bg-gradient-white {
    letter-spacing: 2px;
    padding: 4px;
    background: linear-gradient(
      90deg,
      rgba(2, 0, 36, 0) 0%,
      rgb(36, 36, 36) 50%,
      rgba(0, 212, 255, 0) 100%
    );
    margin-top: -1px;
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  .hidden-sm {
    display: none !important;
  }

  .center-sm {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .center-col-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .hidden-lg {
    display: none !important;
  }
}

.bold,
.bold * {
  font-weight: 600;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  /* margin: 0; */
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

body {
  position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  box-sizing: border-box;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a,
p {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 400;
}
