/* Headers */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
  color: #41007F;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: normal;
}

h1,.h1,h2,.h2,h3,.h3 { font-family: 'OpenSans-Light', sans-serif }
h4,.h4,h5,.h5 {
  font-family: 'OpenSans-SemiBold', sans-serif;
  letter-spacing: 0.01rem;
}

[lang="ko"] h1,
[lang="ko"] .h1,
[lang="ko"] h2,
[lang="ko"] .h2,
[lang="ko"] h3,
[lang="ko"] .h3 { font-family: 'NotoSans', sans-serif }
[lang="ko"] h4,
[lang="ko"] .h4,
[lang="ko"] h5,
[lang="ko"] .h5 {
  font-family: 'NotoSans-Bold', sans-serif;
  letter-spacing: 0.01rem;
}

h1,.h1 {
  font-size: 4rem;
  line-height: 5rem;
  margin-bottom: 2rem;
  letter-spacing: 0.03rem;
}

h2,.h2 {
  font-size: 3rem;
  line-height: 3.4rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02rem;
}

h3,.h3 {
  font-size: 2.6rem;
  line-height: 3.0rem;
  letter-spacing: 0.01rem;
}

h4,.h4 {
  font-size: 1.7rem;
  line-height: 2.6rem;
}

h5,.h5 {
  font-size: 1.5rem;
  line-height: 2.8rem;
}

* + h2,* + .h2 { margin-top: 3rem }
* + h3,* + .h3 { margin-top: 2rem }
* + h5,* + .h4 { margin-top: 1.5rem }
* + h5,* + .h5 { margin-top: 1rem }

.btn-margin-top { margin-top: 3rem }
* + .btn, * + button { margin-top: 2rem }

/* Common Text */

p { margin: 0 0 1.5rem; line-height: 2.8rem; }


