.video-catalog { position:relative }
.video-catalog.loading:after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(255,255,255,0.4) }

.video-nav { position:relative; margin-bottom:15px; font-size:13px; font-weight:bold; background:#484848 }
.video-nav ul { margin:0; list-style:none }
.video-nav .top-nav { float:left }
.video-nav .top-nav a { display:block; padding:10px 15px; height:20px; line-height:20px; color:#FFF; text-transform:uppercase; position:relative }
.video-nav .top-nav.active a { background:#333 }
.video-nav .top-nav.has-subnav > a:after { content:""; display:inline-block; vertical-align:middle; width:0; height:0; border-width:5px 5px 0; border-style:solid; border-color:#878787 transparent; position:relative; right:-0.3em }
.video-nav .top-nav.has-subnav.active > a:after { border-color:#FFF transparent  }
.video-nav .nav-pane { visibility:hidden; max-height:0; overflow:hidden; -webkit-transition:max-height 600ms }
.video-nav .nav-pane.active { visibility:visible; max-height:2000px }
.video-nav .nav-pane > div { padding:15px; border-top:solid 1px #5C5C5C }
.video-nav .nav-pane ul { float:left }
.video-nav .nav-pane a,
.video-nav .nav-pane span { display:block; min-width:120px; padding:0 10px; height:24px;  line-height:24px; white-space:nowrap; color:#D3D3D3; text-shadow:0 1px 1px #000 }
.video-nav .nav-pane li a:hover,
.video-nav .nav-pane li.active a { color:#FFF }
.video-nav .nav-pane li.active a { cursor:default } 
.video-nav .nav-pane li.active a:after { content:""; display:inline-block; vertical-align:middle; margin-left:0.3em; width:0; height:0; border:solid 0.3em transparent; border-left-color:#FFF }

.playlists ul { margin:0; list-style:none }
.playlists .item { padding:10px; margin-top:15px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.4); -moz-box-shadow:0 0 3px rgba(0,0,0,0.4); box-shadow:0 0 3px rgba(0,0,0,0.4) }
.playlists .item li { padding-bottom:5px; margin-bottom:5px; border-bottom:solid 1px #eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.playlists .item li:last-child { padding:0; margin:0; border:none }
.playlists .item .thumb { position:relative; width:25%; float:left; margin-right:20px; padding:0; border:none }
.playlists .item .thumb a { display:block; height:0; padding-top:56.25%; position:relative; overflow:hidden; background:#000 }
.playlists .item .thumb img { width:100%; vertical-align:middle; position:absolute; left:0; top:0 }
.playlists .item .thumb .video-count { padding:5px; color:#FFF; background:#000; background:rgba(0,0,0,0.8); position:absolute; right:0; top:0 }

@media only screen and (max-width:550px) {
  .playlists .item .thumb { width:auto; float:none; margin:0 0 10px }
  .playlists .item .thumb img { width:100% }
}

.js .video-grid { visibility:hidden }
.js .video-grid.ready { visibility:visible }

.video-grid { position:relative }
.video-grid ul { margin:-20px 0 0; list-style:none }
.video-grid .item { width:32%; float:left; margin-left:2%; margin-top:20px; color:#666; text-decoration:none }
.video-grid .item:nth-child(3n + 1) { clear:left; margin-left:0 }
.video-grid .item .thumb { display:block; padding:5px; border-radius:3px; box-shadow:0 0 3px rgba(0,0,0,0.4)  }
.video-grid .item .thumb > em { display:block; height:0; padding-top:56.25%; position:relative; overflow:hidden; background:#000 }
.video-grid .item .thumb > em:before { content:""; display:block; width:36px; height:36px; background:rgba(0,0,0,0.4); position:absolute; right:10px; top:50%; margin-top:-18px; border-radius:5px; z-index:2 }
.video-grid .item .thumb > em:after { content:""; display:block; width:0; height:0; border:solid 10px transparent; border-left:solid 10px #FFF; position:absolute; right:12px; top:50%; margin-top:-10px; z-index:3  }
.video-grid .item .thumb img { width:100%; vertical-align:middle; position:absolute; left:0; top:0 }
.video-grid .item .title { display:block; margin-top:5px; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; transition:all .4s ease }
.video-grid .item .date { display:block; margin-top:5px; font-size:small; color:#666 }

.no-touch .video-grid .item:hover .title { color:#444; text-decoration:none }
.no-touch .video-grid .item:hover .thumb { box-shadow:0 0 10px rgba(0,0,0,0.5) }
.no-touch .video-grid .item:focus .thumb { box-shadow:0 0 5px rgba(0,0,0,0.5) inset }

.video-grid.small .item { width:auto; float:none; margin:5px 0 0; padding:10px; box-shadow:0 0 2px rgba(0,0,0,0.2) }
.video-grid.small .item:first-child { margin:0 }
.video-grid.small .item .thumb { width:100px; float:left; margin-right:10px; padding:0; box-shadow:none  }
.video-grid.small .item .thumb > em:before,
.video-grid.small .item .thumb > em:after { display:none }
.no-touch .video-grid.small .item:hover { box-shadow:0 0 5px rgba(0,0,0,0.5) }
.no-touch .video-grid.small .item:focus { box-shadow:0 0 5px rgba(0,0,0,0.5) inset }
.no-touch .video-grid.small .item:hover .thumb,
.no-touch .video-grid.small .item:focus .thumb { box-shadow:none }

.video-viewer { position:relative }
.video-viewer .watch-box { width:64%; float:left }
.video-viewer .player-box { position:relative }
.video-viewer .player-box.wide { max-width:640px }
.video-viewer .player-box.standard { max-width:480px }
.video-viewer .video-info { margin-top:10px }
.video-viewer .video-info h1 { margin:0 0 5px }
.video-viewer .video-info .date { font-size:smaller; color:#666 }
.video-viewer .video-info p { margin:0 }
.video-viewer .related-videos { width:36%; float:right; padding-left:15px; -webkit-box-sizing:border-box; box-sizing:border-box }

.video-viewer .related-videos .btn,
.video-grid .btn { display:block; padding:5px 10px; margin-top:10px; text-align:center; text-decoration:none; background:#f5f5f5; color:#666; border:solid 1px #eee; border-radius:5px; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; transition:all .4s ease }
.no-touch .video-viewer .related-videos .btn:hover,
.no-touch .video-grid .btn:hover { text-decoration:none; background:#efefef }

@media only screen and (max-width:768px) {
  .video-viewer .watch-box,
  .video-viewer .related-videos { width:auto; float:none }
  .video-viewer .related-videos { margin-top:20px; padding:0; background:none }
}

/* test element to check if this file is loaded -- the element is not rendered anywhere */
#video-gallery-css-test { position:relative }

.video-catalog .loader { display:none; position:absolute; left:0; right:0; top:0; z-index:2; margin:50px auto; font-size:10px; text-indent:-9999px; width:8em; height:8em; border-radius:50%; background:#000;
  background: -moz-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -webkit-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -o-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: -ms-linear-gradient(left, #000000 10%, rgba(0,0,0, 0) 42%);
  background: linear-gradient(to right, #000000 10%, rgba(0,0,0, 0) 42%);
  -webkit-animation: halfspinner 1.4s infinite linear;
  animation: halfspinner 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.video-catalog.loading .loader { display:block }
.video-catalog .loader:before { content:''; position:absolute; left:0; top:0; width:50%; height:50%; background:#000; border-radius:100% 0 0 0 }
.video-catalog .loader:after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:75%; height:75%; border-radius:50%; background:#fff }

@-webkit-keyframes halfspinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes halfspinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}