@font-face {
    font-family: lato; 		
    src: url("Lato-Light.ttf");
    } 
   @font-face {
    font-family: framd; 
    src: url("framd.TTF");
    }  
   @font-face {
    font-family: president; 
    src: url("President CE.ttf");
    }    
   @font-face {
    font-family: graphite; 
    src: url("Graphite MM.ttf");
    }     
   @font-face {
    font-family: comic; 
    src: url("Comic_Sans_MS.ttf");
    }     
   @font-face {
    font-family: palatino; 
    src: url("pala.ttf");
    }     
   @font-face {
    font-family: verdana; 
    src: url("verdana.ttf");
    } 
     
    
body{
	font-family:lato;
	}
#ram {
	 position:fixed; 
	 border-top:1px solid RGB(150,150,150);  
	 border-bottom:1px solid RGB(150,150,150);
	 z-index:10;
	 box-shadow:1em  0em 0.8em 0.8em rgba(150, 150, 150, 0.5);
	}
#horni, #dolni {
	position:fixed; 
	left:0em;  
	width:100%;  
	z-index:200; 
	background-color:RGB(255,255,255);
	box-shadow:0.8em 0.8em 0.8em 0.8em rgba(150, 150, 150, 0.1);	
	}
#hlavicka {
	position:fixed;
	top:0em;
	}	
h1 {
	position:absolute;
	left:2em;
	margin:0.4em 0em 0em 0em;
	font-size:1.6em;
	}
h5 {
	position:absolute;
	right:0em;
	}	
#dolni {
	background:linear-gradient(to bottom, rgba(255,255,255, 0.2) , rgba(255,255,255, 0.5) , rgba(255,255,255, 1) );
	z-index:2; 
	}
#levy, #pravy {
	position:fixed; 
	height:100%; 
	z-index:100;
	}
#text, #text2 {
	position:absolute; 
	top:0px; 
	padding:0em 1.5em 0em 1.5em; 
	font-family:lato;
	text-align:justify; 
	z-index:20;
	overflow:hidden;
	transform-origin: -1em 0;
    animation-duration: 2s;
	}	
#text {
	opacity:0;
	}
#text2 {
	background-color:rgb(255,255,255);
	}	
p {
	margin:0em;
	text-indent:2em;
	}
.strana {
	display:block;
	width:100%;
	font-size:0.8em;
	text-align:right;
	}	
#animace {
	perspective: 50000px;
	}	
.vpred {
    animation-name: vpred;
	}		
.zpet {
	animation-name: zpet;
	}

	
	
 @keyframes vpred {  
   1% {transform: rotateY(0deg);   background:linear-gradient(to right, rgb(250,250,250) , rgb(255,255,255) 20%); opacity:1;}    
 100% {transform: rotateY(-180deg);background:linear-gradient(to right, rgb(200,200,200) , rgb(255,255,255) 50%); opacity:0.5;}
}
@keyframes zpet {  
   1% {transform: rotateY(-180deg);background:linear-gradient(to right, rgb(200,200,200) , rgb(255,255,255) 90%); opacity:0.2; }
 100% {transform: rotateY(0deg);   background:linear-gradient(to right, rgb(250,250,250) , rgb(255,255,255) ); opacity:1;} 
}   

#menu {
    position:absolute;
    left:0px;
    width:1.3em;
    height:1.3em;
    padding: 0.4em;
    font-size:1.2em;
    text-align:center;
    margin-top:0.2em;
    cursor:pointer;
    z-index:500;
    opacity:0.3;
    transition: opacity 0.5s;
}
#menu:hover {
    opacity:1;
}


   
#sidemenu {
    height: 100%;
    width: 0em;
    position: fixed;
    z-index: 1000;
    top: 0em;
    left: 0em;
    font-size: 1.2em;
    color: rgb(130,130,130);
    background-color: rgb(20,20,20);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 5em;
}

#sidemenu a {
    padding: 8px 8px 8px 32px;
    color: rgb(130,130,130);
    text-decoration: none;
    display: block;
    transition: 0.3s;
}

#sidemenu a:hover {
    color:rgb(240,240,240);
}

#sidemenu #close {
    position: absolute;
    top: 0em;
    right: 1em;
    font-size: 2em;
    margin-left: 4em;
	}
	
#spodek {
	position:absolute; 
	bottom:5em;
	}
#spodek div {
	background-color: rgb(20,20,20);
	}
#subcitace {
	color:rgb(250,250,250);
	width: 80%; 	
	}	
#subpismo, #subpridat, #subcitace {
	position:relative; 
	margin:0em 0em 1em 3em;	
	font-size: 0.8em;
	z-index:500;
	background-color: rgb(20,20,20);
	display:none;
	}
#spodek input, #spodek select {
	width: 80%; 
	margin:0em;
	}
	
	
		

@media screen and (max-height: 450px) {
  .sidemenu {padding-top: 1em;}
  .sidemenu a {font-size: 1.3em;}
}