/* Image map styles */
.desktop {
    position: relative;
    max-width: 500px;
    width: 500px;
    margin: 0 auto;
}

.desktop img {
    width: 500px;
    max-width: 500px;
}

.tablet {
    position: relative;
    width: 450px;
    max-width: 450px;
    margin: 0 auto;
}

.tablet img {
    width: 450px;
    max-width: 450px;
}

.mobile {
    position: relative;
    width: 350px;
    max-width: 350px;
    margin: 0 auto;
}

.mobile img {
    width: 350px;
    max-width: 350px;
}

.desktop.tooltip, .tablet.tooltip, .mobile.tooltip {
    background-color: #fff;
    border: 0;
    padding: 0;
    display: block;
    width: 100%;
}

.tooltip .brain-box {
    display: none;
}

.brain-text {
    padding: 0 0.8em 0.8em 0.8em;
    min-height: 11em;
}

.tooltip:hover .brain-box {
    position: fixed;
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    max-width: 300px;
    width: 100%;
}

.brain-hd {
    background-color: #d1b310;
    padding: 0.5em;
}