/**  @media screen and (max-width: 600px) {
}
@media screen and (max-width: 1024px) {
}

**/
.labelSchool {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: .2px;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  top: 0px;
  left: 100px;
  color: whitesmoke;
  z-index: 2500;
  font-family: Roboto;
}


.skiperound {
background: yellow;
width: 100px;
height: 100px;
border-radius: 50%;
cursor: pointer;
top: 10%;
left: 0px;
position: absolute;
text-align: center;
padding-top: 40px;
color: red;
opacity: 0.2;
transition: 0.8s;
font-weight: bold;
line-height: 1.2;
}
.skiperound1 {
background: orange;
width: 100px;
height: 100px;
border-radius: 50%;
cursor: pointer;
bottom: 10%;
left: 0px;
position: absolute;
text-align: center;
padding-top: 40px;
color: red;
opacity: 0.2;
transition: 0.8s;
font-weight: bold;
line-height: 1.2;
}

.skiperound:hover {
opacity: 1;
}
.skiperound1:hover {
opacity: 1;
}

.player_wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vh;
  height: 80%;
  width: 100vw;
  height: 100vh;
  background: black;
}

.player {
  width: 100%;
  height: 100%;
  left: 0px;
  position: absolute;
opacity: 1;
}

.center {
  position: absolute;
  margin: auto;
/**  width: 80%;
  height: 60%; 
  border: 1px solid #ea0000; 
  background: #a6b5a891;**/
  padding: 4px;
  bottom: 10vh;
  left: 0vw;
  display: none;
  width: 300px;
  transition: 0.8s;
}

.centerInside {
 /** margin: auto;
  width: 90%;**/
  height: 50%;
  padding: 2px;
  bottom: 10vh;
  left: 10vw;
}
.centerInsideImage {
  width: 20vw; 
  max-width: 195px; 
  min-width: 120px;          
}

.zalozka_right {
  position: absolute;
  right: 10px;
  top: 10vh;
  width: 40px;
}
.zalozka_left {
  position: absolute;
  left: 10px;
  top: 10vh;
  width: 40px;
}
.zalozka_icon1 {
  text-align: center;
  flex: 10000 1 0%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: 200ms;
  cursor: pointer;
}

.infoTEXT {
font-family: 'Shojumaru', serif;
  font-size: 15px;
  text-shadow: 2px 2px 2px #aaa;
transition: 0.8s;
position: fixed;
width: 100px;
opacity: 1;
display: none;
color: red;
}

.zalozka_icon {
  text-align: center;
  flex: 10000 1 0%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: 200ms;
  cursor: pointer;
}
.zalozka_icon:hover  {
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: red;
}

.zalozka_icon:hover  .infoTEXT {
  display: block;
  right: 60px;
}

.zalozka_icon1:hover  .infoTEXT {
  display: block;
  left: 60px;
}


.GalleryIcon{
transform: rotate(-90deg); 
width: 100%; 
height: 100%; 
opacity: 0.3; 
cursor: pointer;
transition: 0.8s;
}

.GalleryIcon:hover{
opacity: 1; 
}

.RedLine{
cursor: pointer; 
position: relative; 
float:left;
transition: 1s; 
height: 100vh; 
width: 50px;
background:#4c554fb8;
color: red; 
font-size: 2em; 
font-family: 'Shojumaru', serif;
  font-size: 24px;
  text-shadow: 4px 4px 4px #aaa;
//text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.75),-3px 10px 12px rgba(0, 0, 0, 0.75);
}

.RedLine:hover{
background: #4c554f;
color: #aaa; 
font-size: 2em; 
font-family: 'Shojumaru', serif;
  font-size: 24px;
  text-shadow: 8px 8px 8px #a5a;
}

.GalleryText{
line-height: 0.6em; 
transition: 0.8s;
cursor: pointer;

}

