LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    
    Source Han Serif
    
    
    
    
    



  
  



  
  

Source Han Serif

An open source Pan-CJK typeface

使
watch the video

Source Han Serif is the second Pan-CJK typeface family from Adobe Type, and the serif counterpart to Source Han Sans, both of which we released in response to a need for a unified typeface design to serve the 1.5 billion people in East Asia.

Source Han Serif supports four different East Asian languages — Simplified Chinese, Traditional Chinese, Japanese, and Korean — and the 65,535 glyphs in each of its seven weights are designed to work together with a consistent design that emphasizes shared elements between the languages while honoring the diversity of each. Also included is a rich set of Western glyphs supporting the Latin, Greek, and Cyrillic scripts, which were derived from Source Serif.

65,535 glyphs per weight
7 weights
458,745 glyphs in total
田取千目協受代最出道対強選場設現内行子以時話野区
기컨보과역드투스발대점널산캐울로획림출배주핑정엘
么军主业与到多点过和只那问行时他向体事想重了所将
どはバせトみゐでドオビパムベねシれぜエぼタいおひ
万原平高員来定期一連後東生山民政立所新事市回公意
사룹개그교털부셔토코케상매십벌병외핸미물명탈지판
物以部里正人机手们大个说如全有中最此还出情也作学
イテんじワつしヨこゆえべけナギヰきだほゲさゼづユ
化党実務見入小人学通動者勝表明年国七数金成月度議
여어농꽃해종협운템비메고랜식삿차진랑초계영회데용
之它但第对公面而年现高为战是可天间我性然其定你方
ズごらウノロたよクぶヱデゾげばへコザわくあヅかメ
九四都六合発経県決名不機開自戦保全法調組気三五氏

The complete Source Han typeface series goes far beyond the reach of the average type “superfamily” and represents a huge collaborative undertaking between Adobe and Google, with participation from partner foundries Sandoll Communications in Korea, Iwata Corporation in Japan, and Changzhou SinoType in China. The fonts are available on Typekit, with additional deployment formats available as open source on GitHub.

Source Han Serif
Available on Typekit for web use and desktop sync

Get the fonts
desktop sync
web use

The Source Han projects would not have been possible without our partnership with Google, which helped to initiate the project and provided direction, testing resources, and financial support. The Source Han fonts are integrated into Google’s Pan-Unicode font family, called Noto.

“The goal of the Google Noto font project — developing a high-quality, harmonized font family for all modern devices covering all languages — was extremely daunting in size and scope,” said Google’s Director of Internationalization Bob Jung. “The CJK languages alone are critical to over a billion users. Adobe, a pioneer in digital typography, was the perfect partner to help us bring beautiful CJK to Noto.”

“This is an important release for multilingual designers,” said Geumho Seok, CEO of Sandoll. “These fonts achieve the goal of ‘No More Tofu,’ meaning no empty glyphs when typesetting Unicode.”

unicode U+66DC
language Traditional Chinese
unicode U+66DC
language Simplified Chinese
unicode U+66DC
language Japanese
unicode U+66DC
language Korean
Spot the Differences
In some cases, glyphs based on an original ideograph might have as many as four regional variations. Source Han Serif covers all these variations with carefully-designed regional glyphs. Once you select the appropriate language-specific font or language-tag the text, you'll be all set with the correct glyph variations.

Source Han Serif is optimized for screen display like its sibling, Source Han Sans, but has a completely different personality that could work well in more literary texts or for graceful, stylish headings. It also works beautifully in print. Syncing the fonts through Typekit will immediately enable you to work in multiple languages with the same typeface, and to use the fonts in any desktop application with a font selection menu.

ExtraLight Light Regular Medium SemiBold Bold Heavy
Test Glyph
Source Han Serif has 7 different weights, covering a wide range of typographic needs.

Source Han Serif and Source Han Sans are available for use on the web and sync from Typekit’s free library, which means you don’t even need a paid Creative Cloud plan to use them. If you haven’t used Typekit before, all you need to get started is a free Adobe ID to log in. View the fonts on Typekit, and sign in to start syncing.

Meet the world-class team behind Source Han Serif

watch the video

Watch our video to learn more about the partners and to see how the whole thing came together.

Creating Source Han Serif was an enormous collaborative effort, and we couldn’t have done it without the partner support that we had. In this short video, we summarize and reflect on the many, many months of work that each partner contributed to the project of creating a truly international typeface. Watch it here or on YouTube, and check out Google’s announcement too.

Ken Lunde

Dr. Ken Lunde, the Project Architect for the Source Han typeface families, did much of the heavy lifting, juggling nearly a half-million glyphs and their associated metadata and turning them into fully-functional Pan-CJK fonts.

Ryoko Nishizuka

Ryoko Nishizuka is Adobe’s Chief Type Designer in Tokyo, and led the design of the glyphs for ideographs, Japanese kana, and other Japanese characters in Source Han Serif. She did the same for Source Han Sans, and walked us through her design process in a 2014 interview shortly after its release.

Frank Grießhammer

Also from Adobe’s type team, Type Designer Frank Grießhammer designed the Latin, Greek, and Cyrillic glyphs that are included with Source Han Serif — and which also exist as their own typeface, Source Serif, whose latest update was released in January of this year. Because the Latin glyph design was purposefully coordinated to support Source Han Serif, Frank consulted with Ryoko early on when beginning the design process for Source Serif.

CSS
*:lang(en),
*:lang(ja) {
  font-family: "source-han-serif-japanese", serif;
}
*:lang(en) .sans, *:lang(en).sans,
*:lang(ja) .sans,
*:lang(ja).sans {
  font-family: "source-han-sans-japanese", sans-serif;
}

*:lang(ko) {
  font-family: "source-han-serif-korean", serif;
}
*:lang(ko) .sans, *:lang(ko).sans {
  font-family: "source-han-sans-korean", sans-serif;
}

*:lang(zh-Hans) {
  font-family: "source-han-serif-sc", serif;
}
*:lang(zh-Hans) .sans, *:lang(zh-Hans).sans {
  font-family: "source-han-sans-simplified-c", sans-serif;
}

