/* #region -==== VARS =============================== */

:root{

/*     --font :"Inter", sans-serif; */
/*     --font2:"Plus Jakarta Sans", sans-serif ; */

    --font: "Albert Sans", sans-serif;
    --font2: "Albert Sans", sans-serif;

    /* sizes */
    --fontsize:clamp(14px, 3vw, 18px); 
    --fontsubsize:clamp(12px, 1vw, 14px);
    --maxw  : 1400px;
    --maxwp : 1600px;
  
    /* paddings */
    --pad: clamp(30px, 3.5vw, 70px); 
    --pad2: calc( var(--pad) * 1.5 ); 

    /* colors */
    --clr-primary        : rgb(0, 30, 216);  
    --clr-primary--op0   : rgba(0, 30, 216, 0);
    --clr-primary--op010 : rgba(0, 30, 216, 0.10);
    --clr-primary--op025 : rgba(0, 30, 216, 0.25); 
    --clr-primary--op05  : rgba(0, 30, 216, 0.5);
    --clr-primary--op075 : rgba(0, 30, 216, 0.75);
 
    --clr-secondary        : rgb(144, 208, 255);
    --clr-secondary--op0   : rgba(144, 208, 255, 0);
    --clr-secondary--op010 : rgba(144, 208, 255, 0.10);
    --clr-secondary--op025 : rgba(144, 208, 255, 0.25);
    --clr-secondary--op05  : rgba(144, 208, 255, 0.5);
    --clr-secondary--op050 : rgba(144, 208, 255, 0.5);
    --clr-secondary--op075 : rgba(144, 208, 255, 0.75);

    --clr-primary-dark       : rgb(0, 12, 80);
    --clr-primary-dark--op0  : rgba(0, 12, 80, 0);
    --clr-primary-dark--op010: rgba(0, 12, 80, 0.10);
    --clr-primary-dark--op025: rgba(0, 12, 80, 0.25);
    --clr-primary-dark--op05 : rgba(0, 12, 80, 0.5);
    --clr-primary-dark--op075: rgba(0, 12, 80, 0.75);


    --clr-grayblue-soft: rgb(135 147 181);


    --clr-head      : rgb(0, 52, 133);
    --clr-head2     : rgb(48, 81, 138);
    --clr-text      : rgb(72, 101, 152);
    --clr-text2     : rgb(34, 55, 92);
    --clr-text3     : rgb(151, 178, 226);
    --clr-pagebg    : rgb(255, 255, 255);
    
    --clr-pagebg_op0: rgba(255, 255, 255, 0);

    /* props */ 
    --bor-rad05:4px;
    --bor-rad:8px;
    --bor-rad2:20px;

    /* --- easings --- */
    --easeInOutExpo : cubic-bezier(0.87, 0, 0.13, 1);
    --easeInOutCirc : cubic-bezier(0.85, 0, 0.15, 1);
    --easeInOutBack : cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);
    --easeInOutQuad : cubic-bezier(0.45, 0, 0.55, 1);
    --easeOutExpo   : cubic-bezier(0.16, 1, 0.3, 1);
    --easeOutBack   : cubic-bezier(0.34, 1.56, 0.64, 1);

}



/* #endregion -*/


/* #region ===== RESETS & INITS =====================  */


html,
body {
    height             : 100%;
    min-height         : 100vh;
    padding            : 0;
    margin             : 0;
    height             : -webkit-fill-available;
    max-width: 100vw;
}

html{
    scroll-behavior: smooth;
    max-width: 100vw;
}

body *,
html * {
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
    margin             : 0;
    padding            : 0;
    position           : relative;

}

body {
    
    display                      : flex;
    flex-direction               : column;
    min-height                   : 100vh;
    font-family                  : var(--font);
    font-weight                  : 450;
    font-style                   : normal;
    font-display                 : swap;
    font-optical-sizing          : auto;
    font-size                    : var(--fontsize);
    -webkit-font-smoothing       : antialiased;
    -moz-osx-font-smoothing      : grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings        : "liga";
    text-rendering               : optimizeLegibility;
    letter-spacing               : .01em;
    color                        : var(----clr-txt);
    line-height                  : 1.4em;
    background-color             : var(--clr-pagebg);
    max-width                    : 100vw;
    position                     : relative;
    max-width                    : 100%;
/*     overflow-x                   : hidden;
 */    color: var(--clr-text);
}


body > main > section{

    --spad: calc(var(--pad) * 1.6);
    position: relative;
    padding-top: var(--spad);
    padding-bottom: var(--spad);
    background-color : var(--clr-pagebg);
}

.page__body{
    display: flex;
    flex:1 0 auto;
    justify-content: stretch;
    flex-direction: column;
    position: relative;
}

body *{
    background-size: cover;
    background-position: center center;
}


::-webkit-scrollbar {width: 6px; height:6px;}
::-webkit-scrollbar-track {background: var(--clr-pagebg)}
::-webkit-scrollbar-thumb {background: var(--clr-head); border-radius: 4px;} 


ul li, ul ol{
    list-style: none;
    padding: 0;
    margin: 0;

}

ul li a, ul ol a{
    text-decoration: none;
    color: inherit;
}

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

p a {
    text-decoration: underline;
    color: inherit;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--font2);
    color: var(--clr-head);
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2em;
}

h1{ font-size: calc( var(--fontsize) * 2.2) }
h2{ font-size: calc( var(--fontsize) * 2.0)  }
h3{ font-size: calc( var(--fontsize) * 1.8)  }
h4{ font-size: calc( var(--fontsize) * 1.6)  }
h5{ font-size: calc( var(--fontsize) * 1.4)  }
h6{ font-size: calc( var(--fontsize) * 1.2)  }


h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{
    margin-top:1.2em
}


address{
    font-style: normal;
}


/* #endregion -*/


/* #region ===== COMMON STYLES ====================== */


/* #region   :..... Commons ............................. */


.none{
    display:none !important;
}

.-hdn,.--hdn{
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    transform: scale(0) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.-tac{
    text-align: center;
}

.__mlra{
    margin-left:auto;
    margin-right:auto;
}

.disabled{
    pointer-events: none;
}

.mdc,.-mid,.--mid{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--maxw);
    padding-left:var(--pad);
    padding-right:var(--pad);
    position: relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
}


/* #endregion ... Commons */


/* #region   :..... Buttons & Links ............................. */

button,
[class*="button"]{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    overflow:hidden;
    cursor:pointer;
    transition: all 100ms ease-in-out;
    padding:calc( var(--pad) / 4) calc( var(--pad) / 3);
    border-radius: var(--bor-rad05);

    text-wrap: nowrap;
    font-weight: 650;
    font-family: var(--font2);
    background-color: initial;
    color: inherit;

    border:1px solid currentColor;
}

[class*="button"] i + span{
    margin-left: 1em;
}

[class*="button"]:hover, [class*="button"]:active,
.button--fill{
    color: white;
    background-color: var(--clr-primary);
}

.goto-link{
    display: inline-block;
    border-bottom:1px solid rgb(230, 230, 230);
    display: flex;
    justify-content:  space-between;
    align-items: center;
    color: var(--clr-text2);
}

.goto-link i{
    margin-left: .5em;
    font-size: 1.8em;
    color: var(--clr-primary);
}

p + [class*="button"],
p + .goto-link{
    margin-top:clamp(1.8em, calc( var(--pad) / 2), 60px);
}


[class*="button"].--tip{
    overflow: initial;
}


[class*="button"].--tip span{
    --tipColor : var(--clr-primary-dark);
    position:absolute;
    background-color:  var(--tipColor);
    color:white;
    pointer-events: none;
    border-radius: var(--bor-rad);
    opacity: 0;
    top:calc(-100% + -1.2em);
    left:calc(50% - 1em);
    padding:1em;
    z-index:99;
    opacity: 0;
    transition: all 300ms ease-in-out;
    transform: translateX(-50%) translateY(20px) scale(1);
    box-shadow: -1px 2px 3px rgba(0,0,0,0.3);
}

[class*="button"].--tip span::before{
    --icoSize:10px;
    content:" ";
    width: 0;
    height: 0;
    bottom:0;
    left:50%;
    transform: translateX(-50%) translateY(90%);
    border-left: var(--icoSize) solid transparent;
    border-right: var(--icoSize) solid transparent;
    border-top: calc( var(--icoSize) * 1.2  ) solid var(--tipColor);
    position: absolute;
}

[class*="button"].--tip:hover span{
    opacity: 1;
    transform: translateX(-50%) translateY(-3px) scale(1);
}







/* #endregion < Buttons */


/* #region   :..... Inputs & Forms ...................... */


::placeholder {
    color:var(--c3);
    opacity: 1; 
}
  
:-ms-input-placeholder {
    color:var(--c3);
    opacity: 1; 
}

::-ms-input-placeholder {
    color:var(--c3);
    opacity: 1; 
}


input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
input[type=url],
textarea{
    background-color: transparent;
    border:none;
    padding: .5em .9em .5em 0 ;
    margin: .3em 0;
    width: 100%;
    font-family: inherit;
    font-size: 1em;
    cursor: inherit;
    line-height: inherit;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    outline:none;
    transition: all 300ms ease-out;
    position: relative;
    opacity: .6;
}

textarea{
    min-height: 120px;
}

input[type=submit]{
    border:none;
    margin-top:1em;
    align-self: flex-end;
}


input[type=checkbox]{
    width: 1em;
    height: 1em;
    margin-right: .3em;
    accent-color: inherit;
    position: relative;
}



select{
    background:none;
    border:1px solid currentColor;
    border-radius:.2em;
    padding:.3em .5em;
    color: inherit;
    font-family: inherit;
}

