/*--Big tablets to 1200px (widths smaller than 1200px)--*/

@media only screen and (max-width: 1200px) {
}

/*--Small tablets to big tablets: from 768px to 1023px--*/

@media only screen and (max-width: 1023px) {
  .compare-question {
    width: 33%;
  }
  .compare-answer {
    width: 30%;
  }
  .compare-profiles-row > * {
    padding: 0 4rem 4rem 4rem;
  }
}

/*--Small Phones to small tablets: from 481px to 767px--*/

@media only screen and (max-width: 767px) {
  .compare-profiles-row > * {
    padding: 0 3rem 4rem 3rem;
  }
  .compare-answer {
    width: 35%;
  }

  .compare-collapsable-button,
  .compare-collapsable-button:hover,
  .compare-collapsable-button:not(.collapsed) {
    font-size: 1.45rem !important;
  }

  .compare-question {
    width: 25%;
  }
  .compare-answer {
    width: 38%;
  }
}

/*--Small Phones: from 0px to 480px--*/

@media only screen and (max-width: 480px) {
  .compare-collapsable-button,
  .compare-collapsable-button:hover,
  .compare-collapsable-button:not(.collapsed) {
    font-size: 1.25rem !important;
  }

  #left-candidate,
  #right-candidate {
    padding: 1rem 2rem;
  }
}

/* is this even necessay?*/

@media only screen and (max-width: 365px) {
  .compare-collapsable-button,
  .compare-collapsable-button:hover,
  .compare-collapsable-button:not(.collapsed) {
    overflow-wrap: anywhere;
  }
}