/***************************
 *	Variables
 **************************/
/***************************
 *	Functions
 **************************/
/***************************
 *	Project Main Styles
 **************************/
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  background-color: #e2e2e2;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

/***************************
 *	Application Main Styles
 **************************/
.slider {
  -webkit-animation: clipPathAnimation 0.159s;
          animation: clipPathAnimation 0.159s;
}
.caja4 {
  background: rgba(130,130,130,0.7);
  border-radius: 10px;
  margin: 0.65em 0;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  text-align: center;
  color:white;
  text-shadow: 2px 1px black;
}
.slider__slides {
  position: relative;
  z-index: 0;
}
.slider__slides .slider__slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.slider__slides .slider__slide:nth-child(1) {
  background-image: url("images/1.jpg");
}
.slider__slides .slider__slide:nth-child(2) {
  background-image: url("images/2.jpg");
}
.slider__slides .slider__slide:nth-child(3) {
  background-image: url("images/3.jpg");
}
.slider__slides .slider__slide:nth-child(4) {
  background-image: url("images/4.jpg");
}
.slider__slides .slider__slide:nth-child(5) {
  background-image: url("images/5.jpg");
}
.slider__slides .js-slide--active {
  opacity: 1;
  z-index: 10;
  transform: scale(0.97);
}
.slider__controls {
  z-index: 10;
}
.slider__controls .slider__control {
  position: absolute;
  top: 50%;
  width: 5em;
  height: 5em;
  margin-top: -2.5em;
  background-color: #e2e2e2;
  border-radius: 50%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  opacity: 0.9;
  cursor: pointer;
}
.slider__controls .slider__control:hover {
  background-color: #282828;
}
.slider__controls .slider__control:nth-child(1) {
  left: 3vw;
}
.slider__controls .slider__control:nth-child(1) .slider__control-line {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 3%;
  height: 1em;
  transform-origin: 50% 0;
  transform: rotate(-45deg);
}
.slider__controls .slider__control:nth-child(1) .slider__control-line:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #282828;
  transition: background-color undefined;
}
.slider__controls .slider__control:nth-child(1) .slider__control-line:nth-child(2) {
  transform: translateY(1px) rotate(-135deg);
}
.slider__controls .slider__control:nth-child(1):hover .slider__control-line {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 3%;
  height: 1em;
  transform-origin: 50% 0;
  transform: rotate(-45deg);
}
.slider__controls .slider__control:nth-child(1):hover .slider__control-line:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e2e2e2;
  transition: background-color undefined;
}
.slider__controls .slider__control:nth-child(1):hover .slider__control-line:nth-child(2) {
  transform: translateY(1px) rotate(-135deg);
}
.slider__controls .slider__control:nth-child(2) {
  right: 3vw;
}
.slider__controls .slider__control:nth-child(2) .slider__control-line {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 3%;
  height: 1em;
  transform-origin: 50% 0;
  transform: rotate(45deg);
}
.slider__controls .slider__control:nth-child(2) .slider__control-line:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #282828;
  transition: background-color 1.3s;
}
.slider__controls .slider__control:nth-child(2) .slider__control-line:nth-child(2) {
  transform: translateY(1px) rotate(135deg);
}
.slider__controls .slider__control:nth-child(2):hover .slider__control-line {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 3%;
  height: 1em;
  transform-origin: 50% 0;
  transform: rotate(45deg);
}
.slider__controls .slider__control:nth-child(2):hover .slider__control-line:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e2e2e2;
  transition: background-color 1.3s;
}
.slider__controls .slider__control:nth-child(2):hover .slider__control-line:nth-child(2) {
  transform: translateY(1px) rotate(135deg);
}
.slider__controls .slider__control.js-control--active:nth-child(1), .slider__controls .slider__control.js-control--active:nth-child(2) {
  transform-origin: 50% 50%;
  -webkit-animation: controlLeftActiveAnimation 1.299s;
          animation: controlLeftActiveAnimation 1.299s;
}

/**
 *	Animations
 */
@-webkit-keyframes clipPathAnimation {
  0% {
    -webkit-clip-path: ellipse(0 0 at 50% 50%);
            clip-path: ellipse(0 0 at 50% 50%);
  }
  100% {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
            clip-path: ellipse(100% 100% at 50% 50%);
  }
}
@keyframes clipPathAnimation {
  0% {
    -webkit-clip-path: ellipse(0 0 at 50% 50%);
            clip-path: ellipse(0 0 at 50% 50%);
  }
  100% {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
            clip-path: ellipse(100% 100% at 50% 50%);
  }
}
@-webkit-keyframes controlLeftActiveAnimation {
  0% {
    width: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(1080deg) scale(1);
  }
}
@keyframes controlLeftActiveAnimation {
  0% {
    width: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(1080deg) scale(1);
  }
}
@-webkit-keyframes controlRightActiveAnimation {
  0% {
    width: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(-1080deg) scale(1);
  }
}
@keyframes controlRightActiveAnimation {
  0% {
    width: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(-1080deg) scale(1);
  }
}