@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');


/* @font-face {
    font-family: 'NTSEAWAVEAlternative';
    src: url('../fonts/nt-seawave-alternative/NTSEAWAVEAlternative.woff2') format('woff2'),
         url('./fonts/nt-seawave-alternative/NTSEAWAVEAlternative.woff') format('woff');
}

@font-face {
    font-family: 'NTSEAWAVEStandart';
    src: url('../fonts/nt-seawave-standart/NTSEAWAVEStandart.woff2') format('woff2'),
         url('../fonts/nt-seawave-standart/NTSEAWAVEStandart.woff') format('woff');
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helvetica/Helvetica.woff2') format('woff2'),
         url('../fonts/helvetica/Helvetica.woff') format('woff');
}

@font-face {
    font-family: 'helveticaLight';
    src: url('../fonts/helvetica-light/helveticaLight.woff2') format('woff2'),
         url('../fonts/helvetica-light/helveticaLight.woff') format('woff');
}

@font-face {
    font-family: 'HelveticaBold';
    src: url('../fonts/helvetica-bold/HelveticaBold.woff2') format('woff2'),
         url('../fonts/helvetica-bold/HelveticaBold.woff') format('woff'),
} */

/*clamp formula
  clamp(min, preferred, max)
  preferred = calc(min + (difference * ((100vw - minViewport) / (maxViewport - minViewport))))
  screen 320px viewport → font-size = 16px
  screen 1920px or 2400px viewport → font-size = 24px
  difference = 24 - 16 = 8px
  calc(16px + (8 * ((100vw - 320px) / (1920 - 320))))
  font-size: clamp(16px, calc(16px + (8 * ((100vw - 320px) / 1600))), 24px);
*/

/* --px-24: clamp(9.6px, calc(9.6px + (14.4 * ((100vw - 320px) / 1600))), 24px); */

/*
  letter-spacing: (letter-spacing/1000)em
   letter-spacing: 107*10/1000 px
*/


