.overall-container.mycont {
    width: 1124px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border: 10px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.left-container.mycont {
    width: 22.644927536%;
    float: left;
}

.right-container.mycont {
    width: 77.355072463%;
    float: left;
}

.left-container ul {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.left-container ul li {
    width: 100%;
    float: left;
    list-style: none;
    /* height: auto; */
    position: relative;
    overflow: hidden;
    max-height: 105px;
}



.left-container ul li a {
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    max-height: 105px;
}

.list-header {
    background-color: #3080BB;
    color: #fff;
    padding: 19.7px 17px;
    /* font-family: "PF Din Text"; */
    font-weight: normal;
    font-size: 14px;
}

.left-container ul li a {
    cursor: pointer;
}


a.chapter_selected:before {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.video-btn-container{
display:none;
}
.sel-prd .video-btn-container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: 
    -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.button-one, .button-two {
    width: 62%;
    float: left;
    text-align: center;
    opacity:0;
    padding: 8.5px 0px;
    margin: 5px 0px;
}
.sel-prd .video-btn-container .button-one,.sel-prd .video-btn-container .button-two{

}
.button-one a,.button-two a {
    width: 100%;
    display: block;
    color: #fff;
}
.button-one {
    background-color:  rgb(71, 159, 149);
    box-shadow: 2px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    font-size: 11px;
    margin-left: 4px;
    order:2;
}
.button-two{
	position: relative;
	font-size: 11px;
	background:#3080bb;
	box-shadow: -2px 2px rgba(0, 0, 0, 0.5);
	text-align: left;
	margin-left: -4px;
}
.button-one a {
    color: #d2d2d2;
	text-indent:27px;
}
.button-two span {
	color: #d2d2d2;
    padding-left: 15px;
}
.button-one:hover a,.button-two:hover span {
    color: #fff;
}
.button-one:hover:before,.button-two:hover:before{
	filter: brightness(1);
    -webkit-filter: brightness(1);
}
.button-one:before {
    width: 34px;
    height: 24px;
    content: "";
    position: absolute;
    top: 16%;
    left: -4px;
    background: url(../../../images/player/product_view.png)no-repeat center center rgb(1, 199, 248);
    box-shadow: -2px 2px rgba(0, 0, 0, 0.5);
    filter: brightness(0.85);
    -webkit-filter: brightness(0.85);
}
.button-one:after {
    content: "";
    position: absolute;
    top: 2px;
    left: -4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 3px 4px;
    border-color: transparent transparent rgb(0, 130, 162) transparent;
}

.button-two:before {
    width: 34px;
    height: 24px;
    position: absolute;
    top: 16%;
    right: -4px;
    background: url(../../../images/player/video_view.png)no-repeat center center #f88c01;
    content: "";
    box-shadow: 2px 2px rgba(0, 0, 0, 0.5);
		filter: brightness(0.85);
    -webkit-filter: brightness(0.85);
}

.button-two:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 2px;
    right: -4px;
    border-style: solid;
    border-width: 3px 0 0 4px;
    border-color: transparent transparent transparent rgb(155, 87, 0);
}
.btn-animate{
  animation: left_to_center ease-in-out 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: left_to_center ease-in-out 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: left_to_center ease-in-out 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: left_to_center ease-in-out 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: left_to_center ease-in-out 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

.btn-animate-sec{
  animation: right_to_center ease-in-out 0.5s 0.25s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: right_to_center ease-in-out 0.5s 0.25s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: right_to_center ease-in-out 0.5s 0.25s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: right_to_center ease-in-out 0.5s 0.25s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: right_to_center ease-in-out 0.5s 0.25s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}


@keyframes left_to_center{
  0% {
    opacity:0;
    transform:  translate(-100%,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes left_to_center{
  0% {
    opacity:0;
    -moz-transform:  translate(-100%,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes left_to_center {
  0% {
    opacity:0;
    -webkit-transform:  translate(-100%,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes left_to_center {
  0% {
    opacity:0;
    -o-transform:  translate(-100%,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes left_to_center {
  0% {
    opacity:0;
    -ms-transform:  translate(-100%,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}
@keyframes right_to_center{
  0% {
    opacity:0;
    transform:  translate(100%,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes right_to_center{
  0% {
    opacity:0;
    -moz-transform:  translate(100%,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes right_to_center {
  0% {
    opacity:0;
    -webkit-transform:  translate(100%,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes right_to_center {
  0% {
    opacity:0;
    -o-transform:  translate(100%,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes right_to_center {
  0% {
    opacity:0;
    -ms-transform:  translate(100%,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}