*:lang(zh-Hant) {
  font-family: "source-han-serif-tc", serif;
}
*:lang(zh-Hant) .sans, *:lang(zh-Hant).sans {
  font-family: "source-han-sans-traditional", sans-serif;
}

body {
  overflow-x: hidden;
}

body:lang(zh-Hans) {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.container {
  position: relative;
}
@media screen and (min-width: 1441px) {
  .container {
    width: 1201px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container {
    width: auto;
    margin: 0 120px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .container {
    width: auto;
    padding: 0 40px;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 640px) {
  .container {
    width: auto;
    padding: 0 20px;
    overflow-x: hidden;
  }
}

.clr:after {
  content: "";
  display: block;
  clear: both;
}

a {
  color: #000;
  text-decoration: none;
}

p a {
  position: relative;
  display: inline-block;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
p a:before, p a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px #ccc;
  z-index: -2;
}
p a:before {
  border: solid 1px transparent;
  width: 0;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
  background-color: #ccc;
}
p a:hover {
  color: #666;
}
p a:hover:before {
  width: 100%;
}

/* body {
  .video-button {
    display: none;
  }
  &.video-ready .video-button {
    display: block;
  }
} */
.hanging {
  text-indent: -0.5em;
  /* *:lang(zh-Hans) &{
    text-indent: -1em;
  } */
}

textarea:focus,
input:focus,
[contenteditable]:focus {
  outline: 0px solid transparent;
}

h1.title {
  font-weight: 900;
  font-size: 48px;
  line-height: 1.44;
  padding-top: 30px;
}
@media screen and (max-width: 1023px) {
  h1.title {
    font-size: 36px;
  }
}
@media screen and (max-width: 640px) {
  h1.title {
    font-size: 30px;
  }
}

h1.secondary-title {
  font-weight: 900;
  font-size: 40px;
  line-height: 1.35;
}
@media screen and (max-width: 1023px) {
  h1.secondary-title {
    font-size: 30px;
  }
}
@media screen and (max-width: 640px) {
  h1.secondary-title {
    font-size: 25px;
  }
}

h2.sub-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.44;
  margin-top: 4px;
}
@media screen and (max-width: 1023px) {
  h2.sub-title {
    font-size: 22px;
  }
}
@media screen and (max-width: 640px) {
  h2.sub-title {
    font-size: 20px;
    font-weight: 500;
  }
}

.caption {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.button {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  height: 32px;
  border: solid 1px #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 6px;
  border-radius: 16px;
  padding: 7px 20px;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #000;
  color: #fff;
}

.cell {
  position: relative;
  width: 80px;
  height: 80px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.cell:hover, .cell.changing {
  -webkit-transition: none;
  transition: none;
  background-color: #000;
}
.cell:hover:before, .cell:hover:after, .cell.changing:before, .cell.changing:after {
  border-color: #666;
}
.cell:hover span, .cell.changing span {
  color: #fff;
}
.cell:hover span:before, .cell:hover span:after, .cell.changing span:before, .cell.changing span:after {
  border-color: #666;
}
.cell:hover i:before, .cell.changing i:before {
  border-color: #666;
}
.cell:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  border-top: dashed 1px #ccc;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 0;
}
.cell:after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  border-left: dashed 1px #ccc;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
.cell span {
  font-size: 50px;
  position: absolute;
  display: block;
  text-align: center;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.cell span:before {
  content: "";
  position: absolute;
  width: 141%;
  height: 0;
  border-top: dashed 1px #ccc;
  left: -1px;
  top: -1px;
  margin: auto;
  z-index: -1;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
.cell span:after {
  content: "";
  position: absolute;
  width: 141%;
  height: 0;
  border-top: dashed 1px #ccc;
  right: -1px;
  top: -1px;
  margin: auto;
  z-index: -1;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.cell i {
  display: block;
  padding-bottom: 100%;
}
.cell i:before {
  content: "";
  position: absolute;
  border: dashed 1px #ccc;
  width: 70%;
  height: 70%;
  left: 50%;
  top: -1px;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.glyph-table {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
}
.glyph-table .cell {
  width: 80px;
  height: 80px;
  float: right;
}
.glyph-table .cell span {
  font-weight: 500;
  font-size: 54px;
  line-height: 75px;
}
.glyph-table .cell i:before {
  border: none;
}
@media screen and (max-width: 1023px) {
  .glyph-table .cell {
    width: calc(100% / 12);
    height: auto;
  }
  .glyph-table .cell span {
    line-height: calc( (100vw) / 12 * 0.94 );
    font-size: calc( (100vw) / 12 * 0.64 );
  }
}
@media screen and (max-width: 640px) {
  .glyph-table .cell {
    width: calc(100% / 8);
    height: auto;
  }
  .glyph-table .cell span {
    line-height: calc( (100vw) / 8 * 0.94 );
    font-size: calc( (100vw) / 8 * 0.64 );
  }
}

.container.header.vertical .glyph-table {
  margin-top: 48px;
}
@media screen and (min-width: 1441px) {
  .container.header.vertical .glyph-table {
    width: calc(50vw + 401px);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container.header.vertical .glyph-table {
    width: calc(100vw - 120px);
  }
}
@media screen and (max-width: 1023px) {
  .container.header.vertical .glyph-table {
    width: calc(100vw);
    height: calc(500vw / 12);
    margin-left: -40px;
  }
  .container.header.vertical .glyph-table .cell {
    float: left;
  }
  .container.header.vertical .glyph-table .cell:nth-child(n + 61) {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .container.header.vertical .glyph-table {
    height: calc(500vw / 8);
    margin-top: 36px;
    margin-left: -20px;
  }
  .container.header.vertical .glyph-table .cell:nth-child(n + 41) {
    display: none;
  }
}
@media screen and (min-width: 1023px) {
  .container.header.vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-top: 34px;
  }
  .container.header.vertical h1, .container.header.vertical h2 {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .container.header.vertical h1.title {
    padding-top: 0;
    margin-right: 80px;
    font-size: 56px;
    width: 73px;
    height: 560px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .container.header.vertical h1.title span {
    display: none;
  }
  .container.header.vertical h2.sub-title {
    margin-top: 0;
    font-size: 48px;
    line-height: 56px;
    width: 62px;
    height: 560px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  *:lang(ja) .container.header.vertical h2.sub-title {
    width: 124px;
  }
  .container.header.vertical .glyph-table {
    height: 560px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-right: 80px;
    margin-top: 0;
  }
}

.container.header.English:after {
  content: "";
  display: block;
  clear: both;
}
.container.header.English .glyph-table {
  margin-top: 48px;
}
@media screen and (min-width: 1441px) {
  .container.header.English .glyph-table {
    width: calc(50vw + 601px);
    float: right;
    margin-right: 80px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container.header.English .glyph-table {
    width: calc(100vw - 120px);
    float: right;
    margin-right: 80px;
  }
}
@media screen and (max-width: 1023px) {
  .container.header.English .glyph-table {
    width: calc(100vw);
    height: calc(500vw / 12);
    margin-left: -40px;
  }
  .container.header.English .glyph-table .cell {
    float: left;
  }
  .container.header.English .glyph-table .cell:nth-child(n + 61) {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .container.header.English .glyph-table {
    height: calc(500vw / 8);
    margin-top: 36px;
    margin-left: -20px;
  }
  .container.header.English .glyph-table .cell:nth-child(n + 41) {
    display: none;
  }
}

.navigation {
  position: fixed;
  right: 0;
  top: 464px;
  z-index: 2;
}
@media screen and (max-height: 705px) {
  .navigation {
    top: 264px;
  }
}
@media screen and (max-height: 505px) {
  .navigation {
    top: 144px;
  }
}
@media screen and (min-width: 1441px) {
  .navigation {
    width: calc(50vw - 600px);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .navigation {
    width: 121px;
  }
}
@media screen and (max-width: 1023px) {
  .navigation {
    display: none;
  }
}
.navigation .nav-item {
  margin-top: 39px;
  width: 100%;
  height: 41px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: solid 1px #ccc;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
}
.navigation .nav-item span {
  display: block;
  width: 80px;
  line-height: 39px;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
*:lang(ja) .navigation .nav-item span {
  letter-spacing: 0;
}
.navigation .nav-item:hover {
  cursor: pointer;
}
.navigation .nav-item:hover span {
  background-color: #000 !important;
  color: #fff;
}
.navigation.Chinese {
  top: 304px;
}
@media screen and (max-height: 705px) {
  .navigation.Chinese {
    top: 184px;
  }
}
@media screen and (max-height: 585px) {
  .navigation.Chinese {
    top: 64px;
  }
}
.navigation.Chinese .nav-item {
  margin-top: 79px;
}
.navigation.Chinese .nav-item span {
  font-size: 30px;
  height: 81px;
  width: 81px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  border-bottom: solid 1px #ccc;
  position: relative;
  text-align: center;
  padding-left: 6px;
  letter-spacing: 10px;
  white-space: nowrap;
}
.navigation.Chinese .nav-item span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}
.navigation.Chinese .nav-item span:after {
  content: "";
  position: absolute;
  height: 100%;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: dashed 1px #ccc;
}

.banner {
  padding-top: 30px;
  padding-bottom: 30px;
}
.banner .logo {
  display: inline-block;
}
.banner .logo img {
  display: block;
}
.banner ul.language {
  margin-top: -30px;
  float: right;
  margin-right: -10px;
}
.banner ul.language li {
  float: left;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin-left: 20px;
}
.banner ul.language li.active a {
  color: #999;
  border-color: #ccc;
}
.banner ul.language li a {
  display: block;
  padding: 41px 10px 10px 10px;
  color: #000;
  text-decoration: none;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  border-bottom: solid 1px transparent;
}
@media screen and (max-width: 768px) {
  .banner {
    padding-bottom: 0;
  }
  .banner ul.language {
    margin-top: 0;
    margin-right: -20px;
  }
  .banner ul.language li {
    margin: 0 10px 0 0;
  }
  .banner ul.language li a {
    padding: 10px;
    border: none;
  }
}
@media screen and (max-width: 640px) {
  .banner {
    padding-top: 20px;
  }
}
@media screen and (max-width: 500px) {
  .banner ul.language {
    float: left;
    width: 100%;
    margin-left: -10px;
    margin-top: 10px;
  }
}

.container.video {
  margin-top: 60px;
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .container.video {
    width: auto;
    margin: 60px 40px 0 40px;
    padding: 0;
  }
}
@media screen and (max-width: 640px) {
  .container.video {
    width: auto;
    margin: 60px 20px 0 20px;
    padding: 0;
  }
}

.video-wrapper {
  border: solid 1px #ccc;
  position: relative;
}
.video-wrapper .video-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: auto;
  width: 100px;
  height: 100px;
  cursor: pointer;
  z-index: 2;
}
.video-wrapper .video-button path {
  fill: #000;
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
}
.video-wrapper .video-button:hover path {
  fill: #07b57a !important;
}
.video-wrapper svg.video-illustration {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
}
.video-wrapper svg.video-illustration path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 1s ease;
  transition: stroke-dashoffset 1s ease;
}
@-webkit-keyframes svgDraw {
  to {
    stroke-dashoffset: 501;
  }
}
@keyframes svgDraw {
  to {
    stroke-dashoffset: 501;
  }
}
.video-wrapper svg.video-illustration path.caligraphy-stroke {
  stroke-dasharray: 500;
  -webkit-animation: svgDraw 3s linear alternate infinite;
          animation: svgDraw 3s linear alternate infinite;
}
.video-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.video-wrapper:hover svg.video-illustration path,
.video-wrapper:hover svg.video-illustration polyline,
.video-wrapper:hover svg.video-illustration polygon {
  stroke-dashoffset: 1001;
}
.video-wrapper:hover img {
  opacity: 1;
}
.video-wrapper:hover .video-button path {
  fill: #fff;
}

.container.one-column {
  padding-top: 60px;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.667;
}
.container.one-column p {
  margin-bottom: 24px;
}
@media screen and (max-width: 640px) {
  .container.one-column {
    font-size: 20px;
    font-weight: 500;
  }
}

.container.glyph-regional-design {
  margin-top: 60px;
}
.container.glyph-regional-design .glyph-info {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
}
.container.glyph-regional-design .glyph-info .glyph-info-item {
  position: relative;
  width: 25%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-right: solid 1px #ccc;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media screen and (max-width: 859px) {
  .container.glyph-regional-design .glyph-info .glyph-info-item {
    width: 50%;
  }
  .container.glyph-regional-design .glyph-info .glyph-info-item:nth-child(1), .container.glyph-regional-design .glyph-info .glyph-info-item:nth-child(2) {
    border-bottom: solid 1px #ccc;
  }
}
.container.glyph-regional-design .glyph-info .glyph-info-item .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  line-height: 22px;
}
.container.glyph-regional-design .glyph-info .glyph-info-item .row span.label {
  width: 92px;
  margin-right: 8px;
  font-weight: 900;
  font-size: 12px;
  color: #666;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.container.glyph-regional-design .glyph-info .glyph-info-item .row span.value {
  font-weight: 700;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .container.glyph-regional-design .glyph-info .glyph-info-item .row {
    display: block;
    padding-left: 10px;
  }
  .container.glyph-regional-design .glyph-info .glyph-info-item .row:first-child {
    margin-bottom: 6px;
  }
  .container.glyph-regional-design .glyph-info .glyph-info-item .row span.label {
    display: block;
    text-align: left;
  }
}
.container.glyph-regional-design .glyph-graphic {
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.container.glyph-regional-design .glyph-graphic .cell {
  height: auto;
  border-color: #ccc;
}
.container.glyph-regional-design .glyph-graphic .cell span {
  font-weight: 700;
}
@media screen and (min-width: 1441px) {
  .container.glyph-regional-design .glyph-graphic .cell {
    width: 25%;
  }
  .container.glyph-regional-design .glyph-graphic .cell span {
    line-height: calc( 1201px * 0.25 * 0.94 );
    font-size: calc( 1201px * 0.2 );
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container.glyph-regional-design .glyph-graphic .cell {
    width: 25%;
  }
  .container.glyph-regional-design .glyph-graphic .cell span {
    line-height: calc( (100vw - 240px) * 0.25 * 0.94 );
    font-size: calc( (100vw - 240px) * 0.25 * 0.8 );
  }
}
@media screen and (min-width: 860px) and (max-width: 1023px) {
  .container.glyph-regional-design .glyph-graphic .cell {
    width: 25%;
  }
  .container.glyph-regional-design .glyph-graphic .cell span {
    line-height: calc( (100vw - 80px) * 0.25 * 0.94 );
    font-size: calc( (100vw - 80px) * 0.25 * 0.8 );
  }
}
@media screen and (min-width: 641px) and (max-width: 859px) {
  .container.glyph-regional-design .glyph-graphic .cell {
    width: 50%;
  }
  .container.glyph-regional-design .glyph-graphic .cell span {
    line-height: calc( (100vw - 80px) * 0.5 * 0.94 );
    font-size: calc( (100vw - 80px) * 0.5 * 0.8 );
  }
}
@media screen and (max-width: 640px) {
  .container.glyph-regional-design .glyph-graphic .cell {
    width: 50%;
  }
  .container.glyph-regional-design .glyph-graphic .cell span {
    line-height: calc( (100vw - 40px) * 0.5 * 0.94 );
    font-size: calc( (100vw - 40px) * 0.5 * 0.8 );
  }
}
.container.glyph-regional-design .caption {
  width: calc(100% - 320px);
  margin-top: 10px;
  float: left;
}
@media screen and (max-width: 1023px) {
  .container.glyph-regional-design .caption {
    width: 100%;
  }
}
.container.glyph-regional-design .button {
  float: right;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}
.container.glyph-regional-design.game-on .cell {
  cursor: crosshair;
}
.container.glyph-regional-design.game-on .cell .spot {
  position: absolute;
  border: dashed 1px transparent;
  border-radius: 50%;
  z-index: 3;
}
.container.glyph-regional-design.game-on .cell .spot.spot1 {
  width: 38%;
  height: 38%;
  left: 39%;
  top: 10%;
}
.container.glyph-regional-design.game-on .cell .spot.spot2 {
  width: 28%;
  height: 28%;
  left: 27%;
  top: 41%;
}
.container.glyph-regional-design.game-on .cell .spot.spot3 {
  width: 20%;
  height: 20%;
  left: 57%;
  top: 37%;
}
.container.glyph-regional-design.game-on .cell .spot.spot4 {
  width: 16%;
  height: 16%;
  left: 74%;
  top: 73%;
}
.container.glyph-regional-design.game-on .cell:hover {
  background-color: #fff;
}
.container.glyph-regional-design.game-on .cell:hover:before, .container.glyph-regional-design.game-on .cell:hover:after,
.container.glyph-regional-design.game-on .cell:hover span:before, .container.glyph-regional-design.game-on .cell:hover span:after,
.container.glyph-regional-design.game-on .cell:hover i:before {
  border-color: #ccc;
}
.container.glyph-regional-design.game-on .cell span {
  color: #07b57a;
}
.container.glyph-regional-design.game-on.spot1-found .spot1 {
  border: dashed 1px #000;
}
.container.glyph-regional-design.game-on.spot2-found .spot2 {
  border: dashed 1px #000;
}
.container.glyph-regional-design.game-on.spot3-found .spot3 {
  border: dashed 1px #000;
}
.container.glyph-regional-design.game-on.spot4-found .spot4 {
  border: dashed 1px #000;
}
.container.glyph-regional-design.game-on .button {
  text-indent: -9999px;
  color: transparent;
  min-width: 200px;
}
.container.glyph-regional-design.game-on .button:after, .container.glyph-regional-design.game-on .button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.container.glyph-regional-design.game-on .button:before {
  width: 16px;
  border-radius: 16px 0 0 16px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
  background-color: #07b57a;
}
.container.glyph-regional-design.game-on .button:after {
  right: 0;
  opacity: 0;
  border-radius: 16px;
  background: url("../images/eye-solid.svg") center center no-repeat #000;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.container.glyph-regional-design.game-on .button:hover:after {
  opacity: 1;
}
.container.glyph-regional-design.game-on.step-1 .button:before {
  width: 25%;
}
.container.glyph-regional-design.game-on.step-2 .button:before {
  width: 50%;
}
.container.glyph-regional-design.game-on.step-3 .button:before {
  width: 75%;
}
.container.glyph-regional-design.game-on.step-4 .button:before {
  width: 100%;
  border-radius: 16px;
}
.container.glyph-regional-design.game-on.step-4 .button:after {
  opacity: 1;
  background-color: #07b57a;
}
.container.glyph-regional-design.game-on.view-results .spot {
  border: dashed 1px #000;
}
.container.glyph-regional-design.game-on.view-results .button:after {
  opacity: 1;
  background-color: #07b57a;
}

.container.variations {
  margin-top: 60px;
}
.container.variations .weight-info {
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
}
.container.variations .weight-info span {
  display: block;
  width: calc(100% / 7);
  text-align: center;
  font-size: 16px;
  line-height: 36px;
  border-right: solid 1px #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (min-width: 860px) {
  .container.variations .weight-info span {
    width: calc(100% / 7);
  }
}
@media screen and (min-width: 481px) and (max-width: 859px) {
  .container.variations .weight-info span {
    width: 25%;
    border-bottom: solid 1px #ccc;
  }
  .container.variations .weight-info span:nth-child(n + 5) {
    border-bottom: none;
  }
}
@media screen and (max-width: 480px) {
  .container.variations .weight-info span {
    width: calc(100% / 3);
    border-bottom: solid 1px #ccc;
  }
  .container.variations .weight-info span:nth-child(n + 7) {
    border-bottom: none;
  }
}
.container.variations .weight-info span:nth-child(1) {
  font-weight: 100;
}
.container.variations .weight-info span:nth-child(2) {
  font-weight: 300;
}
.container.variations .weight-info span:nth-child(3) {
  font-weight: 400;
}
.container.variations .weight-info span:nth-child(4) {
  font-weight: 500;
}
.container.variations .weight-info span:nth-child(5) {
  font-weight: 600;
}
.container.variations .weight-info span:nth-child(6) {
  font-weight: 700;
}
.container.variations .weight-info span:nth-child(7) {
  font-weight: 900;
}
.container.variations .weight-graphic {
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
}
.container.variations .weight-graphic .cell {
  height: auto;
  border-color: #ccc;
}
@media screen and (min-width: 1441px) {
  .container.variations .weight-graphic .cell {
    width: calc(100% / 7);
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( 1201px / 7 * 0.94 );
    font-size: calc( 1201px / 7 * 0.8 );
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .container.variations .weight-graphic .cell {
    width: calc(100% / 7);
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( (100vw - 240px) / 7 * 0.94 );
    font-size: calc( (100vw - 240px) / 7 * 0.8 );
  }
}
@media screen and (min-width: 860px) and (max-width: 1023px) {
  .container.variations .weight-graphic .cell {
    width: calc(100% / 7);
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( (100vw - 80px) / 7 * 0.94 );
    font-size: calc( (100vw - 80px) / 7 * 0.8 );
  }
}
@media screen and (min-width: 641px) and (max-width: 859px) {
  .container.variations .weight-graphic .cell {
    width: 25%;
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( (100vw - 80px) / 4 * 0.94 );
    font-size: calc( (100vw - 80px) / 4 * 0.8 );
  }
}
@media screen and (max-width: 640px) {
  .container.variations .weight-graphic .cell {
    width: 25%;
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( (100vw - 40px) / 4 * 0.94 );
    font-size: calc( (100vw - 40px) / 4 * 0.8 );
  }
}
@media screen and (max-width: 480px) {
  .container.variations .weight-graphic .cell {
    width: calc(100% / 3);
  }
  .container.variations .weight-graphic .cell span {
    line-height: calc( (100vw - 40px) / 3 * 0.94 );
    font-size: calc( (100vw - 40px) / 3 * 0.8 );
  }
}
.container.variations .weight-graphic .cell:nth-child(1) span {
  font-weight: 100;
}
.container.variations .weight-graphic .cell:nth-child(2) span {
  font-weight: 300;
}
.container.variations .weight-graphic .cell:nth-child(3) span {
  font-weight: 400;
}
.container.variations .weight-graphic .cell:nth-child(4) span {
  font-weight: 500;
}
.container.variations .weight-graphic .cell:nth-child(5) span {
  font-weight: 600;
}
.container.variations .weight-graphic .cell:nth-child(6) span {
  font-weight: 700;
}
.container.variations .weight-graphic .cell:nth-child(7) span {
  font-weight: 900;
}
.container.variations .caption {
  width: calc(100% - 320px);
  margin-top: 10px;
  float: left;
}
@media screen and (max-width: 1023px) {
  .container.variations .caption {
    width: 100%;
  }
}
.container.variations .tester {
  display: inline-block;
  float: right;
}
.container.variations .tester span.label {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 4px;
  height: 36px;
  line-height: 36px;
}
.container.variations .tester input {
  font-size: 22px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  width: 30px;
  outline: none;
  border: none;
  border-bottom: solid 1px #000;
  border-radius: none;
  -webkit-border-radius: 0px;
}

.container.glyph-count {
  margin-top: 60px;
  position: relative;
}
@media screen and (max-width: 640px) {
  .container.glyph-count {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.container.glyph-count .glyph-count-wrapper {
  width: calc(50vw + 50%);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.container.glyph-count .glyph-count-info {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.container.glyph-count .glyph-count-info .row {
  margin-bottom: 30px;
}
.container.glyph-count .glyph-count-info .row:last-child {
  margin-bottom: 0;
}
.container.glyph-count .glyph-count-info .row .number {
  display: inline-block;
  font-weight: 100;
  font-size: 70px;
  width: 250px;
  text-align: right;
  margin-right: 10px;
}
.container.glyph-count .glyph-count-info .row .label {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 1023px) {
  .container.glyph-count .glyph-count-info {
    padding-top: 30px;
  }
  .container.glyph-count .glyph-count-info .row .number {
    font-size: 50px;
    font-weight: 300;
    width: 180px;
  }
}
@media screen and (max-width: 640px) {
  .container.glyph-count .glyph-count-info {
    padding-top: 0;
    margin-bottom: 20px;
  }
  .container.glyph-count .glyph-count-info .row {
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .container.glyph-count .glyph-count-info .row .number {
    font-size: 36px;
    font-weight: 400;
    width: 130px;
  }
}
.container.glyph-count .glyph-count-graphic {
  margin-left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  padding: 4px;
  background-color: #fff;
  z-index: 3;
  overflow-x: hidden;
  width: calc(50vw + 50%);
}
.container.glyph-count .glyph-count-graphic:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 288px;
  left: 0;
  top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top: solid 2px #ccc;
  border-bottom: solid 2px #ccc;
  border-left: solid 2px #ccc;
}
.container.glyph-count .glyph-count-graphic:after {
  content: "";
  position: absolute;
  height: 280px;
  left: 4px;
  top: 4px;
  right: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-left: solid 1px #ccc;
  z-index: -1;
}
.container.glyph-count .glyph-count-graphic div {
  height: 282px;
  width: 120px;
  padding-top: 6px;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 11px;
  position: relative;
  padding-bottom: 45px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
}
.container.glyph-count .glyph-count-graphic div:before {
  content: "";
  position: absolute;
  bottom: 35px;
  left: 7px;
  right: 7px;
  height: 3px;
  border-left: solid 1px #ccc;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.container.glyph-count .glyph-count-graphic div:after {
  white-space: pre;
  position: absolute;
  bottom: 0;
  left: 7px;
  right: 7px;
  text-align: right;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #999;
  letter-spacing: 0.04em;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+1), .container.glyph-count .glyph-count-graphic div:nth-child(13n+13) {
  font-weight: 100;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+1):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+13):after {
  content: "24px\A ExtraLight";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+2), .container.glyph-count .glyph-count-graphic div:nth-child(13n+12) {
  font-weight: 300;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+2):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+12):after {
  content: "24px\A Light";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+3), .container.glyph-count .glyph-count-graphic div:nth-child(13n+11) {
  font-weight: 400;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+3):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+11):after {
  content: "24px\A Regular";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+4), .container.glyph-count .glyph-count-graphic div:nth-child(13n+10) {
  font-weight: 500;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+4):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+10):after {
  content: "24px\A Medium";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+5), .container.glyph-count .glyph-count-graphic div:nth-child(13n+9) {
  font-weight: 600;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+5):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+9):after {
  content: "24px\A SemiBold";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+6), .container.glyph-count .glyph-count-graphic div:nth-child(13n+8) {
  font-weight: 700;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+6):after, .container.glyph-count .glyph-count-graphic div:nth-child(13n+8):after {
  content: "24px\A Bold";
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+7) {
  font-weight: 900;
}
.container.glyph-count .glyph-count-graphic div:nth-child(13n+7):after {
  content: "24px\A Heavy";
}
@media screen and (max-width: 1199px) {
  .container.glyph-count .glyph-count-graphic div {
    width: 80px;
  }
}
@media screen and (min-width: 641px) and (max-width: 800px) {
  .container.glyph-count .glyph-count-graphic div {
    width: 40px;
    padding-bottom: 0;
  }
  .container.glyph-count .glyph-count-graphic div:before, .container.glyph-count .glyph-count-graphic div:after {
    content: none !important;
  }
}
@media screen and (max-width: 640px) {
  .container.glyph-count .glyph-count-graphic {
    margin-left: 0;
    padding-left: 0;
  }
  .container.glyph-count .glyph-count-graphic:after {
    left: 0;
    border-left: none;
  }
}

.container.team {
  margin-top: 60px;
}
.container.team .video-CTA {
  margin-top: 40px;
  margin-bottom: 40px;
  border: solid 1px #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container.team .video-CTA .video-wrapper {
  border: none;
  border-right: solid 1px #ccc;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.container.team .video-CTA img {
  height: 160px;
  width: auto;
}
@media screen and (max-width: 600px) {
  .container.team .video-CTA img {
    width: 100%;
    height: auto;
  }
}
.container.team .video-CTA h2 {
  font-weight: 300;
  font-size: 30px;
  line-height: 1.5;
  padding: 10px 20px;
}
@media screen and (max-width: 1040px) {
  .container.team .video-CTA h2 {
    font-size: 25px;
  }
}
@media screen and (max-width: 800px) {
  .container.team .video-CTA h2 {
    font-size: 20px;
    font-weight: 500;
  }
}
@media screen and (max-width: 600px) {
  .container.team .video-CTA {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.container.team p {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.667;
}
@media screen and (max-width: 640px) {
  .container.team p {
    font-size: 20px;
    font-weight: 500;
  }
}
.container.team .designers {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.container.team .designers .designer {
  width: 30%;
  margin-bottom: 40px;
}
.container.team .designers .designer .picture {
  border: solid 1px #ccc;
  position: relative;
}
.container.team .designers .designer .picture svg {
  position: absolute;
  top: 0;
}
.container.team .designers .designer .picture svg path,
.container.team .designers .designer .picture svg polyline,
.container.team .designers .designer .picture svg polygon {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 1s ease;
  transition: stroke-dashoffset 1s ease;
}
.container.team .designers .designer .picture img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.container.team .designers .designer .picture:hover img {
  opacity: 1;
}
.container.team .designers .designer .picture:hover svg path,
.container.team .designers .designer .picture:hover svg polyline,
.container.team .designers .designer .picture:hover svg polygon {
  stroke-dashoffset: 501;
}
.container.team .designers .designer p {
  font-size: 20px;
  line-height: 1.667;
  font-weight: 500;
  margin-top: 20px;
}
.container.team .designers .designer p strong {
  font-weight: 900;
}
@media screen and (max-width: 800px) {
  .container.team .designers {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container.team .designers .designer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .container.team .designers .designer .picture {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    width: 260px;
    height: 260px;
    margin-right: 20px;
  }
  .container.team .designers .designer p {
    margin-top: 0;
  }
}
@media screen and (max-width: 580px) {
  .container.team .designers {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container.team .designers .designer {
    width: 100%;
    display: block;
  }
  .container.team .designers .designer .picture {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }
  .container.team .designers .designer p {
    margin-top: 20px;
  }
}

.font-card {
  width: 274px;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-bottom: 56px;
  position: relative;
  cursor: pointer;
}
.font-card .preview {
  height: 123px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 40px;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 15px;
  border-radius: 3px 3px 0 0;
}
.font-card .font-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0 0 3px 3px;
  border-top: 1px solid #ccc;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 700;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.font-card .font-info .font-name {
  width: 100%;
  padding: 0 15px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: 5px;
  position: relative;
}
.font-card .font-info .font-name:after {
  content: "";
  position: absolute;
  width: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(72%, #fff));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 72%);
}
.font-card .font-info .foundry {
  color: #666;
  margin-left: 15px;
}
.font-card .font-info .count {
  margin-right: 15px;
}
.font-card:hover {
  border-color: #000;
}
.font-card:hover .font-info {
  background-color: #000;
  border-top: 1px solid #000;
  color: #fff;
}
.font-card:hover .font-info .font-name {
  white-space: initial;
}
.font-card:hover .font-info .font-name:after {
  background: none;
}
.font-card:hover .font-info .foundry {
  color: #999;
  margin-left: 15px;
}

.container.fonts {
  margin-top: 60px;
  margin-bottom: 150px;
}
.container.fonts p {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.667;
  margin-top: 24px;
}
@media screen and (max-width: 640px) {
  .container.fonts p {
    font-size: 20px;
    font-weight: 500;
  }
}
.container.fonts .font-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.container.fonts .font-cards .font-card {
  width: calc( (100% - 23px * 3) / 4 );
  margin-top: 23px;
}
@media screen and (max-width: 1023px) {
  .container.fonts .font-cards .font-card {
    width: calc( (100% - 23px * 2) / 3 );
  }
}
@media screen and (max-width: 768px) {
  .container.fonts .font-cards .font-card {
    width: calc( (100% - 20px * 1) / 2 );
    margin-top: 20px;
  }
}
@media screen and (max-width: 480px) {
  .container.fonts .font-cards .font-card {
    width: 100%;
    margin-top: 20px;
  }
}
.container.fonts .link-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 23px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.container.fonts .link-cards .link-card {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  width: calc( (100% - 23px * 2) / 3 );
  margin-bottom: 23px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container.fonts .link-cards .link-card span {
  margin-left: 20px;
  font-weight: 300;
  font-size: 25px;
  line-height: 1.4;
}
@media screen and (max-width: 1140px) {
  .container.fonts .link-cards .link-card span {
    font-size: 16px;
    font-weight: 600;
  }
}
@media screen and (max-width: 768px) {
  .container.fonts .link-cards .link-card {
    width: calc( (100% - 23px) / 2 );
  }
}
@media screen and (max-width: 480px) {
  .container.fonts .link-cards .link-card {
    width: 100%;
  }
}
.container.fonts .link-cards .link-card:hover {
  background-color: #000;
  color: #fff;
  -webkit-transition: none;
  transition: none;
}
.container.fonts .link-cards .link-card:hover svg path {
  stroke: #fff;
}
.container.fonts .link-cards.two-cards .link-card {
  border-radius: 0;
  width: calc( (100% - 23px) / 2 );
}
@media screen and (max-width: 480px) {
  .container.fonts .link-cards.two-cards .link-card {
    width: 100%;
  }
}

.container.typekit {
  margin-top: 60px;
  text-align: center;
}
.container.typekit h1.secondary-title {
  margin-bottom: 20px;
}
@media screen and (min-width: 1200px) {
  .container.typekit h1.secondary-title {
    width: 87%;
    margin-left: auto;
    margin-right: auto;
  }
}
.container.typekit .typekit-graphic {
  position: relative;
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.container.typekit .typekit-graphic .hide {
  display: none;
}
.container.typekit .typekit-graphic .desktop-use {
  width: 1000px;
  height: auto;
  position: relative;
  right: calc(50% + 20px);
}
.container.typekit .typekit-graphic .desktop-use img {
  width: 100%;
  height: auto;
}
.container.typekit .typekit-graphic .desktop-use .text {
  position: absolute;
  font-size: 60px;
  font-weight: 700;
  left: 345px;
  top: 227px;
}
.container.typekit .typekit-graphic .desktop-use .font-menu {
  position: absolute;
  left: 510px;
  top: 205px;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice {
  cursor: pointer;
  line-height: 15px;
  height: 18px;
  width: 435px;
  text-align: left;
  padding-left: 46px;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  margin-top: -1px;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice:hover {
  border-color: #000;
  -webkit-transition: none;
  transition: none;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .name {
  font-weight: 700;
  font-size: 10px;
  display: inline-block;
  width: 282px;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample {
  font-size: 12px;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.extralight {
  font-weight: 100;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.light {
  font-weight: 300;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.regular {
  font-weight: 400;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.medium {
  font-weight: 500;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.semi-bold {
  font-weight: 600;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.bold {
  font-weight: 700;
}
.container.typekit .typekit-graphic .desktop-use .font-menu .font-choice .sample.heavy {
  font-weight: 900;
}
.container.typekit .typekit-graphic .web-use {
  width: 1000px;
  height: auto;
  position: absolute;
  left: calc(50% + 20px);
  background-color: #fff;
  z-index: 3;
}
.container.typekit .typekit-graphic .web-use img {
  width: 100%;
  height: auto;
}
.container.typekit .typekit-graphic .web-use .code {
  position: absolute;
  left: 15px;
  top: 458px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.container.typekit .typekit-graphic .web-use .code xmp {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  padding: 0;
  margin: 0;
  -webkit-font-feature-settings: "hwid" 0;
  font-feature-settings: "hwid" 0;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.container.typekit .typekit-graphic .web-use .code xmp.html {
  width: 260px;
  margin-right: 30px;
}
.container.typekit .typekit-graphic .web-use .code.sans xmp {
  font-family: "source-han-sans-japanese", sans-serif;
}
.container.typekit .typekit-graphic .web-use .grid {
  display: none;
}
.container.typekit .typekit-graphic .web-use.grid-on .grid {
  display: block;
}
.container.typekit .typekit-graphic .web-use.hwid-on .code xmp {
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}
@media screen and (max-width: 1350px) {
  .container.typekit .typekit-graphic .desktop-use {
    right: calc(50% + 50vw - 660px);
  }
  .container.typekit .typekit-graphic .web-use {
    left: calc(50% - 50vw + 700px);
  }
}
@media screen and (max-width: 1240px) {
  .container.typekit .typekit-graphic .hide {
    display: block;
  }
  .container.typekit .typekit-graphic .desktop-use {
    right: calc(50% + 20px);
    width: 80%;
  }
  .container.typekit .typekit-graphic .desktop-use .text, .container.typekit .typekit-graphic .desktop-use .font-menu {
    display: none;
  }
  .container.typekit .typekit-graphic .web-use {
    left: calc(50% + 20px);
    width: 86.4%;
  }
  .container.typekit .typekit-graphic .web-use .code {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .container.typekit .typekit-graphic .desktop-use {
    right: calc(50% + 10px);
    width: 80%;
  }
  .container.typekit .typekit-graphic .web-use {
    left: calc(50% + 10px);
    width: 86.4%;
  }
}
@media screen and (max-width: 480px) {
  .container.typekit .typekit-graphic {
    display: block;
  }
  .container.typekit .typekit-graphic .desktop-use {
    position: relative;
    right: 20px;
    width: calc(100vw - 40px);
    margin-bottom: 20px;
  }
  .container.typekit .typekit-graphic .web-use {
    position: relative;
    left: 20px;
    width: calc(100vw - 40px);
  }
}

.footer {
  background-color: #000;
  color: #fff;
  padding: 75px 0;
  z-index: 3;
  position: relative;
}
.footer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.footer .container p {
  margin-left: 20px;
}
.footer .container p span {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.667;
}
@media screen and (max-width: 640px) {
  .footer .container p span {
    font-size: 12px;
  }
}
.footer .container p span a {
  color: #fff;
}

.video-overlay {
  background-color: #000;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  display: none;
  z-index: 10;
}
body.overlay .video-overlay {
  display: block;
}
.video-overlay .close {
  cursor: pointer;
  opacity: 1;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .video-overlay .close {
    right: 10px;
    top: 10px;
  }
}
.video-overlay .close:hover:before, .video-overlay .close:hover:after {
  background-color: #07b57a;
}
.video-overlay .close:before, .video-overlay .close:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  margin: auto;
  width: 56px;
  height: 1px;
  background-color: #fff;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.video-overlay .close:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.video-overlay .close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.video-overlay iframe {
  height: 45vw;
  width: 80vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  z-index: 11;
}

.none-display,
.control-panel,
.tester {
  display: none !important;
}
JS
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var youtubeId = document.getElementById('player').getAttribute('data-youtube-id');

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: youtubeId,
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  // document.body.classList.add("video-ready");
}


var videoButtons = document.getElementsByClassName("video-button");

var videoButtonOnClick = function() {
  document.body.classList.add("overlay");
  player.playVideo();
};

for (var i = 0; i < videoButtons.length; i++) {
  videoButtons[i].addEventListener('click', videoButtonOnClick, false);
}

document.querySelector(".video-overlay").addEventListener("click", function(){
  document.body.classList.remove("overlay");
  player.pauseVideo(); 
});


document.querySelector(".glyph-regional-design .button").addEventListener("click", function(){
  var gameContainerClass = document.querySelector(".glyph-regional-design").classList;
  if (!gameContainerClass.contains("game-on")) {
    gameContainerClass.add("game-on");
  } else 
  if (gameContainerClass.contains("step-4") || gameContainerClass.contains("view-results")) {
    gameContainerClass.remove("game-on", "spot1-found", "spot4-found", "spot2-found", "spot3-found", "step-1", "step-2", "step-3", "step-4", "view-results");
  } else 
  if (gameContainerClass.contains("game-on")&&!gameContainerClass.contains("step-4")) {
    document.querySelector(".glyph-regional-design").classList.add("view-results");
  }
});

//check the game progress
function checkGameProgress(){
  var gameScore = 0;
  for(i=1; i<5; i++){
    if(document.querySelector(".glyph-regional-design").classList.contains('spot' + i + "-found")){
      gameScore++;
    }
  }

  document.querySelector(".glyph-regional-design").classList.remove("step-1", "step-2", "step-3", "step-4");
  document.querySelector(".glyph-regional-design").classList.add("step-" + gameScore);
  if (gameScore == 4) {
    window.setTimeout(function(){
      alert("You Win!");
    }, 100)
  }
}

function activateSpot(spotName){
  var spotArray = document.querySelectorAll(".glyph-regional-design ." + spotName);
  for (var i = 0; i < spotArray.length; i++) {
    spotArray[i].addEventListener('click', function(){
      document.querySelector(".glyph-regional-design").classList.add(spotName + "-found");
      checkGameProgress();
    }, false);
  }
}

//initiate the game
activateSpot('spot1');
activateSpot('spot2');
activateSpot('spot3');
activateSpot('spot4');
Term
Wed, 01/31/2018 - 10:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv