@font-face {
    font-family: 'Monument';
    src: url('../fonts/MonumentGroteskTrial-Medium.woff') format('woff');

}@font-face {
    font-family: 'IBM';
    src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');

}

* {
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
form *{
    appearance: auto;
}

:root {
    font-size: 14px;

    --side-padd: 24px;
    --padd-default: 16px;
    --btn-padd: 10px;
    --radius: 8px;
    --b-radius: 24px;
    --header-h:140px;

    --bg:#FCFCEF;
    --dark: #000;
    --grey: #939393;

    --h1: 4.28rem;
    --h1-s: 3.4rem;
    --h1-b: 4.6rem;
    --h2: 4.28rem;
    --h3: 3.8rem;
    --h4: 2.88rem;
    --h5: 2.5rem;
    --h6: 2.25rem;

    --body: 1rem;
    --big-body: 1.43rem;
    --mini-body: 0.86rem;

    --h1-lh: 1.1;
    --h2-lh: 1.1;
    --h3-lh: 1.2;
    --h4-lh: 1.2;
    --h5-lh: 1.3;
    --h6-lh: 1.3;
    --body-lh: 1.4;

    --h1-ls: -1px;
    --h2-ls: -0.6px;
    --h3-ls: -0.4px;
    --h4-ls: -0.4px;
    --h5-ls: -0.2px;
    --h6-ls: -0.2px;

}

body {
    font-family: 'Monument', sans-serif;
    margin: 0;
    padding: 0;
    touch-action: pan-y;
    /*overflow-x: hidden;*/
    font-size: var(--body);
    line-height: var(--body-lh);
    color: var(--dark);
    background: var(--bg);
}
.main-container{
    padding:0  20px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;    font-weight: initial;
}

p {
    margin-bottom: calc(var(--padd-default) * 1.5) !important;
}

p:last-child {
    margin-bottom: 0 !important;
}
.big-body{
    font-size: var(--big-body);
}.mini-body{
     font-size: var(--mini-body);
 }
.blue-text{
    color: #1E5BD6;
}
.ins-padd-sect img, .ins-padd-sect video{
    max-width:100%;
}
.ins-padd-sect{
    padding:20px 60px;
}
/*.row > * {*/

    /*padding-right: var(--side-padd) !important;*/
    /*padding-left: var(--side-padd) !important;*/
/*}*/

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--padd-default);
    padding: 0 calc(var(--padd-default)*2);


    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*margin-right: calc(var(--side-padd) * -1);*/
    /*margin-left: calc(var(--side-padd) * -1);*/
}
.col-6{
    grid-column: span 6;
    /*flex: 0 0 auto;*/
    /*width: 50%;*/
}
.col-4{

     grid-column: span 4;
    /*flex: 0 0 auto;*/
    /*width: 33.33333333%;*/
}.col-3{

     grid-column: span 3;
    /*flex: 0 0 auto;*/
    /*width: 33.33333333%;*/
}
.col-12 { grid-column: span 12; }
.grey-t, .grey-t *, a.grey-t:hover, .grey-t a:hover {
    color: var(--grey);
}

h1, .h1 {
    font-size: var(--h1);
    line-height: var(--h1-lh);

    font-family: 'Monument', sans-serif;
}

h2, .h2 {
    font-size: var(--h2);
    line-height: var(--h2-lh);

    font-family: 'Monument', sans-serif;
}

h3, .h3 {
    font-size: var(--h3);
    line-height: var(--h3-lh);

    font-family: 'Monument', sans-serif;
}

h4, .h4 {
    font-size: var(--h4);
    line-height: var(--h4-lh);

    font-family: 'Monument', sans-serif;
}

h5, .h5 {
    font-size: var(--h5);
    line-height: var(--h5-lh);

    font-family: 'Monument', sans-serif;
}

h6, .h6 {
    font-size: var(--h6);
    line-height: var(--h6-lh);

    font-family: 'Monument', sans-serif;
}

.pt-1 {
    padding-top: var(--padd-default) !important;
}

.pb-1 {
    padding-bottom: var(--padd-default) !important;
}

.mb-1 {
    margin-bottom: var(--padd-default) !important;
}

.pb-2 {
    padding-bottom: calc(var(--padd-default) * 2) !important;
}

.pt-2 {
    padding-top: calc(var(--padd-default) * 2) !important;
}

.pt-3 {
    /*48*/
    padding-top: calc(var(--padd-default) * 3) !important;
}

.pb-3 {
    /*48*/
    padding-bottom: calc(var(--padd-default) * 3) !important;
}

.pt-4 {
    /*64*/
    padding-top: calc(var(--padd-default) * 4) !important;
}

.pb-4 {
    /*64*/
    padding-bottom: calc(var(--padd-default) * 4) !important;
}

.pt-0-7 {
    /*12*/
    padding-top: calc(var(--padd-default) * 0.75);
}

.pt-0-2 {
    /*4*/
    padding-top: calc(var(--padd-default) * 0.25);
}

