body { font-size:0.9em; font-family:Open Sans; background:#161a1d; overflow:hidden; border:none  }
body,
html {
  width:100%; position: fixed;
}
h2 { color:#fff; text-align:center; margin-top:80px; font-size:1.6em; }
h3 { color:#fff; text-align:center; font-size:1em; margin-bottom:20px; font-weight:300 }

.nomargin { margin:0 !important }

#password { width:100%; padding:20px 20%; box-sizing:border-box; margin:auto; text-align:center; }
#password input { width:80%; max-width:400px; padding:10px; box-sizing:border-box; margin:auto; text-align:center; border:none; background:rgba(255,255,255,0.2); margin-bottom:10px; }
#password input[type=submit] { cursor:pointer; width:200px; height:36px; line-height:36px; padding:0 20px; background:#2993ad; box-sizing:border-box; display:block; color:#fff; border:none; box-shadow:0 0 1px #aaa; border-radius:5px }
#password input[type=submit]:hover { background:#3e5665; }
#password .error { color:#f00; }

#message { position:fixed; top:0; left:0; z-index:2147483647; color:#fff; text-align:center; overflow:auto; display:flex; flex:1 0 100%; align-items:center; justify-content:center; background:#21272b }
#message.hidden { display:none }
#message .content { width:100%; padding:20px 20% 40px; box-sizing:border-box; margin:auto; text-align:center; }
#message .content a { color:#fff; text-decoration:underline }
#message .content a.nav-button, #message .content button.nav-button { width:250px; color:#fff; text-decoration:none; background:#2993ad; margin:auto; }
#message .content a.nav-button:hover, #message .content button.nav-button:hover { background:#3e5665; }
#message .content input[type=email] { width:250px; padding:5px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); margin:20px 0; color:#fff; text-align:center; }
#message .step-send, #message .step-loading, #message .step-sent { display:flex; justify-content:center; flex-direction:column; align-items:center; flex:1; }


.video-waiting .video-status .loading { display:block }
@keyframes loading {
  0% { transform: scale(1); }
  20% { transform: scale(1, 1.5); }
  40% { transform: scale(1); }
}

.video-playing .video-status { display:none }

.video-status .ready { display:none }
.video-status .paused { display:none }
.video-status .loading { display:none }
.video-status .ready .fa, .video-status .paused .fa, .video-status .ready .fas, .video-status .paused .fas, .video-status .ready .fad, .video-status .paused .fad { font-size:4em; color:rgba(255, 255, 255, 1); text-shadow:0px 0px 10px rgba(0,0,0,0.2); margin-top:-15px }
.video-status .loading .fa, .video-status .loading .fas { font-size:4em; color:rgba(255, 255, 255, 1); text-shadow:0px 0px 10px rgba(0,0,0,0.2); }
.video-ready .ready, .video-paused .paused, .video-status .loading .fa, .video-status .loading .fas, .video-status .loading .fad, .video-status .loading .fad { display:block; transition: all ease 0.2s; position:absolute; z-index:2147483647; opacity:0.75 }
.video-ready .ready:hover, .video-paused .paused:hover { opacity:1 }
.video-status { width:100%; height:calc(100% - 50px); position:absolute; top:0; left:0; z-index:2147483647 !important; }
.video-status > div { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2147483647 !important; }
.video-status > div > a { width:100%; height:100%; line-height:100%; position:absolute; top:0; left:0; z-index:2147483647 !important; text-align:center; }
.video-status > div span { width:100%; position:relative; top:50%; left:0; color:#fff; }
.video-status .metadata { display:none; background:rgba(0,0,0,0.5) }
.video-status .metadata > div { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2147483647 !important; text-shadow:0px 0px 10px rgba(0,0,0,0.2); display:flex; justify-content:center; align-items:center; flex-direction:column; color:#fff; }
.video-status .metadata > div h3 { font-size:1.4em; font-weight:bold; margin:0 0 20px; }
.video-status .metadata > div p { margin:0 0 20px; }
.video-status .metadata .metadata-2, .video-status .metadata .metadata-3 { display:none; }

a { text-decoration:none; outline:none }
a:focus { outline:none }

.nav-button { cursor:pointer; width:auto; height:36px; line-height:36px; padding:0 10px; background:#3e5665; box-sizing:border-box; display:block; color:#fff; border:1px solid #fff; box-shadow:0 0 1px #aaa; }
.nav-button:hover { background:#2993ad; box-shadow:0 0 1px #2993ad; color:#fff }
.nav-button.active { background:#2993ad }

#video { margin-bottom:0 }
video { width:100%; background:#000; }

#slides { text-align:center }

.video-waiting #controls, .video-ready #controls, .playlist #controls { opacity:1 !important }

#controls { width:100%; height:40px; line-height:35px; background:#161a1d; border-top:1px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.25); position:absolute; bottom:0; opacity:0; transition:opacity ease 0.25s; z-index:2147483647; font-family:Open Sans; font-size:10px !important; }
#controls.visible { opacity:0.85; z-index:2147483647 !important; }
#controls:hover { opacity:1; }
#controls a { color:#ddd; }
#controls a:focus { outline-style:dotted; outline-color:#ccc; outline-width:1px; }
#controls table { width:100%; }
#controls tr { max-width:50px; color:#ddd; font-size:16px }
#controls tr:last-child td { padding:0 2px }
#controls tr:last-child td:first-child { padding-left:4px }
#controls tr:last-child td:last-child { padding-rights:4px }
#controls tr td a .text { font-size:12px; line-height:16px; margin-left:5px; font-family:Open Sans; font-style:normal; font-weight:300 }
#controls td { text-align:center; vertical-align:middle; cursor:pointer; }
#controls tr span, #controls tr a.fa, #controls tr span, #controls tr a.fas { width:40px; height:35px; line-height:35px; float:left; box-sizing:border-box; text-align:center; color:inherit; text-decoration:none; }
#controls tr .current-time, #controls tr .total-time { width:50px; font-size:0.8em; }
#controls tr .time { position:relative;} 
#controls tr .timeline { width:100%; height:5px; background:#fafafa; float:left; }
#controls tr .timeline .current { width:0%; min-width:0px; height:5px; background:#2993ad; position:absolute; left:0; z-index:1; opacity:1; }
#controls tr .timeline .buffer { width:0%; min-width:0px; height:5px; background:#B9C7CC; position:absolute; left:0; z-index:0; top:0px; }
#controls tr .time .chapters ul li a { position:absolute; width:14px; height:14px; margin-left:-7px; background:#fff; top:-5px; border-radius:16px; box-shadow:0 0 5px rgba(0,0,0,0.5); opacity: 1; z-index:1; }
#controls tr .time .chapters ul li a:hover { background:#2993ad }
#controls tr .time .notes ul li a { position:absolute; width:14px; height:14px; margin-left:-7px; background:transparent; top:-5px; opacity: 1; z-index:1; }
#controls tr .time .notes ul li a:before { content:'\f08d'; font-weight:700; font-family:"Font Awesome 5 Pro"; display:block; margin-top:-25px; }
#controls tr .time .notes ul li a:before:hover { color:#2993ad }
#controls tr a { opacity:0.5; }
#controls tr a:hover, #controls tr a:focus { color:#fff; opacity:1 !important }
#controls tr a.active { color:#fff; background:rgba(0,0,0,0.2); opacity:1 !important }
#controls tr a.fa, #controls tr a.fas, #controls tr a.far { width:auto; padding:0 10px; margin:0; opacity:0.5; height:24px; line-height:24px; font-size:12px; opacity:0.5; display:block; float:left; outline:none }
#controls tr a.fa.txt, #controls tr a.fas.txt { font-family:Open Sans; font-size:10px }
#controls tr a.player-mode { height:22px; opacity:1; border:1px solid rgba(255,255,255,0.25); border-radius:3px; display:block; float:left; outline:none; margin:0 5px; }
#controls tr a.player-mode span { width:auto; margin:0 5px; opacity:0.5; height:22px; line-height:22px; font-size:12px; }
#controls tr a.player-mode span:first-child { margin-right:0 }
#controls tr a.player-mode span:last-child { margin-top:1px; font-size:15px; }
#controls tr a.player-mode.video-only-btn  span:first-child { opacity:1; }
#controls tr a.player-mode.slides-only-btn  span:last-child { opacity:1; }
#controls tr a.player-mode.video-slides-btn  span { opacity:1; }
#controls .volume .volume-range { width:64px; height:12px; padding:1px; border:1px solid rgba(255,255,255,0.25);  box-sizing:border-box; margin-top:1px; display:block; cursor:pointer; z-index:2147483647; position:relative; opacity:0.5 }
#controls .volume .volume-range:hover, #controls .volume .volume-range:focus { opacity:1 }
#controls .volume .volume-range .range { width:100%; height:10px; text-align:center; float:left; padding:0; }
#controls .volume .volume-range .range li { width:3px; height:8px; background:rgba(255,255,255,0.25); border:none; margin:0px auto; display:block; float:left; }
#controls .volume .volume-range .range li:hover { opacity:0.7; }
#controls .volume .volume-range .range li.active { background:#fff; }
#controls .sound:hover { opacity:1; }
#controls .sound:hover > .volume-range { display:block; cursor:pointer; }
#controls .sound:hover .fa { }
#controls span.uptube { display:none; padding-top:6px; }
#controls span.fullscreen { display:block; }
	
.fullscreen #controls { position:fixed; bottom:0; left:0; right:0; opacity:0; }
.fullscreen #controls.visible { opacity:1; }
.video-paused #controls { opacity:1; }

.videotime { z-index:2147483647; background:#2993ad; box-shadow:0 0 10px rgba(0,0,0,0.2); padding:5px; color:#fff }

.ie_fullscreen { position:fixed; top:0; left:0; z-index:2147483647; }
.tooltip { width:50px; padding:0 5px; height:40px; line-height:32px; background:url(../img/player-tooltip.png) center no-repeat; position:fixed; top:0; left:0; text-align:center; z-index:2147483647; }

#slides  { display:none; background:#000 }
#wrapper { z-index:2147483647 !important; overflow:hidden; }

.video-slides video { width:25% !important; float:left; }
.video-slides #slides { width:75% !important; float:right;  }

#orig_img { visibility:hidden; position:absolute; left:-9999px; top:0 }

.nav-panel { width:35%; max-width:400px !important; position:absolute; top:0; right:0; background:#161a1d; border-left:1px solid #fff; z-index:2147483647; display:none }
.nav-panel ul { display:table-cell; padding:0 10px; }
.nav-panel ul li { align-self:stretch; flex-grow:1; margin:10px 0; }
.nav-panel .nav-button { height:auto; padding:10px; line-height:15px; text-align:center; box-sizing:border-box; background:#2993ad; }
.nav-panel .list { width:100%; position:relative; top:0px; padding:10px; box-sizing:border-box; overflow-y:hidden; box-sizing:border-box; display:block }
.nav-panel .list li { width:100%; float:left; margin:0; }
.nav-panel .list li a { width:100%; border-bottom:1px solid #fff; color:#cbdbdd; cursor:pointer; padding:10px; float:left; box-sizing:border-box; }
.nav-panel .list li a:hover, .nav-panel .list li a:focus { color:#2993ad; }
.nav-panel .list li a.active { color:#fff; }
.nav-panel .list li a p { width:100%; float:left; line-height:1.2em; color: #cbdbdd; }
.nav-panel table tbody { width:100%; float:left; }
.nav-panel table tr { width:100%; float:left; }
.nav-panel table tr:hover { cursor:pointer; background:rgba(255,255,255,0.2) }
.nav-panel table tr.active { background:#2993ad }
.nav-panel table td { padding:5px; vertical-align:middle; color:#fff; }
.nav-panel table td a { color:#fff; }
.nav-panel table td .tiny { font-size:0.8em; opacity:0.5; }

.player-options { position:absolute; bottom:51px; right:0px; width:300px; height:auto; background:#161a1d; padding:20px; color:#fff; font-size:0.9em; z-index:2147483647 !important }
.player-options .playback-speed { margin:0; padding:0; }
.player-options .playback-speed li:first-child { display:block; margin-bottom:10px; font-weight:bold }
.player-options .playback-speed li { display:inline-block; }
.player-options .playback-speed li a { display:block; width:40px; height:30px; line-height:30px; text-align:center; border:1px solid rgba(255,255,255,0.5); color:rgba(255,255,255,0.5); }
.player-options .playback-speed li a:hover, .player-options .playback-speed li a:focus { color:rgba(255,255,255,1); }
.player-options .playback-speed li a.active { color:rgba(255,255,255,1); background:#2993ad }

#playlist, #favorites { position:fixed; top:0; left:0; padding:10px; box-sizing:border-box; background:#161a1d; z-index:2147483647; color:#fff; text-align:center; overflow:hidden; }
#playlist.open { top:0 !important; left:0; }
#playlist h1, #favorites h1 { width:100%; margin:auto; display:block; color:#fff; text-align:center; font-size:1.4em; line-height:1.2em; height:auto; font-weight:normal; margin-top:20px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #fff; }
#playlist h2, #favorites h2 { font-size:1em; line-height:1.2em; font-weight:normal; margin:0; text-align:left; color:#161a1d }

#playlist ul.items { position:relative; left:0; transition:left ease-in-out 0.50s } 
#playlist ul.items li { width:290px; max-height:250px; color:rgba(255,255,255,0.75); display:inline-block; transition:all ease 0.2s; position:relative; z-index:0; margin-right:5px }
#playlist ul.items li:last-child { margin-right:0px }
#playlist ul.items li a { color:rgba(255,255,255,0.75); outline:unset }
#playlist ul.items li a:focus { color:#2993ad }
#playlist ul.items li .thumb { width:100%; height:160px; background-size:cover } 
#playlist ul.items li .thumb img { width:100%; height:160px; transition:all ease 0.2s; }
#playlist ul.items li .infos { height:90px; padding:10px 0; float:left; }
#playlist ul.items li .infos h3 { font-size:1em; font-weight:300; text-align:left }
#playlist ul.items li:hover { color:#fff; z-index:1; cursor:pointer }
#playlist ul.items li:hover .thumb { transform:scale(1.03); box-shadow:0 0 50px rgba(0,0,0,0.5) }
#playlist ul.items li:hover a { color:#fff; }

#notes-list li { width: calc(100% - 40px); margin:0 20px; background:rgba(0,0,0,0.6); padding:20px; box-sizing:border-box; position:absolute; z-index:2147483647; color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.5); display:none; transition:all ease 0.3s; overflow:auto; }
#notes-list li:hover { opacity:1 !important }
#notes-list li.active { display:block }
#notes-list li a { color:inherit; }
#notes-list li.down { bottom:75px; }
#notes-list li.up { top:25px; }

@media(max-width:640px) {

	#controls .the-time .total-time { display:none; }
	#controls .the-time span:nth-child(2) { display:none; }
	#controls td.volume { display:none }

}