:root{
  /* --ntsa: 'NTSEAWAVEAlternative';
  --ntss: 'NTSEAWAVEStandart';
  --helr: 'Helvetica';
  --hell: 'helveticaLight';
  --helb: 'HelveticaBold'; */

  --ntss: 'Bodoni Moda', serif;
  --helr: 'Barlow', sans-serif;


  --black: #000;
  --gray: #707070;
  --lgt-gray: #E5E5E5;
  --md-gray: #C5C5C5;
  --golden: #FCC45F;
  --darkBrown: #704738;
  --white: #fff;

  /* viewport range */
  --percent: 40;
  --min-vw: 320px;
  --max-vw: 1920px;


  --v-1600: calc(1600 * var(--percent) / 100);
  --fs-1600:  calc(var(--v-1600) * 1px);
  --px-1600: clamp(var(--fs-1600), calc(var(--fs-1600) + (1600px - var(--fs-1600)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),1600px);

  --v-1364: calc(1364 * var(--percent) / 100);
  --fs-1364:  calc(var(--v-1364) * 1px);
  --px-1364: clamp(var(--fs-1364), calc(var(--fs-1364) + (1364px - var(--fs-1364)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),1364px);

  --v-1200: calc(1200 * var(--percent) / 100);
  --fs-1200:  calc(var(--v-1200) * 1px);
  --px-1200: clamp(var(--fs-1200), calc(var(--fs-1200) + (1200px - var(--fs-1200)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),1200px);

  --v-1089: calc(1089 * var(--percent) / 100);
  --fs-1089:  calc(var(--v-1089) * 1px);
  --px-1089: clamp(var(--fs-1089), calc(var(--fs-1089) + (1089px - var(--fs-1089)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),1089px);



  --v-497: calc(497 * var(--percent) / 100);
  --fs-497:  calc(var(--v-497) * 1px);
  --px-497: clamp(var(--fs-497), calc(var(--fs-497) + (497px - var(--fs-497)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),497px);

  --v-472: calc(472 * var(--percent) / 100);
  --fs-472:  calc(var(--v-472) * 1px);
  --px-472: clamp(var(--fs-472), calc(var(--fs-472) + (472px - var(--fs-472)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),472px);

  --v-350: calc(350 * var(--percent) / 100);
  --fs-350:  calc(var(--v-350) * 1px);
  --px-350: clamp(var(--fs-350), calc(var(--fs-350) + (350px - var(--fs-350)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),350px);

  --v-260: calc(260 * var(--percent) / 100);
  --fs-260:  calc(var(--v-260) * 1px);
  --px-260: clamp(var(--fs-260), calc(var(--fs-260) + (260px - var(--fs-260)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),260px);

  --v-260: calc(260 * var(--percent) / 100);
  --fs-260:  calc(var(--v-260) * 1px);
  --px-260: clamp(var(--fs-260), calc(var(--fs-260) + (260px - var(--fs-260)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),260px);

  --v-236: calc(236 * var(--percent) / 100);
  --fs-236:  calc(var(--v-236) * 1px);
  --px-236: clamp(var(--fs-236), calc(var(--fs-236) + (236px - var(--fs-236)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),236px);

  --v-220: calc(220 * var(--percent) / 100);
  --fs-220:  calc(var(--v-220) * 1px);
  --px-220: clamp(var(--fs-220), calc(var(--fs-220) + (220px - var(--fs-220)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),220px);

  --v-188: calc(188 * var(--percent) / 100);
  --fs-188:  calc(var(--v-188) * 1px);
  --px-188: clamp(var(--fs-188), calc(var(--fs-188) + (188px - var(--fs-188)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),188px);

  --v-172: calc(172 * var(--percent) / 100);
  --fs-172:  calc(var(--v-172) * 1px);
  --px-172: clamp(var(--fs-172), calc(var(--fs-172) + (172px - var(--fs-172)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),172px);
  

  --v-160: calc(160 * var(--percent) / 100);
  --fs-160:  calc(var(--v-160) * 1px);
  --px-160: clamp(var(--fs-160), calc(var(--fs-160) + (160px - var(--fs-160)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),160px);

  --v-148: calc(148 * var(--percent) / 100);
  --fs-148:  calc(var(--v-148) * 1px);
  --px-148: clamp(var(--fs-148), calc(var(--fs-148) + (148px - var(--fs-148)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),148px);

  --v-140: calc(140 * var(--percent) / 100);
  --fs-140:  calc(var(--v-140) * 1px);
  --px-140: clamp(var(--fs-140), calc(var(--fs-140) + (140px - var(--fs-140)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),140px);

  --v-136: calc(136 * var(--percent) / 100);
  --fs-136:  calc(var(--v-136) * 1px);
  --px-136: clamp(var(--fs-136), calc(var(--fs-136) + (136px - var(--fs-136)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),136px);

  --v-120: calc(120 * var(--percent) / 100);
  --fs-120:  calc(var(--v-120) * 1px);
  --px-120: clamp(var(--fs-120), calc(var(--fs-120) + (120px - var(--fs-120)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),120px);

  --v-112: calc(112 * var(--percent) / 100);
  --fs-112:  calc(var(--v-112) * 1px);
  --px-112: clamp(var(--fs-112), calc(var(--fs-112) + (112px - var(--fs-112)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),112px);

  --v-108: calc(108 * var(--percent) / 100);
  --fs-108:  calc(var(--v-108) * 1px);
  --px-108: clamp(var(--fs-108), calc(var(--fs-108) + (108px - var(--fs-108)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),108px);

  --v-104: calc(104 * var(--percent) / 100);
  --fs-104:  calc(var(--v-104) * 1px);
  --px-104: clamp(var(--fs-104), calc(var(--fs-104) + (104px - var(--fs-104)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),104px);

  --v-100: calc(100 * var(--percent) / 100);
  --fs-100:  calc(var(--v-100) * 1px);
  --px-100: clamp(var(--fs-100), calc(var(--fs-100) + (100px - var(--fs-100)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),100px);

  --v-96: calc(96 * var(--percent) / 100);
  --fs-96:  calc(var(--v-96) * 1px);
  --px-96: clamp(var(--fs-96), calc(var(--fs-96) + (96px - var(--fs-96)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),96px);

  --v-92: calc(92 * var(--percent) / 100);
  --fs-92:  calc(var(--v-92) * 1px);
  --px-92: clamp(var(--fs-92), calc(var(--fs-92) + (92px - var(--fs-92)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),92px);

  --v-88: calc(88 * var(--percent) / 100);
  --fs-88:  calc(var(--v-88) * 1px);
  --px-88: clamp(var(--fs-88), calc(var(--fs-88) + (88px - var(--fs-88)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),88px);

  --v-84: calc(84 * var(--percent) / 100);
  --fs-84:  calc(var(--v-84) * 1px);
  --px-84: clamp(var(--fs-84), calc(var(--fs-84) + (84px - var(--fs-84)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),84px);

  --v-80: calc(80 * var(--percent) / 100);
  --fs-80:  calc(var(--v-80) * 1px);
  --px-80: clamp(var(--fs-80), calc(var(--fs-80) + (80px - var(--fs-80)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),80px);

  --v-76: calc(76 * var(--percent) / 100);
  --fs-76:  calc(var(--v-76) * 1px);
  --px-76: clamp(var(--fs-76), calc(var(--fs-76) + (76px - var(--fs-76)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),76px);

  --v-72: calc(72 * var(--percent) / 100);
  --fs-72:  calc(var(--v-72) * 1px);
  --px-72: clamp(var(--fs-72), calc(var(--fs-72) + (72px - var(--fs-72)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),72px);

  --v-68: calc(68 * var(--percent) / 100);
  --fs-68:  calc(var(--v-68) * 1px);
  --px-68: clamp(var(--fs-68), calc(var(--fs-68) + (68px - var(--fs-68)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),68px);

  --v-64: calc(64 * var(--percent) / 100);
  --fs-64:  calc(var(--v-64) * 1px);
  --px-64: clamp(var(--fs-64), calc(var(--fs-64) + (64px - var(--fs-64)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),64px);

  --v-60: calc(60 * var(--percent) / 100);
  --fs-60:  calc(var(--v-60) * 1px);
  --px-60: clamp(var(--fs-60), calc(var(--fs-60) + (60px - var(--fs-60)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),60px);

  --v-56: calc(56 * var(--percent) / 100);
  --fs-56:  calc(var(--v-56) * 1px);
  --px-56: clamp(var(--fs-56), calc(var(--fs-56) + (56px - var(--fs-56)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),56px);

  --v-52: calc(52 * var(--percent) / 100);
  --fs-52:  calc(var(--v-52) * 1px);
  --px-52: clamp(var(--fs-52), calc(var(--fs-52) + (52px - var(--fs-52)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),52px);

  --v-48: calc(48 * var(--percent) / 100);
  --fs-48:  calc(var(--v-48) * 1px);
  --px-48: clamp(var(--fs-48), calc(var(--fs-48) + (48px - var(--fs-48)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),48px);

  --v-44: calc(44 * var(--percent) / 100);
  --fs-44:  calc(var(--v-44) * 1px);
  --px-44: clamp(var(--fs-44), calc(var(--fs-44) + (44px - var(--fs-44)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),44px);

  --v-40: calc(40 * var(--percent) / 100);
  --fs-40:  calc(var(--v-40) * 1px);
  --px-40: clamp(var(--fs-40), calc(var(--fs-40) + (40px - var(--fs-40)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),40px);

  --v-36: calc(36 * var(--percent) / 100);
  --fs-36:  calc(var(--v-36) * 1px);
  --px-36: clamp(var(--fs-36), calc(var(--fs-36) + (36px - var(--fs-36)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),36px);

  --v-32: calc(32 * var(--percent) / 100);
  --fs-32:  calc(var(--v-32) * 1px);
  --px-32: clamp(var(--fs-32), calc(var(--fs-32) + (32px - var(--fs-32)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),32px);

  --v-28: calc(28 * var(--percent) / 100);
  --fs-28:  calc(var(--v-28) * 1px);
  --px-28: clamp(var(--fs-28), calc(var(--fs-28) + (28px - var(--fs-28)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),28px);

  --v-24: calc(24 * var(--percent) / 100);
  --fs-24:  calc(var(--v-24) * 1px);
  --px-24: clamp(var(--fs-24), calc(var(--fs-24) + (24px - var(--fs-24)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),24px);

  --v-20: calc(20 * var(--percent) / 100);
  --fs-20:  calc(var(--v-20) * 1px);
  --px-20: clamp(var(--fs-20), calc(var(--fs-20) + (20px - var(--fs-20)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),20px);

  --v-18: calc(18 * var(--percent) / 100);
  --fs-18:  calc(var(--v-18) * 1px);
  --px-18: clamp(var(--fs-18), calc(var(--fs-18) + (18px - var(--fs-18)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),18px);

  --v-16: calc(16 * var(--percent) / 100);
  --fs-16:  calc(var(--v-16) * 1px);
  --px-16: clamp(var(--fs-16), calc(var(--fs-16) + (16px - var(--fs-16)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),16px);

  --v-14: calc(14 * var(--percent) / 100);
  --fs-14:  calc(var(--v-14) * 1px);
  --px-14: clamp(var(--fs-14), calc(var(--fs-14) + (14px - var(--fs-14)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),14px);

  --v-12: calc(12 * var(--percent) / 100);
  --fs-12:  calc(var(--v-12) * 1px);
  --px-12: clamp(var(--fs-12), calc(var(--fs-12) + (12px - var(--fs-12)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),12px);

  --v-8: calc(8 * var(--percent) / 100);
  --fs-8:  calc(var(--v-8) * 1px);
  --px-8: clamp(var(--fs-8), calc(var(--fs-8) + (8px - var(--fs-8)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),8px);

  --v-6: calc(6 * var(--percent) / 100);
  --fs-6:  calc(var(--v-6) * 1px);
  --px-6: clamp(var(--fs-6), calc(var(--fs-6) + (6px - var(--fs-6)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),6px);


  


}
/* @media screen and (max-width: 640px){
  :root{
    
  --v-40: 40;
  --v-18: calc(18 * var(--v-40) / 100);
  --px-18: calc(var(--v-18) * 1px);

  }
} */

@media screen and (max-width: 700px) {
  :root{
    --percent: 60;
  }
}
@media screen and (max-width: 479px) {
  :root{
    --percent: 80;
  }
}

*{margin: 0;padding: 0;box-sizing: border-box;}
html {-webkit-font-smoothing: antialiased; /* for macOS/iOS */-moz-osx-font-smoothing: grayscale; /* for Firefox on macOS */text-rendering: optimizeLegibility;}
body{overflow: auto;font-family: var(--helr);font-optical-sizing: auto;font-weight: 400;font-style: normal;color: var(--black);background-color: var(--lgt-gray);position: relative;}
body:before{content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-image: url("../img/web_bg-02.webp");background-repeat: repeat-y;opacity: .3; background-size: cover;}
.pg-container{max-width: 1920px;margin: 0 auto;position: relative;box-shadow: 0 0 0.375em rgba(0, 0, 0, 0.25);;overflow: hidden;}
img{display: block;max-width: 100%;}
li{list-style: none;}
a{text-decoration: none;color: inherit;}
.mt-0{margin-top: 0 !important;}
.pt-0{padding-top: 0 !important;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
::-webkit-input-placeholder {color: inherit;}
::-moz-placeholder{color: inherit;}
:-ms-input-placeholder{color: inherit;}
:-moz-placeholder{color: inherit;}
input, textarea, button{border-radius: 0;border: none;}
button, a{cursor: pointer;padding: 0;background-color: transparent;border-radius: 0;}
input:focus, textarea:focus, button:focus, select:focus{outline: none;}
strong{font-weight: 600;}
.clear{clear: both;display: block;}
.text-center{text-align: center;}

.fade-right{transform: translate3d(-100px, 0, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-left{transform: translate3d(100px, 0, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-right.active, .fade-left.active{opacity: 1;transform: translateZ(0);}
.fade-down{transform: translate3d(0, -100px, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-down.active{opacity: 1;transform: translateZ(0);}
.fade-in{opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-in.active{opacity: 1;}
.delay1{transition-delay: .3s;}
.delay2{transition-delay: .6s;}
.delay3{transition-delay: .9s;}
.delay4{transition-delay: 1.2s;}