body {
  margin: 30px;
  padding: 0;
  background: #ddd;
  font-family: Arial, Helvetica, sans-serif;
}

.title {
  width: 100%;
  max-width: 854px;
  margin: 0 auto;
}

.caption {
  width: 100%;
  max-width: 854px;
  margin: 0 auto;
  padding: 20px 0;
}

.vid-main-wrapper {
  width: 100%;
  max-width: 1100px;
  min-width: 440px;
  background: #fff;
  margin: 0 auto;
}


/*  VIDEO PLAYER CONTAINER
############################### */
.vid-container {
  position: relative;
  padding-bottom: 52%;
  padding-top: 30px;
  height: 0;
  width: 100%;
  float: left;
  background-color: rgb(200, 179, 44);
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
  position: absolute;
  top: 0;
  right:50px;
  width: 30%; /*100%*/
  min-height: 360px;
  align-items: center !important;
  
}


/*  VIDEOS PLAYLIST 
############################### */
.vid-list-container {
  width: 30%;
  height: 360px;
  overflow: hidden;
  float: right;
}

.vid-list-container:hover,
.vid-list-container:focus {
  overflow-y: auto;
}

ol#vid-list {
  margin: 0;
  padding: 0;
  background: #222;
}

ol#vid-list li {
  list-style: none;
}

ol#vid-list li a {
  text-decoration: none;
  background-color: #222;
  height: 55px;
  display: block;
  padding: 10px;
}

ol#vid-list li a:hover {
  background-color: #666666
}

.vid-thumb {
  float: left;
  margin-right: 8px;
}

.active-vid {
  background: #3A3A3A;
}

#vid-list .desc {
  color: #CACACA;
  font-size: 13px;
  margin-top: 5px;
}


@media (max-width: 624px) {
  body {
    margin: 15px;
  }

  .caption {
    margin-top: 40px;
  }

  .vid-list-container {
    padding-bottom: 20px;
  }

}