.GalleryText:hover{

//text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.75),-3px 10px 12px rgba(0, 0, 0, 0.75);
}
.popupmenu {
//transition: 0.8s;
position: absolute; 
top: -100px;
left:-100px;
color: red;
//font: Tangerine small-caps bold 1.8em/30px Georgia, serif; 
//  font-family: 'Tangerine', serif;
//  font-family: 'Audiowide', serif;
//font-family: 'Parisienne', serif;
//font-family: 'Plaster', serif;
font-family: 'Shojumaru', serif;
  font-size: 18px;
  text-shadow: 4px 4px 4px #aaa;
//border-radius: 8px 8px 8px 8px;
//border: 3px solid #10db8f91;
padding: 5px;
//background: grey;
opacity: 1;
}


.sidenav {
	top: 0px;
	position: absolute;
	left: -200px;
	transition: 0.8s;
	padding: 5px;
	width: 200px;
	height: 100%;
	text-decoration: none;
	background-color: #9DACA76B;
	font-size: 20px;
	color: white;
	// border-radius: 0 15px 15px 0;
	opacity: 1;
}
/**.sidenav a:hover {
	//focus  left: 0;
	opacity: 1;
}
**/
.sidenav:focus {
	left: 0;
	opacity: 1;
	background-color: rgba(0,0,0,0);
	height: 100%;
}
.contentBox {
	position: absolute;
	left: 180px;
	top: 100px;
	width: 100px;
	height: 100px;
	transition: 0.8s;
	padding: 15px;
	width: 200px;
	height: 90%;
	text-decoration: none;
	font-size: 20px;
	color: white;
	border-radius: 15px 15px 15px 15px;
	opacity: 0.4;
	background-color: #9DACA76B;
}
.logo {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 2px;
	right: 2px;
	opacity: 0.2
    	transition: 1s;
}

.logo-image {
	width: 100%;
	height: 100%;
}
.sipka {
	position: absolute;
	width: 150px;
	height: 50px;
	left: 5px;
	top: 5px;
	transition: 0.8s;
}
.sipka_ico {
	position: relative;
	float: right;
	opacity: 1;
	transition: 1s;
}
.btn.btn-dark-gray {
	color: #fff;
	background-color: #6f6f6f;
	font-size: 12px;
	opacity: 0.6;
}
.btn.btn-dark-gray:hover {
	opacity: 1;
}

.obsah {
position: absolute;
right: 0px;
bottom: 10px;
width: 100vw;
display: flex;
z-index: 1100;
float: right;
}

.rightSide {
position: absolute;
right: 100px;
height: 100vh;
top: 0px;
	color: #fff;
	background-color: #6f6f6f;
	font-size: 12px;
	opacity: 0.4;
}
.rightSide:hover {
	opacity: 1;
}


.High_Lista {
position: absolute; 
top: 0px; 
left: 0px;
width: 100vw; 
Height: 10vh; 
color: black; 
background-color:black;
//transition: 1s; 
z-index:1001;
}

.Low_Lista {
position: absolute; 
top: 90vh; left: 0px;
width: 100vw; 
Height: 10vh; 
color: black; 
background-color: black; 
z-index:1001;
//transition: 1s;
}
.Middle_Lista {
position: absolute; 
top: 10vh; 
left: 0px;
width: 0vw; 
Height: 80vh; 
color: white; 
background-color: black; 
z-index:1501;
transition: 0.3s;
opacity: 1;
}



.odkazy {
height: 80vh;
//overflow-y: auto;   // auto
//overflow-x: hidden;
//scrollbar-width: none;
left: -100vw;
top: 10vh;
transition: 1s;
opacity: 1;
position: absolute ;
float: left;
transition: 1s;
background: #060101c4;  
}

.screenlistRED {
position: relative; 
width: 100vw; 
height: 80vh; 
float: left; 
/**background: #060101c4;  **/
font: italic small-caps bold 1.8em/20px Georgia, serif; 
color: white;
overflow-x: hidden;
scrollbar-width: none;
overflow-y: auto;   // auto
}


