* { box-sizing: border-box; }

body { background: #eceef1; font-family: Roboto; line-height: 0.9; }

.wrapper { margin: 1em auto; max-width: 1400px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }

.header { padding: 70px 30px 0; text-align: center; }

.header__title { margin: 0; text-transform:; font-size: 2em; font-weight: 500; line-height: 1.1; font-family: Roboto; }

.header__subtitle { margin: 0; font-size: 1.3em; color: #949fb0; font-family: 'Roboto', Roboto; font-weight: 500; line-height: 2.1; }

.cards { padding: 15px; display: -webkit-box; display: flex; flex-flow: row wrap; }

.card { margin: 15px; width: calc((100% / 6) - 30px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.cardb div.tableauPlaceholder { pointer-events: none; position: absolute !important; top: -22px; left: -20px; }
.cardb { position: absolute; border: 0; height: 14px; overflow: hidden; width: 100%; bottom: -14px; left: 0px; }
.carde { width: 100%; }

.vizContainer { width: 100%; height: 827px; }

@media screen and (max-width: 991px) {
    .card { width: calc((100% / 3) - 30px); }
}

@media screen and (max-width: 767px) {
    .card { width: calc(100% - 30px); }
}

.card:hover .card__inner { background-color: #ffffff; -webkit-transform: scale(1.05); transform: scale(1.05); }

.card__inner { width: 100%; padding: 20px; position: relative; cursor: pointer; background-color: #F36E26; color: #eceef1; font-size: 1.5em; text-align: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.card__inner:after { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.card__inner .fa { width: 100%; margin-top: .25em; }

.card__expander { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background-color: #eae8e8; width: 100%; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; color: #f36e26; font-size: 1.5em; }

.card__expander .fa { font-size: 0.95em; position: absolute; top: 10px; right: 10px; cursor: pointer; }

.card__expander .fa:hover { opacity: 0.9; }

.card.is-collapsed .card__inner:after { content: ""; opacity: 0; }

.card.is-collapsed .card__expander { max-height: 0; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; }

.card.is-expanded .card__inner { background-color: #ffffff; }

.card.is-expanded .card__inner:after { content: ""; opacity: 1; display: block; height: 0; width: 0; position: absolute; bottom: -30px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #f36e26; }

.card.is-expanded .card__inner .fa:before { content: "\f115"; }

.card.is-expanded .card__expander { max-height: 1000px; min-height: 200px; overflow: visible; margin-top: 30px; opacity: 1; }

.card.is-expanded:hover .card__inner { -webkit-transform: scale(1); transform: scale(1); }

.card.is-inactive .card__inner { pointer-events: none; opacity: 0.5; }

.card.is-inactive:hover .card__inner { background-color: #949fb0; -webkit-transform: scale(1); transform: scale(1); }

@media screen and (min-width: 992px) {

    .card:nth-of-type(6n+2) .card__expander { margin-left: calc(-100% - 30px); }

    .card:nth-of-type(6n+3) .card__expander { margin-left: calc(-200% - 60px); }

    .card:nth-of-type(6n+4) .card__expander { margin-left: calc(-300% - 90px); }

    .card:nth-of-type(6n+5) .card__expander { margin-left: calc(-400% - 120px); }

    .card:nth-of-type(6n+6) .card__expander { margin-left: calc(-500% - 150px); }


    .card__expander { width: calc(600% + 150px); }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .card:nth-of-type(2n+2) .card__expander { margin-left: calc(-100% - 10px); }

    .card:nth-of-type(2n+3) { clear: left; }

    .card__expander { width: calc(200% + 30px); }
}