select option{
    background-color: inherit;
    position: relative;
    color: white;
}

textarea:focus, input:focus{
    opacity: 1; 
}

/* --------- forms --------- */

form {
    display: flex;
    flex-direction: column;
    border-radius: var(--bor-rad);
    padding:3em;
    max-width: 600px;
    position: relative;
}


/* contents */

form  fieldset{
    border:none;
    outline:none
}

form input, form textarea{
    border-bottom:none !important;
    padding:0 !important;
    margin: 0 !important;
}

form .__inputs .__row{
    display: flex;
    align-items: center;
    border-bottom:1px solid currentColor;
    padding: 1em 0;
    position: relative;
}

form .__inputs .__row::after{
    content:" ";
    display: block;
    position: absolute;
    width: 100%;height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    bottom: 0; left: 0;
    background-color: currentColor;
    transition: all 400ms var(--easeOutExpo, ease-in-out);
}

form .__inputs .__row:focus-within{
    border-bottom:1px solid currentColor;
}

form .__inputs .__row:focus-within::after{
    transform: scaleX(1);
}

form .__inputs .__row > i{
    margin-right: 1em;
    font-size: 1.2em;
    color: currentColor;
}

form .field-group{
    margin:2em 0;
}

form .field-group-title{
   font-weight: bold;
}



/* textarea fix */

form .__inputs .__row.--textarea{
    align-items: flex-start;
}

form .__inputs .__row.--textarea i{
    margin-top:.3em
}

/* aside */

form .__aside{
    margin-top:1em;
}

form .__aside .__row.--policies{
    font-size: .85em;
    display: flex;
    margin-bottom:2em;
}

form .__aside .__row.--policies > label{
    display: flex;
    cursor:pointer
}


form .__aside .__row.--policies i.icon-checkmark{
    display: block;
    width: 15px;
    height: 15px;
    flex:1 0 auto;
    margin-top:.4em;
    margin-right: .7em;
    border-radius: 50%;
    border:2px solid currentColor;
}

form .__aside .__row.--policies input:checked + label > i{
    background-color: currentColor;
}


form .__aside .__row.--policies a{
    border-bottom:1px dashed currentColor;
}

form .__row.--submit{
    margin-top:1em;
}


form.disabled input[type="submit"]{
    opacity:.3;
    cursor:not-allowed;
    pointer-events: none;;
}

form .error {
    border-bottom:2px dashed #ff0055;
}

form .inp-cont {
    position: relative;
}




/* --- Styles --- */



/* #endregion ... Inputs & Forms */


/* #region   :..... Modes & Colors ............................. */

/* color : inverse*/

.-color--inv{
    color: white;
    background-color: var(--clr-primary);
}

.-color--inv h1, .-color--inv h2, .-color--inv h3, .-color--inv h4, .-color--inv h5, .-color--inv h6{
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1.2em;
}

.-color--inv [class*="button"]{
    border:1px solid white;
    color: white;
}

.-color--inv [class*="button"]:hover,
.-color--inv [class*="button"]:active{
    background-color: var(--clr-secondary);
    border:1px solid var(--clr-secondary);
    color: var(--clr-primary);
}


.-color--inv form .__inputs .__row  {
    border-bottom:1px solid var(--clr-secondary--op025)
}

.-color--inv form .__inputs .__row input:placeholder-shown,
.-color--inv form .__inputs .__row textarea:placeholder-shown {
    opacity:.6;
}

.-color--inv form .__inputs .__row input,
.-color--inv form .__inputs .__row textarea {
    color: var(--clr-secondary);
    opacity: 1;
}

.-color--inv form .__inputs .__row:focus-within input,
.-color--inv form .__inputs .__row:focus-within textarea {
   color: white; 
}


.-color--inv form .__inputs .__row > i {
    color: var(--clr-secondary)
}

.-color--inv form  .__row.--policies {
    color: var(--clr-secondary)
}

.-color--inv form .__row.--policies input[type="checkbox"]:checked + label {
    color: white;
}


.-color--inv form .__row  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
}


/* #endregion < Modes & Colors */


/* #region   :..... Medias & Patterns ............................. */

.video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.dot-pattern, .pattern-overlay::before, ._dptn::after{
    content:" ";
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    opacity:.3;
    z-index:2;
    background:url(
        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBX45Xb8AAAAASUVORK5CYII=
    ) repeat;
    pointer-events: none;
}

.-gptn,
.grain-pattern:after, ._gptn::after {
  content: " ";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 1;
  position: absolute;
  background-image: url("/public/files/photos/noise.jpg");
  background-size: 512px 512px;;
  display: block;
  opacity: .2;
  pointer-events: none;
  animation: noise 1s steps(2) infinite;
}

@-webkit-keyframes noise {
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}
@keyframes noise {
  0% {
    transform: translate3d(0, 9rem, 0);
  }
  10% {
    transform: translate3d(-1rem, -4rem, 0);
  }
  20% {
    transform: translate3d(-8rem, 2rem, 0);
  }
  30% {
    transform: translate3d(9rem, -9rem, 0);
  }
  40% {
    transform: translate3d(-2rem, 7rem, 0);
  }
  50% {
    transform: translate3d(-9rem, -4rem, 0);
  }
  60% {
    transform: translate3d(2rem, 6rem, 0);
  }
  70% {
    transform: translate3d(7rem, -8rem, 0);
  }
  80% {
    transform: translate3d(-9rem, 1rem, 0);
  }
  90% {
    transform: translate3d(6rem, -5rem, 0);
  }
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}

.--vid-play::before{
    font-family: 'baseicon' !important;
    content: "\f00b";
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index:2;
    font-size: clamp(18px, 8vw, 5em );
    color:white;
    text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.37);
    opacity: 0.8;
    transition: all 300ms ease-in-out;
}

.--vid-play:hover::before{
    opacity: 1;
}


/* #endregion < Medias & Patterns */


/* #region   :..... Lists - Tables - Charts  ............................. */

.table{
    display: table;
    width: 100%;
    border-radius: var(--bor-rad);
    overflow: hidden;
    border:1px solid var(--clr-secondary--op025);
}


.table.--2col .__row{
    display: table-row;
}

.table.--2col .__row:last-child .__cell{
    border-bottom: none;
}

.table.--2col .__cell{
    display: table-cell;
    padding:1em;
    border:1px solid var(--clr-primary--op025);
}


.-color--inv .table.--2col .__cell{
    border-bottom:1px solid var(--clr-secondary--op025);
}

.-color--inv .table.--2col .__cell:first-child{
    border-right:1px solid var(--clr-secondary--op025);
}




._ul--icon-ok ul li::before{
    font-family: 'baseicon' !important;
    content:"\eb7a"!important;
}

/* #endregion < Lists - Tables - Charts */


/* #region   :..... Popups .............................. */

#popups-win{
    position: fixed;
    z-index: 999;
    top:10vh; right:-1px;
    width:1px;
    height:1px;
    transition: all 400ms ease-out;
}

.popup-msg.prepare{
    max-height: 0;
}

.popup-msg{
    max-width:420px;
    width: 90vw;
    max-height:calc( 85vh );
    position:relative;
    transform: translateX(0px);
    transition: all 400ms ease-out;
    overflow:hidden;
    display: flex;
    justify-content: flex-end;
}

.popup-msg > .container{
    position: relative;
    display: inline-block;
    min-height:100%;
    background: var(--clr-primary);
    color:white;
    padding: calc(10px + 1vw) calc(10px + 2vw);
    margin:calc(5px + .5vw) 0;
    overflow:hidden;
    border-radius: 10px;
    font-weight: 500;
}


.popup-msg.success > .container{
    background: rgba(248,248,248,1);
    color: var(--clr-primary);
    border:1px solid var(--clr-primary);
}
.popup-msg.error   > .container{background: #df0038;}
.popup-msg.info    > .container{background: var(--clr-primary); color:white;}

.popup-msg.visible{
    transform: translateX(calc( -100% - 5vw ));
    will-change: transform;
}

.popup-msg.remove{
    transition: all 400ms ease-in;
    max-height : 0!important;
    margin:0!important;
    will-change: all;
}

.popup-msg .msg-cont p{
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
}

.popup-msg .msg-cont p:last-child{
    border-bottom: none;
}

.popup-msg .button-left{
    text-align: left;
}

.popup-msg button{
    display: inline-block;
    padding: 1em;
    border: 1px solid currentColor;
    background: none;
    border-radius: 4px;
    margin-top: 20px;
    text-align: center;
    cursor:pointer;
    color: inherit;
    font-weight: 600;
}


/* Popup Frames */


[class*="popup-frame--"]{
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 99;
    background: white;

}
[class*="popup-frame--"].visible{
    visibility: visible;
}


[class*="popup-frame--"] > .popup-frame-menu{
    position: absolute;
    right:calc(10px + 3vw);
    top:calc(10px + 3vw);
    z-index: 3;
}

[class*="popup-frame--"] > .popup-frame-menu .btn__wrapper{
    background-color: rgba(255, 255, 255, 0.527);
}

[class*="popup-frame--"] > .popup__body{
    overflow: auto;
    left: calc(10px + 3vw);
    top: calc(10px + 3vw);
    right: calc(10px + 3vw);
    position: absolute;
    bottom: calc(10px + 3vw);
}



/* -------- popup win ----------*/

.popup-win{
    position: fixed;
    z-index:100;
    width: 100%;
    height: 100%;
    left:0; top:0;
    transform: translateY(100%);
}


.popup-win.--visible{
    transform: translateY(0%);
}

/* ------------- */

.popup-win .__bg{
    position: absolute;
    background-color: rgba(0 0 0 / .4);
    left:0; top:0;
    width: 100%; height: 100%;
    transition:all 400ms ease-in-out;
    opacity: 0;
}

.popup-win .__bg.--visible{
    opacity: 1;
}

/* ------------- */

.popup-win .__win{
    position: absolute;
    height: calc(100% - 2em - 1vw);
    width: calc(100% -  2em - 1vw);
    max-width: 800px;
    max-height: 1000px;
    overflow: hidden;
    left:50%; top:50%;
    background-color: white;
    border-radius: 1em;
    padding:calc(1em + 1.2vw);
    display: flex;
    flex-direction: column;
    transition: all 200ms 300ms ease-in-out;
    transform: translate(-50%, 00%) scale(.3);
    opacity: 0;
}

.popup-win .__win.--visible{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}



/* ------------- */


.popup-win .__win .__header{
    display: flex;
    justify-content: space-between;
    margin-bottom:1em;
}

.popup-win .__win .__header {
    font-size: 1.4em;
}
.popup-win .__win .__header i {
    font-size: 1.4em;
    cursor:pointer;
}

.popup-win .__win .__body {
    flex:1;
    overflow-y:auto;
    overflow-x: hidden;
}


.popup-win .__win .__body > * {
    padding:0;
}

.popup-win .__win .__body  .page__contents > * {
    padding:0;
}

/* #endregion  =*/


/* #region   :..... Blocks ......................................... */


/* #region ... Block - Zigzag */

.block--zigzag > .__layout{
    max-width:1000px;
    gap: calc( var(--pad) + 20px );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    margin-right: auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
}

.block--zigzag .__content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc( var(--pad) + 40px );
}

