@font-face {
  font-family: SF400;
  src: url("../fonts/SF-Pro/SF-Text-normal-400-100.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: SF500;
  src: url("../fonts/SF-Pro/SF-Text-normal-500-100.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: SF600;
  src: url("../fonts/SF-Pro/SF-Text-normal-600-100.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: SFBold;
  src: url("../fonts/SF-Pro/SF-Text-Bold.OTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* For WebView */
:root {
  /*  */
  /* Colors */
  --color_primary: #0063e6;
  --color_secondary: #b0fdce;
  --color_light_green: #e6ffef;
  --color_med_green: #68b54a;
  --color_dark_green: #217065;
  --color_white: #fff;
  --color_black: #000;
  --color_blue: #0053bf;
  --color_blue_second: #006eff;
  --color_light_blue: #e6f1ff;

  /*  */
  /* Fonts Size */
  /* Font Sizes (Default) */
  --font_4px: 0.284vw; /* 4px */
  --font_8px: 0.568vw; /* 8px */
  --font_12px: 0.852vw; /* 12px */
  --font_14px: 0.994vw; /* 16px */
  --font_16px: 1.13vw; /* 16px */
  --font_18px: 1.278vw; /* 16px */
  --font_20px: 1.42vw; /* 20px */
  --font_24px: 1.704vw; /* 24px */
  --font_32px: 2.272vw; /* 32px */
  --font_40px: 2.84vw; /* 40px */
  --font_48px: 3.408vw; /* 48px */
  --font_54px: 3.834vw; /* 48px */
  --font_64px: 4.554vw; /* 64px */
  /*  */
  /*  */
  /* Space */
  /* GapBetween Sections  */
  --PMGR_4px: 0.284vw;
  --PMGR_8px: 0.568vw;
  --PMGR_12px: 0.852vw;
  --PMGR_16px: 1.31vw;
  --PMGR_20px: 1.42vw;
  --PMGR_24px: 1.704vw;
  --PMGR_28px: 1.988vw;
  --PMGR_32px: 2.272vw;
  --PMGR_40px: 2.84vw;
  --PMGR_48px: 3.408vw;
  --PMGR_64px: 4.554vw;
  --PMGR_96px: 6.816vw;
  --PMGR_128px: 9.088vw;
}

/* For MobView */
@media (max-width: 768px) {
  :root {
    /* colors */
    --color_primary: #0063e6;
    --color_secondary: #b0fdce;
    --color_light_green: #e6ffef;
    --color_med_green: #68b54a;
    --color_dark_green: #217065;
    --color_white: #fff;
    --color_black: #000;
    --color_blue: #0053bf;
    --color_light_blue: #e6f1ff;

    /*  */
    /*  */
    /*  */
    /* Font Sizes (Default) */
    --font_4px: 0.928vw; /* 4px */
    --font_8px: 1.856vw; /* 8px */
    --font_12px: 2.784vw; /* 12px */
    --font_14px: 3.248vw; /* 16px */
    --font_16px: 3.712vw; /* 16px */
    --font_18px: 4.176vw; /* 18px */
    --font_20px: 4.64vw; /* 20px */
    --font_24px: 5.568vw; /* 24px */
    --font_32px: 7.424vw; /* 32px */
    --font_40px: 9.28vw; /* 40px */
    --font_48px: 11.136vw; /* 48px */
    --font_54px: 12.528vw; /* 48px */
    --font_64px: 14.848vw; /* 64px */
    /*  */
    /*  */
    /* Space */
    /* GapBetween Sections  */
    --PMGR_4px: 0.928vw;
    --PMGR_8px: 1.856vw;
    --PMGR_12px: 2.784vw;
    --PMGR_16px: 3.712vw;
    --PMGR_20px: 4.64vw;
    --PMGR_24px: 5.568vw;
    --PMGR_28px: 6.496vw;
    --PMGR_32px: 7.424vw;
    --PMGR_40px: 9.28vw;
    --PMGR_48px: 11.136vw;
    --PMGR_64px: 14.848vw;
    --PMGR_96px: 22.272vw;
    --PMGR_128px: 29.696vw;
  }
}

body {
  overflow-x: hidden;
}

.SFRegF400,
.SFRegF400 a,
.SFRegF400 a:active,
.SFRegF400 a:visited {
  font-family: SF400;
  font-style: normal;
  font-weight: 400;
}

.SFRegF500,
.SFRegF500 a,
.SFRegF500 a:active,
.SFRegF500 a:visited {
  font-family: SF500;
  font-style: normal;
  font-weight: 500;
}

.SFRegF600,
.SFRegF600 a,
.SFRegF600 a:active,
.SFRegF600 a:visited {
  font-family: SFBold;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.TeensBgTop,
.TeensBgBottom {
  position: absolute;
}

.TeensBgTop img,
.TeensBgBottom img {
  width: 35vw;
}
.TeensBgTop {
  right: -12%;
  top: -5%;
}
.TeensBgBottom {
  left: -1%;
  top: 15%;
}
@media (max-width: 768px) {
  .TeensBgTop,
  .TeensBgBottom {
    display: none;
  }
}