/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */

/*
 I took the relevant portion of materialize.css, as it was applying
 unintended styles all over the page and we only need their carousel:
 I also tweaked it to fit our designs
 */

.carousel {
  height: 332px;
  max-height: 332px;
  min-height: 332px;
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.carousel.takeover {
  background: white;
  min-height: 100vh;
  position: fixed;
  z-index: 101;
}

.carousel.carousel-slider {
  top: 0;
  left: 0;
}

.carousel.center {
  text-align: center;
}
/*
.carousel.carousel-slider .carousel-fixed-item {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 1;
} */

.carousel.carousel-slider .carousel-fixed-item.with-indicators {
  bottom: 68px;
}

.carousel.carousel-slider .carousel-item {
  align-items: center;
  display: flex;
  height: 300px;
  left: -16px;
  position: absolute;
  top: 0;
  width: 100vw;
}

.carousel.carousel-slider.takeover .carousel-item {
  left: 0;
}

.carousel.carousel-slider.takeover a.carousel-item.active {
  height: 100%;
}

.carousel.carousel-slider .carousel-item > div {
  height: 270px;
  width: 100%;
}

.carousel.carousel-slider.takeover .carousel-item > div {
  height: 77%;
}

.carousel .carousel-item {
  visibility: hidden;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel .carousel-item img {
  height: 100%;
}

.carousel .indicators {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: -24px;
  margin: 0;
}

.carousel.takeover .indicators {
  bottom: 10px;
}

.carousel .indicators .indicator-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 24px 4px;
  background-color: #d8d8d8;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border-radius: 50%;
}

.carousel .indicators .indicator-item.active {
  background-color: #424242;
}

.carousel.scrolling .carousel-item .materialboxed,
.carousel .carousel-item:not(.active) .materialboxed {
  pointer-events: none;
}

.material-icons.close-takeover {
  background-color: white;
  color: black;
  display: none;
  font-family: 'Material Icons';
  font-size: 24px;
  font-style: normal;
  line-height: 24px;
  position: fixed;
  right: 20px;
  top: 16px;
  z-index: 102;
}

.carousel.takeover + .material-icons.close-takeover {
  display: block;
}