@import url("https://fonts.googleapis.com/css?family=Oswald:300,400");

.html,
body {
  width: 100%;
  font-size: 16px;
}
section {
  margin: 20px auto;
}
hr.short-primary {
  border-top: 3px solid #337ab7;
  width: 30px;
}
.panel-full-video {
  border: 3px solid #337ab7;
  .video-title {
    margin-top: 0px;
  }
}
h2 {
  font-family: "Oswald", sans-serif;
}
.video-thumbnail {
  position: relative;
  margin-bottom: 10px;
  .play_button {
    position: absolute;
    border: 1px solid #ffffff;
    opacity: 0.6;
    font-size: 1rem;
    top: 35%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    border-radius: 10px;
    z-index: 1;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -ms-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
  }
  .video_src {
    border-radius: 5px;
    border: 3px solid #337ab7;
    width: 100%;
    cursor: pointer;
  }
  &.active > .play_button,
  &:hover > .play_button {
    opacity: 1;
    z-index: 8;
    background-color: #337ab7;
    animation: pulse 1s ease-in-out 0.66s infinite;
  }
}
.loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}
#video_player_load span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #337ab7;
  margin: 35px 5px;
}
#video_player_load span:nth-child(1) {
  animation: bounce 1s ease-in-out infinite;
}
#video_player_load span:nth-child(2) {
  animation: bounce 1s ease-in-out 0.33s infinite;
}
#video_player_load span:nth-child(3) {
  animation: bounce 1s ease-in-out 0.66s infinite;
}
@keyframes bounce {
  0%,
  75%,
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  25% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}