.historicalEventsLearnMore {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.historicalEventsTooltip {
    display: none;
/*    width: 520px;
    opacity: 0.8;
    font-size: 16px;
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 1.5rem;
    border-radius: 6px;
*/
    position:relative;
    z-index:41;
    top: 25%;
}

.historicalEventsTooltipTitle {
    font-size: 40px;
    margin-bottom: 20px;
}
.historicalEventsTooltipText {
    text-align: center;
    font-size: 20px;
}



section#tradersEast {
    padding-right: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%),
    transparent url(/images/tradersEast/tradersEast.jpg) center right / cover;
}

section#historicalEvent {
    padding-left: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 0.95) 100%),
    transparent url(/images/tradersEast/historicalEvent.jpg) center left / cover;
}

section#quests {
    padding-right: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%),
    transparent url(/images/tradersEast/quests.jpg) center right / cover;
}

section#skills {
    padding-left: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 0.95) 100%),
    transparent url(/images/tradersEast/skills.jpg) center left / cover;
}

section#vocations {
    padding-right: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%),
    transparent url(/images/tradersEast/vocations.jpg) center right / cover;
}

section#endgame {
    padding-left: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.90) 70%, rgba(0, 0, 0, 1.0) 82.5%, rgba(0, 0, 0, 1.0) 100%),
    transparent url(/images/tradersEast/endgame.jpg) center left / cover;
}

section#rental {
    padding-right: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%),
    transparent url(/assets/panel8.jpg) center right / cover;
}

section#retainers {
    padding-left: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.90) 60%, rgba(0, 0, 0, 0.95) 100%),
    transparent url(/images/tradersEast/retainers.jpg) center left / cover;
}

section#wildworld {
    padding-right: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 40%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%),
    transparent url(/images/tradersEast/wildworld.jpg) center right / cover;
}

@media (max-width: 1000px) {
    section#tradersEast {
        padding-right: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/tradersEast.jpg) center right / cover;
    }

    section#historicalEvent {
        padding-left: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/historicalEvent.jpg) center left / cover;
    }

    section#quests {
        padding-right: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/quests.jpg) center right / cover;
    }

    section#skills {
        padding-left: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/skills.jpg) center left / cover;
    }

    section#vocations {
        padding-right: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/vocations.jpg) center right / cover;
    }

    section#endgame {
        padding-left: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/endgame.jpg) center left / cover;
    }

    section#rental {
        padding-right: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/assets/panel8.jpg) center right / cover;
    }

    section#retainers {
        padding-left: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/retainers.jpg) top center / cover;
    }

    section#wildworld {
        padding-right: 60px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%),
        transparent url(/images/tradersEast/wildworld.jpg) center center / cover;
    }
}