@charset "UTF-8";
.video-component {
  position: relative;
  background-color: #000;
  height: 250px;
  margin-bottom: 25px;
  background-position: center center;
  background-size: cover; }

@media (min-width: 768px) {
  .video-component {
    height: 350px; } }

@media (min-width: 1200px) {
  .video-component {
    margin-bottom: 0;
    height: 500px; } }

.video-text-wrapper {
  max-width: 100%;
  height: 100%;
  padding: 40px;
  display: block;
  z-index: 5; }

@media (min-width: 768px) {
  .video-text-wrapper {
    max-width: 30%;
    padding: 40px 10px 40px 40px; } }

@media (min-width: 1200px) {
  .video-text-wrapper {
    max-width: 50%;
    padding: 40px;
    position: relative; } }

.video-text-wrapper::after {
  display: none; }

@media (min-width: 768px) {
  .video-text-wrapper::after {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    border-top: 350px solid #d1d3d4;
    border-right: 195px solid transparent;
    border-left: 100px solid #d1d3d4; } }

@media (min-width: 1200px) {
  .video-text-wrapper::after {
    z-index: -1;
    border-top: 500px solid #d1d3d4;
    border-right: 195px solid transparent;
    border-left: 400px solid #d1d3d4; } }

.video-component.video-component-orange * {
  color: #fff !important; }

@media (min-width: 768px) {
  .video-component.video-component-orange .video-text-wrapper::after {
    content: " ";
    display: block;
    border-top: 350px solid #ff5a00;
    border-right: 195px solid transparent;
    border-left: 100px solid #ff5a00; } }

@media (min-width: 1200px) {
  .video-component.video-component-orange .video-text-wrapper::after {
    z-index: -1;
    border-top: 500px solid #ff5a00;
    border-left: 400px solid #ff5a00; } }

.video-play-btn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  left: 50%; }

@media (min-width: 992px) {
  .video-play-btn {
    height: 125px;
    width: 125px; } }

@media (min-width: 1200px) {
  .video-play-btn {
    left: auto;
    right: 20%; } }

.video-play-btn::after {
  content: "\00a0►";
  height: 100%;
  width: 100%;
  color: #fff;
  position: absolute;
  background-color: #ff5a00;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 35px; }

@media (min-width: 992px) {
  .video-play-btn::after {
    font-size: 75px; } }

.video-text-lg {
  display: none; }

@media (min-width: 1200px) {
  .video-text-lg {
    display: block; } }

.video-subtitle {
  display: none; }

@media (min-width: 768px) {
  .video-subtitle {
    display: block;
    position: absolute;
    z-index: 1000; } }

@media (min-width: 992px) {
  .video-subtitle {
    position: relative; } }

.video-title {
  margin: 30px 80px 30px 0; }

.video-desc {
  padding-right: 110px; }

.video-text {
  display: block; }

@media (min-width: 1200px) {
  .video-text {
    display: none; } }

#video-player .modal-dialog {
  max-width: 90%;
  margin: auto; }

#video-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none; }

#video-player .modal-body {
  width: 90vw;
  height: calc(90vw * 9/16);
  background-color: #fff;
  padding: 0; }

#video-player .modal-content {
  position: relative; }

#video-player .close {
  display: none;
  color: #fff;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px; }

@media (min-width: 992px) {
  #video-player .modal-dialog {
    max-width: 60%; }
  #video-player .modal-body {
    width: 60vw;
    height: calc(60vw * 9/16); } }

/*# sourceMappingURL=video-component.css.map */
