/*
Theme Name: Beaver Builder Child Theme (Save The Orcas)
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.1.1
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 


.mp-vote-list {
  display: flex;
  flex-wrap: wrap;
  --gap: .5rem;
  gap: var(--gap);
  --columns: 4;
  --liberal: #d71920;
  --convervative: #6495ED;
  --green: #24B24A;
  --ndp: #F58220;
  --bloc: #87CEFA;
}

@media screen and (max-width: 980px) {

    .mp-vote-list {
        --columns: 3;
    }
}

@media screen and (max-width: 600px) {
    .mp-vote-list {
        --columns: 2;
    }
}

@media screen and (max-width: 480px) {
    .mp-vote-list {
        --columns: 1;
    }
}

.mp-vote-list-item {
  width: calc((100% - ((var(--columns) - 1) * var(--gap))) / var(--columns));
  background: white;
  border-radius: .325rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mp-vote-list-name {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: black !important;
}

.mp-vote-list-party {
  background: black;
  color: white !important;
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: .725rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  order: 3;
  align-self: flex-start;
  margin-top: auto;
}

.mp-party-conservative .mp-vote-list-party {
  background: var(--convervative);
}

.mp-party-liberal .mp-vote-list-party {
  background: var(--liberal);
}

.mp-party-bloc-quebecois .mp-vote-list-party {
  background: var(--bloc);
}

.mp-party-ndp .mp-vote-list-party {
  background: var(--ndp);
}

mp-party-green-party .mp-vote-list-party {
  background: var(--green);
}

.mp-vote-list-riding {
  font-style: italic;
  font-size: .825rem !important;
  margin-bottom: .5rem;
}