/* Responsive */

@media screen and (max-width: 799px) and (min-width: 500px) {
  
  .cbn-ch-header > h1 {
    font-size: 72px !important;
    line-height: 92px !important;
    text-align: center !important;
  }
  
  .cbn-ch-header > h3 {
    font-size: 36px !important;
    text-align: center !important;
  }
  
  .cbn-ch-header {
    height: auto !important;
    min-height: 300px !important;
  }
  
  
}

@media screen and (max-width: 499px) {
  
  .cbn-ch-header > h1 {
    font-size: 52px !important;
    line-height: 72px !important;
    text-align: center !important;
  }
  
  .cbn-ch-header > h3 {
    font-size: 28px !important;
    text-align: center !important;
  }
  
  .cbn-ch-header {
    height: auto !important;
    min-height: 300px !important;
  }
  
  .paper {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  .indent {
    text-indent: 32px !important;
  }
  
}



/* Responsive Ends */



.vtm-table-header {
    margin-bottom: -30px !important;
    margin-top: 60px !important;
}

.main-holder table td {
    min-width: 150px !important;
}

.hidden {
  display: none !important;
}

.vtm-table-header {
    margin-bottom: -30px !important;
    margin-top: 60px !important;
}

td:nth-of-type(2), td:nth-of-type(3), td:nth-of-type(4) {
    min-width: 180px !important;
}

.cotbg-transparency-image {
    filter: opacity(.5);
}

.main-holder .gill-sans-caps {
    font-family: GillSans;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-top: 50px;
    width: 100% !important;
    text-align: center;
    font-weight: bold;
    color: #C82434;
}

.Lore-Sheets_Lore-boxheadline {
    clear: both;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
    background-image: url(https://content.demiplane.com/nexus/vampire/loresheet-divider.png);
    font-size: 18px !important;
    font-family: GillSans !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

h2.large-h2-header {
    font-size: 48px !important;
}

.futura-bold-header {
    font-family: FuturaPTBold !important;
    font-size: 24px;
}

h2.hate-header {
    font-family: Roboto !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    font-size: 30px !important;
    color: black;
    padding-bottom: 5px;
    border-bottom: 2px solid black;
}

h2.dont-believe-header {
    font-family: MinionVariable !important;
    font-weight: bold !important;
    letter-spacing: 2px;
    max-width: 100%;
    align-items: center !important;
    text-align: center !important;
    color: #c82434 !important;
}
    
.box-header {
    font-family: FuturaPTBold !important;
    letter-spacing: 3px !important;
    font-size: 22px !important;
}

.main-holder > h1 {
    text-transform: none;
    letter-spacing: 2px;
    font-size: 56px;
}

.book-subtitle-center p {
    text-align: center;
    color: #c82434;
    font-family: FuturaPTBold;
    margin-top: 40px;
}

.book-subtitle-center h2 {
    text-align: center !important;
    max-width: 100% !important;
    margin-top: 40px !important;
    align-items: center !important;
}

.nicknames-header {
    color: white !important;
    font-size: 24px !important;
    margin-top: 20px !important;
    text-align: center;
    display: flex;
    align-items: center !important;
    display: flex;
    align-items: center !important;
    margin-bottom: 50px !important;
    justify-content: center;
}

.nicknames-span {
    max-width: 500px;

}

.hans-hand p {
    font-family: HandwritingDakota !important;
    font-weight: bold;
    font-size: 18px;
}

.right-aligned {
    text-align: right;
}

.handwriting-block {
    font-family: Alana !important;
    font-size: 22px !important;
}

.copperplate-block {
    font-family: Copperplate !important;
    font-size: 15px;
    padding: 20px !important;
}

.inner-invitation-block {
    border: 2px solid #C82434;
    padding: 40px;
}

.scribe-block {
    font-family: AmericanScribe !important;
    font-size: 36px;
    line-height: 32px;
    text-align: left !important;
    font-style: normal !important;
}

.redacted-text {
    background-color: black;
    color: black;
}

.poetry {
    text-align: center !important;
}

.scribe-block h2 {
    text-align: center !important;
    align-items: center !important;
    max-width: 100%;
}

.transcript-block {
     padding:10px;
    font-family: VintageTypewriter;
 }
 
.typewriter-block {
     padding:10px;
    font-family: RemingtonNoiseless;
 }
 
.lambach-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
.email-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
     font-family: Arial;
 }
 
.angus-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
.ballard-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
 .ballard-block h3 {
     text-align: center;
     font-family: Bodoni72;
 }
 
 .crippen-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
 .emma-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
 .lambach-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
 .angus-block {
          padding:10px;
     background-color:rgba(0,0,0,.5);
 }
 
.main-holder {
  --vtm-cbn-body-color: white;
  --vtm-cbn-body-color-2: black;
  --vtm-cbn-header-color: #c82434;
  --vtm-cbn-header-shadow-color: rgb(116, 60, 51);
  --vtm-cbn-background-color: #101010;
  --vtm-cbn-trait-highlight-color: rgb(85, 85, 85);
  --vtm-cbn-sidebar-border-color: rgb(85, 85, 85);

  --vtm-cbn-torn-path: polygon(
    -0.25% 90.66%,
    -0.25% 101.33%,
    100.24% 102%,
    100.24% 86.02%,
    99.63% 85.35%,
    98.89% 86.02%,
    98.38% 84.69%,
    97.64% 84.03%,
    96.88% 85.36%,
    95.51% 87.36%,
    95.26% 86.03%,
    94.63% 87.36%,
    94.26% 86.03%,
    93.76% 85.36%,
    92.88% 87.37%,
    91.88% 88.7%,
    91.26% 87.36%,
    90.88% 90.03%,
    89.76% 88.7%,
    89.38% 90.02%,
    89.01% 88.69%,
    88.38% 90.03%,
    87.76% 89.36%,
    86.88% 90.03%,
    86.51% 92.03%,
    85.64% 90.02%,
    84.63% 89.36%,
    84.64% 92.03%,
    84.26% 90.03%,
    83.63% 89.36%,
    83.01% 88.7%,
    82.89% 90.69%,
    82.26% 88.69%,
    81.63% 88.03%,
    81.01% 90.03%,
    80.51% 88.69%,
    79.89% 90.03%,
    79.01% 88.03%,
    78.26% 88.69%,
    77.64% 88.02%,
    77.64% 91.35%,
    77.26% 90.02%,
    76.51% 90.69%,
    76.26% 88.69%,
    76.01% 90.02%,
    75.14% 88.69%,
    74.63% 90.02%,
    73.76% 90.02%,
    72.88% 88.69%,
    72.51% 90.69%,
    72.39% 88.69%,
    71.89% 90.69%,
    71.01% 89.36%,
    70.63% 87.36%,
    70.14% 88.03%,
    69.89% 90.69%,
    69.51% 88.03%,
    68.76% 88.69%,
    68.51% 87.36%,
    67.89% 88.02%,
    66.63% 88.02%,
    66.25% 89.36%,
    65.38% 87.37%,
    64.63% 88.69%,
    64.26% 87.37%,
    63.88% 88.69%,
    63.75% 87.36%,
    63.26% 86.69%,
    62.38% 87.36%,
    61.88% 86.7%,
    61.88% 88.03%,
    61.13% 89.36%,
    60.26% 88.69%,
    59.13% 88.69%,
    58.38% 88.03%,
    57.88% 86.69%,
    57.88% 88.69%,
    56.51% 89.36%,
    56.01% 88.7%,
    56.01% 90.03%,
    55.38% 91.36%,
    55.13% 89.36%,
    54.63% 88.68%,
    53.76% 89.36%,
    53.13% 88.69%,
    52.13% 89.35%,
    50.26% 87.35%,
    49.63% 88.03%,
    48.76% 88.02%,
    48.26% 87.36%,
    48.01% 88.69%,
    47.63% 88.02%,
    47.13% 89.36%,
    47.01% 87.36%,
    46.51% 88.02%,
    46.01% 86.7%,
    45.51% 86.7%,
    44.76% 84.7%,
    44.13% 86.03%,
    42.13% 83.36%,
    41.76% 84.69%,
    40.38% 83.36%,
    40.38% 85.36%,
    38.51% 84.69%,
    38.01% 86.69%,
    37.01% 85.36%,
    37% 86.69%,
    36% 85.36%,
    34.75% 85.35%,
    33.26% 84.69%,
    32.51% 87.35%,
    31.88% 88.69%,
    30.88% 86.69%,
    30.38% 86.69%,
    30.38% 85.35%,
    29.88% 86.02%,
    28.76% 85.35%,
    28.38% 85.35%,
    28.25% 86.69%,
    27.63% 86.68%,
    27.13% 88.69%,
    26.88% 88.02%,
    26.38% 88.01%,
    26.25% 89.35%,
    25.63% 88.69%,
    25.13% 91.35%,
    24.63% 90.02%,
    24.13% 90.69%,
    23.75% 91.35%,
    23.13% 90.69%,
    23.25% 92.02%,
    22.75% 91.35%,
    22.38% 93.35%,
    21.13% 94.02%,
    20.63% 92.01%,
    19.88% 91.34%,
    19.13% 92.01%,
    17.63% 91.34%,
    17.25% 90.01%,
    16.63% 90.68%,
    15.5% 88.68%,
    15.63% 90.01%,
    15% 90.01%,
    14% 90.02%,
    13.5% 88.68%,
    13.13% 90.68%,
    11.88% 89.34%,
    11.75% 90.68%,
    11.5% 90.01%,
    10.88% 90.68%,
    10.75% 92.01%,
    10.38% 91.34%,
    10.13% 93.34%,
    9.76% 92.68%,
    9.25% 94.68%,
    9.01% 93.35%,
    8.75% 94.68%,
    8.38% 95.35%,
    8.01% 93.35%,
    7.75% 94.68%,
    7.38% 93.35%,
    6.88% 92.68%,
    6.38% 93.34%,
    5.63% 91.35%,
    5.63% 92.68%,
    5.25% 92.02%,
    4.5% 92.01%,
    3.88% 90.67%,
    3.88% 92.01%,
    3.13% 92.01%,
    2.88% 90%,
    2.63% 91.34%,
    2% 91.35%,
    1.38% 89.35%,
    0.76% 88.67%,
    0.5% 90.01%,
    0.38% 89.34%
  );

  color: var(--vtm-cbn-body-color);
  font-family: Cormorant;
}

.main-holder > * {
  z-index: 1;
}

.main-holder > h2 {
  color: var(--vtm-cbn-header-color);
  font-family: Bodoni72;
}

.main-holder > .h2-inverse {
  color: var(--vtm-cbn-body-color);
}

.hidden {
  visibility: hidden;
  display: none;
}

.minion-block {
    font-family: MinionVariable !important;
}

.minion-block h2 {
    text-align: center;
    max-width: 100%;
    align-items: center;
    font-size: 28px !important;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.transcript-block {
  padding: 10px;
}

.typewriter-block {
  padding: 10px;
}

.lambach-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.email-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.angus-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.ballard-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.crippen-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.emma-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.angus-block {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

h2.vtm-npc-header {
  background: url(https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-stat-block-header-full-bg.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: -10px;
  font-family: FuturaPT !important;
  color: white;
  text-transform: uppercase;
  font-size: 28px !important;
  font-weight: bold;
  letter-spacing: 2px;
  display: block;
  position: relative;
  max-width: calc(100% + 10px);
  padding-left: 24px !important;
  padding: 6px;
  text-shadow:
   -2px -2px 0 #000,  
    2px -2px 0 #000,
    -2px 2px 0 #000,
     2px 2px 0 #000;
}

.vtm-red-text strong {
    color: #C82434 !important;
}

h5 strong {
  color: inherit !important;
}

.main-holder > .s {
  color: #c82434;
  font-family: FuturaPT;
}

h4.s strong {
    color: #c82434 !important;
}

.s strong {
  color: #CFCFCF;
  font-family: FuturaPT;
  font-size: 18px;
  letter-spacing: 1px;
}

.vtm-red-text {
  color: #c82434 !important;
}
 
 
 
 
 /* What I've Added */
.cbn-ch-header-image {
  position: relative;
}

.cbn-ch-header-image::after {
  position: absolute;
  display: block;
  content: "";

  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;

  background: rgb(16, 16, 16);
  background: linear-gradient(
    180deg,
    rgba(16, 16, 16, 0) 25%,
    rgba(16, 16, 16, 1) 100%
  );
}

.cbn-ch-header {
  height: 500px;
  margin: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-header-hexagram.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

.cbn-ch-header > h3 {
  color: var(--vtm-cbn-body-color);
  text-align: right;
  font-size: 40px;
  text-transform: lowercase !important;
  font-family: RemingtonNoiseless !important;
}

.cbn-ch-header > h1 {
  font-size: 7rem;
  text-align: right;
  text-transform: none;
  color: var(--vtm-cbn-body-color);
  z-index: 1;
  font-family: alana, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 160px;
}

.cbn-center > h1 {
    text-align: center !important;
}

.cbn-left > h1:nth-of-type(odd) {
  text-align: left;
}

.cbn-right > h1:nth-of-type(even) {
  text-align: left;
}

.clan-header {
  position: relative;
  width: 100%;
  height: 300px;
}

.clan-header-background {
  position: absolute;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.clan-header-background > img {
  height: 100%;
}

.clan-header-logo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.clan-header-logo > img {
  height: 150px;
  max-width: 100%;
}

.red-no-5 {
  background-image: url("https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-red-no-5-header-background.svg");
}

.red-no-5 > h1 {
  text-align: center;
  text-shadow: 1px 1px var(--vtm-cbn-header-shadow-color),
    2px 2px var(--vtm-cbn-header-shadow-color),
    3px 3px var(--vtm-cbn-header-shadow-color),
    4px 4px var(--vtm-cbn-header-shadow-color);
}

.cbn-ch-header-quote {
  font-size: 1.15rem;
  text-align: center;
  margin: 0 0 50px 0;
  font-family: Cormorant-SemiBold;
}

.main-holder > .roman-numerial {
  margin: 50px auto 0 auto;
  text-align: center;
  font-size: 3.5rem;
  font-family: alana, sans-serif;
  color: var(--vtm-cbn-body-color);
}

.paper {
  position: relative;
  margin: 25px 0px;
  padding: 25px 40px;
  color: var(--vtm-cbn-body-color-2);
  background-image: url("https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-paper-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: RemingtonNoiseless;
}

.torn::after {
  position: absolute;
  content: "";
  display: block;
  background-color: var(--vtm-cbn-background-color);
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  clip-path: var(--vtm-cbn-torn-path);
}

.mirror::after {
  transform: scaleX(-1);
}

.paper em {
  color: var(--vtm-cbn-body-color-2);
}

.paper strong {
  color: var(--vtm-cbn-body-color-2);
}

.paper-yellow {
  background-image: linear-gradient(
      rgba(180, 200, 100, 0.30),
      rgba(180, 200, 100, 0.30)
    ),
    url("https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-paper-background.png");
  background-blend-mode: color;
}

.cornet {
  font-size: 32px !important;
}

.paper > .bodoni {
  color: var(--vtm-cbn-header-color);
}

.cornet {
  font-family: Cornet;
}

.vintage {
  font-family: Vintage Typewriter;
}

.bodoni {
  font-family: Bodoni72;
}

.cormorant-semibold {
  font-family: Cormorant-SemiBold;
}

.courier {
  font-family: "Courier New", Courier, monospace;
}

.arial {
  font-family: Arial, Helvetica, sans-serif;
}

.handwriting-dakota {
  font-family: Handwriting Dakota;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.indent {
  text-indent: 50px;
}

.box-sidebar > h5 {
  font-family: FuturaPTBold !important;
  letter-spacing: 3px !important;
}

.box-sidebar > p {
  font-family: FuturaPT;
}

.traits-highlight {
  border-spacing: 0px 2px;
}

.traits-highlight > tr:nth-of-type(even) {
  background-color: var(--vtm-cbn-trait-highlight-color);
}

.main-holder .sidebar-alt-border {
  position: relative;
  border: none;
}

.sidebar-alt-border::before {
  content: "";
  display: block;
  position: relative;
  top: -31px;
  left: -20px;
  width: 800px;
  height: 16px;
  border-top: solid 4px var(--vtm-cbn-sidebar-border-color);
  border-bottom: solid 4px var(--vtm-cbn-sidebar-border-color);
}

.sidebar-alt-border::after {
  content: "";
  display: block;
  position: relative;
  bottom: -31px;
  left: -20px;
  width: 800px;
  height: 16px;
  border-top: solid 4px var(--vtm-cbn-sidebar-border-color);
  border-bottom: solid 4px var(--vtm-cbn-sidebar-border-color);
}

.sidebar-inset {
  margin: 0 0 0 40px;
}

/* Additions */
 
@font-face {
  font-family: Cormorant-SemiBold;
  src: url("https://content.demiplane.com/fonts/Cormorant-SemiBold.ttf"); 
}

 
@font-face {
    font-family: RemingtonNoiseless;
    src: url("https://content.demiplane.com/fonts/Remington-Noiseless.ttf");
}

@font-face {
    font-family: VintageTypewriter;
    src: url("https://content.demiplane.com/fonts/VintageTypewriter-Corona.otf");
}

@font-face {
    font-family: AmericanScribe;
    src: url("https://content.demiplane.com/fonts/American Scribe.ttf");
}

@font-face {
  font-family: Cornet;
  src: url("https://content.demiplane.com/fonts/Cornet.ttf");
}

@font-face {
  font-family: Vintage Typewriter;
  src: url("https://content.demiplane.com/fonts/VintageTypewriter-Corona.otf");
}

@font-face {
  font-family: HandwritingDakota;
  src: url("https://content.demiplane.com/fonts/Handwriting-Dakota.ttf")
    format("truetype");
}

@font-face {
  font-family: alana;
  src: url("https://content.demiplane.com/fonts/Alana.otf")
    format("opentype");
}

@font-face {
  font-family: FuturaPT;
  src: url("https://content.demiplane.com/fonts/Futura PT Book.ttf")
    format("truetype");
}

@font-face {
  font-family: FuturaPTBold;
  src: url("https://content.demiplane.com/fonts/Futura-PT-Bold.ttf")
    format("truetype");
}

@font-face {
  font-family: BradleyHandBold;
  src: url("https://content.demiplane.com/fonts/Bradley Hand Bold.ttf")
    format("truetype");
}

@font-face {
  font-family: MinionVariable;
  src: url("https://content.demiplane.com/fonts/MinionVariableConcept-Roman.otf")
    format("opentype");
}

@font-face {
  font-family: Handwriting;
  src: url("https://content.demiplane.com/fonts/Handwriting.ttf")
    format("truetype");
}

@font-face {
  font-family: Copperplate;
  src: url("https://content.demiplane.com/fonts/Copperplate.otf")
    format("opentype");
}
 
.cbn-ch-header-image:after {
  position: relative;
  display: block;
  content: "";
  margin-top: -100px;
  bottom: 0px;
  left: 0px;
  height: 100px;
  background: linear-gradient(0deg, rgba(16,16,16,1) 25%, rgba(16,16,16,0.8048263250612745) 50%, rgba(16,16,16,0.6171512550332633) 75%, rgba(0,0,0,0) 100%);
  z-index: 99;
}

.cbn-ch-no-image {
    background-image: none !important;
    height: auto;
}

.cbn-ch-header > h3 {
  color: var(--vtm-cbn-body-color);
  text-align: right;
  font-size: 40px;
  text-transform: lowercase;
  font-family: RemingtonNoiseless;
}

.cbn-ch-header > h1 {
  font-size: 7rem;
  text-align: right;
  text-transform: none;
  color: var(--vtm-cbn-body-color);
  z-index: 1;
  font-family: alana;
  font-weight: 400;
  font-style: normal;
  line-height: 160px;
}

.cbn-center > h1 {
    text-align: center !important;
}

.cbn-left > h1:nth-of-type(odd) {
  text-align: left;
}

.cbn-right > h1:nth-of-type(even) {
  text-align: left;
}
 
 .quote-block {
     text-align: center;
     font-family: Cormorant-SemiBold;
 }
 
 .quote-block .author {
     font-style: normal;
 }
 
 .main-holder .author {
     font-style: normal;
 }
 
 .main-holder h2 {
     font-family: Bodoni72;
     font-size: 42px;
 }
 
 .box-sidebar .box-header {
     font-family: FuturaPTBold !important;
 }
 
 
  .main-holder h4 {
     font-family: FuturaPTBold;
     letter-spacing: 1px;
     font-size: 24px;
 }
 
 .main-holder h3 {
     font-family: Bodoni72;
     font-size: 32px;
     text-transform: none;
 }