/* Colours
 * Primary: #8e1d59
 * Secondary: #d91e3e
 */

 .meat-cuts-wrapper {
   margin-bottom: 1em;
 }

.beef-col svg {
  max-width: 100%;
  height: auto;
}

#back path {
  fill: #6A1543;
}
#back path.bg {
  fill: #551135;
}

.meat-cut path {
  fill: #8e1d59;
  transition: fill 0.2s linear;
}
.meat-cut:hover path {
  fill: #d91e3e;
  cursor: pointer;
}
.meat-cut.active path {
  fill: #d91e3e;
  cursor: pointer;
}

.meat-cut-label {
  position: absolute;
}

.meat-cut-image {
  text-align: center;
}

.modal-title {
  font-size: 2em;
  text-align: center;
}

body.modal-open {
  overflow: visible;
}

.site-header {
  padding: 10px 0;
}

a.nav-trigger {
  top: inherit;
}

.site-logo img {
  transition: all 1s ease-in-out;
}

.qfa-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.modal.fade.in.shown .modal-dialog {
  transition: none;
}

.beef-col,
.cuts-col {
  display: block;
  text-align: center;
}

.beef-col {
  transition: width 400ms ease-in-out;
}
.beef-col.alone {
  width: 100%;
}

.cuts-col .modal {
  text-align: left;
}
.cuts-col .modal .modal-header {
  text-align: center;
}
.cuts-col .modal .modal-body h4 {
  margin: 0.2em 0;
}
.cuts-col .modal .modal-body ul {
  margin-bottom: 0.2em;
}

.meat-cut-thumbnail {
  width: 90px;
  height: auto;
  display: inline-block;
  text-align: center;
  padding: 5px;
  vertical-align: middle;
}
.meat-cut-thumbnail img {
  vertical-align: middle;
}

.meat-cut-section-title {
   margin-top: 0;
   text-align: center;
}
#lines {
  pointer-events: none;
}

/*
 * MEDIA QUERIES
 * xs: 480px
 * sm: 768px
 * md: 992px
 * lg: 1200px
 */
@media (max-width: 480px) {
  .cuts-col .modal .modal-header .modal-title {
    font-size: 1.5em;
  }
  .meat-cut-section-title {
    margin-bottom: 0.5em;
  }
}
@media (min-width: 480px) {
  .meat-cut-thumbnail {
    width: 100px;
  }
}
@media (min-width: 768px) {
  .beef-col,
  .cuts-col {
    display: inline-block;
    vertical-align: top;
  }
  .beef-col {
    width: 60%;
    padding-right: 15px;    
  }
  .cuts-col {
    width: 40%;
    padding: 0 30px;
  }
  
  .meat-cut-thumbnail {
    width: calc(100% / 3);
  }
}
@media (min-width: 1200px) {
  .meat-cut-thumbnail {
    width: calc(100% / 3.5);
  }
}