body, html {
    /* height: 100%; */
    /* width: 100%; */

    height: 1020px;
    width: 1980px;

    overflow: hidden;

    margin: auto auto;
}

body {
    margin: auto auto;
    position: relative;
    overflow: hidden;

    background-color: #111;
    background-repeat: no-repeat;

    background-position: center center;
    background-size: cover;
}

body#index {
    background-image: url('../assets/index/background.png');
    background-size: contain;
}

body#Anwesen {
    background-image: url('../assets/anwesen/background.png');
}

body#Fahrzeuge {
    background-image: url('../assets/fahrzeuge/background.png');
}

body#Geschaefte {
    background-image: url('../assets/geschäfte/background.jpg');
}

body#Geschichte {
    background-image: url('../assets/geschichte/background.png');
}

body#Kleider {
    background-image: url('../assets/kleider/background.png');
}

body#Kodex {
    background-image: url('../assets/kodex/background.png');
}

body#Leaderschaft {
    background-image: url('../assets/leaderschaft/background.jpg');
}

body#Shinigami {
    background-image: url('../assets/shinigami/background.jpg');
}

body#Vokabular {
    background-image: url('../assets/vokabular/background.jpg');
}

body#Messer{
    background-image: url('../assets/waffe/background.jpg');
}

body#Rituale{
    background-image: url('../assets/rituale/background.jpg');
}

body#Orte{
    background-image: url('../assets/orte/background.jpg');    
}

.table-item {
    cursor: pointer;
    position: absolute;
}

.table-item img {
    height: 100%;
    width: 100%;    
}

.table-item#Anwesen {
    top: calc(50% - 27rem);
    left: calc(50% - 50rem);
    height: 175px;
    width: 300px;
    transform: rotate(-25deg) translate(-50%, -50%);
}

.table-item#Fahrzeuge {
    top: calc(50% - 23rem);
    left: calc(50% - 29rem);
    height: 175px;
    width: 300px;
    transform: translate(-50%, -50%);
}

.table-item#Vokabular {
    top: calc(50% - 15rem);
    left: calc(50% - 21rem);
    height: 175px;
    width: 300px;
    transform: rotate(90deg) translate(-50%, -50%);
}

.table-item#Leaderschaftmuenze {
    top: calc(50% - 15rem);
    left: calc(50% + 16rem);
    height: 409px;
    width: 300px;
    transform: translate(-50%, -50%);
}

.table-item#Rituale {
    top: calc(50% - 22rem);
    right: 5rem;
    height: 208px;
    width: 436px;
    transform: translateY(-50%) scale(1.4);
}

.table-item#Shinigami {
    top: calc(50% + 7rem);
    left: calc(50% - 5rem);
    height: 483px;
    width: 306px;
    transform: translate(-50%, -50%) rotate(-3deg);
}

.table-item#Orte {
    top: calc(50% - 7rem);
    left: calc(50% - 33rem);
    height: 175px;
    width: 300px;
    transform: translate(-50%, -50%) rotate(30deg);
}

.table-item#Geschaefte {
    top: calc(50% - 6rem);
    left: calc(50% - 51rem);
    height: 248px;
    width: 223.5px;
    transform: translate(-50%, -50%) scale(.8);
}

.table-item#Kodex {
    top: calc(50% + 14rem);
    left: calc(50% - 32rem);
    height: 340px;
    width: 240px;
    transform: translate(-50%, -50%) rotate(-28deg);
}

.table-item#Messer {
    top: calc(50% + 27rem);
    left: calc(50% - 2rem);
    height: 130px;
    width: 720px;
    transform: translate(-50%, -50%);
}

.table-item#Geschichte {
    top: calc(50% + 21rem);
    left: calc(50% + 27rem);
    height: 517px;
    width: 483px;
    transform: translate(-50%, -50%) rotate(-28deg);
}

.table-item#Kleider {
    top: calc(50% + 15rem);
    left: calc(50% + 50rem);
    height: 800px;
    width: 555.29px;
    transform: translate(-50%, -50%) rotate(-30deg);
}

#helpContainer {
    position: absolute;

    bottom: 1rem;
    left: 50%;

    transform: translateX(-50%);

    display: none;

    background-color: rgba(0, 0, 0, .8);
    border-radius: 5px;
    padding: 1rem;

    color: white;
}

#bottomNavigation {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}

.btn-back {
    background-color: rgba(0, 0, 0, .8) !important;
    border-color: rgba(0, 0, 0, .8) !important;
    width: 150px;
}

.btn-back i {
    margin-right: 1rem;
}

#content {
    position: absolute;
    top: 5rem;
    bottom: 5rem;
    width: 100%;
    z-index: 80;
}

#contentContainer {
    background-color: rgba(0, 0, 0, .8);
    max-height: 100%;
    overflow-y: auto;
    color: white;
}

#contentContainer h3 {
    font-family: 'Stick', sans-serif;
    text-transform: uppercase;
    font-size: 2.5rem;
    color: rgb(156, 0, 0);
}

.text-img {
    width: calc(100% - 8rem); 
    margin-top: 1rem; 
    margin-right: 4rem; 
    margin-left: 4rem; 
    margin-bottom: 1rem; 
    background-color: rgb(27, 27, 27); 
    padding: 1px; 
    border-radius: 5px;
}

#geschichteContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-image: url('../assets/geschichte/rolle.png');
    background-position: center center;
    background-size: contain;

    width: 900px;
    height: 572px;
}

