.mt280{
    margin:12.813em 0 0 0 ;
}
#video_main{
    position: absolute;
    z-index: 7; top:0;
}
#slidervideo {
    width:100%;
    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}

#maskvideo{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    z-index: 6;
    top:0;
}

#slidervideo .fs-icon {
    top:10px;
    right:6px;
    width:60px;
    height:26px;
    background: rgba(0,0,0,0.3);
    z-index:2;
    color:white;
    text-align:center;
    font:bold 11px/26px arial;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:2px;
    opacity:0;
    -webkit-transition:opacity 0.8s;
    transition:opacity 0.8s;
}

#slidervideo .slider-inner:hover .fs-icon,
#slidervideo.fullscreen .fs-icon {
    opacity: 1;
}

#slidervideo .fs-icon::before {      
    content:"EXPAND";
    display:block;
}

#slidervideo.fullscreen .fs-icon::before {
    content:"CLOSE";
}

#slidervideo .slider-inner {
    width:100%;
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#slidervideo.fullscreen .slider-inner {
    width:100%;
    max-width:950px;
}

#slidervideo ul {
    /*overflow:hidden;*/
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
}

#slidervideo li {
    
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    font-size:12px;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}

#slidervideo li.ns-show {
    opacity:1;
}


/* --------- slider image ------- */  
#slidervideo .ns-img {
    background-color:rgba(0,0,0,0.3);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*decorate border*/
    box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);
    border-radius:4px;

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/
#slidervideo .caption {
    padding:20px 40px;
    margin:auto;
    left:0;right:0;
    top:auto;bottom:8%;
    width:50%;
    text-align:center;
    font-family:sans-serif;
    font-size:2.2em;
    color:#fff;
    background:rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:4px;
    position:absolute;
    box-sizing:border-box;
    opacity:0;
    -webkit-transition:opacity 1s ease-in;
    transition:opacity 1s ease-in;
}
#slidervideo li[class*='-s'] .caption {
    opacity:1;
}


/* ---------If there are videos ------- */ 
#slidervideo .video, .video-playbutton-layer 
{
    top:0; left:0; border:0;
    width: 100%;height: 100%;
    text-align: center;
    background: black;
    position: absolute;    
}

/* And if you have added the HTML: <div class="video-playbutton-layer"></div> */
.video-playbutton-layer {
    background: transparent url(video-btn.png) no-repeat center center;
    cursor:pointer;
}

/* And if you have YouTube or Vimeo */
#slidervideo div.stopVideoIcon 
{   display: none;
    position:absolute;
    width:30px;height:30px;
    top:0;right:0px;
    margin:0 0 6px 6px;
    background:rgba(0,0,0,0.7);
    border-bottom-left-radius:4px;
    cursor:pointer;
}
#slidervideo div.stopVideoIcon::before {
    content:"+";
    color:white;
    font:bold 30px/30px arial;
    -webkit-transform:rotate(45deg);
    transform: rotate(45deg);
    display:block;
}


/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */   
#slidervideo-pause-play { display:none;} 

#slidervideo-prev, #slidervideo-next
{
    position: absolute;
    display:none;
    width:60px;
    height:100px;
    line-height:100px;
    top: 50%;
    margin:0;
    margin-top:-65px;/*pager's height should also be counted*/
    background-color:none;
    background-color:#ccc\9;/*IE8 hack*/
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    white-space:nowrap;
    -webkit-user-select: none;
    user-select:none;
    border-radius:3px; 
    z-index:10;
    opacity:0.2;
    cursor:pointer;
    font-family:sans-serif;
    font-size:11px;
    cursor:pointer;
    -webkit-transition:all 0.7s;
    transition:all 0.7s;
    -webkit-transform:scale(1,1.3);
    transform:scale(1,1.3);
    /*border:1px solid white;*/
}
#slidervideo-prev:hover, #slidervideo-next:hover {
    opacity:1;
    /*background-color:rgba(0,0,0,0.4);*/
}

#slidervideo-prev {
    left: -70px;
}