.galleryImage{
width: 80%;
height: 80%;
}


div.CrossCloseIcon{
position: absolute; 
width: 50px; 
height: 50px; 
top: 0vh; 
left: 93vw;
}

.closeImage{
width: 100%;
height: 100%;
cursor: pointer;
}




.FullScreenButton {
position: absolute;
float: right;
width: 50px;
height: 50px;
//background: #39393642;
margin: 5px 20px 5px 15px;
border-radius: 20px 20px 20px 20px;
border: 1px solid #10db8f91;
padding: 0.2em;
transition: 0.4s;
opacity: 0.6;
bottom: 10vh;
//right: 20px;
z-index:1502;
}

.FullScreenButton:hover {
opacity: 1;
background: #9fe1cf;
}



 div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 23vw;
  height: 23vw;
    padding: 10px;
    transition: 0.8s;
}

div.gallery:hover {
  border: 1px solid #f90808;

}

div.gallery img {
  width: 100%;
  height: 80%;
cursor: pointer;
}

div.desc {
  padding: 1px;
  text-align: center; 
  }
  
@media only screen and (max-width: 800px) {
.screenlistRED {
/**background: #060101c4;  **/
font: italic small-caps bold 1.0em/12px Georgia, serif; 
color: white;
height: 80vh; /**96**/
top: 5vh;
}
.centerInsideImage {
  width: 20vw; 
  max-width: 195px;   
  min-width: 120px;         
}
}  
  
@media only screen and (max-width: 400px) {
.screenlistRED {
/**background: #060101c4;  **/
font: italic small-caps bold 0.8em/8px Georgia, serif; 
color: white;
height: 80vh; /**96**/
top: 5vh;
}


.center {
  bottom: 2vh;
  left: 0vw;
  width: 200px;
}

 .FullScreenButton {
position: absolute;
float: right;
width: 40px;
height: 40px;
//background: #39393642;
margin: 5px 20px 5px 15px;
border-radius: 20px 20px 20px 20px;
border: 1px solid #10db8f91;
padding: 0.2em;
transition: 0.4s;
opacity: 0.6;
bottom: 3vh;
left: 3px;
z-index:1502;
}

 div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 25vw;
  height: 25vw;
    padding: 5px;
    transition: 0.8s;
    font-size: 1m;
    
}

div.gallery:hover {
  border: 1px solid #f90808;

}

div.gallery img {
  width: 100%;
  height: 80%;
}

div.desc {
  padding: 1px;
  text-align: center; 
  }
  
.logo {
	width: 15px;
	height: 15px;
	position: absolute;
	opacity: 1
    	transition: 1s;
}  
div.CrossCloseIcon{
position: absolute; 
width: 8vw; 
height: 5vw; 
top: 2vh; 
left: 90vw
}

.High_Lista {
top: 0px; 
left: 0px;
width: 100vw; 
Height: 2vh; 
}
.Low_Lista { 
top: 98vh; 
left: 0px;
width: 100vw; 
Height: 2vh; 
}
.Middle_Lista {
top: 2vh; 
width: 0vw; 
Height: 96vh; 
}
.odkazy {
height: 96vh;
top: 2vh; 
}



.zalozka_right {
position: absolute;
right: 10px;
bottom: 14vh;
width: 40px;
top: 2vh;
}
.zalozka_left {
  position: absolute;
  left: 10px;
  bottom: 17vh;
  width: 40px;
  top: 2vh;
}

.skiperound {
top: 20%;
width: 50px;
height: 50px;
padding-top: 20px;
font-size: 0.6em;
}
.skiperound1 {
bottom: 20%;
width: 50px;
height: 50px;
padding-top: 20px;
font-size: 0.6em;
}

.centerInside {
/**  margin: auto;
  width: 90%;**/
  height: 90%;
  padding: 2px;
  top: 10vh;
  left: 10vw;
}
.centerInsideImage {
width: 20vw;   
max-width: 195px;
min-width: 120px;         
}
}