/*
 * Bootstrap 3.3.2 permanece responsável pelo grid (.container/.row/.col-*).
 * Este arquivo NÃO redefine o grid do Bootstrap.
 */

.committee-section {
    /*padding: 10px 0 10px; /*70px 0 45px;*/
    overflow: hidden;
}

/*
.committee-heading {
    margin-bottom: 35px;
}

.committee-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
*/

.committee-heading h2 {
    margin-top: 0;
    margin-bottom: 12px;
}
/*
.committee-heading .lead {
    max-width: 680px;
}
*/

/*
 * O viewport fica fora do .container de propósito.
 * Assim os cartões podem passar de uma borda da tela à outra,
 * enquanto o título e o texto continuam alinhados ao grid Bootstrap.
 */
.committee-marquee {
    width: 100%;
    overflow: hidden;
}

.committee-marquee__viewport {
    width: 100%;
    overflow: hidden;
    cursor: grab;

    -webkit-mask-image: -webkit-linear-gradient(
        left,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}

.committee-marquee__viewport.is-dragging {
    cursor: grabbing;
}

.committee-track {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;

    width: -webkit-max-content;
    width: max-content;

    margin: 0;
    padding: 10px 0 25px;

    will-change: transform;

    -webkit-animation: committee-loop 120s linear infinite;
    animation: committee-loop 120s linear infinite;
}

.committee-marquee:hover .committee-track,
.committee-marquee.is-paused .committee-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.committee-item {
		-webkit-flex: 0 0 300px;
		flex: 0 0 300px;
		width: 300px;
		margin-right: 15px;
}

.committee-card {
    min-height: 245px;
    padding: 10px;
		color: var(--gray-hex);
		text-align: center;
		background: var(--paper);
    border: 1px solid var(--marb-hex);
    border-radius: 15px;

    /*-webkit-box-shadow: 0 8px 25px rgba(0,0,0,.08);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);*/
		box-shadow: 
		1px 1px 0px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.75), 
		2px 2px 1px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.6), 
		4px 4px 2px 1px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.3);
}

.committee-card.committee-card-ora {
  background: var(--mora-hex);
	border: 1px solid var(--mora-hex);
	text-shadow: 
		1px 1px 0 rgba(var(--dora-R),var(--dora-G),var(--dora-B),1),
		2px 2px 0 rgba(var(--dora-R),var(--dora-G),var(--dora-B),1),
		3px 3px 0 rgba(var(--dora-R),var(--dora-G),var(--dora-B),1);
}

.committee-card.committee-card-blu {
  background: var(--mblu-hex);
  border: 1px solid var(--dblu-hex);
	text-shadow: 
		1px 1px 0 rgba(var(--dblu-R),var(--dblu-G),var(--dblu-B),1),
		2px 2px 0 rgba(var(--dblu-R),var(--dblu-G),var(--dblu-B),1),
		3px 3px 0 rgba(var(--dblu-R),var(--dblu-G),var(--dblu-B),1);
}

.committee-card.committee-card-gre {
  background: rgba(var(--lgre-R),var(--lgre-G),var(--lgre-B),0.2);
  border: 1px solid var(--mgre-hex);
	text-shadow: 
		1px 1px 0 rgba(var(--dgre-R),var(--dgre-G),var(--dgre-B),1),
		2px 2px 0 rgba(var(--dgre-R),var(--dgre-G),var(--dgre-B),1),
		3px 3px 0 rgba(var(--dgre-R),var(--dgre-G),var(--dgre-B),1);
}

.committee-card .thumnail img {
  width: 70%;
	border-radius: 15px;
	box-shadow: 
	  1px 1px 0px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.75), 
		2px 2px 2px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.6), 
		3px 3px 3px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.3),
		4px 4px 4px 4px rgba(var(--gray-R),var(--gray-G),var(--gray-B),0.1);
}

.committee-card .member-name {
  font-weight: 700;
}

.committee-card .member-role {
  padding: 10px 15px 0px;
}

.committee-card .member-com {
  padding: 0 15px 5px;
}

.committee-quote {
    height: 25px;
    font-size: 44px;
    line-height: 35px;
}

.committee-card blockquote {
    margin: 15px 0 25px;
    padding: 0;
    border-left: 0;
    font-size: 16px;
    line-height: 1.65;
}

.committee-card footer {
    display: block;
}

.committee-card footer strong,
.committee-card footer span {
    display: block;
}

.committee-card footer span {
    margin-top: 4px;
    color: #777;
    font-size: 13px;
}

.committee-hint {
    margin: 8px 0 0;
    color: #777;
    font-size: 12px;
}

@-webkit-keyframes committee-loop {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(
            -50%,
            0,
            0
        );
        transform: translate3d(
            -50%,
            0,
            0
        );
    }
}

@keyframes committee-loop {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(
            -50%,
            0,
            0
        );
        transform: translate3d(
            -50%,
            0,
            0
        );
    }
}

@media (max-width: 767px) {
    .committee-section {
        padding: 50px 0 35px;
    }

    .committee-item {
        -webkit-flex-basis: 285px;
        flex-basis: 285px;
        width: 285px;
        margin-right: 15px;
    }

    .committee-card {
        min-height: 235px;
        padding: 20px;
    }

    .committee-card blockquote {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .committee-track {
        -webkit-animation: none;
        animation: none;
    }
}
