html {height:100%; overflow:hidden;}
body {height:100%; width:100%; padding:0; margin:0; overflow-y:scroll; min-width:320px;
display: flex;
-webkit-display:flex;
flex-direction: column;
-webkit-flex-direction: column;
font-family:arial;
}
header {background:#333; padding:15px 20px;
flex: 0 0 50px;
-webkit-flex: 0 0 50px;
-ms-flex: 0 0 50px;
order:1;
}

nav {background:#d0d0d0; padding:5px 20px;
flex: 0 0 30px;
-webkit-flex: 0 0 30px;
-ms-flex: 0 0 30px;
background-image: -webkit-linear-gradient(#333, #333);
background-image: -moz-linear-gradient(#333, #333);
background-image: linear-gradient(#333, #333);

display: -webkit-box;
display: flex;
-webkit-display:flex;
flex-direction: row;
-webkit-flex-direction: row;
order:2;
}

nav a {display:block; margin:0 1px 0 0; background:#f0f0f0; color:#000; text-decoration:none; 
padding-top:5px;
font-family: arial, sans-serif;
font-weight:500;
font-size:1em;   
text-shadow: 1px 1px white, 1px 2px #999;
 text-transform:uppercase; text-align:center;
border-radius:10px;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
}

nav:empty {background:#d0d0d0; padding:0px 0px;
flex: 0 0 20px;
-webkit-flex: 0 0 20px;
-ms-flex: 0 0 20px;

display: -webkit-box;
display: flex;
-webkit-display:flex;
flex-direction: row;
-webkit-flex-direction: row;
order:2;
}

section {background:#333;
order:3;
display: -webkit-box;
display: flex;
-webkit-display:flex;
flex-direction: row;
-webkit-flex-direction: row;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
}

section article:nth-of-type(1) {border-radius:10px 10px 0 0; background:#f8f8f8;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
}

section article:nth-of-type(2) {
order: -1;
background-image: -webkit-linear-gradient(#333, #d0d0d0 30px);
background-image: -moz-linear-gradient(#333, #d0d0d0 30px);
background-image: linear-gradient(#333, #d0d0d0 30px);
padding:20px;
flex: 0 0 200px;
-webkit-flex: 0 0 200px;
-ms-flex: 0 0 200px;
}
section article:nth-of-type(3) {
background-image: -webkit-linear-gradient(#333, #d0d0d0 30px);
background-image: -moz-linear-gradient(#333, #d0d0d0 30px);
background-image: linear-gradient(#333, #d0d0d0 30px);
padding:2px 20px;
flex: 0 0 200px;
-webkit-flex: 0 0 200px;
-ms-flex: 0 0 200px;
}

footer {background:#555; padding:15px 20px 8px 20px;
text-align:left;
order:4;
flex: 0 0 30px;
-webkit-flex: 0 0 30px;
-ms-flex: 0 0 30px;
}

section article:nth-of-type(1) .box {padding:20px;
flex: 1 0 auto;
-webkit-flex:1 0 auto;
-ms-flex: 1 0 auto;
align-items: center;
justify-content:center;
}
section article:nth-of-type(1) .box:nth-of-type(1)
{
flex: 1 0 auto;
-webkit-flex:1 0 auto;
-ms-flex: 0 0 auto;
}
section article:nth-of-type(1) .box:nth-of-type(2) {background:#ccc; margin:0 20px; border-radius:10px;
display: -webkit-box;
display: flex;
-webkit-display:flex;
flex-direction: row;
-webkit-flex-direction: row;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
}

header h1 {padding:0; margin:0; float:left; font:normal 42px arial; color: rgba(200,200,200, 0.7); text-shadow: 1px 4px 6px #444, 0 0 0 #000, 1px 4px 6px #def;}
header h1::first-letter{color:#fff}

header h2 {padding:0; margin:0; font:normal 25px/50px arial; color:#808080; float:right;}
section h1 {padding:0; margin:0; font:normal 25px/30px arial; color:#069;}
section h2 {padding:0; margin:0; font:normal 14px/14px arial; color:#383;}
section h3 {padding:0; margin:0; font:normal 17px/30px arial; color:#000;}
section p {padding:0; margin:0; font:normal 13px/20px arial; color:#666;}
footer p {padding:0; margin:0; font:normal 13px/20px arial; color:#ddd;}
footer a {color:#fff;text-decoration:none}
footer a:hover {text-decoration:underline}
footer span{margin-top:-10px}

@media only screen and (max-width: 1024px) {
header {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
}
section {display:block;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;

flex-direction:column;
-webkit-flex-direction: column;
}
/*
nav {padding:5px 0;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
 */
section article:nth-of-type(2) {
order: 0;
}
}
.tcInput {background: url('calendar/cal.gif') 100% 50% no-repeat;padding-right: 20px;cursor: pointer;}
.tcActive {background-image: url('calendar/no_cal.gif');}
#tc {
	position: absolute;
	visibility: hidden;
	z-index: 140000;
	width: 200px;
	background-color: #FFF;
	margin-top: 2px;
	padding: 0 2px 2px 2px;
	border: 1px solid silver;
	-webkit-box-shadow: 3px 3px 4px silver;
	box-shadow: 3px 3px 4px silver;
}
#tcControls {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
#tcControls td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	width: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#tcControls th {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	line-height: 25px;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	white-space: nowrap;
}
#tcPrevYear { background-image: url('calendar/prev_year.gif'); }
#tcPrevMonth { background-image: url('calendar/prev_mon.gif'); }
#tcNextMonth { background-image: url('calendar/next_mon.gif'); }
#tcNextYear { background-image: url('calendar/next_year.gif'); }
#tcGrid {
	border-collapse: collapse;
	border: 1px solid silver;
	width: 100%;
}
#tcGrid th {
	border: 1px solid silver;
	border-collapse: collapse;
	padding: 3px 0;
	text-align: center;
	font-size: 10pt;
	background-color: gray;
	color: white;
}
#tcGrid td {
	border: 0;
	border-collapse: collapse;
	padding: 2px 0;
	text-align: center;
	width: 14%;
	font-size: 14px;
	cursor: pointer;
}		
#tcGrid td.tcOtherMonth { color: silver; }
#tcGrid td.tcWeekend { background-color: #ACD6F5; font-weight: bold; }
#tcGrid td.tcToday { border: 1px solid red; }
#tcGrid td.tcSelected { background-color: #FFB3BE; }		

#navigation ul.pages {margin:0px 0 0 5px; padding:0;list-style:none;text-align:right;width:195px;}
#navigation li {border:0px solid green;margin:0px;padding: 8px 15px 0 0;width:190px;margin-top:0px;}
#navigation li a:link, #navigation li a:visited {text-decoration: none; font-weight: bold; color:#666; display:block;padding:0} 
#navigation li a:hover {text-decoration:underline;}
#navigation li.selected a {text-decoration: none;color:#000;text-shadow: 0px 0px 5px #333}

#navigation li.group1 { color:#fff; text-align:center; line-height:25px; margin:10px 10px 0px 0px; padding:3px 0 0 5px !important;text-transform:uppercase;
text-shadow: -2px -2px 2px #666, 2px 2px 2px #000, 2px -2px 2px #000;letter-spacing: 2px;
background: -moz-linear-gradient(left, rgba(170,170,170,0) 0%, rgba(170,170,170,1) 25%, rgba(170,170,170,1) 75%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(170,170,170,0) 0%,rgba(170,170,170,1) 25%,rgba(170,170,170,1) 75%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(170,170,170,0) 0%,rgba(170,170,170,1) 25%,rgba(170,170,170,1) 75%,rgba(0,0,0,0) 100%);
}
#navigation li.group1 a:link,#navigation li.group1 a:hover,#navigation li.group1 a:visited{ color:#fff; text-align:center; line-height:25px; padding:0px;text-transform:uppercase;
text-shadow: -2px -2px 2px #666, 2px 2px 2px #000, 2px -2px 2px #000;letter-spacing: 2px;
background: -moz-linear-gradient(left, rgba(170,170,170,0) 0%, rgba(170,170,170,1) 25%, rgba(170,170,170,1) 75%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(170,170,170,0) 0%,rgba(170,170,170,1) 25%,rgba(170,170,170,1) 75%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(170,170,170,0) 0%,rgba(170,170,170,1) 25%,rgba(170,170,170,1) 75%,rgba(0,0,0,0) 100%);
text-decoration:none;
}

#navigation li.group2 { color:#FFF; text-align:left; line-height:30px; margin:15px 10px 5px 0px;padding:0 0 0 10px;text-transform:uppercase;font-weight:bold;
text-shadow: 2px 0 0 #888, -2px 0 0 #888, 0 2px 0 #888, 0 -2px 0 #888, 1px 1px #888, -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888;letter-spacing: 2px;
background: -moz-linear-gradient(left, rgba(86,86,86,0) 0%, rgba(86,86,86,1) 3%, rgba(86,86,86,1) 75%, rgba(86,86,86,0) 100%);
background: -webkit-linear-gradient(left, rgba(86,86,86,0) 0%,rgba(86,86,86,1) 3%,rgba(86,86,86,1) 75%,rgba(86,86,86,0) 100%);
background: linear-gradient(to right, rgba(86,86,86,0) 0%,rgba(86,86,86,1) 3%,rgba(86,86,86,1) 75%,rgba(86,86,86,0) 100%);
font-size:1.2em
}
#navigation li.group2 a:link,#navigation li.group2 a:hover,#navigation li.group2 a:visited { color:#FFF; text-align:left; padding:0;text-transform:uppercase;font-weight:bold;
text-shadow: 2px 0 0 #888, -2px 0 0 #888, 0 2px 0 #888, 0 -2px 0 #888, 1px 1px #888, -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888;letter-spacing: 2px;
background: -moz-linear-gradient(left, rgba(86,86,86,0) 0%, rgba(86,86,86,1) 3%, rgba(86,86,86,1) 75%, rgba(86,86,86,0) 100%);
background: -webkit-linear-gradient(left, rgba(86,86,86,0) 0%,rgba(86,86,86,1) 3%,rgba(86,86,86,1) 75%,rgba(86,86,86,0) 100%);
background: linear-gradient(to right, rgba(86,86,86,0) 0%,rgba(86,86,86,1) 3%,rgba(86,86,86,1) 75%,rgba(86,86,86,0) 100%);
text-decoration:none;
}

.vstup{border:1px solid;background-color:#FFF;border-color:#808080;padding:2px;-webkit-border-radius:3px;border-radius:3px;}
.vstup:hover{border:1px solid;background-color:#F4F4F4;border-color:#000;-webkit-box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);}
.vstup:focus{border:1px solid;background-color:#F4F4F4;border-color:#000;-webkit-box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);}
.vstup_select{border:1px solid;background-color:#FFF;border-color:#808080;padding:2px;-webkit-border-radius:3px;border-radius:3px;} 
.input_search{border:1px solid;background-color:#eee;border-color:#aaa;padding:2px;-webkit-border-radius:5px;border-radius:5px;width:180px;margin-bottom:10px;padding:5px}
::-webkit-input-placeholder {color: #666;font-style: italic;font-weight:normal;}
:-moz-placeholder { /* Firefox 18- */
color: #666;font-style: italic;font-weight:normal;
}
::-moz-placeholder {  /* Firefox 19+ */
color: #666;font-style: italic;font-weight:normal;
}
:-ms-input-placeholder {  
color: #666;font-style: italic;font-weight:normal;
}

.tlac_delete {background-color:#f99 !important;color:#000 !important;}
.tlac {
  display: inline-block;
  background-color: #ececed;
  border: 1px solid #b0b0b0;
  padding: 0.2em 0.7em 0.4em 0em ;
  font-family:arial;
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  text-decoration: none;
  color: #313033;
  border-radius: .2em;
  text-transform:uppercase;
  margin: 0.5em;
}
.tlac i{margin:0.1em 0.8em 0 0.5em; font-size:1.3em}
.tlac:active{box-shadow:0 1px 10px  rgba(0,0,0,.4) inset;}

.login tr {height:30px;}
.maktiv {font-weight:bold;box-shadow:0 1px 10px  rgba(0,0,0,.4) inset;}
.oddel{height:15px;clear:both}
.clanky{margin-bottom:10px}
.clanky h1 {padding:0; margin:0; font-size:1.3em; font-weight:bold}
.clanky h1 a{color:#069;text-decoration:none;border-bottom:1px solid #6F8FE2} /* 6F8FE2*/
.clanky h2 {padding:0; margin:0; font-size:0.8em; color:#666;padding:5px 0px}
.clanky h4 {padding:0; margin:0; font-size:0.8em; color:#666;padding:5px 0px}
.clanky_obsah {color:#666;line-height:1.5em;font-size:0.9em}
.clanky_obsah a {color:#069;text-decoration:none}
.clanky_obsah a:hover {text-decoration:underline}
.clanek {}
.clanek h1 {padding:0; margin:0; font-size:1.5em; color:#666;font-weight:bold}
.clanek h2 {padding:0; margin:0px 0px 15px 0px; font-size:0.8em; color:#666;padding:5px 0px}
.clanek_obsah {color:#666;line-height:1.5em;font-size:0.9em}
.clanek_obsah a {color:#069;text-decoration:none}
.clanek_obsah a:hover {text-decoration:underline}
.clanek_zpet {font-size:0.8em; margin:5px 0px 10px 0px;padding:5px 5px;background-color:#eee}
.clanek_zpet a {color:#808080;text-decoration:none}
.clanek_zpet a:hover {text-decoration:underline}
.clanek_pridani {font-size:0.8em; margin:5px 0px 10px 0px;padding:5px 5px;background-color:#eee}
.clanek_pridani a {color:#808080;text-decoration:none}
.clanek_pridani a:hover {text-decoration:underline}
.clanek_pridani span{color:#808080;float:right}
.clanek_pridani span select{width:50px}
.clanek_cely {color:#069;font-size:0.8em;text-decoration:none}
.clanek_cely:hover {text-decoration:underline}
.citat h1 {color:#666;font-size:1.2em;}
.citat p {color:#666;float:right;font-size:0.8em;}
.edit_clanek {margin-left:30px;color:#808080;text-decoration:none}
.edit_clanek:hover {text-decoration:underline}
.strany {border-top:1px solid #808080;padding:10px 0px;color:#808080;font-size:.8em;margin-top:10px}
.strany a{color:#808080}
.strany1 {font-weight:bold}
.strany2 {padding-top:5px}
.strany_zacatek {padding-right:10px}
.strany_predchozi {padding-right:10px}
.strany_dalsi {padding-left:10px}
.strany_konec {padding-left:10px}
.strany_vyber {padding:0 10px}
.strany_vyber a{padding:0 4px}
.strany_vyber span{padding:0 4px;font-weight:bold}
.galerie_titulek {margin-bottom:10px}
.galerie_titulek h1{font-weight:bold}
.uzivatel_pridani {font-size:0.8em; margin:5px 0px 10px 0px;padding:5px 5px;background-color:#eee}
.uzivatel_pridani a {color:#808080;text-decoration:none}
.uzivatel_pridani a:hover {text-decoration:underline}
.pravo_pridani {font-size:0.8em; margin:5px 0px 10px 0px;padding:5px 5px;background-color:#eee}
.pravo_pridani span{font-weight:bold;}
.pravo_pridani label{font-weight:bold;}
.editace_uzivatele{}
.table_bottom{background-color:#eee !important}
.table_uzivatel{border:1px solid #666;-webkit-border-radius:5px;border-radius:5px;}
.table_uzivatel td{padding:5px}
.table_uzivatel tr td:nth-of-type(1){background-color:#aaa;font-weight:bold}
.table_uzivatel tr td:nth-of-type(2){background-color:#ccc}

.table_uzivatele{border:1px solid #666;-webkit-border-radius:5px;border-radius:5px;}
.table_uzivatele td,.table_uzivatele th{padding:5px}
.table_uzivatele tr th{background-color:#aaa;font-weight:bold}
.table_uzivatele tr td{background-color:#ccc}
.table_uzivatele a{color:#069}

.table_prava{border:1px solid #666;-webkit-border-radius:5px;border-radius:5px;}
.table_prava td,.table_prava th{padding:5px}
.table_prava tr th{background-color:#aaa;font-weight:bold}
.table_prava tr td{background-color:#ccc}
.table_prava tr td:nth-of-type(3),.table_prava tr td:nth-of-type(4),.table_prava tr td:nth-of-type(5){text-align:center}
.table_prava a{color:#069}
.razeni{float:right; font-size:.8em;color:#666}
.razeni select{border:1px dashed #eee;background-color:#FFF;padding:2px;-webkit-border-radius:3px;border-radius:3px;color:#666} 
.hledani span{font-style: italic;}
.hledani h3{padding:0; margin:0; font:normal 25px/30px arial; color:#666;}
.nalezeno {background-color:#FF0 !important;}
.cover {float:left;padding:2px 10px 2px 0px;border:0;cursor:pointer}

/* styly oddelovacu v clancich */
.obsah-filozofie-cinska-prislovi hr {
       border : 0px;
       height : 20px;
       text-align:left;
       margin : 1em 3em;
       width:80%;
       }

.obsah-filozofie-cinska-prislovi hr:after {
content:"\2501  \262f  \2501";
font-size:1.5em;
color:#666;
}

.neverejny{background-color:#ccc}

/* styly hlavicek a log*/
.modul-potkani header{background:#666 url("files/obrazky/potkani-logo.png") !important;background-repeat: no-repeat !important;}
.modul-potkani header h1{padding-left:150px;}
.modul-filozofie header{background:#666 url("files/obrazky/filozofie-logo.png") !important;background-repeat: no-repeat !important;}
.modul-filozofie header h1{padding-left:70px;}
.modul-digitalizace header{background:#666 url("files/obrazky/digi-logo.png") !important;background-repeat: no-repeat !important;}
.modul-digitalizace header h1{padding-left:10px;}
.wait{position:fixed; top:50%; left:50%; visibility:visible; border:1px solid black;background-color:#FFF;padding:10px;font-weight:bold;text-align:center;z-index:20000;-webkit-box-shadow:0 0 2em hsla(0, 0%, 0%, 1.0);box-shadow:0 0 2em hsla(0, 0%, 0%, 1.0);-webkit-border-radius:5px;border-radius:5px;}
.wait0{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.5;visibility:hidden;z-index:19990}
@keyframes messys {
    0%   {top:-50px}
    10%   {top:155px}
    60%   {top:155px}
    100% {top: -50px}
}

@-webkit-keyframes messys {
    0%   {top:-50px}
    10%   {top:155px}
    60%   {top:155px}
    100% {top: -50px}
}

@keyframes meserr {
    0%   {top:-50px}
    5%   {top:155px}
    80%   {top:155px}
    100% {top: -50px}
}

@-webkit-keyframes meserr {
    0%   {top:-50px}
    5%   {top:155px}
    80%   {top:155px}
    100% {top: -50px}
}

.sysmsg{position:fixed;font-size:10pt;font-weight:bold;height:30px;line-height:30px;top:-50px;right:30px;padding:5px 10px 5px 10px;border:1px solid #808080;opacity:.8;visibility:visible;z-index:19990;
background-color: #444; color: #fff; -webkit-border-radius:5px;border-radius:5px;
animation-name: messys;
animation-duration: 5s;
-webkit-animation: messys 5s;
}
.sysmsg i{font-size:14pt; color:#0F0; padding-right:15px}
.syserr{position:fixed;font-size:10pt;font-weight:bold;height:30px;line-height:30px;top:-50px;right:30px;padding:5px 10px 5px 10px;border:1px solid #808080;opacity:.7;visibility:visible;z-index:19990;
background-color: #f99; color: #000; -webkit-border-radius:5px;border-radius:5px;
animation-name: meserr;
animation-duration: 10s;
-webkit-animation: meserr 10s;
}
.syserr i{font-size:14pt; color:#F00; padding-right:15px}
.msginit{visibility:hidden}
.checkbox[id=smazat] {margin-left:50px}
.table_edit tbody tr td:nth-of-type(1) {padding-right:20px}

.zverejneno {
    position: relative; width: 154px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.zverejneno-checkbox {
    display: none;
}

.zverejneno-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}

.zverejneno-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.zverejneno-inner:before, .zverejneno-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}

.zverejneno-inner:before {
    content: "ZPŘÍSTUPNĚNO";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}

.zverejneno-inner:after {
    content: "NEVEŘEJNÉ";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

.zverejneno-switch {
    display: block; width: 20px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 130px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}

.zverejneno-checkbox:checked + .zverejneno-label .zverejneno-inner {
    margin-left: 0;
}

.zverejneno-checkbox:checked + .zverejneno-label .zverejneno-switch {
    right: 0px; 
}

figure {
    margin:20px 0 0;
    margin:0 0 0;
}
video {
    width:100%;
    height:auto;

}

/* controls */
.controls, .controls li {
    padding:0;
    margin:0;
}
.controls {
    list-style-type:none;
    overflow:hidden;
    background-color:#eee;
    border: 1px solid #b0b0b0;
    border-radius: .2em;
    padding:3px;
}
.controls li {
    float:left;
    margin-left:10px;
}
.controls li:first-child {
    margin-left:0;
}
.controls .progress {
    width:38%;
    cursor:pointer;
    padding:0 10px;
}
.controls button i{
  font-size:16px;
  padding-top:2px;
}

.controls button {
    width:25px;
    height:25px;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
   background-color: #ececed;
  border: 1px solid #b0b0b0;
  padding: 1px;
  cursor:pointer;
  font-weight:bold;
  text-decoration: none;
  color: #313033;
  border-radius: .2em;
  outline: none;
}

.controls button:active{box-shadow:0 1px 10px  rgba(0,0,0,.4) inset;}
.posit {

    display:block;
    width:100px;
    height:22px;
    margin-top:2px;
    text-align:center;
    font-size:16px;
    border:0;
    font-weight:bold;
    white-space:nowrap;
    padding-top:2px !important;
}

@keyframes volshow {
    0%   {opacity:1}
    70%   {opacity:1}
    100% {opacity:0}
}

.volumepos1 {
    opacity:1
}

.volumepos {
    position:absolute;
    font-weight:bold;
    color:#666;
    bottom:35px;
    right:0;
    height: 20px;
    z-index:2147483647 !important;
    background-color:#eee;
    border: 1px solid #b0b0b0;
    border-radius: .2em;
    padding:3px;
    opacity: 0;
    animation-name: volshow;
    animation-duration: 5s;
    -webkit-animation: volshow 5s;
}

.controls progress {
    display:block;
    width:100%;
    height:20px;
    height:1.25rem;
    margin-top:2px;
    border:1px solid #aaa;
    overflow:hidden;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.controls progress span {
    width:0%;
    height:100%;
    display:inline-block;
    background-color:#2a84cd;	
}

/* fullscreen */
html:-ms-fullscreen {
    width:100%;
}
:-webkit-full-screen {
    background-color:transparent;
}
/* hide controls on fullscreen with WebKit */
figure[data-fullscreen=true] video::-webkit-media-controls {
    display:none !important;
}
figure[data-fullscreen=true] {
    max-width:100%;
    width:100%;
    margin:0;
    padding:0;
}
figure[data-fullscreen=true] video {
    height:auto;
}
figure[data-fullscreen=true] figcaption {
    display:none;
}
figure[data-fullscreen=true] .controls {
    position:absolute;
    bottom:2%;
    width:100%;
    z-index:2147483647;
}
figure[data-fullscreen=true] .controls li {
    width:5%;
}
figure[data-fullscreen=true] .controls .progress {
    width:68%;
}