/*
  Box
  Timeline
  Google Maps
  jQuery UI Tabs
  Slick
 */

/* Box */

.box {
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.box :first-child {
  margin-top: 0;
}

.box :last-child {
  margin-bottom: 0;
}

.box--red {
  background-color: red;
}

.box--green {
  background-color: green;
}

.box--blue {
  background-color: blue;
}

/* Timeline */

.timeline {
  padding-bottom: 10%;
  padding-top: 10%;
  position: relative;
}

.timeline::after {
  background-color: #222;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 0.25rem;
}

@media (min-width: 40em) {

  .timeline::after {
    left: 50%;
  }

}

.timeline__events {
  list-style: none;
  margin: -5%;
  padding: 0;
}

.timeline__events li {
  position: relative;
  margin: 5%;
}

.timeline__events li::before,
.timeline__events li::after {
  content: ' ';
  display: table;
}

.timeline__events li::after {
  clear: both;
}

.timeline__icon {
  background-color: #fff;
  border-radius: 50%;
  left: 0;
  padding: 0.25rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

@media (min-width: 40em) {

  .timeline__icon {
    left: 50%;
  }

}

.timeline__icon img {
  border-radius: 50%;
}

.timeline__event {
  border: 1px solid #222;
  float: left;
  margin-left: 10%;
  padding: 5%;
  position: relative;
}

@media (min-width: 40em) {

  .timeline__event {
    margin-left: 0;
    width: 45%;
  }

}

.timeline__event::after {
  border-bottom: 0.5rem solid transparent;
  border-right: 0.5rem solid #222;
  border-top: 0.5rem solid transparent;
  content: '';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  z-index: 1;
}

.timeline__event :first-child {
  margin-top: 0;
}

.timeline__event :last-child {
  margin-bottom: 0;
}

@media (min-width: 40em) {

  .timeline__events li:nth-child(even) .timeline__event {
    float: right;
  }

  .timeline__events li:nth-child(odd) .timeline__event::after {
    left: 100%;
    border-bottom: 0.5rem solid transparent;
    border-left: 0.5rem solid #222;
    border-right: 0;
    border-top: 0.5rem solid transparent;
  }

}

/* Google Maps */

.google-maps {
  margin-bottom: 1.5rem;
  height: 600px;
}

/* jQuery UI Tabs */

.ui-tabs {
  margin-bottom: 1.5rem;
}

.ui-tabs-nav {
  color: #222;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

@media (min-width: 30em) {

  .ui-tabs-nav {
    flex-direction: row;
  }

}

.ui-tabs-anchor {
  color: inherit;
  display: block;
  font-weight: 700;
  padding: 0.5rem 1rem;
  position: relative;
  text-decoration: none;
}

.ui-tabs-active .ui-tabs-anchor {
  background-color: #fff;
  color: #dd0423;
}

.ui-tabs-panel {
  background-color: #fff;
  color: #222;
  padding: 1rem;
}

/* Slick */

.slick-slider {
  margin-bottom: 1.5rem;
}

.slick-slide img {
  margin-left: auto;
  margin-right: auto;
}

.slick-arrow {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 2rem;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  width: 10%;
  z-index: 1;
}

.slick-slider:hover .slick-arrow {
  opacity: 1;
}

.slick-prev {
  background-image: url('../Images/arrow-left.svg');
  left: 0;
}

.slick-next {
  background-image: url('../Images/arrow-right.svg');
  right: 0;
}

.slick-dots {
  bottom: 1rem;
  display: -ms-flexbox;
  display: flex;
  left: 50%;
  list-style: none;
  margin: -0.25rem;
  padding: 0;
  position: absolute;
  transform: translateX(-50%);
}

.slick-dots li {
  margin: 0.25rem;
}

.slick-dots .slick-active button {
  background-color: #fff;
}

.slick-dots button {
  background-color: #222;
  border-radius: 50%;
  height: 0.5rem;
  overflow: hidden;
  text-indent: -999px;
  width: 0.5rem;
}

.slick-slide figure {
  position: relative;
}

.slick-slide figcaption {
  background-color: rgba(0, 0, 0, 0.75);
  bottom: 0;
  left: 0;
  padding: 0.5rem;
  position: absolute;
  right: 0;
}