.video-container {
     position: relative;
}
 .video-container {
     overflow-x: hidden;
     overflow-y: hidden;
}
 ul.video-framer {
     overflow-x: hidden;
     overflow-y: hidden;
     position: relative;
     z-index: 9;
     background: #0A1F2D;
}
 ul.video-framer li {
     width: 100%;
     list-style: none;
     float: left;
     position: relative;
}
 li.intro-slide, li.video_iframe{
    position: absolute;
}
 li.video_iframe{
    z-index:9;
}
 ul.video-framer li.intro-slide{
     z-index: 99999;
     background: rgb(10, 31, 45) none repeat scroll 0% 0%;
     z-index: 9999;
position: absolute;
height: 100% !important;

}
 ul.video-framer li div.slider-vid {
     width: 90%;
     margin: 0 auto;
     position:relative;
     -webkit-transition: all 400ms ease;
     -moz-transition: all 400ms ease;
     -ms-transition: all 400ms ease;
     -o-transition: all 400ms ease;
     transition: all 400ms ease;
     transform:scale(1,1);
     -webkit-transform:scale(1,1);
     -ms-transform:scale(1,1);
     -o-transform:scale(1,1);
}
 ul.video-framer li.active div.slider-vid {
     -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
     -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
     transition: all 200ms ease;
     transform:scale(1.9,1.9);
}
 ul.video-framer li.active div.description a{
    color: #57a9ff;
     display: block;
}
 .slider-controls {
     position: absolute;
     z-index: 99999;
     bottom: 10%;
     right: 10%;
     opacity: 0;
}
 .slider-controls ul {
     width: auto;
}
 .slider-controls ul li {
     list-style: none;
     display: inline-block;
}
 .slider-controls ul li.prev-control a, .slider-controls ul li.next-control a {
     text-decoration: none;
     background: url(../images/arrow-left.svg) no-repeat 0 0;
     width: 40px;
     height: 40px;
     background-size: 100%;
     text-indent: -99999em;
     display: inline-block;
     vertical-align: top;
     -webkit-transition: all 400ms ease;
     -moz-transition: all 400ms ease;
     -ms-transition: all 400ms ease;
     -o-transition: all 400ms ease;
     transition: all 400ms ease;
}
 .slider-controls ul li.next-control a {
     background: url(../images/arrow-right.svg) no-repeat 0 0;
     background-size: 100%;
}
 .slider-controls ul li:hover a{
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1);
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
}
 li.intro-slide{
     text-align: center;
     color: #fff;
}
 li.intro-slide h2 {
     margin: 20% auto 0 auto;
}
 li.intro-slide p {
     width: 50%;
     margin: 0 auto;
}
 li.end-slide{
    text-align: center;
    height: 100% !important;
    background: rgba(10, 31, 45, 1);
}
 li.end-slide p {
     color: #fff;
     width: 60%;
     text-align: center;
     margin: 18% auto 0 auto;
     font-size: 16px;
     line-height: 24px
}
 li.end-slide span{
    margin: 20px auto;
}
 li.intro-slide a {
     margin: 20px auto;
     display: table;
}
 ul.video-framer li .description{
     position: absolute;
     width: 210px;
     opacity:0;
}
 ul.video-framer li.video-slider1 .description {
     top: 25%;
     right: 10%;
}
 ul.video-framer li.video-slider2 .description {
     top: 35%;
     right: 30%;
}
 ul.video-framer li.video-slider3 .description {
     right: 15%;
    top: 15%;
}
 ul.video-framer li.video-slider4 .description {
     right: 20%;
    top: 25%;
}
 ul.video-framer li.video-slider5 .description {
     right: 30%;
    top: 10%;
}
 ul.video-framer li.video-slider6 .description {
     right: 15%;
    top: 25%;
}
 ul.video-framer li.video-slider7 .description {
     right: 30%;
    top: 5%;
}
 ul.video-framer li.video-slider8 .description {
     right: 35%;
     top: 15%;
}
 ul.video-framer li.video-slider9 .description {
     right: 15%;
     top: 25%;
}
 ul.video-framer li.video-slider10 .description {
     right: 10%;
     top: 20%;
}
 ul.video-framer li .description.active{
     opacity:1;
     -webkit-transition: all 300ms 2500ms ease;
     -moz-transition: all 300ms 2500ms ease;
     -ms-transition: all 300ms 2500ms ease;
     -o-transition: all 300ms 2500ms ease;
     transition: all 300ms 2500ms ease;
}
 ul.video-framer li .description p{
     width: 200px;
     background: rgba(0,0,0, 0.5);
     font-size: 12px;
     line-height: 20px;
     padding: 10px 15px;
     height: 134px;
     overflow-x: scroll;
     color: #fff;
     border-radius: 10px;
}
 ul.video-framer li .description:before{
     content: "";
     width: 0px;
     height: 0px;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-right: 10px solid rgba(0,0,0, 0.5);
     position: absolute;
     top: 15px;
     left: -10px;
}
 ul.video-framer li .description::before{
    /*content: "";
     position: absolute;
     top: 100%;
     left: 20px;
     width: 0;
     border-top: 20px solid black;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
    */
}
 ul.video-framer li .description.active {
    /*right: 250px;
     -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
     -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
     transition: all 200ms ease;
    */
}
 .blur {
     animation: blur 500ms;
}
 @keyframes blur {
     0% {
         -webkit-filter: blur(0px);
    }
     50% {
         -webkit-filter: blur(5px);
    }
     100% {
         -webkit-filter: blur(0px);
    }
}
 .lds-ellipsis {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
     left: 0;
     right: 0;
     margin: 0 auto;
     top: 2%;
     display:none;
}
 .lds-ellipsis div {
     position: absolute;
     top: 33px;
     width: 13px;
     height: 13px;
     border-radius: 50%;
     background: #fff;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
 .lds-ellipsis div:nth-child(1) {
     left: 8px;
     animation: lds-ellipsis1 0.6s infinite;
}
 .lds-ellipsis div:nth-child(2) {
     left: 8px;
     animation: lds-ellipsis2 0.6s infinite;
}
 .lds-ellipsis div:nth-child(3) {
     left: 32px;
     animation: lds-ellipsis2 0.6s infinite;
}
 .lds-ellipsis div:nth-child(4) {
     left: 56px;
     animation: lds-ellipsis3 0.6s infinite;
}
 @keyframes lds-ellipsis1 {
     0% {
         transform: scale(0);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes lds-ellipsis3 {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(0);
    }
}
 @keyframes lds-ellipsis2 {
     0% {
         transform: translate(0, 0);
    }
     100% {
         transform: translate(24px, 0);
    }
}
 @media only screen and (max-width: 1280px) {
     ul.video-framer li.video-slider1 .description {
         top: 30%;
         right: 5%;
    }
     ul.video-framer li.video-slider2 .description {
         top: 40%;
         right: 25%;
    }
     ul.video-framer li.video-slider3 .description {
         right: 15%;
        top: 15%;
    }
     ul.video-framer li.video-slider4 .description {
         right: 20%;
        top: 25%;
    }
     ul.video-framer li.video-slider5 .description {
         right: 25%;
        top: 10%;
    }
     ul.video-framer li.video-slider6 .description {
         right: 15%;
        top: 25%;
    }
     ul.video-framer li.video-slider7 .description {
         right: 25%;
        top: 5%;
    }
     ul.video-framer li.video-slider8 .description {
         right: 30%;
         top: 15%;
    }
     ul.video-framer li.video-slider9 .description {
         right: 15%;
         top: 25%;
    }
     ul.video-framer li.video-slider10 .description {
         right: 10%;
         top: 20%;
    }
}
 @media only screen and (max-width: 1030px) {
     ul.video-framer li.video-slider1 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider2 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider3 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider4 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider5 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider6 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider7 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider8 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider9 .description {
         top: 20%;
         right: 2%;
    }
     ul.video-framer li.video-slider10 .description {
         top: 20%;
         right: 2%;
    }
}
 @media only screen and (max-width: 860px) {
     ul.video-framer li .description {
         bottom: 25% !important;
         right: 2% !important;
         top: inherit !important;
    }
    ul.video-framer li .description p
    {
        font-size: 10px;
line-height: 16px;
    }
     ul.video-framer li .description::before{
         display: none !important;
    }
}