#slidervideo-next {
    right: -70px;
}

/*pagination within the prev/next buttons*/
#slidervideo-prev div {opacity:0;margin-left:30px;transition:opacity 0.7s;}
#slidervideo-next div {opacity:0;float:right;margin-right:30px;transition:opacity 0.7s;}
#slidervideo-prev:hover div, #slidervideo-next:hover div{opacity:1;}

/* arrows */
#slidervideo-prev::before, #slidervideo-next::before {
    position: absolute;
    top: 25px;
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 3px solid #ccc;
    border-top: 3px solid #ccc;
}

#slidervideo-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    backface-visibility:hidden;
    right:-16px;
}

#slidervideo-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    backface-visibility:hidden;
    left:-16px;
}



/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
/* #slidervideo-pager { display:none;}*/
#slidervideo-pager
{
    padding-top:0; /* set the distance away from the slider */
    margin:0 auto; /* center align */
    text-align:center;
    display:none;
    font-size:0;
}
         
#slidervideo-pager a 
{
    display:inline-block;
    width: 10px;
    height: 10px;
    background-color: #888;
    font-size:0; /* Non-zero will show the index num */
    margin:2px 6px;
    cursor:pointer;
    border-radius:10px;
    box-shadow:inset 0 1px 3px #666666;
}

#slidervideo-pager a:hover 
{
    opacity:0.6;
}
#slidervideo-pager a.active 
{
    background-color:#ccc;
    box-shadow:0 1px 1px rgba(0,0,0,.5);
}
#slidervideo-pager, #slidervideo-prev, #slidervideo-next, #slidervideo-pause-play
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#thumb {
    text-align: center;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

#thumb > span:first-child { margin-left: 0; }
#thumb > span {
   width: 10.91%;
   display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
    position: relative;
    cursor: pointer;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
  background-position: center center;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: contain;
  height: auto;
  min-height: 105px;
  
}
#thumb > span:hover{
     -moz-box-shadow:    inset 0 0 0 4px #4f60d2;
   -webkit-box-shadow: inset 0 0 0 4px #4f60d2;
   box-shadow:         inset 0 0 0 4px #4f60d2;
   
   padding:10px;
}


#thumb img {
    width: 100%;
    cursor: pointer;
    display: block;
}

#thumb .playvideo {
    position: absolute;
    background: transparent url(playvideo.png) no-repeat center center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.8;
    filter: alpha(opacity=40);
    text-align: center;
    color: white;
    font-size: 0.7em;
}

@media all and (min-width: 1140px)  {
    #thumb{
        width: 1140px;
    }
   
}
#thumb span .tooltip {
    bottom: 100%;
  color: #fff;
  display: block;
  left: 0;
  margin-bottom: 15px;
  opacity: 0;
  padding: 5px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
#thumb span .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
#thumb span .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
#thumb span:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}
.mask{
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background: #000;
    -moz-box-shadow:    inset 0 0 20px #000000;
   -webkit-box-shadow: inset 0 0 20px #000000;
   box-shadow:         inset 0 0 20px #000000;
   padding: 10px;
   position: absolute;
   left: 0;
   top:0;
}
#thumb span:hover .mask{
  opacity: 0;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}
/* IE can just show/hide with no transition */
#thumb span .tooltip {
  display: none;
}

#thumb span:hover .tooltip {
  display: block;
}
/*------ Responsive settings ------*/
@media only screen and (max-width:950px){
    
    #slidervideo-prev {
        left: -12px;
    }

    #slidervideo-next {
        right: -12px;
    }
}

@media only screen and (max-width:600px){
      
    #slidervideo-prev, #slidervideo-next {
        display:block;
    }
     #thumb span .tooltip, #thumb span:hover .tooltip {
        display: none;
    }
    #thumb > span{
        width: 32.26%;
    }
     #thumb > span:nth-of-type(4n),  #thumb > span:nth-of-type(7n){
         margin:0;
     }
     .mt280{
    margin:6.813em 0 0 0 ;
}
}