#research .display__body--extension {
    top: 68px;
    left: 190px;
}

#research .display__body .label-value:not(.default) span:last-child {
    font-size: 12px;
}

.select__thing {
    cursor: pointer;
}

.select__thing,
.active__thing {
    background-image: url(../img/research-bg.png);   
    background-position: center center;
    border: 1px rgba(255, 255, 255, 0.25) solid;
    display: block;
    position: relative;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.select--closed,
.active--closed,
.detail--closed,
.footer--closed {
    display: none;
}

.select__thing:before,
.active__thing:before {
    position: absolute;
    content: '';
    background-image: url(../img/small-glass-panel.png);
    background-size: 100% auto;
    background-position: 0 0;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    box-shadow: 0 0 2px inset rgba(0, 0, 0, 1);
    z-index: 2;
}

@keyframes research {
    from { transform: scale(2.4) rotate(0deg); }
    to { transform: scale(2.4) rotate(360deg); }
}

@keyframes scan {
    0% { transform: translateY(0); }
    50% { transform: translateY(116px); }
    100% { transform: translateY(0); }
}

.active__scanner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    animation: scan 10s infinite;
}

.type-c .active__scanner {
    background-color: rgb(198, 250, 254);
    box-shadow: 0 0 6px 3px rgb(0, 238, 255);
}
.type-r .active__scanner {
    background-color: rgb(213, 245, 227);
    box-shadow: 0 0 6px 3px rgb(0, 255, 110);
}
.type-e .active__scanner {
    background-color: rgb(218, 160, 252);
    box-shadow: 0 0 8px 6px rgba(162, 0, 255, 0.6);
}


.active__scanner--2,
.active__scanner--2-a,
.active__scanner--3,
.active__scanner--3-a,
.active__scanner--4,
.active__scanner--4-a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgb(222, 255, 130);
    box-shadow: 0 0 6px 3px rgb(175, 253, 72);
    animation: scan 10s infinite;
}

.active__scanner--2 {
    opacity: 0.75;
    animation: scan 5s infinite;
}

.active__scanner--3 {
    opacity: 0.5;
    animation: scan 2s infinite;
}

.active__scanner--4 {
    opacity: 0.95;
    animation: scan 8s infinite;
}

.active__scanner--2-a,
.active__scanner--3-a,
.active__scanner--4-a {
    right: auto;
    height: auto;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
}

@keyframes scan-a {
    0% { transform: translateX(0); }
    50% { transform: translateX(188px); }
    100% { transform: translateX(0); }
}

.active__scanner--2-a {
    opacity: 0.5;
    animation: scan-a 3s infinite;
}

.active__scanner--3-a {
    opacity: 0.95;
    animation: scan-a 4s infinite;
}

.active__scanner--4-a {
    opacity: 0.75;
    animation: scan-a 6s infinite;
}

.active__thing img {
    margin: 30px;
    animation: research 30s infinite;
    transform: scale(2.4) rotate(0deg);
}

.select__thing span {
    display: inline-block;
    padding: 24px 17px;
    font-size: 2em;
    line-height: 0;
    margin: 30px;
    border-radius: 25px;
    border: 1px rgba(255, 255, 255, 0.5) solid;
    background-color: rgba(255, 255, 255, 0.1);
    transition: transform 0.05s ease-out, background 0.05s ease-out;
}
.select__thing:hover span {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.research__probe {
    text-align: center;
} 
