*, *:before, *:after {
  box-sizing: border-box;
}
.slider {
  height: 85vh;
  display: flex;
  background-color: #111;
  flex-direction: column;
  color: #f8f8f8;
  font-weight: 500;
  position: relative;
  background-color: rgba(0, 0, 0, 0.35);
  transition: background-color 1s;
  overflow: hidden;
}
@media (max-width: 760px) {
  .slider {
  height: 60vh;  
}
}
.slider__image {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;  
  background-size: cover;
  background-position: 50% 50%;
  z-index: -100;
  transition: transform 7s linear;
  object-fit: cover;
}
@media (max-width: 760px) {
  .slider__image {
  height: 60vh;  
}
}
.slider__image.zoomed {
	transform: scale(1.1);
	object-fit: cover;	
}
.slider__video {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;  
  background-size: cover;
  background-position: 50% 50%;
  z-index: -1;
  transition: transform 7s linear;
  object-fit: cover;
}
.slider__main {
  flex-grow: 1;
  display: flex;
}
.slider__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slider__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 48em) {
  .slider__right {
    max-width: 25%;
  }
}

.slider__title {
  display: inline-block;
  font-size: calc(1rem + 2.5vw);
  padding: 2vw;
  margin: 6vw;
  font-weight: 900;
  position: relative;
  transition: all 0.5s ease-in, color 0.125s linear, background-color 0.125s linear;
}

.slider__title:before {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom-width: 0;
  border-left-width: 0;
}
.slider__title:after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top-width: 0;
  border-right-width: 0;
}
.slider__title.animated:before {
  -webkit-animation: 1s 0.5s ease-in-out forwards borderDraw1;
          animation: 1s 0.5s ease-in-out forwards borderDraw1;
}
.slider__title.animated:after {
  -webkit-animation: 1s 0.5s ease-in-out forwards borderDraw2;
          animation: 1s 0.5s ease-in-out forwards borderDraw2;
}
.slider__caption {
	display: inline-block;
  width:  calc(100% - 30%);
  font-size: calc(0.8rem + 1.5vw);
  padding: 0;
	margin: 0vw;
  top: 70px;
  font-weight: 1;
  position: relative;
	line-height: 150%
}
.slider__caption2 {
	display: inline-block;
  width:  calc(100% - 30%);
  font-size: calc(1rem + 1.5vw);
  padding: 0;
	margin: 0vw;
  top: 100px;
  left: 140px;
  font-weight: 1;
  position: relative;
}

@-webkit-keyframes borderDraw1 {
  from {
    height: 0;
    width: 0;
  }
  37.5% {
    height: 0;
    width: 100%;
  }
  50% {
    height: 100%;
    width: 100%;
  }
  to {
    height: 100%;
    width: 100%;
  }
}

@keyframes borderDraw1 {
  from {
    height: 0;
    width: 0;
  }
  37.5% {
    height: 0;
    width: 100%;
  }
  50% {
    height: 100%;
    width: 100%;
  }
  to {
    height: 100%;
    width: 100%;
  }
}
@-webkit-keyframes borderDraw2 {
  from {
    height: 0;
    width: 0;
  }
  50% {
    height: 0;
    width: 0;
  }
  72.5% {
    height: 0;
    width: 100%;
  }
  to {
    height: 100%;
    width: 100%;
  }
}
@keyframes borderDraw2 {
  from {
    height: 0;
    width: 0;
  }
  50% {
    height: 0;
    width: 0;
  }
  72.5% {
    height: 0;
    width: 100%;
  }
  to {
    height: 100%;
    width: 100%;
  }
}
.slider__nav > ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}
.slider__nav > ul > li {
  min-height: 3rem;
  line-height: 3rem;
  margin: 1rem;
  position: relative;
  color: #888;
  cursor: pointer;
  text-align: right;
  transition: all 0.25s;
}
.slider__nav > ul > li:hover, .slider__nav > ul > li.active {
  color: #fefefe;
}
@media (min-width: 48em) {
  .slider__nav > ul > li {
    min-height: 4rem;
    line-height: 4rem;
    padding-right: 8rem;
    margin-right: 2rem;
  }
}
.slider__nav > ul > li:after, .slider__nav > ul > li:before {
  content: "";
  position: absolute;
  display: block;
}
.slider__nav > ul > li:after {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.2rem solid;
  transition: all 0.25s;
  transition-property: border-radius, border-width, width, right;
}
.slider__nav > ul > li:before {
  right: 2rem;
  top: 50%;
  width: 5rem;
  height: 0.1rem;
  border-top: 0.1rem solid;
  display: none;
}
@media (min-width: 48em) {
  .slider__nav > ul > li:before {
    display: block;
  }
}
.slider__nav > ul > li.active:after {
  border-radius: 0;
  border-width: 0.1rem;
  width: 0;
  right: 0.5rem;
}
.slider__nav > ul > li > span {
  line-height: 1;
  display: none;
}
@media (min-width: 48em) {
  .slider__nav > ul > li > span {
    display: inline-block;
  }
}
.loading {
  background-color: black;
}
.loading .slider__title .slider__caption {
  opacity: 0;
  transform: translateY(5vh);
}