/*==================================== 
  Typography
=====================================*/

@font-face {
  font-family: "ZiptyDoStd";
  src: url('_ZiptyDoStd.ttf');
}

@font-face {
  font-family: "TektonPro-Regular";
  src: url('_TektonPro-Regular.ttf');
}

@font-face {
  font-family: "CronosPro-Semibold";
  src: url('_CronosPro-Semibold.ttf');
}

@font-face {
  font-family: "CronosPro-Regular";
  src: url('_CronosPro-Regular.ttf');
}

@font-face {
  font-family: "CronosPro-LtIt";
  src: url('_CronosPro-LtIt.ttf');
}

@font-face {
  font-family: "CronosPro-Lt";
  src: url('_CronosPro-Lt.ttf');
}

@font-face {
  font-family: "CronosPro-Bold";
  src: url('_CronosPro-Bold.ttf');
}

.card {
  font-size: 1.125rem;
  @media #{$brk-wide} {
    font-size: .925em;
  }
  @media #{$brk-narrow} {
    font-size: .925em;
  }
  @media #{$brk-iPhone6s-wide} {
    font-size: .825em;
  }
}

.exercises {
  font-family: "CronosPro-Regular";
  font-size: 2em;
  line-height: 1em;
}

.mac .exercises,
.win .exercises {
  font-family: "Cronos Pro";
}

.win .exercises {
  font-size: 2.5em;
}

.question {
  font-family: "TektonPro-Regular";
  font-weight: 100;
  word-spacing: 0px;
  font-size: 2em;
  line-height: 1.3em;
  color: $color-text-base;
  text-align: left;
  @media #{$brk-iPhone6s-wide} {
    line-height: 1em;
  }
}

.win .question,
.mac .question {
  font-family: "Tekton Pro"; //	font-family: "Cronos Pro";
  //	font-style: italic;
}

.win .question {
  font-family: "Tekton Pro"; //	font-family:"Cronos Pro";
  word-spacing: 0px;
  font-size: 2em;
}

//
//.question_back {
//	font-size: 2em;
//	margin-bottom: .5em;
//}
/*--------------- field "Example" ---------------------- */

.img_example {
  font-family: tahoma;
  font-size: 1.5em;
  text-align: left;
  padding: 0;
}

/* ------------------------------- Add words Fonts---------------------------------- */

.add_words1,
.add_words2 {
  font-size: 1.2em;
  text-align: left;
  color: black;
}

.choices_words {
  font-family: "CronosPro-Regular";
  font-size: 1.2em;
  text-align: center;
}

.win .choices_words,
.mac .choices_words {
  font-family: "Cronos Pro";
  font-style: normal;
}

.choices_words li {
  font-size: 1.1em;
}

.win .choices_words li,
.win .choices_words {
  font-size: 1.3em;
}

/* ------------------------------- Header Fonts---------------------------------- */

.unit_table,
.th_1,
.td_1 {
  font-family: "CronosPro-Regular";
  font-size: 1.5em;
  line-height: 1em;
  @media #{$brk-iPhone6s-wide} {}
}

.win .unit_table,
.win .th_1,
.win .td_1,
.mac .unit_table,
.mac .th_1,
.mac .td_1 {
  font-family: "Cronos Pro";
  font-weight: 500;
  font-style: bold;
}

.th_2 {
  color: #3b3b3b;
  font-family: $color-text-base;
  font-weight: 800;
}

.win .th_2 {
  font-family: "CronosPro-Semibold";
}

.win .th_1 {
  letter-spacing: 2px;
}

.add_words {
  font-family: Helvetica;
}

#typeans,
#typeans1,
#typeans2,
#typeans3,
#typeans4,
#typeans5,
#typeans6,
#typeans7,
#typeans8,
#typeans9,
#typeans10,
#typeans11,
#typeans12,
#typeans13,
#typeans14,
#typeans15,
#typeans16,
#typeans17,
#typeans18,
#typeans19,
#typeans20,
#typeans21 {
  font-family: "TektonPro-Regular" !important;
  font-style: normal;
}

.win #typeans,
.mac #typeans,
.win #typeans1,
.mac #typeans1,
.win #typeans2,
.mac #typeans2,
.win #typeans3,
.mac #typeans3,
.win #typeans4,
.mac #typeans4,
.win #typeans5,
.mac #typeans5,
.win #typeans6,
.mac #typeans6,
.win #typeans7,
.mac #typeans7,
.win #typeans7,
.mac #typeans8,
.win #typeans9,
.mac #typeans9,
.win #typeans10,
.mac #typeans10,
.win #typeans11,
.mac #typeans11,
.win #typeans12,
.mac #typeans12,
.win #typeans13,
.mac #typeans13,
.win #typeans14,
.mac #typeans14,
.win #typeans15,
.mac #typeans15,
.win #typeans16,
.mac #typeans16,
.win #typeans17,
.mac #typeans17,
.win #typeans18,
.mac #typeans18,
.win #typeans19,
.mac #typeans19,
.win #typeans20,
.mac #typeans20,
.win #typeans21,
.mac #typeans21 {
  font-family: "Tekton Pro" !important;
  font-style: normal;
  color: $color-prim;
}

