.play-button {
  background: rgba(23, 35, 34, .75);
  border-radius: .5em;
  width: 65px;
  height: 40px;
  position: absolute;
  left: calc(50% - 32.5px);
  bottom: calc(50% - 20px);
  fill: white;
  cursor: pointer;
  transition: 0.2s all;
  padding: 10px 22.5px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  z-index: 2;
}

.play-button svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.play-button:hover {
  background-color: #007BC6;
}

.tingle-modal {
  z-index: 1001;
}

.tingle-modal-box {
  background: transparent;
}

.tingle-modal--visible .tingle-modal-box {
  max-width: 97vw;
  max-height: 97vh;
  width: 100%;
}

.tingle-modal-box__content {
  padding: 0;
}

.homepage-video {
  position: relative;
  padding-bottom: 56.3%;
  width: 100%;
}

.tingle-modal iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  max-height: calc(97vh - 6rem);
}

.tingle-modal__closeIcon {
    width: 5rem;
    height: 5rem;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.tingle-modal__close:hover .tingle-modal__closeIcon {
  background: transparent;
}

.videoWrapper {
  background-image: url('https://www.kla.com/images/2018/day1/kla-video-2.jpg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn:focus,
*:focus {
  outline: none !important
}

@media only screen and (min-width: 1024px) {
  .videoWrapper {
    padding-bottom: 0;
    height: 60rem
  }
}

@media only screen and (min-width: 1480px) {
  .videoWrapper {
    height: 80rem
  }
}


/* Tingle Modal Styles */
@media (max-width: 540px) {
  .tingle-modal-box {
    height: 100%;
    max-width: 100%;
  }

  .tingle-modal--visible .tingle-modal-box {
    width: auto;
    max-width: 100%;
  }

  .tingle-modal-box__content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .tingle-modal__close {
    background-color: #007BC6;
    display: flex;
    justify-content: center;
    outline: none;
  }

  .tingle-modal__closeIcon {
    background: transparent;
  }


}
