:root {
    --slope: 5vh;
   /* Define your desired angle */
    --asymetry:1.3;
   /*asymetry of top border, must be >1)*/
   --off-white: #f7f7f7;

   --off-black: #202020;
}




@import "tomo-animations.css";
@font-face {
     font-family: 'JunkDog';
     src: url('../assets//fonts/JunkDog.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
 p {
     font-family: "Inder", serif!important;
     font-weight: 400;
     font-style: normal;
}
 h1 {
     font-family: "JunkDog", sans-serif!important;
     font-weight: 400;
     font-style: normal;
}
 body{
     background-color: var(--off-white);
}
 p{
    line-height: 1.3em!important;
}
 html.has-navbar-fixed-top {
     padding-top: 0;
}


/* Utils */
/*----------------*/
 .is-transparent{
     opacity: 0!important;
}
 @media screen and (max-width: 769px) {
     .is-transparent-mobile {
         opacity: 0!important;
    }
}
 .hidden-scroll {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.3s ease-in-out, height 0.3s ease-in-out;
}
/* Hero Section */
/*----------------*/
 .hero{
     margin-top: -26px;
    /*for navbar*/
}
.dark-section{
    background-color:  var(--off-black);

}
.dark-section .title,
.dark-section * .title { /* Ensures it works for deeply nested elements */
    color: var(--off-white) !important;
}

.light-section{
    background-color:  var(--off-white);

}

.light-section .title,
.light-section * .title {
    color: var(--off-black) !important;
}


 .onibi-logo-maxi{
     width: min(100%, 400px);
     padding-top: 5.25rem;
}
 @media screen and (max-width: 769px) {
     .onibi-logo-maxi {
         height: 50px!important;
    }
}
 .boku-no-hero-section{
     background: rgb(33,129,192);
     background: linear-gradient(180deg, rgba(33,129,192,1) 0%, rgba(57,154,218,1) 57%);
     margin: auto 0 ;
     max-width: 100%;
     margin-bottom: -1px;
}
 .hero-img{
     width: 100%;
     max-width: 100%;
}
/* burger */
/*----------------*/

@media (max-width: 1024px) {
 .burger-active .slanted-navbar {
     height: 75%;
}
 .burger-active .slanted-navbar-bg {
     height: 75%;
}
 .burger-active .slanted-navbar-border {
     height: calc(75% + 3px);
}
 .burger-active .slanted-navbar-shadow {
     height: calc(75% + 6px);
}
}


 .burger-menu {
     display: flex;
     flex-direction: column;
    /* Stack items vertically */
     align-items: center;
    /* Center the links */
     gap: 10px;
    /* Add spacing between links */
     z-index: 30;
     position: fixed;
     top: 90px;
     justify-content: center;
     align-items: center;
     text-align: center;
     width: 100%;
     transition: opacity 0.5s ease-in;
}
 .burger-menu.is-transparent {
     transition: none;
}
 .burger-menu a {
     padding: 5px;
     color: var(--off-white) !important;
     font-family: "JunkDog", sans-serif !important;
     width: 50%;
     height: 58px;
     place-content: center;
}
 .burger-menu a:hover {
     background-color:var(--off-white) ;
     color: var(--off-black)!important;
}
 .navbar-burger {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 40px;
     cursor: pointer;
     margin-top: -19px;
     margin-right: .75rem;
}
 .burger-bar {
     width: 35px;
     height: 4px;
     background-color: var(--off-white);
     margin: 3px 0;
     transition: transform 0.3s, opacity 0.3s;
}
 .navbar-burger.active .bar1 {
     transform: rotateZ(45deg) translate(6px, 6px);
}
 .navbar-burger.active .bar2 {
     opacity: 0;
}
 .navbar-burger.active .bar3 {
     transform: rotateZ(-45deg) translate(7px, -8px);
}
/* Navbar */
/*----------------*/
 .slanted-navbar,.slanted-navbar-bg,.slanted-navbar-border,.slanted-navbar-shadow {
     clip-path: polygon(0 0, 100% 0, 100% 64%, 0% 100%);
     position: fixed;
     top: 220px;
     left: 0;
     width: 100%;
}
 .slanted-navbar {
     background-color: transparent;
     height: 93px;
}
 .slanted-navbar-bg {
     background-color: var(--off-black);
     height: 97px;
     z-index: 29;
}
 .slanted-navbar-border {
     background-color: var(--off-white);
     height: 99px;
     z-index: 28;
}
 .slanted-navbar-shadow {
     background-color: rgb(0 0 0 / 33%);
     height: 101px;
     filter: blur(8px);
     z-index: 1;
}
 .onibi-logo{
     max-height: 3.2em!important;
}
 .navbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 20px;

     /* ks */
         top: 220px!important;
}
 .navbar-end {
     display: flex;
     align-items: center;
     margin-top: -15px;
     font-family: "JunkDog", sans-serif!important;
     font-weight: 400;
     font-style: normal;
     font-size: 1.3em;
}
 .navbar-end a{
     color: var(--off-white) !important;
}
 .navbar-item:hover,.navbar-item:active,.navbar-item:focus{
     color: var(--off-black) !important;
     padding-top: 30px;
     padding-bottom: 30px;
}
 .navbar-tomo-logo img {
     max-height: 3rem;
     vertical-align: -webkit-baseline-middle;
}
 .tomo-logo {
     content: url("../assets/navbar/tomo_logo.png");
}
 .navbar-tomo-logo:hover .tomo-logo {
     content: url("../assets/navbar/tomo_logo_black.png");
}
 .vertical-separator {
     width: 2px;
     height: 40px;
     background-color: #ddd;
     margin: 0 15px;
}
/* Veterans */
/*----------------*/

.fader-car{
        position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.fader-car-inv{
    position: absolute;
right: 0;
height: 100%;
width: 100%;
z-index: 1;
transform: scaleX(-1);
}
 .section-veterans{
     background-color: #F9F4DE ;
}
 .section-veterans .bottom-art{
     background-image: url("../assets/veterans/tomo_concept.png");
     background-position: top center;
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 80vh;
}
 .company_logos {
     min-width: 128px;
     max-width: 128px;
     padding: 10px;
     min-height: 128px !important;
     display: flex !important;
     align-items: center !important;
     -webkit-filter: invert(1);
     filter: invert(1);
     margin-right: 20px;
}
/* About us */
/*----------------*/
 .about-us-text{
     background-color: var(--off-white)29;
     border: 8px solid var(--off-white);
     color: var(--off-white);
     padding: 50px;
}
 @media screen and (max-width: 768px) {
     .about-us-text{
         padding: 20px;
    }
     .dracelest-sketch{
         padding: 50px;
    }
     .dracelest-sketch img{
         max-width: 400px;
         width: 100%;
    }
}
/* art sections */
/*----------------*/
 .art-section-white{
     background: white;
}
 .art-section-beige{
     background: #A29380;
}
 .art-section img{
     width: 100%;
     max-width: 1024px;
}
/* Team */
/*----------------*/
 .button-social{
     color: var(--off-white);
     padding: 10px;
     margin: auto;
     display: inline-block;
}
 .button-social i{
     vertical-align: middle;
}
 .button-social:hover{
     color: var(--off-black);
     background-color:var(--off-white) ;
}
 .carousel-team .carousel-main .carousel-cell{
     width: 100%;
}
 .profile-team{
     max-width: 256px;
     border: 6px var(--off-white) solid;
     background-image: url(../assets/avatar-team/backround_red.png);
}
 .carousel-team .carousel-nav img{
     border: 2px var(--off-white) solid;
}
 .carousel-team .is-nav-selected img{
     border: 6px var(--off-white) solid!important;
}
 .carousel-team .is-nav-selected .info-person{
     background-color: var(--off-white);
     color: var(--off-black);
     padding-top: 15px;
     padding-bottom: 15px;
}
 .carousel-team .carousel-nav .carousel-cell {
     width: 15%;
     height: auto;
     min-width: 110px ;
     max-width: 225px ;
     margin-right: 5px;
     counter-increment: gallery-cell;
     aspect-ratio: 4/4;
}
 .carousel-team .carousel-nav .flickity-enabled .carousel-cell.is-selected {
     height: auto;
     width: 18%;
     min-width: 130px ;
     max-width: 250px ;
     opacity: 1;
}
 .tilted-nav{
     rotate: -2deg;
}
 .info-person{
     line-height: 1em;
}
 .person-bio{
     padding: 15px!important;
}
 @media screen and (max-width: 768px) {
     .carousel-team .carousel-nav .carousel-cell{
         width: 25%;
    }
     .tilted-nav{
         width: 99%;
    }
}
/* Perks */
/*----------------*/
 .section-perks{
     background-color: #1D6FC7;
}
/* CARD 3D */
 .card-inner {
     width: 100%;
     color: var(--off-white);
     position: relative;
     transform-style: preserve-3d;
     perspective: 1000px;
     backface-visibility: hidden;
     transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 .perkCard:not(.flipped):hover .card-front {
     transform: rotateY(-4deg);
     outline: 2px solid var(--off-white);
}
 .card-inner .card-front, .card-inner .card-back {
     position: relative;
     transform-style: preserve-3d;
     perspective: 1000px;
     backface-visibility: hidden;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     background: transparent;
     border: 4px solid var(--off-white);
}
 .perkCard {
     cursor: pointer;
}
 .card-front {
     background: var(--off-black);
}
 .card-inner > * {
     transition: 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 .card-inner .cf-inner {
     transform-style: preserve-3d;
     backface-visibility: hidden;
     width: 100%;
     padding: 13px 0px;
     background: transparent;
     margin: 8px 0px;
     font-size: 1.2em;
}
 .card-front .cf-inner:before, .card-front .cf-inner:after {
     content: "";
     position: absolute;
     width: 50px;
     height: 50px;
     border-color: rgba(255, 255, 255, 0.4);
     z-index: 10;
}
 .card-inner .cf-inner .inner {
     align-items: stretch;
     transform-style: preserve-3d;
     perspective: 1000px;
     backface-visibility: hidden;
     transform: translateZ(95px) scale(0.81);
     text-align: center;
     position: relative;
     z-index: 2;
}
 .card-inner, .card-front, .card-back {
     border-radius: 0.25rem;
}
 .card-inner .card-back {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     transform: rotateY(180deg);
     background: whitesmoke;
}
 .card-back:after {
     color: rgba(255, 255, 255, 0.3098039216);
     position: absolute;
     content: "●●●";
     width: 50px;
     bottom: 2px;
     letter-spacing: 2px;
     text-align: center;
     font-size: 10px;
}
 .card-front:after {
     color: rgba(255, 255, 255, 0.3098039216);
     position: absolute;
     content: "←";
     width: 50px;
     top: -12px;
     left: 3px;
     letter-spacing: 2px;
     text-align: center;
     font-size: 30px;
}
 .card-inner .cf-inner .inner p {
     color: var(--off-white);
     font-weight: 400;
}
 .card-perks.perks {
     color: var(--off-black);
}
 .media-perks {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .icon-perks {
     margin-right: 0.3em;
}
/* VCs */
/*----------------*/
 .vc-logo {
     min-width: 182px;
     max-width: 160px;
     min-height: 160px !important;
     display: flex !important;
     align-items: center !important;
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: center;
     border-radius: 0.25rem;
     padding: 22px;
}
 .vc-logo:hover {
     background-color: rgb(240, 240, 240);
     cursor: pointer;
}
/* Sections */
/*----------------*/

 .slanted-section{
     clip-path: polygon( 0 calc(var(--slope)*var(--asymetry)), 
    /* Start slanted from top left */
     100vw 0, 
    /* Go straight at the top */
     100vw 100%, 
    /* Bottom right */
     0 calc(100% - var(--slope)) 
    /* Bottom left with slant */
     );
}
/* Mirrored Slant */
 .slanted-section-inv {
     clip-path: polygon( 0 0, 100vw var(--slope), 
    /* Slanting from top right */
     100vw calc(100% - calc(var(--slope)*var(--asymetry))), 
    /* Slanting to bottom right */
     0 100% );
}
 .slanted-section, .slanted-section-inv{
     margin-top: calc(var(--slope)* -1* var(--asymetry));
     padding-bottom: 10vh;
     padding-top: 10vh;
     position: relative;
}
.slanted-section.section-flat-top{
    clip-path: polygon(
        100vw 0, 
        /* Flat top-right */
        0 0, 
        /* Flat top-left */
        0 100%, 
        /* Bottom-left */
        100vw calc(100% - var(--slope)) 
        /* Bottom-right slanted */
    ) !important;
}

.slanted-section-inv.section-flat-top{
    clip-path: polygon(
        0 0, 
        /* Flat top left */
        100vw 0, 
        /* Flat top right */
        100vw calc(100% - calc(var(--slope) * var(--asymetry))), 
        /* Slanting to bottom right */
        0 100% 
        /* Flat bottom left */
    ) !important;
    
}


.slanted-section.section-flat-bottom {
    clip-path: polygon(
        0 calc(var(--slope) * var(--asymetry)), 
        /* Start slanted from top left */
        100vw 0, 
        /* Go straight at the top */
        100vw calc(100% - var(--slope)), 
        /* Bottom right flat */
        0 calc(100% - var(--slope)) 
        /* Bottom left flat */
    ) !important;
    margin-bottom: -2px !important;
}

.slanted-section-inv.section-flat-bottom {
    clip-path: polygon(
        0 0, 
        100vw var(--slope), 
        /* Slanting from top right */
        100vw 100%, 
        /* Bottom right flat */
        0 100% 
        /* Bottom left flat */
    ) !important;    
    margin-bottom: -2px!important;
}


/* backgrounds */
 .black-partial-clouds {
     background-color: var(--off-black);
     color: var(--off-white);
     background-image: url(../assets/bg_darkclouds_alt.png), url(../assets/bg_darkclouds_alt.png);
     background-size: 30% auto;
    /* Adjust size as needed */
     background-repeat: no-repeat, no-repeat;
     background-position: top left, bottom right;
}
 @media screen and (max-width: 769px) {
     .black-partial-clouds {
         background-size: 50% auto;
    }
}
 .tomo-mark.section-title-white::after{
     background-image: url(../assets/tomo-mark-white.png);
}
 .tomo-mark.section-title-black::after{
     background-image: url(../assets/tomo-mark-black.png);
}
 .tomo-mark::after{
     content: "";
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top right;
     width: 58px;
     height: 45px;
     position: absolute;
     z-index: 1000;
     margin-top: -27px;
     margin-left: -15px;
}
/* All Section */
/* -------------------*/
 .section-title-white{
     color: var(--off-white);
}
 .p-white{
     color: var(--off-white);
}
 .excla-mark.section-title-white::after{
     background-image: url(../assets/exclamation-white.png);
}
 .section-title-black{
     color: var(--off-black);
}
 .excla-mark.section-title-black::after{
     background-image: url(../assets/exclamation-black.png);
}
 .excla-mark::after{
     content: "";
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top right;
     width: 71px;
     height: 135px;
     position: absolute;
     z-index: 1000;
     margin-top: -52px;
     margin-left: 0%;
     top: 0;
}


/* Footer */
/* -------------------*/
 .footer-anim {
     position: relative;
     overflow: hidden;
}
 footer.section {
     background-color: #03060b;
     clip-path: polygon(0 calc(var(--slope) * var(--asymetry)), 
    /* Slanted top left */
     100vw 0, 
    /* Top right straight */
     100vw 100%, 
    /* Flat bottom right */
     0 100%);
    /* Flat bottom left */
    margin-top: -7vh;
}
 .trademarks {
     color: var(--off-white);
}
 .footer-logo {
     width: clamp(150px, 50%, 250px);
}
/* Music */
/* -------------------*/
 .music-section{
     background-color: var(--off-black);
     background-image: url(../assets/tribal_pattern.png);
}
 


/* Contacts */
/* -------------------*/

.divider {
    position: relative;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #7a7a7a;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .75px;
    margin: 25px 0;
    font-family: "Inder", serif!important;

}

.divider:after, .divider:before {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background-color: #dbdbdb;
}

.divider:not(.is-left):before {
    margin-right: 10px;
}

.divider:not(.is-right):after {
    margin-left: 10px;
}

.contact-text {
    color: var(--off-white);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    line-height: 18px;
    background: rgb(51 50 50);
    height: 97px;
    display: flex;
    border-radius: 10px;
    margin-bottom: 0.5em;
    box-shadow: inset 0px 1px 3px #252525;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    font-family: "Inder", serif!important;

}


.button-social-contact{
    clip-path: polygon(0% 10%, 100% 0%, 93% 91%, 0% 97%);
    border-radius: 0px !important;
}


.is-discord.button-social-contact:hover{
    color: #7289da;

}

.is-linkedin.button-social-contact:hover{
    color: #0e76a8;

}

.is-x-twitter.button-social-contact:hover{
    color: #1DA1F2;

}

.background-white{
    background: var(--off-white);
    padding: 3px;
}



/* Kickstarter */

/* Page offset so content is not hidden behind the fixed banner */
body {
  margin: 0;
  padding-top: 240px;          /* same as banner height sa race */
}

/* body {
  margin: 0;
  padding-top: 260px;
} */

.kickstarter-banner {
  width: 100%;
  height: 220px;
  position: fixed;
  top: 0;
  left: 0;
  background: #05ce78;
  z-index: 100;
  display: flex;
  align-items: center;
}

.kickstarter-banner .container {
  width: 100%;
}

.kickstarter-banner .columns.is-vcentered {
  align-items: center;
}

.kickstarter-minitrailer {
  display: inline-block;
  border: 4px solid white;
  border-radius: 29px;
  transform: rotate(3deg);
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kickstarter-minitrailer img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease, filter .25s ease;
}

.kickstarter-minitrailer:hover {
  transform: rotate(3deg) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
  border-color: #ffffffdd;
}

.kickstarter-minitrailer:hover img {
  filter: brightness(1.12);
}

.kickstarter-leftcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 30px;
}

.ks-topline {
  font-family: 'Junkdog', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin: 0 0 6px 0;
  font-weight: normal;
}

.ks-logo {
  margin: 0 0 6px 0;
  display: block;
      max-width: 200px;
}





.ks-subline {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  margin: 0;
  line-height: 1;
}

@media (max-width: 768px) {
  .column-minitrailer {
    padding: 1em;
  }

  .ks-subline {
  font-size: 95%!important;
    white-space: nowrap;


}
.ks-logo {
    max-width: 180px;
}

}


.cta-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 180px;
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    background: url('../assets/CTA.png') center/contain no-repeat;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    background-color: none!important;
}

.cta-button:focus-within{
    background-color: transparent!important;
  user-select: none;

}

.cta-button.special-ks{
color: #05ce78!important;
background: url('../assets/CTA-ks.png') center/contain no-repeat;

}
.cta-button.special-ks:hover {
    background: url('../assets/CTA-ks_hover.png') center/contain no-repeat;
}

.cta-button:hover h1 {
    color: #FDF7EC !important;
}