.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: 1003px;
  max-width: 100%;
  background: #fff;
  margin: 0 auto;
}


/*  VIDEO PLAYER CONTAINER
############################### */
.vid-container {
  position: relative;
  padding-top: 30px; 
  height: 0; 
  width:70%;
  float:left;
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 360px;
}


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

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

ol#vid-list {
margin:0;
padding:0;
background: #222;
/*padding-bottom: 10px;*/
}

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

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;
height:55px;
}

ol#vid-list li :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;
}

#vid-list li{
  border-bottom: 1px solid #fff;
}

@media (max-width: 767px) {
  .vid-list-container{
    float: none;
    clear: both;
    /*padding-top: 51%;
    */
    width: 100%;
    overflow-y: auto;
    height: 200px;
  }

  .vid-container {
    height: 360px;
    width: 100%;
    float: none;
    clear: both;
  }

  .ol#vid-list{
    height: 100%;
    overflow-y: auto;
  }
}


@media (max-width: 624px) {
  .caption {
    margin-top: 40px;
  }
  .vid-list-container {
    padding-bottom: 20px;
  }
}