.pt-0-5 {
    /*8*/
    padding-top: calc(var(--padd-default) * 0.5);
}

.mr-0-5 {
    /*8*/
    margin-right: calc(var(--padd-default) * 0.5);
}

.pt-1-5 {
    /*24*/
    padding-top: calc(var(--padd-default) * 1.5) !important;
}

.mt-1-5 {
    /*24*/
    margin-top: calc(var(--padd-default) * 1.5) !important;
}

.mt-1 {
    /*16*/
    margin-top: var(--padd-default) !important;
}

.pb-1-5 {
    /*24*/
    padding-bottom: calc(var(--padd-default) * 1.5);
}

.pt-2-5 {
    /*40*/
    padding-top: calc(var(--padd-default) * 2.5);
}

.pt-5 {
    /*80*/
    padding-top: calc(var(--padd-default) * 5) !important;
}

.pb-5 {
    /*80*/
    padding-bottom: calc(var(--padd-default) * 5) !important;
}

.pt-6 {
    /*96*/
    padding-top: calc(var(--padd-default) * 6);
}

.pb-6 {
    /*96*/
    padding-bottom: calc(var(--padd-default) * 6) !important;
}

.pb-8 {

    padding-bottom: calc(var(--padd-default) * 8) !important;
}.pb-9 {

     padding-bottom: calc(var(--padd-default) * 9) !important;
 }.pb-12 {

      padding-bottom: calc(var(--padd-default) * 12) !important;
  }

.pt-8 {

    padding-top: calc(var(--padd-default) * 8) !important;
}.pt-9 {

     padding-top: calc(var(--padd-default) * 9) !important;
 }.pt-12 {

      padding-top: calc(var(--padd-default) * 12) !important;
  }.pt-14 {

       padding-top: calc(var(--padd-default) * 14) !important;
   }.pb-14 {

        padding-bottom: calc(var(--padd-default) * 14) !important;
    }

.pt-7-5 {
    /*120*/
    padding-top: calc(var(--padd-default) * 7.5);
}

.mr-0-7 {
    margin-right: calc(var(--padd-default) * 0.75);
}

a {
    color: var(--dark);
    text-decoration: none;
}

::-moz-selection { /* Code for Firefox */
    color: var(--bg);
    background: #385C3E;
}

::selection {
    color: var(--bg);
    background: #385C3E;
}

*, :after, :before {
    box-sizing: border-box;
}

.ttu {
    text-transform: uppercase;
}

.tar {
    text-align: right;
}

.tac {
    text-align: center;
}

.aite {
    align-items: end;
}

.full-h {
    height: 100dvh;
}
hr{
    color:#ACACAC!important;
    border-radius: 0!important;
}
.h-90 {
    height: 90vh;
}

.br {
    border-right: 1px solid var(--grey-l);
}








/*----------barba-----------------*/
.transition {
    z-index: 9999;
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: clip;
}

