
@font-face {
  font-family: "JioType";

  src: url("../fonts/JioType/JioType-Black.woff2") format("woff2"),
    url("../fonts/JioType/JioType-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "JioType";
  src: url("../fonts/JioType/JioType-Light.woff2") format("woff2"),
    url("../fonts/JioType/JioType-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "JioType";
  src: url("../fonts/JioType/JioType-Bold.woff2") format("woff2"),
    url("../fonts/JioType/JioType-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "JioType";
  src: url("../fonts/JioType/JioType-Medium.woff2") format("woff2"),
    url("../fonts/JioType/JioType-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}


tabs {
  display: block;
  margin: 0 auto 20px;
  position: relative; }
  tabs > nav {
    -webkit-user-select: none;
    -moz-user-select: none; text-align: center;
    user-select: none;     margin: 50px 0px 0px 0px;
    font-size: 0;
    border-bottom: 1px solid #d0d0d0; }
    tabs > nav > tab {
      cursor: pointer;
      display: inline-block;
      padding: 0 20px;
      line-height: 2em;  font-family: "JioType"; font-size:16px;
      font-size: 16px;
      color: #cccccc;
      background: #fff; border: 1px solid #d0d0d0;    }
      tabs > nav > tab:hover {
        background-color: #cce4f5; }
      tabs > nav > tab.active, tabs > nav > tab[active='true'] {
        background: #cce4f5; font-family: "JioType"; font-size:16px; color:#027ad0; }
      tabs > nav > tab > span {
        display: block;
        pointer-events: none; }
  tabs > tab {
    display: block;
    padding: 20px 20px 0;
    background: white; }
    tabs > tab:before, tabs > tab:after {
      content: " ";
      display: table; }
    tabs > tab:after {
      clear: both; }
  tabs[alive='true'] > tab {
    display: none; }
    tabs[alive='true'] > tab.active, tabs[alive='true'] > tab[active='true'] {
      display: block; }
