style.css

/* Variables can be overwritten from outside
------------------------------------*/
/* Map
------------------------------------*/
.casadistance__map {
  height: 350px; }
  @media (min-width: 992px) {
    .casadistance__map {
      height: 700px; } }

/* Base
------------------------------------*/
.casadistance--listactive .casadistance__result {
  display: flex; }

.casadistance--listactive .casadistance__result__list {
  display: block;
  opacity: 1; }

.casadistance--contentactive .casadistance__result {
  display: flex; }

.casadistance--contentactive .casadistance__result__content {
  display: block; }

/* For when in tabbable content it needs to be below each other
------------------------------------*/
.casawp-tabable-content .casadistance__result,
.casawp-tabable-content .casadistance__map {
  flex-basis: unset;
  flex: unset;
  max-width: initial;
  padding-top: 0;
  padding-bottom: 0; }

/* Menu
------------------------------------*/
.casadistance__menu {
  border: 1px solid #ddd;
  border-bottom-width: 0; }

.casadistance__menu__list {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid rgba(151, 151, 151, 0.34);
  display: flex;
  justify-content: flex-start;
  border: none; }

.casadistance__menu__item {
  width: 25%; }
  @media (min-width: 768px) {
    .casadistance__menu__item {
      width: initial; } }

.casadistance__menu__button {
  background: transparent;
  position: relative;
  display: inline-block;
  transition: 0.2s all;
  display: inline-block;
  width: 100%;
  height: 84px;
  float: left;
  border: 0; }
  @media (min-width: 768px) {
    .casadistance__menu__button {
      width: 84px;
      display: block; } }
  .casadistance__menu__button:hover, .casadistance__menu__button:focus, .casadistance__menu__button:active {
    background: #20c997;
    cursor: pointer;
    outline: none; }
    .casadistance__menu__button:hover svg path, .casadistance__menu__button:focus svg path, .casadistance__menu__button:active svg path {
      fill: #fff; }
    .casadistance__menu__button:hover span, .casadistance__menu__button:focus span, .casadistance__menu__button:active span {
      color: #fff; }

.casadistance__menu__buttoninner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none; }
  .casadistance__menu__buttoninner svg {
    margin-bottom: 5px; }
    .casadistance__menu__buttoninner svg path {
      transition: 0.2s all; }
  .casadistance__menu__buttoninner span {
    font-size: 11px;
    line-height: 11px;
    font-weight: 500;
    display: block;
    transition: 0.2s all;
    color: #20c997; }

.casadistance__menu__button.casadistance__menu__item--active {
  background: #20c997;
  cursor: pointer; }
  .casadistance__menu__button.casadistance__menu__item--active svg path {
    fill: #fff; }
  .casadistance__menu__button.casadistance__menu__item--active span {
    color: #fff; }

/* Result
---------------------------------------------*/
.casadistance__result {
  position: relative;
  display: none;
  height: 500px;
  border: 1px solid #ddd;
  border-top-width: 0; }
  @media (min-width: 992px) {
    .casadistance__result {
      height: 700px; } }

.casadistance__result__list {
  flex: 200px 1 1;
  opacity: 0;
  transition: 0.2s all ease;
  list-style: none;
  padding: 0px;
  overflow: hidden; }

.casadistance__result__list.casadistance__result__list--active {
  opacity: 1;
  overflow: auto; }

.casadistance__result__listitem {
  padding: 16px;
  cursor: pointer;
  display: flex; }
  .casadistance__result__listitem:hover {
    background-color: #d8d8d8; }
  .casadistance__result__listitem .fa-layers {
    flex: 40px 0 0; }

.casadistance__result__listitem__title {
  margin-bottom: 0;
  margin-top: 0;
  flex: 100% 1 1;
  font-size: 16px;
  line-height: 24px; }

.casadistance__result__listitem__subtitle {
  color: #666;
  font-size: 12px;
  display: block;
  line-height: 24px; }

.casadistance__result__listitem__number {
  color: #20c997;
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  margin-right: 16px;
  text-align: center;
  vertical-align: top;
  width: 32px; }

.casadistance__result__listitem.casadistance__result__listitem--active {
  background-color: black;
  color: white; }

.casadistance__result__content {
  position: relative;
  flex: 200px 1 1;
  opacity: 0;
  padding: 0px;
  padding-top: 45px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.2s all ease;
  background: white;
  display: block;
  overflow: hidden; }
  .casadistance__result__content > div {
    padding: 16px; }
    .casadistance__result__content > div div div {
      font-weight: 400;
      line-height: 36px; }
      .casadistance__result__content > div div div img {
        width: 25px;
        height: 25px;
        margin-right: 15px; }
  .casadistance__result__content h2 {
    margin-top: 0px; }
  .casadistance__result__content.casadistance__result__content--active {
    opacity: 1;
    overflow: auto;
    pointer-events: all; }

.casadistance__result__list__closebtn {
  padding: 0;
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 20px;
  background: transparent;
  color: #6c757d;
  border: none;
  -webkit-appearance: none;
  cursor: pointer; }
  .casadistance__result__list__closebtn:active, .casadistance__result__list__closebtn:hover {
    outline: none;
    color: #000000; }

.casadistance__timetable {
  padding-top: 16px; }

.casadistance__timetable__list {
  list-style: none;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
  display: block;
  margin: 0px;
  margin-top: 16px;
  padding-left: 0; }

.casadistance__timetable__listitem {
  display: flex;
  width: 100%; }
  .casadistance__timetable__listitem.casadistance__timetable__listitem--title {
    background: #f2f2f2; }
    .casadistance__timetable__listitem.casadistance__timetable__listitem--title .casadistance__timetable__listitem__to {
      flex: 1 1 150px; }

.casadistance__timetable__listitem__departure,
.casadistance__timetable__listitem__name,
.casadistance__timetable__listitem__to {
  padding: 16px;
  flex: 0 1 150px;
  float: left; }

.casadistance__timetable__listitem__to {
  flex: 1 1 auto; }