.block--zigzag .__content .__media{
    flex:1 1 50%;
    width: 50%;
    max-width: calc(  100vw - 2*( var(--pad)));
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.block--zigzag .__content .__media  .--video,
.block--zigzag .__content .__media  .--image{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--bor-rad2);
    box-shadow: -1px 1px 6px rgba(0,0,0,0.5);
    z-index:1;
}

.block--zigzag .__content .__media .--video:nth-child(2),
.block--zigzag .__content .__media .--image:nth-child(2){
    z-index:1;
}


.block--zigzag .__content .__media > *:nth-child(1){
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    max-width: 360px;
    max-height: 360px;
    position: relative;
    inset: initial;
    z-index:1;
}

.block--zigzag .__content .__media video,
.block--zigzag .__content .__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.block--zigzag .__content .__media > *:nth-child(2){
    position: absolute;
    width: 40%;
    height: 40%;
    right:-2em; bottom:-2em;
    min-width: 50px;
    min-height: 50px;
    z-index:2;
}



/* text */

.block--zigzag .__content .__text{
    flex:1 1 50%;
    width: 50%;
    text-align: left;
}




.block--zigzag .__content .__text .goto-link{
    margin-top:1em;
}



/* reverse */

.block--zigzag .__content:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.block--zigzag .__content:nth-of-type(2n) .__media > *:nth-child(2){
    left:-2em; bottom:-2em;
}

.block--zigzag .__content:nth-of-type(2n) .__media{
    justify-content: flex-end;
}


/* responsive */

@media screen and (max-width: 775px) {

    .block--zigzag{
        gap:6em
    }

    .block--zigzag .__content{
        flex-direction: column!important;
        gap:4em;
    }

    .block--zigzag .__content .__media{
        flex:1 1 100%;
        width: 100%;
        display: flex;
        justify-content: center!important;
        align-items: center;
    }

    .block--zigzag .__content .__media > *:nth-child(2){
        left: 50%;
        transform: translateX(-50%);
    }

    .block--zigzag .__content:nth-child(2n) .__media > *:nth-child(2){
        left:50%;
        transform: translateX(-50%);
    }

    .block--zigzag .__content .__text{
        flex:1 1 100%;
        width: 100%;
        max-width: 400px;
        text-align: left;
        font-size: 1.1em;
        font-weight: 500;
        line-height: 1.4em;
    }
}


/* #endregion < Block - Zigzag */


/* #region ... Parallax Medias */

.block--parallax-medias{
    --mediaMS:600ms;
    --mediaTB:clamp(1em, calc( var(--pad) * 3) , 8em);
    padding: var(--pad) 0;
    display:block;
}

.block--parallax-medias .__layout{
    display: block;
    position: static;
    margin-left:auto;
    margin-right: auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
    max-width: var(--maxw);
}

/* texts */

.block--parallax-medias .__texts{
    display: block;
    z-index:2;
}

.block--parallax-medias .__texts .__item.has-media{
    height: 100vh;
    width: calc(55% - var(--pad));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.block--parallax-medias .__texts .__item.has-media .__content{
    border-radius: 0 var(--bor-rad2) var(--bor-rad2) 0;
    padding:calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 2) 0;
}

.block--parallax-medias .__item.no-media{
    --pady:clamp(var(--pad), 5vw, 5em);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 800px;
    
    margin:clamp(var(--pad), 10vw, 5em) auto;
    z-index: 2;
    border-radius:var(--bor-rad2);
    background-color: var(--clr-primary);
    padding: calc( var(--pady) * 1.5 ) var(--pad);
}

.block--parallax-medias .__item .button{
    margin-top: 2em;;
}

/* medias */

.block--parallax-medias .__medias{
    top:var(--mediaTB);
    bottom:var(--mediaTB);
    right:0;
    width: 45vw;
    position: absolute;
    z-index:1;
    pointer-events: none;
}

.block--parallax-medias .__medias .__wrapper{
   position: sticky;
   top:0;
   overflow: hidden;
   width: 45vw;
   height: clamp(300px, calc(80vmin - var(--pad)), 800px);
   top:calc(var(--pad) * 2  + 50px);
}

.block--parallax-medias .__medias .__item{
    overflow:hidden;
    position: absolute;

    width:100%;
    height: 100%;
    top:0;
    left:0;

    border-top-left-radius: var(--bor-rad2);
    border-bottom-left-radius: var(--bor-rad2);

    background-color: #fcfcfc;
    display:flex;
    justify-content: center;
    align-items: center;

    transition: all var(--mediaMS) var(--easeInOutCirc);
    transform:scale3d(1,1,1) translate3d(100%,0,0);
    transform-origin: center center;
}

.block--parallax-medias .__medias .__item  video{
    width:100%;
    height: 100%;
    object-fit: cover;
    transform:scale(1.8);
    object-position: center center;
    left:0;
    top: 0;
    transition: all var(--mediaMS) var(--easeInOutCirc);
}


/* state : active */

.block--parallax-medias .__medias .__item.active{
    transform:scale3d(1,1,1) translate3d(0,0,0);
}

.block--parallax-medias .__medias .__item.active video{
    transform:scale(1);
}



/* responsive */

@media screen and (max-width: 1000px) {
    

    .block--parallax-medias .__texts .__item.has-media{
        width: 100%;
        max-width: 500px;
    }

    .block--parallax-medias .__medias{
        width: 80vw;
    }

    .block--parallax-medias .__medias .__wrapper{
        width: 100%;
        top:calc(var(--pad) * 3  + 50px);
    }

}



/* #endregion < Showcase - Services */


/* #region ... Sliding Boxes Gallery  */

.block--gallery-slide-boxes  .__gallery{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: 1em;
}

/* --- boxes --- */

.block--gallery-slide-boxes  .__gallery > .__box{
    flex: 1 1 calc(25% - 1em );
    aspect-ratio: 1 / 1;
    background-color: rgb(243, 243, 243);
    border-radius: var(--bor-rad);
    overflow: hidden;
    box-shadow: -1px 1px  6px rgba(0, 0, 0, 0.2);;
}


/* image */
.block--gallery-slide-boxes  .__gallery > .__box .item{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset:0;
    transition:all 800ms var(--easeInOutQuad);
    transition-duration: 800ms;
    visibility: hidden;
    transform: translateY(100%);
}

/* image */
.block--gallery-slide-boxes  .__gallery > .__box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.block--gallery-slide-boxes  .__gallery > .__box .item.active {
    visibility: visible;
    transform: translateY(0);
}

/* info */

.block--gallery-slide-boxes  .__gallery > .__info .__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    text-align: left;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: clamp(13px, 1.4vw, 18px );
    padding:clamp(10px, 4vw, 40px);

    font-size: clamp(14px, 3cqw, 18px );
    padding:clamp(16px,  1.6cqw, 40px);

    line-height: 1.2em;
}

       


/* --- header --- */

.block--gallery-slide-boxes  .__gallery > .__header{
    border-radius: var(--bor-rad);
    padding: var(--pad);
    display: flex;
    flex-direction: row;
    background-color: var(--clr-primary);
    justify-content: flex-end;
    flex: 1 1 calc(50% - 1em );
    aspect-ratio: initial;
    gap:1em;
}

.block--gallery-slide-boxes  .__gallery > .__header .__title{
    color: white;
    width:40%;
    text-align: right;
    padding-right:1em;
}

.block--gallery-slide-boxes  .__gallery > .__header .__title > .__h {
    color:white;
}

.block--gallery-slide-boxes  .__gallery > .__header ul.__menu {
    width: 50%;
    text-align: left;
    color: var(--clr-secondary);
    padding-left:1em;
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1vw, 20px);
}

.block--gallery-slide-boxes  .__gallery > .__header ul.__menu li{
    cursor: pointer;
}

.block--gallery-slide-boxes  .__gallery > .__header ul.__menu li.active{
    font-weight:600;
    color:white;
}


.block--gallery-slide-boxes  .__gallery > .__header ul.__menu li.active::before{
    content:" ";
    position: absolute;
    bottom:0;
    left:0;
    width: 0%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.274);
    animation: menuActive 4s var(--easeInOutQuad) forwards;
}

