
/*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
*/

/*clamp new formula for chrome and firefox
  for --percent: 40
  12 * 40 / 100 = 4.8
  slope  = (12 − 4.8) / (1920 − 320) × 100 = 0.45
  offset = 4.8 − (0.45 × 320 / 100) = 3.36
  --px-12: clamp(4.8px, calc(3.36px + 0.45vw), 12px); 
  --px-12: clamp(minSize,calc(offset + slope * 1vw), maxSize);
)
*/


:root{

  /* 40 percent */
  --px-1844: clamp(737.6px, calc(516.32px + 69.15vw), 1844px);
  --px-1736: clamp(694.40px, calc(486.08px + 65.10vw), 1736px);
  --px-1485: clamp(594.00px, calc(415.80px + 55.69vw), 1485px);
  --px-1184: clamp(473.60px, calc(331.52px + 44.40vw), 1184px);
  --px-1032: clamp(412.80px, calc(288.96px + 38.70vw), 1032px);
  --px-932: clamp(372.80px, calc(260.96px + 34.95vw), 932px);
  --px-497: clamp(198.80px, calc(139.16px + 18.64vw), 497px);
  --px-472: clamp(188.80px, calc(132.16px + 17.70vw), 472px);
  --px-350: clamp(140.00px, calc(98.00px + 13.13vw), 350px);
  --px-268: clamp(107.20px, calc(75.04px + 10.05vw), 268px);
  --px-260: clamp(104.00px, calc(72.80px + 9.75vw), 260px);
  --px-236: clamp(94.40px, calc(66.08px + 8.85vw), 236px);
  --px-220: clamp(88.00px, calc(61.60px + 8.25vw), 220px);
  --px-208: clamp(83.20px, calc(58.24px + 7.80vw), 208px);
  --px-200: clamp(80.00px, calc(56.00px + 7.50vw), 200px);
  --px-192: clamp(76.80px, calc(53.76px + 7.20vw), 192px);
  --px-188: clamp(75.20px, calc(52.64px + 7.05vw), 188px);
  --px-172: clamp(68.80px, calc(48.16px + 6.45vw), 172px);
  --px-160: clamp(64.00px, calc(44.80px + 6.00vw), 160px);
  --px-156: clamp(62.40px, calc(43.68px + 5.85vw), 160px);
  --px-148: clamp(59.20px, calc(41.44px + 5.55vw), 148px);
  --px-140: clamp(56.00px, calc(39.20px + 5.25vw), 140px);
  --px-136: clamp(54.40px, calc(38.08px + 5.10vw), 136px);
  --px-120: clamp(48.00px, calc(33.60px + 4.50vw), 120px);
  --px-112: clamp(44.80px, calc(31.36px + 4.20vw), 112px);
  --px-108: clamp(43.20px, calc(30.24px + 4.05vw), 108px);
  --px-104: clamp(41.60px, calc(29.12px + 3.90vw), 104px);
  --px-100: clamp(40.00px, calc(28.00px + 3.75vw), 100px);
  --px-96: clamp(38.40px, calc(26.88px + 3.60vw), 96px);
  --px-92: clamp(36.80px, calc(25.76px + 3.45vw), 92px);
  --px-88: clamp(35.20px, calc(24.64px + 3.30vw), 88px);
  --px-84: clamp(33.60px, calc(23.52px + 3.15vw), 84px);
  --px-80: clamp(32.00px, calc(22.40px + 3.00vw), 80px);
  --px-76: clamp(30.40px, calc(21.28px + 2.85vw), 76px);
  --px-72: clamp(28.80px, calc(20.16px + 2.70vw), 72px);
  --px-68: clamp(27.20px, calc(19.04px + 2.55vw), 68px);
  --px-64: clamp(25.60px, calc(17.92px + 2.40vw), 64px);
  --px-60: clamp(24.00px, calc(16.80px + 2.25vw), 60px);
  --px-56: clamp(22.40px, calc(15.68px + 2.10vw), 56px);
  --px-52: clamp(20.80px, calc(14.56px + 1.95vw), 52px);
  --px-48: clamp(19.20px, calc(13.44px + 1.80vw), 48px);
  --px-44: clamp(17.60px, calc(12.32px + 1.65vw), 44px);
  --px-40: clamp(16.00px, calc(11.20px + 1.50vw), 40px);
  --px-36: clamp(14.40px, calc(10.08px + 1.35vw), 36px);
  --px-32: clamp(12.80px, calc(8.96px + 1.20vw), 32px);
  --px-28: clamp(11.20px, calc(7.84px + 1.05vw), 28px);
  --px-24: clamp(9.60px, calc(6.72px + 0.90vw), 24px);
  --px-22: clamp(8.80px, calc(6.16px + 0.83vw), 22px);
  --px-20: clamp(8.00px, calc(5.60px + 0.75vw), 20px);
  --px-18: clamp(7.20px, calc(5.04px + 0.68vw), 18px);
  --px-16: clamp(6.40px, calc(4.48px + 0.60vw), 16px);
  --px-14: clamp(5.60px, calc(3.92px + 0.53vw), 14px);
  --px-12: clamp(4.80px, calc(3.36px + 0.45vw), 12px);
  --px-8: clamp(3.20px, calc(2.24px + 0.30vw), 8px);
  --px-6: clamp(2.40px, calc(1.68px + 0.23vw), 6px);
  --px-4: clamp(1.60px, calc(1.12px + 0.15vw), 4px);

}

@media screen and (max-width: 700px) {
  :root{
    /* --percent: 50; */
    --px-1844: clamp(922.00px, calc(737.6px + 57.63vw), 1844px);
    --px-1736: clamp(868.00px, calc(694.40px + 54.25vw), 1736px);
    --px-1485: clamp(742.50px, calc(594.00px + 46.41vw), 1485px);
    --px-1184: clamp(592.00px, calc(473.60px + 37.00vw), 1184px);
    --px-1032: clamp(516.00px, calc(412.80px + 32.25vw), 1032px);
    --px-932: clamp(466.00px, calc(372.80px + 29.13vw), 932px);
    --px-497: clamp(248.50px, calc(198.80px + 15.53vw), 497px);
    --px-472: clamp(236.00px, calc(188.80px + 14.75vw), 472px);
    --px-350: clamp(175.00px, calc(140.00px + 10.94vw), 350px);
    --px-268: clamp(134.00px, calc(107.20px + 8.38vw), 268px);
    --px-260: clamp(130.00px, calc(104.00px + 8.13vw), 260px);
    --px-236: clamp(118.00px, calc(94.40px + 7.38vw), 236px);
    --px-220: clamp(110.00px, calc(88.00px + 6.88vw), 220px);
    --px-208: clamp(104.00px, calc(83.20px + 6.50vw), 208px);
    --px-200: clamp(100.00px, calc(80.00px + 6.25vw), 200px);
    --px-192: clamp(96.00px, calc(76.80px + 6.00vw), 192px);
    --px-188: clamp(94.00px, calc(75.20px + 5.88vw), 188px);
    --px-172: clamp(86.00px, calc(68.80px + 5.38vw), 172px);
    --px-160: clamp(80.00px, calc(64.00px + 5.00vw), 160px);
    --px-156: clamp(78.00px, calc(62.40px + 4.88vw), 160px);
    --px-148: clamp(74.00px, calc(59.20px + 4.63vw), 148px);
    --px-140: clamp(70.00px, calc(56.00px + 4.38vw), 140px);
    --px-136: clamp(68.00px, calc(54.40px + 4.25vw), 136px);
    --px-120: clamp(60.00px, calc(48.00px + 3.75vw), 120px);
    --px-112: clamp(56.00px, calc(44.80px + 3.50vw), 112px);
    --px-108: clamp(54.00px, calc(43.20px + 3.38vw), 108px);
    --px-104: clamp(52.00px, calc(41.60px + 3.25vw), 104px);
    --px-100: clamp(50.00px, calc(40.00px + 3.13vw), 100px);
    --px-96: clamp(48.00px, calc(38.40px + 3.00vw), 96px);
    --px-92: clamp(46.00px, calc(36.80px + 2.88vw), 92px);
    --px-88: clamp(44.00px, calc(35.20px + 2.75vw), 88px);
    --px-84: clamp(42.00px, calc(33.60px + 2.63vw), 84px);
    --px-80: clamp(40.00px, calc(32.00px + 2.50vw), 80px);
    --px-76: clamp(38.00px, calc(30.40px + 2.38vw), 76px);
    --px-72: clamp(36.00px, calc(28.80px + 2.25vw), 72px);
    --px-68: clamp(34.00px, calc(27.20px + 2.13vw), 68px);
    --px-64: clamp(32.00px, calc(25.60px + 2.00vw), 64px);
    --px-60: clamp(30.00px, calc(24.00px + 1.88vw), 60px);
    --px-56: clamp(28.00px, calc(22.40px + 1.75vw), 56px);
    --px-52: clamp(26.00px, calc(20.80px + 1.63vw), 52px);
    --px-48: clamp(24.00px, calc(19.20px + 1.50vw), 48px);
    --px-44: clamp(22.00px, calc(17.60px + 1.38vw), 44px);
    --px-40: clamp(20.00px, calc(16.00px + 1.25vw), 40px);
    --px-36: clamp(18.00px, calc(14.40px + 1.13vw), 36px);
    --px-32: clamp(12.80px, calc(12.80px + 1.00vw), 32px);
    --px-28: clamp(11.20px, calc(11.20px + 0.88vw), 28px);
    --px-24: clamp(16.00px, calc(9.60px + 0.75vw), 24px);
    --px-22: clamp(11.00px, calc(8.80px + 0.69vw), 22px);
    --px-20: clamp(10.00px, calc(8.00px + 0.63vw), 20px);
    --px-18: clamp(9.00px, calc(7.20px + 0.56vw), 18px);
    --px-16: clamp(8.00px, calc(6.40px + 0.50vw), 16px);
    --px-14: clamp(7.00px, calc(5.60px + 0.44vw), 14px);
    --px-12: clamp(6.00px, calc(4.80px + 0.38vw), 12px);
    --px-8: clamp(4.00px, calc(3.20px + 0.25vw), 8px);
    --px-6: clamp(3.00px, calc(2.40px + 0.19vw), 6px);
    --px-4: clamp(2.00px, calc(1.60px + 0.13vw), 4px);



  }
}
@media screen and (max-width: 479px) {
  :root{
    /* --percent: 80; */
    --px-1844: clamp(1475.20px, calc(1401.44px + 23.05vw), 1844px);
    --px-1736: clamp(1388.80px, calc(1319.36px + 21.70vw), 1736px);
    --px-1485: clamp(1188.00px, calc(1128.60px + 18.56vw), 1485px);
    --px-1184: clamp(947.20px, calc(899.84px + 14.80vw), 1184px);
    --px-1032: clamp(825.60px, calc(784.32px + 12.90vw), 1032px);
    --px-932: clamp(745.60px, calc(708.32px + 11.65vw), 932px);
    --px-497: clamp(397.60px, calc(377.72px + 6.21vw), 497px);
    --px-472: clamp(377.60px, calc(358.72px + 5.90vw), 472px);
    --px-350: clamp(280.00px, calc(266.00px + 4.38vw), 350px);
    --px-268: clamp(214.40px, calc(203.68px + 3.35vw), 268px);
    --px-260: clamp(208.00px, calc(197.60px + 3.25vw), 260px);
    --px-236: clamp(188.80px, calc(179.36px + 2.95vw), 236px);
    --px-220: clamp(176.00px, calc(167.20px + 2.75vw), 220px);
    --px-208: clamp(166.40px, calc(158.08px + 2.60vw), 208px);
    --px-200: clamp(160.00px, calc(152.00px + 2.50vw), 200px);
    --px-192: clamp(153.60px, calc(145.92px + 2.40vw), 192px);
    --px-188: clamp(150.40px, calc(142.88px + 2.35vw), 188px);
    --px-172: clamp(137.60px, calc(130.72px + 2.15vw), 172px);
    --px-160: clamp(128.00px, calc(121.60px + 2.00vw), 160px);
    --px-156: clamp(124.80px, calc(118.56px + 1.95vw), 160px);
    --px-148: clamp(118.40px, calc(112.48px + 1.85vw), 148px);
    --px-140: clamp(112.00px, calc(106.40px + 1.75vw), 140px);
    --px-136: clamp(108.80px, calc(103.36px + 1.70vw), 136px);
    --px-120: clamp(96.00px, calc(91.20px + 1.50vw), 120px);
    --px-112: clamp(89.60px, calc(85.12px + 1.40vw), 112px);
    --px-108: clamp(86.40px, calc(82.08px + 1.35vw), 108px);
    --px-104: clamp(83.20px, calc(79.04px + 1.30vw), 104px);
    --px-100: clamp(80.00px, calc(76.00px + 1.25vw), 100px);
    --px-96: clamp(76.80px, calc(72.96px + 1.20vw), 96px);
    --px-92: clamp(73.60px, calc(69.92px + 1.15vw), 92px);
    --px-88: clamp(70.40px, calc(66.88px + 1.10vw), 88px);
    --px-84: clamp(67.20px, calc(63.84px + 1.05vw), 84px);
    --px-80: clamp(64.00px, calc(60.80px + 1.00vw), 80px);
    --px-76: clamp(60.80px, calc(57.76px + 0.95vw), 76px);
    --px-72: clamp(57.60px, calc(54.72px + 0.90vw), 72px);
    --px-68: clamp(54.40px, calc(51.68px + 0.85vw), 68px);
    --px-64: clamp(51.20px, calc(48.64px + 0.80vw), 64px);
    --px-60: clamp(48.00px, calc(45.60px + 0.75vw), 60px);
    --px-56: clamp(44.80px, calc(42.56px + 0.70vw), 56px);
    --px-52: clamp(41.60px, calc(39.52px + 0.65vw), 52px);
    --px-48: clamp(38.40px, calc(36.48px + 0.60vw), 48px);
    --px-44: clamp(35.20px, calc(33.44px + 0.55vw), 44px);
    --px-40: clamp(32.00px, calc(30.40px + 0.50vw), 40px);
    --px-36: clamp(28.80px, calc(27.36px + 0.45vw), 36px);
    --px-32: clamp(25.60px, calc(24.32px + 0.40vw), 32px);
    --px-28: clamp(22.40px, calc(21.28px + 0.35vw), 28px);
    --px-24: clamp(19.20px, calc(18.24px + 0.30vw), 24px);
    --px-22: clamp(17.60px, calc(16.72px + 0.28vw), 22px);
    --px-20: clamp(16.00px, calc(15.20px + 0.25vw), 20px);
    --px-18: clamp(14.40px, calc(13.68px + 0.23vw), 18px);
    --px-16: clamp(12.80px, calc(12.16px + 0.20vw), 16px);
    --px-14: clamp(11.20px, calc(10.64px + 0.18vw), 14px);
    --px-12: clamp(9.60px, calc(9.12px + 0.15vw), 12px);
    --px-8: clamp(6.40px, calc(6.08px + 0.10vw), 8px);
    --px-6: clamp(4.80px, calc(4.56px + 0.08vw), 6px);
    --px-4: clamp(3.20px, calc(3.04px + 0.05vw), 6px);
  }
}

*{margin: 0;padding: 0;box-sizing: border-box;color: #fff}
html {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}
body{overflow: auto;font-optical-sizing: auto;font-weight: 400;font-style: normal;;position: relative;font-size: var(--px-16);}
.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;}