#geschichteInner {
    margin-left: 7rem;
    margin-top: 7rem;
    width: 680px;
    /* background-color: rgba(0, 0, 0, .5); */
    overflow-y: auto;
    height: 350px;
    color: black;
}

#umschlagModal .modal-dialog {
    background-image: url('../assets/geschichte/brief.png');
    background-position: center center;
    background-size: contain;
    height: 1020px;
    width: 751px;
    max-width: 751px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
}

.kleider-card {
    height: 161.97px;
    width: 230px;

    position: absolute;

    transform: translate(-50%, -50%);

    background-position: center center;
    background-size: contain;

    cursor: pointer;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;

    transition: all 200ms;
}

.kleider-card:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.kleider-card#_12 {
    background-image: url('../assets/kleider/karten/Oyabun.png');

    height: 250px;
    width: 355px;

    top: calc(50% - 16rem);
    left: calc(50% - 19rem);
}

.kleider-card#_11 {
    background-image: url('../assets/kleider/karten/Saiko-Komon.png');

    height: 173.24px;
    width: 246px;

    top: calc(50% + 1rem);
    left: calc(50% - 27rem);
}

.kleider-card#_10 {
    background-image: url('../assets/kleider/karten/Wakagashira.png');

    height: 173.24px;
    width: 246px;

    top: calc(50% + 4rem);
    left: calc(50% - 11rem);
}

.kleider-card#_09 {
    background-image: url('../assets/kleider/karten/Shatai-Gashira.png');

    height: 173.24px;
    width: 246px;

    top: calc(50% + 18rem);
    left: calc(50% - 27rem);
}

.kleider-card#_08 {
    background-image: url('../assets/kleider/karten/Tsunagari.png');

    height: 173.24px;
    width: 246px;

    top: calc(50% + 21rem);
    left: calc(50% - 11rem);
}

.kleider-card#_07 {
    background-image: url('../assets/kleider/karten/Kyodai.png');

    top: calc(50% - 22rem);
    left: calc(50% + 7rem);
}

.kleider-card#_06 {
    background-image: url('../assets/kleider/karten/Shingiin.png');

    top: calc(50% - 22rem);
    left: calc(50% + 23rem);
}

.kleider-card#_05 {
    background-image: url('../assets/kleider/karten/Shatei.png');

    top: calc(50% - 7rem);
    left: calc(50% + 7rem);
}

.kleider-card#_04 {
    background-image: url('../assets/kleider/karten/Koibun.png');

    top: calc(50% - 7rem);
    left: calc(50% + 23rem);
}

.kleider-card#_03 {
    background-image: url('../assets/kleider/karten/Gakusha.png');

    top: calc(50% + 8rem);
    left: calc(50% + 7rem);
}

.kleider-card#_02 {
    background-image: url('../assets/kleider/karten/Gunjin.png');

    top: calc(50% + 8rem);
    left: calc(50% + 23rem);
}

.kleider-card#_01 {
    background-image: url('../assets/kleider/karten/Menba.png');

    top: calc(50% + 22rem);
    left: calc(50% + 7rem);
}

.kleider-card#_00 {
    background-image: url('../assets/kleider/karten/Aonisai.png');

    top: calc(50% + 22rem);
    left: calc(50% + 23rem);
}

.kleider-card.active {
    top: 50% !important;
    left: 50% !important;

    height: 964px !important;
    width: 1364px !important;

    transform: translate(-50%, -50%) scale(.8) !important;

    z-index: 80;
}

.leaderschaft-card {
    height: 300px;
    width: 468.98px;

    position: absolute;

    transform: translate(-50%, -50%);

    background-position: center center;
    background-size: contain;

    cursor: pointer;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;

    transition: all 200ms;   
}

.leaderschaft-card#cody {
    background-image: url('../assets/leaderschaft/karten/Cody_Hanzo.png');

    top: calc(50% + 1rem);
    left: calc(50% - 15rem);
}

.leaderschaft-card#hattori {
    background-image: url('../assets/leaderschaft/karten/Hattori_Hanzo.png');

    top: calc(50% - 20rem);
    left: calc(50% + 1rem);
}

.leaderschaft-card#justin {
    background-image: url('../assets/leaderschaft/karten/Justin_Tablo.png');

    top: calc(50% + 1rem);
    left: calc(50% + 15rem);
}

.leaderschaft-card#luca {
    background-image: url('../assets/leaderschaft/karten/Luca_Hanzo-Tablo.png');

    top: calc(50% + 20rem);
    left: calc(50% + 15rem);
}

.leaderschaft-card#reggie {
    background-image: url('../assets/leaderschaft/karten/Reggie_Tablo.png');

    top: calc(50% + 20rem);
    left: calc(50% - 15rem);
}

.leaderschaft-card.active {
    top: 50% !important;
    left: 50% !important;

    height: 900px !important;
    width: 1406.95px !important;

    transform: translate(-50%, -50%) !important;

    z-index: 80;
}

#navigation {
    transform: translateX(-400px);   
    z-index: 55; 
    color: rgb(156, 0, 0);
}

#navigation h3 {
    font-family: 'Stick', sans-serif;
    text-transform: uppercase;
    font-size: 2.5rem;
    color: rgb(156, 0, 0);
}

a.navi-item {
    color: rgb(156, 0, 0);
    text-decoration: none;
}

.navi-item:hover {
    text-decoration: underline;
}