.block--gallery-slide-boxes  .__gallery > .__header ul.__menu li.delayed::before{
    animation-duration: 8s;
}

@keyframes menuActive {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

/* responsive */
@media screen and (max-width: 1000px) {

    .block--gallery-slide-boxes  .__gallery > .__box:last-child {
        display: none;
    }

    .block--gallery-slide-boxes  .__gallery > .__info {
        flex: 1 1 calc(50% - 1em );
        aspect-ratio: initial;
    }
}

@media screen and (max-width: 650px) {

    .block--gallery-slide-boxes  .__gallery > .__image {
        flex: 1 1 calc(50% - 1em );
    }

    .block--gallery-slide-boxes  .__gallery > .__header{
        flex-direction: column;
        justify-content: flex-end;
    }

    .block--gallery-slide-boxes  .__gallery > .__header .__title{
        width:100%;
        text-align: right;
        padding-right:0;
    }


    .block--gallery-slide-boxes  .__gallery > .__header ul.__menu {
        width: 100%;
        text-align: right;
        padding-left:0;
    }

}

@media screen and (max-width: 500px) {

    .block--gallery-slide-boxes  .__gallery > .__header{
        flex-direction: row;
        order:1;
        flex: 1 1 100%;
    }

    .block--gallery-slide-boxes  .__gallery > .__info{
        flex: 1 1 100%;
        order:2;
        padding: calc(var(--pad) / 2);
        min-height:200px;
        height: auto;;
    }

    .block--gallery-slide-boxes  .__gallery > .__image {
        order:3;
        width: 50%;
    }
}

@media screen and (max-width: 300px) {

    .block--gallery-slide-boxes  .__gallery > .__header{
        flex-direction: column ;
    }

    .block--gallery-slide-boxes  .__gallery > .__header .__title{
         padding-bottom:.5em;
         margin-bottom:.5em;
    }

    
}

@media screen and (max-width: 260px) {

    .block--gallery-slide-boxes  .__gallery > .__image{
        width: 100%;
        flex:1 1 100%;
    }
}


/* #endregion < Sliding Boxes Gallery */


/* #region ... Sliding Boxes */

.block--sliding-boxes{
   display: flex;
   background-color: rgb(249 249 249);
   overflow: hidden;
}

.block--sliding-boxes .__layout{
    --gap: calc( var(--pad) / 2 );
   display: flex;
   justify-content:  center;
   align-items: flex-start;
   background-color: rgb(249 249 249);
   text-align: left;
   gap: var(--pad);
   flex-direction:column;
}


/* title */

.block--sliding-boxes .__title{
   max-width: 500px;

}

.block--sliding-boxes .__slide-controls{
   display: flex;
   justify-content: flex-start;
   font-size: 2em;
   margin-top:1em;
}
.block--sliding-boxes .__slide-controls i{
   cursor:pointer;
}


/* boxes */
.block--sliding-boxes .__testimonals .__wrapper{
   display: flex;
   gap: var(--gap);
   flex-wrap: nowrap;
   transition: all 1s ease-in-out;
}


.block--sliding-boxes .__card{
   display: flex;
   flex-direction: column;
   justify-content: center;
   background-color: rgb(255, 255, 255);
   padding: 3em;
   width: 300px;
   min-height: 260px;
   max-height: 450px ;
   border-radius: var(--bor-rad2);
   overflow: hidden;
   gap: calc( 2em + 10px );
   transition: all 1s ease-in-out;
   opacity: .4;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
   transform:rotate(0deg);
   filter: blur(2px);
}

.block--sliding-boxes .__card:nth-child(even) {transform:translateY(20px) scale(.8) rotate(-4deg);}
.block--sliding-boxes .__card:nth-child(odd)  {transform:translateY(-20px) scale(.9) rotate(4deg);}

.block--sliding-boxes .__card.-current{
   opacity:1;
   transform:rotate(0deg);
   filter: none;
}

.block--sliding-boxes .__card.__info{
    container: sliding-info-box / inline-size;
    background-color: var(--clr-primary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height:1.6em;
    width: 90vw;
    max-width: 800px;
    opacity:1;
    transform:rotate(0deg);
    filter: none;
}
.block--sliding-boxes .__card.__info .__text{
    font-size: 1.4em;
    font-size: clamp(14px, 6cqw, 32px);
    line-height: 1.3em;;
}

.block--sliding-boxes .__card .__avatar{
    width:clamp(30px, 10em, 70px);
    height: clamp(30px, 10em, 70px);
    background-color: #ececec;
    border-radius: 50%;
    z-index:2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    color: var(--clr-primary);
}

.block--sliding-boxes .__card .__avatar:before{
   font-family: 'baseicon' !important;
   content: "\ec51";
}


/* comment */

.block--sliding-boxes .__card .__comment{
   flex:1 
}

.block--sliding-boxes .__card .__comment .__text{
   color: #22375c;
   font-size: 1em;
   line-height: 1.3em;
   text-align: left;
   font-weight: 500;
}


/* subrow */

.block--sliding-boxes .__card .__sub-row{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   gap: 1em;
   font-size: .9em;
}

.block--sliding-boxes .__card .__sub-row .__customer .__name{
   font-weight: 600;
   padding-bottom:.4em;
}

.block--sliding-boxes .__card .__sub-row .__customer .__company{
   font-weight: 400;
   font-size: .8em;
   line-height: 1.4em;
}

.block--sliding-boxes .__card .__sub-row .__goto-link{
   font-size: 2em;
}


/* quote */

.block--sliding-boxes .__card  .__quote{
   position: absolute;
   font-size: 26em;
   color: rgb(150, 150, 150);
   opacity: .1;
   top:0; left:0;
   transform:translate(0,0);
    top:45%; left:-45%;
}


/* responsive */

@media screen and (max-width: 400px) {

    .block--sliding-boxes .__card{
        padding: 2em;
        width: 80vw;
    }

}

/* #endregion ... < Sliding Boxes */


/* #region ... Expandable List */

.expandable-list article{

    --slide-duration:300ms;

    padding: clamp(30px,calc( var(--pad) / 3 ), 40px )  0;
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}

.expandable-list article:first-child{
    margin-top: calc( -1 * var(--pad) / 3 );
}

.expandable-list article:last-child{
    border-bottom:none;
}

.expandable-list article .__head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--slide-duration) ease-in-out;
}

.expandable-list article .__head > .__icon{
    font-size: 2.5em;
    transition: all var(--slide-duration) ease-in-out;
}

.expandable-list article .__content{
    overflow: hidden;
    transition: all var(--slide-duration) ease-in-out;
}

.expandable-list article .__content .__text{
    opacity: 0;
    transition: all var(--slide-duration) ease-in-out; 
}

/* state : expanded */

.expandable-list article.expanded .__head{
    padding-bottom:calc( var(--pad) / 3 );
}

.expandable-list article.expanded .__head .__icon{
    transform: rotate(45deg);
    color: var(--clr-primary);
}

.expandable-list article.expanded .__content .__text{
    opacity: 1;
    transform:translateY(0) scale(1);
}



/* --- faq as block ---  */


.block--expandable-list > .__layout{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--pad);
}

.block--expandable-list > .__layout > .__title{
    min-width: clamp(200px, 25vw, 600px);
}

/* --- faq --- */

.block--expandable-list > .__layout > .__list{
    padding:0;
    display: flex;
    flex-direction: column;
}




/* responsive */


@media screen and (max-width: 800px) {

    .block--expandable-list > .__layout {
        flex-direction: column;
    }

    .block--expandable-list > .__layout > .__title {
        min-width: initial;
        padding-bottom: var(--pad);
    }
}

/* #endregion < Expandable List */


/* #region ... Lightbox */


    :root{
        --lb-bg: rgba(0,0,0,0.85);
        --lb-gap: 18px;
        --lb-btn-size: 44px;
        --lb-radius: 8px;
    }

    .lb-overlay{
        position:fixed;
        inset:0;
        display:none;
        align-items:center;
        justify-content:center;
        background:var(--lb-bg);
        z-index:10000;
        padding:var(--lb-gap);
    }

    .lb-overlay.open{
        display:flex
    }

    .lb-shell{
        position:relative;
        max-width:calc(100% - (var(--lb-gap) * 2));
        max-height:calc(100% - (var(--lb-gap) * 2));
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        user-select:none;
    }

    .lb-content{
        max-width:100%;
        max-height:100%;
        border-radius:var(--lb-radius);
        overflow:hidden;
        background:#0b0b0b;
        box-shadow:0 12px 40px rgba(0,0,0,0.6);
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Image */
    .lb-content img{
        display:block;
        max-width:100%;
        max-height:80vh;
        height:auto;
        width:auto;
        object-fit:contain;
    }

    /* Video */
    .lb-content video{
        max-width:100%;
        max-height:80vh;
        width:auto;
        height:auto;
        display:block;
    }

    /* Caption & controls */
    .lb-meta{
        margin-top:10px;
        color:#ddd;
        font-size:14px;
        text-align:center;
        max-width:90%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .lb-close, .lb-prev, .lb-next{
        position:absolute;
        top:12px;
        width:var(--lb-btn-size);
        height:var(--lb-btn-size);
        border-radius:8px;
        border:0;
        background:rgba(0,0,0,0.45);
        color:#fff;
        display:inline-grid;
        place-items:center;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .lb-close{
        right:12px;
    }

    .lb-prev, .lb-next{
        top:50%;
        transform:translateY(-50%);
        background:rgba(0,0,0,0.55);
    }
    .lb-prev{ left:8px; }
    .lb-next{ right:8px; }

    .lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(255,255,255,0.08); }

    .icon{ font-size:18px; line-height:1; }

    .lb-controls{
        position:absolute;
        bottom:16px;
        left:50%;
        transform:translateX(-50%);
        display:flex;
        gap:8px;
        align-items:center;
    }

    /* hide prev/next when not available */
    .lb-prev.hidden, .lb-next.hidden{ display:none; }

    /* responsive tweaks */
    @media (max-width:640px){
        .lb-close, .lb-prev, .lb-next{ width:38px; height:38px; }
        .lb-meta{ font-size:13px; }
    }

/* #endregion < Lightbox */






/* #endregion < Blocks */


/* #region   :..... Cursor ......................................... */

:root{

    --mEasing:var(--easeInOutExpo);
    --cur-huge-wh : 12em;
    --cur-big-wh  : 6em;
    --cur-med-wh  : 4em;
    --cur-small-wh: 1em;
    --cur-icon-wh : 4em;
}

.nocursor{
    cursor: none;
}



 
a.cur-on i{
    transform: translateY(-120%);
    opacity: 0;
}

a.cur-on i + span{
    transform: translateX( -1.5em  );
}

a.cur-on::before{
    width: 100%;
}

#chn-cursor{
    z-index:998;
    position: fixed;
    width: 0px;
    height: 0px;
    pointer-events:none;
    transform: translateZ(0);
}


#chn-cursor > .__frame{
    position: relative;
    left:0; top:0;
    transform: translate(-50%,-50%);
    pointer-events:none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% ;
    overflow: hidden;
    border:1px solid var(--clr-primary--op010);
    transition: all 400ms var(--mEasing);
    background-color: var(--clr-primary--op010);
    width: var(--cur-small-wh);
    height: var(--cur-small-wh);
}

