:root {
  --mainColor: #4F0000; /*sealBrown*/
  --backMainColor: #F5F4F2; /*floralWhite*/
  --backTraits: #d9c484; /*Zombie*/
  --rojoNormal:#5e0000; /*Maroon*/
  --rojoTitulo:#c74a1b;
  --fondoBloques:#eae4d8;
  --tablaCabeza:#5e0000;
  --tablaPar:#f5efe0;
  --tablaImpar:#ede3c8;
  --tablaFoot:#e6d8b0;
  --encabezado2:#a86753;
  --link:#c74a1b;
  --rarity:#98513d;
  --azulTitulo:#002664;
  --backAzulTitulo:#d1d3d4;
}
@font-face {
    font-family: 'SabonLTSstd';
    src: url('/fonts/SabonLTStd-Roman.woff2') format('woff2'),
         url('/fonts/SabonLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'olsentf';
    src: url('/fonts/olsentf-regular-webfont.woff2') format('woff2'),
         url('/fonts/olsentf-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sketch_gothic_schoolregular';
    src: url('/fonts/sketch_gothic_school-webfont.woff2') format('woff2'),
         url('/fonts/sketch_gothic_school-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'wolf_in_the_cityregular';
    src: url('/fonts/wolf_in_the_city-webfont.woff2') format('woff2'),
         url('/fonts/wolf_in_the_city-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'knemabold';
    src: url('/fonts/knema-webfont.woff2') format('woff2'),
         url('/fonts/knema-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pathfinder_Icons';
    src: url('/fonts/Pathfinder-Icons.woff2') format('woff2'),
         url('/fonts/Pathfinder-Icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GoodOT_CondBold';
    src: url('/fonts/GoodOT-CondBold.woff2') format('woff2'),
         url('/fonts/GoodOT-CondBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoodOT_Bold';
    src: url('/fonts/goodot-bold-webfont.woff2') format('woff2'),
         url('/fonts/goodot-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoodOT';
    src: url('/fonts/goodot-webfont.woff2') format('woff2'),
         url('/fonts/goodot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'albertus_mt';
    src: url('/fonts/albertus_mt.woff2') format('woff2'),
         url('/fonts/albertus_mt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'moonshiner';
    src: url('/fonts/moonshiner-regular-webfont.woff2') format('woff2'),
         url('/fonts/moonshiner-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-variant: small-caps;
}

i.pf2:before {
    font-family: 'Pathfinder_Icons';
    font-style:normal;
    font-size:0.9em;
}
i.pf2.action1:before { content: " "; }
i.pf2.action2:before { content: " "; }
i.pf2.action3:before { content: " "; }
i.pf2.actionF:before { content: " "; }
i.pf2.Reaction:before { content: " "; }

.tooltip{
    font-size: calc(10 * var(--midaLetra) / 18);
}

*{
     font-family: 'SabonLTSstd';
    box-sizing: border-box;
}
html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 70px;
  background-color:  var(--backMainColor);
}
footer.principal{
      position: absolute;
      bottom: 0;
      left:0;
      width: 100%;
      height: 60px;
      color:var(--mainColor);
      font-size: calc(1 * var(--midaLetra) / 2);
}
/*MODALS*/
h3.modal-title strong{
    font-family: 'knemabold';
}
.modal-body > ul{
    padding-left: 0;
}
/*BARRA TITULO*/
h1.mainTitle{
    cursor:pointer;
}
h1.mainTitle > span{
    font-family: 'sketch_gothic_schoolregular';
    color:var(--mainColor);
    font-size:calc(1.3 * var(--midaLetra));
    /*cursor:context-menu;*/
}
h1.mainTitle > span.special{
    font-family: 'wolf_in_the_cityregular';
    color:#a23424; 
    font-size:var(--midaLetra);
    margin-right: calc(1 * var(--midaLetra) / 36);

    text-shadow:  calc(1 * var(--midaLetra) / 90)  calc(1 * var(--midaLetra) / 90) 0px rgba(0,0,0,0.2);
}
/*MENU DE LINKS*/
    aside.linkR{
        position: absolute;
        right:calc(1 * var(--midaLetra) / 6);
        top:calc(1 * var(--midaLetra) / 6);
    }
    aside.linkR nav.dropdown-menu{
        width: calc(70 * var(--midaLetra) / 9) !important;
        font-size:calc(5 * var(--midaLetra) / 6);
    }
    aside.linkR nav > a{
        padding:calc(2 * var(--midaLetra) / 9) calc(5 * var(--midaLetra) / 9);
    }
    aside.linkR span{
        font-family: 'knemabold';
        margin-right: calc(5 * var(--midaLetra) / 9);
    }
/*MAIN*/
    main{
        padding:2em;
        margin:2em;
        text-align: justify;
        background-color:white;
    }
    h1.title{
        font-family:albertus_mt;
        font-variant: small-caps;
        color:var(--rojoNormal);
        font-weight:bold;
    }
    h3.title{
        margin-top:0.5em;
        padding:0 0.5em;
        font-family: knemabold;
        background-color: var(--backAzulTitulo);
        color:var(--azulTitulo);
        font-variant: small-caps;
        font-weight:bolder;
        border-top-right-radius: 0.2em;
    }
    main >p{
        padding:0 1em;
    }
/*BARRA DE BUSQUEDA*/
#text_search {
    position:relative;
    font-size:calc(7 * var(--midaLetra) / 9);
    background: white url(/img/search-light.svg) no-repeat calc(100% - 10px) center;
    background-size:  auto 50%;
}
/*RESULTADOS BUSQUEDA*/
#list-results{
    font-size:calc(11 * var(--midaLetra) / 18);
    padding-left:calc(5 * var(--midaLetra) / 18);
}
button.listado > small{
    font-family: 'GoodOT_Bold';
    text-transform: uppercase;
    color: var(--rojoTitulo);
}

#opciones{
    width: calc(50 * var(--midaLetra) / 6) !important;
    font-size:calc(5 * var(--midaLetra) / 6);
    border:0;
}
/*ADVERTISEMENT*/
#ad{
    background-color: #f96854;
    color:white;
    font-size:1em;
    border-radius: 1em;
}
#ad a{
    color:#62ce7e;

}
/*RESULTADO*/
#mainContainer{
    margin-top:calc(5 * var(--midaLetra) / 9);
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-wrapper{
    overflow: visible;  
}
.swiper-slide{
    overflow: visible;  
}
.swiper-pagination-bullet
{
    background-color:#8b1c1b;
}
.swiper-button-prev{
    color:#8b1c1b !important;
    background:none;
}
.swiper-button-next{
    color:#8b1c1b !important;
    background:none;
}
/*PARTE FEATURE*/
article.result {
    background-color:white;
    padding-top:15px;
    padding-right:15px;
    overflow: visible;
}
article.result strong{
    /*margin-right:0.2em;*/
    font-family: 'GoodOT_Bold';
}
/*PARTE CABECERA FEATURE*/
article.result > header{
    margin-bottom:0em;
    position:relative;
}
article.result > header > h1, h2{
    font-family: 'GoodOT_CondBold';
    font-size: calc(10 * var(--midaLetra) / 9);
    margin-bottom:0;
    padding-bottom:calc(1 * var(--midaLetra) / 18);
}
/*PARTE FILA DE RASGOS*/
article.result > section.traits{
    border-top:1.5px solid black;
    position:relative;
    padding-top:calc(1 * var(--midaLetra) / 18);
    margin-top:calc(-5 * var(--midaLetra) / 18);
}
article.result > section.traits > div{
    background-color: var(--backTraits);
}
article.result > section.traits > div > h3{
    font-family: 'GoodOT_CondBold';
    font-size: calc(1 * var(--midaLetra) / 2);
    background-color: var(--rojoNormal);
    color:white;
    margin:0.1em 0.15em 0.1em 0.15em;
    padding:0.2em 0.5em;
    cursor:help;
}
article.result > section.traits > div > h3.rarity{
    background-color: var(--rarity);
}
/*TEXTO NORMAL*/
main{
    font-size: calc(2 * var(--midaLetra) / 3);
}
/*PARTE DE PRERREQUISITOS, ETC.*/
article.result > section.details{
    border-bottom:1.5px solid black;
    position:relative;
}
article.result > section.details > p{
    font-family: 'GoodOT';
    font-size: calc(2 * var(--midaLetra) / 3);
    text-indent: -1em;
    margin-left: 1em;
    margin-bottom:0;
    text-align: justify;
}
/*PARTE DESCRIPCION*/
article.result > section.content > h2{
    font-family: 'moonshiner';
    font-size: calc(10 * var(--midaLetra) / 9);
    color:var(--encabezado2);
}
article.result > section.content > p, section.content li{
    font-family: 'GoodOT';
    font-size: calc(2 * var(--midaLetra) / 3);
    text-align:justify;
}
article.result> section.content {
  border-top: none;
  display: flex;
  flex-direction:column;
    justify-content: start;
    align-items: start;
}
article.result> section.content.extra {
    border-top:1.5px solid black;
}
article.result> section.content ~ section.content {
  border-top: 1.5px solid black;
}

section.content p{
    margin:0;
    padding:0;
}
section.content p:not(:first-child) {
    text-indent:1em;
}
section.content  ul + p:not(.tab0), section.content  p.tab0 + p:not(.tab0):not(.tab3), section.content  ol + p:not(.tab0) {
    text-indent:0 !important;
}       

section.content  h2 + p:not(.tab0) {
    text-indent:0 !important;
}
section.content  p.tab0 {
    text-indent: -1em;
    margin-left: 1em;
}
section.content  p.tab1 {
    text-indent: 0;
}
article.result> section.content.extra > p{
    text-indent: 0;
}
section.content  p.tab3{
    text-indent:1em !important; 
    margin-left:1em !important;
}

/*Bloques Info*/
article.result> section.content > aside.info{
    background-color: var(--fondoBloques);
    padding:0.5em 1em;
    display: inline-block;
    margin: 0.5em auto;
    max-width:80%;
    border-radius: 1px;
}
article.result> section.content > aside.info *{
    font-family: 'GoodOT';
    font-size: calc(2 * var(--midaLetra) / 3);
    text-align: justify;
}
article.result> section.content > aside.info > p{
    text-indent: 0;
}
article.result> section.content > aside.info > h3{
    font-family: 'GoodOT_Bold';
    text-align:center;
    margin-bottom:0;
}
/*Tables*/
section.content table{
    /*margin-left:-9px;*/
    z-index: 5;
    margin:0.5em 0 1em 0;
}
section.content  table > caption{
    text-transform: uppercase;
    color:black;
     font-family: 'GoodOT_CondBold';
     font-size: calc(8 * var(--midaLetra) / 9);
    caption-side: top;
    padding-bottom:0;
    line-height:1em;
}
section.content  table > tfoot {
    background-color:var(--tablaFoot);  
    font-size: calc(9 * var(--midaLetra) / 16);
    line-height:2em;
}
section.content  table > thead > tr {
    background-color:var(--rojoNormal);
}
section.content  table > thead > tr > th {
    font-family: 'GoodOT_CondBold';
    color:white;
    text-align:center;
    vertical-align: bottom;
    padding:0 0.4em;
    line-height: 1.2em;
    font-size: calc(2 * var(--midaLetra) / 3);
}
section.content  table.justo > thead > tr > th, section.content > table.justo > tbody > tr > td{
    text-align:justify;
}
section.content  table > tbody > tr:nth-child(even) {
    background-color: var(--tablaPar);
}
section.content  table > tbody > tr:nth-child(odd) {
    background-color: var(--tablaImpar);
}
section.content  table > tbody > tr > td {
    font-family: 'GoodOT';
    text-align:center;
    vertical-align: top;
    color:black;
    padding:0 0.4em;
    font-size: calc(9 * var(--midaLetra) / 16);
}
section.content  table > tbody > tr > td:first-child {
    
    text-align:left;
}
section.content  table > thead > tr > th:first-child {
    text-align:left;
    padding:0 1.8em 0 0.4em;
}

article.result footer {
    border-top:2px solid var(--backMainColor);
    padding-top:0.5em;
}
article.result footer div.source{
    font-family: 'GoodOT';
    font-size: calc(1 * var(--midaLetra) / 2);
}
.popover{
    max-width: calc(10 * var(--midaLetra) ); 
}
.popover-header, .popover-body {
    font-size: calc(1 * var(--midaLetra) / 2);
}

article.result footer div.source a {
  /*font-size: 40px;*/
  color:var(--rojoTitulo);
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
article.result footer div.source a:after {
  content: '';
  width: 20%;
  height: 100%;
  position: absolute;
  left: auto;
  top: 0;
  bottom: 0;
  right: -20%;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
article.result footer div.source a:hover:after {
  transition: all .4s ease-out;
  right: 100%;
}

/*LINKS GENERALES*/
a.pi{
    color:#9EA0A8;
    text-decoration: none;
}
a.pi:hover{
    color:#5f6579;
}
a.pi:active{
    color:#B2A588;
}

a.inner {
 font-family: 'GoodOT';
  background:
     linear-gradient(
       to bottom, var(--link) 0%,
       var(--link) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1.5px 1.5px;
  color: #000;
  text-decoration: none;
  transition: background-size .2s, color .1s;
}

a.inner:hover {
  background-size: 4px 50px;
  color:white;
}
a.twitter{
    text-decoration: none;
    color:#1da1f2;
}
a.twitter:hover{
    color:royalblue;
}
.red{
    color:var(--rojoNormal) !important;
}
strong{
    font-family: 'GoodOT_Bold' !important;
    font-weight: normal !important;
}
.lightMode {
    display: none !important;
}
/*MODALS*/
h3.modal-title strong{
    font-family: 'knemabold';
}
.modal-body > ul{
    padding-left: 0;
}
/*TABLE MODALS*/
    div.modal table{
        z-index: 5;
        margin:0.5em 0 1em 0;
    }
    div.modal  table > caption{
        text-transform: uppercase;
        color:black;
         font-family: 'GoodOT_CondBold';
         font-size: calc(7 * var(--midaLetra) / 9);
        caption-side: top;
        padding-bottom:0;
        line-height:1em;
    }
    div.modal  table > tfoot {
        background-color:var(--tablaFoot);  
        font-size: calc(9 * var(--midaLetra) / 16);
        line-height:2em;
    }
    div.modal  table > thead > tr {
        background-color:var(--rojoNormal);
    }
    div.modal  table > thead > tr > th {
        font-family: 'GoodOT_CondBold';
        color:white;
        text-align:center;
        vertical-align: bottom;
        padding:0 0.6em;
        line-height: 1.2em;
        font-size: calc(2 * var(--midaLetra) / 3);
    }
    div.modal  table > tbody > tr:nth-child(even) {
        background-color: var(--tablaPar);
    }
    div.modal  table > tbody > tr:nth-child(odd) {
        background-color: var(--tablaImpar);
    }
    div.modal  table > tbody > tr > td {
        font-family: 'GoodOT';
        text-align:center;
        vertical-align: top;
        color:black;
        padding:0 0.6em;
        font-size: calc(9 * var(--midaLetra) / 16);
    }
/*MODALS*/  
    div.modal p{
        font-family: 'GoodOT';
        font-size: calc(9 * var(--midaLetra) / 16);
        text-align: justify;
    }
    #sourceBooks div.accordion div.card div.card-header button.btn-dark *{
        font-size:calc(5 * var(--midaLetra) / 9);
    }
    #sourceBooks div.accordion div.card div.card-body div.list-group button{
        font-size:calc(4 * var(--midaLetra) / 9);
    }