/*

 Great Wisdom Buddhist Institute
 http://www.gwbi.org/
 info@gwbi.org
 PO Box 714, Montague PE C0A 1R0

 Designed by Kin Hui-Lo & Athena Tian
 http://www.spinningcitrus.com/

*/

@font-face {
  font-family: "Canela";
  src: url("../font/Canela-Bold.eot") format("embedded-opentype"), url("../font/Canela-Bold.woff") format("woff"), url("../font/Canela-Bold.svg") format("svg");
  font-style: Bold;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "Canela";
  src: url("../font/Canela-Thin.eot") format("embedded-opentype"), url("../font/Canela-Thin.woff") format("woff"), url("../font/Canela-Thin.svg") format("svg");
  font-style: Thin;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=4.7.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v11/tHQOv8O1rd82EIrTHlzvmhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v11/rAXKWvABQNHjPUk26ixVvvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/sGaC9t9HYN4ok_W_UWzQF3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/_MYF_5lLoOGnzKiQsUc_vevvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-volume-up:before, .fa-volume-off:before, .fa-arrow-circle-up:before {
    content: "";
    background-image: url('../img/volume-2.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 28px;
    height: 28px;
    display: inline-block;
}
.fa-volume-off:before {
    background-image: url('../img/volume.svg');
}

.fa-arrow-circle-up:before {
    background-image: url('../img/arrow-up-circle.svg');
}

.fa-angle-right:before {
    content: "\f105";
}

.fa-angle-down:before {
    content: "\f107";
}

.submenu-toggle {
  position: absolute;
  left: 100%;
  top: 0;
  font-size: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
  cursor: pointer;
}

.fa-angle-down, .sub-menu {
  display: none;
}

.title.open .fa-angle-down, .title.open .sub-menu {
  display: block;
}

.sub-menu {
  margin-top: 10px;
}

.title.open .fa-angle-right {
  display: none;
}

.sub-menu .chapter {
  font-size: 24px;
  letter-spacing: normal;
  line-height: initial;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Lora', serif;
  font-weight: 400;
}

.sub-menu .chapter:hover {
  color: #a7811a;
}