#chn-cursor > .__frame > .__bg{
    position: relative;
    left:0; top:0;
    width: 100%; height: 100%;
    background-color: var(--clr-primary--op010);
    opacity: 1;
    display: none;
}

/* --- styles --- */

/* #chn-cursor.on {
   mix-blend-mode: overlay;
} */

#chn-cursor.on > .__frame{
    width: var(--cur-med-wh);
    height: var(--cur-med-wh);
}

#chn-cursor.on > .__frame > .__bg{
    display: block;
    
}

#chn-cursor.on.big > .__frame{
    width: var(--cur-big-wh);
    height: var(--cur-big-wh);
}

#chn-cursor.on > .__frame .__content{
    display: initial;
}


/* --- style ybg --- */

#chn-cursor.ybg > .__frame{
    border:none
}

#chn-cursor.ybg > .__frame > .__bg{
    background-color: green;
    opacity: .9;
}



#chn-cursor__icon{
    z-index:999;
    position: fixed;
    width: 0px;
    height: 0px;
    pointer-events:none;
    transform: translateZ(0);
}

#chn-cursor__icon i,
#chn-cursor__icon span{
    margin:0;
    padding:.4em;
    display: inline-block;
    color: var(--clr-primary);
}



/* ___ icon : no icon ___ */

#chn-cursor__icon > .__dot{
    display: block;
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform:translate3d(-50%, -50%, 0);
    background-color: var(--clr-primary);
    padding:0;
}

#chn-cursor__icon.on > .__dot{
   display: none;
}

#chn-cursor__icon.on.ybg i,
#chn-cursor__icon.on.ybg span{
    color: rgb(0, 0, 0) !important;
 }

/* ___icon : center ___ */

#chn-cursor__icon > .__icon{
    position: absolute;
    left:0; top:0;
    transition: all 400ms var(--mEasing);
    transform:translate3d(-50%, -50%, 0) scale(1.5);
    visibility: hidden;
}

#chn-cursor__icon.on.big > .__icon{
    transform:translate3d(-50%, -50%, 0) scale(2.4);
}

#chn-cursor__icon.on > .__icon{
    visibility: visible;
}

/* ___icon : ltrb cont ___ */

#chn-cursor__icon > .__cont{
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform:translate3d(-50%, -50%, 0);
    width: calc( var(--cur-med-wh) - .5em );
    height: calc( var(--cur-med-wh) - .5em );
    border-radius: 50%;
    visibility: hidden;
}

#chn-cursor__icon > .__cont.on{
    visibility: visible;
}

#chn-cursor__icon.on.big > .__cont{
    width: var(--cur-big-wh);
    height: var(--cur-big-wh);
}

#chn-cursor__icon > .__cont i,
#chn-cursor__icon > .__cont span{
    transform:scale(1);
    transition: all 400ms var(--mEasing);
    display: none;
    color: rgb(0, 0, 0);
}

#chn-cursor__icon.on > .__cont i.on,
#chn-cursor__icon.on > .__cont span.on{
    transform:scale(2);
    display: inline-block;
}


#chn-cursor__icon > .__cont > .__mid{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ltrb icons */


#chn-cursor__icon > .__cont > .__mid > .__text {
    color: rgb(0, 0, 0);
    font-weight: 600;
    font-size: .5em;
    letter-spacing: 0;
}

/* #endregion < Cursor */


/* #region   :..... Editor Contents ............................. */



.edcontent ul{
    padding-top:calc( var(--pad) / 3 );
    padding-bottom:calc( var(--pad) / 3 );
    display: inline-flex;
    flex-direction: column;;
    align-items: flex-start;
/*     counter-reset: liCount;*/
 }

.edcontent ul li{
    display: inline-flex;
    justify-content: flex-start;
    padding:.6em 0;
    width: 100%;
}

.edcontent ul li::before{
    content:" ";
    position: relative;
    width:.4em;
    height: .4em;
    margin-right: 1em;
    margin-top:.3em;
    opacity: 1;
    background-color: var(--clr-primary);
}


.edcontent p{
    padding-top:calc( var(--pad) / 3 );
    padding-bottom:calc( var(--pad) / 3 );
}

.edcontent p img{
    overflow:hidden;
    border-radius: var(--bor-rad);
    margin:2em!important;
    max-width: calc( 100vw - (var(--pad) * 2) - 4em )!important;
    height: auto!important;
}

.edcontent p:first-of-type img{
    margin-top:0!important;
}

@media screen and (max-width: 263px) {

/*     .edcontent p{
        margin-top:0!important;
    } */

}




/* #endregion < Editor Contents */


/* #endregion < BASIC STYLES */


/* #region ===== SPECIFIED ELEMENTS ================ */


/* #region ... Main Header */

#main-header{
    --anmMS: 300ms;
    position: sticky;
    top:0;
    z-index: 99;
    width: 100%;
    transition: all var(--anmMS) ease-out;
}


#main-header > .__layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center ;
    padding:0;
    backdrop-filter: blur(10px);
    border-bottom-left-radius: var(--bor-rad);
    border-bottom-right-radius: var(--bor-rad);
}

#main-header > .__layout  .__row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center ;
    width: 100%;
    
}

#main-header > .__layout  .__row > .__part{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center ;

}

#main-header > .__layout  .__row > .__center{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex:1;
        z-index:2;
}

/* --- Shortcuts --- */

#main-header > .__layout > .__shortcuts{
    justify-content: flex-end;
    height: 50px;
    font-size: var(--fontsubsize);
    transition: all 0.2s  ease-out;
    background-color: rgba(255, 255, 255, 0.6);
    transition: all var(--anmMS) ease-out;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

#main-header > .__layout > .__shortcuts .__part{
    gap:3em;
}

#main-header > .__layout > .__shortcuts .__center{
    flex:1;
}

#main-header > .__layout > .__shortcuts .__item{
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-header > .__layout > .__shortcuts .__item::after{
    content:" ";
    display:block;
    height:1px;
    width:1em;
    position: absolute;
    right: -2em;
    background-color: var(--clr-text3);

}

#main-header > .__layout > .__shortcuts .__item:last-child::after{
    content:"";
    display: none;
}

#main-header > .__layout > .__shortcuts i{
    font-size: 1.4em;
    opacity: .7;
    margin-right: .4em;
}




/* --- Main Logo --- */

#main-logo img{
    height: clamp(22px, calc(  4vw / 2 ), 25px);
    width: fit-content;
    display: block;
}   


/* --- Header --- */

#main-header > .__layout > .__header{
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-header > .__layout > .__header > .__row{
    display: flex;
    justify-content: center;
    flex:1;
    padding: calc(var(--pad) / 4) 0;
    
    gap: calc(var(--pad) / 2);
    font-weight: 700;
    color: var(--clr-head);
    font-family: var(--font2);
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom-left-radius: var(--bor-rad);
    border-bottom-right-radius: var(--bor-rad);
    padding-left: var(--pad);
    padding-right: var(--pad);
    transition: all var(--anmMS) ease-out;
}


/* --- Main Nav --- */
 
#main-nav .__list{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
    align-items: center;

}

#main-nav .__list > li a{
    padding:calc(var(--pad) / 6) calc(var(--pad) / 4);
    position: relative;
    text-wrap: nowrap;
    display: block;
    border-radius: var(--bor-rad);
    overflow: hidden;
    transition: all 200ms var(--easeInOutQuad);
}


#main-nav .__list > li a .txt{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index:2;
    
}

#main-nav .__list > li a i{
    font-size: 1.2em;
    margin-left: .3em;
    opacity: .7;
    padding-top:.1em;
}


#main-nav .__list > li > ul{
    background-color: white;
    border-radius:  var(--bor-rad);
    position: absolute;
    left:0;
    min-width: 100%;;
    transform: translate(0, -30px) ;
    transition: all 200ms var(--easeInOutQuad);
    opacity: 0;
    transform-origin: top center;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
    visibility: hidden;
    z-index:2;
}


#main-nav .__list > li ul li a{
    padding: calc( var(--pad) / 3 ) calc( var(--pad) / 2 );
    border-bottom: 1px dotted var(--clr-secondary--op05);
}

