.button {
min-width: 130px;
padding: 4px 5px;
cursor: pointer;
text-align: center;
font-size: 13px;
border: 1px solid #e0e0e0;
text-decoration: none; }
.button.active {
background: #000;
color: #fff; }
@media screen {
a.buttonSort {
line-height: normal;
font-size: 16px;
line-height: 32px;
text-align: center;
color: #FFFFFF;
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
overflow: hidden;
display: inline-block;
padding: 0 0 12px 0;
text-decoration: none;
z-index: 1; } }
@media screen {
a.buttonSort:first-child {
margin-right: 26px; } }
@media screen and (min-width: 768px) {
a.buttonSort:first-child {
margin-right: 76px; } }
@media screen {
a.buttonSort:after {
content: '';
position: absolute;
z-index: 0;
left: -105%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background-color: #fff; } }
@media screen and (pointer: coarse) {
a.buttonSort:after {
display: none; } }
@media screen {
a.buttonSort:hover:after {
left: 50%; } }
a.buttonSort:focus {
outline: none; }
.bubbleWrapper {
background: url(/wp-content/themes/carrera/assets/img/talent_bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
position: relative;
max-width: 100vw;
overflow: hidden;
z-index: 0; }
.bubbleWrapper:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26, 71, 125, 0.7);
background-position: center center;
background-size: cover;
z-index: -1; }
.bubbleTitle {
line-height: normal;
font-size: 24px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 70px 0 24px; }
@media screen {
#vis {
width: 100%;
overflow: hidden;
height: calc(100vh - 250px);
margin: 0 auto;
clear: both;  background: none; } }
@media screen and (min-width: 768px) {
#vis {
height: 700px;
max-width: 940px; } }
#toolbar {
text-align: center;
margin-bottom: 30px; }
.year {
font-size: 21px;
fill: #fff;
cursor: default; }
@media screen {
.tooltip {
position: absolute;
top: 100px;
left: 100px;
-moz-border-radius: 6px;
border-radius: 6px; background: #fff;
padding: 14px;
width: auto;
-webkit-filter: drop-shadow(0px 4px 50px rgba(5, 47, 97, 0.35));
filter: drop-shadow(0px 4px 50px rgba(5, 47, 97, 0.35));
z-index: 10;
border: 2px solid #7CE7FF; } }
@media screen and (min-width: 768px) {
.tooltip {
padding: 24px; } }
@media screen {
.tooltip:after {
content: '';
width: 0;
height: 0;
--border-width: 14px;
border-bottom: var(--border-width) solid #fff;
border-top: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
border-left: var(--border-width) solid transparent;
position: absolute;
bottom: calc(-1 * var(--border-width));
left: 6px;
transform: rotateZ(-45deg); } }
@media screen {
.tooltip:before {
content: '';
width: 0;
height: 0;
--border-width: 16px;
border-bottom: var(--border-width) solid #7CE7FF;
border-top: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
border-left: var(--border-width) solid transparent;
position: absolute;
bottom: calc(-1 * var(--border-width));
left: 3px;
transform: rotateZ(-45deg); } }
@media screen {
.tooltip .name {
color: #5F7FA5;
font-weight: 500;
font-size: 10px;
line-height: 12px;
margin-bottom: 4px;
display: block; } }
@media screen and (min-width: 768px) {
.tooltip .name {
font-size: 12px;
line-height: 14px;
margin-bottom: 6px; } }
@media screen {
.tooltip .value {
color: #45474D;
font-weight: 700;
font-size: 12px;
line-height: 14px;
margin-bottom: 14px;
display: block; } }
@media screen and (min-width: 768px) {
.tooltip .value {
font-size: 16px;
line-height: 19px;
margin-bottom: 24px; } }
@media screen {
.tooltip .percentage {
color: #45474D;
font-weight: 700;
font-size: 18px;
line-height: 20px;
display: block; } }
@media screen and (min-width: 768px) {
.tooltip .percentage {
font-size: 24px;
line-height: 28px; } }
.footer {
text-align: center; }
svg g {
cursor: pointer; }
svg g circle {
stroke: #7CE7FF;
fill: rgba(124, 231, 255, 0.7); filter: drop-shadow(0px 4px 50px #052f61); }
svg g circle:hover {
fill: #fff; }
svg .bubble__text {
will-change: auto; }
svg g text {
font-weight: 700;
line-height: 16px;
fill: #fff;
stroke: none;
pointer-events: none; }
svg g:hover text {
fill: #45474D;
stroke: none; }
svg g:hover circle {
fill: #fff; }