/* ------------------------------- type Fonts---------------------------------- */

#typeans {
  font-family: "CronosPro-LtIt" !important; //	font-family: "TektonPro-Regular" !important;
  font-style: normal;
}

.win #typeans,
.mac #typeans {
  font-family: "Cronos Pro" !important;
}

.cloze {
  font-family: "TektonPro-Regular";
}

.win .cloze,
.mac .cloze {
  //	font-family:"Cronos Pro";
  font-family: "Tekton Pro";
  font-style: italic;
  color: $apple-blossom;
}

code#typeans {
  font-family: "TektonPro-Regular" !important;
  font-size: 1.5em;
  @media #{$brk-wide} {
    font-size: 1.2em;
  }
  @media #{$brk-narrow} {
    // font-size: .875em;
  }
  @media #{$brk-extra-narrow} {
    // font-size: .575em;
  }
}

.typearrow {
  font-size: 0.8em;
  color: black;
}

.win code#typeans,
.mac code#typeans {
  font-family: "Tekton Pro" !important;
  font-size: 1.5em;
  letter-spacing: .02em;
  @media #{$brk-wide} {
    font-size: 1em;
  }
  @media #{$brk-narrow} {
    font-size: .575em;
  }
}

#typeans {
  text-align: center;
}

.cloze {
  text-align: center;
  line-height: 0;
  color: $color-sec;
}

input#typeans {
  color: black;
}

input#typeans[title] {
  line-height: 1em;
}

code#typeans {
  line-height: 1.5;
  text-align: center;
  color: $color-prim;
}

.td_back {
  text-align: center;
}

#typeans span {
  background: $white;
  text-align: center;
}

.ipad .typeBad {
  background-color: red;
}

.typeBad {
  color: #dc322f;
  font-weight: normal;
}

.typeMissed,
.typePass {
  color: #268bd2;
  font-weight: normal;
}

.typeGood {
  color: #2ed85a;
  font-weight: normal;
}

/* ------------------------------- Buttons Fonts---------------------------------- */

#overlay_title_close #p_button_close {
  text-align: center;
  color: bisque;
  font-family: Verdana, serif;
  font-size: 3em;
}

#overlay_title #p_button,
.overlay .p_app_button {
  font-family: "CronosPro-Regular";
  text-align: center;
  color: bisque;
}

.mac #overlay_title #p_button,
.mac .p_app_button,
.win #overlay_title #p_button,
.win .p_app_button {
  font-family: "Cronos Pro";
}

.overlay .p_app_button {
  font-size: 3rem;
  line-height: 170%;
  @media #{$brk-narrow} {
    font-size: 1.3em;
    margin-bottom: 0;
    line-height: 250%;
  }
  @media #{$brk-iPhone6s-wide} {
    font-size: 1.4em; // line-height: 140%;
  }
  @media #{$brk-extra-narrow} {
    font-size: 1em; // line-height: 140%;
  }
}

.mac .overlay .p_app_button,
.win .overlay .p_app_button {
  line-height: 150%;
  @media #{$brk-narrow} {
    line-height: 250%;
  }
}

#overlay_title #p_button {
  font-size: 4rem;
  line-height: 100%;
  @media #{$brk-narrow} {
    font-size: 3.5em;
    margin-bottom: 0;
  }
}

.win #overlay_title #p_button,
.mac #overlay_title #p_button {
  line-height: 100%;
}

span.close {
  color: white;
  font-size: 4rem;
  text-align: center;
  line-height: 90%;
  @media #{$brk-narrow} {
    font-size: 4em;
  }
  @media #{$brk-iPhone6sPlus-wide} {
    font-size: 3em;
  }
  @media #{$brk-iPhone-wide} {
    font-size: 2.5em;
  }
  @media #{$brk-extra-narrow} {
    font-size: 2em;
  }
}

// Footer
.deck {
  font-size: 1.3rem;
  @media #{$brk-wide} {
    font-size: 1.2em;
  }
}

.deck kbd {
  color: black
}

/*==================================== 
 							HIGHLIGHT
=====================================*/

pre.highlight,
div.highlight {
  font-family: "CronosPro-Regular";
  font-weight: 100;
  word-spacing: 0px;
  font-size: 1.3em;
  line-height: 120%;
  text-align: left; // word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
}

.mac pre.highlight,
.win pre.highlight .mac div.highlight,
.win div.highlight {
  font-family: "Cronos Pro";
}