#main-nav .__list > li ul li:last-child a{
    border-bottom:none;
}

/* state : hover */

#main-nav .__list > li > a::before{
    content: " ";
    display: block;
    background-color: var(--clr-primary);
    position: absolute;
    transition: all 200ms var(--easeInOutQuad);
    inset:0;
    transform: translateY(110%);
    z-index:1;
}


#main-nav .__list > li:hover > a::before{
    transform: translateY(0%);
}


#main-nav .__list > li:hover > ul{
    opacity: 1;
    transform: translate(0%, 00px) ;
    visibility: visible;
}

#main-nav .__list > li:hover > a{
    color:white;
   
}


/* --- Page Nav --- */

#page-nav .__list{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
    align-items: center;
}

#page-nav .__list > li a{
    font-size: 2em;
    padding: .5em;;
}


/* quick contact */

#main-header > .__layout > .__header .__quick-contact .button{
    padding: .6em 1em;
}

#main-header > .__layout > .__header .__quick-contact span{
    margin-left:0;
}

#main-header > .__layout > .__header .__quick-contact i{
    display: none;
}


/* --- Mobile Menu Button --- */

#mobile-menu__btn {
    height: 36px;
    width: 40px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    padding:.3em;
    cursor: pointer;
    margin-left:calc(var(--pad) / 2);
    width: 40px;
    padding:.3em;
}

#mobile-menu__btn > i{
    display: inline-block;
    text-align: right;
    height: 2px;
    right: 0;
    background-color: var(--clr-primary);
    border-radius: 2px;
    transition: all var(--anmMS) var(--easeInOutQuad);
    transition-delay: calc( var(--anmMS) + 30ms );
}

#main-header #mobile-menu__btn > i:nth-child(1){width: 80%;}
#main-header #mobile-menu__btn > i:nth-child(2){width: 100%;}
#main-header #mobile-menu__btn > i:nth-child(3){width: 60%;}



/* --- state : sticky --- */


#main-header.sticking{
    transform: translateY(-50px);
}


#main-header.sticky > .__layout{
    backdrop-filter: none;
    border-radius:initial;
}

#main-header.sticky > .__layout > .__header > .__row{
    backdrop-filter: blur(10px);
    border-bottom-left-radius: var(--bor-rad);
    border-bottom-right-radius: var(--bor-rad);
}


/* main nav */

#main-header #main-nav {
    transition:all var(--anmMS) var(--easeInOutQuad);
    transform: translateY(0);
    opacity: 1;
}

#main-header.sticky #main-nav {
    transform: translateY(-130%);
    overflow:hidden;
    position: absolute;
    opacity: 0;
}


/* page nav */

#main-header #page-nav {
    transform: translateY(130%);
    position: absolute;
    transition:all var(--anmMS) var(--easeInOutQuad);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    display:none;
}

#main-header.sticky #page-nav {
    transform: translateY(0%);
    position: relative;
    visibility:visible;
    pointer-events: initial;
    opacity: 1;
}


/* --- responsive --- */

@media screen and (max-width: 1000px) {

    #main-nav{
        display: none;
    }

    #mobile-menu--btn{
        display: flex;
    }

}

@media screen and (max-width: 520px) {

    #main-header.sticking{
        transform: translateY(0);
    }

    #main-header > .__layout > .__shortcuts{
        display: none;
    }

}

@media screen and (max-width: 360px) {

    #main-header > .__layout > .__header .__quick-contact i{
        display: block;
        font-size: 1.2em;
    }

    #main-header > .__layout > .__header .__quick-contact span{
        display: none;
    }

}




/* #endregion ... < Main Header */


/* #region ... Mobile Menu */

#mobile-menu{
    position: fixed;
    inset:0;
    z-index: 9999;
    display: flex;
    overflow: hidden;
    font-size: clamp(1.5em, 1.6vw, 42px);
    opacity:0;
    transform: scale(.9);
    transition: all 400ms cubic-bezier(0,.01,.16,1);
    visibility: hidden;
    border-radius:3em;
}

#mobile-menu.active{
    transform: translateX(0%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
}

#mobile-menu .__win{
    position: fixed;
    inset:0;
    height: 100%;
    background-color: var(--clr-primary);
    z-index: 3;
    display: flex;
    overflow: hidden;
    align-items: stretch;
    flex-direction: column;
    padding: clamp(1.6em, 2vw, 2.3em);
    transition: all 400ms var(--easeInOutQuad);
    color: white;
    line-height: 1.2em;
    letter-spacing: .5px;
    gap:clamp(1.2em, 2vw, 2em);
}

#mobile-menu .__win > .__row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mobile-menu .__top{
    flex:1;
    display:flex;
    justify-content: space-between;
}

#mobile-menu .__top .__logo img{
    height: clamp(1.3em, 4vw, 48px);
}

#mobile-menu .mobile-menu__btn--close{
    display: flex;

}

#mobile-menu .mobile-menu__btn--close{
    position: relative;
    height: 2em;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: calc(var(--pad) / 2);
    flex-shrink: 0;
    border:1px solid white;
}

#mobile-menu .mobile-menu__btn--close::before,
#mobile-menu .mobile-menu__btn--close::after{
    content: " ";
    position: absolute;
    background-color: white;
    transform-origin: center center;
    width: 2px;
    height:70%;
    transition: all 300ms var(--easeInOutQuad);
}

#mobile-menu .mobile-menu__btn--close::before{
    transform:rotate(45deg)
}

#mobile-menu .mobile-menu__btn--close::after{
    transform:rotate(-45deg)
}

/*  center */


#mobile-menu .__center.__row .__col::-webkit-scrollbar {width: 6px; height: 6px;}
#mobile-menu .__center.__row .__col::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.164); border-radius: 3px;}
#mobile-menu .__center.__row .__col::-webkit-scrollbar-thumb { background: var(--clr-secondary--op025); border-radius: 3px;}
#mobile-menu .__center.__row:hover .__col::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.164);}
#mobile-menu .__center.__row:hover .__col::-webkit-scrollbar-thumb {background: var(--clr-secondary);}

#mobile-menu .__center.__row{
    flex:1 1 100%;
    display: flex;
    gap:clamp(20px ,6vw, 6em );
    align-items: stretch;
    overflow:hidden;
}

#mobile-menu .__center.__row .__col{
    flex:1;
    overflow-y:auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

#mobile-menu .__center.__row .__col > .__row{
    display: flex;
    gap:.3em;
    padding: .5em 0;
}


/* mobile nav */


#mobile-nav .expandable-list{
    --slide-duration:300ms;
}

#mobile-nav .expandable-list li a{
    display: flex;
    align-items:center;
    justify-content: stretch;
    padding: calc(  var(--pad) / 2 ) 0;
    font-weight: 600;
    border-bottom:1px solid var(--clr-secondary--op050);
}

#mobile-nav .expandable-list > li > a{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--slide-duration) ease-in-out;
}

#mobile-nav .expandable-list li a .txt{
    display: flex;
    align-items:center;
    flex:1 1 100%;
}

#mobile-nav .expandable-list li a .txt span{
    display: block;
    flex:1 1 100%;
}

#mobile-nav .expandable-list li > a .txt i{
    border:1px solid white;
    margin-left:.6em;
    margin-right:2px;
    border-radius: 6px;
    font-size: 1.6em;
    transition: all var(--slide-duration) ease-in-out;
    opacity: .5;
}


#mobile-nav .expandable-list li > a .txt i:hover{
    opacity: 1;
}

#mobile-nav .expandable-list li > ul{
    overflow: hidden;
    transition: all var(--slide-duration) ease-in-out;
}

#mobile-nav .expandable-list li > ul{
    opacity: 0;
    transition: all var(--slide-duration) ease-in-out; 
}

#mobile-nav .expandable-list li > ul li{
    color: var(--clr-secondary);
}

/* state : expanded */


#mobile-nav .expandable-list li.expanded > a .txt i{
    transform: rotate(-180deg);
    opacity: 1;
}

#mobile-nav .expandable-list li.expanded ul{
    opacity: 1;
    transform:translateY(0) scale(1);
}



/* responsive */

@media screen and (max-width: 860px) {

    #mobile-menu .__center.__row{
        flex:1 1 100%;
        display: flex;
        flex-direction: column;
        gap:20px;
        align-items: stretch;
        justify-content: space-between;
        overflow:hidden;
    }

    #mobile-menu .__center.__row .__col:nth-child(1){
        order:2;
        flex:0 0 auto;
        justify-content: flex-end;
        font-size: .8em;
    }

    #mobile-menu .__center.__row .__col:nth-child(2){
        order:1;
        flex:1 1 100%;
        
    }

    #mobile-menu .__center.__row .__col > .__row{
        display: flex;
        gap:.3em;
        padding: .3em 0;
    }
}







/* #endregion ... < Mobile Menu */


/* #region ... Main Hero */

#main-hero{
    --heroPad: calc(var(--pad) );
    min-height: 400px;
    height: clamp(300px, 90vh, 2000px);
    padding:0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index:2;
    background-color: initial;
    overflow: hidden;
    margin:0;
}

#main-hero > .__layout{
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
    height: 100%;
    width: 100%;
 }

 /* text */

#main-hero .stage--texts{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    overflow: hidden;
    z-index:2;
    flex:1;
}

#main-hero  .stage--texts .__item{
    position: absolute;
    bottom:0;
}


#main-hero  .stage--texts .__item .__wrapper{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: var(--maxw);
    width: 100%;
    border-radius: var(--bor-rad2);
    padding: calc(var(--pad) * 2);
    padding-bottom:clamp( 30px, calc(var(--pad) * 2.6), 160px )

}

#main-hero .stage--texts .__item .__title{ 
    color: white;
    padding:1rem;
}