.transition__dark {
    opacity: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*-------------big-small grid----------------*/
.layout-buttons {

}

.layout-btn {
    color: #939393;
    cursor: pointer;
    display: inline-block;
}

.layout-btn.is--active {
    color: #000;
}


.layout-grid {

    padding-left: calc(var(--padd-default)*2);
    padding-right: calc(var(--padd-default)*2);
}

.layout-grid__list {
    grid-row-gap: var(--padd-default);
    column-gap:var(--padd-default);
    flex-flow: wrap;
    display: flex;
    position: relative;
}

.layout-grid__item {
    will-change: transform;
    position: relative;
}

.layout-grid__card {
    flex-flow: column;
    width: 100%;
    display: flex;
    position: relative;
}

.layout-grid__card-visual {
    aspect-ratio: 4 / 5;

    overflow: hidden;
}

.layout-grid__card-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


[data-layout-status="large"]{
    --columns: 3;
    --column-gap: var(--padd-default);
}

[data-layout-status="small"]{
    --columns: 5;
    --column-gap: var(--padd-default);
}

[data-layout-grid-item]{
    width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
}

[data-layout-grid-item-title]{
    transition: all 0.8s cubic-bezier(0.65, 0, 0.1, 1);
}


/* Change card layout while we're in grid mode */
[data-layout-status="large"] [data-layout-grid-item] .layout-grid__card-sub{
    transition-delay: 0.6s;
}


/* Change card layout while we're in list mode */
[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-title{
    font-size: 1em;
}

[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-sub{
    opacity: 0;
    pointer-events: none;
}


/* Define layout sizes per breakpoint */
@media screen and (max-width: 767px){
    [data-layout-status="large"]{
        --columns: 1;
        --column-gap: 0em;
    }

    [data-layout-status="small"]{
        --columns: 2;
        --column-gap: 1em;
    }
}
/*-------------footer anim----------------*/

.mwg_effect020 {
    height: 100vh;    width: 100%;
    overflow: hidden;
    position: absolute;
}

.mwg_effect020 img {

    height: 10vw;
    position: absolute;
    object-fit: cover;

    z-index: 5;
}


.mwg_effect020 .medias img {
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}


/*-------------product----------------*/
.product-extra span.green-extra{
    background-color: #239800;
}
.product-extra span{
    display: inline-block;
    margin-right: 3px;
    background-color: #000;
    width:11px;
    height:11px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    animation: fadePulse 1.2s infinite alternate;
}
@keyframes fadePulse {
    0%   { opacity: 0.2;  }
    50%  { opacity: 1;    }
    100% { opacity: 0.2; }
}
.product-extra{
    font-family: 'IBM',serif;
    text-transform: uppercase;
}
.top-product-brand-wrap{
    display: flex;
    margin-bottom:calc(var(--padd-default) * 1.25);
}
.top-product-brand{
    padding:var(--padd-default) calc(var(--padd-default) * 1.25);
    background-color: #fff;
    border:1px solid #000;
    display: inline-block;
}
.top-product-brand img{
    height: 20px;
}
.product-back-parent{
    margin-left: auto;
}


.product-table{}
.product-spec{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #000;
font-family: 'IBM',serif;
}
.product-description{
    width:75%;
}
.product-spec:last-child{
    border-bottom: 0;
}
.pr-spec-name{

}
.pr-spec-value{
    text-align: right;
}
/*-------------product holder----------------*/


.product-grid{

}

.pr-grid-info{
    position: absolute;
    top: 0;left: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.pr-grid-title,.pr-grid-brand{
    display: block;
    padding: 10px;
}
.pr-grid-title{
    background-color: #fff;
border:1px solid #000;

}
.pr-grid-brand{
    background-color: #000;
    color:#fff;

}

/*-------------home grid----------------*/
.home-scroll{
    text-align: center;
    position: absolute;
    bottom: var(--padd-default);
    left:var(--padd-default);
    right:var(--padd-default);
}

.HomePage-main header {
    position: absolute;
    left:0;right:0;
    z-index: 999999;
}
.b-layout{
    background-color: var(--bg);
    width: 100%;


}
:root {
    --margin: 30rem;
    --gap: 20rem;
    --column: calc((var(--rvw) * 100 - var(--margin) * 2 - var(--gap) * 9) / 10);
}

@media (max-width: 1024px) {
    :root {
        --margin: 15px;
        --gap: 10rem;
        --column: calc((100vw - var(--margin) * 2 - var(--gap) * 5) / 6);
    }
}
:root {
    --curve: cubic-bezier(0.19, 1, 0.22, 1);
    --in-out: cubic-bezier(0.6, 0.14, 0, 1);

    --black: black;
    --white: white;

    --font-mono: 'Roboto Mono', monospace;
}

.underline {
    position: relative;
}

.underline::after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    transition: transform 1s cubic-bezier(0.35, 0.42, 0, 1);
}

.underline:hover::after {
    transform: scaleX(1);
    transform-origin: 100% 50%;
}
* {
    margin: 0;
    padding: 0;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

html {
    background: #ffffff;
    color: #000000;
    font-size: calc((1 / 1440) * 100vw);
    overflow: hidden;
}

@media (max-width: 1024px) {
    html {
        font-size: 1px;
    }
}

body {

    margin: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.no-transform,
.no-transform * {
    transform: none !important;
}


/* Assuming `@include underline` just adds `text-decoration: underline;` */
.frame {
    width: 100%;
    position: fixed;
    padding: var(--margin);
    top: 0;
    z-index: 9;
    font-size: 12rem;
    text-transform: uppercase;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.frame-left {
    display: flex;
    align-items: center;
    gap: 20rem;
}

.frame-left > a,
.frame-left h1 a {
    text-decoration: underline; /* replaced @include underline */
}

.frame h1 {
    font-size: inherit;
    font-weight: normal;
}

.cdawrap {
    max-width: 350rem;
    text-align: right;
    line-height: 1.2;
}

.cdawrap a:hover {
    text-decoration: underline;
}

/* Media queries */
@media (max-width: 1024px) {
    .frame {
        font-size: 10px;
        flex-direction: column;
    }

    .frame-left {
        width: 100%;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        margin-bottom: 5px;
    }

    .frame-left h1 {
        width: 100%;
        order: 9;
        text-align: center;
    }

    .cdawrap {
        margin: 0 auto;
        text-align: center;
    }
}

#hero {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    cursor: grab;
}

#images {
    width: 100%;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    position: relative;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    white-space: normal;
}

.item-wrapper {
    will-change: transform;
}

.item-image {
    overflow: hidden;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.item small {
    width: 100%;
    display: block;

}

.item small .line-mask {
    transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1);
}

.item small .line-mask .line {
    transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1);
}

.item small:not(.visible) .line-mask {
    transform: translateY(100%);
}

.item small:not(.visible) .line-mask .line {
    transform: translateY(110%);
}

html.dragging #hero {
    cursor: grabbing;
}