/* Text Styles */
.text-small { font-size: 1.4rem }
.bold { font-weight: bold }
.semibold { font-family: 'OpenSans-SemiBold', sans-serif; }
[lang="ko"] .semibold { font-family: 'NotoSans-Bold', sans-serif; }
.text-center { text-align: center }
.text-right { text-align: right; }
.text-capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.text-white { color: white; }
.text-purple { color: #41007F; }
.text-blue { color: #007BC6; }
.italicize { font-style: italic; }

.date {
  color: #41007F;
  font-size: 1.4rem;
  display: block;
}

.nowrap { white-space: nowrap; }

/* Links */

a { color: #007BC6; }
a:hover, main a:visited:hover { color: #02588D; }
main a:visited { color: #AA1DD5; }

.arrow, .audio, .download, .external {
  color: #007BC6;
  line-height: 2.2rem;
  font-family: 'OpenSans-SemiBold', sans-serif;
  cursor: pointer;
}

.external:not(#top_menu a) {
  color: #007BC6;
  line-height: 2.2rem;
  font-family: 'OpenSans-SemiBold', sans-serif
}

[lang="ko"] .arrow,
[lang="ko"] .audio,
[lang="ko"] .download,
[lang="ko"] .external,
[lang="ko"] .external:not(#top_menu a) {
  font-family: 'NotoSans-Bold', sans-serif
}

.arrow:after { content: url('../images/icons/arrow-blue.svg'); width: calc(1ch + 8px); height: 12px; display: inline-block; }
.arrow-white:after { content: url('../images/icons/arrow-white.svg'); }
.arrow:hover:after { content: url('../images/icons/arrow-blue-h.svg'); width: calc(1ch + 8px); height: 12px; display: inline-block; }

.audio:after { content: url('../images/icons/audio-blue.svg'); }
.audio:hover:after { content: url('../images/icons/audio-blue-h.svg'); }

.download:after { content: url('../images/icons/download-blue.svg'); }
.download:hover:after { content: url('../images/icons/download-blue-h.svg'); }

.download.btn:after,
.download.btn:hover:after {content: url('../images/icons/download-light.svg');width: 1rem;display: inline-block;height: 1.2rem;padding-left: 0;margin-left: 1rem;}

.download--alt:not(:hover):after { content: url('../images/icons/download-blue-alt.svg') }

.external:after {content: url('../images/icons/external-blue.svg'); }
.external:hover:after {content: url('../images/icons/external-blue-h.svg'); }

.external-light:after {
  content: url(../images/icons/external-light.svg);
  position: relative;
  top: 0.1em;
  padding-left: 0.5ch;
}

.external-heading::after {
  content: '';
  background: no-repeat url(/wp-content/themes/kla-wp/assets/images/icons/external-dark.svg);
  background-size: 100%;
  background-position: center 60%;
  margin-left: 5px;
  padding-left: 1ch;
}

a:hover .external-heading::after {
  background-image: url(/wp-content/themes/kla-wp/assets/images/icons/external-blue.svg);
  background-size: 87%;
}

.arrow:visited, .audio:visited, .download:visited, .external:visited { color: #007BC6; font-family: 'OpenSans-SemiBold', sans-serif;  }
[lang="ko"] .arrow:visited,
[lang="ko"] .audio:visited,
[lang="ko"] .download:visited,
[lang="ko"] .external:visited {
  font-family: 'NotoSans-Bold', sans-serif;
}
.arrow:after, .audio:after, .download:after, .external:after { padding-left: 1ch; }
.arrow:hover, .audio:hover, .download:hover, .external:hover { color: #02588D; }

.commentary a,
.commentary a:visited { font-family: 'OpenSans', sans-serif !important; }
[lang="ko"] .commentary a:visited { font-family: 'NotoSans', sans-serif !important; }

/* Lists */

.list {
    padding-left: 1rem;
}
.list li {
  list-style: disc;
  margin-left: 2rem;
  padding-left: 1rem;
  padding-bottom: 1.5rem;
}

/* Ordered Lists Roman Numeral */

.olist-roman {
  padding-left: 1rem;
}

.olist-roman li {
  list-style-type: lower-roman;
  margin-left: 2rem;
  padding-left: 1rem;
  padding-bottom: 1.5rem;
}


/* Buttons */

button, .btn, a.btn {
  font-size: 1.5rem;
  line-height: 2.8rem;
  color: #fff !important;
  padding: 0.5rem 3rem;
  background: #007BC6;
  display: inline-block;
  border: 0;
  text-shadow: none;
  -webkit-appearance: none;
  transition: 0.3s background ease-in-out;
}

.btn--alt, a.btn--alt {
  background-color: #41007F;
}

.btn--tertiary, a.btn--tertiary {
  background-color: #AA1DD5;
}

.btn--tertiary:hover, a.btn--tertiary:hover {
  color: #AA1DD5 !important;
  background-color: white;
}

.btn--tertiary.external:hover:after, a.btn--tertiary.external:hover:after {
  content: url('../images/icons/external-violet.svg')
}

.btn--white {
  background: #fff;
}

button:hover,.btn:hover {
  background-color: #02588D;
}

.btn--alt:hover, a.btn--alt:hover {
  background-color: #AA1DD5;
}

.btn--light, .btn.btn--light, a.btn--light {
    background-color: rgb(222, 222, 226);
    color: rgb(0, 123, 198) !important;
}

.btn.btn--light:hover {
    color: rgb(0, 123, 198) !important;
    background: #C3C3C3;
}

.btn--violet, a.btn--violet {
  background-color: #AA1DD5;
}

.btn--violet:hover, a.btn--violet:hover {
  background-color: #900FB7;
}

/* Plus Icons */
[class*="plus-"]:before {
  margin-right: 1rem;
  width: 3rem;
  height: 3rem;
  display: inline-block;
}
.plus-blue:before { content: url('../images/icons/plus-blue.svg') }
.plus-green:before { content: url('../images/icons/plus-green.svg') }
.plus-orange:before { content: url('../images/icons/plus-orange.svg') }
.plus-violet:before { content: url('../images/icons/plus-violet.svg') }
.plus-pink:before { content: url('../images/icons/plus-pink.svg') }
.plus-yellow:before { content: url('../images/icons/plus-yellow.svg') }

/* Inputs */

.select { position: relative; }
select::-ms-expand { display: none; }
.frm_fields_container .select {
  margin-top: 5px;
}
.select select {
    border: 1px solid rgba(72, 77, 80, 0.3);
    background-color: #fff;
    color: #5f6b71;
    font-size: 1.6rem;
    padding: 1.5rem 4rem 1.5rem 2rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 0;
}

.select:after {
    content: url('../images/arrow-down-grey.svg');
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    width:  1.5rem;
    height: 1.5rem;
    pointer-events: none;
}


@media only screen and (min-width: 768px) {
  /* Headers */
  h1,.h1 {
    font-size: 4.6rem;
    line-height: 6rem;
    margin-bottom: 3rem;
  }

  h2,.h2 {
    font-size: 3.6rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }

  h3,.h3 {
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-bottom: 1.5rem;
  }

  h4,.h4 {
    font-size: 1.7rem;
    line-height: 2.6rem;
  }

  h5,.h5 {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }

  /* Text Styles */
  .text-right-t { text-align: right }
  .text-center-t { text-align: center }

  [class*="plus-"]:before {
    position: relative;
    left: -6rem;
    margin-right: -4rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media only screen and (min-width: 1480px) {
  /* Headers */
  h1,.h1 {
    font-size: 5.5rem;
    line-height: 7rem;
    margin-bottom: 4rem;
  }

  h2,.h2 {
    font-size: 4rem;
    line-height: 5rem;
    margin-bottom: 3rem;
  }

  h3,.h3 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }

  h4,.h4 {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }

  h5,.h5 {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  * + h2,* + .h2 { margin-top: 5rem }
  * + h3,* + .h3 { margin-top: 3rem }
  * + h5,* + .h4 { margin-top: 2rem }
  * + h5,* + .h5 { margin-top: 1.5rem }

  .btn-margin-top { margin-top: 4rem }
  * + .btn, * + button { margin-top: 3rem }

  /* Common Text */

  p { margin: 0 0 2rem; font-size: 1.6rem; line-height: 3rem; }
  .list li {
    padding-left: 1.5rem;
    padding-bottom: 2rem;
  }

  /* Buttons */
  button, .btn, a.btn {
    font-size: 1.6rem;
    line-height: 2.2rem;
    padding: 1.5rem 4rem;
  }

  [class*="plus-"]:before {
    position: relative;
    left: -6rem;
    margin-right: -4rem;
    width: 4rem;
    height: 4rem;
  }

}