#main-hero  .stage--texts .__item .__text{ 
    max-width: 600px;
    padding:1rem;
}


 /* media */

#main-hero  .stage--medias{
    position: absolute;
    inset:var(--heroPad);
    top: calc( var(--heroPad) / 2 );
    display: block;
    overflow:hidden;
    border-radius: var(--bor-rad2) var(--bor-rad2) var(--bor-rad2) var(--bor-rad2);
    transition: all 600ms;
    background-color: var(--clr-primary);
}

#main-hero  .stage--medias .__item{
    position: absolute;
    inset:0;
    display: block;
    overflow:hidden;
    transition: all 600ms;
}

#main-hero > .__layout .stage--medias .__item .__layer.--media{
    display: block;
    flex-direction: column;
    overflow:hidden;
    transition: all 600ms ease;
}

#main-hero > .__layout .stage--medias .__item .__layer.--media::before{
    content:" ";
    position: absolute;
    inset:0;
    background: #0D00FF;
    background: radial-gradient(70vw 110vh at top,var(--clr-primary--op025) 30%, var(--clr-primary) 80%);
    backdrop-filter: saturation(0.5);
    z-index:2;
    mix-blend-mode: hard-light;
}

#main-hero > .__layout .stage--medias .__item .__layer.--media img,
#main-hero > .__layout .stage--medias .__item .__layer.--media video{
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center center;
    z-index:0;
    transition: all 300ms;
}


/* state:  active slides */


#main-hero  .__frame .__item{
    opacity:0 ;
    pointer-events: none;
    transition: all 600ms ease-in-out;
}


#main-hero  .stage--texts .__item.--active{
    opacity:1 ;
    pointer-events: initial;    
}

#main-hero  .stage--medias .__item.--active{
    opacity:1 ;
    pointer-events: initial;     
}

/* state:  deactive */

#main-hero.deactive .stage--medias{
    left:0;
    right: 0;
    border-radius: 0;
}

#main-hero.deactive .__media .__wrapper{
    border-radius:0; 
}

#main-hero.deactive  .__layer.--media{
    transform: scale3d(1.3,1.3,1.3);
}


@media screen and (max-width: 800px) {

    #main-hero{
        max-height: 500px;
    }
}



/* #endregion ... < Main Hero */


/* #region ... Footer */


#main-footer{
    margin-top:var(--pad2);
}

#main-footer > .__layout{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#main-footer .__footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    z-index:1;
}

#main-footer .__footer > .__contents{
    padding:var(--pad);
    padding-top:calc( var(--pad) * 2 );
    padding-bottom:0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

#main-footer .__footer > .__contents > .__cont{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding:2em 0;
}


/* --- footer ------------------------- */

#main-footer .__footer > .__contents > .footer{
    display: flex;
    gap: calc( var(--pad) * 4 );
}

#main-footer .__footer > .__contents > .footer > .__cont{
    display: flex;
    flex-direction: column;
    gap: 2em;
    flex:1 1 50%;
}

#main-footer .__footer > .__contents > .footer h3{
    font-weight: 400;
    font-size: 1.6em;
}

#main-footer .__footer > .__contents > .footer h5{
    font-weight: 500;
    font-size: 1em;
}

#main-footer .__footer > .__contents > .footer ul  {
    padding: .5em 0;
}

#main-footer .__footer > .__contents > .footer ul li {
    padding: .1em 0;
    color: var(--clr-secondary);
}

/* --- form --- */

#main-footer form  {
    padding:0;
    max-width: 800px;
}

#main-footer form .__inputs .__row i {
    display: none;
}

/* --- shortcuts --- */

#main-footer .__footer > .__contents > .footer .__cont.shortcuts{
    display: flex;
    flex-direction: column;
    gap:1em;
    font-weight: 400;
}

/* --- contact infos --- */

#main-footer .__footer > .__contents > .footer .__cont.contact{
   font-size: 1.2em;
   line-height: 1.2em;
}

#main-footer .__footer > .__contents > .footer .__cont.contact > .__cont{
   padding:.5em 0;
}

#main-footer .__footer > .__contents > .footer .__cont.contact i{
   display: none;
   
} 


/* --- footnote ------------------------- */

#main-footer .__footer > .__contents > .footnote {
    font-size: .85em;
    border-top:1px solid var(--clr-secondary--op025);  
    color: var(--clr-secondary);
    margin-top:var(--pad);
    line-height: 1em;
}

#main-footer .__footer > .__contents > .footnote > .__cont{
    display: flex;
    gap:1em;
    align-items: center;
}

#main-footer .__footer > .__contents > .footnote ul{
    display: flex;
    gap:1em;
    align-items: center;
}

/* links */

#main-footer .__footer > .__contents > .footnote .links{
   display: flex;
   gap:1em
}
#main-footer .__footer > .__contents > .footnote .links .__cont{
    display: flex;
    align-items: center;
} 

#main-footer .__footer > .__contents > .footnote .links .title{
    display: none;
}

#main-footer .__footer > .__contents > .footnote svg{
    height: 15px;
} 


/* dom */





#dom-logo path {
  fill: white;
}

.domlogo:hover #dom-logo {
    animation:domAnm 600ms linear infinite;
}

@keyframes domAnm {
  0%    { filter: drop-shadow( -2px  0px 0px rgb(204, 0, 255))  }
  50%   { filter: drop-shadow(  0px  0px 0px #ff9100)  }
  100%   { filter: drop-shadow(  3px  0px 0px #33ff00)  }
}

 

/* responsive */

@media screen and (max-width: 800px) {
    #main-footer .__footer > .__contents > .footer{
        flex-direction: column;
        gap: calc(var(--pad) * 3);
    }
 
}

@media screen and (max-width: 920px) {

    #main-footer .__footer > .__contents > .footnote{
        flex-direction: column;
        gap:1em
    }

    #main-footer .__footer > .__contents > .footnote .notice{
        order:2;
    }
    
    #main-footer .__footer > .__contents > .footnote .links{
        order:1;
    } 

}



/* #endregion < Footer */


/* #region ... products-list */



/* --- Compact List --------------------------------- */

.section--products-list{
    padding-top:calc( var(--pad) * 2 );
    padding-bottom:calc( var(--pad) * 2 );
}


.block--product-list.--compact > .__layout{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    margin-right: auto;
}

.block--product-list.--compact .product--group__header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    margin-right: auto;
    background-color: var(--clr-primary);
    padding: var(--pad);
    text-align: center;
    max-width: 1000px;;
    
}

.block--product-list.--compact  .__content + .product--group__header{
    margin-top:var(--pad)
}

.block--product-list.--compact .product-category__label{
    display: inline-flex;
    align-items: center;
    color: var(--clr-secondary);
}

.block--product-list.--compact .product-category__label::after{
    display: inline-flex;
    content: "";
    margin-left: 1em;
    width: 30px;
    height: 1px;
    border-bottom:1px solid var(--clr-secondary);
}

.block--product-list.--compact .__content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc( var(--pad) + 40px );
    padding:calc( var(--pad) );
    max-width: 1000px;;
}

.block--product-list.--compact .__content .__media{
    flex:1 1 50%;
    width: 50%;
    max-width: calc(  100vw - 2*( var(--pad)));
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.block--product-list.--compact .__content .__media  .--video,
.block--product-list.--compact .__content .__media  .--image{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--bor-rad2);
    box-shadow: -1px 1px 6px rgba(0,0,0,0.5);
    z-index:1;
}

.block--product-list.--compact .__content .__media .--video:nth-child(2),
.block--product-list.--compact .__content .__media .--image:nth-child(2){
    z-index:1;
}

.block--product-list.--compact .__content .__media > *:nth-child(1){
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    max-width: 360px;
    max-height: 360px;
    position: relative;
    inset: initial;
    z-index:1;
}

.block--product-list.--compact .__content .__media video,
.block--product-list.--compact .__content .__media img{
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.block--product-list.--compact .__content .__media > *:nth-child(2){
    position: absolute;
    width: 40%;
    height: 40%;
    right:-2em; bottom:-2em;
    min-width: 50px;
    min-height: 50px;
    z-index:2;
}

/* text */

.block--product-list.--compact .__content .__text{
    flex:1 1 50%;
    width: 50%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2em;
    background-color: var(--clr-primary);
}

.block--product-list.--compact .__content .__text .goto-link{
    margin-top:1em;
}


/* reverse */

.block--product-list.--compact .__content:nth-of-type(2n+1) {
    flex-direction: row-reverse;
}

.block--product-list.--compact .__content:nth-of-type(2n+1) .__media > *:nth-child(2){
    left:-2em; bottom:-2em;
}

.block--product-list.--compact .__content:nth-of-type(2n+1) .__media{
    justify-content: flex-end;
}

/* responsive */

@media screen and (max-width: 775px) {

    .block--product-list.--compact{
        gap:6em
    }

    .block--product-list.--compact .__content{
        flex-direction: column!important;
        gap:4em;
    }

    .block--product-list.--compact .__content .__media{
        flex:1 1 100%;
        width: 100%;
        display: flex;
        justify-content: center!important;
        align-items: center;
    }

    .block--product-list.--compact .__content .__media > *:nth-child(2){
        left: 50%;
        transform: translateX(-50%);
    }

    .block--product-list.--compact .__content:nth-child(2n) .__media > *:nth-child(2){
        left:50%;
        transform: translateX(-50%);
    }

    .block--product-list.--compact .__content .__text{
        flex:1 1 100%;
        width: 100%;
        max-width: 400px;
        text-align: left;
        font-size: 1.1em;
        font-weight: 500;
        line-height: 1.4em;
    }
}



/* --- Normal List --------------------------------- */


.block--product-list.--basic{
    background-color: rgba(249, 249, 249, 1);
    padding:var(--pad)
}

.block--product-list.--basic .group__title {
    margin-bottom:2em;
}

.block--product-list.--basic .group__title .__h {
    font-size: 1.2em;
}

.block--product-list.--basic .__list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(var(--pad));
    font-size: .9em;
    margin-left:calc((var(--pad) / 2) * -1);
    margin-right:calc((var(--pad) / 2) * -1);
}


/* --- Horizontal Cards --- */

.block--product-list.--basic .__list .--h-cards{
    display: flex;
    max-width: 900px;
    flex:1 1 50%;
    
}

.block--product-list.--basic .__list .--h-cards >  a{
    display: flex;
    flex-direction: row;
    padding: calc(var(--pad) / 1.5);
    background-color: white;
    border-radius: var(--bor-rad);
    box-shadow: -1px 1px 6px rgba(0,0,0,0.1);
    gap:clamp(1em, 3vw ,2em);
    transition: all 200ms ease-in-out;
}



.block--product-list.--basic .__content .__text{
    
    display: flex;
    flex-direction: column;
    flex:1 1 50%;
}

.block--product-list.--basic .__content .__text .product-category__label{
   padding:5px 0;
   font-size: .8em;
}

.block--product-list.--basic .__content .__text .product__title{
   padding:5px 0;
   font-size: 1.4em;
}

.block--product-list.--basic .__content .__text .product__info{
   padding:5px 0;
}

.block--product-list.--basic .__content .__text .product__link{
   text-align: right;
}

.block--product-list.--basic .__content .__media{
    display: flex;
    max-height: 10vw;
    max-width: 10vw;
    min-height: 60px;
    min-width: 60px;
    overflow: hidden;
    border-radius: var(--bor-rad);
    margin-top:10px;
    transition: all 200ms ease-in-out;
}

.block--product-list.--basic .__content .__media .--image,
.block--product-list.--basic .__content .__media .--video{
    width: 100%;;
    display: flex;
}

.block--product-list.--basic .__content .__media img,
.block--product-list.--basic .__content .__media video{
    width: 100%;
    object-fit: cover;
    transition: all 600ms ease-in-out;
}

/* --- hover state */

.block--product-list.--basic .__list .--h-cards:hover >  a{
    background-color: var(--clr-primary);
    color:white;
}

.block--product-list.--basic .__list .--h-cards:hover  .product__title{
    color:white;
}

.block--product-list.--basic .__list .--h-cards:hover  .__media{
    transform: scale(1.2);
    box-shadow: -1px 1px 6px rgba(0,0,0,0.1);
}

.block--product-list.--basic .__list .--h-cards:hover .__media img,
.block--product-list.--basic .__list .--h-cards:hover .__media video{
    transform: scale(1.2);
}


@media screen and (max-width: 1440px) {

    .block--product-list.--basic .__list {
        flex-direction: column;
    }

}

@media screen and (max-width: 480px) {

    .block--product-list.--basic {
        padding-left:0;
        padding-right:0;
    }

}







/* #endregion < products-list */


/* #region ... Product */

#section--product{
   margin:0; 
}

.block--product {
    display: flex;
    justify-content: center;
    margin-left:auto;
    margin-right: auto;
    padding:var(--pad);
}

.block--product__layout {
    border-radius: var(--bor-rad2);
    max-width:var(--maxw);
}

.block--product .product {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(  30px, calc(var(--pad) * 2) , 120px);
    padding:clamp(2em, 6vw , 250px);
    
}

.block--product .product .__col {
    flex:1 1 50%;
    display: flex;
    flex-direction: column;
}


.block--product .product .__col > *:last-child {
    margin-bottom:0;
    padding: 0;
}


/* --- col - 2 --- */

.block--product .product .__col.--2  {
   width: 360px ;
   min-width: 300px;
   margin-top:calc( var(--pad) * -2 );
}

.block--product .product .__col.--2 > .__wrapper  {
   display: flex;
   flex-direction: column;
   position: sticky;
   padding-top:calc( var(--pad) * 2 );
   top:0;
}

/* --- info texts --- */

.block--product .__col.--2  .product__title{
    display: none;
}

.block--product .product__title{
    font-size: 1.6em;
    font-weight:600;
    padding-bottom: 1.5em;
}

/* --- gallery & image --- */

.block--product .product__gallery > .__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  grid-auto-flow:  dense;
  gap: 1em;
}

.block--product .product__gallery > .__wrapper > .__item {
  border-radius: var(--bor-rad);
  overflow: hidden;
}

.block--product .product__gallery .__item .__media{
    display: flex;
    width: 100%;
    height: 100%;
    overflow:hidden;
}

.block--product .product__gallery .__item .__media > .__slider{
    display: flex;
    flex-direction: column;
    width: 100%;
    transform:translateY(0%);
}

.block--product .product__gallery .__item .__media .__slider.sliding-up{
    transform:translateY(-100%);
}

.block--product .product__gallery .__item .__media > .__slider > .__el{
    min-width: 100%;
    min-height: 100%;
}



.block--product .product__gallery .__item video,
.block--product .product__gallery .__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block--product .product__gallery .__item:nth-child(1)  {grid-column: span 3;grid-row: span 3;}
.block--product .product__gallery .__item:nth-child(6)  {grid-column: span 2;grid-row: span 2;}
.block--product .product__gallery .__item:nth-child(10) {grid-column: span 2;grid-row: span 2;}

@media screen and (max-width: 1000px) {

    .block--product .gal-items--1 .__wrapper{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));grid-auto-rows: 120px;}
    .block--product .gal-items--2 .__wrapper{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));grid-auto-rows: 120px;}
    .block--product .gal-items--3 .__wrapper{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));grid-auto-rows: 120px;}
    .block--product .gal-items--4 .__wrapper{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));grid-auto-rows: 120px;}
    .block--product .product__gallery .__item:nth-child(10) {grid-column: span 1;grid-row: span 1;}
}

@media screen and (max-width: 540px) {
    .block--product {
        padding:10px;
    }

    .block--product .product__gallery .__wrapper{grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));grid-auto-rows: 80px;}
}

@media screen and (max-width: 420px) {

    .block--product .product{
        padding:30px 15px;
    }

    .block--product .product__gallery .__wrapper{grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));grid-auto-rows: 60px;}
}


/* --- documents --- */

.block--product .product__documents {
    display: flex;
    flex-direction: row;
    gap: calc( var(--pad) / 4 );
    margin-top:2em;
}

/* responsive */

@media screen and (max-width: 1000px) {

    .block--product .product {
        flex-direction: column;
    }
    .block--product .product .__col.--1 {
        order:2;
    }

    .block--product .product .__col.--1 .product__title {
        display: none;
    }

    .block--product .product .__col.--2 .product__title {
        display: initial;
    }

    .block--product .product .__col.--2  {
        width: 100% ;
        min-width: initial;
    }

    .block--product .product__gallery .__item:nth-child(10) {
        grid-row: span 1;
        grid-column: span 1;
    }

}


/* #endregion < Product */




#section--faq .__layout::before{
    content:"\eea7";
    position: absolute;
    font-family: 'baseicon';
    opacity: .1;
    top:.1em;
    left:-.3em;
    font-size: 20em;
}



#main-scroll-top{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    right: 1em;
    bottom:1em;
    width: 2em;
    height: 2em;
    cursor:pointer;
    z-index:9;
    background-color: var(--clr-primary);
    color:white;
    transition: all 200ms ease-in-out;
    transform: scale(1);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}


#main-scroll-top:hover{
    transform: scale(1.3);
    background-color: white;
    color: var(--clr-primary);
    box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.6);
}


.section--coming-soon .__layout{
    justify-content: center;
    align-items: center;;
    min-height: 50vh;
    font-size: clamp(calc( var(--pad) * 2 ), 10vw, 8em);
    line-height: 1em;
    text-align: center;
    overflow: hidden;
    font-weight: 600;
    text-transform: lowercase;
    
}

.section--coming-soon .__layout span.def{
    opacity: .1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.section--coming-soon .__layout span.dot{
    opacity: .1;
}

.section--coming-soon .__layout span.highlight{
    color: var(--clr-primary);
    opacity: 1;
    animation: cmsoonAnm 10s ease-in-out infinite;
}

.section--coming-soon .__layout span.highlight.--1{color:rgb(255, 115, 0);}
.section--coming-soon .__layout span.highlight.--2{color:rgb(0, 26, 255);}
.section--coming-soon .__layout span.highlight.--3{color:rgb(172, 0, 157);}
.section--coming-soon .__layout span.highlight.--dot{color:rgb(255, 0, 55);}

@keyframes cmsoonAnm{
    0%{
        opacity: .1;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .1;
    }
}

#coming-soon--popup{
    position:fixed;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc( var(--pad) / 2 );
    color: white;
    background-color: var(--clr-primary);
    border-radius: var(--bor-rad);
    max-width: 300px;
    display:none;
    border:1px solid white
}


#coming-soon--popup.active{
    display: block;
}



#cookie-notice{
    position:fixed;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc( var(--pad) / 2 );
    border-radius: var(--bor-rad);
    border:1px solid white;
    bottom:20px;
    left:20px;
    right: 20px;
    gap:2em;
}

#cookie-notice .__aside{
    display: flex;
    gap:1em;
    flex-wrap: wrap;
}

#cookie-notice .__aside button{
    min-width:142px;
}



/* #endregion < SPECIFIED ELEMENTS */


/* #region ===== Common Media Queries ===================== */

@media screen and (max-width: 263px) {

    :root{
        --pad: clamp(25px, 2vw, 80px);
        --pad2: calc( var(--pad) * 1.4);
    }

}


/* #endregion === Common Media Queries */