@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@font-face {
  font-family: 'akkordeondemo';
  src: url('../fonts/akkordeon-demo/akkordeon-demo-webfont.woff2') format('woff2'),
        url('../fonts/akkordeon-demo/akkordeon-demo-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'lemon_milkregular';
  src: url('../fonts/lemonmilk/lemonmilk-regular-webfont.woff2') format('woff2'),
        url('../fonts/lemonmilk/lemonmilk-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'lemon_milkbold';
  src: url('../fonts/lemonmilk-bold/lemonmilk-bold-webfont.woff2') format('woff2'),
        url('../fonts/lemonmilk-bold/lemonmilk-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Sugar Bomb';
    src: url('../fonts/SugarBomb/SugarBomb.woff2') format('woff2'),
        url('../fonts/SugarBomb/SugarBomb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*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);
*/

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

/* @font-face {
  font-family: 'Akkordeon Demo';
  src: url('../fonts/akkordeon/akkordeon-webfont.woff2') format('woff2'),
         url('../fonts/akkordeon/akkordeon-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

html {
  -webkit-font-smoothing: antialiased; /* for macOS/iOS */
  -moz-osx-font-smoothing: grayscale; /* for Firefox on macOS */
  text-rendering: optimizeLegibility;
}


:root{
  --akkord: 'akkordeondemo';
  --mont: "Montserrat", sans-serif;
  --lmr: 'lemon_milkregular';
  --lmb: 'lemon_milkbold';

  --blue: #00529B;
  --yellow: #FFE200;
  --black: #000000;
  --lght-black: #383838;
  --gray: #4E4E4E;
  --white: #fff;

  --px-278: clamp(111.2px, calc(111.2px + (166.8 * ((100vw - 320px) / 1600))), 278px);


  /* --px-1642: clamp(656.80px, calc(656.80px + (985.2 * ((100vw - 320px) / 1600))), 1642px); */
  --px-1640: clamp(656px, calc(656px + (984 * ((100vw - 320px) / 1600))), 1640px);
  --px-1600: clamp(640px, calc(640px + (960 * ((100vw - 320px) / 1600))), 1600px);
  --px-1560: clamp(624px, calc(624px + (936 * ((100vw - 320px) / 1600))), 1560px);
  /* --px-1560: clamp(320px, calc(320px + (1240 * ((100vw - 320px) / 1600))), 1560px); */
  --px-1520: clamp(608px, calc(608px + (912 * ((100vw - 320px) / 1600))), 1520px);
  /* --px-1520: clamp(300px, calc(300px + (1220 * ((100vw - 320px) / 1600))), 1520px); */
  --px-1444: clamp(577.6px, calc(577.6px + (866.4 * ((100vw - 320px) / 1600))), 1444px);
  --px-1364: clamp(545.6px, calc(545.6px + (818.4 * ((100vw - 320px) / 1600))), 1364px);
  /* --px-1364: clamp(320px, calc(320px + (1044 * ((100vw - 320px) / 1600))), 1364px); */
  --px-1232: clamp(492.8px, calc(492.8px + (739.20 * ((100vw - 320px) / 1600))), 1232px);
  /* --px-1232: clamp(300px, calc(300px + (932 * ((100vw - 320px) / 1600))), 1232px); */
  --px-236: clamp(94.4px, calc(94.4px + (141.6 * ((100vw - 320px) / 1600))), 236px);
  --px-160: clamp(64px, calc(64px + (96 * ((100vw - 320px) / 1600))), 160px);
  --px-148: clamp(59.20px, calc(59.20px + (88.80 * ((100vw - 320px) / 1600))), 148px);
  --px-140: clamp(56px, calc(56px + (84 * ((100vw - 320px) / 1600))), 140px);
  --px-120: clamp(48px, calc(48px + (72 * ((100vw - 320px) / 1600))), 120px);
  --px-112: clamp(44.80px, calc(44.80px + (67.2 * ((100vw - 320px) / 1600))), 112px);
  --px-108: clamp(43.2px, calc(43.2px + (64.8 * ((100vw - 320px) / 1600))), 108px);
  --px-100: clamp(40px, calc(40px + (60 * ((100vw - 320px) / 1600))), 100px);
  --px-92: clamp(36.8px, calc(36.8px + (55.2 * ((100vw - 320px) / 1600))), 92px);
  --px-88: clamp(35.2px, calc(35.2px + (52.8 * ((100vw - 320px) / 1600))), 88px);
  --px-84: clamp(33.6px, calc(33.6px + (50.4 * ((100vw - 320px) / 1600))), 84px);
  --px-80: clamp(32px, calc(32px + (48 * ((100vw - 320px) / 1600))), 80px);
  --px-76: clamp(30.4px, calc(30.4px + (45.6 * ((100vw - 320px) / 1600))), 76px);
  --px-72: clamp(28.8px, calc(28.8px + (43.2 * ((100vw - 320px) / 1600))), 72px);
  --px-68: clamp(27.20px, calc(27.20px + (40.8 * ((100vw - 320px) / 1600))), 68px);
  --px-64: clamp(25.6px, calc(25.6px + (38.4 * ((100vw - 320px) / 1600))), 64px);
  --px-60: clamp(24px, calc(24px + (36 * ((100vw - 320px) / 1600))), 60px);
  --px-56: clamp(22.40px, calc(22.40px + (33.6 * ((100vw - 320px) / 1600))), 56px);
  --px-48: clamp(19.2px, calc(19.2px + (28.8 * ((100vw - 320px) / 1600))), 48px);
  --px-44: clamp(17.6px, calc(17.6px + (26.4 * ((100vw - 320px) / 1600))), 44px);
  --px-40: clamp(16px, calc(16px + (24 * ((100vw - 320px) / 1600))), 40px);
  --px-36: clamp(14.4px, calc(14.4px + (21.6 * ((100vw - 320px) / 1600))), 36px);
  --px-32: clamp(12.8px, calc(12.8px + (19.2 * ((100vw - 320px) / 1600))), 32px);
  --px-28: clamp(11.20px, calc(11.20px + (16.80 * ((100vw - 320px) / 1600))), 28px);
  --px-24: clamp(9.6px, calc(9.6px + (14.4 * ((100vw - 320px) / 1600))), 24px);
  --px-20: clamp(8px, calc(8px + (12 * ((100vw - 320px) / 1600))), 20px);
  --px-18: clamp(7.2px, calc(7.2px + (10.8 * ((100vw - 320px) / 1600))), 18px);
  --px-16: clamp(6.4px, calc(6.4px + (9.6 * ((100vw - 320px) / 1600))), 16px);
  /* --px-16: clamp(11.5px, calc(11.5px + (4.5 * ((100vw - 320px) / 1600))), 16px); */
  --px-12: clamp(4.8px, calc(4.8px + (7.2 * ((100vw - 320px) / 1600))), 12px);
  --px-8: clamp(3px, calc(3px + (5 * ((100vw - 320px) / 1600))), 8px);
  /* --px-6: clamp(2.4px, calc(2.4px + (3.6 * ((100vw - 320px) / 1600))), 6px); */

}
/* 
@media screen and (max-width: 479px) {
  :root{
    --px-24: clamp(13px, calc(13px + (11 * ((100vw - 320px) / 1600))), 24px);
  }
} */

*{margin: 0;padding: 0;box-sizing: border-box;}
body{overflow: auto;font-family: var(--mont);font-optical-sizing: auto;font-weight: 400;font-style: normal;}
.pg-container{max-width: 1920px;margin: 0 auto;position: relative;box-shadow: 0 0 0.375em rgba(0, 0, 0, 0.25);}
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{outline: none;}
.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-right.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);}
.delay1{transition-delay: .3s;}
.delay2{transition-delay: .6s;}
strong{font-weight: 600;}